/* CakraVision: aligned instruments, graphite, red and a halftone field. */
:root,:root[data-theme=dark]{--bg:#0a0d12;--panel:#12161d;--line:#292d35;--text:#e9e9ed;--muted:#969ba6;--lime:#cd626e;--purple:#cd626e;--accent:#cd626e;--accent-ink:#241014;--violet:#e4a2a9;--halftone:#8b6771;--surface:#1b2028;color-scheme:dark}
:root[data-theme=light]{--bg:#f3f1f2;--panel:#fffdfd;--line:#e0d6da;--text:#31242b;--muted:#796872;--lime:#b9404f;--purple:#b9404f;--accent:#b9404f;--accent-ink:#fff;--violet:#9c626e;--halftone:#bc8b93;--surface:#f0e5e8;color-scheme:light}
body{background:var(--bg);font-size:13px;transition:background-color .25s,color .25s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(var(--halftone) .65px,transparent .8px);background-size:8px 8px;opacity:.065;z-index:-1}
.topbar,[data-theme=light] .topbar{height:80px;padding:0 max(32px,calc((100vw - 1376px)/2));background:var(--bg);gap:24px}
.cakravision-brand{gap:12px}.cakravision-brand img{width:28px;height:28px;animation:chakra-turn 24s linear infinite}.cakravision-brand>span{font-size:18px;letter-spacing:-.5px;font-weight:600;color:var(--text)}.cakravision-brand small{font:6px var(--mono);letter-spacing:1.5px;color:var(--muted);margin-top:3px}
.topbar-right{gap:18px}.language-toggle{background:var(--panel);border-color:var(--line)}.language-toggle button[aria-pressed=true]{color:var(--accent);background:var(--surface)}.connection,[data-theme=light] .connection{background:var(--surface);color:var(--accent);border-color:var(--line);font:9px var(--mono);padding:8px 11px}.connection b{background:var(--accent)}.connection:not(.offline) b{animation:signal-pulse 2.4s ease-out infinite}.connection.offline,[data-theme=light] .connection.offline{color:var(--muted);background:var(--panel);border-color:var(--line)}
main{max-width:1440px;padding:0 32px}.page-heading{position:relative;min-height:196px;margin:0;padding:38px 0;align-items:center;overflow:hidden;isolation:isolate}.page-heading>div:first-child{position:relative;z-index:2}.page-heading h1{font-size:44px;letter-spacing:-1.9px;line-height:1.2;margin:12px 0}.page-heading p{font-size:13px;color:var(--muted)}.eyebrow{font:9px var(--mono);letter-spacing:1.6px;color:var(--accent)}.eyebrow>span{background:var(--accent)}
.page-heading::before{content:"";position:absolute;width:410px;height:320px;right:150px;top:-65px;z-index:-1;background-image:radial-gradient(var(--accent) 1.2px,transparent 1.5px);background-size:7px 7px;opacity:.15;mask-image:radial-gradient(ellipse at center,#000 0,transparent 68%);transform:rotate(-25deg);animation:point-field 18s ease-in-out infinite alternate}
.page-heading::after{content:"";position:absolute;width:240px;height:240px;right:233px;top:-38px;z-index:-1;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:50%;box-shadow:0 0 0 20px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 42px color-mix(in srgb,var(--accent) 3%,transparent);transform:rotateX(52deg) rotate(-25deg);animation:ring-breathe 10s ease-in-out infinite alternate}
.heading-actions{z-index:2;gap:9px;flex-shrink:0}.button{border-radius:5px;font-size:11px;min-height:38px;padding:9px 13px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.button.primary{background:#9e414d;border-color:#b3525e;color:#fff0f2;font-weight:600}.button.primary:hover{background:#ae4c58;border-color:#c4606c;box-shadow:0 3px 14px #0003;transform:translateY(-1px)}.button:not(.primary),[data-theme=light] .button:not(.primary){background:var(--panel);border-color:var(--line)}.button:not(.primary):hover,[data-theme=light] .button:not(.primary):hover{background:var(--surface);border-color:var(--accent)}.button.compact{min-height:32px;font-size:10px;padding:7px 10px}.theme-toggle,[data-theme=light] .theme-toggle{background:var(--panel)!important}.icon-button:hover{background:var(--surface);color:var(--accent)}
.retail-toolbar{padding:16px 0;gap:16px}.store-picker select,.retail-trend select{font-size:11px;border-radius:5px;min-height:34px;background:var(--panel);color:var(--text)}.session-tag,.toolbar-note,.retail-toolbar .clock{font-size:9px}.retail-toolbar .clock{color:var(--muted)}
.retail-metrics{gap:16px;margin:8px 0 30px;align-items:stretch}.retail-metric{padding:20px 22px;border-radius:8px;position:relative;overflow:hidden;display:grid;grid-template-rows:20px 58px minmax(32px,auto);transition:border-color .2s;animation:instrument-enter .65s both}.retail-metric:nth-child(2){animation-delay:.06s}.retail-metric:nth-child(3){animation-delay:.12s}.retail-metric:nth-child(4){animation-delay:.18s}.retail-metric::after{content:"";width:35px;height:35px;position:absolute;right:12px;bottom:12px;background:radial-gradient(var(--halftone) .8px,transparent 1px);background-size:5px 5px;opacity:.2}.retail-metric:hover{border-color:var(--accent)}.retail-metric>span{font-size:11px;gap:6px}.retail-metric>div{margin:9px 0;min-width:0;gap:9px;align-items:baseline}.retail-metric strong{font-size:34px;color:var(--text);font-weight:500;letter-spacing:-1px}.retail-metric small{font-size:9px}.retail-metric p{font-size:10px;line-height:1.6;max-width:90%;margin:0;align-self:start}
.section-heading{margin-bottom:14px}.section-heading h2{font-size:19px;margin-top:5px}.section-heading .eyebrow{font-size:8px}.camera-section{margin-bottom:24px}.camera-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:stretch}.camera-grid .camera-card{max-width:none;display:grid;grid-template-rows:104px 67px 31px;position:relative;border-radius:8px;transition:transform .22s,border-color .22s,box-shadow .22s}.camera-card:hover{transform:translateY(-2px);border-color:var(--accent)}.camera-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 5px 24px color-mix(in srgb,var(--accent) 7%,transparent)}.camera-grid .camera-thumb{height:104px;min-height:0;background:#0b1620;aspect-ratio:auto}.camera-thumb img{object-fit:cover;opacity:.72;transition:opacity .25s}.camera-card.selected .camera-thumb img{opacity:.9}.camera-card-body{padding:12px 16px;align-items:center;flex-direction:row;min-width:0;gap:8px}.camera-card-body>div{min-width:0}.camera-card-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-card-store{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-card-people{font-size:10px;flex-shrink:0}.camera-card-meta{padding:0 16px 12px;font-size:9px;white-space:nowrap;flex-wrap:nowrap;align-items:center}.camera-mode,.camera-card-status{font-size:8px;padding:5px 7px;top:10px;color:#f2e4e7;border:1px solid #f4c4c826;background:#08151cd9}.camera-card-status{color:#f7a0a8}
.panel{background:var(--panel);border-color:var(--line);border-radius:8px;min-width:0;overflow:hidden}.panel-header{height:58px;min-height:58px;padding:0 18px;border-bottom:1px solid var(--line);gap:12px}.panel-title{min-width:0;gap:9px}.panel-title h2{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-title .icon{color:var(--accent)}.muted-chip,[data-theme=light] .muted-chip{font:8px var(--mono);background:var(--surface);border-color:var(--line);color:var(--muted);white-space:nowrap}.feed-state{font:8px var(--mono);color:var(--muted)}.feed-state.active{color:var(--accent)}
.retail-visuals{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;margin-bottom:24px}.retail-feed,.heat-panel{display:grid;grid-template-rows:58px auto 58px minmax(88px,1fr)}.retail-feed .video-stage,.heat-stage{width:100%;margin:0;min-height:0;border:0;border-radius:0;background-color:#071018;overflow:hidden;aspect-ratio:16/9;flex:none}.video-stage>img,.heat-stage>img{object-fit:contain}.video-grid{opacity:.12}.heat-stage{background-image:radial-gradient(#97636e40 .7px,transparent 1px);background-size:12px 12px}.heat-stage>img{opacity:.55;filter:saturate(.45)}.heat-topline,.heat-footnote{display:none}.heat-empty{background:#07101855;color:#b3cbd3;font-size:11px}.video-stage .video-empty h3{font-size:20px}.video-stage .video-empty p{font-size:11px}.video-empty .button{margin-top:15px}.scan-icon{background:#f16a750a;border-color:#f16a7530;color:#f16a75}.video-corner,.video-bottom{font:8px var(--mono)}.video-corner{color:#bbd4de}.video-bottom{color:#f2d7dc;background:#07131bcc}.video-model{color:#f7a0a8}.video-empty{padding:24px}
.retail-feed .video-footer{padding:0 16px;gap:8px;background:var(--panel)}.video-footer>div:first-child{max-width:40%}.video-footer strong{font-size:10px}.video-footer .video-actions{gap:6px}.video-footer .button{font-size:9px}.heat-legend{padding:0 18px;font-size:9px;gap:14px;height:58px}.heat-legend b{height:5px;background:linear-gradient(90deg,#ef6b7720,#ef6b77,#aca2e2,#f0bd73)}.heat-insight{padding:15px 0;margin:0 18px;border-color:var(--line);align-items:center;gap:12px}.heat-insight span{font-size:10px}.heat-insight strong{font-size:17px;margin:2px 0;line-height:1.5}.heat-insight p{font-size:9px}.gate-flow{padding:15px 18px;gap:16px;min-height:88px;align-content:center;flex-wrap:wrap}.gate-flow>div{gap:8px}.gate-flow>div>span{font-size:10px}.gate-flow strong{font-size:20px}.gate-flow p{font:9px/1.7 var(--mono);flex:1;min-width:80px;margin:0}.gate-flow .button{font-size:9px}.gate-flow[data-role=area]>div{display:none}.gate-flow[data-role=area] p{color:var(--accent);border-left:2px solid var(--accent);padding:5px 0 5px 14px}
.heat-tooltip{background:#08151ce8;border-color:#f16a7566;color:#ffe9ec}.zone-panel{margin-bottom:24px}.zone-table th{font-size:9px;padding:13px 18px;background:var(--surface)}.zone-table td{font-size:12px;padding:17px 18px}.zone-table strong{font-size:12px}.zone-table small{font-size:9px;line-height:1.6}.activity-share{width:110px;height:5px}.activity-share b{background:var(--accent)}.zone-status{font-size:9px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.zone-status.busy{color:#d7a25a;border-color:#d7a25a55;background:#d7a25a12}.zone-table tbody tr{transition:background .2s}.zone-table tbody tr:hover{background:var(--surface)}
.retail-analytics{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:20px;align-items:stretch}.retail-trend{display:flex;flex-direction:column}.retail-trend .panel-header{flex-shrink:0}.trend-caption{font-size:10px;margin:20px 20px 5px}.trend-plot{height:auto;min-height:238px;flex:1}.chart-footnote{font-size:9px}.inference-number{margin:15px 20px 10px}.inference-number strong{font-size:36px}.inference-number small{font-size:9px}.inference-details>div{font-size:11px;padding:8px 0}.inference-details strong{font-size:10px}.retail-runtime-note{font-size:9px;line-height:1.7;padding:12px 20px 16px}.observation-note{font-size:11px;color:var(--muted);margin:22px 0 0}.dataset-attribution{font-size:10px}.footer{font:9px var(--mono);padding:22px 0;border-color:var(--line);gap:12px;align-items:center}.footer>span{display:flex;align-items:center;gap:8px}.footer .brand-mini{height:20px;width:20px}.offline-banner{border-color:var(--line);background:var(--surface);color:var(--muted);font-size:11px;margin-bottom:12px}
dialog,[data-theme=light] dialog{background:var(--panel);color:var(--text);border-color:var(--line);border-radius:10px;box-shadow:0 22px 100px #0006;max-height:calc(100dvh - 40px);max-width:calc(100vw - 32px);animation:dialog-enter .22s ease-out}dialog::backdrop{background:#050c14b0;backdrop-filter:blur(5px)}.dialog-header{align-items:start}.dialog-header h2{font-size:22px;letter-spacing:-.5px}.dialog-description{font-size:12px;line-height:1.8}label{font-size:11px}.form-grid{gap:18px}input,select{min-height:36px;font-size:12px}input[type=checkbox]{min-height:0}.dialog-footer{margin-top:24px;padding-top:20px;border-color:var(--line);gap:9px}.field-hint,#rtspField small,#webcamField small,#fileField small,.retail-runtime-note{color:var(--muted)}.external-instructions{background:var(--surface);border-color:var(--line)}.zone-edit-stage{background:#071018}.zone-edit-row{font-size:12px;padding:11px 0}.zone-edit-row small{font-size:9px}#zoneDrawHint{font-size:11px}.toast{box-shadow:0 8px 40px #0004}
@keyframes chakra-turn{to{transform:rotate(360deg)}}@keyframes signal-pulse{0%{box-shadow:0 0 0 0 #f16a7540}70%,100%{box-shadow:0 0 0 7px #f16a7500}}@keyframes point-field{to{transform:rotate(-8deg) translateY(12px);opacity:.08}}@keyframes ring-breathe{to{transform:rotateX(52deg) rotate(15deg) scale(1.09);opacity:.4}}@keyframes instrument-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.page-heading h1{font-size:36px}.page-heading::before{right:80px}.page-heading::after{right:160px}.retail-metric{padding:17px 16px}.retail-metric small{font-size:8px}.retail-visuals{gap:16px}.panel-header{padding:0 15px}.video-footer strong{font-size:9px}.gate-flow{gap:12px}.retail-analytics{grid-template-columns:minmax(0,1.35fr) minmax(295px,1fr);gap:16px}.camera-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media(max-width:800px){.topbar,[data-theme=light] .topbar{padding:15px 20px;height:auto;min-height:76px;flex-wrap:wrap;gap:12px}.topbar-right{gap:10px}.connection{display:none}.cakravision-brand>span{font-size:18px}.cakravision-brand small{font-size:6px}.theme-toggle{width:32px;min-height:32px;justify-content:center}.theme-toggle span{display:none}main{padding:0 20px}.page-heading{min-height:218px;align-items:start;justify-content:center;flex-direction:column;gap:20px;padding:30px 0}.page-heading h1{font-size:36px;margin:10px 0}.page-heading::before{right:-140px;top:-30px}.page-heading::after{right:-80px;top:0}.heading-actions{width:100%;flex-wrap:wrap}.page-heading p{font-size:12px}.retail-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.retail-metric{grid-template-rows:20px 54px minmax(32px,auto)}.retail-metric p{font-size:9px}.retail-metric strong{font-size:30px}.retail-metric small{font-size:8px}.retail-toolbar{flex-wrap:wrap;gap:10px}.toolbar-note{width:100%;margin:0;font-size:9px}.retail-toolbar .clock{display:none}.session-tag{margin-left:auto}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.camera-grid .camera-card{grid-template-rows:92px 78px 34px}.camera-grid .camera-thumb{height:92px}.camera-card-body{padding:11px 12px;align-items:start;flex-direction:column;gap:5px}.camera-card-name{font-size:11px}.camera-card-store{font-size:8px}.camera-card-people{font-size:9px}.camera-card-meta{font-size:8px;padding:0 12px 12px;gap:5px}.camera-mode,.camera-card-status{font-size:7px;padding:4px 5px;top:8px}.camera-mode{left:8px}.camera-card-status{right:8px}.retail-visuals,.retail-analytics{grid-template-columns:1fr;gap:18px}.retail-feed,.heat-panel{grid-template-rows:58px auto 58px minmax(88px,1fr)}.retail-feed .video-stage{min-height:0}.panel-title h2{font-size:12px}.retail-metric>span{font-size:10px}.retail-metric .icon{width:14px}.zone-panel .panel-header>.muted-chip{display:none}.retail-trend select{max-width:140px;font-size:10px}.trend-plot{min-height:215px}.observation-note{font-size:10px}.footer{font-size:8px;flex-wrap:wrap}.footer>span{flex-wrap:wrap}.gate-flow{min-height:88px}dialog{max-height:calc(100dvh - 32px)}#zonesDialog .form-grid{grid-template-columns:1fr}}
@media(max-width:420px){main{padding:0 16px}.topbar,[data-theme=light] .topbar{padding:14px 16px;gap:8px}.cakravision-brand{gap:9px}.cakravision-brand img{width:25px;height:25px}.cakravision-brand>span{font-size:17px}.cakravision-brand small{font-size:6px;letter-spacing:1px}.topbar-right{gap:7px}.language-toggle button{padding:5px;font-size:9px}.page-heading h1{font-size:31px}.heading-actions .button{font-size:10px;padding:8px 10px}.retail-metric{padding:15px 12px;grid-template-rows:30px 47px minmax(32px,auto)}.retail-metric>span{align-items:start}.retail-metric small{font-size:7px}.retail-metric strong{font-size:28px}.retail-metric p{max-width:100%}.retail-metric>div{gap:6px}.camera-card-meta{font-size:7px}.camera-card-name{font-size:10px}.camera-card-people{font-size:8px}.panel-header{gap:8px;padding:0 13px}.panel-title{gap:7px}.panel-title h2{font-size:11px}.panel-title .muted-chip{font-size:7px}.panel-title .icon{width:16px}.panel-tools{gap:8px}.feed-state{font-size:7px}.retail-feed .video-footer{padding:0 12px}.video-footer .button{font-size:8px;padding:6px 7px}.video-footer .icon{width:13px}.video-footer strong{font-size:8px}.heat-insight p{font-size:9px}.gate-flow p{font-size:8px}.section-heading h2{font-size:17px}.observation-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.backend-toggle{font-size:10px;padding:7px 10px;white-space:nowrap}
.connection-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 22px}.connection-choices .button{font-size:10px;justify-content:center;white-space:normal}.connection-choices [aria-pressed=true]{border-color:var(--accent);background:var(--surface)}.connection-help{border:1px solid var(--line);border-radius:6px;padding:13px;margin:16px 0}.connection-help summary{cursor:pointer;color:var(--text);font-size:12px}.connection-help[open] summary{margin-bottom:16px}.connection-help label{margin-top:14px}.connection-test{display:flex;align-items:center;gap:12px;border-block:1px solid var(--line);padding:14px 0;margin:18px 0}.connection-test p{flex:1;overflow-wrap:anywhere}.external-instructions code{white-space:pre-wrap;word-break:break-word;font-size:10px}.external-instructions input{margin:8px 0}.connection-help input{width:100%}
#backendDialog{width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
#backendDialog label{display:flex;flex-direction:column;gap:8px;margin:18px 0;color:var(--muted);font-size:12px}
#backendDialog input{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--text)}
#backendDialog .dialog-footer{flex-wrap:wrap}
@media(max-width:760px){.topbar-right:has(.backend-toggle){flex-wrap:wrap;justify-content:flex-end}.topbar:has(.backend-toggle){align-items:flex-start}.backend-toggle{font-size:9px;padding:6px 8px}}
