/* ============================================================
   app06-zhuyin（注音拼音樂園）v2 風格覆寫　年齡層：kids（溫暖圓潤）
   自訂屬性→權杖對應簡表：
   --ink→--tp-text　--muted→--tp-text-soft　--line→--tp-line
   --cream→--tp-bg　--paper→--tp-surface　--leaf→--tp-bg-deep
   --green→--tp-accent（主按鈕色）　--green-s→--tp-accent-soft　--gold→--tp-amber
   --ok→--tp-success　--bad→--tp-error　--shadow→--tp-shadow-2　--font→--tp-font-sans
   ============================================================ */

/* 一、自訂屬性整批改指 v2 權杖（深色模式由權杖自動切換） */
html[data-tp-theme="v2"]:root {
  --green: var(--tp-accent-strong);
  --green-d: var(--tp-accent-strong);
  --green-s: var(--tp-accent-soft);
  --gold: var(--tp-amber);
  --gold-d: var(--tp-warning);
  --coral: var(--tp-accent-strong);
  --coral-d: var(--tp-accent-strong);
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --cream: var(--tp-bg);
  --paper: var(--tp-surface);
  --leaf: var(--tp-bg-deep);
  --ok: var(--tp-success);
  --bad: var(--tp-error);
  --shadow: var(--tp-shadow-2);
  --shadow-sm: var(--tp-shadow-1);
  --radius-sm: var(--tp-radius-ctl);
  --radius: var(--tp-radius-card);
  --radius-lg: var(--tp-radius-xl);
  --font: var(--tp-font-sans);
}

/* 二、背景裝飾：改為權杖淺底暈染，深色自動变淡 */
html[data-tp-theme="v2"] body {
  background-image:
    radial-gradient(circle at 12% 8%, var(--tp-accent-softer) 0 120px, transparent 121px),
    radial-gradient(circle at 92% 0%, var(--tp-warning-soft) 0 140px, transparent 141px),
    radial-gradient(circle at 80% 100%, var(--tp-success-soft) 0 160px, transparent 161px);
}

/* 三、主操作鈕：朱砂 accent 系（--green 已指 accent，補字色與 hover） */
html[data-tp-theme="v2"] .btn-primary { color: var(--tp-accent-on); }
html[data-tp-theme="v2"] .btn-primary:hover { background: var(--tp-accent-strong); }
html[data-tp-theme="v2"] .btn-coral { color: var(--tp-accent-on); }
html[data-tp-theme="v2"] .btn-gold { color: var(--tp-ink); }

/* 四、焦點環統一為 v2 聚焦色 */
html[data-tp-theme="v2"] .btn:focus-visible,
html[data-tp-theme="v2"] .icon-btn:focus-visible,
html[data-tp-theme="v2"] .choice:focus-visible,
html[data-tp-theme="v2"] .card-btn:focus-visible {
  outline-color: var(--tp-focus-ring);
}

/* 五、寫死色碼的卡片與面板邊框改為權杖邊線 */
html[data-tp-theme="v2"] .hero,
html[data-tp-theme="v2"] .panel {
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .card-btn.kid {
  border-color: var(--tp-success);
  background-color: var(--tp-surface);
  background-image: linear-gradient(var(--tp-surface), var(--tp-success-soft));
}
html[data-tp-theme="v2"] .card-btn.parent {
  border-color: var(--tp-warning);
  background-color: var(--tp-surface);
  background-image: linear-gradient(var(--tp-surface), var(--tp-warning-soft));
}

/* 六、寫死 #fff 的元件面改為 --tp-surface（深色自動翻轉） */
html[data-tp-theme="v2"] .chip,
html[data-tp-theme="v2"] .input,
html[data-tp-theme="v2"] select.input,
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .list li {
  background: var(--tp-surface);
}

/* 七、答題回饋：成功與錯誤回到語意色，提示用文字主色保對比 */
html[data-tp-theme="v2"] .choice.correct {
  border-color: var(--tp-success);
  background: var(--tp-success-soft);
}
html[data-tp-theme="v2"] .choice.wrong { background: var(--tp-error-soft); }
html[data-tp-theme="v2"] .feedback.ok {
  background: var(--tp-success-soft);
  color: var(--tp-success);
}
html[data-tp-theme="v2"] .feedback.try {
  background: var(--tp-warning-soft);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .feedback.no {
  background: var(--tp-error-soft);
  color: var(--tp-error);
}
html[data-tp-theme="v2"] .notice {
  background: var(--tp-warning-soft);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .tone-pick i.on { background: var(--tp-success-soft); }

/* 八、吐司字色隨底翻轉，注音字形用手寫感楷體 */
html[data-tp-theme="v2"] .toast { color: var(--tp-bg); }
html[data-tp-theme="v2"] .zy,
html[data-tp-theme="v2"] .cloze-zy,
html[data-tp-theme="v2"] .card-zy,
html[data-tp-theme="v2"] .choice-zy,
html[data-tp-theme="v2"] .choice-tone {
  font-family: var(--tp-font-kai);
}
html[data-tp-theme="v2"] .hero h1 { font-family: var(--tp-font-serif); }

/* 九、頁尾行內寫死色改為權杖次要文字 */
html[data-tp-theme="v2"] .tp-foot[style] { color: var(--tp-text-soft) !important; }

/* 十、隱私設定彈窗（tpr-*）全區寫死色改為權杖 */
html[data-tp-theme="v2"] .tpr-modal {
  background: var(--tp-surface);
  color: var(--tp-text);
  font-family: var(--tp-font-sans);
}
html[data-tp-theme="v2"] .tpr-title,
html[data-tp-theme="v2"] .tpr-label { color: var(--tp-text); }
html[data-tp-theme="v2"] .tpr-lead,
html[data-tp-theme="v2"] .tpr-counter,
html[data-tp-theme="v2"] .tpr-privacy { color: var(--tp-text-soft); }
html[data-tp-theme="v2"] .tpr-err,
html[data-tp-theme="v2"] .tpr-status-err { color: var(--tp-error); }
html[data-tp-theme="v2"] .tpr-status-ok { color: var(--tp-success); }
html[data-tp-theme="v2"] .tpr-chip {
  border-color: var(--tp-line);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .tpr-chip input { accent-color: var(--tp-accent-strong); }
html[data-tp-theme="v2"] .tpr-chip.tpr-checked {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] .tpr-chip:focus-within { outline-color: var(--tp-focus-ring); }
html[data-tp-theme="v2"] .tpr-modal textarea,
html[data-tp-theme="v2"] .tpr-modal input[type="text"],
html[data-tp-theme="v2"] .tpr-modal input[type="email"] {
  border-color: var(--tp-line);
  color: var(--tp-text);
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .tpr-modal textarea:focus,
html[data-tp-theme="v2"] .tpr-modal input[type="text"]:focus,
html[data-tp-theme="v2"] .tpr-modal input[type="email"]:focus {
  outline-color: var(--tp-focus-ring);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tpr-btn-primary {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tpr-btn-ghost {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .tpr-btn:focus-visible { outline-color: var(--tp-focus-ring); }
html[data-tp-theme="v2"] .tpr-open:hover,
html[data-tp-theme="v2"] .tpr-open:focus-visible { color: var(--tp-accent-text); }

/* D2d 對比補修（1151001）。 */
/* 考卷紙張維持白底（App 寫死白底，深色權杖會把紙內字變淺而落在白紙上）：深色模式下紙內一律用列印深墨 #1F1B14；亮色模式不變。 */


html[data-tp-theme="v2"][data-theme="dark"] .exam-sheet,
html[data-tp-theme="v2"][data-theme="dark"] .exam-sheet *,
html[data-tp-theme="v2"][data-theme="dark"] .answer-sheet,
html[data-tp-theme="v2"][data-theme="dark"] .answer-sheet * {
  color: #1F1B14 !important;
}