:root {
  --color-bg:             #f5f7fa;
  --color-bg-nav:         #ffffff;
  --color-bg-surface:     #ffffff;
  --color-bg-bubble:      #ffffff;
  --color-bg-subtle:      #f3f4f6;

  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6b7280;

  --color-accent:         #1d4ed8;
  --color-accent-bg:      #dbeafe;
  --color-accent-hover:   #1e40af;

  --color-border:         rgba(0,0,0,0.08);
  --color-border-strong:  rgba(0,0,0,0.15);

  --color-cta-bg:         #1d4ed8;
  --color-cta-text:       #ffffff;
  --color-cta-hover:      #1e40af;

  --color-success-bg:     #dcfce7;
  --color-success-text:   #166534;
  --color-warning-bg:     #fef9c3;
  --color-warning-text:   #854d0e;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #0f1117;
    --color-bg-nav:         #181b23;
    --color-bg-surface:     #181b23;
    --color-bg-bubble:      #1f2937;
    --color-bg-subtle:      #1f2937;

    --color-text-primary:   #f9fafb;
    --color-text-secondary: #e5e7eb;
    --color-text-muted:     #6b7280;

    --color-accent:         #93c5fd;
    --color-accent-bg:      #1e3a8a;
    --color-accent-hover:   #bfdbfe;

    --color-border:         rgba(255,255,255,0.07);
    --color-border-strong:  rgba(255,255,255,0.12);

    --color-cta-bg:         #2563eb;
    --color-cta-text:       #ffffff;
    --color-cta-hover:      #3b82f6;

    --color-success-bg:     #14532d;
    --color-success-text:   #86efac;
    --color-warning-bg:     #713f12;
    --color-warning-text:   #fde68a;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-family: var(--font); background: var(--color-bg); color: var(--color-text-primary); }

body { min-height: 100vh; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Buttons ─────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--color-cta-hover); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: var(--color-bg-subtle); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Input ───────────────────────────────────────────── */

.input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 14px;
  transition: border-color 0.15s;
}
.input:hover { border-color: var(--color-accent); }
.input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-bg); }

/* ── Skip link ───────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { top: 16px; }

/* ── Nav ─────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--color-bg-nav);
  border-bottom: 1px solid var(--color-border);
  gap: 16px;
}

.nav-wordmark {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-site-switcher {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-site-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.nav-site-pill svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.nav-email {
  font-size: 13px;
  color: var(--color-text-muted);
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.nav-link:hover { color: var(--color-text-primary); }

@media (max-width: 640px) {
  .nav-email { display: none; }
}