*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f5fbff;background:#00101d}body{min-height:100vh;background:radial-gradient(ellipse at 50% 45%,#07324d 0,#031e33 38%,#00111f 75%,#000b14 100%)}button{font:inherit}.shell{min-height:100vh}.topbar{height:118px;display:flex;align-items:center;padding:14px 3.4vw;border-bottom:1px solid rgba(31,141,194,.24);background:linear-gradient(180deg,rgba(2,25,43,.93),rgba(1,18,32,.67));gap:26px}.logo{width:188px;height:84px;object-fit:contain;padding-right:26px;border-right:1px solid rgba(88,170,208,.22)}.brand b{display:block;font-size:28px;letter-spacing:.2px}.brand span{display:block;margin-top:5px;color:#86a9c2;font-size:17px}.topRight{margin-left:auto;display:flex;align-items:center;gap:14px;color:#a9c6d9;font-size:15px}.okDot{width:18px;height:18px;border-radius:50%;background:#00e6bd;box-shadow:0 0 18px rgba(0,230,189,.9)}.lang{border:1px solid #16577b;background:rgba(2,27,46,.75);color:#b6d0e2;border-radius:7px;padding:8px 15px;cursor:pointer}.lang.on{color:#fff;border-color:#00bfff;box-shadow:0 0 14px rgba(0,191,255,.45);background:#063e61}.overview{max-width:1536px;margin:auto;padding:28px 44px 38px}.hero{width:680px;max-width:62%;margin:0 auto 16px;padding:19px 35px;border:1px solid #0a76a7;border-radius:13px;background:rgba(3,34,56,.82);box-shadow:0 0 24px rgba(0,184,255,.13),inset 0 0 20px rgba(0,184,255,.035);display:flex;align-items:center;justify-content:center;gap:27px}.heroCar{font-size:52px;line-height:1;color:#00c9ff;filter:drop-shadow(0 0 9px #008bc4);transform:scaleX(1.25)}.hero b{display:block;font-size:29px}.hero span{display:block;margin-top:5px;color:#9ebbd0;font-size:17px}.scene{position:relative;display:grid;grid-template-columns:230px 1fr 520px 1fr 270px;align-items:center;min-height:430px}.node{text-align:center;position:relative;z-index:2}.nodeTitle{font-size:19px;font-weight:700;margin-top:8px}.nodeSub{color:#93aec1;margin-top:4px}.inactive{opacity:.36;filter:saturate(.42)}.stationArt{width:96px;height:205px;margin:auto;border:5px solid #d8efff;border-radius:18px;background:linear-gradient(145deg,#e7f7ff 0 11%,#12384e 13% 88%,#c8e9fa 90%);box-shadow:0 0 22px rgba(0,183,255,.42);position:relative}.stationArt:before{content:'⚡';position:absolute;inset:31px 13px 51px;border-radius:7px;background:#06243a;color:#00d8ff;font-size:59px;display:flex;align-items:center;justify-content:center}.stationArt:after{content:'';position:absolute;width:30px;height:79px;border-right:4px solid #ccecff;border-bottom:4px solid #ccecff;border-radius:0 0 20px 0;right:-37px;bottom:11px}.vehicleArt{height:171px;position:relative;margin:auto}.vehicleArt svg{width:100%;height:100%;filter:drop-shadow(0 12px 13px rgba(0,0,0,.55))}.mobileArt{width:520px}.carArt{width:282px}.flowArrow{height:6px;background:linear-gradient(90deg,rgba(0,201,255,.08),#00c9ff,rgba(0,201,255,.08));box-shadow:0 0 13px rgba(0,201,255,.8);position:relative;margin-top:12px}.flowArrow:after{content:'› › › ›';position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);font-size:39px;font-weight:900;letter-spacing:3px;color:#00e1ff;text-shadow:0 0 12px #00baff;white-space:nowrap}.flowArrow.off{opacity:.17;box-shadow:none}.batteryLink{display:block;color:#fff;text-decoration:none;font-size:21px;font-weight:700;margin-top:4px}.batteryLink:hover{color:#22d8ff}.socLine{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:11px}.socLine strong{font-size:62px;line-height:1}.batteryIcon{width:55px;height:88px;border:5px solid #00bfff;border-radius:8px;padding:5px;position:relative;display:inline-flex;align-items:flex-end;box-shadow:0 0 14px rgba(0,190,255,.65)}.batteryIcon:before{content:'';position:absolute;width:24px;height:8px;background:#00bfff;top:-12px;left:11px;border-radius:4px}.batteryIcon i{width:100%;display:block;background:linear-gradient(#00e6bc,#00d7ff);box-shadow:0 0 13px rgba(0,230,205,.8)}.batteryIcon.small{width:42px;height:67px;border-width:4px}.batteryIcon.small:before{width:18px;height:6px;left:8px;top:-9px}.energy{color:#9cb8ca;margin-top:6px;font-size:16px}.miniCard{width:230px;margin:18px auto 0;padding:14px 16px;border:1px solid #0a4b6c;border-radius:10px;background:rgba(0,24,41,.88);font-size:28px;text-align:left}.miniCard small{display:block;color:#9ab4c7;font-size:15px;margin-top:8px}.vehicleCard{width:245px;margin:15px auto 0;padding:12px 15px;border:1px solid #0a4b6c;border-radius:10px;background:rgba(0,24,41,.9);display:grid;grid-template-columns:48px 1fr;gap:5px 14px;align-items:center;text-align:left}.vehicleCard .batteryIcon{grid-row:1/3}.vehicleCard strong{font-size:34px}.vehicleCard small{font-size:14px;color:#a6bfd0;line-height:1.6}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #0a4e70;border-radius:12px;background:rgba(0,24,41,.84);padding:22px 10px}.metric{display:flex;align-items:center;gap:17px;padding:0 30px;border-right:1px solid rgba(77,150,187,.28)}.metric:last-child{border:0}.metricIcon{width:50px;height:50px;border:3px solid #45caff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#69d6ff;font-size:25px;box-shadow:0 0 12px rgba(0,190,255,.22)}.metric label{display:block;color:#9fb8ca;font-size:14px}.metric b{display:block;font-size:29px;margin-top:7px}.detail{max-width:1536px;margin:auto;padding:17px 27px 35px}.back{color:#9ed7f3;text-decoration:none;font-size:17px}.detailHero{text-align:center;margin:-13px 0 15px}.detailHero h1{font-size:29px;margin:0 0 14px}.detailHero .socLine{margin:0}.detailHero .energy{font-size:17px}.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.tile{min-height:108px;border:1px solid #0a5274;border-radius:10px;background:rgba(0,25,43,.82);display:flex;align-items:center;gap:16px;padding:16px 18px}.tileIcon{width:48px;height:48px;border:3px solid #36c8ff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#55d0ff;font-size:25px;flex:none}.tileText{color:#9eb9cb;font-size:14px}.tileText>span{display:block}.tileText b{display:block;color:#fff;font-size:24px;margin-top:4px}.tileText small{display:block;color:#9bb5c6;margin-top:4px;line-height:1.3}.chartPanel{margin-top:15px;border:1px solid #0a5274;border-radius:10px;background:rgba(0,24,41,.85);padding:14px 22px 16px}.chartToolbar{display:flex;align-items:center;gap:14px}.chartToolbar h2{font-size:20px;color:#54cfff;margin:0 auto 0 0}.tabs{display:flex;gap:4px}.tabs button{border:1px solid #0c4564;background:#03233a;color:#9bb9cd;border-radius:5px;padding:8px 15px;cursor:pointer;white-space:nowrap}.tabs button.on{border-color:#00c8ff;color:#fff;background:#064064;box-shadow:0 0 12px rgba(0,190,255,.28)}.chartTitle{display:flex;justify-content:space-between;color:#55ceff;margin:12px 2px 0;font-size:14px}.chartTitle strong{color:#b8d0df}.chartWrap{height:230px;margin-top:5px}.chartWrap canvas{width:100%;height:100%}.lifetime{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:14px}.lifetime .tile{min-height:104px}.demoBadge{position:fixed;right:12px;bottom:10px;padding:5px 9px;border-radius:5px;background:rgba(0,0,0,.35);color:#62859c;font-size:11px}
@media(max-width:1050px){.topbar{height:auto;min-height:92px;flex-wrap:wrap;padding:10px 16px}.logo{width:145px;height:65px;padding-right:16px}.brand b{font-size:22px}.brand span{font-size:14px}.topRight{width:100%;justify-content:flex-end;margin-top:-12px}.overview{padding:18px 16px}.hero{width:88%;max-width:none}.scene{grid-template-columns:1fr;gap:10px;min-height:auto}.flowArrow{width:6px;height:54px;margin:2px auto}.flowArrow:after{transform:translate(-50%,-50%) rotate(90deg)}.metrics,.tiles{grid-template-columns:repeat(2,1fr)}.metric{border-right:0;border-bottom:1px solid rgba(77,150,187,.2);padding:16px}.chartToolbar{flex-wrap:wrap}.detail{padding:15px}.detailHero{margin-top:8px}}
@media(max-width:620px){.logo{width:118px}.brand span,#clock{display:none}.topRight{width:auto;margin-left:auto;margin-top:0;gap:8px}.topRight>span:not(.okDot){display:none}.lang{padding:6px 9px}.hero{width:100%;padding:14px 12px;gap:14px}.hero b{font-size:21px}.hero span{font-size:14px}.heroCar{font-size:38px}.mobileArt{width:96vw;height:145px}.carArt{width:84vw;height:150px}.metrics,.tiles,.lifetime{grid-template-columns:1fr}.overview,.detail{padding:14px}.chartWrap{height:280px}.tabs{overflow-x:auto;max-width:100%;padding-bottom:3px}.chartToolbar h2{width:100%}.tile{min-height:92px}.detailHero h1{font-size:25px}.socLine strong{font-size:50px}}

/* v0.3.3 responsive vehicle artwork/layout update */
.mobileArt{width:min(560px,100%);height:190px}.carArt{width:min(330px,100%);height:185px}
@media (min-width:1051px){.scene{grid-template-columns:210px minmax(90px,1fr) minmax(430px,560px) minmax(90px,1fr) 300px}.mobileArt{width:100%;}.carArt{width:100%}}
@media (max-width:1050px){.scene{max-width:760px;margin:0 auto}.node{width:100%}.stationArt{transform:scale(.88);margin-top:-8px;margin-bottom:-8px}.mobileArt{width:min(620px,96vw);height:auto}.carArt{width:min(410px,88vw);height:auto}.flowArrow{margin:4px auto}.metrics{margin-top:20px}}
@media (max-width:620px){.topbar{padding:8px 10px}.overview{padding:12px 10px 20px}.hero{margin-bottom:8px}.scene{gap:4px}.stationArt{transform:scale(.72);margin-top:-27px;margin-bottom:-27px}.mobileArt{width:96vw;height:auto}.carArt{width:84vw;height:auto}.batteryLink{font-size:18px}.socLine{gap:17px}.socLine strong{font-size:52px}.miniCard,.vehicleCard{margin-top:10px}.flowArrow{height:44px}.metrics{margin-top:12px}.metric{min-height:82px}.metric b{font-size:25px}}

.vehicleArt .vehicleSvgImg{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 13px rgba(0,0,0,.55))}

/* v0.3.6 external vehicle assets */
.vehicleArt>.vehicleSvgImg{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 13px rgba(0,0,0,.55))}


/* v0.3.9 FINAL approved portrait layout */
.heroCar{width:58px;height:42px;display:flex!important;align-items:center;justify-content:center;transform:none!important;filter:drop-shadow(0 0 9px #008bc4)}
.heroCar svg{width:54px;height:36px;fill:#16c9ff}

@media(max-width:1050px){
  .overview{max-width:884px;margin:0 auto;padding:18px 20px 28px}
  .hero{width:min(720px,92%);margin:0 auto 20px;padding:18px 28px}
  .scene{display:flex;flex-direction:column;align-items:center;gap:0;max-width:760px;margin:0 auto}
  .stationNode,.mobileNode,.vehicleNode{width:100%}
  .stationArt{transform:scale(.82);margin:0 auto -8px}
  .miniCard{margin-top:10px}
  .flowArrow{width:48px!important;height:82px!important;margin:8px auto!important;background:none!important;box-shadow:none!important;position:relative;flex:none}
  .flowArrow:after{content:'⌄\A⌄\A⌄'!important;white-space:pre!important;position:absolute!important;inset:0!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;font-size:34px!important;line-height:.55!important;letter-spacing:0!important;color:#00d9ff!important;text-shadow:0 0 13px #00baff!important}
  .flowArrow.off{opacity:.18}
  .mobileArt{width:min(650px,96vw)!important;height:auto!important;margin:0 auto}
  .carArt{width:min(460px,78vw)!important;height:auto!important;margin:0 auto}
  .vehicleArt .vehicleSvgImg{height:auto!important;max-height:270px;object-fit:contain}
  .batteryLink{margin-top:8px}
  .rightFlow{margin-top:10px!important;margin-bottom:8px!important}
  .metrics{margin-top:24px;grid-template-columns:repeat(4,1fr);padding:18px 8px}
  .metric{padding:10px 16px;border-bottom:0;border-right:1px solid rgba(77,150,187,.28)}
  .metric:last-child{border-right:0}
}
@media(max-width:620px){
  .overview{padding:12px 10px 20px}
  .hero{width:94%;padding:14px 12px;gap:14px;margin-bottom:12px}
  .heroCar{width:42px;height:32px}
  .heroCar svg{width:40px;height:28px}
  .stationArt{transform:scale(.70);margin:-20px auto -32px}
  .miniCard{width:190px;font-size:24px;margin-top:4px}
  .flowArrow{height:66px!important;margin:4px auto!important}
  .flowArrow:after{font-size:29px!important}
  .mobileArt{width:94vw!important}
  .carArt{width:74vw!important}
  .batteryLink{font-size:18px;margin-top:4px}
  .socLine{margin-top:8px}
  .energy{font-size:13px}
  .vehicleCard{margin-top:10px}
  .metrics{grid-template-columns:repeat(2,1fr);margin-top:18px}
  .metric{min-height:82px;padding:12px;border-right:0;border-bottom:1px solid rgba(77,150,187,.2)}
}

.minmaxRow{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:8px}.minmaxItem{flex:1;text-align:left}.minmaxLabel{font-size:15px;color:#9ebbd0;margin-bottom:6px}.minmaxValue{font-size:28px;font-weight:800;color:#fff;line-height:1}.minmaxDivider{width:1px;height:46px;background:rgba(0,191,255,.25)}.deltaLine{margin-top:10px;color:#9ebbd0;font-size:16px}

/* v0.4.0 Professional motion polish — visual only, no data/control changes */
@keyframes mcFlowPulse{0%,100%{opacity:.45;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.35)}}
@keyframes mcGlowPulse{0%,100%{filter:drop-shadow(0 12px 13px rgba(0,0,0,.55)) drop-shadow(0 0 0 rgba(0,210,255,0))}50%{filter:drop-shadow(0 12px 13px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(0,210,255,.38))}}
@keyframes mcBatteryPulse{0%,100%{box-shadow:0 0 12px rgba(0,190,255,.55)}50%{box-shadow:0 0 24px rgba(0,225,255,.92)}}
@keyframes mcStatusPulse{0%,100%{box-shadow:0 0 12px rgba(0,230,189,.65)}50%{box-shadow:0 0 25px rgba(0,230,189,1)}}
@keyframes mcHeroPulse{0%,100%{filter:drop-shadow(0 0 5px rgba(0,190,255,.45))}50%{filter:drop-shadow(0 0 13px rgba(0,220,255,.95))}}
.flowArrow:not(.off):after{animation:mcFlowPulse 1.15s ease-in-out infinite}
.mobileNode .vehicleSvgImg,.vehicleNode:not(.inactive) .vehicleSvgImg{animation:mcGlowPulse 2.4s ease-in-out infinite}
.mobileNode .batteryIcon,.vehicleNode:not(.inactive) .batteryIcon{animation:mcBatteryPulse 1.8s ease-in-out infinite}
.okDot{animation:mcStatusPulse 2.2s ease-in-out infinite}
.heroCar{animation:mcHeroPulse 2s ease-in-out infinite}
.hero,.metrics,.tile,.chartPanel{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tile:hover,.metric:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.flowArrow:after,.vehicleSvgImg,.batteryIcon,.okDot,.heroCar{animation:none!important}.tile:hover,.metric:hover{transform:none}}

/* v0.4.1: detail Min/Max parity + visible motion */
.minmaxRow{display:grid!important;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)!important;align-items:center!important;column-gap:16px!important;width:100%!important}
.minmaxItem{min-width:0!important;text-align:left!important}
.minmaxLabel{font-size:15px!important;color:#9ebbd0!important;margin-bottom:6px!important}
.minmaxValue{font-size:28px!important;font-weight:800!important;color:#fff!important;line-height:1!important;white-space:nowrap!important}
.minmaxDivider{width:1px!important;height:46px!important;background:rgba(0,191,255,.25)!important}
.deltaLine{margin-top:10px!important;color:#9ebbd0!important;font-size:16px!important}
@keyframes mcArrowTravel{0%{transform:translate(-50%,-50%) rotate(90deg) translateX(-8px);opacity:.25}50%{opacity:1}100%{transform:translate(-50%,-50%) rotate(90deg) translateX(8px);opacity:.25}}
@media(max-width:1050px){.flowArrow:not(.off):after{animation:mcArrowTravel .85s linear infinite!important}}
@media(max-width:620px){.minmaxValue{font-size:27px!important}.minmaxRow{column-gap:12px!important}}
\n\n/* v0.5.0 - exact approved-reference vehicle strips (143109.jpg) */
.mobileNode .vehicleSvgImg,.vehicleNode .vehicleSvgImg{animation:none!important}
/* Vehicle/cable pixels come directly from the approved reference image. No masks,
   no generated cable, no background removal. This prevents wheel/window/logo damage. */
.mobileArt,.carArt{width:min(786px,100vw)!important;height:auto!important;margin-left:50%!important;transform:translateX(-50%)!important}
.mobileArt .vehicleSvgImg,.carArt .vehicleSvgImg{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.vehicleNode{position:relative;overflow:visible}
/* Match the approved reference's continuous blue field behind both full-width strips. */
.scene{background:linear-gradient(180deg,rgba(0,55,86,.34),rgba(0,45,72,.18));border-radius:18px}
@media(max-width:620px){.mobileArt,.carArt{width:100vw!important}}