:root{--ink: #0d1b24;--ink-panel: #132631;--ink-panel-2: #1b323f;--teal: #0fa3b1;--teal-hover: #0d8b97;--border: #24404d;--text: #e9eff1;--text-muted: #8fa7b0;--danger: #ff6b6b}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--ink);color:var(--text)}.login-page{display:flex;align-items:center;justify-content:center;height:100vh}.login-card{background:var(--ink-panel);padding:2.5rem;border-radius:12px;width:320px;display:flex;flex-direction:column;gap:.75rem}.login-logo{height:40px;width:auto;align-self:flex-start;margin-bottom:.25rem}.subtitle{color:var(--text-muted);margin:0 0 1rem;font-size:.9rem}.login-card label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}.login-card input{padding:.5rem;border-radius:6px;border:1px solid var(--border);background:var(--ink);color:#fff}.login-card button{margin-top:.5rem;padding:.6rem;border-radius:6px;border:none;background:var(--teal);color:#fff;cursor:pointer;font-weight:600}.login-card button:hover{background:var(--teal-hover)}.error-text{color:var(--danger);font-size:.85rem}.app-shell{display:flex;height:100vh}.sidebar{width:200px;background:var(--ink-panel);padding:1rem;display:flex;flex-direction:column;gap:.5rem;border-right:1px solid var(--border)}.brand-wordmark{height:22px;width:auto;margin:.25rem 0 1rem}.sidebar a{color:var(--text-muted);text-decoration:none;padding:.5rem;border-radius:6px}.sidebar a.active{background:#0fa3b126;color:var(--teal);font-weight:600}.sidebar-footer{margin-top:auto;font-size:.8rem;display:flex;flex-direction:column;gap:.35rem}.role-badge{display:inline-block;background:#0fa3b126;color:var(--teal);padding:.15rem .5rem;border-radius:999px;width:fit-content}.sidebar-footer button{padding:.4rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:#fff;cursor:pointer}.content{flex:1;overflow:auto;padding:1.5rem}.toolbar{display:flex;gap:1rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}.toolbar select{padding:.4rem;border-radius:6px;background:var(--ink-panel);color:#fff;border:1px solid var(--border)}.grid-size-picker{display:flex;gap:.25rem;align-items:center}.grid-size-picker button{padding:.3rem .5rem;border-radius:4px;border:1px solid var(--border);background:var(--ink-panel);color:#ccc;cursor:pointer}.grid-size-picker button.active{background:var(--teal);color:#fff;border-color:var(--teal)}.pager{display:flex;gap:.5rem;align-items:center;margin-left:auto}.video-grid{display:grid;gap:4px}.video-tile{position:relative;background:#000;aspect-ratio:16 / 9;border-radius:4px;overflow:hidden}.video-tile video{width:100%;height:100%;object-fit:cover}.video-tile-label{position:absolute;top:4px;left:6px;font-size:.7rem;background:#0d1b24bf;padding:2px 6px;border-radius:4px;z-index:2;display:flex;align-items:center;gap:6px}.backup-badge{background:#ffb02040;color:#ffb020;padding:1px 5px;border-radius:3px;font-size:.6rem;font-weight:700;letter-spacing:.03em}.video-tile-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;background:#0d1b24bf;font-size:.85rem;text-align:center;padding:.5rem}.video-tile-overlay.error{color:var(--danger);background:#0d1b24f2;font-weight:700;letter-spacing:.04em}.video-tile-retry{padding:.25rem .7rem;border-radius:4px;border:1px solid var(--border);background:var(--ink-panel-2);color:var(--text);cursor:pointer;font-size:.7rem;font-weight:600;letter-spacing:normal}.video-tile-retry:hover{border-color:var(--teal);color:#fff}.empty-state{grid-column:1 / -1;padding:3rem;text-align:center;color:var(--text-muted)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.page-header button,.devices-page button,.alerts-table button{padding:.5rem 1rem;border-radius:6px;border:none;background:var(--teal);color:#fff;cursor:pointer;font-weight:600}.page-header button:hover,.devices-page button:hover,.alerts-table button:hover{background:var(--teal-hover)}.nvr-form{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;background:var(--ink-panel);padding:1rem;border-radius:8px;margin-bottom:1rem}.nvr-form label{display:flex;flex-direction:column;font-size:.8rem;gap:.25rem}.nvr-form input{padding:.5rem;border-radius:6px;border:1px solid var(--border);background:var(--ink);color:#fff}.nvr-form button{grid-column:1 / -1}.nvr-form .hint-text{grid-column:1 / -1;margin:0}.nvr-table,.alerts-table{width:100%;border-collapse:collapse}.nvr-table th,.nvr-table td,.alerts-table th,.alerts-table td{text-align:left;padding:.6rem;border-bottom:1px solid var(--border);font-size:.9rem}.status-badge{padding:.15rem .5rem;border-radius:999px;font-size:.75rem}.status-badge.online{background:#0fa3b12e;color:var(--teal)}.status-badge.offline{background:#ff6b6b26;color:var(--danger)}.status-badge.unknown{background:var(--ink-panel-2);color:var(--text-muted)}.banner{background:var(--ink-panel-2);padding:.6rem 1rem;border-radius:6px;margin-bottom:1rem}.alerts-table tr.unacked{background:#ff6b6b14}.classification-badge{padding:.15rem .5rem;border-radius:999px;font-size:.75rem;text-transform:capitalize}.classification-badge.person{background:#ffb0202e;color:#ffb020}.classification-badge.face{background:#ff6b6b26;color:var(--danger)}.classification-badge.vehicle{background:#0fa3b12e;color:var(--teal)}.classification-badge.unclassified{background:var(--ink-panel-2);color:var(--text-muted)}.settings-form{display:flex;flex-direction:column;gap:1.25rem;max-width:640px}.settings-section{background:var(--ink-panel);padding:1rem 1.25rem;border-radius:8px}.settings-section h3{margin:0 0 .25rem}.settings-fields{display:flex;flex-direction:column;gap:.9rem;margin-top:.9rem}.settings-fields label{display:flex;flex-direction:column;font-size:.85rem;gap:.3rem}.settings-field-input{display:flex;align-items:center;gap:.5rem}.settings-field-input input{padding:.5rem;border-radius:6px;border:1px solid var(--border);background:var(--ink);color:#fff;width:120px}.settings-suffix{color:var(--text-muted);font-size:.8rem}.settings-field-hint{margin:0}.settings-actions{display:flex;gap:.75rem}.settings-actions button{padding:.5rem 1rem;border-radius:6px;border:none;cursor:pointer;font-weight:600}.settings-actions button[type=submit]{background:var(--teal);color:#fff}.settings-actions button[type=submit]:hover:not(:disabled){background:var(--teal-hover)}.settings-actions button:disabled{opacity:.5;cursor:not-allowed}.settings-actions .settings-reset{background:var(--ink-panel-2);color:var(--text-muted)}.settings-actions .settings-reset:hover:not(:disabled){color:#fff}.video-wall{display:flex;flex-direction:column;height:100vh;background:#000}.video-wall-bar{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--ink-panel);border-bottom:1px solid var(--border);flex-wrap:wrap}.video-wall-exit{color:var(--teal);text-decoration:none;font-weight:600;font-size:.85rem}.video-wall-status{color:var(--text-muted);font-size:.85rem}.video-wall-controls{display:flex;gap:.5rem;margin-left:auto}.video-wall-controls button{padding:.35rem .7rem;border-radius:6px;border:1px solid var(--border);background:var(--ink-panel-2);color:#fff;cursor:pointer;font-size:.8rem}.video-wall-controls button:hover{border-color:var(--teal)}.video-wall-grid{flex:1;display:grid;gap:2px;padding:2px;overflow:hidden}.access-panel{background:var(--ink-panel);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-top:.5rem}.access-panel h4{margin:0 0 .75rem;font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.access-list{display:flex;flex-direction:column;gap:.5rem}.access-row{display:flex;align-items:center;gap:.6rem;font-size:.9rem}.access-row .access-role{color:var(--text-muted);font-size:.75rem}.access-empty{color:var(--text-muted);font-size:.85rem}.hint-text{color:var(--text-muted);font-size:.85rem;margin:.25rem 0 1rem}.health-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}.health-card{background:var(--ink-panel);border:1px solid var(--border);border-radius:8px;padding:1rem;border-left:4px solid var(--text-muted)}.health-card.ok{border-left-color:var(--teal)}.health-card.down{border-left-color:var(--danger)}.health-card-title{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}.health-card-value{font-size:1.4rem;font-weight:700;margin-top:.25rem}.health-card-meta{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}.reports-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem;align-items:start}.reports-table tr:hover{background:var(--ink-panel-2)}.report-detail{background:var(--ink-panel);border:1px solid var(--border);border-radius:8px;padding:1.25rem}.report-detail h4{margin-top:0}.banner code{background:var(--ink-panel-2);padding:.1rem .35rem;border-radius:4px}.channel-list{display:flex;flex-direction:column;gap:.6rem}.channel-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:.6rem;align-items:center;font-size:.85rem}.channel-row input{padding:.4rem;border-radius:6px;border:1px solid var(--border);background:var(--ink);color:#fff;font-size:.8rem}.channel-row button{padding:.35rem .7rem;font-size:.78rem}.sitemap-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.5rem;align-items:start}.sitemap-image-wrap{position:relative;background:var(--ink-panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:crosshair;line-height:0}.sitemap-image-wrap img{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none}.map-hotspot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--teal);border:2px solid #fff;color:#fff;font-size:.75rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #00000080}.map-hotspot:hover{background:var(--teal-hover)}.map-hotspot.pending{background:#ffb020;pointer-events:none}.sitemap-sidebar{display:flex;flex-direction:column;gap:1rem}.sitemap-sidebar select{width:100%;padding:.5rem;border-radius:6px;background:var(--ink);color:#fff;border:1px solid var(--border)}.sitemap-preview-tile{aspect-ratio:16 / 9;border-radius:6px;overflow:hidden}.sitemap-preview-tile .video-tile{margin:0;aspect-ratio:auto;height:100%}