:root {
  --bg: #f3f6f4;
  --panel: #ffffff;
  --ink: #15211b;
  --muted: #718079;
  --line: #e2e8e4;
  --green: #16a064;
  --green-dark: #0c7045;
  --green-soft: #e9f7f0;
  --blue: #3277d5;
  --amber: #e4962d;
  --red: #d84c4c;
  --sidebar: #101c17;
  --shadow: 0 8px 24px rgba(25, 48, 37, .055);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: Inter, "Noto Sans SC", Arial, sans-serif; letter-spacing: 0; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.removed-sidebar { display: none; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 236px; flex-direction: column; color: #d3ded8; background: var(--sidebar); border-right: 1px solid #24332c; transition: transform .25s ease; }
.brand { display: flex; align-items: center; gap: 12px; height: 78px; padding: 0 22px; border-bottom: 1px solid #24332c; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: #07140f; background: #42cf88; border-radius: 6px; }
.brand-mark svg { width: 21px; }
.brand-copy { display: flex; min-width: 0; flex-direction: column; }
.brand-copy strong { color: #fff; font-size: 16px; }
.brand-copy small { margin-top: 2px; color: #80948a; font-size: 11px; }
.main-nav { flex: 1; padding: 18px 12px; }
.nav-label { margin: 16px 12px 8px; color: #60766b; font-size: 10px; font-weight: 700; }
.nav-label:first-child { margin-top: 0; }
.nav-item { position: relative; display: flex; width: 100%; height: 42px; align-items: center; gap: 12px; padding: 0 12px; color: #9cafA5; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.nav-item:hover { color: #fff; background: #182921; }
.nav-item.active { color: #fff; background: #20382d; }
.nav-item.active::before { position: absolute; left: 0; width: 3px; height: 20px; content: ""; background: #42cf88; border-radius: 0 2px 2px 0; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item span { flex: 1; font-size: 13px; font-weight: 500; }
.nav-item em { padding: 2px 5px; color: #62dc9d; background: #254434; border-radius: 3px; font-size: 8px; font-style: normal; }
.sidebar-footer { padding: 12px; border-top: 1px solid #24332c; }
.system-health { display: flex; align-items: center; gap: 10px; margin: 4px 6px 12px; padding: 10px 8px; background: #15261e; border: 1px solid #253a30; border-radius: 6px; }
.status-dot { width: 7px; height: 7px; background: #44d18b; border-radius: 50%; box-shadow: 0 0 0 4px rgba(68,209,139,.1); }
.system-health > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.system-health strong { color: #d9e7df; font-size: 11px; font-weight: 500; }
.system-health small { color: #71887c; font-size: 9px; }

.main-content { width: 100%; margin-left: 0; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; height: 78px; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.header-mark { flex: 0 0 auto; }
.sync-text { color: var(--muted); font-size: 10px; }
.topbar h1 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.topbar p { margin: 0; color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.live-pill { display: flex; height: 30px; align-items: center; gap: 7px; padding: 0 10px; color: var(--green-dark); background: var(--green-soft); border: 1px solid #ceebdc; border-radius: 4px; font-size: 11px; font-weight: 600; }
.live-pill span { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(22,160,100,.12); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.icon-button:hover { background: #f6f9f7; }
.icon-button svg { width: 17px; }
.icon-button.small { width: 30px; height: 30px; }
.notification-button { position: relative; }
.notification-button b { position: absolute; top: -3px; right: -3px; display: grid; width: 15px; height: 15px; place-items: center; color: #fff; background: var(--red); border: 2px solid #fff; border-radius: 50%; font-size: 7px; }
.profile { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.profile > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #244b39; border-radius: 5px; font-size: 11px; font-weight: 700; }
.profile div { display: flex; flex-direction: column; gap: 2px; }
.profile strong { font-size: 11px; }
.profile small { color: var(--muted); font-size: 9px; }
.profile svg { width: 14px; color: var(--muted); }
.mobile-menu { display: none; }

.content-wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding: 24px 28px 42px; }
.filter-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.segmented { display: flex; padding: 3px; background: #e8eeea; border-radius: 5px; }
.segmented button { min-width: 58px; height: 29px; color: var(--muted); background: transparent; border: 0; border-radius: 3px; cursor: pointer; font-size: 11px; }
.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(30,52,41,.1); font-weight: 600; }
.filter-actions { display: flex; gap: 9px; }
.select-control, .search-control { display: flex; height: 36px; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.select-control svg, .search-control svg { width: 15px; color: var(--muted); }
.select-control select { color: #425149; background: transparent; border: 0; outline: 0; font-size: 11px; }
.secondary-button { display: flex; height: 36px; align-items: center; gap: 8px; padding: 0 13px; background: #fff; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 600; }
.secondary-button svg { width: 15px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.kpi-card { position: relative; min-height: 124px; padding: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; }
.kpi-head span { color: var(--muted); font-size: 11px; font-weight: 500; }
.kpi-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--green-dark); background: var(--green-soft); border-radius: 5px; }
.kpi-icon svg { width: 16px; }
.kpi-value { margin: 12px 0 8px; font-size: 25px; font-weight: 700; line-height: 1; }
.kpi-value small { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.kpi-change { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 9px; }
.kpi-change.warning { color: var(--amber); }
.kpi-change svg { width: 12px; }
.kpi-change span { color: #89958f; }

.vehicle-link-panel, .test-matrix-panel { margin-bottom: 14px; overflow: hidden; }
.voltage-badge { display: inline-flex; height: 28px; align-items: center; gap: 6px; padding: 0 9px; color: #8a570d; background: #fff3dc; border: 1px solid #f1d8aa; border-radius: 4px; font-size: 9px; font-weight: 700; }
.voltage-badge svg { width: 13px; }
.vehicle-link-body { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, .7fr); min-height: 210px; }
.ev-platform { position: relative; min-width: 0; padding: 17px 24px 14px; overflow: hidden; background: linear-gradient(#f8faf9 0 0), repeating-linear-gradient(90deg, transparent 0 39px, rgba(36,74,56,.04) 40px), repeating-linear-gradient(0deg, transparent 0 39px, rgba(36,74,56,.04) 40px); border-right: 1px solid var(--line); }
.vehicle-caption { position: absolute; top: 16px; left: 20px; z-index: 5; display: grid; grid-template-columns: 7px auto; align-items: center; column-gap: 7px; }
.vehicle-caption .live-map-dot { width: 6px; height: 6px; grid-row: 1 / 3; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(22,160,100,.1); }
.vehicle-caption strong { font-size: 9px; }
.vehicle-caption small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.car-stage { position: relative; display: flex; min-height: 220px; align-items: center; justify-content: center; padding-top: 8px; cursor: pointer; outline: 0; }
.car-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.car-stage:hover .car-shell { border-color: #4f7664; box-shadow: inset 0 0 0 7px #f2f5f3, 0 14px 30px rgba(27,55,42,.16); }
.open-3d-hint { position: absolute; right: 10px; top: 7px; display: flex; height: 26px; align-items: center; gap: 5px; padding: 0 8px; color: var(--green-dark); background: #fff; border: 1px solid #d8e8df; border-radius: 4px; box-shadow: 0 3px 10px rgba(22,67,45,.07); font-size: 8px; font-weight: 700; }
.open-3d-hint svg { width: 12px; }
.car-shell { position: relative; width: min(640px, 92%); height: 178px; background: #dfe6e2; border: 2px solid #899991; border-radius: 60px 72px 72px 60px; box-shadow: inset 0 0 0 7px #f2f5f3, 0 12px 24px rgba(27,55,42,.11); }
.car-shell::before { position: absolute; inset: 12px 42px; z-index: 0; content: ""; border: 1px dashed #a9b5af; border-radius: 36px; }
.car-shell::after { position: absolute; top: 20px; right: 8px; bottom: 20px; width: 52px; content: ""; background: linear-gradient(90deg,#b8c7c0,#dbe4df); border-left: 1px solid #91a299; border-radius: 8px 42px 42px 8px; }
.wheel { position: absolute; z-index: 4; width: 48px; height: 17px; background: #26332d; border: 3px solid #52615a; border-radius: 6px; box-shadow: inset 0 0 0 2px #141c18; }
.wheel-fl { top: -10px; right: 72px; }.wheel-fr { bottom: -10px; right: 72px; }.wheel-rl { top: -10px; left: 72px; }.wheel-rr { bottom: -10px; left: 72px; }
.front-axle, .rear-axle { position: absolute; top: 15px; bottom: 15px; z-index: 1; width: 3px; background: #7d8e85; }
.front-axle { right: 94px; }.rear-axle { left: 94px; }
.unit-block { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 4px; color: #e9f4ef; background: #245f45; border: 2px solid #b7d8c8; border-radius: 5px; box-shadow: 0 3px 7px rgba(20,57,40,.2); font-size: 7px; font-weight: 600; }
.unit-block svg { width: 13px; }
.front-drive { top: 57px; right: 69px; width: 65px; height: 58px; }
.rear-drive { top: 57px; left: 66px; width: 62px; height: 58px; background: #315f83; border-color: #bed0df; }
.inverter { top: 26px; right: 143px; width: 73px; height: 42px; background: #376f57; }
.battery-pack { position: absolute; top: 27px; bottom: 27px; left: 143px; z-index: 2; width: 280px; padding: 8px 10px; background: #243a30; border: 3px solid #6a7d73; border-radius: 8px; box-shadow: inset 0 0 0 2px #15271f; }
.battery-title { display: flex; height: 26px; align-items: center; gap: 6px; color: #eef6f2; }
.battery-title svg { width: 15px; color: #57d493; }
.battery-title span { display: flex; flex-direction: column; }
.battery-title strong { font-size: 8px; }.battery-title small { color: #8da398; font-size: 6px; }
.battery-cells { display: grid; height: 72px; grid-template-columns: repeat(8,1fr); gap: 3px; }
.battery-cells i { background: linear-gradient(135deg,#4d665a,#32473d); border: 1px solid #62786d; border-radius: 2px; }
.charge-port { position: absolute; bottom: 19px; right: 130px; z-index: 5; display: flex; align-items: center; gap: 3px; padding: 4px 6px; color: #77400d; background: #ffd8ac; border: 1px solid #e69749; border-radius: 4px; font-size: 6px; font-weight: 700; }
.charge-port svg { width: 11px; }
.hv-route { position: absolute; z-index: 4; background: #f07a1b; border: 2px solid #c95108; box-shadow: 0 0 0 2px #ffd4b2; }
.hv-route span { position: absolute; width: 5px; height: 5px; background: #fff7b0; border-radius: 50%; box-shadow: 0 0 5px #fff; animation: routePulse 2s linear infinite; }
.route-main { top: 82px; left: 113px; width: 338px; height: 7px; border-radius: 5px; }
.route-main span:first-child { top: -1px; animation-delay: -1s; }.route-main span:last-child { top: -1px; }
.route-front { top: 61px; right: 126px; width: 29px; height: 7px; transform: rotate(-25deg); }
.route-front span, .route-rear span { top: -1px; }
.route-rear { top: 83px; left: 117px; width: 31px; height: 7px; }
.route-charge { right: 137px; bottom: 39px; width: 35px; height: 7px; transform: rotate(-38deg); }
.route-charge span { top: -1px; }
@keyframes routePulse { from { left: 0; } to { left: calc(100% - 5px); } }
.hv-harness { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hv-harness path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.harness-underlay path { stroke: #ffc18f; stroke-width: 12; opacity: .72; }
.harness-cables path { stroke: #c94d08; stroke-width: 8; }
.harness-highlights path { stroke: #f9872c; stroke-width: 4; }
.energy-bead { fill: #fff5a8; filter: drop-shadow(0 0 3px #fff); }
.test-point { position: absolute; z-index: 6; display: grid; width: 20px; height: 20px; place-items: center; color: #fff; background: #0e8350; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(8,72,43,.35); font-size: 6px; }
.test-point em { position: absolute; top: 20px; width: max-content; color: #537064; font-size: 6px; font-style: normal; font-weight: 600; }
.tp-one { top: 79px; left: 117px; }.tp-two { top: 36px; left: 436px; }.tp-three { top: 118px; left: 447px; }
.map-legend { position: absolute; right: 8px; bottom: 7px; display: flex; gap: 12px; color: #718079; font-size: 6px; }
.map-legend span { display: flex; align-items: center; gap: 4px; }
.map-legend i { display: inline-block; }
.legend-cable { width: 13px; height: 4px; background: #ee7418; border-radius: 2px; }.legend-point { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }.legend-unit { width: 7px; height: 7px; background: #315f83; border-radius: 2px; }
.energy-flow { display: grid; grid-template-columns: minmax(145px,1fr) minmax(95px,.7fr) minmax(145px,1fr) minmax(105px,.7fr) minmax(145px,1fr); align-items: center; padding: 28px 26px; background: #f8faf9; border-right: 1px solid var(--line); }
.energy-node { position: relative; z-index: 2; display: flex; min-width: 0; align-items: center; gap: 11px; }
.node-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; color: #fff; background: #183a2b; border: 5px solid #e5f3ec; border-radius: 6px; box-shadow: 0 5px 15px rgba(17,62,42,.13); }
.node-icon.controller { color: #fff; background: #2e7353; }
.node-icon.motor { color: #fff; background: #335f86; border-color: #e8f0f7; }
.node-icon svg { width: 21px; height: 21px; }
.energy-node > div { display: flex; min-width: 0; flex-direction: column; }
.energy-node small { margin-bottom: 3px; color: #8a9790; font-size: 7px; font-style: normal; font-weight: 700; }
.energy-node strong { font-size: 12px; }
.energy-node em { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.cable-link { position: relative; height: 6px; margin: 0 8px; background: #ea711a; border: 2px solid #cb570e; border-radius: 3px; box-shadow: 0 0 0 3px #ffe5cf; }
.cable-link::after { position: absolute; top: 0; right: -3px; width: 0; height: 0; content: ""; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 6px solid #8d3c0c; }
.cable-link b, .cable-link small { position: absolute; left: 50%; width: max-content; transform: translateX(-50%); }
.cable-link b { bottom: 11px; color: #8c4b17; font-size: 8px; }
.cable-link small { top: 12px; color: #9b7a61; font-size: 7px; }
.flow-dot { position: absolute; top: -1px; z-index: 2; width: 4px; height: 4px; background: #fff2b2; border-radius: 50%; box-shadow: 0 0 5px #fff; animation: energyFlow 2.4s linear infinite; }
.flow-dot.dot-two { animation-delay: -1.2s; }
@keyframes energyFlow { from { left: 0; } to { left: calc(100% - 4px); } }
.link-importance { display: flex; flex-direction: column; justify-content: center; padding: 22px; background: #13251d; color: #fff; }
.importance-copy > span { display: inline-block; margin-bottom: 8px; padding: 3px 6px; color: #70dda6; background: #1c3a2c; border-radius: 3px; font-size: 8px; font-weight: 700; }
.importance-copy > strong { display: block; font-size: 14px; }
.importance-copy p { margin: 7px 0 18px; color: #98aba1; font-size: 9px; line-height: 1.65; }
.link-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding-top: 13px; border-top: 1px solid #2d4138; }
.link-specs div { min-width: 0; }
.link-specs small { display: block; margin-bottom: 4px; color: #80968a; font-size: 7px; }
.link-specs strong { font-size: 13px; white-space: nowrap; }
.link-specs em { color: #7f968a; font-size: 7px; font-style: normal; font-weight: 500; }
.coverage-count { color: var(--muted); font-size: 9px; }
.coverage-count strong { margin-right: 3px; color: var(--green); font-size: 14px; }
.test-matrix { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.test-item { position: relative; display: grid; min-width: 0; min-height: 82px; grid-template-columns: 34px minmax(0,1fr) auto 6px; align-items: center; gap: 9px; padding: 14px 16px; border-right: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }
.test-item:nth-child(4n) { border-right: 0; }
.test-item:nth-child(n+5) { border-bottom: 0; }
.test-icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--green-dark); background: var(--green-soft); border-radius: 5px; }
.test-icon.thermal, .test-icon.safety { color: #b56b14; background: #fff3df; }
.test-icon.signal { color: #2c70bd; background: #eaf2fc; }
.test-icon.mechanical, .test-icon.environment { color: #5e6570; background: #eef0f2; }
.test-icon svg { width: 15px; }
.test-item > div { display: flex; min-width: 0; flex-direction: column; }
.test-item strong { font-size: 10px; }
.test-item small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.test-item > em { color: #36473e; font-size: 9px; font-style: normal; font-weight: 600; white-space: nowrap; }
.pass-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px var(--green-soft); }

.dashboard-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.top-grid { grid-template-columns: minmax(0, 2.15fr) minmax(270px, .85fr); }
.bottom-grid { grid-template-columns: minmax(0, 1.7fr) minmax(310px, 1fr); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.panel-heading { display: flex; min-height: 65px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e9eeeb; }
.eyebrow { display: block; margin-bottom: 4px; color: #8b9892; font-size: 8px; font-weight: 700; }
.panel-heading h2 { margin: 0; font-size: 14px; font-weight: 700; }
.text-button { display: flex; align-items: center; gap: 5px; padding: 5px; color: var(--green-dark); background: transparent; border: 0; cursor: pointer; font-size: 10px; font-weight: 600; }
.text-button svg { width: 13px; }
.production-body { display: grid; grid-template-columns: minmax(265px,.85fr) minmax(320px,1.15fr); min-height: 304px; }
.line-list { padding: 8px 16px; border-right: 1px solid #e9eeeb; }
.line-item { padding: 14px 2px; border-bottom: 1px solid #edf1ef; cursor: pointer; }
.line-item:last-child { border: 0; }
.line-top { display: flex; align-items: center; justify-content: space-between; }
.line-title { display: flex; align-items: center; gap: 8px; }
.line-title i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
.line-title i.idle { background: var(--amber); }
.line-title strong { font-size: 11px; }
.line-top > span { color: var(--green-dark); background: var(--green-soft); padding: 3px 6px; border-radius: 3px; font-size: 8px; }
.line-top > span.idle { color: #9d6316; background: #fff3df; }
.line-item p { margin: 6px 0 10px 15px; color: var(--muted); font-size: 9px; }
.line-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-left: 15px; }
.metric label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #8b9791; font-size: 8px; }
.metric label strong { color: #46554d; font-size: 9px; }
.mini-track { height: 3px; overflow: hidden; background: #e8eeea; border-radius: 2px; }
.mini-track i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.cable-visual { position: relative; min-width: 0; padding: 13px 18px 10px; background: #f8faf9; }
.visual-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }
.visual-meta strong { color: var(--ink); font-size: 12px; }
#cableCanvas { display: block; width: 100%; height: 228px; }
.temperature-scale { display: flex; align-items: center; gap: 9px; color: #87948e; font-size: 7px; }
.temperature-scale i { flex: 1; height: 4px; background: linear-gradient(90deg,#3177d4,#42caa1,#f0b340,#e75448); border-radius: 3px; }

.quality-panel { min-height: 370px; }
.score-wrap { padding: 17px 18px 10px; text-align: center; }
.score-ring { position: relative; display: grid; width: 124px; height: 124px; margin: 0 auto; place-items: center; background: conic-gradient(var(--green) 0deg, var(--green) 351deg, #e7ede9 351deg); border-radius: 50%; }
.score-ring::before { position: absolute; width: 96px; height: 96px; content: ""; background: #fff; border-radius: 50%; }
.score-ring > div { position: relative; z-index: 1; display: flex; flex-direction: column; }
.score-ring strong { font-size: 27px; }
.score-ring small { color: var(--green); font-size: 9px; font-weight: 600; }
.score-wrap p { margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.score-wrap p strong { color: var(--green); }
.quality-bars { padding: 0 18px 18px; }
.quality-row { margin-top: 10px; }
.quality-row label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #59675f; font-size: 9px; }
.quality-row label strong { font-size: 9px; }
.quality-track { height: 4px; background: #edf1ef; border-radius: 2px; }
.quality-track i { display: block; height: 100%; background: var(--green); border-radius: inherit; }

.trend-panel, .alerts-panel { min-height: 322px; }
.chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: 8px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 50%; }
.chart-legend .green { background: var(--green); }
.chart-legend .blue { background: var(--blue); }
.chart-wrap { height: 250px; padding: 12px 16px 16px; }
#trendCanvas { width: 100%; height: 100%; }
.alert-list { padding: 4px 16px; }
.alert-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 15px 2px; border-bottom: 1px solid #edf1ef; }
.alert-item:last-child { border: 0; }
.alert-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 5px; }
.alert-icon svg { width: 14px; }
.alert-icon.critical { color: var(--red); background: #feeeee; }
.alert-icon.warning { color: var(--amber); background: #fff4e3; }
.alert-icon.info { color: var(--blue); background: #edf4fe; }
.alert-copy strong { display: block; margin-bottom: 4px; font-size: 10px; }
.alert-copy small, .alert-time { color: var(--muted); font-size: 8px; }
.alert-time { align-self: start; margin-top: 2px; }

.batch-panel { overflow: hidden; }
.table-actions { display: flex; gap: 8px; }
.search-control { height: 30px; }
.search-control input { width: 130px; background: transparent; border: 0; outline: 0; font-size: 9px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 880px; border-collapse: collapse; }
th { height: 38px; padding: 0 18px; color: #839089; background: #f8faf9; font-size: 8px; font-weight: 600; text-align: left; }
td { height: 51px; padding: 0 18px; color: #4c5a52; border-top: 1px solid #edf1ef; font-size: 9px; }
td:first-child { color: #233229; font-weight: 600; }
.table-progress { display: flex; align-items: center; gap: 8px; }
.table-progress i { width: 60px; height: 4px; overflow: hidden; background: #e8eeea; border-radius: 2px; }
.table-progress i b { display: block; height: 100%; background: var(--green); }
.status-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 3px; font-size: 8px; font-weight: 600; }
.status-tag::before { width: 5px; height: 5px; content: ""; background: currentColor; border-radius: 50%; }
.status-tag.good { color: #0c8050; background: #e8f7ef; }
.status-tag.watch { color: #286db9; background: #edf4fc; }
.status-tag.check { color: #ad6d18; background: #fff3df; }
.row-action { display: grid; width: 24px; height: 24px; place-items: center; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.row-action svg { width: 14px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 9px; padding: 12px 16px; color: #fff; background: #19372a; border-radius: 6px; box-shadow: 0 12px 32px rgba(10,31,21,.25); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s ease; font-size: 11px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast svg { width: 16px; color: #57db99; }

.vehicle-modal { position: fixed; inset: 0; z-index: 100; display: grid; padding: 24px; place-items: center; background: rgba(7,15,11,.74); opacity: 0; pointer-events: none; transition: opacity .22s ease; backdrop-filter: blur(8px); }
.vehicle-modal.open { opacity: 1; pointer-events: auto; }
.vehicle-modal-shell { display: grid; width: min(1240px, 96vw); height: min(760px, 92vh); grid-template-rows: 68px 1fr; overflow: hidden; background: #0d1914; border: 1px solid #385246; border-radius: 7px; box-shadow: 0 28px 90px rgba(0,0,0,.42); transform: translateY(12px) scale(.985); transition: transform .22s ease; }
.vehicle-modal.open .vehicle-modal-shell { transform: translateY(0) scale(1); }
.vehicle-modal-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: #fff; background: #12231b; border-bottom: 1px solid #2a4036; }
.vehicle-modal-header h2 { margin: 0; font-size: 14px; }
.vehicle-modal-header .eyebrow { color: #6e9280; }
.model-actions { display: flex; align-items: center; gap: 8px; }
.model-button { display: flex; height: 34px; align-items: center; gap: 7px; padding: 0 11px; color: #a9bcb2; background: #182c23; border: 1px solid #31483d; border-radius: 5px; cursor: pointer; font-size: 9px; }
.model-button.active { color: #74dda8; background: #193a2a; border-color: #2b674a; }
.model-button svg { width: 14px; }
.model-icon-button { color: #b7c6be; background: #182c23; border-color: #31483d; }
.model-icon-button:hover { color: #fff; background: #20372c; }
.vehicle-scene-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%,#1a2b23 0,#0b1511 70%); }
.vehicle-scene-wrap canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
.vehicle-scene-wrap canvas:active { cursor: grabbing; }
.scene-loading { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 9px; color: #91a69b; background: #0d1914; font-size: 10px; transition: opacity .3s ease; }
.scene-loading.hidden { opacity: 0; pointer-events: none; }
.scene-loading span { width: 8px; height: 8px; background: #49d18b; border-radius: 50%; animation: pulse 1s infinite; }
.scene-status { position: absolute; top: 18px; left: 18px; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 9px 11px; color: #a8bbb1; background: rgba(10,23,17,.78); border: 1px solid rgba(86,123,105,.45); border-radius: 4px; backdrop-filter: blur(8px); font-size: 8px; pointer-events: none; }
.scene-status span { display: flex; align-items: center; gap: 6px; }.scene-status span i { width: 6px; height: 6px; background: #45db90; border-radius: 50%; box-shadow: 0 0 8px #45db90; }.scene-status b { color: #f2a34d; font-size: 11px; }
.component-inspector { position: absolute; top: 18px; right: 18px; z-index: 3; width: 222px; padding: 14px; color: #dce9e2; background: rgba(10,23,17,.84); border: 1px solid rgba(86,123,105,.45); border-radius: 5px; backdrop-filter: blur(10px); pointer-events: none; }
.inspector-kicker { display: flex; align-items: center; gap: 6px; color: #73dda6; font-size: 7px; font-weight: 700; }
.inspector-dot { width: 5px; height: 5px; background: #f58a2b; border-radius: 50%; box-shadow: 0 0 7px #f58a2b; }
.component-inspector h3 { margin: 9px 0 5px; color: #fff; font-size: 14px; }
.component-inspector p { margin: 0 0 12px; color: #9db1a6; font-size: 8px; line-height: 1.55; }
.inspector-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid #2c4437; border-bottom: 1px solid #2c4437; }
.inspector-readings small { display: block; margin-bottom: 4px; color: #789186; font-size: 7px; }.inspector-readings strong { color: #fff; font-size: 14px; }.inspector-readings em { color: #8aa096; font-size: 7px; font-style: normal; font-weight: 500; }
.inspector-status { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #66d99e; font-size: 8px; }.inspector-status i { width: 6px; height: 6px; background: #42d28d; border-radius: 50%; }
.scene-help { position: absolute; left: 18px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 6px; color: #8fa49a; font-size: 8px; pointer-events: none; }.scene-help svg { width: 12px; }
.scene-legend { position: absolute; right: 18px; bottom: 16px; z-index: 3; display: flex; gap: 14px; padding: 8px 10px; color: #9cafA5; background: rgba(10,23,17,.76); border: 1px solid rgba(86,123,105,.4); border-radius: 4px; font-size: 7px; pointer-events: none; }
.scene-legend span { display: flex; align-items: center; gap: 5px; }.scene-legend i { width: 9px; height: 5px; border-radius: 1px; }.battery-color { background: #2f6d50; }.cable-color { background: #f4771c; }.motor-color { background: #39749f; }
body.modal-open { overflow: hidden; }

@media (max-width: 1180px) {
  .vehicle-link-body { grid-template-columns: 1fr; }
  .energy-flow { border-right: 0; border-bottom: 1px solid var(--line); }
  .ev-platform { border-right: 0; border-bottom: 1px solid var(--line); }
  .link-importance { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
  .importance-copy p { margin-bottom: 0; }
  .test-matrix { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .test-item:nth-child(2n) { border-right: 0; }
  .test-item:nth-child(n+5) { border-bottom: 1px solid #edf1ef; }
  .test-item:nth-child(n+7) { border-bottom: 0; }
  .top-grid { grid-template-columns: 1fr; }
  .quality-panel { min-height: auto; }
  .quality-panel .score-wrap { float: left; width: 34%; padding-top: 20px; }
  .quality-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; padding-top: 16px; }
  .bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: 8px 0 30px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  .main-content { width: 100%; margin-left: 0; }
  .mobile-menu { display: grid; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .topbar { height: 68px; padding: 0 14px; }
  .topbar-actions { gap: 8px; }
  .profile div, .profile svg, .live-pill { display: none; }
  .profile { padding-left: 8px; }
  .sync-text { display: none; }
  .content-wrap { padding: 16px 12px 30px; }
  .filter-row { align-items: stretch; gap: 10px; flex-direction: column; }
  .filter-actions { justify-content: space-between; }
  .select-control { flex: 1; }
  .kpi-grid { gap: 9px; }
  .kpi-card { min-height: 116px; padding: 14px; }
  .kpi-value { font-size: 21px; }
  .energy-flow { grid-template-columns: 1fr; gap: 0; padding: 20px; }
  .ev-platform { padding: 42px 10px 20px; }
  .car-stage { min-height: 205px; overflow: hidden; }
  .car-shell { width: 600px; min-width: 600px; transform: scale(.56); }
  .map-legend { right: 14px; bottom: 8px; }
  .energy-node { width: 100%; }
  .cable-link { width: 6px; height: 48px; margin: 5px 0 5px 20px; border-radius: 3px; }
  .cable-link b { top: 13px; bottom: auto; left: 16px; transform: none; }
  .cable-link small { top: 26px; left: 16px; transform: none; }
  .cable-link::after { display: none; }
  @keyframes energyFlow { from { top: 0; left: -1px; } to { top: calc(100% - 4px); left: -1px; } }
  .link-importance { display: block; padding: 20px; }
  .link-specs { margin-top: 15px; }
  .test-matrix { grid-template-columns: 1fr; }
  .test-item, .test-item:nth-child(2n), .test-item:nth-child(n+7) { border-right: 0; border-bottom: 1px solid #edf1ef; }
  .test-item:last-child { border-bottom: 0; }
  .vehicle-modal { padding: 0; }
  .vehicle-modal-shell { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .vehicle-modal-header { padding: 0 12px; }
  .vehicle-modal-header h2 { font-size: 12px; }
  .model-button span { display: none; }
  .model-button { width: 36px; justify-content: center; padding: 0; }
  .scene-legend { right: 10px; bottom: 10px; gap: 8px; }
  .component-inspector { top: 72px; right: 10px; width: 178px; padding: 10px; }.component-inspector h3 { font-size: 12px; }.component-inspector p { font-size: 7px; margin-bottom: 8px; }.inspector-readings strong { font-size: 12px; }
  .scene-help { left: 10px; bottom: 10px; font-size: 7px; }
  .production-body { grid-template-columns: 1fr; }
  .line-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .cable-visual { min-height: 270px; }
  .quality-panel .score-wrap { float: none; width: auto; }
  .quality-bars { display: block; padding-top: 0; }
  .panel-heading { padding: 12px 14px; }
  .chart-legend { display: none; }
  .search-control { display: none; }
}