:root{
  --accent:#1d4ed8; --accent-ink:#fff;
  --bg:#f7f8fa; --surface:#fff; --ink:#14161a; --muted:#68707d;
  --line:#e7e9ee; --chip:#f0f2f6; --warn-bg:#fff8e6; --warn-line:#f5d78e; --warn-ink:#7a5b12;
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{ --accent:#3b6ae1; --bg:#0b0b0d; --surface:#141519; --ink:#f2f4f7;
         --muted:#9aa1ac; --line:#23252b; --chip:#1e2027;
         --warn-bg:#2a2314; --warn-line:#4d411f; --warn-ink:#e4c76a; }
}
:root[data-theme="dark"]{ --accent:#3b6ae1; --bg:#0b0b0d; --surface:#141519; --ink:#f2f4f7;
  --muted:#9aa1ac; --line:#23252b; --chip:#1e2027;
  --warn-bg:#2a2314; --warn-line:#4d411f; --warn-ink:#e4c76a; }
:root[data-theme="light"]{ --accent:#1d4ed8; --bg:#f7f8fa; --surface:#fff; --ink:#14161a;
  --muted:#68707d; --line:#e7e9ee; --chip:#f0f2f6;
  --warn-bg:#fff8e6; --warn-line:#f5d78e; --warn-ink:#7a5b12; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hdr{background:#000;display:flex;align-items:center;gap:12px;padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top))}
.hdr-brand img{height:24px;display:block}
.hdr-nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr-nav a{color:#c9cdd4;text-decoration:none;font-size:14px;font-weight:700}
.hdr-nav button{background:none;border:0;color:#c9cdd4;font-size:18px;cursor:pointer;padding:4px}

.wrap{max-width:640px;margin:0 auto;padding:16px 16px 64px}

.finish-chip{display:inline-block;background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:800;margin:0 0 12px}

.searchbar{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:2px solid var(--accent);border-radius:12px;padding:12px 14px}
.searchbar input{flex:1;border:0;outline:0;background:none;color:var(--ink);
  font-size:16px;font-weight:600;min-width:0}
.searchbar button{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer}

.seg{display:flex;background:var(--chip);border-radius:10px;padding:3px;margin:12px 0 16px}
.seg button{flex:1;border:0;background:none;color:var(--muted);font-size:14px;font-weight:800;
  padding:9px 0;border-radius:8px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.16)}

.hero{background:var(--accent);border-radius:var(--radius);padding:22px 18px;text-align:center}
.hero .lbl{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent-ink) 72%,transparent)}
.hero .code{font-size:clamp(56px,17vw,88px);font-weight:900;line-height:.94;
  letter-spacing:-.04em;margin:6px 0;color:var(--accent-ink)}
.hero .mdl{font-size:15px;font-weight:800;color:var(--accent-ink);
  border-top:1px solid rgba(255,255,255,.28);padding-top:12px;margin-top:10px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:9px}
.bar .t{font-size:13px;color:var(--muted);font-weight:700}
.bar .code2{background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:900;
  border-radius:8px;padding:5px 11px}
.bar .none{font-size:13px;color:var(--muted);font-weight:700}
.bar a{color:var(--accent);font-size:13px;font-weight:800;text-decoration:none}

.fits{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:9px}
.fits summary{cursor:pointer;list-style:none;padding:12px 14px;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fits summary::-webkit-details-marker{display:none}
.fits .chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 14px}
.chip{background:var(--chip);color:var(--ink);font-size:12px;font-weight:700;
  border-radius:7px;padding:5px 9px}

.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);
  border-radius:11px;padding:11px 13px;font-size:13px;font-weight:700;margin-bottom:11px}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:8px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.row:hover,.row:focus-visible{border-color:var(--accent);outline:none}
.row .nm{font-size:15px;font-weight:700}
.row .sub{font-size:12px;color:var(--muted);margin-top:3px}
.row .code3{background:var(--chip);color:var(--ink);font-size:14px;font-weight:900;
  border-radius:7px;padding:5px 10px;white-space:nowrap}

.empty{text-align:center;padding:36px 12px;color:var(--muted)}
.empty .ic{font-size:40px}
.empty .t1{font-size:17px;font-weight:800;color:var(--ink);margin-top:10px}
.empty .t2{font-size:14px;margin-top:6px;line-height:1.55}

.hint{text-align:center;color:var(--muted);font-size:14px;padding:32px 12px;line-height:1.6}
.err{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);
  border-radius:11px;padding:14px;font-size:14px;font-weight:700}

/* Icon buttons need a real hit area — used one-handed on a phone. */
.hdr-nav button,
.searchbar button{
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;flex:none
}
.searchbar{padding:6px 8px 6px 14px}