:root { --blue:#1565c0; --bg:#f2f2f7; --card:#fff; --text:#111; --muted:#6b7280; --line:#e5e7eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#000; --card:#1c1c1e; --text:#f5f5f7; --muted:#9ca3af; --line:#2c2c2e; } }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px -apple-system, system-ui, sans-serif; }
.bar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 8px) 16px 8px; background:var(--bg); }
.bar h1 { margin:0; font-size:28px; }
.icon { background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:50%; width:40px; height:40px; font-size:20px; }
main { padding:0 16px calc(env(safe-area-inset-bottom) + 40px); }
#search { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:16px; margin:4px 0 12px; }
.muted { color:var(--muted); } .hidden { display:none !important; }
.cat { background:var(--card); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.catHead { width:100%; display:flex; align-items:center; gap:8px; padding:12px 14px; background:none; border:0; color:var(--text); font-size:17px; font-weight:600; text-align:left; }
.catHead .arrow { width:14px; font-size:12px; } .catHead .count { margin-left:auto; color:var(--muted); font-weight:400; }
.row { display:flex; align-items:center; gap:10px; padding:13px 14px; border-top:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-bottom:0; color:var(--text); font-size:16px; text-align:left; }
.dot { width:14px; height:14px; border-radius:50%; flex:none; }
.menu { position:fixed; top:calc(env(safe-area-inset-top) + 56px); left:12px; z-index:20; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px; display:flex; flex-direction:column; min-width:220px; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.menu button { background:none; border:0; color:var(--text); text-align:left; padding:12px; font-size:16px; border-radius:8px; }
.sheet { position:fixed; inset:0; z-index:30; background:var(--bg); overflow:auto; padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 24px); }
.sheet.dark { background:#000; color:#fff; padding:0; }
.viewTop { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pill { border:0; border-radius:999px; padding:9px 16px; font-size:16px; background:var(--card); color:var(--text); border:1px solid var(--line); }
.pill.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
#view { text-align:center; } #viewName { font-size:30px; margin:16px 0; }
.barcodeBox { background:#fff; border-radius:14px; padding:18px; margin:0 auto; max-width:520px; }
.barcodeBox canvas { width:100%; height:auto; display:block; }
.mono { font-family:ui-monospace, Menlo, monospace; font-size:20px; letter-spacing:1px; }
.form { display:flex; flex-direction:column; gap:14px; }
.form label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:14px; }
.form input, .form select { font-size:17px; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); }
.wide { padding:14px; border-radius:12px; border:0; background:var(--blue); color:#fff; font-size:17px; }
.wide.danger { background:#dc2626; }
a.wide { display:block; text-align:center; text-decoration:none; }
#viewWallet { margin-top:8px; }
.suggest { display:flex; gap:8px; flex-wrap:wrap; } .suggest button { border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); padding:6px 12px; }
.colors { display:flex; gap:12px; } .colors button { width:34px; height:34px; border-radius:50%; border:3px solid transparent; }
.colors button.on { border-color:var(--text); }
.preview { background:#fff; border-radius:12px; padding:12px; text-align:center; } .preview canvas { max-width:100%; height:auto; }
#video { width:100vw; height:100vh; object-fit:cover; }
.scanFrame { position:absolute; left:8%; right:8%; top:34%; height:26%; border:3px solid #fff; border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,.45); }
.floating { position:absolute; top:calc(env(safe-area-inset-top) + 14px); left:16px; }
.scanMsg { position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 40px); text-align:center; }