/* ============================================================
   electric-atv-fr20datv-sp.css — 页面层（主推品营销落地页独创区块）
   仅收本页电动签名视觉：① 电压辉光 volt-glow（Hero 图卡背景装饰）
                          ② 充电条 charge-bar / charge-fill（电动身份装饰）
                          ③ 动力仪表盘 power-ribbon（5 格分隔读数带）
   纪律：不重定义任何地基白名单类；配色只用 site.css tokens（单一 volt-lime 强调色）
   ============================================================ */

/* ---------- 电动电压辉光（Hero 图卡背景装饰，纯视觉不拦截点击） ---------- */
.volt-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(58% 55% at 70% 16%, rgba(200, 245, 66, 0.20), transparent 72%);
}

/* ---------- 充电条（电动身份装饰，引导视线落到动力数据） ---------- */
.charge-bar {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: var(--ink-3);
    border: 1px solid var(--line);
    overflow: hidden;
}
.charge-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #eaff9a);
    animation: fr20-charge 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes fr20-charge {
    to { width: var(--charge, 78%); }
}
@media (prefers-reduced-motion: reduce) {
    .charge-fill { animation: none; width: var(--charge, 78%); }
}

/* ---------- 动力仪表盘：5 格分隔读数带（读作一块电动仪表，区别于等大卡片） ---------- */
.power-ribbon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-2);
}
.power-cell {
    padding: 1.5rem 1.25rem;
    border-right: 1px solid var(--line);
}
.power-cell:last-child { border-right: 0; }
.power-cell .pk {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.power-cell .pv {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--accent);
    margin: 0.4rem 0 0;
}
.power-cell .pn {
    font-size: 0.78rem;
    color: var(--paper-soft);
    margin: 0.3rem 0 0;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .power-ribbon { grid-template-columns: repeat(2, 1fr); }
    .power-cell { border-bottom: 1px solid var(--line); }
    .power-cell:nth-child(2n) { border-right: 0; }
    .power-cell:nth-last-child(-n+1) { grid-column: 1 / -1; }
}