:root { --bg:#0f172a; --card:#1e293b; --fg:#e2e8f0; --muted:#94a3b8; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --line:#334155; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,sans-serif; padding-bottom:env(safe-area-inset-bottom); }
body.center { min-height:100vh; display:grid; place-items:center; padding:16px; }
header { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:var(--bg); border-bottom:1px solid var(--line); z-index:1; }
h1 { font-size:1.1rem; margin:0; }
h2 { font-size:1.05rem; margin:0; }
h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:18px 0 8px; }
.actions { display:flex; gap:10px; align-items:center; font-size:.8rem; color:var(--muted); }
.actions form { margin:0; }
.stale { color:var(--bad); }
main { padding:12px; display:grid; gap:12px; max-width:900px; margin:0 auto; }
.card { background:var(--card); border-radius:14px; padding:16px; }
.head { display:flex; justify-content:space-between; align-items:center; }
.muted { color:var(--muted); font-size:.85rem; margin:4px 0 0; }
.pill { padding:2px 10px; border-radius:99px; font-size:.75rem; font-weight:600; }
.pill.ok { background:#14532d; color:#86efac; }
.pill.bad { background:#7f1d1d; color:#fca5a5; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.meter-top { display:flex; justify-content:space-between; font-size:.9rem; }
.bar { height:8px; background:var(--bg); border-radius:99px; overflow:hidden; margin:6px 0 4px; }
.fill { height:100%; border-radius:99px; transition:width .4s; }
.fill.ok, b.ok { background:var(--ok); } b.ok { background:none; color:var(--ok); }
.fill.warn { background:var(--warn); } b.warn { color:var(--warn); }
.fill.bad { background:var(--bad); } b.bad { background:none; color:var(--bad); }
ul { list-style:none; padding:0; margin:0; }
.services li { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); }
.services .name { flex:1; overflow-wrap:anywhere; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--ok); flex:none; }
.services li.bad .dot { background:var(--bad); }
.services li.bad .name { color:#fca5a5; }
.top li { display:flex; justify-content:space-between; padding:5px 0; font-size:.9rem; }
button { background:#3b82f6; color:#fff; border:0; border-radius:10px; padding:12px 16px; font-size:1rem; width:100%; }
button.ghost { background:none; border:1px solid var(--line); color:var(--muted); padding:5px 12px; font-size:.8rem; width:auto; }
.login { width:100%; max-width:340px; display:grid; gap:14px; }
label { display:grid; gap:6px; font-size:.85rem; color:var(--muted); }
input { background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:10px; padding:12px; font-size:1rem; }
.err { background:#7f1d1d; color:#fecaca; padding:8px 12px; border-radius:8px; margin:0; font-size:.9rem; }
.tabs { display:flex; gap:8px; padding:0 16px 8px; }
.tabs button { flex:1; background:var(--card); color:var(--muted); border:0; padding:10px; border-radius:10px; font:inherit; }
.tabs button.on { background:#2563eb; color:#fff; }
.site { margin-bottom:10px; }
.site > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; flex-wrap:wrap; }
.site > summary::-webkit-details-marker { display:none; }
.site .name { font-weight:600; overflow-wrap:anywhere; }
.dot.off { background:var(--bad); }
.svc { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); display:grid; gap:4px; }
.svc-head { display:flex; align-items:center; gap:8px; }
.path { word-break:break-all; }
.grp summary { cursor:pointer; padding:6px 0; font-family:monospace; font-size:.85rem; }
.pages { list-style:none; margin:0; padding:0 0 6px 10px; }
.pages li { display:flex; flex-direction:column; padding:3px 0; border-bottom:1px solid var(--line); }
.pages code { font-size:.8rem; word-break:break-all; }
.services li.bad .dot.idle { background:var(--muted); }
.services li.bad:has(.dot.idle) .name { color:var(--fg); }
.vpn-info { flex:1; display:flex; flex-direction:column; min-width:0; }
.vpn-state { font-weight:600; }
.vpn-state.online { color:var(--ok); } .vpn-state.offline { color:var(--muted); }
.vpn-state.revoked, .vpn-state.expired { color:var(--bad); }