:root { color-scheme: dark; --bg:#0b0f17; --card:#131a26; --card2:#18212f; --line:#223049; --text:#e8eef8; --muted:#8fa0ba; --amber:#ffb020; --good:#34d3b6; --bad:#ff6b81; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,"Segoe UI",Roboto,sans-serif; display:flex; justify-content:center; padding:16px; min-height:100vh; }
main { width:100%; max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; align-self:flex-start; margin-top:4vh; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1 { margin:0; font-size:22px; } h2 { font-size:18px; margin:14px 0 8px; } h3 { font-size:15px; margin:18px 0 6px; color:var(--muted); }
p { margin:6px 0; } .muted { color:var(--muted); } .small { font-size:13px; }
.pill { display:inline-block; padding:3px 12px; border-radius:99px; font-size:13px; background:#1c2a40; }
.pill.good { background:rgba(52,211,182,.15); color:var(--good); } .pill.bad { background:rgba(255,107,129,.15); color:var(--bad); }
.error { color:var(--bad); background:rgba(255,107,129,.1); border:1px solid rgba(255,107,129,.35); padding:10px 14px; border-radius:12px; }
button { font:inherit; font-weight:700; border:0; border-radius:12px; padding:10px 18px; background:var(--amber); color:#241800; cursor:pointer; }
button:disabled { opacity:.4; cursor:not-allowed; }
button.ghost { background:#1d2a3f; color:var(--text); font-weight:600; } button.small { padding:4px 12px; font-size:13px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.field { display:flex; flex-direction:column; gap:4px; margin:12px 0; font-size:14px; color:var(--muted); }
select, input[type=range] { width:100%; font:inherit; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px; }
.check { display:flex; gap:10px; align-items:center; margin:14px 0; cursor:pointer; }
#notice ul { padding-left:20px; margin:8px 0; } #notice li { margin:8px 0; }
.meter { position:relative; height:12px; background:var(--card2); border-radius:8px; overflow:hidden; margin:12px 0 4px; border:1px solid var(--line); }
#meterFill { height:100%; width:0; background:var(--good); transition:width .05s linear; }
#meterThr { position:absolute; top:0; bottom:0; width:2px; background:var(--amber); }
.code { font-size:56px; font-weight:800; letter-spacing:6px; text-align:center; color:var(--amber); background:var(--card2); border:1px solid var(--line); border-radius:16px; padding:14px; margin:12px 0; }
.nearby { list-style:none; padding:0; margin:6px 0; display:flex; flex-direction:column; gap:6px; }
.nearby li { display:flex; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.dot { width:10px; height:10px; border-radius:50%; background:#33435f; } .dot.on { background:var(--good); box-shadow:0 0 8px var(--good); }