/* Stone Constellations shares the Life Atelier appearance preference. */
#scAppearanceDialog .sc-appearance {margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
#scAppearanceDialog .sc-appearance h3 {margin:0 0 12px}
#scAppearanceDialog .sc-appearance label {display:block;margin-bottom:7px;font-size:12px}
#scAppearanceDialog .sc-appearance select {width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit}
#scAppearanceDialog .sc-appearance p {margin:8px 0 0}
html[data-theme="dark"] {
  --bg:#191f21;
  --panel:#22292b;
  --panel2:#2c3436;
  --line:#495457;
  --ink:#f2eee7;
  --ink2:#bcc0ba;
  --accent:#a2c6ad;
  --accent-ink:#d9e8d9;
  --board:#4b5452;
  --sc-button-ink:#f2eee7;
  --sc-button-line:#495457;
  color-scheme:dark;
}
html[data-theme="dark"] body {background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .history-bar {background:#202729!important;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .poolpanel,
html[data-theme="dark"] .event-panel,
html[data-theme="dark"] .zoombar,
html[data-theme="dark"] dialog,
html[data-theme="dark"] #scDriveDialog,
html[data-theme="dark"] #objectNoteDialog {background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .event-panel {--ink:#f2eee7;--muted:#bcc0ba;--line:#495457;--accent:#a2c6ad}
html[data-theme="dark"] .event-panel h2,
html[data-theme="dark"] .event-panel label,
html[data-theme="dark"] .event-panel .hint,
html[data-theme="dark"] #scSettingsDialog h2,
html[data-theme="dark"] #scAppearanceDialog h2,
html[data-theme="dark"] #scSettingsDialog h3,
html[data-theme="dark"] #scAppearanceDialog h3,
html[data-theme="dark"] #objectNoteDialog h2 {color:var(--ink)}
html[data-theme="dark"] .event-panel .hint,
html[data-theme="dark"] #scSettingsDialog p,
html[data-theme="dark"] #scAppearanceDialog p,
html[data-theme="dark"] .event-panel .date-parts label {color:var(--ink2)}
html[data-theme="dark"] .poolitem,
html[data-theme="dark"] .stone-name,
html[data-theme="dark"] .object-note-input,
html[data-theme="dark"] .event-panel input,
html[data-theme="dark"] .event-panel textarea,
html[data-theme="dark"] .event-panel select,
html[data-theme="dark"] #objectNoteDialog textarea,
html[data-theme="dark"] #scSettingsDialog select,
html[data-theme="dark"] #scAppearanceDialog select,
html[data-theme="dark"] .timeline-tools #historyDate,
html[data-theme="dark"] .timeline-tools .speed-box,
html[data-theme="dark"] .history-controls input {background:#2b3335;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {color:#adb3ae;opacity:1}
html[data-theme="dark"] .poolpanel.drophot {background:#304039}
html[data-theme="dark"] .pile-stone .cap,
html[data-theme="dark"] .stone-label,
html[data-theme="dark"] .boardhint,
html[data-theme="dark"] .zoombar {background:#283032e8;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .board {background:radial-gradient(120% 110% at 50% 42%,#626b67 0%,#4b5452 55%,#394240 100%)}
html[data-theme="dark"] .board::after {box-shadow:inset 0 0 120px #10161760}
html[data-theme="dark"] .boardhint b {color:var(--ink)}
html[data-theme="dark"] .handle {background:#f1eee7}
html[data-theme="dark"] .count {background:#3c4848;color:var(--ink)}
html[data-theme="dark"] .tab .num,
html[data-theme="dark"] .zoomval,
html[data-theme="dark"] #historyAge,
html[data-theme="dark"] #historyClock,
html[data-theme="dark"] #zVal,
html[data-theme="dark"] .time-tick {color:var(--ink2)}
html[data-theme="dark"] .topbar .atelier-home-link {color:var(--ink)!important}
html[data-theme="dark"] button.btn,
html[data-theme="dark"] .event-panel button:not(.time-marker):not(.marker-delete),
html[data-theme="dark"] #scSettingsDialog button,
html[data-theme="dark"] #scAppearanceDialog button,
html[data-theme="dark"] #objectNoteDialog button,
html[data-theme="dark"] #scDriveDialog button,
html[data-theme="dark"] .timeline-tools button.btn {background:#2b3335;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] button.btn:hover,
html[data-theme="dark"] .event-panel button:hover,
html[data-theme="dark"] #scSettingsDialog button:hover,
html[data-theme="dark"] #scAppearanceDialog button:hover,
html[data-theme="dark"] #objectNoteDialog button:hover {background:#394345;color:var(--ink)}
html[data-theme="dark"] .topbar .tab,
html[data-theme="dark"] .topbar .topactions .btn {background:#283032!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] .topbar .tab:hover,
html[data-theme="dark"] .topbar .topactions .btn:hover {background:#394345!important}
html[data-theme="dark"] .topbar .tab[data-header-selected="true"],
html[data-theme="dark"] .topbar .topactions .btn[data-header-selected="true"] {background:#e7e9e3!important;color:#202729!important;border-color:#e7e9e3!important}
html[data-theme="dark"] .event-panel button[aria-pressed=true],
html[data-theme="dark"] .event-panel .btn.primary,
html[data-theme="dark"] button.btn.primary:not(.danger) {background:#f2f0e9!important;color:#202729!important;border-color:#f2f0e9!important}
html[data-theme="dark"] .event-panel .series-actions .delete-series,
html[data-theme="dark"] .event-panel .sc-trash-actions .permanent,
html[data-theme="dark"] button.btn.danger {background:#a9322d!important;border-color:#a9322d!important;color:#fff!important}
html[data-theme="dark"] #view2 #toggleLabels,
html[data-theme="dark"] #view2 #toggleLabels[aria-pressed=true] {background:#2b3335!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="dark"] #reopenConstellation {background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .timeline-tools #historyDate,
html[data-theme="dark"] .timeline-tools #historyAge,
html[data-theme="dark"] .timeline-tools .speed-box,
html[data-theme="dark"] .timeline-tools button.btn {background:#2b3335!important;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .timeline-tools #historyAge,
html[data-theme="dark"] .timeline-tools #historyClock,
html[data-theme="dark"] #historyClock {color:var(--ink)}
html[data-theme="dark"] #scAppearanceDialog .sc-appearance {background:#2c3436;border-color:var(--line)}
html[data-theme="dark"] #scAppearanceDialog .sc-appearance p {color:var(--ink2)}
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible {outline:2px solid #f0c49a;outline-offset:3px}

#scAppearanceButton {flex:0 0 32px!important;font-size:20px!important;padding:0 5px!important}
#scAppearanceDialog {width:min(480px,95vw);padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:14px Arial}
#scAppearanceDialog .settings-heading h2 {font:26px Georgia;text-transform:none;color:var(--ink);margin:0}
#scAppearanceDialog .settings-heading button {border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);padding:9px 12px;cursor:pointer}
#scAppearanceDialog .sc-appearance h3 {font:20px Georgia;color:var(--ink)}
#scAppearanceDialog::backdrop {background:#10161780}
html[data-theme="dark"] #scAppearanceDialog {background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] #scDriveDialog h2 {color:var(--ink)}
html[data-theme="dark"] #eventPanel #eventMoment[aria-pressed="true"],
html[data-theme="dark"] #eventPanel #eventPeriod[aria-pressed="true"] {background:#f2f0e9!important;border-color:#f2f0e9!important;color:#202729!important}
html[data-theme="dark"] button.btn:disabled {opacity:.65}
/* Transport labels stay legible despite the player layout's ID-level styles. */
html:not([data-theme="dark"]) #historyBar #timelinePlay,
html:not([data-theme="dark"]) #historyBar #timelineStop {color:#242423!important}
html[data-theme="dark"] #historyBar #timelinePlay,
html[data-theme="dark"] #historyBar #timelineStop {color:#fff!important}