/* =============================================================================
   components.css — shared site components
   Loads after tokens.css + base.css.
   ============================================================================= */

/* ============================================================================
   Site nav
   ============================================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 12, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.site-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-3) var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text);
  transition: opacity var(--t-fast);
}
.site-nav__brand:hover { opacity: 0.85; }
.site-nav__brand-logo {
  width: 32px;
  height: 32px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(44, 130, 255, 0.35));
}
.site-nav__brand-wordmark {
  letter-spacing: 0.18em;
  color: var(--c-silver);
}
.site-nav__brand-three {
  color: var(--c-brand);
  margin-left: 0.15em;
  font-weight: 700;
}
/* Legacy class kept so older markup doesn't break visually */
.site-nav__brand-mark { color: var(--c-brand); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
}
.site-nav__links a { color: var(--c-text-2); }
.site-nav__links a:hover { color: var(--c-text); }
.site-nav__links a[aria-current="page"] { color: var(--c-brand); }

.site-nav__cta {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-brand);
  border-radius: var(--r-md);
  color: var(--c-brand);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  transition: background var(--t-fast), color var(--t-fast);
}
.site-nav__cta:hover {
  background: var(--c-brand);
  color: var(--c-bg);
}

@media (max-width: 800px) {
  .site-nav__inner   { flex-wrap: wrap; row-gap: var(--sp-2); }
  .site-nav__links   { gap: var(--sp-3) var(--sp-3); font-size: var(--fs-xs); flex-wrap: wrap; }
  .site-nav__links .site-nav__hide-mobile { display: none; }
}

/* ============================================================================
   Site footer
   ============================================================================ */
.site-footer {
  margin-top: var(--sp-12);
  padding: var(--sp-8) 0 var(--sp-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  display: grid;
  gap: var(--sp-5);
}

.site-footer__brand {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text);
  font-size: var(--fs-md);
}

.site-footer__tagline {
  margin: 0;
  color: var(--c-text-2);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.site-footer__links a { color: var(--c-text-2); }
.site-footer__links a:hover { color: var(--c-brand); }

.site-footer__disclaimer {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--c-text-3);
}

.site-footer__hotlines {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ============================================================================
   Hero (used on index + several pages)
   ============================================================================ */
.hero {
  padding: var(--sp-12) 0 var(--sp-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Subtle hexagonal grid behind the hero — echoes the logo's shield + circuit motif.
   Pure CSS / SVG (no extra HTTP), faded to ~6% so it reads as texture, not pattern. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2049%22%3E%3Cpath%20d%3D%22M28%200L56%2014v21L28%2049%200%2035V14z%22%20fill%3D%22none%22%20stroke%3D%22%232c82ff%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
  background-size: 56px 49px;
  opacity: 0.06;
  pointer-events: none;
  /* Soft radial fade so the texture doesn't fight the hero copy at the center */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__logo {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-5);
  display: block;
  filter: drop-shadow(0 0 18px rgba(44, 130, 255, 0.45));
}
@media (max-width: 800px) {
  .hero__logo { width: 72px; height: 72px; }
}

/* ============================================================================
   Metric strip — slim mono row of high-density facts (e.g. "4 LEAGUES · 3 ENGINES")
   ============================================================================ */
.metric-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-6) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-text-3);
  max-width: 720px;
}
.metric-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.metric-strip__num {
  color: var(--c-brand);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-brand);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.05;
  margin: 0 auto var(--sp-5);
  max-width: 18ch;
}

.hero__sub {
  max-width: 60ch;
  margin: 0 auto var(--sp-6);
  font-size: var(--fs-md);
  color: var(--c-text-2);
}

.hero__cta-row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 800px) {
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero__title { font-size: var(--fs-3xl); }
}

/* ============================================================================
   Buttons (.btn-* — shared across pages)
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--f-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border var(--t-fast);
  cursor: pointer;
}

.btn-primary {
  background: var(--c-brand);
  color: var(--c-bg);
  box-shadow: var(--glow-brand);
}
.btn-primary:hover { background: var(--c-brand-2); color: var(--c-bg); }

.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }

.btn-large { font-size: var(--fs-base); padding: var(--sp-4) var(--sp-6); }

/* ============================================================================
   Section headers
   ============================================================================ */
.section {
  padding: var(--sp-10) 0;
}
.section--tight { padding: var(--sp-8) 0; }

.section__head {
  text-align: center;
  margin-bottom: var(--sp-8);
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.section__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: var(--sp-3);
}

.section__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
}

.section__sub {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--c-text-2);
}

@media (max-width: 800px) {
  .section { padding: var(--sp-8) 0; }
  .section__title { font-size: var(--fs-xl); }
}

/* ============================================================================
   Stat cards (homepage performance metrics)
   ============================================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.stat-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-align: left;
}

.stat-card__value {
  font-family: var(--f-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-card__value--accent { color: var(--c-brand); }

.stat-card__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-top: var(--sp-2);
}

.stat-card__sub {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: var(--sp-2);
}

/* ============================================================================
   Pipeline diagram (homepage)
   ============================================================================ */
.pipeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  max-width: 920px;
  margin: 0 auto;
}

.pipeline__node {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  text-align: center;
  transition: border-color var(--t-base);
}
.pipeline__node--cortex  { border-top: 3px solid var(--c-cortex); }
.pipeline__node--oracle  { border-top: 3px solid var(--c-oracle); }
.pipeline__node--arbiter { border-top: 3px solid var(--c-arbiter); }
.pipeline__node--arbiter { grid-column: 2; min-width: 200px; }

.pipeline__name {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-1);
}
.pipeline__name--cortex  { color: var(--c-cortex); }
.pipeline__name--oracle  { color: var(--c-oracle); }
.pipeline__name--arbiter { color: var(--c-arbiter); }

.pipeline__role {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pipeline__edge {
  display: none;
}

@media (max-width: 800px) {
  .pipeline {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cortex"
      "arbiter"
      "oracle";
  }
  .pipeline__node--cortex  { grid-area: cortex; }
  .pipeline__node--arbiter { grid-area: arbiter; }
  .pipeline__node--oracle  { grid-area: oracle; }
}

/* ============================================================================
   Sport cards
   ============================================================================ */
.sports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.sport-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.sport-card--inactive { opacity: 0.5; }

.sport-card__icon {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}

.sport-card__title {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-2);
}

.sport-card__status {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-3);
}
.sport-card__status--active { color: var(--c-brand); }

/* ============================================================================
   Engine profile (engines page)
   ============================================================================ */
.engine-profile {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  border-top-width: 3px;
}
.engine-profile--cortex  { border-top-color: var(--c-cortex); }
.engine-profile--oracle  { border-top-color: var(--c-oracle); }
.engine-profile--arbiter { border-top-color: var(--c-arbiter); }

.engine-profile__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.engine-profile__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.engine-profile__name--cortex  { color: var(--c-cortex); }
.engine-profile__name--oracle  { color: var(--c-oracle); }
.engine-profile__name--arbiter { color: var(--c-arbiter); }

.engine-profile__version {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  letter-spacing: var(--tracking-wide);
}

.engine-profile__role {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.engine-profile__quote {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  line-height: 1.3;
  margin: var(--sp-4) 0 var(--sp-5);
  text-transform: none;
  color: var(--c-text);
  font-style: italic;
  font-weight: 600;
}

.engine-profile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.engine-profile__h {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: var(--sp-2);
}

.engine-profile ul {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.engine-profile ul li { margin-bottom: var(--sp-1); }

/* ============================================================================
   Pricing
   ============================================================================ */
.price-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--c-card);
  border: 2px solid var(--c-arbiter);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
  box-shadow: var(--glow-arbiter);
}

.price-card__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-arbiter);
  margin-bottom: var(--sp-3);
}

.price-card__price {
  font-family: var(--f-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
  margin-bottom: var(--sp-1);
}
.price-card__price small {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  font-weight: 400;
}

.price-card__trial {
  color: var(--c-arbiter);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.price-features {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.price-features li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.price-features li::before {
  content: "✓ ";
  color: var(--c-arbiter);
  font-weight: 700;
}
.price-features li:last-child { border-bottom: 0; }

/* ============================================================================
   Track record / recap empty state + table
   ============================================================================ */
.empty-state {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--c-text-2);
}
.empty-state__title {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}
.empty-state__sub {
  max-width: 50ch;
  margin: 0 auto var(--sp-4);
}

.record-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}
.record-table th, .record-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}
.record-table th {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.record-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Today's preview (homepage)
   ============================================================================ */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.preview-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-arbiter);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.preview-card__sport {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.preview-card__headline {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.preview-card__potd {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}
.preview-card__game {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.preview-card__cta {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ============================================================================
   Newsletter signup
   ============================================================================ */
.newsletter-form {
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: stretch;
}

.newsletter-form input[type="email"] {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--c-brand);
}

.newsletter-form__msg {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  text-align: center;
}
.newsletter-form__msg--ok  { color: var(--c-brand); border: 1px solid var(--c-brand); }
.newsletter-form__msg--err { color: var(--c-error);   border: 1px solid var(--c-error); }

@media (max-width: 800px) {
  .newsletter-form { grid-template-columns: 1fr; }
}

/* ============================================================================
   Auth forms (login, registro)
   ============================================================================ */
.auth-form {
  max-width: 440px;
  margin: 0 auto;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}

.auth-form__label {
  display: grid;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.auth-form__label small {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  text-transform: none;
  letter-spacing: 0;
}

.auth-form input {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  width: 100%;
  font-family: var(--f-mono);
}
.auth-form input:focus {
  outline: none;
  border-color: var(--c-brand);
}

.auth-form__error {
  background: rgba(255, 82, 82, 0.08);
  border: 1px solid var(--c-error);
  color: var(--c-error);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  margin: 0;
}

.auth-form__alt,
.auth-form__legal {
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.auth-form__legal { font-size: var(--fs-xs); }

/* ============================================================================
   Paywall block
   ============================================================================ */
.paywall__eyebrow { color: var(--c-warn); }
.paywall__status {
  margin-top: var(--sp-4);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ============================================================================
   Account page
   ============================================================================ */
.account-grid {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: var(--sp-4);
}

.account-grid__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
  align-items: center;
}
.account-grid__row:last-of-type { border-bottom: 0; }

.account-grid__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.account-grid__value { color: var(--c-text); }

.account-grid__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.account-grid__hint {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

@media (max-width: 800px) {
  .account-grid__row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}

/* ============================================================================
   Dashboard / archive toolbar + cards
   ============================================================================ */
.dashboard-toolbar {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--sp-5);
}

.dashboard-toolbar label {
  display: grid;
  gap: var(--sp-2);
}

.dashboard-toolbar__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

.dashboard-toolbar select,
.dashboard-toolbar input {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}

.dashboard-card {
  border-top: 3px solid var(--c-arbiter);
  box-shadow: var(--glow-arbiter);
}
.dashboard-card__head {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.dashboard-card__game {
  font-family: var(--f-mono);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.dashboard-card__pick {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  margin: var(--sp-3) 0;
  color: var(--c-text);
}
.dashboard-card__stake {
  color: var(--c-arbiter);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-4);
}
.dashboard-card__synthesis {
  color: var(--c-text-2);
  line-height: var(--lh-loose);
}
.dashboard-card__signals {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.dashboard-card + .dashboard-card { margin-top: var(--sp-4); }

.dashboard-card--bet  { border-top-color: var(--c-arbiter); }
.dashboard-card--lean { border-top-color: var(--c-oracle); box-shadow: none; }
.dashboard-card--pass {
  border-top-color: var(--c-text-3);
  box-shadow: none;
  opacity: 0.75;
}

.dashboard-section__title {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
}
.dashboard-section__title:first-child { margin-top: 0; }

.dashboard-meta {
  margin-top: var(--sp-4);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-3);
  text-transform: uppercase;
  text-align: center;
}

.archive-table a { color: var(--c-text); }
.archive-table a:hover { color: var(--c-brand); }

/* ============================================================================
   Legal pages
   ============================================================================ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-10) var(--content-pad);
}
.legal h1 { font-size: var(--fs-2xl); }
.legal h2 {
  font-size: var(--fs-lg);
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.legal p, .legal li {
  color: var(--c-text-2);
  line-height: var(--lh-loose);
}
.legal__review-note {
  background: rgba(255, 215, 64, 0.08);
  border: 1px solid var(--c-warn);
  color: var(--c-warn);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-5);
}