:root {
  color-scheme: light;
  --asc-bg: #ffffff;
  --asc-surface: #f7f8fa;
  --asc-card: #ffffff;
  --asc-text: #101319;
  --asc-muted: #5f6673;
  --asc-accent: #5b6cff;
  --asc-accent-hover: #4658e8;
  --asc-accent-tint: color-mix(in srgb, var(--asc-accent) 10%, transparent);
  --asc-success: #16a34a;
  --asc-warning: #b45309;
  --asc-danger: #dc2626;
  --asc-line: #e5e7eb;
  --asc-space-1: 4px;
  --asc-space-2: 8px;
  --asc-space-3: 12px;
  --asc-space-4: 16px;
  --asc-space-5: 24px;
  --asc-space-6: 32px;
  --asc-space-7: 48px;
  --asc-radius-sm: 6px;
  --asc-radius-md: 10px;
  --asc-radius-lg: 14px;
  --asc-radius-xl: 20px;
  --asc-shadow-hover: 0 12px 32px rgba(16, 19, 25, .10);
  --asc-focus: 0 0 0 3px color-mix(in srgb, var(--asc-accent) 25%, transparent);
  --asc-transition: 180ms cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --asc-bg: #0f1115;
    --asc-surface: #171a21;
    --asc-card: #171a21;
    --asc-text: #f2f4f8;
    --asc-muted: #a4abb8;
    --asc-line: #2b303a;
    --asc-warning: #f59e0b;
    --asc-shadow-hover: 0 12px 32px rgba(0, 0, 0, .28);
  }
}

/* Optional explicit theme switch for a future settings control. */
html[data-theme="light"] {
  color-scheme: light;
  --asc-bg: #ffffff;
  --asc-surface: #f7f8fa;
  --asc-card: #ffffff;
  --asc-text: #101319;
  --asc-muted: #5f6673;
  --asc-line: #e5e7eb;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --asc-bg: #0f1115;
  --asc-surface: #171a21;
  --asc-card: #171a21;
  --asc-text: #f2f4f8;
  --asc-muted: #a4abb8;
  --asc-line: #2b303a;
  --asc-warning: #f59e0b;
}

html, body { background: var(--asc-bg); color: var(--asc-text); }
body { font-size: 15px; line-height: 1.7; }
.app { max-width: 1320px; }
.card, .stat, .atlas-card, .settings-card, .acard, .stset {
  background: var(--asc-card);
  border-color: var(--asc-line);
  border-radius: var(--asc-radius-lg);
  box-shadow: none;
  transition: border-color var(--asc-transition), box-shadow var(--asc-transition), transform var(--asc-transition);
}
.card:hover, .stat:hover, .atlas-card:hover, .settings-card:hover { box-shadow: var(--asc-shadow-hover); }
button, input, select, textarea { transition: border-color var(--asc-transition), background-color var(--asc-transition), box-shadow var(--asc-transition), color var(--asc-transition); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--asc-focus); }
.btn { background: var(--asc-accent); border-color: var(--asc-accent); }
.btn:hover { background: var(--asc-accent-hover); border-color: var(--asc-accent-hover); }
.btn.ghost { background: transparent; color: var(--asc-accent); border-color: color-mix(in srgb, var(--asc-accent) 35%, var(--asc-line)); }
.btn.ghost:hover { background: var(--asc-accent-tint); }
.muted, .hint, .atlas-muted, .atlas-privacy, .settings-head p { color: var(--asc-muted); }
.good, .up { color: var(--asc-success); }
.bad, .down { color: var(--asc-danger); }
.warn { color: var(--asc-warning); }

/* Wide dashboard: sidebar + readable center + supporting rail. Existing JS/DOM remains unchanged. */
@media (min-width: 1024px) {
  .app { width: 100%; max-width: none; min-height: 100vh; display: grid; grid-template-columns: minmax(240px, 260px) minmax(520px, 720px) minmax(300px, 320px); justify-content: center; gap: var(--asc-space-6); padding: var(--asc-space-5) var(--asc-space-6) 64px; }
  .topbar { grid-column: 1 / -1; width: 100%; }
  .hero { grid-column: 1; grid-row: 2; position: sticky; top: var(--asc-space-5); margin: 0; padding: var(--asc-space-5); background: var(--asc-card); border: 1px solid var(--asc-line); border-radius: var(--asc-radius-lg); }
  .nav { grid-column: 1; grid-row: 3; position: sticky; top: 270px; width: 100%; align-self: start; }
  #main { grid-column: 2 / 4; grid-row: 2 / 4; width: 100%; max-width: 1040px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card, .settings-card { padding: var(--asc-space-5); }
  .stat b { font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .nav button { min-height: 44px; }
}

@media (min-width: 1440px) {
  .app { grid-template-columns: 260px minmax(640px, 760px) 320px; gap: var(--asc-space-7); }
  #main { max-width: 1080px; }
}

@media (max-width: 1023px) {
  .app { max-width: 960px; }
}

@media (max-width: 767px) {
  .app { max-width: 100%; }
  .card, .settings-card { padding: var(--asc-space-4); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 24px; }
}

@media (max-width: 380px) {
  body { font-size: 14px; }
  .stats { gap: var(--asc-space-2); }
  .stat { padding: var(--asc-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ASCEND theme presets */
html[data-theme="midnight"] { --asc-bg:#0f1115; --asc-surface:#171a21; --asc-card:#171a21; --asc-text:#f2f4f8; --asc-muted:#a4abb8; --asc-line:#2b303a; --asc-accent:#7c8cff; }
html[data-theme="paper"] { --asc-bg:#fffdf8; --asc-surface:#f4f1e9; --asc-card:#ffffff; --asc-text:#25231f; --asc-muted:#706b61; --asc-line:#e5dfd3; --asc-accent:#9a642f; }
html[data-theme="ocean"] { --asc-bg:#eef8fb; --asc-surface:#e1f1f5; --asc-card:#ffffff; --asc-text:#12313b; --asc-muted:#58717a; --asc-line:#c9e0e6; --asc-accent:#087f9b; }
html[data-theme="forest"] { --asc-bg:#f1f7f1; --asc-surface:#e3efe4; --asc-card:#ffffff; --asc-text:#183322; --asc-muted:#607263; --asc-line:#cfe0d0; --asc-accent:#2f7d4b; }
html[data-theme="sunset"] { --asc-bg:#fff7f1; --asc-surface:#f9e9dc; --asc-card:#ffffff; --asc-text:#38231b; --asc-muted:#81695d; --asc-line:#eed5c4; --asc-accent:#d46a36; }
html[data-theme="lavender"] { --asc-bg:#f8f6ff; --asc-surface:#eeeafd; --asc-card:#ffffff; --asc-text:#28213d; --asc-muted:#756d8a; --asc-line:#ddd6f4; --asc-accent:#7657c7; }
.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0 18px; }
.theme-choice { display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; gap:0 9px; align-items:center; min-height:64px; padding:10px; text-align:start; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:14px; cursor:pointer; }
.theme-choice i { grid-row:1 / 3; width:28px; height:28px; border-radius:50%; background:var(--theme-dot,#7c8cff); border:4px solid color-mix(in srgb,var(--theme-dot,#7c8cff) 28%,transparent); }
.theme-choice b { font-size:13px; }
.theme-choice small { color:var(--muted); font-size:10px; line-height:1.5; }
.theme-choice.on { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent); }
.theme-midnight { --theme-dot:#7c8cff; }.theme-paper { --theme-dot:#9a642f; }.theme-ocean { --theme-dot:#087f9b; }.theme-forest { --theme-dot:#2f7d4b; }.theme-sunset { --theme-dot:#d46a36; }.theme-lavender { --theme-dot:#7657c7; }
@media(max-width:520px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.theme-choice{padding:8px;}}