:root { --bg:#f6f5f2; --fg:#1d1d1b; --muted:#6b6a66; --line:#d9d6cf; --card:#fff; --accent:#2f6f5e;
        --green:#2f6f5e; --yellow:#a87a00; --red:#a3342a; --grey:#8a8984; }
@media (prefers-color-scheme: dark) { :root { --bg:#171716; --fg:#ecebe7; --muted:#a09e98; --line:#393835;
        --card:#212120; --accent:#6cc3a8; --green:#6cc3a8; --yellow:#e0b23a; --red:#ef7a6e; --grey:#77756f; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.45 system-ui, sans-serif; }
main { max-width:560px; margin:0 auto; padding:24px 16px 96px; }
h1 { font-size:1.4rem; margin:0 0 12px; } h2 { font-size:1.05rem; margin:24px 0 8px; }
.muted { color:var(--muted); font-size:.9rem; }
button, input { font:inherit; border-radius:10px; border:1px solid var(--line); background:var(--card);
                color:var(--fg); padding:12px 14px; }
button { cursor:pointer; } button.primary { background:var(--accent); border-color:var(--accent); color:#fff; width:100%; margin-top:12px; }
input { width:100%; }
.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--card); border-top:1px solid var(--line);
        padding-bottom:env(safe-area-inset-bottom); }
.tabs a { flex:1; text-align:center; padding:14px 0; color:var(--muted); text-decoration:none; }
.tabs a.on { color:var(--accent); font-weight:600; }
.light { font-size:1.3rem; font-weight:700; padding:18px; border-radius:14px; color:#fff; text-align:center; background:var(--grey); }
.light.green { background:var(--green); } .light.yellow { background:var(--yellow); } .light.red { background:var(--red); }
.list { list-style:none; padding:0; margin:0; }
.list li { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; padding:10px 12px; }
summary { font-weight:600; } .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.dot.green { background:var(--green); } .dot.yellow { background:var(--yellow); } .dot.red { background:var(--red); } .dot.grey { background:var(--grey); }
.log li.error, .log li.refused { border-color:var(--red); }
.sheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--line);
         padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(0,0,0,.2); }
.ok { color:var(--green); } .bad { color:var(--red); }
button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }