/* Full-width workspace: one navigation surface, no competing sidebars. */
.app-shell {display:block;min-height:100dvh;background:radial-gradient(ellipse at 70% 0,#13293350,transparent 45%),var(--bg);}
.topbar {height:72px;padding:0 24px;gap:24px;background:#0c121bf2;border-color:#263443;position:sticky;top:0;z-index:7;backdrop-filter:blur(18px);}
.workspace-brand {flex-shrink:0;font-size:19px;gap:10px;line-height:1.1;}
.workspace-brand .brand-mark {width:38px;height:38px;border-radius:12px;background:linear-gradient(140deg,#99fff0,#45b7bd);box-shadow:0 4px 20px #36d6c519;}
.brand-caption {display:block;font-size:9px;letter-spacing:.23em;color:#92a6b8;margin-top:5px;font-weight:600;}
.workspace-nav {display:flex;gap:5px;padding:5px;background:#070e1680;border:1px solid #25303d;border-radius:14px;margin-right:auto;}
.workspace-nav .nav-item {width:auto;min-height:40px;padding:9px 16px;gap:9px;font-size:13px;font-weight:600;border-radius:9px;white-space:nowrap;transition:background .15s,color .15s;}
.workspace-nav .nav-item span {width:auto;color:inherit;}
.workspace-nav .nav-item svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.workspace-nav .nav-item.active {color:#9df5e6;background:#1a3439;box-shadow:inset 0 0 0 1px #3e696750;}
.workspace-nav .nav-item:hover {background:#1c2a35;color:#ecfffc;}
.top-actions {gap:18px;font-size:12px;}
.server-indicator {display:flex;align-items:center;gap:8px;color:#849aab;font-size:11px;}
.server-indicator i {height:6px;width:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px #57d7d270;}
.top-actions .button {font-size:12px;font-weight:600;}
#logoutBtn {padding:12px 0;min-height:44px;}
.workspace-heading {display:flex;gap:24px;align-items:center;min-height:66px;padding:12px 24px;}
.workspace-heading .page-heading {gap:12px;}
.workspace-heading h1 {font-size:22px;letter-spacing:-.025em;}
.workspace-heading .eyebrow {font-size:9px;margin:0;border-right:1px solid var(--line);padding-right:12px;}
.workspace-heading #clock {margin-left:auto;color:#718599;font-size:11px;white-space:nowrap;}
.stats-line {padding:0;gap:20px;margin-left:10px;}
.stats-line div {gap:6px;align-items:center;}
.stats-line span {font-size:17px;letter-spacing:-.04em;}
.stats-line small {font-size:11px;}
.stats-line div:first-child span {color:var(--cyan);}
.page {padding:0 24px 24px;}
#page-live,#page-archive {max-width:none;margin:0;}
.live-layout {grid-template-columns:clamp(300px,24vw,420px) minmax(0,1fr);gap:14px;border:0;background:transparent;height:calc(100dvh - 162px);min-height:500px;}
.camera-rail {border:1px solid #293846;border-radius:16px;background:#101923;display:flex;flex-direction:column;max-height:none;overflow:hidden;}
.camera-rail .section-head {min-height:55px;padding:15px 18px 10px;flex-shrink:0;}
.camera-rail h2 {display:flex;align-items:center;gap:10px;font-size:15px;}
#railCount {font:600 10px/1.4 ui-monospace,monospace;color:#9bc6cb;border:1px solid #35505b;border-radius:6px;padding:2px 6px;}
.camera-rail-filters {padding:0 14px 12px;flex-shrink:0;}
.camera-list {overflow:auto;min-height:0;flex:1;padding:7px;scrollbar-width:thin;scrollbar-color:#3b5160 transparent;}
.camera-item {border:1px solid transparent;border-radius:10px;padding:12px 9px;gap:9px;margin-bottom:3px;}
.camera-item + .camera-item {border-top-color:#24323f70;}
.camera-item:hover {background:#192733;}
.camera-item.active {background:linear-gradient(100deg,#193637,#172a34);border-color:#355c61;box-shadow:none;}
.camera-item strong {font-size:13px;line-height:1.4;}
.camera-item .camera-serial,.camera-item .camera-model {font-size:10px;color:#7e94a5;}
.camera-item .camera-location {font-size:11px;color:#b8cbd6;}
.monitor-column {grid-template-rows:minmax(260px,1fr) auto;border:1px solid #293846;border-radius:16px;overflow:hidden;background:#101923;}
.video-frame {min-height:260px;background:#050a10;}
.video-empty {background:radial-gradient(ellipse at 50% 48%,#18313a99,transparent 65%),#080f17;}
.video-frame:has(.video-empty:not(.hidden)) video {visibility:hidden;}
.video-empty .lens {width:76px;height:76px;border-radius:24px;border-color:#34565f;transform:rotate(-8deg);background:#10252d;box-shadow:0 14px 45px #0004;}
.video-empty .lens::after {inset:23px;border-width:2px;}
.video-empty span {font-size:12px;}
.video-overlay {padding:14px 18px;}
.timeline-panel {min-height:0;background:linear-gradient(110deg,#111d28,#101821);}
.timeline-panel .section-head {min-height:52px;padding:12px 18px 4px;}
.timeline-head h2 {font-size:14px;}
.timeline-head p {font-size:11px;margin-top:3px;}
.timeline-actions {gap:8px;}
.timeline-actions .button {padding:8px 12px;font-size:11px;min-height:34px;}
.timeline-tools {margin:8px 18px 3px;gap:12px;}
.timeline-tools label {font-size:10px;gap:0;}
.timeline-tools input,.timeline-tools select {margin-top:4px;padding:6px 9px;font-size:11px;}
#timelineDate {font-size:11px;}
.timeline-hint {font-size:10px;max-width:290px;}
#timeline {height:78px;margin-inline:18px;}
#timelineLabels {padding:0 18px 12px;}
#cameraListToggle {display:none;}
.studio-events {position:sticky;top:88px;}
.studio-events .archive-list {max-height:calc(100dvh - 360px);}
.studio-layout {margin-top:18px;}
.studio-filters {padding-bottom:18px;}
button:focus-visible,a:focus-visible {outline:2px solid var(--cyan);outline-offset:3px;}
@media(min-width:1600px){.live-layout{grid-template-columns:400px minmax(0,1fr);}.camera-item{padding:14px 12px;}}
@media(max-width:1180px){.server-indicator{display:none;}.topbar{gap:18px;padding-inline:18px;}.workspace-nav .nav-item{padding-inline:12px;}.workspace-heading .eyebrow{display:none;}.live-layout{grid-template-columns:300px minmax(0,1fr);}.timeline-hint{display:none;}.page{padding-inline:18px;}.workspace-heading{padding-inline:18px;}}
@media(max-width:800px){
 .topbar{height:62px;padding:0 16px;backdrop-filter:none;background:#0c121b;}.workspace-brand{font-size:18px;}.workspace-brand .brand-mark{width:34px;height:34px;}.top-actions{margin-left:auto;gap:16px;}.top-actions .button{padding:8px 12px;min-height:40px;}
 .workspace-nav{position:fixed;inset:auto 0 0;z-index:8;justify-content:space-around;border:0;border-top:1px solid #304250;border-radius:0;background:#0e1925fa;backdrop-filter:blur(20px);padding:6px 8px max(6px,env(safe-area-inset-bottom));gap:4px;}
 .workspace-nav .nav-item{flex:1;min-width:0;min-height:56px;flex-direction:column;gap:5px;padding:8px 3px;font-size:10px;border-radius:10px;}.workspace-nav .nav-item svg{width:20px;height:20px;}
 #appView main{padding-bottom:calc(78px + env(safe-area-inset-bottom));}.workspace-heading{padding:14px 14px 12px;min-height:0;gap:12px;flex-wrap:wrap;}.workspace-heading #clock{display:none;}.workspace-heading h1{font-size:21px;}.stats-line{margin-left:auto;gap:12px;}.stats-line span{font-size:15px;}.stats-line small{font-size:10px;}
 .page{padding:0 12px 16px;}.live-layout{display:flex;flex-direction:column;height:auto;min-height:0;gap:12px;}.camera-rail{max-height:none;border-radius:12px;}.camera-rail .section-head{min-height:50px;padding:9px 14px;}.camera-rail h2{font-size:13px;margin:0;}#cameraListToggle{display:block;min-height:40px;font-size:12px;color:#b7e9e5;}.camera-rail:not(.cameras-expanded) .camera-list,.camera-rail:not(.cameras-expanded) .camera-rail-filters{display:none;}.camera-list{max-height:300px;flex:auto;}.camera-rail-filters{padding-top:3px;}.camera-item{min-height:72px;}.monitor-column{display:block;border-radius:12px;}.video-frame{height:clamp(235px,56vw,440px);min-height:0;}.video-overlay{padding:10px;gap:6px;}#videoName{font-size:11px;}.live-badge{font-size:9px;}.timeline-panel .section-head{padding:14px 12px 8px;gap:10px;}.timeline-actions{justify-content:flex-start;margin:0;width:100%;}.timeline-actions .button{min-height:40px;flex:1;font-size:11px;padding:8px;}.timeline-tools{margin:4px 12px 6px;gap:10px;}.timeline-tools input,.timeline-tools select{min-height:40px;}#timelineDate{width:100%;font-size:10px;}#timeline{margin-inline:12px;}#timelineLabels{padding-inline:12px;font-size:9px;}.studio-events{position:static;}.studio-layout{grid-template-columns:1fr;}.studio-events .archive-list{max-height:230px;}.toast{bottom:calc(85px + env(safe-area-inset-bottom));left:14px;right:14px;max-width:none;}dialog{max-height:88dvh;}.system-card{padding:18px;}.template-apply{flex-wrap:wrap;}.camera-row{overflow-wrap:anywhere;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.camera-row>div{min-width:0;}
}
@media(max-width:420px){.workspace-heading{align-items:baseline;}.stats-line{gap:10px;width:100%;margin:0;}.stats-line div{gap:5px;}.stats-line small{font-size:10px;}.top-actions{gap:12px;}.workspace-brand{font-size:16px;}#logoutBtn{font-size:11px;}.workspace-heading h1{font-size:20px;}.studio-editor{padding:16px;}.studio-range-fields{gap:8px;}.studio-range-fields button{font-size:10px;padding:8px 5px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;}}