/* ============================================================
   Premium nightlife referral engine — design system
   - Dark base, vibrant gradient accents (configurable per campaign)
   - Geist (Vercel/Stripe-style clean grotesque) — same family used at all sizes
   - Festival energy from oversized type, gradients, noise — not from a serif
   - Mobile-first, generous whitespace
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@500;700&display=swap');

/* ============================================================
   v9.34 phase A — accessibility baseline (WCAG 2.1 AA)
   ============================================================ */

/* Visually-hidden text that screen readers still read.
   Pattern: pair an icon glyph (decorative, aria-hidden) with an
   sr-only label so SR users hear "Share" instead of "↗︎". */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link. Hidden until focused. Lets keyboard users
   bypass the topbar nav and jump straight to <main>. WCAG 2.4.1. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--accent, #ff6b35);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Focus indicators for buttons and links. Browsers' default focus
   rings are inconsistent and often invisible against a dark theme.
   :focus-visible only fires on keyboard focus — mouse clicks don't
   trigger it. So this doesn't ugly up click interactions. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #ff6b35);
  outline-offset: 2px;
  border-radius: 4px;
}

/* prefers-reduced-motion — vestibular accessibility. Users who set
   this OS-level preference get instant transitions and no scroll-
   triggered reveals. We don't kill ALL animation (toast slide is
   functional feedback), but we shorten everything to ≤0.01s and
   neutralize keyframe animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   v9.34 phase B — empty / error / loading state primitives
   ============================================================ */

/* Error banner — appears when a fetch fails or a write operation
   errors. Shape: small icon, message, retry button. Tone is
   restrained (not alarming) because most failures are recoverable
   network blips, not system catastrophes. */
.state-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.state-error .state-error-msg { flex: 1; }
.state-error .state-error-detail {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.state-error .btn {
  flex: 0 0 auto;
}

/* Empty-state block — for lists/tables/cards that have no data yet.
   Contains a title, optional subtitle, optional CTA. The point is to
   tell the user WHY it's empty and WHAT to do, not just show blank
   space. Centered and lightly framed so it reads as intentional
   rather than broken. */
.state-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: 12px;
  color: var(--text-muted);
}
.state-empty .state-empty-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.5;
}
.state-empty .state-empty-title {
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
}
.state-empty .state-empty-body {
  font-size: 14px;
  margin-bottom: 16px;
}
.state-empty .state-empty-body:last-child { margin-bottom: 0; }

/* Loading skeleton — animated shimmer bars that approximate the
   shape of the loading content. Better than a "Loading…" text
   placeholder because the perceived layout doesn't shift when
   data arrives. */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-line       { height: 14px; }
.skeleton-line-lg    { height: 24px; }
.skeleton-card       { height: 80px; border-radius: 12px; }
.skeleton-row > * + * { margin-left: 12px; }
.skeleton-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.7; }
}


:root {
  /* Surface */
  --bg:           #0a0a10;
  --bg-2:         #0f0f17;
  --surface:      #16161f;
  --surface-2:    #1d1d28;
  --surface-3:    #25252f;
  --border:       rgba(255,255,255,0.08);
  --border-2:     rgba(255,255,255,0.14);

  /* Text */
  --text:         #f5f5f0;
  --text-muted:   rgba(245,245,240,0.62);
  --text-dim:     rgba(245,245,240,0.42);

  /* Brand accents — overridden by /api/campaign at runtime */
  --accent:       #ff6b35;
  --accent-2:     #e83e8c;
  --accent-3:     #6f42c1;
  --gradient:     linear-gradient(135deg, #ff6b35 0%, #e83e8c 50%, #6f42c1 100%);
  --gradient-soft: linear-gradient(135deg, rgba(255,107,53,0.15) 0%, rgba(232,62,140,0.15) 50%, rgba(111,66,193,0.15) 100%);

  /* Status */
  --green:        #34d399;
  --yellow:       #fbbf24;
  --red:          #f87171;

  /* Geometry */
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    22px;

  /* Easing */
  --ease:         cubic-bezier(.2,.8,.2,1);

  /* Type — single Geist family, weights for hierarchy. NO serifs. */
  --display:      'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --body:         'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:         'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============== Reset / base ============== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'ss02', 'cv11';  /* Geist alternates for cleaner glyphs */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; }

/* ============== Type ==============
   Festival energy comes from SCALE + WEIGHT + TRACKING, not from a serif.
   Big bold display, tight tracking on huge sizes, mono for codes.
*/
.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.display-italic {
  /* Class name retained for backward compat. Geist has no italic variant —
     rendered here as a heavy bold for emphasis. */
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(44px, 8vw, 88px); line-height: 0.96; letter-spacing: -0.04em; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
p  { margin: 0 0 12px; }

code, .mono { font-family: var(--mono); font-feature-settings: 'ss01'; }

/* ============== Layout ============== */
.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}
.shell-narrow {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
}
.spacer-sm { height: 16px; }
.spacer    { height: 32px; }
.spacer-lg { height: 56px; }
.spacer-xl { height: 88px; }

/* ============== Hero ============== */
.hero {
  position: relative;
  padding: 88px 24px 64px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gradient);
  opacity: 0.18;
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,107,53,0.35), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(232,62,140,0.25), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(111,66,193,0.30), transparent 50%);
  filter: blur(40px);
  opacity: 0.7;
  z-index: -1;
}
.hero-noise {
  position: absolute; inset: 0; pointer-events: none;
  z-index: -1; mix-blend-mode: overlay; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }

.hero h1 .accent {

  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 24px auto 0;
  max-width: 540px;
}

/* ============== Cards ============== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.card + .card { margin-top: 16px; }
.card-elevated {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.card-highlight {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gradient) border-box;
  border: 1px solid transparent;
}

.card-row { display: flex; gap: 16px; flex-wrap: wrap; }
.card-row > * { flex: 1; min-width: 220px; }

/* ============== Buttons ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,107,53,0.25);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(255,107,53,0.35);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
}
.btn-secondary:hover { background: var(--surface-3); border-color: rgba(255,255,255,0.22); }
.btn-ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-2); }

.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 60px; padding: 0 32px; font-size: 17px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============== Forms ============== */
label {
  display: block;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  margin: 18px 0 8px;
  letter-spacing: 0.01em;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="password"], input[type="number"], input:not([type]), select, textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  /* v9.34 phase A — accessibility baseline.
     Pre-A: outline:none killed keyboard focus indicators entirely.
     Post-A: 2px accent ring with offset + brighter border. The ring
     uses box-shadow so it doesn't shift layout (outline does on
     some renderers). Mouse users still see clean borders; keyboard
     users get a visible focus state per WCAG 2.4.7. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25);  /* accent at 25% — matches --accent default; recolored via CSS var if a campaign overrides */
}
input::placeholder { color: var(--text-dim); }

.checkbox-row {
  display: flex; align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 16px;
  cursor: pointer;
}
.checkbox-row input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }

/* ============== Code display ============== */
.code-display {
  position: relative;
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gradient) border-box;
  border: 1.5px solid transparent;
}
.code-display .code {
  font-family: var(--mono);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============== Progress ============== */
.progress {
  position: relative;
  height: 10px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  position: absolute; inset: 0;
  width: 0;
  background: var(--gradient);
  border-radius: 999px;
  transition: width 0.6s var(--ease);
  box-shadow: 0 0 16px rgba(255,107,53,0.35);
}

/* ============== Badges & status pills ============== */
.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--text);
}
.badge-grad   { background: var(--gradient); color: #fff; }
.badge-green  { background: rgba(52,211,153,0.15); color: var(--green); }
.badge-yellow { background: rgba(251,191,36,0.15); color: var(--yellow); }
.badge-red    { background: rgba(248,113,113,0.15); color: var(--red); }

/* ============== Flash messages ============== */
.flash {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  margin: 14px 0;
}
.flash-success { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.25); color: var(--green); }
.flash-warn    { background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.25); color: var(--yellow); }
.flash-error   { background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.25); color: var(--red); }

/* ============== Nav / topbar ============== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,16,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.topbar .brand .dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--gradient); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.topbar nav { display: flex; gap: 8px; align-items: center; }

/* ============== Tabs (admin) ============== */
.tabs {
  display: flex; gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;
  margin-bottom: 24px;
}
.tab {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface-3); color: var(--text); }

.panel { animation: fadeIn 0.3s var(--ease); }
@keyframes fadeIn { from {opacity:0;transform:translateY(4px)} to {opacity:1;transform:translateY(0)} }

/* ============== Tables ============== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
}
th {
  font-weight: 500; font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,0.02); }

/* ============== Event link cards ============== */
.event-card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease);
}
.event-card:hover { border-color: var(--border-2); }
.event-card .city {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.event-card .url {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-2);
  padding: 8px 10px;
  border-radius: 8px;
  word-break: break-all;
  max-height: 60px;
  overflow: hidden;
}
.event-card .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.event-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .event-grid { grid-template-columns: 1fr 1fr; } }

/* ============== Stats / metric tiles ============== */
.metric {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.metric .label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.metric .value { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.metric .sub   { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.metric-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .metric-grid { grid-template-columns: repeat(4, 1fr); } }

/* ============== Step explainer (3 step) ============== */
.steps {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr 1fr; } }
.step {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.step .num {
  font-family: var(--display);
  font-size: 36px; font-weight: 600;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.step h3 { margin-top: 12px; font-size: 18px; }
.step p { color: var(--text-muted); margin-top: 6px; font-size: 14px; line-height: 1.5; }

/* ============== Share buttons ============== */
.share-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 13px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.share-btn:hover { background: var(--surface-3); }

/* ============== Toast ============== */
.toast {
  position: fixed;
  left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(100px);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  opacity: 0;
  transition: all 0.3s var(--ease);
  pointer-events: none;
  z-index: 100;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============== Reveal animation ============== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal 0.7s var(--ease) forwards;
}
.reveal-2 { animation-delay: 0.1s; }
.reveal-3 { animation-delay: 0.2s; }
.reveal-4 { animation-delay: 0.3s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* ============== Misc ============== */
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.text-center { text-align: center; }
.flex-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-grow { flex: 1; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .hero { padding: 64px 20px 40px; }
  .card { padding: 22px; }
  .topbar { padding: 14px 20px; }
  /* Mobile finger-friendly share buttons. 44pt minimum tap target per Apple
     HIG; we go a bit larger because they're typed copy with text labels. */
  .share-btn { padding: 13px 18px; font-size: 14px; min-height: 44px; }
  .share-row { gap: 10px; }
  /* Stack the success-pane CTAs on small screens so "Copy my link" is the
     unmistakable primary action, not crammed beside a ghost button. */
  .card.card-highlight .flex-row { flex-direction: column; align-items: stretch; }
  .card.card-highlight .flex-row .btn-lg { width: 100%; }
  .card.card-highlight .flex-row .btn-ghost { width: 100%; }
}

/* ============================================================
   Admin compatibility classes
   The admin reuses some simpler primitives. These are scoped so
   they don't conflict with the public design system.
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

.stats { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 16px 0 28px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.stat .label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.stat .value { font-family: var(--display); font-size: 28px; font-weight: 600; margin-top: 4px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 200px; }

.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s var(--ease);
  text-decoration: none;
}
.copy-btn:hover { background: var(--surface-3); }

.badge-grey { background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* When admin uses bare <nav> for its tab bar */
nav.admin-nav {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px;
  background: rgba(10,10,16,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
nav.admin-nav strong {
  font-family: var(--display);
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.02em;
  margin-right: 16px;
}
nav.admin-nav .tab {
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  transition: all 0.15s var(--ease);
  text-decoration: none;
}
nav.admin-nav .tab:hover { color: var(--text); }
nav.admin-nav .tab.active { background: var(--surface-3); color: var(--text); }
nav.admin-nav a#logout { font-size: 13px; color: var(--text-muted); }
nav.admin-nav a#logout:hover { color: var(--text); }

/* Admin-specific: panels use minimal top spacing */
.panel h1 { font-size: 28px; margin-bottom: 6px; }
.panel h3 { font-size: 16px; }