:root {
  --color-bg: #06141b;
  --color-bg-2: #09212a;
  --color-surface: rgba(10, 34, 43, .88);
  --color-surface-strong: #0b2a34;
  --color-border: rgba(97, 220, 201, .18);
  --color-text: #e9f8f5;
  --color-muted: #83a6a5;
  --color-accent: #32d397;
  --color-cyan: #28c6d4;
  --color-warning: #f4b942;
  --color-danger: #ff6673;
  --sidebar: 190px;
  --topbar: 72px;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; margin: 0; }
body { overflow-x: hidden; color: var(--color-text); background: radial-gradient(circle at 60% -20%, #16404a 0, transparent 38%), var(--color-bg); }
button, select { font: inherit; }
button { color: inherit; }
.v3-app { min-height: 100vh; padding: var(--topbar) 0 0 var(--sidebar); }
.v3-topbar { position: fixed; z-index: 30; inset: 0 0 auto 0; height: var(--topbar); display: flex; align-items: center; gap: 28px; padding: 0 24px; border-bottom: 1px solid var(--color-border); background: rgba(4, 18, 24, .94); backdrop-filter: blur(16px); }
.brand { min-width: calc(var(--sidebar) - 24px); display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand__mark { width: 34px; height: 34px; display: grid; place-items: center; color: #041b18; background: linear-gradient(135deg, #8ef5bb, var(--color-accent)); border-radius: 10px; box-shadow: 0 0 24px rgba(50, 211, 151, .25); }
.brand b, .brand small { display: block; }.brand b { font-size: 16px; }.brand small { margin-top: 3px; font-size: 8px; letter-spacing: 1.2px; color: var(--color-muted); }
.topbar__context { flex: 1; display: flex; gap: 12px; max-width: 720px; }
.topbar__context label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 9px; background: rgba(255,255,255,.025); }
.topbar__context label span { color: var(--color-muted); font-size: 11px; }.topbar__context select { width: 100%; min-width: 0; padding: 5px; color: var(--color-text); background: transparent; border: 0; outline: 0; }
.topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 18px; }.topbar__tools time { color: #acd1cd; font-variant-numeric: tabular-nums; font-size: 12px; }.topbar__tools button { border: 0; background: transparent; }.topbar__tools i { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 3px; border-radius: 9px; background: #163e42; font-size: 10px; font-style: normal; }.account { padding-left: 18px; border-left: 1px solid var(--color-border); }.account b,.account small { display: block; }.account b { font-size: 12px; }.account small { color: var(--color-muted); font-size: 9px; margin-top: 2px; }
.v3-sidebar { position: fixed; z-index: 20; inset: var(--topbar) auto 0 0; width: var(--sidebar); padding: 20px 12px; border-right: 1px solid var(--color-border); background: rgba(5, 23, 30, .92); }
.v3-sidebar nav { display: grid; gap: 5px; }.nav-item { position: relative; width: 100%; min-height: 48px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; padding: 8px 10px; text-align: left; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; }.nav-item span { color: var(--color-muted); font-size: 18px; }.nav-item b { font-size: 13px; font-weight: 500; }.nav-item small { grid-column: 2; margin-top: -8px; font-size: 8px; color: #567575; }.nav-item:hover { background: rgba(46, 211, 153, .06); }.nav-item.is-active { color: #dffff2; border-color: rgba(50, 211, 151, .25); background: linear-gradient(90deg, rgba(50, 211, 151, .16), rgba(50, 211, 151, .025)); }.nav-item.is-active:before { content: ""; position: absolute; left: -13px; width: 3px; height: 28px; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); }.nav-item.is-active span { color: var(--color-accent); }.nav-item.is-staged { opacity: .62; }
.sidebar__foot { position: absolute; bottom: 20px; left: 22px; display: grid; }.sidebar__foot span { color: var(--color-accent); font-weight: 700; }.sidebar__foot small { color: var(--color-muted); margin-top: 3px; }
.v3-main { min-height: calc(100vh - var(--topbar)); padding: 24px 28px 36px; background-image: linear-gradient(rgba(44, 151, 143, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 151, 143, .025) 1px, transparent 1px); background-size: 34px 34px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }.page-heading h1 { margin: 3px 0 4px; font-size: 25px; letter-spacing: 1px; }.page-heading p { margin: 0; color: var(--color-muted); font-size: 12px; }.eyebrow,.panel-kicker { color: var(--color-accent); font-size: 8px; letter-spacing: 1.6px; }.mock-chip { padding: 7px 10px; color: var(--color-warning); border: 1px solid rgba(244,185,66,.24); border-radius: 20px; background: rgba(244,185,66,.07); font-size: 10px; }
.panel { border: 1px solid var(--color-border); border-radius: 12px; background: linear-gradient(145deg, rgba(12, 42, 51, .94), rgba(6, 26, 34, .93)); box-shadow: 0 16px 42px rgba(0,0,0,.14); overflow: hidden; }.panel header { height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--color-border); }.panel h2,.panel h3 { margin: 3px 0 0; font-size: 14px; }.panel-note,.panel header>span { color: var(--color-muted); font-size: 9px; }
.overview-hero { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(280px, .85fr); gap: 14px; }.schematic-map { position: relative; min-height: 370px; overflow: hidden; background: radial-gradient(circle at 55% 45%, rgba(23, 103, 101, .28), transparent 32%), linear-gradient(145deg, #0b252e, #081b24); }.map-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(31deg, transparent 47%, rgba(102,163,157,.18) 48%, transparent 49%), linear-gradient(122deg, transparent 47%, rgba(102,163,157,.13) 48%, transparent 49%); background-size: 105px 82px, 130px 96px; }.map-river { position: absolute; width: 120%; height: 45px; left: -10%; top: 57%; rotate: -8deg; border: 1px solid rgba(42,154,190,.24); background: rgba(11,72,90,.25); }.map-point { position: absolute; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 3px; min-width: 150px; padding: 8px 10px; text-align: left; border: 1px solid color-mix(in srgb, var(--project) 60%, transparent); border-radius: 8px; background: rgba(4,22,27,.88); box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer; }.map-point:hover { translate: 0 -3px; }.map-point__icon { grid-row: 1 / 3; color: var(--project); font-size: 18px; text-shadow: 0 0 10px var(--project); }.map-point span:nth-child(2) { font-size: 10px; }.map-point small { color: var(--color-warning); font-size: 8px; }.map-point--1 { left: 13%; top: 21%; }.map-point--2 { left: 53%; top: 33%; }.map-point--3 { left: 34%; top: 68%; }.map-location-note { position: absolute; right: 12px; bottom: 10px; color: #547f7e; font-size: 9px; letter-spacing: 1px; }.project-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); }.project-strip__item { min-width: 0; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; padding: 11px; text-align: left; border: 0; border-right: 1px solid var(--color-border); background: rgba(255,255,255,.01); cursor: pointer; }.project-strip__item i,.selected-project__head i,.project-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--project); box-shadow: 0 0 9px var(--project); }.project-strip__item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }.project-strip__item em { color: var(--color-muted); font-size: 8px; font-style: normal; }
.selected-project { padding: 18px; }.selected-project__head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }.selected-project__head i { width: 12px; height: 34px; border-radius: 5px; }.selected-project__head small { color: var(--color-muted); }.selected-project__head h2 { margin-top: 5px; font-size: 17px; line-height: 1.5; }.selected-project dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 0; background: var(--color-border); }.selected-project dl div { padding: 14px; background: var(--color-bg-2); }.selected-project dt { color: var(--color-muted); font-size: 9px; }.selected-project dd { margin: 7px 0 0; font-size: 12px; }.selected-project__empty { display: grid; place-content: center; height: 100%; min-height: 290px; text-align: center; }.selected-project__empty strong { color: var(--color-accent); font-size: 19px; }.selected-project__empty p { max-width: 230px; color: var(--color-muted); font-size: 11px; line-height: 1.8; }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }.metric-card { position: relative; min-height: 98px; padding: 15px; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(9,34,42,.88); }.metric-card:after { content:""; position:absolute; inset:auto 14px 0; height:2px; background:linear-gradient(90deg,var(--color-accent),transparent); }.metric-card span,.metric-card small { display: block; color: var(--color-muted); font-size: 9px; }.metric-card strong { display: block; margin: 7px 0 5px; color: #77f0bd; font-size: 24px; }.metric-card--alert strong { color: var(--color-danger); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.insight-card { min-height: 150px; padding: 16px; }.empty-data { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--color-border); }.empty-data b { color: var(--color-cyan); font-size: 28px; }.empty-data p { color: var(--color-muted); font-size: 10px; }
.project-layout { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.65fr); gap: 14px; }.project-list,.site-list { min-height: 430px; }.project-row { width: 100%; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 10px; padding: 15px 16px; text-align: left; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; cursor: pointer; }.project-row:hover { background: rgba(50,211,151,.05); }.project-row div { min-width: 0; }.project-row strong,.project-row small { display: block; }.project-row strong { font-size: 11px; }.project-row small { margin-top: 5px; color: var(--color-muted); font-size: 9px; }.status { padding: 5px 7px; color: var(--color-accent); border-radius: 12px; background: rgba(50,211,151,.09); font-size: 8px; }.status--attention { color: var(--color-warning); background: rgba(244,185,66,.09); }.table-wrap { overflow: auto; }table { width: 100%; border-collapse: collapse; font-size: 10px; }th,td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--color-border); }th { color: var(--color-muted); font-size: 8px; font-weight: 500; }td strong,td small { display: block; }td small { margin-top: 5px; color: var(--color-muted); }.deferred { color: var(--color-warning); }.deployment-note { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 15px 18px; }.deployment-note strong { flex: none; color: var(--color-warning); font-size: 11px; }.deployment-note p { margin: 0; color: var(--color-muted); font-size: 10px; line-height: 1.7; }
.v3-toast { position: fixed; z-index: 60; right: 24px; bottom: 24px; max-width: 380px; padding: 12px 16px; opacity: 0; translate: 0 15px; pointer-events: none; border: 1px solid rgba(244,185,66,.28); border-radius: 9px; background: #153039; color: #f7d88d; font-size: 11px; transition: .2s; }.v3-toast.is-visible { opacity: 1; translate: 0; }.loading,.fatal-error { min-height: 55vh; display: grid; place-content: center; text-align: center; }.loading span { width: 32px; height: 32px; margin: auto; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 1s linear infinite; }.loading p,.fatal-error p,.fatal-error small { color: var(--color-muted); }.fatal-error b { color: var(--color-danger); }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 1100px) {
  :root { --sidebar: 74px; }.brand { min-width: 180px; }.v3-sidebar { padding-inline: 8px; }.nav-item { grid-template-columns: 1fr; place-items: center; text-align: center; }.nav-item b { font-size: 9px; }.nav-item small,.sidebar__foot { display: none; }.nav-item.is-active:before { left: -9px; }.overview-hero { grid-template-columns: 1.55fr .8fr; }.metric-grid { grid-template-columns: repeat(3,1fr); }.project-strip { grid-template-columns: 1fr; }.project-strip__item { border-bottom: 1px solid var(--color-border); }.topbar__tools time,.account small { display:none; }
}
@media (max-width: 760px) { .topbar__context label:first-child,.topbar__tools { display:none; }.overview-hero,.insight-grid,.project-layout { grid-template-columns: 1fr; }.metric-grid { grid-template-columns: repeat(2,1fr); }.v3-main { padding: 18px 14px; } }

.live-map { position: relative; min-height: 470px; background: #081b24; overflow: hidden; }
.v3-map-marker { position: relative; width: 22px; height: 22px; cursor: pointer; }
.v3-marker-project-ring { position: absolute; inset: 0; border: 2px solid var(--project-color,#68849a); border-radius: 50%; box-shadow: 0 0 8px color-mix(in srgb,var(--project-color,#68849a) 70%,transparent); }
.v3-marker-base { position: absolute; inset: 5px; display: block; border: 1.5px solid #fff; box-shadow: 0 0 8px currentColor; }
.v3-marker-roof { color: #2196f3; background: #2196f3; transform: rotate(45deg); border-radius: 2px; }
.v3-marker-wall { color: #00e676; background: #00e676; border-radius: 2px; }
.v3-marker-construction { color: #ffc107; background: #ffc107; clip-path: polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%); }
.v3-marker-water { color: #4dd0e1; background: #4dd0e1; border-radius: 70% 40% 65% 45%; transform: rotate(45deg); }
.v3-marker-in-progress { color: #ff5252; background: #ff5252; clip-path: polygon(50% 0,100% 100%,0 100%); }
.v3-marker-other { color: #78909c; background: #78909c; border-radius: 50%; }
.v3-marker-iot,.v3-marker-alarm { position: absolute; z-index: 3; width: 7px; height: 7px; border: 1px solid #eaffff; border-radius: 50%; }
.v3-marker-iot { left: -2px; top: -2px; background: #19e6df; box-shadow: 0 0 6px #19e6df; }
.v3-marker-iot--camera::after { content: ''; position: absolute; inset: 2px 1px; border: 1px solid #002733; }
.v3-marker-alarm { right: -2px; top: -2px; }
.v3-marker-alarm--automatic { background: #ff4d5f; box-shadow: 0 0 7px #ff4d5f; animation: v3-alarm-pulse 1.4s ease-in-out infinite; }
.v3-marker-alarm--manual { background: #ffd43b; box-shadow: 0 0 7px #ffd43b; }
.v3-map-marker.is-highlighted { transform: scale(1.28); }
.v3-map-marker.is-highlighted .v3-marker-project-ring { border-color: #fff; box-shadow: 0 0 14px #fff; }
@keyframes v3-alarm-pulse { 50% { opacity: .48; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .v3-marker-alarm--automatic { animation: none; } }
.v3-map-popup { min-width: 230px; display: grid; gap: 4px; padding: 4px; color: #29413c; font-family: "Microsoft YaHei UI",sans-serif; }.v3-map-popup strong { margin-bottom: 4px; color: #126d4e; font-size: 14px; }.v3-map-popup span { font-size: 11px; }
.map-legend { min-height: 34px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 6px 13px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 8px; }.map-legend span { display: inline-flex; align-items: center; gap: 5px; }.legend-roof,.legend-wall { width: 10px; height: 10px; display: inline-block; border: 1px solid white; border-radius: 1px; background: #00e676; }.legend-wall { background:#2196f3; transform:rotate(45deg); }.legend-line { width: 2px; height: 13px; display:inline-block; transform:rotate(45deg); background:#ff5252; }.legend-line--smart { background:#2196f3; }
.v3-map-fallback { background: radial-gradient(circle at 50% 45%,rgba(17,92,91,.28),transparent 35%),linear-gradient(145deg,#0b252e,#071820); }.fallback-grid { position:absolute;inset:0;opacity:.35;background-image:linear-gradient(25deg,transparent 48%,rgba(102,163,157,.15) 49%,transparent 50%),linear-gradient(120deg,transparent 48%,rgba(102,163,157,.12) 49%,transparent 50%);background-size:85px 67px,110px 82px}.fallback-marker { position:absolute;width:18px;height:18px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%); }.fallback-marker>span { display:none; position:absolute; z-index:20; left:22px; top:-20px; padding:10px; border:1px solid var(--color-border); border-radius:8px; background:#eafff8; }.fallback-marker:hover>span { display:block; }.map-fallback-notice { position:absolute;right:12px;bottom:10px;color:#6b9492;font-size:9px; }
.business-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.business-kpis article { min-height:96px;padding:14px;border:1px solid var(--color-border);border-radius:10px;background:rgba(9,34,42,.88)}.business-kpis span,.business-kpis small{display:block;color:var(--color-muted);font-size:9px}.business-kpis strong{display:block;margin:7px 0 5px;color:#77f0bd;font-size:23px}.business-panel{max-height:590px}.business-panel table{font-size:9px}.street-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}.street-summary article{padding:12px;border:1px solid var(--color-border);border-radius:9px;background:rgba(9,34,42,.8)}.street-summary strong,.street-summary span,.street-summary small{display:block}.street-summary strong{font-size:10px}.street-summary span,.street-summary small{margin-top:5px;color:var(--color-muted);font-size:8px}.iot-layout,.analytics-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.device-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--color-border)}.device-row strong,.device-row small{display:block}.device-row strong{font-size:10px}.device-row small,.device-row>span{margin-top:3px;color:var(--color-muted);font-size:8px}.device-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 8px var(--color-accent)}.device-dot--offline{background:var(--color-danger);box-shadow:0 0 8px var(--color-danger)}.alarm-row{display:grid;grid-template-columns:1fr auto;gap:5px;padding:12px 15px;border-bottom:1px solid var(--color-border)}.alarm-row strong{font-size:10px}.alarm-row span,.alarm-row small{color:var(--color-muted);font-size:8px}.alarm-row small{color:var(--color-warning)}.bar-list{padding:14px}.bar-list>div{display:grid;grid-template-columns:90px 1fr 75px;align-items:center;gap:10px;margin:11px 0;font-size:9px}.bar-list i{height:6px;border-radius:3px;background:#123640;overflow:hidden}.bar-list b{display:block;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-cyan))}.bar-list strong{text-align:right;color:#a9cfca}.standards-card{padding:18px}.standards-card p,.standards-card li{color:var(--color-muted);font-size:10px;line-height:1.8}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.report-card{min-height:170px;padding:18px}.report-card>span{color:var(--color-cyan);font-size:22px}.report-card strong{display:block;margin:14px 0;color:#8ff0c0}.report-card button{padding:7px 12px;border:1px solid var(--color-border);border-radius:7px;background:#10343d;color:var(--color-text);cursor:pointer}.source-trace{margin-top:14px;padding:15px 18px}.source-trace p,.source-trace code{color:var(--color-muted);font-size:9px}.enterprise-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px}.enterprise-card{min-height:300px;padding:18px}.enterprise-card dl div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--color-border);font-size:9px}.enterprise-card dt{color:var(--color-muted)}.person-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--color-border)}.person-row i{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#17483e;color:var(--color-accent);font-style:normal}.person-row span,.person-row small{display:block;font-size:9px}.person-row small,.person-row em{color:var(--color-muted);font-size:8px;font-style:normal}.integration-list{padding:0;list-style:none}.integration-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-border);font-size:9px}.integration-list span{color:var(--color-warning)}.integration-list .ready{color:var(--color-accent)}
.operational-data{padding:18px 0 12px}.operational-data b{display:block;color:var(--color-accent);font:700 31px/1 "Rajdhani","Microsoft YaHei",sans-serif}.operational-data p{margin:8px 0 0;color:var(--color-muted);font-size:10px}.insight-card{display:flex;flex-direction:column}.insight-card>button{margin-top:auto;align-self:flex-start;padding:7px 12px;border:1px solid var(--color-border);border-radius:8px;background:rgba(50,211,151,.08);color:var(--color-accent);cursor:pointer}.project-strip__item:only-child{grid-column:1/-1}
@media (max-width:1100px){.business-kpis{grid-template-columns:repeat(2,1fr)}.street-summary{grid-template-columns:repeat(3,1fr)}.report-grid{grid-template-columns:repeat(2,1fr)}.enterprise-grid{grid-template-columns:1fr 1fr}.live-map{min-height:390px}}

/* Reference dashboard composition */
:root{--sidebar:clamp(136px,10.75vw,188px);--topbar:50px}
.v3-topbar{gap:18px;padding:0 14px}.brand__mark{width:30px;height:30px;border-radius:7px}.brand b{font-size:14px}.topbar__context{max-width:620px}.topbar__context label{padding:3px 8px;border-radius:6px}.topbar__tools{gap:13px}.v3-sidebar{padding:10px 8px}.v3-sidebar nav{gap:2px}.nav-item{min-height:41px;padding:6px 8px;border-radius:5px}.nav-item span{font-size:15px}.nav-item b{font-size:11px}.sidebar__foot{bottom:12px;left:16px}.v3-main:has(.home-dashboard){padding:8px}
.home-dashboard{min-height:calc(100vh - var(--topbar) - 16px);display:grid;grid-template-rows:minmax(350px,1fr) minmax(170px,.52fr) 86px;gap:7px}.home-top-grid{min-height:0;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(270px,1fr);gap:7px}.home-map-panel{position:relative;min-height:0;display:grid;grid-template-rows:40px minmax(0,1fr)}.home-map-panel>header,.home-side-stack header,.home-bottom-grid header,.home-requirements>header{height:40px;padding:0 12px}.home-map-panel .live-map{height:100%;min-height:0}.home-map-project{position:absolute;z-index:6;left:12px;top:52px;width:min(270px,42%)}.home-map-project .project-strip__item{width:100%;min-height:56px;grid-template-columns:10px 1fr auto;padding:9px 11px;border:1px solid rgba(50,211,151,.34);border-radius:6px;background:rgba(5,35,39,.9);box-shadow:0 10px 26px rgba(0,0,0,.28)}.home-map-project .project-strip__item span{white-space:normal;line-height:1.4}.home-map-panel>.map-legend{position:absolute;z-index:6;right:8px;bottom:7px;min-height:24px;padding:5px 8px;border:1px solid rgba(97,220,201,.16);border-radius:5px;background:rgba(3,21,27,.82)}
.home-side-stack{min-height:0;display:grid;grid-template-rows:1.05fr .95fr;gap:7px}.home-summary-card,.home-project-card{min-height:0}.home-summary-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}.home-summary-kpis>div{min-height:58px;padding:8px;border:1px solid var(--color-border);border-radius:5px;background:rgba(4,24,31,.48)}.home-summary-kpis span,.home-summary-kpis small{display:block;color:var(--color-muted);font-size:8px}.home-summary-kpis strong{display:block;margin:3px 0;color:#7bedad;font-size:21px;line-height:1}.home-summary-kpis .is-warning{color:var(--color-warning)}.home-summary-kpis .is-danger,.is-danger{color:var(--color-danger)!important}.home-progress-legend{display:flex;justify-content:space-between;padding:1px 10px 6px;color:var(--color-muted);font-size:7px}.home-progress{height:6px;margin:0 10px;border-radius:4px;overflow:hidden;background:#315058}.home-progress i,.home-progress b{display:inline-block;height:100%;vertical-align:top}.home-progress i{background:var(--color-accent)}.home-progress b{background:#2789e6}
.home-project-name{display:flex;align-items:center;gap:8px;margin:9px 10px;padding-bottom:7px;border-bottom:1px solid var(--color-border)}.home-project-name i{width:22px;height:22px;flex:none;border-radius:5px;background:var(--project);box-shadow:0 0 10px color-mix(in srgb,var(--project) 60%,transparent)}.home-project-name strong{font-size:10px;line-height:1.4}.home-project-card dl{display:grid;grid-template-columns:1fr 1fr;margin:0 10px}.home-project-card dl>div{padding:5px 8px;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.home-project-card dt{color:var(--color-muted);font-size:7px}.home-project-card dd{margin:3px 0 0;color:#7bedad;font-size:15px}.home-project-card dd small{margin-left:2px;font-size:7px}.home-project-progress{position:relative;height:5px;margin:8px 12px;border-radius:4px;background:#1b4349}.home-project-progress i{display:block;height:100%;border-radius:4px;background:var(--color-accent)}.home-project-progress span{position:absolute;right:0;top:-15px;color:var(--color-accent);font-size:8px}
.home-bottom-grid{min-height:0;display:grid;grid-template-columns:1.12fr .72fr .62fr 1.15fr;gap:7px}.home-bottom-grid>.panel{min-height:0}.home-bottom-grid header h2{font-size:11px}.home-bottom-grid header button{padding:3px 6px;border:1px solid var(--color-border);border-radius:4px;background:transparent;color:var(--color-muted);font-size:7px;cursor:pointer}.home-media-card{display:grid;grid-template-rows:34px minmax(0,1fr)}.home-media-card>header{height:34px}.home-media-visual{position:relative;min-height:0;overflow:hidden}.home-media-visual img{width:100%;height:100%;display:block;object-fit:cover}.home-media-visual>span{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:4px;background:rgba(17,116,73,.9);color:#dffff2;font-size:7px}.home-media-visual p{position:absolute;inset:auto 0 0;margin:0;padding:18px 10px 8px;background:linear-gradient(transparent,rgba(2,17,22,.94));font-size:9px}.home-media-visual small{display:block;margin-top:3px;color:#bfd1cf;font-size:7px}.home-data-card{display:grid;grid-template-rows:40px minmax(0,1fr)}.home-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:8px;background:var(--color-border)}.home-pair>div{display:grid;place-content:center;padding:4px;text-align:center;background:#09232b}.home-pair span{color:var(--color-muted);font-size:7px}.home-pair strong{margin-top:2px;color:#eefdf8;font-size:17px}.home-safety{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:center;padding:12px}.home-safety strong{grid-row:1/3;color:#7bedad;font-size:31px}.home-safety span,.home-safety small{color:var(--color-muted);font-size:7px}.home-safety b{font-size:18px}.home-iot-content{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px;padding:13px}.home-iot-content>div>strong,.home-iot-content>div>span{display:block}.home-iot-content>div>strong{color:#8af1c2;font-size:27px}.home-iot-content>div>span{margin-top:2px;color:var(--color-muted);font-size:7px}.home-linear{height:6px;margin-top:12px;border-radius:5px;background:#1b4349}.home-linear i{display:block;height:100%;border-radius:5px;background:var(--color-accent)}.home-iot-content dl{margin:0}.home-iot-content dl>div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--color-border);font-size:8px}.home-iot-content dt{color:var(--color-muted)}.home-iot-content dd{margin:0}
.home-requirements{position:relative;display:grid;grid-template-rows:28px 1fr}.home-requirements>header{height:28px;justify-content:center}.home-requirements>header h2{font-size:11px}.home-requirements>header span{position:absolute;right:12px}.home-requirements>div{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:7px 70px 8px}.home-requirements section+section{padding-left:24px;border-left:1px solid var(--color-border)}.home-requirements strong{color:#dffcf2;font-size:9px}.home-requirements p{margin:3px 0 0;color:var(--color-muted);font-size:7px;line-height:1.5}.home-requirements>button{position:absolute;right:12px;bottom:9px;padding:3px 7px;border:1px solid var(--color-border);border-radius:4px;background:transparent;color:var(--color-accent);font-size:7px;cursor:pointer}
@media(max-width:1100px){:root{--sidebar:110px}.brand{min-width:170px}.v3-sidebar{padding-inline:6px}.nav-item{grid-template-columns:22px 1fr;place-items:initial;text-align:left}.nav-item b{font-size:9px}.nav-item.is-active:before{left:-7px}.home-top-grid{grid-template-columns:minmax(0,1.9fr) minmax(240px,.9fr)}.home-summary-kpis>div{min-height:54px}.home-bottom-grid{grid-template-columns:1.05fr .72fr .65fr 1.05fr}.home-map-panel .live-map{min-height:0}.project-strip{grid-template-columns:1fr}}
@media(max-width:820px){.home-dashboard{grid-template-rows:auto}.home-top-grid,.home-side-stack,.home-bottom-grid{grid-template-columns:1fr}.home-side-stack{grid-template-rows:auto}.home-map-panel{min-height:480px}.home-bottom-grid{grid-template-columns:1fr 1fr}.home-requirements{min-height:120px}.home-requirements>div{padding-inline:18px}}

/* Single-screen density matching the selected 960 × 640 reference */
:root{--topbar:40px}
.v3-topbar{padding-inline:10px}.brand__mark{width:26px;height:26px}.brand b{font-size:13px}.brand small{font-size:7px}.topbar__context label{min-height:30px}.topbar__tools time,.account small{font-size:8px}
.v3-main:has(.home-dashboard){height:calc(100vh - var(--topbar));min-height:0;padding:2px;overflow:hidden}.home-dashboard{height:100%;min-height:0;grid-template-rows:minmax(0,1.95fr) minmax(0,1fr) 82px;gap:5px}.home-top-grid,.home-side-stack,.home-bottom-grid{gap:5px}.home-map-panel{grid-template-rows:34px minmax(0,1fr)}.home-map-panel>header{height:34px}.home-map-project{top:43px}.home-map-project .project-strip__item{min-height:48px;padding:7px 9px}.home-map-panel>.map-legend{bottom:4px}.home-side-stack>article>header{height:32px}.home-summary-kpis{gap:4px;padding:5px}.home-summary-kpis>div{min-height:41px;padding:5px 7px}.home-summary-kpis strong{font-size:17px}.home-progress-legend{padding:0 7px 4px}.home-progress{margin-inline:7px;height:5px}.home-project-name{margin:6px 8px;padding-bottom:5px}.home-project-name i{width:18px;height:18px}.home-project-card dl{margin-inline:8px}.home-project-card dl>div{padding:3px 6px}.home-project-card dd{font-size:12px}.home-project-progress{margin:6px 9px}.home-bottom-grid header{height:32px;padding-inline:9px}.home-media-card{grid-template-rows:32px minmax(0,1fr)}.home-data-card{grid-template-rows:32px minmax(0,1fr)}.home-pair{padding:5px}.home-pair strong{font-size:15px}.home-safety{padding:8px}.home-safety strong{font-size:27px}.home-iot-content{gap:8px;padding:8px}.home-iot-content>div>strong{font-size:23px}.home-requirements{grid-template-rows:25px 1fr}.home-requirements>header{height:25px}.home-requirements>div{gap:16px;padding:5px 64px 5px}.home-requirements section+section{padding-left:16px}.home-requirements>button{bottom:6px}
@media(max-width:1100px){:root{--sidebar:104px}.v3-sidebar{padding-top:8px}.nav-item{min-height:39px}.home-summary-kpis>div{min-height:40px}.home-bottom-grid{grid-template-columns:1.08fr .72fr .65fr 1.08fr}}
@media(max-width:820px){.v3-main:has(.home-dashboard){height:auto;min-height:calc(100vh - var(--topbar));overflow:visible}.home-dashboard{height:auto;grid-template-rows:auto}.home-map-panel{min-height:430px}.home-side-stack>article{min-height:180px}.home-bottom-grid>article{min-height:180px}.home-requirements{min-height:120px}}

body:has(.home-dashboard) .v3-topbar{padding-left:calc(var(--sidebar) + 8px)}body:has(.home-dashboard) .topbar__context{margin-left:auto;max-width:300px}body:has(.home-dashboard) .topbar__context label{border:0;background:transparent}body:has(.home-dashboard) .topbar__context label:nth-child(2){display:none}.home-top-grid{grid-template-columns:minmax(0,2.25fr) minmax(255px,1fr)}.home-side-stack{grid-template-rows:1.7fr 1fr}.home-summary-kpis>div{min-height:38px}.home-project-name{margin-block:4px}.home-project-card dl>div{padding-block:2px}.home-project-progress{margin-block:5px}.home-bottom-grid{grid-template-columns:1.08fr .7fr .62fr 1.22fr}
.home-summary-card{display:flex;flex-direction:column}.home-summary-card .home-progress-legend{margin-top:auto}.home-summary-card .home-progress{margin-bottom:8px}.home-side-stack .home-project-card>header{height:29px}.home-project-name{min-height:22px;margin:3px 7px;padding-bottom:3px;overflow:hidden}.home-project-name i{width:16px;height:16px}.home-project-name strong{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-project-card dl{margin-inline:7px}.home-project-card dl>div{padding:1px 5px}.home-project-card dt{font-size:6px}.home-project-card dd{margin-top:1px;font-size:10px}.home-project-progress{height:4px;margin:4px 8px}