:root{--ink: #182522;--muted: #66716d;--bg: #f1efe8;--card: #fffdf8;--card-soft: #f8f5ed;--line: #d9d5c9;--line-strong: #c1c8c0;--accent: #17695f;--accent-strong: #0f4c46;--accent-soft: #dcece6;--title-strong: #123b3a;--ok: #25805e;--ok-soft: #e4f3eb;--bad: #bd4a42;--bad-soft: #f9e8e4;--warning: #ad7226;--shadow: 0 16px 42px rgba(37, 51, 46, .08);--shadow-small: 0 5px 18px rgba(37, 51, 46, .07)}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0;color:var(--ink);background:linear-gradient(rgba(23,105,95,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,105,95,.035) 1px,transparent 1px),radial-gradient(900px 440px at 8% -8%,#f9e8b9 0%,transparent 65%),radial-gradient(800px 420px at 96% 2%,#cfe5dd 0%,transparent 64%),var(--bg);background-size:34px 34px,34px 34px,auto,auto,auto;font-family:Avenir Next,Avenir,Century Gothic,sans-serif;line-height:1.45}body:before{content:"";position:fixed;inset:0 0 auto;z-index:-1;height:5px;background:linear-gradient(90deg,#cda64a 0 18%,var(--accent) 18% 76%,#87aaa0 76%)}body[data-theme=dark]{--ink: #e9efeb;--muted: #a4b1ab;--bg: #101a19;--card: #172522;--card-soft: #1c2d29;--line: #31443f;--line-strong: #455c56;--accent: #62b9a9;--accent-strong: #87d1c3;--accent-soft: #213d37;--title-strong: #edf5f0;--ok: #66c394;--ok-soft: #1e3d31;--bad: #ed8a80;--bad-soft: #492b2a;--shadow: 0 18px 46px rgba(0, 0, 0, .22);--shadow-small: 0 6px 20px rgba(0, 0, 0, .18);background:linear-gradient(rgba(102,195,148,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(102,195,148,.035) 1px,transparent 1px),radial-gradient(900px 440px at 8% -8%,#493921 0%,transparent 64%),radial-gradient(800px 420px at 96% 2%,#173b35 0%,transparent 64%),var(--bg);background-size:34px 34px,34px 34px,auto,auto,auto}body[data-site=vpr]{--bg: #f0f1f6;--card: #fdfdff;--card-soft: #f4f5fa;--accent: #3a568d;--accent-strong: #263f72;--accent-soft: #e3e9f5;--title-strong: #283c67;background:linear-gradient(rgba(58,86,141,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(58,86,141,.035) 1px,transparent 1px),radial-gradient(900px 440px at 8% -8%,#e4d9b9 0%,transparent 65%),radial-gradient(800px 420px at 96% 2%,#cfd9ef 0%,transparent 64%),var(--bg);background-size:34px 34px,34px 34px,auto,auto,auto}body[data-theme=dark][data-site=vpr]{--bg: #131824;--card: #1b2333;--card-soft: #202a3d;--line: #344159;--line-strong: #4a5a76;--accent: #89a9e6;--accent-strong: #afc5f0;--accent-soft: #263552;--title-strong: #f0f3fb;background:linear-gradient(rgba(137,169,230,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(137,169,230,.035) 1px,transparent 1px),radial-gradient(900px 440px at 8% -8%,#463a25 0%,transparent 65%),radial-gradient(800px 420px at 96% 2%,#26395f 0%,transparent 64%),var(--bg);background-size:34px 34px,34px 34px,auto,auto,auto}button,input{font:inherit}button{border:1px solid var(--accent-strong);border-radius:10px;padding:.58rem .9rem;color:#fff;background:var(--accent-strong);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px #164c452e}button:focus-visible,input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}button:disabled{opacity:.52;cursor:wait;transform:none}.app-shell{width:min(1420px,100%);min-height:calc(100vh - 54px);margin:0 auto;padding:clamp(1rem,2.4vw,2rem)}.command-header{overflow:hidden;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.8fr);border:1px solid color-mix(in srgb,var(--line) 78%,var(--accent));border-radius:22px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:var(--shadow);animation:rise-in .42s ease-out both}.hero{min-height:176px;padding:clamp(1.35rem,3vw,2.5rem);background:linear-gradient(110deg,color-mix(in srgb,var(--accent-soft) 80%,transparent),transparent 68%),radial-gradient(circle at 84% 12%,color-mix(in srgb,var(--accent) 12%,transparent) 0 7px,transparent 8px),radial-gradient(circle at 89% 22%,color-mix(in srgb,var(--accent) 8%,transparent) 0 22px,transparent 23px)}.hero-kicker,.control-label{display:block;color:var(--muted);font-size:.69rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero-kicker{display:flex;align-items:center;gap:.5rem;color:var(--accent-strong)}.live-dot,.status-orb{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 14%,transparent)}.hero h1{max-width:760px;margin:.42rem 0 0;color:var(--title-strong);font-family:Charter,Bitstream Charter,Georgia,serif;font-size:clamp(2rem,4vw,3.65rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}.hero p{max-width:680px;margin:.8rem 0 0;color:var(--muted);font-size:clamp(.92rem,1.3vw,1.05rem)}.command-panel{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:1rem;padding:1.4rem;border-left:1px solid var(--line);background:var(--card-soft)}.site-control{display:grid;gap:.45rem}.site-switch{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.site-btn,.theme-btn,.tab-btn{border-color:var(--line-strong);color:var(--muted);background:var(--card);box-shadow:none;font-size:.78rem;font-weight:700}.site-btn.active,.tab-btn.active{border-color:var(--accent);color:#fff;background:var(--accent)}.theme-btn{align-self:flex-start;padding:.4rem 0;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;color:var(--accent-strong);background:transparent}.theme-btn:hover:not(:disabled){box-shadow:none}.toolbar{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;min-height:66px;padding:.75rem 1rem .75rem 1.5rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 96%,var(--accent-soft))}.refresh-status{display:flex;align-items:center;gap:.75rem}.refresh-status small{display:block;margin-top:.12rem;color:var(--ink);font-size:.78rem}.site-inline{overflow:hidden;color:var(--muted);font-size:.75rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.site-inline strong{color:var(--ink)}.refresh-btn{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}.refresh-btn span{font-size:1.1rem;line-height:0}.refresh-progress-wrap{overflow:hidden;height:4px;margin:-4px 22px 1rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent)}.refresh-progress{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#cda64a,var(--accent));transition:width .35s linear}.card{border:1px solid var(--line);border-radius:16px;padding:1.15rem;background:color-mix(in srgb,var(--card) 96%,transparent);box-shadow:var(--shadow-small)}.section-gap{margin-top:1rem}.main-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:0 0 1rem;padding:.45rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:var(--shadow-small);animation:rise-in .48s 80ms ease-out both}.main-tab-btn{min-width:0;padding:.65rem .55rem;border:1px solid transparent;color:var(--muted);background:transparent;box-shadow:none;text-align:left}.main-tab-btn span,.main-tab-btn small{display:block}.main-tab-btn span{color:inherit;font-size:.83rem;font-weight:800}.main-tab-btn small{margin-top:.1rem;color:color-mix(in srgb,var(--muted) 82%,transparent);font-size:.64rem;white-space:nowrap}.main-tab-btn:hover:not(:disabled){background:var(--card-soft);box-shadow:none}.main-tab-btn.active{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));color:var(--accent-strong);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.metrics-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin-top:0}.metric{position:relative;overflow:hidden;min-height:128px;box-shadow:var(--shadow-small)}.metric:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.7}.metric h2{margin:0;color:var(--muted);font-size:.69rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.metric-value{margin:.75rem 0 0;color:var(--title-strong);font-family:Charter,Bitstream Charter,Georgia,serif;font-size:clamp(1.02rem,1.35vw,1.28rem);font-weight:700;line-height:1.25}.service-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.68rem}.svc,.pill{display:inline-flex;align-items:center;gap:.3rem;border:1px solid;border-radius:999px;padding:.22rem .52rem;font-size:.68rem;font-weight:800;letter-spacing:.02em}.svc:before,.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok);background:var(--ok-soft)}.bad{border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad);background:var(--bad-soft)}.section-head{margin-bottom:.85rem}.section-head h2{margin:0;color:var(--title-strong);font-family:Charter,Bitstream Charter,Georgia,serif;font-size:1.28rem;letter-spacing:-.015em}.section-head p{max-width:760px;margin:.2rem 0 0;color:var(--muted);font-size:.8rem}.aps-grid,.cam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.75rem}.ap-card,.cam-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:13px;padding:.95rem;background:var(--card-soft);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.ap-card:hover,.cam-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-small)}.ap-card:before,.cam-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line-strong)}.is-up:before{background:var(--ok)}.is-down:before{background:var(--bad)}.ap-top,.cam-top{display:flex;align-items:center;gap:.65rem}.ap-top h3,.cam-top h3{margin:0;color:var(--title-strong);font-size:.9rem}.ap-top p,.cam-top p{margin:.05rem 0 0;color:var(--muted);font-family:ui-monospace,Cascadia Code,monospace;font-size:.72rem}.ap-top .pill,.cam-top .pill{margin-left:auto}.wifi-icon{position:relative;width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--accent-soft)}.wifi-icon span{position:absolute;left:50%;transform:translate(-50%);border:2px solid var(--accent);border-top:0;border-right-color:transparent;border-left-color:transparent;border-radius:0 0 50% 50%}.wifi-icon span:nth-child(1){width:22px;height:12px;bottom:6px}.wifi-icon span:nth-child(2){width:15px;height:8px;bottom:6px}.wifi-icon span:nth-child(3){width:7px;height:4px;bottom:6px}.cam-icon{position:relative;width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--accent-soft)}.cam-icon:before{content:"";position:absolute;inset:8px 7px;border:2px solid var(--accent);border-radius:3px}.cam-icon:after{content:"";position:absolute;top:11px;right:4px;width:4px;height:7px;border:2px solid var(--accent);border-left:0;border-radius:0 3px 3px 0}.muted{margin:.38rem 0 0;color:var(--muted);font-size:.76rem}.client-list{margin:.45rem 0 0;padding:.45rem .45rem .45rem 1.55rem;border-radius:8px;color:var(--muted);background:color-mix(in srgb,var(--card) 68%,transparent);font-family:ui-monospace,Cascadia Code,monospace;font-size:.7rem}.client-list li{line-height:1.55}.ghost-btn{margin-top:.55rem;padding:.36rem .62rem;border-color:var(--line-strong);color:var(--accent-strong);background:var(--card);box-shadow:none;font-size:.72rem;font-weight:700}.ap-check-note{min-height:1rem}.comment-input,.auth-step input{border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);background:var(--card)}.comment-input{width:100%;margin-top:.6rem;padding:.42rem .55rem;font-size:.74rem}.cam-shot-wrap{overflow:hidden;margin-top:.55rem;border:1px solid var(--line);border-radius:10px;background:var(--card)}.cam-shot{display:block;width:100%;min-height:120px;object-fit:cover}.tab-row{display:flex;gap:.4rem;margin-bottom:.7rem}.tab-btn{padding:.35rem .8rem}.traffic-intel{overflow:hidden;margin-top:1rem;border:1px solid color-mix(in srgb,var(--line) 72%,var(--accent));border-radius:20px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:var(--shadow)}body:not([data-authenticated=true]) .command-header{grid-template-columns:minmax(0,1fr)}body:not([data-authenticated=true]) .hero{grid-column:1 / -1;border-right:0}.traffic-intel-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:1rem 1.25rem .85rem}.traffic-intel-head h2{margin:.2rem 0 0;color:var(--title-strong);font-family:Charter,Bitstream Charter,Georgia,serif;font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.02em}.traffic-intel-head p{max-width:58%;margin:0;color:var(--muted);font-size:.72rem;text-align:right}.traffic-game-stage{position:relative;overflow:hidden;min-height:420px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#101821;isolation:isolate}#trafficGameCanvas{display:block;width:100%;height:520px;max-height:62vh}.game-login-truck{position:absolute;z-index:4;top:0;left:0;width:220px;height:54px;padding:0;border:0;border-radius:4px 12px 12px 4px;color:#1f2e51;background:transparent;box-shadow:none;transform:translate3d(-240px,0,0);will-change:transform;cursor:pointer}.game-login-truck:hover{box-shadow:0 0 0 3px #d9b85fb8,0 8px 20px #0000004d}.truck-cab,.truck-trailer{position:absolute;top:4px;bottom:4px;border:2px solid #18223a;background:linear-gradient(180deg,#fff4be 0,#d9b85f 16%,#b99437 86%,#565e68)}.truck-cab{right:0;width:48px;border-radius:5px 11px 11px 5px;background:linear-gradient(135deg,#a9bee5,#7894ca 50%,#334f7d)}.truck-cab:before,.truck-cab:after,.truck-trailer:before,.truck-trailer:after{content:"";position:absolute;bottom:-7px;width:13px;height:8px;border-radius:50%;background:#070b11;box-shadow:inset 0 0 0 2px #46505d}.truck-cab:before{left:4px}.truck-cab:after{right:4px}.truck-trailer:before{left:12px}.truck-trailer:after{right:12px}.truck-trailer{left:0;right:52px;display:grid;place-content:center;border-radius:4px;text-align:center;box-shadow:inset 0 3px #ffffff85,inset 0 -4px #19202a38}.truck-trailer strong,.truck-trailer small{display:block;line-height:1.05}.truck-password-panel{position:absolute;inset:3px 4px;z-index:2;align-items:center;gap:3px;padding:2px;border-radius:3px;background:#fff8cff5}.truck-password-panel input{min-width:0;width:88px;height:25px;padding:2px 5px;border:1px solid #26354a;border-radius:3px;font-size:.65rem}.truck-password-panel button{min-height:25px;padding:2px 6px;border-radius:3px;font-size:.58rem}.truck-password-panel small{position:absolute;right:4px;bottom:-12px;color:#fff;white-space:nowrap}.truck-trailer strong{font-size:.75rem;letter-spacing:.08em}.truck-trailer small{margin-top:.15rem;font-size:.52rem;letter-spacing:.12em}.traffic-game-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;padding:.75rem 1.25rem;color:var(--muted);background:var(--card-soft);font-size:.65rem}.traffic-game-legend span{display:inline-flex;align-items:center;gap:.35rem}.traffic-game-legend strong{margin-left:auto;color:var(--accent-strong)}.legend-dot{width:8px;height:8px;border-radius:50%}.telemetry-dot{background:#6f91d3}.open-dot{background:#e46a48}.closed-dot{background:#66c394}.auth-gate{position:relative;overflow:hidden;max-width:720px;margin:2rem auto 0;padding:clamp(1.35rem,3vw,2rem);border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:radial-gradient(circle at 100% 0,var(--accent-soft),transparent 38%),var(--card);box-shadow:var(--shadow)}.auth-gate:before{content:"SECURE ACCESS";display:inline-block;margin-bottom:.8rem;color:var(--accent-strong);font-size:.66rem;font-weight:800;letter-spacing:.14em}.auth-step{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}.auth-step label{min-width:88px;color:var(--muted);font-size:.78rem;font-weight:700}.auth-step input{min-width:240px;padding:.55rem .65rem}#authInfo{display:block;min-height:1.15rem;margin-top:.7rem;color:var(--muted)}.otp-row{display:flex;align-items:center;gap:.4rem}.otp-row .otp-digit{width:2.4rem;min-width:0;padding:.52rem 0;font-size:1.05rem;font-weight:800;text-align:center}.dual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:.75rem;margin-top:.9rem}.table-wrap{overflow:auto;max-height:360px;border:1px solid var(--line);border-radius:11px;background:var(--card-soft)}table{width:100%;border-collapse:collapse;font-size:.77rem}th,td{padding:.62rem .7rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{position:sticky;top:0;z-index:1;color:var(--muted);background:var(--card-soft);box-shadow:0 1px 0 var(--line);font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}tbody tr:nth-child(2n){background:color-mix(in srgb,var(--accent-soft) 34%,transparent)}tbody tr:hover{background:var(--accent-soft)}.app-footer{padding:.45rem 1rem 1.2rem;color:var(--muted);text-align:center}.app-footer small{font-size:.7rem;letter-spacing:.04em}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:1100px){.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.main-tabs{overflow-x:auto;grid-template-columns:repeat(6,minmax(135px,1fr))}}@media(max-width:760px){.app-shell{padding:.75rem}.command-header{grid-template-columns:1fr;border-radius:17px}.hero{min-height:0;padding:1.35rem 1.1rem}.hero h1{font-size:clamp(1.85rem,9vw,2.65rem)}.command-panel{padding:1rem;border-top:1px solid var(--line);border-left:0}.toolbar{grid-template-columns:1fr auto;gap:.75rem;padding:.75rem 1rem}.site-inline{display:none!important}.traffic-intel-head{align-items:flex-start;flex-direction:column}.traffic-intel-head p{max-width:none;text-align:left}.traffic-game-stage{min-height:360px}#trafficGameCanvas{height:420px}.traffic-game-legend strong{width:100%;margin-left:0}.refresh-btn{padding:.5rem .65rem;font-size:.74rem}.refresh-progress-wrap{margin-right:16px;margin-left:16px}.main-tabs{margin-bottom:.75rem;border-radius:13px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:112px;padding:.9rem}.card{padding:1rem}.table-wrap{max-height:290px}.auth-step{align-items:stretch;flex-direction:column}.auth-step label,.auth-step input,.auth-step button{width:100%;min-width:0}.auth-step .otp-row{width:100%;flex-direction:row}.otp-row .otp-digit{width:min(2.7rem,13vw)}}@media(max-width:430px){.site-btn{padding-right:.45rem;padding-left:.45rem;font-size:.72rem}.refresh-status .control-label{display:none}.refresh-status small{max-width:150px}.metrics-grid{grid-template-columns:1fr}.metric{min-height:92px}.aps-grid,.cam-grid{grid-template-columns:1fr}}