/* 主題只改介面配色；TAG 軟硬的語意色仍由 semantic 變數負責。 */
html[data-theme="indigo"] {
  --bg: #101521; --surface: #151d2c; --surface-raised: #1a2538; --surface-soft: #213047;
  --line: rgba(167, 192, 228, .14); --line-strong: rgba(167, 192, 228, .25);
  --text: #edf3fc; --muted: #94a4bb; --muted-strong: #bdcce0;
  --brand-strong: #9dc0f5; --brand-soft: rgba(157, 192, 245, .1); --brand-line: rgba(157, 192, 245, .3);
  --header-bg: #101521; --number-highlight: #bdd3f5;
}
html[data-theme="forest"] {
  --bg: #0e1915; --surface: #14211c; --surface-raised: #1a2c24; --surface-soft: #22372e;
  --line: rgba(167, 205, 188, .14); --line-strong: rgba(167, 205, 188, .25);
  --text: #eef6f1; --muted: #92ab9e; --muted-strong: #bed1c6;
  --brand-strong: #82c4ad; --brand-soft: rgba(130, 196, 173, .1); --brand-line: rgba(130, 196, 173, .3);
  --header-bg: #0e1915; --number-highlight: #b7dece;
}
html body.workspace-app {
  --accent: var(--brand-strong); --accent-strong: var(--brand-strong); --accent-soft: var(--brand-soft);
  --mode-active-bg: var(--brand-soft); --mode-active-border: var(--brand-line); --mode-active-text: var(--brand-strong);
}
html body.workspace-app .workspace-expiry-notice { border-color: color-mix(in srgb, var(--warning) 25%, transparent); background: color-mix(in srgb, var(--warning) 7%, transparent); }
html body.workspace-app .workspace-expiry-notice strong { color: var(--warning); }

/* 可直接看見背景、卡片和重點色的主題預覽。 */
html body.workspace-app .theme-popover { width: 340px; max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.theme-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body.workspace-app .theme-options-grid > button { position: relative; display: grid; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; box-shadow: none; }
html body.workspace-app .theme-options-grid > button:hover { background: var(--surface-soft); }
html body.workspace-app .theme-options-grid > button[aria-checked="true"] { border-color: var(--brand-strong); background: var(--brand-soft); }
.theme-options-grid > button > span { display: grid; gap: 3px; min-width: 0; }
.theme-options-grid b { font-size: 13px; font-weight: 600; }
.theme-options-grid small { font-size: 11px; color: var(--muted); line-height: 1.4; }
.theme-options-grid > button > svg { display: none; position: absolute; right: 6px; top: 6px; width: 19px; height: 19px; padding: 2px; border-radius: 50%; fill: none; stroke: var(--bg); stroke-width: 2; background: var(--brand-strong); }
.theme-options-grid > button[aria-checked="true"] > svg { display: block; }
html body.workspace-app .theme-options-grid .theme-swatch { position: relative; display: block; width: 100%; height: 42px; border: 1px solid rgba(128, 128, 128, .18); border-radius: 6px; background: var(--preview-bg); box-shadow: none; }
.theme-options-grid .theme-swatch::before { content: ""; position: absolute; inset: 7px auto 7px 7px; width: 15px; border-radius: 3px; background: var(--preview-panel); }
.theme-options-grid .theme-swatch::after { content: ""; position: absolute; top: 9px; left: 30px; right: 8px; height: 6px; border-radius: 2px; background: var(--preview-accent); box-shadow: 0 13px 0 var(--preview-panel); }
.theme-swatch.is-midnight { --preview-bg: #090c0f; --preview-panel: #263039; --preview-accent: #e2c07a; }
.theme-swatch.is-oled { --preview-bg: #000; --preview-panel: #181e23; --preview-accent: #e2c07a; }
.theme-swatch.is-light { --preview-bg: #eeece7; --preview-panel: #fff; --preview-accent: #805b1c; }
.theme-swatch.is-indigo { --preview-bg: #101521; --preview-panel: #2a3d58; --preview-accent: #9dc0f5; }
.theme-swatch.is-forest { --preview-bg: #0e1915; --preview-panel: #2b493c; --preview-accent: #82c4ad; }

/* 遊戲共用圖標和輸入卡片。 */
.game-icon { display: block; width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.game-art { object-fit: contain; border-radius: 6px; }
.health-game-icon { display: grid; flex: none; width: 58px; height: 48px; place-items: center; overflow: hidden; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--line); border-radius: 8px; }
.health-game-icon .game-art { width: 100%; height: 100%; border-radius: 0; }
html body.workspace-app .health-input-header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 14px; }
html body.workspace-app .health-input-header .game-tag-name { flex: 1; min-width: 0; margin: 0; line-height: 1.5; white-space: normal; overflow: visible; text-overflow: clip; }
html body.workspace-app .health-input-item { border-radius: 14px; background: var(--surface-raised); border-color: var(--line); }
html body.workspace-app .health-spin-input { border-color: transparent; border-radius: 8px; background: var(--surface); padding-inline: 12px; letter-spacing: 0; }
html body.workspace-app .health-spin-input:focus { border-color: var(--brand-strong); box-shadow: none; outline: none; }
html body.workspace-app .health-input-item:has(.health-spin-input:not(:placeholder-shown)):not(.is-coming-soon) { border-color: var(--brand-line); }
html body.workspace-app .health-input-item.is-coming-soon { background: transparent; border-style: dashed; }
.health-input-item.is-coming-soon .health-game-icon { color: var(--muted); background: var(--surface-soft); border-color: var(--line); }
html body.workspace-app .health-form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
html body.workspace-app .health-form-hint { flex: 1; margin: 0; font-size: calc(13px * var(--workspace-font-scale)); line-height: 1.7; color: var(--muted); }
html body.workspace-app .health-submit-btn { min-width: 140px; border-radius: 9px; }
.health-form-status:not(:empty) { flex-basis: 100%; }
.query-game-chip .game-icon { width: 34px; height: 28px; }
.query-game-quick .game-art { width: 54px; height: 44px; }
html body.workspace-app .query-game-quick .query-game-chip { flex-direction: column; gap: 7px; padding: 10px 6px; }
html body.workspace-app .query-game-options .query-game-chip { justify-content: flex-start; text-align: left; }
.query-game-options .query-game-chip > span { flex: 1; min-width: 0; }
.query-game-options .query-game-chip small { flex: none; }
.history-game-avatar .game-icon { width: 23px; height: 23px; color: var(--brand-strong); }
.history-game-avatar .game-art { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }

/* 紀錄使用時間軸；移除外層大框，保留每筆清楚的卡片。 */
html body.workspace-app[data-workspace-section="history"] .mode-panels { padding: 0; border: 0; background: transparent; }
html body.workspace-app .history-scope-switch button[aria-pressed="true"] { color: var(--brand-strong); background: var(--brand-soft); }
.history-period { position: relative; padding-left: 23px; border-left: 1px solid var(--line-strong); }
.history-period-heading::before { content: ""; position: absolute; left: -4px; top: 7px; width: 7px; height: 7px; border: 2px solid var(--bg); border-radius: 50%; background: var(--brand-strong); box-sizing: content-box; }
html body.workspace-app .history-period-heading { padding-bottom: 12px; margin-bottom: 16px; }
html body.workspace-app .history-period-count { padding: 4px 8px; border-radius: 6px; color: var(--muted-strong); background: var(--surface-soft); }
html body.workspace-app .history-entry { background: var(--surface-raised); border-radius: 14px; }
html body.workspace-app .history-entry-actions { padding-top: 14px; border-top: 1px solid var(--line); }
html body.workspace-app .history-entry-actions .btn-text-action:not(.is-danger) { color: var(--brand-strong); background: var(--brand-soft); border-color: transparent; }
html body.workspace-app .history-entry-actions .is-danger { border-color: transparent; background: transparent; }
html body.workspace-app .history-game-avatar { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand-line); }

@media (max-width: 760px) {
  html body.workspace-app .health-input-header { gap: 8px; min-height: 45px; }
  .health-game-icon { width: 44px; height: 36px; border-radius: 6px; }
  .health-game-icon .game-icon { width: 21px; height: 21px; }
  .health-game-icon .game-art { width: 100%; height: 100%; }
  .query-game-quick .game-art { width: 44px; height: 36px; }
  .query-game-options .game-art { width: 30px; height: 25px; }
  html body.workspace-app .health-input-item.is-coming-soon { grid-column: 1 / -1; }
  html body.workspace-app .health-form-footer { gap: 12px; margin-top: 18px; padding-top: 18px; }
  html body.workspace-app .health-form-hint { flex-basis: 100%; }
  .history-period { padding-left: 15px; }
}
@media (min-width: 361px) and (max-width: 500px) {
  html body.workspace-app .health-input-header { gap: 6px; }
  .health-game-icon { width: 36px; height: 30px; }
}