/* ChatterArena AI — shadcn-inspired system + tech theme (static HTML) */
:root {
  --background: 225 33% 5%;
  --foreground: 210 40% 98%;
  --card: 225 28% 8%;
  --card-foreground: 210 40% 98%;
  --popover: 225 28% 8%;
  --popover-foreground: 210 40% 98%;
  --primary: 187 100% 55%;
  --primary-foreground: 225 33% 7%;
  --secondary: 225 18% 14%;
  --secondary-foreground: 210 40% 98%;
  --muted: 225 18% 14%;
  --muted-foreground: 215 16% 70%;
  --accent: 265 95% 70%;
  --accent-foreground: 225 33% 7%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 225 16% 18%;
  --input: 225 16% 18%;
  --ring: 187 100% 55%;
  --radius: 14px;

  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
}

/* Light theme (shadcn-style) */
html[data-theme="light"] {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 199 89% 48%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 262 83% 58%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 199 89% 48%;
  --shadow: 0 18px 55px rgba(15, 21, 48, 0.14);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  line-height: 1.55;
}

/* Tech ambience: gradient + grid overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 15% 5%, hsl(var(--accent) / 0.22), transparent 60%),
    radial-gradient(820px 520px at 85% 0%, hsl(var(--primary) / 0.18), transparent 60%),
    radial-gradient(900px 520px at 70% 120%, hsl(155 92% 52% / 0.10), transparent 65%),
    linear-gradient(to bottom, hsl(var(--background) / 0.55), hsl(var(--background) / 0.95));
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, hsl(var(--border) / 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / 0.35) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(420px 280px at 30% 15%, rgba(0,0,0,0.9), transparent 70%),
              radial-gradient(520px 320px at 70% 0%, rgba(0,0,0,0.8), transparent 75%),
              radial-gradient(620px 440px at 50% 100%, rgba(0,0,0,0.7), transparent 75%);
  opacity: 0.35;
  z-index: -1;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
main { padding: 34px 0 46px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: .55rem .75rem;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}
.skip-link:focus { left: 12px; top: 12px; z-index: 9999; }

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.70);
  backdrop-filter: saturate(160%) blur(16px);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background:
    radial-gradient(18px 18px at 30% 35%, hsl(var(--primary) / 0.95), transparent 70%),
    radial-gradient(22px 22px at 70% 70%, hsl(var(--accent) / 0.95), transparent 70%),
    linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--card)));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 12px 38px hsl(var(--primary) / 0.10);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 1rem; letter-spacing: .2px; }
.brand-text span { font-size: .78rem; color: hsl(var(--muted-foreground)); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  font-size: .95rem;
  padding: .5rem .65rem;
  border-radius: calc(var(--radius) - 6px);
}
.nav a:hover { color: hsl(var(--foreground)); background: hsl(var(--secondary) / 0.70); }
.nav a[aria-current="page"] {
  color: hsl(var(--foreground));
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
}

.actions { display: flex; align-items: center; gap: 10px; }

/* shadcn-like components (static) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: .65rem .95rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  text-decoration: none;
  font-weight: 650;
  letter-spacing: .1px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); background: hsl(var(--secondary) / 0.75); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px hsl(var(--ring) / 0.20); border-color: hsl(var(--ring)); }
.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 16px 42px hsl(var(--primary) / 0.20);
}
.btn.primary:hover { background: linear-gradient(135deg, hsl(var(--primary) / 0.95), hsl(var(--accent) / 0.95)); }
.btn.ghost { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn.ghost:hover { background: hsl(var(--secondary) / 0.60); }
.icon-btn { width: 42px; height: 42px; padding: 0; border-radius: calc(var(--radius) - 2px); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: .35rem .65rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.65);
  color: hsl(var(--muted-foreground));
  font-size: .85rem;
}
.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
}
.pill { /* alias for older markup */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: .35rem .65rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.65);
  color: hsl(var(--muted-foreground));
  font-size: .85rem;
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
}

.card {
  background: hsl(var(--card) / 0.78);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .card { background: hsl(var(--card)); }

.panel {
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.50);
}
.muted { color: hsl(var(--muted-foreground)); }
.kicker { margin: 0 0 10px; color: hsl(var(--muted-foreground)); font-weight: 650; }
.subhead { margin: 0 0 10px; font-size: 1.2rem; letter-spacing: -0.01em; }

h1 { margin: 0 0 10px; font-size: 2.25rem; letter-spacing: -0.03em; }
.page-title { margin: 0 0 6px; font-size: 1.7rem; letter-spacing: -0.02em; }
.lede { margin: 0 0 16px; color: hsl(var(--muted-foreground)); font-size: 1.07rem; }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Layout primitives */
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: stretch; }
.hero-left { padding: 28px; position: relative; overflow: hidden; }
.hero-left::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius);
  pointer-events: none;
  background: radial-gradient(260px 160px at 80% 20%, hsl(var(--primary) / 0.16), transparent 65%),
              radial-gradient(260px 180px at 20% 80%, hsl(var(--accent) / 0.12), transparent 65%);
}
.hero-right { padding: 18px; }

.grid { margin-top: 18px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.feature { padding: 18px; position: relative; overflow: hidden; }
.feature h3 { margin: 0 0 6px; font-size: 1.02rem; }
.feature p { margin: 0; color: hsl(var(--muted-foreground)); }
.feature::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  pointer-events: none;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.08), transparent 35%, hsl(var(--accent) / 0.06));
  opacity: .9;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .86rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--secondary) / 0.55);
}

.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.list li {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  padding: 12px;
  background: hsl(var(--secondary) / 0.45);
}
.list li strong { display: block; }
.list li span { color: hsl(var(--muted-foreground)); font-size: .93rem; }

.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 26px 0 12px; }
.section-title h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.section-title p { margin: 0; color: hsl(var(--muted-foreground)); }

.footer {
  border-top: 1px solid hsl(var(--border));
  padding: 26px 0 34px;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background) / 0.30);
}
.footer a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.footer a:hover { color: hsl(var(--foreground)); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 14px; }
.fineprint { font-size: .9rem; }

/* Forms */
.form { display: grid; gap: 10px; }
label { font-weight: 650; display: block; }
input, textarea, select {
  width: 100%;
  padding: .75rem .85rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background) / 0.35);
  color: hsl(var(--foreground));
  outline: none;
}
input[type="radio"] { accent-color: hsl(var(--primary)); }
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 4px hsl(var(--ring) / 0.18);
}
.help { margin: 0; font-size: .9rem; color: hsl(var(--muted-foreground)); }
.note {
  border: 1px solid hsl(var(--border));
  padding: 12px;
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(135deg, hsl(var(--primary) / 0.12), hsl(var(--accent) / 0.08));
  color: hsl(var(--foreground));
}
.option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.45);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.option:hover { border-color: hsl(var(--ring) / 0.70); background: hsl(var(--secondary) / 0.60); }
.option input[type="radio"] { margin-top: 3px; }

/* Arena */
.arena { display: grid; gap: 10px; }
.chat {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--card) / 0.55);
}
.chat-header {
  padding: 12px 14px;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-body { padding: 14px; display: grid; gap: 10px; }
.bubble {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.50);
}
.bubble.you { margin-left: auto; border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.12); }
.bubble.ai { border-color: hsl(var(--accent) / 0.30); background: hsl(var(--accent) / 0.10); }
.bubble .meta { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: hsl(var(--muted-foreground)); margin-bottom: 4px; }
.bubble p { margin: 0; }

/* Voting bars */
.bars { display: grid; gap: 10px; }
.bar {
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 12px;
  background: hsl(var(--secondary) / 0.45);
}
.bar-head { display: flex; justify-content: space-between; gap: 10px; color: hsl(var(--muted-foreground)); font-size: .92rem; }
.bar-track {
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--border) / 0.55);
  overflow: hidden;
  margin-top: 8px;
}
.bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); }

.kbd {
  display: inline-block;
  padding: .15rem .4rem;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.60);
  color: hsl(var(--muted-foreground));
  font-size: .88rem;
}

/* Mobile */
.mobile-toggle { display: none; }
.mobile-nav { display: none; padding: 0 0 14px; }
.mobile-nav a {
  display: block;
  padding: .65rem .6rem;
  border-radius: calc(var(--radius) - 4px);
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  border: 1px solid transparent;
}
.mobile-nav a:hover { color: hsl(var(--foreground)); border-color: hsl(var(--border)); background: hsl(var(--secondary) / 0.60); }
.mobile-nav a[aria-current="page"] { color: hsl(var(--foreground)); border-color: hsl(var(--border)); background: hsl(var(--secondary)); }

/* Tables */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--card) / 0.55);
}
.table th, .table td { padding: 12px; border-bottom: 1px solid hsl(var(--border)); text-align: left; }
.table th { color: hsl(var(--muted-foreground)); font-weight: 750; background: hsl(var(--secondary) / 0.55); }
.table tr:last-child td { border-bottom: none; }

/* Status pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .86rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--secondary) / 0.55);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: hsl(45 93% 58%); }
.status.live::before { background: hsl(153 78% 48%); }
.status.soon::before { background: hsl(var(--primary)); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav { display: none; }
  .mobile-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .two-col { grid-template-columns: 1fr; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
}