:root{
  --ink:#0A3D44; --ink-2:#0F4E56; --foam:#F3F8F7; --cyan:#00AEEF; --cyan-dark:#0087BD;
  --gold:#FFC53D; --gold-dark:#C98E00; --charcoal:#15262A; --muted:#5C7A7D;
  --line:rgba(10,61,68,0.14);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--foam);color:var(--charcoal);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;}
.wrap{max-width:440px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  background:#fff;box-shadow:0 0 60px rgba(10,61,68,.08);}
.c-top{background:linear-gradient(155deg,var(--ink),var(--ink-2));color:#fff;padding:18px 22px;display:flex;align-items:center;gap:12px;}
.c-mark{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;}
.c-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;line-height:1;}
.c-sub{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:3px;}
.c-body{flex:1;padding:22px;display:flex;flex-direction:column;}
.p-step-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:1px;margin-bottom:6px;}
.p-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.p-sub{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 20px;}
.p-progress{display:flex;gap:5px;margin-bottom:20px;}
.p-progress i{flex:1;height:4px;border-radius:2px;background:var(--line);}
.p-progress i.on{background:var(--cyan);}
.field-label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:7px;display:block;}
.plate-input{width:100%;background:#fff;border:2px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--charcoal);letter-spacing:2px;margin-bottom:18px;}
.plate-input::placeholder{color:#c7d3d2;letter-spacing:1px;}
.text-field{width:100%;background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;font-weight:500;color:var(--charcoal);margin-bottom:16px;}
.text-field::placeholder{color:#a9bab9;}
.opt-tag{font-size:10px;font-weight:600;color:var(--muted);background:var(--foam);border:1px solid var(--line);padding:1px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;margin-left:4px;}
.size-toggle{display:flex;background:var(--foam);border:1.5px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px;}
.size-opt{flex:1;border:none;background:transparent;padding:11px 8px;border-radius:9px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;}
.size-opt.on{background:var(--ink);color:#fff;}
.size-opt:disabled{opacity:.4;cursor:default;}
.pkg-list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.pkg{border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;}
.pkg.sel{border-color:var(--cyan);background:rgba(0,174,239,.05);}
.pkg-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:19px;background:var(--foam);}
.pkg-info{flex:1;}
.pkg-name{font-size:14.5px;font-weight:600;color:var(--ink);}
.pkg-price{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);margin-top:2px;}
.pkg-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;position:relative;}
.pkg-radio.on{border-color:var(--cyan);}
.pkg-radio.on::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--cyan);}
.gift-banner{background:rgba(255,197,61,.18);border:1.5px solid var(--gold-dark);border-radius:14px;padding:13px 15px;display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.gift-banner .em{font-size:22px;}
.gift-banner b{color:var(--gold-dark);}
.gift-banner .t{font-size:12.5px;color:var(--charcoal);line-height:1.45;}
.qris-box{background:#fff;border-radius:16px;border:2px solid var(--line);padding:20px;text-align:center;margin-bottom:16px;}
.qris-img{width:210px;max-width:80%;height:auto;margin:0 auto 14px;display:block;border-radius:8px;}
.qris-ph{width:200px;height:200px;margin:0 auto 14px;border-radius:8px;background:
  repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px),
  repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);
  background-color:#fff;position:relative;}
.qris-ph::after{content:'';position:absolute;inset:0;margin:auto;width:38px;height:38px;background:var(--foam);border:3px solid var(--ink);border-radius:6px;}
.qris-total{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;color:var(--ink);}
.qris-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.summary{background:var(--foam);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:13px;}
.summary .r{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted);}
.summary .r b{color:var(--ink);}
.p-foot{margin-top:auto;padding-top:14px;}
.btn{border:none;border-radius:12px;padding:15px;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;width:100%;transition:opacity .15s;}
.btn:hover{opacity:.9;}
.btn-primary{background:var(--ink);color:#fff;}
.btn-cyan{background:var(--cyan);color:#fff;}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--line);margin-top:10px;}
.scan-box{border:2px dashed var(--cyan);border-radius:16px;background:#fff;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin-bottom:18px;min-height:240px;}
.scan-corner{width:160px;height:160px;position:relative;}
.scan-corner span{position:absolute;width:24px;height:24px;}
.scan-corner span:nth-child(1){top:0;left:0;border-top:3px solid var(--ink);border-left:3px solid var(--ink);border-radius:4px 0 0 0;}
.scan-corner span:nth-child(2){top:0;right:0;border-top:3px solid var(--ink);border-right:3px solid var(--ink);border-radius:0 4px 0 0;}
.scan-corner span:nth-child(3){bottom:0;left:0;border-bottom:3px solid var(--ink);border-left:3px solid var(--ink);border-radius:0 0 0 4px;}
.scan-corner span:nth-child(4){bottom:0;right:0;border-bottom:3px solid var(--ink);border-right:3px solid var(--ink);border-radius:0 0 4px 0;}
.done-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;}
.done-check{width:64px;height:64px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;}
.plate{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:2px solid var(--charcoal);border-radius:6px;padding:5px 14px 6px;}
.plate-label{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}
.plate-num{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;letter-spacing:1.5px;color:var(--charcoal);}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(92,122,125,.12);color:var(--muted);}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
.done-eta{font-size:12.5px;color:var(--muted);line-height:1.5;}
.err-msg{color:#C0292E;font-size:12.5px;margin:-8px 0 14px;font-weight:500;min-height:14px;}