/* WZN League — brutalist military design system */

@import url('https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Barlow+Condensed:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg-0: #0a0a0a;
  --bg-1: #111111;
  --bg-2: #161616;
  --bg-3: #1c1c1c;
  --bg-4: #222222;
  --line: #2a2a2a;
  --line-2: #3a3a3a;
  --text: #e8e6e3;
  --text-dim: #9a958e;
  --text-faint: #5e5a55;
  --accent: #ff6b35;
  --warn: #d97706;
  --bad: #ef4444;
  --ok: #65a30d;
  --font-stencil: 'Saira Stencil One', 'Arial Black', sans-serif;
  --font-body: 'Barlow Condensed', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

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

html, body, #root { height: 100%; }

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px);
}

/* Topographic grid base used in hero/login */
.bg-grid {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,0.6) 100%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.03) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.03) 47px 48px);
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

/* ============ APP SHELL ============ */

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-canvas {
  padding: 28px 36px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============ SIDEBAR ============ */

.wzn-sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.wzn-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
}

.brand-title {
  font-family: var(--font-stencil);
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  margin-top: 4px;
}

.wzn-sidebar-meta {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.wzn-sidebar-meta::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 8px; height: 8px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
}
.wzn-sidebar-meta::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}

.meta-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
}
.meta-row span:first-child { color: var(--text-faint); }
.meta-row span:last-child { color: var(--text); }
.status-live { color: var(--accent) !important; }

.wzn-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.nav-item:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--line);
}
.nav-item.active {
  background: var(--bg-3);
  border-color: var(--line-2);
}
.nav-item.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.nav-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  width: 22px;
  align-self: center;
}
.nav-item.active .nav-code { color: var(--accent); }

.nav-label { display: flex; flex-direction: column; gap: 2px; }
.nav-title {
  font-family: var(--font-stencil);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.nav-desc {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-marker {
  position: absolute;
  right: -1px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
}

.wzn-role-switch {
  border: 1px dashed var(--line-2);
  padding: 10px 12px;
}
.role-switch-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.role-switch-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  margin-bottom: 6px;
}
.role-btn {
  padding: 7px 4px;
  font-family: var(--font-stencil);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--bg-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.role-btn.active {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
}
.role-switch-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.wzn-sidebar-footer {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-serial {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.15em;
}
.footer-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-stencil);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 6px 0;
}
.footer-logout:hover { color: var(--accent); }

/* ============ TOPBAR ============ */

.wzn-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 36px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.crumb-dim { color: var(--text-faint); }
.crumb-sep { color: var(--text-faint); }
.crumb-current { color: var(--accent); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.flag-strip {
  display: flex;
  gap: 0;
  height: 18px;
  width: 56px;
  border: 1px solid var(--line);
}
.flag-strip span { display: block; flex: 1; height: 100%; }

.topbar-stat {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 10px;
}
.stat-k { color: var(--text-faint); letter-spacing: 0.18em; }
.stat-v { color: var(--text); letter-spacing: 0.08em; font-weight: 500; }

.topbar-dogtag {
  border-left: 1px solid var(--line);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.topbar-dogtag::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.dogtag-name {
  padding-left: 14px;
  font-family: var(--font-stencil);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.dogtag-id {
  padding-left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ============ SECTION HEADER ============ */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.section-header-left { display: flex; align-items: center; gap: 14px; }
.section-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  padding: 4px 8px;
  border: 1px solid;
  letter-spacing: 0.15em;
}
.section-title {
  font-family: var(--font-stencil);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.section-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  margin-top: 4px;
  text-transform: uppercase;
}

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 22px;
  position: relative;
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--text-faint);
}
.panel::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.panel::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }

.dual {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

.ghost-btn {
  font-family: var(--font-stencil);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text-dim);
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }
.ghost-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(255,107,53,0.06); }
.ghost-btn.small { padding: 4px 8px; font-size: 10px; }

.filter-row { display: flex; gap: 6px; }

/* ============ LOGIN ============ */

.login-screen {
  min-height: 100vh;
  background: var(--bg-0);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  padding: 40px;
  overflow: hidden;
}

.login-bg-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px);
  mask-image: radial-gradient(circle at 30% 40%, black, transparent 75%);
  pointer-events: none;
}
.login-bg-scan {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 50%, rgba(0,0,0,0.4) 50%);
  background-size: 100% 3px;
  opacity: 0.15;
  pointer-events: none;
}

.login-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.login-corner-tl { top: 20px; left: 24px; }
.login-corner-tr { top: 20px; right: 24px; align-items: flex-end; }
.login-corner-bl { bottom: 20px; left: 24px; }
.login-corner-br { bottom: 20px; right: 24px; }

.corner-stamp {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 3px 8px;
  font-weight: 700;
}
.corner-serial, .corner-coords { color: var(--text-faint); }

.login-card {
  align-self: center;
  justify-self: center;
  max-width: 560px;
  width: 100%;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line-2);
  padding: 36px 40px;
  position: relative;
  z-index: 1;
}
.login-card::before,
.login-card::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--accent);
}
.login-card::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.login-card::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.login-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.25em;
  font-weight: 700;
}

.login-title {
  font-family: var(--font-stencil);
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 4px 0;
}

.login-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}

.login-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.mode-tab {
  padding: 12px 14px;
  font-family: var(--font-stencil);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--bg-2);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
}
.login-mode-tabs .mode-tab:last-child { border-right: none; }
.mode-tab.active {
  background: var(--bg-3);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tab-code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 5px;
}

.discord-explain { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.discord-explain-row { font-size: 14px; color: var(--text-dim); letter-spacing: 0.02em; }
.bullet { color: var(--accent); font-weight: 700; margin-right: 4px; }

.discord-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid;
  font-family: var(--font-stencil);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text);
  position: relative;
  transition: background 0.12s;
}
.discord-btn:hover:not(:disabled) { background: var(--bg-3); }
.discord-btn:disabled { opacity: 0.7; cursor: wait; }
.discord-btn.solid { color: var(--bg-0); font-weight: 700; }
.discord-btn-arrow { color: inherit; font-size: 12px; }

.spinner {
  width: 14px; height: 14px; border: 2px solid var(--line-2);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.check { font-size: 18px; font-weight: 700; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.login-quick {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.quick-link { color: var(--accent); text-decoration: none; cursor: pointer; background: none; border: none; font: inherit; }
.quick-link:hover { text-decoration: underline; }
.quick-sep { color: var(--text-faint); }

.login-email { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
}
.field input, .field select, .field textarea {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.12s;
}
.field input:focus, .field select:focus { border-color: var(--accent); }

.field-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-dim); }

.login-card-footer {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.footer-stamp {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
}
.stamp-cell {
  padding: 4px 8px;
}
.footer-stamp .stamp-cell:first-child { background: var(--bg-3); color: var(--text-faint); border-right: 1px solid var(--line); }

.login-sidepanel {
  align-self: stretch;
  padding: 60px 0 60px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px dashed var(--line-2);
  margin-left: 32px;
  position: relative;
  z-index: 1;
}

.sidepanel-block {
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 14px 16px;
}
.block-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.block-stat { display: flex; align-items: baseline; gap: 8px; }
.block-num {
  font-family: var(--font-stencil);
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
}
.block-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}

.sidepanel-callout {
  background: rgba(255,107,53,0.06);
  border-left: 2px solid var(--accent);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.callout-tag {
  font-family: var(--font-stencil);
  font-size: 10px;
  color: var(--bg-0);
  padding: 3px 6px;
  letter-spacing: 0.08em;
}
.sidepanel-callout p { font-size: 13px; color: var(--text-dim); line-height: 1.4; }

.sidepanel-recent { border-top: 1px solid var(--line); padding-top: 14px; }
.recent-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.sidepanel-recent ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-dim); }
.sidepanel-recent li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; margin-top: 6px; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }

/* ============ LANDING / HERO ============ */

.landing { display: flex; flex-direction: column; gap: 24px; }

.hero {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 48px 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  position: relative;
  overflow: hidden;
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px);
  mask-image: radial-gradient(circle at 60% 40%, black, transparent 80%);
  pointer-events: none;
}
.hero-crosshair {
  position: absolute;
  width: 200px; height: 200px;
  right: 48px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.18;
  border: 1px solid;
  border-radius: 50%;
}
.hero-crosshair span {
  position: absolute;
  background: currentColor;
}
.hero-crosshair span:nth-child(1) { left: 50%; top: 0; bottom: 0; width: 1px; }
.hero-crosshair span:nth-child(2) { top: 50%; left: 0; right: 0; height: 1px; }
.hero-crosshair span:nth-child(3),
.hero-crosshair span:nth-child(4) { display: none; }

.hero-left { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  width: fit-content;
}
.tag-pip { width: 10px; height: 10px; }

.hero-title {
  font-family: var(--font-stencil);
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.hero-strike { position: relative; }
.hero-strike::after {
  content: ""; position: absolute; left: -4px; right: -4px;
  top: 50%; height: 4px; background: currentColor; opacity: 0.0;
}

.hero-lede {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 540px;
  line-height: 1.5;
}

.hero-cta { display: flex; gap: 12px; }
.cta {
  padding: 14px 22px;
  font-family: var(--font-stencil);
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 1px solid;
  display: flex; align-items: center; gap: 12px;
}
.cta-primary { color: var(--bg-0); font-weight: 700; }
.cta-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.cta-ghost:hover { border-color: var(--accent); color: var(--accent); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  margin-top: 8px;
}
.hstat { padding: 14px 16px; border-right: 1px solid var(--line); }
.hstat:last-child { border-right: none; }
.hstat-n { font-family: var(--font-stencil); font-size: 28px; color: var(--accent); line-height: 1; }
.hstat-l { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; margin-top: 4px; }

.hero-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }

.hero-card {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 22px;
  position: relative;
}
.hcard-stamp {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.hcard-title {
  font-family: var(--font-stencil);
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.hcard-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 18px 0;
}
.cd-cell {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 14px 4px;
  text-align: center;
  position: relative;
}
.cd-cell::before {
  content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px;
  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent);
}
.cd-num {
  font-family: var(--font-stencil);
  font-size: 34px;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-lab {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  margin-top: 4px;
}

.hcard-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.hcard-meta > div { display: flex; flex-direction: column; }
.hcard-meta span:first-child {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em;
}
.hcard-meta span:last-child {
  font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em;
}

.hcard-cta {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 12px 14px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.06em;
}
.hcard-cta:hover { border-color: var(--accent); color: var(--accent); }

.hcard-corners span, .hl-img-corners span, .bg-corners span, .stat-corners span, .wz-mock-corners span {
  position: absolute; width: 8px; height: 8px;
  border: 2px solid var(--text-faint); opacity: 0.5;
}
.hcard-corners span:nth-child(1), .hl-img-corners span:nth-child(1), .bg-corners span:nth-child(1), .stat-corners span:nth-child(1), .wz-mock-corners span:nth-child(1) {
  left: -1px; top: -1px; border-right: 0; border-bottom: 0;
}
.hcard-corners span:nth-child(2), .hl-img-corners span:nth-child(2), .bg-corners span:nth-child(2), .stat-corners span:nth-child(2), .wz-mock-corners span:nth-child(2) {
  right: -1px; top: -1px; border-left: 0; border-bottom: 0;
}
.hcard-corners span:nth-child(3), .hl-img-corners span:nth-child(3), .bg-corners span:nth-child(3), .stat-corners span:nth-child(3), .wz-mock-corners span:nth-child(3) {
  left: -1px; bottom: -1px; border-right: 0; border-top: 0;
}
.hcard-corners span:nth-child(4), .hl-img-corners span:nth-child(4), .bg-corners span:nth-child(4), .stat-corners span:nth-child(4), .wz-mock-corners span:nth-child(4) {
  right: -1px; bottom: -1px; border-left: 0; border-top: 0;
}

.hero-side-stats {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); padding: 12px 14px;
  background: var(--bg-1);
}
.hss-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.15em;
}
.hss-row b { font-family: var(--font-stencil); color: var(--text); font-weight: normal; letter-spacing: 0.04em; font-size: 13px; }

/* ============ LEADERBOARD TABLE ============ */

.leaderboard, .history-table, .avs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.leaderboard th, .history-table th, .avs-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.leaderboard td, .history-table td, .avs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.leaderboard tr:hover, .history-table tr:hover { background: var(--bg-2); }
.leaderboard .num, .history-table .num, .avs-table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.leaderboard .num.big, .history-table .num.big, .avs-table .num.big {
  font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
}

.pos-cell { display: flex; align-items: center; gap: 8px; }
.pos-num {
  font-family: var(--font-stencil); font-size: 22px;
}
.pos-tick { width: 4px; height: 22px; }

.team-cell { display: flex; align-items: center; gap: 12px; }
.team-tag {
  font-family: var(--font-stencil); font-size: 12px; padding: 4px 7px;
  border: 1px solid; letter-spacing: 0.04em;
}
.team-name { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 0.04em; }
.team-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; margin-top: 2px; }

.form-bars { display: flex; gap: 4px; }
.fb {
  font-family: var(--font-mono); font-size: 10px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line-2);
}
.fb.win { color: var(--bg-0); font-weight: 700; }
.fb.ok { color: var(--text); border-color: var(--text-dim); }
.fb.loss { color: var(--text-faint); }

.delta { font-size: 13px; letter-spacing: 0.05em; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--text-faint); }

.row-action {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
}
.row-action:hover { border-color: var(--accent); color: var(--accent); }

.zone-promo td { background: rgba(255,107,53,0.04); }

.zone-legend {
  display: flex; gap: 24px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em;
}
.zone-dot { display: inline-block; width: 10px; height: 4px; margin-right: 6px; vertical-align: middle; }
.zone-dot.relegate { background: var(--bad); }

/* ============ HIGHLIGHTS ============ */

.highlights { display: flex; flex-direction: column; gap: 12px; }
.highlight {
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 10px;
  align-items: center;
}
.hl-img {
  height: 90px;
  position: relative; overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.hl-img-mock {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 7px),
    radial-gradient(ellipse at 30% 40%, rgba(255,107,53,0.15), transparent 60%),
    linear-gradient(135deg, #1f1f1f, #2a2a2a);
}
.hl-img-tag {
  position: absolute; top: 6px; left: 6px;
  font-family: var(--font-stencil); font-size: 10px;
  padding: 2px 5px; color: var(--bg-0);
}
.hl-img-tag2 {
  position: absolute; bottom: 6px; right: 6px;
  font-family: var(--font-mono); font-size: 9px;
  padding: 2px 5px; background: var(--bg-0); color: var(--accent);
  letter-spacing: 0.15em;
  border: 1px solid var(--accent);
}
.hl-title { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 0.04em; }
.hl-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; margin-top: 4px; }
.hl-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 6px; letter-spacing: 0.15em; }

/* ============ OPS LIST ============ */

.ops-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ops-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  align-items: center;
}
.ops-date { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); padding-right: 16px; }
.ops-d { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.04em; }
.ops-t { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; }
.ops-name { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; }
.ops-meta { display: flex; gap: 10px; margin-top: 4px; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; }
.ops-type { padding: 2px 6px; border: 1px solid; }
.ops-type.liga { color: var(--accent); }
.ops-type.open { color: var(--text-dim); border-color: var(--line-2); }
.ops-status {
  font-family: var(--font-mono); font-size: 10px; padding: 4px 8px;
  border: 1px solid var(--line-2); letter-spacing: 0.15em;
}
.ops-status.status-ledig { color: var(--ok); border-color: var(--ok); }
.ops-status.status-registrert { color: var(--accent); border-color: var(--accent); }
.ops-status.status-pamledt, .ops-status.status-pamldt { color: var(--ok); border-color: var(--ok); }
.ops-status.status-auto { color: var(--text-faint); }

/* ============ PLAYER PORTAL ============ */

.portal { display: flex; flex-direction: column; gap: 24px; }

.profile-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.profile-card-bg {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px);
  mask-image: linear-gradient(90deg, transparent, black 30%, transparent);
  pointer-events: none;
}
.profile-avatar { position: relative; }
.avatar-box {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil);
  font-size: 36px;
  border: 2px solid;
  background: var(--bg-2);
  position: relative;
}
.avatar-box::before {
  content: ""; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;
  border: 1px dashed var(--line-2);
}
.avatar-tick {
  position: absolute; bottom: -4px; right: -4px;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: var(--bg-0);
}
.profile-meta { position: relative; z-index: 1; min-width: 0; }
.profile-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.15em;
  display: flex; gap: 8px; align-items: center;
}
.profile-eyebrow .sep { color: var(--text-faint); }
.profile-name {
  font-family: var(--font-stencil);
  font-size: 36px; line-height: 1; margin: 8px 0;
  letter-spacing: 0.02em;
}
.profile-aid {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dim); letter-spacing: 0.1em;
  margin-top: 4px;
}
.profile-aid code {
  background: var(--bg-3);
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  color: var(--accent);
  font-size: 13px;
}
.copy-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--line-2);
  color: var(--text-faint);
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

.profile-tags { display: flex; gap: 6px; margin-top: 14px; }
.ptag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 8px; background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--text-dim); letter-spacing: 0.15em;
}

.profile-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; position: relative; z-index: 1; }
.prank {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 12px 16px;
  text-align: right;
  min-width: 180px;
}
.prank-lab { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.prank-num { font-family: var(--font-stencil); font-size: 38px; line-height: 1; margin-top: 4px; }
.prank-delta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 4px; letter-spacing: 0.08em; }
.profile-serial { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; }

/* TABS */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab {
  padding: 12px 18px;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 8px;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab .tab-code { color: inherit; opacity: 0.6; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 16px 18px;
  position: relative;
}
.stat-box .stat-k { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.stat-box .stat-v { font-family: var(--font-stencil); font-size: 28px; line-height: 1; margin-top: 8px; letter-spacing: 0.02em; }
.stat-box .stat-h { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 6px; }
.stat-box.big { grid-column: span 2; }
.stat-box.big .stat-v { font-size: 48px; }

.chart { width: 100%; height: 180px; }

.best-game { position: relative; padding-top: 16px; }
.bg-stamp {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.bg-headline { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.bg-num { font-family: var(--font-stencil); font-size: 72px; line-height: 1; }
.bg-lab { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.06em; }
.bg-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 4px; }
.bg-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); }
.bg-meta > div { padding: 10px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.bg-meta > div:last-child { border-right: none; }
.bg-meta span:first-child { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.bg-meta span:last-child { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.04em; }

.placement {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-stencil); font-size: 13px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  letter-spacing: 0.04em;
}
.placement.ok { color: var(--text); }

.badge-ok {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ok); letter-spacing: 0.15em;
  padding: 3px 7px; border: 1px solid currentColor;
}

/* roster */
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.roster-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
}
.roster-card.you { border-color: var(--accent); }
.rc-avatar {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid;
  font-family: var(--font-stencil); font-size: 16px;
  background: var(--bg-3);
  flex-shrink: 0;
}
.rc-meta { flex: 1; min-width: 0; }
.rc-role { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.rc-name { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-aid { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.rc-stats { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.rc-stats > div { display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; font-family: var(--font-mono); font-size: 11px; }
.rc-stats span { color: var(--text-faint); letter-spacing: 0.15em; }
.rc-stats b { font-weight: 700; }
.rc-you-tag {
  position: absolute; top: -1px; right: -1px;
  padding: 2px 6px;
  font-family: var(--font-stencil); font-size: 10px;
  color: var(--bg-0); letter-spacing: 0.08em;
}

.form-card { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-card .fc-head .section-header { margin-bottom: 12px; padding-bottom: 10px; }
.form-card .form-bars .fb { width: 36px; height: 36px; font-size: 13px; }

/* ============ CAPTAIN ============ */

.captain { display: flex; flex-direction: column; gap: 24px; }
.step-trail { display: flex; gap: 8px; }
.step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
}
.step-dot.done { color: var(--bg-0); font-weight: 700; }

.captain-grid {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 24px;
}
.captain-main { display: flex; flex-direction: column; gap: 16px; }

.step-panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  transition: opacity 0.2s;
}
.step-panel.locked { opacity: 0.5; }
.step-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.step-num {
  font-family: var(--font-stencil);
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid;
  letter-spacing: 0.04em;
}
.step-head h3 { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.06em; }
.step-body { padding: 22px; }
.step-next {
  margin-top: 18px; padding: 12px 22px;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em; color: var(--bg-0); border: none;
}
.step-next:disabled { cursor: not-allowed; }
.step-next.solid { font-weight: 700; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.game-pick { display: flex; gap: 4px; }
.gp-btn {
  width: 44px; height: 40px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.04em;
}
.gp-btn.active { background: var(--bg-3); }

.dropzone {
  border: 2px dashed var(--line-2);
  background: var(--bg-2);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.dropzone.over { background: var(--bg-3); }
.dropzone.has-file { padding: 16px; cursor: default; text-align: left; }
.dual-drop { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
.dz-half { padding: 22px 18px; min-height: 180px; }
.dz-half.has-file { padding: 0; overflow: hidden; }
.dz-tag { display: inline-block; margin-top: 10px; padding: 4px 10px; border: 1px solid; font: 600 10px/1 var(--font-mono); letter-spacing: 0.12em; }
.dz-preview-real { width: 100%; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; background: #000; }
.dz-real-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-mock { width: 100%; height: 100%; min-height: 180px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1a1a1a 0%, #050505 100%); position: relative; }
.pl-mock-victory { font: 700 11px/1 var(--font-mono); letter-spacing: 0.3em; color: #777; margin-bottom: 8px; }
.pl-mock-num { font: 900 64px/1 var(--font-stencil); letter-spacing: -0.02em; }
.pl-mock-of { font: 600 10px/1 var(--font-mono); letter-spacing: 0.2em; color: #555; margin-top: 6px; }
.pl-mock-line { width: 60px; height: 3px; margin-top: 16px; }

.ai-panel { margin-top: 16px; border: 1px solid; background: var(--bg-2); padding: 16px; position: relative; }
.ai-panel::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: currentColor; opacity: 0.6; }
.ai-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.ai-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #000; font: 900 12px/1 var(--font-stencil); letter-spacing: 0.05em; }
.ai-title { font: 700 13px/1 var(--font-mono); letter-spacing: 0.15em; color: var(--text); flex: 1; }
.ai-conf { font: 700 11px/1 var(--font-mono); letter-spacing: 0.12em; }
.spinner { width: 16px; height: 16px; border: 2px solid #333; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.ai-eye { font: 600 10px/1 var(--font-mono); letter-spacing: 0.18em; color: #888; margin-bottom: 10px; }
.ai-table { width: 100%; border-collapse: collapse; font: 500 12px/1.4 var(--font-mono); }
.ai-table th { text-align: left; font: 600 10px/1 var(--font-mono); letter-spacing: 0.12em; color: #888; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.ai-table td { padding: 8px 8px; border-bottom: 1px dashed var(--line-2); }
.ai-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-total td { border-top: 1px solid var(--line); border-bottom: none; padding-top: 10px; }
.conf-pill { display: inline-block; padding: 2px 6px; border: 1px solid; font: 700 10px/1 var(--font-mono); letter-spacing: 0.08em; }
.ai-map-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); font: 500 12px/1 var(--font-mono); }
.ai-detected { color: #888; flex: 1; }
.ai-actual { color: var(--text); flex: 1; text-align: right; font-weight: 700; }
.ai-arrow { font-size: 14px; }
.ai-foot { margin-top: 12px; font: 400 11px/1.5 var(--font-mono); color: #777; }
.ai-prefilled-tag { display: inline-block; margin-left: 8px; padding: 2px 6px; font: 700 9px/1 var(--font-mono); letter-spacing: 0.12em; color: #000; }

/* Admin AI extraction */
.av-dual-shots { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; background: #000; padding: 4px; }
.av-shot-tile { position: relative; cursor: zoom-in; overflow: hidden; background: #050505; min-height: 160px; display: flex; align-items: stretch; }
.av-shot-tile > * { width: 100%; }
.av-shot-label { position: absolute; top: 8px; left: 8px; z-index: 2; font: 700 9px/1 var(--font-mono); letter-spacing: 0.18em; padding: 4px 8px; background: rgba(0,0,0,0.7); border: 1px solid currentColor; }
.av-shot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-ai-block { margin-top: 14px; border: 1px solid; background: var(--bg-2); padding: 12px; }
.av-ai-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.av-ai-title { flex: 1; font: 700 11px/1 var(--font-mono); letter-spacing: 0.18em; }
.ai-table.compact { font-size: 11px; }
.ai-table.compact td, .ai-table.compact th { padding: 5px 6px; }
.ai-table tr.mismatch td { background: rgba(255, 80, 80, 0.08); }
.ai-table td .diff { display: inline-block; margin-left: 6px; padding: 1px 4px; font: 700 9px/1 var(--font-mono); color: #ff6464; border: 1px solid #ff6464; }
.ai-flag-list { margin-top: 10px; padding: 8px 10px; background: rgba(255,80,80,0.08); border-left: 3px solid #ff6464; }
.ai-flag-row { font: 500 11px/1.5 var(--font-mono); color: #ff8a8a; }
.lb-placement-strip { margin-top: 12px; height: 200px; }
.dz-icon {
  width: 64px; height: 64px;
  border: 2px solid; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.dz-title { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.06em; }
.dz-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 8px; }
.dz-hint { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); margin-top: 14px; }

.dz-preview { display: flex; flex-direction: column; gap: 12px; }
.dz-preview-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--bg-3); border: 1px solid var(--line-2);
}
.dz-file { display: flex; align-items: center; gap: 12px; }
.dz-check { font-size: 18px; font-weight: 700; }
.dz-file-name { font-family: var(--font-mono); font-size: 12px; }
.dz-file-size { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; margin-top: 2px; }
.dz-remove { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.15em; padding: 6px 10px; border: 1px solid var(--line-2); }
.dz-remove:hover { color: var(--bad); border-color: var(--bad); }

/* placeholder warzone screenshot */
.wz-mock {
  background: linear-gradient(135deg, #161a20, #0d0f12);
  border: 1px solid var(--line-2);
  padding: 16px 20px;
  position: relative;
  font-family: var(--font-mono);
  color: var(--text-dim);
}
.wz-mock-head {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.2em;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.wz-mock-rows { display: flex; flex-direction: column; gap: 2px; }
.wz-row {
  display: grid;
  grid-template-columns: 50px 1fr 50px 40px;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  font-size: 11px;
  letter-spacing: 0.1em;
  border-left: 2px solid transparent;
}
.wz-row.mine { background: rgba(255,107,53,0.1); color: var(--text); }
.wz-pos { color: var(--accent); font-weight: 700; }

/* placement slider */
.placement-pick { margin-bottom: 20px; }
.pp-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; margin-bottom: 8px; }
.placement-pick input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-3);
  border-radius: 0;
  outline: none;
}
.placement-pick input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 24px;
  background: var(--accent);
  cursor: ew-resize;
}
.placement-pick input[type=range]::-moz-range-thumb {
  width: 14px; height: 24px;
  background: var(--accent);
  border: 0;
  cursor: ew-resize;
}
.pp-readout { display: flex; align-items: baseline; gap: 16px; margin-top: 10px; }
.pp-num { font-family: var(--font-stencil); font-size: 36px; line-height: 1; }
.pp-mult { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.12em; }

.player-kills { display: flex; flex-direction: column; gap: 8px; }
.pk-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.pk-id { display: flex; align-items: center; gap: 12px; }
.pk-avatar {
  width: 40px; height: 40px;
  border: 1px solid; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 12px;
}
.pk-name { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.pk-aid { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; margin-top: 2px; }
.pk-control { display: flex; align-items: center; gap: 12px; }
.pk-lab { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.pk-stepper { display: flex; align-items: center; }
.pk-stepper button {
  width: 32px; height: 32px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-size: 16px; color: var(--text-dim);
}
.pk-stepper button:hover { color: var(--accent); border-color: var(--accent); }
.pk-stepper input {
  width: 56px; height: 32px;
  text-align: center;
  background: var(--bg-0); border: 1px solid var(--line-2); border-left: 0; border-right: 0;
  font-family: var(--font-stencil); font-size: 16px;
  -moz-appearance: textfield;
}
.pk-stepper input::-webkit-outer-spin-button,
.pk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.confirm-lede { color: var(--text-dim); margin-bottom: 14px; font-size: 14px; }
.confirm-checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.confirm-checklist li { display: flex; align-items: center; gap: 10px; color: var(--text); }
.ck { font-weight: 700; font-size: 16px; }
.confirm-cb { font-size: 13px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 14px; }

.captain-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; align-self: flex-start; }
.cs-card {
  background: var(--bg-1); border: 1px solid var(--line);
  padding: 16px 18px;
}
.cs-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; margin-bottom: 12px; }
.cs-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-family: var(--font-body); font-size: 13px;
}
.cs-row span:first-child { color: var(--text-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; }
.cs-row b { font-family: var(--font-stencil); font-weight: normal; letter-spacing: 0.04em; }
.cs-divider { height: 1px; background: var(--line); margin: 10px 0; }
.cs-total { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.cs-total span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.18em; }
.cs-points { font-family: var(--font-stencil); font-size: 32px; line-height: 1; }
.cs-foot { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; margin-top: 10px; line-height: 1.4; }

.scoring-row {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  font-family: var(--font-mono); font-size: 11px;
  border-bottom: 1px dashed var(--line);
}
.scoring-row:last-of-type { border: 0; }

/* submit success */
.submit-success {
  text-align: center;
  padding: 60px 40px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.ss-stamp {
  display: inline-block;
  font-family: var(--font-stencil); font-size: 18px;
  border: 2px solid; padding: 8px 18px;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
  margin-bottom: 20px;
}
.submit-success h2 { font-family: var(--font-stencil); font-size: 24px; letter-spacing: 0.04em; margin-bottom: 10px; }
.submit-success p { color: var(--text-dim); max-width: 480px; margin: 0 auto 24px; line-height: 1.5; }
.ss-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  max-width: 640px; margin: 0 auto;
  border: 1px solid var(--line);
}
.ss-summary > div {
  padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.ss-summary > div:nth-child(3n) { border-right: none; }
.ss-summary > div:nth-last-child(-n+3) { border-bottom: none; }
.ss-summary span { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.ss-summary b { font-family: var(--font-stencil); font-size: 16px; font-weight: normal; letter-spacing: 0.04em; }
.ss-actions { margin-top: 28px; }

/* ============ ADMIN ============ */

.admin { display: flex; flex-direction: column; gap: 20px; position: relative; }
.admin-pulse {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.admin-grid {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 16px;
  align-items: flex-start;
}

.admin-queue {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.aq-head {
  display: flex; justify-content: space-between;
  padding: 4px 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.aq-item {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 10px 12px; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
}
.aq-item:hover { background: var(--bg-3); }
.aq-item.flagged { border-color: var(--warn); }
.aq-item-top { display: flex; justify-content: space-between; align-items: center; }
.aq-tag {
  font-family: var(--font-stencil); font-size: 11px;
  border: 1px solid; padding: 1px 5px; letter-spacing: 0.04em;
}
.aq-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.12em; }
.aq-team { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.aq-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
.aq-flag { font-family: var(--font-mono); font-size: 10px; color: var(--warn); letter-spacing: 0.18em; margin-top: 4px; }

.aq-empty { text-align: center; padding: 40px 12px; color: var(--text-dim); }
.aq-empty-icon { font-size: 32px; color: var(--ok); margin-bottom: 8px; }

.admin-verify {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 22px;
}
.admin-verify.empty { text-align: center; padding: 100px 22px; }
.empty-stamp {
  font-family: var(--font-stencil); font-size: 24px;
  border: 2px solid var(--ok); color: var(--ok);
  padding: 8px 22px; display: inline-block;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
  margin-bottom: 12px;
}
.empty-text { color: var(--text-dim); }

.av-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.av-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.2em; }
.av-title { font-family: var(--font-stencil); font-size: 22px; letter-spacing: 0.04em; margin-top: 4px; }
.av-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.08em; margin-top: 6px; }
.av-meta .dim { color: var(--text-faint); letter-spacing: 0.18em; margin-right: 4px; }
.av-meta .sep { color: var(--text-faint); }
.av-placement { text-align: right; }
.ap-lab { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.ap-num { font-family: var(--font-stencil); font-size: 42px; line-height: 1; }

.av-flag {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: rgba(217,119,6,0.08);
  border-left: 3px solid var(--warn);
  margin-bottom: 18px;
}
.flag-icon { font-size: 18px; color: var(--warn); }

.av-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.av-screenshot-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.ass-title { display: flex; flex-direction: column; gap: 2px; }
.ass-eye { color: var(--text); font-weight: 700; letter-spacing: 0.2em; }
.ass-sub { color: var(--text-faint); letter-spacing: 0.15em; }
.av-screenshot-body { position: relative; cursor: zoom-in; }
.av-screenshot-body:hover .av-screenshot-zoom { opacity: 1; }
.av-screenshot-zoom {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; padding: 4px 8px;
  background: rgba(10,10,10,0.85); border: 1px solid;
  opacity: 0; transition: opacity 0.15s;
}
.av-screenshot-meta {
  margin-top: 10px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.assm-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 10px;
}
.assm-row span { color: var(--text-faint); letter-spacing: 0.18em; }
.assm-row b { color: var(--text); font-weight: 500; letter-spacing: 0.08em; }
.mono-tiny { font-size: 9px !important; color: var(--accent) !important; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 200;
  display: flex; flex-direction: column;
  animation: lb-in 0.2s ease-out;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.lb-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.15em;
}
.lb-sep { color: var(--text-faint); }
.lb-close {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
}
.lb-close:hover { color: var(--accent); border-color: var(--accent); }
.lightbox-stage {
  flex: 1;
  display: grid; grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 32px;
  overflow: auto;
}
.lightbox-img {
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.wz-mock-large {
  width: 100%; max-width: 1100px;
  padding: 28px 36px;
}
.wz-mock-large .wz-mock-head { font-size: 12px; padding-bottom: 14px; margin-bottom: 14px; }
.wz-mock-large .wz-row { padding: 9px 12px; font-size: 13px; grid-template-columns: 70px 1fr 70px 60px; }
.wz-mock-large .wz-pos { font-size: 15px; }
.lightbox-side { display: flex; flex-direction: column; gap: 14px; }
.lbs-block {
  background: var(--bg-1); border: 1px solid var(--line);
  padding: 16px 18px;
}
.lbs-eye { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; margin-bottom: 8px; }
.lbs-big { font-family: var(--font-stencil); font-size: 56px; line-height: 1; }
.lbs-cap { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.15em; margin-top: 4px; }
.lbs-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-family: var(--font-mono); font-size: 12px;
  border-bottom: 1px dashed var(--line);
}
.lbs-row:last-of-type { border-bottom: 0; }
.lbs-row b { font-family: var(--font-stencil); font-weight: normal; font-size: 14px; }
.lbs-row.total { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 8px; margin-top: 4px; }
.lbs-row.total b { color: var(--accent); }
.lbs-foot { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.12em; line-height: 1.5; }

.avs-head { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; margin-bottom: 8px; }
.kill-edit {
  width: 48px; padding: 4px 6px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 13px; text-align: right;
}
.avs-table tfoot td { border-bottom: 0; padding-top: 16px; }

.avs-actions {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px; margin-top: 18px;
}
.action-approve, .action-reject, .action-edit {
  padding: 12px;
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid;
}
.action-approve { color: var(--bg-0); font-weight: 700; border-color: var(--accent); }
.action-reject { border-color: var(--bad); color: var(--bad); }
.action-reject:hover { background: rgba(239,68,68,0.1); }
.action-edit { border-color: var(--line-2); color: var(--text-dim); }
.action-edit:hover { color: var(--text); border-color: var(--text); }

/* Live leaderboard */
.admin-live {
  background: var(--bg-1); border: 1px solid var(--line);
  padding: 16px;
  position: sticky; top: 90px;
}
.al-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.al-eye { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.al-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.15em; margin-top: 4px; }
.al-pulse { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; }
.al-list { display: flex; flex-direction: column; gap: 4px; }
.al-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform 0.4s, border-color 0.3s, background 0.3s;
}
.al-row.animating { transform: translateX(-4px); }
.al-pos { font-family: var(--font-stencil); font-size: 16px; color: var(--text-dim); }
.al-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-tag { font-family: var(--font-stencil); font-size: 10px; padding: 2px 5px; border: 1px solid; letter-spacing: 0.04em; }
.al-name { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-points { display: flex; align-items: baseline; gap: 8px; }
.al-wsow { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.al-bump {
  font-family: var(--font-stencil); font-size: 14px;
  animation: bump 1.8s ease-out;
}
@keyframes bump {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--bg-2);
  border: 1px solid;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  min-width: 360px;
  z-index: 100;
  animation: toast-in 0.3s ease-out;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
@keyframes toast-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.toast-pulse {
  width: 10px; height: 10px;
  animation: pulse 1.4s ease-in-out infinite;
}
.toast-title { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.06em; }
.toast-body { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.toast-x { color: var(--text-faint); font-size: 14px; padding: 4px 8px; }

/* ============ TOURNAMENT BRACKET ============ */

.bracket-screen { display: flex; flex-direction: column; gap: 20px; }

.trn-head {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.trn-head-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px);
  pointer-events: none;
}
.trn-head-left { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.trn-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.2em;
}
.trn-pip { width: 10px; height: 10px; }
.trn-status { color: var(--accent); font-weight: 700; margin-left: 4px; }
.trn-title {
  font-family: var(--font-stencil);
  font-size: 36px; line-height: 1;
  letter-spacing: 0.02em;
}
.trn-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  margin-top: 8px;
}
.tm-cell {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.tm-cell:last-child { border-right: none; }
.tm-cell span {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
}
.tm-cell b {
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.04em; font-weight: normal;
}

.trn-head-right { position: relative; z-index: 1; }
.prize-card {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 18px 20px;
  position: relative;
}
.prize-card::before,
.prize-card::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--accent);
}
.prize-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.prize-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.prize-eye {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.prize-num {
  font-family: var(--font-stencil); font-size: 32px;
  line-height: 1; margin: 6px 0 12px;
}
.prize-split {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.prize-split > div { display: flex; flex-direction: column; gap: 2px; }
.prize-split span {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.15em;
}
.prize-split b {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em; font-weight: normal;
}

/* Tabs row + actions */
.trn-tabs {
  display: flex; justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.trn-tab-row { display: flex; gap: 4px; }
.trn-tab-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.status-live { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ============ BRACKET CANVAS ============ */

.bracket-canvas-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 24px;
  position: relative;
}

.bracket-canvas {
  display: grid;
  grid-template-columns: 300px 300px 300px 340px;
  gap: 56px;
  overflow-x: auto;
  position: relative;
  padding: 8px 4px 30px;
}

/* SVG connector overlay sits behind the cards, inside the scroll area */
.bracket-connectors {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.bracket-round {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.round-header {
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  margin-bottom: 16px;
}
.round-name {
  font-family: var(--font-stencil);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.round-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.15em;
  margin-top: 3px;
}

.round-matches {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Fixed match height: 22 header + 48 + 1 + 48 = 119px; gap 14 in round 1.
   Distance between match centers in round 1 = 133px.
   Round 2 first match center at 133/2 = 66.5 above round 1 first center → padding-top 66.5px.
   Round 2 gap = 266 - 119 = 147px.
   Round 3 padding-top = 66.5 + 133 = 199.5; gap = 532 - 119 = 413px.
   Round 4 padding-top = 199.5 + 266 = 465.5px.
*/
.round-1 .round-matches { gap: 14px; }
.round-2 .round-matches { gap: 147px; padding-top: 67px; }
.round-3 .round-matches { gap: 413px; padding-top: 200px; }
.round-4 .round-matches { padding-top: 466px; }

/* ============ MATCH CARDS ============ */

.bm {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.bm:hover { transform: translateY(-1px); }
.bm.completed { opacity: 0.92; }
.bm.live { box-shadow: 0 0 0 1px var(--accent), 0 0 20px rgba(255,107,53,0.15); }
.bm.pending { opacity: 0.75; }
.bm.final {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-2), rgba(255,107,53,0.04));
}
.bm.final::before,
.bm.final::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--accent);
}
.bm.final::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.bm.final::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

.bm-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.bm-id { color: var(--text-dim); }
.bm-live { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.bm-done { color: var(--ok); }
.bm-pending { color: var(--text-faint); }

.bm-divider {
  height: 1px;
  background: var(--line);
  margin: 0 8px;
}

.bt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  position: relative;
  height: 48px;
}
.bt.winner { background: rgba(255,107,53,0.06); }
.bt.loser { opacity: 0.45; }
.bt.empty { padding: 8px 10px; }

.bt-seed {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.12em;
  width: 22px; text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 6px;
  flex-shrink: 0;
}

.bt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bt-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.bt-tag {
  font-family: var(--font-stencil); font-size: 9px;
  padding: 1px 4px; border: 1px solid; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.bt-name {
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.bt.final .bt-name { font-size: 14px; }
.bt-players {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-amp { color: var(--accent); margin: 0 2px; }

.bt-score {
  font-family: var(--font-stencil);
  font-size: 22px;
  line-height: 1;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.bt.loser .bt-score { color: var(--text-faint); }

.bt-tick {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 3px;
}

.bt-tbd { display: flex; align-items: center; gap: 10px; color: var(--text-faint); width: 100%; padding-left: 6px; }
.bt-tbd-icon {
  width: 24px; height: 24px;
  border: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
}
.bt-tbd span:last-child {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em;
}

/* Live match stream bar */
.bm-live-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
  background: rgba(255,107,53,0.05);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.bm-stream-btn {
  font-family: var(--font-stencil); font-size: 9px;
  padding: 3px 7px;
  border: 1px solid; background: transparent;
  letter-spacing: 0.06em;
}

/* ============ BRACKET CONNECTOR LINES ============ */
/* SVG overlay handles full bracket; no CSS connectors needed. */

/* ============ BRACKET FOOTER ============ */

.bracket-footer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--line);
}
.bf-stat {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.bf-stat:last-child { border-right: 0; }
.bf-stat span {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.bf-stat b {
  font-family: var(--font-stencil); font-size: 16px;
  letter-spacing: 0.04em; font-weight: normal;
}

/* ============ TEAMS / RULES VIEWS ============ */

.seed-pill {
  font-family: var(--font-stencil); font-size: 12px;
  padding: 3px 7px; border: 1px solid;
  letter-spacing: 0.04em;
}
.badge-out {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--bad); letter-spacing: 0.15em;
  padding: 3px 7px; border: 1px solid currentColor;
}

.duos-table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; }

.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rules-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rules-list li {
  padding-left: 14px;
  position: relative;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.4;
}
.rules-list li::before {
  content: "▸";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.rules-list b { color: var(--text); font-weight: 600; }

.prize-table { width: 100%; border-collapse: collapse; }
.prize-table td {
  padding: 10px 4px;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em;
}
.prize-table td:first-child { color: var(--text-faint); }
.prize-table td:last-child { text-align: right; font-family: var(--font-stencil); font-size: 14px; }
.prize-table tr:last-child td { border-bottom: 0; }



/* ============================================================ */
/* TOURNAMENTS HUB — LIST + DOUBLE ELIM                          */
/* ============================================================ */

/* ---- LIST PAGE ---- */
.t-list { display: flex; flex-direction: column; gap: 24px; }

.t-list-banner {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  overflow: hidden;
}
.t-list-banner-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.025) 47px 48px);
  pointer-events: none;
}
.t-list-banner-left, .t-list-banner-right { position: relative; z-index: 1; }
.t-list-title {
  font-family: var(--font-stencil);
  font-size: 32px; letter-spacing: 0.02em; margin-top: 6px;
}
.t-list-lede {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 640px;
  margin-top: 10px;
  line-height: 1.5;
}
.t-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.t-sum-cell {
  padding: 16px 14px;
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 4px;
}
.t-sum-cell:last-child { border-right: 0; }
.t-sum-cell span {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-faint);
}
.t-sum-cell b {
  font-family: var(--font-stencil); font-size: 28px;
  font-weight: normal; letter-spacing: 0.04em; line-height: 1;
}

/* ---- ACTIVE TOURNAMENT CARDS ---- */
.t-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) { .t-grid { grid-template-columns: 1fr; } }

.t-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 20px 22px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
}
.t-card:hover {
  transform: translateY(-2px);
  background: var(--bg-3);
}
.t-card.live { background: linear-gradient(180deg, var(--bg-2), rgba(255,107,53,0.03)); }
.t-card-corners span {
  position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--text-faint);
}
.t-card-corners span:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.t-card-corners span:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.t-card-corners span:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.t-card-corners span:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.t-card.live .t-card-corners span { border-color: var(--accent); }

.t-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.t-card-id {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-faint);
}
.t-card-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; font-weight: 700;
}
.t-card-type {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em;
}
.t-card-name {
  font-family: var(--font-stencil);
  font-size: 24px; line-height: 1.05;
  letter-spacing: 0.02em;
}
.t-card-sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--text-faint);
  margin-top: -6px;
}
.t-card-status {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  border: 1px solid;
}
.t-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
}
.t-meta-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.t-meta-cell:last-child { border-right: 0; }
.t-meta-cell span {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; color: var(--text-faint);
}
.t-meta-cell b {
  font-family: var(--font-stencil); font-size: 13px;
  font-weight: normal; letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.t-card-bracket-info {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.tcb-bracket-size {
  font-family: var(--font-stencil); font-size: 28px;
  line-height: 1;
}
.tcb-bracket-size span {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--text-faint);
  margin-left: 6px;
}
.tcb-fill { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tcb-fill-bar {
  width: 180px; height: 4px;
  background: var(--bg-4);
  position: relative;
}
.tcb-fill-bar-in { height: 100%; }
.tcb-fill span {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; color: var(--text-faint);
}
.tcb-cta {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---- LIST ROWS (upcoming/completed) ---- */
.t-list-rows { list-style: none; display: flex; flex-direction: column; }
.t-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.t-row:hover { background: rgba(255,255,255,0.02); }
.t-row:last-child { border-bottom: 0; }
.t-row.done { opacity: 0.75; }
.t-row-date {
  display: flex; flex-direction: column; align-items: center;
  width: 64px;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.t-row-d {
  font-family: var(--font-stencil); font-size: 18px;
  letter-spacing: 0.02em;
}
.t-row-t {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.15em;
}
.t-row-mid { flex: 1; min-width: 0; }
.t-row-name {
  font-family: var(--font-stencil); font-size: 16px;
  letter-spacing: 0.04em;
}
.t-row-meta {
  display: flex; gap: 10px; align-items: center;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-faint);
}
.t-type-pill {
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em;
}
.t-row-go {
  font-family: var(--font-stencil); font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 1px solid;
}
.t-row-go.ghost { border-color: var(--line-2); color: var(--text-dim); }

/* ---- BACK BUTTON ---- */
.t-back {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em;
  padding: 7px 12px;
  border: 1px solid;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.t-back:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.trn-sub-line {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.2em;
  margin-top: 4px;
}

/* ============================================================ */
/* DOUBLE-ELIM BRACKET VIEW                                      */
/* ============================================================ */

.de-wrap {
  display: flex; flex-direction: column;
  gap: 28px;
}

.de-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
}

.de-section-label {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.de-section-tag {
  font-family: var(--font-stencil);
  font-size: 18px; line-height: 1;
  padding: 5px 9px;
  border: 1.5px solid;
  letter-spacing: 0.02em;
}
.de-section-name {
  font-family: var(--font-stencil); font-size: 18px;
  letter-spacing: 0.04em;
}
.de-section-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.15em;
  margin-left: auto;
}

.de-canvas {
  display: flex;
  gap: 36px;
  padding: 24px 24px 32px;
  overflow-x: auto;
  align-items: flex-start;
}

.de-round {
  display: flex; flex-direction: column;
  min-width: 240px;
  flex-shrink: 0;
}
.de-round-head {
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--text-faint);
  margin-bottom: 16px;
}
.de-round-head.is-final { border-left-color: var(--accent); }
.de-round-name {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.08em;
}
.de-round-sub {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.18em;
  margin-top: 3px;
}
.de-round-sub.is-drop { color: var(--accent); opacity: 0.85; }

.de-round-matches {
  display: flex; flex-direction: column;
  gap: 14px;
  justify-content: space-around;
  flex: 1;
  min-height: 100%;
}
.de-round.is-gf {
  border-left: 1px dashed var(--line-2);
  padding-left: 36px;
  margin-left: 4px;
}
.de-round.is-gf .de-round-matches {
  justify-content: center;
}

.wb-canvas .de-round:not(.is-gf) .de-round-matches {
  /* Distribute matches vertically so they roughly align with merging */
  justify-content: space-around;
}

/* ---- MATCH CARDS ---- */
.dem {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  transition: border-color 0.15s, transform 0.15s;
}
.dem:hover { transform: translateY(-1px); }
.dem.completed { opacity: 0.92; }
.dem.live { box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(255,107,53,0.15); }
.dem.pending { opacity: 0.7; }
.dem.is-bye {
  opacity: 0.45;
  background: repeating-linear-gradient(45deg, var(--bg-2) 0 6px, var(--bg-1) 6px 12px);
}
.dem.is-final {
  background: linear-gradient(180deg, var(--bg-2), rgba(255,107,53,0.05));
  border-width: 1.5px;
}
.dem-corner {
  position: absolute; width: 14px; height: 14px; border: 2px solid;
}
.dem-corner-tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.dem-corner-br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

.dem-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; color: var(--text-faint);
}
.dem-id { color: var(--text-dim); }
.dem-live { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.dem-done { color: var(--ok); }
.dem-time { color: var(--text-faint); }
.dem-bye-tag { color: var(--text-faint); font-weight: 700; }

.dem-team {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  height: 42px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.dem-team:last-of-type { border-bottom: 0; }
.dem-team.winner { background: rgba(255,107,53,0.06); }
.dem-team.loser { opacity: 0.45; }
.dem-team.bye, .dem-team.tbd {
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.dem-team-tbd, .dem-team-bye-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--text-faint);
}

.dem-seed {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.1em;
  width: 22px; flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding-right: 6px;
  text-align: center;
}
.dem-tag {
  font-family: var(--font-stencil); font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--line-2);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.dem-name {
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.03em;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dem.is-final .dem-name { font-size: 13px; }
.dem-score {
  font-family: var(--font-stencil); font-size: 18px;
  line-height: 1;
  min-width: 24px; text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.dem-winner-bar {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 3px;
}

.dem-live-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 10px;
  border-top: 1px solid;
  background: rgba(255,107,53,0.06);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; color: var(--text-dim);
}
.dem-watchers { color: var(--text-faint); }

/* LB canvas: slightly compressed visual */
.lb-canvas .dem { background: var(--bg-1); }
.lb-canvas .de-round-head { background: var(--bg-1); }
.lb-canvas .dem-team.winner { background: rgba(255,107,53,0.05); }

/* BYE rows in teams table */
.bye-row { opacity: 0.5; }
.seed-pill.bye, .team-tag.bye {
  border-color: var(--line-2);
  color: var(--text-faint);
  border-style: dashed;
}
.team-name.bye, .mono.bye, .num.bye { color: var(--text-faint); font-style: italic; }

/* pulse-dot reuse */
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}


/* ============================================================ */
/* KILLRACE LEADERBOARD                                          */
/* ============================================================ */

.kr-wrap { display: flex; flex-direction: column; gap: 24px; }

.kr-mapstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.kr-mapcell {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.kr-mapcell:last-child { border-right: 0; }
.kr-mapcell.live {
  border: 1px solid;
  background: linear-gradient(180deg, var(--bg-1), rgba(255,107,53,0.05));
}
.kr-mapcell.pending { opacity: 0.55; }
.kr-mapcell-head {
  display: flex; justify-content: space-between; align-items: center;
}
.kr-mapidx {
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.04em;
}
.kr-mapstat {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em;
}
.kr-mapstat.done { color: var(--ok); }
.kr-mapstat.live { display: flex; align-items: center; gap: 6px; }
.kr-mapname {
  font-family: var(--font-stencil); font-size: 18px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.kr-mapsub {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.18em;
}

/* Podium */
.kr-podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.kr-pod-cell {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.kr-pod-cell.place-1 {
  border-width: 2px;
  background: linear-gradient(180deg, var(--bg-2), rgba(255,107,53,0.04));
}
.kr-pod-cell.place-2 { transform: translateY(12px); }
.kr-pod-cell.place-3 { transform: translateY(20px); }
.kr-pod-place {
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.08em; color: var(--text-dim);
}
.kr-pod-cell.place-1 .kr-pod-place { font-size: 18px; }
.kr-pod-tag {
  align-self: flex-start;
  padding: 2px 6px;
  border: 1px solid;
  font-family: var(--font-stencil); font-size: 10px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.kr-pod-name {
  font-family: var(--font-stencil); font-size: 18px;
  letter-spacing: 0.04em;
}
.kr-pod-cell.place-1 .kr-pod-name { font-size: 22px; }
.kr-pod-players {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.05em;
}
.kr-pod-kills {
  font-family: var(--font-stencil);
  font-size: 36px; line-height: 1;
  margin-top: 8px;
}
.kr-pod-cell.place-1 .kr-pod-kills { font-size: 48px; }
.kr-pod-kills span {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
  margin-left: 8px;
}
.kr-pod-dmg {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.1em;
}

/* Leaderboard table */
.kr-table {
  width: 100%;
  border-collapse: collapse;
}
.kr-table th.kr-th-map {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em;
  text-align: right;
  padding-right: 10px;
}
.kr-th-mapname {
  color: var(--text-faint);
  font-size: 8px;
  margin-top: 2px;
}
.kr-table td.kr-cell {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.04em;
  padding-right: 10px;
}
.kr-table td.kr-total {
  font-family: var(--font-stencil);
  font-size: 22px;
  letter-spacing: 0.02em;
  padding-right: 14px;
}
.kr-players {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.04em;
  max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kr-pending {
  color: var(--text-faint);
}
.kr-podium-row {
  background: rgba(255,107,53,0.04);
}
.kr-podium-row td.kr-total {
  font-size: 24px;
}

/* Map-by-map detail */
.kr-maps-detail {
  display: flex; flex-direction: column;
  gap: 16px;
}
.kr-table-compact { width: 100%; border-collapse: collapse; }
.kr-pending-block {
  padding: 30px;
  text-align: center;
  border: 1px dashed var(--line-2);
  background: var(--bg-1);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-faint);
}

/* ============================================================ */
/* RULES STACK (vertical, full-width sections)                   */
/* ============================================================ */

.rules-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rules-stack .panel { padding: 22px 26px; }
.rules-stack .rules-list { max-width: 980px; }
.rules-stack .rules-list li { font-size: 13.5px; line-height: 1.55; }
.prize-panel .prize-table { max-width: 480px; }

/* BO chip on match cards */
.dem-bo {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  border: 1px solid;
  font-weight: 700;
}


/* ============================================================ */
/* ADMIN TABS + BANNER                                           */
/* ============================================================ */

.admin-tabbed { display: flex; flex-direction: column; gap: 20px; }

.admin-banner {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ab-left { display: flex; flex-direction: column; gap: 6px; }
.ab-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--text-faint);
}
.ab-role {
  padding: 2px 8px;
  border: 1px solid;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em;
}
.ab-title {
  font-family: var(--font-stencil); font-size: 28px;
  letter-spacing: 0.02em;
}
.ab-right { display: flex; align-items: center; gap: 14px; }

.admin-tabbar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.adm-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  position: relative;
  cursor: pointer;
}
.adm-tab.active {
  border-color: var(--line);
  border-bottom-color: var(--bg-0);
  background: var(--bg-1);
  color: var(--text);
  margin-bottom: -1px;
}
.adm-tab.locked { opacity: 0.45; cursor: not-allowed; }
.adm-tab-code {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
}
.adm-tab-lock { font-size: 11px; }

.admin-verify-wrap { display: flex; flex-direction: column; }

/* ============================================================ */
/* ROLE MANAGER                                                  */
/* ============================================================ */

.rolemgr { display: flex; flex-direction: column; gap: 20px; }

.rolemgr-counts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.rmc-cell {
  padding: 16px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.rmc-cell:last-child { border-right: 0; }
.rmc-cell:hover { background: rgba(255,255,255,0.02); }
.rmc-cell.active { background: var(--bg-2); border: 1px solid; }
.rmc-num {
  font-family: var(--font-stencil); font-size: 28px;
  letter-spacing: 0.02em; line-height: 1;
}
.rmc-lab {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--text-faint);
}

.rolemgr-legend {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.rml-row { display: flex; align-items: center; gap: 14px; }
.rml-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em;
  min-width: 110px;
  text-align: center;
}
.rml-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.rolemgr-tablewrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.rolemgr-toolbar {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.rolemgr-search {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text);
  outline: none;
}
.rolemgr-search:focus { border-color: var(--accent); }
.rolemgr-locked {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  border: 1px dashed var(--line-2);
}
.rolemgr-superbadge {
  padding: 6px 12px;
  border: 1px solid;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em;
}

.rolemgr-table {
  width: 100%;
  border-collapse: collapse;
}
.rolemgr-table th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
.rolemgr-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.rolemgr-table tr.just-changed { background: rgba(255,107,53,0.06); }
.rolemgr-table td.dim { color: var(--text-dim); font-size: 12px; }

.rmu-avatar {
  width: 36px; height: 36px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
}
.rmu-name { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.02em; }
.rmu-id { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.15em; margin-top: 2px; }
.rmu-team-tag {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid;
  font-family: var(--font-stencil); font-size: 9px;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.rmu-team-name { font-size: 12px; color: var(--text-dim); }

.rmu-role-select {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
}
.rmu-role-select:disabled { cursor: not-allowed; opacity: 0.6; }
.rmu-role-select:hover:not(:disabled) { background: var(--bg-3); }

.rolemgr-empty {
  padding: 30px;
  text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-faint);
}

/* ============================================================ */
/* ADMIN TOURNAMENT LIST                                         */
/* ============================================================ */

.admin-trn { display: flex; flex-direction: column; gap: 20px; }
.admin-trn-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 18px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.att-lead-eye {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-faint);
}
.att-lead-title {
  font-family: var(--font-stencil); font-size: 24px;
  letter-spacing: 0.02em; margin-top: 4px;
}
.att-lead-sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--text-dim);
  margin-top: 4px;
}
.att-create {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid;
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--bg-0);
  cursor: pointer;
  transition: transform 0.1s;
}
.att-create:hover { transform: translateY(-1px); }
.att-create-plus {
  font-size: 20px; line-height: 1;
  font-family: var(--font-mono);
}

.admin-trn-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.admin-trn-table th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
.admin-trn-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.admin-trn-table td.dim { color: var(--text-dim); }
.att-name {
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.02em;
}
.att-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.15em;
  margin-top: 2px;
}
.att-type {
  padding: 3px 7px;
  border: 1px solid;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em;
}
.att-status {
  padding: 3px 8px;
  border: 1px solid;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em;
}
.att-status.blink { animation: blink 1.6s ease-in-out infinite; }

.att-actions { display: flex; gap: 4px; }
.att-act {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.att-act:hover { border-color: var(--accent); color: var(--accent); }
.att-act.danger:hover { border-color: var(--bad); color: var(--bad); }

/* ============================================================ */
/* WIZARD MODAL                                                  */
/* ============================================================ */

.wiz-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.wiz-modal {
  width: min(1280px, 100%);
  max-height: calc(100vh - 80px);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.wiz-modal::before,
.wiz-modal::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--accent);
}
.wiz-modal::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.wiz-modal::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.wiz-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
}
.wiz-eye {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em;
}
.wiz-title {
  font-family: var(--font-stencil); font-size: 22px;
  letter-spacing: 0.02em; margin-top: 4px;
}
.wiz-head-right { display: flex; align-items: center; gap: 16px; }
.wiz-adv-toggle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--text-dim);
  cursor: pointer;
}
.wiz-adv-toggle input { cursor: pointer; }
.wiz-close {
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
}
.wiz-close:hover { border-color: var(--accent); color: var(--accent); }

/* Stepper */
.wiz-steps {
  display: flex; gap: 0;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.wiz-step {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 14px;
  text-align: left;
  position: relative;
  cursor: pointer;
}
.wiz-step.active { background: var(--bg-3); border-color: var(--line-2); }
.wiz-step.done { opacity: 0.7; }
.wiz-step-num {
  width: 28px; height: 28px;
  border: 1.5px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0;
  flex-shrink: 0;
  color: var(--text-dim);
}
.wiz-step.done .wiz-step-num { border-color: var(--ok); color: var(--ok); }
.wiz-step-text { min-width: 0; }
.wiz-step-lab {
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.06em;
}
.wiz-step-desc {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; color: var(--text-faint);
  margin-top: 2px;
}
.wiz-step-line {
  position: absolute; right: -20px; top: 50%;
  width: 40px; height: 1px;
  background: var(--line);
  z-index: 0;
}

/* Body */
.wiz-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px;
}
.wiz-step-body {
  display: flex; flex-direction: column; gap: 20px;
}

.wiz-field { display: flex; flex-direction: column; gap: 6px; }
.wiz-field-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-faint);
}
.wiz-field-desc {
  font-size: 12px; color: var(--text-dim);
  line-height: 1.4;
}
.wiz-field-control { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }

.wiz-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wiz-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.wiz-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.wiz-input, .wiz-select, .wiz-textarea {
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--font-body); font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.wiz-input.num { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 0.02em; }
.wiz-input:focus, .wiz-select:focus, .wiz-textarea:focus { border-color: var(--accent); }
.wiz-textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
.wiz-select {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wiz-hint {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Big choice cards (type selection) */
.wiz-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wiz-bigcard {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 20px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.15s, border-color 0.15s;
}
.wiz-bigcard:hover { transform: translateY(-1px); }
.wiz-bigcard.active {
  background: linear-gradient(180deg, var(--bg-2), rgba(255,107,53,0.04));
}
.wbc-icon {
  font-family: var(--font-stencil); font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.wbc-title {
  font-family: var(--font-stencil); font-size: 18px;
  letter-spacing: 0.04em;
}
.wbc-desc { color: var(--text-dim); font-size: 13px; line-height: 1.45; }
.wbc-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.04em;
}
.wbc-bullets li::before { content: "▸ "; color: var(--accent); }

/* Radio cards */
.wiz-radiocard {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.1s, border-color 0.15s;
}
.wiz-radiocard:hover { transform: translateY(-1px); }
.wrc-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
}
.wrc-tag {
  padding: 1px 5px;
  border: 1px solid;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.15em;
}
.wrc-desc { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.wiz-card-row .wiz-radiocard { flex: 1; }
.wiz-card-row { gap: 12px; }
.wiz-card-row.row-many { grid-template-columns: repeat(4, 1fr); }

/* Sub-panel for custom values */
.wiz-subpanel {
  padding: 16px 18px;
  border: 1px dashed var(--line-2);
  background: rgba(0,0,0,0.2);
}
.wiz-subpanel-head {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-faint);
  margin-bottom: 12px;
}

/* Map chips */
.map-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  color: var(--text-dim);
}
.map-chip:hover { color: var(--text); border-color: var(--text-dim); }
.map-chip.on { background: var(--bg-3); }
.map-chip-tick { color: var(--accent); }

/* Prize split */
.prize-split-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.prize-split-cell {
  display: grid;
  grid-template-columns: 50px 80px 16px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.psc-lab {
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.psc-pct {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-faint);
}
.psc-nok {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.05em;
}
.prize-split-total {
  margin-top: 8px;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
  text-align: right;
}

/* Sponsor row */
.sponsor-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sponsor-chip {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--font-stencil); font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--text-dim);
}
.sponsor-chip:hover { transform: translateY(-1px); }
.sponsor-chip.upload {
  border-style: dashed;
  color: var(--text-faint);
}

/* Toggle row (rich switch) */
.toggle-stack { display: flex; flex-direction: column; gap: 8px; }
.toggle-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.toggle-row:hover { border-color: var(--text-dim); }
.toggle-pill {
  width: 36px; height: 18px;
  border-radius: 9px;
  background: var(--line);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.2s;
}
.toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.2s;
}
.toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toggle-label { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.03em; }
.toggle-desc { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.05em; line-height: 1.4; }

/* Upload button */
.wiz-upload-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px;
  border: 1.5px dashed var(--line-2);
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  color: var(--text-dim);
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
}
.wiz-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.wiz-upload-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-faint);
}

/* Step 5 summary */
.wiz-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ws-sec {
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.ws-head {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-faint);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.ws-row {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
}
.ws-row span {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--text-faint);
}
.ws-row b {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.02em; font-weight: normal;
  text-align: right;
}

.publish-state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pub-state {
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.pub-state:hover { transform: translateY(-1px); }
.pub-state-lab {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
}
.pub-state-desc {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--text-faint);
  line-height: 1.4;
}

/* Wizard footer */
.wiz-foot {
  display: flex; justify-content: space-between;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.wiz-foot-right { display: flex; gap: 10px; }
.wiz-btn {
  padding: 10px 22px;
  border: 1px solid;
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.1s;
}
.wiz-btn:hover:not(:disabled) { transform: translateY(-1px); }
.wiz-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wiz-btn.ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-dim);
}
.wiz-btn.ghost:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.wiz-btn.primary {
  color: var(--bg-0);
}

/* Tight role switch row */
.role-switch-row.tight { gap: 2px; }
.role-switch-row.tight .role-btn { padding: 6px 6px; font-size: 10px; }


/* ============================================================ */
/* WIZARD STEP 3 — KONTANT + SPONSOR-PREMIER + BRANDING          */
/* ============================================================ */

/* Wizard section (used in step 3 to group A/B/C) */
.wiz-section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.wiz-section-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.wiz-section-eye {
  width: 30px; height: 30px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0;
  flex-shrink: 0;
}
.wiz-section-title {
  font-family: var(--font-stencil); font-size: 16px;
  letter-spacing: 0.04em;
}
.wiz-section-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-faint);
  margin-top: 3px;
}
.wiz-section-add {
  margin-left: auto;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid;
  font-family: var(--font-stencil); font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.1s;
}
.wiz-section-add:hover { transform: translateY(-1px); }

/* Cash calculator row */
.cash-calc {
  display: flex; align-items: stretch;
  gap: 12px;
  padding: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.cc-cell {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.cc-cell.total {
  border-width: 2px;
  background: linear-gradient(180deg, var(--bg-2), rgba(255,107,53,0.04));
}
.cc-eye {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; color: var(--text-faint);
}
.cc-input-wrap {
  display: flex; align-items: center; gap: 8px;
}
.cc-input-wrap .wiz-input.num {
  flex: 1;
  font-size: 22px;
  padding: 6px 10px;
}
.cc-unit {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-faint);
}
.cc-result {
  font-family: var(--font-stencil);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.cc-result span {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.15em;
  margin-left: 6px;
}
.cc-result.big {
  font-size: 32px; line-height: 1;
}
.cc-hint {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--text-faint);
}
.cc-op {
  font-family: var(--font-stencil);
  font-size: 28px;
  color: var(--text-dim);
  display: flex; align-items: center;
}

/* ====== Sponsor-prizes (varer) ====== */

.prize-empty {
  padding: 30px;
  border: 1px dashed var(--line-2);
  background: rgba(0,0,0,0.2);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.prize-empty.short { padding: 20px; }
.pe-icon {
  font-size: 32px;
  opacity: 0.5;
}
.pe-title {
  font-family: var(--font-stencil); font-size: 14px;
  letter-spacing: 0.04em;
}
.pe-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.05em;
}
.pe-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin-top: 8px;
  max-width: 700px;
}
.pe-preset {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
}
.pe-preset:hover { border-color: var(--accent); color: var(--text); }

.prize-list { display: flex; flex-direction: column; gap: 12px; }

.prize-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}

.prize-img-tile {
  position: relative;
  width: 160px; height: 140px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  overflow: hidden;
  cursor: pointer;
}
.prize-img-tile:hover { border-color: var(--accent); }
.prize-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.prize-img-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  border: 1.5px dashed var(--line-2);
  background: repeating-linear-gradient(45deg, var(--bg-3) 0 8px, var(--bg-2) 8px 16px);
}
.pie-icon {
  font-size: 22px;
  color: var(--text-faint);
}
.pie-lab {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.pie-sub {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-faint);
}
.prize-img-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.prize-img-remove:hover { background: var(--bad); border-color: var(--bad); }

.prize-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.prize-add-more {
  padding: 12px;
  border: 1px dashed var(--line-2);
  background: transparent;
  font-family: var(--font-stencil); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
}
.prize-add-more:hover { border-color: var(--accent); color: var(--text); }
.prize-add-more span { font-size: 16px; margin-right: 6px; font-family: var(--font-mono); }

.prize-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.prize-summary b {
  font-family: var(--font-stencil); font-size: 16px;
  letter-spacing: 0.04em; font-weight: normal;
}

/* ====== Sponsor-branding ====== */

.sponsor-list { display: flex; flex-direction: column; gap: 10px; }

.sponsor-row-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  align-items: center;
}

.sponsor-logo-tile {
  position: relative;
  width: 100px; height: 80px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.sponsor-logo-tile:hover { border-color: var(--accent); }
.sponsor-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
}
.sponsor-logo-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 1.5px dashed var(--line-2);
}

.sponsor-fields-row { min-width: 0; }

/* Summary "small" row for sponsor prizes */
.ws-row.small {
  font-size: 11px;
  padding: 2px 0;
  color: var(--text-dim);
}
.ws-row.small b {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.04em;
}


/* ============================================================ */
/* ============ NEW SCREENS (06-13) — added in v2 ============ */
/* ============================================================ */

/* --- Sidebar group headers (nav sectioning) --- */
.wzn-nav {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.wzn-nav::-webkit-scrollbar { width: 4px; }
.wzn-nav::-webkit-scrollbar-thumb { background: var(--line-2); }
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.nav-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.25em;
  padding: 4px 12px 6px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
}
.nav-item { padding: 8px 12px; }
.nav-title { font-size: 12px; }
.nav-desc { font-size: 8.5px; }

/* Tighter sidebar meta on smaller screens */
.wzn-sidebar { padding: 16px 14px; gap: 14px; overflow: hidden; }

/* Cta sizes */
.cta.small { padding: 9px 14px; font-size: 11px; }
.cta.big { padding: 18px 26px; font-size: 14px; }

/* ============ LIVE MATCH CENTER ============ */
.live-center { display: flex; flex-direction: column; gap: 18px; }

.live-banner {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-1);
  border: 1px solid;
  padding: 14px 22px;
  position: relative;
}
.live-banner::before, .live-banner::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: inherit;
}
.live-banner::before { top: -2px; left: -2px; border-left: 2px solid; border-top: 2px solid; }
.live-banner::after { bottom: -2px; right: -2px; border-right: 2px solid; border-bottom: 2px solid; }

.lb-left { display: flex; align-items: center; gap: 12px; }
.lb-rec {
  width: 12px; height: 12px;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.lb-rec-label {
  font-family: var(--font-stencil);
  font-size: 16px;
  letter-spacing: 0.08em;
}
.lb-sep { color: var(--text-faint); font-family: var(--font-mono); }
.lb-md, .lb-map {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.15em; color: var(--text);
}
.lb-map { color: var(--text-dim); }

.lb-right { display: flex; gap: 12px; }
.lb-pill {
  display: flex; gap: 8px; align-items: baseline;
  padding: 8px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-faint);
}
.lb-pill b {
  font-family: var(--font-stencil); font-size: 16px;
  color: var(--text); font-weight: normal;
  letter-spacing: 0.04em;
}

.live-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}

/* Stream tile mock — looks like a real broadcast embed */
.stream-tile {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.stream-tile.main { border-width: 2px; }
.stream-mock {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,107,53,0.08), transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(255,255,255,0.04), transparent 50%),
    linear-gradient(135deg, #14171c, #0a0c10);
  overflow: hidden;
}
.stream-mock.big { aspect-ratio: 16 / 9; }
.stream-mock.small { aspect-ratio: 16 / 9; }

.stream-mock-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.025) 2px 3px);
  pointer-events: none;
}
.stream-mock-bracket {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,107,53,0.4);
  border-radius: 50%;
}
.stream-mock-bracket::before, .stream-mock-bracket::after {
  content: ""; position: absolute;
  background: rgba(255,107,53,0.5);
}
.stream-mock-bracket::before { left: 50%; top: -8%; bottom: -8%; width: 1px; transform: translateX(-50%); }
.stream-mock-bracket::after { top: 50%; left: -8%; right: -8%; height: 1px; transform: translateY(-50%); }

.stream-mock-corners span {
  position: absolute; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
}
.stream-mock-corners span:nth-child(1) { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.stream-mock-corners span:nth-child(2) { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.stream-mock-corners span:nth-child(3) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.stream-mock-corners span:nth-child(4) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.stream-mock-label {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.25em; color: var(--text-faint);
}

.stream-mock-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  padding: 14px 16px 12px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.sm-team { display: flex; align-items: center; gap: 10px; }
.sm-tag {
  font-family: var(--font-stencil); font-size: 14px;
  padding: 4px 8px; border: 1px solid;
  letter-spacing: 0.04em;
}
.sm-name { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; color: var(--text); }
.sm-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.12em; margin-top: 2px; }
.sm-vitals { display: flex; gap: 14px; }
.sm-vital { display: flex; flex-direction: column; align-items: flex-end; }
.sm-vital span { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.2em; }
.sm-vital b { font-family: var(--font-stencil); font-size: 22px; font-weight: normal; letter-spacing: 0.04em; }

.stream-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--bg-1);
  border-top: 1px solid var(--line-2);
}
.sb-left, .sb-right { display: flex; align-items: center; gap: 10px; }
.sb-live {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 8px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.sb-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text); }
.sb-stat { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }
.sb-btn {
  font-family: var(--font-mono); font-size: 10px;
  padding: 5px 10px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text-dim); letter-spacing: 0.15em;
}
.sb-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Picker row */
.stream-picker {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 14px;
}
.picker-tile {
  background: var(--bg-2); border: 1px solid var(--line);
  text-align: left; padding: 0;
}
.picker-tile:hover { border-color: var(--accent); }
.pt-overlay {
  position: absolute; bottom: 6px; left: 6px; right: 6px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.7); padding: 4px 8px;
}
.pt-tag { font-family: var(--font-stencil); font-size: 10px; padding: 2px 5px; border: 1px solid; }
.pt-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text); }
.pt-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em;
  border-top: 1px solid var(--line);
}
.pt-live { color: var(--accent); }
.pt-views { color: var(--text-dim); }
.pt-status.ok { color: var(--text); font-weight: 700; }
.pt-status.down { color: var(--text-faint); }

/* Live side */
.live-side { display: flex; flex-direction: column; gap: 14px; }
.panel.compact { padding: 16px; }
.panel.compact .ls-head { margin-bottom: 12px; padding-bottom: 10px; }

.ls-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.ls-head-l { display: flex; align-items: center; gap: 10px; }
.ls-title { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.06em; }
.ls-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.18em; margin-top: 2px; }
.ls-pulse {
  width: 8px; height: 8px;
  animation: rec-pulse 1.2s ease-in-out infinite;
}

.live-board { width: 100%; border-collapse: collapse; }
.live-board td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--bg-3);
  font-family: var(--font-mono); font-size: 12px;
}
.live-board tr.top td { background: rgba(255,107,53,0.03); }
.lb-pos { font-family: var(--font-stencil); font-size: 14px; width: 36px; }
.lb-tag {
  width: 32px; text-align: center;
  font-family: var(--font-stencil); font-size: 11px;
  padding: 2px 4px; border: 1px solid;
}
.lb-name { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.04em; }
.lb-k { width: 30px; text-align: right; color: var(--text-dim); }
.lb-p { width: 60px; text-align: right; font-family: var(--font-stencil); font-size: 16px; font-variant-numeric: tabular-nums; }

.lb-legend {
  display: grid;
  grid-template-columns: 36px 32px 1fr 30px 60px;
  gap: 0;
  padding: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.18em;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.lb-legend span:nth-child(4) { text-align: right; }
.lb-legend span:nth-child(5) { text-align: right; }

.ticker-pulse { font-family: var(--font-mono); color: var(--accent); animation: rec-pulse 1.2s infinite; }
.ticker {
  list-style: none;
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin;
}
.tick {
  display: grid;
  grid-template-columns: 56px 8px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 11px;
}
.tick-t { color: var(--text-faint); letter-spacing: 0.08em; }
.tick-pip { width: 6px; height: 6px; margin-top: 5px; background: var(--text-faint); }
.tick-pip.down { background: var(--bad); }
.tick-pip.zone { background: var(--warn); }
.tick-pip.info { background: var(--text-dim); }
.tick-text { color: var(--text); letter-spacing: 0.02em; line-height: 1.4; }

.discord-widget { display: flex; flex-direction: column; gap: 10px; }
.dw-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.dw-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5865F2;
}
.dw-title { flex: 1; color: var(--text); }
.dw-online { color: var(--text-faint); font-size: 10px; }
.dw-msgs { display: flex; flex-direction: column; gap: 8px; }
.dw-msg {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-body); font-size: 13px;
}
.dw-msg b {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent); letter-spacing: 0.1em;
  font-weight: 700;
}
.dw-msg span { color: var(--text-dim); }
.dw-cta {
  margin-top: 4px;
  padding: 10px;
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--text);
}
.dw-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ============ HIGHLIGHTS ============ */
.highlights-screen { display: flex; flex-direction: column; gap: 18px; }

.featured-clip { padding: 0; overflow: hidden; }
.fc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; }
.fc-video { position: relative; }
.fc-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%; border: 3px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
}
.fc-duration {
  position: absolute; bottom: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 8px; background: rgba(0,0,0,0.8);
  color: var(--text); letter-spacing: 0.1em;
}
.fc-tag2 {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-stencil); font-size: 11px;
  padding: 5px 10px; border: 1px solid;
  background: rgba(0,0,0,0.7);
  letter-spacing: 0.08em;
}
.fc-meta { padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; }
.fc-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em;
}
.fc-title {
  font-family: var(--font-stencil); font-size: 30px;
  line-height: 1.05; letter-spacing: 0.02em;
}
.fc-sub {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-dim); letter-spacing: 0.08em;
}
.fc-desc {
  font-style: italic; color: var(--text-dim);
  font-size: 14px; line-height: 1.5;
  padding: 12px 14px;
  border-left: 2px solid var(--accent);
  background: rgba(255,107,53,0.04);
}
.fc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.vote-big {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  min-width: 90px;
}
.vote-big.voted { background: rgba(255,107,53,0.08); }
.vote-arrow { font-size: 18px; line-height: 1; }
.vote-count { font-family: var(--font-stencil); font-size: 16px; margin-top: 2px; }
.vote-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint); margin-top: 4px; }

.fc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  margin-top: 10px;
}
.fc-stats > div { padding: 10px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.fc-stats > div:last-child { border-right: none; }
.fc-stats span { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.fc-stats b { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; margin-top: 4px; }

.clip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.clip-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.clip-card:hover { border-color: var(--line-2); }
.clip-thumb { position: relative; }
.clip-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: rgba(0,0,0,0.5);
}
.clip-duration {
  position: absolute; bottom: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; background: rgba(0,0,0,0.85); color: var(--text);
  letter-spacing: 0.08em;
}
.clip-badge {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-stencil); font-size: 9px;
  padding: 3px 6px; border: 1px solid;
  background: rgba(0,0,0,0.7);
  letter-spacing: 0.08em;
}
.clip-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.clip-cat { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.2em; }
.clip-title { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; line-height: 1.25; }
.clip-team {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.1em;
}
.clip-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.vote-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--text-dim);
  font-family: var(--font-mono); font-size: 11px;
}
.vote-btn:hover { border-color: var(--accent); color: var(--accent); }
.vote-btn.voted { background: rgba(255,107,53,0.08); }
.vote-btn b { font-family: var(--font-stencil); font-weight: normal; font-size: 13px; }
.clip-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.1em;
  margin-left: auto;
}
.clip-meta + .clip-meta { margin-left: 0; }

/* ============ FAIR PLAY ============ */
.fairplay { display: flex; flex-direction: column; gap: 18px; }
.fp-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.fp-stat {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 16px 18px;
}
.fp-stat-k { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.fp-stat-v { font-family: var(--font-stencil); font-size: 36px; line-height: 1; margin: 8px 0 4px; letter-spacing: 0.02em; }
.fp-stat-h { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }

.fp-table .fp-player { display: flex; flex-direction: column; }
.fp-player-name { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.fp-player-by { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; letter-spacing: 0.1em; }
.fp-team-dim { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.fp-evidence { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.fp-status {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 8px; border: 1px solid;
  letter-spacing: 0.18em;
}
.fp-status.bad { font-weight: 700; }
.fp-status.expired { color: var(--text-faint); border-color: var(--line-2); }

.case-list { display: flex; flex-direction: column; gap: 12px; }
.case-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 18px 22px;
  position: relative;
}
.case-card.prio-high { border-left: 3px solid var(--accent); }
.case-card.prio-medium { border-left: 3px solid var(--warn); }
.case-card.prio-low { border-left: 3px solid var(--line-2); }
.case-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.case-subject { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 0.02em; }
.case-reason { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-top: 4px; letter-spacing: 0.04em; }
.prio-badge {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 10px; border: 1px solid;
  letter-spacing: 0.18em;
}
.prio-badge.prio-high { color: var(--accent); border-color: var(--accent); }
.prio-badge.prio-medium { color: var(--warn); border-color: var(--warn); }
.prio-badge.prio-low { color: var(--text-dim); border-color: var(--line-2); }

.case-body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.case-row { display: flex; flex-direction: column; gap: 4px; }
.case-row span { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.2em; }
.case-row b { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 500; letter-spacing: 0.04em; }

.case-progress { display: flex; flex-direction: column; gap: 8px; }
.cp-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.cp-bar { height: 4px; background: var(--bg-3); position: relative; overflow: hidden; }
.cp-fill { height: 100%; transition: width 0.3s; }
.cp-stages {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.12em;
  margin-top: 4px;
}
.cp-stages span.done { color: var(--accent); }

.report-flow { padding: 16px 0; }
.rf-intro {
  padding: 12px 16px;
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 22px;
}
.rf-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.rf-evidence { display: flex; flex-direction: column; gap: 8px; }
.dropzone.small { padding: 24px; }

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 12px 0;
}
.rule-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.rule-num {
  font-family: var(--font-stencil); font-size: 28px;
  letter-spacing: 0.04em;
}
.rule-title {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em;
}
.rule-card p {
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
}

/* ============ POWER RANKINGS ============ */
.power-rankings { display: flex; flex-direction: column; gap: 18px; }
.pr-meta {
  display: flex; flex-direction: column;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-align: right;
}
.pr-meta span { color: var(--text-faint); }
.pr-meta b { font-family: var(--font-stencil); font-size: 14px; font-weight: normal; letter-spacing: 0.04em; color: var(--text); margin-top: 2px; }

.pr-panel-strip { padding: 16px 22px; }
.pps-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; margin-bottom: 12px; }
.pps-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.panelist { display: flex; align-items: center; gap: 10px; }
.panelist-avatar {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
  background: var(--bg-2);
  font-family: var(--font-stencil); font-size: 13px;
}
.panelist-name { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.panelist-role { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; }

.pr-list { display: flex; flex-direction: column; gap: 12px; }
.pr-row {
  display: grid;
  grid-template-columns: 70px 220px 1fr 220px;
  gap: 18px;
  padding: 18px 22px;
  background: var(--bg-2); border: 1px solid var(--line);
  align-items: center;
}
.pr-row.rank-1 { border-color: var(--accent); }
.pr-row.rank-1, .pr-row.rank-2, .pr-row.rank-3 { background: rgba(255,107,53,0.04); }
.pr-rank { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pr-rank-n { font-family: var(--font-stencil); font-size: 36px; line-height: 1; letter-spacing: 0.02em; }
.pr-change {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border: 1px solid;
  letter-spacing: 0.1em;
}
.pr-change.up { color: var(--ok); border-color: var(--ok); }
.pr-change.down { color: var(--bad); border-color: var(--bad); }
.pr-change.flat { color: var(--text-faint); border-color: var(--line-2); }

.pr-team { display: flex; align-items: center; gap: 12px; }
.team-tag.big { font-size: 16px; padding: 6px 10px; }
.pr-team-name { font-family: var(--font-stencil); font-size: 17px; letter-spacing: 0.04em; }
.pr-team-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; margin-top: 2px; }

.pr-blurb {
  font-family: var(--font-body);
  font-size: 13px; color: var(--text-dim);
  line-height: 1.5;
  font-style: italic;
  padding-left: 14px;
  border-left: 1px dashed var(--line-2);
}

.pr-votes { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pr-points { font-family: var(--font-stencil); font-size: 32px; line-height: 1; }
.pr-points-l { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.2em; }
.pr-mini-panel { display: flex; gap: 4px; margin-top: 6px; }
.mini-pick {
  display: flex; flex-direction: column; align-items: center;
  width: 28px;
}
.mp-avatar {
  font-family: var(--font-mono); font-size: 9px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text-dim);
}
.mp-rank {
  font-family: var(--font-stencil); font-size: 10px;
  color: var(--text); margin-top: 2px;
}

.pr-method .pm-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.pr-method h3 { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.04em; }
.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pm-grid b { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.06em; display: block; margin-bottom: 6px; }
.pm-grid p { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* ============ PICK'EM ============ */
.pickem { display: flex; flex-direction: column; gap: 18px; }
.pe-pot { display: flex; flex-direction: column; text-align: right; }
.pe-pot span { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.pe-pot b { font-family: var(--font-stencil); font-size: 22px; font-weight: normal; letter-spacing: 0.04em; margin-top: 2px; }

.pickem-grid { display: grid; grid-template-columns: 1.4fr 340px; gap: 18px; }
.pe-questions { display: flex; flex-direction: column; gap: 14px; }

.pe-question { padding: 18px 22px; }
.peq-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.peq-title { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.04em; }
.peq-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 4px; letter-spacing: 0.08em; }
.peq-points {
  font-family: var(--font-stencil); font-size: 12px;
  padding: 4px 10px; border: 1px solid;
  letter-spacing: 0.06em;
}

.peq-opts { display: flex; flex-direction: column; gap: 6px; }
.peq-opt {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 10px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.peq-opt:hover { border-color: var(--line-2); }
.peq-opt.selected { background: var(--bg-3); }
.peq-opt-bar { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
.peq-opt-l, .peq-opt-r { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.peq-radio {
  width: 14px; height: 14px; border: 2px solid var(--line-2);
  border-radius: 50%; flex-shrink: 0;
}
.peq-radio.on { box-shadow: inset 0 0 0 3px var(--bg-2); }
.peq-opt-label { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; }
.peq-opt-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }
.peq-opt-odds { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.02em; min-width: 50px; text-align: right; }

.peq-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.1em;
}
.peq-locked { color: var(--ok); }

.pe-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; align-self: flex-start; }

.pe-lb { width: 100%; border-collapse: collapse; }
.pe-lb td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--bg-3);
  font-family: var(--font-mono); font-size: 11px;
}
.pe-lb tr.you td { background: rgba(255,107,53,0.06); }
.pe-lb-pos { font-family: var(--font-stencil); font-size: 14px; width: 32px; }
.pe-lb-name { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.you-tag {
  font-family: var(--font-stencil); font-size: 9px;
  padding: 1px 5px; color: var(--bg-0);
  letter-spacing: 0.08em;
}
.pe-lb-acc { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.pe-lb-streak { width: 50px; text-align: right; font-family: var(--font-mono); font-size: 11px; }
.pe-lb-pts { width: 60px; text-align: right; font-family: var(--font-stencil); font-size: 14px; font-variant-numeric: tabular-nums; }

.pe-stats-card { display: flex; flex-direction: column; gap: 10px; }
.pe-stats-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.pe-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pe-stats-grid > div { display: flex; flex-direction: column; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); }
.pe-stats-grid span { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.2em; }
.pe-stats-grid b { font-family: var(--font-stencil); font-size: 20px; font-weight: normal; letter-spacing: 0.02em; margin-top: 4px; }
.pe-progress-l { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; margin-top: 4px; }
.pe-progress-h { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

.pe-rules-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pe-rules-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-dim); line-height: 1.4;
}
.pe-rules-list .bullet { font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; }

/* ============ STATS DEEP DIVE ============ */
.stats-dive { display: flex; flex-direction: column; gap: 18px; }

.heatmap-wrap {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  margin-top: 14px;
}
.heatmap {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(255,107,53,0.04), transparent 60%),
    linear-gradient(135deg, #161614, #0c0c0a);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.hm-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.05) 39px 40px);
}
.hm-noise {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.03) 0, transparent 25%),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.04) 0, transparent 20%);
}
.hm-borders { position: absolute; inset: 12px; pointer-events: none; }
.hm-borders span {
  position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--text-faint);
}
.hm-borders span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hm-borders span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hm-borders span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hm-borders span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hm-coords {
  position: absolute;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.hm-coords.tl { top: 20px; left: 20px; }
.hm-coords.tr { top: 20px; right: 20px; }
.hm-coords.bl { bottom: 20px; left: 20px; }
.hm-coords.br { bottom: 20px; right: 20px; }

.hm-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: auto;
}
.hm-label {
  position: absolute;
  transform: translate(-50%, calc(-50% - 28px));
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text); letter-spacing: 0.15em;
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  background: rgba(10,10,10,0.85);
  white-space: nowrap;
  pointer-events: none;
  transition: border-color 0.15s;
}
.hm-label.active {
  z-index: 5;
  transform: translate(-50%, calc(-50% - 36px));
}
.hm-label-name { font-weight: 700; }
.hm-label-stats {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-dim); margin-top: 3px;
  letter-spacing: 0.1em;
}

.heatmap-legend { display: flex; flex-direction: column; gap: 18px; }
.hml-scale { display: flex; flex-direction: column; gap: 6px; }
.hml-grad { height: 12px; }
.hml-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.15em; }
.hml-stats { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.hml-top { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; }
.hml-num { font-family: var(--font-stencil); font-size: 18px; }
.hml-name { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.04em; }
.hml-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

.tier-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.tier {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 12px 14px;
}
.tier-letter {
  font-family: var(--font-stencil); font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line-2);
  color: var(--text-dim);
}
.tier-S .tier-letter { color: var(--accent); border-right-color: var(--accent); }
.tier-weapons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.weapon-pill {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 6px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  position: relative;
}
.wp-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 700; }
.wp-stats { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10px; }
.wp-use { color: var(--text-dim); }
.wp-kd { color: var(--text); }
.wp-change.up { color: var(--ok); }
.wp-change.down { color: var(--bad); }
.wp-change.flat { color: var(--text-faint); }
.wp-bar { grid-column: 1 / -1; height: 2px; background: var(--bg-0); margin-top: 2px; }
.wp-fill { height: 100%; }

.survival-table .sv-name { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.survival-table .sv-team { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; letter-spacing: 0.1em; }

.clutch-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cb-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; margin-bottom: 12px; }
.cb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cb-cell {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.cb-zone { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.04em; }
.cb-pct { font-family: var(--font-stencil); font-size: 26px; line-height: 1; }
.cb-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.1em; }
.cb-bar { height: 3px; background: var(--bg-0); margin-top: 4px; }
.cb-fill { height: 100%; }

/* ============ NEWS HUB ============ */
.news-hub { display: flex; flex-direction: column; gap: 18px; }
.news-grid { display: grid; grid-template-columns: 1.5fr 320px; gap: 18px; }
.news-main { display: flex; flex-direction: column; gap: 16px; }

.news-featured { padding: 0; overflow: hidden; }
.news-featured > * { padding: 0 !important; }
.news-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.nf-img { position: relative; min-height: 320px; }
.nf-overlay-tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-stencil); font-size: 11px;
  padding: 5px 10px; color: var(--bg-0);
  letter-spacing: 0.08em;
}
.nf-overlay-stamp {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 10px;
  padding: 5px 10px; border: 1px solid var(--text-faint);
  color: var(--text); letter-spacing: 0.18em;
  background: rgba(0,0,0,0.5);
}
.nf-body { padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.nf-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.nf-title { font-family: var(--font-stencil); font-size: 28px; line-height: 1.05; letter-spacing: 0.02em; }
.nf-excerpt { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.nf-meta { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.12em; }
.dot-sep { color: var(--text-faint); }

.news-filters { display: flex; gap: 6px; }
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-row {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 18px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 14px;
}
.nr-img { position: relative; min-height: 140px; }
.nr-cat {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-stencil); font-size: 10px;
  padding: 3px 7px; border: 1px solid;
  background: rgba(0,0,0,0.7);
  letter-spacing: 0.08em;
}
.nr-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.nr-meta { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; }
.nr-title { font-family: var(--font-stencil); font-size: 17px; line-height: 1.2; letter-spacing: 0.02em; }
.nr-excerpt { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.nr-read {
  align-self: flex-start;
  font-family: var(--font-stencil); font-size: 11px;
  color: var(--accent); letter-spacing: 0.08em;
  margin-top: auto;
}

.news-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; align-self: flex-start; }
.patch-log { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.patch-log li {
  display: grid; grid-template-columns: 60px 80px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 11px;
}
.pl-v { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.pl-d { color: var(--text-faint); letter-spacing: 0.08em; }
.pl-c { color: var(--text-dim); letter-spacing: 0.05em; }

.trending-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trending-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.tl-num { font-family: var(--font-stencil); font-size: 20px; letter-spacing: 0.02em; }
.tl-title { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.tl-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; letter-spacing: 0.1em; }

.news-cta p { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 8px 0 12px; }

/* ============ GUIDE / ONBOARDING ============ */
.guide-screen { display: flex; flex-direction: column; gap: 18px; }

.guide-hero {
  background: var(--bg-1);
  border: 2px solid;
  padding: 40px 48px;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,0.02) 47px 48px);
}
.gh-stamp {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.25em;
}
.gh-code { padding: 4px 10px; border: 1px solid; font-weight: 700; }
.gh-classified { color: var(--text-faint); }
.gh-title { font-family: var(--font-stencil); font-size: 56px; line-height: 0.95; letter-spacing: 0.01em; }
.gh-lede { font-size: 15px; color: var(--text-dim); max-width: 720px; line-height: 1.6; }
.gh-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); margin-top: 8px; }
.gh-meta-cell { padding: 12px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.gh-meta-cell:last-child { border-right: none; }
.gh-meta-cell span { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.18em; }
.gh-meta-cell b { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; font-weight: normal; margin-top: 4px; }

.guide-steps { display: flex; flex-direction: column; gap: 0; }
.guide-step {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.guide-step:last-child { border-bottom: none; }
.gs-num {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px;
  border: 1px solid;
  background: var(--bg-2);
}
.gs-num-n { font-family: var(--font-stencil); font-size: 36px; line-height: 1; letter-spacing: 0.02em; }
.gs-num-t { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.15em; margin-top: 6px; }
.gs-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.gs-title { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 0.04em; }
.gs-text { font-size: 14px; color: var(--text-dim); line-height: 1.6; max-width: 720px; }
.gs-arrow {
  position: absolute; bottom: -12px; left: 60px;
  font-family: var(--font-stencil); font-size: 16px;
  color: var(--accent);
  background: var(--bg-1);
  padding: 0 6px;
}

/* WSOW points */
.wsow-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
.wsow-formula { display: flex; flex-direction: column; gap: 10px; }
.wf-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.wf-row.final { background: var(--bg-3); border-color: var(--line-2); }
.wf-l { font-family: var(--font-stencil); font-size: 13px; letter-spacing: 0.04em; }
.wf-r { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.02em; }
.wf-r.big { font-size: 20px; }
.wf-table {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--line);
}
.wfc {
  padding: 10px 4px;
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.1em;
}
.wfc:last-child { border-right: none; }
.wfc b { font-family: var(--font-stencil); font-size: 18px; color: var(--text); font-weight: normal; }
.wf-plus, .wf-eq {
  text-align: center; font-family: var(--font-stencil); font-size: 28px;
  color: var(--text-dim); padding: 4px 0;
}

.wsow-example {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.we-head { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.2em; }
.we-title { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 0.04em; margin-bottom: 8px; }
.we-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-dim);
}
.we-line b { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.02em; color: var(--text); font-weight: normal; }
.we-line.total { padding-top: 10px; border-bottom: none; border-top: 1px solid var(--line); margin-top: 4px; }
.we-line.total b { font-size: 28px; }
.we-foot { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 6px; letter-spacing: 0.1em; line-height: 1.5; }

/* Division ladder */
.div-ladder {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  gap: 16px;
  align-items: stretch;
}
.dl-div { background: var(--bg-2); border: 1px solid var(--line); }
.dl-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.dl-tag {
  font-family: var(--font-stencil); font-size: 14px;
  padding: 4px 10px; letter-spacing: 0.04em;
  background: var(--bg-3); border: 1px solid var(--line-2);
}
.dl-name { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.15em; }
.dl-rows { display: flex; flex-direction: column; }
.dl-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px dashed var(--line);
  font-family: var(--font-body); font-size: 13px;
}
.dl-row:last-child { border-bottom: none; }
.dl-row span { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.12em; }
.dl-row b { font-family: var(--font-stencil); font-size: 12px; letter-spacing: 0.04em; font-weight: normal; }
.dl-row.promo { background: rgba(255,107,53,0.04); }
.dl-row.playoff { background: rgba(217,119,6,0.05); }
.dl-row.demote { background: rgba(239,68,68,0.04); }

.dl-arrows {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  font-family: var(--font-stencil); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.dl-up, .dl-down { writing-mode: vertical-rl; text-orientation: mixed; padding: 12px 0; }

/* Calendar */
.cal-strip {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.cal-cell {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 12px 4px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.cal-cell.next { border-color: var(--accent); background: rgba(255,107,53,0.04); }
.cal-m { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; }
.cal-d { font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.05em; }
.cal-t { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.15em; }
.cal-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Verify steps */
.verify-steps {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
}
.verify-steps li {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.verify-steps li:last-child { border-bottom: none; }
.vs-n {
  font-family: var(--font-stencil); font-size: 24px; line-height: 1;
  text-align: center;
}
.verify-steps b { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }
.verify-steps p { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-row {
  background: var(--bg-2); border: 1px solid var(--line);
}
.faq-row.open { border-color: var(--line-2); }
.faq-q {
  display: grid; grid-template-columns: 40px 1fr 30px;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  align-items: center;
}
.faq-q-n { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.02em; }
.faq-q-t { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.04em; }
.faq-q-tog { font-family: var(--font-stencil); font-size: 20px; text-align: center; }
.faq-a {
  padding: 0 18px 16px 70px;
  font-size: 14px; color: var(--text-dim); line-height: 1.6;
}

.guide-end {
  text-align: center;
  padding: 40px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.ge-stamp {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 12px; border: 1px solid;
  letter-spacing: 0.25em;
  color: var(--text-dim);
}
.ge-title { font-family: var(--font-stencil); font-size: 32px; letter-spacing: 0.02em; }
.ge-sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); letter-spacing: 0.1em; }
.ge-cta { display: flex; gap: 10px; margin-top: 12px; }


/* ============================================================ */
/* ============ AI HIGHLIGHT AGENT CONSOLE =================== */
/* ============================================================ */

.ai-agent { display: flex; flex-direction: column; gap: 18px; }

/* Top banner */
.aa-banner {
  display: flex; justify-content: space-between; align-items: stretch;
  background: var(--bg-1);
  border: 1px solid;
  padding: 16px 22px;
  position: relative;
}
.aa-banner::before, .aa-banner::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: inherit;
}
.aa-banner::before { top: -2px; left: -2px; border-left: 2px solid; border-top: 2px solid; }
.aa-banner::after { bottom: -2px; right: -2px; border-right: 2px solid; border-bottom: 2px solid; }

.aab-left { display: flex; align-items: center; }
.aab-status { display: flex; align-items: center; gap: 14px; }
.aab-pulse {
  width: 14px; height: 14px;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
.aab-status-text { display: flex; flex-direction: column; gap: 4px; }
.aab-label {
  font-family: var(--font-stencil); font-size: 16px;
  letter-spacing: 0.08em;
}
.aab-model {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
}

.aab-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-left: 1px solid var(--line); }
.aab-stat {
  padding: 4px 18px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line);
}
.aab-stat:last-child { border-right: none; }
.aab-stat span { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.2em; }
.aab-stat b { font-family: var(--font-stencil); font-size: 22px; font-weight: normal; letter-spacing: 0.02em; }

/* Pipeline */
.aa-pipeline { padding: 18px 22px; }
.aap-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.aap-head-l { display: flex; align-items: center; gap: 12px; }
.aap-head-r { display: flex; gap: 8px; }

.aap-flow {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.aap-stage {
  flex: 1; min-width: 140px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.aap-stage.active {
  background: rgba(255,107,53,0.06);
  border-width: 2px;
}
.aap-stage.active::before {
  content: ""; position: absolute; top: -3px; left: -3px; right: -3px;
  height: 2px; background: var(--accent);
}
.aaps-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.aaps-name {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em;
}
.aaps-desc {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.05em;
  line-height: 1.4;
}
.aaps-ms {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.1em;
  margin-top: auto;
  padding-top: 6px;
}
.aaps-pulse {
  position: absolute; bottom: 8px; right: 8px;
  width: 8px; height: 8px;
  animation: rec-pulse 0.8s ease-in-out infinite;
}

.aap-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 24px;
  position: relative;
}
.aap-arrow-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line-2);
  transform: translateY(-50%);
}
.aap-arrow-line.lit {
  height: 2px;
  box-shadow: 0 0 8px var(--accent);
}
.aap-arrow-tip {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--text-dim);
  background: var(--bg-1);
  padding: 0 2px;
  position: relative;
  z-index: 1;
}

/* Main two-column */
.aa-main {
  display: grid;
  grid-template-columns: 1.5fr 380px;
  gap: 18px;
  align-items: start;
}
.aa-focus { display: flex; flex-direction: column; gap: 14px; }
.aa-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; }

/* Focus head */
.aaf-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  gap: 16px;
}
.aaf-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.aaf-title {
  font-family: var(--font-stencil); font-size: 22px;
  letter-spacing: 0.02em;
  margin-top: 8px;
}
.aaf-sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.08em;
}
.aaf-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-stencil); font-size: 12px;
  padding: 8px 14px;
  border: 1px solid;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.aabs-pulse {
  width: 8px; height: 8px;
  animation: rec-pulse 1s ease-in-out infinite;
}

/* Video with AI overlay */
.aaf-video { margin-bottom: 14px; position: relative; }
.aaf-overlay-grid {
  position: absolute; inset: 0; pointer-events: none;
}
.aov-corner {
  position: absolute;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent);
  padding: 4px 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--accent);
}
.aov-corner.tl { top: 12px; left: 12px; }
.aov-corner.tr { top: 12px; right: 12px; }
.aov-corner.bl { bottom: 12px; left: 12px; }
.aov-corner.br { bottom: 12px; right: 12px; }

.aov-box {
  position: absolute;
  border: 1px solid;
  box-shadow: 0 0 12px rgba(255,107,53,0.4);
}
.aov-box span {
  position: absolute;
  top: -16px; left: 0;
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; color: #000;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-weight: 700;
}

.aov-reticle {
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  border: 1px solid;
}
.aov-reticle::before, .aov-reticle::after {
  content: ""; position: absolute;
  background: var(--accent);
}
.aov-reticle::before { left: 50%; top: -8px; bottom: -8px; width: 1px; transform: translateX(-50%); }
.aov-reticle::after { top: 50%; left: -8px; right: -8px; height: 1px; transform: translateY(-50%); }

.aaf-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%; border: 3px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: rgba(0,0,0,0.6);
  z-index: 2;
}
.aaf-time {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.8);
  color: var(--text); letter-spacing: 0.1em;
  z-index: 2;
}

/* Key-frame strip */
.aaf-frames { margin-bottom: 18px; }
.aaff-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.aaff-strip {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}
.aaff-frame {
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.aaff-frame.frame-kill { border-width: 2px; }
.aaff-frame.frame-danger { border-color: var(--warn); }
.aaff-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,107,53,0.08), transparent 60%),
    linear-gradient(135deg, #14171c, #0a0c10);
  overflow: hidden;
}
.aaff-kill-pip {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px;
}
.aaff-meta {
  display: flex; flex-direction: column;
  padding: 4px 6px;
  gap: 2px;
}
.aaff-t {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.1em;
}
.aaff-l {
  font-family: var(--font-stencil); font-size: 10px;
  color: var(--text); letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Event timeline */
.aaf-events { }
.aafe-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.aafe-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.aafe-legend {
  display: flex; gap: 14px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.12em;
}
.aafe-legend span { display: flex; align-items: center; gap: 5px; }
.evd { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--line-2); background: var(--bg-3); }
.evd.kill { border: none; }
.evd.audio { background: var(--warn); border: none; }
.evd.movement { background: var(--text-dim); border: none; }
.evd.item { background: var(--ok); border: none; }

.aafe-track {
  position: relative;
  height: 60px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 16px 12px 12px;
  margin-bottom: 18px;
}
.aafe-axis {
  position: absolute;
  bottom: -16px; left: 12px; right: 12px;
  height: 16px;
}
.aafe-axis span {
  position: absolute;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.1em;
  transform: translateX(-50%);
}
.aafe-event {
  position: absolute;
  top: 16px; bottom: 12px;
  width: 4px;
  background: var(--text-dim);
  border: 1px solid transparent;
  transform: translateX(-50%);
  cursor: pointer;
}
.aafe-event.ev-kill { width: 6px; }
.aafe-event.ev-audio { background: var(--warn); }
.aafe-event.ev-movement { background: var(--text-dim); }
.aafe-event.ev-item { background: var(--ok); }
.aafe-event-tip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translate(-50%, -8px);
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  padding: 6px 10px;
  white-space: nowrap;
  font-family: var(--font-mono);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 5;
}
.aafe-event:hover .aafe-event-tip { opacity: 1; }
.aet-t { font-size: 9px; color: var(--accent); letter-spacing: 0.15em; }
.aet-l { font-size: 11px; color: var(--text); letter-spacing: 0.05em; margin-top: 3px; }

.aafe-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.aafe-row {
  display: grid;
  grid-template-columns: 50px 76px 1fr 50px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
}
.aafer-t { color: var(--text-faint); letter-spacing: 0.08em; }
.aafer-type {
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.15em;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
  text-align: center;
  font-weight: 700;
}
.aafer-type.ev-audio { color: var(--warn); border-color: var(--warn); }
.aafer-type.ev-movement { color: var(--text-dim); }
.aafer-type.ev-item { color: var(--ok); border-color: var(--ok); }
.aafer-text { color: var(--text); letter-spacing: 0.03em; }
.aafer-conf { text-align: right; color: var(--text-dim); letter-spacing: 0.08em; }

/* Score breakdown */
.aafs-overall {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.aafs-overall b {
  font-family: var(--font-stencil); font-size: 38px;
  font-weight: normal; letter-spacing: 0.02em;
}

.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 8px 0;
}
.score-axis {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.sa-head { display: flex; justify-content: space-between; align-items: flex-start; }
.sa-label {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.06em;
}
.sa-desc {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.08em;
  margin-top: 4px; line-height: 1.4;
}
.sa-value {
  font-family: var(--font-stencil); font-size: 36px;
  line-height: 1; letter-spacing: 0.02em;
}

.sa-bar {
  position: relative;
  height: 8px;
  background: var(--bg-3);
}
.sa-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; transition: width 0.2s; }
.sa-bar-marks { position: absolute; inset: 0; pointer-events: none; }
.sa-bar-marks span {
  position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: var(--bg-0);
}

.sa-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.sa-conf {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
}
.sa-conf span {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.sa-conf-bar {
  flex: 1; max-width: 80px;
  height: 3px; background: var(--bg-3);
}
.sa-conf-fill { height: 100%; }
.sa-conf b {
  font-family: var(--font-stencil); font-size: 12px;
  font-weight: normal; letter-spacing: 0.02em;
}
.sa-actions { display: flex; gap: 4px; }
.sa-step {
  width: 24px; height: 24px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--text-dim);
  font-family: var(--font-mono); font-size: 14px;
}
.sa-step:hover { color: var(--accent); border-color: var(--accent); }
.sa-reset {
  font-family: var(--font-mono); font-size: 9px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  letter-spacing: 0.15em;
}

.sa-reasoning {
  font-family: var(--font-body); font-size: 12px;
  color: var(--text-dim); line-height: 1.5;
  font-style: italic;
  padding: 10px 12px;
  background: var(--bg-3);
  border-left: 2px solid var(--accent);
}
.sa-r-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent); letter-spacing: 0.2em;
  margin-right: 6px;
  font-style: normal;
  font-weight: 700;
}

/* Auto-metadata side */
.aa-meta { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.aam-row {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.aam-row:last-child { border-bottom: none; padding-bottom: 0; }
.aam-k {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.aam-v {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.aam-text {
  font-family: var(--font-stencil); font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  flex: 1;
}
.aam-text.small {
  font-family: var(--font-body); font-size: 12px;
  font-style: italic; color: var(--text-dim);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.aam-conf {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.08em;
  flex-shrink: 0;
}
.cc-pip { width: 6px; height: 6px; }
.aam-pill {
  font-family: var(--font-stencil); font-size: 11px;
  padding: 4px 10px; border: 1px solid;
  letter-spacing: 0.06em;
}
.aam-pill.big { font-size: 13px; padding: 6px 12px; }
.aam-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.aam-tag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 7px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.aam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.aam-grid > div {
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.aam-grid span {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.15em;
}
.aam-grid b {
  font-family: var(--font-stencil); font-size: 14px;
  font-weight: normal; letter-spacing: 0.04em;
}

/* Recommendation card */
.aa-recommend {
  border-width: 2px !important;
  background: linear-gradient(135deg, rgba(255,107,53,0.06), transparent);
}
.aar-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.25em;
  margin-bottom: 12px;
}
.aar-decision {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-stencil); font-size: 28px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.aar-icon { font-size: 22px; }
.aar-score {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.15em;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.aar-score b {
  font-family: var(--font-stencil); font-size: 22px;
  font-weight: normal; letter-spacing: 0.02em;
}
.aar-similar {
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.aar-similar > span {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.2em;
}
.aars-list { display: flex; gap: 4px; }
.aars-pill {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 8px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.aar-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px;
}
.ghost-btn.warn { color: var(--bad); border-color: rgba(239,68,68,0.4); }
.ghost-btn.warn:hover { background: rgba(239,68,68,0.06); border-color: var(--bad); }

/* Queue list */
.aaq-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 480px; overflow-y: auto;
  scrollbar-width: thin;
  padding-top: 8px;
}
.aaq-row {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
  width: 100%;
}
.aaq-row:hover:not(.selected) { border-color: var(--line-2); }
.aaq-row.selected {
  background: var(--bg-3);
  border-width: 2px;
}
.aaq-row.failed { opacity: 0.7; }
.aaq-top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em;
}
.aaq-time { color: var(--text-faint); }
.aaq-row .team-tag {
  font-size: 9px; padding: 2px 5px;
}
.aaq-player {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text); flex: 1;
}
.aaq-score {
  font-family: var(--font-stencil); font-size: 16px;
  letter-spacing: 0.02em;
  margin-left: auto;
}
.aaq-title {
  font-family: var(--font-stencil); font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.aaq-bot { display: flex; align-items: center; gap: 8px; }
.aaq-prog {
  flex: 1; height: 3px; background: var(--bg-0);
  position: relative; overflow: hidden;
}
.aaq-prog-bar {
  height: 100%;
  transition: width 0.3s;
}
.aaq-status {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  white-space: nowrap;
  font-weight: 700;
}
.aaq-status.status-done { color: var(--ok); }
.aaq-flag {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--warn); letter-spacing: 0.08em;
  padding: 4px 6px;
  background: rgba(217,119,6,0.08);
  border-left: 2px solid var(--warn);
  margin-top: 2px;
}

/* Bottom chart */
.aa-chart {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  align-items: flex-end;
  height: 160px;
  padding: 16px 0;
}
.aac-col {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  height: 100%;
}
.aac-bar {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--line);
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px;
  transition: background 0.2s;
  min-height: 16px;
  align-self: flex-end;
  width: 100%;
}
.aac-val {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text); letter-spacing: 0.05em;
  font-weight: 700;
}
.aac-lab {
  text-align: center;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint); letter-spacing: 0.1em;
}

.aa-chart-foot {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  margin-top: 14px;
}
.aa-chart-foot > div {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.aa-chart-foot > div:last-child { border-right: none; }
.aa-chart-foot span {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.18em;
}
.aa-chart-foot b {
  font-family: var(--font-stencil); font-size: 18px;
  letter-spacing: 0.02em; font-weight: normal;
}

/* Config panel */
.aa-config { display: flex; flex-direction: column; gap: 18px; padding: 8px 0; }
.aac-section { display: flex; flex-direction: column; gap: 10px; }
.aac-section-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.22em;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.aac-weights { display: flex; flex-direction: column; gap: 6px; }
.aacw-row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono); font-size: 11px;
}
.aacw-row > span { color: var(--text-dim); letter-spacing: 0.08em; }
.aacw-bar { height: 6px; background: var(--bg-3); position: relative; }
.aacw-fill { height: 100%; }
.aacw-row b {
  font-family: var(--font-stencil); font-size: 14px;
  text-align: right; font-weight: normal; letter-spacing: 0.02em;
}

.aac-guards { display: flex; flex-direction: column; gap: 6px; }
.aacg {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-dim);
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 2px solid var(--line);
}
.aacg-dot { width: 6px; height: 6px; flex-shrink: 0; }

.aac-fb {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-dim); line-height: 1.6;
  padding: 12px 14px;
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
}


/* ============ AI ENGINE UPLOAD STRIP ============ */
.upload-strip {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.upload-drop {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px;
  cursor: pointer;
  border: 2px dashed transparent;
  transition: border-color 0.15s, background 0.15s;
  gap: 24px;
}
.upload-drop:hover, .upload-drop.over {
  background: var(--bg-2);
}
.upload-drop.over {
  border-style: dashed;
  border-width: 2px;
}
.ud-left { display: flex; align-items: center; gap: 18px; }
.ud-icon {
  width: 56px; height: 56px;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 28px;
  background: var(--bg-2);
}
.ud-title { font-family: var(--font-stencil); font-size: 16px; letter-spacing: 0.04em; }
.ud-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 4px; }
.ud-right { display: flex; align-items: center; gap: 18px; }
.ud-tech {
  display: flex; gap: 0;
  border: 1px solid var(--line);
}
.ud-tech-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px;
  border-right: 1px solid var(--line);
}
.ud-tech-row:last-child { border-right: none; }
.ud-tech-row span { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.18em; }
.ud-tech-row b { font-family: var(--font-stencil); font-size: 13px; font-weight: normal; letter-spacing: 0.04em; }

.upload-progress {
  padding: 22px 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.up-head { display: flex; align-items: center; gap: 16px; }
.up-spinner-wrap { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 2px solid var(--line); background: var(--bg-2); }
.up-spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.up-text { flex: 1; }
.up-title { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 0.06em; }
.up-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; margin-top: 4px; }

.up-stages {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.up-stage {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.12em;
  position: relative;
  transition: border-color 0.2s, color 0.2s;
}
.up-stage.active {
  border-color: var(--accent);
  background: rgba(255,107,53,0.05);
  color: var(--text);
}
.up-stage.done { color: var(--text); }
.ups-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.ups-name { font-family: var(--font-stencil); font-size: 11px; letter-spacing: 0.06em; flex: 1; }
.ups-check { font-size: 12px; font-weight: 700; }
.ups-pulse {
  width: 6px; height: 6px;
  animation: rec-pulse 0.8s ease-in-out infinite;
}

.upload-done {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  background: linear-gradient(135deg, rgba(255,107,53,0.05), transparent);
  gap: 20px;
}
.ud-done-l { display: flex; align-items: center; gap: 16px; }
.ud-done-check {
  width: 44px; height: 44px;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 22px;
}
.ud-done-title { font-family: var(--font-stencil); font-size: 14px; letter-spacing: 0.06em; }
.ud-done-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.08em;
  margin-top: 4px;
}
.ud-done-sub b { font-family: var(--font-stencil); font-weight: normal; }
.ud-done-r { display: flex; gap: 8px; }

.upload-error {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: rgba(239,68,68,0.06);
  border-top: 2px solid var(--bad);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--bad); letter-spacing: 0.08em;
}
.upload-error span:first-child { font-size: 16px; }
.upload-error button { margin-left: auto; color: var(--bad); border-color: rgba(239,68,68,0.4); }

.upload-disclaimer {
  padding: 8px 22px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  border-top: 1px dashed var(--line);
  line-height: 1.5;
}

/* Real video container — keep AI overlay positioned correctly */
.aaf-real-video {
  position: relative;
  background: #000;
}
.aaf-real-video video { position: relative; z-index: 1; }
.aaf-real-video .aaf-overlay-grid { z-index: 2; }


/* ============================================================
   SIDEBAR VARIANTS — added by cleanup
   ============================================================ */

/* Tighter brand block (less crowded vertical space) */
.wzn-sidebar { gap: 16px; }
.wzn-sidebar-meta { font-size: 10px; }

/* ---------- A · Stripped ---------- */
.wzn-nav--stripped { gap: 1px; }
.nav-item-s {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-stencil);
  font-size: 15px;
  letter-spacing: 0.08em;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.nav-item-s:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-2);
}
.nav-item-s.active {
  color: var(--text);
  background: var(--bg-2);
  border-left-color: var(--accent);
}
.nav-item-s.active .nav-s-title { color: var(--text); }
.nav-item-s.locked { opacity: 0.3; cursor: not-allowed; }
.nav-s-bar {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 1px;
  background: var(--accent);
}

/* ---------- B · Code-tag ---------- */
.wzn-nav--code { gap: 2px; }
.nav-item-c {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: stretch;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  min-height: 38px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.nav-item-c:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--text);
}
.nav-item-c.active {
  background: var(--bg-3);
  border-color: var(--line-2);
  color: var(--text);
}
.nav-item-c.locked { opacity: 0.3; cursor: not-allowed; }
.nav-c-stripe {
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.nav-item-c.active .nav-c-stripe {
  background: var(--accent);
  color: #111;
  border-right-color: var(--accent);
  font-weight: 700;
}
.nav-c-title {
  padding: 0 14px;
  display: flex; align-items: center;
  font-family: var(--font-stencil);
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ---------- C · Glyph rail ---------- */
.wzn-nav--glyph { gap: 1px; }
.nav-item-g {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  transition: background 0.12s, color 0.12s;
}
.nav-item-g:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--text);
}
.nav-item-g.active {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--accent);
}
.nav-item-g.active .nav-g-glyph { color: var(--accent); }
.nav-item-g.locked { opacity: 0.3; cursor: not-allowed; }
.nav-g-glyph {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.nav-g-title {
  font-family: var(--font-stencil);
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ---------- Secondary "VERKTØY" drawer (used in A/B/C) ---------- */
.wzn-tools {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.wzn-tools-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.wzn-tools-head:hover { color: var(--text-dim); }
.wzn-tools-count {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 9px;
}
.wzn-tools-caret {
  width: 14px; text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.wzn-tools-list {
  display: flex; flex-direction: column;
  padding: 2px 0 6px;
}
.tools-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 18px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.tools-item:hover { background: var(--bg-2); color: var(--text); }
.tools-item.active { color: var(--accent); background: var(--bg-2); }
.tools-dot {
  width: 4px; height: 4px;
  background: var(--text-faint);
  border-radius: 50%;
  flex-shrink: 0;
}
.tools-item.active .tools-dot { background: var(--accent); }

/* ---------- D · Top mega-nav ---------- */
.app-shell--top {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-shell--top .app-main { flex: 1; }

.wzn-topnav {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.wzn-topnav-row {
  display: flex;
  align-items: stretch;
  height: 64px;
  padding: 0 24px;
  gap: 24px;
}
.wzn-topnav-brand {
  display: flex; align-items: center; gap: 10px;
  border-right: 1px solid var(--line);
  padding-right: 20px;
}
.wzn-topnav-brandtext .brand-title { line-height: 1; }
.wzn-topnav-brandtext .brand-sub {
  font-family: var(--font-mono);
  color: var(--text-faint);
  letter-spacing: 0.14em;
}
.wzn-topnav-items {
  display: flex;
  align-items: stretch;
  flex: 1;
  gap: 0;
  overflow-x: auto;
}
.topnav-item {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 16px;
  gap: 2px;
  color: var(--text-dim);
  border-right: 1px solid transparent;
  transition: color 0.12s, background 0.12s;
}
.topnav-item:hover { color: var(--text); background: var(--bg-2); }
.topnav-item.active { color: var(--text); background: var(--bg-2); }
.topnav-code {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.topnav-item.active .topnav-code { color: var(--accent); }
.topnav-label {
  font-family: var(--font-stencil);
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.topnav-flag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  display: flex;
}
.topnav-flag span { flex: 1; }
.topnav-item.active:not(:has(.topnav-flag))::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
}
.wzn-topnav-right {
  display: flex; align-items: center; gap: 10px;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
.topnav-tools-btn, .topnav-logout {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.topnav-tools-btn:hover, .topnav-logout:hover {
  color: var(--text);
  border-color: var(--line-2);
}
.topnav-tools-count {
  padding: 1px 5px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 9px;
}
.wzn-topnav-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  align-items: center;
}
.topnav-tool {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.topnav-tool:hover { color: var(--text); border-color: var(--line-2); }
.topnav-tool.active { color: var(--accent); border-color: var(--accent); }
.topnav-tool .topnav-code { font-size: 9px; color: var(--text-faint); }
.topnav-role-switch {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.topnav-role-switch .role-switch-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-right: 4px;
}
.topnav-role-switch .role-btn {
  padding: 4px 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* Switcharoo spin-knapp i admin-turneringsliste */
.att-act.spin {
  background: transparent;
  border: 1px solid;
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-weight: 700;
}
.att-act.spin:hover { opacity: 0.8; }

/* Wizard infobox for Switcharoo-format */
.wiz-infobox {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wib-row { display: flex; gap: 1rem; align-items: center; }
.wib-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  min-width: 110px;
}
.wib-val {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
}


/* ────────── SwitcharooWheel (.sw-*) ────────── */
.sw-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:200; display:flex; align-items:center; justify-content:center; }
.sw-modal { background:var(--bg-1); border:1px solid var(--line); width:720px; max-width:95vw; max-height:90vh; overflow-y:auto; }
.sw-head { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.sw-head h2 { font-family:var(--font-stencil); font-size:20px; margin:0; letter-spacing:0.04em; }
.sw-x { background:transparent; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; padding:4px 8px; }
.sw-empty { padding:48px; text-align:center; color:var(--text-dim); font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; }
.sw-players-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; padding:20px 24px; }
.sw-player { border:1px solid var(--line); padding:10px 14px; background:var(--bg-0); transition:border-color 0.1s; }
.sw-player.shuffling { border-color:var(--accent); background:var(--bg-2); }
.sw-player-name { font-family:var(--font-stencil); font-size:13px; letter-spacing:0.04em; }
.sw-player-aid { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); margin-top:2px; }
.sw-actions { display:flex; gap:12px; padding:16px 24px; border-top:1px solid var(--line); }
.sw-spin-icon { font-size:18px; display:inline-block; }
.sw-result-head { padding:16px 24px 8px; font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:0.2em; }
.sw-pairs { display:flex; flex-direction:column; gap:6px; padding:0 24px 16px; }
.sw-pair { display:grid; grid-template-columns:32px 1fr 1fr; gap:12px; align-items:center; padding:10px 14px; background:var(--bg-0); border:1px solid var(--line); }
.sw-pair-bye { opacity:0.5; }
.sw-pair-num { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.sw-pair-team-name { font-family:var(--font-stencil); font-size:12px; letter-spacing:0.04em; grid-column:2/-1; margin-bottom:4px; }
.sw-pair-players { display:flex; gap:16px; grid-column:2/-1; }
.sw-pair-p { font-family:var(--font-mono); font-size:11px; color:var(--text-dim); }

/* ────────── PlayerSignup (.ps-*) ────────── */
.ps-screen { max-width:640px; margin:0 auto; padding:48px 24px; }
.ps-header { margin-bottom:32px; }
.ps-title { font-family:var(--font-stencil); font-size:48px; letter-spacing:0.02em; margin:8px 0 0; }
.ps-lede { color:var(--text-dim); font-size:15px; margin-top:10px; line-height:1.55; }
.ps-login-prompt { border:1px solid var(--line); padding:32px; text-align:center; background:var(--bg-1); }
.ps-form { display:flex; flex-direction:column; gap:20px; }
.ps-field { display:flex; flex-direction:column; gap:6px; }
.ps-label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; color:var(--text-dim); }
.ps-input, .ps-textarea { background:var(--bg-0); border:1px solid var(--line); color:var(--text); font-family:var(--font-body); font-size:15px; padding:10px 14px; width:100%; box-sizing:border-box; }
.ps-input:focus, .ps-textarea:focus { outline:none; border-color:var(--accent); }
.ps-textarea { min-height:80px; resize:vertical; }
.ps-hint { font-family:var(--font-mono); font-size:10px; color:var(--text-faint); }
.ps-error { font-family:var(--font-mono); font-size:10px; color:#e63946; }
.ps-submit { background:var(--accent); border:none; color:var(--bg-0); font-family:var(--font-stencil); font-size:14px; letter-spacing:0.08em; padding:14px 28px; cursor:pointer; font-weight:700; align-self:flex-start; }
.ps-submit:disabled { opacity:0.5; cursor:default; }
.ps-disclaimer { font-size:12px; color:var(--text-faint); }
.ps-success { text-align:center; padding:64px 24px; }
.ps-success-stamp { font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:0.2em; margin-bottom:16px; }
.ps-success-title { font-family:var(--font-stencil); font-size:48px; margin:0 0 12px; }
.ps-success-text { color:var(--text-dim); font-size:15px; max-width:480px; margin:0 auto 32px; line-height:1.55; }
.ps-success-paths { display:flex; flex-direction:column; gap:12px; max-width:480px; margin:0 auto 32px; text-align:left; }
.ps-path { border:1px solid var(--line); padding:16px 20px; background:var(--bg-1); }
.ps-path-num { font-family:var(--font-mono); font-size:10px; color:var(--accent); letter-spacing:0.2em; margin-bottom:6px; }
.ps-path-h { font-family:var(--font-stencil); font-size:15px; letter-spacing:0.04em; margin-bottom:4px; }
.ps-path-p { font-size:13px; color:var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILOPTIMALISERING — WZN LIGA
   Breakpoints: 768px (tablet/stor mobil) + 480px (liten mobil)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── TopNav ── */
  .topnav { padding: 0 16px; height: 52px; }
  .topnav-logo { font-size: 18px; }
  .topnav-groups { display: none; }
  .topnav-right { gap: 8px; }
  .topnav-right .nav-btn { display: none; }
  .topnav-right .nav-btn:last-child { display: flex; }

  /* Hamburger-meny: vis alle nav-items i dropdown ved behov */
  .topnav-mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: none;
    border: 1px solid var(--line); cursor: pointer; color: var(--text);
    font-size: 18px; flex-shrink: 0;
  }

  /* ── PageHeader ── */
  section[style*="padding: 56px 48px"],
  section[style*="padding:56px 48px"] { padding: 32px 20px 24px !important; }
  h1[style*="font-size: 80px"],
  h1[style*="fontSize: 80"] { font-size: 48px !important; }

  /* ── Generelle padding-resets ── */
  .panel { padding: 20px 16px; }
  .section-header { padding: 28px 20px; }

  /* ── Landing ── */
  .bc-hero { padding: 40px 20px; min-height: auto; }
  .bc-hero-title { font-size: 52px !important; }
  .bc-hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bc-hero-actions { flex-direction: column; gap: 10px; }
  .bc-hero-actions .cta { width: 100%; justify-content: center; }
  .bc-next-grid { grid-template-columns: 1fr; }
  .bc-onboard-steps { grid-template-columns: 1fr; }
  .bc-discord-inner { flex-direction: column; gap: 20px; text-align: center; }

  /* ── Turneringer ── */
  .t-grid { grid-template-columns: 1fr !important; }
  .featured-card { flex-direction: column; }
  .fc-meta { grid-template-columns: 1fr 1fr; }
  .filter-strip { gap: 8px; overflow-x: auto; padding-bottom: 8px; flex-wrap: nowrap; white-space: nowrap; }

  /* ── TurneringDetalj ── */
  .trn-hero { padding: 28px 20px; }
  .trn-stat-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 20px; }
  .trn-tabs { padding: 0 16px; overflow-x: auto; }
  .tab { padding: 10px 14px; font-size: 12px; }

  /* ── Admin ── */
  .admin-grid { grid-template-columns: 1fr; }
  .admin-queue { max-height: 200px; }
  .av-detail { padding: 16px; }
  .admin-tabbar { overflow-x: auto; gap: 4px; padding: 0 16px; }
  .adm-tab { padding: 10px 12px; font-size: 11px; white-space: nowrap; }

  /* ── Min Side ── */
  .ms-grid { grid-template-columns: 1fr; }
  .ms-tabs { overflow-x: auto; gap: 4px; }
  .ms-tab { padding: 10px 14px; font-size: 12px; white-space: nowrap; }

  /* ── Leaderboard / Stats ── */
  .lb-table { font-size: 13px; }
  .lb-table td, .lb-table th { padding: 8px 10px; }
  .lb-table .col-wide { display: none; }

  /* ── Footer ── */
  footer[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  footer[style*="gridTemplateColumns: '2fr 1fr 1fr 1fr'"] { grid-template-columns: 1fr 1fr !important; }

  /* ── Dropdown-meny ── */
  .topnav-drop { width: 100vw; right: -16px; left: auto; }

  /* ── Team Create ── */
  .tc-form { padding: 20px 16px; }
  .tc-grid { grid-template-columns: 1fr; }
  .tc-roster-row { grid-template-columns: 1fr; gap: 8px; }

  /* ── Bracket ── */
  .bracket-wrap { overflow-x: auto; }
  .bracket-inner { min-width: 600px; }

  /* ── News ── */
  .news-grid { grid-template-columns: 1fr; }
  .news-side { display: none; }
  .news-featured { flex-direction: column; }
  .nf-img { height: 200px; }

  /* ── Highlights ── */
  .hl-hero { flex-direction: column; }
  .hl-hero-video { height: 200px; }
  .clip-grid { grid-template-columns: 1fr 1fr; }

  /* ── Lag / Spillere ── */
  .top3-grid { grid-template-columns: 1fr; }
  .player-table { font-size: 13px; }
  .player-table .col-extra { display: none; }

  /* ── Captain ── */
  .captain-tabs { overflow-x: auto; }
  .captain-dropzones { flex-direction: column; }
  .dz-half { width: 100%; }
  .captain-step-header { padding: 20px 16px; }
  .wiz-body { padding: 20px 16px; }
}

@media (max-width: 480px) {

  /* ── Ekstra liten skjerm ── */
  .topnav-logo span { display: none; } /* Skjul LIGA-tekst, vis kun ikon */
  .bc-hero-title { font-size: 38px !important; }
  .trn-stat-strip { grid-template-columns: 1fr 1fr; font-size: 12px; }
  .clip-grid { grid-template-columns: 1fr; }
  .bc-hero-stats { grid-template-columns: 1fr; }
  .admin-tabbar { gap: 2px; }
  .adm-tab { padding: 8px 10px; font-size: 10px; }
  .panel { padding: 16px 12px; }

  /* ── Modaler ── */
  div[style*="maxWidth: 520"] { margin: 16px !important; width: calc(100vw - 32px) !important; }
  div[style*="max-width: 520px"] { margin: 16px !important; width: calc(100vw - 32px) !important; }
}
.ps-success-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }