/* The saved account appearance also covers access and registration. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f3f2;
  --muted: #a7ada9;
  --line: #3b3e40;
  --surface: #18191a;
  background: #0f1011;
  color: var(--ink);
}

html[data-theme="dark"] body::after {
  background:
    radial-gradient(circle at 16% 12%, rgba(83, 157, 88, .18), transparent 31rem),
    radial-gradient(circle at 86% 45%, rgba(0, 0, 0, .64), transparent 34rem),
    linear-gradient(115deg, rgba(10, 42, 24, .83), rgba(6, 31, 18, .92) 52%, rgba(2, 17, 10, .97));
}

html[data-theme="dark"] .card {
  border-color: #3a3d3e;
  background: rgba(24, 25, 26, .985);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 4px 14px rgba(0, 0, 0, .24);
}
html[data-theme="dark"] .card-heading h2,
html[data-theme="dark"] .view-title h2 { color: var(--ink); }
html[data-theme="dark"] .card-heading p,
html[data-theme="dark"] .view-title p,
html[data-theme="dark"] .recovery-copy,
html[data-theme="dark"] .oauth-status { color: var(--muted); }
html[data-theme="dark"] .facade-form label,
html[data-theme="dark"] .select-label,
html[data-theme="dark"] .birthdate-field legend { color: #d9ddda; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .birthdate-trigger {
  border-color: var(--line);
  background-color: #232526;
  color: var(--ink);
}
html[data-theme="dark"] input::placeholder { color: #858b87; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .birthdate-trigger:hover { background: #292b2c; }
html[data-theme="dark"] select,
html[data-theme="dark"] .date-picker-grid select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23b7bdb9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
html[data-theme="dark"] .date-picker-grid select { background-position: right 10px center; }
html[data-theme="dark"] .show-password { color: #aeb4b0; }
html[data-theme="dark"] .show-password:hover { background: #3a2327; color: #ff8294; }
html[data-theme="dark"] .remember { color: #c5cac7 !important; }
html[data-theme="dark"] .divider,
html[data-theme="dark"] .oauth-separator { color: var(--muted); }
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after,
html[data-theme="dark"] .oauth-separator::before,
html[data-theme="dark"] .oauth-separator::after,
html[data-theme="dark"] .view-title { border-color: var(--line); }
html[data-theme="dark"] .social-button,
html[data-theme="dark"] .oauth-button,
html[data-theme="dark"] .close-link,
html[data-theme="dark"] .auth-legal-back {
  border-color: var(--line);
  background: #242627;
  color: var(--ink);
}
html[data-theme="dark"] .social-button:hover,
html[data-theme="dark"] .oauth-button:hover,
html[data-theme="dark"] .close-link:hover,
html[data-theme="dark"] .auth-legal-back:hover { border-color: #55595b; background: #2b2d2f; }
html[data-theme="dark"] .social-button .apple-mark { fill: #fff; }
html[data-theme="dark"] .verification-mark,
html[data-theme="dark"] .birthdate-icon { background: #24392d; color: #7fdba1; }
html[data-theme="dark"] .birthdate-copy strong { color: #d2d6d3; }
html[data-theme="dark"] .birthdate-copy small,
html[data-theme="dark"] .birthdate-chevron { color: #929894; }
html[data-theme="dark"] .birthdate-trigger[aria-invalid="true"] { background: #322023; }
html[data-theme="dark"] .birthdate-dialog::backdrop { background: rgba(0, 0, 0, .76); }
html[data-theme="dark"] .birthdate-picker {
  border-color: #3b3e40;
  background: #18191a;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .birthdate-picker-heading p,
html[data-theme="dark"] .date-picker-grid label { color: var(--muted); }
html[data-theme="dark"] .sheet-close,
html[data-theme="dark"] .picker-secondary { border-color: var(--line); background: #242627; color: var(--ink); }
html[data-theme="dark"] .date-picker-grid select { border-color: var(--line); background-color: #232526; color: var(--ink); }
html[data-theme="dark"] .legal { color: var(--muted); }
html[data-theme="dark"] .legal a { color: #87dba7; }
html[data-theme="dark"] .register-section { color: #aab0ac; }
html[data-theme="dark"] .auth-legal-overlay,
html[data-theme="dark"] .auth-legal-loading { background: #0f1011; color: var(--muted); }
html[data-theme="dark"] .auth-legal-bar {
  border-color: var(--line);
  background: rgba(24, 25, 26, .98);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .auth-legal-heading strong { color: var(--ink); }
html[data-theme="dark"] .auth-legal-heading small { color: var(--muted); }
html[data-theme="dark"] .auth-legal-content iframe { background: #0f1011; }
html[data-theme="dark"] footer { background: rgba(24, 25, 26, .98); color: #a2a8a4; }

html[data-theme="dark"] .intro-register-cta,
html[data-theme="dark"] .intro-register-cta:hover {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(15, 16, 17, .88);
  color: #f4f5f4;
}

html[data-theme="dark"] .birthdate-picker-actions {
  background: var(--surface) !important;
}

@media (max-width: 880px) {
  html[data-theme="dark"] .card { border-color: var(--line); background: #18191a; }
  html[data-theme="dark"] footer { border-color: var(--line); }
  html[data-theme="dark"] body[data-view="register"],
  html[data-theme="dark"] body[data-view="forgot"],
  html[data-theme="dark"] body[data-view="verify"],
  html[data-theme="dark"] body[data-view="register"]::before,
  html[data-theme="dark"] body[data-view="forgot"]::before,
  html[data-theme="dark"] body[data-view="verify"]::before {
    background: #0f1011;
  }
  html[data-theme="dark"] body[data-view="register"] .view-title,
  html[data-theme="dark"] body[data-view="forgot"] .view-title {
    border-color: var(--line);
    background: rgba(24, 25, 26, .98);
  }
}