:root{--bg: #0a0e17;--bg-soft: #0f1525;--surface: #141b2e;--surface-2: #1a2238;--border: #243049;--text: #e6ecf7;--text-dim: #8b97ad;--primary: #38bdf8;--violet: #a78bfa;--danger: #f87171;--warn: #fbbf24;--sig-5: #34d399;--sig-4: #a3e635;--sig-3: #fbbf24;--sig-2: #fb923c;--sig-1: #f87171;--bar-off: #2b3650;--radius: 14px;--mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(1200px 600px at 80% -10%,rgba(56,189,248,.08),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(167,139,250,.07),transparent 60%),var(--bg);color:var(--text);font-family:Segoe UI Variable,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:1380px;margin:0 auto;padding:22px 26px 40px;display:flex;flex-direction:column;gap:18px}.mono{font-family:var(--mono)}.dim{color:var(--text-dim)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:14px}.brand-icon{font-size:30px;filter:drop-shadow(0 0 12px rgba(56,189,248,.55))}.brand h1{font-size:21px;font-weight:700;letter-spacing:.2px}.brand-sub{font-size:12.5px;color:var(--text-dim);font-family:var(--mono)}.topbar-right{display:flex;align-items:center;gap:10px}.conn-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:1px;border:1px solid var(--border);background:var(--surface)}.conn-pill.live{color:var(--sig-5);border-color:#34d39966}.conn-pill.down{color:var(--danger);border-color:#f8717166}.conn-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 0 0 currentColor}50%{opacity:.55}}.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.stat-card{--accent: var(--primary);display:flex;align-items:center;gap:14px;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;transition:transform .15s ease,border-color .15s ease}.stat-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);opacity:.9}.stat-card:hover{transform:translateY(-2px);border-color:var(--accent)}.stat-icon{font-size:24px}.stat-body{display:flex;flex-direction:column}.stat-value{font-size:24px;font-weight:800;font-family:var(--mono);line-height:1.15}.stat-label{font-size:12.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px}.controls{display:flex;gap:10px;flex-wrap:wrap}.search-input{flex:1;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 14px;font-size:14px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #38bdf826}.select,.btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}.select:hover,.btn:hover:not(:disabled){border-color:var(--primary);background:var(--surface-2)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}.btn-warn{border-color:var(--warn);color:var(--warn)}.btn-ghost{padding:6px 11px;font-size:13px}.content{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}.content.with-panel{grid-template-columns:minmax(0,1fr) 380px}@media (max-width: 1080px){.content.with-panel{grid-template-columns:1fr}}.device-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:auto}.device-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:880px}.device-table th{text-align:left;padding:13px 16px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}.device-table td{padding:12px 16px;border-bottom:1px solid rgba(36,48,73,.5);white-space:nowrap}.device-row{cursor:pointer;transition:background .12s ease;animation:rowIn .3s ease}@keyframes rowIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.device-row:hover{background:#38bdf80f}.device-row.selected{background:#38bdf81f;box-shadow:inset 3px 0 0 var(--primary)}.device-row.offline{opacity:.5}.mac-cell{font-weight:700;letter-spacing:.5px}.rssi-cell{font-weight:700}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.status-dot.on{background:var(--sig-5);box-shadow:0 0 8px #34d399b3;animation:pulse 2s ease-in-out infinite}.status-dot.off{background:var(--bar-off)}.status-text{font-size:12.5px;color:var(--text-dim)}.signal-cell{display:flex;align-items:center;gap:10px}.signal-bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:20px}.signal-bar{width:4px;border-radius:2px;transition:background .25s ease}.quality-label{font-size:12px;font-weight:700}.sparkline{width:110px;height:28px;display:block}.sparkline-empty{color:var(--text-dim);text-align:center}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.8px;font-family:var(--mono)}.badge-paused{background:#fbbf2424;color:var(--warn);border:1px solid rgba(251,191,36,.4);padding:6px 12px}.detail-panel{background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;animation:panelIn .25s ease}@keyframes panelIn{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:none}}.detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.detail-header h2{font-size:17px;letter-spacing:.6px;margin-bottom:4px}.detail-router{font-size:12.5px;color:var(--text-dim);margin-bottom:7px}.detail-item-wide{grid-column:1 / -1}.detail-signal{display:flex;align-items:center;gap:12px}.detail-rssi{font-size:26px;font-weight:800}.rssi-chart{width:100%;height:190px;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px}.chart-label{fill:var(--text-dim);font-size:10px;font-family:var(--mono)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-item{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}.detail-key{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-dim)}.detail-val{font-size:14px;font-weight:700}.empty-state{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:60px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}.empty-radar{position:relative;width:120px;height:120px;display:grid;place-items:center;margin-bottom:8px}.radar-core{font-size:42px;z-index:1}.radar-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid rgba(56,189,248,.5);border-radius:50%;animation:radar 2.6s ease-out infinite;opacity:0}.radar-ring.r2{animation-delay:.85s}.radar-ring.r3{animation-delay:1.7s}@keyframes radar{0%{transform:scale(.35);opacity:.9}to{transform:scale(1.25);opacity:0}}.empty-state h2{font-size:20px}.empty-state p{color:var(--text-dim);max-width:520px;line-height:1.6}.empty-formats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px}.format-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:6px;text-align:left}.format-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--primary);font-weight:800}.format-card code{font-family:var(--mono);font-size:12.5px;color:var(--text)}.no-match{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:40px;text-align:center;color:var(--text-dim)}.port-chip{background:#38bdf814;border:1px solid rgba(56,189,248,.3);border-radius:999px;color:var(--primary);font-size:12px;font-weight:700;padding:3px 10px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.port-chip:hover{background:#38bdf82e;border-color:var(--primary)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05080eb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{width:min(440px,calc(100vw - 40px));background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px;animation:panelIn .2s ease;box-shadow:0 24px 60px #00000073}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:17px}.modal-hint{font-size:13px;color:var(--text-dim);line-height:1.55}.port-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.port-field{display:flex;flex-direction:column;gap:6px}.port-field-wide{grid-column:1 / -1}.port-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);font-weight:700}.port-input{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:11px 13px;font-size:16px;font-weight:700;outline:none;width:100%;transition:border-color .15s ease,box-shadow .15s ease}.port-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #38bdf826}.modal-error{background:#f871711a;border:1px solid rgba(248,113,113,.35);color:var(--danger);border-radius:10px;padding:10px 13px;font-size:13px;line-height:1.5}.modal-success{background:#34d3991a;border:1px solid rgba(52,211,153,.35);color:var(--sig-5);border-radius:10px;padding:10px 13px;font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.btn-primary{background:var(--primary);border-color:var(--primary);color:#06121d}.btn-primary:hover:not(:disabled){background:#5fcbfa;border-color:#5fcbfa}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-soft)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#324264}