/* ============================================================
   VM LIVE 2026 — DESIGN TOKENS
   ============================================================ */
:root{
  /* color — dark */
  --bg-0:#070a12;
  --bg-1:#0b0f1c;
  --bg-2:#10162a;
  --surface:rgba(20,26,44,.66);
  --surface-solid:#141a2c;
  --surface-hi:rgba(34,42,68,.7);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#f3f6fd;
  --text-2:#aeb6cc;
  --text-3:#737d99;
  --se-blue:#2d8bf0;
  --se-blue-deep:#0a4ea3;
  --se-yellow:#ffcb2e;
  --se-yellow-deep:#e0a800;
  --live:#ff4d5e;
  --live-glow:rgba(255,77,94,.45);
  --win:#3ddc97;
  --accent-grad:linear-gradient(135deg,#2d8bf0 0%,#0a4ea3 100%);
  --se-grad:linear-gradient(135deg,#1f7fe6 0%,#0a3f8a 55%,#ffcb2e 320%);
  --se-grad-soft:linear-gradient(150deg,rgba(45,139,240,.22) 0%,rgba(10,63,138,.10) 55%,rgba(255,203,46,.14) 130%);
  --glow-blue:0 0 0 1px rgba(45,139,240,.35),0 18px 50px -18px rgba(45,139,240,.55);
  /* type */
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,sans-serif;
  /* space / radius / shadow / motion */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 30px -12px rgba(0,0,0,.65);
  --sh-3:0 26px 60px -24px rgba(0,0,0,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:70px;
  --maxw:560px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--f-body);
  background:var(--bg-0);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.45;
}
/* atmospheric background */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-fx::before,.bg-fx::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}
.bg-fx::before{width:70vw;height:70vw;left:-25vw;top:-20vh;background:radial-gradient(circle,rgba(45,139,240,.32),transparent 70%)}
.bg-fx::after{width:60vw;height:60vw;right:-25vw;bottom:-10vh;background:radial-gradient(circle,rgba(255,203,46,.16),transparent 70%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--se-blue);color:#fff}
::-webkit-scrollbar{width:0;height:0}

/* ============================================================ LAYOUT */
.app{max-width:var(--maxw);margin:0 auto;min-height:100dvh;position:relative;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));}
@media(min-width:600px){.app{box-shadow:0 0 0 1px var(--line),0 40px 120px -40px rgba(0,0,0,.7)}}

/* top app bar */
.appbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  background:linear-gradient(var(--bg-0),color-mix(in srgb,var(--bg-0) 70%,transparent));
  border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;
  display:flex;align-items:center;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:900;
  letter-spacing:-.02em;font-size:18px;line-height:1;text-align:left;border-radius:14px;padding:2px 4px 2px 0}
.brand:hover .mark{transform:translateY(-1px)}
.brand:focus-visible{outline:2px solid var(--se-yellow);outline-offset:4px}
.brand .mark{width:32px;height:42px;border-radius:0;background:transparent;
  display:grid;place-items:center;position:relative;overflow:visible;flex:0 0 auto;transition:.18s var(--ease)}
.brand .mark img{width:30px;height:42px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.44))}
.brand small{display:block;font-family:var(--f-body);font-weight:600;font-size:10px;
  letter-spacing:.18em;color:var(--se-yellow);text-transform:uppercase;margin-top:3px}
.appbar .spacer{flex:1}
.appbar-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.appbar-updated{flex:0 1 auto;min-width:0;justify-content:flex-end;white-space:nowrap}
.appbar-userline{display:flex;align-items:center;gap:8px;min-width:0}
.appbar-user{
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--text-3);
  font-weight:700;
}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);transition:.2s var(--ease);color:var(--text)}
.icon-btn:hover{background:var(--surface-hi);transform:translateY(-1px)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}

/* live sticky banner (Sweden) */
.se-live-banner{position:sticky;top:62px;z-index:39;margin:0;display:none;
  align-items:center;gap:10px;padding:11px 18px;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,77,94,.92),rgba(160,20,40,.92));
  color:#fff;font-weight:700;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.15);
  animation:bannerin .5s var(--ease-out)}
.se-live-banner.show{display:flex}
@keyframes bannerin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.se-live-banner .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.se-live-banner .go{margin-left:auto;font-size:12px;opacity:.9;display:flex;align-items:center;gap:3px}

/* views */
.view{padding:20px 18px 8px;animation:viewin .42s var(--ease-out)}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.h1{font-family:var(--f-display);font-weight:900;letter-spacing:-.03em;font-size:34px;line-height:1.02}
.h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;font-size:22px;line-height:1.1}
.section{margin-top:26px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.section-head .cnt{font-size:12px;color:var(--text-3);font-weight:600}
.updated{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3);font-weight:500}
.updated .d{width:6px;height:6px;border-radius:50%;background:var(--win);box-shadow:0 0 8px var(--win)}

/* ============================================================ FILTER CHIPS */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 18px 4px;margin:0 -18px;scroll-snap-type:x proximity}
.chip{flex:0 0 auto;padding:8px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  transition:.22s var(--ease);white-space:nowrap;display:flex;align-items:center;gap:6px;scroll-snap-align:start}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.active{background:var(--text);color:var(--bg-0);border-color:var(--text);font-weight:700}
.chip.se.active{background:var(--se-grad);color:#fff;border-color:transparent;box-shadow:var(--glow-blue)}
.chip.live-c.active{background:var(--live);color:#fff;border-color:transparent}
.chip .ld{width:7px;height:7px;border-radius:50%;background:var(--live)}
.chip.live-c.active .ld{background:#fff;animation:pulse 1.4s infinite}

/* ============================================================ SWEDEN HERO */
.hero{position:relative;margin-top:18px;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(45,139,240,.3);background:var(--se-grad-soft);
  box-shadow:var(--sh-3);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 85% -10%,rgba(255,203,46,.22),transparent 60%),
             radial-gradient(120% 90% at 0% 110%,rgba(45,139,240,.3),transparent 55%);}
.hero .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 60%);
  transform:translateX(-100%);animation:sheen 5.5s var(--ease) infinite 1s}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.hero-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0}
.hero-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);
  font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.28);padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16)}
.hero-tag .se-flag{width:18px;height:12px}
.wm26-badge{
  width:20px;height:20px;border-radius:6px;display:inline-grid;place-items:center;
  background:var(--se-grad);color:#fff;font-family:var(--f-display);font-weight:900;
  font-size:10px;letter-spacing:.01em;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
}
.hero-grp{font-size:12px;font-weight:700;color:var(--text-2)}
.hero-body{padding:14px 18px 18px}
.hero-teams{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 16px}
.hero-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.hero-team .flag{width:62px;height:42px;border-radius:9px}
.hero-team .nm{font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:-.01em}
.hero-team .cd{font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.08em}
.hero-vs{font-family:var(--f-display);font-weight:900;font-size:13px;color:var(--text-3);
  padding:7px 0;display:flex;flex-direction:column;align-items:center;gap:4px}
.countdown{display:flex;gap:7px;justify-content:center;margin-bottom:16px}
.cd-box{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:9px 4px;min-width:60px;text-align:center;backdrop-filter:blur(6px)}
.cd-box b{font-family:var(--f-display);font-weight:900;font-size:30px;font-variant-numeric:tabular-nums;
  display:block;line-height:1;letter-spacing:-.02em}
.cd-box span{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.meta-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--text-2);background:rgba(0,0,0,.22);border:1px solid var(--line);
  padding:7px 12px;border-radius:var(--r-pill)}
.meta-pill svg{width:14px;height:14px;opacity:.8}
.hero-actions{display:flex;gap:10px}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:var(--r-md);font-family:var(--f-display);font-weight:700;font-size:14px;
  transition:.2s var(--ease)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--se-grad);color:#fff;box-shadow:var(--glow-blue)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:var(--surface);border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:var(--surface-hi)}
.btn.on{background:var(--win);color:#04130c;box-shadow:none}
.matchday-hero[data-match]{
  cursor:pointer;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease);
}
.matchday-hero[data-match]:hover{
  transform:translateY(-3px);
  border-color:rgba(255,203,46,.48);
  box-shadow:0 28px 72px -28px rgba(45,139,240,.75),0 0 0 1px rgba(255,203,46,.16) inset;
  filter:saturate(1.04);
}
.matchday-hero[data-match]:active{transform:translateY(-1px) scale(.995)}
.hero-card-hint{
  margin-top:2px;
  text-align:center;
  color:var(--text-3);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ============================================================ MATCH CARD */
.cards{display:flex;flex-direction:column;gap:12px}
.card{position:relative;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);padding:13px 14px;
  box-shadow:var(--sh-2);transition:.24s var(--ease);overflow:hidden;
  animation:cardin .5s var(--ease-out) backwards;cursor:pointer}
@keyframes cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--sh-3)}
.card:active{transform:scale(.99)}
.card.se-card{border-color:rgba(45,139,240,.32);background:var(--se-grad-soft)}
.card.se-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--se-blue),var(--se-yellow))}
.card.fav-card{border-color:rgba(255,203,46,.22)}
.card.fav-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(#ffd45a,#ffb82e)}
.card.live-card{border-color:rgba(255,77,94,.38);background:
  linear-gradient(180deg,rgba(255,77,94,.06),transparent 45%),
  var(--surface);
  box-shadow:0 10px 28px rgba(255,77,94,.12),var(--sh-2)}
.card.live-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,77,94,.08)}
.card.live-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--live),rgba(255,77,94,.35))}
.card.live-card.se-card::before{background:linear-gradient(var(--live),var(--se-yellow))}
.section-live-home .section-head .h2{display:flex;align-items:center;gap:8px}
.section-live-home .section-head .h2::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--live);box-shadow:0 0 0 0 var(--live-glow);animation:pulse 1.4s infinite}
.section-live-home .section-head .cnt{color:var(--live);font-weight:800}
.card-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:10.5px;font-weight:700;color:var(--text-3)}
.card-top .grp{font-family:var(--f-display);font-weight:700;letter-spacing:.04em}
.card-top .sep{opacity:.4}
.card-top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.se-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:800;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#06121f;
  background:linear-gradient(100deg,var(--se-yellow),var(--se-yellow-deep));
  padding:4px 8px;border-radius:var(--r-pill);box-shadow:0 2px 8px rgba(255,203,46,.4)}
.se-badge .se-flag{width:14px;height:10px}
.fav-badge{display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:800;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#ffd45a;
  background:rgba(255,203,46,.1);border:1px solid rgba(255,203,46,.16);
  padding:4px 8px;border-radius:var(--r-pill)}
.status-pill{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:10px;
  letter-spacing:.05em;padding:4px 9px;border-radius:var(--r-pill);text-transform:uppercase}
.status-pill.live{background:rgba(255,77,94,.15);color:var(--live);border:1px solid rgba(255,77,94,.3)}
.status-pill.live .dot{width:7px;height:7px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 var(--live-glow);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--live-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.status-pill.fin{background:var(--surface-hi);color:var(--text-2);border:1px solid var(--line)}
.status-pill.sched{background:transparent;color:var(--text-3);border:1px solid var(--line)}
.status-pill.ht{background:rgba(255,203,46,.16);color:var(--se-yellow-deep);border:1px solid rgba(255,203,46,.3)}
[data-theme="dark"] .status-pill.ht{color:var(--se-yellow)}

.card-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.team-row{display:flex;align-items:center;gap:11px;min-width:0}
.team-row.away{flex-direction:row-reverse;text-align:right}
.team-row .flag{width:34px;height:24px;border-radius:6px;flex:0 0 auto}
.team-row .tnm{font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:-.01em;
  white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.06}
.team-row .tcd{font-size:10.5px;font-weight:800;color:var(--text-3);letter-spacing:.08em}
.team-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.score{font-family:var(--f-display);font-weight:900;font-size:30px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.score .x{color:var(--text-3);margin:0 3px;font-size:19px;vertical-align:3px}
.score.dim{color:var(--text-3)}
.kick{font-family:var(--f-display);font-weight:900;font-size:20px;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kick small{display:block;font-size:10px;font-weight:700;color:var(--text-3);
  letter-spacing:.05em;margin-top:2px}
.win-tag{font-size:9px}
.goals-line{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--text-2);line-height:1.4;min-height:0}
.goals-line:empty{display:none}
.goals-home{flex:1;text-align:left}
.goals-away{flex:1;text-align:right}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);font-size:11px;color:var(--text-3);font-weight:600}
.card-foot .venue{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.card-foot .venue svg{width:13px;height:13px;flex:0 0 auto;opacity:.7}
.card-foot .venue span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot .bc{margin-left:auto;flex:0 0 auto}

/* broadcaster badge */
.bc-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:10px;
  padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface-hi);color:var(--text)}
.bc-badge .logo{width:34px;height:16px;border-radius:4px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:900;font-size:9px;letter-spacing:.02em;color:#fff;flex:0 0 auto}
.logo.svt{background:#16a085}
.logo.svt2{background:#1f6f8b}
.logo.tv4{background:#e4002b}
.logo.tv4f{background:#0b2540}
.bc-badge .stream{font-size:10px;color:var(--text-3);font-weight:600}

/* countdown chip on upcoming cards */
.cd-mini{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:800;
  font-size:11px;color:var(--se-yellow);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cd-mini svg{width:12px;height:12px}

/* date group header */
.date-head{position:sticky;top:62px;z-index:20;display:flex;align-items:center;gap:10px;
  padding:14px 0 10px;background:linear-gradient(var(--bg-0) 70%,transparent)}
.date-head h3{font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.02em}
.date-head .ln{flex:1;height:1px;background:var(--line)}
.date-head .n{font-size:11px;color:var(--text-3);font-weight:600}
.date-head.today h3{color:var(--se-yellow)}

/* search */
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 14px;margin-bottom:6px;transition:.2s var(--ease)}
.search:focus-within{border-color:var(--se-blue);box-shadow:0 0 0 3px rgba(45,139,240,.18)}
.search svg{width:18px;height:18px;color:var(--text-3)}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:inherit}
.search input::placeholder{color:var(--text-3)}
.jump-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:4px}
.jump-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 0 2px}
.jump-chip{flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:12px;font-weight:800;color:var(--text-2);white-space:nowrap}
.jump-chip.active{background:var(--text);color:var(--bg-0);border-color:var(--text)}
.jump-step{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:18px;font-weight:900;display:grid;place-items:center}
.jump-step:disabled{opacity:.35}
.schedule-day.is-focused .schedule-date{color:var(--se-blue)}
.schedule-day.is-focused .cards{position:relative}
.schedule-day.is-focused .cards::before{content:"";display:block;height:0;border-top:1px solid rgba(45,139,240,.32);margin:0 0 10px}
.utility-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tile-eyebrow{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.utility-meta{font-size:11px;color:var(--text-3);font-weight:700}
.home-utility-grid{display:grid;gap:12px}
.group-picker{display:flex;gap:8px;overflow-x:auto;padding-top:18px}

/* ============================================================ GROUP TABLE */
.grp-card{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  overflow:hidden;margin-bottom:14px;backdrop-filter:blur(12px);box-shadow:var(--sh-2);
  animation:cardin .5s var(--ease-out) backwards}
.grp-card.se-grp{border-color:rgba(45,139,240,.3)}
.grp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.grp-head .badge{width:30px;height:30px;border-radius:9px;background:var(--accent-grad);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:900;color:#fff;font-size:14px}
.grp-head h3{font-family:var(--f-display);font-weight:800;font-size:15px}
.grp-head .se-tag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.1em;
  color:var(--se-yellow);text-transform:uppercase}
table{width:100%;border-collapse:collapse}
thead th{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
  padding:9px 4px;text-align:center}
thead th.lt{text-align:left;padding-left:14px}
tbody td{padding:11px 4px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line)}
tbody td.lt{text-align:left;padding-left:10px}
.tm-cell{display:flex;align-items:center;gap:9px}
.tm-cell .pos{width:18px;font-family:var(--f-display);font-weight:800;color:var(--text-3);text-align:center;flex:0 0 auto}
.tm-cell .flag{width:24px;height:17px;border-radius:3px;flex:0 0 auto}
.tm-cell .nm{font-family:var(--f-display);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-cell .tcd{font-size:10px;color:var(--text-3);font-weight:700}
tr.se-row td{background:rgba(45,139,240,.1)}
tr.se-row .pos{color:var(--se-yellow)}
td .pts{font-family:var(--f-display);font-weight:900;font-size:15px}
.qual-bar{width:3px;border-radius:3px;position:absolute;left:0;top:6px;bottom:6px}
tbody tr{position:relative}
tbody tr.q-adv td:first-child{box-shadow:inset 3px 0 0 var(--win)}
tbody tr.q-maybe td:first-child{box-shadow:inset 3px 0 0 var(--se-yellow)}
.grp-legend{display:flex;gap:16px;padding:11px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--text-3)}
.grp-legend span{display:flex;align-items:center;gap:6px;font-weight:600}
.grp-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ============================================================ KNOCKOUT */
.bracket-hint{font-size:12px;color:var(--text-3);margin-bottom:14px;font-weight:500}
.ko-legend{display:grid;gap:8px;margin-bottom:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ko-legend-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-2);font-weight:700}
.ko-key{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:5px 9px;border-radius:999px;background:var(--surface-hi);border:1px solid var(--line);font-family:var(--f-display);font-size:11px;color:var(--text)}
.ko-key.tv4{background:#e4002b;color:#fff;border-color:transparent}
.rounds{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;margin:0 -18px;padding-left:18px;padding-right:18px;
  scroll-snap-type:x mandatory}
.round{flex:0 0 270px;scroll-snap-align:start}
.round-title{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.04em;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text-2)}
.round-title .n{font-size:10px;color:var(--text-3);font-weight:600;background:var(--surface);
  border:1px solid var(--line);padding:2px 8px;border-radius:var(--r-pill)}
.ko-match{border-radius:14px;background:var(--surface);border:1px solid var(--line);
  padding:11px 13px;margin-bottom:11px;box-shadow:var(--sh-1);transition:.2s var(--ease);
  animation:cardin .5s var(--ease-out) backwards}
.ko-match:hover{border-color:var(--line-strong);transform:translateX(2px)}
.ko-match.se-ko{border-color:rgba(45,139,240,.4);background:var(--se-grad-soft)}
.ko-team{display:flex;align-items:center;gap:9px;padding:5px 0}
.ko-team .nm{font-family:var(--f-display);font-weight:700;font-size:13.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ko-team .sc{font-family:var(--f-display);font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.ko-seed{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:4px 8px;border-radius:999px;background:var(--surface-hi);border:1px solid var(--line);font-size:10px;font-weight:900;color:var(--text)}
.ko-team.win .nm{color:var(--text)}
.ko-team.lose{opacity:.5}
.ko-team.tbd{opacity:.45;font-style:italic}
.ko-div{height:1px;background:var(--line);margin:2px 0}
.ko-time{font-size:10.5px;color:var(--text-3);font-weight:600;margin-top:7px;display:flex;justify-content:space-between}

/* ============================================================ MATCH DETAIL */
.detail-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:22px 18px 20px;
  margin-bottom:18px;border:1px solid var(--line);box-shadow:var(--sh-3);isolation:isolate}
.detail-hero.se{border-color:rgba(45,139,240,.34);background:var(--se-grad-soft)}
.detail-hero.se::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 70% at 90% 0,rgba(255,203,46,.2),transparent 55%),
            radial-gradient(110% 80% at 0 110%,rgba(45,139,240,.3),transparent 55%)}
.detail-hero.plain{background:var(--surface);backdrop-filter:blur(14px)}
.dh-top{display:flex;justify-content:center;margin-bottom:18px}
.dh-teams{display:flex;align-items:center;gap:14px;width:100%}
.dh-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dh-team .flag{width:72px;height:50px;border-radius:11px;box-shadow:var(--sh-2)}
.dh-team .nm{font-family:var(--f-display);font-weight:900;font-size:18px}
.dh-team .cd{font-size:12px;font-weight:800;color:var(--text-3);letter-spacing:.08em}
.dh-center{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:104px}
.dh-score{font-family:var(--f-display);font-weight:900;font-size:54px;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:.9}
.dh-score .x{font-size:30px;color:var(--text-3);margin:0 5px;vertical-align:9px}
.dh-kick{font-family:var(--f-display);font-weight:900;font-size:34px;letter-spacing:-.02em}
.detail-sec{margin-top:20px}
.detail-sec h4{font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;backdrop-filter:blur(10px)}
.info-tile .lb{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  display:flex;align-items:center;gap:6px;margin-bottom:7px}
.info-tile .lb svg{width:13px;height:13px}
.info-tile .vl{font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.2}
.info-tile .sub{font-size:12px;color:var(--text-3);font-weight:500;margin-top:2px}
.info-tile.wide{grid-column:1/-1}
.bc-big{display:flex;align-items:center;gap:12px}
.bc-big .logo{width:48px;height:24px;border-radius:6px;font-size:11px}

/* timeline */
.timeline{position:relative;padding-left:8px}
.tl-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;position:relative}
.tl-min{font-family:var(--f-display);font-weight:800;font-size:13px;width:34px;flex:0 0 auto;
  text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums;padding-top:2px}
.tl-ic{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-hi);border:1px solid var(--line)}
.tl-ic svg{width:15px;height:15px}
.tl-ic.goal{background:rgba(61,220,151,.16);border-color:rgba(61,220,151,.3);color:var(--win)}
.tl-ic.yellow{background:rgba(255,203,46,.16);border-color:rgba(255,203,46,.3);color:var(--se-yellow)}
.tl-ic.red{background:rgba(255,69,58,.16);border-color:rgba(255,69,58,.3);color:#ff453a}
.tl-body{flex:1;padding-top:3px}
.tl-body .ev{font-weight:700;font-size:14px;font-family:var(--f-display)}
.tl-body .ds{font-size:12px;color:var(--text-3);font-weight:500}
.tl-body .tm{font-size:11px;font-weight:700;color:var(--text-3)}

.path-card{background:var(--se-grad-soft);border:1px solid rgba(45,139,240,.3);border-radius:var(--r-lg);
  padding:16px;backdrop-filter:blur(12px)}
.path-card .pt{display:flex;gap:11px;align-items:flex-start;padding:9px 0}
.path-card .pt:not(:last-child){border-bottom:1px solid var(--line)}
.path-card .ico{width:26px;height:26px;border-radius:8px;background:rgba(45,139,240,.2);
  display:grid;place-items:center;flex:0 0 auto;color:var(--se-blue);font-family:var(--f-display);font-weight:900;font-size:12px}
.path-card .tx{font-size:13.5px;font-weight:500;line-height:1.4}
.path-card .tx b{font-weight:700;color:var(--text)}

/* ============================================================ STATES */
.empty,.error{text-align:center;padding:60px 24px;animation:viewin .4s var(--ease-out)}
.empty .ic,.error .ic{width:64px;height:64px;border-radius:20px;margin:0 auto 18px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line)}
.empty .ic svg,.error .ic svg{width:30px;height:30px;color:var(--text-3)}
.error .ic{background:rgba(255,77,94,.1);border-color:rgba(255,77,94,.25)}
.error .ic svg{color:var(--live)}
.empty h3,.error h3{font-family:var(--f-display);font-weight:800;font-size:18px;margin-bottom:7px}
.empty p,.error p{font-size:14px;color:var(--text-3);max-width:280px;margin:0 auto 18px}

/* skeleton */
.sk{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  padding:14px 16px;margin-bottom:12px;overflow:hidden;position:relative}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--surface-hi),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-line{height:11px;border-radius:6px;background:var(--surface-hi);margin:7px 0}
.sk-line.w40{width:40%}.sk-line.w70{width:70%}.sk-line.w90{width:90%}.sk-line.big{height:22px}

/* ============================================================ BOTTOM NAV */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:center;
  padding:0 0 env(safe-area-inset-bottom);pointer-events:none}
.bottomnav .inner{pointer-events:auto;width:100%;max-width:var(--maxw);height:var(--nav-h);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:color-mix(in srgb,var(--bg-1) 86%,transparent);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--line)}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:0;padding:6px 2px 5px;
  color:var(--text-3);transition:.22s var(--ease);position:relative;font-size:10px;font-weight:600;line-height:1.05}
.nav-item svg{width:21px;height:21px;transition:.22s var(--ease);flex:0 0 auto}
.nav-item span:last-child{display:block;max-width:100%;white-space:nowrap;letter-spacing:-.01em}
.nav-item.active{color:var(--text)}
.nav-item.active svg{transform:translateY(-1px)}
.nav-item.active.se-nav{color:var(--se-blue)}
.nav-item .dotind{position:absolute;top:9px;width:5px;height:5px;border-radius:50%;background:var(--se-blue);opacity:0;transition:.2s}
.nav-item.active .dotind{opacity:1}
.nav-item .liveind{position:absolute;top:11px;right:calc(50% - 20px);width:7px;height:7px;border-radius:50%;
  background:var(--live);box-shadow:0 0 6px var(--live);animation:pulse 1.4s infinite}

/* back bar for detail */
.backbar{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.backbar button{display:flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:700;
  font-size:14px;color:var(--text-2);padding:8px 12px 8px 8px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line)}
.backbar button:hover{color:var(--text);background:var(--surface-hi)}
.backbar button svg{width:18px;height:18px}

/* settings */
.set-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:16px;backdrop-filter:blur(12px)}
.set-row{display:flex;align-items:center;gap:13px;padding:15px 16px}
.set-row:not(:last-child){border-bottom:1px solid var(--line)}
.set-row .si{width:36px;height:36px;border-radius:11px;background:var(--surface-hi);display:grid;place-items:center;flex:0 0 auto}
.set-row .si svg{width:18px;height:18px;color:var(--text-2)}
.set-row .si.fav-selected-flag{background:rgba(45,139,240,.12);border:1px solid rgba(255,203,46,.22)}
.set-row .si .settings-flag{width:28px;height:20px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.set-row .st{flex:1;min-width:0}
.set-row .st .t{font-family:var(--f-display);font-weight:700;font-size:14.5px}
.set-row .st .d{font-size:12px;color:var(--text-3);margin-top:1px}
.seg{display:flex;background:var(--surface-hi);border-radius:var(--r-pill);padding:3px;gap:2px;flex:0 0 auto}
.seg button{padding:7px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:700;color:var(--text-3);transition:.18s}
.seg button.on{background:var(--text);color:var(--bg-0)}
.toggle{width:48px;height:28px;border-radius:var(--r-pill);background:var(--surface-hi);position:relative;
  transition:.22s var(--ease);flex:0 0 auto;border:1px solid var(--line)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--text-2);transition:.22s var(--ease)}
.toggle.on{background:var(--se-grad);border-color:transparent}
.toggle.on::after{transform:translateX(20px);background:#fff}
.fav-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--r-pill);
  background:var(--surface-hi);border:1px solid var(--line);font-weight:600;font-size:13px;transition:.2s var(--ease)}
.fav-chip .flag{width:22px;height:15px;border-radius:3px}
.fav-chip.on{border-color:var(--se-blue);background:rgba(45,139,240,.14);color:var(--text)}
.fav-chip.on::after{content:"✓";color:var(--se-blue);font-weight:900}
.fav-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:16px}
.fav-wrap.collapsed{display:none}
.fav-footer{padding:0 16px 16px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);z-index:80;background:var(--surface-solid);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:12px 20px;font-weight:600;font-size:13.5px;box-shadow:var(--sh-3);opacity:0;pointer-events:none;
  transition:.3s var(--ease);display:flex;align-items:center;gap:9px;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:17px;height:17px;color:var(--win);flex:0 0 auto}

@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:760px){
  :root{--maxw:1200px}
  .view{padding:28px 28px 8px}
  .bracket-desktop{display:block}
  .rounds{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;overflow:visible;margin:0;padding:0}
  .round{flex:none}
}
.fade-swap{animation:viewin .35s var(--ease-out)}

/* ===================== v2 additions: flags + polish ===================== */
/* span-based flags (flagcdn background images) */
.flag{display:inline-block;background-size:cover;background-position:center;background-repeat:no-repeat;flex:none}
.flag-tbd{display:inline-grid;place-items:center;background:var(--surface-hi);color:var(--text-3);
  font-family:var(--f-display);font-weight:800;font-size:9px;letter-spacing:.01em;border:1px solid var(--line);overflow:hidden}
.ko-team .flag-tbd{font-size:8px}

/* broadcaster "to be announced" badge */
.bc-tbd{background:transparent;border:1px dashed var(--line);box-shadow:none}
.bc-tbd .stream{display:inline-flex;align-items:center;gap:5px;color:var(--text-3);font-weight:600}
.bc-tbd .stream svg{width:13px;height:13px}

/* Apple-Sports-like clarity: crisper kickoff, calmer cards */
.card{transition:transform .15s ease, border-color .2s ease, background .2s ease}
.card:active{transform:scale(.985)}
.kick{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.score span{font-variant-numeric:tabular-nums}
.card-foot .venue svg{opacity:.6}

/* FotMob-like TV row: make the channel read as the anchor of the foot */
.card-foot{gap:10px}
.bc-badge .logo{font-family:var(--f-display);font-weight:800;letter-spacing:.02em}

/* knockout cards: vertical, premium, label-driven */
.ko-match{display:flex;flex-direction:column;gap:0;padding:13px 13px 11px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);min-width:188px;animation:rise .5s var(--ease) backwards}
.ko-team{display:flex;align-items:center;gap:9px;padding:5px 0}
.ko-team .flag,.ko-team .flag-tbd{width:26px;height:18px;border-radius:4px}
.ko-team .nm{font-family:var(--f-display);font-weight:700;font-size:13.5px;color:var(--text-1)}
.ko-team.tbd .nm{color:var(--text-2)}
.ko-div{height:1px;background:var(--line);margin:2px 0}
.ko-time{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text-2);
  font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums}

/* match-detail "where to watch" big tile */
.bc-big{display:flex;align-items:center;gap:13px}
.bc-big .logo{min-width:54px;height:34px;display:inline-grid;place-items:center;border-radius:9px;
  font-family:var(--f-display);font-weight:800;font-size:14px;padding:0 8px}
.bc-big .vl{font-family:var(--f-display);font-weight:800;font-size:16px}
.bc-big .sub{color:var(--text-3);font-size:12.5px;margin-top:1px}
.logo.svt{background:#1c8a4a;color:#fff}
.logo.svt2{background:#0f6e3a;color:#fff}
.logo.tv4{background:#e2231a;color:#fff}
.logo.tv4f{background:#b51810;color:#fff}

/* tighten group legend wording */
.grp-legend span{display:inline-flex;align-items:center;gap:6px}

/* ===================== v3: matchcenter + VM-tipset ===================== */
.lead{color:var(--text-2);margin-top:8px;font-size:14.5px;max-width:620px}
.matchday-hero .hero-actions{margin-top:4px}
.home-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.home-shell{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
.home-main{min-width:0}
.home-aside{display:grid;gap:12px}
.home-main .home-tv-section{margin-top:0}
.pool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;backdrop-filter:blur(14px);box-shadow:var(--sh-2)}
.pool-card .compact{align-items:flex-start;margin-bottom:12px}
.mini-link{border:1px solid var(--line-strong);background:var(--surface-hi);border-radius:var(--r-pill);
  padding:7px 11px;font-size:12px;font-weight:800;color:var(--text-2)}
.mini-link:hover{color:var(--text);border-color:var(--se-blue)}
.leader-list{display:flex;flex-direction:column;gap:8px}
.leader-row{display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:8px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface-hi) 62%,transparent);
  border-radius:13px;padding:9px 10px}
.leader-row.me{border-color:rgba(45,139,240,.45);background:var(--se-grad-soft)}
.leader-row .rank{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-hi);font-family:var(--f-display);font-weight:900;color:var(--text-2)}
.leader-row .name{font-family:var(--f-display);font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader-row .meta{font-size:11px;color:var(--text-3);font-weight:600;white-space:nowrap}
.leader-row b{font-family:var(--f-display);font-size:20px;font-variant-numeric:tabular-nums}
.leader-row.compact{grid-template-columns:30px minmax(0,1fr) auto}
.compact-leader .leader-row b{font-size:20px}
.leader-table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.leader-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13px}
.leader-table th,
.leader-table td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.leader-table th{color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.leader-table td:first-child{color:var(--text-3);font-weight:900}
.leader-table td:nth-child(2){font-family:var(--f-display);font-weight:900;color:var(--text)}
.leader-table b{font-family:var(--f-display);font-size:20px;font-variant-numeric:tabular-nums}
.leader-table tr.me td{background:rgba(45,139,240,.09)}
.rules-mini{display:grid;gap:12px}
.rules-intro{
  color:var(--text-2);
  font-size:13px;
  line-height:1.5;
  font-weight:600;
}
.rules-intro p{margin:0}
.rules-intro p + p{margin-top:8px}
.rules-intro b{color:var(--text);font-family:var(--f-display);font-weight:900}
.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rule-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-hi);min-width:0}
.rule-chip b{font-family:var(--f-display);font-size:18px;line-height:1;flex:0 0 auto}
.rule-chip span{font-size:12px;font-weight:700;color:var(--text-2);line-height:1.15}
.tip-empty{color:var(--text-3);font-size:13px;font-weight:600;line-height:1.45}
.tip-note{
  margin:14px 2px 18px;
  color:var(--text-2);
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}
.tip-empty code,.warn-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--se-yellow);background:rgba(255,203,46,.08);border:1px solid rgba(255,203,46,.18);
  padding:2px 6px;border-radius:6px}
.quick-tip,.tip-match{display:flex;flex-direction:column;gap:12px}
.qt-teams{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:var(--f-display);font-weight:800;font-size:13px}
.qt-teams span{display:flex;align-items:center;gap:7px;min-width:0}
.qt-teams .flag{width:22px;height:15px;border-radius:3px}
.tip-inputs{display:flex;align-items:center;gap:8px}
.tip-inputs input{width:54px;height:42px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--surface-hi);color:var(--text);font-family:var(--f-display);font-weight:900;font-size:18px;
  text-align:center;font-variant-numeric:tabular-nums;outline:none}
.tip-inputs input:focus{border-color:var(--se-blue);box-shadow:0 0 0 3px rgba(45,139,240,.16)}
.tip-inputs span{font-family:var(--f-display);font-weight:900;color:var(--text-3)}
.tip-inputs button{height:42px;border-radius:12px;background:var(--se-grad);color:#fff;
  padding:0 14px;font-family:var(--f-display);font-weight:800}
.tip-inputs button:disabled,.tip-inputs input:disabled{opacity:.5;cursor:not-allowed}
.pick-row{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.pick-btn{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  color:var(--text);font-family:var(--f-display);font-size:34px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--sh-1);
  transition:.18s var(--ease);display:grid;place-items:center}
.pick-btn:hover{transform:translateY(-1px);border-color:rgba(45,139,240,.55)}
.pick-btn.on{background:linear-gradient(180deg,#278af4,#0a4ea3);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:var(--glow-blue),inset 0 1px 0 rgba(255,255,255,.2)}
.pick-btn:disabled{opacity:.45;cursor:not-allowed}
.exact-details{border-top:1px solid var(--line);padding-top:10px}
.exact-details.exact-disabled{color:var(--text-3);font-weight:800;font-size:13px}
.exact-details summary{list-style:none;cursor:pointer;color:var(--text-2);font-weight:800;font-size:13px;
  display:flex;justify-content:space-between;align-items:center}
.exact-details summary::-webkit-details-marker{display:none}
.exact-details summary span{color:var(--se-yellow);font-family:var(--f-display);font-weight:900}
.exact-stepper{display:grid;grid-template-columns:36px 52px 36px auto 36px 52px 36px;align-items:center;gap:7px;margin-top:10px}
.exact-stepper button{height:36px;border-radius:11px;background:var(--surface-hi);border:1px solid var(--line-strong);
  color:var(--text);font-size:20px;font-weight:900}
.exact-stepper input{height:36px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--text);text-align:center;font-family:var(--f-display);font-weight:900;font-size:17px}
.exact-stepper span{text-align:center;color:var(--text-3);font-family:var(--f-display);font-weight:900}
.tip-save{height:48px;border-radius:999px;background:linear-gradient(180deg,#ffffff,#dfe6f5);color:#07101f;
  font-family:var(--f-display);font-weight:900;font-size:14px;padding:0 18px;box-shadow:0 12px 26px -18px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.9);
  transition:.18s var(--ease)}
.tip-save:hover{transform:translateY(-1px)}
.tip-save.saved{background:linear-gradient(180deg,#42e5a1,#21b879);color:#03150c}
.tip-save:disabled{opacity:.45;cursor:not-allowed}
.tip-pill{display:inline-flex;align-items:center;border-radius:var(--r-pill);background:rgba(255,203,46,.14);
  border:1px solid rgba(255,203,46,.25);color:var(--se-yellow);font-family:var(--f-display);
  font-weight:900;font-size:10.5px;padding:4px 8px;font-variant-numeric:tabular-nums}
.scorer-wrap{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
.scorer-wrap select{height:42px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-hi);color:var(--text);padding:0 12px;font:inherit;font-weight:700;text-transform:none;letter-spacing:0}
.scorer-wrap select:focus{outline:none;border-color:var(--se-blue);box-shadow:0 0 0 3px rgba(45,139,240,.16)}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-2)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-hi);padding:4px;border-radius:var(--r-pill);margin-bottom:12px}
.auth-tabs button{padding:9px 10px;border-radius:var(--r-pill);font-weight:800;font-size:13px;color:var(--text-3)}
.auth-tabs button.on{background:var(--text);color:var(--bg-0)}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form input{width:100%;height:46px;border-radius:13px;border:1px solid var(--line-strong);
  background:var(--surface-hi);color:var(--text);font:inherit;font-weight:650;padding:0 13px;outline:none}
.auth-form input:focus{border-color:var(--se-blue);box-shadow:0 0 0 3px rgba(45,139,240,.16)}
.form-error{font-size:12.5px;color:var(--live);font-weight:700}
.me-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--se-grad-soft);
  border-color:rgba(45,139,240,.35)}
.league-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.league-card p{color:var(--text-3);font-size:13px;margin-top:4px}
.league-card b{font-family:var(--f-display);font-size:18px;color:var(--se-yellow);letter-spacing:.08em}
.warn-card{border-color:rgba(255,203,46,.28);background:linear-gradient(150deg,rgba(255,203,46,.12),var(--surface))}
.warn-card p{color:var(--text-2);margin-top:6px;font-size:13.5px}
.tips-list{display:flex;flex-direction:column;gap:10px}
.tip-match,.admin-result{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px;box-shadow:var(--sh-1)}
.tip-match.se-tip,.admin-result.se-tip{background:var(--se-grad-soft);border-color:rgba(45,139,240,.32)}
.tip-match.saved-tip{border-color:rgba(61,220,151,.28)}
.tip-match.saved-tip .tip-mode.review{background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.2);border-radius:12px;padding:8px 10px}
.tip-match.locked-tip{opacity:.72}
.tip-state{min-height:18px;font-size:11px;color:var(--text-3);font-weight:800;display:flex;align-items:center;gap:6px;letter-spacing:.06em;text-transform:uppercase}
.save-dot,.lock-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.save-dot{background:var(--win);box-shadow:0 0 10px rgba(61,220,151,.55)}
.lock-dot{background:var(--text-3)}
.tip-open{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
.tip-date{font-size:11px;color:var(--text-3);font-weight:700}
.tip-teams{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--f-display);font-weight:800;font-size:17px}
.tip-teams .flag{width:22px;height:15px;border-radius:3px}
.tip-teams b{font-family:var(--f-body);font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.14em}
.tip-mode{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tip-mode.review{flex-direction:column;align-items:center;justify-content:center}
.tip-summary{font-size:12px;color:var(--text-2);font-weight:700}
.tip-summary b{font-family:var(--f-display);font-size:14px;color:var(--text);letter-spacing:.01em}
.tip-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tip-mode.review .tip-summary{justify-content:center;text-align:center}
.locked-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:rgba(66,229,161,.14);border:1px solid rgba(66,229,161,.38);color:#6ff0bc;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.tip-value{font-size:18px;letter-spacing:.01em}
.tip-scorer{font-size:11px;color:var(--text-2)}
.tip-mode.locked-review{background:rgba(66,229,161,.08);border:1px solid rgba(66,229,161,.22);border-radius:12px;padding:9px 10px}
.tip-actions-row{display:flex;gap:8px;justify-content:center;width:100%;margin-top:6px}
.tip-editor{display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);padding-top:11px}
.tip-row-label{font-size:11px;font-weight:800;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.se-scoreline{display:flex;align-items:center;justify-content:center;gap:10px}
.se-scorebox{
  display:grid;
  grid-template-columns:24px 62px 24px;
  align-items:center;
  gap:4px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}
.se-step{
  height:24px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.16);
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-display);
  font-weight:900;
  font-size:13px;
  line-height:1;
}
.se-scorebox input{
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:var(--surface);
  color:var(--text);
  text-align:center;
  font-family:var(--f-display);
  font-weight:900;
  font-size:24px;
  font-variant-numeric:tabular-nums;
}
.se-score-sep{
  font-family:var(--f-display);
  font-weight:900;
  font-size:24px;
  color:var(--text-3);
}
.se-step:disabled,.se-scorebox input:disabled{opacity:.45;cursor:not-allowed}
.stat-grid{display:grid;grid-template-columns:1fr;gap:10px}
.stat-tile{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:13px 14px}
.stat-tile span{font-size:10.5px;color:var(--text-3);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.stat-tile b{display:block;font-family:var(--f-display);font-size:30px;font-weight:900;margin-top:4px;font-variant-numeric:tabular-nums}
.stat-tile small{display:block;color:var(--text-3);font-size:12px;margin-top:2px}
.admin-card{background:linear-gradient(150deg,rgba(45,139,240,.12),var(--surface));border:1px solid rgba(45,139,240,.28);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-2)}
.admin-card>p{color:var(--text-2);font-size:13px;font-weight:650;margin-bottom:12px}
.no-match-tile{display:flex;gap:12px;align-items:center;padding:16px}
.tile-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--surface-hi);color:var(--se-yellow)}
.tile-icon svg{width:19px;height:19px}
.tile-title{font-family:var(--f-display);font-weight:800;font-size:15px}
.tile-sub{color:var(--text-3);font-size:13px;margin-top:2px}
@media(min-width:760px){
  .home-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .tip-save{min-width:180px;align-self:flex-end}
}
@media(min-width:980px){
  .home-shell{grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
  .home-aside{position:sticky;top:96px}
  .home-shell > .home-aside{margin-top:18px}
  .tips-tabs{display:none}
  .tips-tabs{display:none}
  .tips-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
  .tips-layout[data-tab] .tips-col-matches{display:block}
  .tips-layout[data-tab] .tips-col-table{display:block}
  .tips-col-table{position:sticky;top:96px}
  .tips-col-table .pool-card{max-height:75vh;overflow-y:auto}
  .tips-view .tips-list{align-items:flex-start}
  .tips-view .tip-match:not(.compact-tip){
    width:min(100%,560px);
    margin-inline:auto;
  }
  .tips-view .tip-match:not(.compact-tip) .tip-open{
    grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);
    gap:16px;
  }
  .tips-view .tip-match:not(.compact-tip) .tip-team{
    font-size:16px;
  }
  .tips-view .tip-match:not(.compact-tip) .tip-kick{
    min-width:40px;
  }
}

/* ===================== v5: typography tuning ===================== */
.brand{font-size:20px}
.brand small{font-size:11px}
.h1{font-size:38px}
.h2{font-size:24px}
.lead{font-size:16px;line-height:1.5}
.hero-body{padding:17px 20px 21px}
.hero-team .flag{width:70px;height:48px}
.hero-team .nm{font-size:20px;font-weight:900}
.hero-team .cd{font-size:12px}
.hero-vs{font-size:18px;color:var(--text-2)}
.cd-box{min-width:66px;padding:11px 5px}
.cd-box b{font-size:34px}
.cd-box span{font-size:10.5px}
.meta-pill{font-size:13px;padding:8px 13px}
.card{padding:14px 14px}
.card-top{font-size:11px;margin-bottom:10px}
.card-body{grid-template-columns:minmax(0,1fr) minmax(88px,auto) minmax(0,1fr);gap:8px}
.team-row{gap:12px}
.team-row .flag{width:34px;height:24px}
.team-row .tnm{font-size:16px;font-weight:900}
.team-row .tcd{font-size:10.5px}
.kick{font-size:20px}
.kick small{font-size:10px}
.score{font-size:30px}
.score .x{font-size:20px;vertical-align:3px}
.card-foot{font-size:11px;margin-top:11px;padding-top:10px}
.bc-badge{font-size:10px;padding:4px 8px}
.bc-badge .logo{width:34px;height:16px;font-size:9px}
.dh-score{font-size:62px}
.dh-kick{font-size:40px}
.dh-team .nm{font-size:20px}
.leader-row b{font-size:24px}
.leader-row .name{font-size:16px}
.nav-item{font-size:10px}

@media(max-width:420px){
  .h1{font-size:35px}
  .card-body{grid-template-columns:minmax(0,1fr) minmax(84px,auto) minmax(0,1fr);gap:8px}
  .team-row .flag{width:38px;height:27px}
  .team-row .tnm{font-size:17.5px}
  .kick{font-size:27px}
  .score{font-size:38px}
  .matchday-hero .hero-top{padding:12px 14px 0}
  .matchday-hero .hero-body{padding:12px 14px 14px}
  .matchday-hero .hero-tag{font-size:10px;padding:5px 10px}
  .matchday-hero .hero-grp{font-size:11px}
  .matchday-hero .hero-teams{gap:10px;margin:8px 0 12px}
  .matchday-hero .hero-team{gap:7px}
  .matchday-hero .hero-team .flag{width:52px;height:36px;border-radius:8px}
  .matchday-hero .hero-team .nm{font-size:14px}
  .matchday-hero .hero-team .cd{font-size:10px}
  .matchday-hero .hero-vs{font-size:14px}
  .matchday-hero .countdown{margin-bottom:12px}
  .matchday-hero .cd-box{min-width:52px;padding:8px 4px;border-radius:12px}
  .matchday-hero .cd-box b{font-size:26px}
  .matchday-hero .cd-box span{font-size:8.5px}
  .matchday-hero .hero-meta{margin-bottom:10px}
  .matchday-hero .meta-pill{font-size:11px;padding:6px 10px}
  .matchday-hero .hero-card-hint{font-size:11px;letter-spacing:.1em}
}

/* ===================== v6: compact matchcards ===================== */
.h1{font-size:42px}
.card{padding:14px}
.card-body{grid-template-columns:minmax(0,1fr) minmax(88px,auto) minmax(0,1fr);gap:8px}
.team-row .flag{width:34px;height:24px}
.team-row .tnm{font-size:16px}
.team-row .tcd{font-size:10.5px}
.kick{font-size:20px}
.kick small{font-size:10px}
.score{font-size:30px}
.score .x{font-size:20px}
.hero-team .nm{font-size:22px}
.cd-box b{font-size:38px}

@media(max-width:420px){
  .h1{font-size:38px}
  .card{padding:13px}
  .card-body{grid-template-columns:minmax(0,1fr) minmax(84px,auto) minmax(0,1fr);gap:7px}
  .team-row .tnm{font-size:15px}
  .kick{font-size:18px}
  .score{font-size:27px}
}

/* ===================== v7: lås inline-SVG i matchcenter ===================== */
.detail-sec h4{display:flex;align-items:center;gap:8px}
.detail-sec h4 svg,
.pool-card > .btn svg,
.info-tile > svg,
.info-tile.wide > svg{
  width:18px!important;
  height:18px!important;
  max-width:18px!important;
  max-height:18px!important;
  flex:0 0 18px;
}
.info-tile.wide > svg{
  display:inline-block;
  margin-bottom:8px;
}
.pool-card .btn{
  margin-top:12px;
  max-width:260px;
}

/* ===================== v8: premium mobile-first pass ===================== */
:root{
  --surface:rgba(18,24,40,.72);
  --surface-hi:rgba(34,42,66,.72);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --r-md:18px;
  --r-lg:24px;
  --sh-2:0 14px 38px -20px rgba(0,0,0,.72);
  --sh-3:0 28px 64px -30px rgba(0,0,0,.85);
}
.view{padding:24px 20px 14px}
.section{margin-top:30px}
.h1{font-size:40px;line-height:1.02;letter-spacing:-.035em}
.h2{font-size:22px;letter-spacing:-.02em}
.lead{font-size:15px;line-height:1.58;color:var(--text-2)}
.card{
  border-radius:20px;
  border-color:rgba(255,255,255,.11);
  box-shadow:var(--sh-2);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease),background .28s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.pool-card{border-radius:22px;padding:18px}
.tip-match,.admin-result{border-radius:18px;padding:14px}
.tip-state{font-size:10px;letter-spacing:.09em}
.tip-summary{font-size:11.5px}
.tip-summary b{font-size:13px}

/* Make tip selection feel editorial/sport UI, not betting chips */
.pick-row{gap:8px}
.pick-btn{
  width:68px;height:52px;border-radius:14px;
  font-size:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--line-strong);
  box-shadow:none;
}
.pick-btn.on{
  background:linear-gradient(180deg,rgba(45,139,240,.92),rgba(12,72,150,.96));
  box-shadow:0 8px 24px -16px rgba(45,139,240,.9);
}
.tip-save{
  height:50px;
  border-radius:16px;
  font-size:13px;
  letter-spacing:.02em;
}
.home-kicker{margin-bottom:8px}
.home-kicker .updated{font-size:11px}
.bottomnav .inner{border-top:1px solid rgba(255,255,255,.12)}

@media (max-width:420px){
  .view{padding:22px 16px 12px}
  .h1{font-size:34px}
  .h2{font-size:20px}
  .card{border-radius:18px}
  .pool-card{border-radius:20px;padding:16px}
  .pick-btn{width:62px;height:48px;font-size:24px}
}

/* ===================== v9: compact tip cards ===================== */
.quick-tip,.tip-match{gap:8px}
.tip-match{padding:8px 10px}
.tip-mode{align-items:flex-start}
.tip-editor{gap:6px;padding-top:6px}
.tip-open{gap:3px}
.tip-state{min-height:14px}
.exact-details{padding-top:6px}
.exact-stepper{margin-top:6px}
.pick-row{justify-content:center;align-items:center}
.tip-save{
  height:30px;
  min-width:82px;
  padding:0 9px;
  border-radius:10px;
  font-size:10.5px;
  align-self:center;
  margin-top:2px;
  background:linear-gradient(180deg,#42e5a1,#21b879);
  color:#03150c;
  box-shadow:0 8px 20px -14px rgba(66,229,161,.75), inset 0 1px 0 rgba(255,255,255,.35);
}
.tip-save:hover{transform:translateY(-1px)}
.tip-save.saved{background:linear-gradient(180deg,#35d992,#17aa6d)}
.tip-match .pick-btn{
  width:58px;
  height:44px;
  border-radius:12px;
  font-size:22px;
}
.tip-editor.sweden-edit .exact-details{
  border-top:none;
  padding-top:0;
}
.tip-editor.sweden-edit .exact-details summary{
  display:none;
}
.tip-editor.sweden-edit .exact-stepper{
  margin-top:0;
}

/* center content in tip cards */
.tip-match .tip-open{
  align-items:center;
  text-align:center;
}
.tip-match .tip-date{
  text-align:center;
}
.tip-match .tip-teams{
  justify-content:center;
}
.tip-match .tip-state{
  justify-content:center;
}
.tip-match .tip-mode{
  justify-content:center;
  text-align:center;
}
.tip-match .tip-editor{
  align-items:center;
}
.tip-match .exact-details,
.tip-match .scorer-wrap{
  width:100%;
  max-width:420px;
}

.tv-form{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}
.tv-admin-tools{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.tv-admin-tools input{height:38px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-hi);color:var(--text);padding:0 11px;font:inherit;font-size:12px}
.tv-row-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.tv-row-top b{font-size:12px;font-family:var(--f-display)}
.tv-row-top span{font-size:10.5px;color:var(--text-3);font-weight:700}
.tv-row-inputs{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.tv-row-inputs input{height:36px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-hi);color:var(--text);padding:0 10px;font:inherit;font-size:12px}
.tv-row-inputs button{height:36px;border-radius:10px;background:var(--se-grad);color:#fff;padding:0 12px;font-family:var(--f-display);font-size:12px;font-weight:800}
@media(max-width:760px){.tv-row-inputs{grid-template-columns:1fr}.tv-row-inputs button{width:100%}}

/* Tips layout polish */
.tips-view{padding-inline:clamp(16px,3.2vw,30px);padding-top:clamp(18px,2.8vw,30px)}
.tips-layout{display:block;margin-top:8px}
.tips-layout[data-tab="tips"] .tips-col-table{display:none}
.tips-layout[data-tab="table"] .tips-col-matches{display:none}
.tips-tabs{display:flex;gap:6px;margin-top:16px;background:var(--surface);border-radius:14px;padding:4px}
.tips-tab{flex:1;height:38px;border-radius:10px;font-family:var(--f-display);font-weight:800;font-size:13px;color:var(--text-2);display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s var(--ease)}
.tips-tab.on{background:var(--surface-hi);color:var(--text);box-shadow:var(--sh-1)}
.tips-tab-cnt{font-size:11px;font-weight:900;background:rgba(255,255,255,.1);border-radius:99px;padding:1px 7px;color:var(--text-3)}
.tips-tab.on .tips-tab-cnt{color:var(--text-2)}
/* tips layout */
.tips-view .lead{max-width:72ch;line-height:1.55}
.tips-view .section{margin-top:20px}
.tips-view .pool-card{padding:18px}
.tips-view .pool-card .h2{line-height:1.08}
.tips-view .mini-link{padding:9px 14px}
.tips-view .me-card,
.tips-view .league-card{padding:20px 18px;gap:16px;border-radius:20px}
.tips-view .me-card > div,
.tips-view .league-card > div{min-width:0}

@media(max-width:760px){
  .tips-view .h1{margin-bottom:10px}
  .tips-view .me-card,
  .tips-view .league-card{flex-direction:column;align-items:flex-start}
  .tips-view .me-card .mini-link,
  .tips-view .league-card .mini-link{width:100%;justify-content:center}
}

/* v13: mobile viewport discipline */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.app,
.bottomnav .inner{
  width:100%;
  max-width:min(var(--maxw),100%);
}
.app,
.view,
.hero,
.pool-card,
.card,
.tip-match{
  min-width:0;
  max-width:100%;
}
.app,
.view{
  overflow-x:clip;
}

/* v23: simple betting-slip style tip cards */
.tips-list{
  gap:12px;
}
.tip-match{
  padding:12px;
  gap:9px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,27,44,.92),rgba(15,21,35,.9));
}
.tip-mainline{
  min-width:0;
}
.tip-match .tip-open{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  text-align:initial;
}
.tip-team{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-display);
  font-size:13px;
  font-weight:900;
}
.tip-team.away{
  justify-content:flex-end;
}
.tip-team b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tip-team .flag{
  width:22px;
  height:15px;
  border-radius:3px;
  flex:0 0 auto;
}
.tip-kick{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:58px;
  font-size:12px;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.tip-kick span{
  font-family:var(--f-display);
  font-weight:900;
  color:var(--text);
}
.tip-kick small{
  max-width:76px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  text-transform:lowercase;
}
.tip-match .tip-state{
  justify-content:flex-start;
  min-height:0;
  font-size:9.5px;
  letter-spacing:.07em;
}
.tip-editor{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding-top:0;
  border-top:none;
}
.tip-editor.sweden-edit{
  grid-template-columns:minmax(0,1fr) auto;
  row-gap:10px;
}
.tip-editor.sweden-edit .tip-bonus-panel{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tip-match .pick-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  width:100%;
  justify-content:stretch;
}
.tip-match .pick-btn{
  width:100%;
  height:46px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.09);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tip-match .pick-btn span{
  font-family:var(--f-display);
  font-size:15px;
  line-height:1;
  font-weight:950;
}
.tip-match .pick-btn small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  line-height:1.1;
  font-weight:850;
  color:var(--text-3);
}
.tip-match .pick-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(45,139,240,.42);
}
.tip-match .pick-btn.on{
  background:linear-gradient(180deg,#2c8bf5,#0a55af);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 12px 28px -20px rgba(45,139,240,.95),inset 0 1px 0 rgba(255,255,255,.18);
}
.tip-match .pick-btn.on small{
  color:rgba(255,255,255,.82);
}
.tip-save{
  min-width:88px;
  height:46px;
  padding:0 13px;
  border-radius:12px;
  align-self:stretch;
  font-size:11px;
  background:linear-gradient(180deg,#f8fbff,#dce6f5);
  color:#07101f;
  box-shadow:0 14px 24px -20px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9);
}
.tip-save.saved{
  background:linear-gradient(180deg,#42e5a1,#21b879);
}
.tip-bonus-panel,
.exact-details{
  grid-column:1/-1;
  width:100%;
  max-width:none;
  margin-top:0;
  border-top:none;
  padding-top:4px;
}
.tip-bonus-panel summary,
.exact-details summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--text-2);
  font-size:12px;
  font-weight:900;
}
.tip-bonus-panel summary::-webkit-details-marker,
.exact-details summary::-webkit-details-marker{
  display:none;
}
.tip-bonus-panel summary span,
.exact-details summary span{
  color:var(--se-yellow);
  font-family:var(--f-display);
  font-weight:950;
}
.tip-editor.sweden-edit .tip-bonus-panel{
  padding-top:8px;
}
.tip-editor.sweden-edit .scorer-wrap{
  margin-top:8px;
}
.tip-auto-save-note{
  color:var(--text-3);
  font-size:11px;
  line-height:1.4;
  font-weight:700;
}
.tip-match .tip-mode.review{
  align-items:stretch;
  text-align:left;
}
.tip-match.saved-tip .tip-mode.review{
  background:rgba(61,220,151,.07);
}

@media(max-width:520px){
  .tip-match{
    padding:10px;
  }
  .tip-match .tip-open{
    grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
    gap:7px;
  }
  .tip-team{
    gap:6px;
    font-size:12px;
  }
  .tip-team .flag{
    width:19px;
    height:13px;
  }
  .tip-kick{
    min-width:52px;
  }
  .tip-kick small{
    max-width:52px;
  }
  .tip-editor,
  .tip-editor.sweden-edit{
    grid-template-columns:1fr;
  }
  .tip-save{
    width:100%;
    height:42px;
  }
}

/* v27: dedicated all matches schedule */
.schedule-view .search{
  position:sticky;
  top:76px;
  z-index:5;
  backdrop-filter:blur(18px);
}
.schedule-day{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:18px;
}
.schedule-day:first-child{
  margin-top:0;
}
.schedule-date{
  position:sticky;
  top:136px;
  z-index:4;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(10,14,24,.82);
  border:1px solid var(--line);
  color:var(--text-2);
  font-family:var(--f-display);
  font-size:12px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 10px 24px -20px rgba(0,0,0,.8);
  backdrop-filter:blur(16px);
}

@media(max-width:700px){
  .schedule-view .search{
    top:64px;
  }
  .schedule-date{
    top:122px;
  }
}

/* v29: tip cards as compact prediction slips */
.tip-ticket-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:2px;
  color:var(--text-3);
  font-size:10px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.tip-ticket-top span{
  color:var(--se-yellow);
}
.tip-ticket-top time{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.tip-mainline{
  position:relative;
}
.tip-mainline .tip-open{
  padding:0;
}
.tip-mainline.has-score .tip-open{
  padding-right:52px;
}
.tip-match .tip-team{
  font-size:18px;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.tip-match .tip-team b{
  font-weight:950;
}
.tip-match .tip-team .flag{
  width:24px;
  height:16px;
}
.tip-match .tip-kick{
  min-width:34px;
  color:var(--text-3);
}
.home-aside .compact-tip .tip-open{
  grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);
  gap:6px;
}
.home-aside .compact-tip .tip-team{
  font-size:13px;
  line-height:1.05;
  text-transform:none;
}
.home-aside .compact-tip .tip-team .flag{
  width:20px;
  height:14px;
}
.home-aside .compact-tip .tip-kick{
  min-width:18px;
}
.home-aside .compact-tip .pick-row{
  gap:8px;
}
.home-aside .compact-tip .pick-btn{
  padding-inline:10px;
}
.tip-result{
  color:var(--se-yellow)!important;
  font-size:17px;
  letter-spacing:.02em;
}
.tip-points{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-grid;
  place-items:center;
  min-width:42px;
  height:30px;
  border-radius:9px;
  font-family:var(--f-display);
  font-size:12px;
  font-weight:950;
}
.tip-points.hit{
  color:#54f1ad;
  background:rgba(33,184,121,.15);
}
.tip-points.miss{
  color:var(--text-3);
  background:rgba(255,255,255,.07);
}
.tip-match .tip-state{
  display:none;
}
.tip-saved-slip{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:2px;
  padding:10px;
  border-radius:12px;
  background:rgba(34,44,68,.82);
}
.tip-saved-pick{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:10px;
  background:linear-gradient(180deg,#ffd64e,#ffc531);
  color:#101728;
  font-family:var(--f-display);
  font-size:22px;
  font-weight:950;
  box-shadow:0 12px 30px -22px rgba(255,207,62,.95),inset 0 1px 0 rgba(255,255,255,.45);
}
.tip-saved-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tip-saved-copy span{
  color:var(--text-3);
  font-size:10px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.tip-saved-copy b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-family:var(--f-display);
  font-size:18px;
  font-weight:950;
}
.tip-saved-copy small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
}
.tip-change-btn{
  height:48px;
  padding:0 16px;
  border-radius:11px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  font-family:var(--f-display);
  font-size:13px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tip-change-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.22);
}
.tip-match .pick-row{
  gap:7px;
}
.tip-match .pick-btn{
  height:56px;
  border-radius:10px;
  background:rgba(34,44,68,.82);
  border-color:rgba(255,255,255,.055);
}
.tip-match .pick-btn span{
  font-size:18px;
}
.tip-match .pick-btn small{
  margin-top:2px;
  font-size:10px;
  color:var(--text-3);
}
.tip-match .pick-btn.on{
  color:#101728;
  background:linear-gradient(180deg,#ffd64e,#ffc531);
  border-color:rgba(255,213,78,.6);
  box-shadow:0 12px 32px -22px rgba(255,207,62,.95),inset 0 1px 0 rgba(255,255,255,.45);
}
.tip-match .pick-btn.on small{
  color:rgba(16,23,40,.62);
}
.tip-match .pick-btn.correct{
  color:#071a10;
  background:linear-gradient(180deg,#42e5a1,#22c47f);
  border-color:rgba(66,229,161,.65);
}
.tip-match .pick-btn.correct small{
  color:rgba(7,26,16,.66);
}
.tip-match .pick-btn.wrong{
  color:#ff6f92;
  background:rgba(255,84,124,.10);
  border-color:rgba(255,84,124,.85);
}
.tip-match .pick-btn:disabled{
  opacity:.72;
}
.tip-match .settled-editor{
  grid-template-columns:1fr;
}
.tip-match .tip-mode.review{
  padding:0;
  border:0;
  background:transparent;
}
.tip-match.saved-tip .tip-mode.review{
  background:transparent;
  border:0;
  padding:0;
}
.tip-match .tip-summary{
  color:var(--text-3);
  font-size:12px;
}
.tip-verdict{
  font-weight:900;
}

@media(max-width:520px){
  .tip-ticket-top{
    font-size:9px;
  }
  .tip-match .tip-team{
    font-size:15px;
  }
  .tip-match .tip-team .flag{
    width:21px;
    height:14px;
  }
  .tip-result{
    font-size:15px;
  }
  .tip-match .pick-btn{
    height:51px;
  }
  .tip-saved-slip{
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:9px;
    padding:9px;
  }
  .tip-saved-pick{
    width:42px;
    height:42px;
    font-size:19px;
  }
  .tip-saved-copy b{
    font-size:16px;
  }
  .tip-change-btn{
    height:42px;
    padding:0 12px;
  }
}
@supports not (overflow:clip){
  .app,
  .view{overflow-x:hidden}
}
img,
svg{
  max-width:100%;
}

@media(max-width:520px){
  .view{padding-inline:16px}
  .appbar{padding-inline:16px}
  .hero-top{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding-inline:16px;
  }
  .matchday-hero .hero-tag{
    max-width:100%;
    white-space:normal;
    line-height:1.15;
  }
  .matchday-hero .hero-grp{
    align-self:flex-start;
    font-size:12.5px;
    line-height:1.25;
  }
  .hero-body{padding-inline:16px}
  .hero-teams{gap:10px}
  .hero-team .nm{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .countdown{gap:6px}
  .cd-box{
    min-width:0;
    flex:1 1 0;
  }
  .hero-actions{flex-direction:column}
}

/* v15: admin pool tools */
.admin-overview .pool-card{padding:14px}
.admin-pay-list{display:grid;gap:8px}
.admin-pay-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-hi);
}
.admin-pay-row input{width:20px;height:20px;accent-color:var(--win)}
.admin-pay-row .pay-name{font-family:var(--f-display);font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-pay-row .pay-meta{font-size:11px;color:var(--text-3);font-weight:800;white-space:nowrap}
.admin-pay-row b{font-family:var(--f-display);font-size:14px;color:var(--se-yellow)}
.admin-table-wrap{
  width:100%;
  overflow:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.admin-tips-table{
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}
.admin-tips-table th,
.admin-tips-table td{
  border-bottom:1px solid var(--line);
  padding:8px 9px;
  text-align:left;
  vertical-align:top;
  max-width:132px;
}
.admin-tips-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--surface-solid);
  font-family:var(--f-display);
  font-weight:900;
}
.admin-tips-table tbody th{
  position:sticky;
  left:0;
  z-index:1;
  min-width:108px;
  width:108px;
  max-width:108px;
  background:var(--surface-solid);
}
.admin-tips-table tbody th button{
  display:block;
  font-family:var(--f-display);
  font-weight:900;
  color:var(--text);
  text-align:left;
}
.admin-tips-table tbody th small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
}
.admin-tips-table td{
  min-width:96px;
  color:var(--text-2);
  font-weight:800;
}
.admin-tips-table td.has-tip{color:var(--text)}
.admin-tips-table td.no-tip{color:var(--text-3)}
.admin-tip-main{display:block;font-weight:800;color:var(--text)}
.admin-tip-meta{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:10px;
  font-weight:900;
  line-height:1.45;
}
.admin-tip-history{
  display:inline-block;
  max-width:100%;
}
.admin-tip-history summary{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  cursor:pointer;
  list-style:none;
}
.admin-tip-history summary::-webkit-details-marker{display:none}
.admin-tip-history-toggle{
  font-size:10px;
  font-weight:900;
  color:var(--se-blue);
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:2px;
}
.admin-tip-history-list{
  margin-top:8px;
  display:grid;
  gap:6px;
  max-width:220px;
}
.admin-tip-history-row{
  padding:6px 7px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}
.admin-tip-history-time{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  margin-bottom:2px;
}
.admin-tip-history-value{
  display:block;
  color:var(--text);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.admin-more-btn{
  margin-top:10px;
  align-self:flex-start;
}
.admin-note{margin-top:10px;color:var(--text-3);font-size:12px;font-weight:700}

/* v18: calmer desktop container */
@media(min-width:760px){
  :root{--maxw:1200px}
  .app,
  .bottomnav .inner{max-width:1200px}
}