:root {
  --bg1: #f7f7fb;
  --bg2: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --card: rgba(255, 255, 255, 0.78);
  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

html, body {
  height: 100%;
}

body {
  color: var(--text);
  background: radial-gradient(900px circle at 10% 10%, rgba(15, 23, 42, 0.06), transparent 60%),
              radial-gradient(700px circle at 90% 10%, rgba(2, 132, 199, 0.10), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}

.navbar-blur {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.hero {
  padding-top: 1.5rem;
}

.glass-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
}

.mini-tile {
  display: flex;
  gap: .75rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: .75rem;
  background: rgba(255,255,255,0.6);
}

.tile-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.25);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.8);
}

.icon-bubble {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid var(--border);
}

.auth-bg,
.error-bg {
  background: radial-gradient(800px circle at 50% 0%, rgba(2, 132, 199, 0.10), transparent 50%),
              radial-gradient(700px circle at 20% 90%, rgba(15, 23, 42, 0.08), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}

.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.9);
  display: inline-block;
}

.error-code {
  font-size: clamp(4rem, 10vw, 7rem);
  letter-spacing: -0.06em;
  font-weight: 800;
  line-height: 1;
  color: rgba(15, 23, 42, 0.15);
  margin-bottom: 0.5rem;
}

/* Dark theme (toggled via JS) */
body.theme-dark {
  --bg1: #0b1220;
  --bg2: #070b14;
  --text: #e5e7eb;
  --muted: #a1a1aa;
  --card: rgba(17, 24, 39, 0.60);
  --border: rgba(226, 232, 240, 0.12);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body.theme-dark .navbar-blur {
  background: rgba(17, 24, 39, 0.5);
}

body.theme-dark .text-secondary,
body.theme-dark .link-secondary {
  color: rgba(226, 232, 240, 0.7) !important;
}

body.theme-dark .btn-outline-dark {
  color: rgba(226, 232, 240, 0.9);
  border-color: rgba(226, 232, 240, 0.35);
}