/* light-dark() follows color-scheme, including native date and password fields. */
:root {
  color-scheme: light dark;
  --page: light-dark(#f6f7f3, #111915);
  --surface: light-dark(#ffffff, #1a251f);
  --text: light-dark(#23362f, #e5eee7);
  --muted: light-dark(#64756b, #a8b9ac);
  --subtle-text: light-dark(#77876f, #a1b19e);
  --green: light-dark(#175c43, #8ed2ac);
  --primary-hover: light-dark(#104b35, #a5dfbd);
  --on-primary: light-dark(#ffffff, #102d20);
  --line: light-dark(#e3e8e1, #34443a);
  --input-border: light-dark(#d8dfd5, #526658);
  --border-strong: light-dark(#b8ccb5, #69876d);
  --soft-surface: light-dark(#edf1e9, #26392c);
  --soft-text: light-dark(#53694e, #b2cfab);
  --green-surface: light-dark(#e9f0e5, #20372a);
  --green-border: light-dark(#dbe5d4, #3c5941);
  --sand-surface: light-dark(#f7f1df, #3b3321);
  --sand-text: light-dark(#7d692d, #e5cd8d);
  --purple-surface: light-dark(#efedfa, #332c44);
  --purple-text: light-dark(#7d68a7, #cab7ee);
  --red-surface: light-dark(#fbe9e7, #41292a);
  --red: light-dark(#a73535, #f3a29c);
  --red-button: light-dark(#aa3939, #b74545);
  --red-hover: light-dark(#8e2b2b, #9d3535);
  --on-danger: #ffffff;
  --progress: light-dark(#59915e, #8ed2ac);
  --notice-bg: light-dark(#eef4e6, #263a25);
  --notice-text: light-dark(#405b30, #c5ddb7);
  --note-bg: light-dark(#fffef7, #253125);
  --focus: light-dark(#a4813c, #e9c579);
  --shadow: light-dark(#175c4310, #00000024);
  --shadow-soft: light-dark(#24382a06, #00000018);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.theme-picker { position: relative; }
.theme-picker > summary { list-style: none; }
.theme-picker[open] > summary { margin-bottom: 0; background: var(--soft-surface); }
.theme-menu { position: absolute; right: 0; top: 52px; width: 205px; padding: 8px; z-index: 5; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 12px 35px #00000020; }
.theme-menu-title { display: block; padding: 9px 11px; font-size: 11px; color: var(--muted); }
.theme-option { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; min-height: 44px; border: 0; border-radius: 8px; padding: 10px 11px; background: transparent; color: var(--text); text-align: left; font-size: 13px; }
.theme-option:hover, .theme-option[aria-pressed="true"] { background: var(--soft-surface); color: var(--green); }