:root{color:#f4f1e9;font-synthesis:none;text-rendering:optimizelegibility;--gold:#d7b466;--gold-soft:#d7b46624;--surface:#17191e;--surface-2:#1e2128;--line:#ffffff17;--muted:#a5a8b0;--danger:#e06d6d;--safe:#64c995;--warning:#e3b85e;background:#101114;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top,#20232a 0,#101114 42%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}.shell{width:min(920px,100%);min-height:100vh;padding:max(20px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom));margin:0 auto}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:14px;display:flex}h1,h2,p{margin:0}h1{letter-spacing:-.035em;font-size:clamp(1.65rem,5vw,2.45rem)}h2{font-size:1.35rem}.subtitle,footer,.area-card__meta,.global-card p{color:var(--muted)}.eyebrow{color:var(--gold);letter-spacing:.18em;margin-bottom:7px;font-size:.68rem;font-weight:800;display:block}.identity{text-align:right;border:1px solid var(--line);background:#ffffff06;border-radius:14px;min-width:130px;padding:10px 12px}.identity strong,.identity span{display:block}.identity span{color:var(--gold);margin-top:3px;font-size:.72rem}.status-strip{border:1px solid var(--line);color:var(--muted);background:#0000002e;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;padding:9px 11px;font-size:.68rem;font-weight:750;display:flex}.connectivity,.phase{align-items:center;gap:6px;display:inline-flex}.connectivity i{background:currentColor;border-radius:50%;width:8px;height:8px;box-shadow:0 0 12px}.connectivity--online{color:var(--safe)}.connectivity--updating{color:var(--warning)}.connectivity--offline{color:var(--danger)}.phase--prechecking,.phase--executing{color:var(--warning)}.phase--confirmed{color:var(--safe)}.phase--failed{color:var(--danger)}.global-card,.area-card{border:1px solid var(--line);background:linear-gradient(145deg,#ffffff0b,#ffffff03);box-shadow:0 18px 50px #00000038}.global-card{border-radius:20px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:20px;display:flex}.refresh-button{color:var(--gold);background:var(--gold-soft);border:1px solid #d7b46659;border-radius:12px;padding:10px 12px;font-size:.72rem;font-weight:800}.global-actions{grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;display:grid}.command,.area-action{letter-spacing:.035em;cursor:pointer;border:0;border-radius:15px;min-height:52px;font-weight:900;transition:transform .15s,opacity .15s}.command:active,.area-action:active{transform:scale(.985)}.command:disabled,.area-action:disabled,.refresh-button:disabled{cursor:default;opacity:.38}.command--arm{color:#07150e;background:linear-gradient(135deg,#3a9b6d,#63c995)}.command--disarm{color:#1d0709;background:linear-gradient(135deg,#b84e55,#e06d6d)}.areas-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.area-card{border-radius:20px;padding:18px}.area-card__header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.area-card__meta{justify-content:space-between;gap:10px;padding:18px 0;font-size:.8rem;display:flex}.state-pill{border-radius:999px;padding:7px 10px;font-size:.68rem;font-weight:900}.state-pill--armed{color:var(--safe);background:#64c9951f;border:1px solid #64c99540}.state-pill--disarmed{color:var(--danger);background:#e06d6d1f;border:1px solid #e06d6d40}.area-action{background:var(--surface-2);color:#fff;border:1px solid var(--line);width:100%}.area-action--danger{color:#ffb0b0}.area-action--safe{color:#9ee2bd}.read-only{border:1px dashed var(--line);min-height:52px;color:var(--muted);border-radius:15px;justify-content:center;align-items:center;display:flex}.error-banner,.notice-banner{border-radius:14px;margin:14px 0;padding:14px;line-height:1.4}.error-banner{color:#ffc1c1;background:#e06d6d1a;border:1px solid #e06d6d66}.notice-banner{color:#f4d58e;background:#e3b85e17;border:1px solid #e3b85e59}.notice-banner--confirmed{color:#a7e9c5;background:#64c99517;border-color:#64c99559}.notice-banner--failed{color:#ffc1c1;background:#e06d6d17;border-color:#e06d6d59}.loading-panel,.fatal-panel{border:1px solid var(--line);background:var(--surface);text-align:center;border-radius:22px;margin-top:22vh;padding:28px}.fatal-panel h1{margin-bottom:10px}.fatal-panel p{color:var(--muted);line-height:1.5}footer{text-align:center;gap:5px;margin-top:20px;font-size:.72rem;display:grid}@media (width<=620px){.topbar{align-items:stretch}.identity{min-width:105px}.areas-grid{grid-template-columns:1fr}.global-card{align-items:flex-start}.status-strip{flex-direction:column;align-items:flex-start}}