:root{
  --bg:#09111c;
  --bg-soft:#101a28;
  --card:#121d2c;
  --card-strong:#162336;
  --card-alt:#1a293d;
  --line:rgba(214,226,246,.10);
  --line-strong:rgba(214,226,246,.18);
  --text:#f4f7fb;
  --muted:#98a6bb;
  --muted-2:#718097;
  --accent:#9cb4d4;
  --accent-strong:#dfe9f8;
  --value:#8cc7b1;
  --risk-low:#8fd3b4;
  --risk-mid:#d7b57f;
  --risk-high:#d88d84;
  --warning:#d9c087;
  --shadow:0 22px 46px rgba(0,0,0,.34);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Manrope","Avenir Next","Segoe UI",sans-serif;
  background:
    radial-gradient(48rem 24rem at 18% -5%, rgba(128,154,196,.16), transparent 66%),
    radial-gradient(30rem 16rem at 85% 0%, rgba(158,188,169,.08), transparent 64%),
    linear-gradient(180deg, #09111c 0%, #0b1320 52%, #0c1521 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.16), transparent 72%);
  opacity:.28;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{
  border:0;
  background:none;
  color:inherit;
  padding:0;
}
.icon{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.icon svg{
  width:14px;
  height:14px;
  display:block;
}
.page-shell{
  width:min(100%, 480px);
  margin:0 auto;
  min-height:100vh;
  position:relative;
}
.screen{
  padding:18px 14px 112px;
}
.section{
  margin-top:18px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.page-title{
  margin:14px 0 0;
  font-size:34px;
  line-height:.96;
  letter-spacing:-.05em;
}
.page-subtitle{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.mini-stat{
  min-width:92px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  text-align:right;
}
.mini-stat-label{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.mini-stat-value{
  margin-top:6px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.05em;
}
.hero-card,
.glass-card,
.match-card,
.detail-card,
.pricing-card,
.settings-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
  box-shadow:var(--shadow);
}
.hero-card > *,
.match-card > *,
.signal-card > *,
.pricing-card > *{
  position:relative;
  z-index:1;
}
.hero-card{padding:18px}
.hero-card::after,
.match-card::after,
.pricing-card::after{
  content:"";
  position:absolute;
  inset:auto auto -44px -28px;
  width:180px;
  height:120px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(186,208,236,.14), transparent 70%);
  pointer-events:none;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.section-title{
  margin:0;
  font-size:18px;
  letter-spacing:-.03em;
}
.section-note{
  color:var(--muted);
  font-size:12px;
}
.signal-grid,
.stack{
  display:grid;
  gap:12px;
}
.hero-grid{
  display:grid;
  gap:14px;
}
.hero-grid .metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.metric-tile{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.metric-label{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.metric-value{
  margin-top:6px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.04em;
}
.metric-value.value{color:var(--value)}
.metric-value.low{color:var(--risk-low)}
.metric-value.mid{color:var(--risk-mid)}
.metric-value.high{color:var(--risk-high)}
.hero-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.hero-kicker,
.match-hero-top,
.card-league-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.hero-orbit{
  min-width:94px;
  padding:10px 12px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 58%),
    rgba(255,255,255,.04);
  text-align:right;
}
.hero-orbit-copy{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hero-orbit-value{
  margin-top:4px;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.05em;
}
.hero-copy h2{
  margin:0;
  font-size:28px;
  line-height:1;
  letter-spacing:-.05em;
}
.hero-copy p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.hero-tags,
.chip-row,
.match-meta,
.watch-list,
.benefit-list,
.toggle-list,
.info-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip,
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:700;
}
.chip.value{color:#dcefe8}
.chip.low{color:#d7f4e5}
.chip.mid{color:#f1dfbc}
.chip.high{color:#f2c9c2}
.status-chip.subtle{
  background:rgba(255,255,255,.025);
  color:var(--muted);
}
.signal-card,
.match-card,
.compact-card,
.detail-card,
.pricing-card,
.settings-card,
.cta-card{
  padding:16px;
}
.signal-card,
.compact-card,
.cta-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}
.match-card{
  cursor:pointer;
}
.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.card-top-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.sport-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sport-badge-ice{
  background:rgba(185,214,255,.08);
}
.sport-badge-pitch{
  background:rgba(189,231,212,.08);
}
.league-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--accent-strong);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.league-badge.small{
  min-height:28px;
  padding:0 10px;
}
.league-badge.hero{
  background:rgba(255,255,255,.06);
}
.league-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--league-accent, var(--accent));
  box-shadow:0 0 18px var(--league-accent, var(--accent));
}
.league-logo-img{
  width:16px;
  height:16px;
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.22));
}
.tone-ice{color:#d9eeff}
.tone-pitch{color:#dff4e4}
.tone-euro{color:#f0e6ff}
.teams-line.with-logos{
  margin-top:12px;
}
.team-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:100%;
}
.team-pair.condensed{
  gap:8px;
}
.team-side{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
}
.team-side:last-child{
  grid-template-columns:minmax(0,1fr) auto;
}
.team-side-name{
  min-width:0;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.12;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.team-side-name-short{
  white-space:nowrap;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-pair.condensed .team-side-name{
  font-size:15px;
}
.team-side:last-child .team-side-name{
  text-align:right;
}
.team-pair-vs{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  background:rgba(255,255,255,.03);
  flex:none;
}
.team-logo{
  --team-bg:#24384f;
  --team-accent:#dce7f8;
  --team-edge:#b8cbe6;
  position:relative;
  width:50px;
  height:50px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, var(--team-bg), #162336);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 22px rgba(0,0,0,.22);
}
.team-logo-img{
  position:relative;
  z-index:1;
  width:72%;
  height:72%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.team-logo::before,
.team-logo::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:14px;
  pointer-events:none;
}
.team-art-shield::before{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent);
}
.team-art-stripes::before{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 5px, transparent 5px 10px);
}
.team-art-ring::before{
  inset:7px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
}
.team-art-crest::before{
  clip-path:polygon(50% 0, 92% 24%, 82% 88%, 50% 100%, 18% 88%, 8% 24%);
  background:linear-gradient(180deg, rgba(255,255,255,.16), transparent);
}
.team-logo::after{
  inset:auto 9px 9px 9px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--team-edge), transparent);
  border-radius:999px;
}
.team-logo-core{
  position:relative;
  z-index:1;
  color:var(--team-accent);
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
}
.team-logo-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.team-logo.mini{
  width:30px;
  height:30px;
  border-radius:11px;
}
.team-logo.mini .team-logo-img{
  width:70%;
  height:70%;
}
.team-logo.mini .team-logo-core{
  font-size:10px;
}
.team-logo.overlap{
  margin-left:-8px;
}
.hero-duel{
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.hero-duel .team-logo{
  width:58px;
  height:58px;
}
.hero-duel .team-side-name{
  font-size:20px;
}
.subline-inline{
  color:var(--muted);
  font-size:12px;
}
.subtle-chip{
  color:var(--muted);
  background:rgba(255,255,255,.025);
}
.live-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,122,122,.2);
  background:rgba(177,44,44,.18);
  color:#ffd5d5;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.match-live-strip{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.signal-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}
.signal-pill.strong{
  color:#d7f4e5;
  background:rgba(92,167,128,.16);
  border-color:rgba(143,211,180,.18);
}
.signal-pill.mid{
  color:#f1dfbc;
  background:rgba(177,132,44,.14);
  border-color:rgba(215,181,127,.18);
}
.signal-pill.watch{
  color:#cfd9ea;
  background:rgba(255,255,255,.04);
}
.match-market-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.match-market-row .chip{
  min-height:28px;
  font-weight:600;
}
.match-pro-note{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.board-summary-card{
  background:
    radial-gradient(16rem 8rem at 100% 0, rgba(204,218,239,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
}
.sport-scene{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  z-index:0;
}
.sport-scene::before,
.sport-scene::after{
  content:"";
  position:absolute;
  inset:auto;
}
.scene-card{
  opacity:.62;
}
.scene-hero{
  opacity:.88;
}
.scene-list{
  opacity:.56;
}
.scene-match{
  opacity:.78;
}
.scene-hockey::before{
  inset:14px 14px auto auto;
  width:130px;
  height:130px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(183,221,255,.16) 0 28%, transparent 29% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(183,221,255,.12) 49% 51%, transparent 52%);
}
.scene-hockey::after{
  inset:22px 18px 18px 18px;
  border-radius:24px;
  border:1px solid rgba(184,220,255,.08);
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(151,197,255,.11) 18% 19%, transparent 19% 81%, rgba(230,120,120,.14) 81% 82%, transparent 82%),
    radial-gradient(18rem 7rem at 90% 0, rgba(183,221,255,.10), transparent 70%);
}
.scene-football::before{
  inset:18px 16px auto auto;
  width:160px;
  height:110px;
  border-radius:26px;
  border:1px solid rgba(189,231,212,.08);
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(189,231,212,.16) 49.2% 50.8%, transparent 50.8%),
    radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(189,231,212,.14) 14px 15px, transparent 15px),
    linear-gradient(180deg, rgba(189,231,212,.08), transparent 72%);
}
.scene-football::after{
  inset:18px 18px 18px auto;
  width:180px;
  border-radius:30px;
  background:
    radial-gradient(10rem 6rem at 100% 0, rgba(189,231,212,.12), transparent 72%),
    linear-gradient(180deg, rgba(110,166,126,.04), transparent 70%);
}
.match-card.sport-hockey{
  border-color:rgba(185,214,255,.12);
}
.match-card.sport-football{
  border-color:rgba(189,231,212,.12);
}
.teams-line{
  margin:10px 0 0;
  font-size:22px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.04em;
}
.subline{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}
.primary-pick{
  margin-top:14px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.03em;
}
.metrics-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.stats-box{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.stats-label{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.stats-value{
  margin-top:6px;
  font-size:20px;
  font-weight:800;
}
.stats-value.value{color:var(--value)}
.stats-value.low{color:var(--risk-low)}
.stats-value.mid{color:var(--risk-mid)}
.stats-value.high{color:var(--risk-high)}
.explanation{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.card-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.live-meta-strip{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.live-refresh-button{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
}
.live-toast{
  position:fixed;
  left:50%;
  bottom:88px;
  transform:translateX(-50%);
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,24,37,.94);
  border:1px solid rgba(214,226,246,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  color:var(--accent-strong);
  font-size:13px;
  font-weight:700;
  z-index:30;
}
.button,
.ghost-button,
.link-button{
  min-height:46px;
  padding:0 16px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  cursor:pointer;
}
.button{
  background:linear-gradient(180deg, #dfe8f7 0%, #b7c8e0 100%);
  color:#0d1522;
}
.ghost-button{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  color:var(--text);
}
.link-button{
  color:var(--accent-strong);
  padding:0;
  min-height:auto;
}
.cta-card{
  background:
    radial-gradient(16rem 8rem at 100% 0, rgba(204,218,239,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.cta-card p,
.compact-card p,
.detail-text,
.pricing-copy,
.setting-copy{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.inline-grid{
  display:grid;
  gap:10px;
}
.inline-grid.two{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.scoreboard{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  margin-top:16px;
}
.match-hero .scoreboard{
  margin-top:18px;
}
.team-pill{
  padding:14px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  text-align:center;
}
.team-mark-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}
.team-name{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
}
.vs-pill{
  min-width:48px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.detail-card h3,
.pricing-card h3,
.settings-card h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.03em;
}
.detail-list,
.table-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.detail-item,
.table-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.detail-item{
  align-items:flex-start;
}
.detail-item > div:first-child{
  min-width:0;
  flex:1;
}
.detail-item.vertical{
  display:block;
}
.detail-copy{
  margin-top:10px;
  color:var(--accent-strong);
  font-size:14px;
  line-height:1.55;
}
.detail-item small,
.table-row small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:12px;
}
.table-rank{
  min-width:34px;
  color:var(--accent-strong);
  font-weight:800;
}
.masked{
  position:relative;
  overflow:hidden;
}
.masked::after{
  content:"PRO";
  position:absolute;
  inset:auto 14px 14px auto;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(9,17,28,.82);
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.blurred{
  filter:blur(4px);
  opacity:.58;
  user-select:none;
  pointer-events:none;
}
.pro-lock{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.pro-lock h4{
  margin:0;
  font-size:16px;
}
.pro-lock p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.filter-chip{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.filter-chip.active{
  color:var(--text);
  border-color:var(--line-strong);
  background:rgba(223,233,248,.08);
}
.list-note{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.watch-item{
  min-height:86px;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.watch-item-main,
.inline-team-row{
  display:flex;
  align-items:center;
  gap:0;
}
.watch-item-main strong,
.inline-team-row span{
  margin-left:10px;
}
.inline-team-row{
  font-size:15px;
}
.watch-item strong,
.benefit-item strong,
.history-item strong{
  display:block;
  font-size:15px;
}
.watch-item span,
.benefit-item span,
.history-item span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.plan-price{
  margin-top:18px;
  font-size:32px;
  font-weight:800;
  letter-spacing:-.05em;
}
.plan-price small{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}
.pricing-card.featured{
  border-color:rgba(223,233,248,.24);
  background:
    radial-gradient(14rem 8rem at 100% 0, rgba(209,219,235,.12), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #182433 0%, #121c2b 100%);
}
.premium-panel{
  overflow:hidden;
}
.premium-orbit{
  position:absolute;
  right:-20px;
  top:-18px;
  width:160px;
  height:160px;
  border-radius:50%;
  border:1px solid rgba(223,233,248,.10);
  background:
    radial-gradient(circle at 50% 50%, rgba(223,233,248,.18), transparent 48%),
    radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(223,233,248,.08) 54% 56%, transparent 56%);
  pointer-events:none;
}
.toggle-item,
.history-item{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.toggle-item:last-child,
.history-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.toggle-head,
.history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.history-head > div{
  min-width:0;
}
.switch{
  width:48px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  position:relative;
  cursor:pointer;
}
.switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#e6edf8;
  transition:transform .2s ease;
}
.switch.active{
  background:rgba(143,211,180,.22);
}
.switch.active::after{
  transform:translateX(19px);
}
.status-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.status-copy{
  color:var(--muted);
  font-size:14px;
}
.divider{
  height:1px;
  margin:16px 0;
  background:rgba(255,255,255,.08);
}
.empty-state{
  padding:24px 18px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:20;
  transform:translateX(-50%);
  width:min(calc(100% - 24px), 456px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:22px 22px 0 0;
  background:rgba(9,17,28,.86);
  backdrop-filter:blur(16px);
  box-shadow:0 -12px 36px rgba(0,0,0,.26);
}
.bottom-nav a{
  min-height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.bottom-nav a.active{
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.hidden{display:none !important}

@media (max-width:380px){
  .page-title{font-size:30px}
  .teams-line{font-size:19px}
  .hero-copy h2{font-size:24px}
  .team-pair,
  .team-side{
    gap:8px;
  }
  .team-side-name{
    font-size:14px;
  }
  .hero-duel .team-side-name{
    font-size:16px;
  }
  .team-pair-vs{
    width:30px;
    height:30px;
    font-size:10px;
  }
  .team-logo{
    width:46px;
    height:46px;
  }
  .hero-duel .team-logo{
    width:52px;
    height:52px;
  }
  .hero-orbit{
    min-width:74px;
  }
  .hero-grid .metrics,
  .metrics-row,
  .inline-grid.two{grid-template-columns:1fr}
  .card-actions{flex-direction:column}
  .button,.ghost-button{width:100%}
}

/* Light mobile product pass */
:root{
  --bg:#f4f7fb;
  --bg-soft:#edf2f8;
  --card:#ffffff;
  --card-strong:#fbfdff;
  --card-alt:#f1f5fb;
  --line:rgba(34,52,80,.10);
  --line-strong:rgba(34,52,80,.16);
  --text:#172338;
  --muted:#66758c;
  --muted-2:#8a96aa;
  --accent:#5e78a6;
  --accent-strong:#213453;
  --value:#1f8f67;
  --risk-low:#20875f;
  --risk-mid:#be8121;
  --risk-high:#c4574f;
  --warning:#d09c3a;
  --shadow:0 18px 34px rgba(36,54,84,.10);
}

html{
  background:var(--bg);
}
body{
  color:var(--text);
  background:
    radial-gradient(42rem 20rem at 8% -2%, rgba(108,133,180,.10), transparent 64%),
    radial-gradient(26rem 16rem at 92% 0%, rgba(108,164,146,.07), transparent 62%),
    linear-gradient(180deg, #f5f8fc 0%, #eff4fa 48%, #edf2f8 100%);
}
body::before{
  background:none;
  opacity:0;
}

.screen{
  padding:18px 14px 108px;
}
.section{
  margin-top:16px;
}
.eyebrow{
  min-height:30px;
  border-color:var(--line);
  background:rgba(255,255,255,.86);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.page-title{
  margin-top:12px;
  font-size:32px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
}
.page-subtitle{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.section-title{
  font-size:17px;
  font-weight:800;
}
.section-note{
  color:var(--muted-2);
}
.mini-stat,
.metric-tile,
.stats-box,
.detail-item,
.table-row,
.watch-item,
.empty-state{
  border-color:var(--line);
  background:var(--card-alt);
  box-shadow:none;
}
.mini-stat{
  min-width:88px;
  padding:11px 12px;
  border-radius:16px;
}
.mini-stat-value,
.metric-value,
.stats-value{
  font-weight:800;
  letter-spacing:-.03em;
}
.mini-stat-value{
  font-size:20px;
}
.metric-value{
  font-size:20px;
}
.stats-value{
  font-size:18px;
}

.hero-card,
.glass-card,
.match-card,
.detail-card,
.pricing-card,
.settings-card,
.signal-card,
.compact-card,
.cta-card{
  border-color:var(--line);
  background:linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
  box-shadow:var(--shadow);
}
.hero-card,
.match-card,
.signal-card,
.compact-card,
.detail-card,
.pricing-card,
.settings-card,
.cta-card{
  border-radius:24px;
}
.hero-card::after,
.match-card::after,
.pricing-card::after{
  background:radial-gradient(circle, rgba(100,126,173,.10), transparent 72%);
}
.hero-card{
  padding:17px;
}
.hero-grid{
  gap:12px;
}
.hero-copy h2{
  font-size:28px;
  line-height:1.04;
  letter-spacing:-.04em;
}
.hero-copy p{
  color:var(--muted);
  line-height:1.52;
}
.hero-grid .metrics,
.metrics-row{
  gap:9px;
}
.metric-tile{
  padding:11px;
  border-radius:16px;
}

.signal-pill,
.status-chip,
.league-badge,
.sport-badge,
.filter-chip{
  border-color:var(--line);
  box-shadow:none;
}
.signal-pill,
.status-chip{
  background:#eef3fb;
  color:var(--accent-strong);
}
.signal-pill.strong{
  background:rgba(31,143,103,.12);
  color:var(--value);
}
.signal-pill.mid{
  background:rgba(190,129,33,.14);
  color:var(--risk-mid);
}
.signal-pill.watch{
  background:rgba(94,120,166,.12);
  color:var(--accent);
}
.status-chip.subtle,
.league-badge,
.sport-badge,
.filter-chip{
  background:rgba(255,255,255,.88);
  color:var(--muted);
}
.filter-chip{
  min-height:38px;
  padding:0 13px;
}
.filter-chip.active{
  background:#e8eef8;
  color:var(--accent-strong);
}

.board-summary-card,
.pro-bridge-card{
  padding:15px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:var(--shadow);
}
.match-pro-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  background:#f3f7fd;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.pro-bridge-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.pro-bridge-head h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.03em;
}
.pro-bridge-list{
  display:grid;
  gap:10px;
}
.pro-bridge-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f5f8fc;
}
.pro-bridge-row strong{
  display:block;
  font-size:14px;
}
.pro-bridge-row span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.match-card{
  padding:15px;
}
.match-card.sport-hockey,
.match-card.sport-football{
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.teams-line{
  font-size:21px;
  line-height:1.08;
  letter-spacing:-.03em;
}
.team-side-name{
  font-size:15px;
  line-height:1.25;
  font-weight:700;
}
.team-side-name-short{
  font-size:12px;
  font-weight:700;
}
.team-logo{
  width:44px;
  height:44px;
}
.hero-duel .team-logo{
  width:50px;
  height:50px;
}
.hero-duel .team-side-name{
  font-size:16px;
}
.team-pair-vs,
.vs-pill{
  background:#eef3fb;
  color:var(--muted);
}
.match-card p,
.detail-card p,
.cta-card p,
.compact-card p{
  color:var(--muted);
}

.detail-card h3,
.pricing-card h3,
.settings-card h3{
  font-size:18px;
  letter-spacing:-.03em;
}
.detail-item,
.table-row{
  gap:10px;
  padding:12px 0;
}
.detail-item small,
.table-row small{
  color:var(--muted-2);
}

.button,
.ghost-button,
.link-button{
  min-height:44px;
  border-radius:14px;
}
.button{
  background:#213453;
  color:#fff;
  box-shadow:0 10px 18px rgba(33,52,83,.16);
}
.ghost-button{
  border:1px solid var(--line);
  background:#fff;
  color:var(--accent-strong);
}
.link-button{
  color:var(--accent);
}
.card-actions{
  gap:10px;
}

.pricing-card.featured{
  border-color:rgba(94,120,166,.20);
  background:
    radial-gradient(13rem 8rem at 100% 0, rgba(94,120,166,.11), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}
.premium-orbit{
  border-color:rgba(94,120,166,.16);
  background:
    radial-gradient(circle at 50% 50%, rgba(94,120,166,.12), transparent 48%),
    radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(94,120,166,.08) 54% 56%, transparent 56%);
}
.toggle-item,
.history-item,
.divider{
  border-color:var(--line);
  background:none;
}
.switch{
  border-color:var(--line);
  background:#edf2f8;
}
.switch::after{
  background:#fff;
  box-shadow:0 3px 8px rgba(22,35,56,.12);
}

.bottom-nav{
  width:min(calc(100% - 20px), 456px);
  gap:8px;
  padding:9px;
  border-color:rgba(34,52,80,.10);
  border-radius:20px 20px 0 0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 -10px 24px rgba(36,54,84,.10);
}
.bottom-nav a{
  min-height:42px;
  border-radius:13px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.bottom-nav a.active{
  color:var(--accent-strong);
  background:#eef3fb;
}

@media (max-width:380px){
  .page-title{font-size:28px}
  .hero-copy h2{font-size:24px}
  .teams-line{font-size:18px}
  .team-side-name{font-size:14px}
  .mini-stat-value,
  .metric-value,
  .stats-value{font-size:17px}
}

/* UI rebuild pass */
.page-shell{
  width:min(100%, 440px);
}
.screen{
  padding:16px 12px 110px;
}
.page-head{
  align-items:center;
}
.page-title{
  font-size:30px;
}
.page-subtitle{
  max-width:260px;
}
.hero-card,
.glass-card,
.match-card,
.detail-card,
.pricing-card,
.settings-card,
.signal-card,
.compact-card,
.cta-card,
.board-summary-card,
.pro-bridge-card{
  border-radius:20px;
}
.hero-grid .metrics,
.metrics-row,
.inline-grid.two{
  gap:8px;
}
.hero-main{
  gap:12px;
}
.hero-main-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  gap:12px;
  align-items:start;
}
.hero-copy h2{
  font-size:24px;
  line-height:1.08;
}
.hero-visual-card{
  position:relative;
  width:104px;
  height:104px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  overflow:hidden;
}
.promo-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-orbit{
  min-width:84px;
}
.hero-duel{
  padding:14px;
  border-radius:20px;
  background:#f3f7fd;
}
.team-pair{
  gap:12px;
}
.team-pair.condensed{
  gap:10px;
}
.team-side{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.team-side.team-side-away{
  justify-content:flex-end;
}
.team-side-copy{
  min-width:0;
  flex:1;
}
.team-side-name{
  display:block;
  min-width:0;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-pair.condensed .team-side-name{
  font-size:14px;
}
.team-side:last-child .team-side-name{
  text-align:right;
}
.team-logo{
  width:42px;
  height:42px;
  border-radius:14px;
  box-shadow:0 8px 16px rgba(36,54,84,.12);
}
.team-logo.row-logo{
  width:38px;
  height:38px;
  border-radius:13px;
}
.hero-duel .team-logo,
.team-logo.hero-logo{
  width:52px;
  height:52px;
  border-radius:16px;
}
.team-pair-vs,
.vs-pill{
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
}

.signal-grid,
.stack{
  gap:10px;
}
.signal-card{
  padding:14px;
}
.signal-card .teams-line{
  margin-top:10px;
}
.primary-pick{
  font-size:16px;
  line-height:1.28;
}
.detail-text,
.cta-card p,
.compact-card p,
.pricing-copy,
.setting-copy{
  font-size:13px;
  line-height:1.5;
}

.match-card-board{
  padding:14px;
}
.match-card-head{
  margin-bottom:10px;
}
.card-top-inline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.match-board-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  gap:10px;
  align-items:start;
}
.match-team-stack{
  display:grid;
  gap:8px;
}
.match-team-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:10px 12px;
  border-radius:16px;
  background:#f5f8fc;
  border:1px solid var(--line);
}
.match-team-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.match-team-copy{
  min-width:0;
  flex:1;
}
.match-team-name{
  min-width:0;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.match-team-abbrev{
  margin-top:3px;
  color:var(--muted-2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.match-team-sideval{
  min-width:24px;
  text-align:right;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--accent-strong);
}
.match-side-panel{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  min-height:100%;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff 0%, #f4f8fd 100%);
}
.match-side-top{
  font-size:20px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--accent-strong);
}
.match-side-sub{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.match-side-kick{
  margin-top:auto;
  padding:7px 8px;
  border-radius:12px;
  background:#eef3fb;
  color:var(--accent-strong);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}
.match-meta-rail{
  margin-top:10px;
}
.match-subline-text{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.match-live-strip{
  margin-top:8px;
  gap:6px;
}
.match-live-strip .chip{
  min-height:26px;
  font-size:11px;
  padding:0 9px;
}
.match-pick-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.match-pick-copy{
  min-width:0;
  flex:1;
}
.match-pick-label{
  color:var(--muted-2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.match-pick-line .primary-pick{
  margin-top:4px;
}
.match-open-link{
  min-width:56px;
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#213453;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.market-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.market-tile{
  padding:10px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#f5f8fc;
}
.market-tile-label{
  color:var(--muted-2);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.market-tile-value{
  margin-top:6px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--accent-strong);
}
.market-tile-value.value{color:var(--value)}
.market-tile-value.low{color:var(--risk-low)}
.market-tile-value.mid{color:var(--risk-mid)}
.market-tile-value.high{color:var(--risk-high)}
.match-reason-line{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.48;
}

.scoreboard{
  gap:8px;
}
.team-pill{
  min-width:0;
  padding:12px 10px;
  border-radius:18px;
  background:#f4f8fd;
}
.team-name{
  min-width:0;
  font-size:14px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.watch-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:76px;
  padding:12px 14px;
}
.watch-item-main{
  min-width:0;
  flex:1;
}
.watch-item-main strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.promo-inline{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:12px;
  align-items:center;
}
.promo-inline-art{
  width:96px;
  height:96px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
}

.bottom-nav{
  width:min(calc(100% - 16px), 440px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:8px;
  border-radius:18px 18px 0 0;
}
.bottom-nav a{
  min-height:48px;
  flex-direction:column;
  gap:4px;
  padding:4px 2px;
}
.bottom-nav a .icon{
  width:16px;
  height:16px;
}
.bottom-nav a .icon svg{
  width:16px;
  height:16px;
}
.bottom-nav-label{
  font-size:10px;
  line-height:1.1;
  font-weight:700;
}

@media (max-width:380px){
  .hero-main-split{
    grid-template-columns:minmax(0,1fr) 86px;
  }
  .hero-visual-card{
    width:86px;
    height:86px;
    border-radius:18px;
  }
  .match-board-grid{
    grid-template-columns:minmax(0,1fr) 84px;
    gap:8px;
  }
  .match-team-row{
    padding:9px 10px;
  }
  .match-team-name{
    font-size:14px;
  }
  .match-side-top{
    font-size:18px;
  }
  .market-tiles{
    gap:6px;
  }
  .market-tile{
    padding:9px 8px;
  }
  .promo-inline{
    grid-template-columns:78px minmax(0,1fr);
    gap:10px;
  }
  .promo-inline-art{
    width:78px;
    height:78px;
    border-radius:18px;
  }
}

/* Sports product rebuild */
:root{
  --bg:#06111f;
  --bg-soft:#0b1626;
  --card:#101d2f;
  --card-strong:#14243a;
  --card-alt:#0f2033;
  --line:rgba(188,210,240,.11);
  --line-strong:rgba(188,210,240,.22);
  --text:#f4f8ff;
  --muted:#96a7be;
  --muted-2:#6f819a;
  --accent:#91b9ff;
  --accent-strong:#f5f8ff;
  --value:#79d8b0;
  --risk-low:#8ce0b8;
  --risk-mid:#f0c16a;
  --risk-high:#ef907d;
  --shadow:0 22px 44px rgba(0,0,0,.34);
}

html{background:var(--bg)}
body{
  color:var(--text);
  background:
    radial-gradient(42rem 20rem at -5% -8%, rgba(63,107,177,.26), transparent 60%),
    radial-gradient(34rem 18rem at 112% -2%, rgba(42,168,139,.18), transparent 62%),
    linear-gradient(180deg, #06111f 0%, #081423 42%, #091726 100%);
}
body::before{
  opacity:.42;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
}
.page-shell{
  width:min(100%, 460px);
}
.screen{
  padding:18px 14px 116px;
}
.page-head-v2{
  align-items:flex-start;
}
.page-head-main{
  min-width:0;
  flex:1;
}
.page-title{
  margin-top:12px;
  font-size:34px;
  line-height:.95;
  color:var(--accent-strong);
}
.page-subtitle{
  max-width:280px;
  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}
.page-kpi-strip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.kpi-pill,
.tag-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--accent-strong);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}
.tag-chip.subtle{
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.visual-card,
.hero-banner,
.promo-panel,
.detail-panel,
.plan-card,
.board-summary-board,
.filter-panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(16,29,47,.96) 0%, rgba(10,20,33,.96) 100%);
  box-shadow:var(--shadow);
}
.visual-card::before,
.hero-banner::before,
.promo-panel::before,
.board-summary-board::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(145,185,255,.18), transparent 68%);
  pointer-events:none;
}
.hero-banner,
.promo-panel,
.detail-panel,
.plan-card,
.board-summary-board,
.filter-panel,
.signal-card-v2,
.match-card-v2{
  padding:16px;
}
.section-head.compact-head{
  margin-bottom:10px;
}
.section-title{
  color:var(--accent-strong);
}
.section-note{
  color:var(--muted);
}
.mini-stat,
.market-tile,
.stats-box,
.detail-item,
.table-row,
.watch-item,
.empty-state{
  border-color:var(--line);
  background:rgba(255,255,255,.05);
}
.mini-stat{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.eyebrow,
.sport-badge,
.league-badge,
.filter-chip,
.signal-pill,
.status-chip,
.team-pair-vs,
.vs-pill{
  border-color:var(--line);
  background:rgba(255,255,255,.06);
  color:var(--accent-strong);
}
.league-badge,
.sport-badge{
  color:var(--accent-strong);
}
.filter-chip.active{
  background:linear-gradient(180deg, rgba(145,185,255,.24), rgba(145,185,255,.12));
}
.hero-banner-grid,
.promo-panel-grid,
.board-summary-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  gap:14px;
  position:relative;
  z-index:1;
}
.hero-banner-copy,
.promo-panel-copy,
.board-summary-main{
  min-width:0;
}
.hero-tag-row,
.signal-stat-row,
.tag-row,
.hero-cta-row,
.quick-metric-grid,
.hero-side-stack,
.mini-match-stack,
.benefit-grid{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hero-banner-title{
  margin:14px 0 0;
  font-size:28px;
  line-height:1.03;
  letter-spacing:-.05em;
}
.hero-banner-text{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.hero-duel{
  margin-top:14px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.hero-cta-row{
  margin-top:14px;
}
.hero-banner-side,
.board-summary-side{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hero-visual-card,
.promo-panel-art{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.hero-visual-card{
  height:112px;
}
.hero-visual-image,
.promo-panel-image,
.visual-link-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-side-chip{
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.hero-side-chip span{
  display:block;
  color:var(--muted-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-side-chip strong{
  display:block;
  margin-top:4px;
  font-size:15px;
  line-height:1.1;
}
.quick-metric-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:14px;
}
.quick-stat{
  min-width:0;
}
.quick-stat.value .market-tile-value{color:var(--value)}
.quick-stat.low .market-tile-value{color:var(--risk-low)}
.quick-stat.mid .market-tile-value{color:var(--risk-mid)}
.quick-stat.high .market-tile-value{color:var(--risk-high)}
.visual-link-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.visual-link-grid-inline{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.visual-link-card{
  position:relative;
  overflow:hidden;
  min-height:156px;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #12243a 0%, #0d1929 100%);
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  box-shadow:var(--shadow);
}
.visual-link-card.ice{
  background:
    radial-gradient(12rem 8rem at 100% 0, rgba(128,176,255,.18), transparent 62%),
    linear-gradient(180deg, #122b4a 0%, #0e1a2b 100%);
}
.visual-link-card.pitch{
  background:
    radial-gradient(12rem 8rem at 100% 0, rgba(104,208,148,.18), transparent 62%),
    linear-gradient(180deg, #16322b 0%, #0e1a17 100%);
}
.visual-link-card.pro{
  background:
    radial-gradient(12rem 8rem at 100% 0, rgba(233,190,106,.22), transparent 62%),
    linear-gradient(180deg, #3a2a12 0%, #17120c 100%);
}
.visual-link-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.88);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.visual-link-card strong{
  display:block;
  margin-top:10px;
  font-size:18px;
  line-height:1.02;
  letter-spacing:-.04em;
}
.visual-link-card span:last-child{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.74);
  font-size:12px;
  line-height:1.35;
}
.visual-link-art{
  height:68px;
  border-radius:18px;
  overflow:hidden;
}
.quick-board .mini-match-stack,
.detail-panel .mini-match-stack{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.mini-match-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
}
.mini-match-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
}
.mini-match-main strong{
  display:block;
  margin-left:10px;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-match-main span{
  display:block;
  margin-left:10px;
  color:var(--muted);
  font-size:12px;
}
.mini-history-mark{
  width:30px;
  height:30px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(145,185,255,.16);
  color:var(--accent-strong);
}
.signal-grid-v2{
  grid-template-columns:1fr;
}
.signal-card-v2{
  border-radius:24px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(18,34,54,.96), rgba(12,22,34,.96));
}
.signal-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.signal-open{
  min-height:34px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  font-size:12px;
  font-weight:700;
}
.signal-copy-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.signal-main-pick{
  display:block;
  font-size:18px;
  line-height:1.16;
}
.signal-market-tag{
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
.signal-stat-row{
  margin-top:12px;
}
.signal-stat{
  min-width:0;
  flex:1;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.signal-stat small{
  display:block;
  color:var(--muted-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.signal-stat strong{
  display:block;
  margin-top:4px;
  font-size:15px;
}
.signal-stat.value strong{color:var(--value)}
.signal-stat.low strong{color:var(--risk-low)}
.signal-stat.mid strong{color:var(--risk-mid)}
.signal-stat.high strong{color:var(--risk-high)}
.probability-bar{
  position:relative;
  height:8px;
  margin-top:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.probability-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #74a7ff 0%, #73dab3 100%);
  box-shadow:0 0 18px rgba(115,218,179,.28);
}
.board-summary-board .board-summary-grid{
  align-items:start;
}
.match-card-v2{
  cursor:pointer;
  padding:14px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(180deg, #12263d 0%, #0d1725 100%);
}
.match-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.fav-chip{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-strong);
}
.match-board-grid{
  grid-template-columns:minmax(0,1fr) 94px;
}
.match-team-row{
  background:rgba(255,255,255,.05);
}
.match-side-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.match-side-top{
  color:var(--accent-strong);
}
.match-pick-line{
  margin-top:10px;
}
.match-open-link{
  background:linear-gradient(180deg, #8bb4ff 0%, #6f95de 100%);
  color:#081321;
}
.market-tiles{
  margin-top:10px;
}
.market-tile{
  background:rgba(255,255,255,.05);
}
.market-tile-value{
  color:var(--accent-strong);
}
.market-tile-value.value{color:var(--value)}
.market-tile-value.low{color:var(--risk-low)}
.market-tile-value.mid{color:var(--risk-mid)}
.market-tile-value.high{color:var(--risk-high)}
.filter-panel .chip-scroll{
  display:flex;
  gap:8px;
  overflow:auto hidden;
  padding-bottom:4px;
}
.filter-panel .chip-scroll + .chip-scroll{
  margin-top:10px;
}
.promo-panel-grid{
  align-items:center;
}
.promo-panel-copy h3{
  margin:12px 0 0;
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.promo-panel-copy .tag-row{
  margin-top:12px;
}
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.benefit-tile{
  padding:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
}
.benefit-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(145,185,255,.14);
  color:var(--accent-strong);
}
.benefit-tile strong{
  display:block;
  margin-top:12px;
  font-size:15px;
  line-height:1.2;
}
.benefit-tile span:last-child{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.42;
}
.plan-card.featured{
  background:
    radial-gradient(14rem 8rem at 100% 0, rgba(145,185,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)),
    linear-gradient(180deg, #14243a 0%, #0d1828 100%);
}
.switch-inline{
  min-height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
}
.switch-inline.active{
  background:rgba(121,216,176,.18);
}
.live-match-hero .hero-banner-title,
.match-detail-hero .hero-banner-title{
  font-size:24px;
}
.detail-panel h3{
  margin:0;
  font-size:18px;
}
.detail-panel .detail-list,
.detail-panel .table-list{
  margin-top:12px;
}
.button{
  background:linear-gradient(180deg, #dce8ff 0%, #94b7f6 100%);
  color:#081321;
  box-shadow:0 12px 24px rgba(86,134,212,.24);
}
.ghost-button{
  background:rgba(255,255,255,.05);
  color:var(--accent-strong);
}
.bottom-nav{
  border-color:rgba(188,210,240,.12);
  background:rgba(7,15,27,.9);
}
.bottom-nav a.active{
  background:rgba(255,255,255,.08);
  color:var(--accent-strong);
}

@media (max-width:420px){
  .visual-link-grid{
    grid-template-columns:1fr;
  }
  .visual-link-grid-inline{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:380px){
  .page-title{
    font-size:30px;
  }
  .hero-banner-grid,
  .promo-panel-grid,
  .board-summary-grid{
    grid-template-columns:minmax(0,1fr) 92px;
    gap:10px;
  }
  .hero-visual-card{
    height:92px;
  }
  .quick-metric-grid,
  .benefit-grid,
  .market-tiles{
    grid-template-columns:1fr 1fr;
  }
  .quick-metric-grid .quick-stat:last-child,
  .market-tiles .market-tile:last-child{
    grid-column:1 / -1;
  }
}

/* Reference betting-app pass */
:root{
  --bg:#f3f5f8;
  --bg-soft:#eef1f5;
  --card:#ffffff;
  --card-strong:#ffffff;
  --card-alt:#f7f8fa;
  --line:rgba(20,32,51,.08);
  --line-strong:rgba(20,32,51,.14);
  --text:#1a2433;
  --muted:#6b7787;
  --muted-2:#8792a2;
  --accent:#2f5cff;
  --accent-strong:#1a2433;
  --value:#0d9c5d;
  --risk-low:#0d9c5d;
  --risk-mid:#d28d18;
  --risk-high:#d4544a;
  --shadow:0 8px 20px rgba(24,36,51,.06);
}

html{background:var(--bg)}
body{
  background:linear-gradient(180deg, #f6f7f9 0%, #f0f2f5 100%);
  color:var(--text);
}
body::before{
  display:none;
}
.sport-scene,
.visual-card::before,
.hero-banner::before,
.promo-panel::before,
.board-summary-board::before{
  display:none;
}
.page-shell{
  width:min(100%, 430px);
}
.screen{
  padding:12px 10px 96px;
}
.section{
  margin-top:12px;
}
.betting-head{
  padding-top:2px;
}
.home-shell{
  margin-top:4px;
  padding:6px 8px 0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  background:linear-gradient(180deg, #171f2c 0%, #111824 100%);
  box-shadow:0 16px 32px rgba(0,0,0,.24);
}
.home-appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  color:#eef3fb;
}
.home-appbar-balance{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#f7d266;
  font-size:12px;
  font-weight:700;
}
.home-coin{
  color:#f0b21d;
  font-size:11px;
}
.home-appbar-title{
  flex:1;
  text-align:center;
  color:#eef3fb;
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.home-bell{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#f0b21d;
  position:relative;
}
.home-bell .icon{
  width:16px;
  height:16px;
}
.home-bell em{
  position:absolute;
  top:-3px;
  right:-2px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:8px;
  background:#ef5a45;
  color:#fff;
  font-size:9px;
  line-height:15px;
  font-style:normal;
  font-weight:700;
}
.home-hero{
  margin-top:0;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  background:#121927;
  box-shadow:none;
}
.home-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px 0;
  margin-bottom:8px;
}
.home-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#dfe7f5;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.home-hero-badge .icon{
  width:18px;
  height:18px;
  color:#f0a10c;
}
.home-hero-counter{
  color:#8e9db4;
  font-size:10px;
  font-weight:600;
}
.home-hero-media{
  display:block;
  overflow:hidden;
  background:#0f1420;
}
.home-hero-media img{
  display:block;
  width:100%;
  height:auto;
}
.home-hero-actions{
  display:flex;
  gap:8px;
  padding:8px 10px 10px;
  margin-top:0;
}
.home-hero-actions .button,
.home-hero-actions .ghost-button{
  flex:1;
}
.sport-tabs-panel{
  margin-top:8px;
  padding:0;
  background:#1a2230;
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  box-shadow:none;
}
.sport-tabs-row{
  display:flex;
  gap:0;
  overflow:auto hidden;
}
.sport-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-width:max-content;
  min-height:38px;
  padding:0 12px;
  color:#cdd7e5;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.05);
}
.sport-tab:last-child{
  border-right:none;
}
.sport-tab.active{
  color:#f2c028;
  box-shadow:inset 0 -2px 0 #f2c028;
}
.home-match-card{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, #232d3c 0%, #1a2331 100%);
  box-shadow:none;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.home-match-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(16rem 8rem at 100% 50%, rgba(255,181,58,.18), transparent 60%);
  pointer-events:none;
}
.home-match-card.tone-court::after{
  background:radial-gradient(16rem 8rem at 100% 50%, rgba(255,143,87,.18), transparent 60%);
}
.home-match-card.tone-ice::after{
  background:radial-gradient(16rem 8rem at 100% 50%, rgba(133,190,255,.18), transparent 60%);
}
.home-match-head,
.home-match-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.home-match-time{
  color:#dbe4f2;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.home-match-main{
  align-items:flex-start;
  margin-top:8px;
  position:relative;
  z-index:1;
}
.home-match-copy{
  min-width:0;
  flex:1;
}
.home-match-teams{
  display:grid;
  gap:8px;
}
.home-match-team{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.home-match-team span{
  min-width:0;
  color:#f5f7fb;
  font-size:12px;
  line-height:1.25;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-match-team .team-logo.mini{
  width:26px;
  height:26px;
  border-radius:9px;
  margin-left:0;
}
.home-match-meta{
  margin-top:6px;
  color:#9aa8bc;
  font-size:10px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.home-match-signal{
  margin-top:3px;
  color:#ffffff;
  font-size:12px;
  line-height:1.3;
  font-weight:700;
}
.home-match-odd{
  margin-top:3px;
  color:#cfd8e6;
  font-size:10px;
  line-height:1.25;
}
.home-match-side{
  width:96px;
  display:grid;
  justify-items:end;
  gap:6px;
}
.home-match-art{
  width:88px;
  height:58px;
  border-radius:10px;
  background-image:
    linear-gradient(180deg, rgba(13,18,27,.06), rgba(13,18,27,.24)),
    url('/static/banner.png');
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.home-match-art.sport-football{
  background-position:18% center;
}
.home-match-art.sport-basketball{
  background-position:82% center;
}
.home-match-art.sport-hockey{
  background-image:
    linear-gradient(180deg, rgba(13,18,27,.12), rgba(13,18,27,.3)),
    radial-gradient(circle at 30% 50%, rgba(141,205,255,.28), transparent 38%),
    linear-gradient(135deg, #182433, #101923);
}
.home-match-action{
  min-width:88px;
  min-height:30px;
  padding:0 8px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #2fa648 0%, #21863a 100%);
  color:#fff;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(44,154,66,.24);
}
.home-section{
  margin-top:8px;
}
.home-list-panel{
  padding:10px 8px 0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:0 0 22px 22px;
  background:linear-gradient(180deg, #161e2b 0%, #101722 100%);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.home-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  padding:0 2px;
}
.home-section-head strong{
  color:#dfe7f4;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  text-transform:uppercase;
}
.home-section-head a{
  color:#7f8da2;
  font-size:16px;
  line-height:1;
  font-weight:700;
}
.betting-head-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.screen-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 10px;
  border-radius:13px;
  background:#eef2f7;
  color:#4b5b73;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.page-title.compact{
  margin:8px 0 0;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--text);
}
.page-subtitle.compact{
  margin:4px 0 0;
  max-width:none;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
.meta-line{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:12px;
  background:#f1f4f8;
  color:#5d6a7f;
  font-size:10px;
  font-weight:600;
}
.mini-stat.compact{
  min-width:64px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.mini-stat-label{
  font-size:9px;
  letter-spacing:.05em;
}
.mini-stat-value{
  margin-top:3px;
  font-size:17px;
  font-weight:700;
}
.top-banner,
.slim-panel,
.filter-shell,
.event-screen,
.pro-summary-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.top-banner,
.slim-panel,
.filter-shell,
.event-screen{
  padding:12px;
}
.top-banner{
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.top-banner-head,
.top-banner-lead,
.top-banner-teams,
.top-banner-actions,
.event-screen-head,
.event-screen-score,
.event-market-grid,
.list-row-card,
.pro-summary-card,
.pro-inline-card{
  display:flex;
  gap:8px;
}
.top-banner-head,
.event-screen-head,
.list-row-card,
.pro-summary-card,
.pro-inline-card{
  align-items:center;
  justify-content:space-between;
}
.event-tags{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.top-banner-kicker,
.event-signal-label,
.app-stat-label,
.odds-label{
  color:var(--muted-2);
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.top-banner-copy{
  min-width:0;
  flex:1;
}
.top-banner-copy h2{
  margin:4px 0 0;
  font-size:16px;
  line-height:1.2;
  font-weight:600;
  color:var(--text);
}
.top-banner-copy p,
.event-note,
.pro-summary-copy span,
.pro-inline-card span,
.shortcut-card span:last-child,
.benefit-app-card span:last-child,
.list-row-copy span{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.top-banner-summary,
.top-banner-footer{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.top-banner-side{
  display:grid;
  gap:6px;
  width:92px;
}
.top-banner-stat{
  padding:8px;
  border-radius:12px;
  background:#f6f8fb;
}
.top-banner-stat span{
  display:block;
  color:var(--muted-2);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
}
.top-banner-stat strong{
  display:block;
  margin-top:2px;
  font-size:12px;
  font-weight:700;
}
.top-banner-teams{
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.top-banner-summary{
  margin-top:10px;
}
.top-banner-chip{
  min-width:0;
  flex:1;
  padding:8px 10px;
  border:1px solid rgba(31,45,61,.08);
  border-radius:12px;
  background:#f7f9fc;
}
.top-banner-chip span,
.event-card-progress span{
  display:block;
  color:var(--muted-2);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.top-banner-chip strong{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-banner-team,
.event-screen-team{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
}
.top-banner-team span,
.event-screen-team span,
.event-team span{
  min-width:0;
  font-size:12px;
  line-height:1.25;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-banner-vs{
  width:24px;
  min-width:24px;
  text-align:center;
  color:var(--muted-2);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.top-banner-actions{
  margin-top:10px;
}
.top-banner-actions .button,
.top-banner-actions .ghost-button{
  flex:1;
}
.top-banner-footer{
  margin-top:10px;
}
.top-banner-footer.compact{
  margin-top:8px;
}
.board-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.app-stat-tile,
.odds-tile{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
  min-width:0;
}
.app-stat-value,
.odds-value{
  margin-top:4px;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.odds-tile.status-tile .odds-value{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.15;
  font-size:12px;
  word-break:break-word;
}
.app-stat-tile.value .app-stat-value,
.odds-tile.value .odds-value{color:var(--value)}
.app-stat-tile.low .app-stat-value,
.odds-tile.low .odds-value{color:var(--risk-low)}
.app-stat-tile.mid .app-stat-value,
.odds-tile.mid .odds-value{color:var(--risk-mid)}
.app-stat-tile.high .app-stat-value,
.odds-tile.high .odds-value{color:var(--risk-high)}
.app-grid.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.shortcut-card,
.benefit-app-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}
.shortcut-icon{
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#edf2ff;
  color:var(--accent);
}
.shortcut-card strong,
.benefit-app-card strong,
.list-row-copy strong,
.event-signal-value{
  display:block;
  margin-top:8px;
  font-size:12px;
  line-height:1.25;
  font-weight:600;
  color:var(--text);
}
.stack,
.list-row-stack{
  display:grid;
  gap:8px;
}
.event-card{
  position:relative;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.event-card.compact{
  padding:11px;
}
.event-card.featured{
  border-color:rgba(84,121,255,.18);
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.event-card.is-strong{
  border-color:rgba(84,121,255,.16);
}
.event-card.is-pro{
  box-shadow:0 10px 22px rgba(31,45,61,.08);
}
.event-card-progress{
  margin-top:10px;
}
.event-card-progress .probability-bar{
  height:6px;
  margin-top:6px;
  background:#e8edf4;
}
.event-card-progress .probability-bar span{
  box-shadow:none;
}
.event-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.event-time-box{
  min-width:62px;
  padding:6px 8px;
  border-radius:12px;
  background:#f5f7fa;
  text-align:right;
  flex-shrink:0;
}
.event-time-box strong{
  display:block;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
}
.event-time-box span{
  display:block;
  margin-top:2px;
  color:var(--muted-2);
  font-size:9px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.event-teams{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.event-team{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.event-team .team-logo.mini{
  width:26px;
  height:26px;
  border-radius:9px;
  margin-left:0;
}
.event-signal-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
}
.event-signal-copy{
  min-width:0;
  flex:1;
}
.event-signal-value{
  margin-top:3px;
}
.event-open,
.link-button.compact{
  min-height:28px;
  padding:0 8px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:11px;
  font-weight:600;
}
.event-market-grid{
  margin-top:10px;
}
.event-market-grid.single-line{
  justify-content:stretch;
  align-items:stretch;
}
.event-market-grid .odds-tile{
  flex:1;
}
.event-note{
  margin-top:8px;
}
.event-note.strong{
  font-size:12px;
}
.filter-shell{
  padding:10px;
}
.tabs-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tabs-row + .tabs-row{
  margin-top:8px;
}
.tabs-row.scroll{
  flex-wrap:nowrap;
  overflow:auto hidden;
  padding-bottom:2px;
}
.filter-chip.compact{
  min-height:28px;
  padding:0 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  background:#f4f6f9;
  color:#4e5d73;
  white-space:nowrap;
}
.filter-chip.compact.active{
  background:#1f2d3d;
  border-color:#1f2d3d;
  color:#fff;
}
.event-screen-score{
  align-items:center;
  margin-top:10px;
}
.event-screen-score.pre{
  margin-top:8px;
}
.event-screen-team{
  gap:7px;
}
.event-screen-team.away{
  justify-content:flex-end;
}
.event-screen-scorebox{
  min-width:92px;
  padding:8px 10px;
  border-radius:14px;
  background:#f5f7fa;
  text-align:center;
  flex-shrink:0;
}
.event-screen-scorebox strong{
  display:block;
  font-size:18px;
  line-height:1.1;
  font-weight:700;
}
.event-screen-scorebox span{
  display:block;
  margin-top:3px;
  color:var(--muted-2);
  font-size:10px;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}
.list-row-card{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
}
.list-row-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
}
.list-row-copy{
  min-width:0;
  flex:1;
}
.list-row-copy strong{
  margin-top:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.standing-rank,
.timeline-side{
  min-width:28px;
  text-align:right;
  font-size:12px;
  font-weight:700;
  color:var(--text);
}
.timeline .list-row-copy strong{
  white-space:normal;
}
.pro-summary-card,
.pro-inline-card{
  padding:12px;
}
.pro-summary-copy,
.pro-inline-card > div{
  min-width:0;
  flex:1;
}
.pro-summary-copy strong,
.pro-inline-card strong{
  display:block;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
}
.pro-inline-card.secondary{
  margin-top:8px;
}
.button,
.ghost-button{
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  box-shadow:none;
}
.button.small,
.ghost-button.small{
  min-height:32px;
  padding:0 10px;
  border-radius:10px;
  font-size:11px;
}
.button{
  background:#1f2d3d;
  color:#fff;
}
.ghost-button{
  border:1px solid var(--line);
  background:#fff;
  color:#364559;
}
.switch-inline{
  min-height:32px;
  padding:0 10px;
}
.switch-inline.active{
  background:#eff8f2;
}
.eyebrow,
.league-badge,
.sport-badge,
.signal-pill,
.team-pair-vs,
.vs-pill,
.live-pill{
  min-height:22px;
  padding:0 8px;
  border-radius:11px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0;
}
.signal-pill.strong{
  background:#eff8f2;
  color:var(--risk-low);
}
.signal-pill.mid{
  background:#fff6e7;
  color:var(--risk-mid);
}
.signal-pill.watch{
  background:#eff3f8;
  color:#536276;
}
.signal-pill.pro{
  background:#eef1f5;
  color:#5e6a7a;
}
.live-pill{
  background:#fff0ef;
  color:#cb4d41;
  border-color:#ffd8d5;
}
.league-badge,
.sport-badge{
  background:#f4f6f9;
  color:#4e5d73;
}
.league-logo-img{
  width:13px;
  height:13px;
}
.team-logo{
  width:34px;
  height:34px;
  border-radius:12px;
  box-shadow:none;
  border-color:rgba(20,32,51,.08);
}
.team-logo.mini{
  width:24px;
  height:24px;
  border-radius:8px;
}
.team-logo.overlap{
  margin-left:-5px;
}
.bottom-nav{
  width:min(calc(100% - 12px), 430px);
  gap:4px;
  padding:6px;
  border-radius:16px 16px 0 0;
  background:rgba(255,255,255,.96);
  box-shadow:0 -8px 20px rgba(24,36,51,.08);
}
.bottom-nav a{
  min-height:42px;
  border-radius:10px;
  color:#78859a;
  font-size:10px;
  font-weight:600;
}
.bottom-nav a.active{
  background:#eef2f7;
  color:#1f2d3d;
}
.bottom-nav-label{
  font-size:9px;
}
body[data-page="home"] .screen{
  padding:6px 8px 98px;
}
body[data-page="home"]{
  background:
    radial-gradient(44rem 20rem at 50% -8%, rgba(138,166,210,.14), transparent 58%),
    linear-gradient(180deg, #0a1018 0%, #0b1220 100%);
}
body[data-page="home"] .bottom-nav{
  width:min(calc(100% - 16px), 430px);
  gap:0;
  padding:7px 9px 9px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(180deg, rgba(22,30,43,.94) 0%, rgba(15,22,33,.94) 100%);
  box-shadow:0 -6px 18px rgba(0,0,0,.18);
  border-top:1px solid rgba(255,255,255,.06);
}
body[data-page="home"] .bottom-nav a{
  min-height:44px;
  border-radius:12px;
  color:#9aa7bc;
  font-size:10px;
  font-weight:700;
}
body[data-page="home"] .bottom-nav a .icon{
  color:#c7d1e0;
}
body[data-page="home"] .bottom-nav a.active{
  background:rgba(242,192,40,.09);
  color:#f2c028;
}
body[data-page="home"] .bottom-nav a.active .icon{
  color:#f2c028;
}
body[data-page="home"] .bottom-nav-label{
  font-size:9px;
  text-transform:uppercase;
}

.ref-topbar-shell{
  margin-top:0;
}
.ref-topbar{
  display:grid;
  grid-template-columns:28px auto minmax(0,1fr) 28px;
  align-items:center;
  gap:8px;
  min-height:34px;
  color:#eef3fb;
}
.ref-topbar-back{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#cab06b;
  font-size:24px;
  line-height:1;
}
.ref-topbar-balance{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#f7d266;
  font-size:12px;
  font-weight:700;
  min-width:0;
}
.ref-topbar-title{
  min-width:0;
  text-align:center;
  color:#f1f4fa;
  font-size:14px;
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
}
.ref-topbar-match{
  grid-template-columns:28px auto 1fr 28px;
  row-gap:4px;
}
.ref-topbar-match .ref-topbar-title{
  grid-column:1 / -1;
  grid-row:2;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ref-topbar-bell{
  width:28px;
  height:28px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#f0b21d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.ref-topbar-bell em{
  position:absolute;
  top:-3px;
  right:-2px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:8px;
  background:#ef5a45;
  color:#fff;
  font-size:9px;
  line-height:15px;
  font-style:normal;
  font-weight:700;
}
.ref-screen-block,
.ref-match-shell,
.ref-pro-shell,
.ref-profile-shell{
  margin-top:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,196,84,.08), transparent 22%),
    linear-gradient(180deg, #171f2c 0%, #111824 100%);
  box-shadow:0 18px 34px rgba(0,0,0,.24);
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.ref-segment-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#212938;
}
.ref-segment{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dce4f3;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.06);
}
.ref-segment:last-child{
  border-right:none;
}
.ref-segment.active{
  background:linear-gradient(180deg, #64862b 0%, #4f6e1f 100%);
  color:#fff3bb;
}
.ref-sport-tabs{
  display:flex;
  gap:0;
  margin-top:10px;
  overflow:auto hidden;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:#1b2331;
}
.ref-sport-tab{
  min-width:max-content;
  padding:0 12px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#d0d8e6;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.05);
}
.ref-sport-tab:last-child{
  border-right:none;
}
.ref-sport-tab.active{
  color:#f2c028;
}
.ref-list-card{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:
    radial-gradient(14rem 6rem at 85% 55%, rgba(255,159,53,.22), transparent 55%),
    linear-gradient(180deg, #2b313a 0%, #222830 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  cursor:pointer;
}
.ref-list-card.ref-tone-basketball{
  background:
    radial-gradient(14rem 6rem at 85% 55%, rgba(255,122,70,.24), transparent 55%),
    linear-gradient(180deg, #2b313a 0%, #222830 100%);
}
.ref-list-card.ref-tone-hockey{
  background:
    radial-gradient(14rem 6rem at 85% 55%, rgba(124,183,255,.18), transparent 55%),
    linear-gradient(180deg, #2b313a 0%, #222830 100%);
}
.ref-list-card-top,
.ref-list-bottom,
.ref-list-card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ref-list-card-title{
  justify-content:flex-start;
  min-width:0;
  color:#f4f6fb;
}
.ref-list-card-title strong{
  min-width:0;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ref-list-sport{
  width:18px;
  height:18px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#d4dbe7;
}
.ref-list-card-logos{
  display:flex;
  align-items:center;
  gap:0;
  flex-shrink:0;
}
.ref-list-card-logos .team-logo.mini{
  width:28px;
  height:28px;
  border-radius:10px;
}
.ref-list-time{
  margin-top:4px;
  color:#adb7c8;
  font-size:11px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.ref-list-pick{
  margin-top:10px;
  color:#ffffff;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}
.ref-list-odd{
  color:#c7d0df;
  font-size:11px;
}
.ref-list-odd strong{
  color:#f0c34b;
  font-size:13px;
}
.ref-green-button{
  min-width:126px;
  min-height:34px;
  padding:0 12px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #39aa41 0%, #2a8532 100%);
  color:#efffe9;
  font-size:11px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(38,135,48,.24);
}
.ref-green-button::after{
  content:"›";
  margin-left:6px;
  font-size:14px;
}
.ref-match-meta{
  color:#d5a94c;
  font-size:13px;
  line-height:1.25;
  text-align:center;
  min-width:0;
}
.ref-match-meta-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.ref-match-meta.live-active .ref-match-meta-line{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  row-gap:4px;
  column-gap:8px;
  width:min(100%,320px);
  margin:0 auto;
}
.ref-match-meta-line strong,
.ref-match-meta-line span{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ref-match-meta.live-active .live-pill{
  flex:0 0 auto;
  justify-self:start;
}
.ref-match-meta.live-active .ref-match-meta-line strong{
  width:100%;
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.2;
  text-align:left;
}
.ref-match-meta-line span:last-child{
  flex:0 1 100%;
}
.ref-match-meta span{
  color:#b8c2d3;
}
.ref-match-meta.live-active .ref-match-meta-line span:last-child{
  grid-column:1 / -1;
  width:100%;
  white-space:normal;
  text-align:center;
  line-height:1.3;
}
.ref-live-strip{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:linear-gradient(180deg, #262c34 0%, #1f252d 100%);
}
.ref-live-strip-top{
  margin-top:12px;
}
.ref-live-strip .event-market-grid{
  align-items:stretch;
  margin-top:0;
}
.meta-line.compact{
  margin-top:8px;
  flex-wrap:wrap;
}
.ref-match-hero{
  position:relative;
  margin-top:10px;
  min-height:188px;
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:18px 14px 14px;
}
.ref-match-hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(11,17,28,.15), rgba(11,17,28,.48)),
    url('/static/banner.png') center/cover no-repeat;
}
.ref-match-team,
.ref-match-vs{
  position:relative;
  z-index:1;
}
.ref-match-team{
  display:grid;
  justify-items:center;
  gap:8px;
  color:#fff;
  text-align:center;
  min-width:0;
}
.ref-match-team .team-logo{
  width:68px;
  height:68px;
  border-radius:18px;
}
.ref-match-team span{
  font-size:12px;
  font-weight:700;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ref-match-vs{
  color:#ffcb43;
  font-size:54px;
  line-height:1;
  font-weight:900;
  text-shadow:0 8px 28px rgba(255,148,34,.38);
}
.ref-odds-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#222832;
}
.ref-odd-box{
  min-height:54px;
  display:grid;
  place-items:center;
  gap:4px;
  color:#dbe2ef;
  border-right:1px solid rgba(255,255,255,.05);
}
.ref-odd-box:last-child{
  border-right:none;
}
.ref-odd-box span{
  font-size:11px;
  font-weight:700;
}
.ref-odd-box strong{
  font-size:16px;
  font-weight:800;
}
.ref-odd-box.active{
  background:linear-gradient(180deg, rgba(114,153,49,.3), rgba(80,120,28,.5));
  color:#f0ffbf;
}
.ref-insight-card{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:
    radial-gradient(12rem 6rem at 80% 20%, rgba(255,170,40,.15), transparent 55%),
    linear-gradient(180deg, #2a2f37 0%, #21262d 100%);
}
.ref-insight-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#f3f5f9;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}
.ref-insight-head strong{
  color:#f1d14f;
  font-size:18px;
}
.ref-insight-body{
  display:grid;
  grid-template-columns:116px 1fr;
  gap:12px;
  margin-top:10px;
}
.ref-insight-body p{
  margin:0;
  color:#c6cedb;
  font-size:13px;
  line-height:1.45;
}
.ref-gauge{
  position:relative;
  width:116px;
  height:116px;
}
.ref-gauge-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(#d03b2b 0 22%, #f3d143 22% 58%, #6cab3a 58% 100%);
  -webkit-mask:radial-gradient(circle at center, transparent 45%, #000 46%);
  mask:radial-gradient(circle at center, transparent 45%, #000 46%);
}
.ref-gauge-center{
  position:absolute;
  inset:23px;
  border-radius:50%;
  background:#1d232d;
  display:grid;
  place-items:center;
  text-align:center;
  color:#f3f4f8;
}
.ref-gauge-center span{
  font-size:11px;
  text-transform:uppercase;
}
.ref-gauge-center strong{
  font-size:13px;
}
.ref-insight-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}
.ref-insight-metric{
  text-align:center;
  color:#edf1f8;
}
.metric-icon{
  width:34px;
  height:34px;
  margin:0 auto 6px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
}
.metric-icon.risk{ color:#ff7f68; }
.metric-icon.value{ color:#f1cc49; }
.metric-icon.prob{ color:#ffdf74; }
.ref-insight-metric strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
}
.ref-insight-metric small{
  display:block;
  margin-top:4px;
  color:#c4cddb;
  font-size:11px;
}
.insight-dot{
  width:8px;
  height:8px;
  border-radius:4px;
  display:inline-block;
  margin:0 1px;
  background:#3b4556;
}
.insight-dot.active{
  background:#7dc548;
}
.ref-cta-wide{
  min-height:46px;
  margin-top:14px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #dfbf35 0%, #c4951d 100%);
  color:#2f2304;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}
.ref-cta-wide::after{
  content:"›";
  margin-left:8px;
  font-size:18px;
}
.ref-cta-wide.pro{
  width:100%;
  border:none;
}
.ref-detail-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:#1c2330;
}
.ref-detail-tabs span{
  min-width:0;
  padding:8px 6px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a8b4c8;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.04);
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  line-height:1.15;
}
.ref-detail-tabs span.active{
  color:#fff3ba;
}
.ref-stat-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:#20252d;
}
.ref-stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:44px;
  color:#edf2f8;
  min-width:0;
  flex-wrap:wrap;
}
.ref-stat-row + .ref-stat-row{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.05);
}
.ref-stat-row strong{
  color:#f3d14d;
  font-size:15px;
  font-weight:800;
  flex:0 0 auto;
}
.ref-stat-team{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 120px;
}
.ref-stat-team span,
.ref-stat-side{
  color:#c8d0dd;
  font-size:12px;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ref-stat-team.right{
  justify-content:flex-end;
}
.ref-stat-side{
  flex:1 1 110px;
  text-align:right;
}
.event-market-grid.single-line{
  flex-wrap:nowrap;
}
.event-market-grid.single-line .odds-tile{
  min-width:0;
}
.event-market-grid.single-line .odds-label{
  white-space:nowrap;
}
.event-market-grid.single-line .odds-value{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.event-market-grid.single-line .live-minute-tile .odds-value,
.event-market-grid.single-line .live-score-tile .odds-value{
  white-space:nowrap;
  word-break:normal;
}
.event-market-grid.single-line .live-status-tile .odds-value{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.event-market-grid.single-line .league-value-tile .odds-value{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.15;
}
.ref-pro-hero{
  padding:14px 14px 12px;
  border:1px solid rgba(255,193,69,.18);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,170,40,.18), rgba(10,12,18,.38)),
    url('/static/page_images/pro_card_1.png') center/cover no-repeat;
}
.ref-pro-title{
  color:#ffe9a2;
  font-size:18px;
  line-height:1.15;
  font-weight:800;
  text-transform:uppercase;
}
.ref-pro-title strong{
  color:#ffd33b;
  font-size:24px;
}
.ref-pro-shield{
  width:124px;
  height:124px;
  margin:14px auto 12px;
  border:3px solid rgba(255,205,73,.58);
  border-radius:32px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at center, rgba(255,204,73,.2), rgba(255,204,73,.04));
  color:#ffd74f;
  font-size:34px;
  font-weight:900;
  box-shadow:0 0 24px rgba(255,192,66,.18);
}
.ref-pro-checks{
  display:grid;
  gap:8px;
}
.ref-pro-checks div{
  display:flex;
  align-items:center;
  gap:8px;
  color:#f4f6dc;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}
.ref-pro-checks span{
  color:#9fda56;
  font-size:18px;
}
.ref-pro-note{
  margin-top:14px;
  color:#cde18f;
  font-size:14px;
  line-height:1.35;
  text-align:center;
  font-weight:800;
  text-transform:uppercase;
}
.ref-pro-pricing{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}
.ref-plan-card{
  position:relative;
  min-height:110px;
  padding:10px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, #272d36 0%, #1d232b 100%);
  color:#f3f5f9;
  text-align:left;
}
.ref-plan-card em{
  position:absolute;
  top:-8px;
  right:8px;
  padding:2px 6px;
  border-radius:8px;
  background:#7ac44a;
  color:#1f2a08;
  font-size:11px;
  font-style:normal;
  font-weight:800;
}
.ref-plan-card span{
  display:block;
  font-size:12px;
  text-transform:uppercase;
}
.ref-plan-card strong{
  display:block;
  margin-top:8px;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}
.ref-plan-card small{
  display:block;
  margin-top:8px;
  color:#cfd552;
  font-size:11px;
}
.ref-plan-card.featured{
  border-color:rgba(255,207,72,.5);
  box-shadow:0 0 0 1px rgba(255,207,72,.2), 0 0 20px rgba(255,184,51,.14);
}
.ref-pro-footnote{
  margin:12px 2px 0;
  color:#8f98a9;
  font-size:11px;
  line-height:1.45;
}
.pro-image-shell{
  border-radius:22px;
  overflow:hidden;
  background:#0e1015;
  box-shadow:0 24px 46px rgba(3,7,18,.34);
}
.pro-image-map{
  position:relative;
}
.pro-image-visual{
  display:block;
  width:100%;
  height:auto;
}
.pro-hotspot{
  position:absolute;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:18px;
  -webkit-tap-highlight-color:transparent;
}
.pro-hotspot:focus-visible{
  outline:2px solid rgba(255,214,84,.92);
  outline-offset:1px;
  box-shadow:0 0 0 4px rgba(255,214,84,.2);
}
.pro-hotspot-plan{
  top:69.8%;
  height:12.4%;
}
.pro-hotspot-plan.plan-1{
  left:5.5%;
  width:26.5%;
}
.pro-hotspot-plan.plan-3{
  left:33.7%;
  width:32.4%;
}
.pro-hotspot-plan.plan-6{
  left:68%;
  width:25.8%;
}
.pro-hotspot-cta{
  left:16%;
  top:83.6%;
  width:61.5%;
  height:7.6%;
  border-radius:16px;
}
.ref-profile-lead{
  color:#cfd7e5;
  font-size:14px;
}
.ref-profile-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:10px;
}
.ref-profile-stats .app-stat-tile{
  padding:10px 8px;
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg, #2a3039 0%, #232831 100%);
  box-shadow:none;
}
.ref-profile-stats .app-stat-label{
  color:#cfd5e0;
}
.ref-profile-stats .app-stat-value{
  color:#fff;
  font-size:14px;
}
.ref-profile-card{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:
    radial-gradient(14rem 5rem at 70% 0%, rgba(255,170,40,.12), transparent 50%),
    linear-gradient(180deg, #2b3139 0%, #232832 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ref-profile-card strong{
  display:block;
  color:#fff;
  font-size:14px;
}
.ref-profile-card span{
  display:block;
  margin-top:4px;
  color:#b2bccb;
  font-size:12px;
}
.ref-gold-button{
  min-width:112px;
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #f2c547 0%, #d99b26 100%);
  color:#322508;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.ref-dark-switch{
  min-width:66px;
  min-height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#3a3134;
  color:#dfe4ee;
  font-size:12px;
  font-weight:700;
}
.ref-dark-switch.active{
  background:#295f30;
}
.ref-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:
    radial-gradient(14rem 5rem at 50% 0%, rgba(255,170,40,.1), transparent 52%),
    linear-gradient(180deg, #2a3039 0%, #232832 100%);
}
.ref-panel h3{
  margin:0;
  color:#f4f6fb;
  font-size:16px;
}
.ref-panel-inner{
  margin-top:12px;
}
.ref-empty{
  min-height:56px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  color:#b7c0cf;
  font-size:13px;
  background:#262b34;
}
.ref-history-row{
  min-height:60px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:#2a2f38;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ref-history-row strong{
  display:block;
  color:#f3f5f8;
  font-size:13px;
}
.ref-history-row span{
  display:block;
  margin-top:4px;
  color:#b7c0cf;
  font-size:12px;
}
.ref-history-row a{
  color:#d9deeb;
  font-size:12px;
  font-weight:800;
}
body[data-page="matches"] .screen,
body[data-page="match"] .screen,
body[data-page="pro"] .screen,
body[data-page="profile"] .screen{
  padding:10px 10px 98px;
}
body[data-page="matches"] .bottom-nav,
body[data-page="match"] .bottom-nav,
body[data-page="pro"] .bottom-nav,
body[data-page="profile"] .bottom-nav{
  width:min(calc(100% - 16px), 430px);
  gap:0;
  padding:7px 9px 9px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(180deg, rgba(22,30,43,.96) 0%, rgba(15,22,33,.96) 100%);
  box-shadow:0 -10px 24px rgba(0,0,0,.26);
  border-top:1px solid rgba(255,255,255,.06);
}
body[data-page="matches"] .bottom-nav a,
body[data-page="match"] .bottom-nav a,
body[data-page="pro"] .bottom-nav a,
body[data-page="profile"] .bottom-nav a{
  min-height:46px;
  border-radius:12px;
  color:#9aa7bc;
  font-size:10px;
  font-weight:700;
}
body[data-page="matches"] .bottom-nav a .icon,
body[data-page="match"] .bottom-nav a .icon,
body[data-page="pro"] .bottom-nav a .icon,
body[data-page="profile"] .bottom-nav a .icon{
  color:#c7d1e0;
}
body[data-page="matches"] .bottom-nav a.active,
body[data-page="match"] .bottom-nav a.active,
body[data-page="pro"] .bottom-nav a.active,
body[data-page="profile"] .bottom-nav a.active{
  background:rgba(242,192,40,.12);
  color:#f2c028;
}
body[data-page="matches"] .bottom-nav a.active .icon,
body[data-page="match"] .bottom-nav a.active .icon,
body[data-page="pro"] .bottom-nav a.active .icon,
body[data-page="profile"] .bottom-nav a.active .icon{
  color:#f2c028;
}
body[data-page="matches"] .bottom-nav-label,
body[data-page="match"] .bottom-nav-label,
body[data-page="pro"] .bottom-nav-label,
body[data-page="profile"] .bottom-nav-label{
  font-size:9px;
  text-transform:uppercase;
}

@media (max-width:380px){
  .screen{
    padding:10px 8px 94px;
  }
  .home-appbar-title{
    font-size:12px;
  }
  .ref-topbar{
    grid-template-columns:24px auto 1fr 24px;
  }
  .ref-topbar-match{
    grid-template-columns:24px auto 1fr 24px;
    row-gap:3px;
  }
  .ref-topbar-title{
    font-size:12px;
  }
  .ref-list-card-title strong{
    font-size:11px;
  }
  .ref-green-button{
    min-width:112px;
    font-size:10px;
  }
  .ref-match-team .team-logo{
    width:56px;
    height:56px;
  }
  .ref-match-meta{
    font-size:12px;
  }
  .ref-match-meta-line{
    gap:4px;
  }
  .ref-live-strip{
    padding:8px;
  }
  .ref-match-vs{
    font-size:44px;
  }
  .ref-insight-body{
    grid-template-columns:96px 1fr;
  }
  .ref-gauge{
    width:96px;
    height:96px;
  }
  .ref-profile-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .ref-pro-pricing{
    grid-template-columns:1fr;
  }
  .ref-detail-tabs span{
    padding:0 10px;
    font-size:10px;
  }
  .home-match-side{
    width:98px;
  }
  .home-match-art{
    width:88px;
    height:60px;
  }
  .home-match-action{
    min-width:88px;
    font-size:9px;
  }
  .page-title.compact{
    font-size:22px;
  }
  .board-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .event-market-grid{
    flex-wrap:wrap;
  }
  .event-market-grid .odds-tile{
    min-width:calc(50% - 4px);
  }
  .event-market-grid.single-line{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .event-market-grid.single-line .odds-tile{
    min-width:0;
  }
  .ref-stat-row{
    align-items:flex-start;
  }
  .ref-stat-team,
  .ref-stat-side{
    flex-basis:100%;
  }
  .ref-stat-side,
  .ref-stat-team.right{
    text-align:left;
    justify-content:flex-start;
  }
  .app-grid.two{
    grid-template-columns:1fr;
  }
}

/* IceEdge live football overflow fix: timeline / last events */
.list-row-stack{
  min-width:0;
}

.list-row-card{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
}

.list-row-card.timeline{
  grid-template-columns:minmax(0,1fr) auto;
}

.list-row-copy{
  min-width:0;
  display:grid;
  gap:4px;
}

.list-row-copy strong,
.list-row-copy span{
  display:block;
  min-width:0;
  max-width:100%;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.list-row-card.timeline .list-row-copy strong,
.list-row-card.timeline .list-row-copy span{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.timeline-side{
  min-width:44px;
  max-width:88px;
  text-align:right;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.slim-panel .list-row-card,
.slim-panel .list-row-copy{
  min-width:0;
}

@media (max-width: 640px){
  .list-row-card,
  .list-row-card.timeline{
    grid-template-columns:minmax(0,1fr);
  }

  .timeline-side{
    max-width:none;
    min-width:0;
    text-align:left;
    opacity:.82;
  }
}

.signal-pill.free{
  background:rgba(91,185,143,.14);
  border-color:rgba(91,185,143,.28);
  color:#b7efd3;
}

.signal-pill.dog{
  background:rgba(224,176,87,.16);
  border-color:rgba(224,176,87,.26);
  color:#ffd790;
}

.ref-filter-row{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:2px 0 6px;
  margin:12px 0 2px;
  scrollbar-width:none;
}

.ref-filter-row::-webkit-scrollbar{
  display:none;
}

.ref-filter-pill{
  flex:none;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.ref-filter-pill.active{
  color:var(--text);
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
}

.ref-list-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 10px;
}

.is-pro-card,
.event-card.is-pro{
  background:
    linear-gradient(180deg, rgba(255,210,111,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
  border-color:rgba(245,205,114,.22);
}

.pro-test-note{
  margin-top:10px;
  color:#e6c87c;
  font-size:11px;
  letter-spacing:.02em;
}

.pro-zone-panel{
  position:relative;
}

.analysis-panel{
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    linear-gradient(180deg, #132033 0%, #101926 100%);
  box-shadow:var(--shadow);
}

.analysis-panel.is-pro{
  border-color:rgba(245,205,114,.24);
  background:
    linear-gradient(180deg, rgba(236,196,104,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, #152234 0%, #101926 100%);
}

.analysis-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.analysis-head strong{
  font-size:18px;
  letter-spacing:-.03em;
}

.analysis-head span,
.analysis-status{
  color:var(--muted);
  font-size:12px;
}

.analysis-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.analysis-card{
  min-width:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.03);
  display:grid;
  gap:8px;
}

.analysis-card.wide{
  grid-column:1 / -1;
}

.analysis-card span{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.analysis-card strong{
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.03em;
}

.analysis-card p{
  margin:0;
  color:var(--accent-strong);
  font-size:13px;
  line-height:1.5;
}

.ref-match-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

@media (max-width: 640px){
  .analysis-grid{
    grid-template-columns:1fr;
  }
}