:root {
  color-scheme: light;
  --bg:#f7fafd; --surface:#fff; --surface-soft:#f7fafd; --surface-strong:#eaf4ff;
  --text:#122033; --text-soft:#43576f; --muted:#6f8094; --muted-strong:#586d83;
  --border:#e4ecf4; --border-strong:#cfdeeb; --brand:#087ef5; --brand-strong:#075dbb;
  --brand-soft:#eaf4ff; --success:#16a36a; --success-soft:#eaf8f1;
  --warning:#b87708; --warning-soft:#fff7e8; --danger:#e74949; --danger-soft:#fff0f0;
  --sidebar-width:220px; --topbar-height:68px; --radius:8px;
}
html[data-theme="dark"] { color-scheme:dark; --bg:#17191d; --surface:#202328; --surface-soft:#25292f; --surface-strong:#2c3540; --text:#f0f3f7; --text-soft:#c0cbd6; --muted:#9caabb; --muted-strong:#c0cbd6; --border:#343b44; --border-strong:#485361; --brand:#65b0ff; --brand-strong:#8fc6ff; --brand-soft:#25374a; --success-soft:#20372c; --warning-soft:#3a3223; --danger-soft:#3b2628; }
*,*::before,*::after { box-sizing:border-box; letter-spacing:0; }
html { min-width:320px; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:not-allowed; opacity:.5; }
button,a,input,select,summary { outline-offset:3px; }
:focus-visible { outline:2px solid var(--brand); }
button { transition:background .16s,border-color .16s,color .16s; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
[hidden],.is-filtered-out { display:none!important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:26px; font-weight:600; line-height:1.25; }
h2 { font-size:17px; font-weight:600; }
h3 { font-size:14px; font-weight:600; }
strong,b { font-weight:600; }
.icon { width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.primary-button,.secondary-button,.danger-button,.ghost-button,.action-button,.event-mini-button,.event-segment-button,.event-jump-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 13px; border:1px solid var(--border); border-radius:6px; background:var(--surface); font-size:13px; font-weight:500; white-space:normal; text-align:center; }
.primary-button,.action-primary { color:#fff; background:var(--brand); border-color:var(--brand); }
.primary-button:hover,.action-primary:hover { background:var(--brand-strong); }
.secondary-button:hover,.ghost-button:hover,.action-button:not(.action-primary):hover { border-color:var(--brand); color:var(--brand); }
.danger-button { color:var(--danger); background:var(--surface); border-color:var(--border); }
.danger-button:hover { background:var(--danger-soft); border-color:var(--danger); }
.text-button,.login-link { border:0; background:none; color:var(--brand); font-size:12px; padding:4px; }
.icon-button,.round-control,.view-button,.media-icon-button { display:inline-grid; place-items:center; width:36px; height:36px; flex:0 0 36px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted-strong); }
.icon-button:hover,.view-button:hover { background:var(--brand-soft); color:var(--brand); }
.input-control,input[type="date"],input[type="number"],input[type="email"],.timeline-camera { min-height:38px; width:100%; border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:8px 10px; color:var(--text); }
input[type="range"],input[type="checkbox"] { accent-color:var(--brand); }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); background:var(--surface); border-right:1px solid var(--border); z-index:40; display:flex; flex-direction:column; }
.sidebar-head { height:90px; display:flex; align-items:center; padding:14px 21px; }
.brand { border:0; background:none; padding:0; width:176px; }
.brand-logo { width:100%; height:59px; object-fit:contain; }
.sidebar-close,.sidebar-scrim,.topbar-mobile-brand { display:none; }
.primary-nav { padding:8px 14px; display:flex; flex-direction:column; gap:5px; overflow:auto; }
.nav-label { font-size:10px; text-transform:uppercase; color:var(--muted); margin:14px 12px 8px; font-weight:600; }
.nav-label-spaced { margin-top:27px; }
.nav-item { display:flex; align-items:center; gap:11px; min-height:41px; padding:10px 12px; border:0; border-radius:6px; background:transparent; text-align:left; color:var(--muted-strong); font-size:13px; }
.nav-item:hover { background:var(--surface-soft); }
.nav-item.is-active { color:var(--brand); background:var(--brand-soft); font-weight:600; }
.nav-icon { display:flex; }
.nav-icon .icon { width:18px; height:18px; }
.nav-count { margin-left:auto; background:var(--surface); padding:1px 6px; border-radius:4px; font-size:11px; }
.nav-status-dot { display:none; }
.sidebar-bottom { margin-top:auto; padding:16px; }
.storage-widget { display:flex; gap:9px; padding:14px 0 20px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.storage-icon { color:var(--muted); }
.storage-copy { flex:1; min-width:0; }
.storage-title-row { display:flex; justify-content:space-between; font-size:11px; }
.storage-track { display:block; background:var(--border); height:4px; margin:9px 0 7px; border-radius:2px; overflow:hidden; }
.storage-fill { display:block; height:100%; background:var(--brand); }
.storage-caption { font-size:10px; color:var(--muted); }
.user-card { display:flex; align-items:center; gap:9px; border:0; background:none; padding:0; width:100%; text-align:left; }
.avatar { width:36px; height:36px; flex:0 0 36px; display:inline-grid; place-items:center; border-radius:50%; background:var(--brand-soft); color:var(--brand-strong); font-size:12px; position:relative; }
.avatar-online { position:absolute; width:7px; height:7px; background:var(--success); border:2px solid var(--surface); right:0; bottom:1px; border-radius:50%; }
.user-copy { display:flex; flex-direction:column; flex:1; min-width:0; }
.user-copy strong { font-size:12px; overflow-wrap:anywhere; }
.user-copy small { font-size:10px; color:var(--muted); }
.user-chevron { width:15px; color:var(--muted); }
.main { margin-left:var(--sidebar-width); min-width:0; }
.topbar { min-height:var(--topbar-height); padding:12px 32px; display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--border); background:var(--surface); }
.topbar-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.pulse-dot,.status-mini-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); display:inline-block; flex-shrink:0; }
.topbar-time { color:var(--muted); font-variant-numeric:tabular-nums; padding-left:12px; border-left:1px solid var(--border); margin-left:8px; }
.global-search { margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--surface-soft); border:1px solid var(--border); border-radius:6px; padding:7px 10px; width:250px; color:var(--muted); }
.global-search .icon { width:16px; height:16px; }
.global-search input { background:none; border:0; outline:0; width:100%; min-width:0; font-size:12px; color:var(--text); }
.topbar-actions { display:flex; align-items:center; gap:7px; }
.notification-trigger { position:relative; }
.notification-dot { position:absolute; right:0; top:-1px; min-width:14px; height:14px; display:grid; place-items:center; background:var(--danger); color:#fff; border-radius:8px; font-size:9px; }
.topbar-profile { display:flex; align-items:center; gap:10px; border:0; background:none; padding:0 0 0 8px; }
.topbar-profile-copy { display:none; }
.topbar-profile>.icon { width:16px; }
.theme-icon-dark { display:none; }
html[data-theme="dark"] .theme-icon-light { display:none; }
html[data-theme="dark"] .theme-icon-dark { display:block; }
.page-content { display:none; padding:30px 32px 40px; max-width:1840px; margin:auto; }
.app-view.is-active { display:block; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:28px; }
.eyebrow { font-size:10px; color:var(--muted); margin-bottom:7px; font-weight:600; }
.eyebrow span { padding:0 5px; color:var(--border-strong); }
.page-subtitle { color:var(--muted); font-size:13px; margin-top:7px; }
.heading-line { display:flex; align-items:center; flex-wrap:wrap; gap:13px; }
.heading-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.online-chip,.heading-chip,.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:4px; font-size:11px; font-weight:500; background:var(--brand-soft); color:var(--brand-strong); }
.badge.success { color:var(--success); background:var(--success-soft); }
.badge.warning { color:var(--warning); background:var(--warning-soft); }
.badge.neutral { color:var(--muted); background:var(--surface-soft); }
.badge .icon { width:13px; height:13px; }
.view-switch { display:flex; padding:2px; background:var(--surface); border:1px solid var(--border); border-radius:6px; }
.view-button { height:30px; width:30px; flex-basis:30px; }
.view-button.is-active { color:var(--brand); background:var(--brand-soft); }
.select-control { display:flex; align-items:center; padding:0 9px; gap:7px; min-height:36px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.select-control>.icon { width:15px; color:var(--muted); }
.select-control select { border:0; background:transparent; color:var(--text); padding:7px 0; min-width:0; max-width:200px; font-size:12px; }
.select-chevron { display:none; }
.dashboard-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:32px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; display:flex; gap:14px; align-items:flex-start; min-width:0; }
.stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--brand); background:var(--brand-soft); flex-shrink:0; }
.stat-icon.orange { color:var(--warning); background:var(--warning-soft); }
.stat-icon.green { color:var(--success); background:var(--success-soft); }
.stat-card strong { display:block; font-size:25px; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-card span:not(.stat-icon) { display:block; font-size:12px; margin-top:7px; }
.stat-card small { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,2.5fr) minmax(270px,1fr); gap:30px; }
.dashboard-columns>section,.dashboard-columns>aside { min-width:0; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.dashboard-cameras { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; }
.overview-camera { padding:0; border:0; background:transparent; text-align:left; min-width:0; }
.overview-image { aspect-ratio:16/10; position:relative; overflow:hidden; border-radius:6px; background:var(--surface-strong); }
.overview-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.preview-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); }
.preview-placeholder small { font-size:11px; }
.overview-camera:hover .overview-caption strong { color:var(--brand); }
.overview-caption { display:flex; flex-direction:column; gap:2px; padding-top:9px; }
.overview-caption strong { font-size:13px; }
.overview-caption>span { font-size:11px; color:var(--muted); }
.recording-caption { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:5px; }
.recording-caption::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.recording-caption.is-recording { color:var(--success); }
.recent-events { background:var(--surface); border-top:1px solid var(--border); }
.recent-event { display:flex; align-items:center; gap:12px; width:100%; border:0; border-bottom:1px solid var(--border); padding:16px 6px; background:transparent; text-align:left; }
.recent-event:hover { background:var(--brand-soft); }
.recent-event img { width:64px; height:48px; object-fit:cover; border-radius:4px; }
.recent-event>span { flex:1; display:flex; flex-direction:column; min-width:0; gap:3px; }
.recent-event strong { font-size:12px; }
.recent-event span span,.recent-event time { font-size:11px; color:var(--muted); }
.recent-event>.icon { width:14px; color:var(--muted); }
.privacy-control { border-block:1px solid var(--border); padding:14px 0; margin:0 0 22px; display:flex; align-items:center; gap:12px; }
.privacy-control-icon { color:var(--success); }
.privacy-control.is-enabled .privacy-control-icon { color:var(--warning); }
.privacy-control-copy { flex:1; min-width:0; display:flex; flex-direction:column; }
.privacy-control-copy strong { font-size:13px; }
.privacy-control-copy span,.privacy-control-copy small { font-size:11px; color:var(--muted); }
.privacy-control-copy small { margin-top:2px; }
.privacy-duration { display:flex; flex-direction:column; gap:4px; font-size:10px; color:var(--muted); }
.privacy-duration select { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:5px; color:var(--text); }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--border); margin-bottom:20px; padding-bottom:18px; gap:16px; }
.summary-card { display:flex; align-items:center; gap:10px; min-width:0; }
.summary-icon { color:var(--brand); }
.summary-icon-green { color:var(--success); }
.summary-icon-orange { color:var(--warning); }
.summary-value { display:block; font-size:19px; font-weight:600; }
.summary-label { color:var(--muted); font-size:11px; }
.summary-meta { display:none; }
.camera-toolbar,.filter-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.search-field { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:8px 10px; min-width:0; }
.search-field>.icon { color:var(--muted); width:16px; height:16px; }
.search-field input { border:0; background:none; outline:none; min-width:0; width:100%; color:var(--text); font-size:12px; }
.camera-toolbar .search-field { width:300px; }
.search-field kbd { display:none; }
.toolbar-filters { display:flex; gap:6px; flex-wrap:wrap; }
.filter-chip { border:1px solid var(--border); border-radius:5px; background:var(--surface); padding:6px 9px; font-size:11px; color:var(--muted-strong); }
.filter-chip span { margin-left:4px; opacity:.7; }
.filter-chip.is-active { background:var(--brand-soft); color:var(--brand); border-color:#c5e1ff; }
.last-refresh { margin-left:auto; color:var(--muted); font-size:10px; display:flex; gap:6px; align-items:center; }
.camera-grid { display:grid; grid-template-columns:repeat(var(--camera-columns,3),minmax(0,1fr)); gap:20px 16px; }
.camera-card { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.camera-media { aspect-ratio:16/10; position:relative; background:#161b22; border-radius:7px 7px 0 0; overflow:hidden; }
.camera-media>img { width:100%; height:100%; object-fit:cover; }
.camera-media-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(0,0,0,.22),transparent 30%); }
.camera-badges { position:absolute; top:10px; left:10px; display:flex; gap:5px; }
.live-badge,.rec-badge,.privacy-badge { padding:3px 6px; border-radius:3px; color:white; background:rgba(0,0,0,.55); font-size:9px; display:inline-flex; align-items:center; gap:4px; }
.rec-badge>span { width:5px; height:5px; background:#ff5555; border-radius:50%; }
.camera-timestamp { position:absolute; bottom:8px; left:10px; color:white; font-size:10px; }
.media-icon-button { position:absolute; right:8px; bottom:5px; color:#fff; background:rgba(0,0,0,.4); width:30px; height:30px; }
.camera-main { padding:12px; }
.camera-title-row { display:flex; justify-content:space-between; gap:8px; }
.camera-title-row>div { min-width:0; }
.camera-title-row h2 { font-size:13px; overflow-wrap:anywhere; }
.camera-title-row p { color:var(--muted); font-size:10px; margin-top:3px; overflow-wrap:anywhere; }
.camera-menu { position:relative; }
.camera-menu summary { list-style:none; cursor:pointer; color:var(--muted); }
.camera-menu summary::-webkit-details-marker { display:none; }
.camera-menu-popover { position:absolute; right:0; top:25px; width:160px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:5px; box-shadow:0 5px 20px #0001; z-index:5; }
.camera-menu-popover button { display:flex; gap:8px; align-items:center; width:100%; border:0; background:none; padding:8px; font-size:11px; text-align:left; }
.camera-menu-popover button:hover { background:var(--brand-soft); }
.camera-health { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--muted); margin-top:12px; }
.camera-actions { display:flex; gap:6px; border-top:1px solid var(--border); padding-top:10px; margin-top:10px; }
.camera-actions button { flex:1; font-size:11px; min-height:30px; padding:5px; }
.camera-actions .icon { width:14px; height:14px; }
.camera-grid.is-list { display:flex; flex-direction:column; }
.camera-grid.is-list .camera-card { display:grid; grid-template-columns:220px 1fr; }
.camera-grid.is-list .camera-media { border-radius:6px 0 0 6px; }
.camera-grid.is-list .camera-actions { max-width:270px; }
.preview-unavailable { background:var(--surface-strong); }
.camera-media.preview-unavailable::after { content:"Podgląd niedostępny"; position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; }
.privacy-camera-cover { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center; color:#d4e0eb; padding:20px; text-align:center; font-size:12px; }
.focus-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:16px; }
.focus-stage { aspect-ratio:16/9; background:#111; position:relative; overflow:hidden; border-radius:6px; }
.focus-stage iframe { width:100%; height:100%; border:0; }
.focus-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 0; }
.focus-caption span { font-size:12px; color:var(--muted); }
.focus-rail { max-height:680px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.focus-camera { display:flex; flex-direction:column; gap:7px; padding:6px; border:1px solid transparent; border-radius:6px; background:var(--surface); text-align:left; font-size:12px; }
.focus-camera.is-active { border-color:var(--brand); }
.focus-thumb { display:block; aspect-ratio:16/9; background:var(--surface-strong); width:100%; overflow:hidden; border-radius:4px; }
.focus-thumb img { width:100%; height:100%; object-fit:cover; }
.page-footer { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; margin-top:30px; border-top:1px solid var(--border); padding-top:18px; }
.empty-state,.empty-inline { padding:35px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); }
.empty-state h2,.empty-inline strong { color:var(--text); }
.empty-state p,.empty-inline p { font-size:12px; }
.empty-icon { color:var(--brand); }
.filter-bar .search-field { flex:1; min-width:180px; }
.filter-summary { font-size:11px; color:var(--muted); }
.filter-bar-spacer { flex:1; }
.archive-date { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:12px; color:var(--muted); }
.archive-date input { width:170px; }
.recordings-layout { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:26px; align-items:start; }
.recordings-layout>div { min-width:0; }
.recording-list { min-width:0; }
.recording-timeline-panel { margin-bottom:24px; }
.timeline-head,.timeline-zoom-row,.timeline-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.timeline-head { margin-bottom:12px; }
.timeline-head>div { flex:1; display:flex; flex-direction:column; min-width:150px; }
.timeline-head strong { font-size:15px; }
.timeline-head span { font-size:11px; color:var(--muted); }
.timeline-camera { width:180px; font-size:12px; }
.timeline-motion-chip { display:flex; align-items:center; gap:5px; }
.timeline-motion-chip .icon { width:15px; }
.timeline-zoom-row { justify-content:space-between; margin-bottom:12px; }
.timeline-window-tabs,.timeline-pan-controls { display:flex; gap:4px; }
.timeline-window-tabs button,.timeline-pan-controls button { display:flex; align-items:center; gap:5px; border:1px solid var(--border); border-radius:5px; padding:5px 9px; font-size:11px; background:var(--surface); }
.timeline-window-tabs .is-active { background:var(--brand-soft); color:var(--brand); border-color:var(--brand); }
.timeline-pan-controls .icon { width:13px; height:13px; }
.timeline-player { background:#101418; border-radius:6px; overflow:hidden; aspect-ratio:16/8; max-height:530px; }
.recording-player.inline { width:100%; height:100%; display:block; object-fit:contain; }
.timeline-controls { margin:14px 0; }
.archive-clock { width:128px; min-width:0; padding:8px; border:1px solid #d5e0ee; border-radius:6px; background:transparent; color:inherit; }
.archive-status { font-size:14px; line-height:1.5; margin:8px 0; }
.archive-status:empty { display:none; }
.connection-notice { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px 16px; margin-bottom:16px; border-left:3px solid #d99518; background:#fff3d4; color:#593c08; font-size:14px; }
.connection-notice[hidden] { display:none; }
.archive-next[hidden] { display:none; }
.timeline-selected-time { font-size:12px; font-variant-numeric:tabular-nums; }
.timeline-range { flex:1; min-width:120px; }
.timeline-map { height:48px; position:relative; background:var(--surface); border-block:1px solid var(--border); margin-top:14px; }
.timeline-map .timeline-strip { position:absolute; inset:10px 0; overflow:hidden; }
.timeline-dot { position:absolute; height:100%; border:0; border-right:1px solid var(--surface); background:#badcff; padding:0; min-width:2px; }
.timeline-dot.is-active { background:var(--brand); }
.timeline-dot.is-loaded { box-shadow:inset 0 -3px var(--brand-strong); }
.timeline-event-layer { position:absolute; inset:0; pointer-events:none; }
.timeline-event-marker { pointer-events:auto; position:absolute; top:0; width:5px; height:10px; border:0; border-radius:2px; padding:0; background:#f3a522; }
.timeline-event-marker.is-pending { background:var(--muted); }
.timeline-legend-pro { display:flex; flex-wrap:wrap; gap:15px; padding:9px 0; font-size:10px; color:var(--muted); }
.timeline-legend-pro span { display:flex; align-items:center; gap:5px; }
.timeline-legend-pro i { width:6px; height:6px; border-radius:2px; background:var(--brand); }
.timeline-legend-pro .motion { background:#f3a522; }
.timeline-legend-pro .pending { background:var(--muted); }
.recording-row { display:grid; grid-template-columns:76px minmax(120px,1fr) 80px 90px 75px 76px; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.recording-thumb { position:relative; width:76px; height:46px; background:var(--surface-strong); border:0; padding:0; border-radius:4px; overflow:hidden; }
.recording-thumb img { width:100%; height:100%; object-fit:cover; }
.play-overlay { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:#0003; }
.play-overlay .icon { width:17px; }
.recording-main { min-width:0; }
.recording-main strong { font-size:12px; }
.recording-main p { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.recording-main .badge { display:none; }
.recording-meta { font-size:10px; color:var(--muted); }
.recording-meta strong { display:block; font-size:11px; color:var(--text); }
.recording-actions { display:flex; gap:2px; }
.panel { padding-left:20px; border-left:1px solid var(--border); }
.panel-header { display:flex; align-items:center; justify-content:space-between; }
.panel-title p { font-size:11px; color:var(--muted); margin-top:5px; }
.panel-header>.icon { color:var(--muted); }
.storage-ring { margin:26px 0; }
.storage-ring-copy strong { display:block; font-size:36px; font-weight:500; }
.storage-ring-copy span { font-size:12px; color:var(--muted); }
.legend-item { display:flex; gap:6px; padding:9px 0; border-bottom:1px solid var(--border); font-size:11px; }
.legend-item span { margin-left:auto; color:var(--muted); }
.events-control-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.events-control-bar>div { display:flex; flex-direction:column; }
.events-control-bar strong { font-size:13px; }
.events-control-bar span { font-size:11px; color:var(--muted); }
.events-camera-filter { display:flex; gap:8px; align-items:center; }
.events-camera-filter select { border:1px solid var(--border); background:var(--surface); color:var(--text); padding:8px; border-radius:6px; max-width:210px; }
.event-motion-card { display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:18px; padding:15px 8px; border-bottom:1px solid var(--border); cursor:pointer; }
.event-motion-card:hover { background:var(--surface); }
.event-motion-card>img { width:86px; height:56px; object-fit:cover; background:var(--surface-strong); border-radius:4px; }
.event-motion-card>div>strong { display:block; font-size:13px; }
.event-type { display:inline-flex; align-items:center; gap:4px; color:var(--warning); font-size:10px; margin-bottom:4px; }
.event-type .icon { width:13px; height:13px; }
.event-motion-card p { font-size:11px; color:var(--muted); margin-top:3px; }
.event-card-actions { display:flex; gap:8px; align-items:center; }
.event-score { font-size:10px; color:var(--muted); }
.event-score .icon { width:13px; height:13px; }
.events-more-button { margin:20px auto; display:flex; }
.device-search { max-width:400px; margin-bottom:20px; }
.table-scroll { position:relative; width:100%; overflow:auto; }
.device-table { width:100%; border-collapse:collapse; min-width:750px; font-size:12px; }
.device-table th { padding:12px 14px; font-size:11px; color:var(--muted); font-weight:500; text-align:left; border-bottom:1px solid var(--border); }
.device-table td { padding:16px 14px; border-bottom:1px solid var(--border); }
.device-table tbody tr:hover { background:var(--surface); }
.device-identity { display:flex; gap:12px; align-items:center; }
.device-identity small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.device-icon { display:grid; place-items:center; width:40px; height:36px; background:var(--brand-soft); color:var(--brand); border-radius:5px; }
.table-actions { display:flex; }
.table-empty { text-align:center; }
.account-panel { max-width:820px; }
.account-identity { display:flex; gap:16px; align-items:center; padding:24px 0; border-bottom:1px solid var(--border); }
.account-identity .avatar { width:52px; height:52px; flex-basis:52px; font-size:17px; }
.account-identity h2 { margin-bottom:6px; }
.account-panel section { padding:28px 0; }
.permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.permission-grid span { display:flex; gap:9px; align-items:center; font-size:13px; }
.permission-grid .icon { color:var(--success); width:16px; }
.system-status-card { display:flex; justify-content:space-between; align-items:center; gap:20px; border-block:1px solid var(--border); padding:24px 0; }
.system-status-card>div:first-child { display:flex; flex-direction:column; gap:6px; }
.status-kicker { color:var(--warning); font-size:11px; }
.is-ok .status-kicker { color:var(--success); }
.system-status-card strong { font-size:20px; }
.system-status-card span { color:var(--muted); font-size:12px; }
.disk-meter { display:flex; flex-direction:column; text-align:right; }
.disk-meter b { font-size:28px; }
.system-health-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:20px 0; }
.system-health-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }
.system-health-row>span { color:var(--warning); }
.system-health-row.is-ok>span { color:var(--success); }
.system-health-row strong { font-size:13px; }
.system-health-row small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.system-mail-card { display:flex; gap:18px; padding:14px 0; font-size:12px; border-bottom:1px solid var(--border); }
.system-mail-card span { color:var(--muted); }
.section-grid.three { display:none; }
.production-settings-form { max-width:1200px; }
.settings-panel-card { padding:24px 0; border-top:1px solid var(--border); }
.settings-card-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.settings-card-head>div { display:flex; flex-direction:column; gap:5px; }
.settings-card-head strong { font-size:16px; }
.settings-card-head span { font-size:12px; color:var(--muted); }
.settings-fields-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.settings-fields-grid label { display:flex; flex-direction:column; gap:8px; min-width:0; }
.settings-fields-grid label>span { font-size:12px; }
.settings-fields-grid small { color:var(--muted); font-size:10px; }
.settings-fields-grid input { width:100%; }
.toggle-line { display:flex; gap:8px; align-items:center; }
.notification-panel { position:fixed; top:70px; right:24px; width:360px; max-width:calc(100vw - 32px); max-height:75vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:8px; z-index:80; box-shadow:0 8px 30px #12203314; display:none; }
.notification-panel.is-open { display:block; }
.notification-head { padding:20px; display:flex; justify-content:space-between; border-bottom:1px solid var(--border); }
.notification-head p { color:var(--muted); font-size:11px; }
.notification-item { display:flex; gap:12px; padding:18px; border-bottom:1px solid var(--border); font-size:12px; }
.notification-item p { font-size:11px; color:var(--muted); margin-top:5px; }
.notification-warning { color:var(--warning); }
.notification-success { color:var(--success); }
dialog { border:1px solid var(--border); border-radius:8px; padding:0; background:var(--surface); color:var(--text); width:min(1160px,94vw); max-height:94dvh; overflow:auto; box-shadow:0 20px 80px #0003; }
dialog::backdrop { background:rgba(8,15,24,.65); }
.dialog-header,.app-dialog-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); gap:14px; }
.dialog-title-wrap,.app-dialog-title { display:flex; align-items:center; gap:12px; min-width:0; }
.dialog-title-wrap h2,.app-dialog-title h2 { font-size:16px; }
.dialog-title-wrap p,.app-dialog-title p { color:var(--muted); font-size:11px; }
.dialog-camera-icon,.app-dialog-title>span { color:var(--brand); }
.dialog-online { display:none; }
.dialog-video,.player-screen { position:relative; background:#0b0d10; }
.live-player-stage,.pro-player-stage { position:relative; height:min(62vh,650px); overflow:hidden; touch-action:none; background:#0b0d10; }
.live-player-stage iframe,.pro-player-stage video { width:100%; height:100%; border:0; object-fit:contain; display:block; }
.live-player-stage iframe { pointer-events:none; }
.live-status { position:absolute; inset:45% 10% auto; text-align:center; color:white; background:#000b; padding:8px; border-radius:6px; pointer-events:none; }
.live-status:empty { display:none; }
.live-player-stage.is-zoomed,.pro-player-stage.is-zoomed { cursor:grab; }
.live-transform,.recording-player.pro { transform-origin:center; }
.dialog-live,.dialog-time,.player-zoom-badge,.player-top { position:absolute; z-index:2; pointer-events:none; color:#fff; font-size:10px; }
.dialog-live { top:12px; left:12px; padding:4px 7px; border-radius:3px; background:#16a36ad9; }
.dialog-time { top:12px; right:12px; background:#0007; padding:4px 7px; border-radius:3px; }
.player-zoom-badge { bottom:48px; right:14px; background:#0008; padding:4px 7px; border-radius:4px; }
.live-player-stage .player-zoom-badge { top:46px; bottom:auto; }
.player-top { top:12px; left:12px; right:12px; display:flex; justify-content:space-between; gap:10px; }
.player-chip { padding:4px 7px; background:#0008; border-radius:4px; }
.player-chip .icon { width:12px; height:12px; }
.live-zoom-controls,.pro-player-controls { display:flex; justify-content:center; align-items:center; gap:8px; background:#151a20; padding:9px 12px; flex-wrap:wrap; }
.round-control { color:#e7edf5; background:#ffffff0e; border-color:#ffffff20; }
.round-control:hover { background:#ffffff25; }
.player-zoom-range { width:150px; max-width:25%; }
.dialog-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 20px; background:#151a20; color:#fff; }
.dialog-controls-left,.dialog-controls-right { display:flex; align-items:center; gap:12px; }
.stream-quality { color:#b6c5d3; font-size:10px; }
.stream-quality i { display:none; }
.dialog-info { padding:16px 20px; }
.dialog-info dl { display:flex; flex-wrap:wrap; gap:24px; margin:12px 0 0; font-size:11px; }
.dialog-info dt { color:var(--muted); }
.dialog-info dd { margin:3px 0 0; }
.dialog-video:fullscreen { display:flex; flex-direction:column; width:100vw; height:100dvh; }
.dialog-video:fullscreen .live-player-stage { height:100%; flex:1; }
.dialog-video:fullscreen .live-zoom-controls { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); border-radius:6px; background:#151a20cc; width:max-content; max-width:95%; }
.dialog-video.live-expanded { position:fixed; inset:0; width:100vw; height:100dvh; z-index:10; }
.dialog-video.live-expanded .live-player-stage { height:100%; }
.dialog-video.live-expanded .live-zoom-controls { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:max-content; max-width:95%; background:#151a20cc; }
.dialog-video:is(:fullscreen,.live-expanded).controls-hidden .live-zoom-controls:not(:focus-within):not(:hover) { opacity:0; pointer-events:none; }
.live-zoom-controls { transition:opacity .15s; }
.player-details { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:16px 20px; background:var(--surface); font-size:11px; }
.player-details span { display:block; color:var(--muted); margin-bottom:4px; }
.player-details strong { overflow-wrap:anywhere; }
.app-dialog-footer { padding:12px 20px; border-top:1px solid var(--border); }
.label-dialog { max-width:440px; }
.label-dialog form { display:flex; flex-direction:column; gap:18px; padding:22px; }
.recording-thumb>.icon { color:var(--brand); }
.event-position-card { background:var(--surface); padding:14px 20px; }
.event-position-head,.event-position-caption { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:11px; }
.event-position-track { height:5px; background:var(--border); position:relative; margin:14px 0; }
.event-position-marker { position:absolute; height:13px; width:4px; background:#f3a522; left:var(--event-left); top:-4px; }
.event-position-caption { color:var(--muted); }
.toast-viewport { position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; width:340px; max-width:calc(100vw - 32px); }
.toast { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px; box-shadow:0 5px 20px #0001; }
.toast strong { font-size:13px; }
.toast p { font-size:12px; color:var(--muted); margin-top:4px; }
.toast-icon { color:var(--brand); }
.toast-error .toast-icon { color:var(--danger); }
.toast.is-leaving { opacity:0; transition:opacity .18s; }
.loader { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--brand); border-radius:50%; display:inline-block; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:40px 20px; }
.login-panel { width:100%; max-width:370px; }
.login-logo { width:210px; height:75px; object-fit:contain; margin:0 0 38px; }
.login-copy { margin-bottom:28px; }
.login-copy h1 { font-size:28px; }
.login-copy>p:last-child { margin-top:12px; color:var(--muted); font-size:13px; }
.login-form { display:flex; flex-direction:column; gap:18px; }
.field>span { display:block; margin-bottom:7px; font-size:12px; }
.input-with-icon { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:0 12px; }
.input-with-icon>.icon { color:var(--muted); width:16px; }
.input-with-icon input { border:0; min-width:0; background:none; }
.password-toggle { border:0; padding:0; background:none; color:var(--muted); }
.login-options { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; }
.checkbox { display:flex; align-items:center; gap:5px; }
.button-lg { height:42px; }
.form-error { color:var(--danger); font-size:12px; }
.login-demo { display:flex; justify-content:center; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-top:18px; }
.login-demo .icon { width:14px; }
.login-footer { text-align:center; font-size:10px; color:var(--muted); margin-top:30px; }
.login-side { display:none; }
@media(min-width:1700px) { .page-content { padding:36px 46px; } .dashboard-columns { gap:36px; } .overview-image { aspect-ratio:16/9; } }
@media(max-width:1250px) {
  :root { --sidebar-width:200px; }
  .page-content { padding:24px; } .topbar { padding-inline:24px; }
  .dashboard-columns { grid-template-columns:minmax(0,1fr) 280px; gap:22px; }
  .dashboard-cameras { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-card { padding:16px 12px; gap:9px; } .stat-card strong { font-size:22px; }
  .camera-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .recordings-layout { grid-template-columns:minmax(0,1fr); } .recordings-layout>.panel { display:none; }
  .settings-fields-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topbar-time { display:none; } .focus-layout { grid-template-columns:minmax(0,1fr) 180px; }
}
@media(max-width:980px) {
  .dashboard-columns { grid-template-columns:1fr; } .dashboard-cameras { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .camera-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .topbar-status { display:none; } .global-search { margin-left:0; flex:1; }
  .recent-events { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .privacy-control { flex-wrap:wrap; } .privacy-control-copy { min-width:75%; }
  .system-health-list { grid-template-columns:1fr; }
  .recording-row { grid-template-columns:65px minmax(100px,1fr) 65px 72px; gap:10px; }
  .recording-time,.recording-type { display:none; } .recording-thumb { width:65px; }
}
@media(max-width:760px) {
  .sidebar { transform:translateX(-100%); width:240px; transition:transform .18s; }
  .sidebar-open .sidebar { transform:none; }
  .sidebar-open .sidebar-scrim { display:block; position:fixed; inset:0; border:0; background:#0005; z-index:35; }
  .sidebar-close { display:grid; } .sidebar-head { gap:8px; }
  .main { margin-left:0; }
  .topbar { gap:8px; padding:10px 16px; min-height:62px; }
  .topbar-mobile-brand { display:flex; gap:8px; align-items:center; }
  .topbar-mobile-brand img { width:112px; height:37px; object-fit:contain; }
  .global-search { display:none; } .topbar-actions { margin-left:auto; gap:0; }
  .topbar-profile>.icon { display:none; } .topbar-profile { padding-left:4px; }
  .page-content { padding:24px 16px; } h1 { font-size:24px; }
  .page-heading { gap:14px; margin-bottom:22px; }
  .dashboard-cameras { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .dashboard-stats { gap:10px; margin-bottom:25px; }
  .stat-card { padding:14px 10px; gap:8px; } .stat-icon { width:28px; height:28px; } .stat-icon .icon { width:16px; }
  .stat-card strong { font-size:21px; } .stat-card small { font-size:10px; }
  .recent-events { grid-template-columns:1fr; }
  .camera-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .camera-main { padding:10px; } .camera-title-row p { font-size:10px; }
  .camera-health { flex-direction:column; gap:3px; } .camera-actions { flex-wrap:wrap; }
  .summary-grid { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .camera-toolbar .search-field { width:100%; } .last-refresh { display:none; }
  .privacy-duration { flex:1; } .privacy-control-copy { min-width:65%; }
  .privacy-control-copy small { display:none; }
  .focus-layout { grid-template-columns:1fr; } .focus-rail { flex-direction:row; max-height:none; }
  .focus-camera { width:140px; flex-shrink:0; }
  .camera-grid.is-list .camera-card { grid-template-columns:120px 1fr; }
  .camera-grid.is-list .camera-media { height:100%; aspect-ratio:auto; }
  .camera-grid.is-list .camera-actions { border:0; margin-top:4px; padding:0; }
  .timeline-head { gap:10px; } .timeline-camera { width:130px; }
  .timeline-motion-chip { display:none!important; }
  .timeline-player { aspect-ratio:16/10; }
  .timeline-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .timeline-range { grid-column:1/-1; grid-row:2; width:100%; }
  .timeline-selected-time { grid-column:1/-1; }
  .timeline-legend-pro { gap:8px; font-size:9px; }
  .recording-row { grid-template-columns:54px minmax(0,1fr) 70px; }
  .recording-thumb { width:54px; height:38px; } .recording-size { display:none; }
  .event-motion-card { grid-template-columns:64px minmax(0,1fr); gap:10px; }
  .event-motion-card>img { width:64px; height:45px; }
  .event-card-actions { grid-column:2; flex-wrap:wrap; }
  .events-control-bar { align-items:flex-start; flex-direction:column; }
  .permission-grid { grid-template-columns:1fr; }
  .system-mail-card { flex-direction:column; gap:5px; }
  .settings-fields-grid { gap:20px 12px; }
  .settings-card-head { align-items:flex-start; }
  dialog { width:96vw; max-height:96dvh; }
  .dialog-header,.app-dialog-header { padding:12px; }
  .live-player-stage,.pro-player-stage { height:50dvh; min-height:220px; }
  .player-details { grid-template-columns:1fr 1fr; }
  .stream-quality { display:none; } .dialog-controls { padding:8px 12px; }
  .page-footer { flex-direction:column; }
}
@media(max-width:390px) { .camera-grid { grid-template-columns:1fr; } .stat-card { flex-direction:column; } .settings-fields-grid { grid-template-columns:1fr; } .heading-actions { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }