/* Appearance is independent of calculation state and language. */
.appearance-settings { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  color: #e3e9de;
  background: #171d18;
  --green: #b6d2a3;
  --muted: #c1cbbb;
  --mint: #304a37;
  --border: #4c5d49;
  --paper: #1c231d;
  --dark-field: #283025;
  --dark-hover: #3c4b36;
  --dark-ink: #e3e9de;
  --dark-on-primary: #20351d;
  --dark-error: #ffb4ab;
  scrollbar-color: #7d9071 #1c231d;
}
[data-theme="dark"] body { background: #171d18; }
[data-theme="dark"] ::selection { background: #b6d2a3; color: #20351d; }
[data-theme="dark"] :focus-visible,
[data-theme="dark"] .wrapping-select:focus-within { outline-color: #b6d2a3; }
[data-theme="dark"] .brand-logo,
[data-theme="dark"] .calculator-brand { filter: invert(1) brightness(.5) invert(1); }
[data-theme="dark"] .calculator { box-shadow: 0 18px 65px -25px #0009; }
[data-theme="dark"] :is(.preview-label,.editor-top,.editor-top button,.input-hint,.preview-caption,.field-labels,.mixed-operation,.measure-fields label,.fraction-caption,.measure-meta > label,.screen-switch button,.settings-description,.settings-note,.tool-groups button,.tool-intro p,#tool-clear,.tool-form-hint,.tool-note,.tool-field,.history-description,.history-empty,.simple-keypad .delete-key,.intro-rule span) { color: var(--muted); }
[data-theme="dark"] :is(.operators,.tool-groups,.note-icon) { background: var(--dark-field); color: var(--muted); }
[data-theme="dark"] :is(.measure-fields input,.mixed-fields input,.simple-keypad button,.tool-field input,#settings-screen select) { background: var(--dark-field); color: var(--dark-ink); border-color: var(--border); }
[data-theme="dark"] :is(.measure-fields input,.mixed-fields input,.tool-field input)::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] :is(.measure-fields input.selected,.mixed-fields input.selected) { background: #343e30; box-shadow: inset 0 0 0 1.5px #b6d2a3; }
[data-theme="dark"] .fraction-line { background: #98ab8b; }
[data-theme="dark"] :is(.tool-field select,.measure-meta select,.wrapping-select) { background: var(--paper); color: var(--dark-ink); border-color: var(--border); }
[data-theme="dark"] option { color: var(--dark-ink); background: var(--paper); }
[data-theme="dark"] :is(.icon-button:hover,.screen-switch button:hover,.tool-tabs button:hover,.simple-keypad button:hover,.history-item:hover,.formats button:hover) { background: var(--dark-hover); }
[data-theme="dark"] .screen-switch button[aria-pressed="true"] { color: var(--green); }
[data-theme="dark"] .tool-groups button[aria-pressed="true"] { background: var(--paper); color: var(--green); border-color: #98ab8b; }
[data-theme="dark"] .tool-groups button:hover { color: var(--green); }
[data-theme="dark"] .operators button { color: var(--muted); }
[data-theme="dark"] .operators button:hover { background: var(--dark-hover); }
[data-theme="dark"] .operators button[aria-pressed="true"],
[data-theme="dark"] .operators button[aria-pressed="true"]:hover { background: transparent; color: var(--dark-on-primary); }
[data-theme="dark"] :is(.calculate-button,.settings-return,.tool-tabs button[aria-pressed="true"],.formats button[aria-pressed="true"],.toast) { background: var(--green); color: var(--dark-on-primary); }
[data-theme="dark"] :is(.calculate-button:hover,.settings-return:hover) { background: #c8e3b6; }
[data-theme="dark"] :is(.answer-heading,.answer-detail,.answer .result-unit,.formats button,.tape-control,.tape-control select,.tape-result,.tool-result p,.tool-result dt,.tool-reference) { color: #d4dfcc; }
[data-theme="dark"] .formats button[aria-pressed="true"] { color: var(--dark-on-primary); }
[data-theme="dark"] :is(.answer,.tool-result dd) { color: #e2efda; }
[data-theme="dark"] :is(.tape-control,.tool-result dl) { border-color: #6c8465; }
[data-theme="dark"] .answer-heading .icon-button:hover { background: #435d40; }
[data-theme="dark"] :is(.answer.error,.tool-result.error p,.tool-status.error,.clear-history) { color: var(--dark-error); }
[data-theme="dark"] dialog { background: var(--paper); color: var(--dark-ink); box-shadow: 0 24px 80px #0009; }
[data-theme="dark"] dialog::backdrop { background: #080e0aba; }
@media(max-width:720px) {
  [data-theme="dark"] body { background: var(--paper); }
  [data-theme="dark"] .calculator { box-shadow: none; }
}