*,*:before,*:after{box-sizing:border-box}:root{--bg: #0b0f14;--surface: #141b24;--surface-2: #1c2633;--border: #2a3647;--text: #e8eef5;--muted: #8fa3b8;--accent: #4fc3f7;--ok: #66bb6a;--warn: #ffb74d;--critical: #ef5350;--nav-h: 64px;--header-h: 52px;--safe-bottom: env(safe-area-inset-bottom, 0px);font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}.app-shell{display:flex;flex-direction:column;width:100%;height:100dvh;max-height:100dvh;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:var(--header-h);padding:6px 14px;background:var(--surface);border-bottom:1px solid var(--border)}.header-brand{min-width:0}.header-status{display:flex;align-items:center;gap:8px;flex-shrink:0}.app-header h1{margin:0;font-size:.95rem;font-weight:600;line-height:1.2}.app-header .sub{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-main{flex:1;min-height:0;overflow:hidden;padding:8px 12px}.bottom-nav{flex-shrink:0;display:grid;grid-template-columns:repeat(6,1fr);min-height:var(--nav-h);padding-bottom:var(--safe-bottom);background:var(--surface);border-top:1px solid var(--border)}.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;color:var(--muted);transition:color .15s,background .15s}.bottom-nav button.active{color:var(--accent);background:#4fc3f71a}.bottom-nav .icon{font-size:1.1rem;line-height:1}.bottom-nav .label{font-size:.62rem;font-weight:600;letter-spacing:.01em;text-align:center;line-height:1.1}.view-panel{height:100%;display:flex;flex-direction:column;gap:8px;overflow:hidden;min-height:0}.panel-row{display:grid;gap:10px;min-height:0}.panel-row.fill{flex:1;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.perception-row{grid-template-columns:repeat(4,minmax(0,1fr))}.home-view{gap:8px}.home-body{flex:1;min-height:0;display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:10px;overflow:hidden}.home-col{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}.home-col-camera{position:relative}.home-col-camera>.stream-tile-fill{flex:1}.home-rear-thumb{position:absolute;right:10px;bottom:10px;width:28%;min-width:120px;max-width:200px;height:32%;min-height:80px;z-index:2;box-shadow:0 4px 16px #00000073;border-radius:8px;overflow:hidden}.home-placeholder{flex:1;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:.85rem}.home-col-metrics{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:clamp(8px,1.2vmin,14px);min-height:0}.home-col-metrics .section-title{font-size:clamp(.72rem,1.6vmin,.95rem);margin-bottom:clamp(6px,1vmin,10px)}.home-col-status{gap:8px}.home-status-block{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;flex-shrink:0}.home-status-grow{flex:1;min-height:0;display:flex;flex-direction:column}.home-kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}.home-kv{display:flex;flex-direction:column;gap:2px;min-width:0}.home-kv.wide{grid-column:1 / -1}.home-kv .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.home-kv .v{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-text{color:var(--ok)}.bad-text{color:var(--critical)}.home-clear-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#66bb6a14;border:1px solid rgba(102,187,106,.25);border-radius:8px;color:var(--ok);font-size:.82rem;text-align:center;padding:12px}.home-clear-icon{font-size:1.5rem;font-weight:700}.home-risk-stack{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}.home-alert-strip{display:flex;flex-wrap:wrap;gap:6px}.home-alert-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;font-size:.68rem;color:var(--muted)}.metric-grid-home{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-content:stretch;gap:clamp(6px,1.2vmin,12px)}.metric-grid-home .metric-card-home{container-type:size;display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:0;height:100%;padding:clamp(8px,5cqmin,20px) clamp(10px,6cqmin,22px);text-align:center}.metric-grid-home .metric-card-home .label{flex:0 0 auto;font-size:clamp(.7rem,17cqmin,1.35rem);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;margin-bottom:clamp(4px,7cqmin,14px);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.metric-grid-home .metric-card-home .value{flex:1 1 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.1em .2em;font-size:clamp(1.15rem,40cqmin,3.5rem);font-weight:800;line-height:1;min-height:0;white-space:nowrap}.metric-grid-home .metric-card-home .value-num{font-variant-numeric:tabular-nums}.metric-grid-home .metric-card-home .unit{font-size:clamp(.65rem,16cqmin,1.15rem);font-weight:700;color:var(--muted);margin-left:0;align-self:center}.home-metrics,.home-risks{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.section-title{margin:0 0 6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0}.inline-empty{margin:0;color:var(--muted);font-size:.85rem;padding:8px 0}.status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:.68rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border);white-space:nowrap}.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.status-pill.ok .dot{background:var(--ok)}.status-pill.warn .dot{background:var(--warn)}.status-pill.offline .dot{background:var(--critical)}.connectivity-bar{display:flex;flex-wrap:nowrap;gap:6px}.connectivity-bar.compact .status-pill{font-size:.62rem;padding:2px 6px}.alert-banner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;flex-shrink:0}.alert-banner.compact{padding:8px 12px}.alert-banner.high,.alert-banner.critical{background:#ef535026;border-color:#ef535073}.alert-banner.medium,.alert-banner.warn{background:#ffb74d1f;border-color:#ffb74d66}.alert-banner.none{background:#66bb6a1a;border-color:#66bb6a59}.banner-text{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}.alert-banner strong{font-size:.85rem;white-space:nowrap}.banner-detail{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.banner-more{font-size:.72rem;color:var(--muted);white-space:nowrap}.metric-grid{display:grid;gap:8px}.metric-grid-horizontal{flex:1;grid-template-columns:repeat(7,minmax(0,1fr));align-content:start;min-height:0}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-width:0}.metric-card .label{font-size:.65rem;color:var(--muted);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card .value{font-size:1.05rem;font-weight:700;line-height:1.1;white-space:nowrap}.metric-card .unit{font-size:.65rem;font-weight:500;color:var(--muted);margin-left:2px}.metric-card.ok{border-left:3px solid var(--ok)}.metric-card.warn{border-left:3px solid var(--warn)}.metric-card.critical{border-left:3px solid var(--critical)}.risk-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;min-height:0;align-content:start}.risk-card,.alert-card,.sensor-card{padding:8px 10px}.list-card{background:var(--surface);border:1px solid var(--border);border-radius:10px}.list-card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}.list-card .title{font-weight:600;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-card .meta{font-size:.72rem;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-card .meta.time{margin-top:0;flex-shrink:0}.severity-chip{flex-shrink:0;padding:2px 7px;border-radius:999px;font-size:.62rem;font-weight:700;text-transform:uppercase}.severity-chip.high,.severity-chip.critical{background:#ef535033;color:#ff8a80}.severity-chip.medium,.severity-chip.warn{background:#ffb74d2e;color:#ffcc80}.severity-chip.low,.severity-chip.ok{background:#90a4ae2e;color:#b0bec5}.stream-tile-fill{display:flex;flex-direction:column;min-height:0;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}.stream-tile-fill .preview{position:relative;flex:1;min-height:0;background:var(--surface-2)}.stream-tile-fill .preview img{width:100%;height:100%;object-fit:cover;display:block}.stream-tile-fill .info{flex-shrink:0;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--border)}.stream-tile-fill .info .title{font-weight:600;font-size:.82rem}.stream-tile-fill .info .meta{font-size:.68rem;color:var(--muted);text-align:right}.stream-badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;font-size:.65rem;font-weight:700;text-transform:uppercase;background:#0000008c}.stream-badge.live{color:var(--ok)}.stream-badge.placeholder{color:var(--accent)}.stream-badge.offline{color:var(--critical)}.alerts-view{flex-direction:row;gap:10px}.alert-pane{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.alert-pane-list{flex:1;display:flex;flex-direction:column;gap:6px;overflow:hidden}.pane-more{margin:0;font-size:.72rem;color:var(--muted)}.sensor-columns{flex:1;display:grid;gap:10px;min-height:0;overflow:hidden}.sensor-columns.layout-two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.sensor-columns.layout-quad{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.sensors-panel{gap:8px}.sensor-column{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}.sensor-column h3{margin:0;font-size:.78rem;color:var(--accent);flex-shrink:0}.sensor-column-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:8px;padding-right:4px}.sensor-card{padding:8px 10px;flex-shrink:0}.sensor-card .title{overflow:visible;text-overflow:unset;white-space:normal}.sensor-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}.sensor-card-head .meta.time{flex-shrink:0;margin-top:0;white-space:nowrap}.sensor-readings{display:flex;flex-direction:column;gap:4px}.sensor-row{display:flex;flex-direction:column;gap:2px;padding:4px 0;border-bottom:1px solid rgba(42,54,71,.45);font-size:.74rem}.sensor-row:last-child{border-bottom:none}.sensor-row .key{color:var(--muted);font-size:.68rem;line-height:1.2;overflow:visible;text-overflow:unset;white-space:normal}.sensor-row .val{text-align:left;font-weight:600;font-size:.8rem;line-height:1.35;color:var(--text);overflow:visible;text-overflow:unset;white-space:normal;word-break:break-word;overflow-wrap:anywhere;max-width:none}.loading-state,.error-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);text-align:center;padding:16px}.error-state{color:#ff8a80}@media(max-width:900px){.home-body{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.home-col-camera{grid-column:1 / -1}.metric-grid-horizontal{grid-template-columns:repeat(4,minmax(0,1fr))}.risk-row,.perception-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(orientation:portrait){.app-header .sub{max-width:55vw}.header-status{flex-direction:column;align-items:flex-end;gap:4px}}