/* StreamsZone landing page v9 — no external fonts/images, so first paint is fast */
:root{
color-scheme:dark;
--ruby:#e11d48;--ruby-d:#9f1239;--violet:#7c3aed;--violet-d:#4c1d95;--gold:#f2c879;
--primary:#c51f35;--primary-hi:#e02b45;--rose:#ff7185;--live:#ff3b57;
--bg:#090a0f;--bg-2:#0d0f16;--surface:#151822;--surface-2:#1b1e2b;
--text:#f5f5f7;--muted:#a9abb7;--soft:#c6c8d1;--line:rgba(255,255,255,.1);
--radius:16px;
--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
h1,h2,h3,p{margin-top:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 14px;border-radius:8px;z-index:20;font-weight:700}
.skip:focus{left:8px}
.container{width:min(1160px,calc(100% - 40px));margin:0 auto}
/* top bar */
.topbar{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:#090a0f}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.7px;font-size:22px}
.brand-mark{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--ruby),var(--violet));box-shadow:0 8px 28px rgba(197,31,53,.3)}
.brand-mark svg{width:22px;height:22px}
.brand em{color:#ef5368;font-style:normal}
.navlinks{display:flex;gap:28px;color:#c6c6ce;font-size:14px;font-weight:650}
.navlinks a:hover{color:#fff}
/* buttons */
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;font-weight:800;transition:transform .2s ease,background .2s ease,border-color .2s ease}
/* buttons: wine <-> plum blink, gold edge (colours taken from your reference) */
.zbtn{white-space:nowrap;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:100%;padding:13px 20px;border:1.5px solid #e6c27a;border-radius:13px;color:#fff;font-size:14px;font-weight:800;letter-spacing:.2px;text-align:center;cursor:pointer;background:linear-gradient(135deg,#5c0f20,#240810);text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .2s ease}
.zbtn:hover{transform:translateY(-2px)}
/* layer 1: the second colour fades in and out = the blink */
.zbtn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#3d1366,#1c0a33);opacity:0;animation:zblink 2.4s ease-in-out infinite}
/* layer 2: gold glow breathing with it */
.zbtn::after{content:"";position:absolute;inset:-1.5px;z-index:-2;border-radius:inherit;box-shadow:0 0 20px 2px rgba(230,194,122,.5);opacity:0;animation:zblink 2.4s ease-in-out infinite;pointer-events:none}
@keyframes zblink{0%,100%{opacity:0}50%{opacity:1}}
/* alt = same two colours, opposite phase */
.zbtn.alt{background:linear-gradient(135deg,#3d1366,#1c0a33)}
.zbtn.alt::before{background:linear-gradient(135deg,#5c0f20,#240810)}
.zbtn-arrow,.zb-arrow{color:#f2c879;font-size:15px;line-height:1}
.zb-dot{width:9px;height:9px;border-radius:50%;background:#ff4560;box-shadow:0 0 10px #ff4560;animation:zdot 1.4s ease-in-out infinite;flex:none}
@keyframes zdot{50%{opacity:.35}}
.zbtn.sm{padding:9px 13px;font-size:12.5px;border-radius:12px;gap:7px}
.zbtn.lg{padding:15px 24px;font-size:15px}
.zbtn.block{display:flex;width:100%}
.topic-card .zbtn{margin-top:16px;padding:11px 16px;font-size:13px}
.offer-card .zbtn{margin-top:10px}
.btn-secondary{padding:13px 20px;font-size:14px;border:1px solid rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
.btn-secondary:hover{border-color:var(--gold);background:rgba(242,200,121,.08)}
/* hero */
.hero{position:relative;overflow:hidden;padding:88px 0 78px;background:radial-gradient(ellipse at 78% 35%,rgba(197,31,53,.24),transparent 40%),linear-gradient(115deg,#0b0c12,#10121b 55%,#160d14)}
.hero:before{content:"";position:absolute;width:480px;height:480px;right:-120px;top:-190px;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.018),0 0 0 96px rgba(255,255,255,.014);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--ruby),var(--violet))}
h1{font-size:clamp(40px,6vw,68px);line-height:1.03;letter-spacing:-2.6px;margin:20px 0;max-width:680px}
h1 span{background:linear-gradient(90deg,#ff5b7a,#b08cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{color:#bcbeca;line-height:1.8;font-size:16px;max-width:560px;margin-bottom:28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 22px;color:#c0c2cc;font-size:12.5px;margin-top:26px}
.trust-strip span:before{content:"✓";color:var(--rose);font-weight:900;margin-right:7px}
.hero-art{min-height:360px;position:relative;display:grid;place-items:center}
.orbit{position:absolute;width:310px;height:310px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018)}
.feature-panel{position:relative;width:min(340px,90%);padding:25px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(145deg,#262834,#11131b);box-shadow:0 25px 80px rgba(0,0,0,.45);transform:rotate(-3deg)}
.panel-top{display:flex;justify-content:space-between;align-items:center;color:#b7b9c5;font-size:11px;letter-spacing:1.1px;font-weight:800}
.live-dot{display:flex;align-items:center;gap:7px;color:#ff6578}
.live-dot:before,.live-tag:before,.rail-head h2:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.panel-visual{height:150px;margin:20px 0;border-radius:15px;display:grid;place-items:center;background:radial-gradient(circle at 72% 25%,rgba(240,75,98,.7),transparent 28%),linear-gradient(135deg,#272b3b,#151722 55%,#4c1523)}
.panel-visual svg{width:105px;height:105px;opacity:.9}
.panel-title{font-size:20px;font-weight:850;margin-bottom:6px}
.panel-sub{color:#a3a6b2;font-size:12.5px}
.panel-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.panel-tags span{background:rgba(255,255,255,.07);border-radius:20px;padding:6px 10px;font-size:11px;color:#d6d6dd}
/* ticker */
.ticker{overflow:hidden;white-space:nowrap;background:#151822;border-block:1px solid var(--line);color:#c9cbd4;padding:12px 0;font-size:11px;font-weight:800;letter-spacing:1.5px}
.ticker-track{display:inline-block;animation:tick 40s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
/* watch live now rail */
.live-rail{padding:34px 0;background:linear-gradient(180deg,#120d14,#0d0f16);border-bottom:1px solid var(--line)}
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.rail-head h2{font-size:22px;letter-spacing:-.6px;display:flex;align-items:center;gap:10px}
.rail-head p{margin:0;color:var(--muted);font-size:13px}
.chips{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scroll-snap-type:x proximity}
.chip{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid rgba(167,139,250,.35);border-radius:999px;background:linear-gradient(135deg,rgba(225,29,72,.14),rgba(124,58,237,.14));font-size:14px;font-weight:750;transition:transform .2s,background .2s,border-color .2s}
.chip:hover{transform:translateY(-2px);background:rgba(197,31,53,.28);border-color:#f04b62}
.chip b{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.4px}
/* stats */
.stats{background:var(--bg-2);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:22px 16px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat strong{display:block;font-size:13px;margin-bottom:5px}
.stat span{font-size:12.5px;color:#9a9dab}
/* sections */
.section{padding:76px 0;content-visibility:auto;contain-intrinsic-size:auto 700px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
.section-kicker{color:var(--gold);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;margin-bottom:12px}
h2{font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-1.4px;margin-bottom:0}
.section-head p{color:var(--muted);font-size:14px;line-height:1.7;max-width:420px;margin:0}
/* topic search + filters */
.topic-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px;padding:16px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(135deg,#171a25,#10121a)}
.topic-search{flex:1 1 230px;min-width:0;padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:#0b0d14;color:#fff;font-size:14px}
.topic-search:focus{outline:0;border-color:#f04b62;box-shadow:0 0 0 3px rgba(240,75,98,.15)}
.filter-buttons{display:flex;flex-wrap:wrap;gap:7px}
.filter-btn{padding:11px 14px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#202332;color:#cfd1da;font-size:12.5px;font-weight:800;cursor:pointer;transition:.2s}
.filter-btn:hover,.filter-btn.active{border-color:#a78bfa;background:linear-gradient(135deg,var(--ruby-d),var(--violet-d));color:#fff}
.results-count{width:100%;color:#9a9dab;font-size:12px}
.empty{display:none;padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px;font-size:14px}
.empty.show{display:block}
/* topic cards */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.topic-card{position:relative;overflow:hidden;min-height:176px;padding:21px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,var(--surface-2),#10121a);transition:transform .25s,border-color .25s,box-shadow .25s}
.topic-card:before{content:"";position:absolute;width:145px;height:145px;right:-48px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(225,48,75,.34),transparent 70%);pointer-events:none}
.topic-card:hover{transform:translateY(-5px);border-color:rgba(240,75,98,.6);box-shadow:0 16px 38px rgba(0,0,0,.28)}
.topic-card[hidden]{display:none!important}
.topic-icon{display:block;font-size:28px;margin-bottom:14px}
.topic-card h3{position:relative;font-size:17px;margin:0 0 7px}
.topic-card p{position:relative;color:#aeb0bb;font-size:13px;line-height:1.6;margin:0}
.next{position:relative;display:block;margin-top:10px;color:var(--gold);font-size:12.5px;font-weight:700;line-height:1.5}
.next:empty{display:none}
.live-tag{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--gold);z-index:1}
/* offers */
.offer-section{background:radial-gradient(ellipse at 10% 50%,rgba(197,31,53,.13),transparent 42%),#0b0d14;border-block:1px solid var(--line)}
.offer-grid,.guide-grid,.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.offer-card{display:flex;flex-direction:column;padding:23px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:linear-gradient(145deg,#202332,#12141d)}
.offer-card.featured{border-color:rgba(240,75,98,.55);box-shadow:0 12px 38px rgba(197,31,53,.14)}
.offer-label,.guide-label{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.offer-card h3{font-size:19px;margin:12px 0 8px}
.offer-card p{flex:1;color:#aeb0bb;font-size:13.5px;line-height:1.7}
/* guides */
.guides{background:#0e1017;border-block:1px solid var(--line)}
.guide{display:block;padding:22px;min-height:180px;border-radius:15px;border:1px solid var(--line);background:var(--surface);transition:transform .25s,border-color .25s}
.guide:hover{transform:translateY(-4px);border-color:rgba(240,75,98,.5)}
.guide h3{font-size:17px;line-height:1.4;margin:13px 0 10px}
.guide p{color:#a9acb8;font-size:13.5px;line-height:1.65;margin-bottom:14px}
.guide .more{color:#ff7588;font-size:13px;font-weight:800}
/* trust */
.trust-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#11141e,#0b0d14);border-block:1px solid var(--line)}
.trust-section .container{position:relative}
.trust-card{position:relative;overflow:hidden;min-height:190px;padding:23px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(31,34,47,.9),rgba(17,19,27,.95));transition:transform .25s,border-color .25s}
.trust-card:hover{transform:translateY(-5px);border-color:rgba(240,75,98,.55)}
.trust-symbol{width:42px;height:42px;display:grid;place-items:center;margin-bottom:15px;border-radius:13px;background:rgba(197,31,53,.15);border:1px solid rgba(240,75,98,.2);color:var(--rose);font-size:21px}
.trust-card h3{font-size:17px;margin:0 0 8px}
.trust-card p{max-width:360px;color:#aeb0bb;font-size:13.5px;line-height:1.7;margin:0}
.reader-note{margin-top:18px;padding:18px 20px;border:1px solid rgba(240,75,98,.16);border-left:3px solid var(--primary);border-radius:0 12px 12px 0;background:rgba(197,31,53,.08);color:var(--soft);font-size:13.5px;line-height:1.7}
.reader-note a{color:#ff8293;font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* reviews (real, moderated) */
.review-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.rating-box{display:flex;align-items:center;gap:18px;padding:20px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rating-num{font-size:42px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.stars{color:#ffb547;letter-spacing:2px;font-size:18px;white-space:nowrap}
.rating-meta{color:var(--muted);font-size:13px;margin-top:4px}
.spotlight{margin-bottom:14px;padding:20px;border:1px solid rgba(167,139,250,.35);border-radius:var(--radius);background:linear-gradient(135deg,rgba(225,29,72,.1),rgba(124,58,237,.12));min-height:118px;transition:opacity .4s ease}
.spotlight.fade{opacity:0}
.spotlight q{display:block;quotes:none;font-size:15px;line-height:1.7;color:#fff;margin:8px 0 10px}
.spotlight small{color:var(--gold);font-size:12.5px;font-weight:700}
.review-list{display:grid;gap:12px}
.review{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.review-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.review-top strong{font-size:14px}
.review-top small{color:#8e91a0;font-size:12px}
.review p{margin:8px 0 0;color:var(--soft);font-size:14px;line-height:1.7}
.review-empty{padding:22px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:14px;line-height:1.7}
.review-form{padding:22px;border:1px solid rgba(240,75,98,.3);border-radius:var(--radius);background:linear-gradient(145deg,#1b1e2b,#10121a)}
.review-form h3{font-size:18px;margin-bottom:14px}
.field{display:block;margin-bottom:13px}
.field span{display:block;font-size:12.5px;font-weight:700;color:var(--soft);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:#0b0d14;color:#fff;font-size:14px}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:#f04b62;box-shadow:0 0 0 3px rgba(240,75,98,.15)}
.star-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin-bottom:13px;border:0;padding:0}
.star-pick legend{float:left;width:100%;font-size:12.5px;font-weight:700;color:var(--soft);margin-bottom:6px;padding:0}
.star-pick input{position:absolute;opacity:0;pointer-events:none}
.star-pick label{font-size:30px;line-height:1;color:#3a3e50;cursor:pointer;transition:color .15s}
.star-pick label:hover,.star-pick label:hover~label,.star-pick input:checked~label{color:#ffb547}
.star-pick input:focus-visible+label{outline:2px solid #fff;border-radius:4px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-msg{margin-top:12px;font-size:13px;line-height:1.6;min-height:20px;color:var(--soft)}
.form-msg.ok{color:#7be39a}.form-msg.err{color:#ff8d9c}
/* auto schedule */
.sched{background:linear-gradient(180deg,#0b0d14,#0e1017);border-bottom:1px solid var(--line)}
.sched-card{border:1px solid rgba(167,139,250,.3);border-radius:18px;background:linear-gradient(145deg,#1b1e2b,#10121a);overflow:hidden}
.sched-tabs{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 12px;scrollbar-width:thin}
.sched-tab{flex:0 0 auto;padding:10px 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#202332;color:#cfd1da;font-size:13px;font-weight:800;cursor:pointer;transition:.2s}
.sched-tab:hover{border-color:#a78bfa}
.sched-tab.on{border-color:#a78bfa;color:#fff;background:linear-gradient(135deg,var(--ruby-d),var(--violet-d))}
.country-tabs{padding-bottom:0}
.country-tabs .sched-tab{padding:8px 13px;font-size:12.5px}
.sched-tab:disabled{opacity:.4;cursor:default}
.sched-bar{height:3px;background:rgba(255,255,255,.08)}
.sched-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ruby),var(--violet))}
@keyframes sprog{from{width:0}to{width:100%}}
.sched-body{padding:8px 18px 4px;min-height:300px}
.sched-league{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:12px 0 4px}
.sched-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);animation:rowin .35s ease both}
.sched-row:last-child{border:0}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sched-match{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 9px;font-size:15px}
.sched-match .vs{color:#8e91a0;font-size:12px}
.sched-match small{flex-basis:100%;color:#9a9dab;font-size:12px}
.sched-when{text-align:right;font-size:13px;color:var(--soft);white-space:nowrap}
.sched-when em{display:block;margin-top:3px;font-style:normal;font-size:12px;font-weight:800;color:var(--gold)}
.sched-when em.now{color:#ff8d9c}
.sched-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px 18px;border-top:1px solid var(--line)}
.sched-foot span{color:#8e91a0;font-size:12px;line-height:1.6;flex:1 1 220px}
@media(max-width:560px){.sched-row{flex-direction:column;align-items:flex-start;gap:6px}.sched-when{text-align:left}.sched-when em{display:inline;margin-left:8px}.sched-body{min-height:0}.sched-foot .zbtn{width:100%}}
/* floating CTA v11: sits at 50% (middle) of the screen height on phone, tablet and computer. Each pill rests 70% hidden inside the edge,
slides fully out for a moment, then tucks back in. The two pills take turns. Small & cute on phones. */
.fab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:14;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;padding-right:env(safe-area-inset-right,0px)}
.fab[hidden]{display:none}
.fab-x{pointer-events:auto;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,15,.85);color:#ddd;font-size:13px;line-height:1;cursor:pointer;margin:0 8px -2px 0}
.cta-pill{pointer-events:auto;position:relative;display:flex;align-items:center;gap:8px;width:158px;padding:6px 10px 6px 7px;border:1.5px solid #e6c27a;border-right:0;border-radius:18px 0 0 18px;color:#fff;background:linear-gradient(120deg,#4a0d1a 0%,#1a0508 60%,#2e0a12 100%);box-shadow:0 8px 22px rgba(0,0,0,.6),inset 0 0 18px rgba(230,194,122,.07);transform:translateX(70%);animation:fabA 4s cubic-bezier(.22,1,.36,1) infinite,pillBlink 1s ease-in-out infinite;will-change:transform,filter}
.cta-pill.b{background:linear-gradient(120deg,#33104f 0%,#150824 60%,#241037 100%);animation:fabA 4s cubic-bezier(.22,1,.36,1) -2s infinite,pillBlink 1s ease-in-out .5s infinite}
@keyframes pillBlink{50%{filter:brightness(1.5) saturate(1.25)}}
.cta-pill::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;box-shadow:0 0 16px 1px rgba(230,194,122,.5);opacity:0;animation:goldBreath 1s ease-in-out infinite;pointer-events:none}
@keyframes goldBreath{50%{opacity:.85}}
@keyframes fabA{0%,44%{transform:translateX(70%)}56%,84%{transform:translateX(0)}96%,100%{transform:translateX(70%)}}
.cp-ico{position:relative;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:radial-gradient(circle at 35% 30%,#ff6b7d,#d4172e 70%);box-shadow:0 0 12px rgba(225,29,72,.55);animation:icoBlink 1.6s ease-in-out infinite}
.cta-pill.b .cp-ico{background:radial-gradient(circle at 35% 30%,#ffe3a1,#d9a441 72%);color:#5a3a00;box-shadow:0 0 12px rgba(242,200,121,.55)}
@keyframes icoBlink{50%{filter:brightness(1.35)}}
.cp-ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,90,110,.75);animation:ping 2s ease-out infinite;pointer-events:none}
.cta-pill.b .cp-ico::after{border-color:rgba(242,200,121,.85)}
@keyframes ping{from{transform:scale(1);opacity:.85}to{transform:scale(1.6);opacity:0}}
.cp-txt{display:flex;flex-direction:column;gap:2px;line-height:1.1;min-width:0}
.cp-txt small{align-self:flex-start;color:#f2c879;font-size:8.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding-bottom:1px;border-bottom:1px solid #c41230;white-space:nowrap}
.cp-txt b{align-self:flex-start;font-size:12.5px;font-weight:850;letter-spacing:.2px;text-transform:uppercase;padding-bottom:1px;border-bottom:1.5px solid #c41230;white-space:nowrap}
.cp-arrow{margin-left:auto;color:#f2c879;font-size:18px;font-weight:700;line-height:1}
@media(min-width:561px){.cta-pill{width:182px;gap:10px}.cp-ico{width:36px;height:36px;font-size:14px}.cp-txt small{font-size:9.5px}.cp-txt b{font-size:14px}}
@media(prefers-reduced-motion:reduce){.cta-pill{animation:none!important;transform:none}}
/* cta + footer */
.explore{display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px;padding:35px;border-radius:20px;background:linear-gradient(110deg,#9f172b,#cf2941 65%,#821629)}
.explore h2{font-size:clamp(25px,3vw,34px);letter-spacing:-1px}
.explore p{color:rgba(255,255,255,.86);font-size:14px;margin:10px 0 0}
.explore .btn-secondary{border-color:rgba(255,255,255,.5);white-space:nowrap}
.footer{padding:45px 0 25px;background:#08090e;content-visibility:auto;contain-intrinsic-size:auto 320px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:35px}
.footer p{max-width:340px;margin:15px 0 0;color:#9a9dab;font-size:13px;line-height:1.8}
.footer h4{font-size:13px;margin:4px 0 15px}
.footer-links{display:grid;gap:11px;color:#a9abb6;font-size:13px}
.footer-links a:hover{color:#fff}
.copyright{display:flex;justify-content:space-between;gap:15px;padding-top:20px;border-top:1px solid var(--line);color:#8a8d9a;font-size:12px}
.back-top{position:fixed;right:20px;bottom:20px;z-index:12;width:46px;height:46px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:linear-gradient(135deg,var(--ruby),var(--violet));color:#fff;font-size:20px;font-weight:900;cursor:pointer;box-shadow:0 8px 25px rgba(197,31,53,.35);opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s}
.back-top.visible{opacity:1;visibility:visible;transform:none}
/* responsive */
@media(max-width:900px){.review-wrap{grid-template-columns:1fr}}
@media(max-width:800px){
.navlinks{gap:16px}.navlinks a:nth-child(3){display:none}
.hero-grid{grid-template-columns:1fr;gap:20px}.hero{padding:60px 0 52px}
.hero-art{min-height:300px}.orbit{width:250px;height:250px}
.section-head{flex-direction:column;align-items:start}
.guide-grid,.offer-grid,.trust-grid{grid-template-columns:1fr 1fr}
.topic-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.container{width:calc(100% - 30px)}
.nav{min-height:64px}.brand{font-size:19px}.navlinks{display:none}
h1{letter-spacing:-1.8px}.hero-copy{font-size:15px}
.hero-art{min-height:280px}.feature-panel{width:290px;padding:20px}.panel-visual{height:125px}
.stats-grid{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line);padding:15px}.stat:last-child{border:0}
.guide-grid,.offer-grid,.topic-grid,.trust-grid{grid-template-columns:1fr}
.trust-card{min-height:0}.section{padding:56px 0}
.explore{grid-template-columns:1fr;padding:27px}.explore .btn-secondary{justify-self:start}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}
.copyright{flex-direction:column}
.rating-box{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ============ v11 additions ============ */
/* cute captions */
.eyebrow{padding:7px 14px;border-radius:18px;background:linear-gradient(90deg,rgba(225,29,72,.18),rgba(124,58,237,.18));border:1px solid rgba(242,200,121,.35);letter-spacing:1.1px;font-size:11.5px}
.section-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(242,200,121,.09);border:1px dashed rgba(242,200,121,.5);letter-spacing:1px;font-size:11.5px}
.section-head>p{position:relative;max-width:520px;padding-left:14px;color:#b9bbc7;line-height:1.7;border-left:3px solid #e11d48;border-image:linear-gradient(#ff5b7a,#7c3aed) 1}
.hero-copy b{color:#fff;font-weight:800;background:linear-gradient(transparent 62%,rgba(225,29,72,.45) 0)}
.trust-strip span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.trust-strip span:before{content:"✓";display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#e11d48,#7c3aed);font-size:10px;font-weight:900;color:#fff}
.topic-card h3{letter-spacing:-.2px}
.topic-card>p{color:#b4b6c3;line-height:1.6}
.topic-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,rgba(225,29,72,.22),rgba(124,58,237,.22));border:1px solid rgba(255,255,255,.1)}
.tc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tc-chips span{font-size:11px;font-weight:700;color:#e8e1f5;padding:4px 9px;border-radius:999px;background:rgba(124,58,237,.18);border:1px solid rgba(176,140,255,.28)}
.tc-note{margin:12px 0 0!important;font-size:12px;color:#9ea1b0;line-height:1.5}
.grid-title{display:flex;align-items:center;gap:10px;margin:28px 0 14px;font-size:21px;letter-spacing:-.4px}
.grid-title small{font-size:12px;font-weight:700;color:var(--gold);padding:4px 10px;border-radius:999px;border:1px dashed rgba(242,200,121,.5)}
/* hero trial buttons */
.hero-trials{display:flex;gap:10px;flex-wrap:wrap;width:100%;margin-top:2px}
.hero-trials .zbtn{flex:1 1 180px}
/* free-trial strips above each section */
.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 18px;border:1.5px dashed rgba(230,194,122,.55);border-radius:16px;background:linear-gradient(110deg,rgba(92,15,32,.55),rgba(36,8,16,.55))}
.cta-strip.e{background:linear-gradient(110deg,rgba(61,19,102,.55),rgba(28,10,51,.55))}
.cs-txt b{display:block;font-size:15px;margin-bottom:3px}
.cs-txt span{font-size:12.5px;color:#c6c8d1;line-height:1.5}
/* ===== premium background (matches the wine / plum / gold theme) ===== */
body{background:#09090f}
body::before{content:"";position:fixed;inset:-6%;z-index:-2;pointer-events:none;background:radial-gradient(900px 620px at 4% -6%,rgba(225,29,72,.15),transparent 62%),radial-gradient(820px 640px at 104% 8%,rgba(124,58,237,.15),transparent 62%),radial-gradient(900px 600px at 50% 112%,rgba(124,58,237,.08),transparent 62%),linear-gradient(180deg,#090a0f,#0b0d14 55%,#090a0f);animation:aurora 24s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 28%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 28%,#000 15%,transparent 72%)}
@keyframes aurora{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1.5%)}}
.topbar{background:rgba(9,10,15,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero{background:radial-gradient(ellipse at 78% 35%,rgba(225,29,72,.16),transparent 45%),radial-gradient(ellipse at 8% 95%,rgba(124,58,237,.12),transparent 42%)}
.ticker{background:rgba(21,24,34,.72)}
.live-rail{background:linear-gradient(180deg,rgba(18,13,20,.7),rgba(13,15,22,.4))}
.stats{background:rgba(13,15,22,.5)}
.sched{background:linear-gradient(180deg,rgba(11,13,20,.55),rgba(14,16,23,.3))}
.offer-section{background:radial-gradient(ellipse at 10% 50%,rgba(225,29,72,.11),transparent 45%),rgba(11,13,20,.35)}
.guides{background:rgba(14,16,23,.3)}
.trust-section{background:linear-gradient(135deg,rgba(17,20,30,.55),rgba(11,13,20,.3))}
.footer{background:rgba(8,9,14,.88)}
.explore-head{padding-bottom:6px}.grp{padding-top:26px}
/* ===== 3D shapes floating behind the page: your content floats on top, like on gold ===== */
.bg3d{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:1200px}
.bg3d::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-14%;height:46%;background:radial-gradient(ellipse at 50% 100%,rgba(124,58,237,.16),rgba(225,29,72,.06) 45%,transparent 70%)}
.bg3d::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#f2c879,transparent);opacity:.28}
.bg3d i{position:absolute;display:block;will-change:transform}
.bg3d .o1,.bg3d .o2,.bg3d .o3{border-radius:50%}
.bg3d .o1{width:min(380px,62vw);height:min(380px,62vw);left:-12%;top:16%;background:radial-gradient(circle at 32% 26%,#5a1a3a 0,#9f1239 34%,#3b0a1c 74%,#14060c 100%);box-shadow:0 60px 90px rgba(0,0,0,.55),inset -30px -40px 70px rgba(0,0,0,.6);opacity:.26;animation:fl1 18s ease-in-out infinite}
.bg3d .o2{width:min(300px,50vw);height:min(300px,50vw);right:-10%;top:4%;background:radial-gradient(circle at 30% 26%,#6d4ac4 0,#4c1d95 38%,#1e0b45 80%);box-shadow:0 60px 80px rgba(0,0,0,.55),inset -26px -36px 64px rgba(0,0,0,.6);opacity:.3;animation:fl2 21s ease-in-out infinite}
.bg3d .o3{width:min(260px,44vw);height:min(260px,44vw);right:6%;bottom:6%;background:radial-gradient(circle at 30% 26%,#2a2f45 0,#1b1e2b 45%,#0b0d14 85%);box-shadow:0 50px 70px rgba(0,0,0,.55),inset -22px -30px 56px rgba(0,0,0,.6);opacity:.55;animation:fl1 24s ease-in-out -6s infinite reverse}
.bg3d .r1,.bg3d .r2{border-radius:50%;border-style:solid}
.bg3d .r1{width:min(520px,86vw);height:min(520px,86vw);left:34%;top:28%;border-width:10px;border-color:rgba(242,200,121,.16);box-shadow:0 0 30px rgba(242,200,121,.08),inset 0 0 24px rgba(242,200,121,.06);transform:rotateX(68deg) rotateY(-14deg);animation:ringSpin 40s linear infinite}
.bg3d .r2{width:min(340px,60vw);height:min(340px,60vw);left:-6%;bottom:-4%;border-width:8px;border-color:rgba(124,58,237,.26);box-shadow:0 0 30px rgba(124,58,237,.14);transform:rotateX(62deg) rotateY(18deg);animation:ringSpin 30s linear infinite reverse}
@keyframes fl1{50%{transform:translate3d(30px,-34px,0) scale(1.05)}}
@keyframes fl2{50%{transform:translate3d(-26px,30px,0) scale(.96)}}
@keyframes ringSpin{to{transform:rotateX(68deg) rotateY(346deg)}}
.topic-card,.offer-card,.trust-card,.guide{background:linear-gradient(145deg,rgba(34,37,52,.80),rgba(15,17,25,.86))}
.sched-card{background:linear-gradient(145deg,rgba(27,30,43,.84),rgba(16,18,26,.9))}
@media(max-width:800px){body::before,.feature-panel,.orbit,.bg3d .r1,.bg3d .r2{animation:none}.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,10,15,.94)}.bg3d .o3{display:none}}
@media(prefers-reduced-motion:reduce){.bg3d i{animation:none!important}}
/* ===== 3D look ===== */
.topic-card,.offer-card,.trust-card,.guide,.sched-card,.cta-strip,.stat-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s,border-color .25s;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 20px 40px -16px rgba(0,0,0,.85),0 6px 0 -2px rgba(0,0,0,.35)}
.topic-card:hover,.offer-card:hover,.trust-card:hover,.guide:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);border-color:rgba(242,200,121,.55);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 30px 55px -14px rgba(0,0,0,.9),0 0 0 1px rgba(242,200,121,.18),0 0 34px rgba(197,31,53,.2)}
.topic-icon{box-shadow:0 7px 0 -2px rgba(0,0,0,.4),0 14px 22px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.35);transform:translateZ(30px)}
.zbtn{box-shadow:0 5px 0 rgba(12,2,6,.95),0 12px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.35)}
.zbtn::after{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.11),transparent);pointer-events:none;z-index:-1}
.zbtn:hover{transform:translateY(-2px)}
.zbtn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(12,2,6,.95),0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.chip{box-shadow:0 4px 0 rgba(0,0,0,.45),0 10px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.feature-panel{transform:perspective(1100px) rotateY(-16deg) rotateX(8deg) rotateZ(-2deg);transform-style:preserve-3d;box-shadow:28px 38px 80px rgba(0,0,0,.65),-1px -1px 0 rgba(255,255,255,.14) inset,0 0 60px rgba(197,31,53,.25);animation:panelFloat 7s ease-in-out infinite}
@keyframes panelFloat{50%{transform:perspective(1100px) rotateY(-8deg) rotateX(4deg) rotateZ(-1deg) translateY(-12px)}}
.panel-visual{transform:translateZ(40px);box-shadow:0 14px 28px rgba(0,0,0,.5)}
.orbit{animation:orbitSpin 40s linear infinite}
.orbit::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:#f2c879;box-shadow:0 0 16px 3px rgba(242,200,121,.7)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body::before,.feature-panel,.orbit{animation:none}}
@media(max-width:560px){.topic-card:hover,.offer-card:hover,.trust-card:hover,.guide:hover{transform:none}.feature-panel{transform:perspective(900px) rotateY(-8deg) rotateX(4deg)}}
/* auto-update look */
.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:900;letter-spacing:.8px;padding:3px 8px;border-radius:999px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.badge.hot{background:linear-gradient(90deg,#ff3b57,#ff8a4c);color:#fff}
.badge.new{background:linear-gradient(90deg,#16a34a,#4ade80);color:#04210f}
.badge.pop{background:linear-gradient(90deg,#f2c879,#ffdf9e);color:#4a3200}
.badge.top{background:linear-gradient(90deg,#7c3aed,#b08cff);color:#fff}
.sched-row{transition:background .2s}.sched-row:hover{background:rgba(255,255,255,.03)}
/* trust: data sources */
.source-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;color:#a9abb7;font-size:12.5px}
.source-row span{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#e4e5ec;font-weight:700}
.footer .attrib{max-width:none;margin:0 0 18px;font-size:12px;color:#8a8d9a;line-height:1.7}
@media(max-width:560px){
.hero-trials .zbtn{flex:1 1 calc(50% - 5px);padding:10px 6px;font-size:12px;gap:6px;white-space:normal;line-height:1.25}.hero-trials .zb-dot{display:none}
.hero-actions>.zbtn.lg{width:100%}
.cta-strip .zbtn{width:100%}
.section-head>p{max-width:none}
}
/* ===== v12 PREMIUM: mesh-gradient background, fine grain, gold hairlines, glass cards ===== */
body{background:#07080d}
body::before{background:radial-gradient(1100px 700px at 8% -10%,rgba(225,29,72,.20),transparent 60%),radial-gradient(1000px 700px at 100% 6%,rgba(124,58,237,.22),transparent 60%),radial-gradient(900px 700px at 55% 55%,rgba(30,64,175,.10),transparent 65%),radial-gradient(1100px 600px at 50% 118%,rgba(242,200,121,.13),transparent 62%),linear-gradient(115deg,rgba(242,200,121,.07),transparent 38%),linear-gradient(180deg,#07080d,#0a0b13 50%,#07080d)}
body::after{background-image:url("data:image/svg+xml;utf8,");background-size:180px 180px;opacity:.06;-webkit-mask-image:none;mask-image:none}
.bg3d::before{display:none}
.bg3d .o1,.bg3d .o2,.bg3d .o3{box-shadow:none;opacity:1}
.bg3d .o1{width:min(680px,110vw);height:min(680px,110vw);left:-22%;top:8%;background:radial-gradient(circle,rgba(225,29,72,.26),transparent 68%)}
.bg3d .o2{width:min(600px,100vw);height:min(600px,100vw);right:-20%;top:34%;background:radial-gradient(circle,rgba(124,58,237,.28),transparent 68%)}
.bg3d .o3{width:min(520px,90vw);height:min(520px,90vw);right:8%;bottom:-16%;background:radial-gradient(circle,rgba(242,200,121,.15),transparent 68%)}
.bg3d .r1{border-width:1.5px;border-color:rgba(242,200,121,.40);box-shadow:0 0 0 22px rgba(242,200,121,.045),0 0 0 44px rgba(242,200,121,.028),0 0 44px rgba(242,200,121,.14)}
.bg3d .r2{border-width:1.5px;border-color:rgba(176,140,255,.36);box-shadow:0 0 0 18px rgba(124,58,237,.06),0 0 0 36px rgba(124,58,237,.035),0 0 40px rgba(124,58,237,.16)}
.topic-card,.offer-card,.trust-card,.guide,.sched-card{border:1px solid transparent;background:linear-gradient(145deg,rgba(27,30,45,.9),rgba(12,14,22,.94)) padding-box,linear-gradient(145deg,rgba(242,200,121,.62),rgba(255,255,255,.07) 38%,rgba(124,58,237,.46)) border-box}
.cta-strip{border:1.5px solid transparent;background:linear-gradient(110deg,rgba(92,15,32,.72),rgba(24,8,20,.82)) padding-box,linear-gradient(110deg,rgba(242,200,121,.85),rgba(242,200,121,.15)) border-box}
.cta-strip.e{background:linear-gradient(110deg,rgba(61,19,102,.72),rgba(20,9,38,.84)) padding-box,linear-gradient(110deg,rgba(176,140,255,.85),rgba(242,200,121,.2)) border-box}
.topic-card:hover,.offer-card:hover,.trust-card:hover,.guide:hover{border-color:transparent}
.sched,.offer-section,.guides,.trust-section,.live-rail,.stats{background:rgba(7,8,13,.38)}
.offer-section{background:radial-gradient(ellipse at 10% 50%,rgba(225,29,72,.10),transparent 45%),rgba(7,8,13,.38)}
.live-rail,.stats,.sched,.offer-section,.guides,.trust-section{border-color:rgba(242,200,121,.14)}
.section{position:relative}
.section+.section::before,.section+section::before{content:"";position:absolute;top:0;left:50%;width:min(720px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(242,200,121,.5),transparent)}
.stat{border-color:rgba(242,200,121,.14)}
/* ===== THEME: ROSE (light white + pink canvas, dark cards float on top).
To go back to the dark theme: delete class="theme-rose" from the tag in index.html. ===== */
body.theme-rose{background:#fff7fa}
body.theme-rose::before{background:radial-gradient(1000px 700px at 6% -8%,rgba(255,153,187,.55),transparent 60%),radial-gradient(900px 700px at 100% 4%,rgba(216,180,254,.48),transparent 60%),radial-gradient(900px 700px at 50% 60%,rgba(255,214,228,.6),transparent 65%),radial-gradient(1000px 600px at 50% 118%,rgba(251,207,232,.8),transparent 62%),linear-gradient(180deg,#fffafc,#fff1f6 50%,#fff8fb)}
body.theme-rose::after{background-image:url("data:image/svg+xml;utf8,");opacity:.035}
.theme-rose .bg3d::after{background:linear-gradient(90deg,transparent,#e11d48,transparent);opacity:.35}
.theme-rose .bg3d .o1{background:radial-gradient(circle,rgba(244,114,182,.42),transparent 68%)}
.theme-rose .bg3d .o2{background:radial-gradient(circle,rgba(167,139,250,.38),transparent 68%)}
.theme-rose .bg3d .o3{display:block;background:radial-gradient(circle,rgba(253,164,175,.45),transparent 68%)}
.theme-rose .bg3d .r1{border-color:rgba(225,29,72,.34);box-shadow:0 0 0 22px rgba(225,29,72,.05),0 0 0 44px rgba(225,29,72,.03),0 0 40px rgba(225,29,72,.10)}
.theme-rose .bg3d .r2{border-color:rgba(124,58,237,.32);box-shadow:0 0 0 18px rgba(124,58,237,.05),0 0 0 36px rgba(124,58,237,.03)}
/* dark bands (menu, hero, rail, stats, footer) float over the light canvas */
.theme-rose .topbar{background:rgba(11,9,17,.94)}
.theme-rose .hero{background:radial-gradient(ellipse at 78% 35%,rgba(225,29,72,.26),transparent 46%),radial-gradient(ellipse at 8% 95%,rgba(124,58,237,.2),transparent 42%),linear-gradient(135deg,#0b0911,#1a0b1c 60%,#120a22)}
.theme-rose .ticker,.theme-rose .live-rail,.theme-rose .stats{background:#0e0c15}
.theme-rose .stats{border-radius:0 0 34px 34px;border-bottom:0;box-shadow:0 18px 40px -18px rgba(120,20,60,.45)}
.theme-rose .footer{background:#0b0911;border-radius:34px 34px 0 0;margin-top:30px}
/* light zone */
.theme-rose .sched,.theme-rose .offer-section,.theme-rose .guides,.theme-rose .trust-section{background:rgba(255,255,255,.38);border-color:rgba(225,29,72,.12)}
.theme-rose .section+.section::before{background:linear-gradient(90deg,transparent,rgba(225,29,72,.38),transparent)}
.theme-rose .section-head h2,.theme-rose .grid-title{color:#1f1030}
.theme-rose .section-head p,.theme-rose .empty,.theme-rose .source-row{color:#5e4a6a}
.theme-rose .section-head>p{border-image:linear-gradient(#e11d48,#7c3aed) 1}
.theme-rose .section-kicker{color:#be123c;background:rgba(225,29,72,.07);border-color:rgba(225,29,72,.42)}
.theme-rose .grid-title small{color:#be123c;border-color:rgba(225,29,72,.42)}
.theme-rose .source-row span{background:#fff;border-color:rgba(225,29,72,.22);color:#3b1d4a}
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .trust-card,.theme-rose .guide,.theme-rose .sched-card,.theme-rose .cta-strip,.theme-rose .topic-tools{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 22px 44px -18px rgba(120,20,70,.5),0 6px 0 -3px rgba(120,20,70,.22)}
.theme-rose .topic-card:hover,.theme-rose .offer-card:hover,.theme-rose .trust-card:hover,.theme-rose .guide:hover{box-shadow:0 32px 56px -16px rgba(120,20,70,.6),0 0 0 1px rgba(225,29,72,.25)}
.theme-rose .stat{border-color:rgba(255,255,255,.1)}
.theme-rose .cta-strip{background:linear-gradient(110deg,#4a0d1c,#1b0812) padding-box,linear-gradient(110deg,rgba(242,200,121,.9),rgba(242,200,121,.2)) border-box}
.theme-rose .cta-strip.e{background:linear-gradient(110deg,#30104f,#150826) padding-box,linear-gradient(110deg,rgba(176,140,255,.9),rgba(242,200,121,.25)) border-box}
.theme-rose .review-empty{color:#5e4a6a;border-color:rgba(225,29,72,.38);background:rgba(255,255,255,.55)}
/* ===== ROSE v2: one matching palette. Pink canvas + white frosted cards + ruby/violet buttons + deep plum bands ===== */
body.theme-rose::before{background:radial-gradient(1000px 700px at 6% -8%,rgba(255,128,176,.62),transparent 60%),radial-gradient(900px 700px at 100% 4%,rgba(196,156,255,.55),transparent 60%),radial-gradient(900px 700px at 50% 60%,rgba(255,196,218,.65),transparent 65%),radial-gradient(1000px 600px at 50% 118%,rgba(249,168,212,.85),transparent 62%),linear-gradient(180deg,#fffafc,#ffeef5 50%,#fff6fa)}
.theme-rose .bg3d .o1{background:radial-gradient(circle,rgba(244,90,160,.5),transparent 68%)}
.theme-rose .bg3d .o2{background:radial-gradient(circle,rgba(167,120,250,.45),transparent 68%)}
/* plum bands instead of black: they match the pink */
.theme-rose .topbar{background:rgba(42,10,46,.95)}
.theme-rose .hero{background:radial-gradient(ellipse at 78% 35%,rgba(244,63,130,.38),transparent 46%),radial-gradient(ellipse at 8% 95%,rgba(147,51,234,.32),transparent 42%),linear-gradient(135deg,#2a0a2e,#4a0f45 55%,#2d0b3f)}
.theme-rose .ticker{background:#3a1040}
.theme-rose .live-rail{background:linear-gradient(180deg,#3a1040,#2f0d38)}
.theme-rose .stats{background:linear-gradient(180deg,#2f0d38,#2a0a2e)}
.theme-rose .footer{background:linear-gradient(180deg,#3a1040,#2a0a2e)}
.theme-rose .feature-panel{background:linear-gradient(145deg,#5a1d63,#22082f)}
.theme-rose .chip{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
/* buttons: ruby to violet, glossy, they pop on both pink and plum */
.theme-rose .zbtn{background:linear-gradient(135deg,#e11d48,#9333ea);border-color:rgba(255,255,255,.6);box-shadow:0 5px 0 #6b0f3a,0 14px 24px -6px rgba(159,18,57,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.theme-rose .zbtn.alt{background:linear-gradient(135deg,#7c3aed,#db2777)}
.theme-rose .zbtn::before{background:linear-gradient(135deg,#f43f5e,#a855f7)}
.theme-rose .zbtn:active{box-shadow:0 1px 0 #6b0f3a,0 4px 10px rgba(159,18,57,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.theme-rose .zb-arrow,.theme-rose .zb-dot{color:#fff}
.theme-rose .btn-secondary{border-color:rgba(255,255,255,.5);color:#fff}
.theme-rose .cta-pill{background:linear-gradient(120deg,#be123c,#7c1d6f);border-color:#fff}
.theme-rose .cta-pill.b{background:linear-gradient(120deg,#7c3aed,#be185d)}
.theme-rose .cta-strip{background:linear-gradient(110deg,#e11d48,#9333ea) padding-box,linear-gradient(110deg,#fff,rgba(255,255,255,.3)) border-box}
.theme-rose .cta-strip.e{background:linear-gradient(110deg,#7c3aed,#db2777) padding-box,linear-gradient(110deg,#fff,rgba(255,255,255,.3)) border-box}
.theme-rose .cs-txt b{color:#fff}.theme-rose .cs-txt span{color:rgba(255,255,255,.92)}
.theme-rose .cta-strip .zbtn{background:#fff;color:#9f1239;border-color:#fff;text-shadow:none;box-shadow:0 5px 0 rgba(80,10,50,.55),0 12px 20px -6px rgba(80,10,50,.5)}
.theme-rose .cta-strip .zbtn::before,.theme-rose .cta-strip .zbtn::after{display:none}
.theme-rose .cta-strip .zbtn .zb-arrow,.theme-rose .cta-strip .zbtn .zb-dot{color:#e11d48}
/* white frosted cards with a ruby-violet hairline */
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .trust-card,.theme-rose .guide,.theme-rose .sched-card,.theme-rose .topic-tools,.theme-rose .review-form,.theme-rose .review,.theme-rose .review-empty{--text:#1f1030;--muted:#5e4a6a;--soft:#3b2a48;--gold:#be123c;--line:rgba(225,29,72,.16);color:#1f1030;border:1px solid transparent;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,236,245,.94)) padding-box,linear-gradient(145deg,#e11d48,rgba(255,255,255,.5) 42%,#7c3aed) border-box}
.theme-rose .topic-card h3,.theme-rose .offer-card h3,.theme-rose .guide h3,.theme-rose .trust-card h3{color:#1f1030}
.theme-rose .topic-card p,.theme-rose .topic-card>p,.theme-rose .offer-card p,.theme-rose .guide p,.theme-rose .trust-card p{color:#5e4a6a}
.theme-rose .tc-chips span{color:#9f1239;background:rgba(225,29,72,.08);border-color:rgba(225,29,72,.25)}
.theme-rose .tc-note{color:#6b5a73}
.theme-rose .next,.theme-rose .guide .more{color:#be123c}
.theme-rose .topic-icon{background:linear-gradient(135deg,#ffe0eb,#efe2ff);border-color:rgba(225,29,72,.2);box-shadow:0 7px 0 -2px rgba(159,18,57,.25),0 12px 18px rgba(159,18,57,.25),inset 0 2px 0 #fff}
.theme-rose .topic-search,.theme-rose .field input,.theme-rose .field textarea{background:#fff;color:#1f1030;border-color:rgba(225,29,72,.28)}
.theme-rose .filter-btn,.theme-rose .sched-tab{background:#fff;border-color:rgba(225,29,72,.22);color:#5e4a6a}
.theme-rose .filter-btn.active,.theme-rose .filter-btn:hover,.theme-rose .sched-tab.on{color:#fff;border-color:#fff;background:linear-gradient(135deg,#e11d48,#9333ea);box-shadow:0 6px 14px -4px rgba(159,18,80,.55)}
.theme-rose .sched-tab:hover:not(.on){border-color:#e11d48;color:#9f1239}
.theme-rose .results-count,.theme-rose .sched-match .vs,.theme-rose .sched-match small,.theme-rose .sched-foot span,.theme-rose .review-top small,.theme-rose .rating-meta{color:#7a6a84}
.theme-rose .field span,.theme-rose .form-msg,.theme-rose .review p{color:#3b2a48}
.theme-rose .sched-when em.now{color:#e11d48}
.theme-rose .star-pick label{color:#d9c3d0}
.theme-rose .rating-box{--text:#1f1030;--muted:#5e4a6a;color:#1f1030;border:1px solid transparent;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,236,245,.94)) padding-box,linear-gradient(145deg,#e11d48,rgba(255,255,255,.5) 42%,#7c3aed) border-box;box-shadow:0 18px 36px -16px rgba(159,18,80,.4)}
.theme-rose .stars{color:#f59e0b}
.theme-rose .sched-foot .zbtn .zb-arrow,.theme-rose .zbtn .zb-arrow{color:#fff}
.theme-rose .cta-strip .zbtn .zb-arrow{color:#e11d48}
.theme-rose .review-empty{border:1px dashed rgba(225,29,72,.4);background:rgba(255,255,255,.7)}
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .trust-card,.theme-rose .guide,.theme-rose .sched-card,.theme-rose .topic-tools{box-shadow:0 1px 0 #fff inset,0 22px 44px -18px rgba(159,18,80,.45),0 5px 0 -2px rgba(159,18,80,.18)}
/* ===== v13 FINAL PREMIUM (phone · tablet · laptop · PC) =====
Idea: rich pink-lavender-peach canvas (the part you liked), deep plum bands for hero/menu/footer,
and every card gets its OWN accent colour (top bar, icon tile, chips, glow) so the page is colourful, not flat.
Sports sections get a warm ruby tint, Entertainment sections get a violet tint. */
body.theme-rose{background:#fff3f8;--a:#e11d48;--b:#9333ea}
body.theme-rose::before{background:
radial-gradient(1100px 760px at 4% -6%,rgba(255,120,170,.70),transparent 60%),
radial-gradient(980px 760px at 102% 6%,rgba(176,132,255,.62),transparent 60%),
radial-gradient(900px 700px at 8% 52%,rgba(255,176,150,.42),transparent 62%),
radial-gradient(900px 700px at 96% 62%,rgba(150,170,255,.40),transparent 64%),
radial-gradient(1100px 640px at 50% 120%,rgba(249,150,210,.85),transparent 62%),
linear-gradient(180deg,#fff7fb,#ffe9f3 38%,#f4e9ff 70%,#ffeef6)}
.container{width:min(1240px,calc(100% - 40px))}
/* hero: deeper, richer, more cinematic */
.theme-rose .hero{background:
radial-gradient(ellipse at 82% 28%,rgba(255,70,140,.50),transparent 46%),
radial-gradient(ellipse at 10% 100%,rgba(147,51,234,.50),transparent 46%),
radial-gradient(ellipse at 50% -10%,rgba(242,200,121,.16),transparent 50%),
linear-gradient(135deg,#240828,#4b0f47 52%,#2a0b45)}
.theme-rose .hero-copy{color:#e9dcf2}
.theme-rose .trust-strip{color:#f0e6f6}
.theme-rose .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(242,200,121,.55)}
.theme-rose h1 span{background:linear-gradient(90deg,#ff7aa2,#ffb0d0 45%,#c9a8ff);-webkit-background-clip:text;background-clip:text}
.theme-rose .btn-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.theme-rose .ticker{background:linear-gradient(90deg,#3a1040,#4b1250,#3a1040);color:#f6e7ff;border-color:rgba(242,200,121,.25)}
.theme-rose .live-rail{background:linear-gradient(180deg,#3a1040,#2a0a2e)}
.theme-rose .rail-head p{color:#d9c7e6}
/* section bands: warm for sports, violet for entertainment, so each area has its own mood */
.theme-rose .section.grp{position:relative;padding:44px 0 34px}
.theme-rose #sports{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,120,150,.20) 14%,rgba(255,160,130,.14) 86%,rgba(255,255,255,0))}
.theme-rose #entertainment-top{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(170,120,255,.22) 14%,rgba(236,120,200,.16) 86%,rgba(255,255,255,0))}
.theme-rose .grid-title{font-size:clamp(22px,3vw,30px);margin:6px 0 16px;color:#2a0f3a}
.theme-rose .grid-title small{background:#fff;color:#be123c;border:1px solid rgba(225,29,72,.35);box-shadow:0 4px 10px -4px rgba(159,18,80,.35)}
.theme-rose .section-head h2{color:#2a0f3a}
.theme-rose .section-head>p{color:#4d3a5c}
/* cards: each one has its own accent pair (--a / --b) */
.theme-rose .topic-grid>.topic-card:nth-child(6n+1){--a:#e11d48;--b:#fb7185}
.theme-rose .topic-grid>.topic-card:nth-child(6n+2){--a:#7c3aed;--b:#c084fc}
.theme-rose .topic-grid>.topic-card:nth-child(6n+3){--a:#ea580c;--b:#fbbf24}
.theme-rose .topic-grid>.topic-card:nth-child(6n+4){--a:#2563eb;--b:#38bdf8}
.theme-rose .topic-grid>.topic-card:nth-child(6n+5){--a:#db2777;--b:#a855f7}
.theme-rose .topic-grid>.topic-card:nth-child(6n+6){--a:#059669;--b:#2dd4bf}
.theme-rose .offer-card:nth-child(3n+1),.theme-rose .guide:nth-child(3n+1),.theme-rose .trust-card:nth-child(3n+1){--a:#e11d48;--b:#fb7185}
.theme-rose .offer-card:nth-child(3n+2),.theme-rose .guide:nth-child(3n+2),.theme-rose .trust-card:nth-child(3n+2){--a:#7c3aed;--b:#c084fc}
.theme-rose .offer-card:nth-child(3n+3),.theme-rose .guide:nth-child(3n+3),.theme-rose .trust-card:nth-child(3n+3){--a:#ea580c;--b:#fbbf24}
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .guide,.theme-rose .trust-card{
background:linear-gradient(160deg,#ffffff 0%,color-mix(in srgb,var(--a) 7%,#fff) 100%) padding-box,linear-gradient(145deg,var(--a),rgba(255,255,255,.65) 45%,var(--b)) border-box;
border:1.5px solid transparent;
box-shadow:0 1px 0 #fff inset,0 24px 46px -20px color-mix(in srgb,var(--a) 70%,#3b0a2e),0 6px 0 -3px color-mix(in srgb,var(--a) 35%,transparent)}
.theme-rose .topic-card:hover,.theme-rose .offer-card:hover,.theme-rose .guide:hover,.theme-rose .trust-card:hover{
box-shadow:0 34px 60px -18px color-mix(in srgb,var(--a) 80%,#3b0a2e),0 0 0 1px color-mix(in srgb,var(--a) 40%,transparent)}
/* coloured top bar + soft coloured glow */
.theme-rose .topic-card::before{width:190px;height:190px;right:-60px;top:-80px;background:radial-gradient(circle,color-mix(in srgb,var(--b) 50%,transparent),transparent 70%)}
.theme-rose .topic-card::after,.theme-rose .offer-card::after,.theme-rose .guide::after,.theme-rose .trust-card::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a),var(--b));pointer-events:none}
.theme-rose .offer-card,.theme-rose .guide{position:relative;overflow:hidden}
.theme-rose .topic-icon{background:linear-gradient(135deg,color-mix(in srgb,var(--a) 20%,#fff),color-mix(in srgb,var(--b) 28%,#fff));border-color:color-mix(in srgb,var(--a) 35%,transparent);
box-shadow:0 7px 0 -2px color-mix(in srgb,var(--a) 30%,transparent),0 14px 20px -4px color-mix(in srgb,var(--a) 45%,transparent),inset 0 2px 0 #fff}
.theme-rose .topic-card h3,.theme-rose .offer-card h3,.theme-rose .guide h3,.theme-rose .trust-card h3{color:#2a0f3a}
.theme-rose .topic-card>p,.theme-rose .offer-card p,.theme-rose .guide p,.theme-rose .trust-card p{color:#4d3a5c}
.theme-rose .tc-chips span{color:color-mix(in srgb,var(--a) 85%,#2a0f3a);background:color-mix(in srgb,var(--a) 11%,#fff);border-color:color-mix(in srgb,var(--a) 32%,transparent)}
.theme-rose .tc-note{color:#5b476a}
.theme-rose .next{color:color-mix(in srgb,var(--a) 88%,#2a0f3a);font-weight:800}
.theme-rose .live-tag{color:color-mix(in srgb,var(--a) 88%,#2a0f3a)}
.theme-rose .live-tag:before{background:var(--a);box-shadow:0 0 10px var(--a)}
.theme-rose .offer-label,.theme-rose .guide-label{color:var(--a)}
.theme-rose .guide .more{color:var(--a)}
.theme-rose .trust-symbol{background:color-mix(in srgb,var(--a) 14%,#fff);border-color:color-mix(in srgb,var(--a) 35%,transparent)}
/* buttons inside cards follow the card colour */
.theme-rose .topic-card .zbtn{background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--b) 70%,#7c3aed));box-shadow:0 5px 0 color-mix(in srgb,var(--a) 55%,#1a0420),0 14px 22px -8px color-mix(in srgb,var(--a) 70%,#000),inset 0 1px 0 rgba(255,255,255,.4)}
.theme-rose .topic-card .zbtn::before{background:linear-gradient(135deg,var(--b),var(--a))}
/* tools, schedule and review boxes: same family */
.theme-rose .topic-tools{background:linear-gradient(135deg,#2a0a2e,#4b0f47);border:1.5px solid rgba(242,200,121,.6)}
.theme-rose .topic-tools .results-count{color:#e3d2ee}
.theme-rose .topic-tools .filter-btn{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28)}
.theme-rose .topic-tools .filter-btn.active,.theme-rose .topic-tools .filter-btn:hover{background:linear-gradient(135deg,#e11d48,#9333ea);border-color:#fff}
.theme-rose .topic-tools .topic-search{background:#fff;color:#2a0f3a}
.theme-rose .sched-card{border:1.5px solid transparent}
.theme-rose .sched-league{color:#be123c}
.theme-rose .sched-match{color:#2a0f3a}.theme-rose .sched-when{color:#3b2a48}
.theme-rose .sched-row{border-color:rgba(225,29,72,.14)}.theme-rose .sched-row:hover{background:rgba(225,29,72,.05)}
.theme-rose .sched-foot{border-color:rgba(225,29,72,.14)}
.theme-rose .spotlight{background:linear-gradient(135deg,#4b0f47,#2a0b45);border-color:rgba(242,200,121,.5)}
.theme-rose .guides,.theme-rose .offer-section,.theme-rose .trust-section,.theme-rose .sched{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.48),rgba(255,255,255,.22))}
.theme-rose .reader-note{background:rgba(255,255,255,.7);color:#3b2a48}
.theme-rose .footer{background:linear-gradient(180deg,#3a1040,#1f0724)}
/* ---------- tablet ---------- */
@media(min-width:801px) and (max-width:1100px){.theme-rose .topic-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- big screens ---------- */
@media(min-width:1280px){
.container{width:min(1280px,calc(100% - 64px))}
.theme-rose .topic-grid{gap:20px}.theme-rose .topic-card{padding:26px}
.theme-rose .hero{padding:104px 0 94px}
}
/* ---------- phone ---------- */
@media(max-width:560px){
.theme-rose .section.grp{padding:30px 0 22px}
.theme-rose .topic-card{padding:19px}
.theme-rose .topic-grid{gap:14px}
.theme-rose .grid-title small{display:none}
}
/* ===== v14: WHITE + SOFT PINK canvas (one matching palette) =====
Background = white and light pink only. Cards, buttons and accents stay in the ruby / pink / plum family so everything matches. */
body.theme-rose{background:#fff}
body.theme-rose::before{background:
radial-gradient(900px 620px at 0% 0%,rgba(255,200,222,.55),transparent 62%),
radial-gradient(900px 640px at 100% 22%,rgba(255,214,232,.60),transparent 62%),
radial-gradient(900px 640px at 0% 62%,rgba(255,220,236,.55),transparent 64%),
radial-gradient(1000px 640px at 100% 100%,rgba(255,196,222,.65),transparent 62%),
linear-gradient(180deg,#ffffff,#fff4f9 35%,#ffffff 62%,#fff1f7)}
body.theme-rose::after{opacity:.02}
.theme-rose .bg3d .o1{background:radial-gradient(circle,rgba(255,150,195,.30),transparent 68%)}
.theme-rose .bg3d .o2{background:radial-gradient(circle,rgba(255,175,210,.30),transparent 68%)}
.theme-rose .bg3d .o3{background:radial-gradient(circle,rgba(255,190,215,.35),transparent 68%)}
.theme-rose .bg3d .r1{border-color:rgba(225,29,72,.20);box-shadow:0 0 0 22px rgba(225,29,72,.03),0 0 0 44px rgba(225,29,72,.02)}
.theme-rose .bg3d .r2{border-color:rgba(190,24,93,.18);box-shadow:0 0 0 18px rgba(190,24,93,.03),0 0 0 36px rgba(190,24,93,.02)}
/* no coloured bands: sections just float on the white/pink canvas, with a very light pink wash between */
.theme-rose #sports,.theme-rose #entertainment-top{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,228,240,.55) 16%,rgba(255,228,240,.55) 84%,rgba(255,255,255,0))}
.theme-rose .guides,.theme-rose .offer-section,.theme-rose .trust-section,.theme-rose .sched{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,236,245,.55),rgba(255,255,255,.55));border-color:rgba(225,29,72,.10)}
.theme-rose .section+.section::before{background:linear-gradient(90deg,transparent,rgba(225,29,72,.30),transparent)}
/* accents: ruby, rose, pink, plum, magenta, berry (all match the pink canvas and the plum bands) */
.theme-rose .topic-grid>.topic-card:nth-child(6n+1){--a:#e11d48;--b:#fb7185}
.theme-rose .topic-grid>.topic-card:nth-child(6n+2){--a:#9333ea;--b:#d08bff}
.theme-rose .topic-grid>.topic-card:nth-child(6n+3){--a:#db2777;--b:#f9a8d4}
.theme-rose .topic-grid>.topic-card:nth-child(6n+4){--a:#be123c;--b:#f43f5e}
.theme-rose .topic-grid>.topic-card:nth-child(6n+5){--a:#a21caf;--b:#e879f9}
.theme-rose .topic-grid>.topic-card:nth-child(6n+6){--a:#c026d3;--b:#fb7185}
.theme-rose .offer-card:nth-child(3n+1),.theme-rose .guide:nth-child(3n+1),.theme-rose .trust-card:nth-child(3n+1){--a:#e11d48;--b:#fb7185}
.theme-rose .offer-card:nth-child(3n+2),.theme-rose .guide:nth-child(3n+2),.theme-rose .trust-card:nth-child(3n+2){--a:#9333ea;--b:#d08bff}
.theme-rose .offer-card:nth-child(3n+3),.theme-rose .guide:nth-child(3n+3),.theme-rose .trust-card:nth-child(3n+3){--a:#db2777;--b:#f9a8d4}
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .guide,.theme-rose .trust-card{background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--a) 5%,#fff) 100%) padding-box,linear-gradient(145deg,var(--a),rgba(255,255,255,.7) 45%,var(--b)) border-box;box-shadow:0 1px 0 #fff inset,0 22px 40px -22px color-mix(in srgb,var(--a) 60%,#3b0a2e),0 5px 0 -3px color-mix(in srgb,var(--a) 28%,transparent)}
.theme-rose .grid-title small{color:#be123c}
@media(max-width:560px){.theme-rose #sports,.theme-rose #entertainment-top{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,228,240,.5) 10%,rgba(255,228,240,.5) 90%,rgba(255,255,255,0))}}
/* ===================================================================
v21 FINAL — keeps the v14 colour look you liked (dark navy header/hero, white+pink canvas,
colourful per-card accents) and adds: better fonts, clearer text hierarchy, and 3D shine buttons.
=================================================================== */
:root{--font:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali",sans-serif;--serif:"Fraunces",Georgia,"Times New Roman",serif}
body{font-family:var(--font);font-size:15.5px;line-height:1.6;text-rendering:optimizeLegibility}
h1,h2,h3,.grid-title,.panel-title,.brand{font-family:var(--font)}
/* ---------- text: size, weight, rhythm (colours stay as in v14) ---------- */
h1{font-weight:800;letter-spacing:-2px;line-height:1.04}
h1 span{font-family:var(--serif);font-style:italic;font-weight:700;letter-spacing:-1px;padding-right:.06em}
.theme-rose .section-head h2{font-weight:800;font-size:clamp(30px,4.4vw,46px);line-height:1.1;letter-spacing:-1.3px;
background:linear-gradient(95deg,#2a0f3a 15%,#6d28d9 60%,#be123c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.theme-rose .section-head>p{font-size:16.5px;line-height:1.7;font-weight:500;color:#4d3a5c}
.theme-rose .grid-title{font-size:clamp(22px,2.6vw,27px);font-weight:800;letter-spacing:-.6px}
.section-kicker{font-weight:800;letter-spacing:1.6px;font-size:11.5px}
.eyebrow{font-weight:800;letter-spacing:2px}
.hero-copy{font-size:17px;line-height:1.75;font-weight:500}
.hero-copy b{font-weight:800}
.rail-head h2{font-weight:800;letter-spacing:-.8px}
.rail-head p{font-size:15.5px;font-weight:500}
.panel-title{font-weight:800;letter-spacing:-.5px}
.stat strong{font-weight:800;letter-spacing:-.8px}
.theme-rose .topic-card h3,.theme-rose .offer-card h3,.theme-rose .guide h3,.theme-rose .trust-card h3{font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.25}
.theme-rose .topic-card>p,.theme-rose .offer-card p,.theme-rose .guide p,.theme-rose .trust-card p{font-size:15px;line-height:1.65;font-weight:500}
.theme-rose .tc-chips span{font-size:11.5px;font-weight:700;letter-spacing:.2px}
.theme-rose .tc-note{font-size:13px;font-weight:500}
.live-tag{font-weight:800;letter-spacing:1.4px;font-size:11px}
.offer-label,.guide-label{font-weight:800;letter-spacing:1.4px}
.sched-match{font-weight:800;letter-spacing:-.3px}.sched-league{font-weight:800;letter-spacing:1px}.sched-when{font-weight:600}
.footer h4{font-weight:800;letter-spacing:.4px}
/* "Next:" / "Top pick:" → neat highlighted line in the card's own colour */
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .guide,.theme-rose .trust-card{--accent-a:var(--a,#e11d48);--accent-b:var(--b,#fb7185)}
.theme-rose .next{margin-top:12px;padding:9px 12px 9px 13px;border-radius:10px;border-left:3px solid var(--accent-a);
background:linear-gradient(90deg,color-mix(in srgb,var(--accent-a) 11%,transparent),transparent);
color:color-mix(in srgb,var(--accent-a) 88%,#2a0f3a);font-size:13px;font-weight:700;line-height:1.5}
.theme-rose .topic-card:hover h3{color:color-mix(in srgb,var(--accent-a) 85%,#2a0f3a)}
.theme-rose .spotlight q{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.08em;line-height:1.55}
/* ===================================================================
3D SHINE BUTTONS — thick edge · glossy top · travelling shine · glowing pulse
Each card's button takes that card's own colour. Default = rose, .alt = violet.
=================================================================== */
@keyframes zshine{0%{background-position:-60% 0,0 0}38%,100%{background-position:170% 0,0 0}}
@keyframes zpulse{
0%,100%{box-shadow:0 7px 0 var(--depth),0 18px 28px -10px var(--glowc),0 0 0 0 transparent,inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.30)}
50%{box-shadow:0 7px 0 var(--depth),0 18px 28px -10px var(--glowc),0 0 0 7px var(--ring),0 0 26px 3px var(--glowc),inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.30)}}
.theme-rose .zbtn{--c1:#ff5d7e;--c2:#e11d48;--c3:#b3123a;--depth:#7a0c2c;--glowc:rgba(190,18,60,.6);--ring:rgba(244,63,94,.20);
border:1.5px solid #f6d996;border-radius:15px;font-weight:800;letter-spacing:.3px;overflow:hidden;color:#fff;
background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 48%,var(--c3) 100%);text-shadow:0 1px 2px rgba(0,0,0,.5);
animation:zpulse 2.6s ease-in-out infinite;transition:transform .16s ease,filter .16s ease}
.theme-rose .zbtn.alt{--c1:#a98bff;--c2:#7c3aed;--c3:#4c1d95;--depth:#34107a;--glowc:rgba(91,33,182,.6);--ring:rgba(139,92,246,.22)}
/* per-card colour */
.theme-rose .topic-card .zbtn,.theme-rose .offer-card .zbtn,.theme-rose .guide .zbtn,.theme-rose .sched-foot .zbtn{
--c1:color-mix(in srgb,var(--b,#fb7185) 62%,#fff);--c2:var(--a,#e11d48);--c3:color-mix(in srgb,var(--a,#e11d48) 72%,#000);
--depth:color-mix(in srgb,var(--a,#e11d48) 50%,#000);--glowc:color-mix(in srgb,var(--a,#e11d48) 62%,transparent);--ring:color-mix(in srgb,var(--a,#e11d48) 24%,transparent);
background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 48%,var(--c3) 100%)}
.theme-rose .zbtn::before{display:none}
.theme-rose .zbtn::after{content:"";position:absolute;inset:0;z-index:0;display:block;border-radius:inherit;pointer-events:none;box-shadow:none;opacity:1;
background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.62) 50%,transparent 64%),linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 52%);
background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:-60% 0,0 0;animation:zshine 3.4s ease-in-out infinite}
.theme-rose .zbtn>*{position:relative;z-index:1}
.theme-rose .zbtn:hover{transform:translateY(-3px);filter:brightness(1.07) saturate(1.08)}
.theme-rose .zbtn:active{transform:translateY(5px);animation:none;box-shadow:0 2px 0 var(--depth),0 6px 12px -4px var(--glowc),inset 0 2px 6px rgba(0,0,0,.4)}
.theme-rose .zb-dot{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:ping 1.6s ease-out infinite}
.theme-rose .zbtn .zb-arrow,.theme-rose .sched-foot .zbtn .zb-arrow{color:#fff1c2;text-shadow:0 0 8px rgba(255,225,150,.8)}
/* white 3D buttons on the coloured free-trial strips */
.theme-rose .cta-strip .zbtn{background:linear-gradient(180deg,#fff,#ffe9f0);color:#be123c;border-color:#fff;text-shadow:none;animation:none;
box-shadow:0 7px 0 rgba(70,10,50,.45),0 16px 24px -10px rgba(40,5,40,.6),inset 0 1.5px 0 #fff,inset 0 -3px 6px rgba(190,18,60,.18)}
.theme-rose .cta-strip.e .zbtn{background:linear-gradient(180deg,#fff,#efe7ff);color:#5b21b6}
.theme-rose .cta-strip .zbtn::after{background:linear-gradient(112deg,transparent 36%,rgba(225,29,72,.20) 50%,transparent 64%);background-size:260% 100%;background-repeat:no-repeat;background-position:-60% 0;animation:zshine 3.4s ease-in-out infinite}
.theme-rose .cta-strip .zbtn .zb-arrow{color:currentColor;text-shadow:none}.theme-rose .cta-strip .zbtn .zb-dot{background:#e11d48;animation:none}
/* outline button */
.theme-rose .btn-secondary{border-radius:15px;font-weight:800;transition:transform .16s}
.theme-rose .btn-secondary:hover{transform:translateY(-3px)}.theme-rose .btn-secondary:active{transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){.theme-rose .zbtn,.theme-rose .zbtn::after{animation:none!important}}
@media(max-width:560px){h1{letter-spacing:-1.4px}.theme-rose .section-head h2{letter-spacing:-.9px}.hero-copy{font-size:16px}}
/* ===== v14 MATCH-SCREENSHOT THEME =====
White base (like your picture) · navy bars · every card has its own accent colour
· solid 3D buttons in the card's colour (no gold edge, no halo, no colour-blink).
To remove this block: delete everything from this comment to the end of the file. */
body.theme-rose{--a:#cf1f37;--b:#ef4a5f;--navy:#0a1128;--navy-2:#111a3b;--navy-3:#18245a;--ink-h:#12183a;--ink-p:#566078;--ink-n:#6b7389;background:#fff}
/* ---- white base: very light lavender / pink only in the corners ---- */
body.theme-rose::before{background:
radial-gradient(900px 620px at 2% -6%,rgba(255,170,200,.34),transparent 62%),
radial-gradient(860px 620px at 102% 4%,rgba(196,170,255,.32),transparent 62%),
radial-gradient(900px 600px at 50% 118%,rgba(240,200,255,.34),transparent 62%),
linear-gradient(180deg,#ffffff,#fcf9ff 45%,#fffafd 75%,#ffffff)}
.theme-rose .bg3d{opacity:.45}
.theme-rose #sports{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,140,170,.07) 14%,rgba(255,170,150,.05) 86%,rgba(255,255,255,0))}
.theme-rose #entertainment-top{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(170,130,255,.09) 14%,rgba(236,140,210,.06) 86%,rgba(255,255,255,0))}
.theme-rose .guides,.theme-rose .offer-section,.theme-rose .trust-section,.theme-rose .sched{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(250,246,255,.7),rgba(255,255,255,.5))}
.theme-rose .grid-title{color:var(--ink-h)}
.theme-rose .section-head>p{color:var(--ink-p)}
/* ---- navy bars (menu, hero, ticker, rail, stats, footer) ---- */
.theme-rose .topbar{background:rgba(10,17,40,.96);border-bottom:1px solid rgba(255,255,255,.08)}
.theme-rose .navlinks{color:#8fb0ff}
.theme-rose .navlinks a:hover{color:#fff}
.theme-rose .brand{color:#fff}
.theme-rose .brand em{color:#ff5a3c}
.theme-rose .hero{background:
radial-gradient(ellipse at 82% 28%,rgba(236,72,153,.34),transparent 46%),
radial-gradient(ellipse at 10% 100%,rgba(99,102,241,.40),transparent 46%),
linear-gradient(135deg,#0a1128,#141d4a 55%,#1d1555)}
.theme-rose .hero-copy{color:#dfe5fa}
.theme-rose .trust-strip{color:#e6ebfb}
.theme-rose .feature-panel{background:linear-gradient(145deg,#26357a,#0d1431)}
.theme-rose .ticker{background:linear-gradient(90deg,#0f1838,#16215a,#0f1838);color:#e8eeff;border-color:rgba(255,255,255,.1)}
.theme-rose .live-rail{background:linear-gradient(180deg,#101a3c,#0a1128)}
.theme-rose .rail-head p{color:#c3cdee}
.theme-rose .stats{background:linear-gradient(180deg,#0a1128,#080e22)}
.theme-rose .footer{background:linear-gradient(180deg,#0f1838,#060a1a)}
.theme-rose .spotlight{background:linear-gradient(135deg,#16225a,#0d1431);border-color:rgba(255,255,255,.22)}
.theme-rose .topic-tools{background:linear-gradient(135deg,#0d1636,#18245a);border:1.5px solid rgba(143,176,255,.4)}
.theme-rose .topic-tools .results-count{color:#c9d3f2}
/* ---- accent colour of every card: --a main, --b light ---- */
.theme-rose .topic-grid>.topic-card:nth-child(6n+1){--a:#cf1f37;--b:#ef4a5f}
.theme-rose .topic-grid>.topic-card:nth-child(6n+2){--a:#4f46e5;--b:#7c7cf7}
.theme-rose .topic-grid>.topic-card:nth-child(6n+3){--a:#c81e78;--b:#ec4899}
.theme-rose .topic-grid>.topic-card:nth-child(6n+4){--a:#c81e3a;--b:#f05a68}
.theme-rose .topic-grid>.topic-card:nth-child(6n+5){--a:#8b4fe0;--b:#b48cf5}
.theme-rose .topic-grid>.topic-card:nth-child(6n+6){--a:#c248c2;--b:#e57be5}
.theme-rose .offer-card:nth-child(3n+1),.theme-rose .guide:nth-child(3n+1),.theme-rose .trust-card:nth-child(3n+1){--a:#cf1f37;--b:#ef4a5f}
.theme-rose .offer-card:nth-child(3n+2),.theme-rose .guide:nth-child(3n+2),.theme-rose .trust-card:nth-child(3n+2){--a:#4f46e5;--b:#7c7cf7}
.theme-rose .offer-card:nth-child(3n+3),.theme-rose .guide:nth-child(3n+3),.theme-rose .trust-card:nth-child(3n+3){--a:#c81e78;--b:#ec4899}
/* ---- cards: white, soft accent tint, accent top bar, soft shadow ---- */
.theme-rose .topic-card,.theme-rose .offer-card,.theme-rose .guide,.theme-rose .trust-card{
--ink:color-mix(in srgb,var(--a) 74%,#1a0f35);
border-radius:18px;
background:linear-gradient(160deg,#ffffff 0%,color-mix(in srgb,var(--a) 6%,#fff) 100%) padding-box,linear-gradient(145deg,color-mix(in srgb,var(--a) 55%,#fff),rgba(255,255,255,.8) 50%,color-mix(in srgb,var(--b) 55%,#fff)) border-box;
border:1.5px solid transparent;
box-shadow:0 1px 0 #fff inset,0 18px 36px -22px color-mix(in srgb,var(--a) 60%,#2a1a55),0 5px 0 -3px color-mix(in srgb,var(--a) 22%,transparent)}
.theme-rose .topic-card:hover,.theme-rose .offer-card:hover,.theme-rose .guide:hover,.theme-rose .trust-card:hover{
box-shadow:0 26px 48px -20px color-mix(in srgb,var(--a) 65%,#2a1a55),0 0 0 1px color-mix(in srgb,var(--a) 28%,transparent)}
.theme-rose .topic-card::after,.theme-rose .offer-card::after,.theme-rose .guide::after,.theme-rose .trust-card::after{height:4px;background:linear-gradient(90deg,var(--a),var(--b))}
.theme-rose .topic-card::before{background:radial-gradient(circle,color-mix(in srgb,var(--b) 32%,transparent),transparent 70%)}
.theme-rose .topic-card h3,.theme-rose .offer-card h3,.theme-rose .guide h3,.theme-rose .trust-card h3{color:var(--ink-h)}
.theme-rose .topic-card>p,.theme-rose .offer-card p,.theme-rose .guide p,.theme-rose .trust-card p{color:var(--ink-p)}
.theme-rose .tc-note{color:var(--ink-n)}
.theme-rose .tc-chips span{color:var(--ink);background:rgba(255,255,255,.75);border:1px solid color-mix(in srgb,var(--a) 28%,#fff)}
.theme-rose .next,.theme-rose .live-tag,.theme-rose .offer-label,.theme-rose .guide-label,.theme-rose .guide .more{color:var(--ink)}
.theme-rose .live-tag:before{background:var(--a);box-shadow:0 0 8px color-mix(in srgb,var(--a) 70%,transparent)}
.theme-rose .topic-icon{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--b) 18%,#fff));border:1px solid color-mix(in srgb,var(--a) 22%,#fff);box-shadow:0 6px 0 -2px color-mix(in srgb,var(--a) 18%,transparent),0 12px 18px -6px color-mix(in srgb,var(--a) 35%,transparent),inset 0 2px 0 #fff}
.theme-rose .trust-symbol{background:color-mix(in srgb,var(--a) 10%,#fff);border-color:color-mix(in srgb,var(--a) 28%,#fff)}
/* ---- BUTTONS: solid colour, darker bottom edge (3D), no gold border, no halo, no colour-blink ---- */
body.theme-rose .zbtn{
--edge:color-mix(in srgb,var(--a) 50%,#0b0820);
border:1.5px solid transparent;background:linear-gradient(135deg,var(--b),var(--a)) border-box;background-origin:border-box;
color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.28);animation:none;overflow:hidden;
box-shadow:0 4px 0 var(--edge),0 12px 20px -8px color-mix(in srgb,var(--a) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.38)}
body.theme-rose .zbtn::before{display:none}
body.theme-rose .zbtn::after{inset:1px 1px 55% 1px;box-shadow:none;opacity:1;animation:none;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);background-size:100% 100%;background-position:0 0}
body.theme-rose .zbtn:hover{filter:brightness(1.06);transform:translateY(-2px)}
body.theme-rose .zbtn:active{animation:none;transform:translateY(3px);box-shadow:0 1px 0 var(--edge),0 4px 10px -4px color-mix(in srgb,var(--a) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
body.theme-rose .zbtn .zb-dot{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);opacity:.95}
body.theme-rose .zbtn .zb-arrow,body.theme-rose .zbtn .zbtn-arrow{color:#fff}
/* menu + hero buttons (outside cards) */
body.theme-rose .topbar .zbtn,body.theme-rose .hero .zbtn{--a:#e11d48;--b:#f0527a}
body.theme-rose .hero .zbtn.alt{--a:#6d4af0;--b:#9a85ff}
body.theme-rose .sched-foot .zbtn{--a:#cf1f37;--b:#ef4a5f}
/* card buttons take the card's colour (re-asserted so older rules can't win) */
.theme-rose .topic-card .zbtn{background:linear-gradient(135deg,var(--b),var(--a)) border-box;box-shadow:0 4px 0 var(--edge),0 12px 20px -8px color-mix(in srgb,var(--a) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.38)}
.theme-rose .topic-card .zbtn:active{box-shadow:0 1px 0 var(--edge),0 4px 10px -4px color-mix(in srgb,var(--a) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
/* keep the white free-trial strip buttons as they are */
body.theme-rose .cta-strip .zbtn{animation:none}
/* ===== v15 CLEAR TEXT + DARK MODE =====
1) sharper, higher-contrast text (spacing fixed, darker ink, stronger weights)
2) deeper, more solid buttons
3) DARK MODE: toggle button (🌙/☀️) in the header. Default = light. To make dark the default, see index.html: data-default-theme. */
/* ---------- 1. text clarity (light mode) ---------- */
body.theme-rose{--ink-h:#0c1230;--ink-p:#3c455f;--ink-n:#4a5470;word-spacing:.06em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
.theme-rose .topic-card>p,.theme-rose .offer-card p,.theme-rose .guide p,.theme-rose .trust-card p{font-weight:500}
.theme-rose .tc-note{font-weight:600}
.theme-rose .tc-chips span{font-weight:700;letter-spacing:.1px}
.theme-rose .topic-card h3,.theme-rose .offer-card h3,.theme-rose .guide h3,.theme-rose .trust-card h3{letter-spacing:-.2px}
/* tight negative spacing made small text run together: relax it everywhere it is small */
.chip,.chip span,.chip b,.trust-strip span,.rail-head h2,.rail-head p,.stat strong,.stat span,.panel-title,.panel-sub,.panel-tags span,.ticker,.zbtn,.btn-secondary,.eyebrow,.section-kicker,.hero-copy,.sched-match,.sched-when,.footer h4{letter-spacing:.2px}
.rail-head h2,.stat strong,.panel-title{letter-spacing:-.1px}
.chip b{letter-spacing:.5px}
.zbtn{letter-spacing:.3px;word-spacing:.08em}
.hero-copy,.trust-strip,.stat span,.rail-head p,.panel-sub{color:#f1f4ff}
.theme-rose .navlinks{color:#a9c1ff;font-weight:700}
.theme-rose .stat span{color:#d5def7}
.theme-rose .ticker{color:#fff}
.chip{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.chip b{color:#ffd98a}
/* ---------- 2. buttons: deeper colour, clearer label ---------- */
body.theme-rose .zbtn{background:linear-gradient(135deg,color-mix(in srgb,var(--b) 45%,var(--a)),var(--a)) border-box;text-shadow:0 1px 2px rgba(0,0,0,.5);font-weight:800}
.theme-rose .topic-card .zbtn{background:linear-gradient(135deg,color-mix(in srgb,var(--b) 45%,var(--a)),var(--a)) border-box}
body.theme-rose .zbtn::after{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
/* ---------- 3. DARK MODE ---------- */
.theme-toggle{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font-size:18px;line-height:1;cursor:pointer;transition:transform .2s,background .2s}
.theme-toggle:hover{transform:scale(1.08);background:rgba(255,255,255,.2)}
.nav-right{display:flex;align-items:center;gap:10px}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body.theme-rose{--ink-h:#ffffff;--ink-p:#d3daf0;--ink-n:#b4bedd;background:#080c1a;color:#eef1fb}
html[data-theme=dark] body.theme-rose::before{background:
radial-gradient(900px 620px at 2% -6%,rgba(236,72,153,.20),transparent 62%),
radial-gradient(860px 620px at 102% 8%,rgba(99,102,241,.24),transparent 62%),
radial-gradient(900px 600px at 50% 118%,rgba(139,92,246,.16),transparent 62%),
linear-gradient(180deg,#080c1a,#0b1124 50%,#080c1a)}
html[data-theme=dark] .theme-rose .bg3d{opacity:.35}
html[data-theme=dark] .theme-rose #sports,html[data-theme=dark] .theme-rose #entertainment-top{background:none}
html[data-theme=dark] .theme-rose .guides,html[data-theme=dark] .theme-rose .offer-section,html[data-theme=dark] .theme-rose .trust-section,html[data-theme=dark] .theme-rose .sched{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
html[data-theme=dark] .theme-rose .section+.section::before{background:linear-gradient(90deg,transparent,rgba(143,176,255,.45),transparent)}
/* headings + intro text */
html[data-theme=dark] .theme-rose .section-head h2{background:linear-gradient(95deg,#ffffff 20%,#c9b8ff 62%,#ff8fb0 100%);-webkit-background-clip:text;background-clip:text}
html[data-theme=dark] .theme-rose .grid-title,html[data-theme=dark] .theme-rose .section-head h2+*{color:#fff}
html[data-theme=dark] .theme-rose .section-head>p{color:#d3daf0}
html[data-theme=dark] .theme-rose .section-kicker{color:#ffb3c6;background:rgba(255,255,255,.06);border-color:rgba(255,179,198,.5)}
html[data-theme=dark] .theme-rose .grid-title small{background:rgba(255,255,255,.08);color:#ffb3c6;border-color:rgba(255,179,198,.45);box-shadow:none}
html[data-theme=dark] .theme-rose .source-row,html[data-theme=dark] .theme-rose .empty{color:#c3cdee}
html[data-theme=dark] .theme-rose .source-row span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
/* cards */
html[data-theme=dark] .theme-rose .topic-card,html[data-theme=dark] .theme-rose .offer-card,html[data-theme=dark] .theme-rose .guide,html[data-theme=dark] .theme-rose .trust-card{
--ink:color-mix(in srgb,var(--b) 62%,#fff);
background:linear-gradient(160deg,#141b36 0%,color-mix(in srgb,var(--a) 16%,#0e1329) 100%) padding-box,linear-gradient(145deg,color-mix(in srgb,var(--a) 80%,#000),rgba(255,255,255,.12) 50%,color-mix(in srgb,var(--b) 70%,#000)) border-box;
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 40px -22px #000,0 5px 0 -3px color-mix(in srgb,var(--a) 35%,transparent)}
html[data-theme=dark] .theme-rose .topic-card:hover,html[data-theme=dark] .theme-rose .offer-card:hover,html[data-theme=dark] .theme-rose .guide:hover,html[data-theme=dark] .theme-rose .trust-card:hover{box-shadow:0 28px 50px -20px #000,0 0 0 1px color-mix(in srgb,var(--a) 55%,transparent),0 0 28px -6px color-mix(in srgb,var(--a) 55%,transparent)}
html[data-theme=dark] .theme-rose .topic-card::before{background:radial-gradient(circle,color-mix(in srgb,var(--a) 38%,transparent),transparent 70%)}
html[data-theme=dark] .theme-rose .topic-card h3,html[data-theme=dark] .theme-rose .offer-card h3,html[data-theme=dark] .theme-rose .guide h3,html[data-theme=dark] .theme-rose .trust-card h3{color:#fff}
html[data-theme=dark] .theme-rose .topic-card:hover h3{color:#fff}
html[data-theme=dark] .theme-rose .topic-card>p,html[data-theme=dark] .theme-rose .offer-card p,html[data-theme=dark] .theme-rose .guide p,html[data-theme=dark] .theme-rose .trust-card p{color:#d3daf0}
html[data-theme=dark] .theme-rose .tc-note{color:#c3cdee}
html[data-theme=dark] .theme-rose .tc-chips span{color:var(--ink);background:rgba(255,255,255,.07);border-color:color-mix(in srgb,var(--b) 50%,transparent)}
html[data-theme=dark] .theme-rose .next{color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--a) 30%,transparent),transparent);border-left-color:var(--b)}
html[data-theme=dark] .theme-rose .topic-icon{background:linear-gradient(135deg,color-mix(in srgb,var(--a) 30%,#1a2144),color-mix(in srgb,var(--b) 22%,#1a2144));border-color:color-mix(in srgb,var(--b) 45%,transparent);box-shadow:0 6px 0 -2px rgba(0,0,0,.4),0 12px 18px -6px #000,inset 0 1px 0 rgba(255,255,255,.2)}
html[data-theme=dark] .theme-rose .trust-symbol{background:color-mix(in srgb,var(--a) 22%,#121832);border-color:color-mix(in srgb,var(--b) 40%,transparent)}
html[data-theme=dark] .theme-rose .reader-note{background:rgba(255,255,255,.05);color:#d3daf0}
/* schedule + reviews + forms */
html[data-theme=dark] .theme-rose .sched-card,html[data-theme=dark] .theme-rose .review,html[data-theme=dark] .theme-rose .review-form,html[data-theme=dark] .theme-rose .rating-box,html[data-theme=dark] .theme-rose .review-empty{
--text:#fff;--muted:#c3cdee;--soft:#d3daf0;color:#eef1fb;
background:linear-gradient(160deg,#141b36,#0e1329) padding-box,linear-gradient(145deg,rgba(236,72,153,.6),rgba(255,255,255,.1) 50%,rgba(99,102,241,.6)) border-box;
box-shadow:0 18px 36px -18px #000}
html[data-theme=dark] .theme-rose .review-empty{border:1px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.04)}
html[data-theme=dark] .theme-rose .sched-match{color:#fff}
html[data-theme=dark] .theme-rose .sched-when,html[data-theme=dark] .theme-rose .review p,html[data-theme=dark] .theme-rose .field span,html[data-theme=dark] .theme-rose .form-msg{color:#d3daf0}
html[data-theme=dark] .theme-rose .sched-match .vs,html[data-theme=dark] .theme-rose .sched-match small,html[data-theme=dark] .theme-rose .sched-foot span,html[data-theme=dark] .theme-rose .review-top small,html[data-theme=dark] .theme-rose .rating-meta,html[data-theme=dark] .theme-rose .results-count{color:#aab6da}
html[data-theme=dark] .theme-rose .sched-league{color:#ff9db6}
html[data-theme=dark] .theme-rose .sched-when em{color:#ffd98a}
html[data-theme=dark] .theme-rose .sched-when em.now{color:#ff8fa5}
html[data-theme=dark] .theme-rose .sched-row,html[data-theme=dark] .theme-rose .sched-foot{border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .theme-rose .sched-row:hover{background:rgba(255,255,255,.05)}
html[data-theme=dark] .theme-rose .filter-btn,html[data-theme=dark] .theme-rose .sched-tab{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#e6ebfb}
html[data-theme=dark] .theme-rose .filter-btn.active,html[data-theme=dark] .theme-rose .filter-btn:hover,html[data-theme=dark] .theme-rose .sched-tab.on{color:#fff;border-color:#fff}
html[data-theme=dark] .theme-rose .field input,html[data-theme=dark] .theme-rose .field textarea,html[data-theme=dark] .theme-rose .topic-search{background:#0a0f22;color:#fff;border-color:rgba(255,255,255,.22)}
html[data-theme=dark] .theme-rose .topic-tools .topic-search{background:#0a0f22;color:#fff}
html[data-theme=dark] .theme-rose .star-pick label{color:#3a4468}
html[data-theme=dark] .theme-rose .review-form h3,html[data-theme=dark] .theme-rose .rating-num{color:#fff}
html[data-theme=dark] .theme-rose .stars{color:#ffc24d}
html[data-theme=dark] .theme-rose .badge{color:#fff}
/* ticker/hero/footer are already dark: just a touch deeper */
html[data-theme=dark] .theme-rose .topbar{background:rgba(6,9,22,.96)}
html[data-theme=dark] .theme-rose .footer{background:linear-gradient(180deg,#0a1028,#04060f)}
html[data-theme=dark] .theme-rose .theme-toggle{background:rgba(255,255,255,.14)}
@media(max-width:560px){.nav-right{gap:8px}.theme-toggle{width:36px;height:36px;font-size:16px}}
/* ===== v16 LIGHT MATCH: ticker, Watch Live rail and stats become light so they match the white base.
(Header + hero stay navy. Dark mode is untouched: it keeps the navy bars.) ===== */
html:not([data-theme=dark]) body.theme-rose .ticker{background:linear-gradient(90deg,#fff0f6,#f3edff 50%,#fff0f6);color:#2b1b5a;border-block:1px solid rgba(124,58,237,.18);font-weight:800;letter-spacing:1.4px;word-spacing:.2em;padding:13px 0}
html:not([data-theme=dark]) body.theme-rose .live-rail{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(250,244,255,.95));border-bottom:1px solid rgba(124,58,237,.14)}
html:not([data-theme=dark]) body.theme-rose .rail-head h2{color:#0c1230;letter-spacing:0;font-weight:800}
html:not([data-theme=dark]) body.theme-rose .rail-head p{color:#3c455f;font-weight:600;letter-spacing:0}
html:not([data-theme=dark]) body.theme-rose .rail-head h2:before{background:#e11d48;box-shadow:0 0 8px rgba(225,29,72,.6)}
/* chips: white pill, coloured edge, readable dark label */
html:not([data-theme=dark]) body.theme-rose .chips{scrollbar-width:thin;scrollbar-color:#c4b5fd transparent;padding-bottom:12px}
html:not([data-theme=dark]) body.theme-rose .chip{--a:#cf1f37;background:#fff;border:1.5px solid color-mix(in srgb,var(--a) 45%,#fff);color:#0c1230;text-shadow:none;letter-spacing:.2px;word-spacing:.1em;
box-shadow:0 3px 0 color-mix(in srgb,var(--a) 28%,transparent),0 10px 18px -10px color-mix(in srgb,var(--a) 55%,transparent)}
html:not([data-theme=dark]) body.theme-rose .chip b{color:var(--a);letter-spacing:.6px;font-weight:800}
html:not([data-theme=dark]) body.theme-rose .chip:hover{background:color-mix(in srgb,var(--a) 8%,#fff);border-color:var(--a)}
html:not([data-theme=dark]) body.theme-rose .chip:nth-child(6n+2){--a:#4f46e5}
html:not([data-theme=dark]) body.theme-rose .chip:nth-child(6n+3){--a:#c81e78}
html:not([data-theme=dark]) body.theme-rose .chip:nth-child(6n+4){--a:#c81e3a}
html:not([data-theme=dark]) body.theme-rose .chip:nth-child(6n+5){--a:#8b4fe0}
html:not([data-theme=dark]) body.theme-rose .chip:nth-child(6n+6){--a:#c248c2}
/* stats: light, dark text */
html:not([data-theme=dark]) body.theme-rose .stats{background:rgba(255,255,255,.8);border-radius:0;box-shadow:none;border-bottom:1px solid rgba(124,58,237,.14)}
html:not([data-theme=dark]) body.theme-rose .stat{border-color:rgba(124,58,237,.16)}
html:not([data-theme=dark]) body.theme-rose .stat strong{color:#0c1230;font-weight:800;letter-spacing:.6px}
html:not([data-theme=dark]) body.theme-rose .stat span{color:#3c455f;font-weight:600;letter-spacing:.1px}
/* more open spacing for the same small caps text in dark mode too */
.theme-rose .stat strong{letter-spacing:.6px;word-spacing:.12em}
.theme-rose .rail-head p{letter-spacing:.1px;word-spacing:.1em}
.theme-rose .chip,.theme-rose .chip b{word-spacing:.12em}
.theme-rose .ticker{letter-spacing:1.4px;word-spacing:.2em}
/* hero trust strip: clearer on navy */
.theme-rose .trust-strip span{color:#fff;font-weight:600;letter-spacing:.1px;word-spacing:.1em;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
/* ===== v17 OFF-WHITE BASE (light mode) =====
Soft lavender-grey base instead of bright white, cards slightly lighter than the base, darker text.
Change the 3 colours below to tune everything in one place. Dark mode is untouched. */
html:not([data-theme=dark]) body.theme-rose{--base:#e9e5f1;--card:#f8f6fc;--card-2:#f1edf8;--ink-h:#080d24;--ink-p:#2f3752;--ink-n:#3d4663;background:var(--base);color:#080d24;font-size:16px}
html:not([data-theme=dark]) body.theme-rose::before{background:
radial-gradient(900px 600px at 0% -4%,rgba(244,160,196,.22),transparent 62%),
radial-gradient(860px 600px at 100% 6%,rgba(160,150,240,.22),transparent 62%),
radial-gradient(900px 600px at 50% 116%,rgba(200,170,240,.20),transparent 62%),
linear-gradient(180deg,#ece8f4,#e7e2f0 50%,#ece8f4)}
html:not([data-theme=dark]) .theme-rose .bg3d{opacity:.25}
html:not([data-theme=dark]) .theme-rose #sports,html:not([data-theme=dark]) .theme-rose #entertainment-top{background:none}
html:not([data-theme=dark]) .theme-rose .guides,html:not([data-theme=dark]) .theme-rose .offer-section,html:not([data-theme=dark]) .theme-rose .trust-section,html:not([data-theme=dark]) .theme-rose .sched{background:rgba(248,246,252,.45);border-color:rgba(80,60,140,.12)}
/* cards */
html:not([data-theme=dark]) .theme-rose .topic-card,html:not([data-theme=dark]) .theme-rose .offer-card,html:not([data-theme=dark]) .theme-rose .guide,html:not([data-theme=dark]) .theme-rose .trust-card{
background:linear-gradient(160deg,var(--card) 0%,color-mix(in srgb,var(--a) 8%,var(--card-2)) 100%) padding-box,linear-gradient(145deg,color-mix(in srgb,var(--a) 55%,#e9e5f1),rgba(248,246,252,.6) 50%,color-mix(in srgb,var(--b) 55%,#e9e5f1)) border-box;
box-shadow:0 1px 0 #fff inset,0 18px 34px -22px color-mix(in srgb,var(--a) 55%,#2a1a55),0 5px 0 -3px color-mix(in srgb,var(--a) 22%,transparent)}
html:not([data-theme=dark]) .theme-rose .sched-card,html:not([data-theme=dark]) .theme-rose .review,html:not([data-theme=dark]) .theme-rose .review-form,html:not([data-theme=dark]) .theme-rose .rating-box,html:not([data-theme=dark]) .theme-rose .review-empty{
background:linear-gradient(160deg,var(--card),var(--card-2)) padding-box,linear-gradient(145deg,#e11d48,rgba(248,246,252,.6) 45%,#7c3aed) border-box;color:#080d24}
html:not([data-theme=dark]) .theme-rose .review-empty{background:rgba(248,246,252,.7)}
html:not([data-theme=dark]) .theme-rose .topic-icon{background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--b) 20%,var(--card-2)))}
html:not([data-theme=dark]) .theme-rose .tc-chips span{background:var(--card);color:color-mix(in srgb,var(--a) 82%,#0a0f26)}
/* strips */
html:not([data-theme=dark]) body.theme-rose .ticker{background:linear-gradient(90deg,#f3dfe9,#e6e0f6 50%,#f3dfe9)}
html:not([data-theme=dark]) body.theme-rose .live-rail{background:linear-gradient(180deg,rgba(248,246,252,.7),rgba(240,236,248,.9))}
html:not([data-theme=dark]) body.theme-rose .chip{background:var(--card)}
html:not([data-theme=dark]) body.theme-rose .stats{background:rgba(248,246,252,.75)}
/* inputs + tabs */
html:not([data-theme=dark]) .theme-rose .field input,html:not([data-theme=dark]) .theme-rose .field textarea{background:var(--card);color:#080d24;border-color:rgba(80,60,140,.28)}
html:not([data-theme=dark]) .theme-rose .filter-btn:not(.active),html:not([data-theme=dark]) .theme-rose .sched-tab:not(.on){background:var(--card);color:#2f3752;border-color:rgba(80,60,140,.25)}
html:not([data-theme=dark]) .theme-rose .topic-tools .filter-btn:not(.active){background:rgba(255,255,255,.1);color:#fff}
html:not([data-theme=dark]) .theme-rose .reader-note,html:not([data-theme=dark]) .theme-rose .source-row span{background:var(--card);color:#2f3752}
html:not([data-theme=dark]) .theme-rose .grid-title small{background:var(--card)}
/* text: darker, a touch heavier */
html:not([data-theme=dark]) .theme-rose .section-head>p,html:not([data-theme=dark]) .theme-rose .topic-card>p,html:not([data-theme=dark]) .theme-rose .offer-card p,html:not([data-theme=dark]) .theme-rose .guide p,html:not([data-theme=dark]) .theme-rose .trust-card p{color:#2a3250;font-weight:500}
html:not([data-theme=dark]) .theme-rose .tc-note{color:#38415e;font-weight:600}
html:not([data-theme=dark]) .theme-rose .sched-match{color:#080d24}html:not([data-theme=dark]) .theme-rose .sched-when{color:#2a3250}
html:not([data-theme=dark]) .theme-rose .review p,html:not([data-theme=dark]) .theme-rose .field span,html:not([data-theme=dark]) .theme-rose .form-msg{color:#2a3250}
/* v17b: darker small grey texts in light mode (schedule notes, review dates, hints) */
html:not([data-theme=dark]) .theme-rose .sched-match small,html:not([data-theme=dark]) .theme-rose .sched-match .vs,html:not([data-theme=dark]) .theme-rose .sched-foot span,html:not([data-theme=dark]) .theme-rose .review-top small,html:not([data-theme=dark]) .theme-rose .rating-meta,html:not([data-theme=dark]) .theme-rose .results-count,html:not([data-theme=dark]) .theme-rose .empty,html:not([data-theme=dark]) .theme-rose .source-row{color:#3d4663;font-weight:600}
html:not([data-theme=dark]) .theme-rose .sched-row{opacity:1}
/* ===== v18 HEADER + HERO: clean navy, clear text (both modes) ===== */
.theme-rose .topbar{background:#070b1a;border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:none}
.theme-rose .navlinks{color:#d6e4ff;font-weight:700;letter-spacing:.2px}
.theme-rose .navlinks a{padding:6px 2px;border-bottom:2px solid transparent}
.theme-rose .navlinks a:hover{color:#fff;border-bottom-color:#ff5a7a}
.theme-rose .brand{color:#fff}.theme-rose .brand em{color:#ff5a3c}
.theme-rose .hero{background:
radial-gradient(ellipse at 85% 30%,rgba(236,72,153,.22),transparent 48%),
radial-gradient(ellipse at 8% 100%,rgba(99,102,241,.28),transparent 48%),
linear-gradient(135deg,#070b1a 0%,#0d1636 55%,#150f40 100%)}
.theme-rose .hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.theme-rose .hero h1 span{background:linear-gradient(90deg,#ff8fb0,#ffc2d8 45%,#d3bfff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.theme-rose .hero-copy{color:#f4f6ff;font-size:17.5px;font-weight:500;line-height:1.75;letter-spacing:0;word-spacing:.08em}
.theme-rose .hero-copy b{color:#fff;background:linear-gradient(transparent 62%,rgba(236,72,153,.55) 0)}
.theme-rose .eyebrow{color:#ffd98a;background:rgba(255,255,255,.08);border-color:rgba(255,217,138,.55);font-weight:800;letter-spacing:1.6px}
.theme-rose .trust-strip span{color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28)}
.theme-rose .btn-secondary{color:#fff;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.6);font-weight:800}
.theme-rose .feature-panel{background:linear-gradient(145deg,#1a2656,#0b1130);border-color:rgba(255,255,255,.18)}
.theme-rose .panel-top{color:#d6e0ff}.theme-rose .panel-title{color:#fff}.theme-rose .panel-sub{color:#dbe4ff}
.theme-rose .panel-tags span{color:#fff;background:rgba(255,255,255,.12)}
/* ===== v19 PREMIUM STRIP: stat boxes + Watch Live chips look like the buttons (colourful, 3D) ===== */
/* --- stats: 3 colourful button-style cards --- */
html[data-theme] body.theme-rose .stats{background:transparent;border:0;border-radius:0;box-shadow:none;padding:30px 0 8px}
html[data-theme] body.theme-rose .stats-grid{gap:18px}
html[data-theme] body.theme-rose .stats .stat{--a:#cf1f37;--b:#ef4a5f;position:relative;overflow:hidden;padding:20px 18px 22px;border:1.5px solid transparent;border-radius:20px;text-align:center;
background:linear-gradient(135deg,color-mix(in srgb,var(--b) 45%,var(--a)),var(--a)) border-box;
box-shadow:0 6px 0 color-mix(in srgb,var(--a) 50%,#0b0820),0 18px 28px -12px color-mix(in srgb,var(--a) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.38)}
html[data-theme] body.theme-rose .stats .stat:nth-child(2){--a:#4f46e5;--b:#7c7cf7}
html[data-theme] body.theme-rose .stats .stat:nth-child(3){--a:#c81e78;--b:#ec4899}
html[data-theme] body.theme-rose .stats .stat::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}
html[data-theme] body.theme-rose .stats .stat::before{content:"⚽";display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:14px;font-size:22px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4)}
html[data-theme] body.theme-rose .stats .stat:nth-child(2)::before{content:"🎬"}
html[data-theme] body.theme-rose .stats .stat:nth-child(3)::before{content:"📖"}
html[data-theme] body.theme-rose .stats .stat strong{position:relative;color:#fff;font-size:15.5px;font-weight:800;letter-spacing:1.4px;word-spacing:.15em;margin-bottom:7px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
html[data-theme] body.theme-rose .stats .stat span{position:relative;color:rgba(255,255,255,.95);font-size:13.5px;font-weight:600;letter-spacing:.1px;word-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.3)}
/* --- Watch Live rail --- */
html[data-theme] body.theme-rose .rail-head h2{font-size:25px;font-weight:800;letter-spacing:0}
html[data-theme=dark] body.theme-rose .rail-head h2{color:#fff}
html[data-theme] body.theme-rose .chip{--a:#cf1f37;--b:#ef4a5f}
html[data-theme] body.theme-rose .chip:nth-child(6n+2){--a:#4f46e5;--b:#7c7cf7}
html[data-theme] body.theme-rose .chip:nth-child(6n+3){--a:#c81e78;--b:#ec4899}
html[data-theme] body.theme-rose .chip:nth-child(6n+4){--a:#c81e3a;--b:#f05a68}
html[data-theme] body.theme-rose .chip:nth-child(6n+5){--a:#8b4fe0;--b:#b48cf5}
html[data-theme] body.theme-rose .chip:nth-child(6n+6){--a:#c248c2;--b:#e57be5}
html[data-theme=dark] body.theme-rose .chip{padding:12px 18px;border:1.5px solid color-mix(in srgb,var(--b) 70%,transparent);color:#fff;font-weight:800;
background:linear-gradient(135deg,color-mix(in srgb,var(--a) 38%,#111836),color-mix(in srgb,var(--a) 14%,#0c1128));
box-shadow:0 4px 0 color-mix(in srgb,var(--a) 55%,#05081a),0 12px 20px -10px color-mix(in srgb,var(--a) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
html[data-theme=dark] body.theme-rose .chip b{color:color-mix(in srgb,var(--b) 55%,#fff);font-weight:800;letter-spacing:.7px}
html[data-theme=dark] body.theme-rose .chip:hover{background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a) 55%,#111836));border-color:#fff;transform:translateY(-3px)}
html[data-theme=dark] body.theme-rose .chip:hover b{color:#fff}
html[data-theme=light] body.theme-rose .chip{padding:12px 18px;font-weight:800}
html[data-theme=dark] body.theme-rose .chips{scrollbar-width:thin;scrollbar-color:#6d6fe0 transparent;padding-bottom:12px}
@media(max-width:560px){html[data-theme] body.theme-rose .stats .stat{padding:16px 14px 18px}html[data-theme] body.theme-rose .stats-grid{gap:14px}}
/* ===== v24 BUTTONS: card colours (red / purple / pink / magenta, NO blue) + blink + shine + gold glow =====
Each button keeps its card's colour. The blink fades it toward a pink-purple mix, a white shine sweeps across,
and the gold edge glows. Retune --mixA / --mixB (blink colours) or --bGold (edge). Only buttons/chips/pills are touched. */
html body.theme-rose{--bGold:#e6c27a;--mixA:#ff5fb0;--mixB:#9b2fe8}
/* no-blue palette: the old indigo/blue slot becomes real purple */
html body.theme-rose .topic-grid>.topic-card:nth-child(6n+2),
html body.theme-rose .offer-card:nth-child(3n+2),html body.theme-rose .guide:nth-child(3n+2),html body.theme-rose .trust-card:nth-child(3n+2){--a:#9333ea;--b:#c27bff}
html[data-theme] body.theme-rose .stats .stat:nth-child(2){--a:#9333ea;--b:#c27bff}
html[data-theme] body.theme-rose .chip:nth-child(6n+2){--a:#9333ea;--b:#c27bff}
html body.theme-rose .hero .zbtn.alt{--a:#9333ea;--b:#c27bff}
html[data-theme] body.theme-rose .chips{scrollbar-color:#c026d3 transparent}
/* ---- the buttons ---- */
html body.theme-rose .zbtn,
html body.theme-rose .topic-card .zbtn,html body.theme-rose .offer-card .zbtn,html body.theme-rose .guide .zbtn,
html body.theme-rose .sched-foot .zbtn,html body.theme-rose .topbar .zbtn,html body.theme-rose .hero .zbtn{
--ba:var(--a,#e11d48);--bb:var(--b,#fb7185);--edge:color-mix(in srgb,var(--ba) 50%,#1a0630);
position:relative;isolation:isolate;overflow:visible !important;
background:linear-gradient(135deg,color-mix(in srgb,var(--bb) 40%,var(--ba)),var(--ba)) border-box !important;
border:1.5px solid var(--bGold) !important;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);
box-shadow:0 4px 0 var(--edge),0 12px 20px -8px color-mix(in srgb,var(--ba) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
animation:zglow24 2.4s ease-in-out infinite !important}
@keyframes zglow24{50%{box-shadow:0 4px 0 var(--edge),0 0 24px 4px rgba(230,194,122,.7),0 12px 20px -8px color-mix(in srgb,var(--ba) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}}
/* layer 1: blink = the colour fades toward the pink-purple mix and back */
html body.theme-rose .zbtn::before{display:block !important;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(135deg,color-mix(in srgb,var(--ba) 50%,var(--mixA)),color-mix(in srgb,var(--bb) 35%,var(--mixB)));
opacity:0;animation:zblink 2.4s ease-in-out infinite !important}
/* layer 2: shine sweeping across */
html body.theme-rose .zbtn::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;box-shadow:none;opacity:1;
background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.6) 50%,transparent 64%),linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 52%);
background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:-60% 0,0 0;
animation:zshine 3.4s ease-in-out infinite !important}
/* .alt buttons blink in opposite phase, so neighbours never flash together */
html body.theme-rose .zbtn.alt{animation:zglow24 2.4s ease-in-out -1.2s infinite !important}
html body.theme-rose .zbtn.alt::before{animation:zblink 2.4s ease-in-out -1.2s infinite !important}
html body.theme-rose .zbtn.alt::after{animation:zshine 3.4s ease-in-out -1.7s infinite !important}
html body.theme-rose .zbtn:hover{transform:translateY(-2px);filter:brightness(1.07)}
html body.theme-rose .zbtn:active{transform:translateY(3px)}
html body.theme-rose .zbtn .zb-arrow,html body.theme-rose .zbtn .zbtn-arrow{color:#fff1c2}
html body.theme-rose .zbtn .zb-dot{background:#fff;box-shadow:0 0 8px #fff;animation:zdot 1.4s ease-in-out infinite !important}
/* white buttons on the coloured free-trial strips: stay white, shine only */
html body.theme-rose .cta-strip .zbtn{background:linear-gradient(180deg,#fff,#ffe9f0) !important;border-color:#fff !important;animation:none !important;
box-shadow:0 7px 0 rgba(70,10,50,.45),0 16px 24px -10px rgba(40,5,40,.6),inset 0 1px 0 #fff}
html body.theme-rose .cta-strip.e .zbtn{background:linear-gradient(180deg,#fff,#f3e8ff) !important;color:#7e22ce}
html body.theme-rose .cta-strip .zbtn::before{display:none !important}
html body.theme-rose .cta-strip .zbtn::after{background:linear-gradient(112deg,transparent 36%,rgba(225,29,72,.22) 50%,transparent 64%);
background-size:260% 100%;background-repeat:no-repeat;background-position:-60% 0;animation:zshine 3.4s ease-in-out infinite !important}
@media(prefers-reduced-motion:reduce){html body.theme-rose .zbtn,html body.theme-rose .zbtn::before,html body.theme-rose .zbtn::after{animation:none !important}}
/* ---- "Watch Live Now" chips: brighter, easy-to-read text (dark mode) ---- */
html[data-theme=dark] body.theme-rose .chip{background:linear-gradient(135deg,color-mix(in srgb,var(--a) 52%,#1a2250),color-mix(in srgb,var(--a) 26%,#131a3d))}
html[data-theme=dark] body.theme-rose .chip>span{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
html[data-theme=dark] body.theme-rose .chip b{color:color-mix(in srgb,var(--b) 15%,#fff);font-weight:800;letter-spacing:.9px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* ---- floating side pills: clearer text, softer blink so the words stay readable ---- */
@keyframes pillBlink24{50%{filter:brightness(1.16) saturate(1.1)}}
html body.theme-rose .cta-pill{animation:fabA 4s cubic-bezier(.22,1,.36,1) infinite,pillBlink24 1s ease-in-out infinite}
html body.theme-rose .cta-pill.b{animation:fabA 4s cubic-bezier(.22,1,.36,1) -2s infinite,pillBlink24 1s ease-in-out .5s infinite}
html body.theme-rose .cp-txt small{color:#fff3c8;font-size:9.5px;text-shadow:0 1px 2px rgba(0,0,0,.65)}
html body.theme-rose .cp-txt b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65)}
@media(min-width:561px){html body.theme-rose .cp-txt small{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){html body.theme-rose .cta-pill{animation:none !important;transform:none}}