/* ===== 2026-10 新介面 =====
 * 色塊（--block）＋大數字。配色三組：深藍×琥珀（預設）、翡翠綠×淺珊瑚、勃根地×冰藍，各有淺色／深色。
 * 色弱：要分辨的顏色一定一深一淺，狀態另外用形狀或文字表示（✓、星星、虛線、▲▼）。
 */
@font-face{font-family:"Barlow Condensed"; font-weight:600; font-style:normal; font-display:swap; src:url(/fonts/barlow-condensed-600.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed"; font-weight:700; font-style:normal; font-display:swap; src:url(/fonts/barlow-condensed-700.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed"; font-weight:800; font-style:normal; font-display:swap; src:url(/fonts/barlow-condensed-800.woff2) format("woff2");}

:root{
  --font:-apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Hiragino Sans", "Microsoft JhengHei", system-ui, sans-serif;
  --num:"Barlow Condensed", var(--font);
  /* 頁面 */
  --bg:#FFFFFF; --surface:#F3F4F7; --surface-2:#E8EAF0; --text:#111318; --text-dim:#4A5060; --border:#E3E6EE; --chart-track:#E3E6EE;
  --danger:#B3261E;
  /* 主色（色塊、主要按鈕） */
  --accent:#1F3A93; --accent-text:#FFFFFF; --accent-ink:#1F3A93;
  --block:#1F3A93; --block-text:#FFFFFF; --block-sub:#D5DDF5; --block-faint:#8EA2DE; --block-glass:rgba(255,255,255,0.12); --block-track:rgba(255,255,255,0.2);
  /* 強調色（達標、建議、新紀錄、主要行動） */
  --hi:#F2A541; --hi-text:#111318; --hi-ink:#8A4B00;
  --cardio:#9A5B00; --cardio-text:#FFFFFF;
  --pos:#1F3A93; --neg:#8A4B00;
  --s1:#1F3A93; --s2:#E69F00; --s3:#56B4E9; --s4:#CC79A7; --s5:#009E73; --s6:#D55E00;
  --cx-grid:rgba(0,0,0,0.07);
  --body-0:#E3E6EE; --body-1:#A9B8E6; --body-2:#4F6BC4; --body-3:#1F3A93;
  color-scheme:light;
}
:root[data-bgtone="gray"]{ --bg:#F1F2F5; --surface:#FFFFFF; --surface-2:#E7E9EF; }
:root[data-accent="emerald"]{
  --accent:#0B6E57; --accent-ink:#0B6E57; --block:#0B6E57; --block-sub:#CDEBE2; --block-faint:#7FBFAE;
  --hi:#FFB59E; --hi-text:#3A1206; --hi-ink:#9A3B1E; --cardio:#2F5FB5; --pos:#0B6E57; --neg:#9A3B1E; --s1:#0B6E57;
  --body-1:#9FD3C4; --body-2:#3E9A80; --body-3:#0B6E57;
}
:root[data-accent="burgundy"]{
  --accent:#6E2F3E; --accent-ink:#6E2F3E; --block:#6E2F3E; --block-sub:#F1D9DE; --block-faint:#C48A97;
  --hi:#A8D4F5; --hi-text:#0E1B2E; --hi-ink:#1F5C8F; --cardio:#1F5C8F; --pos:#6E2F3E; --neg:#1F5C8F; --s1:#6E2F3E;
  --body-1:#E0B6C0; --body-2:#A55C6E; --body-3:#6E2F3E;
}
/* 深色：背景帶一點主題色，不用純黑 */
:root[data-mode="dark"]{
  --bg:#0D1322; --surface:#182039; --surface-2:#1E2740; --border:#2A3450; --chart-track:#2A3450;
  --text:#EEF1F8; --text-dim:#B0B6C3; --danger:#FF8A80;
  --accent-ink:#9DB2F0; --hi-ink:#F2A541; --cardio:#F2A541; --cardio-text:#111318; --pos:#9DB2F0; --neg:#F2A541;
  --s1:#9DB2F0; --s2:#F0B63F; --s3:#8BCDF2; --s4:#E19AC4; --s5:#33C29A; --s6:#F07E3C;
  --cx-grid:rgba(255,255,255,0.08);
  --body-0:#2A3450; --body-1:#3B5089; --body-2:#6F89D8; --body-3:#B9C8F5;
  color-scheme:dark;
}
:root[data-mode="dark"][data-accent="emerald"]{
  --bg:#0A1713; --surface:#13241F; --surface-2:#1A2E27; --border:#24382F; --chart-track:#24382F;
  --accent-ink:#7FD3BC; --hi-ink:#FFB59E; --cardio:#8FB6F2; --pos:#7FD3BC; --neg:#FFB59E; --s1:#7FD3BC;
  --body-0:#24382F; --body-1:#1F5A49; --body-2:#3E9A80; --body-3:#9FE0CC;
}
:root[data-mode="dark"][data-accent="burgundy"]{
  --bg:#1A0F12; --surface:#2A1A1F; --surface-2:#321F25; --border:#3F2A30; --chart-track:#3F2A30;
  --accent-ink:#E3A5B4; --hi-ink:#A8D4F5; --cardio:#A8D4F5; --pos:#E3A5B4; --neg:#A8D4F5; --s1:#E3A5B4;
  --body-0:#3F2A30; --body-1:#6A3443; --body-2:#A55C6E; --body-3:#EBC0CA;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode]){
    --bg:#0D1322; --surface:#182039; --surface-2:#1E2740; --border:#2A3450; --chart-track:#2A3450;
    --text:#EEF1F8; --text-dim:#B0B6C3; --accent-ink:#9DB2F0; color-scheme:dark;
  }
}

body{background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased;}
.display{font-family:var(--num); font-weight:700; letter-spacing:0;}
button{font-family:inherit;}

/* ===== 上方標題列（手機）：跟色塊同色，捲動時固定 ===== */
@media (max-width:1023px){
  header.top{background:var(--block); color:var(--block-text); margin-inline:-16px; padding:6px 12px 6px 8px; top:0; padding-top:calc(env(safe-area-inset-top,0px) + 6px);}
  :root{padding-top:0;}
  /* 底部留出分頁列的高度，最後一張卡片才不會被蓋住 */
  body{padding-top:0; padding-bottom:calc(var(--tabbar-h) + 32px);}
  .brandname{display:none;}
  .brand{min-height:48px; gap:8px;}
  .hdr-title{flex:1; min-width:0; display:flex; align-items:center;}
  .ptitle{font-size:1.25rem; font-weight:800; padding-left:8px; white-space:nowrap;}
  body[data-tab="record"] .ptitle{display:none;}
  body:not([data-tab="record"]) .hdrdate{display:none;}
  .hdrdate{display:flex; align-items:center; gap:0; min-width:0;}
  .hdrdate .nav{width:36px; height:40px; border:none; background:none; color:var(--block-text); border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;}
  .hdrdate .nav:active{background:var(--block-glass);}
  .hdrdate .datelabel{display:flex; align-items:baseline; gap:6px; white-space:nowrap; min-width:0;}
  .hdrdate .datemain{font-size:1.05rem; font-weight:800;}
  .hdrdate .dow{font-size:0.82rem; color:var(--block-sub); font-weight:600; margin:0;}
  .hdrdate .today{margin-left:4px; border:none; background:var(--block-glass); color:var(--block-text); border-radius:14px; padding:6px 10px; font-size:0.76rem; font-weight:700; cursor:pointer;}
  .brand .right{gap:6px;}
  .brand .tag{color:var(--block-sub); font-size:0.7rem; letter-spacing:0; text-transform:none; font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .hbtn{width:40px; height:40px; border:none; border-radius:20px; background:var(--block-glass); color:var(--block-text); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
  .hbtn svg.ic{width:20px; height:20px; stroke-width:1.7;}
  .avatar{width:38px; height:38px; border:2px solid var(--block-text); background:var(--hi); color:var(--hi-text); font-weight:800;}
  /* 每一頁最上面的色塊：接在標題列下面，下緣圓角 */
  .hero{background:var(--block); color:var(--block-text); margin-inline:-16px; padding:6px 20px 20px; border-radius:0 0 28px 28px;}
}
@media (min-width:1024px){
  .hdr-title{display:none;}
  .hbtn{width:34px; height:34px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
  .hbtn svg.ic{width:18px; height:18px;}
  .hero{background:var(--block); color:var(--block-text); border-radius:20px; padding:16px 20px 20px;}
}

/* ===== 記錄頁：週目標圓環 ===== */
.wkview{display:flex; align-items:center; gap:18px;}
.wkring{position:relative; width:142px; height:142px; flex:0 0 auto;}
.wkring svg{width:100%; height:100%; display:block;}
.wkc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none;}
.wkc b{font-size:3.4rem; font-weight:800; line-height:0.9;}
.wkc b span{color:var(--block-faint); font-size:0.55em;}
.wkc > span{font-size:0.74rem; font-weight:700; color:var(--block-sub); margin-top:2px;}
.wkside{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px;}
.wkmsg b{display:block; font-size:1.05rem; font-weight:900; line-height:1.3;}
.wkmsg span{display:block; font-size:0.8rem; font-weight:700; color:var(--block-sub); margin-top:2px;}
.wktrend{background:var(--block-glass); border-radius:14px; padding:9px 11px; display:flex; flex-direction:column; gap:4px;}
.wktrend .wtl{font-size:0.72rem; font-weight:700; color:var(--block-sub);}
.wtr{display:flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:700;}
.wtr .wta{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.wtr .wta svg.ic{width:13px; height:13px; stroke-width:2.6;}
.wtr .wta.up{background:var(--hi); color:var(--hi-text);}
.wtr .wta.flat, .wtr .wta.down{border:2px solid var(--block-faint); color:var(--block-text); box-sizing:border-box;}
.wtr b{margin-left:auto; font-family:var(--num); font-size:1.15rem; font-weight:800;}

/* 訓練時間（色塊底部一行） */
.hero .sessbar{margin-top:14px; min-height:0;}
.hero .slbl{color:var(--block-sub);}
.hero .sesschip{background:var(--block-glass); border:none; color:var(--block-text);}
.hero .sesschip.est{color:var(--block-sub); border:1.5px dashed var(--block-faint);}
.hero .sessgo{background:var(--hi); color:var(--hi-text); padding:9px 16px;}
.hero .sesslive{background:var(--block-glass);}
.hero .ldot{background:var(--hi);}
.hero .sesslive .ll{color:var(--block-sub);}
.hero .sesslive b{font-family:var(--num); font-size:1.5rem; font-weight:800;}
.hero .sessend{background:var(--block-text); color:var(--block);}

/* ===== 休息倒數：整個色塊變成大圓環 ===== */
.hero .restpill{display:flex; flex-direction:column; align-items:center; gap:10px; margin:4px 0 0; padding:0; background:none; border:none; color:inherit; flex-wrap:nowrap;}
.hero .restpill[hidden]{display:none;}
.rp-ringwrap{position:relative; width:200px; height:200px;}
.hero .restpill .rring{width:200px; height:200px;}
.hero .rring circle{stroke-width:2.4;}
.hero .rring .rtrack{stroke:var(--block-track);}
.hero .rring .rprog{stroke:var(--hi);}
.hero .restpill .rpt{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none;}
.hero .restpill .rpt span{font-size:0.8rem; font-weight:700; color:var(--block-sub); opacity:1;}
.hero .restpill .rpt b{font-family:var(--num); font-size:4.6rem; font-weight:800; line-height:0.95;}
.rp-sub{font-size:0.95rem; font-weight:700; text-align:center; color:var(--block-text);}
.rp-sub b{font-family:var(--num); font-size:1.4rem; font-weight:800; margin-left:4px;}
.rp-btns{display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:10px; width:100%;}
.rp-btns .rpb{display:contents;}
.hero .restpill button{border-radius:25px; height:50px; font-weight:800; font-size:0.95rem; padding:0 8px;}
.hero .restpill .rpb button{background:transparent; border:2px solid var(--block-faint); color:var(--block-text); font-family:var(--num); font-size:1.3rem;}
.hero .restpill .rpskip{background:var(--block-text); color:var(--block); border:none;}
.hero .restpill .rpdone{background:var(--hi); color:var(--hi-text); border:none; grid-column:1 / -1; height:58px; font-size:1.08rem;}
/* 休息結束：換成下一組的大數字 */
.hero .restpill.done{align-items:stretch;}
.hero .restpill.done .rp-ringwrap, .hero .restpill.done .rp-sub{display:none;}
.hero .restpill.done .rp-btns{grid-template-columns:1fr;}
.hero .restpill.done .rpskip{order:2; background:transparent; color:var(--block-sub); height:40px; font-size:0.85rem;}
.rp-next .rnt{font-size:1.4rem; font-weight:900;}
.rp-next .rnv{display:flex; align-items:flex-end; gap:8px; margin-top:2px;}
.rp-next .rnv button{background:none; border:none; padding:0; color:var(--block-text); font-family:var(--num); font-size:5.4rem; font-weight:800; line-height:0.88; cursor:pointer; height:auto;}
.rp-next .rnv i{font-style:normal; font-size:1rem; font-weight:700; padding-bottom:10px;}
.rp-next .rns{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:0.84rem; color:var(--block-sub);}
.sugchip{display:inline-flex; align-items:center; gap:3px; background:var(--hi); color:var(--hi-text); font-size:0.72rem; font-weight:900; padding:2px 8px; border-radius:9px; white-space:nowrap;}
.sugchip svg.ic{width:10px; height:10px; stroke-width:3;}

/* 往下捲時頂端的迷你倒數 */
.restmini{background:var(--block); color:var(--block-text); border:none; border-radius:0 0 20px 20px; box-shadow:0 8px 20px rgba(0,0,0,0.22); padding:8px 16px 10px;}
.restmini .rring{width:44px; height:44px;}
.restmini .rring .rtrack{stroke:var(--block-track);}
.restmini .rring .rprog{stroke:var(--hi);}
.restmini > b{font-family:var(--num); font-size:1.9rem; font-weight:800;}
.restmini button{background:transparent; border:2px solid var(--block-faint); color:var(--block-text); border-radius:20px; height:40px; padding:0 12px; font-weight:800;}
.restmini .rpdone{background:var(--hi); color:var(--hi-text); border:none;}
.restmini #rmSkip{background:var(--block-text); color:var(--block); border:none;}
.restmini.done{background:var(--block); color:var(--block-text);}
.restmini.done .rring .rprog{stroke:var(--hi);}

/* ===== 重訓／有氧切換、今天的摘要 ===== */
.recbody{gap:12px; margin-top:16px;}
.modeseg{background:var(--surface); border-radius:22px; padding:3px; gap:3px;}
.modeseg button{border-radius:19px; padding:9px 8px; font-weight:700; color:var(--text);}
.modeseg button.on{background:var(--text); color:var(--bg); box-shadow:none;}
.modeseg .mdot{display:none;}
.modeseg small{background:var(--surface-2); color:var(--text-dim);}
.modeseg button.on small{background:color-mix(in srgb, var(--bg) 22%, transparent); color:inherit;}
.summary{gap:8px;}
.stat{background:none; border:none; border-radius:0; padding:2px 4px; border-left:2px solid var(--border);}
.stat:first-child{border-left:none; padding-left:2px;}
.stat .num{font-family:var(--num); font-weight:800; font-size:1.7rem;}
.stat .num small{font-family:var(--font); font-weight:700;}
.stat .lbl{text-transform:none; letter-spacing:0; font-weight:600;}
body.mode-cardio .summary .num{color:var(--text);}

/* ===== 動作卡片 ===== */
.workout{gap:12px;}
.excard{background:var(--surface); border:none; border-radius:20px;}
.excard.cardio:not(.collapsed){border-left:none;}
.exhead{padding:12px 6px 4px 16px; align-items:flex-start;}
.exn b{font-size:1.08rem; font-weight:900;}
.exm{font-size:0.76rem;}
.exspark{flex:0 0 auto; width:64px; height:26px; margin-top:4px; color:var(--accent-ink);}
.exspark polyline{fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
.exspark circle{fill:currentColor;}
.exsug{display:flex; align-items:center; gap:6px; padding:0 16px 6px; font-size:0.78rem; color:var(--text-dim);}
.restchip{background:var(--bg); border:none; font-weight:700;}
.setrow{grid-template-columns:30px minmax(0,0.9fr) minmax(0,1fr) minmax(0,1fr) 46px; padding:4px 10px 4px 10px;}
.sethead{font-weight:700;}
.setrow .sn{font-family:var(--num); font-size:1.1rem; font-weight:800; color:var(--text);}
.setrow.pending .sn{color:var(--text-dim);}
.setrow .sn .ic{color:var(--hi-ink);}
.setrow .sp{font-family:var(--num); font-size:0.98rem;}
.setrow .sv{background:var(--bg); font-family:var(--num); font-size:1.3rem; font-weight:800;}
.setrow .sv small{font-family:var(--font);}
.setrow.pending .sv{font-weight:600;}
.setrow.done{background:none;}
.setrow.done .sv{background:transparent;}
.setrow.cur{background:color-mix(in srgb, var(--accent-ink) 9%, transparent);}
.setrow.cur .sn{color:var(--accent-ink);}
.setrow .sc{border:1.5px dashed color-mix(in srgb, var(--text-dim) 55%, transparent); background:transparent; border-radius:12px;}
.setrow.cur .sc{border:2.5px solid var(--accent-ink); color:var(--accent-ink);}
.setrow.done .sc{background:var(--accent); border:none; color:var(--accent-text);}
.excard.cardio .setrow.done{background:none;}
.excard.cardio .setrow.done .sc{background:var(--accent); color:var(--accent-text);}
.exfoot button{border:1.5px dashed var(--border); color:var(--accent-ink); font-weight:700;}
.exsum{padding:13px 14px 13px 16px;}
.okdot{background:var(--accent); color:var(--accent-text);}
.excard.cardio .okdot{background:var(--accent); color:var(--accent-text);}
.addex{border:1.5px dashed var(--border); color:var(--accent-ink); border-radius:18px;}
.addex.cardio{color:var(--accent-ink);}
.prbadge{background:var(--hi); color:var(--hi-text);}
.empty{border:1.5px dashed var(--border); border-radius:18px;}

/* ===== 新紀錄慶祝 ===== */
.prcele{position:fixed; left:12px; right:12px; bottom:calc(var(--tabbar-h) + 12px); z-index:92; max-width:536px; margin-inline:auto; display:flex; align-items:center; gap:14px; background:var(--block); color:var(--block-text); border-radius:20px; padding:14px 16px; box-shadow:0 14px 34px rgba(0,0,0,0.3); animation:celein 0.35s cubic-bezier(.2,1.4,.4,1);}
.prcele .pci{width:52px; height:52px; border-radius:16px; background:var(--hi); color:var(--hi-text); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.prcele .pci svg.ic{width:30px; height:30px; fill:currentColor; stroke:none;}
.prcele b{display:block; font-size:1.05rem; font-weight:900;}
.prcele span{display:block; font-size:0.82rem; color:var(--block-sub); margin-top:2px;}
@keyframes celein{from{opacity:0; transform:translateY(16px) scale(0.96);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .prcele{animation:none;} }

/* ===== 底部分頁列、面板、提示 ===== */
.tabbar{background:var(--bg); border-top:1px solid var(--border);}
.tab{color:var(--text-dim); font-weight:600;}
.tab.active{color:var(--accent-ink); font-weight:900;}
.sheet{background:var(--bg);}
.toast{background:var(--text); color:var(--bg); border:none;}
.toast .tact{color:var(--hi);}
.chip.active{background:var(--accent); border-color:var(--accent); color:var(--accent-text);}
button.submit, .bodysave, .wbtn.pri, .timerbtn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-text);}
button.submit{font-family:var(--font); font-weight:800; border-radius:16px;}
.padf .pv{font-family:var(--num); font-weight:800;}
.padkeys button{font-family:var(--num); font-weight:700;}
.flash{background:var(--hi);}

/* ===== 語言選單 ===== */
.langmenu button .lchk{width:16px; height:16px; color:var(--accent-ink);}
.langmenu button.on{font-weight:800; color:var(--accent-ink);}

/* ===== 今天還沒開始：快速開始 ===== */
.qs{display:flex; flex-direction:column; gap:8px;}
.qs[hidden]{display:none;}
.qsh{font-size:1.3rem; font-weight:900; margin-bottom:2px;}
.qscard{background:var(--surface); border-radius:18px; padding:14px 14px 14px 16px;}
.qsl, .qsl2{font-size:0.76rem; font-weight:700; color:var(--text-dim);}
.qsl2{margin-top:8px;}
.qsrow{display:flex; align-items:center; gap:12px; margin-top:4px;}
.qst{flex:1; min-width:0;}
.qst b{display:block; font-size:1.08rem; font-weight:900;}
.qst span{display:block; font-size:0.8rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.qsgo{flex:0 0 auto; min-height:44px; padding:0 18px; border:none; border-radius:22px; background:var(--accent); color:var(--accent-text); font-weight:900; font-size:0.95rem; cursor:pointer;}
.qschips{display:flex; flex-wrap:wrap; gap:8px;}
.qschip{min-height:44px; padding:0 14px; border:1.5px solid var(--border); border-radius:22px; background:var(--bg); color:var(--text); display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.qschip b{font-size:0.92rem; font-weight:800;}
.qschip span{font-size:1rem; color:var(--text-dim);}

/* ===== 設定：配色卡片 ===== */
.palcards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;}
.palcard{min-height:96px; border-radius:14px; padding:8px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:var(--bg); border:1.5px solid var(--border); color:var(--text); cursor:pointer; text-align:left;}
.palcard i{display:block; width:100%; height:44px; border-radius:10px; background:var(--pb); position:relative;}
.palcard i::after{content:""; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; border:5px solid var(--ph); box-sizing:border-box;}
.palcard span{font-size:0.76rem; font-weight:800; line-height:1.3;}
.palcard.active{border:2.5px solid var(--text);}
.palcard.active span::before{content:"✓ ";}
svg.ic.star{fill:var(--hi); stroke:var(--hi-ink); stroke-width:1.2;}
@media (max-width:1023px){
  body[data-tab="record"] #modules{margin-top:0;}
  #modules > .hero{margin:0 -16px;}
  #page-trend > .hero, #page-body > .hero, #page-settings > .hero{margin:0 -16px;}
}
.summary[hidden]{display:none;}
.hero .restpill:not([hidden]) ~ .sessbar{display:none;}
.hero .restpill.done #rpSkip{order:5;}
.hero .restpill.done .rpdone{order:1;}
.hero .restpill #rpSkip, .hero .restpill .rpdone{flex:none;}

/* ===== 練完總結 ===== */
.donesheet{height:94vh; height:min(94dvh, 900px); overflow:hidden;}
.dn-hero{background:var(--block); color:var(--block-text); padding:14px 20px 18px; border-radius:20px 20px 24px 24px; flex:0 0 auto;}
.dn-top{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:0.84rem; font-weight:700; color:var(--block-sub);}
.dn-top .sheetx{background:var(--block-glass); color:var(--block-text);}
.dn-week{display:flex; align-items:center; gap:14px; margin-top:6px;}
.dn-ring{position:relative; width:104px; height:104px; flex:0 0 auto;}
.dn-ring > span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.dn-ring > span svg.ic{width:38px; height:38px; stroke-width:2.6;}
.dn-ring b{font-size:1.8rem; font-weight:800;}
.dn-week h3{margin:0; font-size:1.25rem; font-weight:900;}
.dn-week p{margin:2px 0 0; font-size:0.84rem; font-weight:700; color:var(--block-sub);}
.dn-vol{display:flex; align-items:baseline; gap:8px; margin-top:10px;}
.dn-vol b{font-size:4.2rem; font-weight:800; line-height:0.88;}
.dn-vol i{font-style:normal; font-size:0.9rem; font-weight:700;}
.dn-vol .sugchip{margin-left:auto; font-size:0.9rem; padding:4px 10px;}
.dn-stats{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; font-size:0.76rem; color:var(--block-sub);}
.dn-stats b{display:block; font-size:1.7rem; font-weight:800; color:var(--block-text); line-height:1;}
.donesheet .sheet-body{flex:1; min-height:0;}
.dn-th, .dn-tr{display:grid; grid-template-columns:minmax(0,1fr) 64px 56px 48px; gap:8px; align-items:center;}
.dn-th{font-size:0.74rem; font-weight:700; color:var(--text-dim); padding-bottom:6px; border-bottom:2px solid var(--text);}
.dn-th span:not(:first-child){text-align:right;}
.dn-tr{padding:9px 0; border-bottom:1px solid var(--border);}
.dn-n{display:flex; align-items:center; gap:5px; font-weight:900; font-size:0.95rem; min-width:0;}
.dn-tr .display{text-align:right; font-size:1.1rem; font-weight:700;}
.dn-tr .exspark{width:56px; margin:0;}
.dn-c{text-align:right; font-weight:900; color:var(--text-dim);}
.dn-c.up{color:var(--accent-ink);} .dn-c.dn{color:var(--neg);}
.dn-legend{display:flex; align-items:center; gap:4px; font-size:0.72rem; color:var(--text-dim); margin-top:8px;}
.dn-cardio{display:flex; gap:10px; align-items:baseline; background:var(--surface); border-radius:14px; padding:10px 14px; font-size:0.88rem;}
.dn-story{display:flex; gap:14px; align-items:center; background:var(--surface); border-radius:18px; padding:12px;}
.dn-story canvas{width:66px; height:auto; border-radius:9px; flex:0 0 auto; box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.dn-story b{display:block; font-size:0.95rem; font-weight:900;}
.dn-story span{display:block; font-size:0.78rem; color:var(--text-dim); margin-top:2px;}
.dn-foot{gap:10px;}
.dn-foot .wbtn{flex:0 0 auto; min-height:52px; padding:0 18px; border-radius:26px; font-weight:800; font-size:0.92rem;}
.dn-foot .submit{flex:1; min-height:52px; margin:0; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--hi); color:var(--hi-text); border-radius:26px;}

/* ===== 趨勢頁 ===== */
@media (max-width:1023px){
  body[data-tab="trend"] #page-trend, body[data-tab="body"] #page-body, body[data-tab="settings"] #page-settings{margin-top:0;}
  #page-trend .trhero{order:-4;}
  #dashKpis{display:none!important;}
  .trhero .trendmode{background:var(--block-glass); width:max-content; margin-left:auto; grid-template-columns:auto auto;}
  .trhero .trendmode button{color:var(--block-text); padding:7px 16px; font-size:0.86rem;}
  .trhero .trendmode button.on{background:var(--block-text); color:var(--block);}
  #page-trend[data-mode="c"] .trhero .trendmode button.on{background:var(--block-text);}
  .card{background:var(--surface); border:none; border-radius:20px;}
  #reportCard{display:none!important;}
  .dash-grid > .card[data-tsub="log"]{display:none!important;}
  #page-trend .tsub{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; padding:3px; border:none; border-radius:22px; background:var(--surface);}
  #page-trend .tsub button{border:none; border-radius:19px; margin:0; padding:9px 0; color:var(--text); font-weight:700;}
  #page-trend .tsub button.on, #page-trend[data-mode="c"] .tsub button.on{background:var(--text); color:var(--bg);}
}
.trkpis{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:14px;}
.trl{display:block; font-size:0.76rem; font-weight:700; color:var(--block-sub);}
.trk b{display:block; font-size:2.5rem; font-weight:800; line-height:1;}
.trk b small, .bdgrid b small{font-family:var(--font); font-size:0.9rem; font-weight:700; margin-left:2px;}
.trd{display:block; font-size:0.76rem; font-weight:700; margin-top:3px;}
.trd i{font-style:normal;}
.trd i.up{color:var(--hi);}
.trd i.flat, .trd i.down{color:var(--block-sub);}
.trd em{font-style:normal; font-weight:500; color:var(--block-sub);}
#alertList .alert{border:2px solid var(--text); border-radius:16px; padding:12px; margin-bottom:8px;}
#alertList .alert.ok{border:1.5px dashed var(--border);}
#alertList .alert .alert-ic{color:var(--hi-ink);}

/* 月曆 */
.calhead{display:flex; align-items:center; justify-content:space-between;}
.calhead b{font-size:1rem; font-weight:900;}
.calhead b small{font-size:0.76rem; font-weight:700; color:var(--text-dim);}
.calnav{width:36px; height:36px; border:none; border-radius:18px; background:var(--bg); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.calnav:disabled{opacity:0.35; cursor:default;}
.calgrid{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; margin-top:8px;}
.caldow{text-align:center; font-size:0.7rem; font-weight:700; color:var(--text-dim); padding-bottom:2px;}
.calday{position:relative; height:36px; border:none; border-radius:9px; background:none; color:var(--text); font-size:1rem; cursor:pointer; padding:0;}
.calday .display{font-weight:700;}
.calday.w{background:var(--accent); color:var(--accent-text);}
.calday.future{color:color-mix(in srgb, var(--text-dim) 55%, transparent); cursor:default;}
.calday.today{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text);}
.calday i{position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%; background:var(--hi); box-shadow:0 0 0 1.5px var(--text);}
.calday.w i{box-shadow:0 0 0 1.5px var(--accent-text);}
.callegend{display:flex; gap:14px; margin-top:8px; font-size:0.72rem; color:var(--text-dim);}
.callegend span{display:inline-flex; align-items:center; gap:5px;}
.callegend i{display:inline-block; width:12px; height:12px; border-radius:3px;}
.callegend .lw{background:var(--accent);}
.callegend .lc{width:8px; height:8px; border-radius:50%; background:var(--hi); box-shadow:0 0 0 1.5px var(--text);}
.callegend .lt{border:2px solid var(--text); box-sizing:border-box;}
/* 每一天 */
#historyCard{background:none; padding:4px 0;}
.historylist{gap:0;}
.historyrow{background:none; border:none; border-bottom:1px solid var(--border); border-radius:0; padding:11px 2px; gap:10px;}
.historyrow .hdate{width:48px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.historyrow .hdate b{font-size:1.45rem; font-weight:800; line-height:1;}
.historyrow .hdow{font-size:0.7rem;}
.historyrow .hmid{flex:1; min-width:0; display:flex; flex-direction:column;}
.historyrow .hmid b{display:flex; align-items:center; gap:6px; font-size:0.95rem; font-weight:900; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.historyrow .hmid > span{font-size:0.76rem; color:var(--text-dim); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.historyrow .hvol{font-size:1.1rem; font-weight:800;}
.historyrow .hchev{color:var(--text-dim);}
.historyrow .sugchip svg.ic{fill:currentColor;}

/* 當天報表（手機滿版、電腦右側） */
.drawer{background:var(--bg); border-left:none;}
.drawer-head{background:var(--block); color:var(--block-text); border-bottom:none; padding-top:calc(env(safe-area-inset-top,0px) + 10px);}
.drawer-head .nav, .drawer-head .sheetx{color:var(--block-text); background:var(--block-glass);}
.drawer-head h3{font-size:0.95rem;}
.drawer-body{padding-top:0;}
.ddhero{background:var(--block); color:var(--block-text); margin:0 -16px; padding:4px 20px 18px; border-radius:0 0 24px 24px;}
.ddsub{font-size:0.8rem; font-weight:700; color:var(--block-sub);}
.ddname{font-size:1.6rem; font-weight:900; margin-top:2px;}
.ddhero .ddkpi{margin-top:10px; gap:8px;}
.ddhero .ddkpi .k{background:none; padding:0; text-align:left;}
.ddhero .ddkpi .n{font-size:1.6rem; font-weight:800; color:var(--block-text);}
.ddhero .ddkpi .n.hi{color:var(--hi);}
.ddhero .ddkpi .l{color:var(--block-sub); font-size:0.72rem;}
.ddex{border:none; border-bottom:1px solid var(--border); border-radius:0; padding:12px 0;}
.ddex h4{font-size:1rem; font-weight:900;}
.ddchips{display:flex; flex-wrap:wrap; gap:6px;}
.ddchip{display:inline-flex; align-items:center; gap:3px; min-height:30px; padding:0 10px; border-radius:15px; background:var(--surface); font-family:var(--num); font-size:1.05rem; font-weight:700;}
.ddchip.warm{background:none; border:1.5px dashed var(--border); color:var(--text-dim); font-family:var(--font); font-size:0.8rem;}
.ddchip.pr{background:var(--hi); color:var(--hi-text);}
.ddchip.pr svg.ic{fill:currentColor;}
.ddadv{background:var(--surface); border-radius:14px; padding:10px 14px;}
.ddadv summary{font-weight:800; cursor:pointer;}
.ddadv .advice{margin-top:8px;}
.ddacts{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ddacts .wbtn{min-height:50px; border:2px solid var(--accent-ink); color:var(--accent-ink); background:none; border-radius:25px; font-weight:800; font-size:0.92rem;}
.ddacts .submit{margin:0; min-height:50px; background:var(--hi); color:var(--hi-text); border-radius:25px;}
.ddcopy{align-self:center;}
@media (max-width:1023px){ .drawer{width:100%;} }

/* ===== 身體頁 ===== */
.bdgrid{display:grid; grid-template-columns:1.3fr 1fr; gap:12px; align-items:end;}
.bdbig{font-size:4.4rem; font-weight:800; line-height:0.9;}
.bdmid{font-size:3rem; font-weight:800; line-height:0.9;}
.bdmeta{font-size:0.82rem; font-weight:700; color:var(--block-sub); margin-top:10px;}
.bdbtns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.bdbtns button{min-height:48px; border-radius:24px; font-weight:900; font-size:0.92rem; cursor:pointer;}
.bdgo{border:none; background:var(--hi); color:var(--hi-text);}
.bdghost{background:transparent; border:2px solid var(--block-faint); color:var(--block-text);}
#page-body .bodyinfo{color:var(--text-dim);}
svg.fx .ln{stroke:var(--accent-ink); stroke-width:2.6;}
svg.fx .pt{fill:var(--accent-ink);}
svg.fx .pt.dim{fill:var(--body-1); opacity:1;}
svg.fx .band{fill:var(--accent-ink); opacity:0.1;}

/* ===== 設定頁 ===== */
@media (max-width:1023px){ body[data-tab="settings"] #page-settings{gap:10px;} }
.sthero .acct{display:flex; align-items:center; gap:12px;}
.stavatar{width:54px; height:54px; border-radius:50%; border:2px solid var(--block-text); background:var(--hi); color:var(--hi-text); display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:900; overflow:hidden; flex:0 0 auto;}
.stavatar img{width:100%; height:100%; object-fit:cover;}
.sthero .who .n{font-size:1.1rem; font-weight:900;}
.sthero .who .e{color:var(--block-sub);}
.sthd{font-size:0.8rem; font-weight:900; color:var(--text-dim); padding:6px 6px 0;}
.stcard{padding:4px 16px;}
.stcard .card-h, .stcard .approw{padding-top:10px;}
.stcard .row2{padding-bottom:10px;}
.strow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--border);}
.strow:last-child{border-bottom:none;}
.stt b{display:block; font-size:0.95rem; font-weight:900;}
.stt span{display:block; font-size:0.74rem; color:var(--text-dim); margin-top:2px;}
.stepper2{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.stepper2 button{width:40px; height:40px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:1.2rem; font-weight:700; cursor:pointer;}
.stepper2 b{font-size:1.7rem; font-weight:800; min-width:32px; text-align:center;}
.stepper2 span{font-size:0.8rem; margin-left:-4px;}
.stlink{width:100%; min-height:56px; border:none; background:none; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; cursor:pointer; text-align:left;}
.stlink > span:first-child{display:flex; align-items:center; gap:8px; font-weight:900; font-size:0.95rem;}
.stlink b{display:block; font-weight:900;}
.stlink small{display:block; font-size:0.74rem; color:var(--text-dim); font-weight:500;}
.stlink > span:first-child:has(small){flex-direction:column; align-items:flex-start; gap:2px;}
.stv{color:var(--text-dim); font-size:0.9rem;}
.logoutbtn{min-height:52px; border:2px solid var(--neg); border-radius:26px; background:var(--bg); color:var(--neg); font-weight:900; font-size:0.95rem; cursor:pointer; margin:6px 0 4px;}

/* ===== 登入 ===== */
.login{padding:0; align-items:stretch; justify-content:stretch; background:var(--bg); flex-direction:column;}
.loginbox{max-width:none; height:100%; align-items:stretch; text-align:left; gap:0;}
.loginhero{flex:1; background:var(--block); color:var(--block-text); border-radius:0 0 36px 36px; padding:calc(env(safe-area-inset-top,0px) + 24px) 28px 40px; display:flex; flex-direction:column; justify-content:flex-end;}
.loginhero svg{width:110px; height:110px;}
.loginhero h1{font-size:2.4rem; margin:18px 0 0; font-family:var(--font); font-weight:900; letter-spacing:0.02em;}
.loginhero p{color:var(--block-sub)!important; font-size:1.05rem!important; font-weight:700; line-height:1.6; margin:8px 0 0!important;}
.loginfoot{padding:28px 28px calc(env(safe-area-inset-bottom,0px) + 30px); display:flex; flex-direction:column; align-items:center; gap:12px;}
.loginfoot .note2{font-size:0.78rem; color:var(--text-dim); text-align:center; line-height:1.6; margin:0;}
@media (min-width:700px){ .loginbox{max-width:440px; margin:0 auto; height:auto; min-height:100%;} }
.ddchip.cd{font-family:var(--font); font-size:0.82rem; font-weight:700;}

/* ===== 本週肌群：細線 Q 版小人＋右邊列表 ===== */
.bmwrap{display:flex; gap:12px; align-items:center; margin-top:4px;}
.bmwrap .bodyfig{flex:0 0 auto; width:120px;}
#bodySvg{width:120px; max-width:none; height:auto;}
#bodySvg .o{stroke:var(--text); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round;}
#bodySvg .sk{fill:var(--bg);}
#bodySvg .mz{stroke:var(--text); stroke-width:1.4; cursor:pointer;}
#bodySvg .mz.z{stroke-dasharray:3 2;}
#bodySvg .mz.pick{stroke-width:2.6; stroke-dasharray:none;}
#bodySvg .eye{fill:var(--text);}
#bodySvg .smile{fill:none; stroke:var(--text); stroke-width:1.4; stroke-linecap:round;}
#bodySvg .abl{fill:none; stroke:var(--text); stroke-width:0.9; opacity:0.45; pointer-events:none;}
.bmwrap .bmlist{flex:1; min-width:0; margin-top:0; gap:0;}
.bmwrap .bmrow{grid-template-columns:3.2em minmax(0, 1fr) 1.8em; gap:6px; padding:3px 4px; border-top:none; font-size:0.8rem;}
.bmwrap .bmrow .bmn{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bmwrap .bmbar{height:9px; background:var(--chart-track);}
.bmwrap .bmbar i{top:0; bottom:0; border-radius:5px;}
.bmwrap .bmv{text-align:right; font-size:1.05rem; font-weight:800;}
.bmwrap .bmrow.none .bmv{color:var(--neg);}
.bmlegend i.z{background:var(--bg); border:1.4px dashed var(--text); box-sizing:border-box;}
html[lang="en"] .bmwrap .bmrow, html[lang="ja"] .bmwrap .bmrow{grid-template-columns:5.4em minmax(0, 1fr) 1.8em;}
html[lang="en"] .bmwrap .bodyfig, html[lang="ja"] .bmwrap .bodyfig{width:104px;}
html[lang="en"] #bodySvg, html[lang="ja"] #bodySvg{width:104px;}

.drawer-body{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 40px);}
.donesheet .sheet-body{padding-bottom:20px;}

/* 本週肌群：正面＋背面兩個小人並排，列表在下面 */
.bmwrap{flex-direction:column; align-items:stretch; gap:10px;}
.bmwrap .bodyfig{width:auto!important; display:flex; justify-content:center; gap:18px;}
#bodySvg{width:236px!important; max-width:100%;}
.bmwrap .bmlist{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:14px;}
#bodySvg .figlbl{fill:var(--text-dim); font-size:9px; font-family:inherit; stroke:none;}
#bodySvg .hair{fill:var(--text); opacity:0.75;}