.full-demo{font-family:Arial,sans-serif;background:radial-gradient(ellipse at 90% 0,#192a3a,transparent 55%),#090d13;--accent:#ff526b;--red:var(--accent);--text3:#93a5b9;padding:0}.full-demo .dash{max-width:1540px;margin:auto;padding:20px 32px}.full-demo button,.full-demo input{font:inherit}.full-demo button{cursor:pointer}.full-demo button:disabled{opacity:.45;cursor:not-allowed}.full-demo :focus-visible{outline:2px solid #ffd080;outline-offset:3px}.full-demo [hidden]{display:none!important}.demo-skip{position:fixed;top:-100px;left:10px;z-index:100;background:white;color:black;padding:15px}.demo-skip:focus{top:10px}
.demo-top{display:flex;align-items:center;gap:25px;padding-bottom:18px;border-bottom:1px solid #2d3a4c}.demo-top img{object-fit:contain}.demo-top-title{font-size:10px;letter-spacing:2px;color:#b5c3d6}.demo-top-title small{display:block;font-size:9px;color:#8b9bb0;margin-top:6px}.demo-top-right{margin-left:auto;display:flex;align-items:center;gap:16px}.demo-lang{display:flex}.demo-lang button{background:none;border:0;color:#a9b7ca;padding:8px;font-size:11px}.demo-lang button[aria-pressed=true]{background:#293649;color:white;border-radius:4px}
.demo-notice{display:flex;gap:12px;align-items:center;font-size:12px;color:#b0c0d3;line-height:1.5;padding:14px 0}.demo-notice strong,.camera-watermark{color:#ffcf80;background:#352a1b;border:1px solid #725d3c;padding:4px 9px;letter-spacing:1px;border-radius:4px;font-size:10px}.demo-notice a{margin-left:auto;color:var(--accent);white-space:nowrap}.demo-hero{display:flex;gap:26px;align-items:center;background:linear-gradient(110deg,#172231,#101720);border:1px solid #314055;border-radius:10px;overflow:hidden}.demo-hero>img{width:250px;height:156px;object-fit:cover}.demo-hero h1{font-size:36px;letter-spacing:-1px;margin:8px 0}.demo-hero p{font-size:12px;line-height:1.5;color:#abbbcf}.demo-hero p:first-child{font-size:9px;color:var(--accent);letter-spacing:2px}.demo-clock{margin-left:auto;padding:20px;text-align:right;min-width:170px}.demo-clock span{font-size:11px;color:var(--accent)}.demo-clock strong{display:block;font-size:30px;margin:8px 0}.demo-clock small{font-size:8px;letter-spacing:1px;color:#8b9cb3}
#demoCars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}.demo-car{display:flex;align-items:center;gap:8px;padding:6px;background:#111b28;border:1px solid #2a394f;color:#a9bdd5;border-radius:5px;min-width:0}.demo-car img{width:56px;height:34px;object-fit:cover}.demo-car span{font-size:12px;overflow:hidden;text-overflow:ellipsis}.demo-car[aria-pressed=true]{border-color:var(--car);box-shadow:inset 0 -2px var(--car);color:white}
.demo-controlbar{display:flex;justify-content:space-between;gap:10px;margin:18px 0 12px;flex-wrap:wrap}.demo-controlbar>div{display:flex;gap:5px;flex-wrap:wrap}.demo-controlbar button,.demo-tools button,#tab-history button{background:#1b2839;border:1px solid #35465e;color:#bdcee3;border-radius:5px;padding:9px 12px;font-size:11px}.demo-controlbar button[aria-pressed=true]{border-color:var(--accent);color:white}.full-demo .tabbar{position:sticky;top:0;z-index:20;background:#0c131eef;backdrop-filter:blur(12px);padding:10px 0;gap:4px;overflow:auto;flex-wrap:nowrap;border-bottom:1px solid #34435a}.full-demo .tab{flex-shrink:0;white-space:nowrap;clip-path:none;font:700 10px Arial;letter-spacing:.3px;padding:12px 14px;border-radius:4px}.full-demo .tab.active{background:var(--accent);color:#111}.full-demo .tabpage{display:none}.full-demo .tabpage.active{display:block;animation:none}.full-demo .metric-value{font-size:40px;font-variant-numeric:tabular-nums}.full-demo .metric-label,.full-demo .panel-title{font-family:Arial,sans-serif;font-weight:bold;color:#afc1d8}.full-demo .mid-row{grid-template-columns:1fr 1.3fr 1fr}.full-demo .map-canvas{height:210px}.full-demo .map-track{width:100%;height:100%}.full-demo .stat-val{font-size:21px}.full-demo .chart-row canvas{width:100%;height:120px}.full-demo .pi-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.full-demo .admin-card p{color:#a4b6ce;font-size:13px;line-height:1.7}.full-demo .sensor-detail{line-height:1.6;color:#a9bbd3}.full-demo .sensor-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}.sensor-values dt{font-size:10px;color:#96aac4;margin-bottom:4px}.sensor-values dd{font-size:17px;color:#edf3fa}.full-demo[data-scenario=offline] .sensor-card{--frame:linear-gradient(130deg,#753741,#242635)}.full-demo .metric-card[data-severity=warning]{--frame:linear-gradient(130deg,#d56845,#503c30)}
.full-demo .cam-stage{height:auto;aspect-ratio:16/9;position:relative}.full-demo .cam-video{position:absolute;inset:0;display:block}.full-demo #demoCamera{display:block;width:100%;height:100%;object-fit:cover}.full-demo .cam-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}.full-demo .cam-ov-top{top:24px;left:24px}.full-demo .cam-ov-bot{bottom:24px;left:24px}.full-demo .cam-rec{top:24px;right:24px;color:#ffcf80}.camera-watermark{position:absolute;right:24px;bottom:24px;z-index:4;background:#0b111be8;pointer-events:none}.cam-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}#cameraLost{position:absolute;inset:0;display:grid;place-items:center;background:#09111aeb;color:#ff8a98;font-size:22px}.demo-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0}.demo-tools label{display:flex;align-items:center;gap:10px;font-size:12px}.demo-tools input{accent-color:var(--accent)}
.demo-history{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;margin-top:20px}#rideList{display:flex;flex-direction:column;gap:8px}#rideList button{text-align:left}#rideList button[aria-pressed=true]{border-color:var(--accent);color:white}#rideSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}#rideSummary span{font-size:11px;color:#a4b8d0}#rideSummary strong{display:block;font-size:24px;margin-top:8px}#rideChart{width:100%;height:220px;margin-bottom:16px}#demoFeedback{font-size:12px;color:#ffcc7b;margin-bottom:12px;line-height:1.5}#demoFeedback:empty{display:none}.demo-footer{display:flex;gap:25px;justify-content:space-between;border-top:1px solid #2d3d54;padding-top:20px;margin-top:28px;font-size:11px;color:#91a6c0;line-height:1.5}.demo-footer b{white-space:nowrap}.full-demo.presentation .demo-hero,.full-demo.presentation #demoCars,.full-demo.presentation .demo-top-title,.full-demo.presentation .demo-footer{display:none}.full-demo.presentation .demo-top{padding-bottom:8px}.full-demo.presentation .demo-controlbar{margin-top:4px}
@media(max-width:1050px){.full-demo .mid-row{grid-template-columns:1fr 1fr}.full-demo .map-panel{grid-column:1/-1}.demo-top-title,.demo-clock{display:none}.demo-car img{width:40px}.demo-hero>img{width:200px}}
@media(max-width:700px){.full-demo .dash{padding:12px}.demo-top{gap:10px;flex-wrap:wrap}.demo-top img{width:130px;height:auto}.demo-top-right{gap:4px}.demo-lang button{padding:6px;font-size:10px}.demo-top .dfd-mode-switch{font-size:10px;padding:7px}.demo-notice{font-size:10px;flex-wrap:wrap}.demo-notice span{flex:1}.demo-notice a{margin-left:0}.demo-hero{gap:14px}.demo-hero>img{width:110px;height:136px}.demo-hero h1{font-size:27px}.demo-hero p{font-size:10px;padding-right:8px}.demo-hero p:first-child{font-size:8px;letter-spacing:.5px}#demoCars{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.demo-car{gap:5px}.demo-car img{width:30px;height:28px}.demo-car span{font-size:10px}.demo-controlbar button{padding:8px;font-size:10px}.full-demo .metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}.full-demo .metric-card{padding:14px;min-width:0}.full-demo .metric-value{font-size:30px}.full-demo .metric-card svg{width:40px}.full-demo .metric-card.speed>div:last-child{width:32px!important;height:38px!important}.full-demo .mid-row{grid-template-columns:1fr}.full-demo .map-panel{grid-column:auto}.full-demo .pi-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.full-demo .net-grid,.full-demo .sensors-grid{grid-template-columns:1fr}.full-demo .rec-panel{flex-wrap:wrap;gap:12px}.full-demo .rec-buttons{width:100%;gap:7px}.full-demo .btn-rec{font-size:11px;padding:10px;flex:1}.full-demo .admin-card{padding:16px}.full-demo .cam-ov-top{top:12px;left:12px;gap:10px}.full-demo .cov-val{font-size:20px}.full-demo .cam-ov-bot{bottom:12px;left:12px;width:90px}.full-demo .cam-rec{top:12px;right:12px;font-size:9px}.camera-watermark{right:10px;bottom:10px;padding:3px 5px;font-size:7px}.demo-history{grid-template-columns:1fr}#rideList{display:grid;grid-template-columns:1fr 1fr}#rideSummary{grid-template-columns:1fr 1fr}.demo-footer{flex-wrap:wrap}.full-demo .security-row{display:flex;flex-direction:column;gap:6px}.full-demo .security-value{overflow-wrap:anywhere}.full-demo .cfg-grid{grid-template-columns:1fr 1fr}.full-demo .sound-grid{grid-template-columns:1fr}.demo-tools label{flex-wrap:wrap}.full-demo .gps-info{flex-wrap:wrap;gap:12px}.full-demo .ops-mini-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.full-demo *{animation:none!important;transition:none!important}}

.full-demo .metric-card[data-severity=critical]{--frame:linear-gradient(130deg,#ff526b,#722732)}.full-demo .metric-card[data-severity=critical] .metric-value{color:#ff7488}.full-demo .metric-card[data-severity=warning] .metric-value{color:#ffc468}.full-demo .alert-icon.critical{background:#592633;color:#ff8b9d}.full-demo .alert-icon.warning{background:#4c3b24;color:#ffcf80}#demoAlarmList{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.demo-alarm{padding:9px 12px;border:1px solid #96723c;background:#302718;color:#ffcf80;border-radius:5px;font-size:11px}.demo-alarm.critical{border-color:#9c3d50;background:#371c25;color:#ff9dad}