/* ============================================================
   APP — structural layout & components. Colors come ONLY from
   semantic vars set by the active design. Fully responsive.
   ============================================================ */

/* ---------- layout primitives ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.stack{ display:flex; flex-direction:column; }
.stack-4>*+*{ margin-top:var(--sp-4); } .stack-6>*+*{ margin-top:var(--sp-6); } .stack-8>*+*{ margin-top:var(--sp-8); }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
/* responsive 2-column split: stacks on tablet/mobile, side-by-side on desktop.
   minmax(0,…) stops long content from blowing out the track. */
.two-col{ display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
@media (min-width:921px){ .two-col{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
.eyebrow{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.16em; font-weight:700; color:var(--brand-text); }
.muted{ color:var(--text-dim); } .mute2{ color:var(--text-mute); }
.display-title{ font-family:var(--font-display); font-size:var(--fs-3xl); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--surface-2); --fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.7rem 1.15rem; border-radius:var(--radius-pill); font-weight:600; font-size:var(--fs-sm);
  background:var(--bg); color:var(--fg); border:1px solid var(--border);
  transition:transform var(--t-fast), background var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand); color:var(--brand-contrast); border-color:transparent; }
.btn--primary:hover{ filter:brightness(1.06); }
.btn--accent{ background:var(--accent); color:var(--brand-contrast); border-color:transparent; }
.btn--ghost{ background:transparent; }
.btn--soft{ background:var(--brand-soft); color:var(--brand-text); border-color:transparent; }
.btn--block{ width:100%; }
.btn--sm{ padding:.45rem .8rem; font-size:var(--fs-xs); }
.btn--lg{ padding:.9rem 1.5rem; font-size:var(--fs-md); }
.btn--icon{ width:42px; height:42px; padding:0; border-radius:var(--radius-pill); }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- chips / segmented / badges ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:.32rem .7rem; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border); font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); }
.chip.is-on{ background:var(--brand); color:var(--brand-contrast); border-color:transparent; }

.seg{ display:inline-flex; padding:4px; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); }
.seg__opt{ padding:.4rem .85rem; border-radius:var(--radius-pill); font-size:var(--fs-sm); font-weight:600; color:var(--text-dim); transition:var(--t); }
.seg__opt.is-on{ background:var(--brand); color:var(--brand-contrast); box-shadow:var(--shadow-sm); }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:.26rem .6rem; border-radius:var(--radius-pill);
  font-size:var(--fs-xs); font-weight:600; background:var(--surface-3); color:var(--text-dim); }
.badge--win{ background:color-mix(in srgb,var(--win) 18%,transparent); color:var(--win); }
.badge--draw{ background:color-mix(in srgb,var(--draw) 20%,transparent); color:var(--draw); }
.badge--loss{ background:color-mix(in srgb,var(--loss) 18%,transparent); color:var(--loss); }
.badge--open{ background:var(--brand-soft); color:var(--brand-text); }
.badge--locked{ background:var(--surface-3); color:var(--text-mute); }
.badge--live{ background:color-mix(in srgb,var(--loss) 16%,transparent); color:var(--loss); }
.badge--live::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--loss); animation:pulse 1.3s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.points-badge{ font-variant-numeric:tabular-nums; padding:.26rem .6rem; border-radius:var(--radius-sm);
  background:var(--brand-soft); color:var(--brand-text); font-weight:700; font-size:var(--fs-xs); }

/* ---------- cards / panels ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.card--pad{ padding:var(--sp-6); }
.card__head{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--border); }
.card__title{ font-size:var(--fs-lg); font-weight:700; }
.card__body{ padding:var(--sp-6); }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-5); }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.label{ font-size:var(--fs-sm); font-weight:600; color:var(--text-dim); }
.input,.select{ width:100%; padding:.78rem .95rem; border-radius:var(--radius-sm); background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); transition:border-color var(--t), box-shadow var(--t), background var(--t); }
.input::placeholder{ color:var(--text-mute); }
.input:focus,.select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.help{ font-size:var(--fs-xs); color:var(--text-mute); }
.help--err{ color:var(--loss); }
.form-grid{ display:grid; gap:var(--sp-4); }

/* ---------- app shell ---------- */
.appshell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; min-height:100dvh; }
.sidebar{ position:sticky; top:0; align-self:start; height:100vh; height:100dvh; display:flex; flex-direction:column;
  border-right:1px solid var(--border); z-index:var(--z-header); }
.sidebar__brand{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5) var(--sp-5); }
.brand-mark{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem;
  background:var(--grad-brand); color:var(--brand-contrast); flex:none; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); line-height:1; }
.brand-sub{ font-size:var(--fs-xs); color:var(--text-dim); }
[data-design="stadium"] .brand-name,[data-design="stadium"] .brand-sub{ color:var(--brand-contrast); }
.nav{ display:flex; flex-direction:column; gap:2px; padding:var(--sp-3); overflow-y:auto; flex:1; }
.nav__sec{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--text-mute);
  padding:var(--sp-4) var(--sp-3) var(--sp-2); font-weight:700; }
.nav__item{ display:flex; align-items:center; gap:var(--sp-3); padding:.72rem .8rem; border-radius:var(--radius-sm);
  color:var(--text-dim); font-weight:600; font-size:var(--fs-sm); transition:var(--t); position:relative; }
.nav__item:hover{ background:var(--surface-2); color:var(--text); }
.nav__item.is-active{ background:var(--brand-soft); color:var(--brand-text); }
.nav__ic{ width:20px; text-align:center; font-size:1.05rem; opacity:.9; flex:none; }
.nav__badge{ margin-left:auto; font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums; }
.sidebar__foot{ padding:var(--sp-4); border-top:1px solid var(--border); display:flex; align-items:center; gap:var(--sp-3); }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:var(--z-header); display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--gutter); border-bottom:1px solid var(--border); min-height:68px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); }
.topbar__head{ min-width:0; }
.topbar__title{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__sub{ font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.content{ padding:var(--sp-7) var(--gutter) var(--sp-10); flex:1; }
.content__inner{ max-width:var(--maxw); margin-inline:auto; }

.menu-btn{ display:none; }

/* user pill */
.userpill{ display:flex; align-items:center; gap:var(--sp-3); padding:.4rem; border-radius:var(--radius-pill);
  border:1px solid transparent; }
.userpill:hover{ background:var(--surface-2); border-color:var(--border); }
.avatar{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700;
  color:var(--brand-contrast); background:var(--grad-brand); font-size:var(--fs-sm); }
.avatar--lg{ width:56px; height:56px; font-size:var(--fs-lg); }

/* ---------- auth ---------- */
.auth{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth__aside{ position:relative; padding:clamp(2rem,5vw,4.5rem); display:flex; flex-direction:column; justify-content:space-between;
  background:var(--grad-brand); color:var(--brand-contrast); overflow:hidden; }
[data-design="aurora"] .auth__aside{ background:
  radial-gradient(60vmax 50vmax at 0 0, hsl(var(--brand-h) var(--brand-s) 40% / .8), transparent 60%),
  radial-gradient(50vmax 50vmax at 100% 100%, hsl(var(--accent-h) var(--accent-s) 44% / .7), transparent 60%),
  hsl(var(--brand-h) 40% 8%); }
.auth__aside-deco{ position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0); background-size:26px 26px; }
.auth__quote{ font-family:var(--font-display); font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.08; max-width:18ch; }
.auth__panel{ display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem,4vw,3rem); }
.auth__card{ width:100%; max-width:430px; }
.auth__tabs{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.auth__tab{ flex:1; padding:.6rem; border-radius:var(--radius-sm); font-weight:600; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border); }
.auth__tab.is-on{ background:var(--brand); color:var(--brand-contrast); border-color:transparent; }
.divider{ display:flex; align-items:center; gap:var(--sp-3); color:var(--text-mute); font-size:var(--fs-xs); margin:var(--sp-4) 0; }
.divider::before,.divider::after{ content:""; height:1px; flex:1; background:var(--border); }

/* ---------- match card ---------- */
.match{ border-radius:var(--radius); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.match:hover{ box-shadow:var(--shadow); }
.match__meta{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--text-dim); flex-wrap:wrap; }
.match__group{ font-weight:700; color:var(--text); }
.match__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-3); }
.team{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.team--home{ justify-content:flex-end; text-align:right; flex-direction:row-reverse; }
.team__flag{ font-size:1.7rem; line-height:1; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.flagimg{ width:28px; height:21px; border-radius:4px; object-fit:cover; flex:none; vertical-align:middle;
  box-shadow:0 1px 3px rgba(0,0,0,.3); background:var(--surface-3); }
.flagimg--lg{ width:52px; height:39px; border-radius:8px; box-shadow:var(--shadow-sm); }
.flagimg--blank{ display:inline-grid; place-items:center; }
.pick .flagimg--lg{ margin-bottom:2px; }
.team__name{ font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team__name small{ display:block; font-weight:500; color:var(--text-mute); font-size:var(--fs-xs); }
.scorebox{ display:flex; align-items:center; gap:var(--sp-2); }
.score{ width:52px; height:52px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:1.4rem;
  border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  -moz-appearance:textfield; font-variant-numeric:tabular-nums; transition:var(--t); }
.score::-webkit-outer-spin-button,.score::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.score:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.score:disabled{ opacity:1; background:transparent; }
.score-sep{ color:var(--text-mute); font-weight:700; }
.score-actual{ display:grid; place-items:center; min-width:64px; }
.score-actual b{ font-family:var(--font-display); font-size:1.5rem; font-variant-numeric:tabular-nums; }
.match__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-top:var(--sp-3); border-top:1px solid var(--border); font-size:var(--fs-xs); }
.match.is-correct{ border-color:color-mix(in srgb,var(--win) 50%, var(--border)); }
.kick-countdown{ font-variant-numeric:tabular-nums; }

/* ---------- bonus picks ---------- */
.pick-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); }
.pick{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--sp-4); border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface-2); transition:var(--t); text-align:center; }
.pick:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.pick.is-sel{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft); }
.pick__flag{ font-size:2.1rem; }
.pick__name{ font-weight:700; font-size:var(--fs-sm); }
.podium-pick{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(3,1fr); }
.podium-slot{ text-align:center; }
.podium-slot__rank{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); margin-bottom:6px; }

/* ---------- leaderboard ---------- */
.podium{ display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:var(--sp-4); margin-bottom:var(--sp-7); }
.podium__step{ border-radius:var(--radius); padding:var(--sp-5) var(--sp-4); text-align:center; background:var(--surface);
  box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.podium__step--1{ padding-block:var(--sp-7); border-top:4px solid var(--gold); }
.podium__step--2{ border-top:4px solid var(--silver); }
.podium__step--3{ border-top:4px solid var(--bronze); }
.medal{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#1a1205;
  font-size:1.2rem; box-shadow:var(--shadow-sm); }
.medal--1{ background:radial-gradient(circle at 30% 25%, #ffe79a, var(--gold) 60%, var(--gold-2)); }
.medal--2{ background:radial-gradient(circle at 30% 25%, #fff, var(--silver) 60%, var(--silver-2)); }
.medal--3{ background:radial-gradient(circle at 30% 25%, #f4c89c, var(--bronze) 60%, var(--bronze-2)); }
.podium__name{ font-weight:700; }
.podium__pts{ font-family:var(--font-display); font-size:var(--fs-2xl); font-variant-numeric:tabular-nums; }

.lb{ display:flex; flex-direction:column; }
.lb__row{ display:grid; grid-template-columns:44px 1fr auto auto; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); transition:background var(--t); }
.lb__row:last-child{ border-bottom:none; }
.lb__row:hover{ background:var(--surface-2); }
.lb__row.is-me{ background:var(--brand-soft); }
.lb__row.is-me::after{ content:attr(data-you); margin-left:8px; font-size:var(--fs-xs); color:var(--brand-text); font-weight:700; }
.rank{ font-size:var(--fs-lg); color:var(--text-mute); font-variant-numeric:tabular-nums; text-align:center; display:block; }
.rank-medal{ font-size:1.5rem; line-height:1; text-align:center; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.lb__user{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.lb__user>div{ min-width:0; }
.lb__user b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb__pts{ font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; font-size:var(--fs-lg); }
.lb__delta{ font-size:var(--fs-xs); width:56px; text-align:right; }
.delta-up{ color:var(--win); } .delta-down{ color:var(--loss); } .delta-flat{ color:var(--text-mute); }

/* ---------- stats ---------- */
.stat{ padding:var(--sp-5); border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); }
.stat__label{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:700; }
.stat__value{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:4px; }
.stat__hint{ font-size:var(--fs-xs); color:var(--text-mute); margin-top:4px; }
.bar{ height:10px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; }
.bar__fill{ height:100%; border-radius:inherit; background:var(--grad-brand); transition:width var(--t-slow); }
.barrow{ display:grid; grid-template-columns:120px 1fr 48px; align-items:center; gap:var(--sp-3); }
.barrow__label{ font-size:var(--fs-sm); color:var(--text-dim); }
.barrow__val{ font-variant-numeric:tabular-nums; font-weight:700; text-align:right; font-size:var(--fs-sm); }
.spark{ display:flex; align-items:flex-end; gap:4px; height:64px; }
.spark__bar{ flex:1; border-radius:5px 5px 0 0; background:var(--brand-soft); min-height:4px; transition:height var(--t-slow); position:relative; }
.spark__bar.is-best{ background:var(--grad-brand); }

/* ---------- bracket ---------- */
.bracket{ display:flex; gap:var(--sp-6); overflow-x:auto; padding-bottom:var(--sp-4); }
.bround{ display:flex; flex-direction:column; justify-content:space-around; gap:var(--sp-4); min-width:230px; }
.bround__title{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim);
  font-weight:700; text-align:center; margin-bottom:var(--sp-2); }
.tie{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-3); display:flex; flex-direction:column; gap:6px; }
.tie__team{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; }
.tie__team .team__flag{ font-size:1.2rem; }
.tie__score{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.tie__team.is-win{ color:var(--brand-text); }
.tie__team.is-tbd{ color:var(--text-mute); font-style:italic; }

/* ---------- swatches (theme picker) ---------- */
.swatches{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--sp-3); }
.swatch{ aspect-ratio:1; border-radius:var(--radius-sm); border:2px solid var(--border); position:relative; overflow:hidden; transition:var(--t); }
.swatch:hover{ transform:translateY(-2px) scale(1.04); }
.swatch.is-on{ border-color:var(--text); box-shadow:0 0 0 3px var(--brand-soft); }
.swatch.is-on::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5); }

.design-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.design-card{ border:2px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); cursor:pointer; transition:var(--t); background:var(--surface-2); }
.design-card.is-on{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.design-card__prev{ height:74px; border-radius:var(--radius-sm); margin-bottom:var(--sp-3); position:relative; overflow:hidden; }

/* ---------- table ---------- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; }
.table--results{ min-width:0; }
.rr-match{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-weight:600; }
.rr-match .flagimg{ width:22px; height:16px; }
.rr-match b{ font-variant-numeric:normal; }
.table th{ text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); font-weight:700; }
.table td{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); }
.table tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--surface-2); }

/* ---------- empty / hint ---------- */
.empty{ text-align:center; padding:var(--sp-9) var(--sp-5); color:var(--text-dim); }
.empty__ic{ font-size:2.6rem; margin-bottom:var(--sp-3); }
.lock-note{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); color:var(--text-mute); }

/* ---------- hero band (dashboard) ---------- */
.hero-band{ border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.4rem); position:relative; overflow:hidden; }
/* keep hero titles legible over the brand gradient regardless of the chosen colour scheme */
.hero-band .display-title{ text-shadow:0 1px 2px rgba(0,0,0,.22); }
.hero-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-6); align-items:center; }

/* ---------- toast ---------- */
.toast-stack{ position:fixed; bottom:calc(var(--sp-5) + env(safe-area-inset-bottom)); right:var(--sp-5); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--sp-3); max-width:min(92vw,360px); }
.toast{ background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:var(--sp-4);
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:var(--sp-3); animation:toast-in .3s var(--ease-out); }
.toast__ic{ font-size:1.2rem; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
.toast--success{ border-left:4px solid var(--win); } .toast--error{ border-left:4px solid var(--loss); }
.toast--info{ border-left:4px solid var(--brand); }

/* ---------- modal / drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(5,6,14,.55); backdrop-filter:blur(4px); z-index:var(--z-overlay); animation:fade .2s; }
@keyframes fade{ from{opacity:0} }
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center; padding:var(--gutter); }
.modal__card{ width:100%; max-width:560px; max-height:88vh; overflow:auto; animation:pop .3s var(--ease-out); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.sheet{ animation:slide .3s var(--ease-out); }
@keyframes slide{ from{ transform:translateX(-100%); } }

/* mobile menu scrim */
.menu-scrim{ display:none; }

/* design-card preview thumbnails (use active theme hues) */
.design-card__prev{ background:var(--surface-3); }
.design-card[data-design] .design-card__prev,
[data-prev="aurora"]{ background:radial-gradient(120% 120% at 0 0, hsl(var(--brand-h) 60% 22%), hsl(var(--accent-h) 55% 12%)); }
[data-prev="aurora"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:10px; height:22px; border-radius:8px;
  background:hsl(var(--brand-h) 30% 90% / .14); backdrop-filter:blur(4px); border:1px solid hsl(var(--brand-h) 40% 90% / .2); }
[data-prev="stadium"]{ background:var(--grad-brand); }
[data-prev="stadium"]::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.12) 14px 16px); }
[data-prev="editorial"]{ background:#fff; border:1px solid #e7e7ea; }
[data-prev="editorial"]::after{ content:"Aa"; position:absolute; left:12px; bottom:6px; font-family:var(--font-display);
  font-size:1.6rem; color:hsl(var(--brand-h) var(--brand-s) 42%); }
[data-prev="editorial"]::before{ content:""; position:absolute; left:12px; top:14px; width:42px; height:4px; border-radius:3px; background:hsl(var(--brand-h) var(--brand-s) 46%); }

/* ============================================================
   PROMO / LANDING + LOGIN + JOIN
   ============================================================ */
.brand-mark--img{ background:#fff; padding:5px; }
.brand-mark--img img{ object-fit:contain; }

/* toggle switch (admin: activate/deactivate company) */
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{ width:46px; height:27px; border-radius:999px; background:var(--surface-3); position:relative; transition:background var(--t); flex:none; }
.switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--t); }
.switch input:checked + .switch__track{ background:var(--win); }
.switch input:checked + .switch__track::after{ transform:translateX(19px); }
.switch input:focus-visible + .switch__track{ box-shadow:0 0 0 4px var(--brand-soft); }
.switch__label{ font-size:var(--fs-sm); font-weight:600; }
.admin-co.is-inactive{ opacity:.55; }
.admin-co__head{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; }
.admin-co__head:hover{ opacity:.82; }
.admin-co__meta{ min-width:0; display:flex; flex-direction:column; }
.admin-co__meta b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-co__sw{ margin-left:auto; width:30px; height:30px; border-radius:8px; flex:none; }
.btn-danger{ color:var(--loss); }
.btn-danger:hover{ border-color:var(--loss); background:color-mix(in srgb, var(--loss) 12%, transparent); }
textarea.input{ resize:vertical; font-family:var(--font-body); line-height:1.45; }
.roster-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.roster-row:last-child{ border-bottom:none; }
.podium__medal{ font-size:2.4rem; line-height:1; margin-bottom:2px; }

/* prominent language switch (SK / EN) */
.lang-switch{ flex:none; }
.lang-switch .seg__opt{ padding:.45rem .75rem; font-weight:700; letter-spacing:.02em; }

.promo{ min-height:100vh; min-height:100dvh; }
.promo__bar{ position:sticky; top:0; z-index:var(--z-header); display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); padding:var(--sp-4) var(--gutter); flex-wrap:nowrap;
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.promo__bar-actions{ display:flex; align-items:center; gap:var(--sp-2); flex:none; flex-wrap:nowrap; }
.promo__bar-actions .btn{ white-space:nowrap; }
.promo__brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); cursor:pointer; min-width:0; }
.promo__brand b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.promo__brand .brand-mark{ width:38px; height:38px; font-size:1.2rem; }

.promo__hero, .promo__anon, .promo__cta{
  position:relative; overflow:hidden; color:var(--brand-contrast);
  background:var(--grad-brand); border-radius:var(--radius-lg); }
.promo__hero::after, .promo__anon::after, .promo__cta::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(40vmax 40vmax at 88% -20%, rgba(255,255,255,.22), transparent 60%),
            repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.05) 26px 28px); }
.promo__hero{ margin:var(--sp-6) var(--gutter) 0; }
.promo__hero-inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; padding:clamp(2rem,6vw,5rem) clamp(1.2rem,4vw,3.5rem); }
.promo__hero .eyebrow{ color:var(--brand-contrast); opacity:.9; }
.promo__title{ font-size:clamp(2.2rem,6vw,4.2rem); max-width:18ch; margin-top:var(--sp-3); }
.promo__lead{ font-size:clamp(1.05rem,2.2vw,1.4rem); max-width:46ch; margin-top:var(--sp-4); opacity:.95; }
.promo__hero .btn--primary{ background:var(--brand-contrast); color:var(--brand); }
.promo__hero .btn--ghost{ border-color:color-mix(in srgb,var(--brand-contrast) 60%,transparent); color:var(--brand-contrast); }
.promo__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.5rem); margin-top:var(--sp-8); }
.promo__facts div{ display:flex; flex-direction:column; }
.promo__facts b{ font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; }
.promo__facts span{ font-size:var(--fs-sm); opacity:.85; text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }

.promo__section{ max-width:var(--maxw); margin-inline:auto; padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) 0; }
.promo__head{ margin-bottom:var(--sp-6); }
.promo__head h2{ font-size:clamp(1.8rem,4vw,2.8rem); margin-top:6px; }
.promo__body{ font-size:var(--fs-lg); color:var(--text-dim); max-width:62ch; line-height:1.6; }

.promo-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.promo-step{ position:relative; }
.promo-step__n{ position:absolute; top:-14px; right:18px; font-family:var(--font-display); font-weight:900; font-size:3.4rem;
  line-height:1; color:var(--brand-soft); }
.promo-step__ic{ display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--brand-soft); color:var(--brand-text); margin-bottom:var(--sp-3); }
.promo-step__ic .ic{ width:24px; height:24px; }
.promo-step h3{ font-size:var(--fs-lg); margin-bottom:6px; }

.score-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:.7rem 0; border-bottom:1px solid var(--border); }
.score-row:last-child{ border-bottom:none; }
.score-row .points-badge{ font-size:var(--fs-sm); }

.promo__anon, .promo__cta{ text-align:center; padding:clamp(2rem,5vw,3.5rem); }
.promo__anon > *, .promo__cta > *{ position:relative; z-index:1; }
.promo__anon h2, .promo__cta h2{ font-size:clamp(1.7rem,4vw,2.6rem); margin-bottom:var(--sp-3); }
.promo__anon p, .promo__cta p{ max-width:60ch; margin-inline:auto; opacity:.95; }
.promo__anon-ic{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.18); margin-bottom:var(--sp-4); }
.promo__anon-ic .ic{ width:30px; height:30px; }

.promo-deadlines{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.promo-dl{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.promo-dl .ic{ color:var(--brand-text); flex:none; margin-top:2px; }

.promo__footer{ text-align:center; color:var(--text-mute); padding:var(--sp-9) var(--gutter); margin-top:var(--sp-7);
  border-top:1px solid var(--border); font-size:var(--fs-sm); }

/* login + join centered card */
.promo--auth{ display:flex; flex-direction:column; }
.auth-card-wrap{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding:clamp(1.5rem,5vw,3.5rem) var(--gutter); }
.auth-card-wrap .auth__card{ width:100%; max-width:460px; }
.join__qr{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--border); }
.join__qr img{ border-radius:12px; background:#fff; padding:6px; flex:none; }
.join__url{ display:block; font-size:var(--fs-xs); color:var(--text-dim); word-break:break-all; margin-top:4px; }

/* multi-step join wizard */
.join-steps{ display:flex; gap:6px; justify-content:center; margin-bottom:var(--sp-4); }
.join-steps span{ width:28px; height:4px; border-radius:2px; background:var(--border-strong); transition:background var(--t); }
.join-steps span.is-on{ background:var(--brand); }

.qr-scan{ position:relative; width:100%; max-width:300px; aspect-ratio:1/1; margin:0 auto var(--sp-4);
  border-radius:var(--radius-md); overflow:hidden; background:#000; border:1px solid var(--border-strong); }
.qr-scan video{ width:100%; height:100%; object-fit:cover; display:block; }
.qr-scan__frame{ position:absolute; inset:16%; border:2px solid rgba(255,255,255,.92); border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28); }
.qr-scan__hint{ position:absolute; left:8px; right:8px; bottom:8px; text-align:center; color:#fff;
  font-size:var(--fs-xs); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.qr-scan--off{ background:var(--surface-2); display:grid; place-items:center; aspect-ratio:16/10; }
.qr-scan__off{ display:grid; justify-items:center; gap:var(--sp-2); padding:var(--sp-5); text-align:center; color:var(--text-mute); }
.qr-scan__off .ic{ width:34px; height:34px; }

.join-or{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-4) 0; color:var(--text-mute); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
.join-or::before,.join-or::after{ content:""; flex:1; height:1px; background:var(--border); }

/* compact step-1 (QR scan) card — fits without scrolling, camera reads as part of the card */
.auth-card-wrap--center{ align-items:center; padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
.auth__card--scan{ max-width:360px; padding:var(--sp-5); }
.auth__card--scan .join-steps{ margin-bottom:var(--sp-3); }
.join-scan__head{ text-align:center; margin-bottom:var(--sp-3); }
.join-scan__head .display-title{ font-size:var(--fs-xl); line-height:1.1; }
.join-scan__head .help{ margin-top:4px; }
.auth__card--scan .qr-scan{ max-width:188px; aspect-ratio:1/1; margin:0 auto var(--sp-3); }
.auth__card--scan .qr-scan__frame{ inset:12%; box-shadow:0 0 0 100vmax rgba(0,0,0,.22); }
.join-scan__form{ display:flex; gap:var(--sp-2); align-items:stretch; }
.join-scan__form .input{ flex:1; min-width:0; }
.join-scan__form .btn{ flex:none; white-space:nowrap; }
.join-scan__foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); }
.join-scan__foot .btn{ padding-left:.6rem; padding-right:.6rem; }
.join-err{ display:none; margin-bottom:var(--sp-3); }
.join-err.show{ display:block; animation:toast-in .2s var(--ease-out); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
}
@media (max-width: 920px){
  .appshell{ grid-template-columns:1fr; }
  /* drawer must sit ABOVE the scrim, and be OPAQUE + un-blurred so the menu is crisp.
     Subtle slide-in + fade. */
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:280px; max-width:84vw;
    transform:translateX(-100%) translateZ(0); opacity:0; will-change:transform,opacity;
    transition:transform .34s var(--ease-out), opacity .34s var(--ease-out);
    box-shadow:var(--shadow-lg); z-index:90; }
  .appshell.nav-open .sidebar{ transform:translateX(0); opacity:1; background:var(--bg-2);
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* scrim: always present in DOM, fades in/out (so closing animates too); below the drawer */
  .menu-scrim{ display:block; opacity:0; pointer-events:none; animation:none; z-index:60;
    transition:opacity .3s var(--ease); }
  .appshell.nav-open .menu-scrim{ opacity:1; pointer-events:auto; }
  .menu-btn{ display:inline-flex; }
  .swatches{ grid-template-columns:repeat(6,1fr); }
  .design-cards{ grid-template-columns:1fr; }
  .auth{ grid-template-columns:1fr; }
  .auth__aside{ display:none; }
}
@media (max-width: 760px){
  /* keep the topbar on a single row */
  .topbar{ flex-wrap:nowrap; gap:var(--sp-2); min-height:60px; }
  .topbar__head{ flex:1; }
  .topbar__title{ font-size:var(--fs-lg); }
  .topbar__sub{ display:none; }
  .userpill b{ display:none; }            /* avatar only — saves width */
  .userpill{ padding:.25rem; }
  .topbar__palette{ display:none; }       /* settings still reachable via the avatar */
  .lang-switch .seg__opt{ padding:.35rem .5rem; font-size:var(--fs-xs); }
}
@media (max-width: 680px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .podium{ grid-template-columns:1fr 1fr 1fr; gap:var(--sp-2); }
  .podium__step{ padding:var(--sp-4) var(--sp-2); }
  .podium__step--1{ padding-block:var(--sp-5); }
  .podium__pts{ font-size:var(--fs-xl); }
  .podium .avatar--lg{ width:44px; height:44px; font-size:var(--fs-md); }
  .swatches{ grid-template-columns:repeat(6,1fr); }
  .podium-pick{ grid-template-columns:1fr; }
  .lb__row{ grid-template-columns:34px 1fr auto; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); }
  .lb__delta{ display:none; }
  .card__head,.card__body,.card--pad{ padding:var(--sp-4); }
  .card__head{ padding-inline:var(--sp-4); }
  .col-md{ display:none; }                 /* hide matchday column on phones */
  .table th,.table td{ padding:10px 8px; }
  .table--results th:first-child,.table--results td:first-child{ padding-left:var(--sp-4); }
  .rr-match{ gap:5px; }
  .rr-match .flagimg{ width:20px; height:15px; }
  .content{ padding-top:var(--sp-5); padding-bottom:var(--sp-9); }
  .score{ width:46px; height:46px; font-size:1.2rem; }
  .match__meta{ font-size:11px; }
  .hero-band{ padding:var(--sp-5) var(--sp-4); }
  .display-title{ font-size:1.9rem; }
  /* bigger tap targets for chips/segmented on touch */
  .seg__opt{ padding:.5rem .8rem; }
  .chip{ padding:.42rem .75rem; }
  .nav__item{ padding:.85rem .8rem; }
  .promo-steps,.promo-deadlines{ grid-template-columns:1fr; }
  .promo__facts{ gap:1.4rem 2rem; }
}
@media (max-width: 420px){
  .swatches{ grid-template-columns:repeat(4,1fr); }
  .promo__brand b{ display:none; }       /* keep the bar on one row on tiny phones */
  .lang-switch .seg__opt{ padding:.35rem .45rem; }
  .team__name{ font-size:var(--fs-sm); }
  .match__row{ gap:var(--sp-2); }
  .score{ width:42px; height:42px; font-size:1.1rem; }
  .medal{ width:38px; height:38px; font-size:1rem; }
  .stat__value{ font-size:2rem; }
}