/* ============================================================
   wwscore 主题包:原版 + 4 套可选主题
   使用 :root[data-theme] 覆盖,原版不加 data-theme
   ============================================================ */

/* ---------- 主题切换器(固定右下角) ---------- */
.theme-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2600;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.theme-switcher .ts-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  margin-right: 2px;
  user-select: none;
}
.theme-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.theme-dot:hover { transform: scale(1.18); }
.theme-dot.active { border-color: #fff; transform: scale(1.12); }
.theme-dot[data-theme=""] { background: linear-gradient(135deg, #667eea, #764ba2); }
.theme-dot[data-theme="resonance"] { background: linear-gradient(135deg, #dcbc77, #8f6f34); }
.theme-dot[data-theme="journal"] { background: #f4efe4; }
.theme-dot[data-theme="monitor"] { background: #e0862a; }
.theme-dot[data-theme="celadon"] { background: #31635a; }

/* 深浅两色主题下切换器底色微调 */
:root[data-theme="journal"] .theme-switcher,
:root[data-theme="celadon"] .theme-switcher {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.1);
}
:root[data-theme="journal"] .ts-label,
:root[data-theme="celadon"] .ts-label { color: rgba(0, 0, 0, 0.5); }
:root[data-theme="journal"] .theme-dot.active,
:root[data-theme="celadon"] .theme-dot.active { border-color: rgba(0, 0, 0, 0.65); }

/* ============================================================
   主题一:残响(resonance)—— 炭黑底 + 残响金,终末数据坞质感
   ============================================================ */
:root[data-theme="resonance"] {
  --primary-gradient: linear-gradient(135deg, #dcbc77 0%, #b18d46 100%);
  --primary-color: #d6b36e;
  --secondary-color: #a8853f;
  --accent-color: #26242e;
  --text-main: #e9e5db;
  --text-sub: #99938a;
  --glass-bg: #201f26;
  --glass-border: 1px solid #36333f;
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  --card-radius: 14px;
}
:root[data-theme="resonance"] body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(214, 179, 110, 0.09), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(214, 179, 110, 0.05), transparent 55%),
    linear-gradient(160deg, #17161b 0%, #131217 100%);
  color: var(--text-main);
}
:root[data-theme="resonance"] h1,
:root[data-theme="resonance"] .template-section h3,
:root[data-theme="resonance"] .formula-header h2,
:root[data-theme="resonance"] .ocr-modal-header h3,
:root[data-theme="resonance"] .sidebar-header h3 {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif;
  letter-spacing: 0.02em;
}
:root[data-theme="resonance"] header,
:root[data-theme="resonance"] .formula-section,
:root[data-theme="resonance"] .table-section,
:root[data-theme="resonance"] .template-section,
:root[data-theme="resonance"] .mobile-sidebar,
:root[data-theme="resonance"] .sidebar-actions,
:root[data-theme="resonance"] .ocr-modal-content,
:root[data-theme="resonance"] .template-content,
:root[data-theme="resonance"] .history-item,
:root[data-theme="resonance"] .score-setting-item,
:root[data-theme="resonance"] .template-entry-btn {
  background: #201f26;
  color: var(--text-main);
  border-color: #36333f;
}
:root[data-theme="resonance"] .formula-section,
:root[data-theme="resonance"] .table-section,
:root[data-theme="resonance"] .template-section { border: 1px solid #36333f; }
:root[data-theme="resonance"] .template-tabs,
:root[data-theme="resonance"] .ocr-modal-tabs,
:root[data-theme="resonance"] .prop-item,
:root[data-theme="resonance"] .result-item,
:root[data-theme="resonance"] .history-result-item,
:root[data-theme="resonance"] .preview-image {
  background: #26242e;
  border-color: #3c3946;
  color: var(--text-main);
}
:root[data-theme="resonance"] .tab-btn.active {
  background: linear-gradient(135deg, #dcbc77, #b18d46);
  color: #17161b;
  box-shadow: none;
}
:root[data-theme="resonance"] .tab-btn { color: var(--text-sub); }
:root[data-theme="resonance"] .ocr-btn { background: rgba(214, 179, 110, 0.12); color: #dcbc77; border: 1px solid rgba(214, 179, 110, 0.4); }
:root[data-theme="resonance"] .ocr-btn:hover { background: rgba(214, 179, 110, 0.2); }
:root[data-theme="resonance"] .clear-btn,
:root[data-theme="resonance"] .preview-remove,
:root[data-theme="resonance"] .history-clear-btn,
:root[data-theme="resonance"] .history-delete-btn {
  background: transparent;
  color: var(--text-sub);
  border: 1px solid #3c3946;
}
:root[data-theme="resonance"] .clear-btn:hover,
:root[data-theme="resonance"] .preview-remove:hover,
:root[data-theme="resonance"] .history-clear-btn:hover,
:root[data-theme="resonance"] .history-delete-btn:hover {
  background: #26242e;
  color: var(--text-main);
}
:root[data-theme="resonance"] .table-input,
:root[data-theme="resonance"] .table-select,
:root[data-theme="resonance"] .template-selector select {
  background: #1a1921;
  color: var(--text-main);
  border: 1px solid #322f3b;
}
:root[data-theme="resonance"] .table-input:hover,
:root[data-theme="resonance"] .table-select:hover { border-color: #4a4656; }
:root[data-theme="resonance"] .table-input:focus,
:root[data-theme="resonance"] .table-select:focus,
:root[data-theme="resonance"] .template-selector select:focus {
  border-color: #d6b36e;
  outline: none;
}
:root[data-theme="resonance"] .entries-table thead th { color: var(--text-sub); border-bottom: 1px solid #36333f; }
:root[data-theme="resonance"] .entries-table tr { border-bottom: 1px solid #2c2a34; background: transparent; }
:root[data-theme="resonance"] .entry-score,
:root[data-theme="resonance"] .score-value,
:root[data-theme="resonance"] #totalScore { color: #e6c887; }
:root[data-theme="resonance"] .score-value { text-shadow: none; }
:root[data-theme="resonance"] .upload-area { background: #1c1b22; border: 2px dashed #413d4c; color: var(--text-sub); }
:root[data-theme="resonance"] .upload-area:hover { border-color: #d6b36e; background: #211f28; }
:root[data-theme="resonance"] .footer { background: transparent; color: var(--text-sub); }
:root[data-theme="resonance"] .footer a { color: #b8a06a; }
:root[data-theme="resonance"] .prop-name { color: var(--text-sub); }
:root[data-theme="resonance"] .prop-value { color: #dcbc77; }
:root[data-theme="resonance"] .medium-confidence { background: rgba(214, 179, 110, 0.16); color: #dcbc77; }
:root[data-theme="resonance"] .low-confidence { background: rgba(200, 100, 90, 0.16); color: #d9958c; }
:root[data-theme="resonance"] .score-max-value { color: #e6c887; }
:root[data-theme="resonance"] .mobile-menu-btn { background: #26242e; border-color: #3c3946; }
:root[data-theme="resonance"] .mobile-menu-btn span { background: var(--text-main); }

/* ============================================================
   主题二:手帐(journal)—— 米白纸底 + 墨色 + 朱砂,攻略本质感
   ============================================================ */
:root[data-theme="journal"] {
  --primary-gradient: linear-gradient(135deg, #35322b 0%, #24221d 100%);
  --primary-color: #2f2c26;
  --secondary-color: #6b6558;
  --accent-color: #b23a2c;
  --text-main: #3c382e;
  --text-sub: #8d8574;
  --glass-bg: #fdfbf5;
  --glass-border: 1px solid #e6ddc9;
  --glass-shadow: 0 6px 22px rgba(120, 105, 75, 0.1);
  --card-radius: 12px;
}
:root[data-theme="journal"] body {
  background:
    radial-gradient(1200px 700px at 50% -15%, rgba(255, 253, 245, 0.75), transparent 60%),
    #f4efe4;
  color: var(--text-main);
}
:root[data-theme="journal"] h1,
:root[data-theme="journal"] .template-section h3,
:root[data-theme="journal"] .formula-header h2,
:root[data-theme="journal"] .ocr-modal-header h3,
:root[data-theme="journal"] .sidebar-header h3 {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif;
  letter-spacing: 0.03em;
}
:root[data-theme="journal"] header,
:root[data-theme="journal"] .formula-section,
:root[data-theme="journal"] .table-section,
:root[data-theme="journal"] .template-section,
:root[data-theme="journal"] .mobile-sidebar,
:root[data-theme="journal"] .sidebar-actions,
:root[data-theme="journal"] .ocr-modal-content,
:root[data-theme="journal"] .template-content,
:root[data-theme="journal"] .history-item,
:root[data-theme="journal"] .score-setting-item,
:root[data-theme="journal"] .template-entry-btn {
  background: #fdfbf5;
  color: var(--text-main);
  border-color: #e6ddc9;
}
:root[data-theme="journal"] .formula-section,
:root[data-theme="journal"] .table-section,
:root[data-theme="journal"] .template-section { border: 1px solid #e6ddc9; }
:root[data-theme="journal"] .template-tabs,
:root[data-theme="journal"] .ocr-modal-tabs,
:root[data-theme="journal"] .prop-item,
:root[data-theme="journal"] .result-item,
:root[data-theme="journal"] .history-result-item {
  background: #f7f3e8;
  border-color: #e8e0cc;
  color: var(--text-main);
}
:root[data-theme="journal"] .tab-btn.active {
  background: #fdfbf5;
  color: var(--accent-color);
  box-shadow: inset 0 -2px 0 var(--accent-color);
}
:root[data-theme="journal"] .ocr-btn { background: #fdfbf5; color: var(--text-main); border: 1px solid #d8cfb8; }
:root[data-theme="journal"] .ocr-btn:hover { background: #f4efe4; border-color: var(--accent-color); color: var(--accent-color); }
:root[data-theme="journal"] .table-input,
:root[data-theme="journal"] .table-select,
:root[data-theme="journal"] .template-selector select {
  background: #faf7ef;
  color: var(--text-main);
  border: 1px solid #e3dbc7;
}
:root[data-theme="journal"] .table-input:focus,
:root[data-theme="journal"] .table-select:focus,
:root[data-theme="journal"] .template-selector select:focus {
  border-color: var(--accent-color);
  outline: none;
}
:root[data-theme="journal"] .entries-table thead th { color: var(--text-sub); border-bottom: 1px solid #e0d7c1; }
:root[data-theme="journal"] .entries-table tr { border-bottom: 1px solid #ece4d2; background: transparent; }
:root[data-theme="journal"] .entry-score,
:root[data-theme="journal"] .score-value,
:root[data-theme="journal"] #totalScore { color: var(--accent-color); }
:root[data-theme="journal"] .score-value { text-shadow: none; }
:root[data-theme="journal"] .upload-area { background: #faf7ef; border: 2px dashed #d8cfb8; color: var(--text-sub); }
:root[data-theme="journal"] .upload-area:hover { border-color: var(--accent-color); }
:root[data-theme="journal"] .footer { background: transparent; color: var(--text-sub); }
:root[data-theme="journal"] .footer a { color: var(--text-main); }
:root[data-theme="journal"] .prop-name { color: var(--text-sub); }
:root[data-theme="journal"] .prop-value { color: var(--text-main); font-weight: 700; }
:root[data-theme="journal"] .score-max-value { color: var(--accent-color); }

/* ============================================================
   主题三:仪表(monitor)—— 褐黑底 + 琥珀,工业终端工具感
   ============================================================ */
:root[data-theme="monitor"] {
  --primary-gradient: linear-gradient(135deg, #e0862a 0%, #e0862a 100%);
  --primary-color: #e0862a;
  --secondary-color: #8a5c1d;
  --accent-color: #f0973a;
  --text-main: #e6dcc4;
  --text-sub: #83795f;
  --glass-bg: #15140f;
  --glass-border: 1px solid #2b2820;
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --card-radius: 8px;
}
:root[data-theme="monitor"] body {
  background:
    linear-gradient(180deg, #100f0c 0%, #0c0b09 100%);
  color: var(--text-main);
}
:root[data-theme="monitor"] h1,
:root[data-theme="monitor"] .template-section h3,
:root[data-theme="monitor"] .formula-header h2,
:root[data-theme="monitor"] .ocr-modal-header h3,
:root[data-theme="monitor"] .sidebar-header h3 {
  letter-spacing: 0.12em;
}
:root[data-theme="monitor"] .score-value,
:root[data-theme="monitor"] #totalScore,
:root[data-theme="monitor"] .entry-score,
:root[data-theme="monitor"] .table-input,
:root[data-theme="monitor"] .prop-value,
:root[data-theme="monitor"] .score-max-value {
  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="monitor"] header,
:root[data-theme="monitor"] .formula-section,
:root[data-theme="monitor"] .table-section,
:root[data-theme="monitor"] .template-section,
:root[data-theme="monitor"] .mobile-sidebar,
:root[data-theme="monitor"] .sidebar-actions,
:root[data-theme="monitor"] .ocr-modal-content,
:root[data-theme="monitor"] .template-content,
:root[data-theme="monitor"] .history-item,
:root[data-theme="monitor"] .score-setting-item,
:root[data-theme="monitor"] .template-entry-btn {
  background: #15140f;
  color: var(--text-main);
  border-color: #2b2820;
}
:root[data-theme="monitor"] .formula-section,
:root[data-theme="monitor"] .table-section,
:root[data-theme="monitor"] .template-section { border: 1px solid #2b2820; }
:root[data-theme="monitor"] .template-tabs,
:root[data-theme="monitor"] .ocr-modal-tabs,
:root[data-theme="monitor"] .prop-item,
:root[data-theme="monitor"] .result-item,
:root[data-theme="monitor"] .history-result-item {
  background: #1c1a14;
  border-color: #302c22;
  color: var(--text-main);
}
:root[data-theme="monitor"] .tab-btn.active {
  background: #e0862a;
  color: #0e0d0b;
  box-shadow: none;
}
:root[data-theme="monitor"] .tab-btn { color: var(--text-sub); }
:root[data-theme="monitor"] .ocr-btn { background: transparent; color: #e0862a; border: 1px solid #6b4a1c; }
:root[data-theme="monitor"] .ocr-btn:hover { background: rgba(224, 134, 42, 0.12); border-color: #e0862a; }
:root[data-theme="monitor"] .clear-btn,
:root[data-theme="monitor"] .preview-remove,
:root[data-theme="monitor"] .history-clear-btn,
:root[data-theme="monitor"] .history-delete-btn {
  background: transparent;
  color: var(--text-sub);
  border: 1px solid #302c22;
}
:root[data-theme="monitor"] .clear-btn:hover,
:root[data-theme="monitor"] .preview-remove:hover,
:root[data-theme="monitor"] .history-clear-btn:hover,
:root[data-theme="monitor"] .history-delete-btn:hover {
  background: #1c1a14;
  color: var(--text-main);
}
:root[data-theme="monitor"] .table-input,
:root[data-theme="monitor"] .table-select,
:root[data-theme="monitor"] .template-selector select {
  background: #0f0e0b;
  color: var(--text-main);
  border: 1px solid #2b2820;
  border-radius: 4px;
}
:root[data-theme="monitor"] .table-input:focus,
:root[data-theme="monitor"] .table-select:focus,
:root[data-theme="monitor"] .template-selector select:focus {
  border-color: #e0862a;
  outline: none;
  box-shadow: 0 0 0 2px rgba(224, 134, 42, 0.18);
}
:root[data-theme="monitor"] .entries-table thead th { color: var(--text-sub); border-bottom: 1px solid #2b2820; font-size: 0.72rem; letter-spacing: 0.1em; }
:root[data-theme="monitor"] .entries-table tr { border-bottom: 1px solid #201d16; background: transparent; }
:root[data-theme="monitor"] .entry-score,
:root[data-theme="monitor"] .score-value,
:root[data-theme="monitor"] #totalScore { color: #f0973a; }
:root[data-theme="monitor"] .score-value { text-shadow: none; }
:root[data-theme="monitor"] .upload-area { background: #121109; border: 2px dashed #3a352a; color: var(--text-sub); }
:root[data-theme="monitor"] .upload-area:hover { border-color: #e0862a; }
:root[data-theme="monitor"] .footer { background: transparent; color: var(--text-sub); }
:root[data-theme="monitor"] .footer a { color: #c9973f; }
:root[data-theme="monitor"] .prop-name { color: var(--text-sub); }
:root[data-theme="monitor"] .prop-value { color: #f0973a; }
:root[data-theme="monitor"] .medium-confidence { background: rgba(224, 134, 42, 0.15); color: #e0862a; }
:root[data-theme="monitor"] .low-confidence { background: rgba(196, 90, 80, 0.15); color: #d08a80; }
:root[data-theme="monitor"] .score-max-value { color: #f0973a; }
:root[data-theme="monitor"] .mobile-menu-btn { background: #1c1a14; border-color: #302c22; }
:root[data-theme="monitor"] .mobile-menu-btn span { background: var(--text-main); }

/* ============================================================
   主题四:青瓷(celadon)—— 釉色青灰 + 黛青 + 朱砂,东方幻想
   ============================================================ */
:root[data-theme="celadon"] {
  --primary-gradient: linear-gradient(135deg, #377065 0%, #2a584f 100%);
  --primary-color: #31635a;
  --secondary-color: #4d7d72;
  --accent-color: #bf5a49;
  --text-main: #2f3d36;
  --text-sub: #75857c;
  --glass-bg: #f8fbf8;
  --glass-border: 1px solid #ccdcd0;
  --glass-shadow: 0 8px 26px rgba(64, 96, 84, 0.12);
  --card-radius: 16px;
}
:root[data-theme="celadon"] body {
  background:
    radial-gradient(1000px 600px at 110% -10%, rgba(49, 99, 90, 0.1), transparent 55%),
    linear-gradient(165deg, #e9eee9 0%, #dfe7e1 100%);
  color: var(--text-main);
}
:root[data-theme="celadon"] h1,
:root[data-theme="celadon"] .template-section h3,
:root[data-theme="celadon"] .formula-header h2,
:root[data-theme="celadon"] .ocr-modal-header h3,
:root[data-theme="celadon"] .sidebar-header h3 {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  letter-spacing: 0.04em;
}
:root[data-theme="celadon"] header,
:root[data-theme="celadon"] .formula-section,
:root[data-theme="celadon"] .table-section,
:root[data-theme="celadon"] .template-section,
:root[data-theme="celadon"] .mobile-sidebar,
:root[data-theme="celadon"] .sidebar-actions,
:root[data-theme="celadon"] .ocr-modal-content,
:root[data-theme="celadon"] .template-content,
:root[data-theme="celadon"] .history-item,
:root[data-theme="celadon"] .score-setting-item,
:root[data-theme="celadon"] .template-entry-btn {
  background: #f8fbf8;
  color: var(--text-main);
  border-color: #ccdcd0;
}
:root[data-theme="celadon"] .formula-section,
:root[data-theme="celadon"] .table-section,
:root[data-theme="celadon"] .template-section { border: 1px solid #ccdcd0; }
:root[data-theme="celadon"] .template-tabs,
:root[data-theme="celadon"] .ocr-modal-tabs,
:root[data-theme="celadon"] .prop-item,
:root[data-theme="celadon"] .result-item,
:root[data-theme="celadon"] .history-result-item {
  background: #eef4ef;
  border-color: #d3e2d6;
  color: var(--text-main);
}
:root[data-theme="celadon"] .tab-btn.active {
  background: #31635a;
  color: #f2f7f3;
  box-shadow: none;
}
:root[data-theme="celadon"] .ocr-btn { background: #31635a; color: #f2f7f3; border: none; }
:root[data-theme="celadon"] .ocr-btn:hover { background: #2a584f; }
:root[data-theme="celadon"] .table-input,
:root[data-theme="celadon"] .table-select,
:root[data-theme="celadon"] .template-selector select {
  background: #fbfdfb;
  color: var(--text-main);
  border: 1px solid #d3e2d6;
}
:root[data-theme="celadon"] .table-input:focus,
:root[data-theme="celadon"] .table-select:focus,
:root[data-theme="celadon"] .template-selector select:focus {
  border-color: #31635a;
  outline: none;
  box-shadow: 0 0 0 2px rgba(49, 99, 90, 0.14);
}
:root[data-theme="celadon"] .entries-table thead th { color: var(--text-sub); border-bottom: 1px solid #ccdcd0; }
:root[data-theme="celadon"] .entries-table tr { border-bottom: 1px solid #dce6df; background: transparent; }
:root[data-theme="celadon"] .entry-score,
:root[data-theme="celadon"] .score-value,
:root[data-theme="celadon"] #totalScore { color: var(--accent-color); }
:root[data-theme="celadon"] .score-value { text-shadow: none; }
:root[data-theme="celadon"] .upload-area { background: #f2f7f3; border: 2px dashed #b8cec0; color: var(--text-sub); }
:root[data-theme="celadon"] .upload-area:hover { border-color: #31635a; }
:root[data-theme="celadon"] .footer { background: transparent; color: var(--text-sub); }
:root[data-theme="celadon"] .footer a { color: #31635a; }
:root[data-theme="celadon"] .prop-name { color: var(--text-sub); }
:root[data-theme="celadon"] .prop-value { color: #31635a; font-weight: 700; }
:root[data-theme="celadon"] .score-max-value { color: var(--accent-color); }

/* ---------- 深色主题补漏:表头 / 得分徽章 / OCR 弹窗 tab ---------- */
:root[data-theme="resonance"] .entries-table thead th,
:root[data-theme="resonance"] .entry-score,
:root[data-theme="resonance"] .ocr-tab-btn { background: transparent; }
:root[data-theme="resonance"] .ocr-tab-btn { color: var(--text-sub); }
:root[data-theme="resonance"] .ocr-tab-btn.active { background: #26242e; color: #dcbc77; }

:root[data-theme="monitor"] .entries-table thead th,
:root[data-theme="monitor"] .entry-score,
:root[data-theme="monitor"] .ocr-tab-btn { background: transparent; }
:root[data-theme="monitor"] .ocr-tab-btn { color: var(--text-sub); }
:root[data-theme="monitor"] .ocr-tab-btn.active { background: #1c1a14; color: #e0862a; }

:root[data-theme="journal"] .entries-table thead th,
:root[data-theme="journal"] .entry-score { background: transparent; }
:root[data-theme="journal"] .ocr-tab-btn { background: transparent; color: var(--text-sub); }
:root[data-theme="journal"] .ocr-tab-btn.active { background: #fdfbf5; color: var(--accent-color); box-shadow: inset 0 -2px 0 var(--accent-color); }

:root[data-theme="celadon"] .entries-table thead th,
:root[data-theme="celadon"] .entry-score { background: transparent; }
:root[data-theme="celadon"] .ocr-tab-btn { background: transparent; color: var(--text-sub); }
:root[data-theme="celadon"] .ocr-tab-btn.active { background: #eef4ef; color: #31635a; }