/* App 介紹頁的各自風格（2026-10-27）：配色照各 App 的招募頁（<App>/admin-web/join/join.css），
   啾啾、珊瑚礁沒有招募頁，用 App 自己的配色（PetTheme.kt、theme/Theme.kt）。
   build.js 在介紹頁的 <body> 加 class="theme-<id>"；沒列在這裡的 App 照官網原本的紫色。
   只換顏色、字型、圓角這些變數，版面結構與官網共用。深色款（連連看、珊瑚礁）不跟著深淺色切換。 */

/* ---------- 淺色款：照招募頁淺色 ---------- */
/* 多益、日檢、旅遊英文、旅遊日文：帳簿米色＋朱紅印章 */
body.theme-stamp-ledger, body.theme-jlpt, body.theme-stamp-ledger-travel, body.theme-stamp-ledger-travelja {
  --bg: #f2eee4; --band: #e9e3d5; --surface: #fbf9f4; --ink: #1d2433; --ink-2: #3a3f4c; --muted: #5e5848;
  --line: #cfc6b3; --line-2: #d8d0bf; --line-strong: #a79e8a;
  --primary: #b8392a; --primary-hover: #8f2a1f; --primary-ink: #ffffff; --primary-soft: #f3e1da;
  --dark: #1d2433; --dark-line: #343a48;
  --app-radius: 6px;
}
/* 露營掌門：營地米色＋松綠、營火橘 */
body.theme-camppulse {
  --bg: #EDE8DC; --band: #E4DECF; --surface: #FAF8F2; --ink: #1B241F; --ink-2: #33403A; --muted: #5D6A62;
  --line: #D3CCBB; --line-2: #D3CCBB; --line-strong: #B9B19E;
  --primary: #1F3D30; --primary-hover: #142A21; --primary-ink: #F4F1E8; --primary-soft: #DCE5DD;
  --dark: #1F3D30; --dark-line: #34574A;
  --app-radius: 12px;
}
/* 山跡：紙本日誌米色＋森林綠 */
body.theme-hikinglog {
  --bg: #F4F1E8; --band: #EAE6D8; --surface: #FCFAF4; --ink: #1F2A24; --ink-2: #39443D; --muted: #545C52;
  --line: #D5D0C0; --line-2: #D5D0C0; --line-strong: #B7B3A2;
  --primary: #2F5D3A; --primary-hover: #21452A; --primary-ink: #ffffff; --primary-soft: #DFE8DC;
  --dark: #1F2A24; --dark-line: #34403A;
  --app-radius: 6px;
}
/* 心算日課：方格紙＋朱紅 */
body.theme-quickmath {
  --bg: #F5F2E9; --band: #ECE7DA; --surface: #FDFBF6; --ink: #1C2230; --ink-2: #363C4A; --muted: #5C6170;
  --line: #E2DCCB; --line-2: #E2DCCB; --line-strong: #C9C2B1;
  --primary: #B23A27; --primary-hover: #8E2E1F; --primary-ink: #ffffff; --primary-soft: #FBEDE8;
  --dark: #1C2230; --dark-line: #363C4A;
  --app-radius: 8px;
}
body.theme-quickmath .block.band { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; }
/* 花語小園：奶油紙＋木頭＋玫瑰 */
body.theme-flowergarden {
  --bg: #F6ECDD; --band: #EADFC6; --surface: #FFFDF6; --ink: #4D3826; --ink-2: #6E4C30; --muted: #7C5A3A;
  --line: #E8D5AF; --line-2: #E8D5AF; --line-strong: #C7A977;
  --primary: #A84A72; --primary-hover: #7E3556; --primary-ink: #ffffff; --primary-soft: #FDE9EF;
  --dark: #6E4C30; --dark-line: #8A6240; --dark-2: #F6ECDD; --dark-muted: #E8D5AF;
  --app-radius: 18px;
}
/* 環球夜市大富翁：夜市暖黃＋紅燈籠 */
body.theme-nightmarket {
  --bg: #FFF6E5; --band: #FFE9C7; --surface: #FFFFFF; --ink: #4A2C1A; --ink-2: #63402A; --muted: #7A4E33;
  --line: #E3CDB0; --line-2: #E3CDB0; --line-strong: #C9AE8E;
  --primary: #C93A22; --primary-hover: #A02C18; --primary-ink: #ffffff; --primary-soft: #FFF1EC;
  --dark: #4A2C1A; --dark-line: #6A5040;
  --app-radius: 14px;
}
/* 老街修復：米色紙面＋木頭棕字、磚紅主色（照招募頁 join.css）；App 是單一老街場景、沒有深色版，這頁也固定亮色 */
body.theme-oldstreet {
  --bg: #F3EADB; --band: #EEDFC6; --surface: #FBF6EC; --ink: #5A3420; --ink-2: #6D4A33; --muted: #6D6158;
  --line: #E0D0B8; --line-2: #E0D0B8; --line-strong: #C9AE8E;
  --primary: #A8482F; --primary-hover: #8A3A25; --primary-ink: #ffffff; --primary-soft: #FFF4DC;
  --dark: #5A3420; --dark-line: #6D4A33;
  --app-radius: 14px;
}
/* 啾啾養成：奶油黃＋蛋黃、可可色字 */
body.theme-chickpet {
  --bg: #FFF6D5; --band: #FFEDB0; --surface: #FFFCEF; --ink: #3A2E2A; --ink-2: #554540; --muted: #6E5B52;
  --line: #F2DFA0; --line-2: #F2DFA0; --line-strong: #E0C46A;
  --primary: #A3560F; --primary-hover: #7E420B; --primary-ink: #ffffff; --primary-soft: #FFEBC6;
  --dark: #3A2E2A; --dark-line: #554540;
  --app-radius: 20px;
}

body.theme-dinopet {
  --bg: #F4F8E6; --band: #E3F2C9; --surface: #FBFDF3; --ink: #2F3A24; --ink-2: #46523A; --muted: #5E6A50;
  --line: #D9E4C2; --line-2: #D9E4C2; --line-strong: #B9CB96;
  --primary: #B4561A; --primary-hover: #8E4214; --primary-ink: #ffffff; --primary-soft: #FFE0B8;
  --dark: #2F3A24; --dark-line: #46523A;
  --app-radius: 20px;
}

/* 淺色款在深色模式：保留官網深色底，只把主色換成各 App 招募頁的深色主色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-stamp-ledger, :root:not([data-theme="light"]) body.theme-jlpt,
  :root:not([data-theme="light"]) body.theme-stamp-ledger-travel, :root:not([data-theme="light"]) body.theme-stamp-ledger-travelja { --bg: #15181f; --band: #1a1e26; --surface: #1d212b; --ink: #ece7da; --ink-2: #d4cebf; --muted: #b4ad9c; --line: #343a48; --line-2: #343a48; --line-strong: #4a5163; --primary: #e0705f; --primary-hover: #f0907f; --primary-ink: #15181f; --primary-soft: #362523; --dark: #0f1116; }
  :root:not([data-theme="light"]) body.theme-camppulse { --bg: #0F1411; --band: #141A16; --surface: #171E1A; --ink: #E7E4DC; --ink-2: #CFCBC1; --muted: #A3ADA6; --line: #2C3630; --line-2: #2C3630; --line-strong: #3E4A43; --primary: #86BC9C; --primary-hover: #A3D1B6; --primary-ink: #0F1411; --primary-soft: #1E2D25; --dark: #0A0E0C; }
  :root:not([data-theme="light"]) body.theme-hikinglog { --bg: #121613; --band: #171C18; --surface: #1B201C; --ink: #E8E4D8; --ink-2: #CFCBBF; --muted: #A3AA9F; --line: #2E352F; --line-2: #2E352F; --line-strong: #434B44; --primary: #8FBF94; --primary-hover: #AAD2AE; --primary-ink: #121613; --primary-soft: #232A24; --dark: #0C0F0D; }
  :root:not([data-theme="light"]) body.theme-quickmath { --bg: #171A20; --band: #1B1F26; --surface: #1F232B; --ink: #E8E4D8; --ink-2: #CFCBBF; --muted: #A9ADB8; --line: #252A34; --line-2: #252A34; --line-strong: #3A404C; --primary: #F08872; --primary-hover: #F6A491; --primary-ink: #171A20; --primary-soft: #2E2023; --dark: #101216; }
  :root:not([data-theme="light"]) body.theme-nightmarket { --bg: #1C120C; --band: #241811; --surface: #2A1C14; --ink: #FFF1DE; --ink-2: #F0DCC3; --muted: #E3CDB0; --line: #4A3527; --line-2: #4A3527; --line-strong: #6A5040; --primary: #FF7A5C; --primary-hover: #FF9A82; --primary-ink: #1C120C; --primary-soft: #3A2218; --dark: #140C08; }
  :root:not([data-theme="light"]) body.theme-flowergarden { --bg: #1E1712; --band: #261D16; --surface: #2B211A; --ink: #F6EAD8; --ink-2: #E4D3BC; --muted: #CDB89C; --line: #43352A; --line-2: #43352A; --line-strong: #5C4A3B; --primary: #F09EB4; --primary-hover: #F6BACB; --primary-ink: #1E1712; --primary-soft: #3A2530; --dark: #15100C; }
  :root:not([data-theme="light"]) body.theme-chickpet { --bg: #1F1A14; --band: #27201A; --surface: #2C251D; --ink: #FFF3D6; --ink-2: #EBDDBC; --muted: #D2C29E; --line: #463B2D; --line-2: #463B2D; --line-strong: #5E503E; --primary: #FFD84D; --primary-hover: #FFE37E; --primary-ink: #1F1A14; --primary-soft: #3A3018; --dark: #16120D; }
  :root:not([data-theme="light"]) body.theme-dinopet { --bg: #161A12; --band: #1C2117; --surface: #20261A; --ink: #EEF3E0; --ink-2: #D6DDC4; --muted: #B3BC9E; --line: #343D2B; --line-2: #343D2B; --line-strong: #4A5540; --primary: #F2A65E; --primary-hover: #F7BE86; --primary-ink: #161A12; --primary-soft: #3A2A1A; --dark: #0F120C; }
}
:root[data-theme="dark"] body.theme-stamp-ledger, :root[data-theme="dark"] body.theme-jlpt,
:root[data-theme="dark"] body.theme-stamp-ledger-travel, :root[data-theme="dark"] body.theme-stamp-ledger-travelja { --bg: #15181f; --band: #1a1e26; --surface: #1d212b; --ink: #ece7da; --ink-2: #d4cebf; --muted: #b4ad9c; --line: #343a48; --line-2: #343a48; --line-strong: #4a5163; --primary: #e0705f; --primary-hover: #f0907f; --primary-ink: #15181f; --primary-soft: #362523; --dark: #0f1116; }
:root[data-theme="dark"] body.theme-camppulse { --bg: #0F1411; --band: #141A16; --surface: #171E1A; --ink: #E7E4DC; --ink-2: #CFCBC1; --muted: #A3ADA6; --line: #2C3630; --line-2: #2C3630; --line-strong: #3E4A43; --primary: #86BC9C; --primary-hover: #A3D1B6; --primary-ink: #0F1411; --primary-soft: #1E2D25; --dark: #0A0E0C; }
:root[data-theme="dark"] body.theme-hikinglog { --bg: #121613; --band: #171C18; --surface: #1B201C; --ink: #E8E4D8; --ink-2: #CFCBBF; --muted: #A3AA9F; --line: #2E352F; --line-2: #2E352F; --line-strong: #434B44; --primary: #8FBF94; --primary-hover: #AAD2AE; --primary-ink: #121613; --primary-soft: #232A24; --dark: #0C0F0D; }
:root[data-theme="dark"] body.theme-quickmath { --bg: #171A20; --band: #1B1F26; --surface: #1F232B; --ink: #E8E4D8; --ink-2: #CFCBBF; --muted: #A9ADB8; --line: #252A34; --line-2: #252A34; --line-strong: #3A404C; --primary: #F08872; --primary-hover: #F6A491; --primary-ink: #171A20; --primary-soft: #2E2023; --dark: #101216; }
:root[data-theme="dark"] body.theme-nightmarket { --bg: #1C120C; --band: #241811; --surface: #2A1C14; --ink: #FFF1DE; --ink-2: #F0DCC3; --muted: #E3CDB0; --line: #4A3527; --line-2: #4A3527; --line-strong: #6A5040; --primary: #FF7A5C; --primary-hover: #FF9A82; --primary-ink: #1C120C; --primary-soft: #3A2218; --dark: #140C08; }
:root[data-theme="dark"] body.theme-flowergarden { --bg: #1E1712; --band: #261D16; --surface: #2B211A; --ink: #F6EAD8; --ink-2: #E4D3BC; --muted: #CDB89C; --line: #43352A; --line-2: #43352A; --line-strong: #5C4A3B; --primary: #F09EB4; --primary-hover: #F6BACB; --primary-ink: #1E1712; --primary-soft: #3A2530; --dark: #15100C; }
:root[data-theme="dark"] body.theme-chickpet { --bg: #1F1A14; --band: #27201A; --surface: #2C251D; --ink: #FFF3D6; --ink-2: #EBDDBC; --muted: #D2C29E; --line: #463B2D; --line-2: #463B2D; --line-strong: #5E503E; --primary: #FFD84D; --primary-hover: #FFE37E; --primary-ink: #1F1A14; --primary-soft: #3A3018; --dark: #16120D; }
:root[data-theme="dark"] body.theme-dinopet { --bg: #161A12; --band: #1C2117; --surface: #20261A; --ink: #EEF3E0; --ink-2: #D6DDC4; --muted: #B3BC9E; --line: #343D2B; --line-2: #343D2B; --line-strong: #4A5540; --primary: #F2A65E; --primary-hover: #F7BE86; --primary-ink: #161A12; --primary-soft: #3A2A1A; --dark: #0F120C; }

/* ---------- 深色款：不跟深淺色切換 ---------- */
/* 連連看：藍染夜色＋金漆，字型霞鶩文楷（build.js 會加字型連結） */
body.theme-lianliankan {
  --bg: #031C38; --band: #071530; --surface: #13244A; --ink: #F3EADB; --ink-2: #E2D9C8; --muted: #C3C8D8;
  --line: rgba(224, 182, 90, .28); --line-2: rgba(224, 182, 90, .28); --line-strong: rgba(224, 182, 90, .5);
  --primary: #E0B65A; --primary-hover: #F6D88F; --primary-ink: #1A2547; --primary-soft: #1B2D55;
  --dark: #071530; --dark-ink: #F3EADB; --dark-2: #E2D9C8; --dark-muted: #C3C8D8; --dark-line: rgba(224, 182, 90, .35);
  --tag-bg: #1B2D55; --tag-ink: #F3EADB; --tag-testing-bg: #3A2E14; --tag-testing: #F6D88F;
  --font-display: "LXGW WenKai TC", "Noto Serif TC", serif; --font-body: "LXGW WenKai TC", "Noto Sans TC", system-ui, sans-serif;
  --app-radius: 10px;
  color-scheme: dark;
}
body.theme-lianliankan .dark-band { border-top: 1px solid var(--line-strong); }
/* 深色款的官網標誌：和官網深色模式一樣墊淺色底，不然深紫字看不到 */
body.theme-lianliankan .brand-logo, body.theme-coralreef .brand-logo { background: #fbfaf8; padding: 6px 12px; border-radius: 10px; }
/* 珊瑚礁：深海藍＋珊瑚粉、珍珠白 */
body.theme-coralreef {
  --bg: #04162B; --band: #072540; --surface: #0B2D4A; --ink: #F4EEE2; --ink-2: #E2DCD0; --muted: #B9C7D3;
  --line: #13405F; --line-2: #13405F; --line-strong: #1F5A80;
  --primary: #FF8A6B; --primary-hover: #FFA88F; --primary-ink: #0A1B2A; --primary-soft: #2A2A3A;
  --dark: #061B2E; --dark-ink: #F4EEE2; --dark-2: #E2DCD0; --dark-muted: #B9C7D3; --dark-line: #13405F;
  --tag-bg: #0F3655; --tag-ink: #F4EEE2; --tag-testing-bg: #3B2E16; --tag-testing: #FFD27A;
  --app-radius: 16px;
  color-scheme: dark;
}

/* 開發APP管理：淡紫底＋紫羅蘭（照它的後台 ZifuHub/admin-web） */
body.theme-devhub {
  --bg: #f7f3ff; --band: #ede5ff; --surface: #ffffff; --ink: #231a3a; --ink-2: #3a3052; --muted: #5a5170;
  --line: #cfc4e6; --line-2: #ddd4ef; --line-strong: #b3a6d3;
  --primary: #6a3fc8; --primary-hover: #52309c; --primary-ink: #ffffff; --primary-soft: #ede5ff;
  --dark: #231a3a; --dark-line: #3c3260;
  --app-radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-devhub { --bg: #17122a; --band: #1c1631; --surface: #211a38; --ink: #efe9ff; --ink-2: #d9d0f2; --muted: #b9aedb; --line: #3c3260; --line-2: #3c3260; --line-strong: #54497c; --primary: #b79cff; --primary-hover: #cdb9ff; --primary-ink: #17122a; --primary-soft: #2d2450; --dark: #110d20; }
}
:root[data-theme="dark"] body.theme-devhub { --bg: #17122a; --band: #1c1631; --surface: #211a38; --ink: #efe9ff; --ink-2: #d9d0f2; --muted: #b9aedb; --line: #3c3260; --line-2: #3c3260; --line-strong: #54497c; --primary: #b79cff; --primary-hover: #cdb9ff; --primary-ink: #17122a; --primary-soft: #2d2450; --dark: #110d20; }

/* 共用：按鈕與卡片圓角跟著 App */
body[class*="theme-"] .feature-grid li, body[class*="theme-"] .faq details { border-radius: var(--app-radius, 14px); }

/* ---------- 隱私權政策（privacy/*.html，build.js 加 class="theme-<id> doc-page"，2026-10-28） ---------- */
body.doc-page .doc-app { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; }
body.doc-page .doc-app .app-icon { width: 48px; height: 48px; border-radius: calc(var(--app-radius, 14px) + 2px); }
body.doc-page .doc-app a { display: flex; flex-direction: column; min-height: 44px; justify-content: center; text-decoration: none; line-height: 1.35; }
body.doc-page .doc-app b { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
body.doc-page .doc-app a span { font-size: 13.5px; color: var(--primary); }
body.doc-page .doc-app a:hover span { text-decoration: underline; }
body.doc-page .doc h1 { font-family: var(--font-display); color: var(--ink); }
body.doc-page .doc h2 { font-family: var(--font-display); color: var(--ink); padding-left: 14px; border-left: 5px solid var(--primary); line-height: 1.4; }
body.doc-page .toc { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--app-radius, 14px); }
body.doc-page .table-wrap { border-radius: var(--app-radius, 14px); }
body.doc-page .doc th { background: var(--primary-soft); }
@media (max-width: 719px) { body.doc-page .doc .stack tr { border-radius: var(--app-radius, 14px); } }

/* ---------- 動畫（assets/app-fx.js；系統「減少動態效果」時全部不播） ---------- */
main { position: relative; overflow-x: clip; }
.fx-canvas { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 0; }
main > .wrap, main > section { position: relative; z-index: 1; }
.app-hero { cursor: crosshair; }
.app-hero a, .app-hero button { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  /* 首屏進場：圖示彈出、標題與標籤依序滑上、手機框從右邊飛進來 */
  body[class*="theme-"] .app-hero-info > * { animation: fx-rise .7s cubic-bezier(.2, .9, .25, 1.15) both; }
  body[class*="theme-"] .app-hero-info > :nth-child(2) { animation-delay: .08s; }
  body[class*="theme-"] .app-hero-info > :nth-child(3) { animation-delay: .16s; }
  body[class*="theme-"] .app-hero-info > :nth-child(4) { animation-delay: .24s; }
  body[class*="theme-"] .app-hero-info > :nth-child(5) { animation-delay: .32s; }
  body[class*="theme-"] .app-hero-info > :nth-child(n+6) { animation-delay: .4s; }
  body[class*="theme-"] .detail-head .app-icon { animation: fx-pop .8s cubic-bezier(.3, 1.6, .5, 1) .15s both, fx-float 4s ease-in-out 1s infinite; }
  body[class*="theme-"] .app-hero .phone, body[class*="theme-"] .app-hero .phone-empty { animation: fx-fly 1s cubic-bezier(.2, .9, .25, 1.1) .2s both; transition: transform .25s ease-out; will-change: transform; }

  /* 標題一道光掃過去 */
  body[class*="theme-"] .detail-head h1 { background: linear-gradient(100deg, var(--ink) 42%, var(--primary) 50%, var(--ink) 58%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-shine 4.5s ease-in-out 1s infinite; }
  body.theme-lianliankan .detail-head h1 { background-image: linear-gradient(100deg, #F3EADB 40%, #F6D88F 47%, #FFFFFF 50%, #F6D88F 53%, #F3EADB 60%); }

  /* 主要按鈕：光澤掃過＋外圈脈動 */
  body[class*="theme-"] .actions .btn:not(.ghost):not(.outline-light) { position: relative; overflow: hidden; isolation: isolate; animation: fx-pulse 2.4s ease-in-out 1.2s infinite; }
  body[class*="theme-"] .actions .btn:not(.ghost):not(.outline-light)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: fx-sweep 3s ease-in-out 1.5s infinite; }
  body[class*="theme-"] .btn { transition: transform .15s, box-shadow .2s; }
  body[class*="theme-"] .btn:hover { transform: translateY(-2px); }
  body[class*="theme-"] .btn:active { transform: translateY(1px) scale(.98); }

  /* 捲動浮現（app-fx.js 加 .fx-up，看到時加 .fx-in） */
  .fx-up { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .25, 1.15); }
  .fx-up.fx-in { opacity: 1; transform: none; }

  /* 功能卡：滑鼠移上去浮起來、編號放大變色 */
  body[class*="theme-"] .feature-grid li { transition: opacity .6s ease, transform .35s cubic-bezier(.2, .9, .25, 1.15), box-shadow .3s, border-color .3s; }
  body[class*="theme-"] .feature-grid li.fx-in:hover, body[class*="theme-"] .feature-grid li:not(.fx-up):hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 18px 36px -18px var(--primary); border-color: var(--primary); }
  body[class*="theme-"] .feature-grid li > span:first-child { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
  body[class*="theme-"] .feature-grid li:hover > span:first-child { transform: scale(1.35) rotate(-8deg); }
  body[class*="theme-"] .section-head h2 { position: relative; }
  body[class*="theme-"] .section-head.fx-in h2::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 100%; background: var(--primary); border-radius: 3px; transform-origin: left; animation: fx-line .8s cubic-bezier(.2, .9, .25, 1) .2s both; }
}

@keyframes fx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); } 100% { opacity: 1; transform: none; } }
@keyframes fx-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes fx-fly { from { opacity: 0; transform: translateX(80px) rotate(8deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fx-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes fx-sweep { 0%, 50% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); } 60% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent); } }
@keyframes fx-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 「我想要 iPhone 版」（assets/ios-wish.js）：首屏按鈕列下面一小行 */
.ios-wish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.ios-wish[hidden] { display: none; }
.ios-btn { font: inherit; font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 1.5px solid var(--primary); border-radius: 999px; padding: 6px 16px; min-height: 40px; cursor: pointer; transition: transform .15s; }
.ios-btn:hover { transform: translateY(-1px); }
.ios-btn:disabled { cursor: default; transform: none; }
.ios-btn .w-done, .ios-wish.is-done .ios-btn .w-ask { display: none; }
.ios-wish.is-done .ios-btn .w-done { display: inline; }
.ios-wish.is-done .ios-btn { background: var(--primary); color: var(--primary-ink); }
.ios-count { display: none; }
.ios-wish.has-count .ios-count { display: inline; }
.ios-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .ios-wish.is-done .ios-btn { animation: fx-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
}

/* 截圖橫向捲動區可以用鍵盤捲（build.js 加 tabindex，2026-10-28）：焦點外框 */
.shots:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
/* 色帶區的英文小標（FEATURES 等）：主色放在 --band 上對比不到 4.5（花語小園 4.08、印帳 4.48），改用深一階（深色款是亮一階） */
body[class*="theme-"] .band .section-head .count { color: var(--primary-hover); }

/* 活頁筆記：紙張米色＋赤陶紅（取自 App 本身） */
body.theme-tabnote {
  --bg: #F8F1EA; --band: #F0E7DC; --surface: #FDF9F3; --ink: #38312A; --ink-2: #4F463D; --muted: #6B6157;
  --line: #E5DACB; --line-2: #E5DACB; --line-strong: #BFAF9B;
  --primary: #A5513A; --primary-hover: #8A412D; --primary-ink: #ffffff; --primary-soft: #F3DED5;
  --dark: #38312A; --dark-line: #4F463D;
  --app-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-tabnote { --bg: #2A241E; --band: #302A23; --surface: #342D26; --ink: #F4EBDD; --ink-2: #D8CBB8; --muted: #B9AC99; --line: #4A4036; --line-2: #4A4036; --line-strong: #6A5D4F; --primary: #E58A6F; --primary-hover: #F0A58F; --primary-ink: #2A241E; --primary-soft: #3B332B; --dark: #1F1A15; }
}
:root[data-theme="dark"] body.theme-tabnote { --bg: #2A241E; --band: #302A23; --surface: #342D26; --ink: #F4EBDD; --ink-2: #D8CBB8; --muted: #B9AC99; --line: #4A4036; --line-2: #4A4036; --line-strong: #6A5D4F; --primary: #E58A6F; --primary-hover: #F0A58F; --primary-ink: #2A241E; --primary-soft: #3B332B; --dark: #1F1A15; }

/* 環球夜市大富翁：App 自己的「熱鬧版」（2026-10-28 使用者：官網跟招募頁都要有自己 App 的風格；照 NightMarketTycoon/docs/design/style-v2.html）
   夕陽夜市插畫首屏、白底粗可可色邊的貼紙卡、糖果按鈕、貼紙標籤；App 固定亮色，這頁也固定亮色。 */
body.theme-nightmarket { --nm-cocoa: #4A2C1A; --nm-sun: #FFC93C; --nm-tomato: #C93A22; --nm-mint: #2EC4B6; --app-radius: 20px;
  --dark: #4A2C1A; --dark-ink: #FFF6E5; --dark-2: #FFE9C7; --dark-muted: #F0DCC3; --dark-line: #7A4E33;
  background: radial-gradient(circle at 10% 30%, #FFE3B8 0 160px, transparent 161px), radial-gradient(circle at 95% 70%, #FFE9C7 0 140px, transparent 141px), var(--bg); color-scheme: light; }
:root[data-theme="dark"] body.theme-nightmarket, :root:not([data-theme="light"]) body.theme-nightmarket { --bg: #FFF6E5; --band: #FFE9C7; --surface: #FFFFFF; --ink: #4A2C1A; --ink-2: #63402A; --muted: #7A4E33;
  --line: #E3CDB0; --line-2: #E3CDB0; --line-strong: #C9AE8E; --primary: #C93A22; --primary-hover: #A02C18; --primary-ink: #ffffff; --primary-soft: #FFF1EC; }
body.theme-nightmarket .app-hero { position: relative; margin-top: 16px; padding: 28px; border: 3px solid var(--nm-cocoa); border-radius: 28px; box-shadow: 7px 8px 0 var(--nm-cocoa);
  background: url(apps/nightmarket/hero.jpg) center 30% / cover, #F08A4B; }
body.theme-nightmarket .app-hero-info { background: rgba(255, 255, 255, .95); border: 3px solid var(--nm-cocoa); border-radius: 22px; box-shadow: 5px 6px 0 var(--nm-cocoa); padding: 22px; }
body.theme-nightmarket .app-hero h1, body.theme-nightmarket .detail-head h1 { color: var(--nm-tomato); text-shadow: 0 3px 0 #FFD9B8; }
body.theme-nightmarket .app-icon { border: 3px solid var(--nm-cocoa); box-shadow: 3px 4px 0 var(--nm-cocoa); }
body.theme-nightmarket .phone { border: 6px solid var(--nm-cocoa); box-shadow: 7px 9px 0 var(--nm-cocoa); }
body.theme-nightmarket .tag { border: 2.5px solid var(--nm-cocoa); border-radius: 999px; background: #fff; color: var(--nm-cocoa); font-weight: 700; box-shadow: 2px 3px 0 var(--nm-cocoa); }
body.theme-nightmarket .tag.genre { background: var(--nm-sun); transform: rotate(-2deg); }
body.theme-nightmarket .tag.status-testing { background: #BFEFEA; }
body.theme-nightmarket .tag.badge { background: var(--nm-tomato); color: #fff; }
body.theme-nightmarket .btn { border: 3px solid var(--nm-cocoa); border-radius: 18px; box-shadow: 0 6px 0 var(--nm-cocoa); font-weight: 700; position: relative; overflow: hidden; transition: transform .08s, box-shadow .08s; }
body.theme-nightmarket .btn::before { content: ""; position: absolute; left: 12px; right: 12px; top: 5px; height: 7px; border-radius: 8px; background: rgba(255, 255, 255, .45); pointer-events: none; }
body.theme-nightmarket .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--nm-cocoa); }
body.theme-nightmarket .btn.ghost, body.theme-nightmarket .btn.light { background: #fff; color: var(--nm-cocoa); border-color: var(--nm-cocoa); }
body.theme-nightmarket .btn.ghost:hover, body.theme-nightmarket .btn.light:hover { background: var(--nm-sun); color: var(--nm-cocoa); }
body.theme-nightmarket .btn.outline-light { color: var(--dark-ink); border-color: var(--dark-ink); box-shadow: 0 6px 0 #2A170C; }
body.theme-nightmarket .section-head h2 { display: inline-block; padding: 4px 18px 6px; background: var(--nm-sun); color: var(--nm-cocoa); border: 3px solid var(--nm-cocoa); border-radius: 16px;
  box-shadow: 3px 4px 0 var(--nm-cocoa); transform: rotate(-1.5deg); letter-spacing: 1px; }
body.theme-nightmarket .section-head .count { color: var(--nm-tomato); font-weight: 700; }
body.theme-nightmarket .feature-grid li, body.theme-nightmarket .faq details, body.theme-nightmarket .notice, body.theme-nightmarket .lucky-notice, body.theme-nightmarket .ios-wish, body.theme-nightmarket .lucky-stat {
  background: #fff; border: 3px solid var(--nm-cocoa); border-radius: 20px; box-shadow: 5px 6px 0 var(--nm-cocoa); }
body.theme-nightmarket .feature-grid li > span:first-child { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1;
  color: #fff; background: var(--nm-tomato); border: 2.5px solid var(--nm-cocoa); }
body.theme-nightmarket .feature-grid.upcoming li { border-style: dashed; box-shadow: none; background: rgba(255, 255, 255, .6); }
body.theme-nightmarket .block.band { background: linear-gradient(#FFE9C7, #FFE9C7) padding-box; border-block: 3px solid var(--nm-cocoa); }
body.theme-nightmarket .dark-band { background: var(--nm-cocoa) url(apps/nightmarket/hero.jpg) center 70% / cover; background-blend-mode: multiply; }
body.theme-nightmarket .shots img { border: 3px solid var(--nm-cocoa); border-radius: 18px; box-shadow: 4px 5px 0 var(--nm-cocoa); }
@media (max-width: 640px) { body.theme-nightmarket .app-hero { padding: 120px 14px 14px; gap: 24px; } }
@media (prefers-reduced-motion: reduce) { body.theme-nightmarket .btn { transition: none; } }

/* 活頁筆記專屬設計「活頁本」（2026-10-28，使用者選 A）：頁面是一本活頁筆記——左邊彩色分頁標籤、區塊標題前有小標籤、功能是一頁一頁的分頁。分頁色取自 App：#8FA3B8 #D4857A #9DB08A #D9BE85 */
body.theme-tabnote { --t1: #8FA3B8; --t2: #D4857A; --t3: #9DB08A; --t4: #D9BE85; }
body.theme-tabnote .fx-canvas { display: none; }
body.theme-tabnote .app-hero-info { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px 30px 64px; box-shadow: 0 8px 28px rgba(56, 49, 42, .10); }
body.theme-tabnote .app-hero-info::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 36px; background: var(--band); border-right: 1px dashed var(--line-strong); border-radius: 18px 0 0 18px; }
body.theme-tabnote .app-hero-info::after { content: ""; position: absolute; left: 0; top: 36px; width: 36px; height: 220px;
  background:
    linear-gradient(var(--t1), var(--t1)) 0 0 / 32px 38px no-repeat,
    linear-gradient(var(--t2), var(--t2)) 0 50px / 26px 38px no-repeat,
    linear-gradient(var(--t3), var(--t3)) 0 100px / 26px 38px no-repeat,
    linear-gradient(var(--t4), var(--t4)) 0 150px / 26px 38px no-repeat; }
body.theme-tabnote .app-hero .tagline { background-image: repeating-linear-gradient(transparent, transparent 33px, var(--line) 33px, var(--line) 34px); line-height: 34px; }
body.theme-tabnote .section-head { padding-bottom: 8px; border-bottom: 1px dashed var(--line-strong); }
body.theme-tabnote .section-head h2 { display: flex; align-items: center; gap: 12px; }
body.theme-tabnote .section-head h2::before { content: ""; flex: none; width: 12px; height: 28px; border-radius: 4px 0 0 4px; background: var(--t1); }
body.theme-tabnote .block:nth-of-type(4n+2) .section-head h2::before { background: var(--t2); }
body.theme-tabnote .block:nth-of-type(4n+3) .section-head h2::before { background: var(--t3); }
body.theme-tabnote .block:nth-of-type(4n+4) .section-head h2::before { background: var(--t4); }
body.theme-tabnote .feature-grid li { position: relative; border-radius: 10px; border-left: 8px solid var(--t1); }
body.theme-tabnote .feature-grid li:nth-child(4n+2) { border-left-color: var(--t2); }
body.theme-tabnote .feature-grid li:nth-child(4n+3) { border-left-color: var(--t3); }
body.theme-tabnote .feature-grid li:nth-child(4n+4) { border-left-color: var(--t4); }
body.theme-tabnote .feature-grid li > span:first-child { width: 30px; height: 30px; border-radius: 50%; background: var(--band); text-align: center; line-height: 30px; font-size: 15px; }
body.theme-tabnote .notice { background: #F6EBCF; color: #38312A; border: 1px solid #E5D3A6; border-radius: 4px; transform: rotate(-.5deg); box-shadow: 0 2px 6px rgba(56, 49, 42, .12); }
body.theme-tabnote .shots img { border-radius: 12px; border: 1px solid var(--line); }
@media (max-width: 640px) {
  body.theme-tabnote .app-hero-info { padding: 24px 18px 24px 46px; }
  body.theme-tabnote .app-hero-info::before { width: 26px; }
  body.theme-tabnote .app-hero-info::after { width: 26px; background-size: 24px 34px, 20px 34px, 20px 34px, 20px 34px; background-position: 0 0, 0 44px, 0 88px, 0 132px; }
}
body.theme-nightmarket .lucky-stat span { opacity: 1; color: #7A4E33; }

/* 今日懸案：警局公告欄（2026-10-31 使用者選 B，和招募頁 DailyCase/admin-web/join 同一套）：軟木板底、藍色圖釘、白紙告示、黃色便條、紅色線索線，字型霞鶩文楷（build.js 會加字型連結）。
   固定亮色：深色模式也維持軟木板（紙張本來就是亮的）。 */
body.theme-dailycase, :root[data-theme="dark"] body.theme-dailycase, :root:not([data-theme="light"]) body.theme-dailycase {
  --bg: #B88B5A; --band: #A57A4B; --surface: #FBF7EE; --ink: #2A2420; --ink-2: #3E342C; --muted: #574B41;
  --line: #E2D7C2; --line-2: #E2D7C2; --line-strong: #B9A88C;
  --primary: #A8322A; --primary-hover: #87261F; --primary-ink: #ffffff; --primary-soft: #F6E3DF;
  --dark: #2A2420; --dark-line: #574B41; --app-radius: 2px;
  --dc-pin: #2E5C8A; --dc-pin-dark: #1F3F60; --dc-note: #F6E39A; --dc-thread: #B3362B;
  color-scheme: light;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 20% 30%, rgba(80, 50, 20, .18) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255, 235, 200, .16) 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(80, 50, 20, .14) 1.5px, transparent 2.5px);
  background-size: 23px 19px, 31px 27px, 41px 37px;
}
body.theme-dailycase h1, body.theme-dailycase h2, body.theme-dailycase h3, body.theme-dailycase summary, body.theme-dailycase .tag { font-family: "LXGW WenKai TC", "Noto Serif TC", serif; }
/* 首屏：釘在板上的告示 */
body.theme-dailycase .app-hero-info { position: relative; background: var(--surface); color: var(--ink); border-radius: 2px; padding: 26px 22px 22px;
  transform: rotate(-.8deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 10px 22px rgba(50, 30, 10, .3); }
body.theme-dailycase .app-hero-info::before, body.theme-dailycase .feature-grid li::before, body.theme-dailycase .faq details::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6E9BCB 0 25%, var(--dc-pin) 45%, var(--dc-pin-dark) 100%); box-shadow: 0 3px 3px rgba(0, 0, 0, .35); }
body.theme-dailycase .app-hero h1 { letter-spacing: .04em; }
body.theme-dailycase .app-icon { border-radius: 14px; box-shadow: 0 4px 10px rgba(30, 15, 5, .35); }
body.theme-dailycase .phone { border: 8px solid #fff; border-radius: 4px; box-shadow: 0 8px 18px rgba(30, 15, 5, .4); transform: rotate(1.5deg); }
/* 小標：貼在板上的黑色標籤條 */
body.theme-dailycase .section-head h2 { display: inline-block; background: var(--ink); color: var(--surface); padding: 4px 16px 6px; transform: rotate(-1deg); box-shadow: 0 4px 10px rgba(30, 15, 5, .35); }
body.theme-dailycase .section-head .count, body.theme-dailycase .section-head p { color: #1E1915; background: rgba(251, 247, 238, .85); padding: 0 6px; }
/* 功能：一張張釘上去的索引卡 */
body.theme-dailycase .feature-grid li { position: relative; background: var(--surface); border: 0; border-radius: 2px; box-shadow: 0 6px 14px rgba(30, 15, 5, .28); }
body.theme-dailycase .feature-grid li:nth-child(odd) { transform: rotate(-1deg); } body.theme-dailycase .feature-grid li:nth-child(even) { transform: rotate(.8deg); }
body.theme-dailycase .feature-grid li > span:first-child { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--dc-thread); color: #fff; font-size: 14px; line-height: 1; }
/* 常見問題、提醒：白紙與黃色便條 */
body.theme-dailycase .faq details { position: relative; background: var(--surface); border: 0; border-radius: 2px; box-shadow: 0 4px 12px rgba(30, 15, 5, .25); }
body.theme-dailycase .notice, body.theme-dailycase .ios-wish { background: var(--dc-note); color: var(--ink); border: 0; border-radius: 2px; transform: rotate(.6deg); box-shadow: 0 6px 14px rgba(30, 15, 5, .28); }
/* 截圖：拍立得 */
body.theme-dailycase .shots img { border: 8px solid #fff; border-bottom-width: 22px; border-radius: 2px; box-shadow: 0 6px 14px rgba(30, 15, 5, .35); }
body.theme-dailycase .shots li:nth-child(odd) img, body.theme-dailycase .shots > :nth-child(odd) img { transform: rotate(-1.2deg); }
body.theme-dailycase .shots li:nth-child(even) img, body.theme-dailycase .shots > :nth-child(even) img { transform: rotate(1deg); }
body.theme-dailycase .block.band { background: rgba(60, 35, 12, .18); }
body.theme-dailycase .dark-band { background: #2A2420; }
body.theme-dailycase .btn { border-radius: 2px; letter-spacing: .06em; }
body.theme-dailycase .tag { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
body.theme-dailycase .tag.badge { background: var(--dc-thread); color: #fff; border-color: var(--dc-thread); }
@media (prefers-reduced-motion: reduce) { body.theme-dailycase .app-hero-info, body.theme-dailycase .feature-grid li, body.theme-dailycase .phone, body.theme-dailycase .notice, body.theme-dailycase .shots img { transform: none; } }

/* 麻將接龍：老街地圖（2026-11-08 使用者選 B，和招募頁 MahjongTiles/admin-web/join 同一套）：綠桌布底、胡桃木框、象牙麻將牌當卡片，
   老街建築（App 首頁的 map_*.png）放在首屏與小標旁。固定深綠（App 本身就是綠桌布）。 */
body.theme-mahjongtiles, :root[data-theme="dark"] body.theme-mahjongtiles, :root:not([data-theme="light"]) body.theme-mahjongtiles, :root[data-theme="light"] body.theme-mahjongtiles {
  --bg: #1F5A3C; --band: #1A4F34; --surface: #16402B; --ink: #F6EEDC; --ink-2: #EADFC6; --muted: #CFE0D4;
  --line: #3B8460; --line-2: #3B8460; --line-strong: #C08A2C;
  --primary: #B3341F; --primary-hover: #92281A; --primary-ink: #FFF6E8; --primary-soft: #4A1C14;
  --dark: #0F2E1F; --dark-line: #3B8460; --app-radius: 12px;
  --mj-ivory: #FBF4E4; --mj-ivory-ink: #3A2A14; --mj-tile-edge: #C7B48E; --mj-back: #2E8B5E; --mj-wood: #7A4A24; --mj-gold: #F2C766;
  color-scheme: dark;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 5px);
}
body.theme-mahjongtiles h1, body.theme-mahjongtiles h2, body.theme-mahjongtiles h3 { color: var(--mj-gold); letter-spacing: .04em; }
/* 首屏：胡桃木框的牌桌，右下角站一座廟 */
body.theme-mahjongtiles .app-hero-info { position: relative; background: var(--surface); border: 8px solid var(--mj-wood); outline: 2px solid #2A160A;
  box-shadow: inset 0 0 0 2px #A9703F, 0 6px 0 #2A160A; border-radius: 16px; padding: 24px 22px 22px; }
body.theme-mahjongtiles .app-hero-info::after { content: ""; position: absolute; right: 14px; top: 14px; width: 84px; height: 88px;
  background: url("apps/mahjongtiles/map_temple.png") center bottom / contain no-repeat; opacity: .9; pointer-events: none; }
body.theme-mahjongtiles .app-icon { border-radius: 16px; box-shadow: 0 5px 0 var(--mj-back), 0 6px 0 #1C6644; }
body.theme-mahjongtiles .phone { border: 6px solid var(--mj-wood); border-radius: 18px; box-shadow: 0 6px 0 #2A160A; }
/* 小標：象牙麻將牌樣的名牌 */
body.theme-mahjongtiles .section-head h2 { display: inline-block; background: var(--mj-ivory); color: #7A2A1C; padding: 4px 16px 6px; border: 1px solid var(--mj-tile-edge);
  border-radius: 8px; box-shadow: 0 4px 0 var(--mj-back), 0 5px 0 #1C6644; }
body.theme-mahjongtiles .section-head .count, body.theme-mahjongtiles .section-head p { color: var(--muted); }
/* 功能：一張張象牙牌，底下露出綠色牌背 */
body.theme-mahjongtiles .feature-grid li { background: var(--mj-ivory); color: var(--mj-ivory-ink); border: 1px solid var(--mj-tile-edge); border-radius: 10px;
  box-shadow: 0 5px 0 var(--mj-back), 0 6px 0 #1C6644; }
body.theme-mahjongtiles .feature-grid li > span:first-child { width: 28px; height: 36px; border-radius: 6px; display: grid; place-items: center;
  background: #fff; color: #9E2A1A; border: 1px solid var(--mj-tile-edge); font-weight: 700; line-height: 1; }
/* 常見問題、提醒：深綠漆盤＋金邊 */
body.theme-mahjongtiles .faq details { background: var(--surface); border: 1px solid #C08A2C; border-radius: 12px; }
body.theme-mahjongtiles .notice, body.theme-mahjongtiles .ios-wish { background: #4A1C14; color: #FFF6E8; border: 2px solid var(--mj-gold); border-radius: 12px; }
/* 截圖：胡桃木相框 */
body.theme-mahjongtiles .shots img { border: 6px solid var(--mj-wood); border-radius: 12px; box-shadow: 0 5px 0 #2A160A; }
body.theme-mahjongtiles .block.band { background: rgba(0, 0, 0, .14); }
body.theme-mahjongtiles .dark-band { background: #0F2E1F; }
body.theme-mahjongtiles .btn { border-radius: 12px; border: 2px solid var(--mj-gold); box-shadow: 0 4px 0 #5E1A0E; }
body.theme-mahjongtiles .tag { background: var(--mj-ivory); color: #7A2A1C; border: 1px solid var(--mj-tile-edge); }
body.theme-mahjongtiles a:not(.btn) { color: #FFE08A; }
@media (max-width: 640px) { body.theme-mahjongtiles .app-hero-info::after { width: 58px; height: 60px; } }
body.theme-mahjongtiles h1, body.theme-mahjongtiles h2, body.theme-mahjongtiles h3, body.theme-mahjongtiles summary, body.theme-mahjongtiles .tag { font-family: "LXGW WenKai TC", "Noto Serif TC", serif; }
body.theme-mahjongtiles .ios-wish { padding: 10px 14px; }
body.theme-mahjongtiles .ios-wish button, body.theme-mahjongtiles .ios-wish .btn { background: var(--mj-ivory); color: #7A2A1C; border: 1px solid var(--mj-tile-edge); box-shadow: 0 3px 0 var(--mj-back); }

/* 夜市合合樂：今日主題圓盤（2026-11-08 使用者選 C，和招募頁 MergeMarket/admin-web/join 同一套）：米白紙張、三角旗、紙膠帶、
   細墨線＋錯位陰影的紙卡；首屏右上角是 App 首頁的圓盤（中間「開市」大獎），功能清單前面是 1～9 號粉彩方塊。夜晚模式是深藏青＋暖燕麥。 */
body.theme-mergemarket {
  --bg: #F6F0E6; --band: #F1E8DA; --surface: #FFFBF5; --ink: #3D3530; --ink-2: #4A3F38; --muted: #5F534A;
  --line: #E3D7C5; --line-2: #D9CBB6; --line-strong: #4A3F38;
  --primary: #A85C63; --primary-hover: #8C4A51; --primary-ink: #FFFBF5; --primary-soft: #F3E1E0;
  --dark: #2E3550; --dark-line: #4A5370; --app-radius: 18px;
  --mm-gold: #E6C477; --mm-shadow: rgba(74, 63, 56, .22); --mm-tape: rgba(214, 150, 160, .55);
  --mm-t1: #F4E7D6; --mm-t2: #EBD4C8; --mm-t3: #DCE5D3; --mm-t4: #D7DFEA; --mm-t5: #ECD8DE;
  color-scheme: light;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(120, 95, 70, .06) 1px, transparent 1.2px);
  background-size: 7px 7px;
}
:root[data-theme="dark"] body.theme-mergemarket {
  --bg: #1E2433; --band: #222839; --surface: #283043; --ink: #F4EDE2; --ink-2: #E6DED2; --muted: #CFC7BB;
  --line: #3C4559; --line-2: #4A5370; --line-strong: #12161F;
  --primary: #E2A9A4; --primary-hover: #EDBDB8; --primary-ink: #1E2433; --primary-soft: #4A3A44;
  --dark: #161B27; --mm-gold: #C9A764; --mm-shadow: rgba(0, 0, 0, .35);
  --mm-t1: #4A4A55; --mm-t2: #54454B; --mm-t3: #3F4D47; --mm-t4: #3C4659; --mm-t5: #51434F;
  color-scheme: dark; background-image: radial-gradient(rgba(240, 212, 154, .05) 1px, transparent 1.2px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-mergemarket {
    --bg: #1E2433; --band: #222839; --surface: #283043; --ink: #F4EDE2; --ink-2: #E6DED2; --muted: #CFC7BB;
    --line: #3C4559; --line-2: #4A5370; --line-strong: #12161F;
    --primary: #E2A9A4; --primary-hover: #EDBDB8; --primary-ink: #1E2433; --primary-soft: #4A3A44;
    --dark: #161B27; --mm-gold: #C9A764; --mm-shadow: rgba(0, 0, 0, .35);
    --mm-t1: #4A4A55; --mm-t2: #54454B; --mm-t3: #3F4D47; --mm-t4: #3C4659; --mm-t5: #51434F;
    color-scheme: dark; background-image: radial-gradient(rgba(240, 212, 154, .05) 1px, transparent 1.2px);
  }
}
body.theme-mergemarket h1, body.theme-mergemarket h2, body.theme-mergemarket h3, body.theme-mergemarket summary,
body.theme-mergemarket .btn, body.theme-mergemarket .tag { font-family: "Huninn", "Noto Sans TC", sans-serif; }
body.theme-mergemarket h1 { color: var(--primary); letter-spacing: .05em; }
/* 首屏：紙卡，頂端一串三角旗，右上角是今日主題圓盤 */
body.theme-mergemarket .app-hero-info { position: relative; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 24px;
  padding: 44px 22px 22px; box-shadow: 4px 4px 0 var(--mm-shadow); }
body.theme-mergemarket .app-hero-info::before { content: ""; position: absolute; left: 16px; right: 16px; top: 12px; height: 18px;
  border-top: 1px solid var(--muted); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='20'%3E%3Cpath d='M3 0h22L14 18z' fill='%239DB3A0'/%3E%3Cpath d='M31 0h22L42 18z' fill='%23E1C27E'/%3E%3Cpath d='M59 0h22L70 18z' fill='%239FB6CF'/%3E%3Cpath d='M87 0h22L98 18z' fill='%23D9A3AB'/%3E%3C/svg%3E") 0 0 / 112px 20px repeat-x; }
body.theme-mergemarket .app-hero-info::after { content: ""; position: absolute; right: 16px; top: 42px; width: 88px; height: 88px; border-radius: 50%;
  background: url("apps/mergemarket/dial-9.png") center 40% / 72% no-repeat, var(--mm-gold);
  border: 1.5px solid var(--line-strong); box-shadow: 0 0 0 7px var(--surface), 0 0 0 8.5px var(--line-2), 0 6px 0 8px var(--line); pointer-events: none;
  animation: mm-pulse 2.6s ease-in-out infinite; }
@keyframes mm-pulse { 50% { transform: scale(1.04); } }
body.theme-mergemarket .app-icon { border-radius: 22%; border: 1.5px solid var(--line-strong); box-shadow: 3px 3px 0 var(--mm-shadow); }
body.theme-mergemarket .phone { border: 1.5px solid var(--line-strong); border-radius: 22px; box-shadow: 5px 5px 0 var(--mm-shadow); }
/* 小標：粉色紙膠帶貼在左上 */
body.theme-mergemarket .section-head h2 { position: relative; display: inline-block; padding: 2px 6px; }
body.theme-mergemarket .section-head h2::before { content: ""; position: absolute; left: -10px; top: -6px; width: 56px; height: 16px;
  background: var(--mm-tape); transform: rotate(-6deg); z-index: -1; }
/* 功能：一張張紙卡，前面是粉彩數字方塊（像盤面上的方塊） */
body.theme-mergemarket .feature-grid li { background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 16px; box-shadow: 3px 3px 0 var(--mm-shadow); }
body.theme-mergemarket .feature-grid li > span:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--mm-t1); color: var(--ink); border: 1.5px solid var(--line-strong); font-weight: 700; line-height: 1; }
body.theme-mergemarket .feature-grid li:nth-child(5n+2) > span:first-child { background: var(--mm-t2); }
body.theme-mergemarket .feature-grid li:nth-child(5n+3) > span:first-child { background: var(--mm-t3); }
body.theme-mergemarket .feature-grid li:nth-child(5n+4) > span:first-child { background: var(--mm-t4); }
body.theme-mergemarket .feature-grid li:nth-child(5n+5) > span:first-child { background: var(--mm-t5); }
/* 常見問題、提醒 */
body.theme-mergemarket .faq details { background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 14px; }
body.theme-mergemarket .notice, body.theme-mergemarket .ios-wish { position: relative; background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: 14px; box-shadow: 4px 4px 0 var(--line-2); }
body.theme-mergemarket .notice::before { content: ""; position: absolute; top: -10px; left: calc(50% - 38px); width: 76px; height: 18px;
  background: var(--mm-tape); transform: rotate(-3deg); }
body.theme-mergemarket .shots img { border: 1.5px solid var(--line-strong); border-radius: 18px; box-shadow: 4px 4px 0 var(--mm-shadow); }
body.theme-mergemarket .block.band { background: color-mix(in srgb, var(--band) 80%, transparent); }
body.theme-mergemarket .btn { border-radius: 999px; border: 1.5px solid var(--line-strong); box-shadow: 0 4px 0 var(--line-strong); }
body.theme-mergemarket .tag { border-radius: 999px; background: var(--primary-soft); color: var(--ink); border: 1px solid var(--line-2); }
@media (max-width: 640px) { body.theme-mergemarket .app-hero-info::after { width: 60px; height: 60px; top: 40px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { body.theme-mergemarket .app-hero-info::after { animation: none; } }