/* j14-periodic-table（週期表探險地圖）— junior 層 v2 風格覆寫
   基底：--ink→--tp-text、--ink-soft→--tp-text-soft、--paper→--tp-bg、--paper-2→--tp-bg-deep、--card→--tp-surface、--line→--tp-line
   主色：--primary→--tp-accent、--primary-strong→--tp-accent-strong；--accent 族（主按鈕、選取態、焦點）→--tp-accent／--tp-accent-text／--tp-accent-soft
   語意：--good→--tp-success、--good-soft→--tp-success-soft、--bad→--tp-error、--bad-soft→--tp-error-soft
   科目：--second→--tp-subject-sci、--second-soft→--tp-subject-sci-soft（進度條、吉祥物軌道保留自然科琥珀色）
   形狀：--radius→--tp-radius-card、--radius-sm→--tp-radius-ctl、--shadow→--tp-shadow-1、--font→--tp-font-sans */
html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text); --ink-soft: var(--tp-text-soft);
  --paper: var(--tp-bg); --paper-2: var(--tp-bg-deep); --card: var(--tp-surface); --line: var(--tp-line);
  --primary: var(--tp-accent); --primary-strong: var(--tp-accent-strong);
  --accent: var(--tp-accent); --accent-ink: var(--tp-accent-text); --accent-soft: var(--tp-accent-soft);
  --second: var(--tp-subject-sci); --second-soft: var(--tp-subject-sci-soft);
  --good: var(--tp-success); --good-soft: var(--tp-success-soft);
  --bad: var(--tp-error); --bad-soft: var(--tp-error-soft);
  --radius: var(--tp-radius-card); --radius-sm: var(--tp-radius-ctl);
  --shadow: var(--tp-shadow-1); --font: var(--tp-font-sans);
}
/* 大面積背景：蓋掉寫死的墨藍漸層與格線 */
html[data-tp-theme="v2"] body { background: var(--tp-bg); color: var(--tp-text); }
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2 { font-family: var(--tp-font-serif); }
/* 頂列寫死的半透明紙色 */
html[data-tp-theme="v2"] .top { background: var(--tp-bg); border-bottom-color: var(--tp-line); }
/* 主按鈕：accent 底、accent-on 字、hover accent-strong */
html[data-tp-theme="v2"] .btn-primary { background: var(--tp-accent); color: var(--tp-accent-on); }
html[data-tp-theme="v2"] .btn-primary:hover { background: var(--tp-accent-strong); }
html[data-tp-theme="v2"] .btn-accent { background: var(--tp-accent); color: var(--tp-accent-on); }
html[data-tp-theme="v2"] .btn-accent:hover { background: var(--tp-accent-strong); }
html[data-tp-theme="v2"] .btn-ghost { color: var(--tp-accent-text); border-color: var(--tp-line); }
html[data-tp-theme="v2"] .seg button[aria-pressed="true"] { background: var(--tp-accent); color: var(--tp-accent-on); border-color: var(--tp-accent); }
html[data-tp-theme="v2"] .skip { background: var(--tp-accent); color: var(--tp-accent-on); }
/* 寫死白底的輸入框與列印卷面 */
html[data-tp-theme="v2"] .field { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-line); }
html[data-tp-theme="v2"] .paper { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-line); box-shadow: var(--tp-shadow-1); }
html[data-tp-theme="v2"] .paper-head { border-bottom-color: var(--tp-accent); }
/* 計算機螢幕：深底反白，深色模式自動翻轉 */
html[data-tp-theme="v2"] .calc-display { background: var(--tp-text); color: var(--tp-bg); }
/* 回饋框寫死的邊色 */
html[data-tp-theme="v2"] .feedback.good { background: var(--tp-success-soft); border-color: var(--tp-success); }
html[data-tp-theme="v2"] .feedback.hint { background: var(--tp-accent-soft); border-color: var(--tp-accent); }
html[data-tp-theme="v2"] .feedback.reveal { background: var(--tp-surface); border-color: var(--tp-line); border-left-color: var(--tp-accent); }
html[data-tp-theme="v2"] .progress > span { background: var(--tp-subject-sci); }
html[data-tp-theme="v2"] .star.on path { fill: var(--tp-accent); stroke: var(--tp-accent-text); }
/* 元素類別色為內容識別，保留原淺色；深色模式字色固定深色以保對比 */
html[data-tp-theme="v2"][data-theme="dark"] .cell { color: #1c2b33; }
html[data-tp-theme="v2"][data-theme="dark"] .bohr .ring { stroke: rgba(239, 231, 215, 0.45); }
html[data-tp-theme="v2"][data-theme="dark"] .bohr text { fill: #211d17; }
html[data-tp-theme="v2"][data-theme="dark"] .bohr text.count { fill: var(--tp-text); }
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]) .cell { color: #1c2b33; }
  html[data-tp-theme="v2"]:not([data-theme="light"]) .bohr .ring { stroke: rgba(239, 231, 215, 0.45); }
  html[data-tp-theme="v2"]:not([data-theme="light"]) .bohr text { fill: #211d17; }
  html[data-tp-theme="v2"]:not([data-theme="light"]) .bohr text.count { fill: var(--tp-text); }
}