:root { color-scheme: light; }

body {
  transition: background-color .25s ease, color .25s ease;
}

body.dark {
  color-scheme: dark;
  --bg: #0e1319;
  --paper: #161d27;
  --ink: #e4eaf2;
  --muted: #93a1b4;
  --line: #2a3542;
  --blue: #5ea9dd;
  --blue-dark: #8fc6ef;
  --blue-soft: #16222e;
  --shadow: 0 18px 48px rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 8% 0%, rgba(94, 169, 221, .08), transparent 30rem),
    linear-gradient(180deg, #10161e 0, var(--bg) 34rem);
}

body.dark .lead { color: #aebacb; }
body.dark footer { color: #6b7889; }
body.dark .portal,
body.dark .card,
body.dark .publication,
body.dark .feature,
body.dark .gallery,
body.dark .report-link,
body.dark .project-list { background: var(--paper); }
body.dark .portal { box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
body.dark .portal:hover { border-color: #3c5a75; }
body.dark .number { color: #5f6f83; }
body.dark .scale,
body.dark .stack span { background: var(--blue-soft); border-color: var(--line); }
body.dark .cover-link { background: linear-gradient(145deg, #111922, #18212c); }
body.dark .cover-link img { background: #fff; }

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(26, 55, 90, .06);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.back:hover {
  color: var(--blue);
  border-color: var(--blue);
  transform: translateY(-1px);
}

.back:focus-visible {
  outline: 3px solid rgba(18, 100, 163, .22);
  outline-offset: 3px;
}

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(26, 55, 90, .16);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--blue); }
.theme-toggle:focus-visible { outline: 3px solid rgba(18, 100, 163, .28); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}