:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151818;
  --panel: #202626;
  --panel-soft: #293031;
  --ink: #eef3ef;
  --muted: #adbbb3;
  --line: #414b4a;
  --accent: #69d5a7;
  --accent-dark: #8ae7bd;
  --accent-soft: #243f36;
  --warning: #f6cb73;
  --warning-soft: #40361f;
  --danger: #ff958a;
  --danger-soft: #462b2c;
  --success: #78d6ae;
  --button-ink: #10251c;
  --shadow: 0 14px 38px rgba(0, 0, 0, .2);
}

.topbar-tools { display: flex; gap: 12px; align-items: center; min-width: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

html[data-theme="dark"] .topbar { background: var(--panel); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .project-type-option,
html[data-theme="dark"] .upload-panel,
html[data-theme="dark"] .result-panel,
html[data-theme="dark"] .message-row,
html[data-theme="dark"] .claim-row,
html[data-theme="dark"] .claimed-chip,
html[data-theme="dark"] .tool-tab.active,
html[data-theme="dark"] .tool-tab:hover,
html[data-theme="dark"] .trip-revtag-input,
html[data-theme="dark"] .trip-expense-row,
html[data-theme="dark"] .trip-settlement-explain,
html[data-theme="dark"] .trip-settlement-check > div,
html[data-theme="dark"] .trip-payment-body,
html[data-theme="dark"] .trip-table-scroll,
html[data-theme="dark"] .rent-language-switch button.active,
html[data-theme="dark"] .rent-photo-button,
html[data-theme="dark"] .rent-mobile-month,
html[data-theme="dark"] .rent-mobile-month-heading,
html[data-theme="dark"] .rent-mobile-month-details .rent-mobile-costs,
html[data-theme="dark"] .rent-mobile-month-details .rent-shared-utility,
html[data-theme="dark"] .health-language-switch button.active,
html[data-theme="dark"] .health-view-tab.active,
html[data-theme="dark"] .sound-target button[aria-pressed="true"] { background: var(--panel); }
html[data-theme="dark"] dialog { color: var(--ink); }
html[data-theme="dark"] dialog.image-browser { background: #111512; color: #fff; }
html[data-theme="dark"] .secondary-button:hover,
html[data-theme="dark"] .upload-box,
html[data-theme="dark"] .sound-banner,
html[data-theme="dark"] .sound-image-preview { background: var(--panel-soft); }
html[data-theme="dark"] .icon-button:hover { background: var(--danger-soft); }
html[data-theme="dark"] .danger-button:hover { background: var(--danger); filter: brightness(.9); }
html[data-theme="dark"] .message-delete:hover { color: var(--button-ink); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { outline-color: rgba(105, 213, 167, .25); }

html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .project-type-option,
html[data-theme="dark"] .rent-photo-button,
html[data-theme="dark"] .rent-mobile-month-heading,
html[data-theme="dark"] .sound-shortcut,
html[data-theme="dark"] .sound-pad,
html[data-theme="dark"] .sound-target button,
html[data-theme="dark"] .rent-language-switch button.active,
html[data-theme="dark"] .health-language-switch button.active,
html[data-theme="dark"] .health-view-tab.active,
html[data-theme="dark"] .tool-tab.active { color: var(--ink); }
html[data-theme="dark"] .tool-tab,
html[data-theme="dark"] .message-delete,
html[data-theme="dark"] .rent-language-switch button,
html[data-theme="dark"] .health-language-switch button,
html[data-theme="dark"] .health-view-tab { color: var(--muted); }
html[data-theme="dark"] .icon-button { color: var(--danger); }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .soundboard .icon-button { color: var(--ink); }
html[data-theme="dark"] .soundboard [data-sound-delete] { color: var(--danger); }
html[data-theme="dark"] .photo-upload-button,
html[data-theme="dark"] .empty-mark,
html[data-theme="dark"] .sound-upload,
html[data-theme="dark"] .trip-trace-payments li > div > span,
html[data-theme="dark"] .trip-payment-step-heading > span { color: #10251c; }
html[data-theme="dark"] .revolut-button,
html[data-theme="dark"] .paypal-button,
html[data-theme="dark"] .image-browser-close,
html[data-theme="dark"] .image-browser-nav { color: #fff; }

html[data-theme="dark"] .share-panel,
html[data-theme="dark"] .shared-row,
html[data-theme="dark"] .share-button,
html[data-theme="dark"] .validation-banner.success,
html[data-theme="dark"] .trip-final-check.success,
html[data-theme="dark"] .trip-settlement-check.success { border-color: #467a64; }
html[data-theme="dark"] .share-button { color: var(--accent); }
html[data-theme="dark"] .share-button:hover,
html[data-theme="dark"] .trip-food-picker.complete,
html[data-theme="dark"] .trip-final-check.success { background: var(--accent-soft); }
html[data-theme="dark"] .validation-banner { border-color: #806737; }
html[data-theme="dark"] .trip-food-picker.pending,
html[data-theme="dark"] .trip-payment-table td.changed { background: var(--warning-soft); }
html[data-theme="dark"] .trip-final-check.error { border-color: var(--danger); }
html[data-theme="dark"] .project-type-option:hover,
html[data-theme="dark"] .project-type-option:focus-visible { background: var(--accent-soft); }

html[data-theme="dark"] .sound-pad { background: #243c33; }
html[data-theme="dark"] .sound-clip[data-sound-color="1"] .sound-pad { background: #263c45; }
html[data-theme="dark"] .sound-clip[data-sound-color="2"] .sound-pad { background: #3b3726; }
html[data-theme="dark"] .sound-clip[data-sound-color="3"] .sound-pad { background: #402c35; }
html[data-theme="dark"] [data-utility-id="electricity"] { --utility-color: #e7bd62; }
html[data-theme="dark"] [data-utility-id="water"] { --utility-color: #70c2e6; }
html[data-theme="dark"] [data-utility-id="gas"] { --utility-color: #f38f7e; }

@media (max-width: 600px) {
  .topbar-tools { gap: 8px; }
  .topbar-tools .sync-status { display: none; }
}