/* Five independent visual directions. The object catalogue stays on the right. */
.design-switcher{display:flex;align-items:center;gap:22px;padding:11px 24px;min-height:76px;background:#142940;border-bottom:1px solid var(--line)}
.design-switcher-intro{display:grid;gap:3px;flex:none;width:245px}
.design-switcher-intro strong{font-size:13px;letter-spacing:.02em}
.design-switcher-intro span{color:var(--muted);font-size:11px;line-height:1.25}
.design-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;min-width:0;flex:1}
.design-option{min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.design-option:hover{color:var(--ink);background:var(--panel-hover)}
.design-option.is-active{color:var(--ink);border-color:var(--orange);background:var(--orange-soft);box-shadow:inset 0 -2px 0 var(--orange)}
.design-option-number{color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.1em}
.sidebar{max-height:calc(100vh - 146px)}
.design-kpis,.activity-panel,.map-preview{display:none}

/* 02 — bright and calm daily console. */
body[data-design="light"]{--bg:#f2f6f7;--panel:#fff;--panel-soft:#e8f0f3;--panel-hover:#edf4f5;--line:#d6e2e7;--ink:#173243;--muted:#657d8a;--orange:#e9653a;--orange-soft:#fff0e9;--teal:#008f86;--red:#c75e59;color:var(--ink);background:var(--bg)}
body[data-design="light"] .app-header{background:#fff}
body[data-design="light"] .brand-mark:before{background:#fff}
body[data-design="light"] .brand-name small{color:#647f8c}
body[data-design="light"] .demo-badge{background:#fff0e9;border-color:#f3c9b7;color:#b9522f}
body[data-design="light"] .design-switcher{background:#f9fcfc}
body[data-design="light"] .design-option{box-shadow:0 1px 4px #163a4a0b}
body[data-design="light"] .design-option.is-active{color:#a7482b;background:#fff2e9}
body[data-design="light"] .main-workspace{background:#f2f6f7;padding:34px 42px 42px}
body[data-design="light"] .sidebar{background:#fff;box-shadow:-8px 0 28px #2344530b}
body[data-design="light"] .search-wrap{background:#f8fbfc}
body[data-design="light"] .search-wrap input::placeholder{color:#7d949d}
body[data-design="light"] .filter-row{background:#f1f6f7}
body[data-design="light"] .filter-button.is-active{background:#dcebed;color:#173e4b}
body[data-design="light"] .object-button[aria-expanded="true"]{background:#edf5f5}
body[data-design="light"] .camera-button.is-selected{background:#fff1ea;border-color:#e8a386}
body[data-design="light"] .view-tabs{background:#e9f1f3}
body[data-design="light"] .view-tab:hover{background:#dfeaec}
body[data-design="light"] .view-tab.is-active{background:#fff;color:#163c4a;box-shadow:0 2px 8px #264b5918}
body[data-design="light"] .video-card,body[data-design="light"] .timeline-card{box-shadow:0 14px 34px #25445410}
body[data-design="light"] .control-button,body[data-design="light"] .icon-button{background:#f8fbfc}
body[data-design="light"] .control-button:hover,body[data-design="light"] .icon-button:hover{background:#e9f2f4}
body[data-design="light"] .control-button.is-active{background:#fff0e9;color:#ab4a2c;border-color:#edb9a1}
body[data-design="light"] .control-button.low-emphasis{background:transparent}
body[data-design="light"] .timeline-activity{background:repeating-linear-gradient(90deg,transparent 0 5%,#cedcde 5% 5.3%,transparent 5.3% 10%),linear-gradient(0deg,#45b5a7 0 9px,transparent 9px),linear-gradient(110deg,#edf5f5,#dfeaec)}
body[data-design="light"] .timeline-time{color:#b75634}
body[data-design="light"] .section-pill{background:#fff0e9;color:#a34d30;border-color:#efc9b8}
body[data-design="light"] .settings-card-icon,body[data-design="light"] .detail-icon{background:#fff0e9;color:#b95937}
body[data-design="light"] .map-view .demo-map{background:linear-gradient(95deg,#c9d9d3 0 48%,#b7d2d7 48% 57%,#c9d9d3 57% 100%)}

/* 03 — high-density videowall. */
body[data-design="cinema"]{--bg:#070b10;--panel:#101820;--panel-soft:#16232b;--panel-hover:#1a2932;--line:#293942;--ink:#eef7f5;--muted:#8ea9aa;--orange:#f98b53;--orange-soft:#39281f;--teal:#49d4b5;color:var(--ink);background:var(--bg)}
body[data-design="cinema"] .app-header,body[data-design="cinema"] .design-switcher{background:#0a1117}
body[data-design="cinema"] .brand-mark:before{background:#0a1117}
body[data-design="cinema"] .workspace{grid-template-columns:minmax(0,1fr) 250px}
body[data-design="cinema"] .main-workspace{padding:19px 20px 30px}
body[data-design="cinema"] .sidebar{background:#0d161d}
body[data-design="cinema"] .workspace-header{margin-bottom:11px}
body[data-design="cinema"] .workspace-heading h1{font-size:27px;text-transform:uppercase;letter-spacing:.025em}
body[data-design="cinema"] .workspace-heading p{font-size:12px}
body[data-design="cinema"] .section-heading{margin:0 0 12px}
body[data-design="cinema"] .section-heading h2{font-size:16px;text-transform:uppercase;letter-spacing:.08em}
body[data-design="cinema"] .wall-grid{gap:5px}
body[data-design="cinema"] .wall-card{position:relative;border-radius:3px;background:#050a0e}
body[data-design="cinema"] .wall-card:hover{border-color:#79d1bf;transform:none}
body[data-design="cinema"] .wall-visual{aspect-ratio:16/8.2}
body[data-design="cinema"] .wall-copy{position:absolute;left:0;right:0;bottom:0;padding:11px;background:linear-gradient(transparent,#000c);color:#f6fffd}
body[data-design="cinema"] .wall-copy small{color:#c4d3d4}
body[data-design="cinema"] .wall-tag{border-radius:2px;font-size:10px}
body[data-design="cinema"] .camera-thumb{width:42px;height:34px}
body[data-design="cinema"] .camera-button{padding:5px}
body[data-design="cinema"] .camera-meta strong{font-size:12px}
body[data-design="cinema"] .video-frame{aspect-ratio:16/9;min-height:420px}

/* 04 — geography first, with a camera preview on the map. */
body[data-design="geo"]{--bg:#10282d;--panel:#1b3b41;--panel-soft:#20474c;--panel-hover:#285056;--line:#3c6061;--ink:#eaf5ee;--muted:#b0cbc4;--orange:#e9a164;--orange-soft:#514333;--teal:#9de0b7;color:var(--ink);background:var(--bg)}
body[data-design="geo"] .app-header,body[data-design="geo"] .design-switcher{background:#163238}
body[data-design="geo"] .brand-mark:before{background:#163238}
body[data-design="geo"] .workspace{grid-template-columns:minmax(0,1fr) 330px}
body[data-design="geo"] .main-workspace{padding:24px 28px 30px;background:#10282d}
body[data-design="geo"] .sidebar{background:#17343a}
body[data-design="geo"] .search-wrap,body[data-design="geo"] .filter-row,body[data-design="geo"] .view-tabs{background:#18383e}
body[data-design="geo"] .filter-button.is-active,body[data-design="geo"] .view-tab.is-active{background:#315d5d;color:#fff}
body[data-design="geo"] .object-button[aria-expanded="true"]{background:#285056}
body[data-design="geo"] .camera-button.is-selected{background:#4a4137;border-color:#d19762}
body[data-design="geo"] .map-view .demo-map{height:calc(100vh - 310px);min-height:450px;background:linear-gradient(95deg,#9dbbb0 0 48%,#add0c8 48% 57%,#9dbbb0 57% 100%);border:5px solid #315a59;border-radius:18px}
body[data-design="geo"] .demo-map:before{background:repeating-linear-gradient(90deg,transparent 0 98px,#6f928055 99px 109px,transparent 110px 160px),repeating-linear-gradient(0deg,transparent 0 65px,#6c908055 66px 78px,transparent 79px 149px)}
body[data-design="geo"] .map-water{background:#6da6a7;box-shadow:0 0 0 12px #a7ccbd88}
body[data-design="geo"] .map-pin{border-color:#f3f5e8;background:#fcfff2;color:#163935}
body[data-design="geo"] .map-preview{position:absolute;z-index:3;right:16px;bottom:16px;width:225px;display:grid;gap:6px;padding:12px;border:1px solid #9ac5b4;border-radius:12px;background:#17373eea;box-shadow:0 12px 28px #12333b66}
body[data-design="geo"] .map-preview:before{content:"";height:90px;border-radius:7px;background:#223d45 url('assets/parking.svg') center/cover}
body[data-design="geo"] .map-preview span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#add8c0}
body[data-design="geo"] .map-preview strong{font-size:13px}
body[data-design="geo"] .map-preview small{font-size:11px;color:#b7d2c9}
body[data-design="geo"] .map-preview button{margin-top:4px;padding:8px;border:1px solid #8fcdb3;border-radius:7px;background:#28564e;color:#eaffec;text-align:left;font-size:12px;font-weight:700}

/* 05 — operational health and event context around the camera. */
body[data-design="analytic"]{--bg:#17212d;--panel:#202e3c;--panel-soft:#293c4c;--panel-hover:#2d4352;--line:#3a5160;--ink:#f1f5f2;--muted:#adc0c4;--orange:#ff9a65;--orange-soft:#49372e;--teal:#71d5bf;color:var(--ink);background:var(--bg)}
body[data-design="analytic"] .app-header,body[data-design="analytic"] .design-switcher{background:#1d2a36}
body[data-design="analytic"] .brand-mark:before{background:#1d2a36}
body[data-design="analytic"] .workspace{grid-template-columns:minmax(0,1fr) 295px}
body[data-design="analytic"] .main-workspace{padding:23px 26px 34px}
body[data-design="analytic"] .sidebar{background:#1a2a37}
body[data-design="analytic"] .design-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.kpi-card{display:grid;gap:5px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.kpi-card>span{font-size:11px;color:var(--muted);font-weight:650}
.kpi-card strong{font-size:28px;line-height:1;letter-spacing:-.045em}
.kpi-card strong small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
.kpi-card em{font-size:10px;color:var(--teal);font-style:normal}
body[data-design="analytic"] .watch-view:not([hidden]){display:grid;grid-template-columns:minmax(0,2fr) minmax(245px,.83fr);grid-template-rows:auto auto;gap:12px}
body[data-design="analytic"] .watch-view .video-card{grid-column:1;grid-row:1}
body[data-design="analytic"] .watch-view .timeline-card{grid-column:1;grid-row:2;margin-top:0}
body[data-design="analytic"] .video-frame{aspect-ratio:16/8.5;min-height:280px}
body[data-design="analytic"] .activity-panel{display:block;grid-column:2;grid-row:1 / span 2;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:17px}
.activity-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:13px;border-bottom:1px solid var(--line);font-weight:750}
.activity-heading small{color:var(--muted);font-size:11px;font-weight:500}
.activity-item{display:flex;gap:11px;padding:15px 0;border-bottom:1px solid var(--line)}
.activity-item time{font-size:11px;color:var(--orange);font-variant-numeric:tabular-nums}
.activity-item div{display:grid;gap:5px}
.activity-item strong{font-size:12px;line-height:1.25}
.activity-item span{font-size:11px;color:var(--muted);line-height:1.3}
.activity-note{padding-top:14px;color:var(--muted);font-size:10px;line-height:1.4}

@media(max-width:1120px){.design-switcher-intro{display:none}.design-switcher{padding:10px 18px}.design-option{font-size:11px}.design-option-number{font-size:9px}body[data-design="light"] .main-workspace{padding:24px 22px 32px}body[data-design="analytic"] .design-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-design="analytic"] .watch-view:not([hidden]){grid-template-columns:minmax(0,1fr)}body[data-design="analytic"] .activity-panel{grid-column:1;grid-row:3}body[data-design="analytic"] .watch-view .timeline-card{grid-row:2}}
@media(max-width:760px){.design-switcher{display:block;min-height:0;padding:8px 10px}.design-options{display:flex;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}.design-option{min-width:126px;min-height:42px;flex:none}.sidebar{max-height:none}body[data-design="cinema"] .main-workspace,body[data-design="geo"] .main-workspace,body[data-design="analytic"] .main-workspace,body[data-design="light"] .main-workspace{padding:18px 15px 28px}body[data-design="cinema"] .wall-grid{grid-template-columns:1fr}body[data-design="geo"] .map-view .demo-map{height:auto;min-height:430px}body[data-design="geo"] .map-preview{right:10px;bottom:10px;width:190px}body[data-design="analytic"] .design-kpis{gap:7px}.kpi-card{padding:11px}.kpi-card strong{font-size:22px}}
@media(max-width:520px){.design-option{min-width:115px;padding:7px}.design-option-number{display:none}body[data-design="geo"] .map-preview{display:none}body[data-design="cinema"] .wall-visual{aspect-ratio:16/9}body[data-design="analytic"] .design-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}