:root,:root[data-theme=dark]{--bg: #0b1120;--bg-glow: radial-gradient(1200px 600px at 80% -10%, rgba(56, 130, 246, .13), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(45, 212, 191, .08), transparent 60%);--surface: #111a2e;--surface-2: #182338;--sidebar-bg: rgba(11, 17, 32, .72);--input-bg: rgba(11, 17, 32, .55);--border: rgba(148, 163, 184, .14);--border-strong: rgba(148, 163, 184, .28);--text: #e6ebf4;--text-2: #9aa8bf;--text-3: #64748b;--accent: #38bdf8;--accent-2: #2563eb;--accent-grad: linear-gradient(135deg, #38bdf8, #2563eb);--btn-ink: #06121f;--ok: #34d399;--ok-bg: rgba(52, 211, 153, .13);--ok-bd: rgba(52, 211, 153, .35);--warn: #fbbf24;--warn-bg: rgba(251, 191, 36, .13);--warn-bd: rgba(251, 191, 36, .35);--bad: #fb7185;--bad-bg: rgba(251, 113, 133, .13);--bad-bd: rgba(251, 113, 133, .35);--accent-bg: rgba(56, 189, 248, .12);--accent-bd: rgba(56, 189, 248, .35);--radius: 14px;--radius-sm: 9px;--shadow: 0 8px 30px rgba(2, 6, 23, .45)}:root[data-theme=light]{--bg: #eaeef5;--bg-glow: radial-gradient(1200px 600px at 80% -10%, rgba(56, 130, 246, .1), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(45, 212, 191, .08), transparent 60%);--surface: #ffffff;--surface-2: #f1f5f9;--sidebar-bg: rgba(255, 255, 255, .85);--input-bg: #f8fafc;--border: rgba(15, 23, 42, .1);--border-strong: rgba(15, 23, 42, .18);--text: #0f172a;--text-2: #475569;--text-3: #8592a6;--accent: #0284c7;--accent-2: #2563eb;--accent-grad: linear-gradient(135deg, #0ea5e9, #2563eb);--btn-ink: #ffffff;--ok: #047857;--ok-bg: rgba(5, 150, 105, .12);--ok-bd: rgba(5, 150, 105, .35);--warn: #b45309;--warn-bg: rgba(180, 83, 9, .1);--warn-bd: rgba(180, 83, 9, .32);--bad: #dc2626;--bad-bg: rgba(220, 38, 38, .1);--bad-bd: rgba(220, 38, 38, .32);--accent-bg: rgba(2, 132, 199, .1);--accent-bd: rgba(2, 132, 199, .32);--shadow: 0 8px 28px rgba(15, 23, 42, .1)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,system-ui,sans-serif;background:var(--bg);background-image:var(--bg-glow);background-attachment:fixed;color:var(--text);font-size:15px;line-height:1.5;transition:background-color .2s,color .2s}h1,h2,h3{font-weight:650;letter-spacing:-.01em}.layout{display:grid;grid-template-columns:232px 1fr;min-height:100vh}.sidebar{border-right:1px solid var(--border);background:var(--sidebar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;padding:0 6px}.brand-mark-img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#0b1120;box-shadow:0 4px 14px #2563eb59}.brand-name{font-weight:700;font-size:.98rem;line-height:1.15}.brand-sub{font-size:.68rem;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}.nav{display:flex;flex-direction:column;gap:3px}.nav-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:12px 10px 4px}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);background:none;border:none;color:var(--text-2);font-size:.88rem;font-weight:500;cursor:pointer;text-align:left;width:100%;text-decoration:none;transition:background .15s,color .15s}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{background:linear-gradient(90deg,var(--accent-bg),transparent);color:var(--accent);font-weight:600}.nav-item .ico{width:18px;text-align:center}.nav-item .ext{margin-left:auto;font-size:.75rem;opacity:.7}.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}.user-card{display:flex;align-items:center;gap:10px;padding:4px 6px}.avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--accent)}.user-meta{min-width:0}.user-meta .name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-meta .role{font-size:.68rem;color:var(--text-3)}.signout{margin-left:auto;background:none;border:none;color:var(--text-3);cursor:pointer;font-size:1rem;padding:6px;border-radius:8px}.signout:hover{color:var(--bad);background:var(--surface-2)}.theme-toggle{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);background:none;border:none;color:var(--text-2);font-size:.85rem;font-weight:500;cursor:pointer;width:100%;font-family:inherit}.theme-toggle:hover{background:var(--surface-2);color:var(--text)}.theme-toggle .tt-icon{width:18px;text-align:center}.theme-toggle.compact{width:auto;border:1px solid var(--border-strong);border-radius:999px;padding:8px 10px;background:var(--surface)}.content{padding:26px 32px 60px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}.topbar h1{font-size:1.35rem;margin:0}.topbar .crumb{color:var(--text-3);font-size:.8rem;margin-top:2px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;align-items:start}.grid-full{grid-column:1 / -1}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);animation:rise .25s ease both}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.card h2{margin:0 0 14px;font-size:1.02rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.card h3{font-size:.85rem;margin:20px 0 10px;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}.tag{font-size:.68rem;font-weight:500;color:var(--text-3);border:1px solid var(--border);background:var(--surface-2);border-radius:6px;padding:2px 8px}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;animation:rise .25s ease both;box-shadow:var(--shadow)}.tile .t-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}.tile .t-value{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin-top:4px}.tile .t-sub{font-size:.75rem;color:var(--text-2);margin-top:2px}.tile.alerting{border-color:var(--bad-bd)}.tile.alerting .t-value{color:var(--bad)}.muted{color:var(--text-2)}.small{font-size:.78rem}.center{display:grid;place-items:center;height:100vh}.error{background:var(--bad-bg);border:1px solid var(--bad-bd);color:var(--bad);border-radius:var(--radius-sm);padding:9px 13px;margin:10px 0;font-size:.83rem}.ok-msg{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok);border-radius:8px;padding:7px 11px;font-size:.8rem}input,select{background:var(--input-bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);padding:10px 13px;font-size:.88rem;width:100%;font-family:inherit;transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--text-3)}input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}button{font-family:inherit;background:var(--accent-grad);color:var(--btn-ink);border:none;border-radius:var(--radius-sm);padding:10px 18px;font-weight:650;font-size:.87rem;cursor:pointer;transition:filter .15s,transform .1s}button:hover:not(:disabled){filter:brightness(1.12)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.55;cursor:default}button.ghost{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border-strong);font-weight:550}button.ghost:hover:not(:disabled){color:var(--text);border-color:var(--accent);filter:none}button.danger-ghost{background:none;color:var(--text-3);border:1px solid transparent;font-weight:550}button.danger-ghost:hover{color:var(--bad);border-color:var(--bad-bd)}button.link{background:none;border:none;color:var(--accent);padding:0;font-weight:600;cursor:pointer;font-size:.88rem}button.link:hover{text-decoration:underline;filter:none}.small-btn{padding:5px 12px;font-size:.75rem}.lookup{display:flex;gap:8px;margin-bottom:14px}.lookup input{flex:1}.lookup button{flex-shrink:0}.company-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.company-form input,.company-form select{flex:1;min-width:150px}.company-form button{flex-shrink:0}select{background:var(--input-bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);padding:10px 12px}.login-layout{display:grid;grid-template-columns:46% 54%;min-height:100vh}.login-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0b1120,#111a2e 60%,#0d1b30);color:#e6ebf4;display:flex;align-items:center;justify-content:center;padding:40px}.login-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;color:var(--accent);opacity:.16}.login-hero-bg .circuit{width:100%;height:100%}.login-hero-bg .nodes circle{animation:pulse 3s ease-in-out infinite}.login-hero-bg .nodes circle:nth-child(2n){animation-delay:1.2s}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.login-hero-content{position:relative;z-index:1;max-width:420px;text-align:center}.login-logo{width:100%;max-width:360px;height:auto;border-radius:18px;margin-bottom:10px}.login-hero-content h2{font-size:1.35rem;margin:6px 0 22px;font-weight:650}.login-features{list-style:none;padding:0;margin:0;text-align:left;display:inline-block}.login-features li{padding:8px 0;color:#b9c4d8;font-size:.92rem}.login-main{position:relative;display:flex;align-items:center;justify-content:center;padding:32px}.login-topbar{position:absolute;top:20px;right:24px}.login-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:15px;padding:34px}.login-logo-sm{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#0b1120;align-self:center}.login-card h1{font-size:1.35rem;margin:0;text-align:center}.login-card .sub{text-align:center;margin:-10px 0 4px}.login-card label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:550;color:var(--text-2)}.pill{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;border-radius:999px;padding:3px 10px;font-weight:650;letter-spacing:.02em}.pill.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd)}.pill.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd)}.pill.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-bd)}.pill.role{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-bd)}table.companies{width:100%;font-size:.86rem;border-collapse:collapse}table.companies th{text-align:left;color:var(--text-3);font-weight:550;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--border-strong)}table.companies td{padding:11px 10px;border-bottom:1px solid var(--border)}table.companies tbody tr{transition:background .12s}table.companies tbody tr:hover td{background:var(--accent-bg)}tr.active-row td{background:var(--accent-bg)!important}.device{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);padding:14px 16px;margin-top:10px;transition:border-color .15s}.device:hover{border-color:var(--border-strong)}.device-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.device table{width:100%;font-size:.83rem;border-collapse:collapse}.device td{padding:3px 0}.device td:first-child{color:var(--text-3);width:110px}.volume{margin-top:10px;font-size:.78rem;color:var(--text-2)}.bar{height:6px;background:var(--input-bg);border-radius:999px;overflow:hidden;margin-top:5px}.bar-fill{height:100%;background:var(--accent-grad);border-radius:999px}.remote-btn,.manage-btn,.mesh-btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-sm);padding:6px 13px;font-size:.76rem;font-weight:650;text-decoration:none;transition:background .15s}.remote-btn{margin-left:auto;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd)}.remote-btn:hover{filter:brightness(1.1)}.manage-btn{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-bd)}.manage-btn:hover{filter:brightness(1.1)}.mesh-btn{background:var(--surface);color:var(--text-2);border:1px solid var(--border-strong)}.mesh-btn:hover{color:var(--text);border-color:var(--accent)}.sec-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}.stats{display:flex;gap:12px;margin:14px 0}.stat{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center}.stat-value{display:block;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}.stat-label{font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}.app-list{list-style:none;padding:0;margin:0;font-size:.86rem}.app-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 2px;border-top:1px solid var(--border)}.app-list li:first-child{border-top:none}.user-list{display:flex;flex-direction:column;gap:8px}.user-row{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}.user-avatar{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--accent-grad);color:var(--btn-ink);display:grid;place-items:center;font-weight:700;font-size:.8rem}.user-info{min-width:0;flex:1}.user-name{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.user-sub{font-size:.8rem;color:var(--text-2)}.user-meta-line{font-size:.72rem;color:var(--text-3);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap}.user-meta-line .dot{opacity:.5}.appbars{display:flex;flex-direction:column;gap:7px}.appbar{display:grid;grid-template-columns:170px 1fr 70px;align-items:center;gap:10px}.appbar-name{font-size:.82rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appbar-track{height:18px;background:var(--surface-2);border-radius:5px;overflow:hidden;border:1px solid var(--border)}.appbar-fill{height:100%;background:var(--accent-grad);border-radius:4px 0 0 4px}.appbar-val{font-size:.78rem;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}.setup-box{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:14px 16px;margin:12px 0}.setup-list{margin:0 0 10px;padding-left:20px;font-size:.85rem;color:var(--text-2)}.setup-list li{padding:3px 0}.setup-list code,.token{font-family:Consolas,monospace;font-size:.78rem;background:var(--input-bg);border:1px solid var(--border);padding:2px 6px;border-radius:4px;color:var(--accent)}.token-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}.token-label{font-size:.8rem;color:var(--text-2)}.token{word-break:break-all}.pw-form{display:flex;flex-direction:column;gap:7px}.pw-form input{font-size:.82rem;padding:8px 10px}.pw-actions{display:flex;gap:6px}.pw-actions button{flex:1;padding:7px;font-size:.8rem}.install-block{margin-bottom:0}.install-block .install-btn{width:100%}.install-btn{font-size:.82rem}.ios-hint{margin:8px 0 0}.bell-wrap{position:relative}.bell{position:relative;font-size:1rem;padding:9px 12px}.badge{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;border-radius:999px;font-size:.64rem;padding:1px 6px;font-weight:700;border:2px solid var(--bg)}.bell-menu{position:absolute;right:0;top:48px;width:380px;max-height:60vh;overflow-y:auto;z-index:30;box-shadow:0 18px 50px #02061780}.notif{border-top:1px solid var(--border);padding:12px 0;font-size:.84rem}.notif:first-of-type{border-top:none}.notif p{margin:6px 0}.notif.acked{opacity:.45}.notif.sev-critical{border-left:3px solid var(--bad);padding-left:10px}.notif.sev-major{border-left:3px solid var(--warn);padding-left:10px}.notif-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--border)}.nav{flex-direction:row;flex-wrap:wrap}.nav-label{display:none}.sidebar-foot{margin:0 0 0 auto;border:none;padding:0;flex-direction:row;align-items:center}.content{padding:18px}.theme-toggle span:not(.tt-icon){display:none}.login-layout{grid-template-columns:1fr}.login-hero{display:none}}
