/* ChargeControl.css — v6.x.5h
   ChargeControl_preview UI 全面對齊 v6.x.5 cards-on-grey:
   - 移除 .header(user_photo + 招呼文字),換 page_head + 3D hero
   - 樁資訊從舊 1-row 表格 → 3-row white card
   - 進度圓環保留 SVG 邏輯(對齊 js/circular.js 既有 ChangeBty / setProgress),
     但 stroke 改成綠色發光版(linearGradient + SVG filter blur)
   - 新增 .summary_card 度數 / 費用摘要
   - 新增 .curve_card 即時功率曲線卡(SVG sparkline + 漸層填充 + 發光折線)
   - 開始充電鈕換 .btn_pill 全寬 pill
   - 5-tab bottom nav 由 bottom-tab.css 提供
   tokens 全部從 v6x5.css 來
   v6.x.5h.28:站點 panel(左上)+ SOC badge(右上)嵌入 hero 內浮動 panel,
   深色半透明 + backdrop-filter blur,對比底下亮綠 hero 圖;
   移除獨立 .progress_block + .protocol_card。 */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--type-display);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-size: 14px;
    line-height: 1.5;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: calc(var(--tab-height) + 24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   充電紀錄右上方捷徑連結(放在 hero 上方,單行右對齊)
   ========================================================== */
.a_ChargeLog {
    align-self: flex-end;
    margin: 0 20px 4px;
    padding: 6px 12px;
    text-decoration: none;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--brand-mist);
    transition: background 0.15s var(--ease-out);
}

.a_ChargeLog:active {
    background: var(--brand-tint);
}

/* ==========================================================
   3D hero 圖 — 取代舊 SVG 圓環 + 貓頭鷹 PNG 組合
   v6.x.5h.4:換成 owl_car_transparent.png(1024×1024 RGBA 去背),
   hero 卡片恢復 v6.x.5h.1 尺寸 `clamp(220px, 48vw, 280px)` 對齊其他
   v6.x.5 sub-page 的卡片尺寸(全寬 margin 0 16px),拿掉 mask-image
   因為圖本身已透明。SVG ring 放 hero 圖層下(z-index 0),
   hero 圖層 z-index 1 蓋在上面,ring 在 hero 圖內灰色地板外圍發光一圈。
   ring 對齊圖內灰色橢圓地板(cx=500 cy=720 rx=480 ry=195),
   比地板稍大約 15% 形成 halo 雙層感。
   ========================================================== */
.hero_3d_wrap {
    margin: 14px auto 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    position: relative;
    height: clamp(220px, 48vw, 280px);
    width: clamp(220px, 48vw, 280px);
    /* v6.x.5h.17 — 圖偏左修正
     * 上版 v6.x.5h.17 部署後 user 反饋「整個 hero 圖都在左邊」,根因:
     * - .hero_3d_wrap 用 display: flex + aspect-ratio: 1/1 + max-height: 220px
     * - column flex container 中 align-self 預設 stretch → 寬度被 stretch 到 container 寬度
     *   (375px iPhone 或更大),忽略 aspect-ratio 的 1/1 約束
     * - 結果:.hero_3d_wrap 寬 375 高 220(不滿足 aspect-ratio)
     * - <picture> flex item natural width 1024,justify-content: center 把它推到中央
     *   但 picture 從中央向兩側各溢出 (1024-375)/2 = 324.5px,被 overflow: hidden 裁切
     * - WebKit 對 inline <picture> 在 flex 中的計算不穩,加上 object-fit: contain
     *   + object-position 50% 50% 對 picture 子 img 的居中計算偏差,視覺上看起來圖偏左
     * 修法:拿掉 flex,改用 explicit width + height + aspect-ratio + margin: auto 居中:
     * - height: clamp(220, 48vw, 280) + width: clamp(220, 48vw, 280) → 強制正方形
     * - margin: 14px auto → 水平居中於 .container
     * - SVG 用 absolute inset:0 確保填滿,img 用 width/height 100% + object-fit: contain 居中
     * - 完全不依賴 flex 計算,WebKit/Safari/LINE WKWebView 行為一致 */
}

.hero_3d {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    position: relative;
    z-index: 2;
    /* v6.x.5h.11:從 49% 50% 改回 50% 50% 完全置中。
     * v6.x.5h.9 改 49% 50% 想對齊 user 視覺中心,但 user iPhone v6.x.5h.10 反饋「HERO 沒置中」
     * → user 想要的是「圖完全水平置中」而不是「微偏左 1% 對齊視覺中心」。
     * 視覺置中跟 CSS 置中不同,user 偏好 CSS 置中(看起來對稱)。
     * 環 z-index 2 蓋在圖上,環位置由 SVG `preserveAspectRatio="xMidYMid meet"` 控制
     * (SVG 中央 = 1024/2 = 512,略偏於環 cx=510 0.2%,視覺上環中央對齊卡片中央)。
     * user v6.x.5h.9 反饋圖偏左,49% 50% 是錯誤猜測方向,改成 50% 50% 才對。 */
}

/* ==========================================================
   v6.x.5h.30 — Hero 浮動 panel(站點資訊左上 + SOC 右上)
   回到 v6.x.5h.28 浮動 panel 風格(深色半透明 + backdrop-filter blur,
   對比底下亮綠 hero 圖,z-index 3 蓋在 SVG ring(z=1) + img(z=2)之上)。
   v6.x.5h.29/.29b 走 info_card 卡 header 路線,user 反饋:
   - 不要卡片容器(info_card)感,要走浮動 panel 嵌進 hero
   - 不要「充電紀錄」title(資訊已自帶語意,標題多餘)
   - 站點名稱當第一行(讓 user 一眼看到站點是哪)
   - 樁 ID 當第二行 + 閃電 icon(根據 v6.4.1 plug-warn 切 charge_off/on.png)
   - SOC badge 從 26px 綠色品牌大字縮成 14px 綠色小字(右上小角落,
     SOC 是 progress 不是 station info,縮小避免跟站點資訊搶視覺重心)
   ========================================================== */

.hero_overlay_tl {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: calc(100% - 80px);  /* 預留右上 SOC badge 空間 */
}

.hero_overlay_station {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero_overlay_pile_row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    line-height: 1;
}

.hero_overlay_pile_id {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.hero_overlay_pile_row img,
.chargeStatusImage {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    /* v6.4.1 plug-warn:charging 時 JS 加 .is-charging class 觸發綠色閃爍 */
}

@keyframes chargeIconBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.12); }
}

/* selector 不綁定 parent,preview(.hero_overlay_pile_row 包)和 production(<th> 直接放)都適用
   chargeStatusImage 是 id 不是 class,但 production 用 id + charging_icon_class (空字串時),
   preview 用 id 不加 class,所以 selector 用 # + img 直接 */
img#chargeStatusImage.is-charging,
.hero_overlay_pile_row img.is-charging {
    animation: chargeIconBlink 1.2s ease-in-out infinite;
}

.hero_overlay_tr {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero_soc {
    font-size: 14px;
    font-weight: 700;
    color: #3ee07a;  /* 綠色亮色,在深色 panel 上對比強 */
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero_soc_pct {
    font-size: 10px;
    font-weight: 600;
    color: rgba(62, 224, 122, 0.75);
    margin-left: 1px;
}

/* ==========================================================
   樁資訊卡(已棄用 — v6.x.5h.28 改嵌入 hero 浮動 panel)
   保留 .protocol_card 樣式避免 production ChargeControl.php 殘留,
   但 preview 頁已不再使用此區塊
   ========================================================== */
.protocol_card {
    margin: 0 16px 16px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 6px 16px;
    box-shadow: var(--shadow-sm);
}

.protocol_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
}

.protocol_label {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.protocol_value {
    color: var(--ink);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.protocol_value .charge_ID {
    color: var(--ink-faint);
    font-weight: 600;
}

.protocol_value img {
    height: 14px;
    width: auto;
    display: block;
}

.protocol_divider {
    height: 1px;
    background: var(--line-soft);
}

/* ==========================================================
   進度圓環(綠色發光版)
   沿用原 SVG 半徑 15.9155 / circumference 邏輯(js/circular.js 已 export setProgress)
   改動:
   - stroke 從 rgba(53,198,90) → linearGradient(#3ee07a → #1f9d3e)
   - 加 SVG filter <feGaussianBlur> 包 stroke → 外擴綠光暈
   - stroke-width 3.5 → 4.2,讓發光視覺更厚實
   - circle-bg(灰底環)顏色從 lightgray → var(--line)
   ========================================================== */
.Charge_Control {
    position: relative;
    width: min(72%, 320px);
    aspect-ratio: 1 / 1;
    margin: 4px auto 8px;
}

/* v6.x.5h:整個 .Charge_Control 區塊在 active 頁已不再使用,
 * 進度邏輯改由 .charge_ring_overlay(hero 內的 3D 橢圓)接管。
 * 保留 .Charge_Control DOM 是因為 circular.js 仍依賴 .circle / .percentage 的 hook。
 * v6.x.5h.1:此區塊預設隱藏,只在沒 hero(例如單獨的 demo)才顯示。
 * 對齊 [[feedback-chargecontrol-anim-source]] — 拿掉這個獨立區塊後,
 * user 不再看到「跑圓線條一圈」跑馬燈動畫,3D hero 內的環才是主視覺。 */
.Charge_Control {
    display: none;
}

.Charge_Control .circular-chart {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.Charge_Control .circle-full-bg {
    fill: none;
    stroke: transparent;
    stroke-width: 3.8;
}

.Charge_Control .circle-bg {
    fill: none;
    stroke: var(--line);
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-dasharray: 94, 100;
}

.Charge_Control .circle {
    fill: none;
    stroke: url(#greenGlow);
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-dasharray: 94.5, 100;
    stroke-dashoffset: 94.5;
    /* v6.x.5h:沿用 v6.x.1c 結論(拿掉 transition + breathing animation),
     * user 報「進度條一開始前幾%很lag 約2秒後瞬間跑 100%,返回也一樣」
     * 真正的禍首是 transition + rAF stroke-opacity 重繪,JS 設什麼值 circle 立即顯示。
     * 此處保留「JS 設什麼值立即顯示」特性,只改視覺發光,不重蹈 v6.x.1 慘案。 */
}

/* 進度環上的呼吸動畫 — 只動 opacity,不動 stroke-dashoffset,
 * 不會有 v6.x.1 「lag → snap」問題 */
@keyframes progressBreathing {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.78; }
}

.Charge_Control.is_charging .circle {
    animation: progressBreathing 2.4s ease-in-out infinite;
}

/* 中央文字疊層(百分比 + 已充電時間)
 * battery 圖在 v6.x.5h 已不需要顯示 — 綠色發光進度環 + 百分比 + 時間已足夠傳達充電狀態,
 * 保留 #batteryImage DOM 是為了不破壞 ChargeControl.js 既有 .src 切換邏輯 */
.progress_overlay .battery {
    display: none;
}

.progress_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}

.progress_overlay .AC_bty {
    font-size: 11px;
    color: var(--ink-faint);
    text-align: center;
    line-height: 1.3;
    display: none;
}

.progress_overlay .percentage {
    font-size: clamp(40px, 11vw, 56px);
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.progress_overlay .time {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   度數 / 費用摘要卡(取代舊 .ChargeNow 三欄 flex)
   ========================================================== */
.summary_card {
    margin: 6px 16px 14px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 4px 18px;
    box-shadow: var(--shadow-sm);
}

.summary_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
}

.summary_label {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
}

.summary_value {
    color: var(--brand);
    font-weight: 800;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.summary_divider {
    height: 1px;
    background: var(--line-soft);
}

/* ==========================================================
   v6.x.5h.2 — 3D 進度環 overlay(蓋在 hero 圖的綠色外圈)
   用 SVG <ellipse> 對齊 hero 圖內綠圈的透視角度(rx > ry = 地面 foreshortening)
   viewBox 1024×1024 跟新圖 owl_car_transparent.png 對位
   v6.x.5h.4:換圖 + ring 移到 hero 圖層下,對齊圖內灰色橢圓地板
   v6.x.5h.5:PIL+ndimage 量出地板實測 `cx=502 cy=619 rx=453 ry=216 in 1024 vb`,
   rx/ry=2.10 的扁橢圓(誇張化 3D 風格),環設為 `cx=502 cy=720 rx=462 ry=220`
   (rx/ry=2.10 對齊地版透視,cy=720 在地板下緣下方略低,halo 從地板外凸出),
   perimeter ≈ 2211(Ramanujan 近似)。
   ring 在 z-index 0,圖在 z-index 1 → 圖蓋住 ring 中央,
   ring 從地板邊緣冒出來像 halo 雙層感。
   環的 perimeter 用 Ramanujan 近似:π * (3(a+b) - √((3a+b)(a+3b)))
   對齊 [[feedback-schema-show-columns-before-join]] 精神:先量好圖內座標再寫 SVG
   ========================================================== */
/* v6.x.5h.10 — 圖 z-index 2 + 環 z-index 1,車體 alpha 蓋住車體內的環 stroke
 * 對齊 user「HERO被蓋到」= 圖層關係錯(對應 [[feedback-auto-redirect-confirm-chain]] 圖層審查精神)。
 * 環 perimeter 在車體外(透明區)可見 4 個凸耳,車體內(車體 alpha=255)圖覆蓋環 stroke。
 * user 最終 values (v6.x.5h.9 ring_control.html,沿用):
 *   cv=506 cy=628 rx=522 ry=276 stroke-w core=33 halo=39 blur=3px 統一亮綠 #3ee07a
 *   perimeter = 2566.91 (Ramanujan)
 *   object-position: 49% 50% (HERO 圖置中,微偏左 1%)
 * halo blur 公式 (sw_halo - sw_core) / 2 = (39-33)/2 = 3
 * SOC 可見性分析(對應 [[feedback-schema-show-columns-before-join]] 量車體 bbox y=209..835 x=30..983):
 *   SOC=10% → 弧 36° 在車體外右凸出 ✓ 可見
 *   SOC=20% → 弧 72° 在車體外下凸出 ✓ 可見
 *   SOC=50% → 弧 180° 車體外左凸出 ✓ 可見
 *   SOC=100% → 滿圈 4 個凸耳(左/右/上/下)全部車體外 ✓ 可見 */
/* v6.x.5h.22 — 環回到 v6.x.5h.9 座標 (cx 506 cy 628 rx 472 ry 224 stroke-w 33/39 blur 3px)
 * 上版 v6.x.5h.17 control panel 用 rx 522 ry 270 偏大 + cy 618 略低,
 * 新 Gemini 圖(無車陰影)的車體地板橢圓比舊 owl_car_transparent.png 略小且略高,
 * 環需要縮小 (522→472, 270→224) + 下移 (618→628 不對,等等檢查) 對齊新地板位置。
 * v6.x.5h.9 values 跟新圖地板位置對齊實測 OK。 */
.charge_ring_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.charge_ring_overlay .charge-ring-arc {
    fill: none;
    stroke: #3ee07a;
    stroke-linecap: round;
    stroke-dasharray: 2458.21 2458.21;
    stroke-dashoffset: 2458.21;
    opacity: 0;
    /* Ramanujan for rx=508 ry=253:
     *   π * (3*(a+b) - √((3a+b)(a+3b)))
     * = π * (3*761 - √(1777*1267))
     * = π * (2283 - 1500.49)
     * = π * 782.51 ≈ 2458.21
     * v6.x.5h.24:rx/ry 同步 +10% (462→508, 230→253) cx/cy 不變 */
}

.charge_ring_overlay .charge-ring-halo {
    stroke-width: 39;
    opacity: 0;
    filter: blur(3px);
    /* halo blur 公式 (sw_halo - sw_core) / 2 = (39-33)/2 = 3
     * v6.x.5h.17:從 v6.x.5h.15 的 sw_halo 50 / blur 8px → control panel user values sw_halo 39 / blur 3px */
}

.charge_ring_overlay .charge-ring-core {
    stroke-width: 33;
    /* v6.x.5h.17:從 v6.x.5h.15 的 sw_core 34 → control panel user values sw_core 33 */
}

.charge_ring_overlay.is_charging .charge-ring-arc {
    opacity: 1;
    animation: ringBreathe 2.6s ease-in-out infinite;
}

@keyframes ringBreathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.82; }
}

/* ==========================================================
   v6.x.5h.2 — 進度 % + 時間移到 hero 下方(已棄用 — v6.x.5h.28 改嵌入 hero 浮動 SOC badge)
   保留 .progress_block 樣式避免 production ChargeControl.php 殘留
   preview 頁已不再使用此區塊
   ========================================================== */
.progress_block {
    margin: 0 16px 14px;
    text-align: center;
}

.progress_block .percentage {
    display: inline-block;
    font-size: clamp(40px, 11vw, 56px);
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.progress_block .time {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* 充電中時 % 字色變品牌綠 + 加個小 ⚡ 視覺提示 */
.progress_block.is_charging .percentage {
    color: var(--brand);
}

.progress_block.is_charging .time::before {
    content: "⚡ ";
    color: var(--brand);
    margin-right: 2px;
    font-size: 0.95em;
}

/* ==========================================================
   即時功率曲線卡(v6.x.5h 新增)
   SVG sparkline + 漸層填充 + 發光折線 + 底部時間刻度
   沒資料時顯示「— 等待連線 —」置中
   ========================================================== */
.curve_card {
    margin: 0 16px 18px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 14px 18px 12px;
    box-shadow: var(--shadow-sm);
}

.curve_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.curve_title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.curve_now {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.curve_now_val {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.curve_now_unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}

.curve_chart_wrap {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.curve_chart {
    width: 100%;
    height: 100%;
    display: block;
}

.curve_grid {
    stroke: var(--line-soft);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.curve_line {
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.curve_area {
    transition: opacity 0.2s var(--ease-out);
}

.curve_empty {
    fill: var(--ink-faint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: opacity 0.2s var(--ease-out);
}

.curve_chart.has_data .curve_empty {
    opacity: 0;
}

.curve_legend {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-faint);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ==========================================================
   開始充電鈕(全寬 pill,綠色主 CTA)
   ========================================================== */
.Charge_switch {
    margin: 6px 16px 24px;
}

.Charge_switch button {
    width: 100%;
    padding: 14px 20px;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--type-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 157, 62, 0.28);
    transition: transform 0.1s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.Charge_switch button:active {
    transform: scale(0.99);
    box-shadow: 0 2px 6px rgba(31, 157, 62, 0.22);
}

.Charge_switch button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ==========================================================
   v6.4.1 plug-warn 三種狀態 popup(從舊 CSS 保留)
   ========================================================== */
.plug-warn-popup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.4;
    position: relative;
}

.plug-warn-popup .plug-warn-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.plug-warn-popup .plug-warn-body {
    flex: 1;
}

.plug-warn-info {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #6EE7B7;
}
.plug-warn-info .plug-warn-icon {
    background: #10B981;
    color: #ffffff;
}

.plug-warn-warn {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FCD34D;
}
.plug-warn-warn .plug-warn-icon {
    background: #F59E0B;
    color: #ffffff;
}

.plug-warn-suspend {
    background: var(--line-soft);
    color: var(--ink-mid);
    border: 1px solid var(--line);
}
.plug-warn-suspend .plug-warn-icon {
    background: var(--ink-faint);
    color: #ffffff;
}

.plug-warn-popup::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.plug-warn-info::after  { border-top: 6px solid #6EE7B7; }
.plug-warn-warn::after  { border-top: 6px solid #FCD34D; }
.plug-warn-suspend::after { border-top: 6px solid var(--line); }

/* v6.4.1 plug-warn — Charging 時 ⚡ 綠色閃爍(從舊 CSS 保留) */
.charge_ID img.is-charging {
    animation: charge-pulse 1s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6));
}

@keyframes charge-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(1.25); opacity: 0.55; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ==========================================================
   響應式 — 窄螢幕(<360px)把 padding 收一點
   ========================================================== */
@media (max-width: 360px) {
    .container {
        padding-bottom: calc(var(--tab-height) + 16px + env(safe-area-inset-bottom));
    }
    .hero_3d_wrap,
    .protocol_card,
    .summary_card,
    .curve_card,
    .Charge_switch,
    .plug-warn-popup {
        margin-left: 14px;
        margin-right: 14px;
    }
    .a_ChargeLog {
        margin-right: 18px;
    }
    .progress_overlay .percentage {
        font-size: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .Charge_Control.is_charging .circle,
    .charge_ID img.is-charging,
    .a_ChargeLog,
    .Charge_switch button {
        animation: none;
        transition: none;
    }
}