/* A resolved color scheme lets the web surface and Android system bars agree. */
:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --ink: #e9e6d9;
  --green: #91ad96;
  --muted: #b0b8aa;
  --paper: #1c211e;
  --line: #414a41;
  --sage: #343d35;
  --gold: #d8bf88;
  --accent: #ca8f70;
}

:root[data-color-scheme="dark"] body {
  background: #121613;
  color: var(--ink);
}

:root[data-color-scheme="dark"] .studio {
  background: #121613;
}

:root[data-color-scheme="dark"] .studio-header,
:root[data-color-scheme="dark"] .studio-footer {
  background: #1c211e;
  border-color: var(--line);
}

:root[data-color-scheme="dark"] .studio h1,
:root[data-color-scheme="dark"] .profile-head h2,
:root[data-color-scheme="dark"] .app-title,
:root[data-color-scheme="dark"] .surface h3,
:root[data-color-scheme="dark"] .settings-block h3,
:root[data-color-scheme="dark"] .article-title,
:root[data-color-scheme="dark"] .editorial-heading h2,
:root[data-color-scheme="dark"] .cover-copy h2 {
  color: var(--ink);
}

:root[data-color-scheme="dark"] .eyebrow,
:root[data-color-scheme="dark"] .meta,
:root[data-color-scheme="dark"] .quiet,
:root[data-color-scheme="dark"] .intro,
:root[data-color-scheme="dark"] .caption,
:root[data-color-scheme="dark"] .field small,
:root[data-color-scheme="dark"] .row-card small,
:root[data-color-scheme="dark"] .surface p,
:root[data-color-scheme="dark"] .sheet p,
:root[data-color-scheme="dark"] .article-body,
:root[data-color-scheme="dark"] .chart-center small,
:root[data-color-scheme="dark"] .chart-center span {
  color: var(--muted);
}

:root[data-color-scheme="dark"] .device {
  background: var(--paper);
  border-color: #29312b;
  box-shadow: 0 24px 55px #0006, 0 0 0 1px #404940;
}

:root[data-color-scheme="dark"] .screen,
:root[data-color-scheme="dark"] .sheet {
  background: var(--paper);
  color: var(--ink);
}

:root[data-color-scheme="dark"] .status {
  color: var(--ink);
}

:root[data-color-scheme="dark"] .camera {
  background: #d9ded2;
}

:root[data-color-scheme="dark"] .bottom-nav,
:root[data-color-scheme="dark"] .gesture {
  background: #1c211e;
  border-color: var(--line);
}

:root[data-color-scheme="dark"] .bottom-nav button {
  color: #aeb5a8;
}

:root[data-color-scheme="dark"] .bottom-nav button.active {
  color: #d5c393;
}

:root[data-color-scheme="dark"] .gesture::after {
  background: #d9ded2;
}

:root[data-color-scheme="dark"] .surface,
:root[data-color-scheme="dark"] .mini-card,
:root[data-color-scheme="dark"] .pillar,
:root[data-color-scheme="dark"] .segmented {
  background: #252c27;
  border-color: var(--line);
  color: var(--ink);
}

:root[data-color-scheme="dark"] .mini-card:nth-child(2) {
  background: #302b25;
}

:root[data-color-scheme="dark"] .row-card .tile,
:root[data-color-scheme="dark"] .tag {
  background: #333d34;
  color: #d1d4ba;
}

:root[data-color-scheme="dark"] .row-card,
:root[data-color-scheme="dark"] .profile-head,
:root[data-color-scheme="dark"] .settings-block + .settings-block {
  border-color: var(--line);
}

:root[data-color-scheme="dark"] .field input,
:root[data-color-scheme="dark"] .field select,
:root[data-color-scheme="dark"] .question input,
:root[data-color-scheme="dark"] textarea,
:root[data-color-scheme="dark"] option {
  background: #171c19;
  border-color: #566257;
  color: var(--ink);
}

:root[data-color-scheme="dark"] .secondary {
  border-color: #697767;
  color: var(--ink);
}

:root[data-color-scheme="dark"] .primary {
  background: #91ad96;
  color: #17221b;
}

:root[data-color-scheme="dark"] .segmented button.active {
  background: #3b453c;
  box-shadow: none;
  color: var(--ink);
}

:root[data-color-scheme="dark"] .sheet-bg {
  background: #080b09b8;
}

:root[data-color-scheme="dark"] #toast {
  background: #d5c393;
  color: #17221b;
}

:root[data-color-scheme="dark"] .editorial-shortcuts,
:root[data-color-scheme="dark"] .cover-copy,
:root[data-color-scheme="dark"] .feature-print,
:root[data-color-scheme="dark"] .index-title,
:root[data-color-scheme="dark"] .index-row,
:root[data-color-scheme="dark"] .connection-strip,
:root[data-color-scheme="dark"] .notebook-link {
  border-color: var(--line);
}

:root[data-color-scheme="dark"] .masthead-line h1,
:root[data-color-scheme="dark"] .cover-copy h2,
:root[data-color-scheme="dark"] .feature-copy h3 {
  color: var(--ink);
}

:root[data-color-scheme="dark"] .profile-head > .avatar {
  background: #3a3d34;
  border-color: #686b5b;
}

:root[data-color-scheme="dark"] button:focus-visible,
:root[data-color-scheme="dark"] a:focus-visible {
  outline-color: #d6bd86;
}

/* Reading, journal and calendar details use the same resolved dark palette. */
:root[data-color-scheme="dark"] .saved-note p,
:root[data-color-scheme="dark"] .saved-note b,
:root[data-color-scheme="dark"] .monthly-facts dd,
:root[data-color-scheme="dark"] .almanac-guidance p,
:root[data-color-scheme="dark"] .almanac-good-hours p,
:root[data-color-scheme="dark"] .almanac-hour strong,
:root[data-color-scheme="dark"] .almanac-hour p,
:root[data-color-scheme="dark"] .article-body h3 {
  color: var(--ink);
}

:root[data-color-scheme="dark"] .kicker,
:root[data-color-scheme="dark"] .edition,
:root[data-color-scheme="dark"] .date-line,
:root[data-color-scheme="dark"] .cover-read,
:root[data-color-scheme="dark"] .editorial-shortcuts small,
:root[data-color-scheme="dark"] .connection-strip small,
:root[data-color-scheme="dark"] .index-title,
:root[data-color-scheme="dark"] .index-row small,
:root[data-color-scheme="dark"] .notebook-link span,
:root[data-color-scheme="dark"] .mini-card small,
:root[data-color-scheme="dark"] .pillar > small,
:root[data-color-scheme="dark"] .personal-tools small,
:root[data-color-scheme="dark"] .birth-record dt,
:root[data-color-scheme="dark"] .almanac-status-head small,
:root[data-color-scheme="dark"] .almanac-ganzhi,
:root[data-color-scheme="dark"] .almanac-clash,
:root[data-color-scheme="dark"] .almanac-hour small,
:root[data-color-scheme="dark"] .monthly-facts dt,
:root[data-color-scheme="dark"] .saved-note > div,
:root[data-color-scheme="dark"] .almanac-personal small,
:root[data-color-scheme="dark"] .billing-status,
:root[data-color-scheme="dark"] .billing-order dt,
:root[data-color-scheme="dark"] .waitlist-tier p {
  color: var(--muted);
}

:root[data-color-scheme="dark"] .text-button,
:root[data-color-scheme="dark"] .index-arrow,
:root[data-color-scheme="dark"] .index-num,
:root[data-color-scheme="dark"] .editorial-shortcuts span,
:root[data-color-scheme="dark"] .editorial-shortcuts svg,
:root[data-color-scheme="dark"] .personal-tools button > span,
:root[data-color-scheme="dark"] .calendar-leaf > strong,
:root[data-color-scheme="dark"] .almanac-guidance span,
:root[data-color-scheme="dark"] .almanac-hour b,
:root[data-color-scheme="dark"] .almanac-hour > span,
:root[data-color-scheme="dark"] .almanac-clash b,
:root[data-color-scheme="dark"] .almanac-good-hours b,
:root[data-color-scheme="dark"] .calendar-summary dt,
:root[data-color-scheme="dark"] .saved-note.mood-bright b {
  color: var(--gold);
}

:root[data-color-scheme="dark"] .account-error,
:root[data-color-scheme="dark"] .error {
  color: #eea58e;
}

:root[data-color-scheme="dark"] .access-status,
:root[data-color-scheme="dark"] .billing-status.confirmed {
  color: #9ecaa6;
}

:root[data-color-scheme="dark"] .almanac-hour,
:root[data-color-scheme="dark"] .almanac-good-hours,
:root[data-color-scheme="dark"] .ask-message-user,
:root[data-color-scheme="dark"] .ad-placeholder,
:root[data-color-scheme="dark"] .mood-picker button.selected,
:root[data-color-scheme="dark"] .plan-option.selected {
  background: #252c27;
  border-color: var(--line);
}

:root[data-color-scheme="dark"] .almanac-hour.selected,
:root[data-color-scheme="dark"] .mood-picker button.selected,
:root[data-color-scheme="dark"] .plan-option.selected {
  background: #343d35;
  border-color: var(--gold);
}

:root[data-color-scheme="dark"] .mood-picker button,
:root[data-color-scheme="dark"] .mood-picker button i,
:root[data-color-scheme="dark"] .mood-picker button.selected,
:root[data-color-scheme="dark"] .mood-picker button.selected i {
  color: var(--ink);
}

:root[data-color-scheme="dark"] .connection-error,
:root[data-color-scheme="dark"] .sandbox-label {
  background: #383129;
  color: var(--ink);
}

:root[data-color-scheme="dark"] .billing-review select {
  background: #171c19;
  color: var(--ink);
  border-color: #566257;
}

/* Preserve the five elements while making glyphs and their small labels legible. */
:root[data-color-scheme="dark"] .element-wood { --element-ink: #9ecaa6; --element-wash: #293d30; }
:root[data-color-scheme="dark"] .element-fire { --element-ink: #eaa18b; --element-wash: #432e29; }
:root[data-color-scheme="dark"] .element-earth { --element-ink: #d5ba87; --element-wash: #3d3527; }
:root[data-color-scheme="dark"] .element-metal { --element-ink: #daca97; --element-wash: #3b3929; }
:root[data-color-scheme="dark"] .element-water { --element-ink: #a3c5df; --element-wash: #293843; }
:root[data-color-scheme="dark"] .connection-master[data-element="木"] strong { color: #9ecaa6; }
:root[data-color-scheme="dark"] .connection-master[data-element="火"] strong { color: #eaa18b; }
:root[data-color-scheme="dark"] .connection-master[data-element="土"] strong { color: #d5ba87; }
:root[data-color-scheme="dark"] .connection-master[data-element="金"] strong { color: #daca97; }
:root[data-color-scheme="dark"] .connection-master[data-element="水"] strong,
:root[data-color-scheme="dark"] .saved-note.mood-low b { color: #a3c5df; }

@media (hover: hover) {
  :root[data-color-scheme="dark"] .editorial-shortcuts button:hover,
  :root[data-color-scheme="dark"] .index-row:hover,
  :root[data-color-scheme="dark"] .connection-strip:hover,
  :root[data-color-scheme="dark"] .notebook-link:hover,
  :root[data-color-scheme="dark"] .row-card:hover,
  :root[data-color-scheme="dark"] .personal-tools button:hover,
  :root[data-color-scheme="dark"] .access-list button:hover,
  :root[data-color-scheme="dark"] .cover-story:hover .cover-read > span {
    background: #2d352e;
  }
}

.settings-block + .settings-block {
  margin-top: 27px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.settings-block h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 550;
}

.settings-block .field {
  margin-top: 12px;
}