/* 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 雙層感。
   ========================================================== */
/* v6.x.5h.35 — .hero_3d_wrap 完全移除(.hero_3d 樣式已合併到 .hero_card 區塊內)
   car 圖 + SVG 環現在直接在 .hero_card 內 absolute 定位,
   不再需要獨立 wrapper container。
   v6.x.5h.17 圖偏左修正教訓(不依賴 flex 計算)保留在 .hero_3d 的 object-position 上。
   v6.x.5h.35 拿掉 .hero_3d { ... } rule 全段,只留註解說明(下方 .hero_3d 樣式寫在 .hero_card 區塊內)。
   v6.x.5h.56:本段原本 comment 內含星號斜線字串讓 parser 提早關閉 + orphan properties + 多餘 },
   → 整段被 parser 視為 garbage,後續 .hero_card rule 全部沒套用 → production layout 崩。
   修法:把整段重組成單一 clean 註解(避免 comment 內含字面星斜線),parser 直接跳過。 */


/* ==========================================================
   v6.x.5h.35 — Tesla Model 3 卡片風格:單一 hero 卡裝載站點 + SOC + 車圖
   user iPhone v6.x.5h.34 verify 給 Tesla Model 3 卡片 reference,確認設計:
   - 拿掉外部 page_head(整張卡是頁面唯一元素,沒有「即時充電/充電控制」標題)
   - 拿掉 v6.x.5h.31+.34 雙卡分離(station_card + hero_3d_wrap)
   - 拿掉 v6.x.5h.32/.33 透明單卡合併(.charge_hero_card)
   - 新增單一 .hero_card:1:1 square + 深色背景 + border-radius 16px + shadow
     + position: relative 包住所有元素
     - 左上 .hero_overlay_tl:3 rows 站點資訊(站點 / 樁ID+⚡ / 充電功率),白字
     - 右上 .hero_overlay_tr:36px 綠色 SOC 大字 + 18px %
     - 中央 .charge_ring_overlay SVG(xMidYMax meet 對齊底部)+ .hero_3d 車圖
   結構:
   ┌────────────────────────────────────┐
   │ 示範充電站                  70%   │ ← overlay:TL 站點 + TR SOC
   │ EV-001 ⚡                         │
   │ 0 kW                              │
   │                                    │
   │                                    │
   │              ⊙⊙⊙⊙                │ ← 車圖 + 綠環(底部對齊)
   │              ⊙⊙⊙⊙                │
   │              ⊙⊙⊙⊙                │
   └────────────────────────────────────┘
   對齊 user Tesla Model 3 心智模型:整張卡是頁面唯一視覺元素,
   站點資訊 + SOC 是覆蓋在卡上的文字,車圖是卡的主視覺。
   對齊 [[feedback-visual-anchor-preserve-across-iterations]]:
   保留 v6.x.5h.31+.34 的「3 rows 站點資訊 + SOC + 車圖」3 個元素,
   但全部整合到一張卡內(不是 v6.x.5h.32 透明合併 + 不是 v6.x.5h.31/.34 雙卡分離)。
   ========================================================== */

.hero_card {
    /* v6.x.5h.79:user 2026-09-08 「hero_card 跟 .charge_time_card 合併(同一張)」 →
       - 加 border: 1px solid var(--line-soft)(原本 border: none)— 給 hero_card 加邊框
       - 加 border-radius: 0 0 var(--radius-lg) var(--radius-lg)(下圓角)— 跟 .charge_time_card 上圓角 銜接成一大卡
       - 加 box-shadow: var(--shadow-sm)(跟 .summary_card 一致)— 整張大卡視覺一致
       - background: var(--card)(原本 transparent)— 給大卡背景 */
    /* v6.x.5h.44:user v6.x.5h.43 verify 報兩個問題:
       (1) 「HERO 圖與綠環沒有縮小」→ .42 用 .hero_card width 100% → 66.67% 縮容器,
           但 .charge_ring_overlay / .hero_3d 用 width/height: 100% 填滿容器,
           視覺上圖與環仍是「佔滿容器」狀態,user 感受不到縮小。
       (2) 「文字不能改,只有文字修改到」→ .43 改 .hero_overlay_* 字級是錯的
       對策:還原 .hero_card width 回 100%(容器恢復 .40 尺寸)+ 還原所有文字 overlay 字級
       + 直接縮 .charge_ring_overlay / .hero_3d 的 width/height 到 66.67% + 居中(top/left 16.665%)
       → 圖與環視覺縮成 2/3,在原容器內有 padding 圍繞,user 一眼就看出「圖小了一圈」
       對齊 [[feedback-visual-anchor-preserve-across-iterations]]:
       保留 v6.x.5h.42 之前的「1:1 square + 透明背景 + 3 rows 站點 + SOC + 車圖 + 綠環」視覺,
       只 fix (a) 還原 .43 文字縮放 (b) 還原容器寬度 (c) 直接縮圖與環 */
    /* v6.x.5h.55d:user 2026-09-07 feedback「這個間距在縮小」→ margin 從 16px → 8px,
       縮小 hero 跟下方 summary 卡之間的視覺空白(原本合計 16 + 6 = 22px → 8 + 2 = 10px),
       對齊 preserve visual anchors 延伸:位置、形狀不動,只調上下 spacing */
    margin: 0;                                  /* v6.x.5h.70:user 2026-09-08 「hero 跟充電時間相連」方案 D — margin-bottom 8px → 0,讓兩張卡幾乎相連(0px 純 margin);保留 margin-top 8px 對齊 .container padding-top;margin-left/right auto 居中 */
    position: relative;
    width: 100%;                               /* v6.x.5h.44:從 .42 的 66.67% 還原回 100%(343 → 343 / 480 → 480) */
    height: 0;                                 /* v6.x.5h.40:1:1 trick 基礎 — 高度 0,由 padding-bottom 撐出 */
    padding-bottom: 80%;                      /* v6.x.5h.65:user 2026-09-08 反饋 「間距感覺還是太大」 → 1:1 square → 4:5(從 100% → 80%),讓卡片更扁,內部空白自動減少;對應 SVG / 車圖 absolute positioning 仍在底部對齊,視覺不變(只縮小空白區);v6.x.5h.70 +margin: 0 配合 「hero 跟充電時間相連」 方案 D */
    box-sizing: border-box;                    /* v6.x.5h.40:確保 padding 算在 width 內,不影響 absolute 子元素 */
    background: var(--card);                    /* v6.x.5h.79:transparent → var(--card)— 給大卡背景 */
    border: 1px solid var(--line-soft);        /* v6.x.5h.79:none → 1px solid— 給 hero_card 加邊框,跟 .charge_time_card 銜接 */
    border-top: none;                          /* v6.x.5h.79:1px → none— 上邊框移除(只有下方 + 左右跟 .charge_time_card 銜接) */
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* v6.x.5h.79:0 → 0 0 圓角 圓角— 只有下圓角,跟 .charge_time_card 上圓角 銜接 */
    overflow: hidden;                          /* 保留 overflow:hidden 確保 absolute 子元素不超出 */
    box-shadow: var(--shadow-sm);              /* v6.x.5h.79:none → var(--shadow-sm)— 整張大卡視覺一致 */
}

/* 左上覆蓋:3 rows 站點資訊(白字) */
.hero_overlay_tl {
    position: absolute;
    top: 14px;            /* v6.x.5h.44:從 .43 的 9.33px 還原回 14px (user 報文字不能改) */
    left: 14px;           /* v6.x.5h.44:從 .43 的 9.33px 還原回 14px */
    z-index: 3;
    color: #1f2937;       /* v6.x.5h.39:#fff → #1f2937 (深灰),適應 v6.x.5h.38 透明背景 */
    pointer-events: none;
}

.hero_overlay_tl_station {
    font-size: 17px;      /* v6.x.5h.44:從 .43 的 11.33px 還原回 17px (user 報文字不能改) */
    font-weight: 700;
    color: #1f2937;       /* v6.x.5h.39:深色適應透明背景 */
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 4px;   /* v6.x.5h.44:從 .43 的 2.67px 還原回 4px */
}

.hero_overlay_tl_row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

.hero_overlay_tl_pile_id {
    font-size: 13px;      /* v6.x.5h.44:從 .43 的 8.67px 還原回 13px (user 報文字不能改) */
    font-weight: 600;
    color: rgba(31, 41, 55, 0.85);   /* v6.x.5h.39:rgba(255,255,255,0.85) → rgba(31,41,55,0.85) */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.hero_overlay_tl_row img {
    width: 12px;          /* v6.x.5h.44:從 .43 的 8px 還原回 12px (user 報圖示不能改) */
    height: 12px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    /* v6.x.5h.39:移除 filter: brightness(1.2) — 淺底上 charge_off.png 不需提亮 */
}

/* v6.4.1 plug-warn:charging 時 JS 加 .is-charging class 觸發綠色閃爍 */
img#chargeStatusImage.is-charging,
.hero_overlay_tl_row img.is-charging {
    animation: chargeIconBlink 1.2s ease-in-out infinite;
}

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

.hero_overlay_tl_kw {
    font-size: 13px;      /* v6.x.5h.44:從 .43 的 8.67px 還原回 13px (user 報文字不能改) */
    font-weight: 600;
    color: rgba(31, 41, 55, 0.7);     /* v6.x.5h.39:rgba(255,255,255,0.7) → rgba(31,41,55,0.7) */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* 右上覆蓋:36px 綠色 SOC 大字(對齊 user 「大綠字主視覺」) */
.hero_overlay_tr {
    position: absolute;
    top: 10px;            /* v6.x.5h.44:從 .43 的 6.67px 還原回 10px (user 報文字不能改) */
    right: 14px;          /* v6.x.5h.44:從 .43 的 9.33px 還原回 14px */
    z-index: 3;
    pointer-events: none;
}

.hero_overlay_tr_soc {
    font-size: 36px;      /* v6.x.5h.44:從 .43 的 24px 還原回 36px (user 報文字不能改,SOC 是主視覺大字) */
    font-weight: 800;
    color: #1f9d3e;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.hero_overlay_tr_soc_pct {
    font-size: 18px;      /* v6.x.5h.44:從 .43 的 12px 還原回 18px (user 報文字不能改) */
    font-weight: 700;
    color: rgba(31, 157, 62, 0.75);
    margin-left: 1px;     /* v6.x.5h.44:從 .43 的 0.67px 還原回 1px */
}

/* SVG 環:.hero_card 內絕對定位填滿,
   v6.x.5h.35 preserveAspectRatio 從 xMidYMid meet → xMidYMax meet 對齊卡底部 */
.charge_ring_overlay {
    position: absolute;
    /* v6.x.5h.44:user 報「HERO 圖與綠環沒有縮小」→ 從 width/height 100% + inset: 0
       改成 width/height 66.67% + top/left 16.665%(居中)
       計算:(100% - 66.67%) / 2 = 16.665% (左右上下 padding)
       環視覺縮成 2/3,在原 .hero_card (width: 100%) 容器中央
       對齊 v6.x.5h.42 「HERO 圖與綠環縮小 1/3」user 原始訴求,
       但用「直接縮元素」取代「縮容器」(容器 100% 不動)。
       v6.x.5h.47:user 報「綠環跟 hero 緊貼會有許多缺點,因為 hero 去背的關係」
       → 環放大 2%(66.67% → 68%)+ top/left 從 16.665% → 16% 居中重算。
       v6.x.5h.48:user v6.x.5h.47 verify 後報「環放大 ->75%」(給絕對目標值)
       → 環直接改 75% + top/left 從 16% → 12.5% 居中重算 (100-75)/2 = 12.5%。
       環跟車體 (.hero_3d 寬度 66.67%) 之間 padding 從 .h47 的 ~1.33% 拉到 ~8.33%
       (環 75% 比車體 66.67% 大 8.33%),在 iPhone 343px 容器內每邊 ~14.29px,
       desktop 480px 容器內每邊 ~20px → padding 放大 ~6 倍,環跟車體去背外輪廓之間
       有非常明顯的「地板 halo」感,環 stroke 凸出車體外輪廓非常醒目。 */
    /* v6.x.5h.49:user v6.x.5h.48 verify 後報「加到 80%」(給絕對目標值)
       → 環從 75% → 80% + top/left 從 12.5% → 10% 居中重算 (100-80)/2 = 10%。
       環跟車體 (.hero_3d 寬度 66.67%) 之間 padding 從 .h48 的 ~8.33% 拉到 ~13.33%
       (環 80% 比車體 66.67% 大 13.33%),在 iPhone 343px 容器內每邊 ~22.86px
       (vs .h48 ~14.29px,放大 1.6 倍;vs .h47 ~2.28px,放大 ~10 倍),
       desktop 480px 容器內每邊 ~31.99px
       → 環跟車體去背外輪廓之間有極明顯的「地板 halo」感,環 stroke 凸出車體
       外輪廓非常醒目,接近卡片邊緣但仍保留 ~10% 容器 padding 不超出。 */
    /* v6.x.5h.50:user v6.x.5h.49 verify 後報「加到 87%,並往上移 1%」
       → 環從 80% → 87% + top 從 10% → 5.5%(往上移 1%)+ left 從 10% → 6.5%
       居中重算 (100-87)/2 = 6.5%,然後 top 額外往上 1%(減 1%)。
       左右 padding:環左邊比車體左邊還左 10.165%,環右邊比車體右邊還右 10.165%
       (iPhone 343px 每邊 ~34.87px,desktop 480px 每邊 ~48.79px)。
       上下 padding:環上邊比車體上邊還上 11.165%,環下邊比車體下邊還下 9.165%
       (往上移 1% 後環下邊比車體下邊 padding 縮小,環 stroke 凸出車體底部更明顯)。
       環的垂直中心從環容器中央往上偏 0.5%(原本 50%,現在 46%),讓環跟車體底部
       對齊更精準(對齊 v6.x.5h.10 floor ellipse 設計的「光環在地板」視覺邏輯)。 */
    top: 5.5%;
    left: 6.5%;
    width: 87%;
    height: 87%;
    /* v6.x.5h.46:z-index 2 → 1,讓車體 (.hero_3d z-index 2) 蓋住環 stroke。
       user v6.x.5h.45 報「HERO 圖被綠環蓋住,以視覺來說,綠環是與灰色地板同一層,
       所以綠環不能蓋住貓頭鷹與車」→ 環降到地板層,被車體 alpha 蓋住,
       只從地板橢圓邊緣外的部分凸出可見(對齊 v6.x.5h.4 設計意圖 line 498)
       v6.x.5h.10 我改成 z-index 2 讓環穿透車體(.h10 接受),
       v6.x.5h.44 縮 66.67% 後 stroke 比例變粗,user .h45 視覺感受改變。
       v6.x.5h.47/.48 環放大不影響 z-index 對調設計,只改環容器大小。 */
    z-index: 1;
    pointer-events: none;
    /* v6.x.5h.55:Phase 2 結束後 JS 移除 is_charging,觸發 fadeOut 至 invisible。
       preview 是 placeholder(無 pid/sid),Phase 1 進場動畫結束後應該像「未插槍 + 0%」一致歸零,
       對齊 user 2026-09-07 feedback「充電進度環的進度結束後,應該回到 0%」。
       (HTML 預設有 is_charging class,加載即顯示 sweep 動畫;JS Phase 2 收尾 remove is_charging → fadeOut 0.6s)
       對齊 AskUserQuestion 2026-09-07 選「文字 0% + 環整個 fadeOut (推薦)」 */
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

/* v6.x.5h.55:is_charging 預設由 HTML class 給,SVG 加上即可見 sweep 進場動畫 */
.charge_ring_overlay.is_charging {
    opacity: 1;
}

/* 車圖:.hero_card 內絕對定位填滿,object-position 50% 75% 對齊 ring 位置 */
.hero_3d {
    position: absolute;
    /* v6.x.5h.44:user 報「HERO 圖與綠環沒有縮小」→ 從 width/height 100% + inset: 0
       改成 width/height 66.67% + top/left 16.665%(居中)
       計算:(100% - 66.67%) / 2 = 16.665% (左右上下 padding)
       車圖視覺縮成 2/3,在原 .hero_card (width: 100%) 容器中央
       object-position: 50% 75% 保留(車圖底部對齊 ring 位置,不是水平垂直置中)
       對齊 v6.x.5h.42 「HERO 圖與綠環縮小 1/3」user 原始訴求 */
    /* v6.x.5h.77 REVERTED:user 報 「跑掉了」 — 改 width/height 100% + cover 太激進,車圖擠到文字 overlay,版面 layout 全亂
       撤回到 .h76 狀態(66.67% + 50% 75%)讓車圖回到原本 2/3 居中 layout;
       真要消除車圖 → 「充電時間」 空白要靠改 hero_card 比例(不是改車圖尺寸)— 但 4:5 之前 user 撤掉過,所以不動
       結論:維持 v6.x.5h.74~.76 的 charge_time_card padding-top 0 + label margin-bottom 1px 改動(這些有效),車圖回到原本尺寸(這些改動撤回) */
    top: 16.665%;
    left: 16.665%;
    width: 66.67%;
    height: 66.67%;
    object-fit: contain;
    object-position: 50% 75%;
    /* v6.x.5h.46:z-index 1 → 2,讓車體蓋住環 (.charge_ring_overlay z-index 1)。
       對齊 user「綠環不能蓋住貓頭鷹與車」視覺邏輯(環 = 地板層,車體層蓋環)。
       環 stroke 只在車體 PNG 透明區(地板邊緣外)凸出可見,
       車體 alpha=255 區域的環 stroke 被車體蓋住(對齊 v6.x.5h.4 設計意圖)。 */
    z-index: 2;
}

/* ==========================================================
   樁資訊卡(已棄用 — 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 {
    /* v6.x.5h.55f:user 反饋「縮小間距」→ summary_card margin-top 從 .55e 的 6px → 4px,跟 .charge_time_card margin-bottom 對稱,合計三段間距 4+4 = 8px(從 .55e 的 12px 縮為 8px)*/
    margin: 4px 16px 14px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 4px 18px;
    box-shadow: var(--shadow-sm);
}

/* v6.x.5h.55e:HERO 下方獨立透明背景卡片 — 放即時充電時間(HH:MM:SS 碼錶)
   v6.x.5h.55d 原本把充電時間塞進 summary_card 內當 row(column flex 居中大字),
   user 反饋 2026-09-07「HERO 下方新增透明背景的卡片,放『充電時間』,卡片之間的間距縮小 點」+
   「充電時間是要即時數據」 → 從 summary_card 內抽出來獨立成卡(透明背景 + 軟邊框 + 居中大字),
   JS 用 setInterval 每秒 +1 跑 HH:MM:SS 碼錶 tick,模擬 OCPP polling 給的實際 duration 視覺感。
   對齊 [[feedback_paren_positioning_is_placement_specifier]]:user 反饋 「(置中)」 + 「(即時數據)」 都
   反映 「充電時間」 是 user 重點關注即時資訊,獨立卡片視覺強化對應這個心智權重。
   對齊 [[feedback_visual_anchor_preserve_across_iterations]]:HERO 跟 summary_card 既有 layout 不動,
   只在中間插獨立卡 + 縮三段間距,保留既有視覺 anchor。 */
.charge_time_card {
    /* v6.x.5h.79:user 2026-09-08 「hero_card 跟 .charge_time_card 合併(同一張)」 →
       - margin: 0 16px 8px → 0(取消 left/right margin + bottom)— 跟 .hero_card border 銜接(0 寬度間距)
       - padding: 0 18px 16px 保留(.h76 padding-top 0 + margin-bottom 16px)
       - background 保留 transparent(透明卡,讓 .hero_card 背景延伸過來)
       - border-top: 0(原本 1px)— 上邊框移除(跟 .hero_card 下邊框銜接,避免重疊)
       - border-left / border-right / border-bottom 1px solid var(--line-soft)(保留)— 跟 .hero_card 邊框連成一張大卡
       - border-radius: 上半部 0,下半部 var(--radius-lg)(跟 .hero_card 下圓角 銜接)
       - text-align: center 保留 */
    margin: 0;
    padding: 0 18px 16px;                       /* v6.x.5h.76 保留:padding-top 0,讓 「充電時間」 文字緊貼卡片頂邊 */
    background: transparent;
    border: 1px solid var(--line-soft);
    border-top: 0;                              /* v6.x.5h.79:1px → 0,跟 .hero_card 下邊框銜接 */
    border-top-left-radius: 0;                  /* v6.x.5h.79:跟 .hero_card 下圓角 銜接 */
    border-top-right-radius: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    text-align: center;
}
.charge_time_card .charge_time_label {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 1px;                         /* v6.x.5h.75:user 「再往上一倍」 → label margin-bottom 2px → 1px(再縮 1px),讓 00:00:00 數字再往上靠近 「充電時間」 文字 */
}
.charge_time_card .charge_time_value {
    color: var(--brand);
    font-weight: 800;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1;
    /* 即時 tick 時 number 跳動不抖 — tabular-nums 等寬數字 */
}

/* v6.x.5h.55d .summary_row.summary_row_charge_time + .summary_label_charge_time + .summary_value_charge_time rules 已廢棄
   (從 summary_card 內抽出獨立卡,改用上面 .charge_time_card 系列 rule) */

.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 .charge-ring-arc {
    fill: none;
    stroke: #3ee07a;
    stroke-linecap: round;
    stroke-dasharray: 2458.21px 2458.21px;   /* v6.x.5h.40:加 px 單位,Chrome 才接受(否則 invalid CSS 忽略) */
    stroke-dashoffset: 2458.21px;             /* v6.x.5h.40:加 px 單位 */
    opacity: 0;
    /* v6.x.5h.43:加 drop-shadow glow 製造光環感 — 環 stroke 顯示時會有綠色光暈 */
    filter: drop-shadow(0 0 4px #3ee07a) drop-shadow(0 0 8px rgba(62, 224, 122, 0.5));
    /* 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: 48;
    opacity: 0;
    filter: blur(4px);
    /* v6.x.5h.31:stroke 從 39 → 48(對齊 SVG attribute),
       blur 從 3 → 4(配合 stroke 加粗,halo 視覺更明顯) */
}

.charge_ring_overlay .charge-ring-core {
    stroke-width: 42;
    /* v6.x.5h.31:stroke 從 33 → 42(對齊 SVG attribute) */
}

.charge_ring_overlay.is_charging .charge-ring-arc {
    /* v6.x.5h.31f:取消 idle CSS animation infinite loop
       user iPhone 報「啟動動畫有了,但會跑不停」→ 不要 idle 階段無限循環
       Phase 1 entrance sweep 跑一次後收尾,環停在固定狀態靜止
       (對齊 v6.x.5h.28 user 取消 SOC 模擬動畫的決定,idle 階段不無限跑) */
    opacity: 1;
}

.charge_ring_overlay.is_charging .charge-ring-halo {
    /* halo 跟 core 同步顯示,不跑 animation */
    opacity: 0.7;
}

/* v6.x.5h.60:旋轉光條 — 充電中時沿環跑一圈,象徵 「還在充電中」
 * 對齊 user 2026-09-08 「最原版的充電控制頁面中,充電中時,充電進度環會有一段光條一直圍繞著進度環跑,象徵還在充電中」
 * 設計:
 * - placeholder / 停止充電狀態:.charge-ring-spinner-arc 完全隱藏(對齊 [[feedback-placeholder-demo-animation-zero]])
 * - is_charging 狀態:顯示光條,SVG <animateTransform> 3s 線性 rotate 0→360 圍繞 (506,628)
 * - 不用 CSS @keyframes:SVG transform-origin 在 viewBox 縮放後 iOS Safari 行為不一致,SVG SMIL 原生支援
 * - 對齊 lesson [[feedback-entrance-once-then-static]] 「進場跑一次 → 收尾靜止」 的例外:充電中是持續活動的視覺指示,屬於 「有 event 觸發」 的 idle loop,
 *   不同於 「沒 event 卻一直跑」 的無意義 idle
 * - z-index 高於 .charge-ring-core 跟 .charge-ring-halo,確保光條在最上層不被擋 */
.charge-ring-spinner-arc {
    display: none;
    z-index: 3;
}

.charge_ring_overlay.is_charging .charge-ring-spinner-arc {
    display: block;
}

/* ==========================================================
   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;
    }
}