:root{--ink:#172033;--muted:#6b7280;--nav:#0d1b2a;--brand:#2684ff;--surface:#f4f7fb;--line:#e2e8f0}
body{background:var(--surface);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.app-shell{min-height:100vh}.sidebar{width:245px;background:var(--nav);color:#fff;position:fixed;inset:0 auto 0 0;padding:1.4rem 1rem;z-index:20}.brand{font-weight:750;letter-spacing:-.02em;font-size:1.15rem;padding:.3rem .65rem 1.5rem}.brand span{color:#57a7ff}.sidebar .nav-link{color:#b9c4d2;border-radius:.55rem;padding:.72rem .75rem;margin:.15rem 0;font-weight:550}.sidebar .nav-link:hover,.sidebar .nav-link.active{background:#1c3047;color:#fff}.app-main{margin-left:245px;min-height:100vh}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:sticky;top:0;z-index:10}.content{padding:2rem;max-width:1600px;margin:auto}.panel{background:#fff;border:1px solid var(--line);border-radius:.85rem;box-shadow:0 2px 12px rgba(23,32,51,.04)}.metric{padding:1.25rem}.metric-label{color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.metric-value{font-size:1.75rem;font-weight:760;margin-top:.3rem}.status-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:650}.status-pill:before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#94a3b8}.status-pill.online:before{background:#22c55e;box-shadow:0 0 0 3px #dcfce7}.status-pill.offline:before{background:#ef4444;box-shadow:0 0 0 3px #fee2e2}.table>tbody>tr>td{vertical-align:middle;padding:.9rem .75rem}.table>thead>tr>th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom-width:1px;padding:.85rem .75rem}.device-icon{width:38px;height:38px;border-radius:.6rem;background:#eaf3ff;color:#2675dd;display:grid;place-items:center;font-weight:750}.onboarding{max-width:780px;margin:5vh auto}.auth-card{width:min(430px,calc(100% - 2rem));margin:10vh auto}.progress{height:.45rem}.form-label{font-weight:650;font-size:.9rem}.event-dot{width:10px;height:10px;border-radius:50%;background:#2684ff;flex:none;margin-top:.45rem}
@media(max-width:900px){.sidebar{width:78px}.brand{font-size:0}.brand:before{content:"MT";font-size:1rem}.sidebar .nav-link span{display:none}.app-main{margin-left:78px}.content{padding:1rem}.topbar{padding:0 1rem}}