/* PrintKaro — fresh print-shop design. Mobile-first, big & bold. */
:root{
  --ink:#0a2e2a; --ink2:#134741;
  --org:#ff6b1a; --org-d:#e55a0d;
  --grn:#12b76a; --paper:#fff9f2; --card:#ffffff;
  --mut:#7a8a99; --line:#f0e4d4; --danger:#e5484d;
  --r:20px; --sh:0 8px 28px rgba(255,107,26,.14);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Hind',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.55;min-height:100vh}
.wrap{max-width:560px;margin:0 auto;padding:0 18px 90px}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em}
.hint{color:var(--mut);font-size:14.5px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;
  font-family:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:active{transform:scale(.97)}
.btn-org{background:linear-gradient(135deg,var(--org),var(--org-d));color:#fff;box-shadow:var(--sh)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn-big{width:100%;padding:18px;font-size:20px;border-radius:18px}
.btn:disabled{opacity:.5;pointer-events:none}

/* cards */
.card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:0 4px 18px rgba(10,46,42,.07);border:1px solid var(--line)}
.stepdot{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:none}

/* hero */
.hero{text-align:center;padding:44px 0 10px;position:relative;overflow:hidden}
.hero h1{font-size:42px;font-weight:700;margin:14px 0 6px}
.hero h1 .o{color:var(--org)}
.hero p{color:var(--mut);font-size:18px;max-width:420px;margin:0 auto}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:24px}
.logo .mk{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--org),var(--org-d));
  display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:var(--sh)}

/* printer animation */
.printer{width:200px;height:150px;margin:26px auto 6px;position:relative}
.printer .top{position:absolute;top:0;left:20px;right:20px;height:56px;background:var(--ink);border-radius:14px}
.printer .slot{position:absolute;top:48px;left:40px;right:40px;height:10px;background:#000;border-radius:5px}
.printer .body{position:absolute;top:56px;left:0;right:0;height:70px;background:linear-gradient(180deg,#1a5a52,var(--ink2));border-radius:16px}
.printer .body::after{content:'● ● ●';position:absolute;top:12px;right:18px;color:var(--grn);font-size:12px;letter-spacing:4px;animation:blink 1.6s infinite}
.printer .paper{position:absolute;top:-34px;left:55px;width:90px;height:60px;background:#fff;border:2px solid var(--line);
  border-radius:4px;animation:feed 3s ease-in-out infinite;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.printer .out{position:absolute;bottom:-6px;left:55px;width:90px;height:44px;background:#fff;border:2px solid var(--line);
  border-radius:4px;animation:comeout 3s ease-in-out infinite;overflow:hidden}
.printer .out::before{content:'▬ ▬▬ ▬';position:absolute;top:8px;left:10px;right:10px;color:#c9d4de;font-size:11px;line-height:1.9}
@keyframes feed{0%,55%,100%{transform:translateY(0);opacity:1}70%,92%{transform:translateY(46px);opacity:0}93%{transform:translateY(-6px);opacity:0}}
@keyframes comeout{0%,70%{transform:translateY(-30px);opacity:0}88%,100%{transform:translateY(0);opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* steps */
.steps{display:grid;gap:14px;margin:26px 0}
.step{display:flex;gap:14px;align-items:flex-start;animation:rise .5s both}
.step:nth-child(2){animation-delay:.12s}.step:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.step b{font-size:18px}.step p{color:var(--mut);font-size:15px;margin-top:2px}

/* forms */
.fld{margin-bottom:14px}
.fld label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.inp{width:100%;padding:15px 16px;border:2px solid var(--line);border-radius:14px;font-family:inherit;
  font-size:17px;background:#fff;color:var(--ink);outline:none}
.inp:focus{border-color:var(--org)}
select.inp{appearance:none}

/* choice cards (radio) */
.pick{display:grid;gap:10px}
.opt{display:flex;gap:14px;align-items:center;background:#fff;border:2.5px solid var(--line);border-radius:16px;
  padding:16px;cursor:pointer;transition:border-color .15s}
.opt.sel{border-color:var(--org);background:#fff7f0}
.opt .ic{font-size:32px}
.opt b{font-size:17px}.opt small{color:var(--mut);display:block;font-size:14px}

/* template chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.chip{border:2.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;font-weight:600;
  font-size:15px;cursor:pointer;display:flex;gap:8px;align-items:center;font-family:inherit;color:var(--ink)}
.chip.sel{border-color:var(--org);background:#fff3e8}

/* upload drop */
.drop{border:3px dashed var(--org);border-radius:22px;background:#fff8f1;padding:38px 20px;text-align:center;cursor:pointer}
.drop .big{font-size:52px;display:block;margin-bottom:8px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.drop b{font-size:20px;display:block}.drop small{color:var(--mut)}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;font-weight:700;font-size:14.5px}
.pill.ok{background:#e6f9f0;color:#0d9a56}.pill.bad{background:#fdeaea;color:var(--danger)}.pill.wait{background:#fff3e2;color:#b7791f}

/* qr */
.qrbox{background:#fff;padding:18px;border-radius:22px;display:inline-block;box-shadow:var(--sh);border:1px solid var(--line)}
.spin{width:46px;height:46px;border:5px solid var(--line);border-top-color:var(--org);border-radius:50%;
  animation:sp 1s linear infinite;margin:20px auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* wizard progress */
.prog{display:flex;gap:8px;margin:18px 0}
.prog i{flex:1;height:8px;border-radius:99px;background:var(--line)}
.prog i.on{background:var(--org)}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;
  padding:13px 22px;border-radius:14px;font-weight:600;z-index:99;transition:transform .25s;max-width:92vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* footer nav */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
  display:flex;z-index:50;max-width:560px;margin:0 auto}
.tabbar a{flex:1;text-align:center;padding:12px 4px 14px;text-decoration:none;color:var(--mut);font-size:12.5px;font-weight:600}
.tabbar a .t{font-size:22px;display:block}
.tabbar a.on{color:var(--org)}

.sec{margin:30px 0}
.sec h2{font-size:26px;margin-bottom:14px;text-align:center}
.center{text-align:center}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.shophead{background:var(--ink);color:#fff;border-radius:0 0 28px 28px;padding:26px 20px 30px;text-align:center;margin:0 -18px 20px}
.shophead h2{font-size:24px}.shophead p{opacity:.75;font-size:14.5px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.kv:last-child{border:0}
canvas.prev{width:100%;border-radius:14px;display:block}