/* ════════════════════════════════════════════════════
   PUNTERSCORE PREMIUM EDITORIAL v5
   Blue × Magazine × News — Beta Web Analysis Ltd
   Fully responsive: mobile, tablet, foldable, desktop
════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────── */
:root {
  --blue:       #2563eb;
  --blue-lt:    #60a5fa;
  --blue-dk:    #1d4ed8;
  --blue-pale:  #dbeafe;
  --blue-muted: rgba(37,99,235,.1);
  --blue-bdr:   rgba(37,99,235,.22);
  --red:        #dc2626;
  --green:      #16a34a;
  --amber:      #d97706;

  --ff-serif:   'Playfair Display', Georgia, serif;
  --ff-sans:    'DM Sans', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', 'Courier New', monospace;

  --r:          8px;
  --r-sm:       4px;
  --r-lg:       14px;
  --max-w:      1280px;
  --t:          .18s ease;
}

/* ── DARK THEME ────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #07101f;
  --bg2:      #0b1628;
  --bg3:      #0f1d34;
  --card:     #0c1830;
  --chover:   #101f3c;
  --border:   rgba(255,255,255,.07);
  --bdr2:     rgba(37,99,235,.22);
  --text:     #e8f0fb;
  --text2:    #90a8c8;
  --text3:    #445972;
  --text4:    #253448;
  --navbg:    rgba(7,16,31,.97);
  --rule:     rgba(255,255,255,.065);
  --acc:      var(--blue);
  --acc-lt:   var(--blue-lt);
  --acc-dk:   var(--blue-dk);
  --acc-m:    var(--blue-muted);
  --acc-b:    var(--blue-bdr);
}

/* ── LIGHT THEME ───────────────────────────────── */
[data-theme="light"] {
  --bg:       #f4f7ff;
  --bg2:      #ffffff;
  --bg3:      #e6edf8;
  --card:     #ffffff;
  --chover:   #edf2fc;
  --border:   rgba(0,0,0,.08);
  --bdr2:     rgba(29,78,216,.22);
  --text:     #0d1626;
  --text2:    #354460;
  --text3:    #7a8eaa;
  --text4:    #b8c8dc;
  --navbg:    rgba(244,247,255,.98);
  --rule:     rgba(0,0,0,.07);
  --acc:      var(--blue-dk);
  --acc-lt:   var(--blue);
  --acc-dk:   #1e3a8a;
  --acc-m:    rgba(29,78,216,.07);
  --acc-b:    rgba(29,78,216,.2);
}

/* ── RESET ─────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body {
  font-family: var(--ff-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
a  { color: inherit; text-decoration: none }
ul { list-style: none }
button { cursor: pointer; font-family: inherit; border: none; background: none }
img { max-width: 100%; display: block }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
.section { padding: clamp(52px, 8vw, 96px) 0 }

::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px }

/* ════════════════════════════════════════════════════
   RESPONSIBLE GAMBLING BANNER (YMYL)
════════════════════════════════════════════════════ */
.resp-banner {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  border-top: 2px solid var(--acc);
  padding: clamp(10px,2vw,14px) 0;
}
.resp-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.resp-text {
  font-family: var(--ff-sans);
  font-size: clamp(.68rem,.9vw,.78rem);
  color: var(--text2); line-height: 1.6; flex: 1;
}
.resp-text strong { color: var(--text); font-weight: 700 }
.resp-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0 }
.resp-link {
  font-family: var(--ff-sans);
  font-size: clamp(.62rem,.8vw,.72rem);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc); border-bottom: 1px solid var(--acc-b); padding-bottom: 1px;
  transition: border-color var(--t);
}
.resp-link:hover { border-color: var(--acc) }

/* ════════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════════ */
.nav-wrap {
  position: sticky; top: 0; z-index: 900;
  background: var(--navbg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t);
}
.nav-wrap.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.3) }

.nav-strip {
  border-bottom: 1px solid var(--rule);
  padding: 0 clamp(16px,4vw,40px);
  height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-w); margin: 0 auto;
}
.ns-left, .ns-right { display: flex; align-items: center; gap: 18px }
.nav-strip a, .nav-strip span {
  font-family: var(--ff-sans); font-size: .68rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3); transition: color var(--t);
}
.nav-strip a:hover { color: var(--acc) }
.live-pip { display: flex; align-items: center; gap: 6px; color: var(--red) }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  animation: pip 1.4s ease-in-out infinite;
}
@keyframes pip {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5) }
  50%      { box-shadow: 0 0 0 7px rgba(220,38,38,0) }
}

.nav-main {
  padding: 0 clamp(16px,4vw,40px);
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center;
  height: clamp(52px,8vw,66px);
  /* Prevent children overflowing on narrow screens */
  min-width: 0;
  overflow: visible;
}

.logo {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-right: clamp(10px,3vw,44px); flex-shrink: 0;
  text-decoration: none;
  /* Allow logo to shrink inward rather than push right controls off screen */
  min-width: 0;
  overflow: hidden;
}
.logo-wordmark {
  font-family: var(--ff-serif);
  font-size: clamp(.95rem,2vw,1.4rem);
  font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-wordmark em { color: var(--acc); font-style: normal }
.logo-tagline {
  font-family: var(--ff-sans); font-size: clamp(.48rem,.6vw,.57rem);
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text3); margin-top: 3px;
  /* Hidden on small screens to reclaim horizontal space */
  display: none;
}
/* Show tagline only when there is room */
@media (min-width: 520px) {
  .logo-tagline { display: block; }
}

.nav-links {
  display: flex; align-items: center; gap: 0; flex: 1;
  border-left: 1px solid var(--rule); padding-left: clamp(14px,2vw,28px);
}
.nav-a {
  font-family: var(--ff-sans); font-size: clamp(.68rem,.8vw,.75rem);
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text3); padding: 8px clamp(8px,1vw,13px);
  border-radius: var(--r-sm); transition: color var(--t), background var(--t);
  white-space: nowrap; background: none;
  display: flex; align-items: center; gap: 4px;
}
.nav-a:hover { color: var(--text); background: rgba(255,255,255,.04) }
.arr { font-size: .56rem; opacity: .5; transition: transform var(--t) }
.nav-a[aria-expanded="true"] .arr { transform: rotate(180deg) }

.nav-dd { position: relative }
.dd-panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--card); border: 1px solid var(--acc-b);
  border-top: 2px solid var(--acc);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 20px 20px 14px; min-width: 640px;
  display: none; z-index: 800;
}
.dd-panel.open { display: block; animation: ddopen .16s ease }
@keyframes ddopen { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.dd-title {
  font-family: var(--ff-mono); font-size: .57rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acc);
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.dd-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px }
.dd-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  transition: background var(--t); color: var(--text);
}
.dd-item:hover { background: rgba(37,99,235,.07) }
.dd-num {
  font-family: var(--ff-mono); font-size: .57rem; font-weight: 600;
  color: var(--acc); opacity: .6; margin-top: 2px; flex-shrink: 0; width: 18px; text-align: right;
}
.dd-label { font-family: var(--ff-sans); font-size: .77rem; font-weight: 600; color: var(--text); line-height: 1.3 }
.dd-sub   { font-family: var(--ff-sans); font-size: .67rem; color: var(--text3); margin-top: 1px }

/* nav-right: always flush right, never squished off screen */
.nav-right {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; flex-shrink: 0;
}
.theme-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--text3); transition: all var(--t);
  flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--acc); color: var(--acc) }

.burger {
  display: none; flex-direction: column; gap: 5px; padding: 6px 4px;
  margin-left: 4px; flex-shrink: 0;
}
.burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text); border-radius: 2px; transition: all var(--t);
}
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* ════════════════════════════════════════════════════
   MOBILE OVERLAY
════════════════════════════════════════════════════ */
.mob-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: #07101f;
  flex-direction: column;
  overflow-y: auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.mob-overlay.open { display: flex; animation: mobopen .2s ease }
@keyframes mobopen { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

.mob-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px,4vw,20px) clamp(16px,4vw,24px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.mob-logo {
  font-family: var(--ff-serif); font-size: clamp(1.1rem,4vw,1.3rem);
  font-weight: 900; color: #fff; letter-spacing: -.02em;
}
.mob-logo em { color: var(--blue); font-style: normal }
.mob-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff; border: none; cursor: pointer;
  transition: background var(--t);
}
.mob-close:hover { background: rgba(255,255,255,.15) }

.mob-nav {
  flex: 1; padding: clamp(16px,4vw,24px);
  display: flex; flex-direction: column; gap: 0;
}
.mob-link {
  font-family: var(--ff-sans); font-size: clamp(.95rem,3vw,1.05rem);
  font-weight: 600; color: rgba(255,255,255,.75);
  padding: clamp(12px,3vw,15px) 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
  letter-spacing: .01em; transition: color var(--t);
}
.mob-link:last-of-type { border-bottom: none }
.mob-link:hover { color: #fff }
.mob-link span { font-size: .65rem; opacity: .35 }

.mob-mkt-section { margin-top: 8px; padding-top: 8px }
.mob-mkt-title {
  font-family: var(--ff-mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); padding-bottom: 10px;
  border-bottom: 1px solid rgba(37,99,235,.2);
  margin-bottom: 4px;
}
.mob-mkt {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(9px,2.5vw,11px) 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: rgba(255,255,255,.6);
  font-family: var(--ff-sans);
  font-size: clamp(.8rem,2.5vw,.88rem); font-weight: 500;
  transition: color var(--t);
}
.mob-mkt:hover { color: #fff }
.mob-mkt-num {
  font-family: var(--ff-mono); font-size: .57rem;
  color: var(--blue); opacity: .65; margin-right: 8px;
}

.mob-footer {
  padding: clamp(16px,4vw,20px) clamp(16px,4vw,24px);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.mob-tg {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(37,99,235,.15);
  border: 1px solid rgba(37,99,235,.3);
  border-radius: var(--r); padding: 12px;
  font-family: var(--ff-sans); font-size: .82rem; font-weight: 700;
  color: var(--blue-lt); text-decoration: none; transition: background var(--t);
}
.mob-tg:hover { background: rgba(37,99,235,.25) }
.mob-legal {
  font-family: var(--ff-sans); font-size: .66rem;
  color: rgba(255,255,255,.25); text-align: center; line-height: 1.6;
}

/* ════════════════════════════════════════════════════
   SHARED ELEMENTS
════════════════════════════════════════════════════ */
.kicker {
  font-family: var(--ff-mono); font-size: clamp(.56rem,.7vw,.6rem);
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc); display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.kicker::before { content:''; display:block; width:22px; height:2px; background:var(--acc) }
.sec-hed {
  font-family: var(--ff-serif);
  font-size: clamp(1.7rem,3vw,2.6rem);
  font-weight: 900; line-height: 1.06; letter-spacing: -.025em; color: var(--text);
}
.sec-sub {
  font-family: var(--ff-sans); font-size: clamp(.8rem,.95vw,.9rem);
  color: var(--text2); margin-top: 8px; line-height: 1.72;
}
.sec-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(28px,5vw,48px); flex-wrap: wrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--ff-sans);
  font-size: clamp(.68rem,.8vw,.72rem);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 20px; border-radius: var(--r-sm);
  border: 1px solid transparent; transition: all var(--t); white-space: nowrap;
}
.btn-primary { background: var(--acc); color: #fff; border-color: var(--acc) }
.btn-primary:hover { background: var(--acc-dk); border-color: var(--acc-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.35) }
.btn-outline { background: transparent; color: var(--acc); border-color: var(--acc-b) }
.btn-outline:hover { background: var(--acc-m); border-color: var(--acc) }
.btn-ghost  { background: transparent; color: var(--text2); border-color: var(--border) }
.btn-ghost:hover  { color: var(--text); border-color: var(--text3) }
.btn-lg { padding: 13px 28px; font-size: clamp(.75rem,.9vw,.8rem) }
.btn-view-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 20px;
  font-family: var(--ff-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--acc-b);
  padding: 12px; border-radius: var(--r-sm);
  transition: all var(--t); background: transparent;
}
.btn-view-more:hover { background: var(--acc-m); border-color: var(--acc) }

/* ════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: clamp(44px,7vw,76px) 0 clamp(40px,6vw,68px);
  border-bottom: 1px solid var(--rule); overflow: hidden;
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}
.hero-glow {
  position: absolute; top: -100px; right: -60px;
  width: min(560px,80vw); height: min(560px,80vw); border-radius: 50%;
  background: radial-gradient(circle,rgba(37,99,235,.08) 0%,transparent 70%);
  pointer-events: none;
}
.hero-vline {
  position: absolute; top: 0; bottom: 0;
  width: 1px; right: min(380px,35%);
  background: linear-gradient(to bottom,transparent,var(--acc-b),transparent);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr min(360px,32%);
  gap: clamp(28px,4vw,60px); align-items: start;
}
.hero-dateline {
  font-family: var(--ff-mono); font-size: clamp(.56rem,.65vw,.6rem);
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text3); display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.hero-dateline::after { content:''; flex:1; height:1px; background:var(--rule) }
.hero-hed {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem,5vw,4.2rem);
  font-weight: 900; line-height: .97; letter-spacing: -.03em;
  color: var(--text); margin-bottom: 16px;
}
.hero-hed .accent { color: var(--acc) }
.hero-dek {
  font-family: var(--ff-sans); font-size: clamp(.87rem,1.1vw,.97rem);
  color: var(--text2); line-height: 1.76;
  max-width: 520px; margin-bottom: 8px;
  padding-left: 16px; border-left: 2px solid var(--acc);
}
.hero-dek strong { font-weight: 700; color: var(--text) }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 40px }
.hero-stats {
  display: flex; padding-top: 22px; border-top: 1px solid var(--rule);
  flex-wrap: wrap; gap: 0;
}
.hst {
  display: flex; flex-direction: column;
  padding: 0 clamp(14px,2.5vw,28px); border-right: 1px solid var(--rule);
}
.hst:first-child { padding-left: 0 }
.hst:last-child  { border-right: none }
.hst-n {
  font-family: var(--ff-serif); font-size: clamp(1.6rem,2.5vw,2rem);
  font-weight: 900; line-height: 1; color: var(--acc); letter-spacing: -.02em;
}
.hst-l {
  font-family: var(--ff-sans); font-size: clamp(.56rem,.65vw,.6rem);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text3); margin-top: 4px;
}
.hero-right { border-left: 1px solid var(--rule); padding-left: clamp(18px,3vw,36px) }
.sidebar-lbl {
  font-family: var(--ff-mono); font-size: .57rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text3);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.sidebar-lbl::after { content:''; flex:1; height:1px; background:var(--rule) }
.top-pick { padding: clamp(10px,2vw,14px) 0; border-bottom: 1px solid var(--rule) }
.top-pick:last-of-type { border-bottom: none }
.tp-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px }
.tp-league {
  font-family: var(--ff-mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}
.tp-time { font-family: var(--ff-mono); font-size: .58rem; color: var(--text4) }
.tp-match {
  font-family: var(--ff-sans); font-size: clamp(.8rem,.9vw,.86rem);
  font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.3;
}
.tp-footer { display: flex; align-items: center; justify-content: space-between }
.tp-tip { font-family: var(--ff-sans); font-size: .7rem; font-weight: 700; color: var(--acc) }
.tp-conf { display: flex; align-items: center; gap: 6px }
.tp-bar { width: 50px; height: 2px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden }
.tp-fill { height: 100%; width: var(--w); background: var(--acc); border-radius: 2px }
.tp-pct { font-family: var(--ff-mono); font-size: .63rem; font-weight: 600; color: var(--text3) }
.view-all-link {
  display: block; margin-top: 12px; text-align: right;
  font-family: var(--ff-sans); font-size: .67rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acc);
  transition: opacity var(--t);
}
.view-all-link:hover { opacity: .65 }

/* ════════════════════════════════════════════════════
   TRUST STRIP
════════════════════════════════════════════════════ */
.trust-strip {
  background: var(--bg3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(14px,2vw,20px) 0;
}
.trust-strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px }
.trust-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-icon svg { width: 16px; height: 16px }
.trust-label { font-family: var(--ff-sans); font-size: clamp(.73rem,.85vw,.8rem); font-weight: 700; color: var(--text); line-height: 1.2 }
.trust-sub   { font-family: var(--ff-sans); font-size: clamp(.64rem,.75vw,.68rem); color: var(--text3); margin-top: 1px }
.trust-div   { width: 1px; height: 34px; background: var(--rule); flex-shrink: 0 }

/* ════════════════════════════════════════════════════
   MARKETS GRID
════════════════════════════════════════════════════ */
.markets-section { background: var(--bg2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.mkt-index {
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.mkt-item {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(14px,2vw,20px) clamp(14px,2vw,20px);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background var(--t); text-decoration: none; color: var(--text);
  background: var(--card); overflow: hidden;
}
.mkt-item:nth-child(4n)        { border-right: none }
.mkt-item:nth-last-child(-n+4) { border-bottom: none }
.mkt-item:hover                { background: var(--chover) }
.mkt-item:hover .mkt-arr       { opacity: 1; transform: translateX(3px) }
.mkt-item::before {
  content:''; position: absolute; top:0; left:0; right:0; height:2px;
  background: var(--acc); opacity:0; transition: opacity var(--t);
}
.mkt-item:hover::before, .mkt-item.feat::before { opacity: 1 }
.mkt-item.feat { background: linear-gradient(145deg,var(--card),rgba(37,99,235,.05)) }
.mkt-top { display: flex; align-items: center; justify-content: space-between }
.mkt-num {
  font-family: var(--ff-mono); font-size: .55rem; font-weight: 600;
  letter-spacing: .12em; color: var(--text4); text-transform: uppercase;
}
.mkt-badge {
  font-family: var(--ff-mono); font-size: .54rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc); background: var(--acc-m);
  border: 1px solid var(--acc-b); padding: 2px 6px; border-radius: var(--r-sm);
}
.mkt-name  { font-family: var(--ff-sans); font-size: clamp(.82rem,.9vw,.86rem); font-weight: 700; line-height: 1.3; color: var(--text) }
.mkt-desc  { font-family: var(--ff-sans); font-size: clamp(.7rem,.8vw,.73rem); color: var(--text3); line-height: 1.55; flex: 1 }
.mkt-foot  { display: flex; align-items: center; justify-content: space-between; margin-top: 2px }
.mkt-stat  { font-family: var(--ff-mono); font-size: .59rem; font-weight: 600; letter-spacing: .04em; color: var(--text3) }
.mkt-arr   { font-size: .7rem; color: var(--acc); opacity: 0; transition: all var(--t) }

/* ════════════════════════════════════════════════════
   PREDICTIONS TABLE
════════════════════════════════════════════════════ */
.preds-section { background: var(--bg) }
.pred-filter {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
.pred-filter::-webkit-scrollbar { display: none }
.pf-btn {
  font-family: var(--ff-sans); font-size: clamp(.64rem,.75vw,.68rem);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 11px clamp(10px,1.5vw,16px);
  border-bottom: 2px solid transparent;
  color: var(--text3); transition: all var(--t); white-space: nowrap;
  margin-bottom: -1px;
}
.pf-btn:hover  { color: var(--text) }
.pf-btn.active { color: var(--acc); border-bottom-color: var(--acc) }

.pred-thead {
  display: grid; grid-template-columns: 1fr 148px 148px 90px; gap: 14px;
  padding: 13px 0 11px; border-bottom: 2px solid var(--acc);
}
.pth {
  font-family: var(--ff-mono); font-size: .55rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text3);
}
.pred-row {
  display: grid; grid-template-columns: 1fr 148px 148px 90px;
  gap: 14px; align-items: start;
  padding: clamp(14px,2vw,20px) 0; border-bottom: 1px solid var(--rule);
  transition: background var(--t);
}
.pred-row:hover { background: rgba(255,255,255,.012) }
.pred-row.hidden { display: none }
.pred-row.acca-row { background: rgba(37,99,235,.03); border-color: rgba(37,99,235,.12) }

.pr-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px }
.pr-league {
  font-family: var(--ff-mono); font-size: .57rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}
.pr-dot  { width: 3px; height: 3px; border-radius: 50%; background: var(--text4) }
.pr-time { font-family: var(--ff-mono); font-size: .57rem; color: var(--text4) }
.pr-match {
  font-family: var(--ff-sans); font-size: clamp(.88rem,1vw,.96rem);
  font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 5px;
}
.acca-legs { font-family: var(--ff-sans); font-size: .75rem; color: var(--text2); margin: 3px 0; line-height: 1.65 }
.pr-expand-btn {
  font-family: var(--ff-sans); font-size: .67rem; font-weight: 600;
  letter-spacing: .02em; color: var(--text3); padding: 0;
  display: inline-flex; align-items: center; gap: 4px; transition: color var(--t);
}
.pr-expand-btn:hover { color: var(--acc) }
.exp-ico { font-size: .54rem; transition: transform var(--t) }
.exp-ico.open { transform: rotate(180deg) }

.pr-market { display: flex; flex-direction: column; gap: 3px; padding-top: 2px }
.pr-mkt-lbl { font-family: var(--ff-sans); font-size: .72rem; font-weight: 700; color: var(--acc); line-height: 1.2 }
.pr-mkt-odds { font-family: var(--ff-mono); font-size: clamp(.98rem,1.1vw,1.05rem); font-weight: 600; color: var(--text); letter-spacing: -.01em }
.pr-mkt-odds.acca { color: var(--blue-lt) }

.pr-conf { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 2px }
.pr-conf-bar { width: 100%; height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden }
.pr-conf-fill { height: 100%; width: var(--w); background: var(--acc); border-radius: 2px }
.pr-conf-fill.dim { background: var(--text3) }
.pr-conf-val { font-family: var(--ff-mono); font-size: .7rem; font-weight: 500; color: var(--text2) }

.pr-btn {
  font-family: var(--ff-sans); font-size: .61rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); border: 1px solid var(--border);
  padding: 7px 10px; border-radius: var(--r-sm);
  transition: all var(--t); white-space: nowrap; margin-top: 2px;
}
.pr-btn:hover { color: var(--acc); border-color: var(--acc-b) }

.pr-analysis {
  grid-column: 1 / -1; display: none; margin-bottom: 10px;
  background: var(--bg3); border-left: 2px solid var(--acc);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pr-analysis.open { display: block; animation: fadein .2s ease }
.pr-analysis p { font-family: var(--ff-sans); font-size: .8rem; color: var(--text2); line-height: 1.72; margin-bottom: 6px }
.pr-analysis p:last-child { margin-bottom: 0 }
.pr-analysis strong { font-weight: 700; color: var(--text) }
@keyframes fadein { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* ════════════════════════════════════════════════════
   RANKING ARTICLES
════════════════════════════════════════════════════ */
.ranking-section { background: var(--bg); border-top: 1px solid var(--rule) }
.rank-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.rank-art {
  background: var(--card); padding: clamp(20px,2.5vw,28px) clamp(18px,2vw,26px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--text); position: relative;
  transition: background var(--t);
}
.rank-art:last-child { border-right: none }
.rank-art:hover { background: var(--chover) }
.rank-art::after {
  content:''; position: absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,var(--acc),var(--blue-lt)); opacity:0;
  transition: opacity var(--t);
}
.rank-art:hover::after { opacity: 1 }
.rank-n { font-family: var(--ff-serif); font-size: 3rem; font-weight: 900; color: var(--acc); opacity: .1; line-height: 1; letter-spacing: -.04em }
.rank-tag { display: inline-block; font-family: var(--ff-mono); font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); background: var(--acc-m); border: 1px solid var(--acc-b); padding: 2px 7px; border-radius: var(--r-sm) }
.rank-title { font-family: var(--ff-serif); font-size: clamp(1rem,1.2vw,1.15rem); font-weight: 900; line-height: 1.25; letter-spacing: -.02em; color: var(--text) }
.rank-excerpt { font-family: var(--ff-sans); font-size: clamp(.75rem,.85vw,.82rem); color: var(--text2); line-height: 1.75; flex: 1 }
.rank-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--rule); margin-top: auto }
.rank-author { font-family: var(--ff-sans); font-size: .7rem; font-weight: 600; color: var(--text3) }
.rank-read   { font-family: var(--ff-mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acc) }

/* ════════════════════════════════════════════════════
   PERFORMANCE PANELS
════════════════════════════════════════════════════ */
.perf-section { background: var(--bg2); border-top: 1px solid var(--rule) }
.perf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule) }
.perf-panel { background: var(--card); padding: clamp(24px,3vw,38px) clamp(20px,2.5vw,32px); display: flex; flex-direction: column; gap: 14px }
.perf-kicker { font-family: var(--ff-mono); font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--acc) }
.perf-hed    { font-family: var(--ff-serif); font-size: clamp(1.1rem,1.4vw,1.3rem); font-weight: 900; letter-spacing: -.02em; color: var(--text); line-height: 1.15 }
.perf-body   { font-family: var(--ff-sans); font-size: clamp(.76rem,.85vw,.82rem); color: var(--text2); line-height: 1.72 }
.perf-fig    { font-family: var(--ff-serif); font-size: clamp(2.4rem,3.5vw,3.2rem); font-weight: 900; color: var(--acc); line-height: 1; letter-spacing: -.03em }
.perf-fig-sub { font-family: var(--ff-sans); font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-top: 4px }
.perf-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 2px }
.pb-row    { display: flex; align-items: center; gap: 10px }
.pb-lbl    { font-family: var(--ff-sans); font-size: .7rem; font-weight: 600; color: var(--text3); width: 80px; flex-shrink: 0 }
.pb-track  { flex:1; height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden }
.pb-fill   { height:100%; width:var(--w); background:var(--acc); border-radius:2px }
.pb-val    { font-family: var(--ff-mono); font-size: .69rem; font-weight: 600; color: var(--text); width: 30px; text-align: right; flex-shrink: 0 }

/* ════════════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════════ */
.hiw-section { background: var(--bg) }
.hiw-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.hiw-step { padding: clamp(22px,2.5vw,32px) clamp(18px,2vw,24px); border-right: 1px solid var(--border); background: var(--card); transition: background var(--t) }
.hiw-step:last-child { border-right: none }
.hiw-step:hover { background: var(--chover) }
.hiw-n { font-family: var(--ff-serif); font-size: clamp(3rem,4vw,4.2rem); font-weight: 900; color: var(--acc); opacity: .14; line-height: 1; margin-bottom: 14px; letter-spacing: -.03em }
.hiw-step h3 { font-family: var(--ff-sans); font-size: clamp(.85rem,.95vw,.9rem); font-weight: 700; margin-bottom: 10px; color: var(--text) }
.hiw-step p  { font-family: var(--ff-sans); font-size: clamp(.74rem,.83vw,.8rem); color: var(--text2); line-height: 1.72 }

/* ════════════════════════════════════════════════════
   FORM TABLE
════════════════════════════════════════════════════ */
.form-section { background: var(--bg2); border-top: 1px solid var(--rule) }
.form-table { width: 100%; border-collapse: collapse }
.form-table thead tr { border-bottom: 2px solid var(--acc) }
.form-table th { font-family: var(--ff-mono); font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); padding: 0 0 10px; text-align: left }
.form-table th:not(:first-child) { text-align: center }
.form-table tbody tr { border-bottom: 1px solid var(--rule); transition: background var(--t) }
.form-table tbody tr:hover { background: rgba(255,255,255,.02) }
.form-table td { padding: clamp(10px,1.5vw,13px) 0; font-family: var(--ff-sans); font-size: clamp(.78rem,.88vw,.84rem); color: var(--text2) }
.ft-team   { display: flex; align-items: center; gap: 10px }
.ft-flag   { font-family: var(--ff-mono); font-size: .55rem; font-weight: 700; letter-spacing: .04em; color: var(--text4); background: var(--bg3); border: 1px solid var(--border); padding: 2px 5px; border-radius: var(--r-sm) }
.ft-name   { font-family: var(--ff-sans); font-size: clamp(.82rem,.9vw,.86rem); font-weight: 700; color: var(--text) }
.ft-comp   { font-size: .68rem; color: var(--text3); margin-top: 1px }
.ft-form   { display: flex; align-items: center; justify-content: center; gap: 3px }
.fd        { width: 20px; height: 20px; border-radius: 50%; font-family: var(--ff-mono); font-size: .56rem; font-weight: 700; display: flex; align-items: center; justify-content: center }
.fd.w { background: rgba(22,163,74,.12); color: var(--green) }
.fd.d { background: rgba(37,99,235,.1);  color: var(--blue-lt) }
.fd.l { background: rgba(220,38,38,.12); color: var(--red) }
.ft-rating { text-align: center; font-family: var(--ff-mono); font-size: .8rem; font-weight: 700; color: var(--acc) }

/* ════════════════════════════════════════════════════
   EXPERT TEAM
════════════════════════════════════════════════════ */
.team-section { background: var(--bg); border-top: 1px solid var(--rule) }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px }
.team-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: clamp(18px,2vw,24px) clamp(16px,1.8vw,20px); display: flex; flex-direction: column; gap: 10px; transition: border-color var(--t) }
.team-card:hover { border-color: var(--acc-b) }
.team-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--acc-m); border: 2px solid var(--acc-b); display: flex; align-items: center; justify-content: center; font-family: var(--ff-serif); font-size: 1rem; font-weight: 900; color: var(--acc); flex-shrink: 0 }
.team-name { font-family: var(--ff-sans); font-size: clamp(.85rem,.95vw,.9rem); font-weight: 700; color: var(--text) }
.team-role { font-family: var(--ff-mono); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-top: -4px }
.team-bio  { font-family: var(--ff-sans); font-size: clamp(.72rem,.8vw,.76rem); color: var(--text2); line-height: 1.68; flex: 1 }
.team-creds { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; border-top: 1px solid var(--rule) }
.team-cred  { font-family: var(--ff-mono); font-size: .54rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text4) }

/* ════════════════════════════════════════════════════
   BLOG SECTION
════════════════════════════════════════════════════ */
.blog-section { background: var(--bg2); border-top: 1px solid var(--rule) }
.blog-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  cursor: pointer;
}
.blog-card:hover { border-color: var(--acc-b); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.blog-img { width: 100%; aspect-ratio: 16/9; background: var(--bg3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; }
.blog-img-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg3) 0%, var(--chover) 100%); }
.blog-img-num { position: relative; z-index: 1; font-family: var(--ff-serif); font-size: clamp(2.5rem,5vw,4rem); font-weight: 900; color: var(--acc); opacity: .15; letter-spacing: -.04em; }
.blog-body { padding: clamp(16px,2vw,22px); display: flex; flex-direction: column; gap: 8px; flex: 1 }
.blog-cat  { font-family: var(--ff-mono); font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc) }
.blog-title { font-family: var(--ff-serif); font-weight: 900; letter-spacing: -.02em; line-height: 1.22; color: var(--text) }
.blog-card--feat .blog-title { font-size: clamp(1.05rem,1.3vw,1.25rem) }
.blog-card--sm   .blog-title { font-size: clamp(.92rem,1.05vw,1.02rem) }
.blog-excerpt { font-family: var(--ff-sans); font-size: clamp(.75rem,.84vw,.8rem); color: var(--text2); line-height: 1.72; flex: 1 }
.blog-card--sm .blog-excerpt { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden }
.blog-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--rule); margin-top: auto }
.blog-byline { font-family: var(--ff-sans); font-size: .68rem; color: var(--text3) }
.blog-byline strong { color: var(--text2); font-weight: 600 }
.blog-read { font-family: var(--ff-mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acc) }

/* ════════════════════════════════════════════════════
   CTA
════════════════════════════════════════════════════ */
.cta-section { background: var(--bg); border-top: 1px solid var(--rule); padding: clamp(52px,8vw,88px) 0 }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center }
.cta-hed { font-family: var(--ff-serif); font-size: clamp(1.9rem,3.5vw,3.2rem); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; color: var(--text); margin-bottom: 14px }
.cta-hed .accent { color: var(--acc) }
.cta-left p { font-family: var(--ff-sans); font-size: clamp(.84rem,.95vw,.9rem); color: var(--text2); line-height: 1.75; margin-bottom: 24px }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap }
.cta-disclaimer { font-family: var(--ff-sans); font-size: .68rem; color: var(--text3); line-height: 1.65; margin-top: 18px }
.cta-disclaimer a { color: var(--acc-lt); text-decoration: underline; text-decoration-color: rgba(96,165,250,.3) }
.cta-right { border-left: 1px solid var(--rule); padding-left: clamp(24px,4vw,52px) }
.cta-quote { border-left: 2px solid var(--acc); padding-left: 20px; margin-bottom: 18px }
.cta-quote p { font-family: var(--ff-serif); font-size: clamp(1.05rem,1.3vw,1.25rem); font-weight: 700; color: var(--text); line-height: 1.55; letter-spacing: -.01em }
.cta-attrib { font-family: var(--ff-sans); font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-top: 10px }
.cta-note { font-family: var(--ff-sans); font-size: .7rem; color: var(--text3); line-height: 1.65; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule) }
.cta-note a { color: var(--acc-lt) }

/* ════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════ */
.footer { background: var(--bg2) }
.footer-toprule { height: 3px; background: linear-gradient(90deg,transparent,var(--blue-dk),var(--blue),var(--blue-lt),var(--blue),var(--blue-dk),transparent) }
.footer-belt { background: var(--bg3); border-bottom: 1px solid var(--rule); padding: 14px 0 }
.footer-belt-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 0 clamp(16px,4vw,40px); max-width: var(--max-w); margin: 0 auto }
.footer-mast { font-family: var(--ff-serif); font-size: clamp(.95rem,1.3vw,1.1rem); font-weight: 900; letter-spacing: -.02em; color: var(--text) }
.footer-mast em { color: var(--acc); font-style: normal }
.footer-quicknav { display: flex; align-items: center; gap: 0; flex-wrap: wrap }
.footer-quicknav a { font-family: var(--ff-sans); font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); padding: 0 12px; border-right: 1px solid var(--rule); transition: color var(--t) }
.footer-quicknav a:last-child { border-right: none; padding-right: 0 }
.footer-quicknav a:hover { color: var(--acc) }
.footer-tg-btn { display: flex; align-items: center; gap: 7px; background: var(--acc-m); border: 1px solid var(--acc-b); border-radius: var(--r-sm); padding: 7px 14px; font-family: var(--ff-sans); font-size: .72rem; font-weight: 700; color: var(--acc-lt); text-decoration: none; transition: background var(--t); white-space: nowrap; }
.footer-tg-btn:hover { background: rgba(37,99,235,.18) }
.tg-icon { width: 16px; height: 16px; fill: currentColor }

.footer-main { padding: clamp(32px,5vw,48px) 0 clamp(24px,3vw,36px) }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: clamp(24px,3vw,40px) }
.fc-brand p { font-family: var(--ff-sans); font-size: clamp(.74rem,.85vw,.8rem); color: var(--text3); line-height: 1.78; margin: 12px 0 16px; max-width: 260px }
.trust-row { display: flex; flex-wrap: wrap; gap: 6px }
.tb { font-family: var(--ff-mono); font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text4) }
.fc-col h5 { font-family: var(--ff-mono); font-size: .56rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--acc); margin-bottom: 13px }
.fc-col ul { display: flex; flex-direction: column; gap: 9px }
.fc-col ul li a { font-family: var(--ff-sans); font-size: clamp(.74rem,.82vw,.78rem); color: var(--text3); transition: color var(--t); display: flex; align-items: center; gap: 7px }
.fc-col ul li a::before { content:''; display: block; width: 4px; height: 1px; background: var(--border); transition: all var(--t); flex-shrink: 0 }
.fc-col ul li a:hover { color: var(--text) }
.fc-col ul li a:hover::before { background: var(--acc); width: 8px }

.footer-bottom { border-top: 1px solid var(--rule); padding: 18px 0 }
.footer-bottom-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap }
.footer-disclaimer { font-family: var(--ff-sans); font-size: clamp(.64rem,.72vw,.7rem); color: var(--text3); line-height: 1.75; max-width: 700px }
.footer-disclaimer strong { color: var(--text2) }
.footer-disclaimer a { color: var(--blue-lt); text-decoration: underline; text-decoration-color: rgba(96,165,250,.25) }
.footer-copy { font-family: var(--ff-mono); font-size: .66rem; color: var(--text4); white-space: nowrap; flex-shrink: 0 }

/* ════════════════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════════════════ */
.back-top {
  position: fixed; bottom: clamp(16px,3vw,26px); right: clamp(16px,3vw,26px); z-index: 500;
  width: 38px; height: 38px;
  background: var(--card); border: 1px solid var(--acc-b);
  color: var(--acc); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: .85rem;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: all var(--t);
}
.back-top.vis { opacity: 1; pointer-events: all; transform: translateY(0) }
.back-top:hover { background: var(--acc-m) }

/* ════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(18px) }
.reveal.in { opacity: 1; transform: translateY(0); transition: opacity .48s ease, transform .48s ease }

/* ════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════ */

/* ── Under 360px ──────────────────────────────────── */
@media (max-width: 359px) {
  .container { padding: 0 12px }
  .nav-main  { padding: 0 12px }
  .nav-strip { display: none }

  /* Responsible gambling banner: stack vertically */
  .resp-inner { flex-direction: column; align-items: flex-start; gap: 8px }
  .resp-links { gap: 10px }

  .hero-inner { grid-template-columns: 1fr }
  .hero-right { display: none }
  .hero-hed  { font-size: 2rem }
  .hero-stats { gap: 12px }
  .hst       { padding: 0; border-right: none; width: 50% }
  .hst-sep   { display: none }
  .mkt-index { grid-template-columns: 1fr }
  .mkt-item  { border-right: none !important; border-bottom: 1px solid var(--border) !important }
  .mkt-item:last-child { border-bottom: none !important }

  /* Homepage pred-row: flex column so nothing ghost-reserves grid space */
  .pred-row {
    display: flex; flex-direction: column; gap: 8px;
  }
  .pr-market, .pr-conf, .pr-btn { display: flex !important }
  .pr-conf { flex-direction: row; align-items: center; gap: 8px }
  .pred-thead { display: none }

  /* Market-page ptable-row: flex column */
  .ptable-row {
    display: flex; flex-direction: column; gap: 6px;
  }
  .ptable-match  { order: 1 }
  .ptable-tip    { order: 2; flex-direction: row; align-items: center; gap: 8px }
  .ptable-conf   { order: 3; flex-direction: row; align-items: center; gap: 8px }
  .ptable-act    { order: 4; align-self: flex-start }
  .ptable-odds, .ptable-form { display: none }
  .ptable-analysis { order: 5 }
  .conf-bar { width: 56px }

  .perf-grid { grid-template-columns: 1fr }
  .hiw-grid  { grid-template-columns: 1fr }
  .hiw-step  { border-right: none; border-bottom: 1px solid var(--border) }
  .hiw-step:last-child { border-bottom: none }
  .rank-grid  { grid-template-columns: 1fr }
  .rank-art   { border-right: none; border-bottom: 1px solid var(--border) }
  .rank-art:last-child { border-bottom: none }
  .blog-grid  { grid-template-columns: 1fr }
  .team-grid  { grid-template-columns: 1fr }
  .cta-inner  { grid-template-columns: 1fr }
  .cta-right  { display: none }
  .footer-grid { grid-template-columns: 1fr }
  .footer-quicknav { display: none }
  .trust-strip-inner { flex-direction: column; align-items: flex-start }
  .trust-div  { display: none }
}

/* ── 360px – 480px  (includes Samsung Fold 6 inner ~373px) */
@media (min-width: 360px) and (max-width: 480px) {
  /* Nav strip hidden — reclaims full viewport for nav-main */
  .nav-strip { display: none }

  /* Burger must be visible — force it */
  .burger    { display: flex !important }
  .nav-links { display: none !important }

  /* Responsible gambling banner: stack cleanly */
  .resp-inner { flex-direction: column; align-items: flex-start; gap: 8px }
  .resp-links { gap: 10px }

  .hero-inner { grid-template-columns: 1fr }
  .hero-right { display: none }
  .hero-stats { flex-wrap: wrap; gap: 16px }
  .hst        { padding: 0; border-right: none; width: calc(50% - 8px) }
  .hero-actions { flex-direction: column }
  .hero-actions .btn { width: 100%; text-align: center }

  .mkt-index  { grid-template-columns: 1fr 1fr }
  .mkt-item:nth-child(2n)         { border-right: none }
  .mkt-item:nth-child(odd):last-child { grid-column: 1 / -1 }

  /* Homepage pred-row: 2-col — match + tip+conf, hide analyse btn */
  .pred-row {
    grid-template-columns: 1fr 110px;
    display: grid;
  }
  .pred-thead { display: none }
  .pr-conf { display: flex }
  .pr-btn  { display: none }

  /* Market-page ptable-row: keep 3-col but tighten gaps */
  .ptable-row {
    grid-template-columns: 1fr auto 34px;
    column-gap: 8px;
  }
  .ptable-odds, .ptable-form { display: none }
  .conf-bar { width: 50px }

  /* Team names: prevent overflow */
  .pm-home, .pm-away { max-width: 110px }

  /* Tip badge slightly smaller */
  .tip-badge { width: 28px; height: 28px; font-size: .74rem }

  /* Analysis grid: 2 columns on this viewport */
  .analysis-grid { grid-template-columns: 1fr 1fr }

  /* League group header: allow wrap */
  .lg-header { flex-wrap: wrap; row-gap: 4px }
  .lg-count  { width: 100%; margin-left: 0; margin-top: 2px }

  .perf-grid  { grid-template-columns: 1fr }
  .hiw-grid   { grid-template-columns: 1fr 1fr }
  .hiw-step:nth-child(2) { border-right: none }
  .hiw-step:nth-child(3),.hiw-step:nth-child(4) { border-top: 1px solid var(--border) }
  .hiw-step:nth-child(4) { border-right: none }
  .rank-grid  { grid-template-columns: 1fr }
  .rank-art   { border-right: none; border-bottom: 1px solid var(--border) }
  .rank-art:last-child { border-bottom: none }
  .blog-grid  { grid-template-columns: 1fr }
  .team-grid  { grid-template-columns: 1fr 1fr }
  .cta-inner  { grid-template-columns: 1fr }
  .cta-right  { display: none }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px }
  .footer-quicknav { display: none }
  .trust-div  { display: none }
  .trust-item:nth-child(n+4) { display: none }

  /* Page header bar stats: hide on small */
  .phb-right  { display: none }
  .phb-inner  { flex-direction: column; align-items: flex-start }
}

/* ── 481px – 768px ──────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .nav-strip { display: none }
  .nav-links { display: none }
  .burger    { display: flex }
  .hero-inner { grid-template-columns: 1fr }
  .hero-right { border-left: none; border-top: 1px solid var(--rule); padding: 22px 0 0; margin-top: 8px }
  .hero-vline { display: none }
  .mkt-index  { grid-template-columns: repeat(2,1fr) }
  .mkt-item:nth-child(2n)        { border-right: none }
  .mkt-item:nth-last-child(-n+2) { border-bottom: none }
  .pred-thead, .pred-row { grid-template-columns: 1fr 130px 90px }
  .pr-btn     { display: none }
  .pth:last-child { display: none }
  .perf-grid  { grid-template-columns: 1fr }
  .hiw-grid   { grid-template-columns: 1fr 1fr }
  .hiw-step:nth-child(2) { border-right: none }
  .hiw-step:nth-child(3),.hiw-step:nth-child(4) { border-top: 1px solid var(--border) }
  .hiw-step:nth-child(4) { border-right: none }
  .rank-grid  { grid-template-columns: 1fr 1fr }
  .rank-art:nth-child(2) { border-right: none }
  .rank-art:nth-child(3) { border-top: 1px solid var(--border); grid-column: 1 / -1; border-right: none }
  .blog-grid  { grid-template-columns: 1fr 1fr }
  .team-grid  { grid-template-columns: 1fr 1fr }
  .cta-inner  { grid-template-columns: 1fr }
  .cta-right  { border-left: none; border-top: 1px solid var(--rule); padding: 24px 0 0 }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px }
  .footer-quicknav { display: none }
  .trust-div  { display: none }
  .trust-item:nth-child(n+4) { display: none }
}

/* ── 769px – 1024px ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-strip  { display: none }
  .mkt-index  { grid-template-columns: repeat(3,1fr) }
  .mkt-item:nth-child(4n)        { border-right: 1px solid var(--border) }
  .mkt-item:nth-child(3n)        { border-right: none }
  .mkt-item:nth-last-child(-n+4) { border-bottom: 1px solid var(--border) }
  .mkt-item:nth-last-child(-n+3) { border-bottom: none }
  .perf-grid  { grid-template-columns: 1fr 1fr }
  .hiw-grid   { grid-template-columns: 1fr 1fr }
  .hiw-step:nth-child(2) { border-right: none }
  .hiw-step:nth-child(3),.hiw-step:nth-child(4) { border-top: 1px solid var(--border) }
  .hiw-step:nth-child(4) { border-right: none }
  .rank-grid  { grid-template-columns: 1fr 1fr }
  .rank-art:nth-child(2) { border-right: none }
  .rank-art:nth-child(3) { border-top: 1px solid var(--border); grid-column: 1 / -1; border-right: none }
  .team-grid  { grid-template-columns: 1fr 1fr }
  .cta-inner  { grid-template-columns: 1fr }
  .cta-right  { border-left: none; border-top: 1px solid var(--rule); padding: 28px 0 0 }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr }
}

@media (min-width: 769px) { .burger { display: none } }
@media (min-width: 769px) { .nav-links { display: flex } }
/* Restore nav-strip only on larger screens */
@media (min-width: 769px) { .nav-strip { display: flex } }

@media print {
  .nav-wrap, .ticker, .back-top, .mob-overlay, .resp-banner, .burger { display: none !important }
  body { background: #fff; color: #000 }
}

/* ════════════════════════════════════════════════════
   SEO EDITORIAL ARTICLE
════════════════════════════════════════════════════ */
.seo-article-section { background: var(--bg); border-top: 1px solid var(--rule) }
.seo-article {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(28px,4vw,52px) clamp(22px,5vw,56px) clamp(24px,4vw,44px);
  max-width: 900px; margin: 0 auto;
}
.seo-art-header { margin-bottom: 28px; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.seo-art-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-family: var(--ff-mono); font-size: clamp(.56rem,.65vw,.6rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.seo-art-kicker { color: var(--acc); }
.seo-art-dot    { color: var(--text4); }
.seo-art-byline strong { color: var(--text2); font-weight: 700; }
.seo-art-hed { font-family: var(--ff-serif); font-size: clamp(1.45rem,2.5vw,2rem); font-weight: 900; line-height: 1.12; letter-spacing: -.025em; color: var(--text); margin: 0 0 16px; }
.seo-art-intro { font-family: var(--ff-sans); font-size: clamp(.84rem,.95vw,.92rem); line-height: 1.78; color: var(--text2); font-style: italic; border-left: 2px solid var(--acc); padding-left: 18px; margin: 0; }
.seo-art-body { color: var(--text2); line-height: 1.82; }
.seo-art-body h3 { font-family: var(--ff-serif); font-size: clamp(1.05rem,1.3vw,1.25rem); font-weight: 900; letter-spacing: -.02em; color: var(--text); margin: 36px 0 12px; padding-top: 6px; border-top: 1px solid var(--rule); }
.seo-art-body h4 { font-family: var(--ff-mono); font-size: clamp(.6rem,.7vw,.65rem); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin: 24px 0 10px; }
.seo-art-body p { font-family: var(--ff-sans); font-size: clamp(.82rem,.93vw,.9rem); margin: 0 0 16px; line-height: 1.82; }
.seo-art-body p:last-child { margin-bottom: 0; }
.seo-art-body a { color: var(--acc-lt); text-decoration: underline; text-decoration-color: var(--acc-b); transition: color var(--t); }
.seo-art-body a:hover { color: var(--acc) }
.seo-art-body strong { color: var(--text); font-weight: 700; }
.seo-art-footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.seo-art-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.seo-tag { font-family: var(--ff-mono); font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--acc-b); color: var(--acc); background: var(--acc-m); }
.seo-art-updated { font-family: var(--ff-mono); font-size: .57rem; font-weight: 500; letter-spacing: .06em; color: var(--text3); }
@media (max-width: 768px) { .seo-article { padding: 28px 18px; } .seo-art-hed { font-size: 1.3rem; } .seo-art-body h3 { font-size: 1.05rem; margin-top: 28px; } }
@media (max-width: 480px) { .seo-article { border-radius: var(--r); } .seo-art-meta { gap: 6px; } .seo-art-dot { display: none; } }


/* ════════════════════════════════════════════════════
   1X2 PREDICTIONS PAGE
   Clean mobile-first layout. Three strict breakpoints:
     < 768px   — 3-col: [match] [tip+conf] [chevron]
     768–1024px — adds odds column + form
     1024px+   — full 6-col desktop table
════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────── */
.bc-list { display:flex; align-items:center; gap:6px; list-style:none; padding:0; margin:0 0 10px; flex-wrap:wrap; }
.bc-link { font-family:var(--ff-mono); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); transition:color var(--t); }
.bc-link:hover { color:var(--acc) }
.bc-sep     { font-family:var(--ff-mono); font-size:.6rem; color:var(--text4) }
.bc-current { font-family:var(--ff-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }

/* ── Page header bar ────────────────────────────── */
.page-header-bar { background:var(--bg2); border-bottom:1px solid var(--rule); padding:clamp(16px,3vw,28px) 0; }
.phb-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.phb-left  { flex:1; min-width:0; }
.phb-title { display:flex; align-items:center; gap:10px; font-family:var(--ff-serif); font-size:clamp(1.2rem,3.5vw,1.9rem); font-weight:900; letter-spacing:-.025em; color:var(--text); margin:6px 0 4px; line-height:1.15; flex-wrap:wrap; }
.phb-mkt-icon { display:inline-flex; align-items:center; justify-content:center; background:var(--acc); color:#fff; font-family:var(--ff-mono); font-size:.7rem; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:var(--r-sm); flex-shrink:0; }
.phb-sub { font-family:var(--ff-sans); font-size:clamp(.72rem,.83vw,.8rem); color:var(--text2); line-height:1.55; }
.phb-sub strong { color:var(--text) }
.phb-right { display:flex; align-items:center; gap:0; flex-shrink:0; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:8px 0; overflow:hidden; }
.phb-stat  { display:flex; flex-direction:column; align-items:center; padding:0 clamp(10px,1.8vw,20px); }
.phb-stat-n { font-family:var(--ff-serif); font-size:clamp(.9rem,1.5vw,1.3rem); font-weight:900; color:var(--acc); line-height:1; letter-spacing:-.02em; }
.phb-stat-l { font-family:var(--ff-sans); font-size:clamp(.48rem,.58vw,.55rem); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-top:2px; white-space:nowrap; }
.phb-stat-div { width:1px; height:28px; background:var(--rule); flex-shrink:0 }

/* ── Market nav bar ─────────────────────────────── */
.mkt-nav-bar { background:var(--bg3); border-bottom:1px solid var(--rule); }
.mkt-nav-inner { display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; padding:8px 0; -webkit-overflow-scrolling:touch; }
.mkt-nav-inner::-webkit-scrollbar { display:none }
.mkt-nav-lbl { font-family:var(--ff-mono); font-size:.53rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text4); white-space:nowrap; flex-shrink:0; padding-right:10px; border-right:1px solid var(--rule); margin-right:4px; }
.mkt-nav-link { font-family:var(--ff-sans); font-size:clamp(.68rem,.76vw,.72rem); font-weight:600; color:var(--text3); padding:5px 11px; border-radius:var(--r-sm); transition:all var(--t); white-space:nowrap; flex-shrink:0; }
.mkt-nav-link:hover      { color:var(--text); background:rgba(255,255,255,.05) }
.mkt-nav-link--all       { color:var(--acc); font-weight:700 }
.mkt-nav-link--all:hover { background:var(--acc-m) }

/* ── Layout ─────────────────────────────────────── */
.pred-page-layout { padding:clamp(16px,3.5vw,36px) 0 clamp(32px,6vw,64px); }

/* ── Filter bar ─────────────────────────────────── */
.pred-filter-bar { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--acc); gap:8px; flex-wrap:wrap; }
.pred-count-badge { font-family:var(--ff-mono); font-size:.54rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); background:var(--acc-m); border:1px solid var(--acc-b); padding:3px 9px; border-radius:var(--r-sm); white-space:nowrap; flex-shrink:0; }

/* ── Column headers — hidden on mobile, shown desktop ── */
.ptable-head { display:none; }

/* ── League group ───────────────────────────────── */
.league-group        { margin-bottom:4px }
.league-group.hidden { display:none }
.lg-header { display:flex; align-items:center; gap:8px; padding:10px 0 8px; border-bottom:1px solid var(--rule); margin-top:14px; flex-wrap:wrap; }
.lg-flag   { font-size:.9rem; line-height:1; flex-shrink:0; }
.lg-name   { font-family:var(--ff-sans); font-size:clamp(.75rem,.86vw,.8rem); font-weight:700; color:var(--text); }
.lg-name em { font-style:normal; color:var(--acc); font-weight:700; }
.lg-badge  { font-family:var(--ff-mono); font-size:.48rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text4); background:var(--bg3); border:1px solid var(--border); padding:1px 6px; border-radius:var(--r-sm); }
.lg-count  { font-family:var(--ff-mono); font-size:.48rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-left:auto; }

/* ══════════════════════════════════════════════════
   ROW — MOBILE BASE  (all screens, overridden up)
   3 columns: [match] [tip+conf] [chevron]
══════════════════════════════════════════════════ */
.ptable-row {
  display:grid;
  grid-template-columns: 1fr auto 36px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "match  tip   act"
    "match  conf  act"
    "panel  panel panel";
  column-gap: 12px;
  align-items: center;
  padding: clamp(12px,1.4vw,16px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--t);
}
.ptable-row:hover  { background:rgba(255,255,255,.013) }
.ptable-row.hidden { display:none }

/* ── Match column ─────────────────────────────── */
.ptable-match {
  grid-area: match;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.pm-time  { font-family:var(--ff-mono); font-size:.56rem; font-weight:600; letter-spacing:.1em; color:var(--text3); }
.pm-teams { display:flex; align-items:baseline; gap:5px; flex-wrap:nowrap; min-width:0; overflow:hidden; }
.pm-home  { font-family:var(--ff-sans); font-size:clamp(.85rem,2.5vw,.95rem); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-vs    { font-family:var(--ff-mono); font-size:.52rem; color:var(--text4); flex-shrink:0; }
.pm-away  { font-family:var(--ff-sans); font-size:clamp(.8rem,2.2vw,.88rem); font-weight:500; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Grid area assignments (mobile) */
.ptable-match    { grid-area:match; align-self:center; }
.ptable-tip      { grid-area:tip;   display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:2px; }
.ptable-odds     { display:none; }
.ptable-form     { display:none; }
.ptable-conf     { grid-area:conf;  display:flex; flex-direction:column; gap:3px; align-items:flex-start; padding-bottom:2px; }
.ptable-act      { grid-area:act;   display:flex; align-items:center; justify-content:center; align-self:center; }
.ptable-analysis { grid-area:panel; }

/* ── Tip badge ───────────────────────────────── */
.tip-badge { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:.82rem; font-weight:700; }
.tip-1 { background:rgba(37,99,235,.12); color:var(--acc);   border:1.5px solid var(--acc-b) }
.tip-x { background:rgba(217,119,6,.1);  color:var(--amber); border:1.5px solid rgba(217,119,6,.25) }
.tip-2 { background:rgba(22,163,74,.1);  color:var(--green); border:1.5px solid rgba(22,163,74,.25) }
.tip-label { font-family:var(--ff-mono); font-size:.44rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); text-align:center; white-space:nowrap; }

/* ── Odds ─────────────────────────────────── */
.odds-val { font-family:var(--ff-mono); font-size:clamp(.84rem,.98vw,.92rem); font-weight:700; color:var(--text); letter-spacing:-.01em; }

/* ── Form badges (hidden mobile, shown desktop) ── */
.form-row     { display:flex; align-items:center; gap:2px }
.form-team-lbl { font-family:var(--ff-mono); font-size:.46rem; font-weight:700; letter-spacing:.04em; color:var(--text4); width:24px; flex-shrink:0; text-align:right; margin-right:3px; }

/* ── Confidence ───────────────────────── */
.conf-bar     { width:60px; height:3px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden }
.conf-fill    { height:100%; width:var(--w); background:var(--acc); border-radius:2px }
.conf-fill--dim { background:var(--text3) }
.conf-label   { font-family:var(--ff-mono); font-size:.54rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.conf-excep   { color:#a78bfa }
.conf-vhigh   { color:var(--acc) }
.conf-high    { color:var(--blue-lt) }
.conf-good    { color:var(--green) }
.conf-mod     { color:var(--amber) }

/* ── Expand / chevron button ──────────── */
.expand-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-family:var(--ff-sans); font-size:.58rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--text3); border:1px solid var(--border);
  width:32px; height:32px; border-radius:var(--r-sm);
  transition:all var(--t); flex-shrink:0;
}
.expand-btn:hover { color:var(--acc); border-color:var(--acc-b); background:var(--acc-m); }
.expand-btn .expand-txt { display:none; }
.expand-btn .exp-ico    { font-size:.52rem; transition:transform var(--t); }
.expand-btn .exp-ico.open { transform:rotate(180deg) }

/* ── Analysis panel ───────────────────── */
.ptable-analysis {
  grid-area:panel; display:none;
  background:var(--bg3); border-left:2px solid var(--acc);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:12px 14px; margin:4px 0 2px;
}
.ptable-analysis.open { display:block; animation:fadein .2s ease }

.analysis-grid   { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.analysis-block  { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; }
.ab-label        { font-family:var(--ff-mono); font-size:.48rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:3px; }
.ab-val          { font-family:var(--ff-mono); font-size:.78rem; font-weight:700; color:var(--text); line-height:1.2; }
.ab-sub          { font-family:var(--ff-sans); font-size:.58rem; font-weight:400; color:var(--text3); }
.analysis-verdict { font-family:var(--ff-sans); font-size:.8rem; color:var(--text2); line-height:1.7; margin:0; }
.analysis-verdict strong { color:var(--text); font-weight:700 }
.analysis-verdict a      { color:var(--acc-lt); text-decoration:underline }

/* ── Disclaimer ───────────────────────── */
.pred-disclaimer { margin-top:20px; padding:11px 14px; background:var(--bg3); border-radius:var(--r-sm); border:1px solid var(--border); }
.pred-disclaimer p { font-family:var(--ff-sans); font-size:.68rem; color:var(--text3); line-height:1.65; margin:0; }
.pred-disclaimer a { color:var(--acc-lt); text-decoration:underline; text-decoration-color:rgba(96,165,250,.3) }

/* ── Small phone extras (≤ 599px) ─────── */
@media (max-width:599px) {
  .phb-right    { display:none }
  .mkt-nav-lbl  { display:none }
  .phb-title    { font-size:clamp(1.1rem,5vw,1.4rem); }
  .conf-bar     { width:50px; }
}

/* ══════════════════════════════════════════════════
   TABLET  768px — adds odds + widens confidence
══════════════════════════════════════════════════ */
@media (min-width:768px) {
  .ptable-row {
    grid-template-columns: 1fr 52px 120px 36px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "match  tip  conf  act"
      "panel  panel panel panel";
    column-gap: 14px;
    align-items: center;
  }
  .ptable-match { align-self:center; }
  .ptable-tip   { flex-direction:column; align-self:center; padding-top:0; }
  .ptable-conf  { align-self:center; padding-bottom:0; min-width:100px; }
  .conf-bar     { width:90px; }
  .ptable-odds  { display:none; }
  .ptable-form  { display:none; }
}

/* ══════════════════════════════════════════════════
   DESKTOP  1024px — full 6-col table with headers
══════════════════════════════════════════════════ */
@media (min-width:1024px) {
  .ptable-head {
    display:grid;
    grid-template-columns: 1fr 56px 60px 124px 144px 80px;
    gap:14px; padding:10px 0 8px;
    border-bottom:1px solid var(--rule);
  }
  .ptable-head span { font-family:var(--ff-mono); font-size:.52rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); }
  .pth-tip,.pth-odds,.pth-conf,.pth-act { text-align:center }

  .ptable-row {
    grid-template-columns: 1fr 56px 60px 124px 144px 80px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "match tip odds form conf act"
      "panel panel panel panel panel panel";
    column-gap: 14px;
    align-items: center;
  }
  .ptable-match { align-self:center; }
  .ptable-tip   { align-self:center; flex-direction:column; padding-top:0; }
  .ptable-odds  { display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:center; }
  .ptable-form  { display:flex; flex-direction:column; gap:3px; align-self:center; }
  .ptable-conf  { display:flex; flex-direction:column; gap:4px; align-items:flex-start; align-self:center; padding-bottom:0; min-width:unset; }
  .conf-bar     { width:100%; }
  .ptable-act   { display:flex; align-items:center; justify-content:center; align-self:center; }
  .expand-btn   { width:auto; height:auto; padding:6px 12px; }
  .expand-btn .expand-txt { display:inline; }

  /* Analysis grid: 4 columns on desktop */
  .analysis-grid { grid-template-columns:repeat(4,1fr); }
}

/* ── Wide desktop 1280px ────────────── */
@media (min-width:1280px) {
  .ptable-head,
  .ptable-row { grid-template-columns: 1fr 66px 64px 130px 150px 84px; }
}