:root[data-theme="dark"]{
  color-scheme: dark;
  --text: #e0ece6;
  --ink: #e0ece6;
  --page: #101c18;
  --muted: #adbfb6;
  --brand: #7cdbc0;
  --brand-hover: #a0ead3;
  --on-brand: #102b24;
  --line: #354d43;
  --soft: #20372f;
  --white: #182923;
  --focus: #f3b66b;
  --warm-bg: #3c342a;
  --warm-text: #ddc9a9;
  --nav: #b3c9bd;
  --active-soft: #244438;
  --active-text: #a2e7ca;
  --secondary-text: #b8dccb;
  --field-border: #688477;
  --placeholder: #9ab0a4;
  --error: #ffb7aa;
  --danger-bg: #422b29;
  --danger-text: #ffc1b5;
  --danger-line: #80564b;
  --success-bg: #213b2c;
  --success-text: #b5e1bc;
  --success-line: #476a50;
  --table-head: #15241e;
  --subtle-line: #30483b;
  --hover: #20392f;
  --badge-bg: #2b3e34;
  --badge-text: #c2d2c7;
  --inbox-bg: #35392d;
  --inbox-text: #d9ddc3;
  --ready-bg: #2c3b48;
  --ready-text: #bacfe7;
  --progress-bg: #203b52;
  --progress-text: #acd0ff;
  --blocked-bg: #493922;
  --blocked-text: #f4d295;
  --done-bg: #244438;
  --done-text: #b0e5bf;
  --canceled-bg: #472c2d;
  --canceled-text: #ffc1bb;
  --warning-text: #f4ba7a;
  --board: #14251e;
  --control-border: #688477;
  --checked-bg: #244438;
  --selected: #7cdbc0;
  --overdue: #ffb49f;
  --accent-text: #93cbb5;
}

/* A device preference, available before sign-in as well as inside the app. */
.appearance{position:relative;flex-shrink:0;font-size:13px;color:var(--ink);z-index:20}
.appearance[hidden]{display:none}
.appearance>summary{display:flex;align-items:center;gap:9px;list-style:none;min-height:44px;padding:8px 12px;border:1px solid var(--field-border);border-radius:7px;font-size:13px;font-weight:500;background:var(--white);cursor:pointer}
.appearance>summary::-webkit-details-marker{display:none}
.appearance>summary:hover,.appearance[open]>summary{background:var(--soft)}
.appearance-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex-shrink:0}
.appearance-chevron{margin-left:4px;color:var(--muted)}
.appearance-panel{position:absolute;right:0;top:calc(100% + 8px);width:328px;max-width:calc(100vw - 32px);padding:18px;background:var(--white);border:1px solid var(--field-border);border-radius:12px;box-shadow:0 12px 36px rgb(0 0 0 / 18%);text-align:left;z-index:20}
.appearance-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;margin-bottom:18px}
.appearance-mode select{width:154px;min-height:44px;font-size:13px}
.palette-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0;min-width:0}
.palette-options legend{font-size:13px;font-weight:600;margin-bottom:12px;padding:0}
.palette-option{display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;cursor:pointer;font-size:12px;font-weight:500;min-width:0}
.palette-option:hover{background:var(--soft)}
.palette-option:has(input:checked){background:var(--soft);border-color:var(--brand)}
.palette-option input[type=radio]{order:2;width:16px;height:16px;min-height:16px;padding:0;margin:0 0 0 auto;accent-color:var(--brand);flex-shrink:0}
.palette-swatch{width:16px;height:16px;flex-shrink:0;border:1px solid var(--field-border);border-radius:50%;background:linear-gradient(135deg,var(--swatch-light) 50%,var(--swatch-dark) 50%)}
.appearance-panel>.help{margin:14px 0 0;font-size:12px;line-height:1.5}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
.topbar{gap:12px;min-height:64px;height:auto;padding-top:10px;padding-bottom:10px}
.auth-header{flex-wrap:wrap}
.auth-header>.muted{margin-left:auto}
@media(max-width:650px){
  .topbar{flex-wrap:wrap;min-height:60px}
  .topbar-actions{gap:8px;margin-left:auto}
  .private-label{font-size:11px;padding:4px 8px;white-space:nowrap}
  .auth-header{gap:12px}
  .topbar,.auth-header{position:relative}
  .topbar .appearance,.auth-header>.appearance{position:static}
  .auth-header>.appearance{margin-left:auto}
  .auth-header{padding-left:16px;padding-right:16px;gap:10px}
  .appearance-panel{right:16px;max-width:calc(100% - 32px);padding:12px}
  .palette-option{gap:6px;padding:8px}
}