@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#FFFFFF;
  --surface:#FAFAFB;       /* barely-there cool off-white — cards read as flat panels on white, not a colored wash */
  --ink:#0A0E0C;           /* near-black with a faint green undertone — ties to brand without being flat #000 */
  --felt:#00553F;          /* primary brand green — reserved for actions and active/selected states */
  --lime:#6FA52E;          /* darkened lime for AA contrast on white — the "favored/positive" signal color */
  --lime-soft:#EEF6E2;     /* pale lime, used sparingly for a genuinely positive highlight, not decoration */
  --red:#C7423B;           /* risk / negative signal */
  --line:rgba(10,14,12,0.09);   /* hairline border — structure comes from thin lines, not color fills */
  --muted:rgba(10,14,12,0.56);
  --shadow-sm:0 1px 2px rgba(10,14,12,0.05), 0 1px 1px rgba(10,14,12,0.03);
  --shadow-md:0 4px 12px rgba(10,14,12,0.06), 0 2px 4px rgba(10,14,12,0.04);
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
/* The page itself should never be able to scroll sideways — only specific
   elements that opt into it on purpose (like the horizontally-scrolling
   league tabs) should. Without this, any element whose natural content
   width exceeds the viewport (even one meant to scroll internally) can
   leak that width to the page, letting the whole screen pan sideways and
   revealing blank space past the edge of fixed elements like the
   construction banner — exactly what was happening here. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;} /* stops Chrome for Android auto-boosting font sizes on its own reading-mode heuristics — without this, text can render larger than its actual CSS value on a real device even though it looks correct in any fixed-viewport test */
button{font-family:inherit; cursor:pointer;}
input, select{font-family:inherit;}

/* ---- Top bar ---- */
.topbar{
  background:var(--bg);
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  max-width:900px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:11px; cursor:pointer; min-width:0;}
.streak-badge{
  background:var(--lime-soft); color:var(--felt); font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; flex-shrink:0; white-space:nowrap; margin-left:2px;
}
.brand img{width:32px; height:32px; border-radius:8px; flex-shrink:0;}
.brand img.jiggle{animation:jiggle 0.6s ease-in-out;}
@keyframes jiggle{
  0%, 100%{transform:rotate(0deg);}
  20%{transform:rotate(-8deg);}
  40%{transform:rotate(7deg);}
  60%{transform:rotate(-5deg);}
  80%{transform:rotate(3deg);}
}
.tap-bounce{animation:tapBounce 0.4s ease-out;}
@keyframes tapBounce{
  0%{transform:scale(1);}
  35%{transform:scale(1.06);}
  100%{transform:scale(1);}
}
.brand-text{min-width:0;}
.brand h1{
  font-family:'Inter',sans-serif; font-weight:700; font-size:15.5px; margin:0; letter-spacing:-0.1px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:8px;
}
.brand .sub{
  font-family:'Inter',sans-serif; font-size:11px; color:var(--muted); margin:1px 0 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.nav-controls{display:flex; gap:8px; flex-shrink:0;}
.nav-btn{
  background:#FFFFFF; border:1px solid var(--line); color:var(--ink);
  width:32px; height:32px; border-radius:8px; font-size:13px; display:flex;
  align-items:center; justify-content:center; transition:border-color 0.15s, background 0.15s;
  text-decoration:none; box-sizing:border-box;
}
.nav-btn:hover{border-color:var(--felt); background:var(--surface);}
.nav-btn:active{transform:scale(0.94);}
.nav-btn.brand-pulse{animation:brandPulse 0.9s ease-in-out;}
@keyframes brandPulse{
  0%{background:#FFFFFF; border-color:var(--line); color:var(--ink);}
  35%{background:var(--felt); border-color:var(--felt); color:#FFFFFF;}
  70%{background:var(--lime); border-color:var(--lime); color:#0E1512;}
  100%{background:#FFFFFF; border-color:var(--line); color:var(--ink);}
}

.league-tabs{
  display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-bottom:2px;
  flex-basis:100%; min-width:0; max-width:100%;
}
.league-tabs::-webkit-scrollbar{display:none;}
.league-tabs button{flex-shrink:0;}

.sport-switcher{
  display:flex; gap:8px; padding:12px 20px; background:#FFFFFF; border-bottom:1px solid var(--line);
  max-width:900px; margin:0 auto;
}
.sport-switcher button{
  flex:1; background:#FFFFFF; border:1px solid var(--line); color:var(--ink); font-weight:600;
  font-size:14px; padding:10px; border-radius:9px; transition:border-color 0.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.sport-switcher button svg{width:17px; height:17px; flex-shrink:0;}
.sport-switcher button.active{background:var(--felt); border-color:var(--felt); color:#FFFFFF;}
.league-tabs button{
  background:#FFFFFF; border:1px solid var(--line); color:var(--ink);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:500; white-space:nowrap;
  transition:border-color 0.15s, background 0.15s;
}
.league-tabs button.active{background:var(--felt); border-color:var(--felt); color:#FFFFFF; font-weight:600;}
.more-leagues-dropdown{
  background:#FFFFFF; border:1px solid var(--line); color:var(--ink);
  padding:8px 10px; border-radius:8px; font-size:13px; font-weight:500; max-width:160px;
}

/* ---- Hero carousel (promotional slides) ---- */
.hero-carousel{
  max-width:900px; margin:0 auto; padding:16px 20px 4px; overflow:hidden;
}
.hero-track{display:flex; border-radius:14px; will-change:transform;}
.hero-slide{
  flex-shrink:0; height:132px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; padding:20px 22px; color:#FFFFFF; cursor:pointer; box-sizing:border-box;
}
.hero-slide-icon{font-size:30px; margin-bottom:6px;}
.hero-slide-title{font-family:'Inter',sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.3px;}
.hero-slide-sub{font-size:12.5px; opacity:0.9; margin-top:3px; max-width:85%;}

.hero-slide-football{background:linear-gradient(135deg, #00553F, #0A2E22);}
.hero-slide-basketball{background:linear-gradient(135deg, #B4530E, #6B330A);}
.hero-slide-tennis{background:linear-gradient(135deg, #6FA52E, #3D5C18);}
.hero-slide-fixtures{background:linear-gradient(135deg, #0E1512, #2B3B34);}
.hero-slide-community{background:linear-gradient(135deg, #00553F, #6FA52E);}
.hero-slide-games{background:linear-gradient(135deg, #7A1F1F, #2B0B0B);}
.hero-slide-hotpicks{background:linear-gradient(135deg, #C7423B, #7A1F1F);}

.hero-dots{display:flex; justify-content:center; gap:6px; padding:10px 0 2px;}
.hero-dot{width:6px; height:6px; border-radius:50%; background:var(--line); border:none; padding:0;}
.hero-dot.active{background:var(--felt); width:16px; border-radius:4px; transition:width 0.2s;}

/* ---- Bottom ad carousel — same mechanism as the hero carousel, smaller
   footprint since it sits at the bottom as a secondary slot, not the main
   banner. Currently one self-promo slide; built to take more once real
   bookmaker partner ads exist (see the comment in index.html). ---- */
.ad-carousel{padding:12px 0 16px; overflow:hidden;}
.ad-track{display:flex; border-radius:12px; will-change:transform;}
.ad-slide{
  flex-shrink:0; height:76px; display:flex; align-items:center; gap:12px;
  padding:0 18px; color:#FFFFFF; cursor:pointer; box-sizing:border-box;
}
.ad-slide-logo{width:34px; height:34px; border-radius:8px; flex-shrink:0;}
.ad-slide-icon{font-size:26px; flex-shrink:0;}
.ad-slide-title{font-family:'Inter',sans-serif; font-weight:800; font-size:14px; letter-spacing:-0.2px;}
.ad-slide-sub{font-size:11px; opacity:0.85; margin-top:2px;}
.ad-slide-selfpromo{background:linear-gradient(135deg, #00553F, #0A2E22);}
.ad-slide-whatsnew{background:linear-gradient(135deg, #6FA52E, #3D5C18);}
.ad-dots{display:flex; justify-content:center; gap:6px; padding:8px 0 0;}
.ad-dot{width:5px; height:5px; border-radius:50%; background:var(--line); border:none; padding:0;}
.ad-dot.active{background:var(--felt); width:14px; border-radius:4px; transition:width 0.2s;}

main{max-width:900px; margin:0 auto; padding:24px 20px 40px;}

/* ---- Mode switch ---- */
.mode-switch{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.mode-switch button{
  flex:1; min-width:140px; background:#FFFFFF; border:1px solid var(--line); color:var(--ink);
  padding:12px 10px; border-radius:9px; font-size:14px; font-weight:600; transition:border-color 0.15s;
}
.mode-switch button.active{background:var(--felt); border-color:var(--felt); color:#FFFFFF;}

.section-heading{
  font-family:'Inter',sans-serif; font-weight:800; font-size:16px; color:var(--ink);
  margin-bottom:4px; letter-spacing:-0.2px;
}
.international-break-banner{
  background:var(--lime-soft); border:1px solid var(--lime); border-radius:9px;
  padding:12px 14px; font-size:12.5px; color:var(--felt); line-height:1.5; margin-bottom:12px;
}
.news-list{display:flex; flex-direction:column; gap:10px;}
.news-card{
  display:block; background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); overflow:hidden; box-shadow:var(--shadow-sm);
}
.news-image{width:100%; height:150px; object-fit:cover; display:block; background:var(--surface);}
.news-card-body{padding:12px 14px;}
.news-sport-tag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--felt); background:var(--lime-soft); padding:3px 8px; border-radius:5px; margin-bottom:6px;
}
.news-title{font-weight:600; font-size:13.5px; line-height:1.4;}
.news-desc{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5;}

.profile-card{
  background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.profile-field-label{font-size:12px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.profile-input{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-size:14px; font-family:inherit; color:var(--ink); box-sizing:border-box;
}
.profile-chip-row{display:flex; flex-wrap:wrap; gap:7px;}
.profile-chip{
  background:#FFFFFF; border:1px solid var(--line); color:var(--muted);
  padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:500; transition:all 0.15s;
}
.profile-chip.active{background:var(--felt); border-color:var(--felt); color:#FFFFFF; font-weight:600;}
.profile-save-btn{
  width:100%; background:var(--felt); color:#FFFFFF; border:none; padding:12px;
  border-radius:9px; font-weight:700; font-size:14px; margin-bottom:16px;
}
.profile-save-btn:disabled{opacity:0.6;}
.profile-stats-empty{font-size:12.5px; color:var(--muted); line-height:1.5;}
.profile-stat-row{margin-bottom:14px;}
.profile-stat-big{font-size:34px; font-weight:800; color:var(--felt); line-height:1;}
.profile-stat-label{font-size:12px; color:var(--muted); margin-top:4px;}
.profile-tier-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.profile-tier-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; text-align:center;}
.profile-tier-label{font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px;}
.profile-tier-value{font-size:18px; font-weight:800; color:var(--ink); margin-top:3px;}
.profile-tier-count{font-size:10px; color:var(--muted); margin-top:2px;}
.profile-stats-note{font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:12px;}
.profile-recent-list{margin-top:14px; display:flex; flex-direction:column; gap:6px;}
.profile-recent-row{display:flex; align-items:center; gap:8px; font-size:12px; padding:7px 0; border-top:1px solid var(--line);}
.profile-recent-row:first-child{border-top:none;}
.profile-recent-icon{font-weight:800; width:16px; flex-shrink:0;}
.profile-recent-match{flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-recent-pick{font-weight:600; flex-shrink:0;}
.profile-recent-correct{color:var(--felt);}
.profile-recent-wrong{color:var(--red);}
.acca-analyzer{background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:14px 0; box-shadow:var(--shadow-sm);}
.acca-analyzer-title{font-weight:700; font-size:14px; color:var(--ink); margin-bottom:10px;}
.acca-analyzer-empty{font-size:12.5px; color:var(--muted);}
.acca-legs{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.acca-leg-row{display:flex; justify-content:space-between; font-size:12px; color:var(--ink); padding:6px 0; border-top:1px solid var(--line);}
.acca-leg-row:first-child{border-top:none;}
.acca-summary{display:flex; gap:12px; margin-bottom:10px;}
.acca-summary-item{flex:1; background:var(--surface); border-radius:8px; padding:12px; text-align:center;}
.acca-summary-value{font-size:22px; font-weight:800; color:var(--felt);}
.acca-summary-label{font-size:10.5px; color:var(--muted); margin-top:2px;}
.acca-caveat{font-size:10.5px; color:var(--muted); line-height:1.5;}
.backtest-filters{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.backtest-filters select{
  flex:1; min-width:100px; border:1px solid var(--line); border-radius:8px; padding:8px 9px;
  font-size:12.5px; font-family:inherit; color:var(--ink); background:#FFFFFF;
}
.backtest-empty{font-size:12px; color:var(--muted); margin-top:4px;}
.backtest-result{text-align:center; padding:10px 0;}
.backtest-result-value{font-size:30px; font-weight:800; color:var(--felt);}
.backtest-result-label{font-size:12px; color:var(--muted); margin-top:2px;}
.backtest-note{font-size:10.5px; color:var(--red); margin-top:6px;}
.hint{font-size:13px; color:var(--muted); margin:0 0 14px; line-height:1.5;}
.hidden{display:none;}

.paste-textarea{
  width:100%; min-height:130px; background:#FFFFFF; border:1px solid var(--line);
  border-radius:9px; padding:12px 14px; font-family:'Inter',sans-serif; font-size:13px;
  color:var(--ink); resize:vertical;
}

/* ---- Fixture list ---- */
.fixture-list{display:flex; flex-direction:column; gap:10px;}

.date-group{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#FFFFFF;}
.date-group + .date-group{margin-top:10px;}
.date-group-header{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--ink);
  padding:12px 14px; cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; user-select:none;
}
.date-group-header::-webkit-details-marker{display:none;}
.date-group-header::marker{content:"";}
.date-group-header::after{
  content:"▾"; font-size:12px; color:var(--muted); transition:transform 0.15s; margin-left:8px;
}
.date-group[open] > .date-group-header::after{transform:rotate(180deg);}
.date-count{font-weight:400; font-size:12px; color:var(--muted); margin-left:4px;}
.date-group-body{display:flex; flex-direction:column; gap:8px; padding:0 10px 10px;}
.date-group-body .fixture-row{background:var(--surface);}

.live-header{
  background:#FDEEEC; color:var(--red); border:1px solid var(--red); border-radius:9px;
  padding:10px 14px; margin-bottom:8px; cursor:default; font-weight:600;
}

.bulk-action-bar{
  position:sticky; bottom:88px; margin-top:14px; background:var(--felt); color:#FFFFFF;
  border-radius:12px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; box-shadow:0 8px 24px rgba(14,21,18,0.18); font-size:12.5px;
}
.bulk-buttons{display:flex; gap:8px;}
.bulk-buttons button{padding:9px 14px; border-radius:8px; font-size:12.5px; font-weight:700; border:none;}
.bulk-buttons .btn-quick{background:#FFFFFF; color:var(--felt);}
.bulk-buttons .btn-analyser{background:var(--lime); color:#0E1512;}
.bulk-action-bar.hidden{display:none;}
.bulk-action-bar.analyzing{animation:bulk-pulse 1.6s ease-in-out infinite;}
@keyframes bulk-pulse{0%,100%{box-shadow:0 8px 24px rgba(14,21,18,0.18);} 50%{box-shadow:0 8px 28px rgba(111,165,46,0.4);}}
.analyzing-pulse{animation:btn-pulse 1.6s ease-in-out infinite;}
@keyframes btn-pulse{0%,100%{opacity:1;} 50%{opacity:0.7;}}

/* ---- Floating overlays ---- */
.widget-back-btn{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:99999;
  background:var(--felt); color:#FFFFFF; border:none; padding:12px 20px; border-radius:10px;
  font-weight:700; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,0.25);
}

.construction-notice{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  max-width:900px; margin:0 auto;
  background:var(--felt); color:#FFFFFF; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transform:translateY(-120%); transition:transform 0.4s ease-out;
}
.construction-notice.show{transform:translateY(0);}
.construction-notice-text{font-size:13px; line-height:1.4;}
.construction-notice button{
  background:rgba(255,255,255,0.15); border:none; color:#FFFFFF; width:26px; height:26px;
  border-radius:7px; flex-shrink:0; font-size:14px;
}

.toast-msg{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#FFFFFF; padding:12px 18px; border-radius:12px;
  font-size:12.5px; font-weight:600; line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,0.25); opacity:0; pointer-events:none;
  transition:opacity 0.25s, transform 0.25s; z-index:1000;
  width:calc(100% - 32px); max-width:380px; text-align:center; white-space:normal;
}
.toast-msg.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---- Auth screens ---- */
.auth-screen{
  min-height:100vh; display:flex; flex-direction:column;
  background:linear-gradient(160deg, #00553F 0%, #0A7A5A 45%, #6FA52E 100%);
  color:#FFFFFF; padding:24px 24px 40px;
}
.auth-screen.hidden{display:none;}

.auth-topbar{display:flex; align-items:center; gap:10px; padding:8px 4px 0;}
.auth-topbar-logo{width:32px; height:32px; border-radius:8px;}
.auth-topbar-name{font-weight:700; font-size:16px; letter-spacing:-0.2px;}

.auth-hero{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:20px; max-width:480px; margin:0 auto; text-align:left; width:100%;
}
.auth-hero-headline{
  font-family:'Inter',sans-serif; font-weight:800; font-size:36px; line-height:1.15;
  color:#FFFFFF; margin:0; letter-spacing:-0.5px;
}
.auth-sub{font-size:15px; color:rgba(255,255,255,0.88); max-width:400px; line-height:1.55; margin:0;}
.auth-buttons{display:flex; flex-direction:row; gap:12px; width:100%; margin-top:6px;}
.auth-btn-primary{
  flex:1; background:#FFFFFF; color:#00553F; border:none; padding:15px; border-radius:10px;
  font-weight:700; font-size:15px;
}
.auth-btn-secondary{
  flex:1; background:rgba(255,255,255,0.12); color:#FFFFFF; border:1px solid rgba(255,255,255,0.4);
  padding:15px; border-radius:10px; font-weight:600; font-size:15px;
}

.auth-trust-strip{
  display:flex; justify-content:space-between; gap:16px; max-width:480px; margin:0 auto;
  width:100%; padding-top:28px; border-top:1px solid rgba(255,255,255,0.22);
}
.auth-trust-item{display:flex; flex-direction:column; gap:2px; flex:1;}
.auth-trust-number{font-size:26px; font-weight:800; color:#FFFFFF;}
.auth-trust-label{font-size:12px; color:rgba(255,255,255,0.78); line-height:1.4;}

/* The access-expired screen is an error state, not a marketing moment —
   it deliberately opts out of the hero treatment above and keeps the
   original simple, centered layout instead. */
.auth-screen-simple{
  background:var(--bg); color:var(--ink);
  align-items:center; justify-content:center; text-align:center; gap:14px;
}
.auth-screen-simple .auth-topbar, .auth-screen-simple .auth-trust-strip{display:none;}
.auth-logo{width:80px; height:80px; border-radius:18px; margin-bottom:6px;}
.auth-screen-simple h1{font-family:'Inter',sans-serif; font-weight:800; font-size:23px; color:var(--ink); margin:0; letter-spacing:-0.3px;}
.auth-screen-simple .auth-sub{color:var(--muted); max-width:320px; margin:0 auto;}
.auth-screen-simple .auth-buttons{flex-direction:column; max-width:280px; margin:10px auto 0;}
.auth-screen-simple .auth-btn-secondary{background:#FFFFFF; color:var(--ink); border:1px solid var(--line);}

/* ---- Trial banner ---- */
.trial-banner{
  background:var(--lime-soft); color:var(--felt); padding:10px 16px; display:flex;
  align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:600;
  flex-wrap:wrap; border-bottom:1px solid var(--line);
  max-width:900px; margin:0 auto;
}
.trial-banner.hidden{display:none;}
.trial-banner.urgent{background:var(--red); color:#FFFFFF;}
#trialBannerText{flex:1 1 200px; min-width:0;}
.trial-banner button{background:var(--felt); color:#FFFFFF; border:none; padding:7px 14px; border-radius:8px; font-weight:700; font-size:12px; flex-shrink:0;}
.trial-banner.urgent button{background:#062A20;}

/* ---- Trial UI locks ---- */
body.trial-mode .btn-analyser::after,
body.trial-mode .analyst-btn::after{content:" 🔒"; opacity:0.8;}
.league-tabs button.locked-league,
.mode-switch button.locked-mode{opacity:0.5;}
.league-tabs button.locked-league::after{content:" 🔒"; font-size:10px;}
.mode-switch button.locked-mode::after{content:" 🔒"; font-size:11px;}
.fixture-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:10px; padding:14px 16px;
}
.fixture-checkbox{display:flex; align-items:center; flex-shrink:0;}
.fixture-checkbox input{width:18px; height:18px; accent-color:var(--felt); cursor:pointer;}
.fixture-info{flex:1; min-width:0;}
.fixture-teams{font-family:'Inter',sans-serif; font-weight:600; font-size:15px; color:var(--ink);}
.fixture-meta{font-size:12px; color:var(--muted); margin-top:3px;}
.fixture-row.fixture-live{border-color:var(--red); background:#FDEEEC;}
.fixture-row.fixture-hot{border-color:#F5A623; background:#FFF9EF;}
.watch-star{
  flex-shrink:0; background:none; border:none; color:var(--line); padding:2px;
  transition:color 0.15s, transform 0.1s;
}
.watch-star:hover{color:var(--muted);}
.watch-star.active{color:#F0B429;}
.watch-star.active svg{fill:#F0B429;}
.watch-star:active{transform:scale(0.88);}
.hot-badge{margin-right:4px; color:var(--red); display:inline-flex; vertical-align:-2px;}
.live-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red);
  margin-right:6px; animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

.live-score-row{margin-top:8px;}
.live-score-value{
  font-family:'Inter',sans-serif; font-weight:800; font-size:22px; color:var(--red); letter-spacing:-0.3px;
}
.live-edge-track{
  margin-top:6px; height:7px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; overflow:hidden;
}
.live-edge-fill{background:var(--red); height:100%; transition:width 0.4s ease-out;}
.live-edge-caption{font-size:10px; color:var(--muted); margin-top:4px;}
.fixture-actions{display:flex; flex-direction:column; gap:6px; flex-shrink:0;}
.fixture-row button{
  background:var(--felt); border:none; color:#FFFFFF; font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:8px; flex-shrink:0; white-space:nowrap;
}
.fixture-row button.insights-btn{
  background:#FFFFFF; border:1px solid var(--felt); color:var(--felt); font-weight:600; font-size:11.5px;
}
.fixture-row.fixture-live button.insights-btn{border-color:var(--red); color:var(--red);}

.live-score-display{font-family:'Inter',sans-serif; font-weight:800; font-size:30px; color:var(--ink); margin-bottom:8px; letter-spacing:-0.5px;}
.live-minute{font-size:14px; color:var(--muted); font-weight:400;}
.ticket.live-snapshot .ticket-top{background:#FDEEEC;}
.ticket.live-snapshot .ticket-matchup{display:flex; align-items:center; gap:6px;}
.ticket.failed-leg .ticket-top{background:#FDEEEC; border-color:var(--red);}
.ticket.failed-leg{border:1px solid var(--red);}

.loading{font-size:12.5px; color:var(--muted);}
.branded-loading{
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); padding:8px 0;
}
.branded-loading-logo{
  width:28px; height:28px; border-radius:7px; flex-shrink:0;
  animation:brandedBounce 1.1s ease-in-out infinite;
}
@keyframes brandedBounce{
  0%, 100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-4px) rotate(-6deg);}
}
.brewing-banner{
  background:var(--lime-soft); border:1px solid var(--lime); border-radius:9px;
  padding:10px 14px; color:var(--felt); font-weight:600; margin-bottom:10px;
}

/* ---- Manual form ---- */
.manual-form{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.manual-form select, .manual-form input{
  background:#FFFFFF; border:1px solid var(--line); color:var(--ink);
  padding:11px 12px; border-radius:8px; font-size:14px;
}
.manual-form input{flex:1; min-width:140px;}
.vs-label{font-size:12px; color:var(--muted);}
.manual-buttons{display:flex; gap:8px; width:100%; margin-top:4px;}
.manual-form button{
  background:var(--felt); border:none; color:#FFFFFF; font-weight:700; padding:11px 20px; border-radius:8px;
}
.manual-buttons .btn-quick{background:#FFFFFF; color:var(--felt); border:1px solid var(--felt);}
.manual-buttons .btn-analyser{background:var(--felt); color:#FFFFFF; flex:1;}

/* ---- Results toolbar ---- */
.results-toolbar{
  max-width:900px; margin:26px auto 0; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.results-count{font-size:12px; color:var(--muted); font-weight:500;}
.toolbar-buttons{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.toolbar-buttons button{
  background:#FFFFFF; border:1px solid var(--line); color:var(--ink);
  padding:10px 14px; border-radius:8px; font-size:12.5px; font-weight:600; transition:border-color 0.15s;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toolbar-buttons button:hover{border-color:var(--felt);}

/* ---- Analyst section within a ticket ---- */
.analyst-btn{
  margin-top:10px; background:transparent; border:1px solid var(--felt);
  color:var(--felt); font-weight:700; font-size:11.5px; padding:8px 12px; border-radius:8px;
  letter-spacing:0.1px;
}
.analyst-box{
  margin-top:12px; padding:12px 14px; background:var(--lime-soft);
  border-left:3px solid var(--felt); border-radius:6px;
}
.analyst-box .label{font-size:10.5px; font-weight:600; color:var(--muted); margin-bottom:5px;}
.analyst-box .analysis-text{font-size:13px; line-height:1.55; margin-bottom:6px;}
.analyst-box .key-factor{font-size:12px; font-weight:600; color:var(--felt);}
.analyst-loading{font-size:11.5px; color:var(--muted); margin-top:10px;}

/* ---- Results (ticket cards) ---- */
.results{margin-top:30px; display:flex; flex-direction:column; gap:16px;}
.results-empty{font-size:13px; color:var(--muted); text-align:center; padding:30px 0;}

.value-finder{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0;}
.value-finder-title{font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--ink);}
.value-finder-caption{font-size:10.5px; color:var(--muted); margin-top:3px; margin-bottom:8px; line-height:1.4;}
.value-finder-empty{font-size:11.5px; color:var(--muted);}
.value-finder-row{padding:8px 0; border-top:1px solid var(--line);}
.value-finder-row:first-of-type{border-top:none;}
.value-finder-row-edge{background:var(--lime-soft); margin:0 -14px; padding-left:14px; padding-right:14px; border-radius:6px;}
.value-finder-label{font-weight:600; font-size:12.5px; color:var(--ink);}
.value-finder-cols{display:flex; gap:12px; font-size:11.5px; color:var(--muted); margin-top:2px;}
.value-finder-edge{font-weight:700; color:var(--felt);}
.value-finder-odds{font-size:10.5px; color:var(--muted); margin-top:2px;}
.odds-movement{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0;}
.odds-movement-title{font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--ink);}
.odds-movement-caption{font-size:10.5px; color:var(--muted); margin-top:3px; margin-bottom:8px; line-height:1.4;}
.odds-move-row{display:flex; justify-content:space-between; font-size:12px; color:var(--ink); padding:5px 0; border-top:1px solid var(--line);}
.odds-move-row:first-of-type{border-top:none;}
.odds-move-down{color:var(--felt); font-weight:700;}
.odds-move-up{color:var(--red); font-weight:700;}
.form-analytics{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0;}
.form-analytics-title{font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--ink);}
.form-analytics-caption{font-size:10.5px; color:var(--muted); margin-top:3px; margin-bottom:10px;}
.form-analytics-grid{display:flex; flex-direction:column; gap:10px;}
.form-side-label{font-size:12px; font-weight:600; color:var(--ink); margin-bottom:5px;}
.form-badges{display:flex; gap:4px;}
.form-badge{
  width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#FFFFFF;
}
.form-win{background:var(--felt);}
.form-draw{background:#9AA39D;}
.form-loss{background:var(--red);}
.form-avg{font-size:10.5px; color:var(--muted); margin-top:4px;}
.form-venue-split{display:flex; flex-direction:column; gap:3px; margin-top:6px; font-size:10px; color:var(--muted);}
.form-venue-split .form-badge{width:16px; height:16px; font-size:9px; margin-left:3px;}
.league-intel-card{background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.league-intel-title{font-weight:700; font-size:13px; color:var(--ink); margin-bottom:10px;}
.league-intel-avg{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.league-intel-avg-value{font-size:28px; font-weight:800; color:var(--felt);}
.league-intel-avg-label{font-size:11.5px; color:var(--muted); line-height:1.4;}
.league-intel-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.league-intel-col-title{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:var(--muted); margin-bottom:6px;}
.league-intel-row{display:flex; justify-content:space-between; font-size:12px; color:var(--ink); padding:4px 0;}
.onboarding-overlay{
  position:fixed; inset:0; background:rgba(10,14,12,0.55); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.onboarding-overlay.hidden{display:none;} /* two-class selector beats the single-class .onboarding-overlay rule regardless of source order, so this reliably wins over display:flex above */
.onboarding-card{
  background:#FFFFFF; border-radius:16px; padding:32px 24px 24px; max-width:340px; width:100%;
  text-align:center; position:relative; box-shadow:var(--shadow-md);
}
.onboarding-skip{
  position:absolute; top:12px; right:12px; background:none; border:none; color:var(--muted);
  font-size:16px; width:28px; height:28px; border-radius:6px;
}
.onboarding-icon{color:var(--felt); margin-bottom:16px;}
.onboarding-icon svg{width:44px; height:44px;}
.onboarding-title{font-weight:800; font-size:17px; color:var(--ink); margin-bottom:8px;}
.onboarding-body{font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:20px;}
.onboarding-dots{display:flex; justify-content:center; gap:6px; margin-bottom:20px;}
.onboarding-dot{width:6px; height:6px; border-radius:50%; background:var(--line);}
.onboarding-dot.active{background:var(--felt); width:16px; border-radius:3px;}
.onboarding-nav{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.onboarding-btn-secondary{background:none; border:none; color:var(--muted); font-weight:600; font-size:13px; padding:10px;}
.onboarding-btn-primary{background:var(--felt); color:#FFFFFF; border:none; padding:10px 24px; border-radius:8px; font-weight:700; font-size:13px; margin-left:auto;}
.alerts-badge{
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#FFFFFF;
  font-size:9px; font-weight:800; min-width:15px; height:15px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.alerts-card{max-width:380px; text-align:left;}
.alerts-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.alerts-header h3{font-size:17px; font-weight:800; margin:0; color:var(--ink);}
.alerts-clear-btn{background:none; border:none; color:var(--muted); font-size:12px; font-weight:600;}
.alerts-list{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto;}
.alerts-empty{font-size:13px; color:var(--muted); text-align:center; padding:20px 0;}
.alert-item{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; text-align:left; position:relative;}
.alert-item-match{font-weight:600; font-size:13px; color:var(--ink); padding-right:20px;}
.alert-item-detail{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.5;}
.alert-item-dismiss{position:absolute; top:10px; right:10px; background:none; border:none; color:var(--muted); font-size:13px;}
.watchlist-empty{font-size:12.5px; color:var(--muted);}
.watchlist-row{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px;}
.watchlist-row-match{font-weight:600; font-size:13px; color:var(--ink);}
.watchlist-row-detail{font-size:11.5px; color:var(--muted); margin-top:4px;}
.watchlist-remove-btn{background:none; border:none; color:var(--red); font-size:11.5px; font-weight:600; margin-top:6px; padding:0;}
.referral-code-row{display:flex; align-items:center; gap:10px; background:var(--lime-soft); border-radius:10px; padding:12px 14px; margin-bottom:10px;}
.referral-code{font-family:monospace; font-weight:700; font-size:18px; letter-spacing:2px; color:var(--felt); flex:1;}
.referral-copy-btn{background:var(--felt); color:#FFFFFF; border:none; padding:7px 14px; border-radius:7px; font-size:12px; font-weight:600;}
.referral-stat{font-size:13px; color:var(--ink); margin-bottom:10px;}
.referral-redeem-row{display:flex; flex-direction:column;}

/* ---- Hot Picks slip ---- */
.hotpicks-slip{
  background:linear-gradient(135deg, #C7423B, #7A1F1F); color:#FFFFFF;
  border-radius:14px; padding:18px 18px 14px;
}
.hotpicks-header{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; user-select:none;
}
.hotpicks-header::-webkit-details-marker{display:none;}
.hotpicks-header::marker{content:"";}
.hotpicks-header::after{
  content:"▾"; font-size:13px; opacity:0.8; margin-left:auto; flex-shrink:0; transition:transform 0.15s;
}
.hotpicks-slip[open] > .hotpicks-header::after{transform:rotate(180deg);}
.hotpicks-logo{width:36px; height:36px; border-radius:8px; flex-shrink:0;}
.hotpicks-title{font-family:'Inter',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.2px;}
.hotpicks-date{font-size:11.5px; opacity:0.85; margin-top:2px;}
.hotpicks-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 0; border-top:1px solid rgba(255,255,255,0.2);
}
.hotpicks-match{font-size:13px; font-weight:600; flex:1; min-width:0;}
.hotpicks-pick{font-size:12.5px; font-weight:700; flex-shrink:0; text-align:right;}
.hotpicks-pct{font-family:'Inter',sans-serif; font-weight:800; opacity:0.9;}
.hotpicks-footer{font-size:10.5px; opacity:0.75; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.2);}
.hotpicks-download-btn{
  width:100%; margin-top:12px; background:rgba(255,255,255,0.15); color:#FFFFFF; border:none;
  padding:10px; border-radius:9px; font-weight:700; font-size:12.5px;
}
.hotpicks-download-btn:hover, .hotpicks-download-btn:active{background:rgba(255,255,255,0.25);}

.hotpicks-btn-row{display:flex; gap:8px; margin-top:12px;}
.hotpicks-btn-row .hotpicks-download-btn{margin-top:0;}
.hotpicks-check-btn{
  flex:1; background:rgba(255,255,255,0.15); color:#FFFFFF; border:none;
  padding:10px; border-radius:9px; font-weight:700; font-size:12.5px;
}
.hotpicks-check-btn:hover, .hotpicks-check-btn:active{background:rgba(255,255,255,0.25);}
.hotpicks-check-btn:disabled{opacity:0.6;}

.hotpicks-row-correct{background:rgba(255,255,255,0.12); margin:0 -18px; padding-left:18px; padding-right:18px;}
.hotpicks-row-wrong{opacity:0.6;}
.hotpicks-row-note{font-size:10.5px; opacity:0.75; margin-top:-6px; margin-bottom:6px;}
.hotpicks-summary{
  font-size:12.5px; font-weight:700; text-align:center; padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.2); margin-top:4px;
}
.hotpicks-perfect{
  background:linear-gradient(135deg, #00553F, #0A2E22);
  box-shadow:0 0 0 2px var(--lime), 0 8px 24px rgba(111,165,46,0.35);
}

/* ---- Games ---- */
.game-switcher{display:flex; gap:6px; margin-bottom:14px;}
.game-switcher button{
  flex:1; background:#FFFFFF; border:1px solid var(--line); color:var(--ink); font-weight:600;
  font-size:13px; padding:9px; border-radius:9px; transition:border-color 0.15s;
}
.game-switcher button.active{background:var(--felt); border-color:var(--felt); color:#FFFFFF;}
.game-switcher button:disabled{opacity:0.4;}

.game-hud{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  font-size:13px; font-weight:500;
}
.game-hud button{background:var(--felt); color:#FFFFFF; border:none; padding:8px 16px; border-radius:8px; font-weight:700;}

#gameCanvas{
  display:block; margin:0 auto; background:#0E1512; border-radius:12px; max-width:100%; touch-action:none;
}

.game-touch-controls{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:14px;}
.gtc-row{display:flex; gap:16px;}
.gtc-btn{
  width:52px; height:52px; background:#FFFFFF; border:1px solid var(--line); border-radius:12px;
  font-size:20px; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:border-color 0.15s;
}
.gtc-btn:active{background:var(--felt); border-color:var(--felt); color:#FFFFFF;}

.rewards-panel{
  margin-top:20px; padding:18px; background:#FFFFFF; border:1px solid var(--line); border-radius:12px; text-align:center;
}
.rewards-title{font-size:11px; font-weight:600; letter-spacing:0.2px; color:var(--muted); margin-bottom:8px;}
.rewards-balance{font-family:'Inter',sans-serif; font-weight:800; font-size:34px; color:var(--felt); margin-bottom:10px; letter-spacing:-0.5px;}
.rewards-progress-track{background:var(--surface); border:1px solid var(--line); border-radius:999px; height:10px; overflow:hidden; margin-bottom:8px;}
.rewards-progress-fill{background:var(--lime); height:100%; width:0%; transition:width 0.4s ease-out;}
.rewards-note{font-size:11.5px; color:var(--muted); margin-bottom:12px;}
.rewards-redeem-btn{background:var(--felt); color:#FFFFFF; border:none; padding:10px 24px; border-radius:9px; font-weight:700;}
.rewards-redeem-btn:disabled{opacity:0.35;}

/* ---- Community predictions (per-fixture, checkbox multi-select) ---- */
.community-analysis-toggle{
  margin-top:8px; background:transparent; border:1px solid var(--felt); color:var(--felt);
  padding:7px 12px; border-radius:8px; font-weight:600; font-size:11.5px;
}
.community-analysis-toggle:hover{background:var(--lime-soft);}
.community-analysis-slot{
  margin-top:10px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.community-analysis-slot.hidden{display:none;}

.community-checklist{display:flex; flex-direction:column; gap:2px; margin-bottom:10px;}
.community-group-title{
  font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.3px;
  margin:12px 0 4px; padding-top:8px; border-top:1px solid var(--line);
}
.community-group-title:first-child{margin-top:0; padding-top:0; border-top:none;}
.community-section-title{font-size:11px; font-weight:700; color:var(--felt); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.2px;}
.community-check-row{
  display:flex; align-items:center; gap:9px; padding:7px 4px; font-size:13px; font-weight:500; color:var(--ink);
}
.community-check-row input{width:17px; height:17px; accent-color:var(--felt); flex-shrink:0;}

.community-submit-btn{
  width:100%; background:var(--felt); color:#FFFFFF; border:none; padding:10px; border-radius:8px;
  font-weight:700; font-size:13px; margin-bottom:12px;
}
.community-submit-btn:disabled{opacity:0.6;}

.community-view-btn{
  width:100%; background:transparent; border:1px solid var(--felt); color:var(--felt);
  padding:9px; border-radius:8px; font-weight:600; font-size:12.5px; margin-bottom:10px;
}
.community-view-btn:hover{background:var(--lime-soft);}

.community-dashboard{border-top:1px dashed var(--line); padding-top:10px;}
.community-dashboard-title{font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:8px;}
.community-result-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px;
}
.community-result-row:last-of-type{border-bottom:none;}
.community-result-label{
  color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1; min-width:0;
}
.community-result-tally{
  flex-shrink:0; font-family:'Inter',sans-serif; font-weight:800; font-size:14px; color:var(--felt);
  background:var(--lime-soft); border-radius:6px; padding:2px 9px; min-width:24px; text-align:center;
}
.community-vote-count{font-size:11px; color:var(--muted); margin-top:4px;}
.community-empty-state{
  font-size:12.5px; color:var(--felt); font-weight:600; background:var(--lime-soft);
  border:1px solid var(--lime); border-radius:8px; padding:10px 12px;
}
.community-overview-predict-btn{
  width:100%; font-size:12.5px; color:var(--felt); font-weight:700; background:var(--lime-soft);
  border:1px solid var(--lime); border-radius:8px; padding:10px 12px; margin-top:8px; text-align:left;
  transition:background 0.15s;
}
.community-overview-predict-btn:hover, .community-overview-predict-btn:active{background:var(--lime);}
.community-debug-text{font-size:10px; color:var(--red); font-family:monospace; word-break:break-all;}
.auto-advance-banner{
  margin-top:12px; padding:10px 12px; background:var(--felt); color:#FFFFFF; border-radius:9px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px;
}
.auto-advance-banner strong{font-family:'Inter',sans-serif; font-weight:800;}
.auto-advance-stay{
  background:rgba(255,255,255,0.18); color:#FFFFFF; border:none; padding:6px 12px;
  border-radius:7px; font-weight:700; font-size:11.5px; flex-shrink:0;
}

.btn-community{background:var(--lime); color:#0E1512;}

.ticket{
  background:#FFFFFF; color:var(--ink); border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
}
.ticket-summary{
  display:flex; justify-content:flex-start; align-items:center; gap:8px;
  padding:14px 16px; cursor:pointer; list-style:none; user-select:none;
}
.ticket-summary::-webkit-details-marker{display:none;}
.ticket-summary::marker{content:"";}
.ticket-summary::after{
  content:"▾"; font-size:12px; color:var(--muted); transition:transform 0.15s; margin-left:8px; flex-shrink:0;
}
.ticket[open] > .ticket-summary::after{transform:rotate(180deg);}
.ticket-ready-badge{
  font-size:10px; font-weight:700; color:var(--felt); background:var(--lime-soft);
  padding:5px 9px; border-radius:6px; white-space:nowrap; flex-shrink:0; margin-left:auto;
}
.ticket-remove-btn{
  background:transparent; border:none; color:var(--muted); font-size:15px; font-weight:700;
  width:22px; height:22px; flex-shrink:0; border-radius:6px; line-height:1;
}
.ticket-remove-btn:hover, .ticket-remove-btn:active{background:#FDEEEC; color:var(--red);}
.ticket-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 16px 12px; border-bottom:1px solid var(--line);
}
.ticket-tier-row{
  display:flex; justify-content:flex-end; align-items:center; gap:8px;
  padding:0 16px 12px; border-bottom:1px solid var(--line);
}
.ticket-matchup{font-family:'Inter',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.2px;}
.ticket-league{font-size:11.5px; color:var(--muted); margin-top:2px;}
.tier-pill{font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:6px; letter-spacing:0.2px;}
.odds-band-pill{font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:6px; letter-spacing:0.2px; background:var(--lime-soft); color:var(--felt); border:1px solid var(--line);}

.odds-target-grid{display:flex; flex-direction:column; gap:16px;}
.odds-target-card{background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);}
.odds-target-card-title{font-weight:700; font-size:15px; color:var(--ink); margin-bottom:10px;}
.odds-target-combined{font-size:32px; font-weight:800; color:var(--felt); margin-bottom:12px;}
.odds-target-combined-label{font-size:12px; font-weight:500; color:var(--muted);}
.odds-target-legs{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.odds-target-leg{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:8px 10px; background:var(--surface); border-radius:8px;}
.odds-target-leg-matchup{color:var(--ink); font-weight:500;}
.odds-target-leg-pick{color:var(--muted); text-align:right;}
.odds-target-leg-odds{font-weight:700; color:var(--felt);}
.odds-target-calc{background:var(--lime-soft); border-radius:10px; padding:12px 14px; margin-bottom:10px;}
.odds-target-calc label{font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.odds-target-currency{font-weight:700;}
.odds-target-stake-input{
  width:80px; border:1px solid var(--line); border-radius:6px; padding:6px 8px;
  font-size:13px; font-family:inherit; text-align:right;
}
.odds-target-payout{font-size:22px; font-weight:800; color:var(--felt); margin-top:6px;}
.odds-target-note{font-size:10.5px; color:var(--muted); line-height:1.5;}
.odds-target-empty{font-size:12.5px; color:var(--muted);}

/* ---- Track record panel ---- */
.track-record-panel{
  max-width:900px; margin:14px auto 0; padding:16px 18px; background:#FFFFFF;
  border:1px solid var(--line); border-radius:12px; margin-left:20px; margin-right:20px;
}
.tr-title{font-weight:700; font-size:15px; color:var(--ink); margin-bottom:10px;}
.tr-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:10px;}
.tr-stat{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 12px;}
.tr-stat .tr-label{font-size:11px; color:var(--muted);}
.tr-stat .tr-value{font-family:'Inter',sans-serif; font-weight:800; font-size:19px; color:var(--felt);}
.tr-note{font-size:11.5px; color:var(--muted); line-height:1.55; margin-top:6px;}

.combo-card{background:#FFFFFF; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.combo-card-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.combo-target{font-weight:800; font-size:15px; color:var(--ink);}
.combo-odds{font-size:12px; color:var(--muted); font-weight:600;}
.combo-leg{border-top:1px solid var(--line); padding:8px 0;}
.combo-leg-name{font-weight:600; font-size:13.5px;}
.combo-leg-odds{font-size:12px; color:var(--felt); font-weight:700;}
.combo-leg-matchup{font-size:11.5px; color:var(--muted); margin-top:2px;}
.combo-leg-news{font-size:11.5px; color:var(--ink); margin-top:4px; font-style:italic;}
.ticket-body{padding:14px 16px 16px;}
.stat-line{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.stat-name{font-size:11px; font-weight:600; color:var(--muted); width:36px;}
.bar-track{flex:1; height:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.bar-fill{height:100%;}
.bar-fill.home{background:var(--felt);}
.bar-fill.draw{background:var(--lime);}
.bar-fill.away{background:var(--red);}
.stat-pct{font-weight:700; font-size:12px; width:34px; text-align:right;}
.ticket-note{font-size:11px; color:var(--muted); margin-top:8px;}

/* ---- Extra markets section ---- */
.markets-section{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.markets-title{font-size:11px; font-weight:600; color:var(--muted); margin-bottom:8px; margin-top:14px;}
.markets-title:first-child{margin-top:0;}
.correct-score-row{display:flex; gap:8px; flex-wrap:wrap;}
.cs-chip{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  font-size:12.5px; font-weight:700; color:var(--felt);
}
.cs-chip em{font-style:normal; color:var(--muted); font-weight:400; margin-left:4px;}
.markets-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.market-chip{
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 10px;
}
.market-chip .m-label{font-size:11px; color:var(--muted); margin-bottom:2px;}
.market-chip .m-value{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--ink);}
.market-chip.unavailable .m-value{color:var(--muted); font-size:11px; font-weight:400;}
.market-chip.likely-yes{background:var(--lime-soft); border-color:var(--lime);}
.market-chip.likely-yes .m-value{color:var(--felt);}

/* ---- Footer ---- */
.site-footer{max-width:900px; margin:40px auto 0; padding:0 20px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; padding:28px 0 20px;}
.footer-brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; color:var(--ink); margin-bottom:8px;}
.footer-logo{width:26px; height:26px; border-radius:6px;}
.footer-about p{font-size:12.5px; color:var(--muted); line-height:1.6; margin:0;}
.footer-col-title{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink); margin-bottom:10px;}
.footer-col a{display:block; font-size:12.5px; color:var(--muted); text-decoration:none; margin-bottom:8px;}
.footer-col a:hover{color:var(--felt);}
.footer-legal-note{font-size:11px; color:var(--muted); line-height:1.5;}
.footer-disclaimer{
  font-size:11.5px; line-height:1.6; color:var(--muted); padding:16px 0; border-top:1px solid var(--line);
}
.footer-bottom{
  font-size:11.5px; color:var(--muted); padding:14px 0 24px; border-top:1px solid var(--line);
}
@media (max-width: 640px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:20px 16px;}
  .footer-about{grid-column:1 / -1;}
}

@media (max-width: 600px){
  .topbar{flex-direction:column; align-items:flex-start;}
  .manual-form{flex-direction:column; align-items:stretch;}
  .markets-grid{grid-template-columns:1fr;}
}

/* ---- Bottom navigation (PWA) ---- */
body{padding-bottom:76px;} /* keeps content clear of the fixed bottom nav */

/* Text-selection deterrent — NOT real security. Trivially bypassed via
   browser dev tools or by disabling JS, and doesn't affect screenshots at
   all (no web API can block those). Inputs/textareas are explicitly
   excluded so typing in the manual-entry form still works normally. */
body{-webkit-user-select:none; -moz-user-select:none; user-select:none;}
input, textarea{-webkit-user-select:text; -moz-user-select:text; user-select:text;}

.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  max-width:900px; margin:0 auto;
  background:#FFFFFF; border-top:1px solid var(--line);
  display:flex; justify-content:space-around; align-items:center;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav button, .bottom-nav a{
  background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:2px; color:var(--muted); flex:1; padding:4px 2px; border-radius:8px;
  text-decoration:none; box-sizing:border-box;
}
.bottom-nav button.bn-active{color:var(--felt);}
.bn-icon{display:flex; align-items:center; justify-content:center;}
.bn-icon svg{width:22px; height:22px; color:var(--muted); transition:color 0.15s;}
.bn-active .bn-icon svg{color:var(--felt);}

/* ---- App-mode differentiators — installed PWA only, never the website ----
   The website keeps the standard, professional structure everywhere else
   in this file. These rules are the deliberate exceptions: a livelier,
   more tactile feel reserved for people who've already installed the app. */
.is-app-mode button:active, .is-app-mode a:active{transform:scale(0.96); transition:transform 0.08s;}
.is-app-mode .bn-active .bn-icon{
  background:var(--lime-soft); border-radius:10px; padding:4px 10px; margin:-4px -10px;
}
.is-app-mode .fixture-row, .is-app-mode .ticket, .is-app-mode .profile-card, .is-app-mode .odds-target-card{
  border-radius:16px;
}
.custom-cal-icon{
  width:19px; height:19px; border-radius:3px; background:#FFFFFF; border:1.5px solid currentColor;
  display:flex; flex-direction:column; overflow:hidden; font-size:1px; line-height:1;
}
.custom-cal-icon-large{
  width:38px; height:38px; border-radius:6px; border-width:2px; margin-bottom:6px;
}
.custom-cal-icon-large .cal-top{height:11px;}
.custom-cal-icon-large .cal-day{font-size:19px; color:var(--ink);}
.custom-cal-icon .cal-top{height:5px; background:var(--red); flex-shrink:0;}
.custom-cal-icon .cal-day{
  flex:1; display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:10px; font-weight:800; color:var(--ink); line-height:1;
}
.bn-active .custom-cal-icon .cal-day{color:var(--felt);}
.bn-label{font-size:9px; font-weight:500; letter-spacing:0.1px;}

/* ---- Install banner (PWA) ---- */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:86px; z-index:950;
  background:var(--ink); color:#FFFFFF; border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25); font-size:12.5px;
}
.install-banner.hidden{display:none;}
.install-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.install-actions button{border:none; border-radius:8px; padding:7px 12px; font-weight:700; font-size:12px;}
#installBtn{background:var(--lime); color:#0E1512;}
#installDismiss{background:transparent; color:#FFFFFF; padding:4px 6px; font-size:14px;}


/* ---- Tipsy Intelligence Hub ---- */
.intelligence-panel{max-width:900px;margin:0 auto;padding-bottom:24px;}
.intel-brief{background:var(--felt);color:#fff;border-radius:12px;padding:16px;margin:12px 0;}
.intel-brief-title{font-weight:800;font-size:16px;margin-bottom:12px;}
.intel-brief-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.intel-brief-grid>div{background:rgba(255,255,255,.1);border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:2px;}
.intel-brief-grid strong{font-size:20px}.intel-brief-grid span{font-size:10.5px;opacity:.82}.intel-brief-note{font-size:10.5px;line-height:1.5;opacity:.8;margin-top:11px}
.intel-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.intel-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.intel-card-title{font-weight:800;font-size:15px}.intel-card-sub{font-size:11px;color:var(--muted);margin-top:2px}.intel-link-btn{border:0;background:var(--surface);color:var(--felt);font-size:11px;font-weight:700;padding:7px 10px;border-radius:7px}
.intel-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.intel-filters select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 8px;background:#fff;font:inherit;font-size:11.5px;color:var(--ink)}
.intel-results{display:flex;flex-direction:column}.intel-match-row{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding:10px 0}.intel-match-main{flex:1;min-width:0}.intel-match-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.intel-match-name span{font-weight:400;color:var(--muted);margin:0 3px}.intel-match-meta{font-size:10.5px;color:var(--muted);margin-top:2px}.intel-signal{font-size:9.5px;font-weight:800;border-radius:999px;padding:5px 7px;white-space:nowrap;background:var(--surface);color:var(--muted)}.intel-signal.strong{background:var(--lime-soft);color:var(--felt)}.intel-signal.live{background:#FDEEEC;color:var(--red)}.intel-signal.market{background:#EEF4F2;color:var(--felt)}.intel-signal.watch{background:#F6F2E8;color:#6B5A25}.intel-save-btn{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;padding:2px 4px}.intel-save-btn.saved{color:var(--felt)}
.intel-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.intel-shortlist,.intel-journal-entries{display:flex;flex-direction:column;gap:7px}.intel-shortlist-row,.intel-journal-entry{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.intel-shortlist-row div{min-width:0}.intel-shortlist-row strong{display:block;font-size:11.5px}.intel-shortlist-row span,.intel-journal-entry span{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}.intel-remove-btn{border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:700}.intel-journal-form{display:flex;flex-direction:column;gap:7px}.intel-journal-form input,.intel-journal-form textarea,.intel-journal-form select{font:inherit;font-size:11.5px;border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff;color:var(--ink)}.intel-journal-entry{align-items:flex-start;position:relative}.intel-journal-entry>div{min-width:0;flex:1}.intel-journal-entry strong{font-size:11.5px}.intel-journal-entry p{font-size:10.5px;line-height:1.45;margin:6px 0 0;color:var(--ink)}.intel-empty{font-size:11.5px;color:var(--muted);padding:10px 0}.intel-transparency{display:grid;grid-template-columns:1fr 1fr;gap:8px}.intel-transparency>div{background:var(--surface);border-radius:9px;padding:10px}.intel-transparency strong{display:block;font-size:11.5px;margin-bottom:3px}.intel-transparency span{font-size:10.5px;line-height:1.45;color:var(--muted)}
.hero-slide-intelligence{background:linear-gradient(135deg,#164F3F,#0D3429)}
@media(max-width:640px){.intel-brief-grid{grid-template-columns:repeat(2,1fr)}.intel-filters{grid-template-columns:1fr 1fr}.intel-grid-two{grid-template-columns:1fr}.intel-transparency{grid-template-columns:1fr}.intel-match-row{gap:6px}.intel-signal{font-size:8.5px;padding:4px 6px}.bottom-nav .bn-label{font-size:8px}}

/* ---- Hot Picks quick access ---- */
.fixtures-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.fixtures-heading-row .section-heading{margin-bottom:0;}
.hotpicks-access-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;
  border:1px solid var(--red);background:var(--red);color:#fff;border-radius:9px;
  padding:8px 11px;font-size:12px;font-weight:800;transition:transform .12s,opacity .12s;
}
.hotpicks-access-btn:hover{opacity:.92;}
.hotpicks-access-btn:active{transform:scale(.96);}
.hotpicks-top-btn{border-color:var(--red);color:var(--red);}
.hotpicks-top-btn:hover{background:#FFF3F2;border-color:var(--red);}
@media(max-width:560px){
  .fixtures-heading-row{align-items:flex-start;}
  .hotpicks-access-btn{padding:8px 9px;}
  .hotpicks-access-btn svg{width:14px;height:14px;}
}


/* =====================================================================
   STITCH REFRESH (7 Oct 2026)
   The new look from the Stitch designs, applied as one override layer so
   no markup or JavaScript had to change. Tokens first, then components.
   Shared by the website AND the installed app; app-mode extras at the end.
   NOTE: only the visual language is taken from the mockups. Their sample
   numbers (accuracy %, streaks, ROI, bookie codes, boosters) were
   placeholder copy and are deliberately NOT reproduced here.
   ===================================================================== */
:root{
  --bg:#F7FAF6;               /* Stitch "background" — a whisper of green, not stark white */
  --card:#FFFFFF;
  --surface:#F1F4F0;          /* inner panels / chips (surface-container-low) */
  --ink:#181C1A;
  --primary:#003C2B;          /* headings, key text */
  --felt:#00553F;             /* primary-container: actions + active states */
  --pitch:#062A20;            /* dark hero panels */
  --accent:#B8F474;           /* lime for use ON dark surfaces */
  --lime-text:#3E6A00;        /* lime for use on light surfaces (AA) */
  --lime-soft:#EEF6E2;
  --amber:#F5A623;
  --win:#10B981;
  --red:#C7423B;
  --line:rgba(10,14,12,0.09);
  --muted:rgba(10,14,12,0.56);
  --shadow-sm:0 1px 2px rgba(10,14,12,0.05);
  --shadow-md:0 8px 24px rgba(6,42,32,0.10);
  --shadow-dark:0 8px 24px rgba(6,42,32,0.18);
  --radius:16px;
}
html,body{background:var(--bg); letter-spacing:-0.005em;}
body{color:var(--ink);}
::selection{background:#B6F171; color:#0F2000;}

/* ---- Header: docked, hairline, brand-forward ---- */
.topbar{
  position:sticky; top:0; z-index:40; background:#FAFAFB; max-width:none; margin:0;
  padding:10px max(16px, calc((100vw - 900px)/2 + 16px));
  box-shadow:0 1px 2px rgba(10,14,12,0.05);
}
.brand img{width:36px; height:36px; border-radius:12px; box-shadow:var(--shadow-sm);}
.brand h1{font-size:18px; font-weight:800; letter-spacing:-0.3px; color:var(--primary);}
.brand .sub{font-size:10px; font-weight:600; letter-spacing:0.2px;}
.streak-badge{
  background:#B6F171; color:#416E00; font-size:10px; font-weight:700; letter-spacing:0.4px;
  padding:2px 7px; border:1px solid rgba(62,106,0,0.2);
}
.nav-btn{
  background:var(--card); border-radius:12px; color:var(--primary); width:34px; height:34px;
}
.nav-btn:hover{background:var(--surface); border-color:rgba(0,60,43,0.25);}

/* ---- Chips: sport pills + league track ---- */
.sport-switcher{
  background:var(--bg); border-bottom:none; padding:12px 16px 4px; gap:8px;
  overflow-x:auto; scrollbar-width:none;
}
.sport-switcher::-webkit-scrollbar{display:none;}
.sport-switcher button{
  flex:1 0 auto; border-radius:999px; font-size:12px; font-weight:700; padding:8px 16px;
  box-shadow:var(--shadow-sm); transition:transform .08s, background .15s;
}
.sport-switcher button.active{background:var(--felt); border-color:var(--felt); color:#fff;}
.sport-switcher button:active{transform:scale(0.96);}
.league-tabs{gap:6px; padding:2px 0 4px;}
.league-tabs button{
  border-radius:10px; padding:6px 12px; font-size:10px; font-weight:700; letter-spacing:0.3px;
  background:var(--card); transition:transform .08s, border-color .15s;
}
.league-tabs button:active{transform:scale(0.96);}
.league-tabs button.active{
  background:rgba(216,219,215,0.6); border:1px solid rgba(0,60,43,0.12); color:var(--primary); font-weight:800;
}
.more-leagues-dropdown{border-radius:10px; font-size:11px; font-weight:600;}

/* ---- Hero carousel: deep pitch gradients with a soft glow ---- */
.hero-carousel{padding:14px 16px 4px;}
.hero-track{border-radius:20px; box-shadow:var(--shadow-dark);}
.hero-slide{position:relative; overflow:hidden; height:128px; padding:18px 22px;}
.hero-slide::before{
  content:""; position:absolute; right:-40px; top:-48px; width:170px; height:170px;
  border-radius:50%; background:rgba(182,241,113,0.16); filter:blur(28px); pointer-events:none;
}
.hero-slide > *{position:relative;}
.hero-slide-icon{width:38px; height:38px; border-radius:12px; background:rgba(182,241,113,0.18); display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
.hero-slide-icon svg{width:22px; height:22px;}
.hero-slide-title{font-weight:800; font-size:17px; letter-spacing:-0.3px;}
.hero-slide-sub{font-size:12px; opacity:.86;}
.hero-slide-football{background:linear-gradient(135deg,#00553F 0%,#062A20 60%,#00281B 100%);}
.hero-slide-basketball{background:linear-gradient(135deg,#B4530E,#5F2C08);}
.hero-slide-tennis{background:linear-gradient(135deg,#3E6A00,#1F3600);}
.hero-slide-fixtures{background:linear-gradient(135deg,#062A20,#1C3B31);}
.hero-slide-community{background:linear-gradient(135deg,#00553F,#3E6A00);}
.hero-slide-games{background:linear-gradient(135deg,#6E0007,#2B0B0B);}
.hero-slide-hotpicks{background:linear-gradient(135deg,#00553F 0%,#062A20 100%);}
.hero-slide-combos{background:linear-gradient(135deg,#062A20,#00553F);}
.hero-slide-intelligence{background:linear-gradient(135deg,#0D3429,#164F3F);}
.hero-dot.active{background:var(--felt);}

/* ---- Main canvas + section titles ---- */
main{padding:16px 16px 40px;}
.section-heading{font-size:18px; font-weight:800; color:var(--primary); letter-spacing:-0.2px;}
.hint{font-size:13px;}

/* ---- Mode switch: segmented control ---- */
.mode-switch{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px; gap:4px; flex-wrap:nowrap;
}
.mode-switch button{
  min-width:0; border:none; background:transparent; border-radius:10px; padding:10px 8px;
  font-size:13px; font-weight:700; color:var(--muted);
}
.mode-switch button.active{background:var(--felt); color:#fff; box-shadow:var(--shadow-sm);}

/* ---- Cards: 16px radius, hairline, soft shadow ---- */
.fixture-row, .ticket, .profile-card, .odds-target-card, .acca-analyzer, .news-card,
.league-intel-card, .intel-card, .date-group{
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.fixture-row{padding:14px 14px; background:var(--card);}
.fixture-row:active{transform:scale(0.995);}
.fixture-teams{font-weight:800; font-size:15px; color:var(--ink); letter-spacing:-0.1px;}
.fixture-meta{font-size:11px; font-weight:500;}
.fixture-checkbox input{width:20px; height:20px; border-radius:6px;}
.fixture-row button{border-radius:10px; font-size:12px; font-weight:800; padding:8px 14px; transition:transform .08s;}
.fixture-row button:active{transform:scale(0.95);}
.fixture-row button.insights-btn{border-radius:10px; background:var(--lime-soft); border:1px solid rgba(62,106,0,0.25); color:var(--primary);}
.fixture-row.fixture-hot{background:#FFFBF2; border-color:rgba(245,166,35,0.55);}
.fixture-row.fixture-live{background:#FDF1EF;}
.date-group{background:var(--card);}
.date-group-header{font-weight:800; color:var(--primary); font-size:14px;}
.date-group-body .fixture-row{background:var(--surface); box-shadow:none;}
.international-break-banner{background:var(--lime-soft); border:1px solid rgba(62,106,0,0.25); border-radius:14px; color:var(--primary);}

/* Form badges: square-ish, Stitch palette */
.form-badge{border-radius:4px;}
.form-win{background:var(--primary);}
.form-draw{background:#9AA39D;}
.form-loss{background:var(--red);}

/* ---- Tickets (prediction results) ---- */
.ticket{background:var(--card);}
.ticket-matchup{font-weight:800; font-size:17px; color:var(--primary);}
.ticket-ready-badge{background:var(--lime-soft); color:var(--lime-text); border-radius:999px; padding:4px 9px;}
.tier-pill{border-radius:999px; font-weight:800; letter-spacing:0.3px; padding:4px 10px;}
.value-finder, .odds-movement, .form-analytics{background:var(--surface); border-radius:14px;}
.value-finder-row-edge{background:var(--lime-soft);}
.value-finder-edge{color:var(--lime-text);}

/* ---- Hot Picks: the dark "pitch" hero card ---- */
.hotpicks-slip{
  background:linear-gradient(135deg,#00553F 0%,#062A20 55%,#00281B 100%);
  border:1px solid rgba(170,241,211,0.2); border-radius:20px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-dark);
}
.hotpicks-slip::before{
  content:""; position:absolute; right:-48px; top:-48px; width:190px; height:190px; border-radius:50%;
  background:rgba(182,241,113,0.18); filter:blur(30px); pointer-events:none;
}
.hotpicks-slip > *{position:relative;}
.hotpicks-title{font-weight:800; font-size:18px; color:#fff;}
.hotpicks-date{color:#AAF1D3; opacity:1; font-weight:600;}
.hotpicks-row{border-top:1px solid rgba(255,255,255,0.12);}
.hotpicks-match{color:rgba(255,255,255,0.92); font-weight:600;}
.hotpicks-pick{color:#AAF1D3;}
.hotpicks-pct{color:var(--accent); opacity:1;}
.hotpicks-footer{border-top:1px solid rgba(255,255,255,0.12); opacity:.7;}
.hotpicks-download-btn, .hotpicks-check-btn{background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.2); border-radius:12px;}
.hotpicks-row-correct{background:rgba(182,241,113,0.14);}
.hotpicks-perfect{box-shadow:0 0 0 2px var(--accent), 0 8px 24px rgba(182,241,113,0.3);}
.hotpicks-access-btn{
  background:var(--pitch); border:1px solid rgba(182,241,113,0.35); color:var(--accent); border-radius:12px;
  padding:8px 12px; box-shadow:var(--shadow-sm); letter-spacing:0.2px;
}
.hotpicks-access-btn:hover{opacity:1; background:var(--felt);}
.hotpicks-top-btn{color:var(--primary)!important; border-color:rgba(199,66,59,0.35)!important;}

/* ---- Floating accumulator bar (bulk actions) ---- */
.bulk-action-bar{
  background:var(--pitch); border:1px solid rgba(170,241,211,0.2); border-radius:18px;
  padding:10px 10px 10px 16px; box-shadow:var(--shadow-dark); bottom:84px;
}
.bulk-buttons .btn-quick{background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:12px;}
.bulk-buttons .btn-analyser{background:var(--accent); color:#0F2000; border-radius:12px; font-weight:800;}

/* ---- Odds targets / combos ---- */
.odds-target-card{background:var(--card);}
.odds-target-combined{color:var(--primary); font-weight:800;}
.odds-target-leg{background:var(--surface); border-radius:12px;}
.odds-target-leg-odds{color:var(--primary);}
.odds-target-calc{background:var(--lime-soft); border:1px solid rgba(62,106,0,0.18); border-radius:14px;}
.odds-target-payout{color:var(--primary);}

/* ---- Profile / forms / chips ---- */
.profile-chip{border-radius:999px;}
.profile-save-btn{background:var(--felt); border-radius:14px; padding:13px; box-shadow:var(--shadow-sm);}
.profile-stat-big{color:var(--primary);}
.profile-input, .paste-textarea, .backtest-filters select, .intel-filters select{border-radius:12px; background:var(--card);}
.acca-summary-item, .profile-tier-card{background:var(--surface); border-radius:12px;}
.acca-summary-value{color:var(--primary);}

/* ---- Intelligence hub ---- */
.intel-brief{background:linear-gradient(135deg,#00553F,#062A20); border-radius:20px; box-shadow:var(--shadow-dark); position:relative; overflow:hidden;}
.intel-brief-grid>div{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); border-radius:12px;}
.intel-brief-grid strong{color:var(--accent);}
.intel-signal.strong{background:var(--lime-soft); color:var(--lime-text);}

/* ---- Bottom navigation: lifted bar, lime active pill ---- */
.bottom-nav{
  background:var(--card); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(6,42,32,0.08);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav button, .bottom-nav a{border-radius:12px; padding:5px 2px; transition:background .15s, transform .08s;}
.bottom-nav button:active, .bottom-nav a:active{transform:scale(0.95);}
.bottom-nav button.bn-active{background:var(--lime-soft); color:var(--primary);}
.bn-active .bn-icon svg{color:var(--primary);}
.bn-label{font-size:9px; font-weight:600; letter-spacing:0.2px;}
.bn-active .bn-label{font-weight:800;}
.is-app-mode .bn-active .bn-icon{background:none; padding:0; margin:0;}   /* the whole tab is the pill now */

/* ---- Overlays: banner, toast, install ---- */
.construction-notice{background:var(--felt); border-radius:0 0 14px 14px;}
.toast-msg{background:var(--pitch); border:1px solid rgba(170,241,211,0.18); border-radius:14px; box-shadow:var(--shadow-dark);}
.install-banner{background:var(--pitch); border:1px solid rgba(170,241,211,0.18); border-radius:16px;}
#installBtn{background:var(--accent); color:#0F2000;}
.trial-banner{border-radius:0;}
.trial-banner button{background:var(--felt);}

/* ---- Auth / landing: deeper pitch gradient ---- */
.auth-screen{background:linear-gradient(160deg,#062A20 0%,#00553F 48%,#3E6A00 100%);}
.auth-btn-primary{border-radius:14px; font-weight:800;}
.auth-btn-secondary{border-radius:14px;}
.auth-trust-number{color:var(--accent);}
.auth-screen-simple{background:var(--bg);}

/* ---- Footer ---- */
.footer-brand{color:var(--primary);}
.footer-col-title{color:var(--primary);}
.footer-col a:hover{color:var(--felt);}
.ad-track{border-radius:16px;}
.ad-slide-selfpromo{background:linear-gradient(135deg,#00553F,#062A20);}
.ad-slide-whatsnew{background:linear-gradient(135deg,#3E6A00,#1F3600);}

/* ---- Website (wider screens): same language, roomier canvas ---- */
@media (min-width:900px){
  body{background:linear-gradient(180deg,#F7FAF6 0%,#F1F4F0 100%);}
  main{padding-top:24px;}
  .hero-slide{height:150px; padding:24px 30px;}
  .hero-slide-title{font-size:21px;}
  .hero-slide-sub{font-size:13.5px;}
  .fixture-row:hover, .odds-target-card:hover, .intel-card:hover{box-shadow:var(--shadow-md); border-color:rgba(0,60,43,0.2);}
  .sport-switcher{max-width:900px; margin:0 auto; overflow:visible;}
}

/* ---- App mode: livelier, more tactile (installed PWA only) ---- */
.is-app-mode .topbar{background:rgba(250,250,251,0.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);}
.is-app-mode .fixture-row, .is-app-mode .ticket, .is-app-mode .profile-card, .is-app-mode .odds-target-card{border-radius:20px;}
.is-app-mode .hero-track{border-radius:24px;}
.is-app-mode .sport-switcher button.active{box-shadow:0 4px 12px rgba(0,85,63,0.28);}
@media (prefers-reduced-motion:reduce){
  .hero-track, .fixture-row, .bottom-nav button{transition:none!important;}
}

/* ---- Stitch refresh: follow-up fixes found in review ---- */
/* The favourite star was inheriting the solid green "action button" style
   from .fixture-row button — make it a quiet icon chip instead. */
.fixture-row .watch-star{
  background:var(--surface); border:1px solid var(--line); color:#9AA39D;
  width:36px; height:36px; padding:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
}
.fixture-row .watch-star:hover{color:var(--primary); background:var(--card);}
.fixture-row .watch-star.active{background:#FFF6DF; border-color:rgba(245,166,35,0.5); color:var(--amber);}
.fixture-row .watch-star.active svg{fill:var(--amber);}

/* Header: keep brand + actions on one row on phones (as in the design),
   league chips drop to their own row below. */
.topbar{flex-wrap:wrap; row-gap:8px;}
.brand{flex:1 1 auto;}
.nav-controls{flex:0 0 auto; gap:5px;}
@media (max-width:430px){
  .nav-btn{width:30px; height:30px; border-radius:10px;}
  .brand{gap:8px;}
  .brand img{width:32px; height:32px; border-radius:10px;}
  .brand h1{font-size:16px;}
  .brand .sub{display:none;}
}
@media (max-width:640px){
  .topbar{flex-direction:row; align-items:center; justify-content:space-between;}
  .nav-controls{align-self:center;}
}


/* =====================================================================
   STITCH REBUILD (7 Oct 2026) — the actual Stitch screens:
   header + status bar, sport pills, league chips, What's On Now,
   Hot Picks hero, fixture cards, Hot Picks page, 5-tab nav, More sheet.
   ===================================================================== */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal; font-size:20px; line-height:1;
  display:inline-block; text-transform:none; letter-spacing:normal; white-space:nowrap; direction:ltr;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  vertical-align:middle; user-select:none;
}
.no-scrollbar::-webkit-scrollbar{display:none;} .no-scrollbar{-ms-overflow-style:none; scrollbar-width:none;}

/* ---- Header ---- */
.topbar{display:block; padding:0; max-width:none; margin:0; background:#FAFAFB; border-bottom:1px solid var(--line); box-shadow:0 1px 2px rgba(10,14,12,.05); position:sticky; top:0; z-index:40;}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:900px; margin:0 auto; padding:8px 16px;}
.brand{display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;}
.brand-tile{width:38px; height:38px; border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;}
.brand-tile img{width:30px; height:30px; border-radius:8px; box-shadow:none;}
.brand-line{display:flex; align-items:center; gap:6px; min-width:0;}
.brand h1{display:block; font-size:18px; font-weight:800; letter-spacing:-0.3px; color:var(--primary); margin:0; overflow:visible;}
.brand .sub{display:block; font-size:9px; font-weight:600; color:var(--muted); letter-spacing:.2px; margin:0;}
.streak-badge{background:var(--lime-soft); color:var(--lime-text); border:1px solid rgba(62,106,0,.3); font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; letter-spacing:.3px;}
.streak-badge::before{content:"⚡ ";}
.nav-controls{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.nav-btn{width:36px; height:36px; border-radius:12px; border:none; background:transparent; color:var(--primary); display:flex; align-items:center; justify-content:center; padding:0; position:relative;}
.nav-btn:hover{background:var(--surface);}
.nav-btn .material-symbols-outlined{font-size:22px;}
.alerts-badge{position:absolute; top:3px; right:3px; min-width:15px; height:15px; border-radius:999px; background:var(--red); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #FAFAFB; padding:0 3px;}
.nav-avatar{width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,60,43,.2); background:var(--felt); color:#AAF1D3; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; padding:0;}
.status-bar{background:rgba(241,244,240,.7); border-top:1px solid var(--line);}
.status-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px max(16px, calc((100vw - 900px)/2 + 16px)); font-size:9px; font-weight:600; color:var(--muted);}
.status-left{display:flex; align-items:center; gap:6px;}
.status-dot{width:6px; height:6px; border-radius:50%; background:var(--win);}
.status-right{display:flex; align-items:center; gap:4px; color:var(--primary); font-weight:700;}
.status-right .material-symbols-outlined{font-size:13px; color:var(--lime-text); font-variation-settings:'FILL' 1;}

/* ---- Sport pills + league chips ---- */
.sport-switcher{background:var(--bg); border:none; padding:12px 16px 2px; gap:8px; max-width:900px; margin:0 auto; overflow-x:auto; scrollbar-width:none;}
.sport-switcher button{flex:0 0 auto; border-radius:999px; padding:7px 14px; font-size:11px; font-weight:700; gap:6px; box-shadow:var(--shadow-sm); background:var(--card);}
.sport-switcher button.active{background:var(--felt); color:#fff; border-color:var(--felt);}
.pill-count{font-size:9px; font-weight:800; padding:1px 6px; border-radius:999px; background:var(--surface); color:var(--muted);}
.sport-switcher button.active .pill-count{background:var(--lime-text); color:#fff;}
.chip-track{max-width:900px; margin:0 auto; padding:8px 16px 0;}
.chip-track:has(#leagueTabs[style*="display: none"]){display:none;}
.chip-track .league-tabs{flex-basis:auto; margin:0 -16px; padding:2px 16px 4px;}

/* ---- Main canvas ---- */
main{padding:12px 16px 40px;}
.mode-switch{display:none;}               /* Upcoming/Manual toggle: Manual now lives in More */
.input-modes .mode-panel#panel-fixtures{display:block;}

/* ---- What's On Now ---- */
.home-live{margin:6px 0 16px;}
.home-live.hidden{display:none;}
.home-live-title{display:flex; align-items:center; gap:7px;}
.home-live-title h2{margin:0; font-size:18px; font-weight:800; color:var(--primary); letter-spacing:-.2px;}
.live-pulse{width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite;}
.live-pulse.off{background:var(--badge-draw,#9AA39D); animation:none;}
.live-count{font-size:9px; font-weight:800; background:#FFDAD6; color:#93000A; padding:2px 7px; border-radius:999px;}
.home-live-track{display:flex; gap:10px; overflow-x:auto; margin:10px -16px 0; padding:2px 16px 6px; scroll-snap-type:x proximity;}
.hl-card{flex:0 0 auto; width:250px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow-sm); scroll-snap-align:start; display:flex; flex-direction:column; gap:6px;}
.hl-top{display:flex; justify-content:space-between; align-items:center; font-size:9px; font-weight:600; color:var(--muted);}
.hl-status{font-weight:800; color:var(--primary); background:var(--surface); padding:2px 7px; border-radius:6px; display:inline-flex; align-items:center; gap:4px;}
.hl-status.hl-live{background:#FFDAD6; color:#BA1A1A;}
.hl-team{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;}
.hl-badge{width:22px; height:22px; border-radius:50%; background:var(--surface); font-size:8px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--primary);}
.hl-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hl-score{font-weight:800; font-size:15px; color:var(--primary);}
.hl-btn{margin-top:4px; border:1px solid rgba(62,106,0,.25); background:var(--lime-soft); color:var(--primary); border-radius:10px; font-size:11px; font-weight:800; padding:7px; width:100%;}
.hl-btn:disabled{opacity:.6;}

/* ---- Hot Picks hero (home) ---- */
.hp-hero{position:relative; overflow:hidden; border-radius:20px; padding:16px; margin:0 0 18px; color:#fff; background:linear-gradient(135deg,#00553F 0%,#062A20 55%,#00281B 100%); border:1px solid rgba(170,241,211,.2); box-shadow:var(--shadow-dark);}
.hp-hero-glow{position:absolute; right:-48px; top:-48px; width:190px; height:190px; border-radius:50%; background:rgba(182,241,113,.2); filter:blur(30px); pointer-events:none;}
.hp-hero > *{position:relative;}
.hp-hero-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.hp-hero-icon{width:34px; height:34px; border-radius:11px; background:rgba(182,241,113,.18); color:#AAF1D3; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hp-hero-icon .material-symbols-outlined{font-size:20px; font-variation-settings:'FILL' 1;}
.hp-hero-titles{flex:1; min-width:0;}
.hp-hero-kicker{display:block; font-size:9px; font-weight:700; letter-spacing:.8px; color:rgba(170,241,211,.85);}
.hp-hero h3{margin:0; font-size:17px; font-weight:800; letter-spacing:-.2px; color:#fff;}
.hp-hero-pill{background:var(--lime-text); color:#fff; border:1px solid rgba(184,244,116,.4); font-size:10px; font-weight:800; padding:5px 10px; border-radius:999px; white-space:nowrap;}
.hp-hero-list{margin-bottom:12px;}
.hp-hero-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:12.5px;}
.hp-hero-row:last-of-type{border-bottom:none;}
.hp-hero-num{color:var(--accent); font-weight:800; font-size:11px;}
.hp-hero-match{flex:1; min-width:0; font-weight:600; color:rgba(255,255,255,.92); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hp-hero-tag{font-size:9px; font-weight:700; color:#AAF1D3; background:rgba(255,255,255,.1); padding:2px 7px; border-radius:6px; white-space:nowrap;}
.hp-hero-pct{font-weight:800; color:var(--accent); font-size:12px;}
.hp-hero-more{font-size:10.5px; color:rgba(255,255,255,.65); padding-top:6px;}
.hp-hero-empty{font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.82); margin:0;}
.hp-hero-cta{width:100%; background:var(--accent); color:#0F2000; border:none; border-radius:14px; padding:12px; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; gap:7px; box-shadow:var(--shadow-sm); text-transform:none; letter-spacing:0;}
.hp-hero-cta:active{transform:scale(.97);}

/* ---- Upcoming fixtures header + day filter ---- */
.fixtures-heading-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 2px;}
.fixtures-heading{display:flex; align-items:center; gap:6px; color:var(--primary);}
.fixtures-heading h2{margin:0;}
.day-filter{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:2px; gap:2px;}
.day-filter button{border:none; background:transparent; color:var(--muted); font-size:10px; font-weight:800; padding:5px 9px; border-radius:8px;}
.day-filter button.active{background:#fff; color:var(--primary); box-shadow:var(--shadow-sm);}
.hint{font-size:11.5px; margin:2px 0 12px;}

/* ---- Fixture cards ---- */
.fixture-list{gap:12px;}
.fx-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px;}
.fx-card.fx-hot{border-color:rgba(245,166,35,.5); background:#FFFCF5;}
.fx-card.fx-live-card{border-color:rgba(199,66,59,.45);}
.fx-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--line); font-size:10px; font-weight:600; color:var(--muted);}
.fx-league{font-weight:800; color:var(--primary); display:inline-flex; align-items:center; gap:3px; min-width:0;}
.fx-hot-icon{font-size:14px!important; color:var(--amber); font-variation-settings:'FILL' 1;}
.fx-time{display:inline-flex; align-items:center; gap:4px; font-weight:800; color:var(--primary); background:var(--surface); padding:3px 9px; border-radius:999px; white-space:nowrap;}
.fx-time .material-symbols-outlined{font-size:13px;}
.fx-time.is-live{background:#FFDAD6; color:#BA1A1A;}
.fx-teams{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;}
.fx-team{display:flex; align-items:center; gap:8px; min-width:0;}
.fx-team-away{flex-direction:row-reverse; text-align:right;}
.fx-badge{width:30px; height:30px; border-radius:50%; background:var(--lime-soft); border:1px solid rgba(62,106,0,.2); color:var(--primary); font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.fx-name{font-size:14px; font-weight:800; color:var(--ink); line-height:1.2; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.fx-vs{width:24px; height:24px; border-radius:50%; background:var(--surface); color:var(--muted); font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.fx-live-score{font-size:22px; font-weight:800; color:#BA1A1A; display:block; margin-bottom:4px;}
.fx-actions{display:flex; align-items:center; gap:8px;}
.fx-select{display:flex; align-items:center; gap:7px; flex:1; font-size:11.5px; font-weight:700; color:var(--primary); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px; cursor:pointer;}
.fx-select input{width:18px; height:18px; accent-color:var(--felt); margin:0;}
.fx-card .insights-btn{background:var(--felt); color:#fff; border:none; border-radius:12px; font-weight:800; font-size:12px; padding:9px 16px; box-shadow:var(--shadow-sm);}
.fx-card .watch-star{width:38px; height:38px; border-radius:12px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); color:#9AA39D;}
.fx-card .watch-star.active{background:#FFF6DF; border-color:rgba(245,166,35,.5); color:var(--amber);}
.fx-card .watch-star.active svg{fill:var(--amber);}
.date-group{border:none; background:transparent; box-shadow:none; overflow:visible;}
.date-group-header{padding:8px 2px; font-size:13px; font-weight:800; color:var(--primary);}
.date-group-body{padding:0; background:transparent; gap:12px;}
.date-group-body .fixture-row{background:var(--card);}

/* ---- Floating slip bar ---- */
.bulk-action-bar{position:sticky; bottom:78px; border-radius:18px; background:var(--pitch);}
.bulk-buttons .btn-quick{background:var(--accent); color:#0F2000; border:none; font-weight:800; border-radius:12px; padding:10px 14px;}

/* ---- Hot Picks page (slip) ---- */
.hotpicks-slip{background:none; border:none; box-shadow:none; padding:0; border-radius:0; overflow:visible; color:var(--ink);}
.hotpicks-slip::before{display:none;}
.hotpicks-header{display:block; position:relative; overflow:hidden; border-radius:20px; padding:16px; color:#fff; background:linear-gradient(135deg,#00553F 0%,#062A20 55%,#00281B 100%); border:1px solid rgba(170,241,211,.2); box-shadow:var(--shadow-dark);}
.hotpicks-header::after{display:none;}
.hotpicks-header > div:first-of-type{display:inline-block; vertical-align:middle;}
.hotpicks-header .hp-hero-icon{display:inline-flex; vertical-align:middle; margin-right:10px;}
.hotpicks-title{font-size:21px; font-weight:800; letter-spacing:-.3px; color:#fff; margin-top:2px;}
.hotpicks-date{color:#AAF1D3; font-size:11px; font-weight:600; margin-top:3px; opacity:1;}
.hp-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px;}
.hp-stats > div{background:rgba(0,60,43,.55); border:1px solid rgba(170,241,211,.14); border-radius:12px; padding:9px 10px;}
.hp-stats span{display:block; font-size:9px; font-weight:600; color:#8FD5B8;}
.hp-stats strong{display:block; font-size:18px; font-weight:800; color:var(--accent); margin-top:2px;}
.hp-cards{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.hp-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-sm);}
.hp-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.hp-chip{font-size:10px; font-weight:800; color:var(--primary); background:var(--surface); padding:3px 9px; border-radius:7px;}
.hp-card-match{font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.2px;}
.hp-card-match em{font-style:normal; font-weight:500; color:var(--muted); font-size:12px; margin:0 3px;}
.hp-card-pick{display:flex; justify-content:space-between; align-items:center; gap:8px; margin:9px 0 7px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 10px;}
.hp-pick-label{display:flex; align-items:center; gap:5px; font-size:13px; font-weight:800; color:var(--primary);}
.hp-pick-label .material-symbols-outlined{font-size:17px; color:var(--win); font-variation-settings:'FILL' 1;}
.hp-pick-pct{font-size:10px; font-weight:800; color:var(--lime-text); background:rgba(184,244,116,.35); padding:3px 8px; border-radius:7px; white-space:nowrap;}
.hp-bar{height:6px; background:var(--surface); border-radius:999px; overflow:hidden;}
.hp-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--lime-text)); border-radius:999px;}
.hp-result{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px;}
.hp-result .material-symbols-outlined{font-size:13px; font-variation-settings:'FILL' 1;}
.hp-won{background:#DDF7EA; color:#0B6B47;} .hp-lost{background:#FFDAD6; color:#93000A;} .hp-pending{background:var(--surface); color:var(--muted);}
.hp-card-correct{border-color:rgba(16,185,129,.5);} .hp-card-wrong{opacity:.65;}
.hotpicks-slip .hotpicks-footer{color:var(--muted); border-top:none; font-size:10.5px; margin-top:12px; padding-top:0; opacity:1;}
.hotpicks-slip .hotpicks-summary{color:var(--primary); border-top:1px solid var(--line);}
.hotpicks-slip .hotpicks-btn-row{margin-top:10px;}
.hotpicks-slip .hotpicks-check-btn{background:var(--card); color:var(--primary); border:1px solid var(--line); border-radius:14px; padding:12px; flex:0 0 auto; display:flex; align-items:center; gap:5px; width:auto;}
.hotpicks-slip .hotpicks-download-btn{background:var(--felt); color:#fff; border:none; border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:center; gap:6px; flex:1; margin:0; box-shadow:var(--shadow-dark);}
.hotpicks-slip .material-symbols-outlined{font-size:18px;}
.hotpicks-perfect .hotpicks-header{box-shadow:0 0 0 2px var(--accent), var(--shadow-dark);}

/* ---- Bottom nav: 5 tabs ---- */
.bottom-nav{padding:6px 8px calc(6px + env(safe-area-inset-bottom)); gap:2px;}
.bottom-nav button{flex:1; border-radius:14px; padding:6px 2px;}
.bn-icon{position:relative; width:auto; height:auto;}
.bn-icon .material-symbols-outlined{font-size:24px; color:var(--muted);}
.bottom-nav button.bn-active{background:var(--lime-soft);}
.bn-active .bn-icon .material-symbols-outlined{color:var(--primary); font-variation-settings:'FILL' 1;}
.bn-label{font-size:10px; font-weight:600; color:var(--muted);}
.bn-active .bn-label{color:var(--primary); font-weight:800;}
.bn-badge{position:absolute; top:-5px; right:-9px; min-width:16px; height:16px; border-radius:999px; background:var(--lime-text); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.bn-badge.hidden{display:none;}
.is-app-mode .bn-active .bn-icon{background:none; padding:0; margin:0;}

/* ---- More sheet ---- */
.more-sheet{position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center;}
.more-sheet.hidden{display:none;}
.more-sheet-backdrop{position:absolute; inset:0; background:rgba(6,42,32,.5);}
.more-sheet-card{position:relative; width:100%; max-width:900px; background:var(--card); border-radius:24px 24px 0 0; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(6,42,32,.25);}
.more-sheet-grip{width:40px; height:4px; background:var(--line); border-radius:999px; margin:0 auto 14px;}
.more-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.more-grid button, .more-grid a{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 6px; font-size:11px; font-weight:700; color:var(--primary); text-decoration:none; text-align:center;}
.more-grid .material-symbols-outlined{font-size:24px; color:var(--felt);}
.more-grid button:active, .more-grid a:active{transform:scale(.96);}

/* ---- Desktop: same language, roomier ---- */
@media (min-width:900px){
  .hl-card{width:290px;}
  .fx-card:hover, .hp-card:hover{box-shadow:var(--shadow-md); border-color:rgba(0,60,43,.2);}
  .more-sheet{align-items:center;} .more-sheet-card{border-radius:24px; max-width:520px; padding-bottom:20px;}
}

/* ---- fixes from review ---- */
.material-symbols-outlined{visibility:hidden;}
html.icons-ready .material-symbols-outlined{visibility:visible;}
.hp-hero > .hp-hero-glow{position:absolute;}
.home-live-track{scroll-padding-left:16px;}
.alerts-badge.hidden, .bn-badge.hidden, .pill-count.hidden, .hp-hero-pill.hidden, .live-count.hidden{display:none!important;}
.more-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.more-grid button, .more-grid a{min-width:0;}
.fx-league, .fx-time{white-space:nowrap;}
.fx-league{overflow:hidden; text-overflow:ellipsis;}

/* ---- Inline analysis (Analyse button) + explainer ---- */
.fx-result{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px;}
.fx-result.hidden{display:none;}
.fxr-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.fxr-title{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fxr-pick{font-size:12px; color:var(--muted);} .fxr-pick strong{color:var(--primary);}
.fxr-close{border:none; background:transparent; color:var(--muted); font-size:15px; width:26px; height:26px; border-radius:8px;}
.fxr-close:hover{background:var(--card);}
.fxr-loading{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--primary);}
.fxr-foot{margin-top:2px;}
.fxr-add{width:100%; border:1px solid var(--line); background:var(--card); color:var(--primary); font-weight:800; font-size:12px; padding:10px; border-radius:12px;}
.fxr-add:disabled{opacity:.6;}
.fx-result .value-finder, .fx-result .form-analytics, .fx-result .odds-movement{background:var(--card);}
.how-it-works{background:var(--lime-soft); border:1px solid rgba(62,106,0,.2); border-radius:16px; padding:12px 14px; margin:2px 0 14px;}
.hiw-title{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--primary); margin-bottom:8px;}
.hiw-title .material-symbols-outlined{font-size:17px; color:var(--lime-text);}
.hiw-row{display:flex; gap:9px; align-items:flex-start; margin-bottom:7px;}
.hiw-row p{margin:0; font-size:12px; line-height:1.5; color:var(--ink);}
.hiw-num{width:20px; height:20px; border-radius:50%; background:var(--felt); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}
.hiw-note{margin:2px 0 0; font-size:10.5px; color:var(--muted);}

/* Six-tab bar: keep every icon box a fixed 24px so tabs share width evenly
   (also stops long icon names from widening a tab if the icon font is slow). */
.bn-icon .material-symbols-outlined{width:24px; height:24px; overflow:hidden; display:inline-block; line-height:24px;}
.bottom-nav button{min-width:0;}
.bottom-nav .bn-label{font-size:10px; white-space:nowrap;}

.sport-soon{background:var(--lime-soft,#EEF6E2); border:1px solid rgba(62,106,0,.2); border-radius:20px; padding:28px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;}
.sport-soon .material-symbols-outlined{font-size:40px; color:var(--lime-text,#3E6A00);}
.sport-soon h3{margin:0; font-size:17px; color:var(--primary,#003C2B);}
.sport-soon p{margin:0; font-size:13px; line-height:1.5; max-width:320px; color:var(--muted,#55655c);}
.sport-soon-btns{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; justify-content:center;}
.sport-soon-btns button{border:none; background:var(--felt,#00553F); color:#fff; font-weight:800; font-size:13px; padding:11px 18px; border-radius:12px;}

/* ---- Waiting list ---- */
.waitlist-card{background:#fff; color:#0F1F18; border-radius:20px; padding:20px; margin:18px auto 0; max-width:420px; text-align:left; display:flex; flex-direction:column; gap:10px;}
.waitlist-card.hidden{display:none;}
.waitlist-card h2{margin:0; font-size:19px; color:#003C2B;} .waitlist-card p{margin:0 0 4px; font-size:13px; color:#55655c;}
.waitlist-card input:not([type=checkbox]), .waitlist-card select{width:100%; padding:12px; border:1px solid #D9E2DB; border-radius:12px; font-size:15px; background:#F7FAF6; color:#0F1F18;}
.wl-row{display:flex; gap:8px;} .wl-row input{min-width:0;}
.wl-label{font-size:12px; font-weight:800; color:#003C2B; margin-top:2px;}
.wl-checks{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px;} .wl-check{font-size:13px; display:flex; gap:8px; align-items:flex-start;}
.wl-hp{position:absolute!important; left:-9999px; height:0; opacity:0;}
.wl-msg{font-size:13px; min-height:0;} .wl-msg.err{color:#B3261E; font-weight:700;}
.wl-back{background:none; border:none; color:#55655c; font-size:13px; padding:6px;}
.waitlist-card .auth-btn-primary{background:#00553F; color:#fff; width:100%; padding:14px; border-radius:14px; border:none; font-weight:800; font-size:15px;}
.waitlist-card .auth-btn-primary:disabled{opacity:.6;}

/* ---- Free plan: locked areas + Premium explainer ---- */
.premium-locked{opacity:.55; filter:grayscale(1); position:relative;}
.bottom-nav .premium-locked .bn-icon::after{content:"lock"; font-family:'Material Symbols Outlined'; font-size:12px; position:absolute; top:-4px; right:-8px; color:#003C2B; background:#B8F474; border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; filter:none;}
#hpHero.premium-locked::after{content:"Premium"; position:absolute; top:12px; right:12px; background:#B8F474; color:#003C2B; font-weight:800; font-size:11px; padding:4px 10px; border-radius:999px;}
.wl-top{display:block; margin:10px auto 0; color:#fff!important; text-decoration:underline;}
.wl-top.hidden{display:none;}
.premium-modal{position:fixed; inset:0; z-index:99990; background:rgba(6,42,32,.72); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto;}
.pm-card{background:#fff; color:#0F1F18; width:100%; max-width:400px; border-radius:24px; padding:24px 20px 18px; position:relative; text-align:center;}
.pm-x{position:absolute; top:8px; right:10px; border:none; background:none; font-size:20px; width:36px; height:36px; color:#6b7c72;}
.pm-badge{width:52px; height:52px; border-radius:16px; background:#00553F; color:#B8F474; display:flex; align-items:center; justify-content:center; margin:0 auto 8px;}
.pm-card h2{margin:0 0 6px; font-size:20px; color:#003C2B;}
.pm-reason{margin:0 0 10px; font-size:13px; font-weight:700; color:#3E6A00;}
.pm-cols{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 14px; text-align:left;}
.pm-col{background:#F1F4F0; border-radius:14px; padding:10px 12px;} .pm-prem{background:#EEF6E2; border:1.5px solid #B8F474;}
.pm-col h3{margin:0 0 6px; font-size:12px; color:#003C2B;} .pm-col ul{margin:0; padding-left:16px; font-size:12px; line-height:1.55;} .pm-col li.no{color:#8a978f; text-decoration:line-through;}
.pm-go{width:100%; border:none; background:#00553F; color:#fff; font-weight:800; font-size:15px; padding:14px; border-radius:14px;}
.pm-later{border:none; background:none; color:#55655c; font-size:13px; padding:10px;}
.pm-small{font-size:10.5px; color:#8a978f;}

#leagueTabs button.hidden{display:none;}

.ad-slide-construction{background:linear-gradient(135deg,#00553F,#062A20);}
.more-grid button.hidden{display:none;}