:root {
--bg: #0a0e16;
--bg2: #0d1320;
--surface: #121a2b;
--surface2: #18223a;
--border: #243049;
--line: #243049; 
--text: #e8eef7;
--muted: #8da3c0;
--cyan: #00a8e8;
--cyan-d: #0089c2;
--blue: #2f6bff;
--green: #1fc77d;
--green-bg: rgba(31, 199, 125, .12);
--red: #ff5d73;
--red-rgb: 255, 93, 115; 
--red-bg: rgba(255, 93, 115, .12);
--amber: #f6b13d;
--amber-bg: rgba(246, 177, 61, .12);
--gold: #e7c14b;
--gold-ink: #e7c14b; 
--radius: var(--radius-lg); 
--shadow: 0 8px 30px rgba(0, 0, 0, .35);
--maxw: 1180px;
--header-h: 64px;
--font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--cyan-tint: rgba(0, 168, 232, .12);
--gold-soft: rgba(231, 193, 75, .14);
--border-soft: var(--border);
--text-soft: #cdd9ec;
--shadow-hover: 0 16px 38px rgba(0, 0, 0, .45);
}
html[data-theme="light"] {
--bg: #f6f8fc;
--bg2: #eef2f8;
--surface: #ffffff;
--surface2: #eef2f8;
--border: #dfe6f0;
--line: #dfe6f0; 
--text: #0f1726;
--muted: #5a6b85;
--cyan: #0089c2;
--cyan-d: #006e9c;
--blue: #2f6bff;
--green: #0f9e60;
--green-bg: rgba(15, 158, 96, .12);
--red: #e23a52;
--red-rgb: 226, 58, 82;
--red-bg: rgba(226, 58, 82, .12);
--amber: #c77f12;
--amber-bg: rgba(199, 127, 18, .14);
--gold: #b8923a;
--gold-ink: #7d5200; 
--shadow: 0 8px 30px rgba(15, 23, 38, .10);
--cyan-tint: #e3f5fd;
--gold-soft: #f7efd9;
--border-soft: #e9eef6;
--text-soft: #27303f;
--shadow-hover: 0 16px 38px rgba(15, 23, 38, .14);
}
html[data-theme="light"] body { background: radial-gradient(1200px 600px at 70% -10%, #e3f0ff 0%, var(--bg) 55%) no-repeat, var(--bg); }
html[data-theme="light"] .site-header { background: rgba(246, 248, 252, .82); }
html[data-theme="light"] .hero-points li,
html[data-theme="light"] .plan li,
html[data-theme="light"] .reason { color: #3a4a63; }
html[data-theme="light"] .band { background: linear-gradient(135deg, #eef3fb, #e3ebf7); color: var(--text); }
html[data-theme="light"] .card:hover { border-color: #c5cfd9; }
html[data-theme="light"] #bt-tip { background: #fff; color: #0f1726; border-color: #dfe6f0; }
html[data-theme="light"] .cookie-banner { background: rgba(255, 255, 255, .97); }
.brand .logo-light, .site-footer .logo-light { display: none; }
html[data-theme="light"] .brand .logo-dark, html[data-theme="light"] .site-footer .logo-dark { display: none; }
html[data-theme="light"] .brand .logo-light, html[data-theme="light"] .site-footer .logo-light { display: block; }
:root {
--brand-500: #0089c2; 
--brand-600: #006f9e; 
--brand-050: #e6f4fa; 
--accent-blue: #2563eb; 
--navbar: #0f1720;
--surface-ds: #ffffff;
--surface-alt: #f6f8fa;
--surface-teal: #eef6fb;
--surface-navy: #0e1a2b;
--ink-900: #0f1720;
--ink-600: #4b5563;
--ink-400: #9ca3af;
--ds-border: #e5e7eb;
--sem-high: #16a34a;
--sem-mid: #d97706;
--sem-low: #dc2626;
--sem-neutral: #6b7280;
--fs-h1: clamp(40px, 5vw, 60px);
--fs-h2: clamp(28px, 3.2vw, 40px);
--fs-h3: 20px;
--fs-body: 17px;
--fs-small: 13px;
--fs-eyebrow: 12px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(15, 23, 32, .06);
--shadow-md: 0 4px 16px rgba(15, 23, 32, .08);
--shadow-lg: 0 12px 32px rgba(15, 23, 32, .10);
--container-max: 1120px;
}
:root:not([data-theme="light"]) {
--surface-ds: var(--surface);
--surface-alt: var(--surface2);
--surface-teal: #101d33;
--brand-050: rgba(0, 168, 232, .10);
--ds-border: var(--border);
--ink-900: var(--text);
--ink-600: var(--muted);
--ink-400: #6f819e;
}
.tnum, .data-table td, .data-table th, .prob-bar__val, .kpi-n, .metric,
.pnew-amount, .pnew-count-time { font-variant-numeric: tabular-nums; }
.btn-outline {
background: transparent; border: 1px solid var(--brand-500); color: var(--brand-500);
}
.btn-outline:hover { background: var(--brand-050); transform: translateY(-1px); }
.card-featured {
background: var(--surface-ds);
border: 2px solid var(--brand-500);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 32px;
}
.section-head--ds { display: block; margin-bottom: 40px; }
.section-head--ds .eyebrow {
color: var(--brand-500); font-size: var(--fs-eyebrow); font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
}
.section-head--ds h2 {
font-size: var(--fs-h2); line-height: 1.1; font-weight: 700; margin: 10px 0 0;
}
.section-head--ds .section-sub { margin: 12px 0 0; color: var(--ink-600); max-width: 62ch; font-size: var(--fs-body); }
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-small); font-weight: 700; line-height: 1;
padding: 5px 11px; border-radius: var(--radius-pill);
background: var(--surface-alt); color: var(--ink-600); border: 1px solid var(--ds-border);
}
.badge svg { width: 13px; height: 13px; }
.badge--high { background: rgba(22, 163, 74, .12); color: var(--sem-high); border-color: rgba(22, 163, 74, .30); }
.badge--mid { background: rgba(217, 119, 6, .12); color: var(--sem-mid); border-color: rgba(217, 119, 6, .30); }
.badge--low { background: rgba(220, 38, 38, .12); color: var(--sem-low); border-color: rgba(220, 38, 38, .30); }
.badge--neutral { background: rgba(107, 114, 128, .12);color: var(--sem-neutral); border-color: rgba(107, 114, 128, .30); }
.badge--brand { background: var(--brand-050); color: var(--brand-500); border-color: rgba(0, 137, 194, .30); }
.prob-bar { display: flex; align-items: center; gap: 10px; }
.prob-bar__track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-alt); overflow: hidden; }
.prob-bar__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--sem-neutral); }
.prob-bar--high .prob-bar__fill { background: var(--sem-high); }
.prob-bar--mid .prob-bar__fill { background: var(--sem-mid); }
.prob-bar--low .prob-bar__fill { background: var(--sem-low); }
.prob-bar--brand .prob-bar__fill { background: var(--brand-500); }
.prob-bar__val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-small); color: var(--ink-900); min-width: 42px; text-align: right; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.data-table thead th {
background: var(--brand-050); color: var(--ink-900); font-weight: 700;
text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ds-border);
font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em;
}
.data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ds-border); color: var(--ink-900); }
.data-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table-wrap { border: 1px solid var(--ds-border); border-radius: var(--radius-md); overflow: hidden; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-alt); border: 1px solid var(--ds-border); border-radius: var(--radius-pill); }
.segmented__btn {
appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
color: var(--ink-600); background: transparent; padding: 8px 16px; border-radius: var(--radius-pill);
display: inline-flex; align-items: center; gap: 7px; transition: color .16s ease, background .16s ease;
}
.segmented__btn.is-active { color: #fff; background: var(--brand-500); }
.segmented__btn:not(.is-active):hover { color: var(--ink-900); }
.ds-conf { color: var(--ink-900); }
.ds-conf .lead-conf { color: var(--ink-600); max-width: 62ch; font-size: var(--fs-body); line-height: 1.6; }
.ds-conf p { max-width: 62ch; }
.number-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 22px 0; }
.nh-cell {
background: var(--surface-ds); border: 1px solid var(--ds-border); border-radius: var(--radius-lg);
padding: 24px 24px 22px; box-shadow: var(--shadow-sm); position: relative;
}
.nh-cell.nh-lead { border-color: rgba(0, 137, 194, .28); box-shadow: var(--shadow-md); }
.nh-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); display: flex; align-items: center; gap: 7px; }
.nh-eyebrow svg { width: 14px; height: 14px; }
.nh-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 6vw, 60px); line-height: 1; letter-spacing: -.03em; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.nh-num.pos { color: var(--sem-high); }
.nh-num.neg { color: var(--sem-low); }
.nh-num.neutral { color: var(--ink-900); }
.nh-sub { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-600); }
.admin-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.akpi {
background: var(--surface-ds); border: 1px solid var(--ds-border); border-radius: var(--radius-md);
padding: 16px 16px 14px; box-shadow: var(--shadow-sm); position: relative;
display: flex; flex-direction: column; min-width: 0;
}
.akpi--lead { border-color: rgba(0, 137, 194, .28); box-shadow: var(--shadow-md); }
.akpi-l {
font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-400); display: flex; align-items: center; gap: 6px; line-height: 1.2;
}
.akpi-l svg { width: 13px; height: 13px; flex: none; color: var(--ink-400); }
.akpi-n {
font-family: var(--font-head); font-weight: 700; font-size: 27px; line-height: 1.05;
letter-spacing: -.02em; margin: 9px 0 0; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.akpi-n.pos, .akpi .pos { color: var(--sem-high); }
.akpi-n.neg, .akpi .neg { color: var(--sem-low); }
.akpi-unit { font-size: 14px; font-weight: 700; color: var(--ink-400); letter-spacing: 0; }
.akpi-s { margin: 8px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-600); }
.akpi-s .badge { font-size: 10.5px; padding: 1px 6px; }
.akpi-note {
margin: 6px 0 0; font-size: 10.5px; line-height: 1.35; color: var(--ink-400);
}
.akpi .founder-bar {
height: 5px; border-radius: var(--radius-pill); background: rgba(107, 114, 128, .18);
overflow: hidden; margin: 9px 0 0;
}
.akpi .founder-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--brand-500); }
@media (max-width: 900px) { .admin-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .admin-kpi { grid-template-columns: 1fr; } }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 4px; }
.stat-card {
background: var(--surface-ds); border: 1px solid var(--ds-border); border-radius: var(--radius-lg);
padding: 22px 20px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-card .sc-ic { width: 26px; height: 26px; color: var(--brand-500); margin: 0 auto 10px; }
.stat-card .sc-ic svg { width: 26px; height: 26px; }
.stat-card .sc-n { font-family: var(--font-head); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--brand-500); font-variant-numeric: tabular-nums; }
.stat-card .sc-l { font-size: 13px; color: var(--ink-600); font-weight: 600; margin-top: 9px; }
@media (max-width: 640px) { .stat-cards { grid-template-columns: 1fr; } }
.trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; font-size: 13px; color: var(--ink-600); }
.trust-line span { display: inline-flex; align-items: center; gap: 6px; }
.trust-line svg { width: 14px; height: 14px; color: var(--sem-high); }
.trust-line .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-400); }
.updated-ago { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
.updated-ago svg { width: 13px; height: 13px; }
.pnl-chart { background: var(--surface-ds); border: 1px solid var(--ds-border); border-radius: var(--radius-lg); padding: 20px 20px 12px; box-shadow: var(--shadow-sm); margin: 18px 0; }
.pnl-chart .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pnl-chart .pc-title { font-weight: 700; font-size: 15px; color: var(--ink-900); }
.pnl-chart > svg { width: 100%; height: auto; display: block; }
.pnl-chart .pc-head svg { width: 13px; height: 13px; flex: none; }
.pnl-chart .pc-axis { font-size: 11px; fill: var(--ink-400); font-variant-numeric: tabular-nums; }
.pnl-chart .pc-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-400); margin-top: 4px; }
.ds-conf .conf-block {
background: var(--surface-alt); border: 1px solid var(--ds-border); border-radius: var(--radius-lg);
padding: 26px 28px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.ds-conf .conf-block .section-head--ds { margin-bottom: 14px; }
.ds-conf .conf-block .section-head--ds .eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.ds-conf .conf-block .section-head--ds .eyebrow svg { width: 15px; height: 15px; }
.ds-conf .conf-block h2 { font-size: var(--fs-h3); font-weight: 700; margin: 6px 0 10px; letter-spacing: -.01em; }
.ds-conf .conf-block p { color: var(--ink-600); font-size: 15.5px; line-height: 1.65; margin: 0 0 10px; }
.ds-conf .conf-block p:last-child { margin-bottom: 0; }
.ds-conf .conf-block a { color: var(--brand-500); font-weight: 600; }
@media (max-width: 640px) { .ds-conf .conf-block { padding: 20px; } }
.faq-search { position: relative; margin: 4px 0 18px; }
.faq-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); pointer-events: none; }
.faq-search input {
width: 100%; padding: 13px 16px 13px 42px; font: inherit; font-size: 15px;
border: 1px solid var(--ds-border); border-radius: var(--radius-md);
background: var(--surface-ds); color: var(--ink-900);
}
.faq-search input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-050); }
.faq-topic { margin-bottom: 26px; }
.faq-topic > h2 { display: flex; align-items: center; gap: 9px; font-size: var(--fs-h3); font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.faq-topic > h2 .eyebrow-ic { width: 18px; height: 18px; color: var(--brand-500); flex: none; }
.faq-topic > h2 .eyebrow-ic svg { width: 18px; height: 18px; }
.faq-acc {
background: var(--surface-ds); border: 1px solid var(--ds-border); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: var(--shadow-sm);
}
.faq-acc details { border-top: 1px solid var(--ds-border); }
.faq-acc details:first-child { border-top: 0; }
.faq-acc summary {
cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 16px 18px; font-weight: 700; font-size: 15.5px; color: var(--ink-900);
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary .chev { flex: none; color: var(--brand-500); transition: transform .2s ease; }
.faq-acc summary .chev svg { width: 18px; height: 18px; display: block; }
.faq-acc details[open] summary .chev { transform: rotate(180deg); }
.faq-acc details[open] summary { color: var(--brand-600); }
.faq-acc .faq-a { padding: 0 18px 18px; color: var(--ink-600); font-size: 15px; line-height: 1.65; max-width: 68ch; }
.faq-noresults { display: none; padding: 24px; text-align: center; color: var(--ink-600); }
.faq-noresults.show { display: block; }
.faq-topic.hide, .faq-acc details.hide { display: none; }
.league-group {
border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
margin-bottom: 14px; overflow: hidden;
}
.league-group__sum {
cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 15px 18px; font-weight: 700; font-size: 15.5px; color: var(--text);
user-select: none;
}
.league-group__sum::-webkit-details-marker { display: none; }
.league-group__sum .lg-title { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.league-group__sum .lg-title svg { width: 17px; height: 17px; flex: none; }
.league-group__sum .lg-meta { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.league-group__sum .lg-count {
font-size: 12.5px; font-weight: 700; color: var(--cyan); background: rgba(0,168,232,.10);
border: 1px solid rgba(0,168,232,.28); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.league-group__sum .lg-chev { flex: none; color: var(--cyan); display: inline-flex; transition: transform .2s ease; }
.league-group__sum .lg-chev svg { width: 18px; height: 18px; display: block; }
.league-group[open] > .league-group__sum { border-bottom: 1px solid var(--border); }
.league-group[open] > .league-group__sum .lg-chev { transform: rotate(180deg); }
.league-group__sum:hover { background: rgba(0,168,232,.05); }
.league-group__grid { padding: 16px 18px 18px; }
html[data-theme="light"] .league-group__sum:hover { background: rgba(0,137,194,.05); }
.tg-prefs input[type="checkbox"] { accent-color: var(--cyan); }
.sport-acc {
border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
margin-bottom: 12px; overflow: hidden;
}
.sport-acc__head { display: flex; align-items: stretch; }
.sport-acc__toggle {
display: flex; align-items: center; padding: 0 4px 0 15px; cursor: pointer; flex: none;
}
.sport-acc__toggle input { width: 17px; height: 17px; cursor: pointer; }
.sport-acc__sum {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
padding: 14px 16px 14px 11px; background: transparent; border: 0; cursor: pointer;
font: inherit; text-align: left; color: var(--text); user-select: none;
transition: background .16s ease;
}
.sport-acc:not(.is-off) .sport-acc__head:hover,
.sport-acc.is-open > .sport-acc__head { background: rgba(0,168,232,.05); }
html[data-theme="light"] .sport-acc:not(.is-off) .sport-acc__head:hover,
html[data-theme="light"] .sport-acc.is-open > .sport-acc__head { background: rgba(0,137,194,.05); }
.sport-acc__sum .sa-ic { flex: none; display: inline-flex; color: var(--cyan); }
.sport-acc__sum .sa-ic svg { width: 18px; height: 18px; display: block; }
.sport-acc__sum .sa-name { font-weight: 700; font-size: 15px; flex: none; }
.sport-acc__sum .sa-meta {
flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sport-acc__sum .sa-chev { flex: none; color: var(--cyan); display: inline-flex; transition: transform .2s ease; }
.sport-acc__sum .sa-chev svg { width: 18px; height: 18px; display: block; }
.sport-acc.is-open > .sport-acc__head { border-bottom: 1px solid var(--border); }
.sport-acc.is-open .sport-acc__sum .sa-chev { transform: rotate(180deg); }
.sport-acc__body { padding: 14px 16px 16px; }
.sport-acc__body[hidden] { display: none; }
.sport-acc.is-off .sport-acc__sum .sa-ic,
.sport-acc.is-off .sport-acc__sum .sa-name { opacity: .55; }
.sport-acc.is-off .sport-acc__sum .sa-chev { visibility: hidden; }
.sport-acc.is-off .sport-acc__sum { cursor: default; }
.sport-acc__mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.tg-lg-pill { font-size: 12px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; cursor: pointer; transition: border-color .16s, color .16s; }
.tg-lg-pill:hover { border-color: var(--cyan); color: var(--cyan); }
.tg-settings { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 4px 16px; margin-bottom: 18px; }
.tg-settings__title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 12px 0 3px; }
.tg-settings__hint { color: var(--muted); font-size: 12px; padding-bottom: 6px; }
.tg-row {
display: flex; align-items: flex-start; gap: 16px; padding: 15px 0;
border-top: 1px solid var(--line);
}
.tg-row__lead { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
.tg-row__lead .tg-row__ic { flex: none; display: inline-flex; margin-top: 1px; color: var(--muted); }
.tg-row__lead .tg-row__ic svg { width: 17px; height: 17px; display: block; }
.tg-row__lbl { font-weight: 600; }
.tg-row__help { color: var(--muted); font-size: 12px; margin-top: 3px; }
.tg-row__ctl { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.tg-row__cap { color: var(--muted); font-size: 12px; }
.tg-sub-lbl { font-size: 11.5px; color: var(--muted); }
.tg-odds { display: flex; align-items: flex-end; gap: 8px; }
.tg-odds .fld { display: flex; flex-direction: column; gap: 3px; }
.tg-odds .input { width: 110px; }
.tg-odds .dash { color: var(--muted); padding-bottom: 8px; }
.tg-quiet { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tg-quiet__times { display: flex; align-items: center; gap: 8px; }
.tg-quiet__times[hidden] { display: none; }
.tg-quiet__times input[type="time"].input { min-width: 142px; max-width: 142px; }
.tg-quiet__times .muted { font-size: 13px; }
.tg-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.tg-switch input { width: 16px; height: 16px; accent-color: var(--cyan); }
.tg-saved-ok { color: var(--green); }
@media (max-width: 620px) {
.tg-row { flex-direction: column; gap: 8px; }
.tg-row__ctl { align-items: stretch; width: 100%; }
.tg-quiet, .tg-odds { align-items: stretch; }
.tg-odds .input { width: 100%; }
.tg-odds .dash { display: none; }
.sport-acc__sum .sa-name { font-size: 14px; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: radial-gradient(1200px 600px at 70% -10%, #16243f 0%, var(--bg) 55%) no-repeat, var(--bg);
color: var(--text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, .eyebrow { font-family: var(--font-head); letter-spacing: -.02em; }
.eyebrow { letter-spacing: .12em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap.wrap-wide { max-width: min(1880px, calc(100vw - 36px)); }
.muted { color: var(--muted); }
.center { text-align: center; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(10, 14, 22, .82);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand img { height: 30px; }
.nav { display: flex; gap: 2px; margin-left: 2px; flex: 1; flex-wrap: nowrap; }
.nav a {
padding: 7px 7px; border-radius: var(--radius-md); color: var(--muted);
font-weight: 600; font-size: 13px; white-space: nowrap; transition: .15s;
}
.nav a:hover, .nav a.active { color: var(--text); background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.lang a { padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--muted); }
.lang a.active { background: var(--cyan); color: #04121d; }
.btn {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
padding: 11px 18px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px;
border: 1px solid transparent; transition: .15s; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--cyan), var(--brand-500)); color: #fff; box-shadow: 0 6px 18px rgba(0, 124, 200, .35); }
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface2); }
.btn-secondary { background: transparent; border-color: var(--cyan); color: var(--cyan); }
.btn-secondary:hover { background: rgba(0, 168, 232, .10); transform: translateY(-1px); }
.btn-ink { background: var(--navbar); color: #fff; }
.btn-ink:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-tg { background: #229ED9; color: #fff; }
.btn-tg:hover { filter: brightness(1.07); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.hero { padding: 64px 0 36px; }
.hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; }
.hero h1 .grad { background: linear-gradient(120deg, var(--cyan), var(--brand-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 0 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; color: #cdd9ec; font-size: 15px; }
.hero-points li::before { content: "✓"; color: var(--green); font-weight: 800; }
.section { padding-block: 40px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2, .section-head h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.01em; }
.section-head p { margin: 0; color: var(--muted); max-width: 72ch; }
.eyebrow { color: var(--cyan); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs a { padding: 9px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 14px; color: var(--muted); }
.tabs a.active { background: var(--cyan); border-color: var(--cyan); color: #04121d; }
.tabs a.active .muted { color: #04121d; opacity: .7; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
#live-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); justify-content: start; }
.card {
background: linear-gradient(180deg, var(--surface), var(--bg2));
border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}
.card:hover { border-color: #33456b; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card.value { border-color: rgba(231, 193, 75, .4); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.card-league { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; }
.card-top-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.card-top-stack .card-league { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; line-height: 1.3; }
.card-top-stack .card-when { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
.card-top-stack .card-when .card-date { margin-left: auto; }
.card-when { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; text-align: right; }
.card-when .card-date { flex: none; white-space: nowrap; }
.card-when .card-sample { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 10px; padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); }
.teams { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.team { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 16px; }
.team .nm { display: flex; align-items: center; gap: 8px; }
.probbar { display: flex; height: 30px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px; font-size: 12px; font-weight: 800; }
.probbar span { display: flex; align-items: center; justify-content: center; color: #06121f; min-width: 26px; }
.probbar .ph { background: var(--cyan); }
.probbar .pd { background: #5b6b8c; color: #fff; }
.probbar .pa { background: #6fb6ff; }
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; background: var(--surface2); border: 1px solid var(--border); }
.pill.main { background: linear-gradient(135deg, var(--green), #15a76a); color: #04121d; border: 0; }
.pill.main .conf-dot { background: #04121d; }
.pill.green { background: var(--green-bg); color: var(--green); border-color: rgba(31,199,125,.3); }
.pill.amber { background: var(--amber-bg); color: var(--amber); border-color: rgba(246,177,61,.3); }
.pill.value { background: rgba(231,193,75,.14); color: var(--gold-ink); border-color: rgba(231,193,75,.4); }
.pill .pill-prob { font-weight: 700; opacity: .85; }
.rdm-board { background: var(--gold-soft); border: 1px solid rgba(231,193,75,.4); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 12px; }
.rdm-board-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rdm-board-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(231,193,75,.22); color: var(--gold-ink); flex: none; }
.rdm-board-badge .ic { width: 17px; height: 17px; }
.rdm-board-lbl { min-width: 0; }
.rdm-board-cap { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-ink); line-height: 1.3; }
.rdm-board-cap .help { color: inherit; opacity: .7; }
.rdm-board-cap .help .ic { width: 13px; height: 13px; }
.rdm-board-pick { font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.15; }
.rdm-board-stats { display: flex; border-top: 1px solid rgba(231,193,75,.4); padding-top: 9px; }
.rdm-board-stats.is-solo { justify-content: center; }
.rdm-board-stats.is-solo .rdm-board-s { flex: 0 1 auto; border-left: 0; }
.byspmkt .bysp-head td { border-top: 1px solid rgba(0,168,232,.22); }
.byspmkt .bysp-head td.c-name { font-size: 13.5px; }
.byspmkt .bysp-mkt td { font-size: 12.5px; }
.byspmkt .bysp-sub { padding-left: 16px; color: var(--muted); font-weight: 600; }
.byspmkt .bysp-sub2 { padding-left: 32px; color: var(--muted); font-weight: 500; }
.byspmkt .bysp-side td { font-size: 12px; opacity: .92; }
.bd-table .bd-side td { font-size: 12.5px; opacity: .92; }
.bd-table .bd-side .bd-sub2 { padding-left: 18px; color: var(--muted); font-weight: 600; }
.byspmkt .bysp-mkt--rodaje td { background: rgba(0,168,232,.05); }
.rdm-seg { display:inline-block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
color:var(--muted); background:rgba(0,168,232,.10); border:1px solid rgba(0,168,232,.35); border-radius:var(--radius-pill);
padding:1px 7px; vertical-align:middle; margin-left:2px; }
.rdm-board-s { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-left: 1px solid rgba(231,193,75,.4); }
.rdm-board-s:first-child { border-left: 0; }
.rdm-board-s .n { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.rdm-board-s.is-value .n { color: var(--gold-ink); }
.rdm-board-s .c { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rdm-board-book { flex: none; margin-left: auto; align-self: center; display: inline-flex; align-items: center; opacity: .9; }
.rdm-board-book.is-text { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--gold-ink); opacity: .82; white-space: nowrap; }
.bookie-logo { display: block; width: auto; }
.bookie-bet365 { height: 18px; }
.bookie-pinnacle { height: 11px; color: #fff; }
html[data-theme="light"] .bookie-pinnacle { color: #0B1422; }
.bookie-betfair { height: 13px; color: #fff; }
.bookie-888sport { height: 18px; }
.bookie-bwin { height: 15px; }
.bookie-betsson { height: 13px; }
.bookie-betway { height: 14px; color: #fff; }
.bookie-interwetten { height: 17px; }
html[data-theme="light"] .bookie-betfair,
html[data-theme="light"] .bookie-betway { color: #0B1422; }
.conf-dot { width: 8px; height: 8px; border-radius: 50%; }
.conf-alta { background: var(--green); } .conf-media { background: var(--amber); } .conf-baja { background: var(--muted); }
.reason { font-size: 13px; color: #bccadf; border-top: 1px solid var(--border); padding-top: 11px; margin-top: 2px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; }
.odds-mini { display: flex; gap: 5px; flex: 1 1 auto; }
.odds-mini b { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.card-foot .btn { padding: 5px 9px; font-size: 11px; white-space: nowrap; flex: 0 0 auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.scroll-hint { display: none; font-size: 12px; color: var(--cyan); font-weight: 700; margin: 0 0 8px; text-align: right; }
table.stats { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
table.stats th, table.stats td { padding: 10px 12px; text-align: center; white-space: nowrap; }
table.stats thead th { background: var(--bg2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; border-bottom: 1px solid var(--border); }
table.stats tbody tr { border-top: 1px solid var(--border); }
table.stats tbody tr:hover { background: var(--surface2); }
table.stats td.match { text-align: left; font-weight: 700; }
table.stats td.lg { text-align: left; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.diff-hi { color: var(--gold); font-weight: 800; }
.tag { display: inline-block; padding: 2px 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; }
.tag.s1 { background: var(--cyan); color: #04121d; } .tag.s2 { background: #6fb6ff; color: #04121d; } .tag.sX { background: #5b6b8c; color: #fff; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters select, .filters input {
background: var(--surface); border: 1px solid var(--border); color: var(--text);
padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; font-family: inherit;
}
.filters input { min-width: 220px; }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 760px; margin: 0 auto; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.plan.pro { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 20px 40px rgba(0,124,200,.18); position: relative; }
.plan .price { font-size: 40px; font-weight: 800; margin: 6px 0 2px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 9px; color: #cdd9ec; font-size: 15px; }
.plan li::before { content: "✓"; color: var(--green); font-weight: 800; }
.badge-pop { position: absolute; top: -12px; right: 20px; background: var(--gold); color: #1a1404; font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 5px; }
.badge-pop svg { width: 14px; height: 14px; }
.pricing-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); max-width: 1040px; }
.plan .plan-tag { font-size: 13px; margin: 2px 0 4px; min-height: 34px; }
.plan li.feat, .plan li { align-items: flex-start; }
.plan li:has(.feat-ic)::before { content: none; }
.feat-ok { color: var(--green); }
.plan.plan-live.pro { border-color: #e5484d; box-shadow: 0 0 0 1px #e5484d, 0 20px 40px rgba(229,72,77,.15); }
.badge-live { background: #e5484d; color: #fff; }
.plan-active { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 11px; font-size: 14px; }
.plan-active svg { width: 16px; height: 16px; color: var(--green); }
.plan-upsell { width: 100%; justify-content: center; margin-top: 10px; gap: 6px; }
.plan-upsell svg { width: 15px; height: 15px; }
.plan-upsell-link { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--cyan); font-weight: 600; text-decoration: none; }
.plan-upsell-link:hover { text-decoration: underline; }
.pref-lock { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px 16px; background: rgba(0,160,229,.06); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.pref-lock-ic svg { width: 26px; height: 26px; }
.pref-lock-msg { font-size: 13px; color: var(--muted); max-width: 340px; }
.pp-box { background: #fff; border-radius: var(--radius-lg); padding: 12px 10px 4px; margin-top: 6px; }
.pack-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1040px; margin: 22px auto 0; background: linear-gradient(135deg, #12203a, #0c1526); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: 26px 28px; }
html[data-theme="light"] .pack-band { background: linear-gradient(135deg, #eef4ff, #f7fbff); }
.pack-info { flex: 1 1 320px; min-width: 260px; }
.pack-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #1a1404; font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 8px; }
.pack-badge svg { width: 14px; height: 14px; }
.pack-price { font-size: 30px; font-weight: 800; margin-top: 6px; }
.pack-save { font-size: 13px; font-weight: 700; color: var(--green); background: rgba(48,164,108,.14); padding: 3px 9px; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 6px; }
.pack-buy { flex: 0 0 auto; min-width: 240px; }
@media (max-width: 720px) { .pack-band { text-align: center; } .pack-info { min-width: 0; } .pack-buy { width: 100%; } }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.how .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.how .num { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--cyan); color: #04121d; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.band { background: linear-gradient(135deg, #11203a, #0c1526); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; text-align: center; }
.page-intro { color: var(--muted); max-width: 760px; margin: -2px 0 18px; line-height: 1.55; font-size: 14.5px; }
.page-intro a { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.news-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.news-form input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: var(--radius-md); min-width: 260px; font-size: 15px; }
.band-join { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; }
.band-join .bj-text { flex: 1 1 320px; min-width: 280px; }
.band-join h2 { margin: 0 0 6px; }
.band-join .bj-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.band-join .bj-list li { display: flex; align-items: center; gap: 9px; }
.band-join .bj-cta { flex: 0 0 auto; text-align: center; }
.band-join .bj-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .band-join { text-align: center; } .band-join .bj-list li { justify-content: flex-start; } .band-join .bj-cta { width: 100%; } }
.site-footer { border-top: 1px solid var(--border); margin-top: 50px; padding: 34px 0; color: var(--muted); font-size: 13px; }
.site-footer .cols { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.site-footer a:hover { color: var(--text); }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-sports { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px; margin: 4px 0 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.foot-sports .fs-cap { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--muted); width: 100%; margin-bottom: 2px; }
.foot-sports a { color: var(--muted); text-decoration: none; }
.foot-sports a:hover { color: var(--cyan); }
.foot-legal { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; }
.disclaimer { border-top: 1px solid var(--border); padding-top: 16px; font-size: 12px; }
.foot-fiscal { display: inline-block; margin-top: 4px; opacity: .85; }
.plus18 { display: inline-block; border: 1px solid var(--muted); border-radius: var(--radius-sm); padding: 1px 6px; font-weight: 800; font-size: 11px; }
.fbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; align-items: end; }
.fb { display: flex; flex-direction: column; gap: 3px; }
.fb label { font-size: 10px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fb select, .fb input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 7px 9px; border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; width: 100%; }
.fb select:focus, .fb input:focus { outline: none; border-color: var(--cyan); }
.fb .mm { display: flex; gap: 5px; } .fb .mm input { width: 50%; padding: 7px 6px; text-align: center; }
.fb.fchk label { flex-direction: row; align-items: center; gap: 6px; text-transform: none; font-size: 13px; color: var(--text); cursor: pointer; }
.filter-count { font-size: 12px; margin-bottom: 12px; font-weight: 800; color: var(--cyan); }
.fav { background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--amber); line-height: 1; padding: 0; }
.fav.on { filter: drop-shadow(0 0 4px rgba(246, 177, 61, .6)); }
.fav.fav-lock { color: var(--gold); opacity: .4; }
table.bt-table { width: 100%; max-width: 100%; margin: 0 auto; border-collapse: collapse; font-size: 13px; min-width: 860px; }
table.bt-table thead th { background: var(--bg2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 10px 8px; text-align: center; position: sticky; top: 0; border-bottom: 2px solid var(--border); }
table.bt-table tbody.mrow { border-bottom: 3px solid var(--bg); }
table.bt-table td { padding: 7px 8px; text-align: center; white-space: nowrap; border-top: 1px solid var(--border); }
table.bt-table .fecha, table.bt-table .lg, table.bt-table .odds, table.bt-table .ln { vertical-align: middle; }
table.bt-table td.fecha { text-align: center; }
table.bt-table .fecha .fdate { display: block; color: var(--cyan); font-weight: 700; margin-bottom: 8px; }
table.bt-table .lg { text-align: left; color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.bt-table td.team { text-align: left; font-weight: 700; }
table.bt-table tr.rtotal td { color: var(--cyan); font-weight: 800; }
table.bt-table tr.rtotal td.team { letter-spacing: .03em; font-size: 11px; }
table.bt-table td.odds, table.bt-table td.ln { font-size: 12px; color: var(--muted); line-height: 1.55; }
table.bt-table td.odds b, table.bt-table td.ln b { color: var(--text); }
table.bt-table .diff-hi b { color: var(--gold); }
.teams-link { display: block; color: inherit; }
.teams-link:hover .nm { color: var(--cyan); }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
table.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
table.compare th, table.compare td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: center; }
table.compare thead th { color: var(--muted); font-size: 12px; }
table.compare td:first-child, table.compare th:first-child { text-align: left; color: var(--muted); }
.odds-big { display: flex; gap: 10px; margin-bottom: 10px; }
.odds-big > div { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; text-align: center; }
.odds-big span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.odds-big b { font-size: 18px; }
.odds-big:not(.ah-odds) > div { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 10px; }
.odds-big:not(.ah-odds) span { display: inline; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }
.res-w-t { color: var(--green); font-weight: 800; }
.res-l-t { color: var(--red); font-weight: 800; }
.history-section { margin-top: 26px; }
.history-section > h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
.history-section > p.muted { margin: 0 0 16px; font-size: 13.5px; max-width: 760px; }
.hist-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.hist-filter > label { font-size: 13px; color: var(--muted); }
.hist-filter select { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; max-width: 260px; }
.surf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.surf-chips .chip { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.surf-chips .chip:hover { color: var(--text); }
.surf-chips .chip.active { background: var(--cyan); color: #04141f; border-color: var(--cyan); }
.hist-lg { font-size: 11px; line-height: 1.25; margin-top: 2px; }
.surf-tag { font-weight: 700; }
.surf-tag.s-clay { color: #e08a4b; }
.surf-tag.s-hard { color: #4aa3e0; }
.surf-tag.s-grass { color: #5fbf7a; }
.surf-tag.s-carpet { color: #b98ad0; }
.hist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hist-grid > * { min-width: 0; }
.hist-card .hist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.hist-card .hist-head h3 { margin: 0; font-size: 17px; }
.formbar { display: flex; gap: 4px; }
.fdot { width: 20px; height: 20px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.resb { display: inline-flex; width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; align-items: center; justify-content: center; }
.res-w { background: var(--green); color: #04121d; }
.res-l { background: var(--red); color: #fff; }
.res-d { background: #5b6b8c; color: #fff; }
.res-void { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.res-pending { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
tr[data-pending] { opacity: .82; }
table.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hist thead th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.hist td { padding: 7px 8px; text-align: center; border-top: 1px solid var(--border); white-space: nowrap; }
table.hist td.rival { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.hist tbody tr:hover { background: var(--surface2); }
table.hist tr.rival-common-row td { background: rgba(0, 168, 232, .13); }
table.hist tr.rival-common-row td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.hist .rival-common { color: var(--cyan); font-weight: 700; }
table.ric-table td.ric-win { background: var(--green-bg); }
table.ric-table tfoot td { border-top: 2px solid var(--border); color: var(--muted); font-size: 12px; }
.ric-table .ric-best { color: var(--cyan); font-weight: 800; }
.ric-count { color: var(--muted); font-size: 12px; font-weight: 600; margin-left: 6px; }
.ric-verdict { margin-top: 10px; }
.ric-verdict b { color: var(--cyan); }
.fav-live { background: none; border: 0; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fav-live.on { color: #f5b301; }
.surf-chips .chip-fav.active { background: var(--cyan); border-color: var(--cyan); color: #04121d; }
.standings-table th, .standings-table td { text-align: center; }
.standings-table th:nth-child(2), .standings-table td:nth-child(2) { text-align: left; }
table.standings-table tr.standings-hl td { background: rgba(0, 168, 232, .13); }
table.standings-table tr.standings-hl td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
@media (max-width: 820px) { .hist-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
.ric-table thead { display: none; }
.ric-table, .ric-table tbody, .ric-table tfoot, .ric-table tr, .ric-table td { display: block; width: auto; }
.ric-table tr.ric-row { border-top: 1px solid var(--border); padding: 6px 0; }
.ric-table td.rival { max-width: none; padding-bottom: 2px; }
.ric-table td[data-team] { display: flex; justify-content: space-between; align-items: center; border: 0; padding: 3px 8px; }
.ric-table td[data-team]::before { content: attr(data-team); color: var(--muted); }
.ric-table tfoot td { display: flex; justify-content: space-between; }
}
.tool-help { font-size: 12.5px; margin: 0 0 10px; max-width: none; line-height: 1.45; }
.filters-pro { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.fgroup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); flex: 1 1 230px; min-width: 220px; }
.fgroup-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); border-radius: 11px 11px 0 0; }
.fgroup-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px 10px; padding: 9px 12px; align-items: end; }
.fgroup-actions { display: flex; align-items: center; gap: 16px; padding: 9px 14px; flex: 0 0 auto; }
.fav-toggles { display: flex; flex-direction: column; gap: 7px; }
.fgroup-actions .fchk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.fb label { display: flex; align-items: center; gap: 4px; margin-bottom: 1px; }
.fgroup .fb label { font-size: 10px; }
.fgroup .fb select, .fgroup .fb input { padding: 5px 8px; font-size: 12px; border-radius: var(--radius-sm); }
.fgroup .fb .mm { gap: 4px; } .fgroup .fb .mm input { padding: 5px 5px; }
.help { display: inline-flex; color: var(--muted); font-size: 13px; line-height: 1; align-items: center; justify-content: center; cursor: help; position: relative; vertical-align: middle; flex: 0 0 auto; }
.help:hover, .help:focus { color: var(--cyan); outline: none; }
#bt-tip {
position: fixed; z-index: 9999; max-width: 280px; background: #0a1322; color: var(--text);
border: 1px solid var(--cyan); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12px; font-weight: 500;
line-height: 1.45; text-align: left; box-shadow: var(--shadow); pointer-events: none;
opacity: 0; visibility: hidden; transition: opacity .12s; top: 0; left: 0;
}
#bt-tip.on { opacity: 1; visibility: visible; }
[data-tip] { cursor: help; }
table.bt-table td.cards { display: flex; gap: 10px; justify-content: center; align-items: center; }
td.cards .cy, td.cards .cr { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
td.cards .cy::before { content: ""; width: 9px; height: 12px; background: var(--amber); border-radius: 2px; display: inline-block; }
td.cards .cr::before { content: ""; width: 9px; height: 12px; background: var(--red); border-radius: 2px; display: inline-block; }
table.bt-table tr.rtotal td.cards .cy, table.bt-table tr.rtotal td.cards .cr { color: var(--cyan); }
.open-cell { text-align: center; }
.btn-open { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 6px 11px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; color: var(--cyan); border: 1px solid rgba(0, 168, 232, .45); background: rgba(0, 168, 232, .08); transition: .15s; }
.btn-open:hover { background: var(--cyan); color: #04121d; border-color: var(--cyan); transform: translateY(-1px); }
table.bt-table tbody.mrow { cursor: pointer; }
table.bt-table tbody.mrow:hover td { background: var(--surface2); }
table.bt-table tbody.mrow:hover .btn-open { background: var(--cyan); color: #04121d; }
table.bt-table td.big { font-size: 16px; font-weight: 800; color: var(--cyan); }
table.bt-table td.h2h { font-size: 14px; }
table.bt-table td.h2h b { color: var(--text); }
table.bt-table .formbar { justify-content: center; }
.surf-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg2); border: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.bo-badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface2); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .03em; }
table.bt-table thead th .help { display: none; }
.stats-viewtoggle { margin: 12px 0 4px; }
.lgs-honest { display: flex; align-items: flex-start; gap: 8px; max-width: 900px; font-size: 13.5px; }
.lgs-honest svg { flex: none; margin-top: 2px; opacity: .8; }
.lgs-limited-banner { display: flex; align-items: flex-start; gap: 8px; max-width: 900px; font-size: 13.5px; margin: 10px 0 6px; }
.lgs-limited-banner svg { flex: none; margin-top: 2px; opacity: .8; }
.lgs-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.lgs-toolbar .lgs-sortlabel { font-size: 13px; }
.lgs-toolbar .lgs-updated { font-size: 12px; margin-left: auto; }
table.bt-table.lgs-table { min-width: 720px; }
table.bt-table.lgs-table td { vertical-align: middle; }
table.bt-table.lgs-table td.lgs-lg { max-width: 240px; white-space: normal; }
.lgs-lgname { font-weight: 700; }
.lgs-limited { margin-left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.lgs-acc-c { min-width: 132px; }
.lgs-acc { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.25; }
.lgs-acc .lgs-pct { font-weight: 800; font-size: 14px; color: var(--text); }
.lgs-acc .lgs-ic { font-size: 11px; color: var(--muted); font-weight: 600; }
.lgs-acc .lgs-n { font-weight: 800; font-size: 14px; color: var(--muted); }
.lgs-acc .lgs-band { font-size: 10px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); opacity: .85; }
.lgs-acc--ins .lgs-n { color: var(--muted); }
.lgs-acc--low .lgs-pct { color: var(--muted); }
.lgs-filterbar {
display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
margin: 10px 0 12px; padding: 12px 14px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.lgs-fb { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.lgs-fb > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lgs-filterbar select {
appearance: none; -webkit-appearance: none; background: var(--surface2);
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 30px 8px 12px;
font-size: 14px; color: var(--text); cursor: pointer; min-width: 180px;
}
.lgs-filterbar select:hover { border-color: var(--cyan); }
.lgs-filterbar select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,168,232,.16); }
.lgs-fchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; padding-bottom: 8px; }
.lgs-fchk .lgs-fcount { color: var(--muted); font-weight: 700; }
.lgs-filterbar .lgs-csv { margin-left: auto; align-self: flex-end; }
.lgs-premium-cta {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
margin: 10px 0 12px; padding: 12px 14px;
background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-md); font-size: 13.5px;
}
.lgs-premium-cta > span { display: inline-flex; align-items: center; gap: 8px; }
.lgs-follow-h, .lgs-follow-c { width: 34px; text-align: center; padding-left: 4px !important; padding-right: 4px !important; }
.lgs-follow {
background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1;
color: var(--muted); padding: 2px 4px; border-radius: var(--radius-sm); transition: color .12s, transform .12s;
}
.lgs-follow:hover { color: var(--gold); transform: scale(1.12); }
.lgs-follow.is-on { color: var(--gold); }
.lgs-follow:disabled { opacity: .5; cursor: default; }
.lgs-acc-h--dim { opacity: .38; }
th.lgs-acc-h--on { color: var(--cyan); }
.pred-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.donut-hole { position: absolute; inset: 13px; background: var(--surface); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.donut-hole b { font-size: 21px; }
.donut-hole span { font-size: 11px; color: var(--muted); font-weight: 700; }
.pred-bar-wrap { flex: 1; min-width: 220px; }
.kv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 14px; }
.kv-row > div { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; text-align: center; }
.kv-row span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.kv-row b { font-size: 16px; color: var(--cyan); }
.pred-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.pblk { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; min-width: 0; }
.pblk.pblk-goals-blk, .pblk.pblk-1x2 { grid-column: 1 / -1; }
.pblk-h { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); margin: 0 0 8px; }
.pblk-goals { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pblk-total { text-align: center; flex: 0 0 auto; }
.pblk-total b { display: block; font-size: 34px; line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pblk-total span { display: block; font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 3px; }
.pblk-split { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.pblk-tm { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; font-size: 13px; }
.pblk-tm .pblk-tn { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pblk-tm .pblk-tv { font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pblk-tm .pblk-track { grid-column: 1 / -1; height: 7px; border-radius: var(--radius-pill); background: var(--surface2); overflow: hidden; }
.pblk-tm .pblk-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--cyan); }
.pblk-tm:nth-child(2) .pblk-fill { background: #6fb6ff; }
.pblk-1x2 .probbar { height: 34px; margin-bottom: 8px; }
.pblk-legend { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.pblk-legend > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pblk-legend b { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pblk-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.pblk-dot.d1 { background: var(--cyan); } .pblk-dot.dx { background: #5b6b8c; } .pblk-dot.d2 { background: #6fb6ff; }
.pblk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pblk-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 13px; font-size: 13px; font-weight: 700; }
.pblk-chip .pblk-pct { color: var(--cyan); font-variant-numeric: tabular-nums; }
.pblk-score { display: inline-flex; align-items: baseline; gap: 8px; }
.pblk-score b { font-size: 26px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pblk-forms { display: grid; gap: 10px; }
.pblk-fteam { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
.pblk-fteam .pblk-fn { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pblk-fteam .pblk-fbal { font-size: 12.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.pblk-fteam .formbar { grid-column: 1 / -1; flex-wrap: wrap; }
.pblk-h2h { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; }
.pblk-h2h .pblk-h2n { font-weight: 700; }
.pblk-h2h .pblk-h2s { font-size: 20px; font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pblk-h2h .pblk-h2c { font-size: 12px; color: var(--muted); font-weight: 700; }
.pblk-h2list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 7px; }
.pblk-h2list li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-size: 12.5px; }
.pblk-h2list .h2l-t { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pblk-h2list .h2l-t.h2l-a { text-align: right; }
.pblk-h2list .h2l-sc { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pblk-h2list .h2l-sc b { color: var(--cyan); font-weight: 800; font-size: 13.5px; }
.pblk-h2list .h2l-sc .muted { font-size: 11.5px; }
.pblk-h2list .h2l-d { color: var(--muted); font-weight: 700; }
.pblk-h2list .resb { justify-self: end; }
@media (max-width: 560px) {
.pred-blocks { grid-template-columns: 1fr; gap: 10px; }
.pblk { padding: 12px 13px; }
.pblk-total b { font-size: 28px; }
.pblk-score b { font-size: 22px; }
.pblk-goals { gap: 12px; }
}
.reason-h { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); margin-bottom: 6px; }
.analysis { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.an-item { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.an-item .an-k { display: block; font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.an-item .an-v { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.an-item.an-main { border-color: rgba(31, 199, 125, .5); background: rgba(31, 199, 125, .1); }
.an-item.an-main .an-v { color: var(--green); }
.an-item.an-value { border-color: rgba(231, 193, 75, .45); background: rgba(231, 193, 75, .07); }
.an-item.an-value .an-v { color: var(--gold); }
.an-item .an-sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; line-height: 1.3; }
.ah-block { margin-top: 12px; }
.ah-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.ah-odds { margin-bottom: 0; }
.ah-odds > div { padding: 8px; }
.ah-odds span { font-size: 11px; }
.ah-odds b { font-size: 16px; }
.insights-card { border-color: rgba(0, 168, 232, .35); }
ul.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.insights .ins { position: relative; padding: 9px 12px 9px 36px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.4; }
ul.insights .ins::before { position: absolute; left: 11px; top: 8px; font-size: 14px; }
.ins-value { border-color: rgba(231, 193, 75, .4); } .ins-value::before { content: "💎"; }
.ins-ht::before { content: "⏱"; } .ins-goals::before { content: "⚽"; } .ins-corners::before { content: "🚩"; }
.ins-cards::before { content: "🟨"; } .ins-fav::before { content: "⭐"; } .ins-h2h::before { content: "⚔️"; } .ins-serve::before { content: "🎾"; }
table.h2h-table td, table.h2h-table th { padding: 7px 10px; }
table.h2h-table tbody tr:hover { background: var(--surface2); }
.auth-link { color: var(--muted); font-weight: 700; font-size: 14px; padding: 6px 8px; white-space: nowrap; }
.auth-link:hover { color: var(--text); }
.auth-card { padding: 26px 24px; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
.auth-form input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: var(--radius-md); font-size: 15px; font-family: inherit; }
.auth-form input:focus { outline: none; border-color: var(--cyan); }
.input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--radius-sm); font-size: 16px; font-family: inherit; width: 100%; box-sizing: border-box; }
.input:focus { outline: none; border-color: var(--cyan); }
.auth-err { background: var(--red-bg); border: 1px solid rgba(255, 93, 115, .35); color: #ffb3bf; border-radius: var(--radius-md); padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.auth-ok { display: flex; align-items: center; gap: 8px; background: var(--green-bg, rgba(52,199,89,.12)); border: 1px solid rgba(52,199,89,.35); color: var(--green, #34c759); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.auth-ok .ic { flex: none; }
.btn-google { width: 100%; justify-content: center; background: #fff; color: #1f2937; border: 1px solid #dadce0; font-weight: 700; }
.btn-google:hover { background: #f5f6f7; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 700; margin: 14px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.astat { background: linear-gradient(180deg, var(--surface), var(--bg2)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.astat span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.astat b { font-size: 24px; }
.odds-mini .osel { color: var(--muted); font-weight: 800; margin-right: 3px; }
.fb-range label { display: block; text-align: center; }
.fb-range label .help, .fb-range label .fb-pro { vertical-align: middle; }
.fb-lock label { color: var(--gold); }
.fb-lock input { opacity: .45; cursor: not-allowed; }
.fchk.fb-lock { color: var(--gold); cursor: default; }
.fchk.fb-lock input { opacity: .45; cursor: not-allowed; }
.fb-pro { font-style: normal; text-decoration: none; cursor: pointer; }
.premium-includes { max-width: 760px; margin: 44px auto 0; }
.adv-list { display: grid; gap: 12px; }
.adv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.adv-t { font-weight: 800; font-size: 15px; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.feat-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--gold); }
.feat-ic svg { width: 18px; height: 18px; }
.adv-ic svg { width: 19px; height: 19px; }
.plan li.feat { align-items: flex-start; }
.plan li.feat::before { content: none; }
.plan li.feat .feat-ic { margin-top: 1px; }
.adv-d { color: var(--muted); font-size: 14px; line-height: 1.5; }
.value-lock { text-align: center; }
.pill-lock, .an-lock { cursor: pointer; }
.pill-lock:hover, .an-lock:hover { filter: brightness(1.15); }
.reco-gate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(231,193,75,.10); border: 1px solid rgba(231,193,75,.4); border-radius: var(--radius-md); padding: 11px 15px; margin-bottom: 16px; color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.reco-gate:hover { background: rgba(231,193,75,.16); }
.reco-gate .reco-gate-ic { display: inline-flex; flex: none; }
.reco-gate .reco-gate-tx { flex: 1 1 auto; min-width: 0; }
.reco-gate .reco-gate-cta { flex: none; color: var(--gold); font-weight: 800; white-space: nowrap; }
.card.card-locked .probbar { opacity: .9; }
.pill-locked-reco { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--radius-md); background: rgba(231,193,75,.12); border: 1px dashed rgba(231,193,75,.5); color: var(--text); text-decoration: none; }
.pill-locked-reco:hover { background: rgba(231,193,75,.18); }
.pill-locked-reco .plr-ic { display: inline-flex; flex: none; }
.pill-locked-reco .plr-ic .ic { width: 18px; height: 18px; }
.pill-locked-reco .plr-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pill-locked-reco .plr-tx b { font-size: 12.5px; font-weight: 800; }
.pill-locked-reco .plr-cta { font-size: 11.5px; color: var(--gold); font-weight: 700; }
.pbets-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 18px; color: var(--muted); }
.pbets-list { display: flex; flex-direction: column; gap: 8px; }
.pbet-row { display: grid; grid-template-columns: 150px 1fr auto auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; transition: opacity .15s; }
.pbet-when { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.3; }
.pbet-time { font-weight: 700; color: var(--text); }
.pbet-league { color: var(--muted); }
.pbet-match { font-weight: 700; color: var(--text); text-decoration: none; }
.pbet-match:hover { color: var(--cyan); }
.pbet-match .vs { color: var(--muted); font-weight: 400; }
.pbet-pick { font-weight: 700; color: var(--gold); white-space: nowrap; }
.pbet-lock { text-decoration: none; }
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: none; }
.ic-gold { color: var(--gold); }
.btn .ic { width: 16px; height: 16px; }
.pill .ic, .an-k .ic, .insights .ic, .chip .ic, .pbet-pick .ic, .pbet-lock .ic { width: 14px; height: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.eyebrow .ic { width: 15px; height: 15px; }
.eyebrow-stars { gap: 3px; }
.eyebrow-stars .ic { width: 13px; height: 13px; }
.card-league { display: inline-flex; align-items: center; gap: 5px; }
.card-league .ic { width: 15px; height: 15px; opacity: .92; }
.sp-ico .ic { width: 15px; height: 15px; vertical-align: -0.2em; }
.surf-chips .chip .ic, .tabs a .ic, .sport-tabs a .ic { width: 15px; height: 15px; }
#theme-toggle .ic { width: 18px; height: 18px; }
.brand { flex: none; display: flex; align-items: center; }
.brand img { height: 32px; width: auto; max-width: none; }
.nav a.nav-gold { color: var(--gold); }
.nav a.nav-gold:hover, .nav a.nav-gold.active { color: var(--gold); background: rgba(231,193,75,.12); }
.pbets-note { margin: -6px 0 16px; font-size: 13.5px; }
.pbets-stats { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px; }
.stats-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 14px; }
.stats-head .ic { color: var(--cyan); width: 17px; height: 17px; }
.pbets-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.kpi { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; text-align: center; }
.kpi-n { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px; }
.kpi-n .ic { width: 17px; height: 17px; }
.kpi-split .kpi-sep { color: var(--muted); font-weight: 400; }
.kpi-sub { font-size: 14px; font-weight: 600; color: var(--muted); }
.pbets-flat { margin: 10px 0 0; font-size: 12px; }
.day-card + .day-card { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.day-head { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; margin: 0 0 12px; color: var(--gold); }
.day-head .ic { width: 16px; height: 16px; }
.kpi-l { font-size: 11.5px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.pbets-chart { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.chart-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.bar-lbl .ic { width: 15px; height: 15px; }
.bar-track { height: 10px; background: var(--surface2); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cyan), #6fe0ff); }
.bar-val { font-size: 13px; font-weight: 700; text-align: right; color: var(--text); }
.pbet-done { display: inline-flex; align-items: center; gap: 6px; }
.pbet-done .ic { width: 15px; height: 15px; }
.band-premium { border: 1px solid rgba(231,193,75,.35); background: linear-gradient(160deg, rgba(231,193,75,.10), var(--surface) 60%); }
.band-premium .eyebrow { justify-content: center; color: var(--gold); margin-bottom: 4px; }
.mybets { margin-top: 26px; }
.mybets-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.pl-pos { color: #3fb96d; }
.pl-neg { color: #e5634d; }
.mybet-status { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.st .ic { width: 13px; height: 13px; }
.st-pending { background: var(--surface2); color: var(--muted); }
.st-won { background: rgba(63,185,109,.16); color: #3fb96d; }
.st-lost { background: rgba(229,99,77,.16); color: #e5634d; }
.st-push { background: var(--surface2); color: var(--text); }
.mybet-score { font-size: 12px; }
.mybet-undo { background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.mybet-undo:hover { color: var(--text); }
.pbet-row.mybet.won { border-color: rgba(63,185,109,.4); }
.pbet-row.mybet.lost { opacity: .78; }
@media (max-width: 720px) {
.mybet-status { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 720px) {
.bar-row { grid-template-columns: 96px 1fr 24px; gap: 8px; }
.bar-lbl { font-size: 12px; }
.kpi-n { font-size: 20px; }
}
.pbet-done { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pbet-done:hover { color: var(--text); }
.pbet-done:disabled { opacity: .6; cursor: default; }
.pbet-done.on { background: rgba(63,185,109,.15); color: #3fb96d; border-color: #3fb96d; }
.pbet-row.done { opacity: .55; }
.pbet-row.done .pbet-pick, .pbet-row.done .pbet-match { text-decoration: line-through; }
.card-done { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; line-height: 1.4; background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; text-decoration: none; }
.card-done .ic { width: 13px; height: 13px; }
.card-done:hover { color: var(--text); border-color: var(--muted); }
.card-done:disabled { opacity: .6; cursor: default; }
.card-done.on { background: #3fb96d; color: #fff; border-color: #3fb96d; }
.card-done.on:hover { color: #fff; filter: brightness(1.06); }
.card-done-lock { color: var(--gold); border-color: rgba(231,193,75,.4); background: transparent; }
.card-done-lock:hover { filter: brightness(1.12); color: var(--gold); }
.card-trk { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; margin-left: 5px; border-radius: var(--radius-pill); background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: pointer; text-decoration: none; vertical-align: middle; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.card-trk .ic { width: 13px; height: 13px; }
.card-trk .card-trk-tx { display: inline; }
.card-trk:hover { color: var(--cyan); border-color: var(--cyan); }
.card-trk:disabled { opacity: .6; cursor: default; }
.card-trk.on { background: var(--cyan); color: #04121d; border-color: var(--cyan); }
.card-trk-lock { color: var(--gold); border-color: rgba(231,193,75,.4); }
.card-trk-lock:hover { filter: brightness(1.12); color: var(--gold); border-color: rgba(231,193,75,.6); }
@media (max-width: 400px) { .card-trk { padding: 3px 6px; } .card-trk .card-trk-tx { display: none; } }
.lc-trk-row { display: flex; justify-content: flex-end; margin: 8px 0 0; }
.lc-trk { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 11px; border-radius: var(--radius-pill); background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: pointer; text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.lc-trk .ic { width: 13px; height: 13px; }
.lc-trk:hover { color: var(--cyan); border-color: var(--cyan); }
.lc-trk:disabled { opacity: .6; cursor: default; }
.lc-trk.on { background: var(--cyan); color: #04121d; border-color: var(--cyan); }
.lc-trk-lock { color: var(--gold); border-color: rgba(231,193,75,.4); }
.lc-trk-lock:hover { filter: brightness(1.12); color: var(--gold); border-color: rgba(231,193,75,.6); }
.card.card-isdone { opacity: .6; }
@media (max-width: 720px) {
.pbet-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
.pbet-when { grid-column: 1 / -1; flex-direction: row; gap: 10px; }
.pbet-match { grid-column: 1 / -1; }
.pbet-pick { white-space: normal; }
}
.nav-toggle {
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; width: 42px; height: 38px; padding: 0; cursor: pointer;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-cta { display: none; }
@media (max-width: 1200px) {
.nav-toggle { display: flex; }
.header-actions { margin-left: auto; }
.nav {
flex: none; flex-direction: column; gap: 2px;
position: absolute; left: 0; right: 0; top: 64px; margin: 0;
padding: 10px 14px 16px; background: var(--surface);
border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
max-height: calc(100dvh - 64px); overflow-y: auto;
transform: translateY(-10px); opacity: 0; visibility: hidden;
transition: transform .18s ease, opacity .18s ease, visibility .18s;
}
.site-header.nav-open .nav { transform: none; opacity: 1; visibility: visible; }
.nav a { font-size: 15.5px; padding: 12px; border-radius: var(--radius-md); white-space: normal; }
}
@media (max-width: 720px) {
.wrap { padding: 0 18px; }
.hide-sm { display: none !important; }
.hero { padding: 36px 0 18px; }
.header-actions { gap: 8px; }
.nav-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-cta .btn, .nav-cta .auth-link { width: 100%; justify-content: center; }
.table-wrap { -webkit-overflow-scrolling: touch; }
table.bt-table { min-width: 680px; font-size: 12px; }
table.bt-table thead th { padding: 8px 6px; }
table.bt-table td { padding: 6px 6px; }
table.bt-table .btn-open { padding: 5px 8px; font-size: 11px; }
table.stats { font-size: 12px; min-width: 640px; }
table.stats th, table.stats td { padding: 8px 9px; }
.scroll-hint { display: block; }
.filters-pro { gap: 8px; }
.fgroup { flex: 1 1 100%; min-width: 0; }
.fgroup-actions { flex: 1 1 100%; justify-content: space-between; }
.filters input { min-width: 0; width: 100%; }
main h1 { font-size: clamp(22px, 7vw, 30px) !important; }
.section-head h2 { font-size: 22px; }
}
@media (max-width: 560px) {
.section { padding-block: 28px; }
.hero h1 { font-size: clamp(26px, 8vw, 38px); }
.hero p.lead { font-size: 16px; }
.hero-cta .btn { flex: 1 1 100%; justify-content: center; }
.section-head { gap: 10px; }
.band { padding: 22px 16px; }
.news-form { flex-direction: column; }
.news-form input { min-width: 0; width: 100%; }
.news-form .btn { width: 100%; justify-content: center; }
.site-footer .cols { flex-direction: column; gap: 18px; }
.odds-big { gap: 8px; }
.pred-top { gap: 14px; }
.wrap.section[style*="max-width"] { max-width: 100% !important; }
}
.cookie-banner {
position: fixed; z-index: 200;
left: auto; right: 20px; bottom: 20px;
width: min(440px, calc(100vw - 40px));
padding: 14px 16px;
background: rgba(13, 19, 32, .98); backdrop-filter: blur(10px);
border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner__inner {
display: flex; align-items: center; gap: 10px 14px;
flex-wrap: wrap; justify-content: space-between;
}
.cookie-banner__text { flex: 1 1 100%; min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cookie-banner__text strong { display: block; margin-bottom: 2px; font-size: 13px; color: var(--text); }
.cookie-banner__text p { margin: 0; }
.cookie-banner__text a { color: var(--cyan); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; }
@media (max-width: 560px) {
.cookie-banner { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 10px 12px; border-radius: var(--radius-md); }
.cookie-banner__inner { gap: 9px 10px; }
.cookie-banner__text { font-size: 12px; }
.cookie-banner__text strong { display: none; }
.cookie-banner__text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cookie-banner__actions { gap: 8px; }
.cookie-banner__actions .btn { padding: 7px 14px; }
}
* { -webkit-tap-highlight-color: rgba(0, 168, 232, .18); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, .btn:focus-visible, .fav:focus-visible,
.fav-live:focus-visible, .help:focus-visible {
outline: 2px solid var(--cyan-d); outline-offset: 2px; border-radius: var(--radius-sm);
}
:where([id]) { scroll-margin-top: calc(var(--header-h) + 12px); }
table.hist:not(.ric-table) { min-width: 560px; }
table.standings-table { min-width: 600px; }
.team { gap: 8px; }
.team .nm { min-width: 0; overflow-wrap: anywhere; }
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .scroll-hint,
html[data-theme="light"] .filter-count,
html[data-theme="light"] .fgroup-h,
html[data-theme="light"] .reason-h,
html[data-theme="light"] table.bt-table .fecha .fdate,
html[data-theme="light"] .cookie-banner__text a,
html[data-theme="light"] .help:hover,
html[data-theme="light"] .help:focus { color: var(--cyan-d); }
html[data-theme="light"] .diff-hi,
html[data-theme="light"] .diff-hi b,
html[data-theme="light"] table.bt-table .diff-hi b,
html[data-theme="light"] .nav a.nav-gold { color: #7d5f14; }
@media (max-width: 560px) {
.cookie-banner {
left: max(8px, env(safe-area-inset-left));
right: max(8px, env(safe-area-inset-right));
bottom: max(8px, env(safe-area-inset-bottom));
}
}
@media (max-width: 1200px) {
.site-header .wrap {
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
}
@media (max-width: 720px) {
.grid { grid-template-columns: minmax(0, 1fr); }
.card-league { min-width: 0; }
.card-foot { flex-wrap: wrap; }
.filters select, .filters input,
.fb select, .fb input,
.fgroup .fb select, .fgroup .fb input,
.fb .mm input, .fgroup .fb .mm input,
.bb-filterbar select, .bb-filterbar input[type="text"], .bb-mm input,
.hist-filter select { font-size: 16px; }
.lang a { padding: 8px 11px; font-size: 13px; }
.fav, .fav-live { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.fav-live { min-height: 36px; }
.mybet-undo { padding: 8px 6px; }
.tabs, .surf-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.tabs::-webkit-scrollbar, .surf-chips::-webkit-scrollbar { display: none; }
.tabs a, .surf-chips .chip { flex: 0 0 auto; }
table.hist { font-size: 12px; }
table.compare { font-size: 12.5px; }
table.compare th, table.compare td { padding: 8px 5px; }
}
@media (max-height: 480px) and (orientation: landscape) {
.hero { padding: 24px 0 14px; }
.section { padding: 22px 0; }
}
.mkt-move .mkt-row { padding: 9px 0; border-top: 1px solid var(--border); }
.mkt-move .mkt-row:first-of-type { border-top: 0; padding-top: 2px; }
.mkt-name { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.mkt-name .ic { width: 13px; height: 13px; }
.mkt-sels { display: flex; flex-direction: column; gap: 5px; }
.mkt-sel { display: grid; grid-template-columns: minmax(26px, max-content) 1fr auto; align-items: baseline; gap: 8px; font-size: 13.5px; }
.mkt-lbl { color: var(--muted); font-weight: 800; white-space: nowrap; }
.mkt-od, .mkt-od b { color: var(--text); }
.mkt-delta { font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.mkt-cta { display: inline-block; color: var(--gold); font-weight: 700; font-size: 13px; }
.mkt-head { display: flex; align-items: center; gap: 6px; }
.mkt .mkt-head h3 { margin: .2em 0 4px; flex: 1; }
.mkt-i { display: inline-flex; cursor: help; color: var(--muted); }
.mkt-i .ic { width: 15px; height: 15px; }
.mkt-sub { font-size: 11.5px; color: var(--muted); margin: 0 0 9px; font-weight: 600; }
.mkt-none { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.oj-warn-t { color: #e5634d; }
.mkt-sum { width: 100%; border-collapse: collapse; font-size: 13px; }
.mkt-sum th { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 0 0 4px; }
.mkt-sum th:last-child, .mkt-sum td:last-child { text-align: right; }
.mkt-sum td { padding: 4px 0; border-top: 1px solid var(--border); }
.mkt-sel { font-weight: 800; color: var(--muted); width: 18px; }
.mkt-oo { color: var(--muted); white-space: nowrap; }
.mkt-oo b { color: var(--text); }
.mkt-best { white-space: nowrap; }
.mkt-best b { color: var(--text); }
.mkt-bb { font-size: 10px; font-weight: 800; color: var(--muted); }
.mkt-star { color: var(--gold); cursor: help; }
.mkt-d { font-style: normal; font-weight: 800; font-size: 11px; margin-left: 3px; }
.d-up { color: #e5634d; } 
.d-dn { color: var(--cyan); } 
.mkt-more { margin-top: 10px; }
.mkt-more > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; color: var(--cyan); padding: 6px 0 0; display: flex; align-items: center; gap: 5px; }
.mkt-more > summary::-webkit-details-marker { display: none; }
.mkt-more > summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.mkt-more[open] > summary::before { transform: rotate(90deg); }
.mkt-body { padding-top: 8px; }
.mkt-tabs { position: relative; }
.mkt-r { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mkt-tabbar { display: flex; gap: 4px; margin: 0 0 8px; }
.mkt-tabbar label { flex: 1; text-align: center; cursor: pointer; font-size: 11px; font-weight: 800; color: var(--muted); padding: 5px 4px; border: 1px solid var(--border); border-radius: var(--radius-md, 8px); white-space: nowrap; }
.mkt-mg { font-weight: 600; opacity: .8; }
.mkt-pane { display: none; }
.mkt-r1:checked ~ .mkt-pane.mkt-p1, .mkt-r2:checked ~ .mkt-pane.mkt-p2 { display: block; }
.mkt-r1:checked ~ .mkt-tabbar label:nth-child(1), .mkt-r2:checked ~ .mkt-tabbar label:nth-child(2) { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.mkt-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mkt-t th { font-size: 9.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: right; padding: 0 0 3px; }
.mkt-t th:first-child { text-align: left; }
.mkt-t td { padding: 3px 0; border-top: 1px solid var(--border); text-align: right; white-space: nowrap; }
.mkt-t td:first-child { text-align: left; }
.mkt-t tbody tr[data-tip] { cursor: help; }
.mkt-h { color: var(--text); font-weight: 600; }
.mkt-lag { color: var(--muted); font-size: 10px; margin-left: 3px; } 
.mkt-ln { color: var(--muted); font-size: 11px; }
.mkt-alt { color: #e5634d; font-size: 10px; font-weight: 700; line-height: 1.2; margin-top: 1px; } 
.mkt-now td { font-weight: 800; }
.mkt-now .mkt-h { font-weight: 800; }
.mkt-anchor td { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.mkt-anchor-l { font-size: 9px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; margin-left: 5px; }
.mkt-anchor .mkt-od { margin-left: 4px; }
.mkt-legend { font-size: 10px; color: var(--muted); line-height: 1.45; margin: 7px 0 0; }
.mkt-foot { font-size: 10px; color: var(--muted); line-height: 1.45; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--border); }
.oj-anchor { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 5px 7px; border-radius: var(--radius-md, 8px); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.oj-a-l { font-size: 9.5px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.oj-a-v { font-size: 12.5px; color: var(--muted); }
.oj-a-v b { color: var(--text); font-size: 14px; }
.oj-sel-in { color: var(--text); }
.oj-now-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.oj-n-l { font-size: 9.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.oj-n-v { font-size: 15px; color: var(--text); }
.oj-spark { width: 74px; height: 22px; margin-left: auto; color: var(--cyan); flex: none; }
.oj-moves { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--text); background: var(--chip, rgba(127,127,127,.12)); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 9px; margin: 0 0 9px; }
.oj-moves .ic { width: 12px; height: 12px; flex: none; color: var(--cyan); }
.mkt-lock { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.mkt-lock-h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--text); margin-bottom: 5px; flex-wrap: wrap; }
.mkt-lock-h .ic { width: 13px; height: 13px; flex: none; }
.mkt-lock-n { font-weight: 600; color: var(--muted); }
.mkt-oth { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.mkt-oth-h { font-size: 9.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.mkt-oth .mkt-row { padding: 5px 0; }
.mkt-name { font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.mkt-name .ic { width: 11px; height: 11px; }
.mkt-sels { display: flex; flex-direction: column; gap: 3px; }
.mkt-sel-r { display: grid; grid-template-columns: minmax(24px, max-content) 1fr auto; align-items: baseline; gap: 6px; font-size: 12px; }
.mkt-lbl { color: var(--muted); font-weight: 800; white-space: nowrap; }
.mkt-od, .mkt-od b { color: var(--text); }
.mkt-delta { font-weight: 800; font-size: 11px; white-space: nowrap; }
.mkt-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-weight: 700; font-size: 13px; }
.mkt-move-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 12px; font-weight: 700; color: var(--muted); margin: 8px 0 0; }
.mkt-move-mini .ic { width: 13px; height: 13px; flex: none; }
.mkt-move-mini .mmm-od { color: var(--text); font-weight: 700; }
.mkt-move-mini .mmm-d { font-weight: 800; }
.chip-moved { text-decoration: none; }
.live-card.live-locked { cursor: pointer; opacity: .96; }
.live-card.live-locked:hover { border-color: var(--gold, #d4af37); }
.live-card.live-locked .live-lock-body { border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface2); }
.live-card.live-locked .live-lock-ic svg { width: 26px; height: 26px; }
.live-card.live-locked .team .nm { opacity: .92; }
.live-card .lc-signal { font-size: 12.5px; color: #bccadf; line-height: 1.4; margin: 2px 0 14px; }
.live-card .lc-signal b { color: var(--text); font-weight: 800; }
html[data-theme="light"] .live-card .lc-signal { color: #3a4a63; }
.live-card .lc-gauge { display: flex; align-items: center; gap: 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.live-card .lc-ring { --p: 0; width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--gcol, var(--cyan)) calc(var(--p) * 1%), var(--border) 0); display: flex; align-items: center; justify-content: center; }
.live-card .lc-ring i { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; font-style: normal; line-height: 1; }
.live-card .lc-ring b { font-size: 19px; font-weight: 800; color: var(--text); }
.live-card .lc-ring small { font-size: 8.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.live-card .lc-gtxt { min-width: 0; }
.live-card .lc-gl { font-size: 12px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.live-card .lc-gl .help { font-size: 12px; }
.live-card .lc-gd { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.live-card .lc-sigtag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--amber); background: var(--amber-bg, rgba(245, 165, 36, .12)); border: 1px solid rgba(245, 165, 36, .32); border-radius: var(--radius-pill); padding: 3px 10px; }
.live-card .lc-sigtag .ic { width: 13px; height: 13px; }
.live-card .lc-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(135deg, rgba(0, 168, 232, .16), rgba(47, 107, 255, .10)); border: 1px solid rgba(0, 168, 232, .4); border-radius: var(--radius-md); padding: 11px 14px; margin-bottom: 9px; }
.live-card .lc-pl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); margin-bottom: 2px; }
.live-card .lc-pn { font-size: 14px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.live-card .lc-pre { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.live-card .lc-pre .help { margin-left: 2px; }
.live-card .lc-pr { text-align: right; flex: 0 0 auto; }
.live-card .lc-po { font-size: 22px; font-weight: 800; color: var(--cyan); line-height: 1; }
.live-card .lc-pm { font-size: 10px; color: var(--muted); margin-top: 3px; }
.live-card .lc-board { background: var(--cyan-tint); border: 1px solid rgba(0,168,232,.4); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 10px; }
.live-card .lc-board-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.live-card .lc-board-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,168,232,.18); color: var(--cyan); flex: none; }
.live-card .lc-board-badge .ic { width: 17px; height: 17px; }
.live-card .lc-board-lbl { min-width: 0; }
.live-card .lc-board-cap { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); line-height: 1.3; }
.live-card .lc-board-cap .help { color: inherit; opacity: .75; font-size: 12px; }
.live-card .lc-board-pick { font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.15; }
.live-card .lc-board-stats { display: flex; border-top: 1px solid rgba(0,168,232,.28); padding-top: 9px; }
.live-card .lc-board-s { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-left: 1px solid rgba(0,168,232,.28); }
.live-card .lc-board-s:first-child { border-left: 0; }
.live-card .lc-board-s .n { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; display: inline-flex; align-items: center; gap: 3px; }
.live-card .lc-board-s .c { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.live-card .lc-board-s.is-ref .n { color: var(--muted); }
.live-card .lc-board-s.is-live .n { color: var(--cyan); font-size: 18px; }
.live-card .lc-board-s.is-live .c { color: var(--cyan); }
.live-card .lc-board-s .up { color: var(--green); display: inline-flex; align-items: center; }
.live-card .lc-board-s .up .ic { width: 13px; height: 13px; }
.live-card .lc-alt { font-size: 12.5px; margin-bottom: 8px; }
.live-card .lc-alt b { color: var(--cyan); font-weight: 700; }
.live-card .lc-alt .muted { font-size: 11px; }
.live-card .lc-stats { font-size: 11.5px; color: var(--muted); margin: 2px 0 4px; }
.live-card .lc-sig { display: inline-block; font-size: 11px; font-weight: 800; color: var(--green); background: var(--green-bg); border: 1px solid rgba(31, 199, 125, .32); border-radius: var(--radius-pill); padding: 2px 9px; margin: 0 0 11px; }
html[data-theme="light"] .live-card .lc-sig { color: var(--green); }
.live-card .lc-dev { display: flex; align-items: center; gap: 10px; margin: 11px 0 4px; }
.live-card .lc-devring { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--gc, var(--cyan)) calc(var(--p, 0) * 1%), var(--border) 0); display: flex; align-items: center; justify-content: center; }
.live-card .lc-devring i { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 13px; color: var(--text); }
.live-card .lc-devtx { min-width: 0; }
.live-card .lc-devl { font-size: 11px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 5px; }
.live-card .lc-devd { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.live-card .lc-oddscmp { margin: 11px 0 6px; }
.live-card .lc-oddscmp .lc-devl { margin-bottom: 6px; }
.live-card .lc-ocrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-card .lc-ocleg { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.live-card .lc-ocpre { font-size: 15px; font-weight: 800; color: var(--muted); }
.live-card .lc-oclive { font-size: 19px; font-weight: 800; color: var(--cyan); line-height: 1; }
.live-card .lc-ocarr { display: inline-flex; align-items: center; color: var(--green); }
.live-card .lc-ocarr .ic { width: 15px; height: 15px; }
.live-card .sw { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 11px; }
.live-card .sw-dnts { display: flex; justify-content: space-between; gap: 6px; }
.live-card .sw-d { flex: 1; text-align: center; min-width: 0; }
.live-card .sw-d .dl { font-size: 9.5px; color: var(--muted); font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-card .sw-d .dr { display: flex; align-items: center; justify-content: center; gap: 7px; }
.live-card .sw-d .dv { font-size: 13px; font-weight: 800; color: var(--text); }
.live-card .sw-d .dnt { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.live-card .sw-d .dnt::after { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); }
.live-card .sw-ic { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 11px; }
.live-card .sw-side { display: flex; gap: 9px; }
.live-card .sw .pip { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--text); }
.live-card .sw .pip .ico { height: 15px; display: flex; align-items: center; }
.live-card .sw .flag { width: 15px; height: 15px; }
.live-card .sw .sq { width: 9px; height: 12px; border-radius: 2px; display: inline-block; }
.live-card .sw .sq.y { background: #f5c518; }
.live-card .sw .sq.rd { background: #e5484d; }
.live-card .sw-ctr { flex: 1; text-align: center; min-width: 0; }
.live-card .sw-ctr .cl { font-size: 9px; color: var(--muted); font-weight: 700; line-height: 1.35; }
.live-card .sw-ctr .cv { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.live-card .sw-ctr .cv b { font-size: 12px; font-weight: 800; color: var(--text); }
.live-card .sw-ctr .cv small { color: var(--muted); font-weight: 600; font-size: 10px; }
.live-card .sw-ctr .cbar { height: 4px; border-radius: 2px; background: #e0743f; overflow: hidden; width: 54px; display: inline-block; }
.live-card .sw-ctr .cbar i { display: block; height: 100%; background: var(--cyan); }
.live-card .lc-statsbtn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 11px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); background: transparent; cursor: pointer; align-self: flex-start; transition: .15s; }
.live-card .lc-statsbtn:hover { color: var(--cyan); border-color: var(--cyan); }
.live-card .lc-statsbtn .ic { width: 13px; height: 13px; }
.at-band .section-head h2 { font-size: clamp(23px, 2.4vw, 27px); line-height: 1.15; }
.at-band .at-lock-ic svg { width: 26px; height: 26px; }
.at-band .at-list { }
.at-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.at-row .at-main { flex: 1 1 320px; min-width: 260px; }
.at-row .at-teams { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-row .at-teams .at-sport svg { width: 17px; height: 17px; vertical-align: middle; }
.at-row .at-match { font-weight: 800; color: var(--text); text-decoration: none; }
.at-row .at-match:hover { color: var(--cyan); }
.at-row .at-league { font-size: 12px; }
.at-row .at-leaguerow { margin-top: 4px; font-size: 12px; line-height: 1.3; }
.at-row .at-league-lbl { color: var(--muted); font-weight: 600; }
.at-row .at-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--text); }
.at-row .at-meta .at-time { font-size: 12px; }
.at-row .at-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; min-width: 200px; text-align: right; }
.at-row .at-selrow { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }
.at-row .at-sel { font-size: 13.5px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.at-row .at-oddsrow { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; flex-wrap: wrap; width: 100%; }
.at-row .at-pre { font-size: 12px; color: var(--muted); white-space: nowrap; }
.at-row .at-pre b { color: var(--text-soft, var(--text)); font-weight: 700; }
.at-row .at-arrow { font-size: 12px; color: var(--muted); }
.at-row .at-live { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.at-row .at-live .at-liveodds { font-size: 17px; font-weight: 800; color: var(--cyan); line-height: 1; }
.at-row .at-live .at-livebadge { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); background: var(--cyan-tint); border: 1px solid var(--cyan); border-radius: var(--radius-pill); padding: 1px 6px; }
.at-row .at-odds { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.at-row .at-odds b { color: var(--text); font-weight: 800; }
.at-row .at-odds .at-liveodds { font-size: 17px; font-weight: 800; color: var(--cyan); }
.at-row .at-outcome { font-size: 12px; font-weight: 800; border-radius: var(--radius-pill); padding: 4px 11px; white-space: nowrap; }
.at-row .at-outcome.at-won { color: var(--green); background: var(--green-bg); }
.at-row .at-outcome.at-lost { color: var(--red); background: var(--red-bg); }
.at-row .at-outcome.at-inplay { color: var(--cyan); background: var(--cyan-tint); }
.at-row .at-outcome.at-void { color: var(--muted); background: var(--surface2); border: 1px dashed var(--border); }
.at-row .at-outcome.at-push { color: var(--text); background: var(--surface2); border: 1px solid var(--border); }
.at-row .at-outcome.at-pend { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
@media (max-width: 620px) {
.at-row { padding: 11px 12px; }
.at-row .at-side { width: 100%; align-items: flex-start; text-align: left; gap: 7px; min-width: 0; margin-top: 4px; }
.at-row .at-selrow, .at-row .at-oddsrow { justify-content: flex-start; }
}
.at-stats { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.at-stats-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.at-stats-title svg { width: 17px; height: 17px; }
.at-stats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.at-stats-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.at-stats-tbl th, .at-stats-tbl td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.at-stats-tbl th { color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
.at-stats-tbl th.l, .at-stats-tbl td.l { text-align: left; }
.at-stats-tbl td.l { font-weight: 700; }
.at-stats-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.at-stats-tbl tr.at-stats-total td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 800; }
.at-stats-tbl td.at-pos { color: var(--green); font-weight: 800; }
.at-stats-tbl td.at-neg { color: var(--red); font-weight: 800; }
.at-stats-note { margin: 10px 0 0; font-size: 11.5px; }
.at-statchips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.at-statchip { flex: 1 1 auto; min-width: 92px; display: flex; flex-direction: column; gap: 3px;
padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface2); }
.at-statchip .asc-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.at-statchip .asc-v { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.15; }
.at-statchip .asc-v.at-pos { color: var(--green); }
.at-statchip .asc-v.at-neg { color: var(--red); }
.at-strat-panel { display: flex; flex-direction: column; gap: 14px; }
.at-strat-panel-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.at-strat-panel-head svg { width: 17px; height: 17px; }
.at-strat { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px 16px; }
.at-strat.at-strat-fav { border-left-color: var(--green); }
.at-strat.at-strat-over { border-left-color: var(--amber); }
.at-strat.at-strat-combined { border-left-color: var(--muted); background: var(--surface2); }
.at-strat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.at-strat-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.at-strat-title svg { width: 18px; height: 18px; }
.at-strat.at-strat-fav .at-strat-title svg { color: var(--green); }
.at-strat.at-strat-over .at-strat-title svg { color: var(--amber); }
.at-strat-sub { font-size: 12.5px; margin: 3px 0 12px; line-height: 1.45; }
.at-strat-badge { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
border-radius: var(--radius-pill); padding: 3px 10px; border: 1px solid var(--border); white-space: normal; max-width: 260px; text-align: right; line-height: 1.3; }
.at-strat-badge.is-active { color: var(--green); background: var(--green-bg); border-color: var(--green); }
.at-strat-badge.is-limited { color: var(--amber); background: var(--amber-bg); border-color: var(--amber); text-align: left; }
.at-strat-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; }
.at-strat-bysport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.at-strat-bysport .asb-l { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.at-strat-sportchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px;
border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface2); }
.at-strat-sportchip svg { width: 13px; height: 13px; }
.at-strat-sportchip b { font-weight: 800; }
.at-strat-sportchip .asc-y.at-pos { color: var(--green); }
.at-strat-sportchip .asc-y.at-neg { color: var(--red); }
.at-teaser { margin-top: 14px; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: var(--radius-lg);
background: var(--surface); padding: 14px 16px; }
.at-teaser-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.at-teaser-head svg { width: 17px; height: 17px; color: var(--green); }
.at-teaser-metrics { margin: 8px 0 0; font-size: 15px; font-weight: 800; }
.at-teaser-disc { margin: 8px 0 0; font-size: 11.5px; }
.at-itf-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: var(--radius-sm); background: var(--cyan-tint); color: var(--text-soft); font-size: 12.5px; line-height: 1.45; }
.at-itf-notice-ic { flex: none; display: inline-flex; margin-top: 1px; }
.at-itf-notice-ic svg { width: 15px; height: 15px; color: var(--cyan); }
.at-filt .at-stats-tbl tr.at-filt-you td { background: var(--cyan-tint); }
.at-filt .at-stats-tbl tr.at-filt-you td.l { box-shadow: inset 3px 0 0 var(--cyan); }
.at-you-badge { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: .03em; color: var(--cyan); background: var(--cyan-tint); border: 1px solid var(--cyan); border-radius: var(--radius-pill); padding: 1px 7px; vertical-align: middle; }
.at-promo-badge { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
color: var(--amber); background: var(--amber-bg, rgba(240,180,40,.14)); border: 1px solid var(--amber); border-radius: var(--radius-pill); padding: 1px 7px; vertical-align: middle; cursor: help; }
.lsm { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); padding: 16px; }
.lsm[hidden] { display: none; }
.lsm-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 460px; width: 100%; max-height: 90vh; overflow: auto; padding: 20px; position: relative; box-shadow: 0 12px 48px rgba(0, 0, 0, .5); }
.lsm-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.lsm-x:hover { color: var(--text); }
.lsm-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 16px; padding-right: 20px; }
.lsm-th, .lsm-ta { font-weight: 800; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.lsm-ta { text-align: right; }
.lsm-tt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); white-space: nowrap; }
.lsm-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.lsm-rv { font-weight: 800; font-size: 14px; color: var(--text); min-width: 34px; }
.lsm-rva { text-align: right; }
.lsm-rl { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.lsm-bar { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.lsm-bar .lsm-bh { display: block; height: 100%; background: var(--cyan); }
.guias-cluster-h { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan); margin: 36px 0 14px; }
.guias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.guia-card { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: var(--text); }
.guia-card-cluster { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.guia-card-title { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--text); }
.guia-card-desc { font-size: 13.5px; line-height: 1.55; }
.guia-card-more { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 800; color: var(--cyan); }
.guia-card:hover .guia-card-title { color: var(--cyan); }
.guia-article { max-width: 820px; }
.guia-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 16px; }
.guia-breadcrumb a { color: var(--muted); text-decoration: none; }
.guia-breadcrumb a:hover { color: var(--cyan); }
.guia-head { margin-bottom: 22px; }
.guia-title { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: -.015em; margin: .1em 0 0; }
.guia-body { max-width: 72ch; font-size: 17px; line-height: 1.72; color: var(--text); }
.guia-body > :first-child { margin-top: 0; }
.guia-body p { margin: 0 0 1.05em; }
.guia-body h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.01em; margin: 1.8em 0 .5em; padding-top: .2em; }
.guia-body h3 { font-size: 20px; line-height: 1.3; margin: 1.5em 0 .4em; }
.guia-body h4 { font-size: 17px; margin: 1.3em 0 .35em; }
.guia-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.guia-body a:hover { text-decoration-thickness: 2px; }
.guia-body strong { color: var(--text); font-weight: 700; }
.guia-body ul, .guia-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.guia-body li { margin: 0 0 .4em; }
.guia-body li > ul, .guia-body li > ol { margin: .4em 0 .2em; }
.guia-body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.guia-body blockquote { margin: 1.4em 0; padding: 12px 18px; border-left: 3px solid var(--cyan); background: var(--surface); border-radius: 0 10px 10px 0; color: var(--text); }
.guia-body blockquote p { margin: .3em 0; }
.guia-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; }
.guia-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto; margin: 1.3em 0; }
.guia-body pre code { background: none; border: 0; padding: 0; font-size: 14px; line-height: 1.6; }
.guia-body .legal-block { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: var(--radius-md); padding: 14px 18px; margin: 1.6em 0; font-size: 14.5px; }
.guia-body .legal-block p { margin: .3em 0; }
.guia-table-wrap { overflow-x: auto; margin: 1.4em 0; -webkit-overflow-scrolling: touch; }
.guia-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 420px; }
.guia-table th, .guia-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
.guia-table thead th { background: var(--surface); color: var(--text); font-weight: 800; }
.guia-table tbody tr:nth-child(even) { background: var(--surface); }
.guia-responsible { display: flex; gap: 12px; align-items: flex-start; margin: 32px 0 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.guia-responsible .plus18 { flex: none; margin-top: 1px; }
.guia-responsible a { color: var(--cyan); }
.guia-links { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.guia-links-h { font-size: 18px; margin: 0 0 14px; }
.guia-links-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.guia-link-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none; transition: .15s; }
.guia-link-chip:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.guia-link-chip .ic { width: 15px; height: 15px; }
.guia-legal { display: flex; gap: 10px; align-items: flex-start; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.6; }
.guia-legal .plus18 { flex: none; margin-top: 1px; }
.guia-legal a { color: var(--cyan); }
@media (max-width: 560px) {
.guia-body { font-size: 16px; }
.guia-body h2 { font-size: 22px; }
}
.home .section { border-bottom: 1px solid var(--border-soft); }
.home .section.alt { background: var(--surface); }
.home .section-head.sh-stack { display: block; }
.home .section-head.sh-center { display: block; text-align: center; max-width: 760px; margin: 0 auto 26px; }
.home .section-head .lead { font-size: 16.5px; color: var(--muted); margin-top: 10px; max-width: 760px; }
.home h2.h2-md { font-size: clamp(24px, 3.4vw, 32px); }
.home .mt-lg { margin-top: 22px; }
.home .lnk { color: var(--cyan); font-weight: 700; font-family: var(--font-head); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.home .lnk:hover { color: var(--cyan-d); }
.home .lnk-gold { color: var(--gold); }
.home .eyebrow.eyebrow-gold { color: var(--gold); display: inline-flex; align-items: center; gap: 8px; }
.home .eyebrow.eyebrow-live { color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.home .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; box-shadow: 0 0 0 0 rgba(var(--red-rgb), .5); animation: bt-pulse 1.6s infinite; }
@keyframes bt-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), .5); } 70% { box-shadow: 0 0 0 7px rgba(var(--red-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0); } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; box-shadow: 0 0 0 0 rgba(var(--red-rgb), .5); animation: bt-pulse 1.6s infinite; vertical-align: middle; }
.tab-btn.tab-live .live-dot { width: 7px; height: 7px; margin-right: 5px; }
.card.card-live { border-color: rgba(226, 58, 82, .38); }
.card-when .live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; flex: none; }
.card-when .card-livescore { flex: none; white-space: nowrap; font-weight: 800; font-size: 15px; color: var(--text); }
.home .hero .kgrid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 48px; align-items: center; }
.home .hero h1 { font-size: clamp(34px, 5.2vw, 54px); line-height: 1.04; margin: 16px 0 0; letter-spacing: -.03em; }
.home .hero h1 .accent { color: var(--cyan); }
.home .hero p.sub { color: var(--muted); font-size: 18px; line-height: 1.55; margin-top: 18px; max-width: 560px; }
.home .hero .cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.home .hero .hero-points.hp-check { margin-top: 22px; }
.home .hero .hp-check li::before { content: none; }
.home .hero .hp-check li { color: var(--text-soft); font-size: 14.5px; align-items: flex-start; }
.home .hero .hp-check li .ic { color: var(--green); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.home .hero .hero-micro { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.home .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.home .hero-card .hc-top { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; }
.home .hero-card .hc-top .tag { font-family: var(--font-head); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.home .hero-card .hc-body { padding: 16px; }
.home .kpi-eyebrow { display: block; margin-bottom: 16px; }
.home .kpibar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 20px; }
.home .kpi-n { font-family: var(--font-head); font-weight: 700; font-size: 36px; color: var(--text); letter-spacing: -.03em; line-height: 1; }
.home .kpi-n b { color: var(--cyan); }
.home .kpi-l { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 9px; }
.home .kpi-note { color: var(--muted); font-size: 12.5px; margin-top: 16px; }
.home .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home .feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; color: inherit; transition: transform .14s ease, box-shadow .18s ease, border-color .18s; }
.home .feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--cyan); }
.home .feat .ic-box { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--cyan-tint); color: var(--cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.home .feat .ic-box .ic { width: 22px; height: 22px; }
.home .feat.gold .ic-box { background: var(--gold-soft); color: var(--gold); }
.home .feat h3 { font-size: 16px; font-weight: 700; margin: 0 0 7px; }
.home .feat p { font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: 1; margin: 0; }
.home .feat .lnk { margin-top: 13px; font-size: 13px; }
.home .feat-note { color: var(--muted); font-size: 13px; margin-top: 18px; text-align: center; }
.home .sport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home .sport-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: transform .14s ease, box-shadow .18s; }
.home .sport-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.home .sport-card .sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.home .sport-card .sh .nm { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.home .sport-card .sh .nm .ic { width: 22px; height: 22px; color: var(--cyan); }
.home .sport-card .cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--cyan); background: var(--cyan-tint); border-radius: var(--radius-sm); padding: 3px 8px; }
.home .sport-card .cnt .ic { width: 12px; height: 12px; }
.home .sport-card p { font-size: 13px; color: var(--muted); margin: 0 0 14px; min-height: 38px; }
.home .sport-card .sbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.home .statsonly-block { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.home .sob-head h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.home .sob-head p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; max-width: 720px; }
.home .chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.home .sport-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); text-decoration: none; transition: border-color .14s, color .14s, transform .14s; }
.home .sport-chip:hover { color: var(--text); border-color: var(--cyan); transform: translateY(-2px); }
.home .sport-chip .ic { width: 16px; height: 16px; color: var(--cyan); }
.home .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.home .check-bullets { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.home .check-bullets.two-col { grid-template-columns: 1fr 1fr; }
.home .check-bullets li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--text-soft); }
.home .check-bullets li .ic { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
.home .side-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.home .sm-head { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.home .sm-head .sm-lg { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.home .sm-head .sm-t { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin-top: 6px; }
.home .sm-sec { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.home .sm-sec:last-child { border-bottom: none; }
.home .sm-cap { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); margin-bottom: 10px; }
.home .chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.home .mock-chip { font-size: 12px; font-weight: 700; background: var(--cyan-tint); color: var(--cyan); border-radius: var(--radius-sm); padding: 6px 11px; display: inline-flex; align-items: center; gap: 5px; }
.home .mock-chip.gold { background: var(--gold-soft); color: var(--gold); }
.home .mock-chip .ic { width: 12px; height: 12px; }
.home .mock-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.home .mock-tab td { padding: 5px 4px; border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.home .mock-tab tr:last-child td { border-bottom: none; }
.home .mock-tab tr.hl td { color: var(--text); font-weight: 800; background: var(--cyan-tint); }
.home .mock-tab td.pos { width: 22px; font-weight: 800; color: var(--text); }
.home .mock-tab td.rt { text-align: right; }
.home .mock-tab td.rt.strong { color: var(--text); font-weight: 700; }
.home .vsbar { display: grid; grid-template-columns: 64px 1fr 48px; gap: 8px; align-items: center; margin: 8px 0; }
.home .vsbar .vt { height: 8px; border-radius: 5px; background: var(--bg2); overflow: hidden; }
.home .vsbar .vt i { display: block; height: 100%; }
.home .vsbar .vlbl { font-size: 11px; font-weight: 700; color: var(--muted); }
.home .vsbar .vnum { font-family: var(--font-head); font-weight: 700; font-size: 13px; text-align: right; }
.home .h2h { display: flex; gap: 5px; }
.home .h2h i { width: 22px; height: 22px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; font-style: normal; }
.home .h2h .w { background: var(--green); } .home .h2h .d { background: #5b6b8c; } .home .h2h .l { background: var(--red); }
.home .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.home .trust { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; }
.home .trust h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.home .trust p { font-size: 13.5px; color: var(--muted); margin: 0; }
.home .trust .metric { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--cyan); letter-spacing: -.02em; margin-bottom: 8px; }
.home .thermo-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-top: 6px; }
.home .thermo-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.home .thermo-match { font-family: var(--font-head); font-size: 16px; }
.home .thermo-score { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--red); }
.home .thermo-score .ts-tot { font-size: 13px; color: var(--muted); font-weight: 600; }
.home .thermo { position: relative; height: 12px; border-radius: var(--radius-sm); margin: 18px 0 8px; background: linear-gradient(90deg, var(--green) 0%, var(--amber) 55%, var(--red) 100%); }
.home .thermo .mk { position: absolute; top: -7px; width: 4px; height: 26px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 3px var(--surface); }
.home .thermo-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 600; }
.home .thermo-tags { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.home .thermo-tags span { font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--bg2); border-radius: var(--radius-sm); padding: 6px 11px; display: inline-flex; align-items: center; gap: 6px; }
.home .thermo-tags span .ic { width: 14px; height: 14px; color: var(--red); }
.home .band-premium { background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: 36px 38px; }
html[data-theme="light"] .home .band-premium { background: linear-gradient(135deg, #fffdf6 0%, #fbf4e0 100%); border-color: #ecdcae; }
.home .band-premium .pg { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.home .band-premium .bp-h { font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin-top: 12px; }
.home .band-premium .price { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--gold); margin-top: 6px; }
.home .band-premium p.sub { color: var(--text-soft); font-size: 15.5px; margin-top: 12px; }
.home .band-premium .bp-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.home .band-premium .bp-note { font-size: 12.5px; color: var(--muted); }
.home .btn-gold { background: var(--gold); color: #1a1404; }
.home .btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.home .prem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.home .prem-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--text-soft); }
.home .prem-list li .ic { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; }
.home .prem-list li strong { color: var(--text); font-weight: 700; }
.home .prem-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.home .prem-two .band-premium { display: flex; flex-direction: column; padding: 28px 30px; }
.home .prem-two .band-premium .prem-list { margin-top: 16px; }
.home .prem-two .band-premium .bp-cta { margin-top: auto; padding-top: 18px; }
.home .prem-two .band-premium .bp-h { font-size: clamp(19px, 2.2vw, 22px); margin-top: 10px; }
.home .prem-pack { margin-top: 22px; text-align: center; }
.home .prem-pack .bp-cta { justify-content: center; }
.home .prem-pack p.sub { max-width: 620px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .home .prem-two { grid-template-columns: 1fr; } }
.home .band-capture .cg { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left; }
.home .band-capture h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 8px; }
.home .band-capture p { color: var(--muted); font-size: 15px; margin: 0; }
.home .band-capture .nl-ok { color: var(--green); font-weight: 700; margin: 10px 0 0; }
.home .band-capture .nl-form { justify-content: flex-start; margin-top: 14px; }
.home .band-capture .nl-form input { flex: 1; min-width: 0; }
.home .band-capture .tg-box { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.home .band-capture .tg-big { font-family: var(--font-head); font-weight: 700; font-size: 34px; color: var(--text); }
.home .band-capture .tg-lbl { color: var(--muted); font-size: 13px; margin: 4px 0 16px; }
.home .band-capture .tg-full { width: 100%; justify-content: center; }
.home .faq { max-width: 840px; margin: 0 auto; }
.home .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 20px; margin-bottom: 10px; transition: border-color .18s; }
.home .faq details[open] { border-color: var(--cyan); }
.home .faq summary { cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 700; font-size: 16px; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.home .faq summary::-webkit-details-marker { display: none; }
.home .faq summary .chev { color: var(--muted); transition: transform .2s; flex: none; font-size: 20px; line-height: 1; }
.home .faq details[open] summary .chev { transform: rotate(180deg); }
.home .faq .ans { padding: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.home .ribbon-legal { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.home .ribbon-legal .wrap { padding-top: 18px; padding-bottom: 18px; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }
.home .ribbon-legal p { margin: 0; }
.home .age-badge { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font-family: var(--font-head); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.home .ribbon-legal a { color: var(--cyan); font-weight: 700; }
.home .section { padding-block: 96px; }
.home .section.alt { background: var(--surface-teal); }
html:not([data-theme="light"]) .home .section.alt { background: var(--surface-teal); }
.home .feat-grid, .home .sport-grid, .home .kpibar, .home .trust-grid { gap: 24px; }
.home .section-head h2 { font-size: var(--fs-h2); line-height: 1.1; }
.home .section-head.sh-stack, .home .section-head.sh-center { margin-bottom: 40px; }
.home .section-head .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .08em; }
.home .section-head .lead, .home .section p:not(.sub):not(.kpi-note):not(.hero-micro):not(.bp-note) { color: var(--ink-600); }
.home .section-head .lead { max-width: 62ch; }
.home .feat { min-height: 100%; }
.home .feat .lnk { margin-top: auto; padding-top: 13px; }
.home .section-navy { background: var(--surface-navy); border-bottom-color: rgba(255,255,255,.08); }
.home .section-navy .section-head h2,
.home .section-navy .section-head .lead,
.home .section-navy .thermo-match,
.home .section-navy .thermo-tags span { color: #eaf2fb; }
.home .section-navy .section-head .lead { color: #b6c6dc; }
.home .section-navy .eyebrow.eyebrow-live { color: #ff8a9b; }
.home .section-navy .thermo-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.home .section-navy .thermo-scale { color: #9fb1cb; }
.home .section-navy .thermo-tags span { background: rgba(255,255,255,.07); color: #d5e0ef; }
.home .section-navy .muted { color: #9fb1cb; }
.home .section-navy .thermo-match { color: #eaf2fb; }
.home .section-navy .thermo { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.home .section-navy .thermo .mk { box-shadow: 0 0 0 3px var(--surface-navy); }
.home .section-navy .btn-ink { background: #fff; color: var(--surface-navy); }
.home .section-navy .btn-ink:hover { filter: brightness(.94); }
.home .hero .hero-textlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 15px; }
.home .band-premium.prem-founder { box-shadow: var(--shadow-md); border-radius: var(--radius-lg); padding: 34px 38px; }
.home .prem-founder .bp-h { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.home .prem-founder .bp-h s { font-size: .6em; }
.home .prem-founder .pack-save { font-size: .6em; font-weight: 700; color: var(--gold); }
@media (max-width: 1000px) {
.home .section { padding-block: 64px; }
.home .hero .kgrid { grid-template-columns: 1fr; gap: 32px; }
.home .split, .home .band-premium .pg, .home .band-capture .cg { grid-template-columns: 1fr; gap: 28px; }
.home .feat-grid, .home .sport-grid, .home .kpibar { grid-template-columns: repeat(2, 1fr); }
.home .trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.home .check-bullets.two-col { grid-template-columns: 1fr; }
.home .hero h1 { font-size: 32px; }
.home .feat-grid, .home .sport-grid, .home .kpibar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home .feat { padding: 14px; }
.home .feat .ic-box { width: 34px; height: 34px; margin-bottom: 9px; border-radius: var(--radius-sm); }
.home .feat .ic-box .ic { width: 18px; height: 18px; }
.home .feat h3 { font-size: 13.5px; margin: 0 0 5px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.home .feat p { font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.home .feat .lnk { font-size: 11.5px; padding-top: 9px; }
.home .sport-card { padding: 14px; }
.home .sport-card .sh { margin-bottom: 9px; }
.home .sport-card .sh .nm { font-size: 14px; }
.home .sport-card p { font-size: 12px; margin: 0 0 11px; min-height: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home .sport-card .sbtns { flex-direction: column; gap: 6px; }
.home .sport-card .sbtns .btn { width: 100%; justify-content: center; }
}
.pnew {
--pn-bg: var(--bg);
--pn-card: var(--surface);
--pn-card2: var(--surface2);
--pn-line: var(--border);
--pn-line2: var(--border);
--pn-text: var(--text);
--pn-muted: var(--muted);
--pn-accent: var(--cyan);
--pn-accent2: var(--brand-600); 
--pn-green: var(--green);
--pn-gold: var(--gold);
color: var(--pn-text);
background:
radial-gradient(900px 420px at 78% -8%, rgba(0,168,232,.12) 0%, transparent 55%),
radial-gradient(700px 380px at 12% 8%, rgba(0,137,194,.08) 0%, transparent 55%),
var(--pn-bg);
border: 1px solid var(--pn-line);
border-radius: var(--radius-lg);
padding: 40px 24px 34px;
max-width: 1040px;
margin: 8px auto 0;
}
.pnew * { color: inherit; }
.pnew-head { text-align: center; margin-bottom: 30px; }
.pnew-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--pn-accent); font-weight: 800; letter-spacing: .14em; }
.pnew-eyebrow svg { width: 15px; height: 15px; color: var(--pn-gold); }
.pnew-title { font-size: 40px; line-height: 1.05; margin: 12px 0 8px; color: var(--pn-text); }
.pnew-tag { color: var(--pn-muted); max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.5; }
.pnew-hero { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 22px; align-items: start; }
.pnew-card {
position: relative;
background: linear-gradient(180deg, var(--pn-card) 0%, var(--pn-card2) 100%);
border: 2px solid var(--brand-500);
border-radius: var(--radius-lg);
padding: 28px 26px 26px;
box-shadow: var(--shadow-md), var(--shadow-hover);
}
.pnew-card::before {
content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1px; pointer-events: none;
background: linear-gradient(135deg, rgba(0,168,232,.55), rgba(0,137,194,.20) 40%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.pnew-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pnew-kicker { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 800; color: var(--pn-muted); }
.pnew-badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--gold-soft);
border: 1px solid rgba(231,193,75,.5); color: var(--pn-gold);
font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pnew-badge svg { width: 13px; height: 13px; }
.pnew-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface2); border: 1px solid var(--pn-line); border-radius: var(--radius-md); margin-bottom: 20px; }
.pnew-tgl {
appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
color: var(--pn-muted); background: transparent; padding: 8px 16px; border-radius: var(--radius-sm);
display: inline-flex; align-items: center; gap: 7px; transition: all .16s ease;
}
.pnew-tgl.is-active {
color: #fff; background: linear-gradient(135deg, var(--pn-accent), var(--pn-accent2));
box-shadow: 0 6px 16px rgba(0,124,200,.4);
}
.pnew-tgl-tag { font-size: 11px; font-weight: 800; color: var(--pn-green); background: var(--green-bg); padding: 2px 7px; border-radius: var(--radius-pill); }
.pnew-tgl.is-active .pnew-tgl-tag { color: #eafff5; background: rgba(255,255,255,.22); }
.pnew-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pnew-amount { font-family: var(--font-head); font-size: 58px; line-height: 1; font-weight: 800; color: var(--pn-text); letter-spacing: -.03em; }
.pnew-per { font-size: 17px; font-weight: 700; color: var(--pn-muted); }
.pnew-strike { font-size: 20px; font-weight: 700; color: var(--pn-muted); text-decoration: line-through; text-decoration-color: var(--red); margin-left: 4px; }
.pnew-sub { margin: 8px 0 0; font-size: 13px; color: var(--pn-muted); }
.pnew-sub-tag { font-weight: 800; color: var(--pn-green); background: var(--green-bg); padding: 2px 8px; border-radius: var(--radius-pill); }
.pnew-sports { display: flex; gap: 10px; margin: 20px 0 4px; }
.pnew-sport {
width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-md);
background: var(--cyan-tint); border: 1px solid var(--pn-line); color: var(--pn-accent);
}
.pnew-sport svg { width: 22px; height: 22px; }
.pnew-cta-wrap { margin: 20px 0 4px; }
.pnew-cta {
display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
padding: 15px 20px; border-radius: var(--radius-md); font-weight: 800; font-size: 16px; color: #fff !important; text-decoration: none;
background: linear-gradient(135deg, var(--pn-accent), var(--pn-accent2));
box-shadow: 0 10px 26px rgba(0,124,200,.42); transition: transform .14s ease, filter .14s ease;
}
.pnew-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.pnew-active {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
padding: 14px 20px; border-radius: var(--radius-md); font-weight: 800; font-size: 15px; color: var(--pn-green);
background: var(--green-bg); border: 1px solid rgba(31,199,125,.4);
}
.pnew-active svg { width: 18px; height: 18px; }
.pnew-soon { text-align: center; font-size: 13px; color: var(--pn-muted); margin: 10px 0 0; }
.pnew .pp-box { min-height: 46px; }
.pnew-pricelock {
display: flex; align-items: flex-start; gap: 13px;
margin: 20px 0 12px; padding: 15px 16px; border-radius: var(--radius-lg);
background: var(--brand-050);
border: 1px solid rgba(0, 137, 194, .32);
box-shadow: inset 3px 0 0 var(--brand-500);
}
.pnew-pricelock-ic {
flex: none; width: 34px; height: 34px; display: grid; place-items: center;
border-radius: var(--radius-pill); background: var(--brand-500); color: #fff;
}
.pnew-pricelock-ic svg { width: 18px; height: 18px; }
.pnew-pricelock-body { min-width: 0; }
.pnew-pricelock-title {
margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700;
line-height: 1.25; color: var(--brand-600); letter-spacing: -.01em;
}
.pnew-pricelock-title strong { color: var(--brand-500); font-weight: 800; }
.pnew-pricelock-sub {
margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--pn-text);
}
.pnew-pricelock-sub strong { font-weight: 800; color: var(--pn-text); }
.pnew-count {
margin: 18px 0 12px; text-align: center; border-radius: var(--radius-md); padding: 13px 14px;
background: var(--surface2);
border: 1px solid var(--pn-line);
}
.pnew-count-over { background: var(--surface2); border-color: var(--pn-line); }
.pnew-count-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pn-text); }
.pnew-count-label svg { width: 15px; height: 15px; color: var(--pn-muted); }
.pnew-count-time { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--pn-muted); letter-spacing: .01em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.pnew-founder-note { font-size: 12.5px; color: var(--pn-muted); line-height: 1.5; margin: 10px 0 0; }
.pnew-includes { margin-top: 22px; border-top: 1px solid var(--pn-line); padding-top: 20px; }
.pnew-includes-title { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-muted); margin-bottom: 14px; }
.pnew-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pnew-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--text-soft); }
.pnew-ck {
flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-pill);
background: var(--green-bg); color: var(--pn-green); margin-top: 1px;
}
.pnew-ck svg { width: 13px; height: 13px; }
.pnew-free {
background: var(--surface2); border: 1px solid var(--pn-line);
border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.pnew-free-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pnew-free-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800; color: var(--pn-muted); }
.pnew-free-price { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--pn-text); }
.pnew-free-tag { font-size: 13.5px; color: var(--pn-muted); margin: 6px 0 18px; line-height: 1.5; }
.pnew-free-h { color: var(--pn-muted); }
.pnew-list-free li { font-size: 13.5px; color: var(--text-soft); }
.pnew-ck-free { background: var(--surface); border: 1px solid var(--pn-line); color: var(--pn-muted); }
.pnew-free-cta {
display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 20px;
padding: 12px 18px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; text-decoration: none;
color: var(--pn-text) !important; background: var(--surface); border: 1px solid var(--pn-line2);
transition: background .14s ease;
}
.pnew-free-cta:hover { background: var(--surface2); }
.pnew-disclaimer { text-align: center; font-size: 12px; color: var(--pn-muted); margin: 26px auto 0; max-width: 620px; line-height: 1.6; }
@media (max-width: 860px) {
.pnew-hero { grid-template-columns: 1fr; }
.pnew { padding: 30px 16px 26px; border-radius: var(--radius-lg); }
.pnew-title { font-size: 32px; }
.pnew-amount { font-size: 50px; }
}
@media (max-width: 480px) {
.pnew { padding: 24px 12px 22px; }
.pnew-card { padding: 22px 18px; }
.pnew-card-top { flex-direction: column; align-items: flex-start; gap: 10px; }
.pnew-amount { font-size: 44px; }
.pnew-count-time { font-size: 14px; }
.pnew-toggle { width: 100%; }
.pnew-tgl { flex: 1; justify-content: center; padding: 9px 8px; }
.pnew-sport { width: 38px; height: 38px; }
}
.paywall {
position: relative;
margin-top: 4px;
}
.paywall-fade {
position: relative;
max-height: 216px;
overflow: hidden;
filter: blur(3px);
opacity: .55;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 24%, rgba(0,0,0,.25) 62%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 24%, rgba(0,0,0,.25) 62%, transparent 100%);
}
.paywall-cta {
position: relative;
z-index: 2;
margin: -64px auto 0;
width: min(460px, 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 11px;
text-align: center;
padding: 24px 26px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md, 0 14px 40px rgba(4,12,28,.16));
}
.paywall-cta__head {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-weight: 700; font-size: 17.5px; letter-spacing: -.01em;
color: var(--ink-900); line-height: 1.25;
}
.paywall-cta__head .ic { width: 18px; height: 18px; color: var(--gold); flex: none; }
.paywall-cta__sub { color: var(--ink-600); font-size: 13px; max-width: 40ch; margin: 0; line-height: 1.5; }
.paywall-cta .btn { white-space: nowrap; margin-top: 3px; }
.skel { color: transparent !important; position: relative; }
.skel-bar {
display: inline-block; height: .72em; border-radius: var(--radius-pill); vertical-align: middle;
background: linear-gradient(90deg, var(--surface-alt) 0%, rgba(0,137,194,.10) 50%, var(--surface-alt) 100%);
filter: blur(.4px); opacity: .85;
}
.safe-tbl tr.safe-locked td { opacity: .96; }
.safe-tbl tr.safe-locked .skel-bar { background: linear-gradient(90deg, rgba(127,127,127,.16) 0%, rgba(0,137,194,.14) 50%, rgba(127,127,127,.16) 100%); }
.safe-tbl tr.safe-locked .c-prob .skel-bar { width: 34px; }
.safe-tbl tr.safe-locked .c-pick .skel-bar { width: 92px; }
.safe-tbl tr.safe-locked .c-odds .skel-bar { width: 40px; }
.safe-tbl tr.safe-locked .c-oddsnow .skel-bar { width: 40px; }
.safe-tbl tr.safe-locked .lock-ic .ic { width: 14px; height: 14px; color: var(--gold); }
.safe-tbl .c-oddsnow { white-space: nowrap; }
.safe-tbl .odds-now { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.safe-tbl .c-oddsnow .muted { color: var(--muted); }
.table-wrap.dt-wrap { border: 1px solid var(--ds-border); border-radius: var(--radius-md); overflow: hidden; overflow-x: auto; }
table.bt-table thead th { background: var(--brand-050); color: var(--ink-900); border-bottom: 1px solid var(--ds-border); font-weight: 700; }
html[data-theme="light"] table.bt-table thead th { color: var(--ink-900); }
table.bt-table td.odds, table.bt-table td.ln,
table.bt-table td.big, table.bt-table td.h2h { font-variant-numeric: tabular-nums; }
.gemchip { display: inline-flex; align-items: center; gap: 4px; }
.gemchip .ic { width: 13px; height: 13px; color: var(--gold); }
.gemchip--2 .ic { color: var(--gold); }
.gem-inline { display: inline-flex; align-items: center; gap: 3px; }
.gem-inline .ic { width: 12px; height: 12px; color: var(--gold); }
.section-head--pro .eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.section-head--pro .eyebrow .ic { width: 15px; height: 15px; }
.empty-collecting { display: flex; align-items: center; gap: 10px; }
.empty-collecting .ic { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.at-row .at-signal, .at-row .at-score { display: inline-flex; align-items: center; gap: 5px; }
.at-row .at-signal .ic, .at-row .at-score .ic { width: 14px; height: 14px; color: var(--muted); flex: none; }
.at-row .at-nowchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.at-row .at-outcome { display: inline-flex; align-items: center; gap: 5px; }
.at-row .at-outcome .ic { width: 13px; height: 13px; flex: none; }
.at-histmore { min-width: 160px; }
@media (max-width: 560px) {
.paywall-fade { max-height: 190px; }
.paywall-cta { margin-top: -56px; padding: 20px 18px; }
.paywall-cta__head { font-size: 15.5px; }
}
.sticky-cta {
display: none;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
background: var(--surface); border-top: 1px solid var(--border);
box-shadow: 0 -8px 30px rgba(0, 0, 0, .28);
padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}
.sticky-cta__inner { display: flex; align-items: center; gap: 12px; max-width: var(--maxw); margin: 0 auto; }
.sticky-cta__price { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
.sticky-cta__price--live { align-items: center; }
.sticky-cta__amount { font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1; color: var(--text); }
.sticky-cta__per { font-size: 13px; color: var(--muted); }
.sticky-cta__tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--gold); }
.sticky-cta__tag svg { width: 12px; height: 12px; }
.sticky-cta__txt { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta__btn { flex: none; min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 640px) {
.sticky-cta { display: block; }
body:has(.sticky-cta) .site-footer { padding-bottom: 84px; }
}
@media (max-width: 640px) {
main h1 { font-size: clamp(24px, 6.4vw, 30px) !important; line-height: 1.15; }
.pnew-title, .section-head--pro h1, .section-head--ds h2 { font-size: clamp(24px, 6.4vw, 32px) !important; }
.section { padding-block: 40px; }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.surf-chips .chip, .tabs a, .daytab, .segmented__btn,
.btn-sm, .acc-toggle .acc-opt, .pnew-tgl { min-height: 44px; }
.surf-chips .chip, .tabs a, .daytab { display: inline-flex; align-items: center; }
.tabs a { gap: .3em; }
.tabs, .surf-chips, .daytabs, .pnew-toggle, .lab-tabs {
flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
scroll-snap-type: x proximity; padding-bottom: 4px;
padding-right: 28px;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.tabs::-webkit-scrollbar, .surf-chips::-webkit-scrollbar,
.daytabs::-webkit-scrollbar, .pnew-toggle::-webkit-scrollbar, .lab-tabs::-webkit-scrollbar { display: none; }
.tabs a, .surf-chips .chip, .daytab, .pnew-tgl, .lab-tabs .lab-tab {
flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
}
#live-chips .chip-fav, .surf-chips .chip-fav { margin-left: 6px !important; }
.compare-stack { min-width: 0; font-size: 14px; }
.compare-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare-stack, .compare-stack tbody, .compare-stack tr, .compare-stack td { display: block; width: auto; }
.compare-stack tr {
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
.compare-stack td { border: 0 !important; padding: 0; text-align: left !important; }
.compare-stack td.c-name {
font-weight: 800; font-size: 1rem; margin-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid var(--border) !important; display: flex; align-items: center; gap: 8px;
}
.compare-stack td[data-label] {
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
}
.compare-stack td[data-label]::before {
content: attr(data-label); color: var(--muted); font-size: .74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em; flex: none;
}
.table-wrap:has(.hist-stack) { overflow-x: visible; }
.hist-stack { min-width: 0 !important; font-size: 14px; }
.hist-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hist-stack, .hist-stack tbody, .hist-stack tr, .hist-stack td { display: block; width: auto; }
.hist-stack tr {
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
.hist-stack tbody tr:hover { background: var(--surface); }
.hist-stack td { border: 0 !important; padding: 0; text-align: left !important; white-space: normal; }
.hist-stack td.c-match {
font-weight: 700; font-size: .98rem; line-height: 1.35; margin-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid var(--border) !important;
white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.hist-stack td[data-label] {
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
}
.hist-stack td[data-label]::before {
content: attr(data-label); color: var(--muted); font-size: .74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em; flex: none;
}
.hist-stack td.c-bet { font-weight: 600; }
.at-stats-scroll:has(.at-stats-stack) { overflow-x: visible; }
.at-stats-stack { font-size: 14px; }
.at-stats-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.at-stats-stack, .at-stats-stack tbody, .at-stats-stack tr, .at-stats-stack td { display: block; width: auto; }
.at-stats-stack tr {
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
padding: 12px 14px; margin-bottom: 10px;
}
.at-stats-stack td { border: 0 !important; padding: 0; text-align: left !important; white-space: normal; }
.at-stats-stack td.l {
font-weight: 800; font-size: .95rem; margin-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid var(--border) !important; display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.at-stats-stack td[data-label] {
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
}
.at-stats-stack td[data-label]::before {
content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em; flex: none;
}
.at-filt .at-stats-stack tr.at-filt-you { box-shadow: inset 3px 0 0 var(--cyan); }
.table-wrap.dt-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table.bt-table { font-size: 12px; }
table.bt-table td, table.bt-table th { font-variant-numeric: tabular-nums; }
}
.tnum, .num, .odds, .odds-mini b, .kpi-n, .kpi-sub, .metric, .kv-row b, .kv-row span,
.pill, .pill-prob, .an-n, .an-item b, .donut-hole b, .donut-hole span,
.probbar span, .prob-bar__val, .nh-num, .sc-n, .stat-tile .st-n,
table.stats td, table.stats th, table.bt-table td, table.hist td,
table.compare td, table.ric-table td, .ric-count,
.data-table td, .data-table th, .pnew-amount, .pnew-count-time, .pnew-price,
.mmm-od, .mmm-d, .res, .resb, .fdot {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
table.bt-table td.odds, table.bt-table td.ln,
table.compare td:not(:first-child),
table.stats td:not(.lg):not(:first-child) { text-align: right; }
@media (min-width: 821px) {
table.hist td:not(.rival):not(:first-child) { text-align: center; }
}
html[data-theme="light"] {
--ink-400: #64748b; 
}
html[data-theme="light"] .muted,
html[data-theme="light"] table.stats td.lg,
html[data-theme="light"] table.bt-table .lg,
html[data-theme="light"] .card-top,
html[data-theme="light"] .kpi-l,
html[data-theme="light"] .an-item .an-k,
html[data-theme="light"] .an-item .an-sub { color: #475569; } 
html[data-theme="light"] .pnew-strike,
html[data-theme="light"] .prem-founder .bp-h s,
html[data-theme="light"] s, html[data-theme="light"] del {
color: #64748b !important;
text-decoration-color: #94a3b8 !important;
}
.pnew-strike { text-decoration-color: #94a3b8; }
.ic-ok { color: var(--sem-high); }
.ic-no { color: var(--sem-low); }
.ic-ok, .ic-no { width: 1em; height: 1em; vertical-align: -0.13em; }
.tag, .fdot, .resb, .fb select, .fb input, .fgroup .fb select, .fgroup .fb input,
.btn-open, .an-item, .odds-mini b, .kv-row > div,
.donut-hole, .input, .auth-form input,
ul.insights .ins { border-radius: var(--radius-sm); }
.btn, .kpi, .home .kpi, .card, .table-wrap, .fbar, .band-capture .tg-box,
.how .step, .how .num, .home .feat .ic-box, .fgroup, .fgroup-h,
.news-form input, .plan li, .pref-lock, .pp-box, .probbar,
.home .trust, .home .sport-card, .home .feat, .data-table-wrap,
.reco-gate, .mkt-move-mini { border-radius: var(--radius-md); }
.plan, .band, .home .band-premium, .pack-band, .card-featured,
.number-hero .nh-cell, .stat-card, .pnl-chart, .conf-block, .faq-acc,
.home .band-premium.prem-founder, .band-join, .stat-tile { border-radius: var(--radius-lg); }
.pill, .badge, .segmented, .segmented__btn, .prob-bar__track, .prob-bar__fill,
.pack-badge, .badge-pop, .pack-save, .card-when .card-sample, .conf-dot,
.pill-prob, .cnt, .surf-chips .chip, .lang, .lang a { border-radius: var(--radius-pill); }
html[data-theme="light"] .card,
html[data-theme="light"] .home .feat,
html[data-theme="light"] .home .sport-card,
html[data-theme="light"] .home .trust,
html[data-theme="light"] .fgroup,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .data-table-wrap {
border: 1px solid var(--ds-border);
box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .card-featured,
html[data-theme="light"] .plan,
html[data-theme="light"] .home .band-premium,
html[data-theme="light"] .pnew-card,
html[data-theme="light"] .band { box-shadow: var(--shadow-md); }
html[data-theme="light"] body { background: var(--surface-alt); }
html[data-theme="light"] .home .section.alt { background: var(--surface-ds); }
.eyebrow, .nh-eyebrow, .pnew-kicker, .kpi-eyebrow, .ah-h, .fgroup-h {
font-size: var(--fs-eyebrow);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
}
.eyebrow { color: var(--brand-500); }
.kpi-eyebrow { color: var(--ink-600); }
.section-head h2, .section-head--pro h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
.section-head--pro .eyebrow { color: var(--brand-500); }
.card h3, .home .feat h3, .home .sport-card h3, .home .trust h4 { font-size: var(--fs-h3); }
.btn-primary { box-shadow: 0 6px 16px rgba(0, 137, 194, .35); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(0, 137, 194, .42); }
.hero .btn-tg, .site-header .btn-tg { box-shadow: none; }
.home .wrap, .ds-conf .wrap { max-width: var(--container-max); }
.wrap.wrap-wide { max-width: min(1880px, calc(100vw - 36px)); }
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 14px 0; }
.stat-tile {
background: var(--surface-ds); border: 1px solid var(--ds-border);
padding: 16px 16px 14px; box-shadow: var(--shadow-sm); text-align: left;
}
.stat-tile .st-n { font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.stat-tile .st-l { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); margin-top: 8px; }
@media (max-width: 640px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tiles.stat-tiles--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .stat-tiles.stat-tiles--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .stat-tiles.stat-tiles--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
.home .kpibar { grid-template-columns: repeat(2, 1fr) !important; }
.home .kpi-n { font-size: 26px; }
}
.grid .card .pick-row, .grid .card .pbet-list { min-height: 34px; align-content: flex-start; }
@media (max-width: 640px) {
.home .wrap, .ds-conf .wrap { padding-left: 18px; padding-right: 18px; }
}
.home .hero.hero--navy {
background: linear-gradient(180deg, #0e1a2b 0%, #0c1524 100%);
border-bottom: 1px solid rgba(255,255,255,.08);
padding: 76px 0 64px;
position: relative; overflow: hidden;
}
.home .hero.hero--navy::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(760px 420px at 78% -12%, rgba(0,168,232,.18) 0%, transparent 60%);
}
.home .hero.hero--navy .wrap { position: relative; z-index: 1; }
.home .hero.hero--navy .eyebrow { color: #74c6ec; }
.home .hero.hero--navy h1 {
color: #f2f7fc; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.05; font-weight: 800;
margin: 14px 0 0; letter-spacing: -.03em;
}
.home .hero.hero--navy h1 .accent { color: var(--cyan); }
.home .hero.hero--navy p.sub { color: #b6c6dc; max-width: 52ch; }
.home .hero.hero--navy .hp-check li { color: #cdd9ec; }
.home .hero.hero--navy .hp-check li .ic { color: var(--green); }
.home .hero.hero--navy .hero-micro { color: #9fb1cb; }
.home .hero.hero--navy .hero-micro strong { color: #eaf2fb; }
.home .hero.hero--navy .hero-textlink { color: #74c6ec; }
.home .hero.hero--navy .btn-secondary { border-color: rgba(255,255,255,.32); color: #eaf2fb; background: rgba(255,255,255,.04); }
.home .hero.hero--navy .btn-secondary:hover { border-color: var(--cyan); color: #fff; }
.home .hero.hero--navy .card,
.home .hero.hero--navy .hero-card {
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,168,232,.20);
border-color: rgba(0,168,232,.35);
}
html[data-theme="light"] .home .hero.hero--navy .card,
html[data-theme="light"] .home .hero.hero--navy .hero-card { background: #fff; }
@media (max-width: 1000px) { .home .hero.hero--navy { padding: 48px 0 40px; } }
@media (max-width: 560px) { .home .hero.hero--navy { padding: 36px 0 30px; } }
.home .kpi-eyebrow.kpi-eyebrow--live {
display: inline-flex; align-items: center; gap: 8px; color: var(--ink-600);
text-transform: uppercase; letter-spacing: .12em;
}
.home .kpi-livedot {
width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
box-shadow: 0 0 0 0 rgba(31,199,125,.6); animation: bt-pulse-green 1.8s infinite;
}
@keyframes bt-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(31,199,125,.55); } 70% { box-shadow: 0 0 0 7px rgba(31,199,125,0); } 100% { box-shadow: 0 0 0 0 rgba(31,199,125,0); } }
.home .kpibar .kpi-n { font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.home .kpi-l { text-transform: uppercase; font-size: 12px; letter-spacing: .05em; color: var(--ink-600); }
@media (max-width: 560px) { .home .kpibar .kpi-n { font-size: 1.9rem; } }
.perf-accordion {
border: 1px solid var(--ds-border); border-radius: var(--radius-md);
background: var(--surface-ds); margin-bottom: 20px; overflow: hidden;
}
.perf-accordion > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
padding: 14px 16px; font-weight: 700; font-size: 15px; color: var(--ink-900);
user-select: none;
}
.perf-accordion > summary::-webkit-details-marker { display: none; }
.perf-accordion > summary .pa-ic { flex: none; width: 18px; height: 18px; color: var(--brand-500); display: inline-flex; }
.perf-accordion > summary .pa-ic svg { width: 18px; height: 18px; }
.perf-accordion > summary .pa-chev { margin-left: auto; flex: none; color: var(--brand-500); display: inline-flex; transition: transform .18s ease; }
.perf-accordion > summary .pa-chev svg { width: 20px; height: 20px; }
.perf-accordion[open] > summary .pa-chev { transform: rotate(180deg); }
.perf-accordion > summary:hover { background: var(--surface-alt); }
.perf-accordion .pa-body { padding: 0 16px 16px; border-top: 1px solid var(--ds-border); }
.perf-accordion .pa-body > .card { border: 0; box-shadow: none; padding: 14px 0 0; margin: 0; background: transparent; }
.perf-hero-tiles .st-n.st-pos { color: var(--sem-high); }
.perf-hero-tiles .st-n.st-neg { color: var(--sem-low); }
.live-empty-state {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 6px; padding: 44px 20px 34px; border: 1px solid var(--ds-border);
border-radius: var(--radius-lg); background: var(--surface-ds); box-shadow: var(--shadow-sm);
}
.live-empty-radar {
width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
color: var(--brand-500); background: var(--cyan-tint); position: relative; margin-bottom: 8px;
}
.live-empty-radar svg { width: 38px; height: 38px; position: relative; z-index: 1; }
.live-empty-radar::before, .live-empty-radar::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--brand-500); opacity: 0; animation: radar-ping 2.4s ease-out infinite;
}
.live-empty-radar::after { animation-delay: 1.2s; }
@keyframes radar-ping { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
.live-empty-state h2 { font-size: 22px; margin: 0; color: var(--ink-900); }
.live-empty-state .les-sub { color: var(--ink-600); max-width: 46ch; margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; }
.live-samples { margin-top: 22px; }
.live-samples-cap { text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); margin: 0 0 14px; }
.live-sample-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.live-sample-wrap .grid { filter: saturate(.9); opacity: .96; pointer-events: none; }
.live-sample-badge {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
background: var(--surface-navy); color: #eaf2fb; font-size: 12px; font-weight: 700;
padding: 6px 13px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
}
.live-sample-badge svg { width: 13px; height: 13px; color: var(--cyan); }
.pnew-price-row { align-items: baseline; gap: 10px; }
.pnew-strike {
font-size: 30px; font-weight: 800; color: var(--pn-muted); margin-left: 2px;
text-decoration: line-through; text-decoration-thickness: 2px;
}
.pnew-save-chip {
display: inline-flex; align-items: center; gap: 5px; align-self: center;
font-size: 13px; font-weight: 800; color: var(--pn-green);
background: var(--green-bg); border: 1px solid rgba(31,199,125,.34);
padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pnew-sports-block { margin: 20px 0 4px; }
.pnew-sports-lbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pn-muted); margin: 0 0 8px; }
.pnew-sports-block .pnew-sports { margin: 0; }
.pnew-cta-wrap .trust-line { justify-content: center; margin-top: 12px; }
@media (max-width: 480px) {
.pnew-strike { font-size: 24px; }
.pnew-cta-wrap .trust-line { font-size: 12px; }
}
.home .prem-founder .bp-h s.bp-strike {
font-size: .62em; font-weight: 700; color: var(--muted);
text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--red);
margin: 0 2px 0 4px;
}
.home .prem-founder .bp-h .bp-savechip {
display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
font-size: .38em; font-weight: 800; color: var(--green); letter-spacing: .01em;
background: var(--green-bg); border: 1px solid rgba(31,199,125,.34);
padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.home .prem-founder .bp-h .bp-savechip svg { width: 1.1em; height: 1.1em; }
body { font-size: 16px; line-height: 1.6; }
.home .feat p,
.home .sport-card p,
.home .trust p,
.home .band-capture p { font-size: 16px; line-height: 1.6; color: var(--ink-600); }
.home .section-head .lead,
.home .split .lead { font-size: 16px; line-height: 1.6; color: var(--ink-600); }
.home .feat-note,
.home .kpi-note,
.home .hero-micro,
.home .feat .lnk { color: var(--ink-400); }
.home .feat .lnk { color: var(--brand-500); } 
.home #premium .lead,
.home .band-premium p.sub,
.pnew .pnew-lead,
.pnew .pnew-feat p { font-size: 17px; line-height: 1.6; }
.ds-conf .conf-block p { font-size: 16px; color: var(--ink-600); }
.ds-conf .lead-conf { font-size: 17px; }
.section-head p { color: var(--ink-600); }
.stat-tile { padding: 18px 18px 16px; border-radius: var(--radius-md); }
.stat-tile .st-n { font-size: 34px; }
.stat-tile .st-l { font-size: var(--fs-eyebrow); color: var(--ink-600); }
.stat-tile .st-l svg { width: 13px; height: 13px; vertical-align: -.12em; margin-right: 4px; color: var(--ink-400); }
.stat-tile .st-n.st-pos { color: var(--sem-high); }
.stat-tile .st-n.st-neg { color: var(--sem-low); }
.stat-tiles .stat-tile.st-lead {
box-shadow: var(--shadow-md); border-top: 3px solid var(--brand-500);
}
@media (max-width: 640px) { .stat-tile .st-n { font-size: 28px; } }
.home .kpibar.stat-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 14px 0 0; }
.home .kpibar.stat-tiles .stat-tile { background: var(--surface-ds); }
.home .kpibar.stat-tiles .st-n b { color: var(--brand-500); }
@media (max-width: 640px) { .home .kpibar.stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.rend-tiles { grid-template-columns: repeat(3, 1fr); }
.rend-tiles .st-sub { font-size: 13px; color: var(--ink-600); margin-top: 8px; line-height: 1.45; }
@media (max-width: 640px) { .rend-tiles { grid-template-columns: 1fr; } }
html[data-theme="light"] .home .feat,
html[data-theme="light"] .home .sport-card,
html[data-theme="light"] .home .trust,
html[data-theme="light"] .home .kpibar .stat-tile,
html[data-theme="light"] .stat-tile,
html[data-theme="light"] .nh-cell,
html[data-theme="light"] .akpi,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .pnl-chart,
html[data-theme="light"] .conf-block,
html[data-theme="light"] .faq-acc,
html[data-theme="light"] .perf-accordion,
html[data-theme="light"] .live-empty-state {
border: 1px solid var(--ds-border); box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .home .feat:hover,
html[data-theme="light"] .home .sport-card:hover { box-shadow: var(--shadow-md); }
html[data-theme="light"] .home .band-premium.prem-founder,
html[data-theme="light"] .card-featured,
html[data-theme="light"] .stat-tiles .stat-tile.st-lead,
html[data-theme="light"] .akpi--lead,
html[data-theme="light"] .nh-cell.nh-lead { box-shadow: var(--shadow-md); }
.home .feat, .home .sport-card, .home .trust, .home .kpi, .home .hero-card { border-radius: var(--radius-md); }
.btn-primary { box-shadow: 0 6px 16px rgba(0, 137, 194, .32); }
.home .band-close {
text-align: center; padding: 44px 32px;
background: linear-gradient(180deg, var(--surface-teal), var(--surface-ds));
border: 1px solid var(--ds-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.home .band-close h2 { font-size: var(--fs-h2); margin: 0 0 10px; letter-spacing: -.02em; }
.home .band-close p { color: var(--ink-600); font-size: 17px; max-width: 56ch; margin: 0 auto 22px; }
.home .band-close .cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.home .band-close .bc-micro { margin: 16px 0 0; font-size: 13px; color: var(--ink-400); }
@media (max-width: 560px) { .home .band-close { padding: 34px 20px; } .home .band-close .cta-row { display: flex; } .home .band-close .cta-row .btn { flex: 1 1 100%; justify-content: center; } }
html[data-theme="light"] .card.value,
html[data-theme="light"] .stat-tiles .stat-tile.st-lead { border-top: 3px solid var(--brand-500); }
.eyebrow svg:not(.ic-gold),
.section-head--ds .eyebrow svg:not(.ic-gold) { color: var(--brand-500); }
.data-table tbody tr:hover td { background: var(--brand-050); }
html[data-theme="light"] table.stats tbody tr:hover,
html[data-theme="light"] table.compare tbody tr:hover td,
html[data-theme="light"] table.bt-table tbody.mrow:hover { background: var(--brand-050); }
html[data-theme="light"] .tabs a:hover:not(.active) { border-color: var(--brand-500); color: var(--brand-500); }
.card-league svg, .card-league .ic { color: var(--brand-500); }
.badge--brand { background: var(--brand-050); }
html[data-theme="light"] .home .feat .ic-box { background: var(--brand-050); color: var(--brand-500); }
.pnl-chart--big { padding: 22px 22px 14px; }
.pnl-chart--big .pc-head { align-items: flex-start; margin-bottom: 6px; }
.pnl-chart--big .pc-svg { width: 100%; height: auto; display: block; }
.pnl-chart .pc-hero { font-family: var(--font-head); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-size: clamp(30px, 4.4vw, 46px); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pnl-chart .pc-hero.pos { color: var(--sem-high); }
.pnl-chart .pc-hero.neg { color: var(--sem-low); }
.pnl-chart .pc-hero.neutral { color: var(--ink-900); }
.pnl-chart .pc-hero .pc-unit { font-size: .5em; font-weight: 700; color: var(--ink-400); margin-left: 2px; }
.pnl-chart .pc-grid { stroke: var(--ds-border); stroke-width: 1; stroke-dasharray: 4 5; opacity: .8; }
.pnl-chart .pc-zero { stroke: var(--ink-400); stroke-width: 1.2; }
.pnl-chart .pc-axis-y { font-size: 12px; fill: var(--ink-400); }
.pnl-chart .pc-axis-x { font-size: 12px; fill: var(--ink-600); font-weight: 600; }
@media (max-width: 640px) { .pnl-chart--big { padding: 18px 14px 10px; } }
--surface-ds/--ink-*).
Gold SOLO como acento de la oferta fundador; cyan en checks/iconos/CTA.
============================================================================ */
.home .prem-ds .eyebrow-cyan { color: var(--brand-500); justify-content: flex-start; }
.home .prem-ds .eyebrow-cyan svg,
.home .prem-ds .eyebrow-cyan .ic { color: var(--brand-500); }
.home .prem-ds .prem-offer-ds {
background: var(--surface-ds);
border: 1px solid var(--gold);
border-left: 4px solid var(--gold);
box-shadow: var(--shadow-md);
border-radius: var(--radius-lg);
}
html[data-theme="light"] .home .prem-ds .prem-offer-ds {
background: linear-gradient(180deg, #fffdf7 0%, #ffffff 62%);
}
html[data-theme="dark"] .home .prem-ds .prem-offer-ds {
background: linear-gradient(180deg, rgba(231,193,75,.09), var(--surface) 62%);
}
.home .prem-ds .prem-two { margin-top: 22px; }
.home .prem-ds .prem-feat-ds {
border: 1px solid var(--ds-border);
box-shadow: var(--shadow-md);
border-radius: var(--radius-lg);
}
html[data-theme="light"] .home .prem-ds .prem-feat-ds { background: var(--surface-ds); border-color: var(--ds-border); }
html[data-theme="dark"] .home .prem-ds .prem-feat-ds { background: var(--surface); border-color: var(--ds-border); }
.home .prem-ds .prem-feat-ds .bp-h { margin-top: 8px; }
.home .prem-ds .prem-list-ds { gap: 14px; }
.home .prem-ds .prem-list-ds li { align-items: flex-start; gap: 11px; }
.home .prem-ds .prem-list-ds li > svg,
.home .prem-ds .prem-list-ds li > .ic {
width: 20px; height: 20px; flex: none; margin-top: 1px;
color: var(--brand-500);
background: var(--brand-050);
border-radius: var(--radius-pill);
padding: 3px;
}
.home .prem-ds .prem-list-ds .pl-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home .prem-ds .prem-list-ds .pl-tx strong { color: var(--ink-900); font-weight: 700; font-size: 15px; line-height: 1.35; }
.home .prem-ds .prem-list-ds .pl-tx span { color: var(--ink-600); font-size: 13px; line-height: 1.5; }
.home .prem-ds .prem-list-sum { gap: 10px; margin-top: 16px; }
.home .prem-ds .prem-list-sum li { align-items: flex-start; gap: 11px; font-size: 14px; }
.home .prem-ds .prem-list-sum li > svg,
.home .prem-ds .prem-list-sum li > .ic {
width: 20px; height: 20px; flex: none; margin-top: 1px;
color: var(--brand-500); background: var(--brand-050);
border-radius: var(--radius-pill); padding: 3px;
}
.home .prem-ds .prem-list-sum li > span { color: var(--ink-900); line-height: 1.4; min-width: 0; }
.home .prem-ds .prem-cta-ds .btn { white-space: normal; max-width: 100%; text-align: center; }
.home .prem-ds .prem-cta-ds {
margin-top: 24px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
text-align: center;
}
.home .prem-ds .prem-cta-ds .btn-primary { font-size: 16px; padding: 13px 30px; }
.home .prem-ds .prem-cta-ds .bp-note { font-size: 13px; color: var(--ink-600); }
.bb-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 22px; }
.bb-leader { padding: 14px 18px; }
.bb-leader-lbl { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bb-leader-lbl svg { width: 14px; height: 14px; }
.bb-leader-val { font-family: var(--font-head); font-size: 32px; font-weight: 800; line-height: 1.05; margin: 6px 0 2px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bb-leader-unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.bb-leader-name { font-size: 14px; font-weight: 700; color: var(--text); }
.bb-meta { font-size: 13.5px; }
.bb-controls--compact { gap: 10px 12px; margin: 10px 0 12px; }
.bb-src-meta { margin: 0 0 0 auto; font-size: 12px; color: var(--muted); line-height: 1.4; align-self: center; }
.bb-src-meta strong { color: var(--text-soft); font-weight: 700; }
.bb-leaders--strip { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; margin: 2px 0 12px; }
.bb-leaders--strip .bb-leader {
display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
flex: 1 1 240px; min-width: 0;
}
.bb-leaders--strip .bb-leader-lbl { font-size: 10.5px; letter-spacing: .03em; flex: none; }
.bb-leaders--strip .bb-leader-lbl svg { width: 13px; height: 13px; }
.bb-leaders--strip .bb-leader-val { font-size: 18px; margin: 0; letter-spacing: -.01em; flex: none; }
.bb-leaders--strip .bb-leader-unit { font-size: 11px; }
.bb-leaders--strip .bb-leader-name { font-size: 12.5px; font-weight: 600; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bb-filterbar { padding: 12px 14px; margin: 6px 0 10px; }
.bb-filterbar {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
align-items: end; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 14px 16px; margin: 8px 0 12px;
}
.bb-fb { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bb-fb--search { grid-column: 1 / -1; }
.bb-filterbar--free { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bb-filterbar--free .bb-fb--search { grid-column: 1 / -1; }
.bb-filterbar--free .bb-fb:not(.bb-fb--search):not(.bb-lock):not(.bb-fb-meta) { grid-column: span 2; }
.bb-filterbar--free .bb-fb.bb-lock:not(.bb-fb--search) { grid-column: span 1; }
.bb-fb > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.bb-select, .bb-search { position: relative; }
.bb-filterbar select,
.bb-filterbar input[type="text"] {
-webkit-appearance: none; appearance: none;
width: 100%; height: 40px; box-sizing: border-box;
background: var(--bg2); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-family: inherit; font-size: 14px; padding: 8px 12px; line-height: 1.2;
}
.bb-filterbar select { padding-right: 34px; cursor: pointer; }
.bb-filterbar select:focus,
.bb-filterbar input[type="text"]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,168,232,.16); }
.bb-filterbar select:hover:not(:disabled) { border-color: var(--cyan); }
.bb-select::after {
content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px;
transform: translateY(-65%) rotate(45deg); border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted); pointer-events: none;
}
.bb-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); pointer-events: none; }
.bb-search-ic svg { width: 16px; height: 16px; }
.bb-search input { padding-left: 36px !important; }
.bb-fb.bb-lock > label { color: var(--gold); }
.bb-fb.bb-lock select,
.bb-fb.bb-lock .bb-search input { opacity: .5; cursor: not-allowed; background: var(--surface2); }
.bb-fb.bb-lock .bb-select::after,
.bb-fb.bb-lock .bb-search-ic { opacity: .5; }
.bb-pro { display: inline-flex; align-items: center; color: var(--gold); text-decoration: none; }
.bb-pro svg { width: 13px; height: 13px; }
.bb-fb-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.bb-count { font-size: 13px; font-weight: 800; color: var(--cyan); }
.bb-clear { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.bb-clear:hover { color: var(--cyan); border-color: var(--cyan); }
.bb-adv { margin: 0 0 14px; }
.bb-adv-toggle {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700;
padding: 9px 14px;
}
.bb-adv-toggle:hover:not(:disabled) { border-color: var(--cyan); }
.bb-adv-toggle svg { width: 16px; height: 16px; }
.bb-adv-caret { display: inline-flex; transition: transform .18s ease; color: var(--muted); }
.bb-adv-toggle.is-open .bb-adv-caret { transform: rotate(180deg); }
.bb-adv-toggle.bb-lock { cursor: not-allowed; color: var(--gold); border-style: dashed; }
.bb-pro-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); }
.bb-pro-badge svg { width: 12px; height: 12px; }
.bb-adv-panel { margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.bb-adv-intro { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.bb-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; }
.bb-adv-cell { display: flex; flex-direction: column; gap: 4px; }
.bb-adv-cell > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.bb-mm { display: flex; gap: 6px; }
.bb-mm input {
-webkit-appearance: none; appearance: none; width: 50%; box-sizing: border-box;
height: 34px; background: var(--bg2); color: var(--text); border: 1px solid var(--border);
border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; padding: 6px 8px; text-align: center;
font-variant-numeric: tabular-nums;
}
.bb-mm input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,168,232,.16); }
.bb-adv-locked { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface2); padding: 14px 18px; }
.bb-adv-locked p { margin: 0; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 9px; }
.bb-adv-locked p svg { width: 18px; height: 18px; flex: none; }
.bb-team-tag { display: inline-block; font-weight: 800; font-size: 11px; letter-spacing: .03em; color: var(--cyan); }
table.bt-table.bb-table thead th.sortable { cursor: pointer; user-select: none; }
table.bt-table.bb-table thead th.sortable:hover { color: var(--text); }
table.bt-table.bb-table thead th[data-dir]::after { content: "▾"; margin-left: 4px; color: var(--cyan); font-size: 10px; }
table.bt-table.bb-table thead th[data-dir="asc"]::after { content: "▴"; }
table.bt-table.bb-table thead th.bb-th-saber { text-transform: none; letter-spacing: 0; }
table.bt-table.bb-table thead th.bb-th-left,
table.bt-table.bb-table td.bb-td-left { text-align: left; }
table.bt-table.bb-table thead th.bb-th-num { text-align: right; }
table.bt-table.bb-table td.bb-num { text-align: right; font-variant-numeric: tabular-nums; }
table.bt-table.bb-table td.team { min-width: 150px; }
table.bt-table.bb-table thead th .bb-help { display: inline-flex; }
table.bt-table.bb-table thead th .bb-help svg { width: 12px; height: 12px; }
table.bt-table.bb-table tbody tr:hover td { background: rgba(0,137,194,.06); }
table.bt-table.bb-table--pit { min-width: 1180px; }
table.bt-table.bb-table th.bb-sticky,
table.bt-table.bb-table td.bb-sticky { position: sticky; left: 0; z-index: 2; }
table.bt-table.bb-table th.bb-sticky { z-index: 3; background: var(--bg2); }
table.bt-table.bb-table td.bb-sticky { background: var(--bg); box-shadow: 8px 0 12px -8px rgba(15,30,60,.15), 1px 0 0 var(--border); }
table.bt-table.bb-table tbody tr:hover td.bb-sticky { background: var(--surface2); }
.bb-pager { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.bb-pager .btn[disabled] { opacity: .4; pointer-events: none; }
.bb-pager-info { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.bb-leaders { grid-template-columns: 1fr; gap: 10px; }
.bb-leader { padding: 12px 16px; }
.bb-leader-val { font-size: 28px; }
.bb-leaders--strip { gap: 6px; }
.bb-leaders--strip .bb-leader { flex: 1 1 100%; padding: 8px 12px; }
.bb-leaders--strip .bb-leader-val { font-size: 17px; }
.bb-src-meta { margin: 2px 0 0; flex: 1 1 100%; }
.bb-filterbar { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.bb-filterbar--free { grid-template-columns: 1fr 1fr; }
.bb-filterbar--free .bb-fb--search { grid-column: 1 / -1; }
.bb-filterbar--free .bb-fb:not(.bb-fb--search):not(.bb-lock):not(.bb-fb-meta) { grid-column: span 1; }
.bb-filterbar--free .bb-fb.bb-lock:not(.bb-fb--search) { grid-column: span 1; }
.bb-adv-grid { grid-template-columns: 1fr 1fr; }
.bb-adv-locked { flex-direction: column; align-items: flex-start; }
}
.bb-player-link { color: var(--text); text-decoration: none; font-weight: 700; border-bottom: 1px solid transparent; }
.bb-player-link:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.bb-player-plain { color: var(--text); font-weight: 700; display: inline-flex; flex-direction: column; line-height: 1.15; }
.bb-native { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.bb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bb-liga .segmented__btn { min-width: 52px; justify-content: center; letter-spacing: .03em; }
.bbp-hero { padding-bottom: 30px; }
.bbp-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-soft); text-decoration: none; margin-bottom: 16px; opacity: .9; }
.bbp-back:hover { color: #fff; opacity: 1; }
.bbp-role { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); }
.bbp-role svg { width: 15px; height: 15px; }
.bbp-name { margin: 8px 0 4px; font-size: 40px; line-height: 1.03; letter-spacing: -.02em; }
.bbp-native { margin: 0 0 12px; font-size: 18px; font-weight: 600; color: var(--text-soft); opacity: .85; }
.bbp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--text-soft); }
.bbp-team { font-family: var(--font-head); font-weight: 800; font-size: 16px; letter-spacing: .03em; color: var(--cyan); background: rgba(0,168,232,.14); border: 1px solid rgba(0,168,232,.35); border-radius: var(--radius-sm); padding: 2px 9px; }
.bbp-teamfull { font-weight: 600; }
.bbp-dot { opacity: .5; }
.bbp-pos, .bbp-legend { font-weight: 600; }
.bbp-qual { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--gold); background: var(--gold-soft); border-radius: var(--radius-pill); padding: 3px 10px; }
.bbp-qual svg { width: 13px; height: 13px; }
.bbp-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
.bbp-group { padding: 20px 22px; }
.bbp-group-h { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bbp-group-h svg { width: 17px; height: 17px; }
.bbp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.bbp-metric { min-width: 0; }
.bbp-m-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.bbp-m-val { font-family: var(--font-head); font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 2px 0 6px; }
.bbp-pct { display: flex; align-items: center; gap: 8px; }
.bbp-pct-bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface2); overflow: hidden; min-width: 0; }
.bbp-pct-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--muted); transition: width .3s ease; }
.bbp-pct-num { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; }
.bbp-pct-of { font-weight: 600; opacity: .7; }
.bbp-pct.is-elite .bbp-pct-bar > span { background: var(--green); }
.bbp-pct.is-elite .bbp-pct-num { color: var(--green); }
.bbp-pct.is-good .bbp-pct-bar > span { background: var(--cyan); }
.bbp-pct.is-good .bbp-pct-num { color: var(--cyan); }
.bbp-pct.is-mid .bbp-pct-bar > span { background: var(--gold); }
.bbp-pct.is-mid .bbp-pct-num { color: var(--gold); }
.bbp-pct.is-low .bbp-pct-bar > span { background: var(--red); }
.bbp-pct.is-low .bbp-pct-num { color: var(--red); }
.bbp-pct.is-na .bbp-pct-na { font-size: 12px; color: var(--muted); opacity: .5; }
.bbp-note { display: flex; align-items: flex-start; gap: 9px; margin: 22px 0 4px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.bbp-note svg { width: 17px; height: 17px; flex: none; color: var(--gold); margin-top: 1px; }
.bbp-note strong { color: var(--text); }
.bbp-source { margin: 6px 0 0; font-size: 12.5px; }
@media (max-width: 860px) {
.bbp-groups { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 720px) {
.bbp-name { font-size: 30px; }
.bbp-group { padding: 16px 16px; }
.bbp-metrics { gap: 12px 16px; }
.bbp-m-val { font-size: 21px; }
}
@media (max-width: 400px) {
.bbp-metrics { grid-template-columns: 1fr; }
}
.lc-* de /en-vivo).
Componentes: tabs, seccion-card unificada, chip de estado, callout, tile de
programa (resumen), tarjeta-brazo (movil), tabla densa con 1a col sticky, empty.
============================================================================ */
.lab-tabs { display: flex; gap: 6px; margin: 0 0 18px; }
.lab-tabs .lab-tab {
background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13.5px; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.lab-tabs .lab-tab .ic { width: 15px; height: 15px; }
.lab-tabs .lab-tab:hover { color: var(--text); }
.lab-tabs .lab-tab.active { background: var(--cyan); color: #04141f; border-color: var(--cyan); }
.lab-panel[hidden] { display: none; }
.lab-sec { margin: 0 0 16px; }
.lab-sec__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.lab-sec__head .ic { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.lab-sec__head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.lab-sec__sub { font-size: 13px; color: var(--muted); margin: 2px 0 12px; line-height: 1.45; }
.lab-sec__head + .lab-sec__sub { margin-top: 0; }
.lab-sec .lab-sec__head { margin-bottom: 10px; }
.lab-sec__head--between { justify-content: space-between; }
.lab-acc > .lab-acc__head { cursor: pointer; user-select: none; position: relative; }
.lab-acc > .lab-acc__head:hover { background: rgba(0,168,232,.045); border-radius: var(--radius-sm, 8px); }
html[data-theme="light"] .lab-acc > .lab-acc__head:hover { background: rgba(0,137,194,.05); }
.lab-acc > .lab-acc__head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--radius-sm, 8px); }
.lab-acc .lab-acc__chev { flex: none; margin-left: auto; color: var(--cyan); display: inline-flex; transition: transform .2s ease; }
.lab-acc > .lab-acc__head--between .lab-acc__chev { margin-left: 4px; }
.lab-acc .lab-acc__chev svg { width: 20px; height: 20px; display: block; }
.lab-acc.is-open > .lab-acc__head .lab-acc__chev { transform: rotate(180deg); }
.lab-acc > .lab-acc__body { margin-top: 12px; }
.lab-acc:not(.is-open) > .lab-acc__body { display: none; }
.lab-acc:not(.is-open) > .lab-acc__head { margin-bottom: 0; }
.lab-acc:not(.is-open) > .lab-acc__head.lab-sec__head { margin-bottom: 0; }
.lab-status {
display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 2px 9px;
border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
}
.lab-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.lab-status--live { color: var(--green); background: rgba(31,199,125,.12); border-color: rgba(31,199,125,.34); }
.lab-status--forward { color: var(--cyan); background: rgba(0,168,232,.12); border-color: rgba(0,168,232,.34); }
.lab-status--parallel { color: #38bdf8; background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.34); }
.lab-status--none { color: var(--muted); background: rgba(127,127,127,.1); border-color: var(--border); }
.lab-status--closed { color: var(--amber); background: var(--amber-bg); border-color: rgba(246,177,61,.34); }
.lab-status--kill { color: var(--red); background: rgba(255,93,115,.12); border-color: rgba(255,93,115,.34); }
.heat-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.heat-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.heat-lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.heat-lg.heat--publish { color: var(--gold); border-color: rgba(231,193,75,.4); }
.heat-lg.heat--publish::before { background: var(--gold); }
.heat-lg.heat--candidate { color: var(--cyan); border-color: rgba(0,168,232,.4); }
.heat-lg.heat--candidate::before { background: var(--cyan); }
.heat-lg.heat--lab { color: var(--muted); }
.heat-lg.heat--lab::before { background: var(--muted); }
.heat-lg.heat--veto { color: var(--red); border-color: rgba(255,93,115,.4); }
.heat-lg.heat--veto::before { background: var(--red); }
.heat-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.heat-tbl { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.heat-tbl th, .heat-tbl td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.heat-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2, var(--surface)); font-weight: 800; }
.heat-corner { position: sticky; left: 0; z-index: 3; background: var(--surface-2, var(--surface)); text-align: left; padding: 8px 12px; min-width: 210px; font-size: 11.5px; color: var(--muted); }
.heat-ch { padding: 8px 6px; text-align: center; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.heat-rh { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 9px 12px; min-width: 210px; max-width: 240px; vertical-align: top; }
.heat-rh__name { font-size: 12.5px; margin-bottom: 4px; }
.heat-rh__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.heat-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: rgba(127,127,127,.12); border-radius: var(--radius-pill); padding: 1px 7px; }
.heat-kind.heat-kind--on { color: var(--gold); background: var(--gold-soft); }
.heat-rh__sum { font-size: 12px; margin-bottom: 3px; }
.heat-rh__sum .pos { color: var(--green); font-weight: 800; }
.heat-rh__sum .neg { color: var(--red); font-weight: 800; }
.heat-rh__gate { font-size: 10.5px; color: var(--muted); line-height: 1.35; margin-bottom: 3px; }
.heat-rh__near { font-size: 10.5px; color: var(--cyan); font-weight: 700; }
.heat-cell { text-align: center; padding: 6px 6px; min-width: 62px; white-space: nowrap; }
.heat-cell .heat-y { display: block; font-weight: 800; font-size: 12px; line-height: 1.15; }
.heat-cell .heat-n { display: block; font-size: 9.5px; color: var(--muted); font-weight: 600; }
.heat-cell.heat--empty { color: var(--border); font-weight: 400; }
.heat-cell.heat--publish { background: var(--gold-soft); }
.heat-cell.heat--publish .heat-y { color: var(--gold); }
.heat-cell.heat--candidate { background: var(--cyan-tint); }
.heat-cell.heat--candidate .heat-y { color: var(--cyan); }
.heat-cell.heat--lab .heat-y { color: var(--ink, inherit); }
.heat-cell.heat--veto { background: var(--red-bg); }
.heat-cell.heat--veto .heat-y { color: var(--red); }
@media (max-width: 640px) {
.heat-corner, .heat-rh { min-width: 150px; max-width: 170px; }
.heat-rh__gate { display: none; }
}
.lab-callout {
display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px;
background: var(--amber-bg); border: 1px solid rgba(246,177,61,.28);
border-left: 3px solid var(--amber); border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 11px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.lab-callout .ic { width: 17px; height: 17px; color: var(--amber); flex: none; margin-top: 1px; }
.lab-callout--hope { background: rgba(31,199,125,.09); border-color: rgba(31,199,125,.28); border-left-color: var(--green); }
.lab-callout--hope .ic { color: var(--green); }
.lab-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.lab-kpi {
flex: 1; min-width: 130px; background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 11px 13px;
}
.lab-kpi__lab { font-size: 11px; color: var(--muted); line-height: 1.3; }
.lab-kpi__val { font-size: 22px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lab-kpi__val.pos { color: var(--green); } .lab-kpi__val.neg { color: var(--red); }
.lab-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lab-tile {
display: flex; flex-direction: column; gap: 8px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 15px;
box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.lab-tile:hover { border-color: var(--cyan); transform: translateY(-1px); }
.lab-tile__top { display: flex; align-items: center; gap: 8px; }
.lab-tile__top .ic { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.lab-tile__name { font-size: 14px; font-weight: 800; flex: 1; min-width: 0; }
.lab-tile__metric { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.lab-tile__metric.pos { color: var(--green); } .lab-tile__metric.neg { color: var(--red); }
.lab-tile__metric small { font-size: 12px; color: var(--muted); font-weight: 600; }
.lab-tile__verdict { font-size: 12px; color: var(--muted); line-height: 1.45; flex: 1; }
.lab-tile__link { font-size: 12px; font-weight: 700; color: var(--cyan); display: inline-flex; align-items: center; gap: 4px; }
.lab-empty {
display: flex; align-items: center; gap: 10px; color: var(--muted);
font-size: 13px; padding: 6px 2px;
}
.lab-empty .ic { width: 18px; height: 18px; flex: none; opacity: .7; }
.lab-toolbar {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 10px 14px; margin: 0 0 16px;
}
.lab-toolbar__grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-toolbar__lab { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.lab-meth { margin: 8px 0 0; }
.lab-meth > summary {
cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 700; color: var(--muted);
display: inline-flex; align-items: center; gap: 5px;
}
.lab-meth > summary::-webkit-details-marker { display: none; }
.lab-meth > summary .ic { width: 13px; height: 13px; }
.lab-meth > p { font-size: 11px; color: var(--muted); line-height: 1.55; margin: 7px 0 0; }
.lab-inner { margin: 12px -4px 0; padding: 12px 4px 0; border-top: 1px dashed var(--border); }
.lab-inner > summary { color: var(--text); }
.lab-inner > summary::-webkit-details-marker { display: none; }
.lab-inner > summary { list-style: none; }
table.lab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lab-table th, table.lab-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
table.lab-table thead th { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
table.lab-table td:first-child, table.lab-table th:first-child { text-align: left; }
table.lab-table td.lab-c-name { max-width: 260px; white-space: normal; }
.lab-c-name b { font-weight: 700; }
.lab-c-name .lab-c-desc { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.lab-num { font-variant-numeric: tabular-nums; }
.lab-pos { color: var(--green); } .lab-neg { color: var(--red); }
.lab-sticky1 { position: relative; }
.lab-sticky1 table.lab-table th:first-child, .lab-sticky1 table.lab-table td:first-child {
position: sticky; left: 0; background: var(--surface); z-index: 1;
}
.lab-sticky1 table.lab-table thead th:first-child { background: var(--surface); }
.lab-sticky1::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px; pointer-events: none;
background: linear-gradient(to right, transparent, rgba(0,0,0,.05));
}
@media (max-width: 640px) {
.lab-tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
scrollbar-width: none; scroll-snap-type: x proximity; padding-right: 28px;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); }
.lab-tabs::-webkit-scrollbar { display: none; }
.lab-tabs .lab-tab { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; }
.lab-kpi { min-width: calc(50% - 5px); }
.lab-tiles { grid-template-columns: 1fr; }
.lab-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
table.lab-armstack { display: block; font-size: 14px; }
table.lab-armstack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.lab-armstack tbody, table.lab-armstack tr, table.lab-armstack td { display: block; width: auto; }
table.lab-armstack tr {
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
padding: 12px 13px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
table.lab-armstack td.lab-c-name {
border: 0 !important; padding: 0 0 9px; margin-bottom: 9px; max-width: none;
border-bottom: 1px solid var(--border) !important; text-align: left !important;
}
table.lab-armstack td:not(.lab-c-name) {
display: inline-flex; flex-direction: column; gap: 1px; width: 33.33%;
border: 0 !important; padding: 6px 0; text-align: left !important; vertical-align: top;
font-size: 15px; font-weight: 700;
}
table.lab-armstack td:not(.lab-c-name)::before {
content: attr(data-label); color: var(--muted); font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
table.lab-armstack td[data-label=""] { display: none; }
.lab-sticky1 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.lab-table:not(.lab-armstack) { min-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
.card:hover { transform: none; }
}
.acc-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 20px; }
.acc-quick a {
display: flex; flex-direction: column; gap: 8px; padding: 14px 13px; border-radius: var(--radius);
background: linear-gradient(180deg, var(--surface), var(--bg2)); border: 1px solid var(--border);
color: var(--text); text-decoration: none;
transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease;
}
.acc-quick a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #33456b; }
.acc-quick .aq-ic { color: var(--cyan); display: inline-flex; }
.acc-quick .aq-ic svg { width: 24px; height: 24px; }
.acc-quick .aq-lbl { font-weight: 700; font-size: 14px; line-height: 1.15; }
.acc-quick .aq-sub { font-size: 12px; color: var(--muted); line-height: 1.2; }
.acc-quick .aq-ic.is-gold { color: var(--gold); }
@media (max-width: 560px) { .acc-quick { grid-template-columns: repeat(2, 1fr); } }
.tg-chan-sum { font-size: 12.5px; color: var(--muted); margin: 2px 0 0 30px; line-height: 1.4; }
.tg-chan-sum.is-on { color: var(--text-soft); }
.tg-chan-sum b { color: var(--cyan); font-weight: 700; }
.acc-danger { border-color: rgba(var(--red-rgb), .35); }
.acc-danger h3 { color: var(--red); }
.btn-danger { background: transparent; border-color: rgba(var(--red-rgb), .5); color: var(--red); }
.btn-danger:hover { background: rgba(var(--red-rgb), .10); }
.acc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-width: 340px; }
.acc-field label { font-weight: 700; font-size: 13px; }
.skip-link {
position: fixed; top: 8px; left: 8px; z-index: 10080; transform: translateY(-140%);
background: var(--cyan); color: #04121d; font-weight: 700; font-size: 14px;
padding: 10px 16px; border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow);
transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #04121d; outline-offset: 2px; }
main:focus { outline: none; }
.tg-chan-head {
display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 2px;
background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.tg-chan-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--radius-sm); }
.tg-chan-title { font-weight: 800; font-size: 16px; flex: 1; }
.tg-chan-head .tg-chev { color: var(--muted); display: inline-flex; transition: transform .18s ease; }
.tg-chan-head .tg-chev svg { width: 18px; height: 18px; }
.tg-chan.is-open .tg-chan-head .tg-chev { transform: rotate(180deg); }
.tg-chan-head:hover .tg-chev { color: var(--text); }
.tg-chan-body { display: none; }
.tg-chan.is-open .tg-chan-body { display: block; }