:root {
  /* Dark theme — neutral monochrome: soft black + white tints + accent.
     Surfaces are white-alpha overlays so everything is the same black, just
     lightened, rather than a pile of distinct blue-greys. */
  --bg-0: #151517;
  --surface: rgba(26, 26, 28, 0.66);
  --surface-2: rgba(20, 20, 22, 0.7);
  --surface-bright: rgba(255, 255, 255, 0.065);
  --ink: #f4f4f5;
  --ink-dim: rgba(255, 255, 255, 0.56);
  --ink-faint: rgba(255, 255, 255, 0.34);
  --line: rgba(255, 255, 255, 0.07);
  --line-bright: rgba(255, 255, 255, 0.14);
  --accent: #e8e9ec;
  --online: #6fcf97;
}

/* Light theme — same design, swapped colors (dark grey/white → white/black) */
body[data-theme="light"] {
  --bg-0: #f1f2f5;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-2: rgba(244, 245, 248, 0.7);
  --surface-bright: rgba(255, 255, 255, 0.82);
  --ink: #1a1b1f;
  --ink-dim: #54565d;
  --ink-faint: #8a8b93;
  --line: rgba(0, 0, 0, 0.10);
  --line-bright: rgba(0, 0, 0, 0.16);
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-0);
  color: var(--ink);
  position: relative;
  color-scheme: dark;
}

/* ---- ambient cloud field (shared across pages) ---- */
.clouds { position: fixed; inset: 0; overflow: hidden; z-index: 0; filter: blur(28px); pointer-events: none; }
.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(120,122,132,0.5), rgba(60,62,70,0.12) 60%, transparent 72%);
  will-change: transform;
}
.c1 { width: 540px; height: 540px; top: -12%; left: -8%; }
.c2 { width: 460px; height: 460px; bottom: -16%; right: -6%; background: radial-gradient(circle at 40% 40%, rgba(95,97,108,0.45), transparent 68%); }
.c3 { width: 360px; height: 360px; top: 38%; left: 60%; background: radial-gradient(circle at 50% 50%, rgba(140,142,150,0.32), transparent 66%); }
.c4 { width: 300px; height: 300px; bottom: 18%; left: 12%; background: radial-gradient(circle at 50% 50%, rgba(80,82,92,0.4), transparent 70%); }

body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ico { display: inline-flex; align-items: center; justify-content: center; }
.ico svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* glass surfaces reusable */
.glass {
  background: var(--surface);
  border: 1px solid var(--line-bright);
  backdrop-filter: blur(40px) saturate(120%);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
}

button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}