:root { --bg:#0e1116; --panel:#171c24; --line:#262d38; --on:#27c93f; --off:#6b7280; --text:#e6edf3; --accent:#3b82f6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }

.topbar { display:flex; align-items:center; gap:.7rem; padding:.6rem 1rem; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar h1 { font-size:1rem; margin:0; flex:0 0 auto; }
.summary { color:#9aa4b2; font-size:.85rem; margin-left:auto; }
.topbar button { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:.35rem .7rem; cursor:pointer; font:inherit; }
.btn-primary { background:var(--accent); border:1px solid var(--accent); color:#fff; }
.btn-ghost { background:transparent; }
.size-ctl { display:flex; align-items:center; gap:.4rem; color:#9aa4b2; font-size:.9rem; }
.size-ctl input[type=range] { width:120px; accent-color:var(--accent); cursor:pointer; }

.grid { display:grid; gap:.6rem; padding:.6rem; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 320px), 1fr)); }
.tile { position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; }
.tile.offline { opacity:.6; }
.tile video { width:100%; height:100%; object-fit:cover; background:#000; }
.tile-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:.5rem; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 40%); }
.tile-top { display:flex; align-items:flex-start; justify-content:space-between; }
.tile-actions { display:flex; gap:.3rem; opacity:0; transition:opacity .15s; }
.tile:hover .tile-actions { opacity:1; }
.tile-btn { pointer-events:auto; background:rgba(0,0,0,.55); border:1px solid var(--line); border-radius:6px; color:#fff; cursor:pointer; font-size:.85rem; line-height:1; padding:.25rem .4rem; }
.tile-btn:hover { background:rgba(0,0,0,.8); }
.badge { align-self:flex-start; font-size:.7rem; font-weight:700; padding:.15rem .45rem; border-radius:999px; letter-spacing:.04em; }
.badge.on { background:rgba(39,201,63,.2); color:var(--on); }
.badge.off { background:rgba(107,114,128,.25); color:#cbd5e1; }
.tile-meta strong { display:block; font-size:.9rem; }
.tile-meta small { color:#cbd5e1; }
.tile-stats, .tile-telemetry { font-size:.75rem; color:#cbd5e1; }

/* fullscreen viewer */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:50; }
.modal.hidden { display:none; }
.modal video { max-width:92vw; max-height:82vh; background:#000; }
.modal-caption { margin-top:.6rem; color:var(--text); }
.modal-close { position:absolute; top:1rem; right:1rem; font-size:1.2rem; background:transparent; color:#fff; border:none; cursor:pointer; }

/* form / credentials modal */
.modal2 { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:60; padding:1rem; }
.modal2.hidden { display:none; }
.card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.3rem; width:min(640px, 96vw); max-height:90vh; overflow:auto; }
.card-close { position:absolute; top:.6rem; right:.7rem; background:transparent; border:none; color:var(--text); font-size:1.1rem; cursor:pointer; }
.card h2 { margin:.1rem 0 .6rem; font-size:1.1rem; }
.muted { color:#9aa4b2; margin:.2rem 0 .8rem; }
.muted.small { font-size:.8rem; }
.form { display:flex; flex-direction:column; gap:.7rem; }
.form label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:#cbd5e1; }
.form label small { color:#7f8b9a; font-weight:400; }
.form input { padding:.55rem; border-radius:6px; border:1px solid var(--line); background:#0e1116; color:var(--text); font:inherit; }
.form-err { color:#f87171; font-size:.85rem; min-height:1em; margin:0; }
.form-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.4rem; }
.form-actions button { border-radius:6px; padding:.5rem .9rem; cursor:pointer; font:inherit; border:1px solid var(--line); color:var(--text); background:transparent; }
.form-actions .btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }

.cred-row { margin:.6rem 0; }
.cred-label { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:#9aa4b2; margin-bottom:.25rem; }
.copy { background:transparent; border:1px solid var(--line); color:var(--text); border-radius:6px; padding:.2rem .55rem; font-size:.75rem; cursor:pointer; }
.copy:hover { background:#0e1116; }
.cred-row pre { margin:0; background:#0b0e13; border:1px solid var(--line); border-radius:8px; padding:.6rem; font-size:.78rem; line-height:1.35; white-space:pre-wrap; word-break:break-all; color:#d6dee8; }

/* login */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; min-width:280px; }
.login-card input { padding:.6rem; border-radius:6px; border:1px solid var(--line); background:#0e1116; color:var(--text); }
.login-card button { padding:.6rem; border-radius:6px; border:none; background:var(--accent); color:#fff; cursor:pointer; }
.login-card .err { color:#f87171; font-size:.8rem; min-height:1em; margin:0; }

/* spectrum panel (scanner data) */
.spectrum-panel { margin:.6rem; padding:.7rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.spectrum-panel.hidden { display:none; }
.scan-block { padding:.4rem 0; border-bottom:1px solid var(--line); }
.scan-block:last-child { border-bottom:none; }
.scan-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.scan-head strong { font-size:.95rem; }
.scan-head small { color:#9aa4b2; }
.scan-actions { display:flex; gap:.3rem; margin-left:auto; }
.scan-empty { color:#9aa4b2; font-size:.85rem; margin:.4rem 0; }
.scan-occ { display:flex; gap:1rem; flex-wrap:wrap; margin:.5rem 0; }
.occ-bar { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#cbd5e1; }
.occ-label { width:2.6rem; }
.occ-track { width:90px; height:8px; background:#0b0e13; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.occ-fill { display:block; height:100%; background:var(--accent); }
.occ-val { width:2.4rem; text-align:right; }
.scan-charts { display:flex; gap:.8rem; flex-wrap:wrap; margin:.4rem 0; }
.band-chart { display:flex; flex-direction:column; gap:.2rem; }
.band-label { font-size:.7rem; color:#9aa4b2; }
.chart-canvas { background:#0b0e13; border:1px solid var(--line); border-radius:6px; }
.scan-table { width:100%; border-collapse:collapse; font-size:.78rem; margin-top:.4rem; }
.scan-table th, .scan-table td { text-align:left; padding:.25rem .5rem; border-bottom:1px solid var(--line); }
.scan-table th { color:#9aa4b2; font-weight:600; }
.scan-table .cls { font-weight:700; }

/* sound-alert toggle + new-detection highlight */
#sound-toggle.armed { color: var(--on); border-color: var(--on); }
.scan-table tr.is-new { background: rgba(244,183,64,.18); }
.scan-table tr.is-new td { font-weight: 600; }