/* =====================================================
   AND-1 — "the stage", for the AND-1 page on doinp.com.br
   Copied from AND-1_brand/design_system (tokens.css + components/bundle.css).
   Tokens are scoped to .a1 instead of :root so they don't override the
   site's own variables (e.g. --warn). Fonts load from the page <head>.
   If the design system changes, copy bundle.css again below the tokens.
   ===================================================== */
.a1 {
  --brand-red: #f70b14;
  --brand-blue: #0067ff;
  --brand-black: #0c0c0c;
  --on-brand: #ffffff;
  --stage: #0a0a0c;
  --panel: rgba(14, 15, 18, 0.94);
  --panel-top: rgba(30, 31, 36, 0.94);
  --panel-bottom: rgba(18, 19, 23, 0.94);
  --row-total: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.3);
  --ink: #f2f3f5;
  --ink-soft: #c9ccd1;
  --ink-muted: #9ea3ab;
  --gain: #4d90ff;
  --loss: #ff4d52;
  --warn: #f5b83d;
  --glow-red: rgba(247, 11, 20, 0.38);
  --glow-blue: rgba(0, 103, 255, 0.40);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --space-9: 56px;
  --radius-s: 2px;
  --slant: -12deg;
  --cut: 34px;
  --font-display: "Archivo", "Arial Narrow", "Arial Black", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}


/* AND-1 — "the stage". Every value comes from tokens.css; class prefix a1-.
   One look for everything: social images, the website, the app. */
.a1, .a1 * { box-sizing: border-box; }
.a1 { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- The stage: black ground, red + blue stadium light, half-court, top stripes ---------- */
.a1-stage { position: relative; overflow: hidden; background: var(--stage); color: var(--ink); font-family: var(--font-mono);
  display: flex; flex-direction: column; gap: var(--space-7); padding: 62px var(--space-9) var(--space-8); }
.a1-stage > * { position: relative; }
.a1-stage > .a1-glow-red, .a1-stage > .a1-glow-blue, .a1-stage > .a1-court, .a1-stage > .a1-stripes { position: absolute; pointer-events: none; }
.a1-glow-red { left: -260px; top: -260px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-red), transparent); }
.a1-glow-blue { right: -300px; bottom: -220px; width: 1000px; height: 1000px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-blue), transparent); }
.a1-court { right: -120px; top: 120px; width: 760px; height: 760px; opacity: .06; }
.a1-stripes { left: 0; right: 0; top: 0; height: 16px; background: repeating-linear-gradient(-60deg, var(--brand-red) 0 18px, transparent 18px 44px); }
.a1-page { min-height: 100%; }   /* a web page on the stage: same layers, fluid width */

/* ---------- Type ---------- */
.a1-disp { font-family: var(--font-display); font-style: italic; font-weight: 900; font-stretch: 72%; letter-spacing: -.005em; }
.a1-num { font-family: var(--font-display); font-stretch: 80%; font-weight: 700; }
.a1-outline { -webkit-text-stroke: 3px var(--ink); color: transparent; }
.a1-headline { font-size: 150px; line-height: .86; }
.a1-headline-m { font-size: 124px; line-height: .88; }
.a1-lab { font: 500 13px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.a1-lab-ink { color: var(--ink); }
.a1-kicker { font: 500 13px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.a1-kicker::before { content: "■"; color: var(--brand-red); margin-right: 14px; }
.a1-body { font: 400 20px/30px var(--font-mono); color: var(--ink-soft); max-width: 900px; }
.a1-small { font: 400 13px/18px var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); }
.a1-strong { font: 600 17px/22px var(--font-mono); color: var(--ink); }
.a1-gain { color: var(--gain); } .a1-loss { color: var(--loss); } .a1-level { color: var(--ink-muted); }

/* ---------- Top bar, chips, tabs ---------- */
.a1-topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); }
.a1-logo { height: 84px; width: auto; display: block; }
.a1-chip { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/18px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); color: var(--ink); }
.a1-chip-backtest { color: var(--warn); border-color: var(--warn); }
.a1-chip-live { color: var(--gain); border-color: var(--gain); }
.a1-chip-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gain); }
.a1-tab { display: inline-block; transform: skewX(var(--slant)); padding: 6px 18px; font: 700 20px/24px var(--font-mono); letter-spacing: .16em; color: var(--on-brand); }
.a1-tab > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.a1-tab-s { padding: 3px 12px; font-size: 15px; line-height: 20px; }
.a1-tab-core { background: var(--brand-red); } .a1-tab-all { background: var(--brand-blue); }

/* ---------- Panels ---------- */
.a1-panel { background: var(--panel); border: 1px solid var(--line); padding: 16px 20px; }
.a1-cut { background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom)); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.a1-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.a1-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

/* ---------- Hero stat ---------- */
.a1-hero { padding: 20px 24px 22px; }
.a1-hero-value { font-size: 112px; line-height: .95; margin: 14px 0 8px; }
.a1-hero-value small { font-size: .5em; color: var(--ink-muted); margin-left: 4px; }
.a1-hero-value-m { font-size: 104px; }
.a1-kv { display: flex; gap: 22px; flex-wrap: wrap; font: 500 17px/24px var(--font-mono); color: var(--ink-muted); }
.a1-kv b { color: var(--ink); font-weight: 600; }
.a1-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 28px; }
.a1-stats .k { font: 500 12px/16px var(--font-mono); letter-spacing: .12em; color: var(--ink-muted); text-transform: uppercase; }
.a1-stats .v { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 30px; line-height: 34px; }

/* ---------- Results table ---------- */
.a1-tablehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.a1-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.a1-table th { font: 500 11.5px/14px var(--font-mono); letter-spacing: .12em; color: var(--ink-muted); text-align: right; padding: 8px 6px 6px; white-space: nowrap; }
.a1-table th.grp { color: var(--ink); text-align: center; border-bottom: 2px solid currentColor; padding-bottom: 5px; }
.a1-table th.l, .a1-table td.l { text-align: left; }
.a1-table td { font-family: var(--font-display); font-stretch: 80%; font-weight: 700; font-size: 25px; line-height: 30px; text-align: right; padding: 9px 6px; border-top: 1px solid var(--line); white-space: nowrap; }
.a1-table td.l { font: 600 16px/30px var(--font-mono); letter-spacing: .06em; }
.a1-table td.na { font: italic 400 15px/30px var(--font-mono); color: var(--ink-muted); text-align: left; }
.a1-table td.dim { color: var(--ink-soft); font-weight: 600; }
.a1-table tr.tot td { background: var(--row-total); font-weight: 900; }

/* ---------- Ticket (one pick) ---------- */
.a1-ticket { --cut: 40px; position: relative; padding: 26px 30px 24px; }
.a1-ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.a1-ticket-player { font-size: 84px; line-height: .95; margin: 18px 0 4px; }
.a1-ticket-line { font: 600 30px/38px var(--font-mono); letter-spacing: .04em; }
.a1-ticket-meta { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 18px; font: 500 17px/24px var(--font-mono); color: var(--ink-muted); }
.a1-ticket-meta b { color: var(--ink); }
.a1-stamp { position: absolute; right: 34px; bottom: 30px; transform: rotate(-8deg); border: 3px solid currentColor; padding: 6px 16px; font: 700 22px/26px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.a1-stamp-win { color: var(--gain); } .a1-stamp-loss { color: var(--loss); }
.a1-tier { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/20px var(--font-mono); letter-spacing: .12em; }
.a1-pips { display: inline-flex; gap: 3px; }
.a1-pip { width: 9px; height: 16px; background: var(--ink); border-radius: 1px; }
.a1-pip-off { opacity: .22; }

/* ---------- Feature tile, season tile, CTA, footer ---------- */
.a1-feat { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.a1-feat-n { font-size: 54px; line-height: 52px; }
.a1-feat-t { font: 400 15px/21px var(--font-mono); color: var(--ink-soft); }
.a1-season { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; }
.a1-season-v { font-size: 44px; line-height: 46px; }
.a1-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--brand-red); color: var(--on-brand); padding: 20px 28px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); text-decoration: none; }
.a1-cta-text { font-size: 44px; line-height: 46px; }
.a1-cta-link { font: 600 22px/28px var(--font-mono); margin-right: 24px; }
.a1-foot { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.a1-foot > div { display: flex; flex-direction: column; gap: 6px; }
.a1-foot > div:last-child { text-align: right; }

/* ---------- Bars ---------- */
.a1-bars text { font: 400 13px var(--font-mono); fill: var(--ink-muted); }
.a1-bars .grid { stroke: var(--line); } .a1-bars .zero { stroke: var(--line-strong); stroke-width: 1.5; }
.a1-bars .up { fill: var(--brand-blue); } .a1-bars .down { fill: var(--loss); }

/* ---------- App controls (the Windows app, the website) ---------- */
.a1-btn { font: 600 14px/20px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; }
.a1-btn:hover { border-color: var(--ink); }
.a1-btn-primary { background: var(--brand-red); border-color: var(--brand-red); color: var(--on-brand); transform: skewX(var(--slant)); }
.a1-btn-primary > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.a1-btn-quiet { border-color: transparent; background: transparent; color: var(--ink-muted); }
.a1-btn:focus-visible, .a1-seg button:focus-visible, .a1-cta:focus-visible { outline: 2px solid var(--gain); outline-offset: 3px; }
.a1-btn:disabled { opacity: .45; cursor: default; }
.a1-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--panel); }
.a1-seg button { font: 600 12px/18px var(--font-mono); letter-spacing: .12em; padding: 7px 14px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; }
.a1-seg button[aria-pressed="true"] { background: var(--brand-blue); color: var(--on-brand); }
.a1-health { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font: 400 14px/20px var(--font-mono); }
.a1-health:first-child { border-top: 0; }
.a1-health-dot { width: 10px; height: 10px; transform: skewX(var(--slant)); }
.a1-health-ok .a1-health-dot { background: var(--gain); } .a1-health-held .a1-health-dot { background: var(--warn); }
.a1-health-failed .a1-health-dot { background: var(--brand-red); }
.a1-health-running .a1-health-dot, .a1-health-waiting .a1-health-dot { background: transparent; border: 2px solid var(--ink-muted); }
.a1-health-state { font: 700 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-align: right; }
.a1-health-ok .a1-health-state { color: var(--gain); } .a1-health-held .a1-health-state { color: var(--warn); }
.a1-health-failed .a1-health-state { color: var(--loss); } .a1-health-running .a1-health-state, .a1-health-waiting .a1-health-state { color: var(--ink-muted); }
.a1-health-detail { color: var(--ink-muted); font-size: 12.5px; }
.a1-result { display: inline-block; min-width: 54px; text-align: center; font: 700 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border: 2px solid currentColor; }
.a1-result-win { color: var(--gain); } .a1-result-loss { color: var(--loss); }
.a1-result-push, .a1-result-void, .a1-result-pending { color: var(--ink-muted); border-style: dashed; }

@media (prefers-reduced-motion: no-preference) { .a1-btn, .a1-seg button { transition: background-color .12s, border-color .12s, color .12s; } }