.charging-showcase{--charging-detail-gap:16px;max-width:1240px;margin:auto;padding:64px 24px 72px;color:#fff}
.charging-showcase .section-heading h2{font-size:clamp(34px,3.3vw,50px)}
.charging-showcase .section-heading p{color:#d0dce6}
.charging-showcase-grid{max-width:860px;margin:30px auto 0}
.charging-native-stage{min-width:0}
.charging-native-card{position:relative;padding:22px 26px 18px;border-radius:24px;background:linear-gradient(145deg,#a9d4e737,#accfe719 52%,#10324b45);border:0.5px solid #b7d8e68c;box-shadow:inset 0 1px #ffffff33,0 24px 64px #09233566;color:#fff;font-variant-numeric:tabular-nums}
.charging-native-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.charging-native-head strong{font-size:21px;font-weight:700}
.charging-native-head>span{font-size:13px;color:#deedf5;white-space:nowrap}
.charging-native-progress{margin:18px 2px 11px}
.charging-native-track{position:relative;height:7px;border-radius:4px;background:#e4f5fc25}
.charging-native-track>span{display:block;height:100%;width:78.45%;border-radius:4px;background:#caedff;transform-origin:left center}
.charging-native-track>i{position:absolute;left:80%;width:3px;height:17px;top:-5px;border-radius:2px;background:#fff}



.charging-native-plot{--plot-height:160px;position:relative;height:186px;margin-top:4px}
.charging-native-plot svg{display:block;width:100%;height:var(--plot-height);overflow:visible}
.charging-native-y-axis{position:absolute;top:0;left:0;width:5.7%;height:var(--plot-height);color:#d4e5ee;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.charging-native-y-axis span{position:absolute;right:0;line-height:1;transform:translateY(-50%)}
.charging-native-y-axis span:nth-child(1){top:7.1%}
.charging-native-y-axis span:nth-child(2){top:44.8%}
.charging-native-y-axis span:nth-child(3){top:82.6%}
.charging-native-grid path{fill:none;stroke:#d8ebf34d;stroke-width:1}
.charging-native-area{fill:url(#charging-native-fill)}
.charging-native-line{fill:none;stroke:#f0fbff;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #b4e7ffb8)}
.charging-native-time{display:flex;justify-content:space-between;margin:-1px 0 0 7%;font-size:12px;color:#d4e5ee}



.charging-detail-app{margin:32px auto 0}
.charging-detail-app-content{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.7fr);gap:var(--charging-detail-gap);margin-top:0}
.charging-detail-hero,.charging-detail-metrics>div{background:linear-gradient(140deg,#bfdff12b,#bddef014 55%,#0b2d402f);border:0.5px solid #b6d8ea78;box-shadow:inset 0 1px #ffffff24;border-radius:20px}
.charging-detail-hero{padding:16px 18px;display:flex;flex-direction:column;min-height:154px}
.charging-detail-status{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.charging-detail-status small{font-size:11px;color:#c4d9e6}
.charging-detail-total{display:flex;gap:7px;align-items:baseline;margin:10px 0 8px}
.charging-detail-total strong{font-size:48px;line-height:1;font-weight:700;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.charging-detail-total span{font-size:17px;font-weight:650}
.charging-detail-hero p{font-size:12px;color:#c7dce8;margin-top:auto}
.charging-detail-metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--charging-detail-gap)}
.charging-detail-metrics>div{min-height:71px;padding:11px 14px;display:flex;flex-direction:column;justify-content:space-between}
.charging-detail-metrics small{font-size:12px;color:#c7deeb}
.charging-detail-metrics strong{font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.charging-detail-metrics em{font-size:12px;font-style:normal;font-weight:500}



.charging-power-dot{fill:#f5fcff;stroke:#a9e8ff;stroke-width:3;filter:drop-shadow(0 0 7px #c9f2ff);opacity:0;transform-box:fill-box;transform-origin:center}

.charging-showcase.is-playing .charging-power-dot{animation:charging-dot-pulse 1.8s ease-in-out infinite}

@keyframes charging-dot-pulse{50%{transform:scale(1.25);filter:drop-shadow(0 0 11px #e0f8ff)}}
@media(min-width:800px){.charging-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--charging-detail-gap);align-items:stretch}.charging-showcase>.section-heading{grid-column:1/-1}.charging-showcase-grid{display:flex;width:100%;max-width:none;margin:30px 0 0}.charging-native-stage{display:flex;flex:1}.charging-native-card{display:flex;flex:1;flex-direction:column}.charging-detail-app{width:100%;margin:30px 0 0}.charging-detail-app-content{display:block;margin-top:0}.charging-detail-hero{min-height:112px}.charging-detail-total{margin:5px 0}.charging-detail-total strong{font-size:38px}.charging-detail-metrics{margin-top:10px}.charging-detail-metrics>div{min-height:65px}.charging-native-plot{--plot-height:180px;height:205px}}
@media(min-width:800px) and (max-width:1049px){.charging-native-card{padding:20px 18px 17px}.charging-native-head strong{font-size:17px}.charging-native-head>span{font-size:11px}.charging-native-plot{--plot-height:160px;height:186px}.charging-detail-metrics strong{font-size:18px}}
@media(min-width:800px){
  .charging-showcase-grid,.charging-detail-app{min-height:460px}
  .charging-native-plot{display:grid;grid-template-rows:minmax(0,1fr) auto;flex:1;min-height:186px;height:auto;--plot-height:100%}
  .charging-native-plot svg{grid-row:1;height:100%;min-height:0}
  .charging-native-y-axis{height:calc(100% - 18px)}
  .charging-native-time{grid-row:2}
  .charging-detail-app{display:flex;flex-direction:column}
  .charging-detail-app-content{display:flex;flex:1;flex-direction:column;min-height:0}
  .charging-detail-hero{flex:0 0 190px}
  .charging-detail-metrics{flex:1;grid-template-rows:repeat(2,minmax(0,1fr))}
}
@media(min-width:1101px){
  .charging-showcase-grid,.charging-detail-app{min-height:560px}
}
@media(max-width:799px){.charging-showcase{padding:52px 20px 0}.charging-showcase-grid{margin-top:22px}.charging-native-card{padding:17px 16px;border-radius:20px}.charging-native-head strong{font-size:16px}.charging-native-head>span{font-size:11px}.charging-native-progress{margin-top:17px}.charging-native-plot{--plot-height:141px;height:166px}.charging-native-y-axis{font-size:10px}.charging-native-time{font-size:10px}.charging-detail-app{margin-top:10px}.charging-detail-app-content{grid-template-columns:1fr;gap:var(--charging-detail-gap);margin-top:0}.charging-detail-hero{min-height:128px}.charging-detail-total strong{font-size:43px}.charging-detail-metrics strong{font-size:18px}.charging-detail-metrics>div{min-height:68px}}
@media(max-width:375px){.charging-showcase{padding-inline:15px}.charging-native-head>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.charging-showcase.is-playing .charging-power-dot{animation:none}}