/* ============================================================
   BETSINTEL — CLEAN BUILD
   Architecture:
   1. Variables
   2. Reset
   3. Base
   4. Layout
   5. Header
   6. Tip Links Slider
   7. Hero
   8. Sport Tabs
   9. Market Pills
   10. Banker Carousel
   11. Predictions
   12. Match Rows
   13. Load More
   14. Wins
   15. Newsletter
   16. Guide
   17. FAQ
   18. Footer
   19. Menu Drawer
   20. Utilities & Animations
   21. Light Theme
============================================================ */

/* ── 1. VARIABLES ── */
:root {
  /* Amber */
  --amber:       #F0921A;
  --amber-dark:  #C47210;
  --amber-dim:   rgba(240,146,26,0.08);
  --amber-border:rgba(240,146,26,0.30);

  /* Dark theme */
  --d-bg:      #080E1A;
  --d-surface: #0D1628;
  --d-card:    #101C30;
  --d-card2:   #0D1628;
  --d-deep:    #080E1A;
  --d-border:  rgba(255,255,255,0.07);
  --d-text:    #EEF2FF;
  --d-soft:    #C8D4E8;
  --d-muted:   #526A8A;

  /* Light theme (default) — navy + gold + white, matching the Betsintel logo */
  --l-bg:      #F7F8FB;
  --l-surface: #EEF1F8;
  --l-card:    #FFFFFF;
  --l-border:  rgba(10,22,40,0.10);
  --l-text:    #0A1628;
  --l-soft:    #16264A;
  --l-muted:   #5C6F92;

  /* Gold shine — reflective metallic gradient used for every filled gold surface (both themes) */
  --gold-fill: linear-gradient(120deg,
    #8B5A0F 0%, #F0921A 14%, #FFE9A8 28%, #F5C542 40%,
    #C47210 55%, #FFE9A8 72%, #F0921A 86%, #8B5A0F 100%);
  /* Bright solid gold — used for borders and icons, where a moving gradient can't render (hairlines/tiny glyphs) */
  --gold-border: #FFC94D;

  /* Status */
  --green:     #0D9E5C;
  --red:       #EF4444;
  --blue-tg:   #2A9ED8;

  /* Radius */
  --r:    12px;
  --r-sm: 8px;
  --r-lg: 16px;
  --r-pill: 50px;

  /* Font */
  --f-head: "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body: "Barlow",Arial,sans-serif;
}

/* ── 2. RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;outline:none}
input{font-family:inherit;outline:none;border:none}
img{max-width:100%;display:block}

/* ── 3. BASE — Dark (default) ── */
body{background:var(--d-bg);color:var(--d-text)}

/* ── 4. LAYOUT ── */
.page{max-width:430px;margin:0 auto;min-height:100vh;position:relative}
.page.light{background:var(--l-bg);color:var(--l-text)}

/* ── 5. HEADER ── */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;position:sticky;top:0;z-index:50;
}
.dark .hdr{background:var(--d-surface);border-bottom:1px solid var(--d-border)}
.light .hdr{background:#fff;border-bottom:2px solid var(--gold-border)}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:0;text-decoration:none}
.logo-img{display:block;width:auto}
.logo-img-header{height:34px}
.logo-img-footer{height:42px}
.logo-tips{font-family:var(--f-head);font-weight:900;font-size:30px;color:var(--amber);line-height:1}
.logo-racle{font-family:var(--f-head);font-weight:900;font-size:30px;line-height:1}
.dark  .logo-racle{color:#EEF2FF}
.light .logo-racle{color:#0A1628}
.logo-ball{width:46px;height:46px;flex-shrink:0;margin:0 -3px;vertical-align:middle;filter:drop-shadow(0 0 6px rgba(240,146,26,0.35))}

/* Menu button */
.menu-btn{display:flex;flex-direction:column;gap:5px;padding:6px;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;border-radius:2px;transition:all 0.2s}
.dark  .menu-btn span{background:var(--d-soft)}
.light .menu-btn span{background:var(--l-text)}

/* ── 6. TIP LINKS SLIDER ── */
.top-nav{border-bottom:1px solid;overflow:hidden}
.dark  .top-nav{background:var(--d-surface);border-color:var(--d-border)}
.light .top-nav{background:#fff;border-color:var(--l-border)}
.tl-track{display:flex;gap:0;width:max-content;animation:slideLeft 40s linear infinite}
.tl-track:hover{animation-play-state:paused}
.tl-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;white-space:nowrap;
  font-size:12px;font-weight:700;border-right:1px solid;
  transition:color 0.15s;
}
.dark  .tl-item{color:var(--d-muted);border-color:var(--d-border)}
.light .tl-item{color:var(--l-muted);border-color:var(--l-border)}
.tl-item.hot{color:var(--gold-border)}
.tl-item:hover{color:var(--gold-border)}
.tl-icon{font-size:13px}
@keyframes slideLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── 7. HERO ── */
.hero{
  text-align:center;
  padding:28px 20px 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 120%, rgba(196,114,16,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(240,146,26,0.10) 0%, transparent 60%),
    linear-gradient(180deg,#060D1A 0%,#0A1628 40%,#0D1E3A 100%);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 100% 30% at 50% 100%, rgba(240,146,26,0.08) 0%, transparent 100%);
  pointer-events:none;
}
.light .hero{
  background:
    radial-gradient(ellipse 80% 50% at 50% 120%, rgba(196,114,16,0.20) 0%, transparent 70%),
    linear-gradient(180deg,#060D1A 0%,#0A1628 40%,#0D1E3A 100%);
}
.hero-h1{
  font-family:var(--f-head);font-weight:900;font-size:28px;
  line-height:1.15;letter-spacing:-0.3px;color:#fff;margin-bottom:10px;
}
.hero-h1 em{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-style:normal}
.hero-sub{
  font-size:13px;line-height:1.55;max-width:300px;
  margin:0 auto 20px;color:rgba(238,242,255,0.75);
}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-tg{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:var(--r-pill);
  font-family:var(--f-head);font-size:14px;font-weight:800;
  background:#2A9ED8;color:#fff;letter-spacing:0.3px;
  transition:opacity 0.2s;
}
.btn-tg:hover{opacity:0.88}
.btn-banker{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:var(--r-pill);
  font-family:var(--f-head);font-size:14px;font-weight:800;
  background:var(--gold-fill);color:#0A1422;letter-spacing:0.3px;
  transition:opacity 0.2s;
}
.btn-banker:hover{opacity:0.88}

/* ── 8. SPORT TABS ── */
.sport-seg-wrap{padding:14px 16px 0}
.sport-seg-wrap .pred-search-wrap{margin-bottom:12px}
.sport-seg{
  display:flex;padding:3px;border-radius:var(--r-sm);gap:3px;
}
.dark  .sport-seg{
  background:var(--d-surface);
  border:1px solid rgba(240,146,26,0.35);
  border-bottom:none;
  box-shadow:0 0 12px rgba(240,146,26,0.10),0 0 1px rgba(240,146,26,0.20);
}
.light .sport-seg{
  background:#F0F3F8;
  border:1px solid rgba(240,146,26,0.25);
  border-bottom:none;
}
.seg-tab{
  flex:1;text-align:center;padding:9px;border-radius:calc(var(--r-sm) - 2px);
  font-family:var(--f-head);font-size:13px;font-weight:800;
  letter-spacing:0.3px;cursor:pointer;transition:all 0.18s;text-transform:uppercase;
}
.dark  .seg-tab{color:var(--d-muted)}
.light .seg-tab{color:var(--l-muted)}
.seg-tab.active{background:var(--gold-fill);color:#0A1422}

/* ── 9. MARKET PILLS ── */
.sport-body{
  border-top:none;
}
.dark  .sport-body{background:var(--d-surface);border:1px solid var(--d-border);border-top:none;border-radius:0 0 var(--r) var(--r);margin:0 16px 16px}
.light .sport-body{background:var(--l-surface);border:1px solid var(--l-border);border-top:none;border-radius:0 0 var(--r) var(--r);margin:0 16px 16px}
.sport-seg-wrap .sport-seg{border-radius:var(--r-sm) var(--r-sm) 0 0;margin-bottom:0}
.dark  .sport-seg-wrap .sport-seg{border-bottom:none}
.light .sport-seg-wrap .sport-seg{border-bottom:none}

.market-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px 6px;
}
.markets-title{
  font-family:var(--f-head);font-size:10px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;
}
.dark  .markets-title{color:var(--d-muted)}
.light .markets-title{color:var(--l-muted)}
.markets-lbl{
  font-size:10px;font-weight:700;color:var(--gold-border);
  background:var(--amber-dim);border:1px solid var(--amber-border);
  padding:3px 9px;border-radius:var(--r-pill);
}
.market-pills{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;
  padding:0 14px 12px;max-height:106px;overflow-y:auto;scrollbar-width:none;
  position:relative;
}
.market-pills::-webkit-scrollbar{display:none}
a.mpill,button.mpill{
  display:inline-flex;align-items:center;flex-shrink:0;
  font-size:10.5px;font-weight:700;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid;transition:all 0.18s;white-space:nowrap;
  font-family:var(--f-body);cursor:pointer;text-decoration:none;
}
.dark  .mpill{background:rgba(255,255,255,0.05);color:var(--d-text);border-color:rgba(255,255,255,0.12)}
.light .mpill{background:#EEF1F7;color:var(--l-text);border-color:rgba(13,23,42,0.15)}
.mpill.hot{color:var(--gold-border);border-color:var(--amber-border);background:var(--amber-dim);font-weight:800}
.mpill.active{background:var(--gold-fill) !important;color:#0A1422 !important;border-color:var(--gold-border) !important;font-weight:800}
.dark  .mpill:hover:not(.active){background:var(--amber-dim);color:var(--gold-border);border-color:var(--amber-border)}
.light .mpill:hover:not(.active){background:var(--amber-dim);color:var(--gold-border);border-color:var(--amber-border)}

/* ── 10. BANKER CAROUSEL ── */
.banker-wrap{padding:16px 16px 20px}
.banker-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;padding:0 2px;
}
.banker-heading{
  font-family:var(--f-head);font-weight:900;font-size:19px;line-height:1.2;
}
.dark  .banker-heading{color:var(--d-text)}
.light .banker-heading{color:var(--l-text)}
.banker-heading span{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.bk-counter{
  font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);
}
.dark  .bk-counter{color:var(--d-muted);background:var(--d-surface);border:1px solid var(--d-border)}
.light .bk-counter{color:var(--l-muted);background:var(--l-surface);border:1px solid var(--l-border)}

.bk-slider{overflow:hidden;border-radius:var(--r)}
.bk-track{display:flex;transition:transform 0.4s cubic-bezier(.4,0,.2,1)}
.banker-card{
  min-width:100%;padding:16px;border-radius:var(--r);
  cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;position:relative;overflow:hidden;
}
.dark  .banker-card{background:linear-gradient(135deg,#101C30 0%,#0D1628 100%);border:1px solid var(--d-border)}
.light .banker-card{background:linear-gradient(135deg,#1A2B4A 0%,#0F1E35 100%)}
.banker-card:hover{transform:translateY(-2px)}
.banker-card::before{
  content:'';position:absolute;right:-20px;bottom:-20px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,146,26,0.12) 0%,transparent 70%);
}
.bk-league{
  font-family:var(--f-head);font-size:9.5px;font-weight:700;
  letter-spacing:0.8px;text-transform:uppercase;color:var(--d-muted);
  margin-bottom:8px;display:block;
}
.bk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.bk-teams{
  font-family:var(--f-head);font-weight:900;font-size:22px;
  color:#fff;line-height:1.1;flex:1;min-width:0;
}
.bk-vs{font-size:13px;font-weight:500;opacity:0.5;margin:0 5px}
.light .bk-league{color:rgba(255,255,255,0.45)}
.bk-odds{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--amber-dark),var(--amber));
  color:#0A1422;font-family:var(--f-head);font-weight:900;
  font-size:20px;padding:6px 14px;border-radius:var(--r-sm);
  box-shadow:0 2px 10px rgba(240,146,26,0.35);flex-shrink:0;
}
.bk-tip{
  font-family:var(--f-head);font-size:14px;font-weight:900;
  letter-spacing:1px;text-transform:uppercase;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:block;margin:4px 0 10px;
}
.bk-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.bk-time{
  font-size:11px;font-weight:700;
}
.dark  .bk-time{color:var(--d-muted)}
.light .bk-time{color:rgba(255,255,255,0.5)}
.bk-conf-wrap{display:flex;align-items:center;gap:8px}
.bk-conf-arc{width:36px;height:36px;transform:rotate(-90deg)}
.bk-conf-label{font-size:11px;font-weight:700;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.bk-view-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--f-head);font-size:12px;font-weight:800;letter-spacing:0.5px;
  background:transparent;color:var(--gold-border);border:1.5px solid var(--amber-border);
  text-transform:uppercase;transition:all 0.18s;
}
.bk-view-btn:hover{background:var(--gold-fill);color:#0A1422;border-color:var(--gold-border)}

.bk-dots{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 0 4px}
.bk-dot{
  width:6px;height:6px;border-radius:3px;
  flex-shrink:0;transition:all 0.25s;cursor:pointer;
}
.dark  .bk-dot{background:rgba(255,255,255,0.2)}
.light .bk-dot{background:rgba(13,23,42,0.2)}
.bk-dot.active{width:20px;background:var(--gold-fill) !important}

/* ── 11. PREDICTIONS SECTION ── */
.pred-section{padding:14px 16px 0}
.pred-hdr{margin-bottom:12px}
.pred-title{
  font-family:var(--f-head);font-weight:900;font-size:24px;
  line-height:1.1;letter-spacing:-0.3px;
}
.dark  .pred-title{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.light .pred-title{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pred-title .pred-free{color:var(--d-text) !important}
.light .pred-title .pred-free{color:var(--l-text) !important}

/* Search */
.pred-search-wrap{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid;margin-bottom:12px;
}
.dark  .pred-search-wrap{background:var(--d-surface);border-color:var(--d-border)}
.light .pred-search-wrap{background:#F0F3F8;border-color:var(--l-border)}
.pred-search-ico{flex-shrink:0;opacity:0.4}
.pred-search-input{
  flex:1;width:100%;min-width:0;background:transparent;font-size:14px;font-weight:500;font-family:var(--f-head);
}
.dark  .pred-search-input{color:var(--d-text)}
.light .pred-search-input{color:var(--l-text)}
.dark  .pred-search-input::placeholder{color:var(--d-muted)}
.light .pred-search-input::placeholder{color:var(--l-muted)}

/* Date tabs */
.date-tabs{
  display:flex;padding:3px;gap:3px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;border-bottom:none;border:1px solid;
}
.dark  .date-tabs{background:var(--d-surface);border-color:var(--d-border)}
.light .date-tabs{background:var(--l-surface);border-color:var(--l-border)}
.dt-tab{
  flex:1;text-align:center;padding:9px;border-radius:calc(var(--r-sm) - 2px);
  font-family:var(--f-head);font-size:13px;font-weight:800;
  cursor:pointer;transition:all 0.18s;text-transform:uppercase;letter-spacing:0.3px;
}
.dark  .dt-tab{color:var(--d-muted)}
.light .dt-tab{color:var(--l-muted)}
.dt-tab.active{background:var(--gold-fill);color:#0A1422}
.dt-tab:not(.active):hover{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Table header */
.table-head{display:grid;grid-template-columns:58px 1fr 58px;padding:9px 14px}
.dark  .table-head{background:var(--d-deep);border:1px solid var(--d-border);border-top:none;border-bottom:2.5px solid var(--gold-border)}
.light .table-head{background:#0A1628;border:1px solid #0A1628;border-top:none;border-bottom:2.5px solid var(--gold-border)}
.th{
  font-family:var(--f-head);font-size:10px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.6);
}
.th.right{text-align:right}

/* Matches list */
.matches-list{border-radius:0 0 var(--r) var(--r);overflow:hidden}
.dark  .matches-list{border:1px solid var(--d-border);border-top:none}
.light .matches-list{border:1px solid var(--l-border);border-top:none;box-shadow:0 2px 12px rgba(13,23,42,0.06)}

/* ── 12. MATCH ROWS ── */
.match-row{
  display:grid;grid-template-columns:58px 1fr 58px;
  padding:11px 14px;border-bottom:1px solid;
  cursor:pointer;transition:background 0.15s;align-items:start;
}
.dark  .match-row{background:var(--d-card);border-bottom-color:var(--d-border)}
.light .match-row{background:#fff;border-bottom-color:var(--l-border)}
.match-row:last-of-type{border-bottom:none}
.dark  .match-row:hover{background:rgba(240,146,26,0.04)}
.light .match-row:hover{background:#FFFAF5}
.match-row:hover{border-left:3px solid var(--gold-border)}
.match-row.featured{border-left:3px solid var(--gold-border)}
.dark  .match-row.featured{background:linear-gradient(90deg,rgba(240,146,26,0.07) 0%,var(--d-card) 100%)}
.light .match-row.featured{background:linear-gradient(90deg,rgba(240,146,26,0.06) 0%,#fff 100%)}
.match-row:hover .share-tip{display:inline-flex}

/* Time column */
.row-time{display:flex;flex-direction:column;align-items:flex-start;padding-top:2px}
.t-time{font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1}
.dark  .t-time{color:var(--d-text)}
.light .t-time{color:var(--l-text)}

/* Body column */
.row-body{min-width:0;display:flex;flex-direction:column;gap:4px;padding:0 8px}
.row-league{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dark  .row-league{color:var(--d-muted)}
.light .row-league{color:var(--l-muted)}
.row-teams{font-size:14px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark  .row-teams{color:var(--d-text)}
.light .row-teams{color:var(--l-text)}
.vs-tag{font-size:10px;font-weight:600;opacity:0.4;margin:0 3px}
/* Tip ghost pill */
.tip{
  display:inline-flex;align-items:center;
  font-family:var(--f-head);font-size:12px;font-weight:900;
  letter-spacing:0.8px;text-transform:uppercase;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding:3px 9px;border-radius:4px;
  border:1.5px solid rgba(196,114,16,0.50);
  width:fit-content;margin-top:1px;
}
.light .tip{border-color:rgba(196,114,16,0.40)}
/* Stats button */
.share-tip{
  display:none;align-items:center;gap:4px;
  font-size:9.5px;font-weight:700;color:var(--blue-tg);
  background:rgba(42,158,216,0.10);padding:3px 8px;
  border-radius:var(--r-pill);border:1px solid rgba(42,158,216,0.2);
  transition:all 0.18s;margin-top:1px;
}
.share-tip:hover{background:var(--blue-tg);color:#fff}

/* Odds column — solid amber pill */
.row-odds{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:2px}
.odds-val{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:900;font-size:16px;line-height:1;
  color:#0A1422;
  background:linear-gradient(135deg,var(--amber-dark),var(--amber));
  padding:5px 10px;border-radius:5px;min-width:50px;
  box-shadow:0 2px 6px rgba(240,146,26,0.28);
}

/* Empty state */
.empty-state{
  display:none;flex-direction:column;align-items:center;
  justify-content:center;padding:30px 16px;gap:8px;text-align:center;
}
.dark  .empty-state{background:var(--d-card)}
.light .empty-state{background:#fff}
.empty-icon{font-size:32px}
.empty-title{font-family:var(--f-head);font-size:17px;font-weight:900;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dark  .empty-sub{font-size:12px;color:var(--d-muted)}
.light .empty-sub{font-size:12px;color:var(--l-muted)}
.bs-premium-gate__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ── Checkout / pricing page ── */
.checkout-hero{padding:20px 16px;border-radius:var(--r-lg);margin:0 16px 16px;text-align:center}
.dark  .checkout-hero{background:var(--d-card);border:1px solid var(--d-border)}
.light .checkout-hero{background:var(--l-card);border:1px solid var(--l-border)}
.checkout-hero__plan{font-family:var(--f-head);font-weight:900;font-size:24px;text-transform:uppercase;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.checkout-hero__plan span{-webkit-text-fill-color:initial;background:none;font-size:15px;text-transform:none;font-weight:700}
.dark  .checkout-hero__plan span{color:var(--d-muted)}
.light .checkout-hero__plan span{color:var(--l-muted)}
.checkout-hero__sub{font-size:13px;margin-top:8px}
.dark  .checkout-hero__sub{color:var(--d-muted)}
.light .checkout-hero__sub{color:var(--l-muted)}
.checkout-hero__link{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;text-decoration:underline}
.dark  .checkout-hero__link{color:var(--gold-border)}
.light .checkout-hero__link{color:var(--amber-dark)}

.currency-row{display:flex;justify-content:flex-end;padding:0 16px;margin-bottom:12px}
.currency-select{font-family:var(--f-body);font-size:13px;font-weight:600;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer}
.dark  .currency-select{background:var(--d-card);border:1px solid var(--d-border);color:var(--d-text)}
.light .currency-select{background:var(--l-card);border:1px solid var(--l-border);color:var(--l-text)}

.duration-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px;margin-bottom:24px}
@media (min-width:720px){.duration-grid{grid-template-columns:repeat(4,1fr)}}
.duration-card{border-radius:var(--r);padding:16px 12px;text-align:center}
.dark  .duration-card{background:var(--d-card);border:1px solid var(--d-border)}
.light .duration-card{background:var(--l-card);border:1px solid var(--l-border)}
.duration-card__label{font-family:var(--f-head);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.5px}
.dark  .duration-card__label{color:var(--d-muted)}
.light .duration-card__label{color:var(--l-muted)}
.duration-card__price{font-family:var(--f-head);font-weight:900;font-size:20px;margin-top:8px}
.duration-card__price span{font-size:12px;font-weight:700;margin-right:3px;vertical-align:middle}
.duration-card__pay{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.duration-card__pay-btn{display:block;text-align:center;padding:8px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:700;text-decoration:none}
.dark  .duration-card__pay-btn{background:var(--d-surface);border:1px solid var(--d-border);color:var(--d-text)}
.light .duration-card__pay-btn{background:var(--l-surface);border:1px solid var(--l-border);color:var(--l-text)}
.duration-card__pay-btn:hover{background:var(--gold-fill);color:#0A1422;border-color:transparent}

.pay-section{padding:0 16px;margin-bottom:8px}
.pay-section__hdr{font-family:var(--f-head);font-weight:900;font-size:16px;text-transform:uppercase;margin-bottom:12px}
.pay-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.pay-grid{grid-template-columns:repeat(2,1fr)}}
.pay-card{border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:12px}
.dark  .pay-card{background:var(--d-card);border:1px solid var(--d-border)}
.light .pay-card{background:var(--l-card);border:1px solid var(--l-border)}
.pay-card__icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-weight:900;font-size:16px}
.dark  .pay-card__icon{background:var(--d-surface);color:var(--gold-border)}
.light .pay-card__icon{background:var(--l-surface);color:var(--amber-dark)}
.pay-card__icon img{width:22px;height:22px;object-fit:contain}
.pay-card__body{flex:1;min-width:0}
.pay-card__label{font-weight:700;font-size:13px}
.pay-card__value{font-size:12px;word-break:break-all;margin-top:3px}
.dark  .pay-card__value{color:var(--d-muted)}
.light .pay-card__value{color:var(--l-muted)}
.pay-card__value a{text-decoration:underline}
.dark  .pay-card__value a{color:var(--gold-border)}
.light .pay-card__value a{color:var(--amber-dark)}
.pay-card__note{font-size:11px;opacity:0.75;margin-top:4px}

/* ── 13. LOAD MORE ── */
.load-more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 20px;cursor:pointer;
  border:1.5px solid var(--amber-border);border-top:1px solid;
  border-radius:0 0 var(--r) var(--r);
  font-family:var(--f-head);font-size:14px;font-weight:800;
  letter-spacing:0.5px;text-transform:uppercase;color:var(--gold-border);
  transition:all 0.2s;width:100%;
}
.dark  .load-more{background:var(--d-card2);border-top-color:var(--d-border)}
.light .load-more{background:#FDFAF5;border-top-color:var(--l-border)}
.load-more:hover{border-color:var(--gold-border);background:rgba(240,146,26,0.04)}
.load-more-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--amber-border);flex-shrink:0;transition:all 0.2s;
}
.load-more:hover .load-more-icon{background:var(--gold-fill);border-color:var(--gold-border);color:#0A1422}

/* ── 14. WINS SECTION ── */
.wins-section{padding:22px 0 0}
.wins-title-wrap{padding:0 16px;margin-bottom:10px}
.wins-title{font-family:var(--f-head);font-weight:900;font-size:22px;text-align:left}
.dark  .wins-title{color:var(--d-text)}
.light .wins-title{color:var(--l-text)}
.wins-title span{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.wins-head{
  display:grid;grid-template-columns:58px 1fr 58px;
  padding:9px 14px;margin:0 16px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.dark  .wins-head{background:var(--d-deep);border:1px solid var(--d-border);border-bottom:2.5px solid var(--gold-border)}
.light .wins-head{background:#0A1628;border:1px solid #0A1628;border-bottom:2.5px solid var(--gold-border)}
.wh{font-family:var(--f-head);font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.wh.right{text-align:right}

.wins-list{border-radius:0 0 var(--r) var(--r);overflow:hidden;margin:0 16px}
.dark  .wins-list{border:1px solid var(--d-border);border-top:none}
.light .wins-list{border:1px solid var(--l-border);border-top:none}

.win-row{
  display:grid;grid-template-columns:58px 1fr 58px;
  padding:11px 14px;border-bottom:1px solid;
  align-items:start;cursor:pointer;transition:background 0.15s;
}
.dark  .win-row{background:var(--d-card);border-bottom-color:var(--d-border)}
.light .win-row{background:#fff;border-bottom-color:var(--l-border)}
.win-row:last-child{border-bottom:none}
.dark  .win-row:hover{background:rgba(255,255,255,0.02)}
.light .win-row:hover{background:#F7F9FC}

.win-date{font-family:var(--f-head);font-weight:700;font-size:17px;line-height:1;padding-top:2px}
.dark  .win-date{color:var(--d-soft)}
.light .win-date{color:var(--l-soft)}

.win-body{min-width:0;padding:0 8px;display:flex;flex-direction:column;gap:4px}
.win-league{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark  .win-league{color:var(--d-muted)}
.light .win-league{color:var(--l-muted)}
.win-teams{font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark  .win-teams{color:var(--d-text)}
.light .win-teams{color:var(--l-text)}

/* Win score — green pill */
.win-score{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:900;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#0A7A47,var(--green));
  padding:5px 9px;border-radius:5px;min-width:48px;
  box-shadow:0 2px 6px rgba(13,158,92,0.3);
}

/* Wins view more — matches load more */
.wins-view-more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 20px;cursor:pointer;
  border:1.5px solid var(--amber-border);border-top:1px solid;
  border-radius:0 0 var(--r) var(--r);
  font-family:var(--f-head);font-size:14px;font-weight:800;
  letter-spacing:0.5px;text-transform:uppercase;color:var(--gold-border);
  transition:all 0.2s;width:100%;margin:0 16px;width:calc(100% - 32px);
}
.dark  .wins-view-more{background:var(--d-card2);border-top-color:var(--d-border)}
.light .wins-view-more{background:#FDFAF5;border-top-color:var(--l-border)}
.wins-view-more:hover{border-color:var(--gold-border);background:rgba(240,146,26,0.04)}
.wins-vm-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--amber-border);flex-shrink:0;transition:all 0.2s;
}
.wins-view-more:hover .wins-vm-icon{background:var(--gold-fill);border-color:var(--gold-border);color:#0A1422}

/* ── 15. NEWSLETTER ── */
.newsletter-strip{
  margin:22px 16px 0;border-radius:var(--r-lg);padding:18px 16px;
  border:1px solid var(--amber-border);overflow:hidden;
}
.dark  .newsletter-strip{background:linear-gradient(135deg,#101C30,var(--d-surface))}
.light .newsletter-strip{background:#fff}
.nl-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:6px}
.nl-title{font-family:var(--f-head);font-weight:900;font-size:20px;margin-bottom:6px}
.dark  .nl-title{color:var(--d-text)}
.light .nl-title{color:var(--l-text)}
.nl-sub{font-size:12px;line-height:1.5;margin-bottom:14px}
.dark  .nl-sub{color:var(--d-muted)}
.light .nl-sub{color:var(--l-muted)}
.nl-form{display:flex;gap:8px}
.nl-input{
  flex:1;padding:10px 12px;border-radius:var(--r-sm);
  font-size:12px;border:1px solid;
}
.dark  .nl-input{background:var(--d-bg);border-color:var(--d-border);color:var(--d-text)}
.light .nl-input{background:var(--l-bg);border-color:var(--l-border);color:var(--l-text)}
.nl-input::placeholder{opacity:0.5}
.nl-btn{
  padding:10px 16px;border-radius:var(--r-sm);
  font-family:var(--f-head);font-size:13px;font-weight:800;
  background:var(--gold-fill);color:#0A1422;letter-spacing:0.3px;
  transition:opacity 0.2s;white-space:nowrap;
}
.nl-btn:hover{opacity:0.88}

/* ── 16. GUIDE ── */
.guide-section{padding:22px 0 0}
.guide-card{
  border-radius:var(--r-lg);padding:20px 18px;
  border:1px solid var(--amber-border);margin:0 16px;overflow:hidden;
}
.dark  .guide-card{background:var(--d-card)}
.light .guide-card{background:#fff}
.guide-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:8px;display:block}
.guide-title{font-family:var(--f-head);font-weight:900;font-size:21px;line-height:1.2;margin-bottom:14px}
.dark  .guide-title{color:var(--d-text)}
.light .guide-title{color:var(--l-text)}
.guide-body{font-size:13px;line-height:1.75}
.dark  .guide-body{color:var(--d-soft)}
.light .guide-body{color:var(--l-soft)}
.guide-body p{margin-bottom:12px}
.guide-body p:last-child{margin-bottom:0}
.guide-h2{
  font-family:var(--f-head);font-weight:900;font-size:17px;
  background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin:16px 0 6px;line-height:1.2;
}
.guide-body strong{font-weight:700}
.dark  .guide-body strong{color:var(--d-text)}
.light .guide-body strong{color:var(--l-text)}
.guide-body a{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;border-bottom:1px solid var(--amber-border)}

/* ── 17. FAQ ── */
.faq-section{padding:22px 0 0}
.section-hdr{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:12px;padding:0 16px;
}
.section-title{font-family:var(--f-head);font-weight:900;font-size:22px}
.dark  .section-title{color:var(--d-text)}
.light .section-title{color:var(--l-text)}
.section-title span{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.see-more{font-size:12px;font-weight:700;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.see-more:hover{text-decoration:underline}

.faq-list{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--amber-border);margin:0 16px}
.dark  .faq-list{background:var(--d-card)}
.light .faq-list{background:#fff}
.faq-item{border-bottom:1px solid}
.dark  .faq-item{border-bottom-color:var(--d-border)}
.light .faq-item{border-bottom-color:var(--l-border)}
.faq-item:last-child{border-bottom:none}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;cursor:pointer;gap:10px;transition:background 0.15s;
}
.dark  .faq-q:hover{background:rgba(255,255,255,0.02)}
.light .faq-q:hover{background:rgba(13,23,42,0.02)}
.faq-q-text{font-size:13px;font-weight:700;flex:1}
.dark  .faq-q-text{color:var(--d-text)}
.light .faq-q-text{color:var(--l-text)}
.faq-icon{
  font-size:18px;font-weight:300;flex-shrink:0;
  transition:transform 0.2s;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{display:none;padding:0 16px 14px;font-size:12.5px;line-height:1.6}
.dark  .faq-a{color:var(--d-muted)}
.light .faq-a{color:var(--l-muted)}
.faq-item.open .faq-a{display:block}

/* ── 18. FOOTER ── */
.footer{margin-top:30px;padding:24px 16px 90px;border-top:1px solid}
.dark  .footer{border-top-color:var(--d-border)}
.light .footer{border-top-color:var(--l-border)}
.footer-logo{margin-bottom:12px}
.footer-copy{font-size:11px;line-height:1.6;margin-bottom:16px}
.dark  .footer-copy{color:var(--d-muted)}
.light .footer-copy{color:var(--l-muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
.footer-link{font-size:11px;font-weight:600}
.dark  .footer-link{color:var(--d-muted)}
.light .footer-link{color:var(--l-muted)}
.footer-link:hover{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.footer-legal{font-size:10px;margin-top:12px}
.dark  .footer-legal{color:var(--d-muted)}
.light .footer-legal{color:var(--l-muted)}

/* ── 19. BOTTOM NAV ── */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;display:flex;
  z-index:40;padding:8px 0 12px;
}
.dark  .bottom-nav{background:var(--d-surface);border-top:1px solid var(--d-border)}
.light .bottom-nav{background:#fff;border-top:2px solid var(--gold-border)}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;cursor:pointer;transition:all 0.15s;
}
.nav-icon{font-size:18px}
.nav-lbl{font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase}
.dark  .nav-item .nav-icon,.dark  .nav-item .nav-lbl{color:var(--d-muted)}
.light .nav-item .nav-icon,.light .nav-item .nav-lbl{color:var(--l-muted)}
.nav-item.active .nav-icon{color:var(--gold-border)}
.nav-item.active .nav-lbl{background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── 20. MENU DRAWER ── */
.menu-overlay{
  position:fixed;inset:0;z-index:90;opacity:0;pointer-events:none;
  transition:opacity 0.25s;background:rgba(0,0,0,0.6);
}
.menu-overlay.open{opacity:1;pointer-events:all}
.menu-drawer{
  position:fixed;top:0;right:-320px;width:300px;height:100%;
  z-index:100;overflow-y:auto;transition:right 0.3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.dark  .menu-drawer{background:var(--d-surface);border-left:1px solid var(--d-border)}
.light .menu-drawer{background:#fff;border-left:3px solid var(--gold-border)}
.menu-drawer.open{right:0}
.menu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid;
}
.dark  .menu-head{border-bottom-color:var(--d-border)}
.light .menu-head{border-bottom-color:var(--l-border)}
.menu-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:18px;cursor:pointer;transition:background 0.15s;
}
.dark  .menu-close{color:var(--d-soft)}
.light .menu-close{color:var(--l-text)}
.dark  .menu-close:hover{background:var(--d-card)}
.menu-section{padding:12px 16px;border-bottom:1px solid}
.dark  .menu-section{border-bottom-color:var(--d-border)}
.light .menu-section{border-bottom-color:var(--l-border)}
.menu-section-title{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.dark  .menu-section-title{color:var(--d-muted)}
.light .menu-section-title{color:var(--l-muted)}
.menu-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--r-sm);
  cursor:pointer;transition:background 0.15s;text-decoration:none;
}
.dark  .menu-item{color:var(--d-soft)}
.light .menu-item{color:var(--l-text)}
.dark  .menu-item:hover{background:var(--d-card)}
.light .menu-item:hover{background:var(--l-bg)}
.menu-item-icon{
  width:30px;height:30px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.menu-item-label{font-size:13px;font-weight:700}
.menu-btn-pair{display:flex;gap:8px;margin-bottom:4px}
.menu-btn-full{
  flex:1;padding:10px 12px;border-radius:var(--r-sm);
  font-family:var(--f-head);font-size:13px;font-weight:800;
  text-align:center;cursor:pointer;transition:all 0.18s;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mbtn-login{border:1.5px solid var(--amber-border);background:transparent;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mbtn-register{background:var(--gold-fill);color:#0A1422;border:none}
.mbtn-login:hover{background:var(--amber-dim)}
.mbtn-register:hover{opacity:0.88}

/* Theme toggle */
.theme-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.theme-label{font-size:13px;font-weight:600}
.dark  .theme-label{color:var(--d-soft)}
.light .theme-label{color:var(--l-text)}
.theme-btns{display:flex;gap:6px}
.theme-btn{
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;cursor:pointer;transition:all 0.18s;border:1px solid;
}
.dark  .theme-btn{color:var(--d-muted);border-color:var(--d-border)}
.light .theme-btn{color:var(--l-muted);border-color:var(--l-border)}
.theme-btn.active{background:var(--gold-fill);color:#0A1422;border-color:var(--gold-border)}

/* ── 21. BACK TO TOP ── */
.back-top{
  position:fixed;bottom:80px;left:16px;width:36px;height:36px;
  border-radius:50%;display:none;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;z-index:39;transition:all 0.2s;border:none;
}
.dark  .back-top{background:var(--d-card2);color:var(--gold-border);box-shadow:0 2px 12px rgba(0,0,0,0.4);border:1px solid var(--d-border)}
.light .back-top{background:#fff;color:var(--gold-border);box-shadow:0 2px 12px rgba(13,23,42,0.15)}
.back-top.visible{display:flex}
.back-top:hover{transform:translateY(-2px)}

/* ── 22. NEWS / ARTICLES ── */
.news-section{padding:22px 0 0}
.news-card{
  display:flex;gap:12px;padding:13px;border-radius:var(--r);
  margin:0 16px 8px;cursor:pointer;transition:all 0.18s;
  border:1px solid;text-decoration:none;
}
.dark  .news-card{background:var(--d-card);border-color:var(--d-border)}
.light .news-card{background:#fff;border-color:var(--l-border);box-shadow:0 1px 6px rgba(13,23,42,0.06)}
.dark  .news-card:hover{border-color:var(--amber-border)}
.news-accent{width:3px;border-radius:2px;background:var(--gold-fill);flex-shrink:0}
.news-body{flex:1;min-width:0}
.news-cat{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:4px}
.news-title{font-size:13px;font-weight:700;line-height:1.35;margin-bottom:5px}
.dark  .news-title{color:var(--d-text)}
.light .news-title{color:var(--l-text)}
.news-meta{font-size:10px}
.dark  .news-meta{color:var(--d-muted)}
.light .news-meta{color:var(--l-muted)}
.news-read{font-weight:700;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── 23. COOKIE BANNER ── */
.cookie-banner{
  position:fixed;bottom:72px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:400px;z-index:80;
  padding:14px 16px;border-radius:var(--r);
  display:flex;align-items:center;gap:12px;
}
.dark  .cookie-banner{background:var(--d-surface);border:1px solid var(--d-border);box-shadow:0 4px 20px rgba(0,0,0,0.4)}
.light .cookie-banner{background:#fff;border:1px solid var(--l-border);box-shadow:0 4px 20px rgba(13,23,42,0.15)}
.cookie-text{font-size:11px;flex:1;line-height:1.5}
.dark  .cookie-text{color:var(--d-muted)}
.light .cookie-text{color:var(--l-muted)}
.cookie-btn{
  padding:7px 14px;border-radius:var(--r-pill);
  font-size:11px;font-weight:800;cursor:pointer;
  background:var(--gold-fill);color:#0A1422;white-space:nowrap;transition:opacity 0.2s;
}
.cookie-btn:hover{opacity:0.88}

/* ── 24. ANIMATIONS ── */
@keyframes slideLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── 25. LIGHT THEME OVERRIDES ── */
.light{background:var(--l-bg)}
.light .top-nav{background:#0A1628;border-color:rgba(255,255,255,0.08)}
.light .tl-item{color:rgba(255,255,255,0.55);border-color:rgba(255,255,255,0.08)}
/* ── 26. HEADER ACTIONS — THEME TOGGLE + JOIN (mobile & desktop) ── */
.hdr-actions{display:flex;align-items:center;gap:8px}
.theme-icon-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform 0.18s;
}
.theme-icon-btn:hover{transform:scale(1.06)}
.dark  .theme-icon-btn{color:var(--gold-border);border-color:var(--d-border);background:var(--d-surface)}
.light .theme-icon-btn{color:var(--gold-border);border-color:var(--l-border);background:#fff}
.dark  .theme-icon-btn .icon-sun{display:none}
.light .theme-icon-btn .icon-moon{display:none}
.hdr-join-btn{
  background:var(--gold-fill);color:#0A1422;font-family:var(--f-head);
  font-weight:800;font-size:12px;letter-spacing:.3px;padding:7px 14px;
  border-radius:var(--r-pill);white-space:nowrap;transition:opacity 0.18s;
}
.hdr-join-btn:hover{opacity:0.88}

/* ── 27. ICONS & FLAG BADGES (replace emoji) ── */
.ico{flex-shrink:0;vertical-align:-2px}
.flag-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1px 5px;border-radius:4px;font-size:9px;font-weight:800;
  letter-spacing:.3px;background:var(--amber-dim);color:var(--gold-border);
  margin-right:4px;vertical-align:1px;
}
.nav-icon .ico{width:18px;height:18px}
.menu-item-icon .ico{width:16px;height:16px}
.tl-icon .ico{width:13px;height:13px}

/* ── 28. RESPONSIVE — TABLET & DESKTOP ── */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg{max-width:100%}
@media (min-width:640px){
  .page{max-width:640px}
  .hero-h1{font-size:clamp(24px,4vw,32px)}
}
@media (min-width:900px){
  .page{max-width:920px;box-shadow:0 0 60px rgba(0,0,0,0.25)}
  .hdr,.hero,.sport-seg-wrap,.sport-body,.banker-wrap,.pred-section,
  .wins-section,.newsletter,.guide-section,.faq-section,footer,.news-section{
    padding-left:28px;padding-right:28px;
  }
  .hero-h1{font-size:clamp(28px,3.4vw,40px)}
  .market-pills{flex-wrap:wrap}
  /* .tl-track intentionally NOT frozen/wrapped here (reference did this,
     but requested behavior is continuous auto-scroll on desktop too --
     see the SITE ADDITIONS block below, which no longer fights a
     `transform:none !important` since it's removed at the source here). */
  .bottom-nav{display:none}
  .menu-btn{display:none}
  .hdr-actions .hdr-join-btn{display:inline-flex}
}
@media (min-width:1200px){
  .page{max-width:1180px;margin:0 auto}
  .banker-top,.pred-hdr{padding-left:0;padding-right:0}
}
@media (min-width:900px) and (max-width:1199px){
  .page{border-left:1px solid;border-right:1px solid}
  .dark  .page{border-color:var(--d-border)}
  .light .page{border-color:var(--l-border)}
}

/* ── 29. ANIMATED SEARCH PLACEHOLDER ── */
.pred-search-input{caret-color:var(--amber)}

/* ══════════════════════════════════════════════════════════════
   BETSINTEL SITE ADDITIONS — deliberate deviations from the
   reference mockup, requested during review. Kept separate from
   the verbatim reference copy above so the two are easy to diff.
   ══════════════════════════════════════════════════════════════ */

/* 1) Hero buttons: Banker of the Day stacked below Telegram Tips,
   not side-by-side (reference had them in a row). */
.hero-btns{flex-direction:column;align-items:center}
.btn-tg,.btn-banker{width:100%;max-width:280px;justify-content:center}

/* 1) Desktop layout: the reference caps .page at 1180px even on very
   wide screens, which reads as dead space either side on a normal
   1440px display. Widen the cap substantially so typical desktop
   widths are filled, and reflow the single-column lists into a grid
   so content doesn't just stretch into empty-looking wide rows. */
@media (min-width:1200px){
  .page{max-width:1600px}
}
@media (min-width:1440px){
  .page{max-width:1800px}
}
@media (min-width:1200px){
  .matches-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .matches-list .match-row{border-bottom:1px solid}
  .dark  .matches-list .match-row{border-bottom-color:var(--d-border)}
  .light .matches-list .match-row{border-bottom-color:var(--l-border)}
  .matches-list .match-row.featured{grid-column:1/-1}
  .matches-list .empty-state{grid-column:1/-1}
  .wins-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .news-section{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
  .news-section .section-hdr{grid-column:1/-1}
  .market-pills{flex-wrap:wrap}
}

/* 3) Search autocomplete dropdown (results from /search-suggest.php). */
.pred-search-wrap{position:relative}
.pred-search-results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  border-radius:var(--r);overflow:hidden;z-index:120;
  max-height:340px;overflow-y:auto;display:none;
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
}
.pred-search-results.open{display:block}
.dark  .pred-search-results{background:var(--d-card);border:1px solid var(--d-border)}
.light .pred-search-results{background:var(--l-card);border:1px solid var(--l-border)}
.pred-search-result{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  text-decoration:none;font-size:13px;
}
.dark  .pred-search-result{color:var(--d-text);border-bottom:1px solid var(--d-border)}
.light .pred-search-result{color:var(--l-text);border-bottom:1px solid var(--l-border)}
.pred-search-result:last-child{border-bottom:none}
.dark  .pred-search-result:hover{background:var(--d-surface)}
.light .pred-search-result:hover{background:var(--l-surface)}
.pred-search-result__type{
  flex:0 0 auto;font-family:var(--f-head);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.3px;color:var(--gold-border);
  border:1px solid var(--amber-border);border-radius:var(--r-pill);padding:2px 8px;
}
.pred-search-empty{padding:14px;text-align:center;font-size:13px}
.dark  .pred-search-empty{color:var(--d-muted)}
.light .pred-search-empty{color:var(--l-muted)}

/* 2) Hero buttons: Telegram Tips smaller than Banker of the Day. */
.btn-tg{width:100%;max-width:220px;justify-content:center}
.btn-banker{width:100%;max-width:300px;justify-content:center}

/* 3) Quick-link strip: keep it a single scrolling row (with real
   auto-scroll) at every width instead of the reference's desktop
   behavior of freezing the animation and wrapping into a static grid --
   the frozen/wrapped desktop state was the "not scrolling" bug. */
@media (min-width:900px){
  .tl-track{animation:slideLeft 40s linear infinite;flex-wrap:nowrap;transform:none}
  .top-nav{overflow-x:auto;overflow-y:hidden}
}

/* 4) New quick-tab bar (Basketball / Predictions / Banker Tips / Join /
   Login / Pricing / News) shown above the tl-track strip on desktop;
   folded into the hamburger drawer on mobile instead of shown inline. */
.quick-tabs{
  display:none;
}
@media (min-width:900px){
  .quick-tabs{
    display:flex;gap:4px;padding:8px 28px;overflow-x:auto;border-bottom:1px solid;
  }
  .dark  .quick-tabs{background:var(--d-deep);border-color:var(--d-border)}
  .light .quick-tabs{background:#fff;border-color:var(--l-border)}
}
.quick-tab{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.4px;
  padding:6px 14px;border-radius:var(--r-pill);text-decoration:none;
  transition:background 0.15s,color 0.15s;
}
.dark  .quick-tab{color:var(--d-soft)}
.light .quick-tab{color:var(--l-soft)}
.dark  .quick-tab:hover{background:var(--d-surface);color:var(--d-text)}
.light .quick-tab:hover{background:var(--l-surface);color:var(--l-text)}

/* Mobile: same 7 links folded into the hamburger drawer instead. */
.menu-quick-tabs{display:block}
@media (min-width:900px){
  .menu-quick-tabs{display:none}
}

/* 5 & 6) Header action buttons: Create Account (with "Free Account" tag)
   and Pricing (with an animated "VIP Tips" tag) sitting side by side. */
.hdr-actions{flex-wrap:nowrap}
.hdr-btn-group{display:flex;align-items:center;gap:6px}
.hdr-btn-tagged{position:relative;display:inline-flex}
.hdr-tag{
  position:absolute;top:-9px;right:-6px;
  font-family:var(--f-head);font-size:8px;font-weight:800;letter-spacing:.2px;
  padding:1px 5px;border-radius:var(--r-pill);white-space:nowrap;
  box-shadow:0 0 0 2px var(--d-bg);
}
.light .hdr-tag{box-shadow:0 0 0 2px var(--l-bg)}
.hdr-tag--free{background:var(--gold-border);color:#0A1422}
.hdr-tag--vip{background:var(--red);color:#fff;animation:blink 1.4s ease-in-out infinite}
.hdr-pricing-btn{
  font-family:var(--f-head);font-weight:800;font-size:12px;letter-spacing:.3px;
  padding:7px 14px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid var(--amber-border);
}
.dark  .hdr-pricing-btn{color:var(--gold-border);background:var(--d-surface)}
.light .hdr-pricing-btn{color:var(--amber-dark);background:#fff}
.hdr-pricing-btn:hover{opacity:0.85}
@media (max-width:480px){
  .hdr-join-btn,.hdr-pricing-btn{font-size:10px;padding:6px 10px}
  .hdr-tag{font-size:7px;top:-8px;right:-5px}
}

/* 1) Explicit search button + persistent results panel. */
.pred-search-wrap{display:flex;align-items:center;gap:8px}
.pred-search-wrap .pred-search-input{flex:1}
.pred-search-btn{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--gold-fill);color:#0A1422;border:none;
}
.pred-search-btn:hover{opacity:0.88}

/* VIP member badge (distinct from the red "buy VIP" CTA tag). */
.hdr-tag--member{background:var(--gold-fill);color:#0A1422}

/* Admin dashboard: "View as User" / "View as Admin" role-switch link. */
.bs-role-switch{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-head);font-weight:700;font-size:12px;
  padding:6px 14px;border-radius:var(--r-pill);text-decoration:none;
  background:var(--gold-fill);color:#0A1422;
}
.bs-role-switch:hover{opacity:0.88}

/* Pricing cards (plans.php) */
.pricing-grid{
  display:grid;grid-template-columns:1fr;gap:16px;padding:16px;
}
@media (min-width:640px){ .pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .pricing-grid{grid-template-columns:repeat(3,1fr)} }
.pricing-card{
  border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;
}
.dark  .pricing-card{background:var(--d-card);border:1px solid var(--d-border)}
.light .pricing-card{background:var(--l-card);border:1px solid var(--l-border)}
.pricing-card__title{font-family:var(--f-head);font-size:1.3rem;font-weight:800}
.dark  .pricing-card__title{color:var(--gold-border)}
.light .pricing-card__title{color:var(--amber-dark)}
.pricing-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.dark  .pricing-card__list li{color:var(--d-soft)}
.light .pricing-card__list li{color:var(--l-soft)}
.pricing-card__list li::before{content:"\2713";margin-right:8px;color:var(--gold-border);font-weight:700}
.pricing-card__price{font-family:var(--f-head);font-size:2rem;font-weight:900;margin:0}
.dark  .pricing-card__price{color:var(--d-text)}
.light .pricing-card__price{color:var(--l-text)}
.pricing-card__currency{font-size:1rem;vertical-align:top;margin-right:2px}
.pricing-card__period{font-size:0.8rem;font-weight:500;opacity:0.7}
.pricing-card__cta{display:block;text-align:center;text-decoration:none}
.pricing-card__note{font-size:11px;text-align:center;opacity:0.7;margin:0}

/* Bottom nav: animated icons -- gentle continuous bounce on the active
   tab (so it doesn't look static/dead), plus a quick tap-feedback scale
   on any tab regardless of state. */
@keyframes bn-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.nav-item.active .nav-icon svg{animation:bn-bounce 1.6s ease-in-out infinite}
.nav-item .nav-icon svg{transition:transform 0.15s ease}
.nav-item:active .nav-icon svg{transform:scale(0.82)}

/* ---------------- Shared buttons ----------------
   .bs-btn is referenced by the push-notification modal
   (inc/newlook-header.php) and the pricing CTA (plans.php) but was never
   actually defined anywhere -- both rendered as bare unstyled text. */
.bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:999px;border:none;font-family:var(--f-body);font-weight:700;font-size:14px;line-height:1.2;cursor:pointer;text-decoration:none;transition:opacity .15s ease}
.bs-btn:hover{opacity:.88}
.bs-btn--primary{background:var(--gold-fill);color:#0A1422}
.dark  .bs-btn--ghost{background:rgba(255,255,255,0.06);color:var(--d-text);border:1px solid var(--d-border)}
.light .bs-btn--ghost{background:#EEF1F7;color:var(--l-text);border:1px solid var(--l-border)}

/* ---------------- Modal overlay (push-notification prompt, etc.) ----------------
   Markup + show/hide (.is-visible) already existed and worked via JS
   (modern-ui.js initPushPrompt) -- there was just no CSS at all, so it
   rendered as an unstyled block sitting in normal page flow instead of a
   centered overlay. */
.bs-modal-overlay{position:fixed;inset:0;background:rgba(5,10,20,0.72);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s ease}
.bs-modal-overlay.is-visible{opacity:1;pointer-events:auto}
.bs-modal{width:100%;max-width:340px;border-radius:16px;padding:24px;text-align:center}
.dark  .bs-modal{background:var(--d-surface);border:1px solid var(--d-border);color:var(--d-text)}
.light .bs-modal{background:#fff;border:1px solid var(--l-border);color:var(--l-text)}
.bs-modal__icon{font-size:28px;color:var(--gold-border);margin-bottom:12px}
.bs-modal h3{font-family:var(--f-head);font-size:18px;margin:0 0 8px}
.bs-modal p{font-size:13px;line-height:1.5;margin:0 0 18px}
.dark  .bs-modal p{color:var(--d-muted)}
.light .bs-modal p{color:var(--l-muted)}
.bs-modal__actions{display:flex;gap:10px}
.bs-modal__actions .bs-btn{flex:1}

/* ---------------- Auth forms (login / register / password reset) ---------------- */
.auth-section{padding:32px 16px 48px;display:flex;justify-content:center}
.auth-card{width:100%;max-width:400px;border-radius:16px;padding:28px 24px;box-sizing:border-box}
.dark  .auth-card{background:var(--d-surface);border:1px solid var(--d-border)}
.light .auth-card{background:#fff;border:1px solid var(--l-border)}
.auth-title{font-family:var(--f-head);font-weight:900;font-size:24px;margin:0 0 6px;text-align:center}
.dark  .auth-title{color:var(--d-text)}
.light .auth-title{color:var(--l-text)}
.auth-sub{font-size:13px;text-align:center;margin:0 0 22px}
.dark  .auth-sub{color:var(--d-muted)}
.light .auth-sub{color:var(--l-muted)}
.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.dark  .auth-field label{color:var(--d-text)}
.light .auth-field label{color:var(--l-text)}
.auth-field input,.auth-field select{width:100%;padding:12px 14px;border-radius:10px;font-size:14px;font-family:var(--f-body);box-sizing:border-box}
.dark  .auth-field input,.dark  .auth-field select{background:rgba(255,255,255,0.05);border:1px solid var(--d-border);color:var(--d-text)}
.light .auth-field input,.light .auth-field select{background:#F7F9FC;border:1px solid var(--l-border);color:var(--l-text)}
.dark  .auth-field select option{background:#0D1628;color:var(--d-text)}
.light .auth-field select option{background:#fff;color:var(--l-text)}
.auth-field-sub{font-size:11px;margin:4px 0 0}
.dark  .auth-field-sub{color:var(--d-muted)}
.light .auth-field-sub{color:var(--l-muted)}
.auth-sq-row{display:flex;gap:10px;align-items:center}
.auth-sq-row .auth-sq-label{flex:1;font-size:13px}
.dark  .auth-sq-row .auth-sq-label{color:var(--d-muted)}
.light .auth-sq-row .auth-sq-label{color:var(--l-muted)}
.auth-sq-row input{flex:0 0 40%}
.dark  .auth-field input::placeholder{color:var(--d-muted)}
.light .auth-field input::placeholder{color:var(--l-muted)}
.auth-field input:focus{outline:none;border-color:var(--gold-border)}
.auth-field-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.auth-link{color:var(--gold-border);font-weight:600;font-size:13px;text-decoration:none}
.auth-link:hover{text-decoration:underline}
.auth-submit{width:100%;margin-top:6px;border:none}
.auth-foot{text-align:center;font-size:13px;margin-top:18px}
.dark  .auth-foot{color:var(--d-muted)}
.light .auth-foot{color:var(--l-muted)}
.auth-msg{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;display:none}
.auth-msg.is-visible{display:block}
.auth-msg--error{background:rgba(220,53,69,0.12);border:1px solid rgba(220,53,69,0.4);color:#ff6b6b}
.auth-msg--success{background:rgba(46,204,113,0.12);border:1px solid rgba(46,204,113,0.4);color:#2ecc71}
.auth-field-error{color:#ff6b6b;font-size:12px;margin-top:6px;display:none}
.auth-field-error.is-visible{display:block}

/* ---------------- Long-form SEO article content (banker-tips, etc.) ---------------- */
.content-section{padding:8px 16px 32px}
.content-section .container{max-width:760px;margin:0 auto}
.content-section .main-heading{font-family:var(--f-head);font-weight:900;font-size:24px;margin:0 0 14px}
.dark  .content-section .main-heading{color:var(--d-text)}
.light .content-section .main-heading{color:var(--l-text)}
.content-section .sub-heading{font-family:var(--f-head);font-weight:700;font-size:18px;margin:26px 0 10px}
.dark  .content-section .sub-heading{color:var(--d-text)}
.light .content-section .sub-heading{color:var(--l-text)}
.content-section .intro-text{font-size:15px;font-weight:600;line-height:1.6;margin:0 0 14px}
.content-section .body-text{font-size:14px;line-height:1.7;margin:0 0 14px}
.content-section ul{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.7}
.content-section li{margin-bottom:6px}
.dark  .content-section .intro-text,.dark  .content-section .body-text,.dark  .content-section ul{color:var(--d-muted)}
.light .content-section .intro-text,.light .content-section .body-text,.light .content-section ul{color:var(--l-muted)}

/* ---------------- FAQ accordion ----------------
   modern-ui.js already drives .bs-faq-item's open/close click behavior
   (used on the homepage and now this dedicated FAQ page) but the only
   CSS for it lived in the older, parallel css/modern.css stylesheet under
   a different --bs-* variable set -- pages that don't load that file got
   working click behavior with zero visible styling. Ported here onto the
   current --d-*/--l-* variables so it matches this design system in both
   themes without depending on modern.css. */
.bs-faq{margin:24px 0}
.bs-faq-list{display:flex;flex-direction:column;gap:10px}
.dark  .bs-faq-item{background:var(--d-surface);border:1px solid var(--d-border)}
.light .bs-faq-item{background:#fff;border:1px solid var(--l-border)}
.bs-faq-item{border-radius:12px;overflow:hidden}
.bs-faq-item__q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:16px}
.dark  .bs-faq-item__q{color:var(--d-text)}
.light .bs-faq-item__q{color:var(--l-text)}
.bs-faq-item__q i{color:var(--gold-border);transition:transform 0.25s ease;flex:0 0 auto}
.bs-faq-item.is-open .bs-faq-item__q i{transform:rotate(180deg)}
.bs-faq-item__a{display:none;padding:0 18px 16px;line-height:1.6;font-size:14px}
.dark  .bs-faq-item__a{color:var(--d-muted)}
.light .bs-faq-item__a{color:var(--l-muted)}
.bs-faq-item.is-open .bs-faq-item__a{display:block}
.bs-faq-item__a .highlight{color:var(--gold-border);font-weight:600}
.bs-faq-item__a .features{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.bs-faq-item__a .feature{background:var(--amber-dim);padding:8px 10px;border-radius:20px;font-size:13px;border:1px solid var(--amber-border)}
.dark  .bs-faq-item__a .feature{color:var(--d-text)}
.light .bs-faq-item__a .feature{color:var(--l-text)}
.bs-faq-item__a .steps{margin-top:15px;padding-left:20px}
.bs-faq-item__a .steps li{margin-bottom:8px}
.bs-faq-item__a .note{padding:15px;border-radius:8px;margin-top:15px;border-left:4px solid var(--gold-border);background:var(--amber-dim)}
.dark  .bs-faq-item__a .note{color:var(--d-text)}
.light .bs-faq-item__a .note{color:var(--l-text)}

/* ---------------- --bs-* bridge (css/modern.css) ----------------
   modern.css defines its own parallel .bs-card/.bs-badge/.bs-section__title
   component system (used by search.php and others) with its own light-theme
   variable overrides -- but same problem as the --switch-* bridge above:
   those overrides only ever activated via the old #theme-switch checkbox,
   which doesn't exist in this shell, so pages using these components would
   be stuck on dark --bs-* values regardless of the real site-wide toggle. */
.page.light{
  --bs-navy: #F7F8FB;
  --bs-navy-deep: #EEF1F8;
  --bs-surface: #ffffff;
  --bs-surface-raised: #ffffff;
  --bs-border: rgba(10, 22, 40, 0.10);
  --bs-text: #0A1628;
  --bs-text-muted: rgba(10, 22, 40, 0.62);
  --bs-shadow-sm: 0 2px 6px rgba(10, 22, 40, 0.06);
  --bs-shadow: 0 6px 16px rgba(10, 22, 40, 0.08);
  --bs-shadow-lg: 0 12px 32px rgba(10, 22, 40, 0.12);
  --bs-orange: #C47210;
  --bs-orange-strong: #F0921A;
  --bs-gold-border: #C47210;
}

/* ---------------- Result tick/cross (marking_function.php) ---------------- */
.result_tick,.result_tick_red,.time_loading{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px}
.result_tick{background:rgba(46,204,113,0.15);color:#2ecc71}
.result_tick_red{background:rgba(220,53,69,0.15);color:#ff6b6b}
.time_loading{background:rgba(240,146,26,0.15);color:var(--gold-border)}
.result_tick svg,.result_tick_red svg,.time_loading svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* ── /plans page: tier cards ── */
.plan-tier-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:0 16px 8px}
@media (min-width:820px){.plan-tier-grid{grid-template-columns:repeat(3,1fr)}}
.plan-tier-card{border-radius:var(--r-lg);padding:22px 20px;display:flex;flex-direction:column}
.dark  .plan-tier-card{background:var(--d-card);border:1px solid var(--d-border)}
.light .plan-tier-card{background:var(--l-card);border:1px solid var(--l-border)}
.plan-tier-card__title{font-family:var(--f-head);font-weight:900;font-size:20px;text-transform:uppercase;margin:0 0 16px;background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.plan-tier-card__features{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.plan-tier-card__features li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.4}
.plan-tier-check{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;margin-top:1px}
.is-yes .plan-tier-check{background:rgba(13,158,92,0.15);color:var(--green)}
.is-no  .plan-tier-check{background:rgba(239,68,68,0.12);color:var(--red)}
.is-no{opacity:0.55}
.plan-tier-card__price-row{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px solid}
.dark  .plan-tier-card__price-row{border-color:var(--d-border)}
.light .plan-tier-card__price-row{border-color:var(--l-border)}
.plan-tier-card__label{font-size:12px;text-transform:uppercase;font-weight:700;opacity:0.7}
.plan-tier-card__price{font-family:var(--f-head);font-weight:900;font-size:22px;margin:0}
.plan-tier-card__currency{font-size:12px;font-weight:700;margin-right:3px;vertical-align:middle}
.plan-tier-card__period{font-size:11px;font-weight:600;opacity:0.7}
.plan-tier-card__cta{display:block;text-align:center;margin-top:16px}
.plan-tier-card__note{font-size:11px;opacity:0.6;text-align:center;margin-top:10px;line-height:1.4}

/* VIP Betting Tips description */
.vip-tips-desc{padding:0 16px 8px}
.vip-tips-desc p{font-size:13px;line-height:1.65;margin:0 0 10px}
.dark  .vip-tips-desc p{color:var(--d-soft)}
.light .vip-tips-desc p{color:var(--l-soft)}

/* Experts Pick results tables */
.experts-pick-date{font-family:var(--f-head);font-weight:900;font-size:15px;text-transform:uppercase;margin:18px 16px 10px;opacity:0.85}
.experts-pick-table{width:calc(100% - 32px);border-collapse:collapse;margin:0 16px 14px;display:block;border-radius:var(--r);overflow:hidden}
.dark  .experts-pick-table{background:var(--d-card);border:1px solid var(--d-border)}
.light .experts-pick-table{background:var(--l-card);border:1px solid var(--l-border)}
.experts-pick-table .xp-table-head{padding:10px 14px;font-family:var(--f-head);font-weight:700;font-size:13px}
.dark  .experts-pick-table .xp-table-head{background:var(--d-surface)}
.light .experts-pick-table .xp-table-head{background:var(--l-surface)}
.experts-pick-table .xp-table-head h5{margin:0}
.experts-pick-table tr{display:flex;padding:10px 14px;border-top:1px solid;gap:10px}
.dark  .experts-pick-table tr{border-color:var(--d-border)}
.light .experts-pick-table tr{border-color:var(--l-border)}
.experts-pick-table th{flex:1;font-size:11px;text-transform:uppercase;opacity:0.6;text-align:left;font-weight:700}
.experts-pick-table td.p2{flex:1;font-size:13px;min-width:0}
.xp-teams{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xp-team-name,.xp-team-away{font-weight:600}
.xp-stake-con{display:flex;flex-direction:column}
.xp-stake-lbl{font-size:10px;text-transform:uppercase;opacity:0.6}
.xp-stake-val{font-family:var(--f-head);font-weight:900;font-size:15px}
.experts-pick-empty{flex:1;padding:14px 0;text-align:center;font-size:12px;opacity:0.65}

/* Minimal flex utilities used on this page (legacy category.css names,
   redefined here since this page no longer loads that stylesheet). */
.flex_center{display:flex;align-items:center;justify-content:center}
.flex_sb{display:flex;align-items:center;justify-content:space-between}

/* ── Investment plan checkout: expert-access-style browsing cards ── */
.xa-header{display:flex;align-items:center;gap:10px;padding:0 16px;margin-bottom:14px}
.xa-header__icon{font-size:22px}
.xa-header__title{font-family:var(--f-head);font-weight:900;font-size:17px;text-transform:uppercase;margin:0}
.xa-card{border-radius:var(--r-lg);padding:16px;margin:0 16px 14px}
.dark  .xa-card{background:var(--d-card);border:1px solid var(--d-border)}
.light .xa-card{background:var(--l-card);border:1px solid var(--l-border)}
.xa-card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.xa-card__avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:900;font-size:18px;flex-shrink:0;background:var(--gold-fill);color:#0A1422}
.xa-card__head-text{flex:1;min-width:0}
.xa-card__title{font-family:var(--f-head);font-weight:900;font-size:15px;text-transform:uppercase}
.xa-card__sub{font-size:12px;opacity:0.65;margin-top:2px}
.xa-card__stats{display:flex;gap:24px;padding:12px 0;border-top:1px solid;border-bottom:1px solid;margin-bottom:14px}
.dark  .xa-card__stats{border-color:var(--d-border)}
.light .xa-card__stats{border-color:var(--l-border)}
.xa-stat__val{font-family:var(--f-head);font-weight:900;font-size:18px}
.xa-stat__cur{font-size:11px;font-weight:700;margin-right:2px;vertical-align:middle}
.xa-stat__lbl{font-size:10px;text-transform:uppercase;opacity:0.6;margin-top:2px}
.xa-card__actions{display:flex;flex-direction:column;gap:8px}
.xa-card__actions .duration-card__pay{margin-top:0}