/* Munea 沐寧 — 沐寧 配色 · 精修 v2（提升設計感 + 層次 + 操作舒適度）
往 Careon 調性：柔光背景 / 標題三層次 / 卡片質感交錯 / 浮動標籤 / 裝飾曲線
健康照護可用性：大字、高對比、少元素 */
:root {
/* 字級規範 v1（UIUX 定案）：頁大標 serif 30 / 區塊標 20 / 卡標 17 / 內文 17 / 說明 15 / 註記 13——不再任意生字級 */
--fs-page: 24px; --fs-section: 18px; --fs-card: 16px; --fs-body: 16px; --fs-sub: 14px; --fs-note: 12.5px;
--fs-action-primary: 16px;
--fw-title: 700; --fw-em: 600; --fw-body: 400; --fw-action-primary: 800;
/* Edward 2026-07-30 定色重申（違者退回）：主企業色＝薄荷綠不是深綠；橘＝Logo 上的那個橘。
深綠 #236C66 僅限文字強調，不得當主色／按鈕底。後台 admin.css 同值，兩邊要一起改。
同日晚間補訓：橘不做「文字」色（達標/隨時/設定頁的深橘字被抓＝規範外）——
文字只用白/石墨黑、功能性小標用薄荷綠深階（7/03 鐵則本來就這樣寫）；橘只做底色/圖示/圖形。 */
--teal: #3AA8A0; /* 薄荷綠（主） */
--teal-d: #2E8A83; /* 薄荷綠·深（按下/文字級） */
--teal-dd: #236C66; /* 深綠·僅文字強調用 */
--btn-green: #37A099; /* 主按鈕薄荷綠（Edward 7/30 拍板品牌優先；白字 3.16:1 只到 AA 大字級，7/24 的深綠 #2A7E78 退場） */
--mint: #E8F2EE; --mint-2: #D9EFE8;
--cream: #F4F0E8; --cream-2: #FFFFFF; --surface: #FFFFFF;
--ink: #3A352E; --ink-2: #4A5651; --muted: #5A6963; /* 石墨黑（官網同款） */
--coral: #F4A261; --coral-d: #E08B45; --coral-soft: #F8E9D8; /* Logo 橘（-d＝圖示/圖形深階·非文字色） */
/* 小字點綴專用的暖橘（Edward 2026-07-31：「整個畫面都綠色會單調失衡，橘色要暖一點不要太暗」）。
取捨是量出來的，不是憑感覺挑：白卡上 --coral 只有 2.06、--coral-d 2.64，小字看不清；
舊深字 #A8611E 有 4.78 但 Edward 嫌暗。#B0651B 在白卡 4.45（AA 門檻 4.5，差 0.05）、
米色底 3.91——比舊深字暖一階、又不至於糊掉。只用在「粗體小標籤」這種短詞
（隨時／寧寧幫你留意／區塊標題），不用在整段內文，內文仍走 --ink／--muted。 */
/* 2026-07-31：Edward「整個畫面都是綠的」→ 小字改暖橘點綴。原訂 #B0651B 對白底
只有 4.45、差一點點沒過 AA 小字門檻（4.5）——我們的用戶是長輩，讀得清楚比
好看更優先。壓深到 #AB6119＝4.71，肉眼幾乎看不出差別，暖色點綴照樣成立。 */
--coral-text: #AB6119;
--gold: #E0B354; --gold-soft: #F6EAD0;
--line: #EAE3D6; /* 官網線色 */
--deep: #36423E; --deep-2: #3F4C47; --deep-card: #485751; /* 石墨綠模板色（官網深色塊 · 7/4 提亮一階） */
--danger: #E55B4D;
--danger-d: #B0392D; /* 危險動作·深（白底紅字 6.05:1 · 破壞性按鈕文字/框線用） */
--radius: 18px; --radius-lg: 22px; --radius-sm: 14px; --radius-md: 20px; --radius-xl: 24px;
--shadow: 0 6px 16px -8px rgba(31,60,52,.12);
--shadow-sm: 0 2px 8px -4px rgba(31,60,52,.08);
--shadow-lg: 0 10px 24px -12px rgba(31,60,52,.15);
--sans: "Noto Sans TC", -apple-system, "PingFang TC", sans-serif;
--display: "Poppins", "Noto Sans TC", sans-serif;
--serif: "Noto Serif TC", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; }
/* 通用保險（2026-07-29）：只要 JS 設了 hidden，就一定要真的消失。
瀏覽器預設的 [hidden]{display:none} 優先度比 class 低，任何 .foo{display:flex} 都會蓋掉它——
7/28 首頁「讓寧寧更認識你」那張卡的關閉 X 按了沒反應、四道顯示條件全失效，就是這個原因。
同類寫法在本檔還有好幾處（.sec-head / .chal-actions / .care-* 等都設了 display），
與其逐一補 [hidden] 規則，不如在這裡一次擋住，之後誰新增元件都不會再踩。 */
[hidden] { display: none !important; }
body { font-family: var(--sans); background: #EFE9DD; color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; }
/* 按鈕與輸入框預設「不會」繼承字體，會掉回作業系統的預設字
（實測有 83 個元素跑成 Arial，而整份樣式檔沒有任何一條寫過 Arial）。
結果就是畫面上有些字照規範、有些字掉回系統字，看起來「沒有規則」。
這裡只把字體家族接回設計系統；字級與字重仍由各元件自己的樣式決定。 */
button, input, select, textarea, optgroup { font-family: inherit; }
.ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
.app-shell {
width: 100%; max-width: 400px; margin: 0 auto; height: 100vh; max-height: 866px; min-height: 640px; position: relative; overflow: hidden; border-radius: var(--radius-xl);
display: flex; flex-direction: column;
background: var(--cream); /* 單一米黃底色（Edward 6/27：不要兩色漸層、薄荷綠留作點綴/其他模板底） */
}
/* 真的在手機上就填滿整個螢幕（Edward 2026-07-29 在 iPhone 16 Pro Max 上抓到）。
上面那組 max-width 400 / max-height 866 / 圓角是給電腦瀏覽器預覽用的「手機外框」外觀，
裝進大螢幕手機會露出四周底色跟圓角——實測 16 Pro Max(440x956) 左右各少 20px、上下少 45px，
16 Plus(430x932) 少 30/66，16 Pro(402x874) 少 2/8；16(393x852) 與 SE(375x667) 剛好在框內，
所以一直沒被發現。斷點取 520px：手機最寬 440，電腦視窗仍保留手機外框預覽。
height 寫兩次是為了舊版 Safari——不吃 dvh 的會用上一行的 vh。 */
@media (max-width: 520px) {
.app-shell {
max-width: none; max-height: none; min-height: 0; border-radius: 0;
height: 100vh; height: 100dvh;
}
}
/* iOS 狀態列 */
.status-bar { height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-family: var(--display); font-weight: 600; font-size: 15px; position: relative; z-index: 5; }
.status-bar .sb-icons { display: flex; gap: 6px; align-items: center; }
.status-bar .sb-icons .ic { width: 17px; height: 17px; stroke-width: 2; }
.status-bar.on-dark { color: #fff; }
.screen { display: none; height: 100%; overflow-y: auto; padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 6px); padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.screen.active { display: block; animation: viewIn .3s cubic-bezier(.22,.9,.32,1) both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.pad { padding: 4px 24px 18px; }
/* 區塊標題三層次（Careon 手法） */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 26px 0 13px; }
.sec-kicker { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--teal-dd); margin-bottom: 3px; }
.sec-head h2 { font-size: 20px; font-weight: 800; color: var(--ink); }
#home .sec-head h2 { font-family: var(--serif); font-size: 18px; font-weight: 900; }
.sec-head .more { font-size: 15px; color: var(--teal); font-weight: 600; align-self: flex-end; }
/* ============ 首頁 ============ */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; margin-bottom: 14px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.025em; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); line-height: 1; }
.brand .logo-mark { width: 32px; height: 32px; display: inline-grid; place-items: center; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(244,162,97,.24)); }
.brand .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand .logo-word { display: inline-flex; align-items: baseline; line-height: 1; }
.brand .logo-word b { color: var(--teal); font-weight: 700; }
.brand .logo-zh { font-family: var(--sans); font-size: .64em; font-weight: 700; letter-spacing: .04em; margin-left: 7px; color: var(--ink); opacity: .92; }
.home-meta { flex-shrink: 0; font-size: 12.5px; color: var(--teal-dd); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.home-meta b { color: var(--teal-dd); font-weight: 700; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-sep { color: var(--muted); opacity: .55; }
.greeting-wrap { position: relative; margin: 4px 0 16px; }
.greeting-kicker { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--teal-dd); text-transform: uppercase; margin-bottom: 2px; }
.greeting-big { font-family: var(--serif); max-width: 310px; font-size: 27px; font-weight: 900; color: var(--ink); letter-spacing: 0; line-height: 1.16; }
/* 安心存摺 條（升級：獎章圓 + 進度感） */
.wallet-strip { display: flex; align-items: center; gap: 13px; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.wallet-strip .ws-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--gold); flex-shrink: 0; box-shadow: 0 4px 10px -4px rgba(224,179,84,.5); }
.wallet-strip .ws-text { flex: 1; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.wallet-strip .ws-text b { color: var(--teal-dd); font-family: var(--display); font-weight: 700; }
/* AI 陪伴入口：資訊分層 + 人物存在感 */
.butler-card { position: relative; border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); border: 1px solid var(--line); }
.butler-card::before { content: none; }
.butler-card::after { content: none; }
.bc-row { position: relative; display: flex; align-items: center; gap: 13px; margin-bottom: 0; }
.bc-avatar { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 18px; position: relative; z-index: 1; background: var(--mint); overflow: hidden; }
.bc-avatar img { border-radius: 18px; }
.bc-avatar .ava-img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.bc-avatar .av-stripes { position: absolute; inset: 0; background: none; }
.bc-avatar .online { position: absolute; right: 4px; bottom: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; }
.bc-info { flex: 1; min-width: 0; }
/* 「寧寧幫你留意」這行小標改暖橘（Edward 2026-07-31）——卡片內容已經有綠色圖示，
小標再用綠就整張卡同一個調子；橘色小標配綠圖示，冷暖各站一邊才有層次。 */
.bc-eyebrow { display: inline-flex; align-items: center; color: var(--coral-text); font-size: 13px; font-weight: 600; letter-spacing: .03em; margin-bottom: 7px; }
.bc-name { font-family: var(--serif); font-weight: 900; font-size: 16px; color: var(--ink); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; line-height: 1.1; position: relative; z-index: 1; }
.bc-name .bc-tag { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--teal-dd); background: var(--mint); padding: 3px 9px; border-radius: 999px; }
.bc-status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.bc-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(58,168,160,.5); animation: live 1.8s infinite; }
@keyframes live { 0%{ box-shadow: 0 0 0 0 rgba(58,168,160,.5) } 70%{ box-shadow: 0 0 0 7px rgba(58,168,160,0) } }
.bc-chip { position: static; width: fit-content; max-width: 100%; background: var(--mint); padding: 9px 13px; border-radius: 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: flex-start; gap: 7px; white-space: normal; line-height: 1.5; }
.bc-chip .ic { margin-top: 2px; flex-shrink: 0; }
.bc-chip b { color: var(--teal-dd); font-weight: 800; }
.bc-chip .ic { width: 15px; height: 15px; color: var(--coral); }
.video-btn { position: relative; z-index: 1; width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 16px; border: none; border-radius: 16px; background: var(--btn-green); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15.5px; box-shadow: 0 10px 22px -8px rgba(58,168,160,.55); cursor: pointer; transition: transform .12s, box-shadow .2s; }
.video-btn .ic { color: #fff; }
.video-btn:active { transform: scale(.98); box-shadow: 0 10px 20px -12px rgba(58,168,160,.72); }
#home #startCall { margin-bottom: 20px; }
/* 今天一起完成（進度感 + 質感） */
.task-progress { display: inline-flex; align-items: center; font-size: 13px; color: var(--teal-dd); font-weight: 800; background: var(--mint-2); padding: 3px 11px; border-radius: 999px; }
.task-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.task-item { display: flex; align-items: center; gap: 13px; padding: 15px 16px; cursor: pointer; transition: background .2s; }
.task-item:active { background: var(--cream-2); }
.task-item + .task-item { border-top: 1px solid var(--line); }
.task-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.task-ico .ic { width: 21px; height: 21px; }
.task-ico.pill { background: var(--coral); color: #fff; } .task-ico.walk { background: var(--teal); color: #fff; } .task-ico.mood { background: var(--teal-d); color: #fff; } .task-ico.chat { background: var(--mint-2); color: var(--teal); } .task-ico.visit { background: var(--gold); color: #fff; }
.task-body { flex: 1; }
.task-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.task-sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.task-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0; color: transparent; transition: .2s; }
.task-item.done .task-check { background: var(--teal); border-color: var(--teal); color: #fff; transform: scale(1.05); }
.task-item.done .task-title { color: var(--muted); text-decoration: line-through; }
/* 「隨時／達標」這欄回到暖橘（Edward 2026-07-31）：之前統一成深綠，整個畫面只剩一個色調。
.coral 這個 class 名字本來就是橘的意思，值卻被改成 teal-dd——名字跟顏色打架，一併收回來。 */
.task-time { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--coral-text); flex: 0 0 auto; max-width: 92px; text-align: center; line-height: 1.2; white-space: normal; }
.task-time.coral { color: var(--coral-text); }
html[lang="es"] .task-time { max-width: 78px; font-size: 12.5px; }
.fam-peek { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-top: 14px; }
.fam-peek .fp-avatar { width: 46px; height: 46px; border-radius: 50%; background: #F2D9C0; flex-shrink: 0; }
.fam-peek .fp-text { flex: 1; font-size: 15px; color: var(--ink-2); }
.fam-peek .fp-text b { color: var(--ink); }
/* ============ 視訊通話 ============ */
.call-screen { background: var(--deep); position: relative; }
.call-screen::before { content: none; }
.call-inner { position: relative; min-height: calc(100vh - 44px); display: flex; flex-direction: column; padding: 12px 20px 30px; }
.call-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.32); color: #fff; padding: 8px 15px; border-radius: 999px; font-size: 15px; font-weight: 600; backdrop-filter: blur(6px); }
.call-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.call-pill .timer { font-family: var(--display); color: #C9D6D1; font-weight: 500; }
.avatar-frame { margin: auto; width: 180px; text-align: center; border: 1.5px dashed rgba(255,255,255,.3); border-radius: 16px; padding: 20px 14px; color: rgba(255,255,255,.55); font-size: 13px; letter-spacing: .08em; line-height: 1.7; }
.avatar-frame.photo { border: none; padding: 0; width: 200px; height: 264px; border-radius: var(--radius-xl); overflow: hidden; position: relative; box-shadow: 0 24px 54px -22px rgba(0,0,0,.6); }
.ava-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-badge { position: absolute; left: 11px; top: 11px; background: rgba(0,0,0,.5); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px); }
.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #E55B4D; animation: live 1.6s infinite; }
.bc-avatar, .fm-av, .fp-avatar, .mh-av, .mh-av2 { overflow: hidden; }
.speaking-pill { align-self: center; display: inline-flex; align-items: center; gap: 9px; background: rgba(0,0,0,.34); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; margin-bottom: 26px; backdrop-filter: blur(6px); }
.speaking-pill .wave { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.speaking-pill .wave i { width: 3px; background: var(--teal); border-radius: 2px; animation: wave 1s infinite ease-in-out; }
.speaking-pill .wave i:nth-child(1){height:6px;animation-delay:0s} .speaking-pill .wave i:nth-child(2){height:14px;animation-delay:.15s} .speaking-pill .wave i:nth-child(3){height:9px;animation-delay:.3s} .speaking-pill .wave i:nth-child(4){height:13px;animation-delay:.45s}
@keyframes wave { 0%,100%{ transform: scaleY(.5) } 50%{ transform: scaleY(1) } }
.call-controls { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 6px; }
.cc-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: none; color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
.cc-btn .cc-circle { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.cc-btn .cc-circle .ic { width: 26px; height: 26px; color: #fff; }
.cc-btn.end .cc-circle { background: var(--coral-d); }
/* ============ 用藥服務窗 ============ */
.med-screen { background: var(--cream); position: relative; }
.med-top { position: relative; padding: 12px 20px; min-height: 290px; display: flex; flex-direction: column; }
.med-avatar-tag { align-self: center; margin: auto; border: 1.5px dashed rgba(255,255,255,.25); border-radius: 12px; padding: 10px 18px; color: rgba(255,255,255,.5); font-size: 13px; letter-spacing: .08em; }
.med-say { align-self: center; background: var(--mint); color: var(--teal-dd); padding: 12px 20px; border-radius: 999px; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.med-sheet { background: var(--surface); border-top: 1px solid var(--line); border-radius: 26px 26px 0 0; margin-top: auto; padding: 16px 20px 30px; }
.med-grab { width: 40px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 16px; }
.med-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.med-head .mh-left { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
.med-head .mh-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--mint); display: grid; place-items: center; color: var(--teal-d); }
.med-head .mh-now { background: var(--mint); color: var(--teal-dd); font-family: var(--display); font-weight: 600; font-size: 15px; padding: 6px 13px; border-radius: 999px; }
.med-pill-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 12px; }
.mpc-row { display: flex; align-items: center; gap: 14px; }
.mpc-photo { width: 64px; height: 64px; border-radius: 14px; background: var(--mint-2); display: grid; place-items: center; color: var(--teal-dd); flex-shrink: 0; }
.mpc-name { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); }
.mpc-desc { font-size: 15px; color: var(--ink-2); margin-top: 3px; }
.mpc-streak { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; display: flex; align-items: center; gap: 8px; color: var(--teal-d); font-size: 15px; font-weight: 600; }
.mpc-streak .ic { width: 18px; height: 18px; }
.med-actions { display: flex; gap: 12px; }
/* min-width: 0 是必要的（2026-08-10 全畫面驗收抓到）：並排的按鈕預設不會縮到比內容窄，
西班牙文＋最大字級時「稍後提醒」把按鈕整個推出畫面 11px。加了之後文字會換行而不是溢出。 */
.med-actions button { flex: 1; min-width: 0; padding: 17px; border-radius: var(--radius-sm); font-family: var(--display); font-weight: 700; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.med-actions .taken { border: none; background: var(--btn-green); color: #fff; box-shadow: var(--shadow-sm); flex: 1.4; }
.med-actions .taken .ic { color: #fff; }
.med-actions .snooze { border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); line-height: 1.3; font-size: 15px; }
/* 間距刻度（8px 基礎 · 規格 A）：卡內 12 / 卡距 16 / 區塊 24 */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 36px; --sp-7: 48px; }
/* ============ 狀態頁 ============ */
.page-head { margin: 6px 0 16px; }
#family .page-head { margin-bottom: 16px; }
.page-kicker { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--teal-dd); margin-bottom: 4px; }
.page-title { font-family: var(--serif); font-size: 28px; font-weight: 800; color: var(--ink); }
.page-sub { font-size: 15px; color: var(--muted); margin-top: 4px; }
.stat-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-bottom: 16px; }
.stat-tile { background: #FFF; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-sm); box-sizing: border-box; min-height: 88px; text-align: left; position: relative;
display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; align-content: center; }
.stat-tile .st-ico { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.stat-tile .st-ico .ic { width: 18px; height: 18px; }
.stat-tile .st-val { grid-column: 2; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; color: var(--ink); }
.stat-tile .st-val small { font-size: 14px; color: var(--muted); font-weight: 600; }
.stat-tile .st-label { grid-column: 2; font-size: 14.5px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.5; word-break: keep-all; }
.stat-tile .st-label .st-trend { white-space: nowrap; } /* 「偏少」等小標籤整塊不斷字 */
.stat-tile.t-bp .st-ico { background: var(--teal); color: #FFF; }
.stat-tile.t-bp .st-val { color: var(--teal-dd); }
.stat-tile.t-sleep .st-ico { background: #C79A3B; color: #FFF; }
.stat-tile.t-sleep .st-val { color: #8A6410; }
.stat-tile.t-med { cursor: pointer; font: inherit; }
.stat-tile.t-med .st-ico { background: var(--coral); color: #FFF; }
.stat-tile.t-med .st-val { color: var(--ink); }
.stat-tile.t-act .st-ico { background: var(--teal-d); color: #FFF; }
.stat-tile.t-act .st-val { color: var(--teal-dd); }
.stat-tile .pill-dots { position: absolute; right: 12px; top: 12px; margin: 0; }
.stat-tile .pill-dots i { width: 11px; height: 6px; }
.stat-tile .act-spark { right: 12px; top: 12px; }
.stat-tile .act-spark i { width: 5px; }
#personGrid .stat-tile.t-med { cursor: default; } /* 個人頁四磚僅展示、不可點 */
/* 子頁（個人／心情／記錄簿）不需要頂部「全家健康圈」大標題＋人物切換列——收起，讓子頁用自己的返回列當標題、乾淨不重複 */
#family:has(#viewPerson.active) .hscroll-wrap,
#family:has(#viewMood.active) .hscroll-wrap,
#family:has(#viewBook.active) .hscroll-wrap,
#family:has(#viewPerson.active) .page-head,
#family:has(#viewMood.active) .page-head,
#family:has(#viewBook.active) .page-head { display: none; }
/* 健康頁就地展開面板（女巫規格：色=語意、不自創色）*/
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 3px; vertical-align: 0; }
.st-dot.ok { background: var(--teal-d); }
.st-dot.warn { background: #E0A32E; }
.st-dot.alert { background: var(--coral-d); }
.stat-tile[data-metric] { cursor: pointer; }
.stat-tile.open { box-shadow: 0 0 0 2px var(--teal-d); }
/* 寧寧整體健康觀察 */
.health-note { display: flex; align-items: center; gap: 11px; background: var(--mint); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.health-note .hn-face { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.health-note .hn-face img { width: 100%; height: 100%; object-fit: cover; }
.health-note .hn-text { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* 點一格就地展開：這週趨勢 + 寧寧解讀 */
.metric-detail { background: #FFF; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: -4px 0 16px; box-shadow: var(--shadow-sm); animation: mdIn .22s ease; }
@keyframes mdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.md-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.md-head b { font-size: 15px; font-weight: 800; color: var(--ink); }
.md-status { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.md-status.ok { background: var(--mint); color: var(--teal-dd); }
.md-status.warn { background: var(--coral-soft); color: var(--ink); }
.md-status.alert { background: var(--coral-soft); color: var(--ink); }
.md-chart { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding: 0 2px; }
.md-chart i { flex: 1; background: var(--mint); border-radius: 5px 5px 0 0; min-height: 6px; transition: height .3s ease; }
.md-chart i.now { background: var(--teal-d); }
.md-days { display: flex; gap: 6px; margin: 5px 0 12px; padding: 0 2px; }
.md-days span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.md-read { display: flex; align-items: flex-start; gap: 9px; background: var(--cream); border-radius: 12px; padding: 10px 12px; }
.md-read .md-face { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.md-read .md-face img { width: 100%; height: 100%; object-fit: cover; }
.md-read span:last-child { font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* ===== 健康頁分層排版 v3（女巫規格 · 照設計系統：色=語意、不亂配色、無左線）===== */
/* ① 今日安心 HERO：深綠石墨主卡（全頁唯一主角）*/
.today-hero { background: var(--deep); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); color: #fff; margin-bottom: 20px; }
.today-hero .th-row { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.today-hero .th-face { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.today-hero .th-face img { width: 100%; height: 100%; object-fit: cover; }
.today-hero .th-say b { font-family: var(--display); font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.2px; display: block; margin-bottom: 3px; }
.today-hero .th-say span { font-size: 15px; color: rgba(255,255,255,.82); line-height: 1.5; }
.hero-dots { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-dots i { flex: 1; height: 6px; border-radius: 999px; background: var(--teal); }
.hero-dots i.ok { background: var(--teal); animation: heroBreathe 3.5s ease-in-out infinite; }
.hero-dots i.warn { background: var(--coral); }
.hero-dots i.alert { background: var(--coral-d); }
@keyframes heroBreathe { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
/* ② 想請你留意：大卡（無左線、珊瑚圖示語意、字級守無障礙 ≥15）*/
.focus-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.focus-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: #FFF; border: 1px solid var(--line); border-radius: 18px; padding: 15px; cursor: pointer; font-family: var(--sans); box-shadow: var(--shadow-sm); }
.focus-card:active { transform: scale(.985); transition: transform .1s; }
.focus-card.open { box-shadow: 0 0 0 2px var(--teal-d); }
.focus-card .fc-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--coral-soft); color: var(--coral-d); }
.focus-card .fc-ico .ic { width: 22px; height: 22px; }
.focus-card .fc-body { flex: 1; min-width: 0; }
.focus-card .fc-top { display: flex; align-items: baseline; gap: 8px; }
.focus-card .fc-top b { font-size: 17px; font-weight: 800; color: var(--ink); }
.focus-card .fc-val { margin-left: auto; font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.focus-card .fc-val small { font-size: 13px; color: var(--muted); font-weight: 600; }
.focus-card .fc-read { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; text-wrap: pretty; }
.focus-card .fc-chev { color: var(--muted); flex-shrink: 0; }
.focus-card .fc-chev .ic { width: 22px; height: 22px; }
/* ③ 其他都很穩：一張安靜清單（成組、不是搶戲的方格）*/
.calm-block { background: #FFF; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.calm-title { font-size: 14px; color: var(--muted); font-weight: 600; padding: 12px 0 4px; }
.calm-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 0; cursor: pointer; background: none; border: none; border-top: 1px solid var(--line); font-family: var(--sans); }
.calm-row:first-of-type { border-top: none; }
.calm-row.open { background: var(--mint); border-radius: 12px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; border-top-color: transparent; }
.calm-row .cr-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--mint); color: var(--teal-d); }
.calm-row .cr-ico .ic { width: 19px; height: 19px; }
.calm-row .cr-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.calm-row .cr-val { margin-left: auto; font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--teal-dd); }
.calm-row .cr-val small { font-size: 12px; color: var(--muted); font-weight: 600; }
.calm-row .cr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-d); flex-shrink: 0; margin-left: 10px; }
.wallet-card { position: relative; overflow: hidden; background: var(--deep); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); color: #fff; margin-bottom: 12px; }
.wallet-card .wc-top { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); margin-bottom: 10px; }
.wallet-card .wc-top .ic { width: 18px; height: 18px; }
.wallet-card .wc-big { font-family: var(--display); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; margin-bottom: 8px; }
.wallet-card .wc-big span { font-size: 22px; font-weight: 800; color: #FFF; }
.wallet-card .wc-big small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); }
.wc-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); margin: 8px 0; overflow: hidden; }
.wc-track i { display: block; height: 100%; border-radius: 999px; background: var(--teal); transition: width .6s cubic-bezier(.4,0,.2,1); }
.wc-say { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.wc-face { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; overflow: hidden; }
.wc-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.wc-quote { font-size: 14px; color: rgba(255,255,255,.9); line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 40px; /* 兩行整行邊界保險：引擎若不認 line-clamp 也絕不裁半字 */ }
.observe-card { background: var(--surface); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.observe-card .oc-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; color: var(--teal-d); flex-shrink: 0; }
.observe-card .oc-text { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.observe-card .oc-text b { color: var(--ink); }
.report-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1.5px solid var(--teal); background: #fff; color: var(--teal-d); border-radius: var(--radius-sm); font-family: var(--display); font-weight: 700; font-size: 17px; cursor: pointer; }
/* ============ 家人頁 ============ */
.week-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.week-card .wk-head { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.week-card .wk-head .ic { color: var(--gold); }
.wk-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.wk-stat { flex: 1; background: var(--mint); border-radius: 16px; padding: 14px 8px; text-align: center; }
.wk-stat .wk-num { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--teal-dd); }
.wk-stat .wk-lbl { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.cheer-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border: none; background: var(--gold); color: #fff; border-radius: var(--radius-sm); font-family: var(--display); font-weight: 700; font-size: 17px; cursor: pointer; box-shadow: var(--shadow-sm); }
.cheer-btn.cheered { background: var(--mint); color: var(--teal-dd); box-shadow: none; }
.msg-card { background: var(--surface); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.msg-head .mh-av { width: 34px; height: 34px; border-radius: 50%; background: #F2D9C0; }
.msg-head .mh-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.msg-head .mh-time { font-size: 13px; color: var(--muted); margin-left: auto; }
.msg-body { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.fam-call-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1.5px solid var(--teal); background: #fff; color: var(--teal-d); border-radius: var(--radius-sm); font-family: var(--display); font-weight: 700; font-size: 17px; cursor: pointer; margin-top: 6px; }
/* ============ 設定頁 ============ */
.set-about { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.set-about .sa-icon { width: 58px; height: 58px; border-radius: 17px; flex-shrink: 0; box-shadow: 0 8px 18px -8px rgba(46,138,131,.6); }
.set-about .sa-name { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.set-about .sa-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.auth-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); }
.auth-card-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.auth-ico { width: 42px; height: 42px; border-radius: 13px; background: var(--mint); display: grid; place-items: center; color: var(--teal-d); flex-shrink: 0; }
.auth-copy { min-width: 0; }
.auth-title { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 17px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.auth-email { font-size: 13px; color: var(--teal-dd); font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 185px; }
.auth-email:empty { display: none; }
/* 頭像＋方案標籤直排（Edward 2026-07-31）：標籤講的是「這個人是什麼會員」，跟著人走才對。 */
.auth-id { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
/* 右欄只剩一顆按鍵之後改置中，卡片左右兩邊的重心才對得起來。 */
.auth-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; flex-shrink: 0; }
.auth-primary, .auth-secondary, .auth-dev-btn { border: none; font-family: var(--display); font-weight: 800; cursor: pointer; }
.auth-primary { min-width: 72px; height: 40px; border-radius: 13px; color: #fff; background: var(--btn-green); font-size: var(--fs-action-primary); font-weight: var(--fw-action-primary); }
/* 登出要跟登入一眼分得出來（Edward 2026-07-31）：登入是要人往前走的動作、給實心綠；
登出是離開，做成白底灰框的次要鍵——顏色不同之外，份量也不同，才不會誤按。 */
.auth-secondary { min-width: 72px; height: 40px; border-radius: 13px; color: var(--muted); background: #fff; border: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: var(--fs-action-primary); padding: 0 14px; }
/* 會員身份標籤（帳號卡 · FREE/PLUS/PRO · Edward 7/8） */
.mem-badge { font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; line-height: 1.4; flex-shrink: 0; }
.mem-badge.free { background: var(--mint); color: var(--teal-dd); }
.mem-badge.plus { background: var(--teal); color: #fff; }
.mem-badge.pro { background: var(--gold); color: #fff; }
.mem-badge.test { background: var(--coral-soft); color: var(--ink); }
.set-list { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-size: 17px; color: var(--ink); }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row.set-info { cursor: default; }
.set-row.set-info .sr-main small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.set-row .sr-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--mint); display: grid; place-items: center; color: var(--teal-d); flex-shrink: 0; }
.set-row .sr-arrow { margin-left: auto; color: var(--muted); font-size: 15px; flex-shrink: 0; white-space: nowrap; }
.set-row .sr-main { flex: 1; min-width: 0; font-weight: 700; }
.set-row .sr-main small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.notification-settings-modal { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.notification-setting-list { border-top: 1px solid var(--line); }
.notification-setting-row { min-height: 68px; display: flex; align-items: center; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.notification-setting-row > span { flex: 1; min-width: 0; }
.notification-setting-row b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); }
.notification-setting-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.notification-master-row { min-height: 76px; }
.notification-setting-heading { margin: 18px 2px 2px; color: var(--muted); font-size: 13px; font-weight: 700; }
.notification-switch { width: 50px; height: 30px; flex: 0 0 50px; position: relative; border: 0; border-radius: 999px; background: var(--line); padding: 0; cursor: pointer; transition: background .18s ease; }
.notification-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(20,35,32,.2); transition: transform .18s ease; }
.notification-switch.on { background: var(--teal); }
.notification-switch.on i { transform: translateX(20px); }
.notification-switch:disabled { opacity: .42; cursor: default; }
.notification-switch:focus-visible { outline: 3px solid rgba(58,168,160,.25); outline-offset: 2px; }
.notification-privacy-note { margin: 14px 2px 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
/* 通知中心全螢幕子頁（7/16 改版：不再彈窗，沿用 reader-page 版型） */
.notification-page-scroll { padding-top: 6px; }
.notification-page-sub { margin: 2px 2px 12px; color: var(--muted); font-size: 14.5px; }
.notification-safety-contacts { cursor: pointer; }
.notification-safety-contacts small { overflow-wrap: anywhere; }
.notification-setting-row > .notification-row-arrow { flex: 0 0 auto; color: var(--muted); font-size: 20px; line-height: 1; } /* 要贏過上面 > span 的 flex:1、箭頭才貼右邊 */
#safetyModal { z-index: 70; } /* 緊急聯絡人小窗要蓋在通知中心子頁（z-index 60）上面 */
.notification-test-action { width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid var(--teal-d); border-radius: 12px; background: transparent; color: var(--teal-dd); font-family: var(--display); font-size: 14px; font-weight: 700; cursor: pointer; }
.notification-save-state { min-height: 20px; margin-top: 8px; text-align: center; color: var(--teal-d); font-size: 12.5px; }
/* 這一行只有存好設定時才會出現字。沒字的時候原本仍佔 20px 高＋8px 間距＝
頁尾平白多出 28px 空白，看起來像版面沒收乾淨。沒字就整個收起來。 */
.notification-save-state:empty { min-height: 0; margin-top: 0; }
.provider-consent-card { margin-top: 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(58,168,160,.14); box-shadow: var(--shadow-sm); }
.provider-consent-card[data-consent="agreed"] { border-color: rgba(58,168,160,.28); background: #F5FBF8; }
.provider-consent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.provider-consent-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--teal-d); background: var(--mint); flex-shrink: 0; }
.provider-consent-ico .ic { width: 21px; height: 21px; }
.provider-consent-title { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 15px; }
.provider-consent-status { margin-top: 2px; font-size: 13px; color: var(--muted); font-weight: 600; }
.provider-consent-card[data-consent="agreed"] .provider-consent-status { color: var(--teal-d); }
.provider-consent-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.provider-consent-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.provider-consent-switch { width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; margin-top: 2px; transition: background .18s ease; }
.provider-consent-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,35,32,.18); transition: transform .18s ease; }
.provider-consent-toggle input:checked + .provider-consent-switch { background: var(--teal); }
.provider-consent-toggle input:checked + .provider-consent-switch::after { transform: translateX(18px); }
.provider-consent-toggle span:last-child, .provider-consent-card p { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.provider-consent-card p { margin-top: 10px; }
.provider-privacy-link { display: inline-flex; align-items: center; margin-top: 10px; color: var(--teal-d); font-family: var(--display); font-size: 13px; font-weight: 800; text-decoration: none; }
.companion-panel { background: #F3FAF7; border: 1px solid rgba(58,168,160,.14); border-radius: var(--radius-xl); padding: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.companion-live { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.companion-live-img { width: 78px; height: 78px; border-radius: var(--radius-xl); overflow: hidden; background: var(--mint); flex-shrink: 0; box-shadow: 0 10px 22px -13px rgba(46,138,131,.55); }
.companion-live-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.companion-live-copy { min-width: 0; }
.companion-live-kicker { display: block; font-size: 13px; font-weight: 700; color: var(--teal-d); margin-bottom: 2px; }
.companion-live-copy strong { display: block; font-family: var(--display); font-size: 20px; line-height: 1.1; color: var(--ink); }
.companion-live-copy small { display: block; font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.35; }
.companion-name-label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.companion-name-input { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; background: var(--cream-2); padding: 13px 14px; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); outline: none; }
.companion-name-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(58,168,160,.12); background: #fff; }
.companion-name-hint { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.avatar-pick { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 2px; margin-top: 4px; }
.avo { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 10px 46px 10px 10px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.avo .avi { flex-shrink: 0; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; background: var(--mint); }
.avo .avi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avo .avl { min-width: 0; line-height: 1.3; }
.avo .avl b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.avo .avl small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.avo::after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: #FFF; }
.avo.on { border-color: var(--teal); background: var(--mint); }
.avo.on::after { background: var(--teal-d); border-color: var(--teal-d); }
.avo.on::before { content: ""; position: absolute; right: 21px; top: 50%; transform: translate(0, -62%) rotate(45deg); width: 5px; height: 9px; border: solid #FFF; border-width: 0 2px 2px 0; z-index: 1; }
.hscroll-wrap:has(#avatarPick) .hscroll-more { display: none; }
.avo.on .avl b { color: var(--teal-d); }
.ai-dev-panel { margin-top: 16px; background: #17231F; color: #EAF4F0; border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.08); }
.ai-dev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.ai-dev-kicker { font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8FD4CC; margin-bottom: 2px; }
.ai-dev-head h2 { font-family: var(--display); font-size: 17px; line-height: 1.15; color: #fff; }
.ai-dev-refresh { border: 1px solid rgba(143,212,204,.35); background: rgba(143,212,204,.12); color: #BDECE6; border-radius: 12px; min-height: 36px; padding: 0 12px; font-family: var(--display); font-size: 13px; font-weight: 800; cursor: pointer; }
.ai-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ai-dev-metric { background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px; min-width: 0; }
.ai-dev-metric span, .ai-dev-row span { display: block; color: rgba(234,244,240,.68); font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.ai-dev-metric b, .ai-dev-row b { display: block; color: #fff; font-family: var(--display); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.ai-dev-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ai-dev-row span { margin-bottom: 0; }
.ai-dev-json { max-height: 190px; overflow: auto; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 11px; margin-top: 10px; font-size: 13px; line-height: 1.55; color: #D6E7E1; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ===== Apple Watch 連接卡（狀態頁） ===== */
.watch-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; background: #1A2723; border-radius: 22px; padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 13px; color: #fff; }
.watch-card .wch-ic { width: 48px; height: 48px; border-radius: 15px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; flex-shrink: 0; position: relative; }
.watch-card .wch-ic .ic { width: 26px; height: 26px; }
.watch-card .wch-body { flex: 1; position: relative; }
.watch-card .wch-title { font-family: var(--display); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.watch-card .wch-sync { font-size: 13px; font-weight: 600; color: #B6E0D8; background: rgba(58,168,160,.22); padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.watch-card .wch-sync .d { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.watch-card .wch-data { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 5px; display: flex; gap: 14px; }
.watch-card .wch-data span { display: inline-flex; align-items: center; gap: 5px; }
.watch-card .wch-data .ic { width: 14px; height: 14px; opacity: .8; }
/* 安全守護條（跌倒求救） */
.guard-strip { display: flex; align-items: center; gap: 13px; background: #F4F0E8; border: 1px solid rgba(58,168,160,.18); border-radius: 16px; padding: 13px 16px; margin-bottom: 16px; }
.guard-strip .gd-ic { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--teal-d); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.guard-strip .gd-text { flex: 1; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.guard-strip .gd-text b { color: var(--teal-dd); }
/* 數據來源小標 */
.st-src { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; }
.st-src .ic { width: 12px; height: 12px; }
/* ===== 家庭任務卡（家人頁 · 合作型） ===== */
.quest-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 16px 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.quest-empty { border: 1.5px dashed var(--line); border-radius: var(--radius-md); padding: 18px 16px; margin-bottom: 12px; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.7; }
/* 全家狀態還沒有家人時的空狀態（Edward 2026-07-29：功能都留著、這區空著就好）。
本來是塞一行小字進 .health-list 的白卡裡，跟上面「還沒有進行中的活動」的虛線框長得不一樣，
兩個空狀態並排時很不搭；改成同一套虛線框，並把白卡外觀讓掉。 */
.health-list.is-empty { background: none; box-shadow: none; }
.health-list .fam-empty { border: 1.5px dashed var(--line); border-radius: var(--radius-md);
padding: 18px 16px; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.7; }
/* 發起人刪除鈕：卡片底部低調膠囊；點一下進「確認」紅色態、再點才刪（防誤刪）*/
.qc-del { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, border-color .15s; }
.qc-del .ic { width: 15px; height: 15px; }
.qc-del:active { background: rgba(31,45,41,.05); }
.qc-del.arm { background: var(--coral-soft); color: var(--danger-d); border-color: transparent; }
/* 活動詳情頁 */
#actDetailBody .ad-kind { font-size: 13px; font-weight: 700; color: var(--teal-dd); letter-spacing: .05em; }
#actDetailBody .ad-title { font-family: var(--display); font-size: 23px; font-weight: 800; color: var(--ink); margin: 4px 0 10px; line-height: 1.25; }
#actDetailBody .ad-chip { display: inline-block; background: var(--mint); color: var(--teal-dd); font-size: 13px; font-weight: 700; padding: 5px 13px; border-radius: 999px; }
#actDetailBody .ad-sec { margin-top: 22px; }
#actDetailBody .ad-lbl { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
#actDetailBody .ad-avs { display: flex; gap: 9px; flex-wrap: wrap; }
#actDetailBody .ad-avs .init-ava { width: 46px; height: 46px; font-size: 16px; border-radius: 50%; background-size: cover; background-position: center; }
/* 走路排行那排頭像原本是方的——.init-ava 的圓角是跟父層繼承的，這裡父層沒設就變方框 */
#actDetailBody .walk-p .init-ava { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; flex: 0 0 30px; }
/* 上下留 10px：皇冠是往徽章外面長的，行距要夠它站，而且每一行都一樣高才對得齊 */
#actDetailBody .walk-p { display: flex; align-items: center; gap: 10px; padding: 10px; position: relative; overflow: hidden; border-radius: 12px; }
/* 每個人佔全家的比例，畫成一條淡淡的底（跟投票同一套語言：條長就是佔比）。
數字看得懂的人看 %，看不懂的人也看得出誰那條比較長。 */
#actDetailBody .walk-p .wp-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #E7DECF; opacity: .72; border-radius: 12px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
#actDetailBody .walk-p > *:not(.wp-bar) { position: relative; }
#actDetailBody .walk-p .wp-pct { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 34px; text-align: right; }
#actDetailBody .walk-p.lead .wp-bar { background: #F0DCAE; opacity: .78; }
#actDetailBody .walk-p.lead .wp-pct { color: #A97A1C; }
#actDetailBody .walk-p b { flex: 1; font-weight: 700; font-size: 14.5px; color: var(--ink); }
#actDetailBody .walk-p span:last-child { font-weight: 700; font-size: 14.5px; color: var(--teal-dd); }
/* 名次（Edward 2026-08-01「一起運動這裡可以做個排名」）
第一名給金色實心、二三名給薄荷底，其餘只是淡淡的數字——這是家人一起走路，
不是排行榜比輸贏；名次要看得到，但不能讓走比較少的人覺得被公告。 */
/* 每一名的徽章尺寸一律相同——第一名放大一圈的話，後面整欄的頭像和名字就會跟它對不齊
（Edward 2026-08-01 一眼看出來）。冠軍靠皇冠和金色區分，不靠大小。 */
#actDetailBody .walk-p .walk-rank { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--muted); background: transparent; position: relative; }
/* 前三名做成獎牌（Edward 2026-08-01「名次徽章可以遊戲化一點」）：
金銀銅漸層＋一道內側亮邊當光澤＋往下的投影，小小一顆也看得出是立體的獎章。
第一名再大一圈並加一頂小皇冠——一眼就知道今天誰最會走。 */
#actDetailBody .walk-p .walk-rank.r1,
#actDetailBody .walk-p .walk-rank.r2,
#actDetailBody .walk-p .walk-rank.r3 { color: #fff; font-size: 13px; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
#actDetailBody .walk-p .walk-rank.r1 { background: linear-gradient(160deg, #F5D384 0%, #E0B354 46%, #BE8F2E 100%); box-shadow: 0 2px 6px rgba(190, 143, 46, .42), inset 0 1px 0 rgba(255, 255, 255, .6); }
#actDetailBody .walk-p .walk-rank.r2 { background: linear-gradient(160deg, #E4EAEE 0%, #C3CBD0 46%, #9BA6AE 100%); box-shadow: 0 2px 5px rgba(155, 166, 174, .38), inset 0 1px 0 rgba(255, 255, 255, .65); }
#actDetailBody .walk-p .walk-rank.r3 { background: linear-gradient(160deg, #E2A87C 0%, #C9855A 46%, #A2653F 100%); box-shadow: 0 2px 5px rgba(162, 101, 63, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
/* 冠軍的小皇冠：用邊框畫三個尖角，不必再載一張圖 */
#actDetailBody .walk-p .walk-rank.r1::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 13px; height: 8px; background: #E8A93C; clip-path: polygon(0 100%, 0 22%, 25% 62%, 50% 0, 75% 62%, 100% 22%, 100% 100%); }
#actDetailBody .walk-p .walk-rank.none { color: #C9CFCD; font-weight: 400; }
#actDetailBody .walk-p.lead b { color: var(--ink); }
#actDetailBody .walk-p.lead span:last-child { color: #A97A1C; }
#actDetailBody .walk-p.quiet b { color: var(--ink-2); }
#actDetailBody .walk-p.quiet span:last-child { color: var(--muted); font-weight: 600; font-size: 13.5px; }
#actDetailBody .ad-interact { margin-top: 20px; }
/* 活動詳情裡的說明文（步數怎麼來、誰要去…）以前完全沒有樣式，用瀏覽器預設的行高
擠成一團（Edward 2026-08-01「說明文字間距太窄」）。跟卡片上的說明同一階：
13.5px、行高 1.75，長輩讀長句才不會黏在一起。 */
#actDetailBody .qc-num, .quest-card .qc-num { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin-top: 10px; }
#actDetailBody .ad-note { background: var(--mint); border-radius: 16px; padding: 14px 16px; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
#actDetailBody .ad-rewards { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
/* 按鈕四階（2026-08-01 定，Edward 要一套規範）
* ① 主要動作 實心薄荷綠白字 例：開始聊聊、登入
* ② 次要動作 白底綠框綠字 例：去看看、訂閱方案
* ③ 中性離開 白底灰框灰字 例：登出
* ④ 破壞性 白底紅字淡紅框，按第一下才變實心淡紅底 例：刪除活動
* 破壞性刻意不用實心紅：那會在畫面上比「開始聊聊」還搶眼，長輩容易誤按。
* 但也不能像以前那樣做成灰的——刪除是回不來的動作，要看得出它跟別的鍵不一樣。
* 位置擺畫面最下方、置中：不跟上面的內容搶，要找的時候在固定的地方。 */
.ad-del { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 260px; margin: 30px auto 4px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid #F0CFC9; background: #fff; color: var(--danger-d); font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, border-color .15s; }
.ad-del .ic { width: 16px; height: 16px; }
.ad-del.arm { background: var(--coral-soft); color: var(--danger-d); border-color: transparent; }
/* 「不看這個活動」＝只收起自己的畫面，不是破壞性動作，所以走按鈕規範第③階的中性灰，
不借用刪除的紅色——紅色會讓人以為按下去大家的活動都沒了。 */
.ad-del.ad-hide { border-color: var(--line); color: var(--ink-2); }
.ad-del.ad-hide.arm { background: #EFEDE8; color: var(--ink); border-color: transparent; }
.quest-card .qc-kicker { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--teal-dd); margin-bottom: 6px; }
.quest-card .qc-kicker .ic { width: 16px; height: 16px; }
.quest-card .qc-goal { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.quest-card .qc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; position: relative; }
.quest-card .qc-members { display: flex; }
.quest-card .qc-mem { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--teal-d); overflow: hidden; margin-left: -10px; background: #cdd; }
.quest-card .qc-mem:first-child { margin-left: 0; }
.quest-card .qc-mem img { width: 100%; height: 100%; object-fit: cover; }
.quest-card .qc-cheer { font-size: 13px; opacity: .92; font-weight: 600; }
/* 互動回應列（按讚升級） */
.react-row { display: flex; gap: 9px; margin-top: 14px; }
.react-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px; border: none; background: var(--mint); border-radius: 16px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--teal-dd); transition: transform .15s, background .2s; }
.react-btn:active /* row hidden below */ { transform: scale(.92); }
.react-btn.sent { background: #D29F3E; color: #fff; }
/* 狀態頁數據來源輕量條（連接動作移到設定頁） */
.src-strip { display: flex; align-items: flex-start; gap: 12px; background: var(--mint); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 24px; }
.src-strip .ic { width: 18px; height: 18px; color: var(--teal-d); flex-shrink: 0; margin-top: 2px; }
.src-strip b { color: var(--ink); font-weight: 700; }
.src-strip .manage-link { display: inline-flex; align-items: center; gap: 2px; color: var(--teal-d); font-weight: 700; white-space: nowrap; }
.src-strip .manage-link .ic { width: 14px; height: 14px; margin: 0; }
/* 設定頁區塊小標 + 已連接狀態 */
.set-section { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--muted); margin: 22px 0 10px; letter-spacing: .02em; }
.set-row .sr-on { margin-left: auto; color: var(--teal-d); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.set-row .sr-on .d { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
/* ===== 家人頁：全家健康圈 ===== */
.fam-switch { display: flex; gap: 0; justify-content: flex-start; overflow-x: auto; overflow-y: visible; padding: 9px 0 10px; margin-bottom: 22px; scroll-snap-type: x proximity; scroll-padding-left: 20px; }
.fam-switch-item { scroll-snap-align: start; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 5px; /* 圈距視覺同 10px、縫隙整段可點（女巫熱區建議） */ cursor: pointer; background: none; border: none; font-family: var(--sans); }
.fam-switch-item .fs-av.all { display: grid; place-items: center; background: var(--btn-green); color: #FFF; box-shadow: none; }
.fam-switch-item .fs-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #FFF; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .15s; }
.fam-switch-item.active .fs-av { transform: scale(1.04); box-shadow: 0 0 0 2px #FFF, 0 0 0 4px var(--btn-green); }
.fam-switch-item.active .fs-name { color: var(--teal-dd); font-weight: 800; }
.fam-switch-item .fs-av img { width: 100%; height: 100%; object-fit: cover; }
.fam-switch-item .fs-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fam-switch-item.invite .fs-av.plus { background: #FFF; border: 1.5px dashed var(--teal-d); color: var(--teal-d); display: grid; place-items: center; box-shadow: none; }
.fam-view { display: none; }
.fam-view.active { display: block; animation: fade .3s ease; }
/* 全家健康一覽 */
.health-list { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px; }
.health-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background .2s; }
.health-row:active { background: var(--cream-2); }
.health-row + .health-row { border-top: 1px solid var(--line); }
.health-row .hr-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.health-row .hr-av img { width: 100%; height: 100%; object-fit: cover; }
.health-row .hr-info { flex: 1; }
.health-row .hr-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.health-row .hr-state { font-size: 14px; color: var(--muted); margin-top: 1px; }
.health-row .hr-lights { display: flex; gap: 6px; }
.health-row .hr-lights .lt { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--mint); color: var(--teal-d); }
.health-row .hr-lights .lt.warn { background: var(--coral-soft); color: var(--ink); }
.health-row .hr-lights .lt .ic { width: 14px; height: 14px; }
/* 個人健康（點某人後） */
.person-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.person-top .pt-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.person-top .pt-av .init-ava-lg { width: 40px; height: 40px; font-size: 17px; }
.person-top .pt-av img { width: 100%; height: 100%; object-fit: cover; }
.person-top .pt-name { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-top .pt-rel { font-size: 14.5px; color: var(--muted); }
.person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
/* 週月趨勢分析 */
.trend-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 16px; }
.trend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.trend-head h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.trend-tabs { display: flex; gap: 3px; background: var(--mint); border-radius: 10px; padding: 3px; }
.trend-tabs button { border: none; background: none; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--teal-dd); padding: 10px 16px; min-height: 40px; border-radius: 8px; cursor: pointer; }
.trend-tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.trend-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 96px; gap: 7px; }
.trend-bars .tb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.trend-bars .tb i { width: 100%; background: var(--mint-2); border-radius: 8px; min-height: 8px; }
.trend-bars .tb span { font-size: 13px; color: var(--muted); }
.trend-note { font-size: 14.5px; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.trend-note b { color: var(--teal-dd); }
/* 發起 / 記錄簿 入口 */
.chal-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-bottom: 20px; }
.chal-act { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border-radius: 14px; font-family: var(--display); font-weight: 700; font-size: 15px; cursor: pointer; }
.chal-act.new { background: var(--btn-green); color: #fff; border: none; }
.chal-act.book { background: #FFF; color: var(--teal-dd); border: 1.5px solid var(--teal-d); }
.chal-act .ic { width: 18px; height: 18px; }
/* 徽章牆 */
.badge-wall { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 16px; }
.badge { flex-shrink: 0; width: 78px; text-align: center; }
.badge .bd-medal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; margin: 0 auto 7px; background: #fff; box-shadow: var(--shadow-sm); }
.badge .bd-medal.locked { background: var(--cream-2); opacity: .45; }
.badge .bd-name { font-size: 13px; color: var(--ink-2); font-weight: 600; line-height: 1.3; }
/* 記錄簿 entry */
.book-entry { background: var(--surface); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.book-entry .be-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.book-entry .be-title { font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.book-entry .be-title .be-medal { font-size: 17px; }
.book-entry .be-date { font-size: 13px; color: var(--muted); }
.book-entry .be-foot { display: flex; align-items: center; justify-content: space-between; }
.book-entry .be-result { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--teal-d); }
.book-entry .be-result .ic { width: 15px; height: 15px; }
.book-entry .be-members { display: flex; }
.book-entry .be-mem { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; margin-left: -8px; }
.book-entry .be-mem:first-child { margin-left: 0; }
.book-entry .be-mem img { width: 100%; height: 100%; object-fit: cover; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--teal-d); font-family: var(--sans); font-weight: 600; font-size: 15px; cursor: pointer; margin-bottom: 14px; padding: 0; }
.back-btn .ic { width: 18px; height: 18px; }
/* 發起挑戰 彈出面板 */
.modal-mask { position: absolute; inset: 0; background: rgba(31,45,41,.5); backdrop-filter: blur(3px); z-index: 60; display: none; align-items: flex-end; overscroll-behavior: contain; }
.modal-mask.show { display: flex; }
.modal { position: relative; background: var(--cream); border-radius: 26px 26px 0 0; width: 100%; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); max-height: 88%; overflow-y: auto; overscroll-behavior: contain; animation: sheetUp .34s cubic-bezier(.22,.9,.32,1); }
/* 發起活動這種長表單：送出鈕貼底固定，捲動時永遠看得到、不被截（只此彈窗，避免短彈窗鈕蓋內容）*/
#chalModal .modal-btn { margin-top: 16px; } /* Edward 7/9：送出邀請跟著內容捲到最底、不釘在畫面上 */
.modal > .auth-close { z-index: 6; }
@keyframes slideup { from { transform: translateY(100%) } to { transform: none } }
.modal-grab { position: sticky; top: 0; z-index: 5; display: block; width: calc(100% + 40px); height: 28px; margin: 0 -20px 12px; background: var(--cream); border-radius: 26px 26px 0 0; }
.modal-grab::after { content: ""; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 999px; background: var(--line); }
.modal h2 { font-family: var(--display); font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.modal .modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.auth-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.auth-close { width: 38px; height: 38px; border-radius: 13px; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.auth-provider-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 14px; }
/* 兩顆登入鍵上下疊著，圖示與文字必須各自對齊成一直線。
原本是整組置中＋兩個圖示大小不同（Apple 16x20 / Google 21x21），
加上「Apple」「Google」字寬本來就不一樣，置中的結果是兩顆的圖示與文字都各歪各的
（實測圖示左緣差 6.9px）。改成圖示釘在固定位置、文字維持置中，兩顆就一定對得上。 */
.auth-provider { position: relative; width: 100%; min-height: 52px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0 46px; cursor: pointer; }
/* 兩個圖示共用同一個方框，Apple 商標靠 viewBox 自己置中、不會被拉變形（送審規定不可變形） */
.auth-provider .ic,
.auth-provider .apple-mark { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; display: block; flex-shrink: 0; }
.auth-provider .apple-mark { fill: currentColor; stroke: none; }
.auth-dev-btn { width: 100%; margin-top: 10px; min-height: 46px; border-radius: 15px; background: var(--coral-soft); color: var(--ink); font-size: 15px; }
.auth-message { min-height: 20px; font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.4; }
.auth-message.is-error { color: var(--danger); font-weight: 700; }
.auth-message.is-ok { color: var(--teal-dd); font-weight: 700; }
.field-label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 22px 0 10px; }
.chal-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding-bottom: 4px; }
.chal-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.chal-type.active { border-color: var(--teal); background: var(--mint); }
.chal-type .ic { width: 22px; height: 22px; color: var(--teal-d); }
.invite-list { display: flex; flex-direction: column; gap: 8px; }
.invite-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; border-radius: 14px; cursor: pointer; border: 1.5px solid transparent; }
.invite-item.on { border-color: var(--teal); background: var(--mint); }
.invite-item .iv-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.invite-item .iv-av img { width: 100%; height: 100%; object-fit: cover; }
.invite-item .iv-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--ink); }
.invite-item .iv-sub { font-size: 13px; color: var(--muted); }
.invite-item .iv-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; flex-shrink: 0; }
.invite-item.on .iv-check { background: var(--teal); border-color: var(--teal); color: #fff; }
.invite-item .iv-check .ic { width: 14px; height: 14px; }
.goal-box { background: var(--mint); border-radius: 14px; padding: 14px 16px; margin: 18px 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.goal-box b { color: var(--teal-dd); font-family: var(--display); }
.modal-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); background: var(--btn-green); color: #fff; font-family: var(--display); font-weight: var(--fw-action-primary); font-size: var(--fs-action-primary); cursor: pointer; }
/* 破壞性動作（女巫 Gate 2 · 2026-07-24）：刪除類按鈕不得與確認鈕同為實心綠。
平時＝白底深紅描邊；按第一下進入「再按一次確認」武裝態＝實心深紅白字。 */
.modal-btn.danger { background: var(--surface); color: var(--danger-d); border: 1.5px solid var(--danger-d); }
.modal-btn.danger[data-arm="1"] { background: var(--danger-d); color: #fff; }
.modal-btn.danger:disabled { opacity: .55; }
/* 意見回饋附圖：選圖鈕（描邊、跟全 App 同一套線條質感）*/
.fb-photo-add { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 100px; background: #fff; color: var(--ink2); font-size: 15px; font-weight: 700; cursor: pointer; }
.fb-photo-add:active { background: var(--mint); }
/* ===== 聊聊：日常語音陪聊（暖色，跟視訊分開） ===== */
.chat-screen { background: var(--mint); } /* 聊聊頁＝單一薄荷綠底（Edward 6/27：薄荷綠當其他畫面底色、跟米黃區隔；亦無漸層） */
/* 連接裝置引導（狀態頁 → 串接三方裝置）· Edward 6/27 */
.cn-back { background: none; border: none; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 15px; cursor: pointer; padding: 8px 0; display: inline-flex; align-items: center; gap: 5px; }
.cn-back .ic { width: 18px; height: 18px; }
.cn-intro { display: flex; gap: 13px; align-items: flex-start; background: #FBF8F2; border: 1px solid rgba(58,168,160,.16); border-radius: var(--radius-sm); padding: 15px 16px; margin-bottom: 18px; }
.cn-intro .ic { width: 26px; height: 26px; color: var(--teal-d); flex-shrink: 0; margin-top: 1px; }
.cn-intro p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cn-intro b { font-family: var(--display); color: var(--ink); }
.cn-row { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; margin-bottom: 11px; }
.cn-row .cn-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--mint); display: grid; place-items: center; color: var(--teal-d); flex-shrink: 0; }
.cn-row .cn-ico .ic { width: 24px; height: 24px; }
/* min-width:0 讓左邊文字可以縮：沒有這行時，文字撐住不讓，右邊按鍵就被擠出整列外面
（「去健康 App 開項目」這種比較長的按鍵文字實測會超出 12px）。 */
.cn-row .cn-mid { flex: 1; min-width: 0; }
.cn-row .cn-name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.cn-row .cn-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cn-row .cn-btn { font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--teal-d); border: none; border-radius: 999px; padding: 9px 17px; cursor: pointer; flex-shrink: 0; }
/* English and Spanish expand sharply at the App XL font setting. Keep the
description readable instead of squeezing it between the icon and CTA. */
html[lang="en"] #connect .cn-row,
html[lang="es"] #connect .cn-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: start;
}
html[lang="en"] #connect .cn-row .cn-btn,
html[lang="es"] #connect .cn-row .cn-btn {
grid-column: 2;
justify-self: start;
margin-top: 7px;
}
.cn-row .cn-btn.done { background: var(--mint); color: var(--teal-dd); }
.cn-row .cn-btn.disconnect { background: var(--surface); color: var(--danger-d); border: 1px solid rgba(176,57,45,.4); }
.cn-row .cn-btn.disconnect.arm { background: rgba(194,75,68,.1); }
.cn-health-help { margin: 0 4px 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
/* 讀取實況（幾點讀的、讀到哪幾項／失敗原因）——讓人能確定到底讀到了沒 */
.cn-health-read { margin: -10px 4px 18px; color: var(--teal-dd); font-size: 12.5px; line-height: 1.5; }
.cn-health-read[hidden] { display: none; }
/* 「接下來點這幾下」——蘋果不給直達的路，只能把路寫清楚（Strava／MyFitnessPal 同樣做法） */
.cn-health-steps { margin: -6px 4px 18px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cn-health-steps[hidden] { display: none; }
.chs-title { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--ink); }
.chs-list { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; line-height: 1.75; }
.chs-list li::marker { color: var(--teal-dd); font-weight: 800; }
.chs-alt { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.sr-on.off { color: var(--muted); }
.sr-on.off .d { background: var(--muted); }
.cn-note { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px; margin-top: 18px; }
.cn-note .ic { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; }
.cn-note p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cn-note b { font-family: var(--display); color: var(--ink); }
.cn-privacy { font-size: 13px; color: var(--muted); text-align: center; margin-top: 16px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.cn-privacy .ic { width: 14px; height: 14px; }
.src-strip .sr-chev { margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; }
.chat-inner { min-height: calc(100vh - 44px); display: flex; flex-direction: column; align-items: center; padding: 16px 24px 36px; }
.chat-butler { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin: 26px 0 10px; box-shadow: 0 20px 44px -18px rgba(46,138,131,.5); border: 4px solid #fff; }
.chat-butler img { width: 100%; height: 100%; object-fit: cover; }
.chat-name { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); }
.chat-status { font-size: 15px; color: var(--teal-d); margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chat-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: live 1.8s infinite; }
.chat-caption { flex: 1; display: flex; align-items: center; text-align: center; font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 1.6; color: var(--ink); padding: 28px 6px; min-height: 130px; }
.chat-controls { display: flex; align-items: center; gap: 30px; }
.chat-mic { width: 86px; height: 86px; border-radius: 50%; background: var(--teal-d); display: grid; place-items: center; border: none; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(58,168,160,.28); transition: transform .12s; }
.chat-mic:active { transform: scale(.95); }
.chat-mic .ic { width: 38px; height: 38px; color: #fff; }
.chat-mic.recording { background: var(--coral-d); animation: rec 1.1s infinite; }
.chat-end { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: none; cursor: pointer; box-shadow: var(--shadow-sm); color: var(--danger); }
.chat-end .ic { width: 26px; height: 26px; }
.chat-hint { font-size: 17px; color: var(--ink-2); margin-top: 16px; }
/* ============================================================
§6 單一全屏管家臉（S2S 視訊聊天感）
臉全屏主體 / 狀態提示 / 超大結束鈕固定，不把逐字稿當主畫面
============================================================ */
/* 底色改跟場景同色系（2026-07-16 治「第一通黑閃」）：iPhone 首通冷開機建影像圖層時偶爾會露出頁底色一格，
近黑色看起來就是「黑色閃頻」；改暖底色後就算露出也不刺眼。上層立繪／照片都是不透明、平常看不到這層。 */
.face-screen { position: relative; background: #C9AE96; overflow: hidden; }
.face-screen.active { display: block; }
.screen.face-screen { padding-bottom: 0; }
/* 全屏臉：鋪滿、置中偏上像視訊（臉在上中段、object-position 偏上不切臉） */
.face-bg {
position: absolute; inset: 0; z-index: 0;
background: #C9AE96; /* 取照片背景同色系：等比留白處無縫貼合 */
}
.face-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
opacity: 1; transition: opacity .55s ease;
/* Edward 2026-07-06：圖片不要有動態——保持完全靜止（呼吸縮放已移除） */
}
/* 開通話（Ditto 真臉上場）：靜態照淡出藏起來——只留 Ditto 一層、不再有靜態照在底下穿幫疊圖（Edward 2026-07-10） */
/* ⚠ 2026-07-11 抓到墨綠遮罩真兇：這條原本 `img` 通吃、把 FlashHead 全身立繪(.fh-bg)也設成透明→
通話時立繪不見、露出深綠底＝Edward 幾版都在抱怨的「上下墨綠遮罩」。排除 .fh-bg（立繪必須一直亮）。 */
.face-bg.livevid img:not(.fh-bg) { opacity: 0; }
.face-bg .fh-frame .fh-bg { opacity: 1 !important; } /* 全身立繪永遠不透明（它就是背景本人） */
/* 雲端擬真臉：跟照片同位置同裁切；有真影格才淡入蓋上（照片→活影像無縫） */
.face-bg video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center top; display: block;
opacity: 0; transition: opacity .55s ease; z-index: 1;
}
.face-bg.livevid video { opacity: 1; }
/* 撥號準備中以可互動的沐沐接住等待時間；只有 connecting 狀態收手勢。 */
/* Edward 2026-07-06：圖片不要有動態——關閉眨眼佔位效果 */
.face-blink { display: none; }
/* ===== FlashHead 全身合成（2026-07-11 · 先鋒判斷框/羽化參數 1:1 移植自 flashhead-live-test.html）=====
9:16 定比框置中（窄螢幕滿寬、上下留邊）；全身立繪墊底；512 活臉塞進判斷框、四邊羽化融進立繪 */
.fh-frame {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 100%; height: 100%; aspect-ratio: 1080 / 1920;
/* 底色跟 .face-bg 同色系（2026-07-16 治「第一通黑閃」）：立繪萬一還沒畫上來，露出的是暖底色、不是近黑 */
overflow: hidden; background: #C9AE96; z-index: 1;
}
.fh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 活臉與伺服器條件圖使用同一個 1080x1080 正方形框；只做等比例縮放。
單一垂直遮罩避免四邊交叉形成橢圓疊影，左右像素直接與同源背景對齊。
2026-08-12 淡出帶 82%→92%（Edward 1.0.66/67 實機「領口有重疊影像」）：
兩個角色的領口都落在方框高度的 90~91%（量的是立繪像素：a05 膚色→上衣邊界在
y≈1170、a06 白領→深毛衣在 y≈1180），82% 起淡出＝領口區一半是會動的活臉、
一半是不動的底圖，模型動作一大（原生 512 後動作變活潑）兩層領口就同時可見。
把淡出往下移到 92% 起＝領口完全由活臉畫（只剩一層、跟著動），淡出帶只跨過
素色衣料（動的布疊靜的布、低對比看不出來）。 */
.fh-overlay {
position: absolute; left: 0; top: 9.895833%; width: 100%; height: auto; aspect-ratio: 1 / 1;
overflow: hidden; opacity: 0; transition: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 92%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 92%, transparent 100%);
}
.face-bg.livevid .fh-overlay { opacity: 1; }
.fh-overlay video {
position: static !important; width: 100% !important; height: 100% !important;
object-fit: cover !important; opacity: 1 !important; transition: none !important;
}
/* ===== 聊聊人物層（2026-07-16 03:01 Edward 拍板：通話中「照片式呼吸」退役）=====
起伏動畫整組拿掉——通話中的自然律動（眨眼、頭肩微動）改由顯卡引擎接手：
engine core 的 idle feed 在真靜音超過 1 秒時自動餵靜音讓模型持續生成、
真聲音一來立刻讓位（deploy/runpod-avatar/flashhead_engine_core.py）。
分層結構與去背素材保留備用（1.0.23 已隨包出貨、拿掉不省空間、留著可逆）。 */
.fh-person { position: absolute; inset: 0; }
.fh-person-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-mouth { position: absolute; left: 50%; top: 50%; z-index: 2; display: none;
width: 58px; height: 24px; transform: translate(-50%, -50%);
pointer-events: none; filter: drop-shadow(0 5px 10px rgba(0,0,0,.22)); }
.avatar-mouth span { display: block; width: 100%; height: 100%; border-radius: 999px;
background: #4B2C35; border: 3px solid rgba(255,255,255,.76);
transform-origin: center; transition: transform .08s ease, border-radius .08s ease, height .08s ease, width .08s ease; }
.face-screen[data-avatar-mode="2d-viseme"] .avatar-mouth { display: none; }
.face-screen[data-avatar-viseme="rest"] .avatar-mouth span { transform: scaleX(.72) scaleY(.28); }
.face-screen[data-avatar-viseme="open"] .avatar-mouth span { transform: scaleX(.72) scaleY(1.18); border-radius: 46%; }
.face-screen[data-avatar-viseme="wide"] .avatar-mouth span { transform: scaleX(1.18) scaleY(.45); }
.face-screen[data-avatar-viseme="round"] .avatar-mouth span { transform: scaleX(.62) scaleY(.92); border-radius: 50%; }
.face-screen[data-avatar-viseme="smile"] .avatar-mouth span { transform: scaleX(1.05) scaleY(.26); border-radius: 999px 999px 40% 40%; }
.face-screen .status-bar { position: relative; z-index: 5; }
/* 左上 角色名牌 */
/* 上排＝乾淨的視訊通話樣式：不用深色膠囊底，改頂部淡壓深＋白字陰影，名字靠左跟計時點數同一列對齊 */
/* Edward 2026-07-11 拍板：通話畫面＝照片乾乾淨淨鋪滿全螢幕、不要上下漸層紗蓋畫面——
頂部壓深整片拿掉，名字/計時的可讀性交給各自的文字陰影（本來就有）。 */
.face-topscrim { position: absolute; top: 0; left: 0; right: 0; height: 124px; z-index: 5; pointer-events: none;
background: none; }
.face-name { position: absolute; left: 20px; top: calc(env(safe-area-inset-top, 0px) + 18px); z-index: 6;
display: inline-flex; align-items: center; gap: 8px;
color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px;
text-shadow: 0 1px 7px rgba(0,0,0,.5); }
.face-name .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ED6C4; box-shadow: 0 0 0 0 rgba(78,214,196,.6); animation: live 1.9s infinite; }
.face-name.off .dot { background: #9aa4a0; animation: none; box-shadow: none; }
.avatar-diagnostics { position: absolute; right: 18px; top: 52px; z-index: 6;
max-width: calc(100% - 160px); padding: 7px 11px; border-radius: 999px;
background: rgba(0,0,0,.34); color: rgba(255,255,255,.82);
border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== 狀態指示層（依 data-state 顯示其一）===== */
/* 波頻／狀態點：移到畫面下方、靠近控制列（不擋臉、不佔中央），字幕在它上方往上長、永不重疊 */
.face-cue { position: absolute; left: 0; right: 0; z-index: 6; bottom: calc(176px + env(safe-area-inset-bottom));
display: flex; justify-content: center; pointer-events: none; min-height: 26px; }
.face-cue .cue { display: none; align-items: center; gap: 6px;
background: rgba(8,18,15,.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 15px; }
/* 聆聽：柔和收音光點（呼吸放大） */
.cue-listen span { width: 9px; height: 9px; border-radius: 50%; background: #4ED6C4; opacity: .55; animation: cueListen 1.3s ease-in-out infinite; }
.cue-listen span:nth-child(2){ animation-delay: .18s; } .cue-listen span:nth-child(3){ animation-delay: .36s; }
@keyframes cueListen { 0%,100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1.25); opacity: 1; } }
/* 思考：三點律動（她在想、不是空轉圈） */
.cue-think i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; animation: cueThink 1.1s ease-in-out infinite; }
.cue-think i:nth-child(2){ animation-delay: .16s; } .cue-think i:nth-child(3){ animation-delay: .32s; }
@keyframes cueThink { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-5px); opacity: 1; } }
/* 說話：聲波（跟著語音感） */
.cue-speak b { display: block; width: 4px; height: 8px; border-radius: 2px; background: #4ED6C4; animation: cueSpeak .9s ease-in-out infinite; }
.cue-speak b:nth-child(1){ animation-delay: 0s; } .cue-speak b:nth-child(2){ animation-delay: .12s; } .cue-speak b:nth-child(3){ animation-delay: .24s; } .cue-speak b:nth-child(4){ animation-delay: .36s; } .cue-speak b:nth-child(5){ animation-delay: .48s; }
@keyframes cueSpeak { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(2.4); } }
/* 通話一開始（撥通中）就顯示，一路留到掛斷——接通後畫面不該是空的（Edward 2026-08-10）。
撥通中／她在說話時它是靜止的一排小點，只有長輩開口才起波。 */
.face-screen[data-state="connecting"] .face-wave,
.face-screen[data-state="listening"] .face-wave,
.face-screen[data-state="speaking"] .face-wave { display: inline-flex; }
.face-screen[data-state="thinking"] .cue-think { display: inline-flex; }
/* 待命態：不顯 cue（臉靜靜呼吸眨眼即可）*/
/* 收音波紋「點線」（2026-08-10 Edward 從三款提案挑的 C）：細長條配一排小點，畫在 canvas 上。
不放任何底色——墊底的暗影由 canvas 貼著形狀畫（見 app.js _paint），
底色會在臉上留一塊灰霧（8/10 合成實測）。 */
.face-cue .cue.face-wave {
background: none !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
padding: 0 !important; gap: 0 !important; }
.face-wave canvas { display: block; width: 236px; height: 46px; }
/* Edward 2026-07-06：圖片不要有動態——移除說話時的臉部微動（改由下方聲波動態表達「在說」） */
/* ===== S2S 狀態提示：不是字幕/文字稿，只告訴使用者現在是否在聽 ===== */
.face-caption { position: absolute; left: 50%; bottom: 142px; z-index: 6;
transform: translateX(-50%);
width: max-content; max-width: calc(100% - 48px);
background: rgba(8,18,15,.58); backdrop-filter: blur(14px);
color: rgba(255,255,255,.92); font-family: var(--sans); font-weight: 700;
font-size: 17px; line-height: 1.35; text-align: center;
padding: 10px 15px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 14px 30px -18px rgba(0,0,0,.62);
transition: opacity .2s ease, transform .2s ease; }
.face-screen[data-state="speaking"] .face-caption {
opacity: 0;
transform: translateX(-50%) translateY(8px);
pointer-events: none;
}
/* ===== 底部操作列：超大結束鈕（固定）＋ 麥克風 ===== */
.face-bar { position: absolute; left: 0; right: 0; bottom: calc(98px + env(safe-area-inset-bottom)); z-index: 7;
display: flex; align-items: center; justify-content: center; gap: 22px;
padding: 12px 24px; }
.face-mic { width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0;
background: var(--teal-d);
display: grid; place-items: center; border: 3px solid rgba(255,255,255,.85); cursor: pointer;
box-shadow: 0 16px 34px -10px rgba(58,168,160,.8); transition: transform .12s; }
.face-mic:active { transform: scale(.94); }
.face-mic .ic { width: 34px; height: 34px; color: #fff; }
.face-mic.recording { background: var(--coral-d); animation: rec 1.1s infinite; }
@keyframes rec { 0%,100% { box-shadow: 0 0 0 0 rgba(217,136,65,.6); } 50% { box-shadow: 0 0 0 14px rgba(217,136,65,0); } }
/* 超大結束鈕：寬、字 ≥ 20px、紅、好點、容錯 */
.face-end { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
min-height: 66px; padding: 0 30px; border-radius: 999px; border: none; cursor: pointer;
background: var(--danger); color: #fff;
font-family: var(--display); font-weight: 700; font-size: 20px;
box-shadow: 0 14px 30px -10px rgba(229,91,77,.7); transition: transform .12s; }
.face-end:active { transform: scale(.96); }
.face-end .ic { width: 26px; height: 26px; color: #fff; }
/* 全屏臉時隱藏底部分頁（沉浸、像通話中）—— showView 已加 .hidden，這裡兜底 */
/* 搖籃式 navbar（V1 定案 · Claude Design 精修交接檔 · SVG 凹槽包住聊聊鈕、原色票內） */
.tab-bar {
position: absolute;
left: 24px; /* 對齊內容 .pad 的 24px 左右留白 */
right: 24px;
bottom: max(4px, calc(env(safe-area-inset-bottom) - 12px)); /* Edward 7/7：再往下貼近 Home 橫桿（保留 4px 底線防壓到）*/
z-index: 20;
display: flex;
align-items: flex-end;
height: 94px; /* Edward 7/7：整體放大 */
padding: 0 18px; /* 條變窄了、內縮收一點讓五格不擠 */
}
.tab-bar.hidden { display: none; }
/* 聊聊＝沉浸式：收起底部導覽列，底部中央改由 X（.face-exit）關閉回首頁 */
body:has(#chat.active) .tab-bar { display: none; }
.navbg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
fill: var(--ink);
filter: drop-shadow(0 14px 26px rgba(0,0,0,.3));
}
.tab-btn {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
border: none;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
padding: 0 0 15px;
color: var(--cream);
cursor: pointer;
touch-action: manipulation; /* Edward 7/7：iOS 觸控更靈敏 */
transition: color .15s ease;
}
.tab-btn .ic { width: 24px; height: 24px; stroke-width: 1.7; }
.tab-btn > span { font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.tab-btn.active { color: var(--teal); }
.tab-btn.active > span { font-weight: 800; }
/* 中央「聊聊」：搖籃內的薄荷綠鈕（絕對定位、無陰影），文字標籤留在底部 */
/* position:static → 讓下方的聊聊鈕改以整條 navbar 為定位基準（不是這顆短鈕），才會往上嵌進凹槽 */
/* align-self:stretch → 讓中央按鈕撐滿整欄高度、蓋住上方圓鈕的區域，真手機才點得到（Edward 7/7 修 bug）*/
.tab-btn.center { color: var(--cream); position: static; align-self: stretch; justify-content: flex-end; }
.tab-btn.center .center-fab {
position: absolute;
z-index: 2;
top: 17px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--teal);
display: grid;
place-items: center;
pointer-events: none; /* 點擊穿透到下方撐滿整欄的按鈕、確保可點 */
transition: transform .12s ease;
}
.tab-btn.center .center-fab .ic { width: 21px; height: 21px; stroke: #fff; stroke-width: 2.2; }
.tab-btn.center:active .center-fab { transform: translateX(-50%) scale(.93); }
.tab-btn.center.active .center-fab { background: var(--btn-green); }
/* 字首暖色頭像（取代素材照 · UIUX 重設計 2026-07-02） */
.init-ava { width: 100%; height: 100%; border-radius: inherit; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1; }
.p-ama { background: #D98841; color: #FFF; }
.p-mei { background: #3AA8A0; color: #FFF; }
.p-zhi { background: #36423E; color: #FFF; }
.p-bao { background: #B98A2E; color: #FFF; }
/* 家人多的時候不夠分（Edward 2026-08-01「顏色可以多元一點」）：原本只有四色＋本人色，
七個家人就會有兩個人撞色、看起來像同一個人。補三色湊滿八個，都對得起 teal／coral 的調子。 */
.p-lin { background: #8B5E7A; color: #FFF; }
.p-hai { background: #52738C; color: #FFF; }
.p-ye { background: #6E7F52; color: #FFF; }
.p-mo { background: #A85A47; color: #FFF; }
.init-ava-lg { font-size: 28px; border-radius: 50%; }
.re-ic { display: inline-flex; }
.re-ic .ic { width: 18px; height: 18px; color: var(--teal-dd); }
.re-ic.coral .ic { color: var(--coral-d); }
.bd-medal .ic, .be-medal .ic { width: 24px; height: 24px; color: var(--coral-d); }
.bd-medal.locked .ic { color: #B9C6C1; }
.be-medal .ic { width: 18px; height: 18px; }
/* ===== App 手感層（UX 貼近手機操作習性 · 2026-07-02） ===== */
/* 1) 藏捲軸：App 裡不該看到桌面灰捲軸 */
.app-shell *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.app-shell * { scrollbar-width: none; }
.screen { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* 2) 按壓回饋：所有可點的東西按下去要有感 */
button:active, .task-item:active, .health-row:active, .fam-switch-item:active,
.stat-tile:active, .react-btn:active /* row hidden below */, .chal-card:active, .invite-item:active,
.tab-btn:active, .set-row:active, .avo:active { transform: scale(.97); }
button, .task-item, .health-row, .fam-switch-item, .stat-tile, .react-btn,
.chal-card, .invite-item, .tab-btn, .set-row, .avo { transition: transform .12s ease; }
/* 3) UI 文字不可反白選取（內容文字不受影響） */
.tab-bar, .sec-head, button, .fam-switch-item, .trend-tabs, .bc-eyebrow, .bc-chip,
.task-time, .st-label, .bd-name { -webkit-user-select: none; user-select: none; }
/* 4) 橫向列滑動吸附（像原生輪播） */
/* 5) 個人頁頂部返回列（手機慣例：左上角返回） */
.pv-back { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px;
font-size: 15px; font-weight: 600; color: var(--teal-dd); background: none; border: none;
padding: 10px 14px 10px 6px; min-height: 44px; cursor: pointer; }
.pv-back .ic { width: 20px; height: 20px; }
/* 6) 視覺提示吐司（取代只用唸的回饋） */
.toast { position: absolute; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom));
margin: 0 auto; width: fit-content; max-width: min(320px, 86vw);
transform: translateY(16px); background: var(--ink); color: #FFF;
font-size: 15px; line-height: 1.55; padding: 13px 20px; border-radius: 18px;
text-align: center; opacity: 0; pointer-events: none;
text-wrap: pretty; word-break: normal; overflow-wrap: break-word;
transition: opacity .25s ease, transform .25s ease; z-index: 60; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateY(0); }
/* ===== 家庭挑戰 · 全家走在進度上（巧思層） ===== */
.qc-kicker .ic { width: 17px; height: 17px; color: var(--coral-d); }
.qc-kicker.night .ic { color: #5E7FB6; }
/* 右上角那顆日期／狀態標籤不可以折行（Edward 2026-08-01 指出）——
英文「Within 10 days」西文「12 preguntas」都會被擠成兩行、看起來像壞掉。
標籤短、優先給它空間；長的是左邊的標題，讓標題去折行才對。 */
.qc-days { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-size: 13px; color: var(--muted); font-weight: 600; background: var(--cream); border-radius: 100px; padding: 3px 10px; }
.quest-card .qc-kicker > :first-child { min-width: 0; }
.qc-track > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal); border-radius: 100px; }
/* 早睡挑戰：五個月亮點 */
.qc-moons { display: flex; gap: 10px; padding: 6px 4px 10px; }
.qc-moons span { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--line); position: relative; }
.qc-moons span.on { background: #E4EBF3; border-color: #B9C9DC; }
.qc-moons span.on::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #5E7FB6; }
/* ===== 全家狀態：心情小臉 ===== */
.hr-mood { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; margin-right: 5px; }
.hr-mood.m-happy { color: #C25716; }
.hr-mood.m-good { color: #9A6E14; }
.hr-mood.m-calm { color: #1E7169; }
.hr-mood.m-tired { color: #5F6A61; }
.hr-mood.m-sad { color: #3F5F80; }
.hr-mood.m-upset { color: #6E4488; }
/* ===== 記錄簿 · 故事書時間軸 ===== */
.book-month { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--teal-dd); margin: 4px 0 10px 4px; }
.book-timeline { position: relative; padding-left: 18px; }
.book-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.book-timeline .book-entry { position: relative; }
.book-timeline .book-entry::before { content: ""; position: absolute; left: -18px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); border: 2px solid #FFF; box-shadow: 0 0 0 1.5px var(--coral-soft); }
/* ===== 家人頁三視圖 · 滑頁切換（像原生 push） ===== */
.fam-view.active { animation: viewIn .26s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* ===== 寧寧呼吸感（首頁小生命） ===== */
/* 揪一攤（活動投票） */
.chal-input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 14px; font-family: var(--sans); font-size: 17px; color: var(--ink); margin-bottom: 4px; }
/* 看診已排清單：每筆標題＋日期時間＋刪除 */
.visit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.visit-item { display: flex; align-items: center; gap: 10px; background: var(--mint); border-radius: 14px; padding: 12px 14px; }
.vi-info { flex: 1; min-width: 0; }
.vi-info b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.vi-info span { font-size: 13px; color: var(--teal-dd); }
.vi-del { flex-shrink: 0; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
/* 每一筆就診直接看那次的摘要——樣式跟 .vi-del 同規格，只有顏色是主色（這是主要動作） */
.vi-sum { flex-shrink: 0; border: 1px solid var(--line); background: #fff; color: var(--teal-dd); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
/* 看診時間：精確時間選擇器（大字、長輩好按）*/
.visit-time { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; padding: 13px 16px; font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); -webkit-appearance: none; appearance: none; }
.visit-time::-webkit-date-and-time-value { text-align: left; }
.chal-input::placeholder { color: var(--muted); }
.qc-kicker.event .ic { color: var(--coral-d); }
.quest-card.done .qc-kicker, .quest-card.done .qc-kicker .ic { color: var(--muted); }
.qc-rsvp { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 10px; }
.qc-rsvp .rsvp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 100px; padding: 5px 12px 5px 5px; }
.qc-rsvp .rsvp .init-ava { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }
.qc-rsvp .yes { background: var(--mint); color: var(--teal-dd); }
.qc-rsvp .no { background: #F1EFE8; color: var(--muted); }
.qc-rsvp .wait { background: var(--coral-soft); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* 通話 HUD（時間/點數）＋常駐字幕框 */
.face-hud { position: absolute; right: 20px; top: calc(env(safe-area-inset-top, 0px) + 18px); z-index: 6; display: flex; flex-direction: row; gap: 16px; align-items: center; }
.hud-pill { display: inline-flex; align-items: center; gap: 6px; color: #FFF; font-family: var(--display); font-size: 16px; font-weight: 700; text-shadow: 0 1px 7px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.hud-pill .ic { width: 15px; height: 15px; }
.face-caption-box { position: absolute; left: 16px; right: 16px; bottom: calc(228px + env(safe-area-inset-bottom)); z-index: 6; max-height: 34vh; overflow-y: auto; background: rgba(8,18,15,.58); backdrop-filter: blur(14px); color: #FFF; border-radius: 18px; padding: 13px 16px; font-size: 16px; line-height: 1.6; text-align: center; }
.face-caption-box small { display: block; color: rgba(255,255,255,.62); font-size: 13px; margin-top: 3px; }
/* 舊單行字幕退役（由常駐字幕框取代、避免疊字） */
.face-screen .face-caption { display: none !important; }
/* 訂閱與點數（商業模式進 App） */
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.plan-row { display: flex; align-items: center; gap: 12px; }
.plan-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.plan-price { color: var(--teal-dd); font-weight: 600; font-size: 15px; margin-left: 4px; }
.plan-payer { font-size: 13px; color: var(--muted); margin-top: 3px; }
.plan-renewal { margin: 8px 0 0; color: var(--teal-d); font-size: 13px; font-weight: 700; line-height: 1.5; }
.plan-btn { border: none; background: var(--mint); color: var(--teal-dd); font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 16px; min-height: 48px; cursor: pointer; }
.plan-btn.ghost { border: 1px solid var(--teal-d); }
.plan-divider { height: 1px; background: var(--line); margin: 14px 0; }
.pts-label { font-size: 15px; color: var(--ink); }
.pts-label b { font-size: 20px; color: var(--teal-dd); }
.pts-used { font-size: 13px; color: var(--muted); margin-left: 6px; }
.pts-bar { height: 8px; background: var(--cream); border-radius: 100px; margin: 8px 0 6px; overflow: hidden; }
.pts-bar i { display: block; height: 100%; background: var(--coral); border-radius: 100px; }
.pts-note { font-size: 14px; color: var(--muted); line-height: 1.5; }
/* 橫向列「右邊還有」提示：右緣淡出＋小箭頭（捲到底自動消失） */
.hscroll-wrap { position: relative; }
.hscroll-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; background: linear-gradient(to left, var(--cream) 12%, transparent); pointer-events: none; }
.hscroll-wrap.at-end::after { opacity: 0; }
.hscroll-more { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); pointer-events: none; box-shadow: var(--shadow-sm); }
.hscroll-more .ic { width: 15px; height: 15px; }
.hscroll-wrap.at-end .hscroll-more { opacity: 0; }
.hscroll-more, .hscroll-wrap::after { transition: opacity .25s ease; }
/* 心情今天卡（個人頁只放今天；週/月在圖表頁） */
.mood-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.mc-head { display: flex; align-items: center; gap: 12px; }
.mc-face { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #FBE7D2; display: grid; place-items: center; flex-shrink: 0; }
.mc-face .ic { width: 30px; height: 30px; color: #C25716; }
.mc-dot { position: absolute; right: -1px; top: -1px; width: 13px; height: 13px; border-radius: 50%; background: #6E4488; border: 2.5px solid #FFF; display: none; }
.mc-face.mixed .mc-dot { display: block; }
.mc-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.mc-sub { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.mc-obs { font-size: 15px; color: var(--ink); margin: 12px 0 8px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-obs span { color: var(--muted); margin-right: 2px; }
.mc-topics i { display: inline-block; font-style: normal; background: var(--mint); color: var(--teal-dd); font-size: 14px; padding: 3px 12px; border-radius: 100px; margin: 0 6px 6px 0; }
.mc-more { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: none; border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 2px 2px; font-size: 15px; font-weight: 600; color: var(--teal-dd); cursor: pointer; min-height: 44px; }
.mc-more .ic { width: 16px; height: 16px; }
/* 心情趨勢頁 */
.mood-range { margin-bottom: 14px; display: inline-flex; }
.mood-week { display: flex; gap: 6px; margin-bottom: 14px; }
.mood-week .md { flex: 1; text-align: center; border: none; background: none; cursor: pointer; padding: 0; }
.mood-week .md .mcirc { position: relative; width: 100%; aspect-ratio: 1; max-width: 44px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; }
.mood-week .md .mcirc .ic { width: 22px; height: 22px; }
.mood-week .md.today .mcirc { outline: 2.5px solid var(--coral-d); outline-offset: 2px; }
.mood-week .md .mday { font-size: 13px; color: var(--muted); margin-top: 5px; }
.mood-week .md.today .mday { color: var(--ink); font-weight: 700; }
.mood-week .md .mixdot { position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: #6E4488; border: 2px solid #FFF; }
.mood-day-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; min-height: 60px; }
.mood-day-detail .dd-date { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.mood-day-detail .dd-row { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.mood-day-detail .dd-row .ic { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.mood-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 14px; }
.mood-month b { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; }
.mood-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 13px; color: var(--muted); }
.mood-legend i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 13px; margin-right: 4px; vertical-align: -6px; }
/* 首頁寧寧頭像：頭靠上緣（Edward 拍板） */
.bc-avatar img, .bc-avatar .ava-img { object-position: center 12% !important; } /* 跟選角色頭像同取景（Edward 7/9） */
/* 通話鈕：像電話——綠色開始、紅色結束 */
.call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
min-height: 58px; padding: 12px 22px; border: none; border-radius: 20px;
font-family: var(--sans); font-size: 18px; font-weight: 700; color: #FFF; cursor: pointer;
background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(31,60,52,.22), 0 0 0 0.5px rgba(0,0,0,.06); }
.call-btn .ic { width: 24px; height: 24px; }
.call-btn.start { background-color: var(--btn-green); }
.call-btn.start:active { transform: scale(.96); }
.call-btn.end { background-color: var(--danger); }
.call-btn.end .ic { transform: rotate(135deg); }
.call-btn.end:active { transform: scale(.96); }
/* 訂閱卡精緻版：價格不換行、按鈕整排 */
.plan-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-price { white-space: nowrap; color: var(--teal-dd); font-weight: 700; font-size: 20px; }
.plan-price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan-actions { display: flex; gap: 10px; margin-top: 14px; }
/* 訂閱卡底下的兩個次要入口：管理訂閱／恢復購買（Edward 2026-07-31 從訂閱方案頁搬來）。
第一版做成加底線的文字連結＋中間一個分隔點，Edward 看了說醜——確實：底線是網頁的語言，
跟這張卡上圓潤的膠囊按鈕不同調，中間那個點又多一個雜訊。
改成跟上面「訂閱方案／加值點數」同一套膠囊，只是把份量整個收下來：
底色比主按鈕更淡、字更小、圓角略小、不用邊框——一看就知道是次要，但仍是同一個家族。
觸控高度維持 44px（長輩手指不準，視覺份量低不等於難按）。 */
/* 這一排是次要動作（管理訂閱／恢復購買）。原本跟上面的主要動作一樣滿版、一樣高，
* 四顆看起來一樣重，眼睛不知道該先看哪個（Edward 2026-08-01：「按鈕欄位要設計好」）。
* 改成置中、寬度跟著字走、比上面矮一截也小一號——主次一眼分得出來，四語都適用。 */
/* 兩顆丸子按鈕：flex 預設會壓縮，字比按鈕寬時就滿出右邊，看起來像靠左
* （Edward 2026-08-01：「文字在欄位內置中，現在看都靠左了」）。
* 改成不壓縮、按鈕跟著字長，真的排不下就換行——字永遠在按鈕正中央。 */
.plan-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.plan-link { flex: 0 0 auto; min-width: 0; min-height: 38px; padding: 0 15px; border: none; border-radius: 11px;
background: var(--mint); color: var(--teal-d); cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 600; opacity: .8; white-space: nowrap; }
.plan-link:active { opacity: 1; }
.plan-actions .plan-btn { flex: 1 1 0; min-width: 0; white-space: normal; min-height: 48px; padding-inline: 12px; }
#topUpBtn.plan-btn { background: var(--btn-green); color: #fff; box-shadow: var(--shadow-sm); }
/* 沒有全身圖的角色（方形素材）：滿版聰明裁切、臉保持偏上 */
.face-bg img.sq { object-fit: cover; object-position: center 22%; }
/* 通話控制列：三鈕一列 */
.ctl-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
background: rgba(16,22,20,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.16); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 600; }
.ctl-btn .ic { width: 22px; height: 22px; color: #fff; }
.ctl-btn:active { transform: scale(.94); }
/* 字幕關：變暗＋斜線 */
#captionToggle.off { background: rgba(16,22,20,.3); }
#captionToggle.off .ic, #captionToggle.off span { opacity: .5; }
/* 麥克風 聽取中：薄荷光環（在聽） */
#chatMic.recording { background: rgba(58,168,160,.55); border-color: rgba(78,214,196,.6); box-shadow: 0 0 0 3px rgba(78,214,196,.4); }
/* 麥克風 靜音：通用紅＋斜線 */
#chatMic.off { background: #E5544A; border-color: rgba(255,255,255,.3); }
/* 關閉態的斜線（通用「關」符號） */
#chatMic.off::after, #captionToggle.off::after { content: ''; position: absolute; left: 50%; top: 42%; width: 34px; height: 2.5px; background: #fff; border-radius: 2px; transform: translate(-50%,-50%) rotate(-45deg); box-shadow: 0 0 0 1.5px rgba(0,0,0,.22); }
.call-btn.end { background-color: var(--danger); }
.call-btn.end .ic { transform: rotate(135deg); }
/* 子頁導覽頭（App 式返回：箭頭＋置中標題） */
.nav-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 48px; margin: 0 0 6px; }
/* 只有「全螢幕子頁」(reader-page：方案/條款) 才加頂部安全區，做成 App 標題列——
背景填到動態島下方、返回鍵＋標題壓在島下面才點得到。
螢幕內子頁(家人/心情/記錄簿)本身已在有安全區的 .screen 裡，不再疊一層。 */
.reader-page .nav-head { margin: 0;
padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px; background: var(--cream);
position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--line); }
/* 只有全屏 reader-page 才補安全區（避開動態島）；家人子頁在 .screen 內已有安全區，不再重複＝標題就置頂 */
.reader-page .nav-head { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
.nav-back { width: 44px; height: 44px; border: none; background: none; color: var(--teal-dd); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.nav-back .ic { width: 24px; height: 24px; stroke-width: 2; }
.nav-back:active { background: var(--mint); }
.nav-title { text-align: center; font-size: 17px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chal-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,168,160,.18); }
/* 提醒管理面板 */
.med-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.med-row b { font-size: 15px; color: var(--ink); display: block; }
.med-row span { font-size: 13px; color: var(--muted); }
.med-form-row { display: flex; gap: 8px; }
.med-back { position: absolute; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 8; background: rgba(255,255,255,.16); color: #FFF; }
/* 家人左右滑翻頁：方向滑入動畫＋頁點 */
.fam-view.slide-l { animation: slideInL .3s ease-out; }
.fam-view.slide-r { animation: slideInR .3s ease-out; }
@keyframes slideInL { from { opacity: .6; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes slideInR { from { opacity: .6; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.pager-dots { display: flex; justify-content: center; gap: 7px; margin: -2px 0 10px; }
.pager-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.pager-dots i.on { background: var(--teal-d); transform: scale(1.25); }
/* 出席看板：頭像狀態徽章（一眼懂誰能到） */
.rg-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; border: 2px solid #FFF; }
.rg-badge .ic { width: 10px; height: 10px; stroke-width: 3; }
.rg-badge.ok { background: var(--teal-d); color: #FFF; }
.rg-badge.nope { background: #B4B2A9; color: #FFF; }
.rg-badge.ask { background: var(--coral-d); color: #FFF; animation: askPulse 1.8s ease-in-out infinite; }
@keyframes askPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* 狀態頁用藥入口 */
.med-entry { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; background: #FFF; border: 1px solid var(--line); border-radius: 14px; min-height: 52px; padding: 0 16px; margin-bottom: 16px; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
.med-entry .ic { width: 20px; height: 20px; color: var(--teal-dd); flex-shrink: 0; }
.med-entry .chev { margin-left: auto; color: var(--muted); width: 17px; height: 17px; flex-shrink: 0; }
.med-entry b { color: var(--teal-d); font-weight: 700; }
.act-duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin: 0 0 24px; }
.med-entry.duo { min-height: 52px; padding: 0 14px; gap: 10px; margin-bottom: 0; }
.med-entry.duo .dz-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: var(--mint); color: var(--teal-d); display: grid; place-items: center; }
.med-entry.duo .dz-ico .ic { width: 17px; height: 17px; color: var(--teal-d); }
.med-entry.duo .dz-title { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.med-entry.duo .dz-tag { display: none; /* 375 寬放不下且屬值回聲（用藥磚已示 2/3）：門不重唸庫存 */ }
.med-entry.duo .dz-chev { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; margin-left: auto; }
/* 用藥設定 · 點選籤 */
.med-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2px; }
/* 「吃多久」五顆要排成一行不折行（Edward 2026-08-01）。等分五欄、最後一欄留寬一點
給「長期」——英文 Long term／西文 A largo plazo 比數字長，等分會擠爆。 */
.med-chips.fit-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.32fr); gap: 6px; flex-wrap: nowrap; }
.med-chips.fit-row .mchip { padding: 10px 2px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「提前多久提醒」也是五顆一行，但長字在中間不在最後——用等分五欄，
不要吃多久那排「最後一顆放寬」的比例。 */
.med-chips.fit-row.even { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 日文也要縮：「14日分」是兩個全形字＋數字，比中文的「14 天」寬，
用中文的字級會被切成「14…」（2026-08-01 正式機實拍才看見——加了省略號之後
元素寬度相等，靠比對寬度的檢查永遠不會報）。 */
html:lang(en) .med-chips.fit-row .mchip, html:lang(es) .med-chips.fit-row .mchip,
html:lang(ja) .med-chips.fit-row .mchip { font-size: 13px; letter-spacing: -.2px; }
.mchip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 100px; min-height: 44px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mchip.on { background: var(--teal-d); border-color: var(--teal-d); color: #FFF; }
.modal .modal-btn { margin-top: 24px; }
/* 走路挑戰卡：大數字 + 乾淨進度條 + 每人貢獻 */
.qc-hero { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 12px; }
.qc-hero b { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--ink); }
.qc-hero .qc-unit { font-size: 15px; font-weight: 600; color: var(--muted); }
.qc-hero .qc-badge { margin-left: auto; align-self: center; font-size: 15px; font-weight: 700; color: var(--teal-dd); background: var(--mint); border-radius: 100px; padding: 5px 13px; }
/* 活動狀態籤走品牌橘（2026-08-01）：整頁都是薄荷綠，狀態籤跟按鍵、進度條同色，
看不出它只是在說明狀態、不是可以按的東西。淡橘底＋深橘字，對比 4.66 過 AA。 */
#actDetailBody .ad-chip, .quest-card .qc-days { background: var(--coral-soft); color: var(--coral-text); }
.qc-bar { height: 12px; border-radius: 100px; background: var(--mint); overflow: hidden; }
.qc-bar i { display: block; height: 100%; border-radius: 100px; background: var(--teal-d); }
.qc-crew { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.qc-person { display: inline-flex; align-items: center; gap: 7px; background: var(--cream); border-radius: 100px; padding: 5px 13px 5px 5px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.qc-person .init-ava { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }
.qc-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
/* 發起活動：拉桿（flat） */
.range-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.range-row input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 100px; outline: none; border: 1px solid var(--line); background: linear-gradient(90deg, var(--btn-green) var(--fill, 50%), var(--mint-2) var(--fill, 50%)); }
.range-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #FFF; border: 3px solid var(--btn-green); box-shadow: 0 2px 6px rgba(31,60,52,.2); cursor: pointer; transition: transform .12s; }
.range-row input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.range-row input[type=range]:focus-visible { outline: 3px solid rgba(58,168,160,.22); outline-offset: 8px; }
.range-row input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #FFF; border: 2.5px solid var(--teal-d); cursor: pointer; }
.range-row b { font-family: var(--display); font-size: 17px; color: var(--teal-dd); min-width: 86px; text-align: right; }
/* 機智問答結果：排行榜 */
.rank-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.rank-row { display: flex; align-items: center; gap: 10px; background: var(--cream); border-radius: 14px; padding: 9px 14px 9px 10px; }
.rank-row b { font-size: 15px; color: var(--ink); font-weight: 700; }
.rank-no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #FFF; background: var(--muted); flex-shrink: 0; }
.rank-no.n1 { background: #C9971C; }
.rank-no.n2 { background: #9AA5A0; }
.rank-no.n3 { background: #B0733B; }
.rank-av { width: 30px; height: 30px; flex-shrink: 0; }
.rank-av .init-ava { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; }
.rank-score { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--teal-dd); }
.qc-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
/* 左上日期 */
.home-date { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
/* 揪一攤 · 14 天快選月曆（自家設計、不用瀏覽器原生格） */
/* 就診日期（Edward 2026-08-01）：原本是未來 14 天的十四格，兩個月後的回診記不進來。
今天／明天留成一點就好的快捷，其餘日子點日期欄叫出手機自己的年月日行事曆。
日期欄一律自己佔滿一行——四個語系的日期長度差很多（「2026年8月3日 週一」vs
「Mon, August 3, 2026」），排在快捷旁邊只有中日文塞得下。 */
.visit-when { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.visit-datefield { flex: 1 1 100%; position: relative; display: flex; align-items: center; justify-content: center;
min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.visit-datefield:focus-within { border-color: var(--teal-d); outline: 2px solid var(--teal-d); outline-offset: 2px; }
.visit-datetext { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.visit-datefield input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; background: none; cursor: pointer; }
/* 機智問答作答 */
.quiz-q { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.5; margin: 6px 0 14px; min-height: 30px; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.quiz-opt { width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px 16px; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; }
.quiz-opt.good { border-color: var(--teal-d); background: var(--mint); }
.quiz-opt.bad { opacity: .45; }
.quiz-score { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--teal-dd); text-align: center; margin: 14px 0 6px; }
/* 聊聊頁：提示視窗放在通話按鈕上方（不蓋住按鈕） */
body:has(#chat.active) .toast { bottom: calc(236px + env(safe-area-inset-bottom)); }
/* 設定 · 陪伴角色入口列 */
.sr-ico.comp { overflow: hidden; padding: 0; }
.sr-ico.comp img { width: 100%; height: 100%; object-fit: cover; display: block; }
#companionRow .sr-main b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
/* 已結束卡 · 收版狀態腳註 */
.qc-life { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px; margin-top: 10px; }
/* 導覽列選中訊號（中央聊聊鈕太搶、光靠文字色不夠） */
.tab-btn.active:not(.center)::before { display: none; } /* 膠囊 navbar：改用白色圖示表選中、不用頂部小線 */
.field-label.sect-new { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
/* 狀態頁三檔切換 */
.seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 3px; gap: 3px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.seg-btn { flex: 1; border: none; background: transparent; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink-2); padding: 6px 0; border-radius: 100px; cursor: pointer; min-height: 32px; }
.seg-btn.on { background: var(--btn-green); color: #FFF; box-shadow: none; }
/* 本週 · 色塊週曆 */
.wk-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.wkc-head { display: flex; align-items: center; margin-bottom: 10px; }
.wkc-head > span { width: 48px; flex-shrink: 0; }
.wkc-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wkc-days i { font-style: normal; text-align: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.wkc-row { display: flex; align-items: center; margin-bottom: 8px; }
.wkc-label { width: 48px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.wkc-cells { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wkc-cells i { display: block; height: 30px; border-radius: 9px; background: var(--cream); }
.wkc-cells i.ok { background: var(--teal); }
.wkc-cells i.soso { background: var(--mint-2); }
.wkc-cells i.miss { background: var(--coral-soft); }
.wkc-cells i.today { background: #FFF; border: 1.5px dashed var(--teal); }
.wkc-cells i.future { background: var(--cream); opacity: .55; }
.wkc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.wkc-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.wkc-legend i { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.wkc-legend i.ok { background: var(--teal); }
.wkc-legend i.soso { background: var(--mint-2); }
.wkc-legend i.miss { background: var(--coral-soft); }
.wkc-legend i.today { background: #FFF; border: 1.5px dashed var(--teal); }
/* 本月 · 週準時率 */
.mo-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; }
.mo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mo-row > span { width: 52px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mo-row > b { width: 44px; text-align: right; font-size: 13px; color: var(--teal-dd); flex-shrink: 0; }
.mo-bar { flex: 1; height: 12px; border-radius: 100px; background: var(--mint); overflow: hidden; }
.mo-bar i { display: block; height: 100%; border-radius: 100px; background: var(--teal-d); }
.mo-note { font-size: 15px; color: var(--ink-2); line-height: 1.65; padding: 0 4px 4px; }
.mo-note b { color: var(--teal-dd); }
/* 過去紀錄列 */
.hist-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; text-align: left; font-family: var(--sans); }
.hist-row b { font-size: 15px; color: var(--ink); }
.hist-row span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.hist-row.dim { opacity: .72; }
/* 回診摘要 · 一頁四行 */
.rpt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px 16px; margin-bottom: 18px; }
.rpt-row { display: flex; gap: 14px; padding: 13px 0; }
.rpt-row + .rpt-row { border-top: 1px solid var(--line); }
.rpt-k { flex-shrink: 0; width: 60px; font-size: 13px; font-weight: 700; color: var(--teal-dd); padding-top: 2px; }
.rpt-row b { display: block; font-size: 17px; color: var(--ink); }
.rpt-row span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
/* 趨勢柱：顏色有意義（class 對應狀態、不再裝飾性上色） */
.trend-bars .tb.ok i { background: var(--teal); }
.trend-bars .tb.today i { background: #FFF; border: 1.5px dashed var(--teal); }
.trend-bars .tb.future i { background: var(--cream); opacity: .5; }
.trend-bars .tb span { white-space: nowrap; }
/* 出席看板 v2：一排四人 */
.rsvp-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 0 12px; }
.rp { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--cream); border-radius: 14px; padding: 12px 4px 10px; }
.rp.yes { background: var(--mint); }
.rp.wait { background: var(--coral-soft); }
.rp .rp-av { position: relative; width: 44px; height: 44px; }
.rp .init-ava { width: 44px; height: 44px; border-radius: 50%; font-size: 17px; border: 2px solid #FFF; }
.rp.dim .init-ava { opacity: .55; filter: grayscale(.4); }
.rp b { font-size: 13px; color: var(--ink); font-weight: 700; }
.rp-st { font-size: 13px; font-weight: 700; }
.rp-st.ok { color: var(--teal-dd); }
.rp-st.no { color: var(--muted); }
.rp-st.ask { color: var(--teal-dd); }
.rp .rg-badge { bottom: 0; right: -3px; }
/* 發起活動 · 一排四人邀請（Google 邀請式簡潔） */
.invite-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.iv { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 10px 4px 9px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.iv .iv-ava { position: relative; width: 44px; height: 44px; }
.iv .init-ava { width: 44px; height: 44px; border-radius: 50%; font-size: 17px; }
.iv.on { border-color: var(--teal); background: var(--mint); }
.iv .iv-ava::after { content: ""; position: absolute; right: -3px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; background: var(--teal-d); border: 2px solid #FFF; transform: scale(0); transition: transform .15s cubic-bezier(.3,1.4,.5,1); background-image: url('data:image/svg+xml;utf8,'); background-size: 9px; background-position: center; background-repeat: no-repeat; }
.iv.on .iv-ava::after { transform: scale(1); }
.iv-empty { grid-column: 1 / -1; border: 1.5px dashed var(--line); background: var(--surface); border-radius: 14px; padding: 14px 12px; font-size: 14px; color: var(--muted); text-align: center; line-height: 1.5; }
.invite-note { font-size: 14px; color: var(--muted); margin: 8px 2px 0; }
.goal-hint { font-size: 14px; color: var(--ink-2); margin: 2px 2px 0; }
/* 設定頁 · 免責一行（原同意卡收進登入流程） */
.set-disclaim { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 4px 4px 20px; }
.set-disclaim a { color: var(--teal-dd); font-weight: 600; margin-left: 6px; }
/* 登入 · 條款一行 */
.auth-terms { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 12px 2px 2px; }
.auth-terms a { color: var(--teal-dd); font-weight: 600; }
/* 週曆每行小計 + 本月三格重點 */
.wkc-sum { width: 48px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 700; color: var(--teal-dd); }
.mo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ms { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 6px 10px; text-align: center; }
.ms b { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.ms b small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ms span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); font-weight: 600; }
/* 出席名單 v3（Google 邀請式清單列） */
.rsvp-list { padding: 2px 0 10px; }
.rl { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
.rl + .rl { border-top: 1px solid var(--line); }
.rl .init-ava { width: 34px; height: 34px; border-radius: 50%; font-size: 15px; flex-shrink: 0; }
.rl b { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.rl.dim .init-ava, .rl.dim b { opacity: .6; }
.rl-st { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.rl-st .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.rl-st.ok { color: var(--teal-dd); }
.rl-st.no { color: var(--muted); }
.rl-st.ask { color: var(--teal-dd); }
/* 內建條款閱讀頁 */
.legal-tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--coral-soft); border-radius: 100px; padding: 3px 10px; margin: 6px 0 4px; }
.legal-body h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 16px 0 6px; }
.legal-body p { font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.legal-body p b { color: var(--ink); }
/* 設定列：右側標籤不折行、不擠壓 */
.set-row .sr-arrow { white-space: nowrap; flex-shrink: 0; }
.set-row .sr-main { flex: 1; min-width: 0; }
/* 管理方案面板 */
.plan-current { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; margin-bottom: 6px; }
.pc-row { display: flex; align-items: baseline; justify-content: space-between; }
.pc-row b { font-size: 17px; color: var(--ink); }
.pc-price { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--ink); }
.pc-price small { font-size: 13px; color: var(--muted); font-weight: 600; }
.pc-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.plan-feats { list-style: none; padding: 0; margin: 0; }
.plan-feats li { position: relative; padding: 8px 0 8px 26px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.plan-feats li + li { border-top: 1px solid var(--line); }
.plan-feats li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); }
.plan-feats li::after { content: ""; position: absolute; left: 6px; top: 17px; width: 6px; height: 3px; border-left: 1.8px solid var(--teal-d); border-bottom: 1.8px solid var(--teal-d); transform: rotate(-45deg); }
.med-sched-note { font-size: 13px; color: var(--muted); line-height: 1.55; margin: -4px 0 10px; }
/* 過去紀錄 · 自選日期月曆 */
.rc-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.rc-head b { font-size: 17px; color: var(--ink); font-family: var(--display); font-weight: 700; }
.rc-nav { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1; color: var(--teal-dd); cursor: pointer; }
.rc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.rc-week i { font-style: normal; text-align: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rc-cell { height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; font-family: var(--sans); }
.rc-cell.pad, .rc-cell.off { cursor: default; }
.rc-cell.off { color: var(--line); }
.rc-cell.in { background: var(--mint); border-radius: 6px; }
.rc-cell.sel { background: var(--teal-d); color: #FFF; }
.rc-hint { font-size: 13px; color: var(--muted); margin: 10px 2px 8px; }
/* 個人資料 · 作息表 */
.rt-list { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px; }
.rt-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.rt-row + .rt-row { border-top: 1px solid var(--line); }
.rt-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.rt-btn { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 17px; color: var(--teal-dd); cursor: pointer; }
.rt-time { width: 58px; text-align: center; font-family: var(--display); font-size: 17px; color: var(--ink); }
/* 照護圈身分 */
.rl-wrap { padding: 2px 0; }
.fc-role { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--cream); border-radius: 100px; padding: 4px 10px; }
.fc-role.pay { color: var(--teal-dd); background: var(--mint); }
/* 加值點數 */
.tu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tu-card { min-width: 0; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px 10px; text-align: center; cursor: pointer; font-family: var(--sans); }
.tu-card b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); }
.tu-card span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.tu-card.on { border-color: var(--teal); background: var(--mint); }
/* 心情月檢視 v2 */
.mood-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mm-cell { height: 34px; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--sans); }
.mm-cell.on { outline: 2px solid var(--teal-d); outline-offset: 1px; }
/* 帳號卡 · 頭像走家人系統 */
.auth-ava { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--mint); color: var(--teal-d); }
.auth-ava.guest { background: var(--mint); color: var(--teal-d); }
.auth-ava .auth-ava-placeholder { width: 26px; height: 26px; stroke-width: 2; }
.auth-ava.has-photo .auth-ava-placeholder { display: none; }
.auth-ava-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 未登入時這張空照片必須真的消失——否則它佔掉格子、把人形往下擠（Edward 2026-07-14 catch「要在圓的中間」）*/
.auth-ava-img[hidden] { display: none; }
/* 方案四檔 */
.tier-list { display: flex; flex-direction: column; gap: 8px; }
.tier { display: flex; align-items: center; gap: 10px; width: 100%; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px; font-family: var(--sans); cursor: pointer; text-align: left; }
.tier b { font-size: 15px; color: var(--ink); width: 74px; flex-shrink: 0; }
.tier span { flex: 1; font-size: 13px; color: var(--muted); }
.tier i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--teal-dd); white-space: nowrap; }
.tier.on { border-color: var(--teal); background: var(--mint); }
.plan-cancel { display: block; margin: 16px auto 2px; border: none; background: transparent; color: var(--muted); font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 12px; }
.tier-tag { font-style: normal; margin-left: 6px; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--coral-soft); border-radius: 100px; padding: 2px 7px; }
/* ── 設計規範 v1 · 按鈕三階（2026 深研定案：互動只用深綠、一頁一顆主鈕）── */
.video-btn, .modal-btn, .auth-primary { background: var(--btn-green); border-radius: 16px; min-height: 50px; }
.plan-btn, .fam-call-btn { background: var(--mint); color: var(--teal-dd); border: none; border-radius: 16px; min-height: 48px; }
.call-btn.start { background-color: var(--btn-green); }
/* 規範 v1.1 · 女巫把關修正 */
.tab-btn { font-size: 13px; }
.set-row .sr-main small { color: var(--ink-2); }
/* 設定頁的區塊標題（帳號／訂閱與點數／帳號與家庭…）改暖橘（Edward 2026-07-31）。
這裡是米色底、對比 3.91 比白卡低一階，但它是 13px 粗體的分段標籤、短詞、旁邊沒有競爭文字，
看得清；真正要讀的內容（列標題與說明）仍是 --ink／--ink-2 的高對比色，沒有被動到。 */
.set-section { color: var(--coral-text); }
.plan-payer { color: var(--ink-2); }
.tu-card span { font-size: 15px; color: var(--ink-2); }
.plan-cancel { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.tier.on { pointer-events: none; cursor: default; }
.tier-tag.now { color: var(--teal-dd); background: var(--mint-2); }
/* 巧思 · 家人活動圓環（頭像外圈 = 今日活動量） */
.fam-switch-item .fs-ava { position: relative; }
.tier-tag.next { color: var(--ink); background: var(--coral-soft); margin-left: 6px; }
.mm-cell.future { background: var(--cream); pointer-events: none; }
.mm-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin-top: 6px; }
.chal-type.active { color: var(--teal-d); }
/* 自訂獎勵（取代徽章牆：獎勵是家人給的、不是系統發的） */
.rw-list { display: flex; flex-direction: column; gap: 8px; }
.rw-row { display: flex; align-items: center; gap: 10px; }
.rw-in { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 10px 13px; font-family: var(--sans); font-size: 15px; color: var(--ink); }
.rw-in:focus { outline: none; border-color: var(--teal); }
.init-ava.p-me { background: #2E8A83; color: #FFF; }
.med-face { align-self: center; width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin: auto auto 14px; border: 4px solid #FFF; box-shadow: var(--shadow-sm); }
.med-back { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line); }
/* 圓環 v2：畫在頭像容器上、不動內部結構 */
.med-screen { display: flex; flex-direction: column; }
.med-top { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 20px 12px; }
.med-face { margin: 0 auto 14px; }
.screen.med-screen.active { display: flex; flex-direction: column; }
/* 提醒彈窗（取代滿版舊頁） */
.mr-say { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.mr-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #FFF; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.mr-say span { background: var(--mint); color: var(--teal-dd); padding: 10px 14px; border-radius: 4px 16px 16px 16px; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 低點數 · 溫柔提醒（不焦慮：講清楚基本陪伴不受影響） */
.low-strip { display: flex; align-items: center; gap: 8px; background: var(--coral-soft); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin-bottom: 10px; line-height: 1.5; }
.low-strip .ic { width: 16px; height: 16px; flex-shrink: 0; }
.hud-pill.pts.low { color: #FFC98A; }
.consent-body { font-size: 15px; line-height: 1.7; color: var(--ink-2); background: var(--mint); border-radius: 14px; padding: 14px 16px; margin: 10px 0 14px; }
/* 跨境同意頁：清爽三點＋療癒綠主鈕＋低調連結（Edward 7/6：留著、重畫精緻） */
.consent-points { list-style: none; margin: 2px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.consent-points li { display: flex; gap: 12px; align-items: flex-start; }
.consent-points .cp-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--teal-d); }
.consent-points b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.55; }
.consent-points small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.consent-note { font-size: 13.5px; line-height: 1.65; color: var(--muted); background: var(--mint); border-radius: 12px; padding: 11px 14px; margin: 0 0 16px; }
.consent-note b { color: var(--teal-dd); }
.consent-go { width: 100%; border: none; border-radius: var(--radius-sm); background: var(--btn-green); color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px; padding: 16px; cursor: pointer; box-shadow: var(--shadow-sm); white-space: nowrap; }
.consent-go:active { transform: scale(.98); }
.consent-link { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--teal-d); font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; padding: 6px; white-space: nowrap; }
/* 版本更新彈窗：每版一組（版號＋日期＋白話更新項目） */
.changelog { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 16px; }
.cl-rel .cl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.cl-rel .cl-head b { font-size: 16px; font-weight: 800; color: var(--teal-dd); }
.cl-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.cl-date { font-size: 12px; color: var(--muted); margin-left: auto; }
.changelog ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.changelog li { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* 個人資料輸入 */
.pf-input { width: 100%; max-width: 260px; }
.rpt-row div span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
/* ── 就診摘要 ────────────────────────────────────────────
刻意不用紅色、不用警示圖示：這一頁只陳列事實，任何看起來像「醫療警報」的
視覺都會把我們推向判讀（紅線）。時間軸的三種來源用「形狀」區分而不是顏色，
因為醫師要分辨的是「可信度」不是「嚴重度」。
2026-07-29 Edward 巡檢後改版：版型改吃既有子頁規範（nav-head / set-section /
set-list / seg / reader-card），原本那一整套 .rpt-* 自訂樣式全部刪掉。
下面只留規範裡沒有的三個，數值一律沿用既有 class，不另訂。 */
/* 右上角動作鍵。現有子頁的 .nav-head 右格一直是空的，這是第一個需要動作的子頁——
規格完全鏡像 .nav-back（styles.css 上方），只差圖示，不新訂尺寸或顏色。 */
.nav-act { width: 44px; height: 44px; border: none; background: none; color: var(--teal-dd); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.nav-act .ic { width: 24px; height: 24px; stroke-width: 2; }
.nav-act:active { background: var(--mint); }
/* 時間軸單列：既有 class 沒有「日期＋來源符號＋文字」這種三欄列。
間距、線色、字級全部取自 .set-row / --fs-note，不另訂數字。 */
.vs-line { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; font-size: var(--fs-sub); color: var(--ink); line-height: 1.5; }
.vs-line + .vs-line { border-top: 1px solid var(--line); }
.vs-line .d { flex-shrink: 0; width: 40px; font-size: var(--fs-note); color: var(--muted); font-variant-numeric: tabular-nums; }
.vs-line .m { flex-shrink: 0; width: 16px; text-align: center; color: var(--teal-dd); }
.vs-line .q { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vs-line .q em { display: block; font-style: normal; font-size: var(--fs-note); color: var(--muted); margin-top: 2px; }
.vs-line .n { flex-shrink: 0; align-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--teal-dd); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.vs-line .x { flex-shrink: 0; border: none; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; padding: 2px 4px; cursor: pointer; min-height: 30px; }
/* 分區標題右側的「編輯／完成」。.set-section 本來只是一行文字，
這裡讓它變成兩欄；字級顏色沿用，只加排版。 */
.set-section.vs-sec-act { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.set-section.vs-sec-act button { border: none; background: none; font-family: var(--sans); font-size: var(--fs-sub); font-weight: 700; color: var(--teal-dd); cursor: pointer; padding: 6px 2px; min-height: 44px; }
/* 刪除鍵：視覺跟就診清單的 .vi-del 同一款（同一件事就長同一個樣），
但點擊區拉到 44px——長輩的手指按不準 28px 的小藥丸。
用「刪除」兩個字不用 ✕ 圖示：長輩讀得懂字、猜不出圖示，
而且刪東西不可逆，更不該讓他用猜的。 */
.vs-del { flex-shrink: 0; border: 1px solid var(--line); background: #fff; color: var(--muted); font-family: var(--sans); font-size: var(--fs-note); font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.vs-del:active { background: var(--mint); }
/* 「＋ 自己加一題」：App 裡沒有同類的虛線新增鍵 */
.vs-add { width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--teal-dd); font-family: var(--sans); font-size: var(--fs-sub); font-weight: 700; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; margin-top: 10px; min-height: 40px; }
/* 以下都是既有樣式的薄包裝，只是給這一頁的語意名字 */
.vs-range { margin: 0 2px 14px; color: var(--muted); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.vs-note { font-size: var(--fs-note); color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.vs-empty { font-size: var(--fs-sub); color: var(--muted); padding: 4px 0; line-height: 1.6; }
.vs-foot { font-size: var(--fs-note); color: var(--muted); text-align: center; margin: 22px 0 8px; }
.vs-pend { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-note); color: var(--muted); }
.vs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; animation: vsPulse 1.4s ease-in-out infinite; }
@keyframes vsPulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .vs-dot { animation: none; opacity: .7 } }
/* 存成 PDF 走的是原生外掛（ExportPlugin.swift）自組的一份 A4 HTML，
不是印這個畫面——所以這裡不需要 @media print 規則。瀏覽器版退回
window.print() 時才用得到，那條在 exportVisitSummaryPdf 內另外處理。 */
/* 用藥時段清單 */
/* 沒有藥的時段本來要佔三行（時段名／空行／「這個時段沒有藥」），四個時段就吃掉大半個畫面。
改成把那句話塞回第二行原本擺「幾種」的位置，一個空時段只剩兩行（Edward 2026-08-01：板位太大）。 */
.ms-group { background: #FFF; border-radius: 14px; padding: 10px 13px; margin-bottom: 8px; }
.ms-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.ms-head > b { grid-column: 1; grid-row: 1; min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
.ms-time-wrap { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; margin-left: 0; }
.ms-time { font-size: 17px; font-variant-numeric: tabular-nums; }
.ms-tbtn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: #FFF; color: var(--teal-d); font-size: 17px; }
.ms-count { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: 13px; color: var(--muted); min-width: 0; text-align: left; }
.ms-med { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; }
.ms-med b { font-size: 15px; }
.ms-med span { font-size: 13px; color: var(--muted); }
.ms-med .ms-del { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--mint); color: var(--ink-2); }
.ms-empty { font-size: 13px; color: var(--muted); padding: 6px 0 0; }
/* ===== 智慧照護提示輪播（首頁綜合資訊入口） ===== */
.care-card { position: relative; background: linear-gradient(180deg,#fff,#FCFAF5); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 18px; margin: 14px 0 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
/* 「寧寧幫你留意」這行小標改暖橘（Edward 2026-07-31）——卡片裡的活動圖示已經有顏色，
小標再用綠就整張卡同一個調子；橘小標配內容區的綠，冷暖各站一邊才有層次。
眼睛圖示跟著文字走（用 currentColor），不然會變成橘字配綠圖、更亂。 */
/* 「寧寧幫你留意」用深綠（Edward 2026-07-31 定案，中間試過橘與石墨黑）：
它是一塊區域的名字、下面接待辦清單，染橘會跟卡片裡的內容搶戲；深綠是品牌色又夠沉。 */
.care-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--teal-dd); font-weight: 800; }
.care-head .ic { width: 16px; height: 16px; }
.care-dots { margin-left: auto; display: inline-flex; gap: 5px; }
.care-dots i { width: 6px; height: 6px; border-radius: 4px; background: rgba(35,108,102,.22); transition: all .3s; }
.care-dots i.on { width: 14px; }
.care-dots i.on { background: var(--teal-d); }
.care-body { display: grid; min-height: 62px; margin-top: 10px; min-width: 0; }
.care-item { grid-area: 1 / 1; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 12px; opacity: 0; visibility: hidden; transition: opacity .35s ease; pointer-events: none; }
.care-item.on { opacity: 1; visibility: visible; pointer-events: auto; }
.care-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--teal); display: grid; place-items: center; color: #fff; }
.care-ico .ic { width: 23px; height: 23px; }
.care-ico.coral { background: var(--coral); color: #fff; }
.care-ico.gold { background: #C79A3B; color: #fff; }
.care-txt { min-width: 0; }
.care-txt p { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.care-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 3px; white-space: normal; overflow: hidden; }
/* ===== 家庭版緊湊刻度 v2 ＋ 對比補強（Edward 7/3） ===== */
.video-btn { font-size: 15.5px; }
/* 活動圈圈已全面退場（HTML/JS 皆無引用、2026-07-05 女巫複驗清債） */
/* 方案清單：緊湊＋標籤實色 */
.tier { padding: 12px 14px; }
.tier b { font-size: 16px; }
.tier i { font-size: 16px; }
.tier span { font-size: 13px; }
.tier-tag.now { background: var(--teal-d); color: #FFF; padding: 2px 8px; border-radius: 999px; font-style: normal; }
.tier-tag.next { background: var(--coral-d); color: #FFF; padding: 2px 8px; border-radius: 999px; font-style: normal; margin-left: 6px; }
.tier.trial { opacity: .62; }
.tier.trial b::after { content: "體驗用"; font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.plan-confirm { background: var(--coral-soft); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.plan-confirm p { font-size: 14px; color: var(--ink); line-height: 1.55; }
.plan-confirm .pc-actions { display: flex; gap: 10px; margin-top: 10px; }
.plan-confirm .modal-btn { flex: 1; margin: 0; min-height: 44px; }
.plan-confirm .btn-quiet { flex: 0 0 auto; padding: 0 16px; }
.plan-cancel { display: block; width: 100%; margin-top: 14px; padding: 11px; border: 1.5px solid var(--line); border-radius: 12px; background: #FFF; color: var(--muted); font-size: 14px; }
/* 照護輪播：標題不可反白、動作用按鈕表達 */
.care-card { cursor: default; user-select: none; -webkit-user-select: none; }
.care-btn { flex: 0 0 auto; margin-left: auto; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--teal-d); background: #FFF; color: var(--teal-dd); font-size: 13px; font-weight: 800; }
.care-item { padding-right: 2px; }
.care-txt { flex: 1 1 auto; }
/* 家人動態的「移除／檢舉」（蘋果 UGC 審核要求 · 7/9） */
.care-mod { display: flex; gap: 16px; margin-top: 6px; }
.care-mod-btn { font-size: 12px; font-weight: 800; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; }
.care-mod-btn:active { color: var(--teal-dd); }
/* 家人頁頂：標題＋管理／封鎖入口同一列（7/9） */
.fam-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* ===== 北歐動態巧思 v1（輕巧不炫技 · 200-400ms） ===== */
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { opacity: .4; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes checkPop { 0% { transform: scale(.6); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes tabIn { 0% { transform: translateY(2px) scale(.92); } 100% { transform: none; } }
@keyframes rowGlow { 0% { background: var(--mint-2); } 100% { background: transparent; } }
/* 統一按壓回饋：所有能點的東西都有手感 */
.modal-btn, .care-btn, .tier, .set-row, .task-item, .mchip, .tu-card, .avo, .ms-tbtn, .btn-quiet, .chal-act, .fam-switch-item, .plan-cancel {
transition: transform .13s ease, box-shadow .2s ease, background .2s ease;
}
.modal-btn:active, .care-btn:active, .tier:active, .set-row:active, .task-item:active, .mchip:active,
.tu-card:active, .avo:active, .ms-tbtn:active, .btn-quiet:active, .chal-act:active, .plan-cancel:active { transform: scale(.98); }
.fam-switch-item:active .fs-av { transform: scale(.94); }
/* 打勾＝小小的慶祝：勾勾彈跳＋該行輕輕亮一下 */
.task-item.done .task-check { animation: checkPop .32s cubic-bezier(.3,1.4,.5,1) both; }
.task-item.done { animation: rowGlow .5s ease both; }
/* 分頁切換的落點感 */
.tab-btn.on .ic { animation: tabIn .22s ease both; }
/* 輪播換頁：舊卡瞬間收、新卡單獨淡入（不再兩張交疊出殘影） */
.care-item { transform: none; transition: opacity .35s ease; }
.care-item.on { transform: none; }
/* 尊重「減少動態」設定（北歐的體貼） */
@media (prefers-reduced-motion: reduce) {
.screen.active, .modal, .task-item.done .task-check, .tab-btn.on .ic { animation: none !important; }
.care-item { transition: opacity .2s ease; transform: none; }
}
/* ===== 北歐修正（女巫清單 · 2026-07-03） ===== */
/* G5 開發者面板：一般畫面不出現（帶 ?debug=avatar 才看得到） */
body:not(.debug) .ai-dev-panel { display: none !important; }
/* B 卡片邊界改「細線＋極淡影」雙手法 */
.task-card, .msg-card, .health-list, .butler-card, .ms-group { border: 1px solid var(--line); }
/* G3 圖示底色：照設計稿 V1-Home 每列實色填滿（吃藥=橘、散步=綠、聊聊=薄荷底綠字） */
.task-ico.walk { background: var(--teal); color: #fff; }
/* F5 家庭挑戰進度條長出來 */
.qc-track > i { transition: width .6s cubic-bezier(.4,0,.2,1); }
/* F8 提示浮起的北歐緩動 */
.toast { transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); }
/* ===== 北歐第二波：看得見的簽名（2026-07-04） ===== */
/* ① 寧寧的一句話：像她輕輕說的一則訊息（兩行為上限） */
/* 設計稿：訊息＝純文字（無泡泡）、13.5px/--ink-2、行高 1.5 */
.bc-msg { margin-top: 2px; background: none; padding: 0; font-size: 14px; line-height: 1.5; color: #5A5349; } /* 設計稿訊息暖灰 */
.bc-msg-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 64px; }
/* 家人帶話時放到 4 行（Edward 2026-07-31 指定）：平常的問候一句話就夠，
但轉達家人的話要看得完整——被切一半的叮嚀等於沒傳到。
真的超過 4 行就給「看全部」，寧可多一次點擊也不能默默吃掉後半句。 */
.butler-card.has-relay .bc-msg-t { -webkit-line-clamp: 4; max-height: 86px; }
.butler-card.has-relay.relay-open .bc-msg-t { -webkit-line-clamp: unset; max-height: none; }
.bc-relay-more { border: none; background: none; padding: 0; margin-top: 4px; color: var(--teal-dd); font-family: var(--display); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: underline; }
/* 傳話的字跟平常的問候同一款（Edward 2026-07-31）：這是寧寧在講話，不是通知橫幅。
加粗放大會讓整張卡變得像在喊人——長輩要的是讀起來舒服，行數夠讀完就好。 */
/* ③ 首頁進場節奏：卡片一張張輕輕浮上（總長 <0.5 秒） */
#home.screen.active .pad > * { animation: viewIn .3s cubic-bezier(.22,.9,.32,1) both; }
#home.screen.active .pad > *:nth-child(2) { animation-delay: .05s; }
#home.screen.active .pad > *:nth-child(3) { animation-delay: .1s; }
#home.screen.active .pad > *:nth-child(4) { animation-delay: .15s; }
#home.screen.active .pad > *:nth-child(5) { animation-delay: .2s; }
#home.screen.active .pad > *:nth-child(n+6) { animation-delay: .24s; }
/* ④ 三件事都完成：進度膠囊亮起薄荷綠 */
.task-progress.full { color: #FFF; }
.task-progress.full .bar i { background: var(--btn-green); }
.task-progress.full { background: var(--btn-green); border-radius: 999px; padding: 3px 10px; transition: background .4s ease; }
@media (prefers-reduced-motion: reduce) { #home.screen.active .pad > * { animation: none !important; } }
/* ===== 狀態頁重排（Edward 7/4：層次、圖表、裝置條接好即消失） ===== */
.st-trend { font-style: normal; font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; background: var(--mint); color: var(--teal-dd); }
.st-trend.up { background: var(--mint); color: var(--teal-dd); }
.st-trend.warn { background: var(--coral-soft); color: var(--ink); }
.st-trend.ok { background: var(--mint); color: var(--teal-dd); }
/* 長條圖（純樣式、無外掛） */
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px 12px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.cc-big { font-size: 20px; font-weight: 800; color: var(--teal-dd); }
.cbar-row { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.cbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.cbar i { width: 100%; max-width: 26px; border-radius: 7px 7px 3px 3px; background: var(--mint-2); position: relative; }
.cbar.hi i { background: var(--btn-green); }
.cbar.today i { background: var(--coral); }
.cbar.future i { background: var(--cream); border: 1px dashed var(--line); }
.cbar b { font-size: 11px; font-weight: 600; color: var(--muted); }
.cbar-row.mini { height: 52px; gap: 2px; }
.cbar-row.mini .cbar i { border-radius: 3px; max-width: none; }
/* ===== 設定頁精修（Edward 7/4：單行、內頁選字級、條款 App 內閱讀） ===== */
.set-row .sr-main { min-width: 0; }
/* 原本是「不換行、超出就切掉」（Edward 7/4 拍板單行）。四語系上線後，
英文／西班牙文同一句長很多，單行等於把話講一半——測試員就抓到用藥提醒那行被切成「…」。
改成最多兩行：中文照樣一行（文案已寫短），其他語言折行而不是被切掉。 */
.set-row .sr-main small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
.set-row .sr-arrow { white-space: nowrap; flex-shrink: 0; }
/* 加值卡三行各自單行 */
.tu-card { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.tu-card b, .tu-card .tu-price, .tu-card .tu-min { white-space: normal; overflow-wrap: anywhere; }
.tu-card .tu-price { font-size: 15px; font-weight: 700; color: var(--ink); }
.tu-card .tu-min { font-size: 12.5px; color: var(--muted); }
/* 字級選單 */
.font-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.font-opt { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #FFF; text-align: left; }
.font-opt span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.font-opt.on { border-color: var(--btn-green); background: var(--mint); }
.font-opt.on::after { content: "✓"; margin-left: auto; color: var(--teal-dd); font-weight: 800; }
/* 條款閱讀內頁：白色滿版、左上返回、內容可滑 */
.reader-page { position: fixed; inset: 0; z-index: 60; background: var(--cream); display: none; flex-direction: column; }
.reader-page.show { display: flex; }
.reader-scroll { flex: 1; overflow-y: auto; padding: 4px 18px calc(24px + env(safe-area-inset-bottom)); }
.reader-card { background: #FFF; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 18px 22px; }
.reader-card h4 { font-size: 16.5px; margin: 20px 0 8px; padding-left: 11px; border-left: 3.5px solid var(--teal); color: var(--ink); line-height: 1.4; }
.reader-card h4:first-child { margin-top: 2px; }
.reader-card p { font-size: 15.5px; line-height: 1.95; letter-spacing: .02em; color: var(--ink-2); margin-bottom: 8px; text-align: justify; text-justify: inter-ideograph; overflow-wrap: anywhere; }
.reader-card ul { padding-left: 6px; list-style: none; margin-bottom: 8px; }
.reader-card li { position: relative; padding-left: 16px; margin-top: 7px; font-size: 15.5px; line-height: 1.95; letter-spacing: .02em; color: var(--ink-2); }
:is(html:lang(en), html:lang(es)) .reader-card :is(p, li) { text-align: left; text-justify: auto; hyphens: auto; }
.reader-card li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.reader-card strong { color: var(--ink); }
/* 個人資料：欄位說明在上方小字、不佔左欄；生日雙下拉 */
.pf-form { background: #FFF; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 16px 14px; margin-top: 10px; }
.pf-field { padding: 10px 0 2px; }
.pf-field + .pf-field { border-top: 1px solid var(--line); }
.pf-label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.pf-form .chal-input { width: 100%; }
.pf-birth { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.pf-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
/* 開帳與個人資料重整（2026-07-24）＋女巫 Gate 2 修正（2026-07-24 二輪）：首登彈卡視覺。 */
.pf-first-run-banner { background: var(--mint); border: 1px solid rgba(58,168,160,.22); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 4px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
/* 沙利曼 Gate 5：存檔即上傳，告知要放在「存好」鈕正上方（比聊聊前同意卡更早） */
.pf-first-run-disclosure { background: #FFF; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* 首登模式下，「名稱」（Google/Apple 帶入、多半不用手動改）與生日「月」／所在地「區」
照舊存在但不強調——真正要使用者動手的三格重點是家人稱呼／出生年／縣市（女巫 Gate 2 二輪：
原本誤調暗 #pfNick，應調暗 #pfName 那組；用 :has() 把整個 .pf-field 一起調暗）。 */
.pf-first-run #pfBirthM, .pf-first-run #pfDistrict, .pf-first-run .pf-field:has(> #pfName) { opacity: .58; }
/* 2026-07-28：首頁「讓寧寧更認識你」獨立小卡整組樣式退役（提醒改收進「幫你留意」輪播）。
退役原因留檔：這組原本寫 .profile-nudge-card { display: flex } 卻沒配 [hidden] { display: none }，
把 JS 下的「藏起來」整個蓋掉——關閉 X 按了沒反應、四道出現條件也全部失效。
同檔其他會被 JS 藏起來的元件（.busy-card / .text-chat-panel 等）都有補那行，這組漏了。 */
/* 首頁「免費會員」小標——沿用 .mem-badge 既有色階，這裡只補外距 */
.home-badge { margin-right: 2px; }
/* 女巫 Gate 2 抓到的缺陷：.modal-btn.quiet 從未定義，跳過鈕跟「存好」鈕長一模一樣的實心綠——
跳過該是次要動作，不該跟主要動作視覺同權。沿用既有 .btn-quiet 色階慣例。 */
.modal-btn.quiet { background: var(--mint); color: var(--teal-dd); border: 1.5px solid var(--teal-d); box-shadow: none; }
/* ===== 方案完整子頁 ===== */
.plan-scroll { padding-top: 8px; }
.plan-current { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
/* 釘在手機下方：這頁整頁會捲（.sub-page overflow-y:auto），absolute 會跟著內容捲走、
浮到畫面中間（7/14 頂部可滑走改動的副作用）。fixed 才真的釘住——同 .sub-x 的作法。 */
.plan-confirm-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; background: #FFF; border-top: 1px solid var(--line);
padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px -12px rgba(31,60,52,.18); }
.plan-confirm-bar p { font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.plan-confirm-bar .pc-actions { display: flex; gap: 10px; }
.plan-confirm-bar .modal-btn { flex: 1; margin: 0; min-height: 46px; }
.plan-confirm-bar .btn-quiet { flex: 0 0 auto; padding: 0 16px; border: none; background: none; color: var(--muted); font-size: 14px; }
/* ===== 家人頁 ===== */
#family .sec-head { margin: 14px 0 12px; }
#family .sec-head h2 { font-size: 17px; }
/* 全家狀態：心情做成有顏色的小藥丸、一眼分辨 */
.mood-pill { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-right: 4px; display: inline-flex; align-items: center; gap: 3px; vertical-align: -3px; }
.mood-pill .ic { width: 13px; height: 13px; }
/* 家人頁的心情標籤＝情緒球那六顆的淡化版（Edward 2026-08-01）
*
* 他點的球是黃／青綠／深綠／灰藍／橘／紅，標籤本來卻是米底黑字（開心）跟土黃字（愉快）——
* 同一個心情在兩個畫面長得不像同一件事。改成「同色系淡底＋同色系深字」：
* 底色一眼認得出是哪顆球，字色壓到對白底 4.5 以上，六顆同一個閱讀重量。
* 開心 #F4B63A → 底 #FBF0D5 字 #8A6410（4.74）
* 愉快 #2FB7A8 → 底 #DCF3F0 字 #1A7268（4.96）
* 平靜 #236C66 → 底 #D9EFE8 字 #236C66（5.39，原本就對）
* 低落 #6D7F91 → 底 #E4EAF0 字 #46566A（6.19，原本就對）
* 焦慮 #D98A32 → 底 #FAECD8 字 #985C15（4.66）
* 生氣 #E95B4F → 底 #F7DEDB 字 #B0392D（4.73）
* tired／upset 是聊聊觀察才會出現的詞（情緒球沒有），沿用原本的配色。 */
.mood-pill.calm { background: var(--mint-2); color: var(--teal-dd); }
.mood-pill.happy { background: #FBF0D5; color: #8A6410; }
.mood-pill.glad { background: #DCF3F0; color: #1A7268; }
.mood-pill.tired { background: #F6E7C8; color: #7E5B0E; }
.mood-pill.down { background: #E4EAF0; color: #46566A; }
.mood-pill.upset { background: #ECE1F0; color: #6E4488; }
/* 焦慮與生氣（2026-08-01 補）：這兩格是同日新開的，樣式漏了 → 家人頁上那顆標籤
沒有底色、跟旁邊六顆長得不一樣（Edward 一眼看出來）。底色與字色沿用同一組配法：
淡底＋同色系深字，深字對淡底都在 4.5 以上，跟其他五顆同一個閱讀重量。 */
.mood-pill.anxious { background: #FAECD8; color: #985C15; }
.mood-pill.angry { background: #F7DEDB; color: #B0392D; }
/* 成員列按下去的小彈跳（活著的感覺） */
.health-row:active { transform: scale(.985); }
.health-row { transition: transform .12s ease; }
.qc-provider { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* 用藥三顆小藥點 */
.pill-dots { display: inline-flex; gap: 5px; margin: 4px 0 2px; }
.pill-dots i { width: 14px; height: 8px; border-radius: 999px; background: #FFF; border: 1px solid var(--coral-d); opacity: .55; }
.pill-dots i.f { background: var(--coral-d); border-color: var(--coral-d); opacity: 1; animation: checkPop .3s cubic-bezier(.3,1.4,.5,1) both; }
/* 活動迷你三日條（右上角、前兩天 vs 今天） */
.act-spark { position: absolute; right: 14px; top: 16px; display: inline-flex; align-items: flex-end; gap: 3px; }
.act-spark i { width: 7px; border-radius: 3px; background: rgba(35,108,102,.28); }
.act-spark i.hi { background: var(--teal-d); }
/* 獎勵行：獎牌一欄、文字一欄（兩行左緣自然對齊） */
.qc-prize { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.qc-prize .qp-ico { flex: 0 0 auto; line-height: 1.4; }
.qc-prize .qp-ico .ic { width: 22px; height: 22px; color: var(--coral-d); }
.qc-prize .qp-txt { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.qc-prize .qp-txt small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
/* 選角卡：頭像裁切統一（同大小、同貼齊、頭部置頂） */
.avo .avi { width: 62px; height: 62px; border-radius: 16px; overflow: hidden; flex: 0 0 62px; }
.avo .avi img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
/* 健康圈：內容全進一排、遮霧與箭頭退場（成員>6 才會滑） */
.hscroll-wrap:has(#famSwitch)::after, .hscroll-wrap:has(#famSwitch) .hscroll-more { display: none; }
/* 發起活動：送出鍵釘在視窗底、永遠看得到 */
#startChalBtn { box-shadow: var(--shadow-sm); }
/* ===== 方案卡重構（名稱+標籤+價格一行、說明自成一行、標籤改輕盈描邊） ===== */
.tier { display: block; width: 100%; text-align: left; }
.tier .tier-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tier .tier-top b { font-size: 17px; letter-spacing: .2px; }
.tier .tier-top i { margin-left: auto; font-style: normal; font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tier .tier-top i u { text-decoration: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.tier.on .tier-top i { color: var(--teal-dd); }
.tier .tier-desc { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-tag.now { background: #FFF; color: var(--teal-dd); border: 1.5px solid var(--teal-d); padding: 1px 8px; font-size: 11.5px; }
.tier-tag.next { background: #FFF; color: var(--ink); border: 1.5px solid var(--coral); padding: 1px 8px; font-size: 11.5px; margin-left: 0; }
.tier.trial b { font-size: 15px; }
.tier.trial b::after { content: "（體驗用）"; font-size: 11.5px; margin-left: 2px; }
/* ===== 訂閱方案：平面設計（無漸層、無陰影，靠純色塊／邊框／薄荷奶油底做層次）===== */
.plan-hero { border-radius: 20px; padding: 22px; margin-bottom: 22px; background: var(--teal); color: #fff; }
.ph-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 999px; }
.ph-name { font-family: var(--display); font-size: 32px; font-weight: 800; margin-top: 12px; line-height: 1; }
.ph-pts { margin-top: 10px; font-size: 15px; font-weight: 600; }
.ph-pts b { font-family: var(--display); font-size: 27px; font-weight: 800; }
.ph-pts span { opacity: .85; }
.ph-meta { margin-top: 12px; font-size: 13px; opacity: .92; line-height: 1.5; }
.plan-cards { display: flex; flex-direction: column; gap: 14px; }
.plan-opt { position: relative; display: block; text-align: left; width: 100%; border: 2px solid var(--line); border-radius: 18px; padding: 18px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.plan-opt:active { border-color: var(--teal-d); }
.plan-opt.on { border-color: var(--teal); background: var(--mint); }
.plan-opt.pro.on { border-color: #C79A3B; background: #FBF3DF; }
.po-head { display: flex; align-items: center; gap: 10px; }
.po-name { font-family: var(--display); font-size: 23px; font-weight: 800; color: var(--ink); }
.po-cur { font-size: 12px; font-weight: 700; color: #fff; background: var(--teal); padding: 3px 11px; border-radius: 999px; }
.plan-opt.pro .po-cur { background: #C79A3B; }
.po-ribbon { position: absolute; top: 17px; right: 16px; font-size: 12px; font-weight: 700; color: #fff; background: #C79A3B; padding: 3px 11px; border-radius: 999px; }
.po-pts { margin-top: 8px; font-size: 15px; color: var(--muted); font-weight: 600; }
.po-pts b { font-family: var(--display); font-size: 25px; font-weight: 800; color: var(--ink); }
.po-pts small { font-size: 13px; }
.po-feats { list-style: none; margin: 15px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.po-feats li { position: relative; padding-left: 27px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.po-feats li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8A83' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan-opt.pro .po-feats li::before { background-color: #F4E7C6; }
/* 訂閱頁 tab 切換（薄荷底分段控制）*/
.plan-tabs { display: flex; margin: 12px 20px 4px; background: var(--mint); border-radius: 12px; padding: 4px; }
.plan-tab { flex: 1; padding: 10px; border: none; border-radius: 9px; background: transparent; color: var(--teal-dd); font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, color .15s; }
.plan-tab.on { background: var(--teal); color: #fff; }
/* 訂閱頁主視覺＋核心價值 */
.plan-intro { margin-bottom: 22px; }
.pi-photo { position: relative; border-radius: 18px; overflow: hidden; height: 178px; }
.pi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; display: block; }
.pi-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px 16px; background: rgba(20,36,31,.55); color: #fff; }
.pi-title { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.3; }
.pi-sub { font-size: 13px; margin-top: 3px; opacity: .9; }
.pi-values { margin-top: 16px; display: flex; flex-direction: column; gap: 13px; }
.piv { display: flex; gap: 12px; align-items: flex-start; }
.piv-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--mint); color: var(--teal-dd); display: grid; place-items: center; }
.piv-ic .ic { width: 20px; height: 20px; }
.piv-tx { font-size: 14.5px; line-height: 1.45; color: var(--ink); padding-top: 1px; }
.piv-tx b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 1px; color: var(--ink); }
/* ===== 訂閱頁 v2：整頁照片 hero + 比較表 + 狀態頁式分段控制（一頁看完）===== */
/* 不給底色：跟頁面同一塊奶油底，插圖下方不再出現第二個色塊（Edward 2026-07-14）*/
.sub-hero { position: relative; flex-shrink: 0; text-align: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 0 24px; overflow: hidden; }
/* 水彩插圖天生要淺底：深綠底會讓白沙發/米色衣服浮起來發光（Edward 2026-07-14 提供插圖後改）*/
.sub-hero-art { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto 2px; }
.sub-hero-av { position: relative; display: block; width: 78px; height: 78px; margin: 2px auto 15px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 12px 28px -10px rgba(0,0,0,.55); }
.sub-hero-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
/* 釘住：頂部區塊會被滑走，✕ 不能跟著不見、不然使用者關不掉（Edward 2026-07-14）*/
.sub-x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--surface); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.sub-x:active { background: var(--mint-2); }
.sub-x .ic { width: 20px; height: 20px; color: var(--ink); }
/* 照片字幕帶：柔順漸層淡入（照片視覺用漸層＝常規，不是卡片；避免生硬橫切線）*/
.sub-hero-cap { position: relative; color: var(--ink); padding: 0 24px; }
.sub-hero-title { font-family: var(--serif); font-size: 25px; font-weight: 900; line-height: 1.2; letter-spacing: .5px; }
.sub-hero-sub { font-size: 13.5px; margin-top: 6px; color: var(--muted); }
/* 整頁一起捲：原本頂部區塊釘死不動、只有這塊自己捲（Edward 2026-07-14：要能被滑走）*/
.sub-page { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sub-page .sub-body { flex: none; overflow-y: visible; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); }
.sub-seg { position: relative; display: flex; background: var(--ink); border-radius: 100px; padding: 4px; margin-bottom: 14px; }
.sseg-thumb { position: absolute; top: 4px; left: 4px; width: calc((100% - 8px) / 2); height: calc(100% - 8px); background: var(--teal); border-radius: 100px; transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 0; }
.sseg-btn { position: relative; z-index: 1; flex: 1; border: none; background: transparent; padding: 9px; font-family: var(--sans); font-weight: 700; font-size: 14px; color: rgba(244,240,232,.6); cursor: pointer; }
.sseg-btn.on { color: #fff; }
.sub-cycle { position: relative; display: flex; background: var(--mint); border-radius: 100px; padding: 3px; margin-bottom: 14px; }
.scyc-thumb { position: absolute; top: 3px; left: 3px; width: calc((100% - 6px) / 2); height: calc(100% - 6px); background: var(--teal); border-radius: 100px; transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 0; }
.scyc-btn { position: relative; z-index: 1; flex: 1; border: none; background: transparent; padding: 8px; font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--teal-dd); cursor: pointer; }
.scyc-badge { font-style: normal; font-size: 11px; font-weight: 800; background: #C79A3B; color: #fff; padding: 1px 7px; border-radius: 999px; margin-left: 5px; }
.scyc-btn.on .scyc-badge { background: #fff; color: var(--teal-dd); }
.scyc-btn.on { color: #fff; }
.sub-compare { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 16px; background: #fff; }
.scmp-row { display: grid; grid-template-columns: 1fr 92px 92px; align-items: stretch; border-bottom: 1px solid var(--line); }
.scmp-row:last-child { border-bottom: none; }
.scmp-feat { display: flex; align-items: center; padding: 12px 14px; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.scmp-v { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.scmp-v.pro { background: var(--mint); }
.scmp-v .ic.ok { width: 18px; height: 18px; color: var(--teal); }
.scmp-col { position: relative; border: none; background: transparent; padding: 14px 4px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.scmp-col.pro { background: var(--mint); }
.scmp-col b { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); }
.scmp-price { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.scmp-price small { font-size: 10px; }
.scmp-col { border-bottom: 3px solid transparent; }
.scmp-col.sel { border-bottom-color: var(--teal); }
.scmp-col.sel b, .scmp-col.sel .scmp-price { color: var(--teal-dd); }
.scmp-col.sel.pro { border-bottom-color: #C79A3B; }
.scmp-col.sel.pro b, .scmp-col.sel.pro .scmp-price { color: #8A6410; }
.scmp-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #C79A3B; color: #fff; font-size: 9px; font-weight: 800; padding: 1px 8px; border-radius: 0 0 7px 7px; }
/* 選方案卡：兩張並排、圓形勾選點、選中整張高亮（直覺切換）*/
.plan-pick { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ppk { position: relative; text-align: left; border: 2px solid var(--line); border-radius: 18px; padding: 16px 17px 15px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.ppk.pro { background: var(--mint); }
.ppk.sel { border-color: var(--teal); }
.ppk.sel.pro { border-color: #C79A3B; background: #FBF3DF; }
.ppk-radio { position: absolute; top: 14px; right: 13px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff; transition: border-color .15s, background .15s; }
.ppk.sel .ppk-radio { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3px #fff; }
.ppk.sel.pro .ppk-radio { border-color: #C79A3B; background: #C79A3B; }
.ppk-tag { position: absolute; top: 0; left: 0; background: #C79A3B; color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 14px 0 12px 0; }
.ppk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 30px; }
.ppk.pro .ppk-top { margin-top: 4px; }
.ppk-name { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); }
.ppk-price { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.ppk-price small { font-size: 11px; }
.ppk.sel .ppk-price { color: var(--teal-dd); }
.ppk.sel.pro .ppk-price { color: #8A6410; }
.ppk-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ppk-feats li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.4; color: var(--ink); word-break: keep-all; }
/* keep-all 禁止 CJK 字中換行——中文句短沒事，日文長句在特大字級會把方案卡撐寬 29px（證據閘 ja/xl 抓到）。日文放行自然換行。 */
:is(html:lang(ja)) .ppk-feats li { word-break: normal; }
.ppk-save { display: block; font-size: 11.5px; font-weight: 800; color: #C79A3B; margin-top: 3px; }
.ppk-feats li b { font-weight: 800; }
.ppk-feats li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8A83' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat; }
.ppk.pro .ppk-feats li::before { background-color: #F4E7C6; }
.sub-cta { width: 100%; padding: 15px; border: none; border-radius: 16px; background: var(--btn-green); color: #fff; font-family: var(--display); font-weight: 800; font-size: 16px; cursor: pointer; }
.sub-cta:active { transform: scale(.99); }
.sub-cancel { display: block; width: 100%; margin-top: 8px; border: none; background: none; color: var(--muted); font-size: 13px; padding: 7px; cursor: pointer; }
/* 取消訂閱：正規次要按鈕（白底＋邊框、跟主鈕同尺寸、靠底）*/
.sub-cancel2 { display: block; width: 100%; margin-top: 12px; min-height: 50px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, color .15s; }
.sub-cancel2:active { background: rgba(31,45,41,.05); }
.sub-fine { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* 點數規則：同一張頁面直接說清楚月點數與加購點數，不把關鍵限制藏在法務小字。 */
.credit-rules { margin: 0 0 14px; padding: 4px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.credit-rules .cr-row { padding: 11px 0; }
.credit-rules .cr-row + .cr-row { border-top: 1px solid var(--line); }
/* 標題固定寬 → 所有說明對齊同一條垂直線（原本標題長度不一、說明起點像鋸齒）Edward 2026-07-14 */
.cr-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--ink2); font-size: 13px; line-height: 1.45; white-space: normal; }
.cr-row > span:last-child { min-width: 0; }
.cr-row b { flex: 0 0 5.6em; color: var(--ink); font-weight: 800; }
.cr-note { flex: 1; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.cr-row i { flex: 0 0 1px; width: 1px; height: 13px; margin: 0; background: var(--teal); opacity: .7; }
.cr-ic { flex: 0 0 29px; width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; color: var(--teal-dd); background: var(--mint); }
.cr-ic .ic { width: 18px; height: 18px; }
.ppk-rule { display: inline-block; margin-left: 5px; padding: 2px 7px; border-radius: 999px; background: rgba(31,45,41,.06); color: var(--muted); font-size: 10.5px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.points-rules { margin: 14px 0 2px; padding: 14px; gap: 12px; }
.points-rules .cr-row { align-items: flex-start; font-size: 13.5px; }
@media (max-width: 360px) {
.cr-row i { margin-left: 6px; margin-right: 6px; }
.ppk-rule { display: table; margin: 4px 0 0; }
}
/* ===== 安全通知：緊急聯絡人 ===== */
/* 訂閱法務區：恢復購買＋自動續訂說明（蘋果審核要求、放購買鈕下方） */
.sub-legal { font-size: 11.5px; line-height: 1.7; color: var(--muted); margin: 10px 2px 4px; text-align: justify; }
.sub-legal a { color: var(--teal-d); font-weight: 700; text-decoration: none; }
/* 發起活動：日期與時間並排；送出鈕留在表單最下方，跟著內容捲動 */
.dt-row { display: flex; gap: 9px; }
.dt-row .chal-input { flex: 1; min-width: 0; }
/* 意見與建議：NPS 0-10 大按鈕（長輩好按）＋提示列 */
/* 打分數＝拉桿 Bar 條（Edward 7/9）：填色軌道＋大顆好拉的圓鈕＋上方大字回饋 */
.nps-bar { margin: 6px 0 4px; }
.nps-readout { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.nps-readout b { font-family: var(--display); font-size: 34px; font-weight: 900; color: var(--teal-dd); line-height: 1; min-width: 44px; }
.nps-readout span { font-size: 14.5px; color: var(--muted); font-weight: 600; }
#fbPhotoLabel > span { margin-left: .5em; }
.nps-slider { --fill: 80%; -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 100px; outline: none; margin: 6px 0 10px; cursor: pointer;
background: linear-gradient(to right, var(--teal) 0%, var(--teal) var(--fill), var(--mint) var(--fill), var(--mint) 100%); }
.nps-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--teal); box-shadow: 0 4px 10px -3px rgba(35,108,102,.45); cursor: grab; }
.nps-slider::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--teal); box-shadow: 0 4px 10px -3px rgba(35,108,102,.45); cursor: grab; }
.nps-hint { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
/* 類型籤：線條 icon ＋ 文字（同全 App stroke 圖標語言） */
/* 給開發者的建議（Edward 2026-08-01：四個語系的設計體驗要一樣、可以活潑一點）
四國字長差太多——中文「回報問題」四個字、西文「Informar de un problema」二十三個。
自由折行會讓每一國長得都不一樣（中文 3+1、西文一行一顆）。改成固定格子：
上面 2×2 選種類、下面 3 欄選區塊，字長怎麼變版面都不動。 */
.topic-chips.fb-types { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.fb-types .topic-chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
gap: 9px; min-height: 88px; padding: 14px; border-radius: 18px; text-align: left; line-height: 1.3; }
.fb-types .topic-chip .ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--muted); transition: color .15s; }
/* 選到的那張浮起來一點——這一頁是唯一會請人主動說話的地方，值得有點反應 */
.fb-types .topic-chip.on { box-shadow: 0 3px 12px rgba(46, 138, 131, .16); transform: translateY(-1px); }
.fb-types .topic-chip.on .ic { color: var(--teal-d); }
/* 每一格都等高：西文字長會撐成兩行，不補這行同一排就會高低不齊 */
#fbCats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
#fbCats .topic-chip { display: flex; align-items: center; justify-content: center; min-height: 48px;
padding: 9px 6px; text-align: center; line-height: 1.25; }
textarea.chal-input { resize: none; line-height: 1.7; }
/* 想聊的話題：小圓籤（長輩好按的大觸控） */
.topic-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 8px; }
.topic-chip { padding: 10px 15px; border: 2px solid var(--line); border-radius: 100px; background: #fff; font-size: 14.5px; font-weight: 700; color: var(--ink2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.topic-chip.on { border-color: var(--teal); background: var(--mint); color: var(--teal-dd); }
.topic-skip { width: 100%; margin-top: 8px; background: none; border: none; color: var(--muted); font-size: 13.5px; padding: 8px; cursor: pointer; display: none; }
.safety-picks { display: flex; gap: 10px; margin-bottom: 4px; }
.safety-pick { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 6px; border: 2px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.safety-pick .init-ava { width: 46px; height: 46px; font-size: 17px; }
.safety-pick .sp-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.safety-pick .sp-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); display: none; place-items: center; }
.safety-pick .sp-check .ic { width: 13px; height: 13px; color: #fff; stroke: #fff; }
.safety-pick.on { border-color: var(--teal); background: var(--mint); }
.safety-pick.on .sp-check { display: grid; }
.safety-triggers { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.safety-triggers li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); line-height: 1.4; }
.safety-triggers .st-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.safety-triggers .st-ic .ic { width: 19px; height: 19px; color: #fff; stroke: #fff; fill: none; }
.safety-triggers .st-ic.bp { background: var(--teal); }
.safety-triggers .st-ic.hr { background: var(--coral-d); }
.safety-triggers .st-ic.ox { background: var(--teal-d); }
.safety-triggers .st-ic.fall { background: #C79A3B; }
.safety-flow { margin-top: 18px; background: var(--mint); border-radius: 16px; padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; }
.sf-step { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.sf-step b { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--display); font-size: 13px; display: grid; place-items: center; margin-top: 1px; }
/* 選段切換的落點感 */
.seg-btn.on { animation: tabIn .2s ease both; }
.task-progress { font-weight: 800; }
/* 邀請家人（真流程 v1：邀請碼＋傳送/複製；帳號系統上線後接真碼） */
.inv-code { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--teal-d); background: var(--mint); border-radius: 14px; padding: 14px; margin: 12px 0 14px; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: 3px; color: var(--teal-dd); font-variant-numeric: tabular-nums; }
.inv-copy { display: block; width: 100%; margin-top: 10px; padding: 12px; border: 1.5px solid var(--teal-d); border-radius: 14px; background: #FFF; color: var(--teal-dd); font-family: var(--display); font-size: 15px; font-weight: 700; cursor: pointer; }
.inv-note { font-size: 14px; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.6; }
/* 家人個人頁反應鍵列：先收起（Edward 7/5 拍板、功能未定案；恢復＝刪此行） */
.react-row { display: none; }
/* 投票卡：選項列（點了才亮票數、自己那票打勾） */
.vote-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.vote-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 13px; background: #FFF; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.vote-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mint); transition: width .5s cubic-bezier(.4,0,.2,1); }
.vote-opt .vo-txt, .vote-opt .vo-n, .vote-opt .vo-check { position: relative; }
.vote-opt .vo-n { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vote-opt.mine { border-color: var(--teal-d); }
.vote-opt .vo-check { color: var(--teal-dd); font-weight: 800; }
.vote-opt.voted { cursor: default; }
.vo-no { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--teal-dd); display: grid; place-items: center; font-size: 13px; font-weight: 800; position: relative; }
/* 選項色標（Edward 2026-08-01「有點單調」）
一色一選項，投票前畫面就有分別；進度條用同一色的淡版，投完票一眼看出哪一條是哪個選項。 */
.vote-opt.v-teal .vo-no { background: #D9EFE8; color: #1A7268; }
.vote-opt.v-coral .vo-no { background: #FBE3D2; color: #A85A22; }
.vote-opt.v-gold .vo-no { background: #F7EBCF; color: #8A6410; }
.vote-opt.v-sage .vo-no { background: #E2EBDF; color: #4A6B4E; }
.vote-opt.v-plum .vo-no { background: #EFE2E8; color: #82486A; }
.vote-opt.v-teal i { background: #D2EDE6; }
.vote-opt.v-coral i { background: #FADFCC; }
.vote-opt.v-gold i { background: #F6E9C9; }
.vote-opt.v-sage i { background: #DFEADB; }
.vote-opt.v-plum i { background: #EFDFE7; }
/* 領先的選項：左邊一道金色，不整塊變色——長輩看得出「這個最多人選」，
但沒投的那幾個也不會像被劃掉。 */
.vote-opt.lead { border-color: #E8C77E; box-shadow: inset 3px 0 0 #E0B354; }
/* 投票的人（誰選了這個）。頭像小一圈、互相疊一點，塞得下四個還不擠。 */
.vote-opt .vo-faces { position: relative; display: flex; align-items: center; margin-left: auto; }
.vote-opt .vo-faces .init-ava { width: 25px; height: 25px; border-radius: 50%; font-size: 11.5px; font-weight: 700; margin-left: -5px; border: 2px solid #fff; flex: 0 0 25px; }
.vote-opt .vo-faces .init-ava:first-child { margin-left: 0; }
.vote-opt .vo-faces .vo-more { margin-left: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.vote-opt .vo-faces + .vo-n { margin-left: 8px; }
/* 抽獎卡：開獎鍵（次要描邊）＋中獎行 */
.draw-body { margin-top: 8px; }
.draw-now { display: block; width: 100%; margin-top: 8px; min-height: 44px; border: 1.5px solid var(--teal-d); border-radius: 13px; background: #FFF; color: var(--teal-dd); font-family: var(--display); font-size: 14px; font-weight: 700; cursor: pointer; }
/* 不是發起人時看到的：跟按鈕一樣的位置與高度，但明顯不是可以按的東西
（Edward 2026-08-01「開獎應該是 owner 的事」）。 */
.draw-wait { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 8px; min-height: 44px; border-radius: 13px; background: var(--mint); color: var(--teal-dd); font-family: var(--sans); font-size: 14px; font-weight: 600; }
/* 抽一張（Edward 2026-08-01「抽獎應該是用戶能有抽的體驗，抽完才是等開獎」）。
做成一張卡片的樣子而不是普通按鈕——要看得出「這裡有東西可以抽」。 */
.draw-pick { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; min-height: 52px; border: none; border-radius: 15px; background: linear-gradient(135deg, #F4B860 0%, #E09B45 100%); color: #fff; font-family: var(--display); font-size: 15.5px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(214, 148, 62, .32); -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.draw-pick:active { transform: scale(.97); }
.draw-pick .dp-card { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .28); padding: 5px; }
.draw-pick .dp-card svg { display: block; width: 100%; height: 100%; }
/* 活動卡上的「我做了沒」狀態標（Edward 2026-08-01「抽了或還沒抽也應該有個外層狀態」）
四種：還沒抽（橘、該你動了）／抽到了（金）／沒抽到（灰）／獎被抽完了（灰）。
顏色本身就是訊息——不必讀完字也知道要不要點進去。 */
.qc-state { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.qc-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qc-state.todo { background: var(--coral-soft); color: var(--coral-text); }
.qc-state.got { background: #FBEFD3; color: #8A6410; }
.qc-state.miss, .qc-state.over { background: #EFEDE8; color: var(--muted); }
/* 多獎項（Edward 2026-08-01「大獎、二獎、安慰獎」）
建立表單：一行一個獎，名稱佔滿、右邊選幾位；第一行是主獎不給移除。 */
.prize-list { display: flex; flex-direction: column; gap: 8px; }
.prize-row { display: flex; align-items: center; gap: 8px; }
.prize-row .pz-name { flex: 1; min-width: 0; }
/* 等級標籤是系統給的（大獎／二獎／安慰獎），使用者只填獎品內容 */
.prize-row .pz-tier { flex: 0 0 52px; font-size: 13.5px; font-weight: 700; color: var(--teal-dd); }
.prize-row .pz-count { flex: 0 0 84px; height: 46px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; font-family: var(--sans); font-size: 15px; color: var(--ink); }
/* 第一行沒有移除鍵，但要留同寬的位置——不然它的輸入框比下面幾行寬，整排看起來是歪的 */
.prize-row:first-child { padding-right: 42px; }
.prize-row .pz-del { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border: none; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prize-row .pz-del svg { width: 16px; height: 16px; }
.pz-add { display: block; margin: 10px 0 0; padding: 0; border: none; background: none; color: var(--teal-dd); font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 活動卡上把獎項攤開：看得到自己在抽什麼、各有幾個名額 */
.prize-board { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; border-radius: 13px; overflow: hidden; background: var(--line); }
.prize-board .pb-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mint); }
.prize-board .pb-tier { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--teal-d); padding: 3px 8px; border-radius: 999px; }
.prize-board .pb-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prize-board .pb-count { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--teal-dd); }
/* 抽完就沒名額的那一列淡掉——「先搶先有」要看得見 */
.prize-board .pb-row.gone { background: #F0EDE7; }
.prize-board .pb-row.gone .pb-tier { background: #C2C8C5; }
.prize-board .pb-row.gone .pb-name { color: var(--muted); text-decoration: line-through; }
.prize-board .pb-row.gone .pb-count { color: var(--muted); }
/* 自己抽到什麼（Edward 2026-08-01「直接顯示用戶設定的獎項」＋「下面顯示找誰領獎」）
這張卡是抽完最先看到的東西，本來靜靜出現太平淡——進場給它彈一下、
金光橫掃過去一次，獎牌再亮一下。全部只跑一次就停（Edward 2026-08-01：「跑一次就好，不用輪播」）——一直在動的畫面看久了是吵的。 */
.draw-got { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 15px; border-radius: 15px; background: linear-gradient(135deg, #FBF0D5 0%, #F6E4BC 100%); box-shadow: inset 0 0 0 1.5px #E8C77E; animation: got-pop .52s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes got-pop { 0% { opacity: 0; transform: scale(.86) translateY(8px); } 60% { opacity: 1; transform: scale(1.03) translateY(0); } 100% { opacity: 1; transform: scale(1); } }
/* 金光掃過：一道斜向亮帶從左掃到右，只跑一次 */
.draw-got::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .72) 48%, transparent 66%); transform: translateX(-120%); animation: got-shine 1.1s .28s ease-out both; pointer-events: none; }
@keyframes got-shine { to { transform: translateX(120%); } }
.draw-got .dg-ico { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: #E0B354; color: #fff; animation: ico-in .6s .1s cubic-bezier(.2, 1.6, .4, 1) both, ico-glow 1.6s .7s ease-in-out 1 both; }
@keyframes ico-in { 0% { transform: scale(.4) rotate(-32deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes ico-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 179, 84, .5); } 50% { box-shadow: 0 0 0 7px rgba(224, 179, 84, 0); } }
.draw-got .dg-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.draw-got .dg-tier { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: #8A6410; background: rgba(255, 255, 255, .7); padding: 2px 8px; border-radius: 999px; }
.draw-got .dg-txt b { font-size: 16px; font-weight: 700; color: var(--ink); }
.draw-got .dg-txt small { font-size: 12.5px; color: #7A5A18; line-height: 1.5; }
/* 沒抽到就不要慶祝——輕輕淡入就好，不彈跳、不掃光。
對一個剛落空的人放煙火是刺人的。 */
.draw-got.miss { background: var(--mint); box-shadow: none; animation: miss-in .34s ease-out both; }
.draw-got.miss::after { display: none; }
@keyframes miss-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.draw-got.miss .dg-txt b { color: var(--ink-2); font-size: 15px; }
.draw-got.miss .dg-txt small { color: var(--muted); }
/* 翻牌定格的「咚」：轉完最後一下放大再回來，讓結果落地有重量。
定格之後那幾秒不能是死畫面——獎項名持續發著金光呼吸，禮物盒也停下來不再亂搖。 */
.draw-roll .dr-prize.locked { animation: prize-lock .42s cubic-bezier(.2, 1.6, .35, 1), prize-hold 1.6s .42s ease-in-out 1 both; }
@keyframes prize-lock { 0% { transform: scale(1.35); filter: brightness(1.6); } 60% { transform: scale(.97); } 100% { transform: scale(1); filter: none; } }
@keyframes prize-hold { 0%, 100% { text-shadow: 0 0 0 rgba(224, 179, 84, 0); } 50% { text-shadow: 0 0 20px rgba(224, 179, 84, .6); } }
/* 定格後禮物盒改成輕輕浮動，不再左右晃——晃是「還在抽」的訊號，抽完就該停 */
.draw-stage:has(.dr-prize.locked) .ds-gift { animation: none; }
@keyframes gift-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
.draw-roll .dr-prize.locked { animation: none !important; }
.draw-stage:has(.dr-prize.locked) .ds-gift { animation: none !important; }
}
/* 獎項板一列一列滑進來（最多四列，錯開得很短、不拖時間） */
.prize-board .pb-row { animation: pb-in .34s ease-out both; }
.prize-board .pb-row:nth-child(2) { animation-delay: .05s; }
.prize-board .pb-row:nth-child(3) { animation-delay: .1s; }
.prize-board .pb-row:nth-child(4) { animation-delay: .15s; }
@keyframes pb-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* 還抽得到的那幾列，右邊的「還剩 N 個」輕輕呼吸，暗示這是會變的數字 */
.prize-board .pb-row:not(.gone) .pb-count { animation: none; }
@keyframes left-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* 會動的東西一律尊重系統的「減少動態效果」設定——長輩對晃動比較敏感 */
@media (prefers-reduced-motion: reduce) {
.draw-got, .draw-got .dg-ico, .draw-got.miss, .prize-board .pb-row, .draw-roll .dr-prize.locked { animation: none !important; }
.draw-got::after { display: none; }
.prize-board .pb-row:not(.gone) .pb-count { animation: none; }
.draw-stage .ds-gift { animation: none; }
.draw-confetti i { display: none; }
}
/* 其他人抽到什麼 */
.pick-list { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; border-radius: 13px; overflow: hidden; background: var(--line); }
.pick-list .pk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: #fff; }
.pick-list .pk-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.pick-list .pk-got { font-size: 13px; font-weight: 700; color: #8A6410; }
.pick-list .pk-got.miss { color: var(--muted); font-weight: 600; }
.draw-roll .dr-prize { font-size: 26px; }
/* 開獎結果：多個獎項時列成一張榜，自己中的那行標出來 */
.draw-win-card.multi .dw-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin: 2px 0 10px; }
.draw-win-card.multi .dw-list { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 12px; }
.draw-win-card.multi .dw-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-radius: 11px; background: rgba(255, 255, 255, .62); }
.draw-win-card.multi .dw-item.me { background: #FBEFD3; box-shadow: inset 0 0 0 1.5px #E0B354; }
.draw-win-card.multi .dw-prize-name { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.draw-win-card.multi .dw-item b { font-size: 15.5px; font-weight: 700; color: var(--ink); }
/* 抽完之後：自己的號碼一直看得到，開獎時才知道中沒中 */
.draw-mine { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 13px 15px; border-radius: 15px; background: var(--mint); }
.draw-mine .dm-no { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--teal-dd); font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: .5px; box-shadow: 0 1px 4px rgba(26, 114, 104, .16); }
.draw-mine .dm-txt { display: flex; flex-direction: column; gap: 2px; }
.draw-mine .dm-txt b { font-size: 15px; font-weight: 700; color: var(--ink); }
.draw-mine .dm-txt small { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.draw-roll .dr-num { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.draw-win { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.draw-win b { color: var(--ink); }
/* MUNEA-STATUS-PORT-CSS */
/* ===== 狀態頁 V1-Status 設計檔移植（Edward 7/7 · 完全比照 handoff · scope #status 不污染別頁） ===== */
#status { --mint2: var(--mint-2); --ink2: var(--ink-2); }
#status .serif { font-family: var(--serif); }
/* 狀態頁的標題原本自己一套（27px/900、位置也比別頁高 14px），四頁看起來不齊。
* 2026-08-01 Edward 問「每個頁面都有統一了嗎」——查出來就是這一頁沒有。
* 改成跟 .page-title 同一組規格（24px/800、上下留白一致）。 */
#status .h1 { font-size: 24px; font-weight: 800; letter-spacing: 0; line-height: 1.2;
min-height: 44px; display: flex; align-items: center; margin: 6px 0 16px; }
/* 2026-08-01 二修：上次補的 8px 補反了——我量的是「框」的位置（四頁都一樣），
* 但真正看得到的是「字形」的位置，那個差 8px。Edward 一眼看出來、我的量測法沒有。
* 這裡改回 6px，並用字形位置驗證（見下一條註解）。 */
#status .card, #family .card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
#status .row, #family .row { display: flex; align-items: center; }
#status .chip, #family .chip { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; white-space: nowrap; } /* 7/9 Edward：家人頁標籤與狀態頁同規範（原只掛 #status、家人頁變螢光方塊） */
#status .mnum, #family .mnum { font-family: var(--serif); font-weight: 900; line-height: 1; }
#status .moodface { border: none; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .15s; }
#status .moodface:hover { transform: translateY(-2px); }
#status .moodface .fring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: box-shadow .18s; }
#status .moodface .flab { font-size: 10.5px; font-weight: 700; transition: color .18s; }
#status .st-seg span { transition: all .2s; }
@keyframes breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
/* 情緒球待命：細微橡膠晃動（非均勻縮放＝氣球感）*/
@keyframes orbJelly { 0%,100% { transform: scale(1,1) } 28% { transform: scale(1.035,.965) } 52% { transform: scale(.975,1.025) } 76% { transform: scale(1.02,.99) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.16) } }
@keyframes dash { to { stroke-dashoffset: 0 } }
@keyframes mmFade { from { opacity: 0 } to { opacity: 1 } }
.book-demo-note { font-size: 12.5px; color: var(--muted); margin: -2px 2px 12px; line-height: 1.5; }
/* 聊聊待命態溫度（女巫 Top #2 · 2026-07-07） */
.face-name .fn-status { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); }
html[lang="es"] .face-name { gap: 6px; }
html[lang="es"] .face-name .fn-status { font-size: 12px; }
/* .face-idle-hi 招呼字泡已拿掉（Edward 2026-07-16）——樣式一併清除 */
.face-screen[data-state="idle"] .avatar-mouth { opacity: 0; }
/* 聊聊沉浸式：左上離開鍵（navbar 收起後的出口） */
/* 關閉聊聊 X：放在原本 navbar「聊聊」的底部中央位置，收掉通話回首頁 */
.face-exit { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); cursor: pointer; background: rgba(0,0,0,.44); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; box-shadow: 0 12px 28px -12px rgba(0,0,0,.62); }
.face-exit .ic { width: 27px; height: 27px; color: #fff; }
.face-exit:active { transform: translateX(-50%) scale(.9); }
/* 個人資料頭像上傳（Edward 7/7） */
.pf-avatar-row { display: flex; align-items: center; gap: 18px; margin: 2px 0 14px; }
.pf-avatar-wrap { position: relative; flex: 0 0 78px; width: 78px; height: 78px; }
.pf-avatar { width: 78px; height: 78px; border-radius: 50%; background: var(--mint); color: var(--teal-dd); display: grid; place-items: center; overflow: hidden; background-size: cover; background-position: center; }
.pf-avatar .pf-avatar-placeholder { width: 32px; height: 32px; stroke-width: 1.7; }
.pf-avatar.has-photo .pf-avatar-placeholder { display: none; }
.pf-avatar-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.pf-avatar-btn { min-height: 44px; border: 1.5px solid var(--teal-d); background: #fff; color: var(--teal-dd); font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.pf-avatar-btn:active { transform: scale(.97); }
.pf-avatar-clear { position: absolute; right: -10px; bottom: -9px; width: 44px; height: 44px; border: 4px solid var(--surface); border-radius: 50%; background: var(--ink-2); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 4px 12px rgba(31,42,41,.2); }
.pf-avatar-clear[hidden] { display: none; }
.pf-avatar-clear .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.pf-avatar-clear:active { transform: scale(.94); }
.pf-avatar-clear:focus-visible, .pf-avatar-btn:focus-visible { outline: 3px solid rgba(58,168,160,.28); outline-offset: 2px; }
.pf-avatar-hint { font-size: 12px; color: var(--muted); }
/* 用藥時段時間：可直接點選（Edward 7/7） */
input.ms-time { border: none; background: none; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; padding: 2px 2px; cursor: pointer; }
input.ms-time::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input.ms-time:focus { outline: none; color: var(--teal-dd); }
.ms-time-control { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 34px; border-radius: 9px; }
.ms-time-display { color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.ms-time-control input.ms-time { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
.ms-time-control:focus-within { outline: 2px solid var(--teal-d); outline-offset: 2px; }
/* 藥物照片（Edward 7/7） */
.med-photo-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.med-photo-box { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: var(--mint); color: var(--teal-dd); display: grid; place-items: center; overflow: hidden; background-size: cover; background-position: center; border: 1.5px dashed var(--teal-d); cursor: pointer; }
.med-photo-box.has { border-style: solid; }
.med-photo-box .ic { width: 24px; height: 24px; }
.med-photo-box.has .ic { display: none; }
.med-photo-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.med-photo-btn { border: 1.5px solid var(--teal-d); background: #fff; color: var(--teal-dd); font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.med-photo-hint { font-size: 12px; color: var(--muted); }
.ms-thumb { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background-size: cover; background-position: center; margin-right: 10px; cursor: pointer; border: 1px solid var(--line); }
.task-ico.med-photo-ico { background-color: transparent !important; }
.task-ico.med-photo-ico .ic { display: none; }
.med-lightbox { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; background: rgba(20,16,12,.74); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.med-lightbox.show { display: flex; }
.mlb-card { text-align: center; }
.mlb-card img { width: min(300px,74vw); height: min(300px,74vw); object-fit: cover; border-radius: 22px; box-shadow: 0 22px 54px -12px rgba(0,0,0,.5); }
.mlb-name { color: #fff; font-family: var(--serif); font-weight: 900; font-size: 20px; margin-top: 16px; }
.mlb-close { margin-top: 14px; border: none; background: rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: 15px; padding: 11px 30px; border-radius: 999px; cursor: pointer; }
/* 照片上傳「處理中」狀態（Edward 7/7） */
.med-photo-box.processing, .pf-avatar.processing { position: relative; }
.med-photo-box.processing::after, .pf-avatar.processing::after { content: '處理中'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--teal-dd); background: rgba(255,255,255,.72); border-radius: inherit; animation: mn-pulse 1s ease-in-out infinite; }
@keyframes mn-pulse { 50% { opacity: .45; } }
/* 健康圈機制（Edward 7/7） */
.fc-top { display: flex; align-items: center; gap: 12px; background: var(--mint); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 4px 0 14px; }
.fc-recip-av { flex: 0 0 44px; width: 44px; height: 44px; font-size: 18px; }
.fc-recip-info { flex: 1; min-width: 0; }
.fc-recip-info b { display: block; font-family: var(--serif); font-weight: 900; font-size: 16px; color: var(--ink); }
.fc-recip-info span { font-size: 12.5px; color: var(--muted); }
.fc-count { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--teal-dd); background: #fff; border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rl-wrap .rl { position: relative; }
.fc-remove { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.fc-remove:active { transform: scale(.96); }
.fc-you { margin-left: auto; font-size: 12px; color: var(--teal-dd); font-weight: 800; }
.fc-link { display: block; width: 100%; margin-top: 12px; border: 1.5px solid var(--teal-d); background: #fff; color: var(--teal-dd); font-weight: 700; font-size: 15px; padding: 12px; border-radius: 14px; cursor: pointer; }
.fc-leave { display: block; width: 100%; margin-top: 10px; border: none; background: none; color: var(--danger-d); font-weight: 700; font-size: 14px; padding: 8px; cursor: pointer; }
.fc-remove.arm { background: var(--coral-soft); color: var(--danger-d); border-color: transparent; }
.fc-leave.arm { background: var(--coral-soft); border-radius: 999px; }
.fc-privacy { font-size: 14px; color: var(--muted); text-align: center; line-height: 1.6; margin-top: 14px; }
.jc-code { text-align: center; letter-spacing: 3px; font-family: var(--display); font-size: 20px; font-weight: 800; text-transform: uppercase; }
/* 訂閱頁 v2：產品價值 + 適合誰 + 堆疊卡（Edward 7/7 去寧寧、講優勢） */
.sub-intro { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 2px 2px 12px; }
.sub-intro b { color: var(--ink); font-weight: 800; }
.sub-value { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.sv-row { display: flex; gap: 13px; align-items: flex-start; }
.sv-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; background: var(--mint); display: grid; place-items: center; }
.sv-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--teal-dd); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-txt b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.sv-txt small { display: block; font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.sub-sec-label { font-family: var(--serif); font-weight: 900; font-size: 16px; color: var(--ink); margin: 4px 2px 12px; }
.ppk-who { font-size: 12.5px; color: var(--muted); margin: 3px 0 12px; }
.ppk.sel.pro .ppk-who { color: #8A6410; }
/* 家人狀態：統一紅綠燈狀態 + 一詞（Edward 2026-07-07 工整/心情對應/警示） */
.health-row .hr-status { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; min-width: 40px; }
.health-row .hr-dot { width: 11px; height: 11px; border-radius: 50%; }
.health-row .hr-slabel { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.health-row .hr-status.ok .hr-dot { background: var(--teal); }
.health-row .hr-status.ok .hr-slabel { color: var(--teal-dd); }
.health-row .hr-status.watch .hr-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(224,179,84,.22); }
.health-row .hr-status.watch .hr-slabel { color: #8A6410; }
.health-row .hr-status.alert .hr-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(229,91,77,.2); }
.health-row .hr-status.alert .hr-slabel { color: var(--danger); }
.health-row .hr-status.off .hr-dot { background: #C9CFC6; }
.health-row .hr-status.off .hr-slabel { color: var(--muted); }
/* 家人傳話提示（Edward 2026-07-07） */
.relay-hint { display: flex; gap: 11px; align-items: center; background: var(--mint); border: 1px solid var(--mint-2); border-radius: 15px; padding: 12px 14px; margin-bottom: 16px; }
.relay-hint .rh-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: #fff; display: grid; place-items: center; }
.relay-hint .rh-ic .ic { width: 17px; height: 17px; color: var(--teal-dd); fill: none; stroke: currentColor; stroke-width: 2; }
.relay-hint .rh-tx { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.relay-hint .rh-tx b { color: var(--teal-dd); font-weight: 800; }
/* ===== 等待中動態（Edward 7/8：Loading 要有動態，不然像當機）===== */
@keyframes mn-spin { to { transform: rotate(360deg); } }
/* 按鈕忙碌：文字後面加一個轉圈 */
.busy-spin { pointer-events: none; opacity: .88; }
.busy-spin::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px;
border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mn-spin .7s linear infinite; }
/* 聊聊「接通中/接回來中」：提示字尾加轉圈（深色底跟字同色） */
.cap-busy::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 7px; vertical-align: -1.5px;
border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mn-spin .7s linear infinite; }
/* ===== 通話狀態卡（2026-07-23 排隊／全滿 → 2026-07-24 Edward 拍板 P0 擴成通用失敗卡＋視覺修）=====
深色玻璃卡疊在人物畫面中央偏上，跟字幕框同一套視覺語言；字級放大給長輩看
2026-07-24 視覺修：大字色改用畫面既有的亮薄荷色（跟 .face-wave 收音波同色，不再是孤色）；
按鈕邊框拉到 3:1 以上；說明字級升到 16px（原 14.5px 是全卡最小字，關鍵行為說明反而最不顯眼）。*/
.busy-card { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); z-index: 8; /* 中央偏下：把人物的眼神留出來——她人在、只是忙 */
width: min(320px, calc(100% - 56px));
background: rgba(8,18,15,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.14); border-radius: 22px;
padding: 22px 20px; text-align: center; color: #FFF; font-family: var(--sans);
box-shadow: 0 24px 48px -20px rgba(0,0,0,.65); }
.busy-card[hidden] { display: none; }
.bc-ring { width: 30px; height: 30px; margin: 0 auto 12px;
border: 3px solid rgba(255,255,255,.22); border-top-color: var(--teal);
border-radius: 50%; animation: mn-spin 1s linear infinite; }
.busy-card[data-mode="full"] .bc-ring, .busy-card[data-mode="error"] .bc-ring { display: none; } /* 全滿／失敗態不是「還在等」，不轉圈 */
.bc-title { font-size: 19px; font-weight: 800; line-height: 1.45; }
.bc-pos { margin-top: 10px; font-size: 17px; color: rgba(255,255,255,.9); }
.bc-pos b { font-size: 30px; font-weight: 800; color: #3ED4C2; margin: 0 3px; } /* 統一到畫面既有的亮薄荷色（.face-wave 同色），原 #7FD8CE 是孤色 */
.bc-pos:empty { display: none; }
.bc-note { margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); } /* 14.5px→16px：關鍵行為說明不該是全卡最小字 */
.bc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bc-btn { width: 100%; padding: 12px 0; border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14);
color: #FFF; font-size: 16px; font-weight: 700; font-family: var(--sans); margin-top: 0; }
.bc-btn:active { background: rgba(255,255,255,.26); }
.bc-btn.bc-btn-alt { background: transparent; border-color: rgba(255,255,255,.4); font-weight: 600; } /* 次要出口：視覺退一階，主按鈕仍最顯眼 */
.bc-btn.bc-btn-alt:active { background: rgba(255,255,255,.12); }
.bc-btn[hidden] { display: none; }
/* ===== 全滿出口：先用文字聊（2026-07-24 Edward 拍板 P0）=====
蓋在通話畫面上的簡單文字面板；不佔 Avatar／即時語音席位、走既有 /chat 文字管線，別新造頁面。*/
.text-chat-panel { position: absolute; inset: 60px 18px 92px; z-index: 9;
display: flex; flex-direction: column; background: rgba(255,255,255,.97);
border-radius: 22px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.55); overflow: hidden; }
.text-chat-panel[hidden] { display: none; }
.tc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tc-row { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 16px; line-height: 1.5; word-break: break-word; }
.tc-row.tc-user { align-self: flex-end; background: var(--btn-green); color: #fff; border-bottom-right-radius: 4px; }
.tc-row.tc-ai { align-self: flex-start; background: var(--mint); color: var(--ink); border-bottom-left-radius: 4px; }
.tc-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.tc-input-row textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px;
padding: 10px 12px; font-size: 16px; font-family: var(--sans); max-height: 88px; color: var(--ink); }
.tc-input-row button { flex: 0 0 auto; padding: 0 18px; height: 44px; border-radius: 14px; border: none;
background: var(--btn-green); color: #fff; font-weight: 700; font-size: 15px; }
.tc-input-row button.busy-spin { color: rgba(255,255,255,.85); }
/* 撥通中的波紋規則已改寫到上方 .face-wave 那段（2026-08-10）：
7/9 當時是「撥通中不顯示波紋」；8/10 Edward 反過來要求「接通就要看到靜止狀態」，
舊的 wave-boot 假 loading 動畫連同九根 一起退場，改由 canvas 畫真的靜止點線。 */
/* 抽獎儀式（Edward 7/9：開獎要有動畫、中獎要有慶祝；全用自家色盤、不用外部素材） */
.draw-stage { position: relative; overflow: hidden; text-align: center; padding: 20px 12px 22px; background: var(--gold-soft); border: 1.5px solid var(--gold); border-radius: 18px; margin-top: 10px; }
.draw-stage .ds-gift { width: 46px; height: 46px; margin: 0 auto 10px; color: var(--coral-d); animation: gift-rock .5s ease-in-out infinite; }
@keyframes gift-rock { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.draw-roll .dr-name { display: block; font-family: var(--display); font-size: 27px; font-weight: 800; color: var(--ink); min-height: 38px; }
.draw-roll small { display: block; font-size: 14px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.draw-confetti i { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 3px; opacity: 0; animation: conf-fall 1.6s ease-in forwards; }
@keyframes conf-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(210px) rotate(560deg); } }
.draw-win-card { position: relative; z-index: 1; animation: win-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.draw-win-card.nopop { animation: none; }
.draw-win-card .dw-ico { width: 46px; height: 46px; border-radius: 999px; background: var(--gold); color: #fff; display: grid; place-items: center; margin: 0 auto 10px; }
.draw-win-card .dw-name { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--ink); }
.draw-win-card .dw-prize { font-size: 18px; color: var(--ink); font-weight: 800; margin-top: 3px; }
.draw-win-card .dw-claim { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; }
@keyframes win-pop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* 聊聊臉：靜態照「完全靜止」——不要任何假呼吸/漂浮（Edward 2026-07-10 拍板：只有 Ditto 雲端臉的真表情動態，靜態圖一律不動）。
會動＝雲端臉引擎接上後蓋過這層；沒接上時就是一張乾淨靜止照，不做任何縮放/位移。 */
.face-screen .face-bg img { animation: none !important; }
/* 家人頁 · 左右切換鍵（Edward 7/9：不能只靠隱藏手勢，要看得到怎麼換人） */
.pt-nav { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface);
color: var(--teal-dd); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.pt-nav .ic { width: 20px; height: 20px; }
.pt-nav:disabled { opacity: .32; }
.pt-nav:active:not(:disabled) { background: var(--mint); }
/* 心率 / 血氧 磚色（沿用現有色盤語彙） */
.stat-tile.t-hr .st-ico { background: var(--coral-soft); color: var(--coral-d); }
.stat-tile.t-spo2 .st-ico { background: var(--mint-2); color: var(--teal-dd); }
/* ===== 家人詳細頁 v1.4.2（Edward 7/9 UIUX 整修）===== */
.person-top .pt-nav#personBack { margin-right: 2px; }
.mc-range { margin-top: 14px; }
.mc-range .trend-tabs { width: 100%; }
.mc-range .trend-tabs button { flex: 1; }
.mc-range-body { margin-top: 14px; }
.mood-mini { display: flex; justify-content: space-between; gap: 4px; }
.mood-mini .mm-day { text-align: center; flex: 1; }
.mood-mini .mm-dot { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto; }
.mood-mini .mm-lab { font-size: 14px; color: var(--muted); margin-top: 6px; font-weight: 700; }
.mood-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.mood-grid i { height: 22px; border-radius: 5px; display: block; }
/* 撥通中：按鈕上三點循環（真的接通才變「結束通話」）*/
#callToggle .dial-dots { display: inline-flex; gap: 1px; margin-left: 2px; }
#callToggle .dial-dots i { font-style: normal; animation: dialDot 1.2s ease-in-out infinite; }
#callToggle .dial-dots i:nth-child(2) { animation-delay: .2s; }
#callToggle .dial-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dialDot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* 通話鈕：長方形（Edward 2026-07-12：圓鈕不行、回原始長方形設計版）——但固定寬度＝三個文字狀態(開始通話/撥號中/結束通話)都同寬、
永遠不撐大擠掉左邊的字幕/麥克風；照設計系統的圓角(--radius-sm)/字體(--display)/色。不用太大。 */
.face-bar .call-btn { flex: 0 0 auto; width: 138px; min-width: 138px; min-height: 52px; padding: 0 18px;
border-radius: var(--radius-sm); gap: 9px; font-family: var(--display); font-size: 16px; font-weight: 700;
justify-content: center; }
.face-bar .call-btn .ic { width: 20px; height: 20px; flex-shrink: 0; }
.face-bar .call-btn.dialing { background-color: var(--coral); cursor: progress; }
#callToggle.dialing .dial-dots i { font-size: .85em; } /* 撥號中的小三點（含在固定寬內、不撐大） */
/* 揪一攤 RSVP + 一起運動進度（Edward 7/9：三種活動補完整） */
.rsvp-btns { display: flex; gap: 10px; margin: 12px 0 4px; }
.rsvp-btn { flex: 1; min-height: 46px; border-radius: 14px; font-family: var(--display); font-size: 16px; font-weight: 800; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); }
.rsvp-btn.go.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.rsvp-btn.no.on { background: var(--coral-soft); border-color: var(--coral); color: var(--ink); }
.walk-bar { height: 12px; border-radius: 999px; background: var(--mint-2); overflow: hidden; margin: 12px 0 8px; }
.walk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--teal); transition: width .5s ease; }
.walk-sum { font-family: var(--display); font-size: 16px; color: var(--teal-dd); margin-bottom: 12px; }
.walk-sum b { font-size: 20px; }
.walk-people { display: flex; flex-direction: column; gap: 8px; }
.walk-p { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.walk-p .init-ava { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }
.walk-p b { flex: 1; color: var(--ink); }
.walk-p span:last-child { color: var(--teal-dd); font-weight: 700; }
.rsvp-btn:disabled { opacity: .5; cursor: default; }
.inv-temp-note { font-size: 13px; line-height: 1.55; color: var(--ink); background: var(--coral-soft); border-radius: 12px; padding: 9px 12px; margin: -4px 0 12px; }
/* ===== 拉丁語系版型修正（Edward 2026-08-01 走查英文版後立）=====
* 中文一個字一格、英文與西班牙文一個詞好幾格——同一個字級，中文排得剛好的地方
* 換成英文就爆框或折行。Edward 現場點出四處：通話控制鈕的字跑出圓圈、
* 家庭活動兩顆鈕的字折成兩行、頁面大標「Family health circle」折行、
* 設定頁列表的標題折行把右邊的值擠掉。
*
* 原則：只調「版面會被撐破」的地方——大標題、固定寬度的控制項、有右欄的列表。
* 內文不調。英文內文比中文多一行是正常的，把內文縮小反而害長輩看不清，
* 那是為了版面犧牲可讀性、方向錯了。
*
* 只掛 en / es。中文與日文都是一字一格、本來就排得下，不受影響。 */
/* 頁面大標：四語同一個字級與粗細（Edward 2026-08-01：「標題的字體大小與字粗
* 不同語系的所有頁面都要統一」「位置也要一致」）。
* 原本中日 28px、英西 23px——那是我為了塞下英文才分開調的，結果同一個 App
* 換個語言標題就變大變小，看起來像兩個產品。
* 24px 是「四語每一頁都放得下一行」的最大值（量過首頁／家人／設定／裝置四頁）。
* 西班牙文的家人頁原本是 Círculo de salud familiar，太長，一併收短成 Salud familiar。 */
.page-title, .greeting-big { font-size: 24px; }
html:lang(en) .greeting-big, html:lang(es) .greeting-big { max-width: none; }
/* 通話控制鈕：英文與西班牙文只留圖示，不放字（Edward 2026-08-01 拍板）。
* Microphone / Subtitulos 這種長度不管怎麼縮都會頂到圓圈邊，縮到塞得下又小到看不清；
* 麥克風與字幕的圖示本來就通用、看圖就懂。念螢幕的人不受影響——按鈕上的
* aria-label 仍在（見 index.html 的 data-i18n-aria-label），只是畫面上不再印出來。
* 中文「字幕／麥克風」與日文「字幕／マイク」都短、放得下，維持原樣。 */
html:lang(en) .ctl-btn > span,
html:lang(es) .ctl-btn > span { display: none; }
html:lang(en) .ctl-btn .ic,
html:lang(es) .ctl-btn .ic { width: 26px; height: 26px; }
/* 家庭活動兩顆並排鈕：字放一行 */
html:lang(en) .chal-act,
html:lang(es) .chal-act { font-size: 13px; }
html:lang(en) .chal-act span,
html:lang(es) .chal-act span { white-space: nowrap; }
html:lang(en) .chal-act .ic,
html:lang(es) .chal-act .ic { width: 16px; height: 16px; }
/* 設定頁列表：標題折行會把右邊的值擠掉 */
html:lang(en) .set-row,
html:lang(es) .set-row { font-size: 15.5px; }
/* 有右欄的列：左邊標題被右邊的值擠到折行。
* 「Apple Health」被擠成「Apple / Health」兩行、待辦列的「Salir a caminar」也一樣。
* 修法：標題不准斷詞、右邊的值縮一級並自己顧好寬度——先保住左邊的標題完整。 */
html:lang(en) .set-row .sr-main > span:first-child,
html:lang(es) .set-row .sr-main > span:first-child { white-space: nowrap; }
html:lang(en) .set-row .sr-on,
html:lang(es) .set-row .sr-on { font-size: 13px; text-align: right; }
html:lang(en) .set-row .sr-main small,
html:lang(es) .set-row .sr-main small { font-size: 12.5px; }
html:lang(en) .task-title,
/* 2026-08-10 全畫面驗收抓到：原本強制不換行＋超出就切掉，西班牙文＋最大字級時
「Salir a caminar」只放得下 77px（需要 107px），使用者看到的是被切一半的任務名。
中文本來就是換行的，這裡讓英文與西班牙文比照——任務名要看得完整，比排成一行重要。 */
html:lang(es) .task-title { font-size: 14.5px; overflow-wrap: anywhere; }
html:lang(en) .task-sub,
html:lang(es) .task-sub { font-size: 13px; }
html:lang(en) .task-time,
html:lang(es) .task-time { font-size: 12.5px; white-space: nowrap; }
html:lang(en) .task-body,
html:lang(es) .task-body { min-width: 0; }
/* 被框住的小按鈕與籤條：字一長就被切掉或折成好幾行。
* 「14 days」「Monthly summaries」在英文直接被切；日文的「写真を変更」「お薬の写真を追加」
* 折成 5-8 行；西班牙文的意見分類籤條全部折兩行。
* 日文也要顧——片假名詞（サブスクリプション…）比中文長很多，不能當成跟中文一樣。 */
html:lang(en) .seg-btn, html:lang(es) .seg-btn, html:lang(ja) .seg-btn {
font-size: 12px; padding-left: 4px; padding-right: 4px; }
html:lang(en) .topic-chip, html:lang(es) .topic-chip, html:lang(ja) .topic-chip {
font-size: 13px; }
html:lang(en) .pf-avatar-btn, html:lang(es) .pf-avatar-btn, html:lang(ja) .pf-avatar-btn {
font-size: 13px; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
html:lang(en) .med-photo-btn, html:lang(es) .med-photo-btn, html:lang(ja) .med-photo-btn {
font-size: 13px; white-space: nowrap; }
html:lang(en) .taken, html:lang(es) .taken, html:lang(ja) .taken {
font-size: 15px; white-space: nowrap; }
/* 待辦列的時間籤：沒有指定時間時不要占位。
* 原本永遠掛一個「隨時／Anytime」，中文兩個字還好，英文與西班牙文一長就把左邊的
* 標題與副標擠到折行（Edward 2026-08-01：「anytime 的設計不好要改」）。
* 「隨時」本來就不是資訊——沒有時間限制就不必說。有真時間時 app.js 會把 data-i18n
* 拿掉再寫入（見 renderWalkTask/renderMoodTask），所以這條只命中沒被動過的預設值。 */
.task-time[data-i18n="home.taskAnytime"] { display: none; }
/* 並排按鈕要留呼吸的邊，不能讓字頂到左右兩側（Edward 2026-08-01 指出）。 */
.chal-act { padding: 0 16px; }
/* 外語只調內距與不換行，字級交給上面的按鈕規範統一管。 */
html:lang(en) .chal-act, html:lang(es) .chal-act, html:lang(ja) .chal-act {
gap: 8px; padding: 0 16px; }
/* 底部分頁的字：英文與西班牙文是整個單字，用粗體會顯得又擠又重
* （Edward 2026-08-01：「這裡在英文上改為用細體」）。
* 中文兩個字、日文也短，維持原本的粗體不動。 */
html:lang(en) .tab-btn > span,
html:lang(es) .tab-btn > span { font-weight: 500; letter-spacing: .01em; font-size: 11.5px; }
html:lang(en) .tab-btn.active > span,
html:lang(es) .tab-btn.active > span { font-weight: 700; }
/* 兩端對齊只適合中文與日文（一字一格、拉開來很整齊）。
* 英文與西班牙文是不等寬的單字，硬拉兩端會在字與字之間扯出一格一格的白洞，
* 讀起來很吃力（Edward 2026-08-01：「排版 UX 閱讀體驗不舒服」）。拉丁語系一律靠左。 */
html:lang(en) .reader-card p, html:lang(es) .reader-card p {
text-align: left; overflow-wrap: normal; word-break: normal; hyphens: auto; }
/* 訂閱條款那小段改置中（Edward 2026-08-01 拍板）：它是頁尾的註記、不是要細讀的內文，
* 置中之後最後一行不會孤零零掛在左邊，整塊看起來收得住。四語一致。 */
.sub-legal { text-align: center; }
html:lang(en) .sub-legal, html:lang(es) .sub-legal {
overflow-wrap: normal; word-break: normal; hyphens: auto; }
/* 寧寧觀察卡的標題：原本寫在行內（font-size:15.5px），行內樣式贏過所有選擇器，
* 外語就沒辦法覆寫、「Ningning's observations」只能折成兩行。改成 class 才調得動。 */
.obs-heading { font-size: 15.5px; font-weight: 900; }
html:lang(en) .obs-heading, html:lang(es) .obs-heading { font-size: 14.5px; white-space: nowrap; }
/* 月繳／年繳切換：西班牙文的「Anual + Ahorra un 20%」擠成三行。
* 折行的是徽章那一小塊，讓它跟著文字同一行、字再小一點就收得回來。 */
html:lang(en) .scyc-btn, html:lang(es) .scyc-btn { font-size: 13px; padding: 8px 4px; white-space: nowrap; }
html:lang(en) .scyc-badge, html:lang(es) .scyc-badge { font-size: 10px; padding: 1px 5px; margin-left: 4px; }
/* 兩顆鈕不必五五分——「發起活動」的字本來就比「記錄簿」長。
* 硬切一半會讓左邊那顆頂到邊、右邊那顆空一大塊。按比例分，兩邊的呼吸距離才平均。 */
html:lang(en) .chal-actions, html:lang(es) .chal-actions {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
/* 「管理訂閱／恢復購買」兩顆並排：英文與西班牙文兩個單字會折成兩行。
* Edward 2026-08-01：「單行，按鈕文字可以小一點」——字縮一級、不換行。 */
/* 主要動作（看方案／加值點數）維持原本的 15px——這是使用者最常按的兩顆，
* 文案收短之後放得下，不必為了塞而縮小（Edward 2026-08-01：「訂閱方案文字要大一點」）。
* 底下那排是次要動作（管理訂閱／恢復購買），縮一級剛好拉開主次。 */
html:lang(en) .plan-actions .plan-btn, html:lang(es) .plan-actions .plan-btn {
white-space: nowrap; }
/* 活動種類的六張卡：有的字折行、有的不折，整排就高矮不齊，看起來很毛躁
* （Edward 2026-08-01：「有大有小設計看起來閱讀不是很舒服」）。
* 兩手一起做：文案收短（見文案表），再讓同一列的卡強制等高、字一律一行。 */
.chal-types { grid-auto-rows: 1fr; }
.chal-type { justify-content: center; min-height: 74px; }
.chal-type span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html:lang(en) .chal-type, html:lang(es) .chal-type, html:lang(ja) .chal-type {
font-size: 12.5px; padding-inline: 6px; }
/* ===== 按鈕設計規範（Edward 2026-08-01：「按鈕的設計規範要制定好」）=====
*
* 之前是一顆一顆調，同樣是「主要動作」卻有 600／700／800 三種粗細、
* 14／15／15.5／16px 四種字級，掃過去會覺得亂。這裡收成三級，全站照這個走。
* 基準取首頁「開始聊聊」——它是全 App 最重要的一顆，其他的不該比它重。
*
* ① 主要（primary） 這一頁最想讓人按的那一顆。實心底色、滿版。
* 例：開始聊聊／升級方案／登入
* ② 次要（secondary）同一區的其他選擇，跟主要並排。淡底或白底框。
* 例：加值點數／發起活動／家庭記錄簿
* ③ 輔助（tertiary） 少數人才需要、但必須找得到。小丸子、置中。
* 例：管理訂閱／恢復購買
*
* 三級的差別只在「字級 × 粗細 × 高度」，顏色與圓角各自沿用原本的設計。
* 加新按鈕時挑一級套用，不要再自己寫字級——這就是這組變數存在的意義。 */
:root {
--btn-1-size: 15.5px; --btn-1-weight: 700; --btn-1-height: 50px;
--btn-2-size: 15px; --btn-2-weight: 700; --btn-2-height: 48px;
--btn-3-size: 12.5px; --btn-3-weight: 600; --btn-3-height: 38px;
}
/* ① 主要 */
.video-btn, .sub-cta, .auth-primary {
font-family: var(--display); font-size: var(--btn-1-size); font-weight: var(--btn-1-weight); }
.auth-primary { height: auto; min-height: 40px; }
/* ② 次要 */
.plan-actions .plan-btn, .chal-act, .auth-secondary {
font-family: var(--display); font-size: var(--btn-2-size); font-weight: var(--btn-2-weight); }
.plan-actions .plan-btn, .chal-act { min-height: var(--btn-2-height); }
/* ③ 輔助 */
.plan-link {
font-size: var(--btn-3-size); font-weight: var(--btn-3-weight); min-height: var(--btn-3-height); }
/* 心情那排六張臉：原本用 space-between，每顆的寬度跟著自己的標籤走，
* 標籤一長一短，圓圈就被推得歪七扭八（日文「落ち込んでいる」六個字最明顯）。
* 改成六等分格子——不管標籤多長，圓圈永遠對齊。標籤太長就自己收成兩行、不推擠鄰居。 */
#moodFaces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
#status .moodface { width: 100%; }
/* 標籤一律一行——折行會讓六張臉的底部高低不齊（Edward 2026-08-01：「變得有上有下」）。 */
#status .moodface > span:last-child { font-size: 10.5px; text-align: center; line-height: 1.25; white-space: nowrap; }
/* 日文版的字型：繁中字型（Noto Sans TC）沒有日文寫法的漢字，缺字會逐字掉到系統字型，
* 同一句話就出現兩種粗細與兩種字面（Edward 2026-08-01：「文字有粗有細」）。
* iOS 內建的 Hiragino 是最好的日文字型，排第一；非 Apple 裝置退到 Noto Sans JP。
* 只換字型、不動字級與粗細——版面完全不受影響。 */
html:lang(ja) {
--sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, sans-serif;
--display: "Poppins", "Hiragino Sans", "Noto Sans JP", sans-serif;
--serif: "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
}
/* 標題的位置四頁一致（Edward 2026-08-01：「位置也要一致」）。
* 家人頁的標題旁邊多一顆管理鍵，那顆比文字高，把整行往下推了幾 px；
* 各頁的標題基線因此對不齊，切換分頁時標題會上下跳。
* 讓標題與旁邊的按鈕都以同一條中線對齊，行高固定，四頁就不再跳。 */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 44px; margin: 6px 0 16px; }
.page-title { line-height: 1.2; margin: 0; }
.page-head > .pt-nav { flex: 0 0 auto; }
/* 帳號那一列：西班牙文「Modo invitado」折成兩行、「Iniciar sesión」還頂出卡片外
* （Edward 2026-08-01）。原因是標題設了 overflow-wrap:anywhere（可以從單字中間斷），
* 而右邊的按鈕沒有寬度上限，兩邊互相擠。
* 改成：左邊佔滿剩下的空間、太長就用刪節號；右邊按鈕不縮但也不許超過四成寬。 */
.auth-card-main { flex: 1 1 auto; }
.auth-title { overflow-wrap: normal; word-break: normal; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.auth-actions { max-width: 42%; }
.auth-actions > button { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 心情卡：說明文字長短不一，卡片高度就跟著變，切換語言或換一天位置就跳
* （Edward 2026-08-01：「副標文字太多會導致板位上下位移」「間距也不同」）。
* 標題一行、說明固定兩行的高度——不管字多字少，這張卡永遠一樣高。 */
#status .mood-card-title, [data-i18n="status.moodMonitoring"] { white-space: nowrap; }
#moodNote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: 38px; margin-top: 3px; }
#moodLabel { white-space: nowrap; }
/* 六張心情臉底下的名字拿掉（Edward 2026-08-01：「文字可以優化或簡寫或就不要文字，
* 因為點了上面會寫」）。點下去之後上面那行大字就是它的名字，底下再寫一次是重複；
* 而且各語言的名字長短不一，會把圓圈推得歪七扭八——拿掉之後間距永遠齊。
* 用「看不見但唸得到」的作法，不是 display:none——念螢幕給視障者聽時仍會報出名字。 */
#status .moodface > span:last-child {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#status .moodface { position: relative; gap: 0; }
#moodFaces { gap: 8px; }
/* 設定頁的列：右邊的狀態文字拿掉，標題才有完整一行的空間
* （Edward 2026-08-01：「拿掉右邊的狀態說明，讓標題可以完整單行顯示」）。
* 那顆小圓點留著——一眼就看得出開或關，而且只佔 7px。
* 文字改成「看不見但唸得到」，念螢幕給視障者聽時仍會報「未連接／已連接」。
* 數字（例如用藥幾種）留著，但跟左邊拉開距離，不要黏在一起。 */
.set-row .sr-on > span:not(.d) {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.set-row .sr-on { position: relative; }
.set-row .sr-main { padding-right: 12px; }
/* 右邊的狀態字有兩種放法：有的在 .sr-on、有的塞在箭頭那格 .sr-arrow 裡。
* 兩種都要收（Edward 2026-08-01：「拿掉右邊的狀態說明」——指了兩次都還在，
* 就是因為第一次只收了 .sr-on 那種）。箭頭本身留著，它是「可以點進去」的提示。 */
.set-row .sr-arrow > b {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.set-row .sr-arrow { position: relative; }
/* 用藥卡：說明文字在西班牙文長到五行，把卡片撐得比別張高一倍；
* 右邊那顆狀態籤又做得跟主要按鈕一樣大，兩邊搶版面
* （Edward 2026-08-01：「副標有問題太多了、按鈕太大了」）。
* 說明限兩行、狀態籤降成第③級的份量——它只是狀態，不是要人按的東西。 */
#medCard #medSub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; line-height: 1.4; }
#medCard #medChip { font-size: 11.5px; font-weight: 600; padding: 5px 10px; white-space: nowrap; }
/* 心情週還沒有紀錄時的說明——跟健康數據的空狀態同一種語氣與份量 */
.mood-week-empty { padding: 16px 2px; font-size: 13.5px; line-height: 1.7; color: var(--muted); text-align: center; }
/* 心情卡的回應行：高度固定兩行，換心情時版面不跳 */
.mood-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; opacity: .9; min-height: 38px; }
/* ═══════════════════════════════════════════════════════════════════════
啟動頁與開場三頁（Edward 2026-08-10 拍板）
需求單：docs/開場與啟動頁-需求單-2026-08-10.md
守住的線：不自創標誌／不要陰影與漸層／深綠只當文字不當底／橘只做圖形不做文字
═══════════════════════════════════════════════════════════════════════ */
/* ── 啟動頁 ── 底色跟 App 同一個米黃，接得上不會閃 */
.boot-splash, .onb {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center;
}
.boot-splash[hidden], .onb[hidden] { display: none; }
/* 啟動頁要疊在開場三頁「上面」。兩層本來同高，而開場頁在畫面檔裡排比較後面＝蓋住啟動頁；
啟動頁淡出那半秒露出來的就會是 App 首頁，看起來像閃了一下（Edward 2026-08-10 真機回報）。
把啟動頁墊高一階，淡出時露出的才是已經鋪在下面的開場頁。 */
.boot-splash { background: var(--cream); z-index: 91; }
.boot-splash.is-leaving { animation: bootLeave .5s ease-in both; }
@keyframes bootLeave { to { opacity: 0; visibility: hidden; } }
.boot-inner {
width: 100%; max-width: 400px; height: 100vh; height: 100dvh; max-height: 866px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 28px;
}
@media (max-width: 520px) { .boot-inner { max-height: none; } }
.boot-mark { position: relative; width: 186px; height: 186px; flex: 0 0 auto; }
.boot-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* 水滴：重力加速落下 → 碰到水面被壓扁 → 回彈定位 */
.boot-drop { transform-origin: 50% 59%; animation: bootDrop .95s linear .25s both; }
@keyframes bootDrop {
0% { transform: translateY(-74px) scaleY(1.13) scaleX(.92); opacity: 0;
animation-timing-function: cubic-bezier(.55,.02,.86,.28); }
16% { opacity: 1; }
72% { transform: translateY(0) scaleY(1.05) scaleX(.97); opacity: 1;
animation-timing-function: cubic-bezier(.25,.7,.4,1); }
83% { transform: translateY(3px) scaleY(.92) scaleX(1.06); opacity: 1; }
93% { transform: translateY(-1px) scaleY(1.02) scaleX(.99); opacity: 1; }
100% { transform: none; opacity: 1; }
}
/* 水波：從水滴碰到水面的那一點爆開，由內而外、先快後慢 */
.boot-wave-in, .boot-wave-out { transform-origin: 50% 59%; }
.boot-wave-in { animation: bootWave .78s cubic-bezier(.1,.86,.24,1) .93s both; }
.boot-wave-out { animation: bootWave .96s cubic-bezier(.1,.86,.24,1) 1.06s both; }
@keyframes bootWave {
0% { transform: scale(.04); opacity: 0; }
22% { opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* 品牌字與副標一開始就在，不延遲浮現（Edward 2026-08-10） */
.boot-lockup { margin-top: 26px; text-align: center; animation: bootRise .6s ease-out both; }
@keyframes bootRise { from { transform: translateY(7px); opacity: 0; } to { transform: none; opacity: 1; } }
.boot-word {
font-family: var(--display); font-weight: 700; font-size: 34px;
letter-spacing: -.025em; color: var(--ink); line-height: 1;
}
.boot-word b { color: var(--teal); font-weight: 700; }
.boot-zh { font-family: var(--sans); font-size: .78em; font-weight: 700; letter-spacing: .04em; margin-left: 9px; opacity: .95; }
.boot-tagline { margin-top: 15px; font-family: var(--sans); font-weight: 400; font-size: 14.5px; color: var(--muted); letter-spacing: .03em; }
/* ── 開場三頁 ── */
.onb { background: var(--teal); }
.onb-inner {
width: 100%; max-width: 400px; height: 100vh; height: 100dvh; max-height: 866px;
display: flex; flex-direction: column;
padding: calc(20px + env(safe-area-inset-top)) 0 calc(22px + env(safe-area-inset-bottom));
}
@media (max-width: 520px) { .onb-inner { max-height: none; } }
/* 橫向捲動＋吸附＝手勢滑動免費拿到，按鈕再用捲動控制 */
.onb-track {
flex: 1; display: flex; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
/* 橫向滑動是手勢，不該看到捲軸。App 其他地方在 .app-shell * 那條就藏掉了，
但開場頁是 body 底下獨立的一層、不在 .app-shell 裡面，所以漏掉——
Edward 2026-08-10 在截圖上看到那條灰線。 */
scrollbar-width: none;
}
.onb-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.onb-page {
flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 26px; text-align: center;
}
.onb-art { width: 100%; max-width: 320px; }
.onb-art img { width: 100%; height: auto; display: block; }
.onb-title {
margin-top: 26px; font-family: var(--sans); font-weight: 700; font-size: 26px;
line-height: 1.42; color: #fff; letter-spacing: .01em;
}
.onb-title span { display: block; }
.onb-body {
margin-top: 14px; font-family: var(--sans); font-weight: 500; font-size: 15px;
line-height: 1.75; color: #E9F8F5; max-width: 300px;
}
.onb-foot { flex: 0 0 auto; padding: 0 26px; }
.onb-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.onb-dots i { width: 6px; height: 6px; border-radius: 3px; background: #8FCFC9; transition: width .25s ease, background .25s ease; }
.onb-dots i.on { width: 18px; background: #fff; }
.onb-cta {
width: 100%; height: 54px; border-radius: 27px; border: 2px solid #BFE2DE;
background: transparent; color: #fff; font-family: var(--sans); font-weight: 700; font-size: 17px;
cursor: pointer;
}
.onb-cta.is-last { background: #fff; border-color: #fff; color: var(--teal-dd); }
.onb-cta:active { transform: scale(.985); }
.onb-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.boot-drop, .boot-wave-in, .boot-wave-out, .boot-lockup { animation: none; opacity: 1; transform: none; }
.boot-splash.is-leaving { animation: none; opacity: 0; visibility: hidden; }
.onb-track { scroll-behavior: auto; }
}