/* PreBetTips — redesign v2
   Light-first editorial look with a dark theme (html[data-theme="dark"]).
   All class names / ids used by app.js are preserved. */
:root{
  --bg:#f4f5f0; --surface:#ffffff; --surface2:#f0f2ec; --line:#e2e5dc;
  --text:#14231b; --muted:#667568; --faint:#8b978e;
  --brand:#0c7a4d; --brand-ink:#ffffff; --brand-soft:#e3f3ea;
  --accent:#0c7a4d; --accent2:#b7791f;
  --home:#0c7a4d; --draw:#a86a12; --away:#c2384a;
  --blue:#1d6fd6; --home-soft:#e3f3ea; --draw-soft:#fbf0d9; --away-soft:#fbe6e9;
  --hero-a:#0d3b2a; --hero-b:#0c7a4d; --hero-ink:#ffffff;
  --shadow:0 1px 2px rgba(20,35,27,.05),0 6px 20px rgba(20,35,27,.06);
  --radius:14px; --radius-sm:9px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0a100d; --surface:#111a15; --surface2:#17231c; --line:#22322a;
  --text:#e9f1ec; --muted:#8fa398; --faint:#6b8074;
  --brand:#3ddc97; --brand-ink:#04140c; --brand-soft:rgba(61,220,151,.12);
  --accent:#3ddc97; --accent2:#f0b84a;
  --home:#3ddc97; --draw:#f0b84a; --away:#ff6b7d;
  --blue:#5aa2ff; --home-soft:rgba(61,220,151,.13); --draw-soft:rgba(240,184,74,.13); --away-soft:rgba(255,107,125,.13);
  --hero-a:#0f2a1e; --hero-b:#14543a; --hero-ink:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{max-width:100%;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;overflow-x:hidden;max-width:100%;font-family:var(--font);font-size:15px;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:62px}
img,video,iframe,embed,object,canvas,svg{max-width:100%;height:auto}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:800;color:var(--text);text-decoration:none;letter-spacing:-.3px;white-space:nowrap}
.logo-mark{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center}
.logo-mark svg{width:18px;height:18px}
.logo span.logo-tx{color:var(--text)}
.logo span.logo-tx span{color:var(--brand)}
.main-nav{display:flex;gap:2px;flex:1;margin-left:10px}
.nav-btn{background:transparent;border:0;color:var(--muted);font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.nav-btn:hover{color:var(--text);background:var(--surface2)}
.nav-btn.active{color:var(--brand);background:var(--brand-soft)}
.header-tools{display:flex;align-items:center;gap:10px}
.header-search input{background:var(--surface2);border:1px solid transparent;color:var(--text);border-radius:999px;padding:9px 16px;font-size:14px;width:200px;transition:border-color .15s,background .15s}
.header-search input::placeholder{color:var(--faint)}
.header-search input:focus{outline:0;border-color:var(--brand);background:var(--surface)}
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1;transition:background .15s}
.theme-toggle:hover{background:var(--surface2)}
.menu-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:24px;cursor:pointer;padding:8px;line-height:1}

/* ---------- Hero ---------- */
.hero{margin:10px 0 0;border-radius:14px;color:var(--hero-ink);background:radial-gradient(700px 220px at 85% -20%,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,var(--hero-a),var(--hero-b));padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-40px;bottom:-110px;width:200px;height:200px;border-radius:50%;border:26px solid rgba(255,255,255,.06);pointer-events:none}
.hero-copy{max-width:720px;position:relative;z-index:1;flex:1 1 auto}
.hero-eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.16);padding:2px 8px;border-radius:999px;margin-bottom:4px}
.hero h1{margin:0 0 2px;font-size:clamp(16px,1.6vw,19px);line-height:1.2;letter-spacing:-.3px;font-weight:800;white-space:nowrap}
.hero p{margin:0;opacity:.88;font-size:12px;line-height:1.35}
.hero-stats{display:flex;gap:8px;position:relative;z-index:1;flex:0 0 auto}
.hero-stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px 12px;min-width:76px;text-align:center}
.hero-stat b{display:block;font-size:17px;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums}
.hero-stat span{font-size:10px;opacity:.82;font-weight:600;white-space:nowrap}

/* ---------- Layout ---------- */
.layout{display:flex;gap:22px;align-items:flex-start;margin-top:22px}
.content{flex:1;min-width:0;max-width:100%}
.view{max-width:100%}

/* ---------- Sidebar ---------- */
.side-toggle{display:none;width:100%;background:var(--surface);border:0;border-bottom:1px solid var(--line);color:var(--text);font-weight:700;font-size:14px;padding:13px 16px;cursor:pointer;text-align:left}
.side-caret{float:right;color:var(--muted);font-size:11px;transition:transform .15s}
.side-toggle.open .side-caret{transform:rotate(180deg)}
.sidebar{width:260px;flex:0 0 260px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14px;position:sticky;top:84px;box-shadow:var(--shadow)}
.side-group{padding:8px 0 10px;border-bottom:1px solid var(--line)}
.side-title{padding:10px 18px 6px;font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);font-weight:700}
.side-item{display:flex;align-items:center;gap:10px;width:calc(100% - 16px);margin:1px 8px;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--text);text-align:left;padding:8px 10px;cursor:pointer;font-size:14px;transition:background .12s}
.side-item:hover{background:var(--surface2)}
.side-item.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.side-item .ico{width:20px;text-align:center;flex:0 0 20px;font-size:15px}
.side-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item .cnt{flex:0 0 auto;background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;min-width:20px;text-align:center}
.side-item .caret{color:var(--faint);font-size:13px}
.side-search{padding:4px 14px 8px;display:flex;align-items:center;gap:8px}
.side-search input{flex:1;min-width:0;background:var(--surface2);border:1px solid transparent;color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px}
.side-search input:focus{outline:0;border-color:var(--brand)}
.side-search .ico{display:none}
.country-list{max-height:260px;overflow:auto}
.country-list .side-item .cnt{background:var(--surface2);color:var(--muted)}

/* ---------- Period nav (sidebar) + Featured matches ---------- */
.side-periods{padding:8px 0}
.side-periods .side-item{padding:9px 10px;font-weight:600}
.side-periods .side-item .lbl{white-space:normal;line-height:1.3}
.side-periods .side-item .cnt[hidden]{display:none}
.side-periods .side-top{color:var(--brand);font-weight:800}
.featured{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px;margin:0 0 12px;text-align:center;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.featured-title{display:none}
.day-strip{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.day-pill{border:1px solid var(--line);background:var(--surface2);color:var(--text);font-weight:700;font-size:12px;padding:5px 15px;border-radius:999px;cursor:pointer;line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.day-pill:hover{border-color:var(--brand)}
.day-pill.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.date-range{margin:0;font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:520px){
  .featured{padding:8px;gap:8px}
  .featured-title{display:none}
  .day-strip{gap:4px}
  .day-pill{padding:4px 10px;font-size:11px}
}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;flex-direction:column;gap:14px;margin:0 0 16px}
.toolbar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.mode-switch{display:flex;gap:4px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;align-self:flex-start;box-shadow:var(--shadow)}
.mode-btn{border:0;cursor:pointer;background:transparent;color:var(--muted);font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px;transition:background .15s,color .15s;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--brand);color:var(--brand-ink)}
.sel-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--away);color:#fff;font-size:11px;font-weight:800;line-height:1}
.sel-count[hidden]{display:none}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.filters label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.filters select{background:var(--surface2);border:1px solid transparent;color:var(--text);border-radius:var(--radius-sm);padding:9px 12px;font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;min-width:150px;cursor:pointer}
.filters select:focus{outline:0;border-color:var(--brand)}
.engine-toggle{display:flex;flex-direction:row;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 14px;box-shadow:var(--shadow)}
.engine-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.engine-seg{display:flex;background:var(--surface2);border-radius:var(--radius-sm);padding:3px}
.engine-seg .eng-btn{border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:700;font-size:13px;padding:7px 16px;line-height:1;border-radius:7px;transition:background .15s,color .15s}
.engine-seg .eng-btn:hover{color:var(--text)}
.engine-seg .eng-btn.active{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* ---------- Table ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow)}
.pred-table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.pred-table thead th{background:var(--surface);color:var(--faint);text-align:center;padding:12px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;border-bottom:2px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:15;box-shadow:0 2px 4px rgba(0,0,0,0.04)}
.pred-table th.col-match,.pred-table td.col-match{text-align:left;min-width:200px}
.pred-table th.col-league,.pred-table td.col-league{text-align:left}
.pred-table tbody td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.pred-table tbody tr:last-child td{border-bottom:0}
.pred-table tbody tr:hover{background:var(--surface2)}
.pred-table th.col-pick,.pred-table td.col-pick{width:48px;text-align:center;white-space:nowrap;padding-left:14px}
input.pick-cb{width:18px;height:18px;cursor:pointer;accent-color:var(--brand)}
.date-cell{display:flex;flex-direction:column;line-height:1.25;align-items:center}
.date-cell b{font-weight:700;font-size:13px}
.date-cell .time{font-size:12px;color:var(--muted)}
.match-cell{display:flex;flex-direction:column;gap:6px;text-align:left}
.mc-team{display:flex;align-items:center;gap:9px;font-weight:600;line-height:1.2}
.crest{flex:0 0 24px;width:24px;height:24px;border-radius:8px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:800;display:grid;place-items:center;letter-spacing:.2px}
.mc-league{display:none;font-size:11px;color:var(--faint);font-weight:600}
.mc-date{display:none;font-size:11px;color:var(--faint);font-weight:600}
/* Date + match status share ONE horizontal line (never wrap to a new row). */
.mc-meta{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;line-height:1.2}
.mc-meta .match-status{margin-top:0}
/* Compact feed layout: date sits under the team names in the Match cell, and
   the standalone Date column is removed (except Stats mode which keeps it). */
#view-predictions .match-cell .mc-date{display:block}
/* Date + time on ONE line inside the Match cell. */
#view-predictions .match-cell .mc-date .date-cell{flex-direction:row;align-items:center;justify-content:flex-start;gap:5px}
#view-predictions .pred-table:not(.stats-mode) th.col-date,
#view-predictions .pred-table:not(.stats-mode) td.col-date{display:none}
.league-cell{color:var(--muted);font-size:13px;white-space:nowrap}
.prob{position:relative;font-weight:700;min-width:56px;display:inline-block;color:var(--muted);font-variant-numeric:tabular-nums}
.prob .bar{display:block;height:4px;border-radius:3px;margin-top:5px;background:var(--line)}
.prob.best-1{color:var(--home)}.prob.best-1 .bar{background:var(--home)}
.prob.best-X{color:var(--draw)}.prob.best-X .bar{background:var(--draw)}
.prob.best-2{color:var(--away)}.prob.best-2 .bar{background:var(--away)}
.tip{font-weight:800;padding:5px 11px;border-radius:8px;display:inline-block;min-width:32px}
.tip.t1{background:var(--home-soft);color:var(--home)}
.tip.tX{background:var(--draw-soft);color:var(--draw)}
.tip.t2{background:var(--away-soft);color:var(--away)}
.score{font-weight:800;font-variant-numeric:tabular-nums;background:var(--surface2);border-radius:8px;padding:4px 10px;display:inline-block}
/* Result / Live column */
.pred-table th.col-live,.pred-table td.col-live{min-width:88px;text-align:center;white-space:nowrap}
.rl{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;gap:1px}
.rl-score{font-weight:800;font-variant-numeric:tabular-nums;font-size:14px}
.rl-clk{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;opacity:.85}
.rl-live .rl-score{color:var(--home)}
.rl-live .rl-clk{color:var(--home)}
.rl-final .rl-clk{color:var(--muted)}
.rl-pending{color:var(--faint);font-weight:700;font-size:14px}
.ou{font-size:13px;font-weight:700;display:inline-block;padding:4px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.ou.over{color:var(--home);background:var(--home-soft)}
.ou.under{color:var(--muted);background:var(--surface2)}
.empty{padding:36px 24px;text-align:center;color:var(--muted)}
.results-note{margin:4px 0 18px;color:var(--muted);font-size:13px}
.results-heading{margin:26px 0 12px;font-size:17px;font-weight:800;letter-spacing:.2px}
.results-heading:first-of-type{margin-top:14px}

/* Selection slip */
.sel-tools td{background:var(--brand-soft);padding:12px 16px !important;text-align:left !important}
.sel-info{color:var(--text);font-weight:600;font-size:14px}
.sel-clear,.sel-pdf{float:right;cursor:pointer;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;border:0}
.sel-clear{background:transparent;color:var(--away);border:1px solid var(--away)}
.sel-clear:hover{background:var(--away-soft)}
.sel-pdf{margin-left:8px;background:var(--brand);color:var(--brand-ink)}
.sel-pdf:hover{filter:brightness(1.08)}
.pred-table td.col-prob,.pred-table th.col-prob{white-space:nowrap}
td.col-prob .pp{display:inline-block;min-width:44px;text-align:right;color:var(--muted);font-weight:600;font-size:13px}
td.col-prob .pp.hi{color:var(--text);font-weight:800}
td.col-prob .pp+.pp{margin-left:6px}
.sel-remove{border:0;cursor:pointer;background:var(--surface2);color:var(--muted);font-weight:800;font-size:16px;line-height:1;width:28px;height:28px;border-radius:50%}
.sel-remove:hover{background:var(--away);color:#fff}

/* Stats detail */
.exp-caret{display:inline-block;color:var(--brand);font-weight:700;margin-right:6px;transition:transform .15s}
tr.stats-row{cursor:pointer}
tr.stats-row.open .exp-caret{transform:rotate(90deg)}
tr.stats-row.open{background:var(--surface2)}
tr.detail-row>td{background:var(--surface2);padding:0 !important;border-bottom:1px solid var(--line)}
.form-panel{padding:16px 18px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.form-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--brand);margin:0 0 8px}
.form-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;min-width:420px}
.form-table th{background:transparent;color:var(--faint);text-transform:uppercase;font-size:10.5px;letter-spacing:.4px;text-align:center;padding:6px 4px;border-bottom:1px solid var(--line);white-space:nowrap}
.form-table td{text-align:center;padding:8px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--text)}
.form-table tbody tr:last-child td{border-bottom:0}
.form-table td.ft-team,.form-table th.ft-team{text-align:left;font-weight:700;white-space:nowrap;width:30%;overflow:hidden;text-overflow:ellipsis;padding-left:6px}
.form-table td.agf{color:var(--home);font-weight:700}
.form-table td.aga{color:var(--away);font-weight:700}
.form-table td.ppg{font-weight:800}
.form-table th.ovg{color:var(--faint);border-left:1px solid var(--line);white-space:nowrap}
.form-table td.ovg{color:var(--brand);font-weight:700;border-left:1px solid var(--line)}
.results-info{display:grid;grid-template-columns:1fr;gap:12px;padding:8px 18px 18px}
.rs-module{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;font-size:13px;display:flex;flex-direction:column}
.rs-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.rs-tag{background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:10px;padding:2px 8px;border-radius:999px;letter-spacing:.4px}
.rs-title{flex:1;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.6px}
.rs-rows{flex:1}
.rs-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.rs-row:last-child{border-bottom:0}
.rs-date{color:var(--muted);font-size:12px;flex:0 0 52px;font-variant-numeric:tabular-nums}
.rs-teams{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.rs-tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.rs-teams .rs-tn:first-child{text-align:right}
.rs-tn.win{color:var(--text);font-weight:700}
.rs-sc{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--surface2);padding:2px 9px;border-radius:7px}
.rs-lg{flex:0 0 auto;color:var(--muted);font-size:10px;font-weight:700;background:var(--surface2);border-radius:6px;padding:2px 6px}

/* ---------- Results cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.stat-num{display:block;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.stat-lbl{color:var(--muted);font-size:13px;font-weight:600}
.verdict{font-weight:700;padding:4px 10px;border-radius:999px;font-size:12px}
.verdict.win{background:var(--home-soft);color:var(--home)}
.verdict.miss{background:var(--away-soft);color:var(--away)}

/* ---------- Prose ---------- */
.prose{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;margin:0;max-width:820px;box-shadow:var(--shadow)}
.prose h1{margin-top:0;font-size:26px;letter-spacing:-.4px}
.prose code{background:var(--surface2);padding:2px 7px;border-radius:6px;font-size:13px}
.prose .muted,.muted{color:var(--muted)}
.prose li{margin:10px 0}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;color:var(--muted);font-size:13px;text-align:center;background:var(--surface)}
.site-footer p{margin:0 auto;max-width:720px}

/* ---------- Visitors widget ---------- */
.visitors{margin:12px;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));border-radius:12px;padding:14px 16px;color:#fff}
.visitors .vc-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.visitors .vc-icon{color:#7dffc0;font-size:14px;line-height:1}
.visitors .vc-list{list-style:none;margin:0;padding:0}
.visitors .vc-list li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;line-height:1.9}
.visitors .vc-k{color:rgba(255,255,255,.75);font-weight:600}
.visitors .vc-v{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.visitors .vc-list li.online .vc-v{color:#7dffc0}

/* ---------- Ads ---------- */
.ad-slot{display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px dashed var(--line);border-radius:var(--radius);color:var(--faint);text-align:center;overflow:hidden}
.ad-slot .ad-body{display:flex;flex-direction:column;gap:3px;font-weight:600;font-size:12px;padding:6px}
.ad-slot .ad-size{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.ad-leaderboard{height:90px;margin:0 0 18px}
.ad-inline{height:90px;margin:18px 0}
.ad-footer{height:90px;margin:26px 0 0}
.ad-sidebar-mid,.ad-mpu{height:250px;margin:12px}
.ad-anchor{position:fixed;left:0;right:0;bottom:0;height:54px;border-radius:0;border:0;border-top:1px solid var(--line);background:var(--surface);z-index:30;margin:0}
.ad-anchor .ad-size{display:inline;margin-left:6px}
.ad-anchor .ad-body{flex-direction:row;align-items:center;gap:6px}
.ad-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--surface2);border:1px solid var(--line);color:var(--text);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
.ad-close:hover{background:var(--line)}
body.anchor-hidden .ad-anchor{display:none}
body.anchor-hidden{padding-bottom:0}
tr.ad-row:hover{background:transparent !important}

/* ---------- Affiliate ---------- */
.affiliate{margin:28px 0 0}
.affiliate>h2{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--faint);margin:0 0 12px;font-weight:700}
.aff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aff-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.aff-card:hover{transform:translateY(-2px);border-color:var(--brand)}
.aff-rank{position:absolute;top:16px;right:16px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.aff-name{font-size:18px;font-weight:800;letter-spacing:-.2px}
.aff-stars{color:var(--accent2);font-size:14px;letter-spacing:2px}
.aff-offer{color:var(--muted);font-size:14px;flex:1}
.aff-cta{align-self:flex-start;margin-top:6px;background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:14px;text-decoration:none;padding:10px 20px;border-radius:999px}
.aff-cta:hover{filter:brightness(1.08)}
.aff-disc{color:var(--faint);font-size:12px;margin:14px 0 0;text-align:center}


/* ---------- Stats tab: match row + detail panel ---------- */
.sr-num{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.sr-num.sr-tot{color:var(--text);font-weight:800}
.sr-match{font-weight:700}
tr.stats-row td.col-match{white-space:nowrap}
tr.stats-row .exp-caret{margin-right:8px}
tr.detail-row>td{padding:0 !important;background:var(--bg)}
.sp-panel{position:sticky;left:0;padding:6px 14px 18px;max-width:100%}
.sp-title{margin:16px 0 8px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--accent2)}
.sp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.sp-table{width:100%;border-collapse:collapse;font-size:13px;min-width:700px;font-variant-numeric:tabular-nums}
.sp-table th{background:var(--surface2);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:10px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.sp-table th.sp-th-team{text-align:left;padding-left:12px}
.sp-table th.sp-th-ov{color:var(--blue);border-left:1px solid var(--line);font-size:10.5px}
.sp-table th.sp-th-ov2{border-left:0;border-top:1px solid var(--line);padding:8px 6px}
.sp-table th.sp-ov-l,.sp-table td.sp-ov-l{border-left:1px solid var(--line)}
.sp-table td{padding:10px 6px;text-align:center;border-bottom:1px solid var(--line);color:var(--text)}
.sp-table tbody tr:last-child td{border-bottom:0}
.sp-table td.sp-team{text-align:left;padding-left:12px;white-space:nowrap;font-weight:700}
.sp-rank{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:800;vertical-align:middle}
.sp-name{vertical-align:middle}
.sp-tag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:6px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}
.sp-p{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:999px;background:var(--home-soft);border:1px solid var(--home);color:var(--home);font-weight:800}
.sp-agf{color:var(--blue);font-weight:700}
.sp-aga{color:var(--away);font-weight:700}
.sp-ppg{font-weight:800}
.sp-ov{color:var(--blue);font-weight:700}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;align-items:start}
.sp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.sp-card-h{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface2);border-bottom:1px solid var(--line)}
.sp-card-h2h{justify-content:center}
.sp-card-h2h .sp-all{position:absolute;right:12px}
.sp-card-h2h{position:relative}
.sp-pill{padding:2px 9px;border-radius:999px;background:var(--home-soft);border:1px solid var(--home);color:var(--home);font-size:10.5px;font-weight:800;letter-spacing:.3px}
.sp-card-t{flex:1;text-align:center;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.sp-card-h2h .sp-card-t{flex:0 1 auto}
.sp-all{font-size:11px;font-weight:800;color:var(--accent2)}
.sp-card-b{flex:1}
.sp-none{padding:18px 12px;text-align:center;color:var(--faint);font-size:12.5px}
.sp-mr{display:grid;grid-template-columns:74px 1fr auto 1fr;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.sp-mr.has-lg{grid-template-columns:74px 1fr auto 1fr 28px}
.sp-mr:last-child{border-bottom:0}
.sp-d{color:var(--faint);font-size:11.5px}
.sp-h{text-align:right;color:var(--muted)}
.sp-a{text-align:left;color:var(--muted)}
.sp-h.b,.sp-a.b{color:var(--text);font-weight:800}
.sp-s{text-align:center;white-space:nowrap}
.sp-s b{font-weight:800;color:var(--text)}
.sp-s i{font-style:normal;color:var(--faint);font-size:11px;margin-left:4px}
.sp-lg{justify-self:end;min-width:26px;text-align:center;padding:2px 4px;border-radius:6px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:9.5px;font-weight:800}
.sp-card-f{display:flex;justify-content:space-between;gap:6px;padding:9px 12px;border-top:1px solid var(--line);background:var(--surface2);font-size:11px;font-weight:700;min-height:35px}
.sp-card-f .sp-fw{color:var(--home)}
.sp-card-f .sp-fd{color:var(--muted)}
.sp-card-f .sp-fl{color:var(--away)}
@media(max-width:1100px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sp-grid{grid-template-columns:1fr}.sp-panel{padding:4px 8px 14px}}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .side-toggle{display:block}
  .sidebar{width:100%;flex:1 1 100%;position:static}
  .layout{flex-direction:column;gap:14px}
  .sidebar .side-group,.sidebar .country-list,.sidebar .ad-sidebar-mid,.sidebar .ad-mpu,.sidebar .visitors{display:none}
  .sidebar.open .side-group,.sidebar.open .ad-mpu,.sidebar.open .visitors{display:block}
  .sidebar.open .country-list{display:block}
  .header-search{display:none}
}
@media(max-width:820px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .aff-grid{grid-template-columns:1fr}
  .pred-table th.col-league,.pred-table td.col-league{display:none}
  .mc-league{display:block}
  .pred-table{min-width:600px}
}
@media(max-width:720px){
  .main-nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 12px;display:none;z-index:19;margin:0;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}
  .nav-btn{text-align:left;border-radius:var(--radius-sm)}
  .menu-toggle{display:block}
  .logo{flex:1}
  /* hero, toolbar, table-card rules are in the MOBILE CARD LAYOUT block above */
}
@media(max-width:520px){
  .container{padding:0 12px}
  /* Rules below already covered by the comprehensive 720px card block */
  .cards{gap:10px}
  .stat-num{font-size:26px}
  .prose{padding:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* Real-data freshness and match status */
.data-status{display:none !important;}
.match-status{font-size:10px;font-weight:700;opacity:.8;margin-top:3px;}

/* API-Football bookmaker odds */
.col-odds {min-width:112px;text-align:center;vertical-align:middle;}
.odds-badge {display:inline-block;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-variant-numeric:tabular-nums;}
.odds-book {display:block;font-size:10px;color:var(--muted);margin-top:3px;max-width:140px;white-space:normal;}
.odds-missing {color:var(--muted);}
.odds-detail {margin-top:5px;font-size:10px;color:var(--muted);white-space:normal;min-width:110px;}
.odds-detail summary {cursor:pointer;}
.odds-detail[open] {min-width:160px;}
.odds-detail span,.odds-detail small {display:block;margin-top:4px;}
.odds-note {padding:10px 14px;margin:0;color:var(--muted);font-size:11px;line-height:1.5;border-top:1px solid var(--line);}

/* Expandable country/competition catalog */
.country-list{max-height:560px;overflow-y:auto;overscroll-behavior:contain}
.country-group[hidden],.country-leagues[hidden],.country-league-row[hidden]{display:none!important}
.country-heading{display:flex;align-items:center;margin:1px 8px;border-radius:var(--radius-sm)}
.country-heading .country-select{width:auto;flex:1;min-width:0;margin:0}
.country-expand{width:32px;height:32px;flex:0 0 32px;background:transparent;border:0;border-radius:8px;color:var(--muted);cursor:pointer}
.country-expand:hover{background:var(--brand-soft);color:var(--brand)}
.country-expand .caret{display:inline-block;font-size:21px;transition:transform .15s}
.country-expand[aria-expanded="true"] .caret{transform:rotate(90deg)}
.country-leagues{margin:0 8px 8px 19px;padding:3px 0 4px 5px;border-left:1px solid var(--line)}
.country-league-row{display:flex;align-items:center;gap:2px}
.country-league-row .country-league{width:auto;flex:1;min-width:0;margin:1px 0;padding:6px 5px;font-size:12px;gap:5px}
.country-league .lbl{white-space:normal;line-height:1.3}
.country-list .country-league .cnt{background:var(--brand);color:var(--brand-ink);font-size:10px;min-width:18px;padding:1px 5px}
.league-favorite{flex:0 0 23px;width:23px;padding:3px 0;background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.league-favorite.starred{color:#d99813}
.country-empty{font-size:12px;color:var(--muted);padding:6px;margin:0}
.country-expand:focus-visible,.league-favorite:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Compact League Badge (Forebet Style) ---------- */
.col-league {
  width: 68px;
  min-width: 60px;
  max-width: 78px;
  text-align: center !important;
  padding: 6px 4px !important;
}
.pred-table th.col-league {
  text-align: center !important;
}
.league-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.15;
  cursor: help;
  user-select: none;
  vertical-align: middle;
}
.league-badge .lb-flag {
  font-size: 16px;
  display: inline-block;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.league-badge .lb-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink, #1f2937);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
body.theme-dark .league-badge .lb-code {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Dedicated league pages */
.lp-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.lp-title h1{font-size:22px;margin:0}.lp-title p{margin:3px 0;color:var(--muted);font-size:12px}
.lp-grid{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:14px;align-items:start}
.lp-main{min-width:0}.lp-controls,.lp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;margin-bottom:12px}
.lp-tabs,.lp-options{display:flex;gap:8px;flex-wrap:wrap}.lp-options{margin-top:10px}
.lp-options label,.lp-card label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.lp-options select,.lp-card input{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:7px;padding:7px;font-size:12px;max-width:100%}
.lp-button{cursor:pointer;background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700}
.lp-button.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.lp-table{min-width:650px;font-size:12px}.lp-table td{padding:10px 6px}.lp-table th{padding:10px 6px!important;font-size:10px!important}
.lp-table .lp-match{min-width:170px;text-align:left}.lp-table .mc-league{display:none}.lp-table .mc-team{font-size:12px}
.lp-table-wrap{max-height:70vh;overflow:auto;overscroll-behavior:contain}
.lp-table thead th{top:0;z-index:3}.lp-table .lp-round th{background:var(--surface2);text-align:left;border-bottom:1px solid var(--line);color:var(--muted)}
.lp-card h2{font-size:14px;margin:0 0 10px}.lp-card h3{font-size:11px;margin:10px 0 5px;color:var(--muted)}
.lp-card .lp-button{margin-top:8px}.lp-standings-scroll{overflow:auto}.lp-standings{width:100%;border-collapse:collapse;font-size:10px}
.lp-standings th,.lp-standings td{padding:5px 3px;border-bottom:1px solid var(--line);text-align:center}
.lp-standings th:nth-child(2),.lp-standings td:nth-child(2){text-align:left;min-width:72px;max-width:120px;overflow-wrap:anywhere}
.lp-standings tr:nth-child(even){background:var(--surface2)}.lp-muted{display:block;color:var(--muted);font-size:10px}
.lp-note{font-size:11px;color:var(--muted);line-height:1.6}.lp-more{margin-top:12px}
@media(max-width:1100px){.lp-grid{grid-template-columns:minmax(0,1fr)}.lp-aside{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px}}
@media(max-width:650px){.lp-title{align-items:flex-start}.lp-title h1{font-size:18px}.lp-aside{grid-template-columns:minmax(0,1fr)}.lp-table-wrap{max-height:65vh}.lp-options label{flex:1;min-width:100px}}


/* Score pill - strictly single line, no wrapping */
.score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
  white-space: nowrap !important;
  word-break: keep-all !important;
  min-width: 48px;
  text-align: center;
}

td.col-score, th.col-score {
  white-space: nowrap !important;
  min-width: 58px;
}

/* Site Settings inside .featured */
.featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
}

.day-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.date-range {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
  white-space: nowrap;
}

.site-settings {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-width: 250px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.settings-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin: 0;
}

.settings-icon {
  font-size: 13px;
  opacity: 0.8;
}

.settings-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  outline: none;
  min-width: 140px;
  transition: border-color .15s ease;
}

.settings-select:focus {
  border-color: var(--accent);
}

@media (max-width: 800px) {
  .featured {
    justify-content: center;
  }
  .site-settings {
    width: 100%;
    min-width: 0;
  }
}

/* Two-round league view: page scroll only, compact country navigation. */
@media(min-width:1001px){
  .sidebar{width:200px;flex-basis:200px;font-size:12px}
  .layout{gap:14px}
  .sidebar .side-item{font-size:12px;padding:7px 6px;gap:6px}
  .sidebar .side-title{padding-left:12px;padding-right:12px}
  .sidebar .side-item .cnt{font-size:10px;padding:1px 5px}
  .sidebar .side-item .ico{width:17px;flex-basis:17px}
  .lp-grid{grid-template-columns:minmax(0,1fr) 230px;gap:12px}
  .lp-aside{display:block}
}
.lp-table-wrap{max-height:none!important;overflow:visible;overscroll-behavior:auto}
.lp-table{min-width:0;width:100%;table-layout:fixed;font-size:11px}
.lp-table tbody td{padding:9px 3px;overflow-wrap:anywhere}
.lp-table thead th{padding:9px 2px!important;font-size:9px!important;letter-spacing:0;white-space:normal;top:0;z-index:15}
.lp-table th:nth-child(1),.lp-table td:nth-child(1){width:27px}
.lp-table th:nth-child(2),.lp-table td:nth-child(2){width:52px}
.lp-table th:nth-child(3),.lp-table td:nth-child(3){width:30%;text-align:left}
.lp-table .lp-match{min-width:0}
.lp-table .mc-team{font-size:11px;gap:5px;min-width:0;overflow-wrap:anywhere}
.lp-table .crest{width:20px;height:20px;flex-basis:20px;font-size:8px}
.lp-table .date-cell b{font-size:11px}.lp-table .date-cell .time{font-size:10px}
.lp-table .tip{min-width:0;padding:3px 5px;font-size:10px}
.lp-table td b{white-space:nowrap}.lp-table .odds-price{min-width:0;font-size:11px}
.lp-round-summary{margin:0;font-size:12px;font-weight:700;color:var(--muted)}
.lp-round th{position:static!important}
.lp-standings-scroll{overflow:visible}.lp-standings{table-layout:fixed}
.lp-standings th:nth-child(2),.lp-standings td:nth-child(2){width:41%;min-width:0;max-width:none}
.lp-standings th:first-child,.lp-standings td:first-child{width:27px}
.lp-standings th,.lp-standings td{padding:5px 2px}
.lp-legend{display:flex;flex-wrap:wrap;gap:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;font-size:10px}
.lp-legend span{display:inline-flex;align-items:center;gap:5px}
.lp-legend small{flex-basis:100%;color:var(--muted);font-size:9px;line-height:1.4}
.lp-zone{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;flex-shrink:0;margin-right:3px}
.lp-zone.champions{background:#19b83c}.lp-zone.europa{background:#f4b400}.lp-zone.relegation{background:#e92335}
@media(max-width:1000px){.lp-grid{grid-template-columns:minmax(0,1fr)}.lp-aside{display:block}}
@media(max-width:480px){
  .lp-table{font-size:9px}.lp-table .mc-team{font-size:10px}.lp-table .crest{display:none}
  .lp-table th:nth-child(1),.lp-table td:nth-child(1){width:22px}
  .lp-table th:nth-child(2),.lp-table td:nth-child(2){width:42px}
  .lp-table tbody td{padding:8px 1px}.lp-table .pick-cb{width:14px;height:14px}
  .lp-table .tip{font-size:9px;padding:2px}.lp-table .date-cell b{font-size:10px}
}

/* ---------- Page loading indicator (shown while switching menus) ---------- */
/* Thin progress bar fixed at the very top of the page, like YouTube/GitHub. */
.page-loader{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;opacity:0;pointer-events:none;transition:opacity .2s ease}
.page-loader.active{opacity:1}
.page-loader.done{opacity:0}
.page-loader-bar{height:100%;width:0;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#0c7a4d,#16c47f);box-shadow:0 0 10px rgba(22,196,127,.7),0 0 4px rgba(22,196,127,.5)}
/* Small spinner shown at the top-right corner during the switch. */
.page-loader-spin{position:fixed;top:10px;right:14px;width:18px;height:18px;z-index:10001;border:2px solid rgba(22,196,127,.25);border-top-color:#16c47f;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .2s ease;animation:pb-spin .7s linear infinite}
.page-loader-spin.active{opacity:1}
@keyframes pb-spin{to{transform:rotate(360deg)}}
/* Gentle fade-in applied to the view that just became visible. */
.view.pb-switching{animation:pb-fade .35s ease}
@keyframes pb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .page-loader-spin{animation:none}
  .view.pb-switching{animation:none}
}

/* ---------- Settings dropdown (click "Settings" to reveal the two options) ---------- */
/* Override the earlier always-open panel styling: the box becomes a button that
   opens a floating drop-list containing Time Zone + % COEF. */
.site-settings{position:relative;background:transparent;border:0;border-radius:0;padding:0;min-width:0;box-shadow:none;flex-direction:row;align-items:center;gap:0}
.settings-title{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 15px;font-size:13px;font-weight:800;color:var(--text);letter-spacing:-.2px;user-select:none;line-height:1;transition:border-color .15s,background .15s}
.settings-title:hover{border-color:var(--brand)}
.settings-caret{font-size:11px;color:var(--muted);transition:transform .18s ease}
.settings-title[aria-expanded="true"] .settings-caret{transform:rotate(180deg)}
.settings-title[aria-expanded="true"]{border-color:var(--brand);color:var(--brand)}
.settings-panel{position:absolute;top:calc(100% + 7px);right:0;z-index:40;min-width:264px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:10px;animation:pb-fade .18s ease}
.settings-panel[hidden]{display:none}
@media(max-width:800px){
  .site-settings{width:auto}
  .settings-panel{left:auto;right:0;min-width:min(264px,calc(100vw - 40px))}
}

/* ---------- Sidebar period dropdowns (click a period to reveal 1X2 / Over-Under) ---------- */
.side-period-group{position:relative}
.side-period .period-caret{color:var(--faint);font-size:14px;flex:0 0 auto;transition:transform .18s ease}
.side-period[aria-expanded="true"] .period-caret{transform:rotate(90deg)}
.side-period[aria-expanded="true"]{background:var(--surface2)}
.side-submenu{margin:1px 8px 4px 30px;padding:3px 0 3px 7px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.side-submenu[hidden]{display:none}
.side-subitem{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--muted);padding:7px 10px;font-size:13px;font-weight:600;cursor:pointer;line-height:1.3;transition:background .12s,color .12s}
.side-subitem:hover{background:var(--surface2);color:var(--text)}
.side-subitem:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ---------- Home view ---------- */
.home-wrap{display:flex;flex-direction:column;gap:22px}
.home-intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow)}
.home-eyebrow{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:7px 15px;border-radius:12px;margin-bottom:16px;line-height:1.4;max-width:100%}
.home-intro h1{margin:0 0 10px;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.5px;font-weight:800}
.home-intro p{margin:0 0 20px;color:var(--muted);font-size:15px;max-width:720px;line-height:1.6}
.home-actions{display:flex;flex-wrap:wrap;gap:10px}
.home-cta{border:1px solid var(--line);background:var(--surface2);color:var(--text);font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.home-cta:hover{border-color:var(--brand);color:var(--brand)}
.home-cta.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.home-cta.primary:hover{filter:brightness(1.08);color:var(--brand-ink)}
.home-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.home-features>.home-card{min-width:0}
.home-toppicks>.tp-panel{min-width:0}
.home-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow)}
.home-card-ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--brand-soft);font-size:22px;margin-bottom:12px}
.home-card h2{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.2px}
.home-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
@media(max-width:820px){.home-features{grid-template-columns:1fr}.home-intro{padding:24px 20px}}

/* Home: top-5 prediction highlights (both engines) */
.home-toppicks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%}
.tp-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 10px;box-shadow:var(--shadow)}
.tp-panel-head h2{margin:0 0 4px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.tp-panel-head p{margin:0 0 12px;color:var(--muted);font-size:12.5px;line-height:1.5}
.tp-list{display:flex;flex-direction:column;gap:8px}
.tp-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface2);text-decoration:none;color:inherit;transition:border-color .15s,background .15s,transform .08s}
.tp-item:hover{border-color:var(--brand);background:var(--surface);transform:translateY(-1px)}
.tp-match{flex:1 1 auto;min-width:0}
.tp-teams{display:flex;flex-direction:column;gap:2px}
.tp-team{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-crest{flex:0 0 20px;width:20px;height:20px;border-radius:5px;background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:800;display:inline-grid;place-items:center;letter-spacing:.3px}
.tp-meta{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-engines{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.tp-eng{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.tp-eng-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);width:48px;text-align:right}
.tp-pick{font-size:11px;font-weight:800;min-width:30px;text-align:center;padding:2px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface);line-height:1.3}
.tp-pick.pk1{color:#0c7a4d;border-color:rgba(12,122,77,.35);background:rgba(12,122,77,.10)}
.tp-pick.pk2{color:#b4451f;border-color:rgba(180,69,31,.35);background:rgba(180,69,31,.10)}
.tp-pick.pkX{color:#7a6a0c;border-color:rgba(122,106,12,.35);background:rgba(122,106,12,.10)}
.tp-pick.pkO{color:#0c5f7a;border-color:rgba(12,95,122,.35);background:rgba(12,95,122,.10)}
.tp-pick.pkU{color:#5b3f8a;border-color:rgba(91,63,138,.35);background:rgba(91,63,138,.10)}
.tp-prob{font-size:12.5px;font-weight:800;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.tp-flag{flex:0 0 auto;align-self:center;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;border-radius:999px;white-space:nowrap}
.tp-flag.tp-agree{color:var(--brand);background:var(--brand-soft)}
.tp-flag.tp-split{color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.tp-empty{margin:4px 0 10px;color:var(--muted);font-size:13px}
body.theme-dark .tp-pick.pk1{color:#5fe3a9;border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.12)}
body.theme-dark .tp-pick.pk2{color:#ff9b6b;border-color:rgba(255,155,107,.3);background:rgba(255,155,107,.12)}
body.theme-dark .tp-pick.pkX{color:#e6cf5a;border-color:rgba(230,207,90,.3);background:rgba(230,207,90,.12)}
body.theme-dark .tp-pick.pkO{color:#5fcbe3;border-color:rgba(95,203,227,.3);background:rgba(95,203,227,.12)}
body.theme-dark .tp-pick.pkU{color:#b79be6;border-color:rgba(183,155,230,.3);background:rgba(183,155,230,.12)}
@media(max-width:820px){.home-toppicks{grid-template-columns:1fr}}

/* ========================================================================
   MOBILE CARD LAYOUT (max-width: 720px)
   Transforms the prediction table into vertical match cards
   matching the compact Forebet-style mobile feed.
   ======================================================================== */
@media(max-width:720px){
  /* ---- Header ---- */
  .header-inner{height:52px;gap:10px}
  .logo{font-size:17px}
  .logo-mark{width:26px;height:26px;flex:0 0 26px;border-radius:7px}
  .header-tools{gap:6px}
  .theme-toggle{width:32px;height:32px;font-size:14px}

  /* ---- Hero ---- */
  .hero{margin:6px 0 0;border-radius:10px;padding:8px 12px;gap:10px}
  .hero-eyebrow{font-size:9px;padding:2px 6px}
  .hero h1{font-size:14px}
  .hero p{font-size:11px}
  .hero-stats{gap:5px}
  .hero-stat{padding:5px 7px;min-width:0;border-radius:8px}
  .hero-stat b{font-size:14px}
  .hero-stat span{font-size:9px}

  /* ---- Layout: sidebar above content, full-width ---- */
  .layout{margin-top:14px;gap:10px}
  .sidebar{border-radius:10px}
  .side-toggle{font-size:13px;padding:11px 14px}

  /* ---- Featured day strip ---- */
  .featured{padding:6px 8px;gap:6px;border-radius:10px}
  .day-pill{padding:4px 9px;font-size:11px}

  /* ---- Toolbar ---- */
  .toolbar{gap:10px;margin:0 0 12px}
  .toolbar-top{gap:8px}
  .mode-switch{align-self:stretch;justify-content:space-between;border-radius:10px}
  .mode-btn{flex:1;justify-content:center;padding:8px 4px;font-size:12px;white-space:normal;line-height:1.15;text-align:center}
  .engine-toggle{width:100%;margin-left:0;border-radius:10px;padding:6px 10px}
  .engine-seg .eng-btn{flex:1;font-size:12px;padding:6px 10px}

  /* ---- Filters stack vertically ---- */
  .filters{flex-direction:column;align-items:stretch;padding:10px 12px;border-radius:10px;gap:8px}
  .filters label,.filters select{width:100%}

  /* ================================================================
     PREDICTION TABLE → CARD LAYOUT
     Each <tr> becomes a standalone card with a flex row inside.
     ================================================================ */
  .table-wrap{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    padding:0;
  }
  .pred-table{
    display:block;
    min-width:0!important;
    width:100%;
  }
  .pred-table thead{display:none}
  .pred-table tbody{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .pred-table tbody tr{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .pred-table tbody tr:hover{
    background:var(--surface);
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .pred-table tbody td{
    display:flex;
    align-items:center;
    padding:0!important;
    border:0!important;
    text-align:left!important;
    line-height:1.25;
  }

  /* ---- Card zones (left to right) ---- */

  /* Zone 1: League badge (flag + code) */
  .pred-table td.col-pick{
    display:none!important;
  }
  /* Standalone date column is hidden on mobile — date now sits under team names */
  .pred-table td.col-date{
    display:none!important;
  }
  .pred-table td.col-league{
    display:flex!important;
    flex:0 0 auto;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding-right:2px!important;
  }
  .league-badge{
    flex-direction:column;
    gap:2px;
  }
  .league-badge .lb-flag{font-size:18px}
  .league-badge .lb-code{
    font-size:9px;
    padding:1px 4px;
    letter-spacing:.3px;
  }

  /* Zone 2: Match info (teams + date) */
  .pred-table td.col-match,
  .pred-table td:nth-child(2){
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .match-cell{
    gap:3px;
  }
  .mc-team{
    font-size:13px;
    gap:6px;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mc-team .crest{
    width:18px;height:18px;flex:0 0 18px;font-size:7px;border-radius:5px;
  }
  .mc-league{display:none!important}
  .mc-date{display:block!important;font-size:10px;margin-top:1px;color:var(--faint);font-weight:600}
  .date-cell{
    flex-direction:row!important;gap:5px;
  }
  .date-cell b{font-size:11px}
  .date-cell .time{font-size:11px}

  /* Zone 2b: Result / Live chip */
  .pred-table td.col-live{
    flex:0 0 auto;
    flex-direction:column;
    align-items:flex-end;
    gap:1px;
    min-width:0!important;
  }

  /* Zone 3: Probabilities (two stacked numbers) */
  .pred-table td:nth-child(6),
  .pred-table td:nth-child(7),
  .pred-table td:nth-child(8){
    flex:0 0 auto;
    flex-direction:column;
    align-items:flex-end;
    gap:1px;
    min-width:28px;
  }
  .prob{
    font-size:14px;
    min-width:0;
    font-weight:800;
  }
  .prob .bar{display:none}

  /* Zone 4: Tip badge */
  .pred-table td:nth-child(9){
    flex:0 0 auto;
  }
  .tip{
    font-size:11px;
    padding:4px 9px;
    border-radius:6px;
    font-weight:800;
  }
  .ou{
    font-size:11px;
    padding:4px 9px;
    border-radius:6px;
    font-weight:800;
  }

  /* Zone 5: Score (compact) */
  .pred-table td:nth-child(10){
    flex:0 0 auto;
  }
  .score{
    font-size:11px;
    padding:3px 7px;
  }

  /* Zone 6: Odds badge */
  .pred-table td.col-odds{
    flex:0 0 auto;
    min-width:0!important;
  }
  .odds-badge{
    font-size:13px;
    padding:5px 10px;
    border-radius:7px;
    font-weight:800;
  }
  .odds-book{display:none}
  .odds-detail{display:none}

  /* ---- O/U mode card tweaks ---- */
  /* Exp. goals column: shown on mobile (e.g. 3.07) per compact feed design */
  .pred-table.ou-mode td:nth-child(6){
    display:flex!important;
    flex:0 0 auto;
    flex-direction:column;
    align-items:flex-end;
    gap:1px;
    min-width:34px;
  }
  .pred-table.ou-mode td:nth-child(6) .score{
    background:transparent;
    padding:0;
    font-size:12px;
    font-weight:800;
    color:var(--text);
  }
  /* Over / Under percentage cells */
  .pred-table.ou-mode td:nth-child(7),
  .pred-table.ou-mode td:nth-child(8){
    flex:0 0 auto;
    flex-direction:column;
    align-items:flex-end;
    gap:1px;
    min-width:28px;
  }

  /* ---- Stats mode: card layout ---- */
  .pred-table tbody tr.stats-row{
    cursor:pointer;
  }
  .pred-table tbody tr.detail-row{
    flex-direction:column;
    gap:0;
  }
  .pred-table tbody tr.detail-row>td{
    width:100%!important;
  }
  .form-panel{padding:12px 14px 6px}
  .form-table{min-width:0;font-size:12px}
  .sr-match{font-size:13px}
  .sr-num{font-size:12px}

  /* ---- Selection mode: card layout ---- */
  .pred-table tbody tr .sel-tools td{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:10px 12px!important;
  }
  .sel-info{font-size:13px}
  .sel-clear,.sel-pdf{font-size:12px;padding:7px 12px}
  .col-prob .pp{font-size:12px;min-width:32px}
  .sel-remove{width:26px;height:26px;font-size:14px}

  /* ---- Results table cards ---- */
  #view-results .pred-table tbody tr{
    flex-wrap:wrap;
    gap:6px 10px;
  }
  .verdict{font-size:11px}

  /* ---- Odds note ---- */
  .odds-note{font-size:10px;padding:8px 10px}

  /* ---- Home view ---- */
  .home-intro{padding:18px 14px;border-radius:10px}
  .home-eyebrow{font-size:11px;padding:5px 10px;border-radius:8px;margin-bottom:10px}
  .home-actions{gap:8px}
  .home-cta{font-size:13px;padding:9px 16px}
  .home-card{padding:16px 14px;border-radius:10px}
  .home-card h2{font-size:15px}
  .home-card p{font-size:13px}
  .tp-panel{padding:14px 12px 8px;border-radius:10px}
  .tp-panel-head h2{font-size:14px}
  .tp-item{padding:8px 10px;gap:8px;border-radius:8px}
  .tp-team{font-size:12px}
  .tp-crest{width:16px;height:16px;flex:0 0 16px;font-size:8px}
  .tp-prob{font-size:11px}

  /* ---- Stat cards ---- */
  .cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-card{padding:14px 12px;border-radius:10px}
  .stat-num{font-size:24px}
  .stat-lbl{font-size:11px}

  /* ---- Affiliate ---- */
  .aff-grid{grid-template-columns:1fr;gap:10px}
  .aff-card{padding:14px;border-radius:10px}
  .aff-name{font-size:16px}

  /* ---- Footer ---- */
  .site-footer{padding:18px 0;font-size:12px}
  .prose{padding:18px 14px;border-radius:10px}
  .prose h1{font-size:20px}

  /* ---- Ad slots ---- */
  .ad-leaderboard,.ad-inline,.ad-footer{height:60px;border-radius:8px}
  .ad-slot .ad-size{display:none}
}

/* ---- Extra-small phones (≤400px) ---- */
@media(max-width:400px){
  .container{padding:0 8px}
  .pred-table tbody tr{padding:8px 10px;gap:6px}
  .mc-team{font-size:12px}
  .prob{font-size:13px}
  .tip,.ou{font-size:10px;padding:3px 7px}
  .odds-badge{font-size:12px;padding:4px 8px}
  .league-badge .lb-flag{font-size:16px}
  .league-badge .lb-code{font-size:8px}
  .cards{grid-template-columns:1fr}
  .stat-num{font-size:22px}
}