/* --- Account appearance: system, light, and dark --- */
:root {
  color-scheme: dark;
  --on-brand-gradient: #090811;
  --app-background:
    radial-gradient(circle at 12% 0%, rgba(155, 108, 255, 0.22), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(105, 229, 255, 0.16), transparent 24%),
    radial-gradient(circle at 52% 100%, rgba(240, 201, 127, 0.12), transparent 24%),
    #06060a;
  --device-background: linear-gradient(180deg, rgba(10, 10, 16, 0.96), rgba(8, 8, 12, 0.98));
  --rail-background: linear-gradient(180deg, rgba(15, 15, 22, 0.92), rgba(10, 10, 16, 0.88));
  --elevated-background: linear-gradient(180deg, rgba(16, 16, 24, 0.92), rgba(9, 9, 14, 0.96));
  --glass-background: rgba(12, 12, 18, 0.68);
  --glass-quiet: rgba(255, 255, 255, 0.04);
  --bottom-nav-background: linear-gradient(180deg, rgba(7, 7, 10, 0) 0%, rgba(7, 7, 10, 0.9) 20%, var(--surface-1) 100%);
  --profile-identity-background: linear-gradient(180deg, rgba(11, 11, 18, 0.92), rgba(11, 11, 18, 0.72));
  --intro-backdrop:
    radial-gradient(circle at 20% 20%, rgba(155, 108, 255, 0.24), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(105, 229, 255, 0.18), transparent 26%),
    radial-gradient(circle at 50% 82%, rgba(240, 201, 127, 0.14), transparent 24%),
    rgba(5, 5, 8, 0.94);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2ec;
  --surface-1: rgba(255, 255, 255, 0.94);
  --surface-2: rgba(249, 247, 252, 0.98);
  --surface-3: rgba(235, 231, 241, 0.96);
  --surface-4: rgba(220, 216, 229, 0.96);
  --border: rgba(35, 28, 52, 0.12);
  --border-light: rgba(35, 28, 52, 0.2);
  --text-1: #181522;
  --text-2: #514b5f;
  --text-3: #6d667a;
  --cyan: #006f84;
  --cyan-dim: #005b6d;
  --violet: #6840bd;
  --violet-dim: #56329f;
  --gold: #8a641d;
  --gold-bright: #74510f;
  --danger: #b4233b;
  --success: #087a57;
  --shadow-soft: 0 22px 52px rgba(49, 38, 68, 0.12), 0 2px 8px rgba(49, 38, 68, 0.06);
  --shadow-violet: 0 12px 32px rgba(104, 64, 189, 0.18);
  --shadow-cyan: 0 12px 32px rgba(0, 111, 132, 0.16);
  --shadow-gold: 0 12px 32px rgba(138, 100, 29, 0.18);
  --app-background:
    radial-gradient(circle at 8% 0%, rgba(155, 108, 255, 0.16), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(105, 229, 255, 0.14), transparent 27%),
    radial-gradient(circle at 50% 100%, rgba(240, 201, 127, 0.16), transparent 30%),
    #f5f2ec;
  --device-background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 251, 0.98));
  --rail-background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 242, 249, 0.94));
  --elevated-background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 243, 250, 0.98));
  --glass-background: rgba(255, 255, 255, 0.74);
  --glass-quiet: rgba(35, 28, 52, 0.045);
  --bottom-nav-background: linear-gradient(180deg, rgba(245, 242, 236, 0) 0%, rgba(250, 248, 252, 0.92) 22%, rgba(255, 255, 255, 0.98) 100%);
  --profile-identity-background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 246, 251, 0.9));
  --intro-backdrop:
    radial-gradient(circle at 20% 20%, rgba(155, 108, 255, 0.18), transparent 30%),
    radial-gradient(circle at 80% 18%, rgba(105, 229, 255, 0.16), transparent 28%),
    radial-gradient(circle at 50% 82%, rgba(240, 201, 127, 0.18), transparent 28%),
    rgba(245, 242, 236, 0.96);
}

html,
body,
.field {
  color-scheme: inherit;
}

.app-body {
  background: var(--app-background);
}

.device-shell {
  background: var(--device-background);
}

.shell-rail {
  background: var(--rail-background);
}

.rail-profile-card,
.floating-brand,
.landing-brand {
  border-color: var(--border);
  background: var(--glass-background);
}

.profile-identity {
  border-color: var(--border);
  background: var(--profile-identity-background);
}

.feature-panel,
.spotlight-art-card,
.intro-overlay-content,
.landing-demo-box,
.landing-visual-shell,
.landing-step-card,
.landing-system-panel,
.landing-final-cta {
  border-color: var(--border);
  background: var(--elevated-background);
}

.landing-stat-row .stat-box,
.landing-brand-seal,
.landing-float-card,
.landing-radar-chip,
.hero-stack-polished .preview-card {
  border-color: var(--border);
  background: var(--glass-background);
}

.landing-step-index,
.hero-bullets span,
.intro-words span,
.locale-switch,
.button-ghost,
.pill {
  border-color: var(--border);
  background: var(--glass-quiet);
}

.bottom-nav {
  background: var(--bottom-nav-background);
}

.intro-overlay-backdrop {
  background: var(--intro-backdrop);
}

.brand-mark-svg,
.floating-brand img,
.landing-brand img {
  filter: drop-shadow(0 8px 18px rgba(5, 5, 10, 0.24));
}

:root[data-theme="light"] .theme-logo-lockup {
  content: url("../brand/logo-lockup-light.svg");
}

:root[data-theme="light"] .profile-identity .hero-title,
:root[data-theme="light"] .profile-identity .body-muted {
  text-shadow: none;
}

:root[data-theme="light"] .ambient-a {
  background: radial-gradient(circle at 24% 18%, rgba(104, 64, 189, 0.1) 0, transparent 44%);
}

:root[data-theme="light"] .ambient-b {
  background: radial-gradient(circle at 74% 78%, rgba(0, 111, 132, 0.08) 0, transparent 42%);
}

:root[data-theme="light"] .device-shell {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 34px 76px rgba(54, 43, 70, 0.17),
    0 0 80px rgba(104, 64, 189, 0.08);
}

:root[data-theme="light"] .landing-visual-shell::before {
  background:
    linear-gradient(rgba(35, 28, 52, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 28, 52, 0.055) 1px, transparent 1px);
}

:root[data-theme="light"] :is(
  .preview-card-meta,
  .hero-content,
  .winner-card .hero-content
) {
  color: #f7f7fb;
}

:root[data-theme="light"] :is(
  .preview-card-meta .body-muted,
  .hero-content .hero-subtitle,
  .winner-card .hero-subtitle
) {
  color: #d6d4df;
}

:root[data-theme="light"] .hero-score {
  background: rgba(7, 7, 10, 0.78);
  color: #69e5ff;
}

:root[data-theme="light"] .notice-danger {
  color: var(--danger);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.appearance-panel {
  padding: clamp(18px, 3vw, 24px);
}

.appearance-current {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(105, 229, 255, 0.24);
  border-radius: 999px;
  background: rgba(105, 229, 255, 0.08);
  color: var(--cyan);
  font-weight: 700;
}

.appearance-intro {
  max-width: 62ch;
  margin: 10px 0 0;
  line-height: 1.55;
}

.theme-choice-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-choice {
  position: relative;
  min-width: 0;
  min-height: 156px;
  padding: 12px;
  display: grid;
  grid-template-rows: 58px 1fr;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.theme-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(105, 229, 255, 0.34);
}

.theme-choice:focus-within {
  outline: 3px solid rgba(105, 229, 255, 0.2);
  outline-offset: 2px;
}

.theme-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.theme-choice:has(input:checked) {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), var(--shadow-cyan);
}

.theme-choice-preview {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 13px;
}

.theme-choice-preview::before,
.theme-choice-preview::after,
.theme-choice-preview > span {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.theme-choice-preview::before {
  inset: 10px 12px auto;
  height: 8px;
  background: linear-gradient(90deg, #9b6cff, #69e5ff);
}

.theme-choice-preview::after {
  left: 12px;
  right: 34%;
  bottom: 12px;
  height: 6px;
  opacity: 0.65;
  background: currentColor;
}

.theme-choice-preview > span {
  right: 12px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f0c97f, #9b6cff 55%, #69e5ff);
}

.theme-choice-preview-system {
  color: #575064;
  background: linear-gradient(115deg, #f7f4ee 0 49%, #111119 51% 100%);
}

.theme-choice-preview-light {
  color: #575064;
  background: #f7f4ee;
}

.theme-choice-preview-dark {
  color: #b7b7c9;
  background: #111119;
}

.theme-choice-copy {
  display: grid;
  align-content: start;
  gap: 5px;
}

.theme-choice-copy strong {
  font-size: 13px;
}

.theme-choice-copy small {
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.45;
}

.theme-choice-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--on-brand-gradient);
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.theme-choice input:checked ~ .theme-choice-check {
  opacity: 1;
  transform: scale(1);
}

.appearance-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.appearance-actions p {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .theme-choice-grid {
    grid-template-columns: 1fr;
  }

  .theme-choice {
    min-height: 94px;
    grid-template-columns: 92px 1fr;
    grid-template-rows: 1fr;
    align-items: center;
  }

  .theme-choice-preview {
    height: 58px;
  }

  .appearance-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-choice,
  .theme-choice-check {
    transition: none;
  }
}