/* ============================================================
   字在（slug＝zizai）v2 風格覆寫 — 年齡層：kids（accent＝朱砂）
   自訂屬性→權杖對應簡表：
   ・--tp-bg-subtle → var(--tp-bg-deep)（頁面自訂淺底，原 #F6EFE3）
   ・--tpz-cell-border → var(--tp-text-soft)（字格外框）
   ・--tpz-grid → var(--tp-line)（米字輔助線）
   其餘 v1 變數與 v2 primitives 同值，元件改指語意層，
   深色交由 tokens 兩個觸發自動切換，本檔僅補 body 底紋。
   ============================================================ */

/* ---------- 自訂屬性整批指向 v2 權杖 ---------- */
html[data-tp-theme="v2"]:root {
  --tp-bg-subtle: var(--tp-bg-deep);
  --tpz-cell-border: var(--tp-text-soft);
  --tpz-grid: var(--tp-line);
}

/* ---------- 全頁基底（v1 寫死 --tp-ink／--tp-paper，深色不會動） ---------- */
html[data-tp-theme="v2"] body {
  background-color: var(--tp-bg);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] h3,
html[data-tp-theme="v2"] h4 {
  color: var(--tp-text);
}
html[data-tp-theme="v2"] a { color: var(--tp-info); }
html[data-tp-theme="v2"] a:hover { color: var(--tp-accent-text); }
html[data-tp-theme="v2"] .tp-caption { color: var(--tp-text-soft); }

/* ---------- 頁首與品牌 ---------- */
html[data-tp-theme="v2"] .tp-app-header {
  background: var(--tp-surface);
  border-bottom-color: var(--tp-line);
  box-shadow: var(--tp-shadow-1);
}
html[data-tp-theme="v2"] .tp-brand-logo {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  box-shadow: var(--tp-shadow-1);
}
html[data-tp-theme="v2"] .tp-brand-title { color: var(--tp-text); }
html[data-tp-theme="v2"] .tp-brand-sub { color: var(--tp-text-soft); }

/* ---------- 分頁導航膠囊 ---------- */
html[data-tp-theme="v2"] .tp-nav-tabs { background: var(--tp-bg-deep); }
html[data-tp-theme="v2"] .tp-nav-btn {
  color: var(--tp-text-soft);
  border-radius: var(--tp-radius-chip);
}
html[data-tp-theme="v2"] .tp-nav-btn.on {
  background: var(--tp-surface);
  color: var(--tp-text);
  box-shadow: var(--tp-shadow-1);
}

/* ---------- 按鈕：主操作鈕統一走 accent ---------- */
html[data-tp-theme="v2"] .tp-btn { border-radius: var(--tp-radius-ctl); }
html[data-tp-theme="v2"] .tp-btn--primary {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  box-shadow: var(--tp-shadow-1);
}
html[data-tp-theme="v2"] .tp-btn--primary:hover:not([disabled]) {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  box-shadow: var(--tp-shadow-2);
}
html[data-tp-theme="v2"] .tp-btn--secondary {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line-strong);
}
html[data-tp-theme="v2"] .tp-btn--secondary:hover:not([disabled]) {
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-text);
}
html[data-tp-theme="v2"] .tp-btn:focus-visible { outline-color: var(--tp-focus-ring); }

/* ---------- 進度總覽與統計卡 ---------- */
html[data-tp-theme="v2"] .tp-hero-banner {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-card-shadow);
}
html[data-tp-theme="v2"] .tp-stat-item {
  background: var(--tp-bg);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
}
html[data-tp-theme="v2"] .tp-stat-num { color: var(--tp-accent-text); }
/* 行內寫死的統計數字色：依語意指回權杖（深色才保對比） */
html[data-tp-theme="v2"] [id^="stat-lesson"] { color: var(--tp-warning) !important; }
html[data-tp-theme="v2"] [id^="stat-taught"] { color: var(--tp-text) !important; }
html[data-tp-theme="v2"] [id^="stat-current"] { color: var(--tp-accent-text) !important; }
html[data-tp-theme="v2"] [id^="stat-mastered"] { color: var(--tp-success) !important; }
html[data-tp-theme="v2"] [id^="stat-unfamiliar"] { color: var(--tp-error) !important; }

/* ---------- 篩選膠囊：選取態跟 accent ---------- */
html[data-tp-theme="v2"] .tp-filter-chip {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  color: var(--tp-text-soft);
  border-radius: var(--tp-radius-chip);
}
html[data-tp-theme="v2"] .tp-filter-chip.is-active {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/* ---------- 生字卡網格 ---------- */
html[data-tp-theme="v2"] .tp-char-card {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
}
html[data-tp-theme="v2"] .tp-char-card:hover {
  border-color: var(--tp-warning);
  box-shadow: var(--tp-card-shadow-hover);
}
html[data-tp-theme="v2"] .tp-char-card--current {
  border-color: var(--tp-warning);
  background: var(--tp-surface-2);
}
html[data-tp-theme="v2"] .tp-char-card--mastered {
  border-color: var(--tp-success);
  background: var(--tp-success-soft);
}
html[data-tp-theme="v2"] .tp-char-card__meta { color: var(--tp-text-soft); }
html[data-tp-theme="v2"] .tp-btn-star { color: var(--tp-text-faint); }
html[data-tp-theme="v2"] .tp-btn-star.is-active {
  color: var(--tp-success);
  background: var(--tp-success-soft);
}

/* ---------- 生字詳情彈窗 ---------- */
html[data-tp-theme="v2"] .tp-modal__content {
  background: var(--tp-surface);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-shadow-pop);
}
html[data-tp-theme="v2"] .tp-modal__close {
  background: var(--tp-bg-deep);
  color: var(--tp-text);
}

/* ---------- 設定面板與表單 ---------- */
html[data-tp-theme="v2"] .tp-panel {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-card-shadow);
}
html[data-tp-theme="v2"] .tp-panel__section { border-top-color: var(--tp-line); }
html[data-tp-theme="v2"] .tp-field__label { color: var(--tp-text); }
html[data-tp-theme="v2"] .tp-field__hint { color: var(--tp-text-faint); }
html[data-tp-theme="v2"] .tp-input,
html[data-tp-theme="v2"] .tp-select {
  background-color: var(--tp-surface);
  border-color: var(--tp-line);
  color: var(--tp-text);
  border-radius: var(--tp-radius-ctl);
  caret-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tp-input:focus,
html[data-tp-theme="v2"] .tp-select:focus {
  border-color: var(--tp-accent-strong);
  outline-color: var(--tp-focus-ring);
  box-shadow: 0 0 0 3px var(--tp-focus-ring-soft);
}
html[data-tp-theme="v2"] .tp-input::placeholder { color: var(--tp-text-faint); }

/* ---------- 開關：啟用態跟 accent ---------- */
html[data-tp-theme="v2"] .tp-switch__track {
  background: var(--tp-bg-deep);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .tp-switch__thumb {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  box-shadow: var(--tp-shadow-1);
}
html[data-tp-theme="v2"] .tp-switch input:checked ~ .tp-switch__track {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tp-switch input:checked ~ .tp-switch__track .tp-switch__thumb {
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tp-switch input:focus-visible ~ .tp-switch__track {
  outline-color: var(--tp-focus-ring);
}
html[data-tp-theme="v2"] .tp-switch__text { color: var(--tp-text); }

/* ---------- 徽章：科目色僅作識別 ---------- */
html[data-tp-theme="v2"] .tp-badge {
  background: var(--tp-bg-deep);
  color: var(--tp-text-soft);
  border-radius: var(--tp-radius-badge);
}
html[data-tp-theme="v2"] .tp-badge--blue {
  background: var(--tp-subject-math-soft);
  color: var(--tp-info);
}
html[data-tp-theme="v2"] .tp-badge--green {
  background: var(--tp-success-soft);
  color: var(--tp-success);
}

/* ---------- 試卷預覽桌面（卷面本身是列印樣式，不動） ---------- */
html[data-tp-theme="v2"] .tp-sheet-viewer {
  background: var(--tp-bg-deep);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
}
html[data-tp-theme="v2"] .tp-sheet-viewer .tp-sheet {
  box-shadow: var(--tp-shadow-3);
  outline-color: var(--tp-line);
}

/* ---------- 注音字格（zhuyin.css 寫死色改指語意層） ---------- */
html[data-tp-theme="v2"] .tpz-cell {
  background: var(--tp-surface);
  border-color: var(--tpz-cell-border);
}
html[data-tp-theme="v2"] .tpz-cell__char {
  color: var(--tp-text);
  font-family: var(--tp-font-kai);
}
html[data-tp-theme="v2"] .tpz-cell--current {
  --tpz-cell-border: var(--tp-warning);
  box-shadow: 0 0 0 2px var(--tp-focus-ring-soft);
}
html[data-tp-theme="v2"] .tpz-cell--current .tpz-cell__char { color: var(--tp-accent-text); }
html[data-tp-theme="v2"] .tpz-cell--upcoming {
  --tpz-cell-border: var(--tp-line);
  background: var(--tp-bg-deep);
}
html[data-tp-theme="v2"] .tpz-cell--upcoming .tpz-cell__char { color: var(--tp-text-faint); }
html[data-tp-theme="v2"] .tpz-cell--blank {
  --tpz-cell-border: var(--tp-text-faint);
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .tpz-cell--blank .tpz-cell__char { color: var(--tp-line); }
html[data-tp-theme="v2"] .tpz-cell--answer {
  --tpz-cell-border: var(--tp-line);
  background: var(--tp-surface-2);
}
html[data-tp-theme="v2"] .tpz-cell--answer .tpz-cell__char { color: var(--tp-accent-text) !important; }
html[data-tp-theme="v2"] .tpz-cell--mastered {
  --tpz-cell-border: var(--tp-success);
  background: var(--tp-success-soft);
}
html[data-tp-theme="v2"] .tpz-col {
  color: var(--tp-text);
  font-family: var(--tp-font-kai);
}
html[data-tp-theme="v2"] .tpz-col--cinnabar { color: var(--tp-accent-text); }
html[data-tp-theme="v2"] .tpz-col--faint { color: var(--tp-text-faint); }
html[data-tp-theme="v2"] .tpz-sentence { color: var(--tp-text); }
html[data-tp-theme="v2"] .tpz-ruby rt { color: var(--tp-text-soft); }

/* ---------- 行內 style 補救（v1 變數寫死、深色不變者） ---------- */
html[data-tp-theme="v2"] [style*="color:var(--tp-ink)"] { color: var(--tp-text) !important; }
html[data-tp-theme="v2"] [style*="color:var(--tp-ink-soft)"] { color: var(--tp-text-soft) !important; }
html[data-tp-theme="v2"] [style*="color:var(--tp-cinnabar-dark)"] { color: var(--tp-accent-text) !important; }
html[data-tp-theme="v2"] [style*="background:var(--tp-paper)"] {
  background: var(--tp-bg-deep) !important;
  border-color: var(--tp-line) !important;
}

/* ---------- 深色：關掉 v1 亮紙底紋（寫死淺色漸層，無變數可指） ---------- */
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]) body { background-image: none; }
}
html[data-tp-theme="v2"][data-theme="dark"] body { background-image: none; }


/* 卷面底色原本跟著 --tp-surface，深色模式會變成深色底（字是深墨）；卷面維持白紙。 */
html[data-tp-theme="v2"] .tp-sheet {
  background: #FFFFFF;
}

/* D2d 對比補修（1151001）。 */
/* 考卷維持白紙：紙內權杖與 v1 原色票固定成亮階色碼（本頁深色連原色票都換夜間階，不能引用），深色下字不會變淺落在白紙上。 */
html[data-tp-theme="v2"] .tp-sheet {
  --tp-text: #1F1B14; --tp-text-soft: #55503F; --tp-text-faint: #6E6558;
  --tp-line: #E7DECD; --tp-surface: #FFFFFF; --tp-surface-2: #FDFAF3; --tp-bg-deep: #F3EDE0;
  --tp-accent: #A94A3C; --tp-accent-text: #A94A3C;
  --tp-success: #5E6E52; --tp-error: #A94A3C; --tp-warning: #A87A2E;
  --tp-success-soft: #E9EDE2; --tp-error-soft: #F6E4DF; --tp-warning-soft: #F6ECDA;
  --tp-paper: #FAF6EE; --tp-paper-deep: #F3EDE0;
  --tp-ink: #1F1B14; --tp-ink-soft: #55503F; --tp-ink-faint: #6E6558; --tp-ink-blue: #4A5E70; --tp-grid-line: #E0D4BE;
  --tp-cinnabar: #C05B4B; --tp-cinnabar-dark: #A94A3C; --tp-cinnabar-soft: #F6E4DF;
  --tp-sage: #7C8B6F; --tp-sage-deep: #5E6E52; --tp-sage-soft: #E9EDE2;
  --tp-amber: #C99A4B; --tp-amber-deep: #A87A2E; --tp-amber-soft: #F6ECDA;
}


/* 頁尾底色在 HTML 行內 style 寫死 #fff（D2d 的規則被行內蓋過，所以實測仍白）；深色下淺字落白底 2.1:1，加 !important 才蓋得掉。 */
html[data-tp-theme="v2"] footer.tp-no-print {
  background: var(--tp-surface) !important;
}