:root { --bg:#f4f6f8; --card:#fff; --fg:#17202a; --muted:#5d6d7e; --accent:#1f6feb; --accent-fg:#fff;
        --err-bg:#fdecea; --err-fg:#8a1c14; --line:#d5dbe1; --ok:#1a7f37; --wait:#9a6700; --no:#8a1c14; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1419; --card:#161c23; --fg:#e6edf3; --muted:#8b98a5; --accent:#4c8dff; --accent-fg:#fff;
          --err-bg:#3b1715; --err-fg:#ffb4ab; --line:#2d3640; --ok:#56d364; --wait:#e3b341; --no:#ff7b72; }
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
       background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       padding:16px; }
.card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:28px 24px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--muted); margin-bottom:18px; }
.mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--accent);
        color:var(--accent-fg); font-weight:700; }
h1 { font-size:1.4rem; margin:0 0 14px; }
h2 { font-size:1.05rem; margin:22px 0 8px; }
label { display:block; margin:12px 0; font-weight:500; }
input[type=email], input[type=password], input[type=text] { display:block; width:100%; margin-top:6px; padding:10px 12px;
  font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { width:100%; margin-top:10px; padding:11px 14px; font:inherit; font-weight:600; border:0; border-radius:8px;
         background:var(--accent); color:var(--accent-fg); cursor:pointer; }
button.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.small { width:auto; margin:0; padding:5px 10px; font-size:.85rem; }
.error { background:var(--err-bg); color:var(--err-fg); padding:10px 12px; border-radius:8px; }
.hint, .muted, .foot { color:var(--muted); font-size:.9rem; }
.foot { margin-top:14px; font-size:.8rem; }
.links { margin-top:16px; font-size:.95rem; }
a { color:var(--accent); }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.products { list-style:none; padding:0; margin:0; }
.products li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0;
               border-bottom:1px solid var(--line); }
.tag { font-size:.85rem; font-weight:600; }
.tag.ok { color:var(--ok); } .tag.wait { color:var(--wait); } .tag.no { color:var(--no); }
form.inline { margin:0; }
[hidden] { display:none !important; }
h3 { font-size:.95rem; margin:16px 0 6px; }
.small { font-size:.8rem; }
.ok-box { background:transparent; border:1px solid var(--ok); color:var(--ok); padding:10px 12px; border-radius:8px; }
.rows { list-style:none; padding:0; margin:0; }
.rows li, div.rows { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0;
                     border-bottom:1px solid var(--line); }
.codes { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
code { font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
.codes code, code.key { background:var(--bg); padding:4px 6px; border-radius:6px; }
.qr { text-align:center; } .qr img { background:#fff; border-radius:8px; max-width:100%; height:auto; }
details.more { margin:14px 0; } details.more summary { cursor:pointer; color:var(--accent); }