/* ============================================================
   Earnlyze（營利分析）獨立站 — 共用樣式
   行動優先；支出一律紅色、收入與淨利綠色（全站一致）。
   ============================================================ */
/* 字體層級（全站統一）：大標 22 / 卡片標題 19 / 正文 18 / 副標 17 / 次要正文 16 /
   輔助文字 15 / 小字 14 / 微字 13。hero 大標、金額大數字、圖表數字不在此列（刻意放大）。
   卡片內距統一 18px（手機 16px）；元件間距統一 12px。 */
:root {
  --green: #16a34a;
  --green-dark: #15803d;
  --green-soft: #dcfce7;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --card: #ffffff;
  --page: #f3f4f6;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --navy: #011e46;
  --navy-2: #0a2a5e;
  --navy-3: #123a75;
  --radius: 14px;
  --shadow: 0 1px 4px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 32px rgba(1, 30, 70, .12);
  /* ---------- 字體（全站統一） ----------
     中文一律思源黑體 Noto Sans TC（繁體覆蓋完整，400/500/700/800 都有載入），
     不再讓中文字 fallback 到日文字體（Zen Maru Gothic / M PLUS Rounded 1c）：
     日文字體缺部分繁體字（查／值／夠），且同粗細看起來跟思源黑體不一樣，
     是 v1.0.39 之後中文字還在粗細不一的原因。標題圓體：拉丁 Nunito（圓體）→
     中文 Noto Sans TC → 日文 Zen Maru Gothic（只補日文專用字）；
     內文系統字：依裝置系統字，但中文固定可 fallback 到已載入的 Noto Sans TC，
     不隨裝置變來變去。data-font 由 common.js 依用戶設定寫在 <html> 上。 */
  font-synthesis-weight: none; /* 禁假粗體：沒載入的粗細用最接近的真粗細代替，
     不用演算法加粗，否則假粗體跟真粗細看起來不一樣。斜體合成不受影響。 */
  --font-system: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans TC", "Noto Sans SC", "PingFang TC", "Microsoft JhengHei",
    "Noto Naskh Arabic", sans-serif;
  --font-rounded: "Nunito", "Noto Sans TC", "Zen Maru Gothic", "Noto Sans SC",
    "Noto Naskh Arabic", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-noto: "Noto Sans TC", "Noto Sans SC", -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei",
    "Noto Naskh Arabic", sans-serif;
  --font-heading: var(--font-rounded);
  --font-body: var(--font-system);
}
/* 字體選項（用戶頁「字體」，免費）：default=預設；system=全部系統字；
   noto=全站思源黑體；round=標題＋內文都圓體。 */
html[data-font="system"] { --font-heading: var(--font-system); }
html[data-font="noto"] { --font-heading: var(--font-noto); --font-body: var(--font-noto); }
html[data-font="round"] { --font-heading: var(--font-rounded); --font-body: var(--font-rounded); }
/* 首頁標題拉丁圓體：M PLUS Rounded 1c 只取拉丁子集（數字、英文字、$ 等），
   中文不經過它——它的日文漢字缺部分繁體字（查／值／夠），且同粗細跟思源黑體
   長得不一樣。中文由 --head-font 裡排在後面的 Noto Sans TC 接手（繁體覆蓋完整，
   400/500/700/800 都有載入），所以首頁標題：拉丁圓體＋中文思源黑體，各管各的，
   粗細全程一致。字體檔取自 Google Fonts 拉丁子集（fonts.gstatic.com，2026-11-12
   抓取，v22）；index.html 的字體連結已移除 M PLUS Rounded 1c，避免 Google 的
   日文子集也載入、搶走中文字。 */
@font-face{font-family:"PL Rounded Latin";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/mplusrounded1c/v22/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM1y56sNz-uEzRRL.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PL Rounded Latin";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/mplusrounded1c/v22/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM064asNz-uEzRRL.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PL Rounded Latin";font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/mplusrounded1c/v22/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM0m4qsNz-uEzRRL.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
[data-theme="dark"] {
  --ink: #f3f4f6;
  --muted: #9ca3af;
  --line: #374151;
  --card: #1f2937;
  --page: #111827;
  --green-soft: #14532d;
  --red-soft: #7f1d1d;
  --navy: #dbe7f5;
  --shadow: 0 1px 4px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}
[data-theme="eye"] {
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --green-soft: #c8e6c9;
  --page: #e8f5e9;
  --card: #f1f8e9;
  --ink: #1b3a1b;
}
[data-theme="ocean"] {
  --green: #0284c7;
  --green-dark: #0369a1;
  --green-soft: #e0f2fe;
  --page: #f0f9ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 橫向防溢出底線：頁面級不應有任何左右捲動（2026-11-11 實測各頁皆為 0 溢出，此為防呆）。
   clip 不會產生捲動容器，不影響 sticky/fixed；個別元件（如 .chart-wrap）仍可用自己的 overflow-x:auto。 */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink);
  line-height: 1.55;
  font-size: 18px;
  font-variant-numeric: tabular-nums; /* 全站數字等寬，不跳動 */
}
[dir="rtl"] body { font-family: -apple-system, "Segoe UI", "Noto Naskh Arabic", Tahoma, Arial, sans-serif; }
a { color: var(--green-dark); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.3; margin: 0 0 .5em; }
/* 標題級顯示文字一律圓體：品牌、區塊標題、卡片標題、用戶名、金額大數字 */
.brand, .section-title, .footer-brand, .user-name, .tpl-opt-name,
.hero-net .value, .stat .v, .stat-box .v, .plan .price, .mini-net,
.ref-stat .v, .dash-stat .v { font-family: var(--font-heading); }
p { margin: 0 0 .75em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* ---------- 按鈕（全站 3D 立體：上亮下暗漸層＋底部加厚邊＝厚度、
         柔和投影；按下去整顆下沉 2px、底邊收起＝下壓感。文字不加陰影，
         對比不變；漸層與底邊都用半透明黑／白疊加，六種配色下都成立） ---------- */
.btn {
  display: inline-block;
  border: 0;
  border-bottom: 3px solid rgba(0, 0, 0, .22);
  border-radius: 999px;
  padding: 13px 26px;
  background: var(--green);
  background-image: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.08) 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 6px 14px rgba(1, 30, 70, .16);
  transition: background-color .15s ease, transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease;
}
.btn:hover { background-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 9px 18px rgba(1, 30, 70, .20); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: 0 2px 6px rgba(1, 30, 70, .14); }
.btn:focus-visible { outline: 3px solid rgba(22, 163, 74, .45); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background-color: transparent; color: var(--green-dark); border: 1.5px solid var(--green); border-bottom: 3px solid var(--green-dark); box-shadow: 0 3px 8px rgba(1, 30, 70, .10); }
.btn.ghost:hover { background-color: var(--green-soft); }
.btn.ghost:active { transform: translateY(2px); border-bottom-width: 1.5px; box-shadow: 0 1px 4px rgba(1, 30, 70, .10); }
.btn.danger { background-color: var(--red); }
.btn.small { padding: 8px 16px; font-size: 15px; }
.btn.block { display: block; width: 100%; }
.btn.center { display: block; margin: 8px auto; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 12px;
}
.card h2 { font-size: 22px; }
.card h3 { font-size: 19px; }
.muted { color: var(--muted); font-size: 15px; }
.small { font-size: 14px; }
.money-good { color: var(--green-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.money-bad { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 頂欄 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 10px rgba(1, 30, 70, .06);
}
.topbar .wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); text-decoration: none; white-space: nowrap; }
.brand small { font-size: 14px; color: var(--muted); font-weight: 400; }
.brand-logo { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.topbar .spacer { flex: 1; }
.lang-select { padding: 8px 10px; border: 1px solid var(--line); border-bottom: 3px solid rgba(0,0,0,.18); border-radius: 8px; background-color: var(--card); background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%, rgba(0,0,0,.05)); box-shadow: 0 3px 8px rgba(1,30,70,.10); max-width: 130px; }

/* ---------- 表單 ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.error { color: var(--red); font-size: 15px; min-height: 1.2em; }
.ok-msg { color: var(--green-dark); font-size: 15px; }

/* ============================================================
   首頁（預覽版移植；只在 body[data-home-theme] 生效）
   來源：your_files/shou-ye-you-hua-yu-lan 預覽版 <style>，
   選擇器全部前綴 body[data-home-theme]，所以 App／登入／後台的
   共用樣式（.btn、.topbar、.plan、.stat、.sec-toggle 等）不受影響；
   預覽的 :root 變數改掛在 body[data-home-theme] 上，不動全站 :root。
   舊首頁專用規則（.landing .section、.section-title、.hero、
   .phone、.features、.faq、footer.site 等）已移除。
   App 升級方案共用的 .pricing／.plan 保留（app.html #upgradePlans
   在用），首頁用下方守門規則覆蓋其殘留效果。
   ============================================================ */
body[data-home-theme]{
        --navy:#0a2547;
        --green:#16a34a;
        --green-d:#15803d;
        --green-soft:#e4f6ea;
        --ink:#152a42;
        --body:#42536a;
        --muted:#68798f;
        --line:#e2e8f0;
        --bg:#ffffff;
        --bg-alt:#f2f4f7;
        --red:#e5483f;
        --amber-ink:#92400e;
        --amber-bg:#fef3c7;
        --radius:18px;
        /* 標題字體：拉丁／數字用 PL Rounded Latin（M PLUS Rounded 1c 拉丁子集，
           見檔案開頭 @font-face），中文一律 Noto Sans TC（繁體覆蓋完整，
           400/500/700/800 都有載入）。不要再把 M PLUS Rounded 1c 整套排第一：
           它是日文字體，缺部分繁體字（查／值／夠），且同粗細跟思源黑體長得不一樣，
           v1.0.39 只補了思源黑體 800，字形不一的問題還在。 */
        --head-font:"PL Rounded Latin","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
        --body-font:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
        --hand-font:"Caveat","LXGW WenKai TC","Ma Shan Zheng","Noto Sans TC","PingFang TC",cursive;
      }
body[data-home-theme]{
        margin:0;background:var(--bg);color:var(--body);
        font-family:var(--body-font);
        font-size:clamp(16.5px,3.4vw + 6px,18px);line-height:1.65;
        -webkit-font-smoothing:antialiased;
        overflow-x:clip;max-width:100%;
      }
body[data-home-theme] img, body[data-home-theme] svg, body[data-home-theme] video{max-width:100%}
body[data-home-theme] h1, body[data-home-theme] h2, body[data-home-theme] h3{font-family:var(--head-font);color:var(--ink);line-height:1.3;margin:0;overflow-wrap:break-word}
body[data-home-theme] p{margin:0;overflow-wrap:break-word}
body[data-home-theme] .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(12px,4.5vw,20px)}
body[data-home-theme] section{padding:clamp(28px,6vw,46px) 0}
body[data-home-theme] .feat, body[data-home-theme] .plan, body[data-home-theme] .stat, body[data-home-theme] .step, body[data-home-theme] .prem, body[data-home-theme] .report-card{min-width:0}
body[data-home-theme] .alt{background:var(--bg-alt)}
body[data-home-theme] .sec-head{max-width:680px;margin:0 0 clamp(18px,4.5vw,26px);text-align:left}
body[data-home-theme] .sec-head h2{font-size:clamp(27px,6.4vw,38px);font-weight:800}
body[data-home-theme] .sec-head .bar{width:46px;height:4px;border-radius:2px;background:var(--green);margin:12px 0 0}
body[data-home-theme] .sec-head p{margin-top:10px;font-size:clamp(15px,4vw,17px)}
/* ---------- collapsible sections: ONLY the fields Charlie named —
         earn vs keep, report preview, four analyses, premium features,
         three steps, referral, (added later, with its own
         editor-written note) the FAQ and (added later still, at his
         word) the customization field — fold away or open again from
         their own header. Every other field (download, pricing…)
         stays fixed exactly as it was, with no toggle at all. On a
         collapsible field
         the header always stays visible; only the body under it folds.
         The toggle is a real button carrying ONLY an arrow — no
         written label on it (Charlie's call); its 收起 / 展開 state
         lives in aria-label / aria-expanded for assistive tech, and
         the whole header row is tappable too. ---------- */
body[data-home-theme] .collapsible .sec-head{position:relative;padding-inline-end:clamp(52px,14vw,60px);cursor:pointer}
body[data-home-theme] .sec-toggle{
        position:absolute;top:1px;inset-inline-end:0;
        display:inline-flex;align-items:center;justify-content:center;
        width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
        border:1.5px solid var(--green);border-bottom:3px solid var(--green-d);
        background:#fff;background-image:linear-gradient(180deg,#fff,#edf3ef);color:var(--green-d);
        box-shadow:0 4px 10px rgba(1,30,70,.16);
        transition:transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease, background-color .15s ease;
      }
body[data-home-theme] .sec-toggle:active{transform:translateY(2px);border-bottom-width:1.5px;box-shadow:0 1px 4px rgba(1,30,70,.14);background-color:var(--green-soft)}
body[data-home-theme] .sec-toggle:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
body[data-home-theme] .sec-toggle .chev{flex:none;transition:transform .25s ease}
body[data-home-theme] .is-collapsed .sec-toggle .chev{transform:rotate(180deg)}
body[data-home-theme] .sec-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease}
body[data-home-theme] .sec-body-in{overflow:hidden;min-height:0;min-width:0}
body[data-home-theme] .is-collapsed .sec-body{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s ease,visibility 0s linear .35s}
@media (prefers-reduced-motion: reduce){body[data-home-theme] .sec-body, body[data-home-theme] .sec-toggle .chev{transition:none}}
@media(max-width:430px){body[data-home-theme] .collapsible .sec-head{padding-inline-end:48px}body[data-home-theme] .sec-toggle{width:36px;height:36px}body[data-home-theme] .sec-toggle .chev{width:16px;height:16px}}
/* ---------- top bar ---------- */
body[data-home-theme] .topbar{
        position:sticky;top:0;z-index:50;background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 1px 10px rgba(21,42,66,.05);
      }
body[data-home-theme] .topbar-in{display:flex;align-items:center;gap:clamp(3px,1.2vw,10px);min-height:62px;flex-wrap:nowrap;min-width:0}
body[data-home-theme] .brand{display:flex;align-items:center;gap:clamp(4px,1.4vw,9px);font-family:var(--head-font);font-weight:800;font-size:var(--top-brand,clamp(13.5px,3.6vw,19px));color:var(--ink);letter-spacing:.01em;white-space:nowrap;text-decoration:none;flex:0 1 auto;min-width:0}
body[data-home-theme] .brand .mark{
        width:clamp(26px,7vw,38px);height:clamp(26px,7vw,38px);border-radius:9px;flex:none;
        background:linear-gradient(150deg,#123a6b,#0a2547);
        display:grid;place-items:center;
      }
body[data-home-theme] .brand .mark svg{width:58%;height:58%}
body[data-home-theme] .brand small{font-family:var(--body-font);font-weight:500;font-size:calc(var(--top-brand,clamp(13.5px,3.6vw,19px)) * .66);color:var(--muted);margin-inline-start:2px}
body[data-home-theme] .preview-pill{
        font-size:var(--top-pill,clamp(9.5px,2.6vw,12px));font-weight:700;color:var(--amber-ink);background:var(--amber-bg);
        padding:3px clamp(5px,1.6vw,10px);border-radius:999px;white-space:nowrap;flex:none;
      }
body[data-home-theme] .topbar .spacer{flex:1 1 0;min-width:0}
/* ---------- 頂欄改兩行（2026-11-12）：第一行放大品牌（圖標＋產品名＋標語）靠左；
         第二行語言、註冊、登入改回一行、三個等寬、向左靠齊；第一行變高一點沒關係 ---------- */
body[data-home-theme] .topbar .wrap{flex-direction:column;align-items:stretch;gap:0;min-height:0}
body[data-home-theme] .topbar-row{display:flex;align-items:center;min-height:52px;min-width:0}
body[data-home-theme] .topbar-row1{justify-content:flex-start;min-height:68px}
/* 頂欄第二行三個按鈕改回一行、向左靠齊、三個一樣寬（grid 三欄等寬、上限 160px，
         桌機不會拉太寬）；語言選擇、註冊、登入同高 40px。
         注意：這裡不能用 flex 均分——<select> 當 flex 子項不吃均分（只用內容寬），
         包了 wrapper div 後 wrapper 仍會被內容寬卡住（實測 86px 不動）；grid 的
         minmax(0,1fr) 三欄天生等寬，不受內容寬影響。 */
body[data-home-theme] .topbar-row2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start;align-items:center;gap:8px}
body[data-home-theme] .topbar-row2>*{margin:0}
body[data-home-theme] .topbar-row2 .lang-select-wrap,
body[data-home-theme] .topbar-row2 .btn.small{min-width:0;max-width:160px;height:40px;min-height:40px;box-sizing:border-box}
/* select 本身當 flex 子項時不吃均分（只用內容寬），所以包一層 div 當 flex 子項，select 在裡面撐滿 */
body[data-home-theme] .topbar-row2 .lang-select{width:100%;height:100%;max-width:none;box-sizing:border-box}
body[data-home-theme] .topbar-row2 .btn.small{display:inline-flex;align-items:center;justify-content:center}
body[data-home-theme] .topbar .brand{font-size:clamp(22px,5.8vw,28px);gap:clamp(10px,2.6vw,14px)}
body[data-home-theme] .topbar .brand-logo{width:clamp(54px,12.5vw,62px);height:clamp(54px,12.5vw,62px);border-radius:10px}
/* 頂欄品牌兩行字：上面產品名、下面標語（跟頁尾同一個 footer_tag key），兩行向左對齊；
   標語比產品名小一號、顏色稍淡；圖標加大但第一行仍維持 52px 高 */
body[data-home-theme] .topbar .brand .brand-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.18;min-width:0}
body[data-home-theme] .topbar .brand .brand-name{font-size:clamp(23px,6vw,30px);font-weight:800;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
body[data-home-theme] .topbar .brand .brand-tag{font-size:clamp(12px,3.2vw,15px);font-weight:500;color:var(--muted);white-space:nowrap;line-height:1.3}
body[data-home-theme] .topbar .brand small{font-size:.64em}
body[data-home-theme] .lang-toggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
body[data-home-theme] .lang-toggle button{
        appearance:none;border:0;background:transparent;color:var(--muted);
        font:inherit;font-size:var(--top-lang,clamp(11.5px,3vw,14px));font-weight:700;padding:7px clamp(5px,1.8vw,13px);min-height:38px;cursor:pointer;white-space:nowrap;
      }
body[data-home-theme] .lang-toggle button[aria-pressed="true"]{background:var(--green);color:#fff}
body[data-home-theme] .nav-btn{
        display:inline-flex;align-items:center;justify-content:center;flex:none;
        min-height:clamp(32px,8.6vw,40px);padding:7px clamp(7px,2.4vw,18px);border-radius:999px;
        font-family:var(--head-font);font-weight:700;font-size:var(--top-btn,clamp(12px,3.2vw,15px));text-decoration:none;white-space:nowrap;
      }
/* JS auto-fit levels: when the bar is still too tight, step the type and
         padding down until every item fits whole — nothing is clipped. */
body[data-home-theme] .topbar-in.fit-1{--top-brand:15.5px;--top-pill:10.5px;--top-lang:12px;--top-btn:13px}
body[data-home-theme] .topbar-in.fit-2{--top-brand:14px;--top-pill:10px;--top-lang:11.5px;--top-btn:12.5px}
body[data-home-theme] .topbar-in.fit-3{--top-brand:13px;--top-pill:9.5px;--top-lang:11px;--top-btn:12px}
body[data-home-theme] .topbar-in.fit-4{--top-brand:12px;--top-pill:8.5px;--top-lang:10.5px;--top-btn:11px}
body[data-home-theme] .topbar-in.fit-5{--top-brand:11px;--top-pill:8px;--top-lang:10px;--top-btn:10.5px}
body[data-home-theme] .topbar-in.fit-6{--top-brand:10px;--top-pill:7.5px;--top-lang:9.5px;--top-btn:10px}
body[data-home-theme] .topbar-in.fit-2 .brand .mark, body[data-home-theme] .topbar-in.fit-3 .brand .mark{width:27px;height:27px;border-radius:8px}
body[data-home-theme] .topbar-in.fit-4 .brand .mark{width:23px;height:23px;border-radius:7px}
body[data-home-theme] .topbar-in.fit-5 .brand .mark{width:21px;height:21px;border-radius:6px}
body[data-home-theme] .topbar-in.fit-6 .brand .mark{width:19px;height:19px;border-radius:6px}
/* the brand subtitle is never hidden — it just shrinks with the rest */
body[data-home-theme] .topbar-in.fit-5 .brand, body[data-home-theme] .topbar-in.fit-6 .brand{gap:3px}
body[data-home-theme] .topbar-in.fit-5 .preview-pill, body[data-home-theme] .topbar-in.fit-6 .preview-pill{padding:2px 4px}
body[data-home-theme] .topbar-in.fit-2 .lang-toggle button, body[data-home-theme] .topbar-in.fit-3 .lang-toggle button{padding:6px 5px;min-height:32px}
body[data-home-theme] .topbar-in.fit-4 .lang-toggle button{padding:4px 5px;min-height:28px}
body[data-home-theme] .topbar-in.fit-5 .lang-toggle button, body[data-home-theme] .topbar-in.fit-6 .lang-toggle button{padding:3px 4px;min-height:26px}
body[data-home-theme] .topbar-in.fit-2 .nav-btn, body[data-home-theme] .topbar-in.fit-3 .nav-btn{padding:6px 7px;min-height:32px}
body[data-home-theme] .topbar-in.fit-4 .nav-btn{padding:4px 6px;min-height:28px}
body[data-home-theme] .topbar-in.fit-5 .nav-btn, body[data-home-theme] .topbar-in.fit-6 .nav-btn{padding:3px 5px;min-height:26px}
body[data-home-theme] .nav-btn.login{color:var(--green-d);border:1.5px solid var(--green);background:#fff}
body[data-home-theme] .nav-btn.signup{color:#fff;background:var(--green)}
/* ---------- buttons ---------- */
body[data-home-theme] .btn{
        display:inline-flex;align-items:center;justify-content:center;gap:8px;
        min-height:56px;padding:14px clamp(16px,5vw,30px);border-radius:999px;max-width:100%;
        font-family:var(--head-font);font-weight:800;font-size:clamp(17px,4.8vw,20px);
        text-decoration:none;border:0;border-bottom:3px solid rgba(0,0,0,.22);cursor:pointer;text-align:center;
      }
body[data-home-theme] .btn-green{background-color:var(--green);background-image:linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.08) 100%);color:#fff;box-shadow:0 12px 26px rgba(22,163,74,.32)}
body[data-home-theme] .btn-green:active{background-color:var(--green-d)}
/* 首頁 .btn 的 border:0 會蓋掉共用 .btn:active 的底邊收起，這裡補回來（權重高於首頁 .btn） */
body[data-home-theme] .btn:active{border-bottom-width:1px;box-shadow:0 2px 6px rgba(1,30,70,.14)}
body[data-home-theme] .btn-outline{border:1.5px solid rgba(255,255,255,.55);border-bottom:3px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.04);box-shadow:0 3px 8px rgba(0,0,0,.28)}
body[data-home-theme] .btn-outline:active{transform:translateY(2px);border-bottom-width:1.5px;box-shadow:0 1px 4px rgba(0,0,0,.20)}
body[data-home-theme] .btn.small{min-height:50px;padding:11px 24px;font-size:16px}
/* ---------- hero ---------- */
body[data-home-theme] .hero{
        color:#dbe7f5;
        background:
          radial-gradient(680px 360px at 88% -40px,rgba(46,190,110,.28),transparent 62%),
          radial-gradient(620px 420px at 4% 112%,rgba(38,92,168,.4),transparent 62%),
          linear-gradient(165deg,#0c2c54,#081d3a);
        padding:clamp(34px,7vw,54px) 0 clamp(38px,7.5vw,58px);overflow:hidden;
      }
/* the hero uses exactly the same side margins as the rest of the
         page — the top title's breathing room lines up with every other
         section's .wrap padding, at every width */
body[data-home-theme] .hero .wrap{padding:0 clamp(12px,4.5vw,20px)}
/* the single hero column is locked to the container's real width
         (minmax(0,1fr) + min-width:0): the nowrap headline lines can no
         longer stretch the column wider than the screen, which previously
         pushed the "centred" button's centre off-screen to the right and
         made the headline auto-fit measure a box wider than the phone */
body[data-home-theme] .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-items:center}
body[data-home-theme] .hero-copy{text-align:left;min-width:0}
body[data-home-theme] .hero h1{color:#fff;font-size:clamp(52px,17.5vw,138px);font-weight:800;line-height:1.28;max-width:100%;text-align:center;display:grid;justify-content:center}
/* centred headline: both lines sit in ONE grid column as a group —
         the column is as wide as the widest line and centred on the
         screen, and both lines are end-aligned inside it, so their RIGHT
         edges share one vertical line: the "？" at the end of the second
         line sits exactly under the running car's nose at the end of the
         first line (Charlie's call). The shorter line simply shifts right
         by half the width difference; the group as a whole stays centred.
         The two lines never wrap and never clip: if a line is wider than
         the screen, the headline auto-fit script steps the font size down
         until the whole line fits. */
body[data-home-theme] .hero h1 .h1-l1, body[data-home-theme] .hero h1 .h1-l2{display:block;white-space:nowrap;text-align:center;justify-self:end}
body[data-home-theme] .hero h1 .h1-l2{color:#4ade80}
/* first line only — handwritten and slanted, per Charlie: the text is
         written, not typeset, and the line now ends with a running-car
         graphic instead of exclamation marks — a professional line car
         icon (Lucide "car", ISC licensed; nose clearly on the right)
         with three speed lines trailing behind it, longest first, then shorter
         and shorter — the lines' right ends are all flush at the same x
         (right-aligned against the car) and only their left ends step
         back, so they read as deliberate motion trails, never a WiFi fan. The
         hand font falls through per glyph (Caveat for Latin, LXGW WenKai
         TC / Ma Shan Zheng for Chinese); the skew + slight tilt give the
         slant that Chinese hand fonts don't carry as an italic of their own. */
body[data-home-theme] .hero h1 .h1-l1{
        font-family:var(--hand-font);
        font-weight:700;
        font-size:1.12em;
        letter-spacing:.015em;
        color:#fff;
        transform:rotate(-2.4deg) skewX(-7deg);
        transform-origin:50% 85%;
      }
/* Caveat (Latin hand font) renders much smaller than the Chinese hand
         fonts at the same size, so the English first line gets a bigger scale */
html[lang="en"] body[data-home-theme] .hero h1 .h1-l1{font-size:1.4em}
/* the running car that ends the first headline line: sized in em so it
         grows and shrinks with the headline's auto-fit, wheels near baseline.
         The car itself is the Lucide "car" line icon (front on the right),
         drawn at scale 3.15 inside its frame. The three green speed lines
         trail behind its rear, kept short (30/21/12) and right-aligned as
         Charlie specified. The graphic is deliberately compact — the SVG
         viewBox (70 0 106 56) is trimmed hard to the graphic itself and the
         car rides at .60em tall — because every em the car eats is an em
         the auto-fit takes back from the headline's font size; keeping the
         car small is what lets the centred headline itself run much larger
         on a phone. A few units of breathing room remain on every side so
         neither the car's nose nor its strokes touch the graphic's own
         edge — the nose can never be clipped by the frame, and the headline
         fit script additionally measures the nose's real on-screen position
         (see fitHero). */
body[data-home-theme] .hero h1 .h1-car{height:.52em;width:auto;margin-left:.05em;vertical-align:-.14em}
/* the sub-slogan under the headline is ONE whole sentence: it never
         wraps and is never clipped — the fit script steps its font size
         down until the entire line fits the screen, same rule as the
         headline. Its size is deliberately kept well below the headline's
         (roughly a third of it) so the main title clearly dominates —
         Charlie flagged that it used to read almost as big as the title. */
body[data-home-theme] .hero .sub{max-width:560px;margin:20px auto 0;text-align:center;font-size:clamp(14.5px,3.9vw,17px);line-height:1.75;color:#c3d4ea;white-space:nowrap}
/* the hero button is centred with flexbox inside the locked-width
         column above: its left and right edges are equidistant from the
         column's edges, which are the screen's edges (minus the tiny auto
         margins) — dead centre of the phone, no sideways drift */
body[data-home-theme] .hero-btns{display:flex;justify-content:center;width:100%;margin-top:30px}
body[data-home-theme] .hero-btns .btn{flex:none;width:min(348px,100%);margin-left:auto;margin-right:auto;min-height:50px;padding:11px clamp(14px,4.4vw,24px);font-size:clamp(15.5px,4.3vw,18px)}
body[data-home-theme] .trust-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:7px;text-align:left}
body[data-home-theme] .trust-list li{display:flex;align-items:center;gap:8px;font-weight:700;font-size:clamp(15.5px,4.4vw,18px);color:#eef4fc;line-height:1.5;min-width:0}
body[data-home-theme] .trust-list li svg{flex:none}
body[data-home-theme] .trust-list li span{min-width:0;overflow-wrap:break-word}
/* hero phone mock */
body[data-home-theme] .phone-frame{
        width:100%;max-width:min(330px,100%);margin:0 auto;background:#0a1120;border-radius:44px;
        padding:clamp(8px,2.6vw,11px);box-shadow:0 34px 64px rgba(0,0,0,.5);
      }
body[data-home-theme] .phone-card{background:#fff;border-radius:34px;padding:22px clamp(14px,4.5vw,20px) 20px;color:var(--body)}
body[data-home-theme] .phone-card .notch{width:86px;height:5px;border-radius:3px;background:#d7dee8;margin:0 auto 16px}
body[data-home-theme] .ph-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
body[data-home-theme] .ph-top .k{font-size:15px;color:var(--muted)}
body[data-home-theme] .ph-top .d{font-size:14.5px;color:var(--muted)}
body[data-home-theme] .ph-net{font-family:var(--head-font);font-weight:800;font-size:clamp(34px,9.5vw,45px);color:var(--green-d);line-height:1.15;margin-top:2px}
body[data-home-theme] .ph-rows{margin-top:10px;display:grid;gap:5px;font-size:clamp(15px,4.2vw,16.5px)}
body[data-home-theme] .ph-rows div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px}
body[data-home-theme] .ph-rows .g{color:var(--green-d);font-weight:800}
body[data-home-theme] .ph-rows .r{color:var(--red);font-weight:800}
body[data-home-theme] .ph-bars{display:flex;align-items:flex-end;gap:7px;height:74px;margin-top:18px;padding:0 2px}
body[data-home-theme] .ph-bars i{flex:1;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#4ade80,#16a34a)}
body[data-home-theme] .ph-days{display:flex;gap:7px;margin-top:6px;padding:0 2px;font-size:13.5px;color:var(--muted);text-align:center}
body[data-home-theme] .ph-days span{flex:1}
body[data-home-theme] .ph-stats{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-top:12px;font-size:clamp(14.5px,4vw,16px);font-weight:700;color:var(--ink)}
body[data-home-theme] .ph-best{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
body[data-home-theme] .ph-best .k{font-size:15px;color:var(--muted)}
body[data-home-theme] .ph-best .v{font-weight:800;color:var(--green-d);font-size:18.5px;font-family:var(--head-font)}
/* ---------- earn strip ---------- */
body[data-home-theme] .earn{text-align:left;max-width:720px;margin:0 auto 0 0}
body[data-home-theme] .earn h2{font-size:clamp(27px,6.4vw,38px);font-weight:800}
body[data-home-theme] .earn .bar{width:46px;height:4px;border-radius:2px;background:var(--green);margin:12px 0 0}
body[data-home-theme] .earn p{margin-top:12px;font-size:clamp(15.5px,4.2vw,17.5px)}
/* ---------- report preview ---------- */
body[data-home-theme] .report-card{
        width:100%;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);
        border-radius:24px;padding:22px clamp(14px,4.5vw,20px) 24px;box-shadow:0 22px 44px rgba(21,42,66,.1);
      }
body[data-home-theme] .report-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
body[data-home-theme] .report-top .t{font-family:var(--head-font);font-weight:800;font-size:clamp(18px,5vw,20px);color:var(--ink)}
body[data-home-theme] .demo-badge{
        font-size:14px;font-weight:800;color:var(--amber-ink);background:var(--amber-bg);
        border-radius:999px;padding:4px 12px;white-space:nowrap;
      }
body[data-home-theme] .stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2.6vw,12px);margin-top:16px}
body[data-home-theme] .stat{background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:12px clamp(10px,3.4vw,14px)}
body[data-home-theme] .stat .k{font-size:clamp(13.5px,3.6vw,15px);color:var(--muted)}
body[data-home-theme] .stat .v{font-size:clamp(20px,6vw,26px);font-weight:800;font-family:var(--head-font);color:var(--ink);margin-top:2px}
body[data-home-theme] .stat .v.green{color:var(--green-d)}
body[data-home-theme] .stat .v.red{color:var(--red)}
body[data-home-theme] .stat.wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px}
body[data-home-theme] .stat.wide .v{font-size:clamp(26px,7.8vw,35px);color:var(--green-d)}
body[data-home-theme] .chart-box{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px 12px 8px}
body[data-home-theme] .chart-box .ct{font-size:13.5px;color:var(--muted);margin:0 2px 6px}
body[data-home-theme] .best-chip{
        margin-top:14px;display:flex;gap:10px;align-items:flex-start;
        background:var(--green-soft);border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.55;color:var(--ink);
      }
body[data-home-theme] .best-chip svg{flex:none;margin-top:2px}
body[data-home-theme] .demo-note{text-align:left;color:var(--muted);font-size:13.5px;margin:10px auto 0;max-width:560px}
/* ---------- feature panel: one field split into four cells, left-aligned ---------- */
body[data-home-theme] .feat-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:left}
@media(min-width:860px){body[data-home-theme] .feat-panel{grid-template-columns:repeat(4,minmax(0,1fr))}}
body[data-home-theme] .feat{background:#fff;padding:clamp(14px,3.4vw,20px) clamp(12px,3vw,18px)}
/* the icon and the title live in their own header row — one row,
         always: the row is a plain flex line that can never wrap the
         title under the icon, at any screen width or in any language */
body[data-home-theme] .feat-head{display:flex;align-items:center;column-gap:clamp(8px,2.4vw,11px);min-width:0}
body[data-home-theme] .feat .ic{
        width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);border-radius:11px;display:grid;place-items:center;
        background:var(--green-soft);flex:none;
      }
body[data-home-theme] .feat .ic svg{width:21px;height:21px}
body[data-home-theme] .feat h3{font-size:clamp(16.5px,4.4vw,19px);font-weight:800;flex:1 1 auto;min-width:0}
body[data-home-theme] .feat p{font-size:clamp(14px,3.8vw,15.5px);margin-top:7px;line-height:1.6}
/* ---------- customization slogan: one compact field — the slogan
         as the section title, one line on what can be made your own,
         then the adjustable items as wrapping chips (they wrap, never
         clip, at any width) ---------- */
body[data-home-theme] .cust-chips{display:flex;flex-wrap:wrap;gap:clamp(10px,3vw,28px);max-width:760px}
body[data-home-theme] .cust-col{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(7px,2vw,10px)}
body[data-home-theme] .cust-chips span{
        display:inline-flex;align-items:center;gap:7px;
        background:var(--green-soft);color:var(--green-d);font-weight:700;
        font-size:clamp(13.5px,3.7vw,15px);line-height:1.4;
        border-radius:999px;padding:7px clamp(11px,3vw,15px);
      }
body[data-home-theme] .cust-chips span svg{flex:none}
/* ---------- panel colour themes: content, layout and copy never
         change — ONLY the colour palette swaps. Homepage themes restyle
         the whole page through the same CSS variables the page already
         uses (plus the hero / footer / brand mark, which were painted
         with fixed colours); App themes restyle only the phone mock in
         the earn section. Both pickers are plain in-memory state for
         this preview — nothing is stored. ---------- */
body[data-home-theme] .theme-groups{display:grid;gap:clamp(16px,3.6vw,22px);max-width:900px}
body[data-home-theme] #custom .theme-groups{margin-top:clamp(18px,4vw,26px)}
@media(min-width:820px){body[data-home-theme] .theme-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
body[data-home-theme] .theme-group h3{font-size:clamp(16px,4.2vw,18px);font-weight:800;margin-bottom:9px}
body[data-home-theme] .swatch-row{display:flex;flex-wrap:wrap;gap:clamp(6px,1.8vw,9px)}
body[data-home-theme] .theme-btn{
        display:inline-flex;align-items:center;gap:8px;cursor:pointer;
        border:1.5px solid var(--line);border-bottom:3px solid rgba(0,0,0,.16);background:#fff;background-image:linear-gradient(180deg,#fff,#f3f6f4);color:var(--ink);
        border-radius:999px;padding:6px 13px 6px 8px;min-height:40px;
        font:inherit;font-weight:700;font-size:clamp(13.5px,3.6vw,14.5px);line-height:1.3;
        box-shadow:0 3px 8px rgba(1,30,70,.10);
        transition:transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease;
      }
body[data-home-theme] .theme-btn:active{transform:translateY(2px);border-bottom-width:1.5px;box-shadow:0 1px 4px rgba(1,30,70,.10)}
body[data-home-theme] .theme-btn .dots{display:inline-flex;flex:none}
body[data-home-theme] .theme-btn .dots i{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(21,42,66,.18);margin-inline-start:-6px}
body[data-home-theme] .theme-btn .dots i:first-child{margin-inline-start:0}
body[data-home-theme] .theme-btn[aria-pressed="true"]{border-color:var(--green-d);box-shadow:0 0 0 2.5px var(--green-soft)}
body[data-home-theme] .theme-btn:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
/* ---------- premium ---------- */
body[data-home-theme] .prem-grid{display:grid;gap:14px;max-width:900px;margin:0 auto}
@media(min-width:760px){body[data-home-theme] .prem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
body[data-home-theme] .prem{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px}
body[data-home-theme] .prem .tag{
        position:absolute;top:16px;inset-inline-end:16px;font-size:12px;font-weight:800;
        color:#fff;background:var(--green);border-radius:999px;padding:3px 11px;
      }
body[data-home-theme] .prem h3{font-size:clamp(20px,5.4vw,23px);font-weight:800;padding-inline-end:70px}
body[data-home-theme] .prem p{margin-top:8px;font-size:15px}
body[data-home-theme] .quest-bar{margin-top:18px;background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;height:14px;overflow:hidden}
body[data-home-theme] .quest-bar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,#22c55e,var(--green));border-radius:999px}
body[data-home-theme] .quest-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;font-size:clamp(13px,3.6vw,14.5px);color:var(--muted);margin-top:8px}
body[data-home-theme] .tax-rows{margin-top:14px;display:grid;gap:8px;font-size:clamp(14px,3.8vw,15.5px)}
body[data-home-theme] .tax-rows div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;border-bottom:1px dashed var(--line);padding-bottom:7px}
body[data-home-theme] .tax-rows div:last-child{border-bottom:0;padding-bottom:0}
body[data-home-theme] .tax-rows .g{color:var(--green-d);font-weight:800}
body[data-home-theme] .tax-rows .r{color:var(--red);font-weight:800}
body[data-home-theme] .tax-rows .b{font-weight:800;color:var(--ink)}
body[data-home-theme] .demo-inline{font-size:14px;font-weight:800;color:var(--amber-ink);background:var(--amber-bg);border-radius:999px;padding:3px 10px;display:inline-block;margin-top:12px}
/* ---------- steps: one single field — a 1 → 2 → 3 flow diagram on top,
         then each step's title with its note underneath, no split cells ---------- */
body[data-home-theme] .steps-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4.2vw,26px) clamp(16px,4.2vw,24px)}
body[data-home-theme] .step-flow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.8vw,16px);margin-bottom:clamp(16px,4vw,22px)}
body[data-home-theme] .step-flow .n{
        width:clamp(38px,10vw,48px);height:clamp(38px,10vw,48px);border-radius:50%;flex:none;
        background:var(--green);color:#fff;
        font-family:var(--head-font);font-weight:800;font-size:clamp(18px,5vw,22px);display:grid;place-items:center;
      }
body[data-home-theme] .step-flow .arr{flex:0 1 clamp(30px,9vw,58px);min-width:18px;color:var(--green)}
body[data-home-theme] .step-flow .arr svg{display:block;width:100%;height:auto}
/* in the steps header the same flow diagram serves as the field's
         small note (Charlie's call): it never folds away, sits under
         the title CENTERED (not left-aligned), and runs LARGER than
         the old in-header size (2026-11-12: 居中對齊、數字箭頭放大) */
body[data-home-theme] .sec-head .step-flow{justify-content:center;margin:14px 0 0}
body[data-home-theme] .sec-head .step-flow .n{width:clamp(40px,10vw,50px);height:clamp(40px,10vw,50px);font-size:clamp(19px,5vw,23px)}
body[data-home-theme] .sec-head .step-flow .arr{flex-basis:clamp(32px,9vw,60px)}
body[data-home-theme] .step-list{display:grid;gap:clamp(12px,3.4vw,16px);max-width:560px;margin:0;text-align:left}
body[data-home-theme] .step-row{display:flex;gap:clamp(10px,3vw,14px);align-items:flex-start;min-width:0}
/* each step's slogan carries the same numbered marker as the flow
         diagram above it, so the three slogans read 1 / 2 / 3 at a glance */
body[data-home-theme] .step-row .n{
        width:clamp(28px,7.5vw,34px);height:clamp(28px,7.5vw,34px);border-radius:50%;flex:none;
        background:var(--green);color:#fff;margin-top:1px;
        font-family:var(--head-font);font-weight:800;font-size:clamp(15px,4.2vw,18px);display:grid;place-items:center;
      }
body[data-home-theme] .step-row .txt{min-width:0}
body[data-home-theme] .step-row h3{font-size:clamp(17px,4.4vw,19px);font-weight:800}
body[data-home-theme] .step-row p{font-size:clamp(14px,3.8vw,15.5px);margin-top:3px;line-height:1.6}
/* ---------- referral ---------- */
body[data-home-theme] .ref-wrap{max-width:760px;margin:0 auto 0 0;text-align:left}
body[data-home-theme] .ref-wrap>p{font-size:clamp(15.5px,4.2vw,17px)}
body[data-home-theme] .ref-link-box{
        margin:22px 0 0;max-width:560px;background:var(--bg-alt);
        border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-align:start;
      }
body[data-home-theme] .ref-link-box .k{font-size:13.5px;color:var(--muted)}
body[data-home-theme] .ref-link-box code{
        display:block;margin-top:4px;font-size:17px;font-weight:700;color:var(--green-d);
        word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
      }
body[data-home-theme] .ref-note{margin-top:10px;font-size:13.5px;color:var(--muted)}
/* ---------- download ---------- */
body[data-home-theme] .dl-grid{display:grid;gap:26px;align-items:center;max-width:860px;margin:0 auto}
@media(min-width:820px){body[data-home-theme] .dl-grid{grid-template-columns:auto 1fr}}
body[data-home-theme] .qr-card{
        background:#fff;border:1px solid var(--line);border-radius:20px;
        padding:22px;text-align:left;box-shadow:0 14px 30px rgba(21,42,66,.07);
      }
body[data-home-theme] .qr-box{width:min(196px,60vw);height:min(196px,60vw);display:grid;place-items:center;margin:0 auto}
body[data-home-theme] .qr-box svg{width:100%;height:100%;max-width:196px;max-height:196px}
body[data-home-theme] .qr-card .cap{margin-top:12px;font-family:var(--head-font);font-weight:700;color:var(--ink);font-size:17px}
body[data-home-theme] .dl-copy{text-align:left}
body[data-home-theme] .dl-copy .b{font-family:var(--head-font);font-weight:800;font-size:clamp(18.5px,5vw,21px);color:var(--ink);line-height:1.5}
body[data-home-theme] .dl-copy p{margin-top:10px;font-size:15.5px}
body[data-home-theme] .dl-copy .btn{display:flex;margin:20px auto 0;justify-content:center;width:100%;max-width:340px}
/* the QR card is never hidden — on narrow screens it stacks above the
         copy and simply shrinks with the viewport */
@media(max-width:819px){body[data-home-theme] .qr-card{padding:16px}body[data-home-theme] .qr-box{width:min(150px,48vw);height:min(150px,48vw)}body[data-home-theme] .qr-box svg{max-width:150px;max-height:150px}}
/* ---------- pricing: ONE single field — free strip on top, then the three
         subscriptions in one horizontal row of three cells inside the same panel.
         The row stays three-across at every width; type and spacing shrink to fit. ---------- */
body[data-home-theme] .pricing-panel{background:#fff;border:1.5px solid var(--green);border-radius:20px;overflow:hidden;text-align:left}
body[data-home-theme] .free-bar{
        display:flex;align-items:center;gap:8px clamp(10px,3vw,18px);flex-wrap:wrap;
        background:#fff;border-bottom:1px solid var(--line);
        padding:clamp(12px,3vw,16px) clamp(14px,3.6vw,20px);
      }
body[data-home-theme] .free-bar .ft{font-family:var(--head-font);font-weight:800;color:var(--ink);font-size:clamp(17px,4.6vw,19px);white-space:nowrap}
body[data-home-theme] .free-bar .amt{font-family:var(--head-font);font-weight:800;font-size:clamp(25px,6.8vw,32px);color:var(--ink);line-height:1;white-space:nowrap}
body[data-home-theme] .free-bar .amt small{font-size:14px;color:var(--muted);font-family:var(--body-font);font-weight:500}
body[data-home-theme] .free-bar .fdesc{font-size:14px}
body[data-home-theme] .free-bar ul{list-style:none;display:flex;gap:4px 14px;flex-wrap:wrap;margin:0;padding:0;font-size:14px}
body[data-home-theme] .free-bar ul li{display:flex;gap:6px;align-items:center}
body[data-home-theme] .free-bar ul li svg{flex:none}
body[data-home-theme] .free-bar .pbtn{width:auto;margin-inline-start:auto}
body[data-home-theme] .plan-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
/* 定價輪播的複製頁（第 4 張＝月繳複製）：桌機三欄並排時藏起來，只在手機橫向滑動時出現 */
body[data-home-theme] .plan.plan-clone{display:none}
body[data-home-theme] .plan{
        /* top padding leaves a 34px zone on EVERY card: the best card's
                 ribbon sits in it, the other two keep the same empty band —
                 so name, price, note, chip, features and button all start
                 at the same height on all three cards */
        background:#fff;padding:calc(clamp(16px,3.6vw,26px) + 34px) clamp(14px,3.4vw,22px) clamp(16px,3.6vw,26px);
        display:flex;flex-direction:column;text-align:left;position:relative;min-width:0;
      }
/* 橫向卡片（v1.0.42）：左邊數字、右邊功能。全部文字向左靠、從頂部開始排
   （左上角對齊），不置中、不垂直居中；卡片比直式短得多。
   按鈕拉長置中（v1.0.44）：plan-body 改 grid，第一行是左右兩欄、第二行是按鈕
   橫跨整張卡片置中；第一行 1fr 撐滿，三張卡片的按鈕都釘在底部對齊。 */
body[data-home-theme] .plan-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:clamp(14px,3.6vw,28px);row-gap:clamp(14px,3.4vw,18px);flex:1;min-width:0}
body[data-home-theme] .plan-left{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
body[data-home-theme] .plan-right{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
body[data-home-theme] .plan .plan-right ul{margin:0}
/* pricing header block (name / price / per-month note / savings chip) is
   left-aligned and top-aligned; features stay left-aligned, button sits
   in flow right under the chip (not pinned to the bottom) — all three
   cards share the same row heights so the buttons still line up */
body[data-home-theme] .plan h3{font-size:clamp(17px,4.6vw,21px);font-weight:800;text-align:left}
body[data-home-theme] .plan .amt{font-family:var(--head-font);font-size:clamp(26px,7vw,42px);font-weight:800;color:var(--ink);margin-top:10px;line-height:1.15;overflow-wrap:break-word;text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
body[data-home-theme] .plan .amt small{font-size:clamp(13px,3.4vw,15.5px);color:var(--muted);font-family:var(--body-font);font-weight:700;white-space:nowrap}
body[data-home-theme] .plan .desc{font-size:clamp(14px,3.8vw,16px);margin-top:6px;line-height:1.5;text-align:left}
/* the per-month equivalent line (quarterly + annual) is red, so the
         cheapest effective monthly cost stands out at a glance */
body[data-home-theme] .plan .desc.permonth{color:var(--red);font-weight:700}
body[data-home-theme] .plan .save-chip{
        display:inline-block;margin-top:6px;background:var(--green-soft);color:var(--green-d);
        font-weight:800;font-size:clamp(13px,3.4vw,15px);border-radius:999px;padding:4px clamp(9px,2.2vw,13px);white-space:nowrap;
      }
body[data-home-theme] .plan .save-chip.save-red{background:#fde7e5;color:#c92f27}
/* invisible placeholder chip: the monthly plan has no savings chip, so
         this keeps its feature list starting at the same height as the
         other two cards */
body[data-home-theme] .plan .save-chip.save-chip-ph{visibility:hidden}
body[data-home-theme] .plan ul{list-style:none;margin:clamp(14px,3.4vw,18px) 0 clamp(16px,3.8vw,20px);padding:0;display:grid;gap:clamp(7px,2vw,9px);font-size:clamp(14px,3.8vw,16px);text-align:start;line-height:1.5}
body[data-home-theme] .plan ul li{display:flex;gap:clamp(5px,1.6vw,8px);align-items:flex-start;min-width:0}
body[data-home-theme] .plan ul li span, body[data-home-theme] .free-bar ul li span, body[data-home-theme] .foot-cols a{min-width:0;overflow-wrap:break-word}
body[data-home-theme] .plan ul li svg{flex:none;margin-top:2px}
body[data-home-theme] .plan .pbtn{grid-column:1/-1;grid-row:2;justify-self:center;width:calc(100% + clamp(12px,3.6vw,28px));max-width:none;margin-top:0;min-height:48px;padding-inline:clamp(8px,2vw,14px);font-size:clamp(14px,3.8vw,17px);text-align:center;justify-content:center}
body[data-home-theme] .plan.best{background:#f2fbf5;box-shadow:inset 0 0 0 2px var(--green)}
/* the savings chip sits in one row under the price; the row
         wraps rather than clips if an ultra-narrow screen cannot fit it */
body[data-home-theme] .plan .save-row{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px clamp(5px,1.6vw,8px);margin-top:8px;margin-bottom:clamp(12px,3vw,16px)}
body[data-home-theme] .plan .save-row .save-chip{margin-top:0}
/* "best value" is presented the way professional pricing tables do
         it: a full-width ribbon across the top of the recommended column
         — bright red bar, gold star, white bold letter-spaced type — the
         red deliberately contrasts with the column's green ring and tint
         so the annual plan reads as the endorsed choice at a glance */
body[data-home-theme] .plan .best-ribbon{
        position:absolute;top:0;left:0;right:0;
        display:flex;align-items:center;justify-content:center;gap:6px;
        background:var(--red);color:#fff;
        font-family:var(--head-font);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
        font-size:clamp(12.5px,3.4vw,14.5px);line-height:1.3;padding:7px 4px;white-space:nowrap;
      }
body[data-home-theme] .plan .best-ribbon svg{flex:none}
body[data-home-theme] .price-note{text-align:left;margin-top:16px;font-size:14px}
body[data-home-theme] .price-note b{color:var(--ink)}
/* ---------- faq ---------- */
/* all eight questions live in ONE single panel — one column, one
         bordered field — separated only by hairline dividers, not by
         eight separate boxes */
body[data-home-theme] .faq{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
body[data-home-theme] .faq details{background:#fff}
body[data-home-theme] .faq details+details{border-top:1px solid var(--line)}
body[data-home-theme] .faq summary{
        cursor:pointer;list-style:none;padding:16px 18px;min-height:54px;
        font-family:var(--head-font);font-weight:700;font-size:18px;color:var(--ink);
        display:flex;align-items:center;justify-content:space-between;gap:12px;
      }
body[data-home-theme] .faq summary::-webkit-details-marker{display:none}
body[data-home-theme] .faq summary .chev{flex:none;transition:transform .2s;color:var(--green)}
body[data-home-theme] .faq details[open ] summary .chev{transform:rotate(180deg)}
body[data-home-theme] .faq .a{padding:0 18px 17px;font-size:16.5px}
/* ---------- footer ---------- */
body[data-home-theme] footer{background:#081d3a;color:#a9bcdc;margin-top:0;padding:clamp(32px,6.5vw,44px) 0 clamp(26px,5.5vw,34px)}
body[data-home-theme] .foot-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--head-font);font-weight:800;font-size:20px;color:#fff}
body[data-home-theme] .foot-brand .brand-logo{width:38px;height:38px;border-radius:10px}
/* 頁尾品牌跟頂欄新品牌一致：同一圖標、同一產品名、同一標語（footer_tag），在面板裡向左對齊 */
body[data-home-theme] .foot-brand .brand-text{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.18;text-align:center}
body[data-home-theme] .foot-brand .brand-name{font-size:20px;font-weight:800;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
body[data-home-theme] .foot-brand .brand-tag{font-size:13px;font-weight:500;color:#c3d4ea;white-space:nowrap;line-height:1.3}
body[data-home-theme] .foot-brand .mark{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center}
body[data-home-theme] .foot-brand small{font-family:var(--body-font);font-weight:500;font-size:13px;color:#93a9c6}
body[data-home-theme] .foot-ver{text-align:center;margin-top:22px;font-size:13px;color:#7e93ba;letter-spacing:.02em}
/* ---------- footer panel（v1.0.44）：面板裡只剩品牌（圖標＋產品名＋標語），品牌置中對齊；
         邊框拿掉，只留底色＋圓角＋陰影。範本切換器已搬出去，獨立成一塊面板放在版本號上面
         （見 .tpl-switch-foot）；三欄連結留在面板下方，版本號仍置中最底，計數器仍隱藏 ---------- */
body[data-home-theme] .foot-panel{max-width:880px;margin:0 auto;text-align:left;background:#0a2547;border:0;border-radius:var(--radius);padding:clamp(18px,4vw,26px) clamp(16px,4vw,24px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
body[data-home-theme="white"] .foot-panel{background:#123763}
body[data-home-theme="midnight"] .foot-panel{background:#08130d}
body[data-home-theme="ocean"] .foot-panel{background:#0a3552}
body[data-home-theme="sunset"] .foot-panel{background:#431f0a}
body[data-home-theme="violet"] .foot-panel{background:#2c1360}
/* 面板風格切換器獨立成一塊面板（v1.0.44）：放在版本號上面、三欄連結下面；
   標題字在上一行（字體放大、靠左），三個範本按鈕在下一行、撐滿面板寬度置中，間距自動調整；
   底色跟 .foot-panel 相同、圓角＋陰影、無邊框；六種配色各有自己的面板底色 */
body[data-home-theme] .tpl-switch-foot{max-width:880px;margin:clamp(20px,4vw,28px) auto 0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;background:#0a2547;border:0;border-radius:var(--radius);padding:clamp(16px,3.6vw,22px) clamp(16px,4vw,24px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
body[data-home-theme] .tpl-switch-foot .tpl-label{font-size:clamp(18px,5vw,21px);font-weight:800}
body[data-home-theme] .tpl-switch-foot .tpl-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2.5vw,14px);width:100%}
body[data-home-theme] .tpl-switch-foot .tpl-btn{font-size:clamp(14px,4vw,16px);padding:11px clamp(8px,3vw,18px);min-width:0;min-height:48px}
body[data-home-theme="white"] .tpl-switch-foot{background:#123763}
body[data-home-theme="midnight"] .tpl-switch-foot{background:#08130d}
body[data-home-theme="ocean"] .tpl-switch-foot{background:#0a3552}
body[data-home-theme="sunset"] .tpl-switch-foot{background:#431f0a}
body[data-home-theme="violet"] .tpl-switch-foot{background:#2c1360}
body[data-home-theme] .foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden;max-width:880px;margin:clamp(24px,5vw,36px) auto 0;text-align:left}
body[data-home-theme] .foot-cols>div{background:#0a2547;padding:clamp(16px,3.4vw,22px) clamp(12px,3vw,20px);min-width:0}
body[data-home-theme] .foot-cols h4{font-family:var(--head-font);color:#fff;font-size:clamp(15px,4vw,17.5px);margin:0 0 10px}
body[data-home-theme] .foot-cols a{display:block;color:#a9bcdc;text-decoration:none;font-size:clamp(14px,3.8vw,15.5px);padding:4px 0;line-height:1.5;overflow-wrap:break-word}
body[data-home-theme] .foot-note{text-align:left;margin-top:30px;font-size:13px;color:#7e93ba}
/* ---------- adaptive steps: as the screen narrows, type and spacing step down on their own ---------- */
@media(max-width:560px){body[data-home-theme] section{padding:32px 0}body[data-home-theme] .topbar .wrap{padding:0 10px}body[data-home-theme] .topbar-in{min-height:54px;gap:4px;--top-brand:13px;--top-pill:9.5px;--top-lang:11px;--top-btn:11.5px}body[data-home-theme] .brand .mark{width:25px;height:25px;border-radius:8px}body[data-home-theme] .lang-toggle button{padding:5px 6px;min-height:30px}body[data-home-theme] .nav-btn{padding:5px 7px;min-height:30px}body[data-home-theme] .foot-cols>div{padding:14px 12px}}
@media(max-width:430px){body[data-home-theme] .topbar-in{min-height:50px;gap:3px;--top-brand:12px;--top-pill:8.5px;--top-lang:10.5px;--top-btn:11px}body[data-home-theme] .brand{gap:4px}body[data-home-theme] .brand .mark{width:23px;height:23px;border-radius:7px}body[data-home-theme] .preview-pill{padding:2px 5px}body[data-home-theme] .lang-toggle button{padding:4px 5px;min-height:28px}body[data-home-theme] .nav-btn{padding:4px 6px;min-height:28px}body[data-home-theme] .trust-list li{font-size:15.5px}body[data-home-theme] .prem{padding:20px 16px}body[data-home-theme] .faq summary{font-size:17px;padding:14px 15px}body[data-home-theme] .faq .a{padding:0 15px 15px;font-size:15.5px}body[data-home-theme] .ref-link-box{padding:14px 14px}body[data-home-theme] .ref-link-box code{font-size:16px}body[data-home-theme] .foot-brand{font-size:18px}body[data-home-theme] .free-bar .pbtn{margin-inline-start:0}body[data-home-theme] .plan ul li svg{width:13px;height:13px;margin-top:3px}body[data-home-theme] .plan .pbtn{min-height:42px;padding-top:8px;padding-bottom:8px}}
@media(max-width:360px){body[data-home-theme] .hero-btns .btn{max-width:100%}body[data-home-theme] .stat-grid{grid-template-columns:minmax(0,1fr)}body[data-home-theme] .stat.wide{grid-column:auto}body[data-home-theme] .foot-cols>div{padding:12px 9px}body[data-home-theme] .foot-cols h4{margin-bottom:6px}body[data-home-theme] .btn.small{padding:11px 16px}}
/* ---------- 頂欄窄螢幕再縮一級（≤360px）：品牌與第二行按鈕跟著縮，德文最長標語也不切 ---------- */
@media(max-width:360px){
body[data-home-theme] .topbar-row1{min-height:56px}
body[data-home-theme] .topbar .brand-logo{width:44px;height:44px}
body[data-home-theme].auth-page .topbar .brand-logo{width:44px;height:44px}
body[data-home-theme] .topbar .brand .brand-name{font-size:20px}
body[data-home-theme] .topbar .brand .brand-tag{font-size:11px}
body[data-home-theme] .topbar-row2{gap:6px}
body[data-home-theme] .topbar-row2 .lang-select,
body[data-home-theme] .topbar-row2 .btn.small{font-size:12px}
body[data-home-theme] .topbar-row2 .lang-select{padding:6px 4px}
body[data-home-theme] .topbar-row2 .btn.small{padding:6px 8px}
}
/* ---------- ultra-narrow: nothing is cut or hidden — every grid keeps
         its shape and the type + spacing simply step down once more ---------- */
@media(max-width:340px){body[data-home-theme]{font-size:15.5px}body[data-home-theme] section{padding:26px 0}body[data-home-theme] .wrap{padding:0 9px}body[data-home-theme] .hero .wrap{padding:0 9px}body[data-home-theme] .hero h1{font-size:48px}body[data-home-theme] .hero .sub{font-size:14px}body[data-home-theme] .trust-list{gap:5px}body[data-home-theme] .trust-list li{font-size:14.5px;gap:6px}body[data-home-theme] .trust-list li svg{width:14px;height:14px}body[data-home-theme] .sec-head h2, body[data-home-theme] .earn h2{font-size:24px}body[data-home-theme] .btn{min-height:50px;padding:12px 14px;font-size:16px}body[data-home-theme] .feat{padding:11px 9px}body[data-home-theme] .feat h3{font-size:15.5px}body[data-home-theme] .feat p{font-size:13.5px}body[data-home-theme] .feat .ic{width:32px;height:32px;margin-bottom:0}body[data-home-theme] .steps-panel{padding:14px 12px}body[data-home-theme] .step-flow .n{width:34px;height:34px;font-size:16px}body[data-home-theme] .step-row .n{width:26px;height:26px;font-size:14px}body[data-home-theme] .plan{padding:46px 8px 12px}body[data-home-theme] .plan h3{font-size:15.5px}body[data-home-theme] .plan .amt{font-size:22px}body[data-home-theme] .plan .amt small{font-size:12px}body[data-home-theme] .plan .desc, body[data-home-theme] .plan ul{font-size:13px}body[data-home-theme] .plan ul{gap:5px}body[data-home-theme] .plan ul li{gap:5px}body[data-home-theme] .plan ul li svg{width:12px;height:12px}body[data-home-theme] .plan .save-chip{font-size:12px;padding:3px 8px}body[data-home-theme] .plan .best-ribbon{font-size:12px;padding:5px 2px;letter-spacing:.08em;gap:4px}body[data-home-theme] .plan .best-ribbon svg{width:11px;height:11px}body[data-home-theme] .plan .pbtn{font-size:14px;min-height:42px;padding:6px 4px}body[data-home-theme] .free-bar{padding:10px 10px;gap:6px 8px}body[data-home-theme] .free-bar .ft{font-size:15.5px}body[data-home-theme] .free-bar .amt{font-size:22px}body[data-home-theme] .free-bar .fdesc, body[data-home-theme] .free-bar ul{font-size:12.5px}body[data-home-theme] .foot-cols>div{padding:10px 7px}body[data-home-theme] .foot-cols h4{font-size:14px}body[data-home-theme] .foot-cols a{font-size:13px;padding:3px 0}body[data-home-theme] .foot-brand{font-size:16px}body[data-home-theme] .faq summary{font-size:16px;padding:12px 12px;min-height:48px}body[data-home-theme] .faq .a{padding:0 12px 13px;font-size:15px}body[data-home-theme] .prem{padding:16px 13px}body[data-home-theme] .report-card{padding:16px 11px 18px}body[data-home-theme] .ph-net{font-size:31px}body[data-home-theme] .ref-link-box code{font-size:14.5px}}
/* ---------- 首頁守門規則：擋住共用樣式在首頁的殘留效果 ----------
   以下共用規則的 class 名與預覽相同、且是 App／後台在用的，不能刪，
   只好在首頁用更高權重把它們在首頁的副作用關掉。 */
body[data-home-theme] .brand small{display:inline} /* 共用樣式 ≤640px 會藏 .brand small（App 頂欄省空間用）；預覽要求首頁副標只縮小、不隱藏 */
body[data-home-theme] .stat{text-align:left;cursor:default} /* App 儀表板 .stat 是置中＋可點；首頁報表卡片的 .stat 要靠左、不可點 */
body[data-home-theme] .sec-toggle{min-width:0;min-height:0} /* App 設定列 .sec-toggle 有 min 44px，會把首頁圓形收合鈕撐大 */
body[data-home-theme] .plan{transition:none} /* App 升級方案 .plan 的 hover 上浮／best 卡片桌機上移 6px 不帶進新版首頁定價 */
body[data-home-theme] .plan:hover{transform:none;box-shadow:none}
body[data-home-theme] .plan.best{transform:none}

/* 價格卡片 */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-bottom: 20px; align-items: stretch; }
.plan {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 18px; text-align: center; position: relative;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan.best { border-color: var(--green); box-shadow: 0 12px 32px rgba(22, 163, 74, .18); }
.plan .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; font-size: 14px; font-weight: 700;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(22, 163, 74, .35);
}
.plan h3 { font-size: 19px; font-weight: 700; }
.plan .price { font-size: 48px; font-weight: 800; margin: 8px 0 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 16px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.plan .tag { margin-bottom: 18px; }
.plan .btn { margin-top: auto; }
/* Stripe Buy Button（升級彈窗內嵌按鈕）：撐滿方案卡片寬度，貼齊卡片底部 */
.buybtn-wrap { margin-top: auto; }
.buybtn-wrap stripe-buy-button { display: block; width: 100%; }
.pricing-note { text-align: center; margin-bottom: 0; }
@media (min-width: 768px) {
  .plan.best { transform: translateY(-6px); }
  .plan.best:hover { transform: translateY(-9px); }
}

/* 頁尾瀏覽計數器（首頁最底部；App 設定頁底部沿用同一樣式） */
/* 2026-11-12 改：計數器不公開顯示，只有管理後台看得到（計數本身繼續跑） */
.site-counter { display: none; margin-top: 20px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.site-counter b { color: #fff; font-weight: 800; }
html[data-panel="b"] .site-counter { color: #64748b; }
html[data-panel="b"] .site-counter b { color: #0f172a; }
html[data-panel="c"] .site-counter { color: rgba(187, 247, 208, .85); }
html[data-panel="c"] .site-counter b { color: #fcd34d; }
/* 後台統計：橫條與 30 天迷你長條圖 */
.stat-bar-row { display: grid; grid-template-columns: 92px 1fr 72px; gap: 10px; align-items: center; padding: 6px 0; font-size: 15px; }
.stat-bar-row .num { text-align: right; font-weight: 800; white-space: nowrap; }
.stat-bar-track { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--green); border-radius: 999px; }
.mini-bars { display: flex; align-items: flex-end; gap: 2px; height: 84px; margin: 6px 0 2px; }
.mini-bars .mini-bar { flex: 1; min-width: 2px; background: var(--green); border-radius: 2px 2px 0 0; opacity: .85; }

/* ---------- App 版面 ---------- */
.app-shell { max-width: 1080px; margin: 0 auto; padding: 12px 16px 110px; }
.tabs { display: flex; gap: 6px; margin: 12px 0 16px; flex-wrap: wrap; }
.tab {
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 10px 18px; font-weight: 600;
}
.tab.active { background: var(--green); border-color: var(--green); color: #fff; }
.page { display: none; }
.page.active { display: block; }
.hero-net { text-align: center; padding: 8px 0 4px; }
.hero-net .label { color: var(--muted); font-size: 15px; }
.hero-net .value { font-size: 52px; font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.hero-net button.value { background: none; border: 0; padding: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; cursor: pointer; }
.stat .v { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.stat .k { font-size: 14px; color: var(--muted); }
.period-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.period-bar select { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); }
.fx-note { font-size: 14px; color: var(--muted); }
.record-list { list-style: none; padding: 0; margin: 0; }
.record-list li {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 14px 6px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.record-list li:last-child { border-bottom: 0; }
.record-list .r-date { font-weight: 700; }
.record-list .r-meta { font-size: 14px; color: var(--muted); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0; }
.locked { position: relative; }
.locked::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.locked-cover {
  background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: 10px; padding: 12px; margin-bottom: 12px; font-size: 15px;
}
.trial-banner {
  background: var(--green-soft); border: 1px solid var(--green);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 15px;
}
.upgrade-banner {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; margin-bottom: 12px; font-size: 15px;
}
.news-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-item a { color: var(--ink); text-decoration: none; font-weight: 600; }
.news-item .src { font-size: 14px; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head button { background: none; border: 0; color: var(--green-dark); font-weight: 700; }
.collapsible-body.hidden { display: none; }
[data-section-body].hidden { display: none; }
/* 統一線條風圖示：跟著文字顏色走，尺寸在各處統一 */
.ic { width: 1.25em; height: 1.25em; vertical-align: -0.22em; flex: none; }
.set-icon { display: flex; align-items: center; }
.set-icon .ic { width: 26px; height: 26px; }
.set-group-title .ic { width: 20px; height: 20px; vertical-align: -4px; }
.bottomnav button .ic { width: 26px; height: 26px; }
.bell { display: inline-flex; align-items: center; justify-content: center; }
.bell .ic { width: 26px; height: 26px; }
.voice-btn { display: flex; align-items: center; justify-content: center; }
.voice-btn .ic { width: 34px; height: 34px; }
.locked-cover .ic, .set-summary .ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.modal h2 .ic { width: 22px; height: 22px; vertical-align: -4px; }
h3 .ic { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }

/* ---------- 圖表 ---------- */
.chart-wrap { overflow-x: auto; }
.chart-wrap svg { display: block; margin: 0 auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; margin-top: 8px; }
.chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.heatmap .cell { aspect-ratio: 1; border-radius: 4px; background: var(--line); background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%, rgba(0,0,0,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.18); }
.heatmap .cell[data-v="1"] { background: #bbf7d0; }
.heatmap .cell[data-v="2"] { background: #86efac; }
.heatmap .cell[data-v="3"] { background: #4ade80; }
.heatmap .cell[data-v="4"] { background: #22c55e; }
.heatmap .cell[data-v="5"] { background: #15803d; }

/* ---------- 底部導航 ---------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.bottomnav button {
  background: none; border: 0; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 14px; padding: 6px 10px; min-width: 56px; min-height: 52px;
}
.bottomnav button.active { color: var(--green-dark); font-weight: 700; }
.bottomnav .fab {
  background: var(--green); background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 45%, rgba(0,0,0,.08));
  color: #fff; border-radius: 50%;
  width: 60px; height: 60px; font-size: 30px; line-height: 1;
  margin-top: -26px; border-bottom: 3px solid rgba(0,0,0,.28); box-shadow: 0 4px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease;
}
.bottomnav .fab:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: 0 2px 6px rgba(0,0,0,.20); }

/* ---------- 彈窗 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60;
  display: none; align-items: flex-end; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card); width: 100%; max-width: 560px; max-height: 88vh;
  overflow-y: auto; border-radius: 18px 18px 0 0; padding: 20px 18px;
  /* 底部彈窗停在導覽列上方，不蓋住它（電腦版 1025px 以上的 6vh 會覆蓋這行） */
  margin-bottom: calc(80px + env(safe-area-inset-bottom));
}
.modal h2 { font-size: 22px; }
.ios-steps { margin: 12px 0 18px; padding-left: 22px; line-height: 1.7; }
.ios-steps li { margin-bottom: 10px; }
.voice-btn {
  width: 72px; height: 72px; border-radius: 50%; border: 0;
  border-bottom: 3px solid rgba(0,0,0,.25);
  background: var(--green); background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 45%, rgba(0,0,0,.08));
  color: #fff; font-size: 32px; margin: 8px auto; display: block;
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
  transition: transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease;
}
.voice-btn:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.voice-btn.listening { background: var(--red); animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 70% { box-shadow: 0 0 0 14px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }
.warn-flag { border: 2px solid var(--amber) !important; }
.warn-text { color: var(--amber); font-size: 14px; font-weight: 700; }

/* ---------- 鈴鐺 / 通知 ---------- */
.bell { position: relative; background: none; border: 0; font-size: 26px; padding: 6px 10px; min-width: 44px; min-height: 44px; }
.bell .count {
  position: absolute; top: 0; right: 0; background: var(--red); color: #fff;
  font-size: 14px; font-weight: 700; border-radius: 999px; padding: 1px 6px;
}
.notif-item { padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif-item.unread { font-weight: 700; }
.notif-item:last-child { border-bottom: 0; }

/* ---------- 後台 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; }
.stat-box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; text-align: center; }
.stat-box .v { font-size: 32px; font-weight: 800; }
.stat-box .k { font-size: 14px; color: var(--muted); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--muted); font-size: 14px; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.tag.muted { background: var(--page); color: var(--muted); }
.tag.trial { background: var(--amber-soft); color: var(--amber); }
.tag.active { background: var(--green-soft); color: var(--green-dark); }
.tag.expired { background: var(--red-soft); color: var(--red); }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .hero-net .value { font-size: 42px; }
  .lang-select { max-width: 104px; }
  .brand small { display: none; }
  .plan { padding: 16px; }
}

/* ---------- 登入頁 ---------- */
body.auth-page {
  background: linear-gradient(160deg, #011e46 0%, #0a2a5e 55%, #123a75 100%);
  background-attachment: fixed; min-height: 100vh;
}
body.auth-page .card { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.back-home { display: inline-block; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; margin: 24px 0 12px; opacity: .9; }
.back-home:hover { opacity: 1; }

/* ---------- 登入頁跟著首頁配色（body[data-home-theme]） ----------
   首頁配色存在 localStorage pl_home_theme，auth.html 在 <body> 後立即套用，
   沒選過就跟著模板走（A 深藍 / B 亮白 / C 極夜）。
   主題變數（--bg、--bg-alt、--ink、--body、--muted、--line、--green、--green-d）
   掛在 body[data-home-theme] 上；這裡把共用變數（--green-dark、--card、--page）
   對應過去，讓登入頁的卡片、按鈕、輸入框、頂欄跟著配色走。
   深藍漸層底（body.auth-page）只在沒設 data-home-theme 時生效；有配色時改走主題底色。 */
body[data-home-theme].auth-page{
  --green-dark:var(--green-d);
  --page:var(--bg-alt);
  --card:var(--bg);
  background:var(--bg-alt);
  color:var(--body);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
}
/* 極夜是深色主題：卡片要比底色亮一點（跟首頁的 .feat/.prem 同色 #0c1d13），否則卡片會跟底色糊在一起 */
body[data-home-theme="midnight"].auth-page{ --card:#0c1d13; }
/* 頂欄：登入頁是單行（品牌＋語言選擇），不要吃到首頁雙行頂欄的 column 規則；
   品牌維持原本大小（21px／34px），避免窄螢幕放不下 */
body[data-home-theme].auth-page .topbar{background:var(--card);border-bottom-color:var(--line)}
body[data-home-theme].auth-page .topbar .wrap{flex-direction:row;align-items:center;gap:10px;min-height:64px}
body[data-home-theme].auth-page .topbar .brand{color:var(--ink);font-size:21px;gap:9px}
body[data-home-theme].auth-page .topbar .brand-logo{width:clamp(54px,12.5vw,62px);height:clamp(54px,12.5vw,62px);border-radius:10px} /* 跟首頁頂欄圖標一樣大（54–62px） */
body[data-home-theme].auth-page .topbar .brand small{font-size:14px;color:var(--muted)}
/* 卡片、輸入框跟著主題走 */
body[data-home-theme].auth-page .card{background:var(--card);border-color:var(--line);color:var(--body)}
body[data-home-theme].auth-page .field input{background:var(--card);border-color:var(--line);color:var(--ink)}
body[data-home-theme].auth-page .field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.18);box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent)}
/* 「回首頁」原本是白字（配深藍漸層底），淺色主題會看不見，改走主題連結色 */
body[data-home-theme].auth-page .back-home{color:var(--green-d);opacity:1}
/* 送出按鈕：極夜的亮綠底配白字對比不夠，改深色字（跟首頁 .hero .btn 同做法）；
   Google 按鈕不吃這條——它的字在 auth.html 已寫死深色 #1f2937，因為它的底是
   寫死的白色漸層（不是主題卡片色），用 var(--ink) 在極夜會白字白底看不見（v1.0.48 修） */
body[data-home-theme="midnight"].auth-page .btn:not(.btn-google){color:#02120a}
body[data-home-theme].auth-page .btn:focus-visible{outline-color:color-mix(in srgb, var(--green) 45%, transparent)}
.google-g { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; }
.google-g svg { width: 20px; height: 20px; }

/* ---------- 淺色主題（第五種） ---------- */
[data-theme="light"] {
  --page: #ffffff;
  --card: #f8fafc;
  --line: #e2e8f0;
  --ink: #0f172a;
  --muted: #64748b;
}

/* ---------- 6 種強調色（覆寫 --green 系列） ---------- */
[data-accent="blue"] { --green: #0284c7; --green-dark: #0369a1; --green-soft: #e0f2fe; }
[data-accent="purple"] { --green: #7c3aed; --green-dark: #6d28d9; --green-soft: #ede9fe; }
[data-accent="orange"] { --green: #ea580c; --green-dark: #c2410c; --green-soft: #ffedd5; }
[data-accent="pink"] { --green: #db2777; --green-dark: #be185d; --green-soft: #fce7f3; }
[data-accent="teal"] { --green: #0d9488; --green-dark: #0f766e; --green-soft: #ccfbf1; }

/* ---------- 圖示風格：填滿（站內 SVG 線條圖示改為實心） ---------- */
[data-icon-style="filled"] .feature .icon svg * { fill: currentColor; stroke: none; }
[data-icon-style="filled"] .faq summary::after { border-right-width: 3px; border-bottom-width: 3px; }

/* ============================================================
   面板模板 A / B / C（data-panel，寫在 <html> 上）
   整合方式：模板是獨立於「外觀主題（data-theme）」與「強調色（data-accent）」的一層，
   只覆寫 --page/--card 等 CSS 變數與少量元件樣式。A 為預設＝目前外觀，完全不覆寫，
   所以現有用戶（主題、強調色不變）一打開就跟以前一模一樣；只有用戶自己選了 B/C 才變。
   模板區塊寫在主題與強調色之後，同權重時後寫的勝出。B 不碰 --green 系列，強調色照常
   生效；C 的亮綠是本體，會覆寫 --green 系列。首頁用 localStorage（pl_tpl），
   App 用帳號設定（settings.panelTemplate），共用同一個 data-panel 屬性。
   ============================================================ */
[data-panel="b"] {
  --page: #ffffff;
  --card: #ffffff;
  --line: #e2e8f0;
  --ink: #0f172a;
  --muted: #5b6b7f;
  --radius: 18px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, .10);
}
[data-panel="c"] {
  --page: #0f1417;
  --card: #1a2126;
  --line: #2b343b;
  --ink: #f2f6f8;
  --muted: #93a1ab;
  --red: #f87171;
  --red-soft: #7f1d1d;
  --green: #4ade80;
  --green-dark: #86efac;
  --green-soft: #14532d;
  --navy: #bbf7d0;
  --radius: 12px;
  --shadow: 0 1px 4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
}

/* ---------- 首頁模板切換器（hero 內，所有訪客都能點） ---------- */
/* 模板切換器：標籤獨佔一行，三個按鈕等寬一排，不留一顆孤零零換行 */
.tpl-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }
.tpl-label { grid-column: 1 / -1; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.tpl-btn {
  min-height: 44px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 15px;
  background: rgba(255, 255, 255, .10); color: #fff; border: 1.5px solid rgba(255, 255, 255, .45);
  border-bottom-width: 3px;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%, rgba(0,0,0,.06));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
  transition: transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease, background-color .15s ease;
}
.tpl-btn:active { transform: translateY(2px); border-bottom-width: 1.5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tpl-btn.active { background: #fff; color: #011e46; border-color: #fff; }
html[data-panel="b"] .tpl-label { color: #475569; }
html[data-panel="b"] .tpl-btn { background: #fff; color: #0369a1; border-color: #0284c7; }
html[data-panel="b"] .tpl-btn.active { background: #0284c7; color: #fff; border-color: #0284c7; }
html[data-panel="c"] .tpl-label { color: rgba(187, 247, 208, .9); }
html[data-panel="c"] .tpl-btn { border-color: rgba(74, 222, 128, .6); color: #bbf7d0; }
html[data-panel="c"] .tpl-btn.active { background: #4ade80; color: #052e16; border-color: #4ade80; }

/* ---------- 首頁模板 B：清爽數據（白底亮面，主視覺下放大塊儀表板） ---------- */
.hero-dash { display: none; margin-top: 36px; }
.dash-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, .12); padding: 18px; color: #0f172a; text-align: left; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-stat .k { display: block; font-size: 14px; color: #64748b; }
.dash-stat .v { display: block; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-stat .d-sub { display: block; font-size: 14px; color: #64748b; }
.dash-card .mini-chart { margin-top: 14px; }
html[data-panel="b"] .hero { background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%); color: var(--ink); }
html[data-panel="b"] .hero::before, html[data-panel="b"] .hero::after { display: none; }
html[data-panel="b"] .hero h1 { color: #0f172a; }
html[data-panel="b"] .hero p { color: #475569; }
html[data-panel="b"] .hero .hero-note { color: #64748b; }
html[data-panel="b"] .hero .hero-note span { color: #334155; }
html[data-panel="b"] .hero .btn.ghost { background-color: #fff; color: #0369a1; border-color: #0284c7; }
html[data-panel="b"] .hero .btn.ghost:hover { background-color: #e0f2fe; }
html[data-panel="b"] .hero-phone { display: none; }
html[data-panel="b"] .hero-dash { display: block; }
html[data-panel="b"] .landing .section.alt { background: #f8fafc; }
html[data-panel="b"] footer.site { background: #f1f5f9; color: #475569; }
html[data-panel="b"] footer.site .footer-brand { color: #0f172a; }
html[data-panel="b"] footer.site .footer-brand small { color: #64748b; }
/* 範本 B 頁尾統一成清爽數據風格（白底亮面、藍色系，跟整版同一個設計）：
   面板白底卡片；品牌改深色、跟左上角頂欄品牌一樣（產品名 #0f172a、標語 #64748b，
   頂欄白配色下 --ink #14273f / --muted #66788e 的同級深色；不用 var(--ink)，避免
   配色改午夜時 --ink 變淺字又看不見）；三欄改白底卡片＋深色標題，連結本來就是藍色 #0369a1；
   版本號改深灰；格線改淺灰 */
html[data-panel="b"] footer.site .foot-panel{background:#ffffff;box-shadow:0 10px 30px rgba(15,23,42,.08)}
html[data-panel="b"] footer.site .tpl-switch-foot{background:#ffffff;box-shadow:0 10px 30px rgba(15,23,42,.08)}
html[data-panel="b"] footer.site .foot-brand{color:#0f172a}
html[data-panel="b"] footer.site .foot-brand .brand-tag{color:#64748b}
html[data-panel="b"] footer.site .foot-cols{background:#e2e9f0}
html[data-panel="b"] footer.site .foot-cols>div{background:#ffffff}
html[data-panel="b"] footer.site .foot-cols h4{color:#0f172a}
html[data-panel="b"] footer.site .foot-ver{color:#475569}
html[data-panel="b"] footer.site a { color: #0369a1; }

/* ---------- 首頁模板 C：活力司機（炭黑亮綠、大字） ---------- */
html[data-panel="c"] .hero { background: linear-gradient(160deg, #0d120e 0%, #16211a 55%, #1d2f24 100%); }
html[data-panel="c"] .hero h1 { font-size: clamp(36px, 7.5vw, 62px); }
html[data-panel="c"] .hero::before { background: radial-gradient(circle, rgba(74, 222, 128, .35), transparent 70%); }
html[data-panel="c"] .hero::after { background: radial-gradient(circle, rgba(74, 222, 128, .22), transparent 70%); }
html[data-panel="c"] .hero .btn { background-color: #4ade80; color: #052e16; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
html[data-panel="c"] .hero .btn:hover { background-color: #86efac; }
html[data-panel="c"] .hero .btn.ghost { background-color: rgba(74, 222, 128, .08); color: #bbf7d0; border-color: #4ade80; }
html[data-panel="c"] .hero .btn.ghost:hover { background-color: rgba(74, 222, 128, .18); }
html[data-panel="c"] .phone { background: #101613; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(74, 222, 128, .35); }
/* C 模板手機模型裡是白底螢幕，文字要用深色（不能沿用 C 的淺色 --ink） */
html[data-panel="c"] .phone-screen { color: #1f2937; --green-dark: #15803d; --red: #dc2626; }
html[data-panel="c"] .phone-screen .mini-head,
html[data-panel="c"] .phone-screen .mini-stats { color: #6b7280; }
html[data-panel="c"] footer.site { background: #0b0f0c; }
html[data-panel="c"] .section-title::after { background: #4ade80; }

/* ---------- App 面板模板（儀表板 / 報表 / 歷史的面板與卡片） ---------- */
html[data-panel="b"] .app-shell .hero-net .value { font-size: 56px; }
html[data-panel="b"] .app-shell .stat .v { font-size: 25px; }
html[data-panel="b"] .app-shell .card { border-radius: 18px; }
html[data-panel="b"] .app-shell .stat { border-radius: 16px; }
html[data-panel="b"] .app-shell .record-list li { padding: 16px 8px; }
html[data-panel="c"] .app-shell .hero-net .value { font-size: 58px; }
html[data-panel="c"] .app-shell .stat .v { font-size: 25px; }
html[data-panel="c"] .app-shell .card { border-radius: 12px; }
html[data-panel="c"] .bottomnav { box-shadow: 0 -4px 16px rgba(0, 0, 0, .4); }

/* ---------- 設定：面板模板選項 ---------- */
.tpl-option {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 10px; color: var(--ink);
}
.tpl-option.selected { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.tpl-option .tpl-opt-name { font-weight: 800; font-size: 17px; display: block; }
.tpl-option .tpl-opt-desc { font-size: 14px; color: var(--muted); display: block; margin-top: 2px; }
.tpl-option .tpl-opt-check { margin-left: auto; font-size: 20px; color: var(--green-dark); flex: none; }
.tpl-option.locked { opacity: .8; }
@media (max-width: 640px) {
  html[data-panel="b"] .app-shell .hero-net .value,
  html[data-panel="c"] .app-shell .hero-net .value { font-size: 46px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-stat .v { font-size: 24px; }
  .tpl-switch { margin-top: 22px; }
}

/* ---------- 設定列（13 列 / 7 組；長標題允許換兩行，不截斷） ---------- */
.set-group { margin-bottom: 16px; }
.set-group-title { font-size: 17px; color: var(--muted); margin: 0 0 8px 4px; font-weight: 700; }
.set-row {
  display: flex; align-items: center; gap: 12px; min-height: 84px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow);
}
.set-row:active { background: var(--page); }
.set-icon { font-size: 26px; flex: none; }
.set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.set-title {
  font-weight: 700; font-size: 18px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.set-summary {
  font-size: 14px; color: var(--muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.set-chev { color: var(--muted); font-size: 22px; flex: none; }
.accent-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.accent-dot.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--green); }
.sec-toggle { background: none; border: 0; color: var(--green-dark); font-weight: 700; font-size: 18px; padding: 6px 10px; min-width: 44px; min-height: 44px; }

/* ---------- 自適應：手機 / 平板 / 電腦 ---------- */
@media (max-width: 640px) {
  .topbar .wrap { gap: 6px; padding: 0 8px; min-height: 56px; flex-wrap: wrap; }
  .brand { font-size: 17px; }
  .brand small { display: none; }
  .lang-select { max-width: 100px; padding: 5px 4px; font-size: 14px; }
  .topbar .btn.small { padding: 6px 8px; font-size: 14px; }
  .app-shell { padding: 12px 12px 110px; }
  .btn.small { padding: 6px 10px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .period-bar select { max-width: 100%; }
  .modal { padding: 16px 14px 24px; }
  .tabs { gap: 4px; }
  .tab { padding: 7px 12px; font-size: 14px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .app-shell { max-width: 860px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
  .app-shell { max-width: 1080px; }
  .modal { border-radius: 18px; margin-bottom: 6vh; }
  .modal-backdrop.open { align-items: center; }
}

/* ---------- 用戶頁（頭像／個人資料／我的風格／我的自訂／推薦獎勵） ---------- */
.user-head { display: flex; gap: 16px; align-items: center; }
.avatar-wrap { width: 84px; height: 84px; flex: none; }
.avatar-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; }
.avatar-fallback { width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; }
.user-name { font-size: 22px; font-weight: 700; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.style-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: left; cursor: pointer; font-size: 15px; color: var(--ink); }
.style-label { color: var(--muted); font-size: 14px; }
.style-value { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.accent-dot-sm { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.custom-block { margin-top: 14px; }
.custom-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.ref-stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.ref-stat .v { font-size: 19px; font-weight: 700; }
.ref-stat .k { font-size: 14px; color: var(--muted); margin-top: 2px; }
.mile-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.meter { height: 8px; background: var(--line); border-radius: 999px; margin-top: 6px; overflow: hidden; max-width: 320px; }
.meter-fill { height: 100%; background: var(--green); border-radius: 999px; }
.payout-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.payout-btn { font-size: 18px; padding: 13px 0; }
.payout-btn:disabled { opacity: .45; cursor: not-allowed; }
.ref-rules { padding-left: 22px; }
.ref-rules li { margin-bottom: 8px; line-height: 1.5; }
.ref-example { width: 100%; }
.ref-example td, .ref-example th { padding: 8px; text-align: left; }
@media (max-width: 640px) {
  .ref-stats { grid-template-columns: repeat(2, 1fr); }
  .payout-btns { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   首頁配色（body[data-home-theme]）＋ App 面板配色（.phone-frame[data-app-theme]）
   放在檔案最後：與 html[data-panel] 範本規則同權重時，後寫的勝出，
   所以選了配色時配色覆蓋範本顏色；預設 navy 沒有覆寫規則
   （= 上方 body[data-home-theme] 的變數）。
   ============================================================ */
/* 預設 navy：就是上方 body[data-home-theme] 的變數，不另覆寫；此條僅標示六種配色齊全。 */
body[data-home-theme="navy"]{--green:#16a34a}
/* homepage theme B — clean bright white */
body[data-home-theme="white"]{--green:#15a34a;--green-d:#0e7c38;--green-soft:#e4f6ea;--ink:#14273f;--body:#43536a;--muted:#66788e;--line:#e2e9f0;--bg:#ffffff;--bg-alt:#f4f7fa}
body[data-home-theme="white"] .hero{background:radial-gradient(680px 360px at 88% -40px,rgba(21,163,74,.16),transparent 62%),linear-gradient(170deg,#f2fbf4,#e8f3fd);color:#3d526e}
body[data-home-theme="white"] .hero h1{color:#0d2c50}
body[data-home-theme="white"] .hero h1 .h1-l1{color:#0d2c50}
body[data-home-theme="white"] .hero h1 .h1-l2{color:#0e9f45}
body[data-home-theme="white"] .hero h1 .h1-car g{stroke:#0e7c38}
body[data-home-theme="white"] .hero h1 .h1-car g+g{stroke:#0d2c50}
body[data-home-theme="white"] .hero .sub{color:#3d526e}
body[data-home-theme="white"] .trust-list li{color:#1d3a5c}
body[data-home-theme="white"] .brand .mark{background:linear-gradient(150deg,#1d9e4b,#0e7c38)}
body[data-home-theme="white"] footer{background:#0d2c50}
body[data-home-theme="white"] .foot-cols>div{background:#123763}
/* homepage theme C — midnight black with neon green */
body[data-home-theme="midnight"]{--green:#22e07a;--green-d:#3be383;--green-soft:#10301e;--ink:#eafff3;--body:#b9cec0;--muted:#87a291;--line:#224434;--bg:#060d09;--bg-alt:#0a1710;--red:#ff7a6e}
body[data-home-theme="midnight"] .topbar{background:#08130d;border-bottom-color:var(--line)}
body[data-home-theme="midnight"] .hero{background:radial-gradient(680px 360px at 88% -40px,rgba(34,224,122,.22),transparent 62%),linear-gradient(165deg,#0a2013,#020604);color:#c9e8d5}
body[data-home-theme="midnight"] .hero h1 .h1-l2{color:#22e07a}
body[data-home-theme="midnight"] .hero .sub{color:#a9cbb6}
body[data-home-theme="midnight"] .brand .mark{background:linear-gradient(150deg,#14532d,#052e16)}
body[data-home-theme="midnight"] .feat,body[data-home-theme="midnight"] .prem,body[data-home-theme="midnight"] .steps-panel,body[data-home-theme="midnight"] .report-card,body[data-home-theme="midnight"] .faq,body[data-home-theme="midnight"] .faq details,body[data-home-theme="midnight"] .pricing-panel,body[data-home-theme="midnight"] .plan,body[data-home-theme="midnight"] .free-bar,body[data-home-theme="midnight"] .qr-card{background:#0c1d13}
body[data-home-theme="midnight"] .plan.best{background:#0f2c1a}
body[data-home-theme="midnight"] .stat{background:#0a1710}
body[data-home-theme="midnight"] .sec-toggle,body[data-home-theme="midnight"] .nav-btn.login,body[data-home-theme="midnight"] .theme-btn{background:#0c1d13;color:var(--ink)}
body[data-home-theme="midnight"] .theme-btn .dots i{border-color:#0c1d13}
body[data-home-theme="midnight"] .lang-toggle button[aria-pressed="true"]{background:var(--green);color:#02120a}
body[data-home-theme="midnight"] .nav-btn.signup{background:var(--green);color:#02120a}
body[data-home-theme="midnight"] .btn-green{color:#02120a}
body[data-home-theme="midnight"] .chart-box svg text{fill:#c9e8d5}
body[data-home-theme="midnight"] .chart-box svg line{stroke:#224434}
body[data-home-theme="midnight"] footer{background:#020604}
body[data-home-theme="midnight"] .foot-cols>div{background:#08130d}
/* homepage theme D — ocean teal & blue */
body[data-home-theme="ocean"]{--green:#0284c7;--green-d:#0369a1;--green-soft:#e0f2fe;--ink:#0b2f4a;--line:#d8e9f2;--bg-alt:#eef7fb}
body[data-home-theme="ocean"] .hero{background:radial-gradient(680px 360px at 88% -40px,rgba(56,189,248,.35),transparent 62%),radial-gradient(620px 420px at 4% 112%,rgba(8,145,178,.45),transparent 62%),linear-gradient(165deg,#0a3a5c,#062238)}
body[data-home-theme="ocean"] .hero h1 .h1-l2{color:#7dd3fc}
body[data-home-theme="ocean"] .brand .mark{background:linear-gradient(150deg,#0ea5e9,#075985)}
body[data-home-theme="ocean"] footer{background:#062238}
body[data-home-theme="ocean"] .foot-cols>div{background:#0a3552}
/* homepage theme E — warm sunset orange */
body[data-home-theme="sunset"]{--green:#ea580c;--green-d:#c2410c;--green-soft:#ffedd5;--ink:#3d2412;--body:#5f4633;--muted:#8a6f57;--line:#f0e2d2;--bg-alt:#fdf6ee}
body[data-home-theme="sunset"] .hero{background:radial-gradient(680px 360px at 88% -40px,rgba(251,191,36,.32),transparent 62%),radial-gradient(620px 420px at 4% 112%,rgba(234,88,12,.4),transparent 62%),linear-gradient(165deg,#572a10,#2b1206);color:#fdeeda}
body[data-home-theme="sunset"] .hero h1 .h1-l2{color:#fdba74}
body[data-home-theme="sunset"] .hero .sub{color:#f3ddc8}
body[data-home-theme="sunset"] .trust-list li{color:#fff6ea}
body[data-home-theme="sunset"] .brand .mark{background:linear-gradient(150deg,#f97316,#9a3412)}
body[data-home-theme="sunset"] footer{background:#2b1206}
body[data-home-theme="sunset"] .foot-cols>div{background:#431f0a}
/* homepage theme F — elegant violet */
body[data-home-theme="violet"]{--green:#7c3aed;--green-d:#6d28d9;--green-soft:#ede9fe;--ink:#2b1650;--body:#51456e;--muted:#7d7398;--line:#e6ddf7;--bg-alt:#f7f4fd}
body[data-home-theme="violet"] .hero{background:radial-gradient(680px 360px at 88% -40px,rgba(192,132,252,.3),transparent 62%),radial-gradient(620px 420px at 4% 112%,rgba(124,58,237,.42),transparent 62%),linear-gradient(165deg,#3b1476,#1c0b3d)}
body[data-home-theme="violet"] .hero h1 .h1-l2{color:#d8b4fe}
body[data-home-theme="violet"] .brand .mark{background:linear-gradient(150deg,#8b5cf6,#5b21b6)}
body[data-home-theme="violet"] footer{background:#1c0b3d}
body[data-home-theme="violet"] .foot-cols>div{background:#2c1360}
/* App panel themes — only the phone mock in the earn section */
body[data-home-theme] .phone-frame[data-app-theme="dark"] .phone-card{background:#101a2e;color:#c3d0e4}
body[data-home-theme] .phone-frame[data-app-theme="dark"] .phone-card .notch{background:#31405c}
body[data-home-theme] .phone-frame[data-app-theme="dark"] .ph-net{color:#4ade80}
body[data-home-theme] .phone-frame[data-app-theme="dark"] .ph-stats{color:#eef4fc}
body[data-home-theme] .phone-frame[data-app-theme="dark"] .ph-best{border-top-color:#31405c}
body[data-home-theme] .phone-frame[data-app-theme="dark"] .ph-best .v{color:#4ade80}
body[data-home-theme] .phone-frame[data-app-theme="ocean"] .phone-card{background:#eef7ff}
body[data-home-theme] .phone-frame[data-app-theme="ocean"] .ph-net{color:#0369a1}
body[data-home-theme] .phone-frame[data-app-theme="ocean"] .ph-rows .g{color:#0369a1}
body[data-home-theme] .phone-frame[data-app-theme="ocean"] .ph-bars i{background:linear-gradient(180deg,#38bdf8,#0284c7)}
body[data-home-theme] .phone-frame[data-app-theme="ocean"] .ph-best .v{color:#0369a1}
body[data-home-theme] .phone-frame[data-app-theme="sunset"] .phone-card{background:#fff7ec}
body[data-home-theme] .phone-frame[data-app-theme="sunset"] .ph-net{color:#c2410c}
body[data-home-theme] .phone-frame[data-app-theme="sunset"] .ph-rows .g{color:#c2410c}
body[data-home-theme] .phone-frame[data-app-theme="sunset"] .ph-bars i{background:linear-gradient(180deg,#fbbf24,#ea580c)}
body[data-home-theme] .phone-frame[data-app-theme="sunset"] .ph-best .v{color:#c2410c}
body[data-home-theme] .phone-frame[data-app-theme="lavender"] .phone-card{background:#f6f2ff}
body[data-home-theme] .phone-frame[data-app-theme="lavender"] .ph-net{color:#6d28d9}
body[data-home-theme] .phone-frame[data-app-theme="lavender"] .ph-rows .g{color:#6d28d9}
body[data-home-theme] .phone-frame[data-app-theme="lavender"] .ph-bars i{background:linear-gradient(180deg,#c4b5fd,#7c3aed)}
body[data-home-theme] .phone-frame[data-app-theme="lavender"] .ph-best .v{color:#6d28d9}
body[data-home-theme] .phone-frame[data-app-theme="gold"]{background:#17120a}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .phone-card{background:#211a10;color:#d8cbb2}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .phone-card .notch{background:#4a3d24}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-net{color:#fbbf24}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-rows .g{color:#fbbf24}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-rows .r{color:#fca5a5}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-bars i{background:linear-gradient(180deg,#fde68a,#d97706)}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-stats{color:#faf3e3}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-best{border-top-color:#4a3d24}
body[data-home-theme] .phone-frame[data-app-theme="gold"] .ph-best .v{color:#fbbf24}
/* 範本 C 的兩個直接上色規則（.hero .btn、.hero h1 字級）權重比預覽主題高，
   選了非 navy 配色時要由主題顏色接管，否則按鈕會一直留在 C 的亮綠、標題一直被壓到 62px。
   navy 預設時不加這些覆寫，範本 C 照常生效。 */
body[data-home-theme="white"] .hero .btn,
body[data-home-theme="ocean"] .hero .btn,
body[data-home-theme="sunset"] .hero .btn,
body[data-home-theme="violet"] .hero .btn{background-color:var(--green);color:#fff}
body[data-home-theme="midnight"] .hero .btn{background-color:var(--green);color:#02120a}
body[data-home-theme="white"] .hero .btn:hover,
body[data-home-theme="ocean"] .hero .btn:hover,
body[data-home-theme="sunset"] .hero .btn:hover,
body[data-home-theme="violet"] .hero .btn:hover,
body[data-home-theme="midnight"] .hero .btn:hover{background-color:var(--green-d)}
body[data-home-theme="white"] .hero h1,
body[data-home-theme="midnight"] .hero h1,
body[data-home-theme="ocean"] .hero h1,
body[data-home-theme="sunset"] .hero h1,
body[data-home-theme="violet"] .hero h1{font-size:clamp(52px,17.5vw,138px)}

/* ---------- 語言選擇在首頁六種配色下都要看得清楚（2026-11-12） ----------
   共用的 .lang-select 用 var(--card) 當底，但首頁主題不定義 --card（沿用 :root 的白色），
   極夜下字是淺色（--ink #eafff3）配白底會看不見。改用 --bg-alt（淺色主題是淺底、極夜是深底）
   配 --ink，六種配色都有足夠對比；option 也明寫，避免原生下拉選項沿用白底淺字。
   color-scheme 讓瀏覽器把原生下拉選單也按深色／淺色渲染。只在 body[data-home-theme] 生效，
   App／後台（沒有 data-home-theme）不受影響。 */
body[data-home-theme] .lang-select{color:var(--ink);background-color:var(--bg-alt)}
body[data-home-theme] .lang-select option{color:var(--ink);background:var(--bg-alt)}
body[data-home-theme]{color-scheme:light}
body[data-home-theme="midnight"]{color-scheme:dark}

/* ---------- v1.0.38：下載置中、App 輪播、定價手機滑動 ---------- */
/* 下載：只有 QR 圖居中，下面的文字一律靠左（v1.0.39）。
   .dl-grid 仍是單欄，align-items:center 讓 QR 卡片水平居中；
   .dl-copy 改成 align-self:stretch 撐滿寬度、文字靠左，不跟著 QR 居中；
   按鈕也靠左（margin-left:0），整區文字一律向左靠齊。 */
body[data-home-theme] .dl-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
body[data-home-theme] .dl-copy{text-align:left;align-self:stretch;max-width:none}
body[data-home-theme] .dl-copy .dl-support{font-family:var(--head-font);font-weight:800;font-size:clamp(17px,4.6vw,19.5px);color:var(--ink);line-height:1.5}
body[data-home-theme] .dl-copy .dl-web{font-family:var(--head-font);font-weight:800;font-size:clamp(17px,4.6vw,19.5px);color:var(--ink);line-height:1.5}
body[data-home-theme] .dl-copy .dl-how{font-size:15.5px;color:var(--body)}
body[data-home-theme] .qr-box img{max-width:100%;height:auto;display:block}
/* App 畫面輪播（報表預覽）：3 張手機示範畫面，左右滑＋自動播＋小圓點＋箭頭 */
body[data-home-theme] .app-show{position:relative;max-width:560px;margin:0 auto}
body[data-home-theme] .app-viewport{overflow:hidden}
body[data-home-theme] .app-track{display:flex;transition:transform .45s ease;will-change:transform;touch-action:pan-y}
body[data-home-theme] .app-slide{flex:0 0 100%;min-width:0;padding:2px}
body[data-home-theme] .app-slide-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:330px;margin:0 auto 12px;font-family:var(--head-font);font-weight:800;font-size:18px;color:var(--ink)}
body[data-home-theme] .app-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--green);border-bottom:3px solid var(--green-d);background:rgba(255,255,255,.94);background-image:linear-gradient(180deg,#fff,#edf3ef);color:var(--green-d);font-size:24px;line-height:1;display:none;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(21,42,66,.16);transition:transform .12s ease, box-shadow .12s ease, border-bottom-width .12s ease}
body[data-home-theme] .app-arrow:hover{transform:translateY(calc(-50% - 1px));box-shadow:0 7px 16px rgba(21,42,66,.20)}
body[data-home-theme] .app-arrow:active{transform:translateY(calc(-50% + 2px));border-bottom-width:1.5px;box-shadow:0 1px 4px rgba(21,42,66,.14)}
body[data-home-theme] .app-arrow.app-prev{left:0}
body[data-home-theme] .app-arrow.app-next{right:0}
@media(min-width:720px){body[data-home-theme] .app-arrow{display:grid}}
body[data-home-theme] .app-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
body[data-home-theme] .app-dot{width:9px;height:9px;border-radius:50%;border:0;background:#cbd5e1;cursor:pointer;padding:0}
body[data-home-theme] .app-dot.active{background:var(--green);width:26px;border-radius:999px}
/* 記帳紀錄列表（輪播第 3 張）：日期＋平台＋金額，收入綠、支出紅 */
body[data-home-theme] .hist-list{display:grid;margin-top:14px;border-top:1px solid var(--line)}
body[data-home-theme] .hist-list .hrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:15.5px}
body[data-home-theme] .hist-list .hrow .d{color:var(--muted);font-size:14px;white-space:nowrap}
body[data-home-theme] .hist-list .hrow .p{font-weight:700;color:var(--ink);min-width:0;overflow-wrap:break-word}
body[data-home-theme] .hist-list .hrow .a{font-weight:800;white-space:nowrap}
body[data-home-theme] .hist-list .hrow .a.g{color:var(--green-d)}
body[data-home-theme] .hist-list .hrow .a.r{color:var(--red)}
/* 定價小圓點：桌機隱藏，手機顯示 */
body[data-home-theme] .plan-dots{display:none}
body[data-home-theme] .plan-dot{width:9px;height:9px;border-radius:50%;border:0;background:#cbd5e1;cursor:pointer;padding:0}
body[data-home-theme] .plan-dot.active{background:var(--green);width:26px;border-radius:999px}
/* 定價手機版：三個方案改成左右滑（一次剛好一整頁，不露邊），桌機維持三欄並排。
   每張卡 100% 寬、無間距無內邊距，滑一次剛好一整頁；box-sizing:border-box 已全域設定，
   卡片邊框含在 100% 內，不會溢出。 */
@media(max-width:720px){
  body[data-home-theme] .plan-panel{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:0;padding:0;background:transparent;scrollbar-width:none}
  body[data-home-theme] .plan-panel::-webkit-scrollbar{display:none}
  body[data-home-theme] .plan{flex:0 0 100%;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px}
  body[data-home-theme] .plan.plan-clone{display:flex}
  body[data-home-theme] .plan-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
}
@media(prefers-reduced-motion: reduce){body[data-home-theme] .app-track{transition:none}}