/*
Theme Name: S News
Theme URI: https://snewssv.com
Author: Crearte Adnetwork S.A de C.V
Description: Portal de noticias premium para El Salvador.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: snews
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--W:#FFFFFF; --K:#0A0A0A;
--G1:#F7F7F5; --G2:#EBEBEB; --G3:#D4D4D4;
--G4:#9A9A9A; --G5:#5A5A5A; --G6:#2A2A2A;
--bg:'Bricolage Grotesque',sans-serif;
--dm:'DM Sans',sans-serif;
--NAV:54px; --MOB:48px; --BOTNAV:64px;
--MAX:1480px;
}
html{scroll-behavior:smooth}
body{font-family:var(--dm);background:var(--W);color:var(--K);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a,button{text-decoration:none;color:inherit;cursor:pointer;border:none;background:none;font-family:inherit;outline:none}
img,svg{display:block;max-width:100%;flex-shrink:0}
.nav{
position:sticky;top:0;z-index:600;
height:var(--NAV);
background:rgba(255,255,255,.92);
backdrop-filter:blur(28px) saturate(180%);
-webkit-backdrop-filter:blur(28px) saturate(180%);
border-bottom:1px solid var(--G2);
}
.nav-in{
max-width:var(--MAX);margin:0 auto;
height:100%;padding:0 28px;
display:flex;align-items:center;gap:0;
}
.wordmark{
font-family:var(--bg);font-size:22px;font-weight:800;
letter-spacing:-.06em;color:var(--K);line-height:1;
cursor:pointer;flex-shrink:0;margin-right:32px;
display:flex;align-items:center;gap:2px;user-select:none;
}
.wordmark-dot{width:6px;height:6px;border-radius:50%;background:var(--K);margin-bottom:1px;flex-shrink:0}
.nav-links{display:flex;align-items:center;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nl{
font-family:var(--dm);font-size:12.5px;font-weight:400;
color:var(--G4);padding:0 12px;height:var(--NAV);
display:flex;align-items:center;white-space:nowrap;
position:relative;transition:color .15s;flex-shrink:0;letter-spacing:.01em;
}
.nl:hover{color:var(--K)}
.nl.on{color:var(--K);font-weight:500}
.nl.on::after{
content:'';position:absolute;bottom:0;
left:12px;right:12px;height:1.5px;background:var(--K);
}
.nav-cta{
font-family:var(--dm);font-size:12px;font-weight:600;
background:var(--K);color:var(--W);
padding:7px 16px;border-radius:4px;
margin:0 4px;transition:opacity .15s;
white-space:nowrap;flex-shrink:0;letter-spacing:.01em;
}
.nav-cta:hover{opacity:.75}
.nav-tools{display:flex;align-items:center;gap:0;border-left:1px solid var(--G2);padding-left:12px;margin-left:8px;flex-shrink:0}
.ni{
width:34px;height:34px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
color:var(--G4);transition:all .15s;
}
.ni:hover{background:var(--G1);color:var(--K)}
.ni svg{width:17px;height:17px;stroke-width:1.75}
.ticker{background:var(--K);height:28px;display:flex;align-items:center;overflow:hidden}
.t-tag{
background:var(--W);color:var(--K);
font-family:var(--dm);font-size:8.5px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
padding:3px 14px;flex-shrink:0;height:28px;display:flex;align-items:center;z-index:1;
}
.t-mask{overflow:hidden;flex:1}
.t-roll{display:flex;animation:scrollX 50s linear infinite;white-space:nowrap}
.t-item{font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.6);padding:0 52px 0 0;font-weight:300;flex-shrink:0}
.t-item::before{content:'—';margin-right:14px;color:rgba(255,255,255,.2)}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mob-hd{
display:none;position:sticky;top:0;z-index:600;
height:var(--MOB);
background:rgba(255,255,255,.94);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border-bottom:1px solid var(--G2);
padding:0 12px;align-items:center;justify-content:space-between;
gap:0;
}
.mob-mark{font-family:var(--bg);font-size:22px;font-weight:800;letter-spacing:-.06em;display:flex;align-items:center;gap:2px;cursor:pointer;flex-shrink:0}
.mob-mark-dot{width:5px;height:5px;border-radius:50%;background:var(--K);margin-bottom:1px}
.mob-hd-links{display:flex;align-items:center;gap:0;flex:1;overflow-x:auto;scrollbar-width:none;margin:0 4px}
.mob-hd-links::-webkit-scrollbar{display:none}
.mob-hd-link{
font-family:var(--dm);font-size:12px;font-weight:400;
color:var(--G4);padding:0 10px;height:var(--MOB);
display:flex;align-items:center;white-space:nowrap;
transition:color .15s;flex-shrink:0;letter-spacing:.01em;
}
.mob-hd-link:hover{color:var(--K)}
.mob-right{display:flex;gap:0;flex-shrink:0}
.app{min-height:0}
.home-wrap{max-width:var(--MAX);margin:0 auto;padding:0 28px 80px}
.top-story{
display:grid;grid-template-columns:1fr 420px;
border-bottom:1px solid var(--G2);
padding:40px 0;gap:48px;align-items:center;cursor:pointer;
}
.top-story:hover .ts-hl{opacity:.7}
.ts-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ts-live{display:flex;align-items:center;gap:6px;font-family:var(--dm);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--K)}
.ts-live-dot{width:7px;height:7px;border-radius:50%;background:var(--K);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.ts-cat{font-family:var(--dm);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--G4)}
.ts-hl{
font-family:var(--bg);font-size:clamp(32px,4.5vw,64px);
font-weight:700;line-height:1.04;letter-spacing:-.03em;
color:var(--K);margin-bottom:20px;transition:opacity .25s;
}
.ts-desc{font-family:var(--dm);font-size:16px;font-weight:300;color:var(--G5);line-height:1.65;max-width:580px;margin-bottom:22px}
.ts-meta{display:flex;align-items:center;gap:16px;font-family:var(--dm);font-size:12px;color:var(--G4)}
.ts-meta-dot{color:var(--G3)}
.ts-img{
width:100%;aspect-ratio:4/3;
background:linear-gradient(135deg,#2a2a2a 0%,#0a0a0a 100%);
overflow:hidden;position:relative;border-radius:14px;flex-shrink:0;
}
.ts-img::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);border-radius:14px;
}
.hero-fade{transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.hero-fade-in{opacity:1;transform:translateY(0)}
.hero-fade-out{opacity:0;transform:translateY(12px)}
.hero-dots{
display:flex;align-items:center;gap:8px;margin-top:22px;
}
.hero-dot{
width:28px;height:3px;border-radius:2px;
background:var(--G3);border:none;cursor:pointer;
transition:all .3s;padding:0;
}
.hero-dot.on{background:var(--K);width:40px}
.hero-dot:hover{background:var(--G5)}
.hero-counter{
font-family:var(--dm);font-size:10px;font-weight:500;
color:var(--G4);letter-spacing:.06em;margin-left:8px;
}
/* Hero switcher */
.hero-switcher{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;background:var(--K)}
.hero-sw-btn{font-family:var(--dm);font-size:10px;font-weight:600;color:rgba(255,255,255,.4);background:none;border:1px solid rgba(255,255,255,.12);padding:4px 14px;border-radius:4px;cursor:pointer;transition:all .15s}
.hero-sw-btn.on{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}

/* Hero 2 — Full bleed dark */
.hero2{position:relative;width:100%;min-height:clamp(360px,45vw,520px);cursor:pointer;overflow:hidden;display:flex;align-items:flex-end}
.hero2-bg{position:absolute;inset:0}
.hero2-overlay{position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(0,0,0,.8))}
.hero2-content{position:relative;z-index:1;padding:40px 32px;max-width:700px}
.hero2-cat{font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);padding:4px 12px;border-radius:4px;display:inline-block;margin-bottom:14px}
.hero2-hl{font-family:var(--bg);font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:#fff;margin-bottom:12px}
.hero2-desc{font-family:var(--dm);font-size:16px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.55);margin-bottom:14px}
.hero2-meta{display:flex;gap:8px;font-family:var(--dm);font-size:12px;color:rgba(255,255,255,.35)}
.hero2-dots{position:absolute;bottom:20px;right:28px;z-index:2}
.hero2-dots .hero-dot{background:rgba(255,255,255,.25)}
.hero2-dots .hero-dot.on{background:#fff}

/* Hero 3 — Grid with side stories */
.hero3{cursor:pointer}
.hero3-grid{display:grid;grid-template-columns:1.6fr 1fr;min-height:clamp(300px,36vw,440px)}
.hero3-main{position:relative;overflow:hidden}
.hero3-img{position:absolute;inset:0}
.hero3-main::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.8))}
.hero3-body{position:relative;z-index:1;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.hero3-cat{font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.hero3-hl{font-family:var(--bg);font-size:clamp(20px,2.8vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#fff;margin-bottom:10px}
.hero3-meta{display:flex;gap:8px;font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.35)}
.hero3-side{display:flex;flex-direction:column;border-left:1px solid var(--G2)}
.hero3-side-card{flex:1;display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--G2);cursor:pointer;transition:background .12s}
.hero3-side-card:last-child{border-bottom:none}
.hero3-side-card:hover{background:var(--G1)}
.hero3-side-img{width:80px;height:60px;border-radius:6px;flex-shrink:0}
.hero3-side-body{flex:1;min-width:0}
.hero3-side-cat{font-family:var(--dm);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dc2626;display:block;margin-bottom:4px}
.hero3-side-hl{font-family:var(--bg);font-size:13px;font-weight:600;line-height:1.3;color:var(--K);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.sub-hero{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--G2)}
.sh-item{padding:28px 24px;border-right:1px solid var(--G2);cursor:pointer;transition:background .15s;min-width:0;overflow:hidden}
.sh-item:last-child{border-right:none}
.sh-item:hover{background:var(--G1)}
.sh-item:hover .sh-hl{opacity:.65}
.sh-img{width:100%;aspect-ratio:16/9;margin-bottom:14px;border-radius:10px;overflow:hidden}
.sh-cat{font-family:var(--dm);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--G4);margin-bottom:8px}
.sh-hl{font-family:var(--bg);font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--K);margin-bottom:8px;transition:opacity .2s;overflow-wrap:break-word;word-wrap:break-word}
.sh-meta{font-family:var(--dm);font-size:11.5px;color:var(--G4)}
.sec-label{
display:flex;align-items:center;gap:0;
padding:32px 0 20px;border-bottom:1px solid var(--K);
margin-bottom:28px;justify-content:space-between;
}
.sec-label-name{font-family:var(--bg);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--K)}
.sec-label-sub{font-family:var(--dm);font-size:11px;color:var(--G4);letter-spacing:.02em}
.sec-label-more{
font-family:var(--dm);font-size:11.5px;font-weight:500;
color:var(--G4);display:flex;align-items:center;gap:4px;transition:color .15s;letter-spacing:.01em;
}
.sec-label-more:hover{color:var(--K)}
.sec-label-more svg{width:12px;height:12px;stroke-width:2}
.sec{margin-bottom:60px}
.mob-nav{
display:none;position:fixed;bottom:0;left:0;right:0;z-index:9000;
padding-bottom:env(safe-area-inset-bottom,0px);
height:60px;
}
.mob-nav-bg{position:absolute;top:-12px;left:0;right:0;bottom:0;pointer-events:none}
.mob-nav-bg svg{width:100%;height:100%;display:block}
.mob-nav-in{display:flex;height:60px;align-items:stretch;position:relative;z-index:1;padding-top:4px}
.mob-tab{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
font-family:var(--dm);font-size:9px;font-weight:500;
letter-spacing:.03em;text-transform:uppercase;color:#BEBEBE;transition:color .12s;
}
.mob-tab svg{width:21px;height:21px;stroke-width:1.5;flex-shrink:0}
.mob-tab.on{color:var(--K)}
.mob-tab.on svg{stroke-width:2.2}
.mob-tab-xp{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
font-family:var(--dm);font-size:9px;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;color:var(--K);
}
.mob-tab-xp-ico{
width:44px;height:44px;background:var(--K);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;margin-top:-24px;
box-shadow:0 2px 10px rgba(0,0,0,.15);
transition:all .2s;
}
.mob-tab-xp-ico svg{width:18px;height:18px;stroke:white;stroke-width:2}
.mob-tab-xp.on .mob-tab-xp-ico{box-shadow:0 3px 14px rgba(0,0,0,.3);transform:scale(1.05)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--G2)}
.g2-row{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--G2)}
.g-asym{display:grid;grid-template-columns:2fr 1fr;gap:0;border-top:1px solid var(--G2)}
.g-list{border-top:1px solid var(--G2)}
.card-feat{
display:grid;grid-template-columns:1fr 420px;gap:32px;
padding:24px 0;border-top:1px solid var(--G2);border-bottom:1px solid var(--G2);
cursor:pointer;transition:background .2s;align-items:center;
}
.card-feat:hover{background:var(--G1)}
.card-feat:hover .card-feat-hl{color:var(--G5)}
.card-feat:hover .card-img-inner{transform:scale(1.04)}
.card-feat-img{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;position:relative}
.card-feat-img .card-img-inner{width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.card-feat-body{}
.card-feat-hl{font-family:var(--bg);font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.03em;color:var(--K);margin-bottom:10px;transition:color .25s}
.card-feat-desc{font-family:var(--dm);font-size:14px;color:var(--G5);line-height:1.6;font-weight:300;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-v{
padding:20px;border-right:1px solid var(--G2);
cursor:pointer;transition:background .2s,transform .2s;
position:relative;overflow:hidden;
}
.card-v:last-child{border-right:none}
.card-v:hover{background:var(--G1)}
.card-v:hover .card-v-hl{color:var(--G5)}
.card-v:hover .card-img-inner{transform:scale(1.05)}
.card-v-img{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-bottom:14px;position:relative}
.card-v-img .card-img-inner{width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.card-v-body{min-width:0}
.card-v-hl{
font-family:var(--bg);font-size:17px;font-weight:600;
line-height:1.32;letter-spacing:-.02em;color:var(--K);
margin-bottom:8px;transition:color .25s;
}
.card-v-desc{
font-family:var(--dm);font-size:12.5px;color:var(--G5);
line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;font-weight:300;
}
.card{padding:20px 20px 20px 0;border-right:1px solid var(--G2);cursor:pointer;transition:background .2s}
.card:last-child{border-right:none}
.card:hover{background:var(--G1)}
.card:hover .card-hl{color:var(--G5)}
.card:hover .card-img-inner{transform:scale(1.05)}
.card-img{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#ebebeb,#d4d4d4);margin-bottom:14px;overflow:hidden;position:relative;border-radius:10px}
.card-img-inner{width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.c0{background:linear-gradient(135deg,#e0e0e0,#bdbdbd)}
.c1{background:linear-gradient(135deg,#ebebeb,#c5c5c5)}
.c2{background:linear-gradient(135deg,#d8d8d8,#b0b0b0)}
.c3{background:linear-gradient(135deg,#f0f0f0,#cccccc)}
.c4{background:linear-gradient(135deg,#dcdcdc,#a8a8a8)}
.c5{background:linear-gradient(135deg,#e6e6e6,#c0c0c0)}
.dk0{background:linear-gradient(135deg,#3c3c3c,#1a1a1a)}
.dk1{background:linear-gradient(135deg,#2e2e2e,#0f0f0f)}
.dk2{background:linear-gradient(135deg,#444,#222)}
.card-cat{font-family:var(--dm);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--G4);margin-bottom:7px}
.card-hl{font-family:var(--bg);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--K);margin-bottom:8px;transition:color .25s}
.card-desc{font-family:var(--dm);font-size:12.5px;color:var(--G5);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;font-weight:300}
.card-foot{display:flex;justify-content:space-between;font-family:var(--dm);font-size:11px;color:var(--G4)}
.card.lg .card-hl{font-size:22px}
.card.lg .card-img{aspect-ratio:4/3}
.card.compact{padding:16px 20px 16px 0}
.card.compact .card-hl{font-size:14.5px;margin-bottom:5px}
.list-item{display:grid;grid-template-columns:1fr auto;align-items:start;gap:20px;padding:18px 0;border-bottom:1px solid var(--G2);cursor:pointer;transition:background .15s}
.list-item:last-child{border-bottom:none}
.list-item:hover .li-hl{opacity:.65}
.li-cat{font-family:var(--dm);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--G4);margin-bottom:5px}
.li-hl{font-family:var(--bg);font-size:16.5px;font-weight:600;line-height:1.28;letter-spacing:-.02em;transition:opacity .2s;margin-bottom:6px}
.li-meta{font-family:var(--dm);font-size:11px;color:var(--G4)}
.li-img{width:96px;height:68px;flex-shrink:0;border-radius:8px}
.op-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--G2)}
.op-card{padding:28px 28px 28px 0;border-right:1px solid var(--G2);cursor:pointer;transition:background .15s}
.op-card:nth-child(even){border-right:none;padding-left:28px;padding-right:0}
.op-card:hover{background:var(--G1)}
.op-rule{width:28px;height:1.5px;background:var(--K);margin-bottom:18px}
.op-q{font-family:var(--bg);font-size:18px;font-weight:500;font-style:italic;line-height:1.45;letter-spacing:-.015em;color:var(--K);margin-bottom:18px}
.op-author{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--G2)}
.op-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0}
.op-av-img{width:100%;height:100%}
.op-nm{font-family:var(--dm);font-size:13px;font-weight:600;color:var(--K)}
.op-role{font-family:var(--dm);font-size:11px;color:var(--G4);margin-top:2px}
.tend-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--G2)}
.tend-item{
display:flex;gap:16px;align-items:flex-start;
padding:24px 24px 24px 0;border-right:1px solid var(--G2);border-bottom:1px solid var(--G2);
cursor:pointer;transition:background .2s;
}
.tend-item:nth-child(even){border-right:none;padding-left:24px;padding-right:0}
.tend-item:nth-last-child(-n+2){border-bottom:none}
.tend-item:hover{background:var(--G1)}
.tend-item:hover .tend-hl{color:var(--G5)}
.tend-item:hover .tend-num{color:var(--K);transform:scale(1.08)}
.tend-num{
font-family:var(--bg);font-size:56px;font-weight:800;
letter-spacing:-.06em;line-height:.85;color:var(--G2);
flex-shrink:0;width:56px;text-align:right;
transition:color .3s,transform .3s;user-select:none;
}
.tend-body{flex:1;min-width:0;padding-top:4px}
.tend-cat{
font-family:var(--dm);font-size:9px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--G4);
margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.tend-fire{font-size:12px}
.tend-hl{
font-family:var(--bg);font-size:17px;font-weight:600;
line-height:1.32;letter-spacing:-.02em;color:var(--K);
margin-bottom:10px;transition:color .25s;
}
.tend-stats{display:flex;gap:14px;font-family:var(--dm);font-size:11px;color:var(--G4)}
.tend-stat{display:flex;align-items:center;gap:4px}
.tend-stat svg{width:12px;height:12px;stroke-width:1.75}
.mkt-strip{
display:flex;gap:0;overflow-x:auto;
border-top:1px solid var(--G2);scrollbar-width:none;
background:var(--K);
}
.mkt-strip::-webkit-scrollbar{display:none}
.mkt-card{
flex-shrink:0;padding:14px 20px;
border-right:1px solid rgba(255,255,255,.08);
cursor:pointer;transition:background .2s;min-width:140px;
}
.mkt-card:hover{background:rgba(255,255,255,.06)}
.mkt-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.mkt-card-tk{font-family:var(--dm);font-size:10px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.08em}
.mkt-card-ch{font-family:var(--dm);font-size:11px;font-weight:700}
.mkt-card-ch.up{color:#34C759}
.mkt-card-ch.dn{color:#FF3B30}
.mkt-card-px{font-family:var(--bg);font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2}
.mkt-card-nm{font-family:var(--dm);font-size:10px;color:rgba(255,255,255,.3);margin-top:2px}
.mkt-card-vol{font-family:var(--dm);font-size:9px;color:rgba(255,255,255,.2);margin-top:2px}
@media(min-width:769px){
.mkt-strip{display:grid;grid-template-columns:repeat(6,1fr);overflow-x:unset}
.mkt-card{min-width:0}
}
.fin-hero{
position:relative;overflow:hidden;cursor:pointer;
min-height:260px;display:flex;align-items:flex-end;
border-bottom:1px solid var(--G2);
}
.fin-hero:hover .fin-hero-bg{transform:scale(1.04)}
.fin-hero:hover .fin-hero-hl{opacity:.85}
.fin-hero-bg{
position:absolute;inset:0;
background:linear-gradient(140deg,#1a1a1a 0%,#0a0a0a 100%);
transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.fin-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%);
}
.fin-hero-content{position:relative;padding:28px;z-index:1;max-width:680px}
.fin-hero-cat{
font-family:var(--dm);font-size:9px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.5);margin-bottom:10px;
}
.fin-hero-hl{
font-family:var(--bg);font-size:clamp(20px,2.8vw,34px);font-weight:700;
line-height:1.15;letter-spacing:-.03em;color:#fff;
margin-bottom:12px;transition:opacity .3s;
}
.fin-hero-desc{
font-family:var(--dm);font-size:14px;color:rgba(255,255,255,.55);
line-height:1.6;font-weight:300;margin-bottom:12px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fin-hero-meta{font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.3)}
.fin-scroll{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--G2);
}
.fin-scroll-card{
padding:20px 20px 20px 0;border-right:1px solid var(--G2);
cursor:pointer;transition:background .2s;
}
.fin-scroll-card:last-child{border-right:none}
.fin-scroll-card:hover{background:var(--G1)}
.fin-scroll-card:hover .fin-scroll-hl{color:var(--G5)}
.fin-scroll-img{width:100%;aspect-ratio:16/9;border-radius:8px;margin-bottom:14px;overflow:hidden}
.fin-scroll-body{min-width:0}
.fin-scroll-hl{
font-family:var(--bg);font-size:16px;font-weight:600;
line-height:1.28;letter-spacing:-.02em;color:var(--K);
margin-bottom:8px;transition:color .25s;
}
.fin-scroll-meta{font-family:var(--dm);font-size:11px;color:var(--G4)}
.peo-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2px;border-top:1px solid var(--G2);
}
.peo-card{
position:relative;overflow:hidden;cursor:pointer;
aspect-ratio:16/10;
}
.peo-bg{position:absolute;inset:0;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.peo-card:hover .peo-bg{transform:scale(1.08)}
.peo-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.05) 100%);
transition:background .4s;
}
.peo-card:hover .peo-overlay{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.1) 100%)}
.peo-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.15);backdrop-filter:blur(12px);
border:1.5px solid rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;
transition:all .35s cubic-bezier(.4,0,.2,1);
opacity:.7;z-index:2;
}
.peo-card:hover .peo-play{
opacity:1;background:rgba(255,255,255,.95);
transform:translate(-50%,-50%) scale(1.1);
border-color:transparent;
}
.peo-play svg{width:15px;height:15px;color:#fff;margin-left:2px;transition:color .3s}
.peo-card:hover .peo-play svg{color:#0A0A0A}
.peo-dur{
position:absolute;top:10px;right:10px;z-index:2;
font-family:var(--dm);font-size:10px;font-weight:600;
color:#fff;background:rgba(0,0,0,.5);
padding:2px 7px;border-radius:3px;backdrop-filter:blur(4px);
}
.peo-content{
position:absolute;bottom:0;left:0;right:0;
padding:16px;z-index:2;
}
.peo-cat{
font-family:var(--dm);font-size:8px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.5);margin-bottom:5px;
}
.peo-hl{
font-family:var(--bg);font-size:14px;font-weight:600;
line-height:1.3;letter-spacing:-.01em;color:#fff;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin-bottom:4px;transition:opacity .3s;
}
.peo-card:hover .peo-hl{opacity:.85}
.peo-meta{font-family:var(--dm);font-size:10px;color:rgba(255,255,255,.4)}
.pm{min-height:calc(100vh - var(--NAV));background:#f7f7f7}
.pm-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;background:#fff;border-bottom:1px solid var(--G2);position:sticky;top:var(--NAV);z-index:50}
.pm-logo{font-family:var(--bg);font-size:17px;font-weight:700;letter-spacing:-.04em}
.pm-bar-r{display:flex;align-items:center;gap:10px}
.pm-google{display:flex;align-items:center;gap:8px;font-family:var(--dm);font-size:12px;font-weight:600;background:#fff;border:1.5px solid var(--G2);padding:7px 16px;border-radius:6px;cursor:pointer;transition:all .15s}
.pm-google:hover{border-color:var(--K);background:var(--G1)}
.pm-pts{font-family:var(--dm);font-size:12px;font-weight:700;background:var(--G1);padding:4px 12px;border-radius:4px}
.pm-av{width:30px;height:30px;border-radius:50%;background:var(--K);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;font-weight:700}
.pm-body{max-width:var(--MAX);margin:0 auto;padding:0 28px}
/* ═══ PREDICTIONS — Kalshi style ═══ */
/* ═══ PREDICTIONS — S News ═══ */
/* ═══ XPRESS — Social feed ═══ */
.xp-page{min-height:calc(100vh - var(--NAV));background:#fff}
.xp-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-bottom:1px solid var(--G2);position:sticky;top:var(--NAV);z-index:50;background:#fff}
.xp-logo{font-family:var(--bg);font-size:17px;font-weight:700;letter-spacing:-.04em}
.xp-tabs2{display:flex;gap:0}
.xp-t2{font-family:var(--dm);font-size:13px;font-weight:500;color:var(--G4);padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.xp-t2.on{color:var(--K);font-weight:600;border-bottom-color:var(--K)}
.xp-wrap{max-width:620px;margin:0 auto;border-left:1px solid var(--G2);border-right:1px solid var(--G2);min-height:calc(100vh - var(--NAV) - 50px)}
.xp-compose{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--G2)}
.xp-compose-av{width:40px;height:40px;border-radius:50%;background:var(--K);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:14px;font-weight:700;flex-shrink:0}
.xp-compose-body{flex:1;min-width:0}
.xp-compose-inp{width:100%;border:none;outline:none;font-family:var(--dm);font-size:15px;color:var(--K);resize:none;line-height:1.5;font-weight:300;min-height:48px}
.xp-compose-inp::placeholder{color:var(--G3)}
.xp-compose-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--G2)}
.xp-compose-tools{display:flex;gap:4px}
.xp-compose-ico{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--K);transition:background .15s}
.xp-compose-ico:hover{background:var(--G1)}
.xp-compose-ico svg{width:18px;height:18px}
.xp-compose-btn{font-family:var(--dm);font-size:13px;font-weight:700;background:var(--K);color:#fff;border:none;padding:8px 20px;border-radius:20px;cursor:pointer;transition:opacity .15s}
.xp-compose-btn:disabled{opacity:.3;cursor:default}
.xp-compose-btn:hover:not(:disabled){opacity:.85}
.xp-feed{}
.xp-loading{display:flex;justify-content:center;padding:24px 0}
.xp-ad{padding:16px;border-bottom:1px solid var(--G2);text-align:center}
.xp-ad-label{font-family:var(--dm);font-size:7px;font-weight:700;letter-spacing:.16em;color:var(--G4);text-transform:uppercase;margin-bottom:6px}
.xp-ad-box{width:100%;height:200px;background:var(--G1);border:1px dashed var(--G3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;color:var(--G4)}
.pr-c-ad{display:flex;align-items:center;justify-content:center;cursor:default}
.pr-c-ad:hover{border-color:var(--G2);box-shadow:none}
.xp-spinner{width:24px;height:24px;border:2.5px solid var(--G2);border-top-color:var(--K);border-radius:50%;animation:xpSpin .7s linear infinite}
@keyframes xpSpin{to{transform:rotate(360deg)}}
.xp-post{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--G2);transition:background .12s;cursor:pointer}
.xp-post:hover{background:var(--G1)}
.xp-post-av{width:40px;height:40px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:13px;font-weight:700;flex-shrink:0}
.xp-post-body{flex:1;min-width:0}
.xp-post-hdr{display:flex;align-items:center;gap:4px;margin-bottom:3px;flex-wrap:wrap}
.xp-post-nm{font-family:var(--dm);font-size:14px;font-weight:700;color:var(--K)}
.xp-verified{width:16px;height:16px;flex-shrink:0}
.xp-post-handle{font-family:var(--dm);font-size:13px;color:var(--G4);font-weight:400}
.xp-post-dot{color:var(--G3);font-size:10px}
.xp-post-time{font-family:var(--dm);font-size:13px;color:var(--G4)}
.xp-post-txt{font-family:var(--dm);font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;font-weight:300;color:var(--K);margin-bottom:10px}
.xp-post-actions{display:flex;gap:0;margin-left:-8px}
.xp-act{display:flex;align-items:center;gap:5px;font-family:var(--dm);font-size:12px;color:var(--G4);padding:6px 12px;border-radius:20px;background:none;border:none;cursor:pointer;transition:all .15s}
.xp-act svg{width:16px;height:16px;stroke-width:1.75;flex-shrink:0}
.xp-act:hover{background:rgba(0,0,0,.04)}
.xp-act.lk:hover,.xp-act.lk.on{color:#f43f5e}
.xp-act.lk.on{animation:xpLike .35s ease}
@keyframes xpLike{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
@media(max-width:768px){
.xp-page{min-height:calc(100vh - var(--MOB) - var(--BOTNAV))}
.xp-bar{padding:10px 16px;top:var(--MOB)}
.xp-wrap{border:none}
.xp-compose{padding:14px}
.xp-post{padding:14px}
}
.pr{min-height:calc(100vh - var(--NAV));background:#f8f8f8}
.pr-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;background:#fff;border-bottom:1px solid var(--G2);position:sticky;top:var(--NAV);z-index:50}
.pr-logo{font-family:var(--bg);font-size:17px;font-weight:700;letter-spacing:-.04em}
.pr-bar-r{display:flex;align-items:center;gap:8px}
.pr-signin{font-family:var(--dm);font-size:12px;font-weight:600;background:#fff;border:1.5px solid var(--G2);padding:7px 16px;border-radius:6px;cursor:pointer;transition:all .15s}
.pr-signin:hover{border-color:var(--K)}
.pr-pts{font-family:var(--dm);font-size:12px;font-weight:700;background:var(--G1);padding:4px 12px;border-radius:4px}
.pr-av{width:30px;height:30px;border-radius:50%;background:var(--K);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;font-weight:700}
.pr-create-btn{font-family:var(--dm);font-size:12px;font-weight:600;background:var(--K);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}
.pr-create-btn:hover{opacity:.85}
/* Hero — innovative VS design */
.pr-hero{background:var(--K);padding:0 28px;position:relative;overflow:hidden}
.pr-hero-glow{position:absolute;top:-50%;left:-20%;width:140%;height:200%;background:radial-gradient(ellipse at 30% 50%,rgba(22,163,74,.12) 0%,transparent 50%),radial-gradient(ellipse at 70% 50%,rgba(239,68,68,.08) 0%,transparent 50%);animation:prGlow 8s ease-in-out infinite alternate;pointer-events:none}
@keyframes prGlow{0%{transform:translateX(-5%)}100%{transform:translateX(5%)}}
.pr-hero-inner{max-width:var(--MAX);margin:0 auto;padding:32px 0;position:relative;z-index:1}
.pr-hero-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pr-hero-badge{font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.12em;color:#16a34a;background:rgba(22,163,74,.12);padding:5px 14px;border-radius:20px;display:flex;align-items:center}
.pr-hero-pulse{width:8px;height:8px;border-radius:50%;background:#16a34a;display:inline-block;margin-right:8px;animation:prPulse 1.5s infinite}
@keyframes prPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(22,163,74,.5)}50%{opacity:.6;box-shadow:0 0 0 8px rgba(22,163,74,0)}}
.pr-hero-counter{font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.3)}
.pr-hero-q{font-family:var(--bg);font-size:clamp(20px,3vw,30px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.15;text-align:center;max-width:680px;margin:0 auto 28px}
.pr-hero-versus{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:20px}
.pr-hero-side{flex:1;max-width:200px;text-align:center;padding:20px 16px;border-radius:16px;transition:all .3s}
.pr-hero-side.yes{background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.1)}
.pr-hero-side.no{background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.08)}
.pr-hero-side.picked{transform:scale(1.04)}
.pr-hero-side.yes.picked{background:rgba(22,163,74,.15);border-color:rgba(22,163,74,.3);box-shadow:0 0 30px rgba(22,163,74,.15)}
.pr-hero-side.no.picked{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25);box-shadow:0 0 30px rgba(239,68,68,.12)}
.pr-hero-pct{font-family:var(--bg);font-size:48px;font-weight:800;letter-spacing:-.06em;line-height:1;display:block}
.pr-hero-side.yes .pr-hero-pct{color:#4ade80}
.pr-hero-side.no .pr-hero-pct{color:rgba(255,255,255,.35)}
.pr-hero-side.no.picked .pr-hero-pct{color:#f87171}
.pr-hero-label{font-family:var(--dm);font-size:12px;color:rgba(255,255,255,.4);display:block;margin:6px 0 14px}
.pr-hero-vote{font-family:var(--dm);font-size:13px;font-weight:700;padding:10px 28px;border:none;border-radius:10px;cursor:pointer;transition:all .25s}
.pr-hero-vote.yes{background:rgba(22,163,74,.15);color:#4ade80}
.pr-hero-vote.yes:hover{background:rgba(22,163,74,.3)}
.pr-hero-vote.yes.on{background:#16a34a;color:#fff;animation:prVote .4s ease}
.pr-hero-vote.no{background:rgba(239,68,68,.1);color:#f87171}
.pr-hero-vote.no:hover{background:rgba(239,68,68,.2)}
.pr-hero-vote.no.on{background:#ef4444;color:#fff;animation:prVote .4s ease}
.pr-hero-vs{font-family:var(--bg);font-size:14px;font-weight:800;color:rgba(255,255,255,.15);letter-spacing:.1em;margin:0 20px;flex-shrink:0}
.pr-hero-bar{width:100%;max-width:440px;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin:0 auto 14px}
.pr-hero-fill{height:100%;background:linear-gradient(90deg,#16a34a,#4ade80);border-radius:2px;transition:width .6s}
.pr-hero-bottom{display:flex;align-items:center;justify-content:space-between;font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.25);max-width:440px;margin:0 auto}
.pr-hero-nav{display:flex;align-items:center;gap:8px}
.pr-hero-arr{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .15s}
.pr-hero-arr:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
/* Controls */
.pr-controls{max-width:var(--MAX);margin:0 auto;padding:16px 28px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.pr-tabs{display:flex;gap:0}
.pr-tab{font-family:var(--dm);font-size:14px;font-weight:500;color:var(--G4);padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2.5px solid transparent;transition:all .15s}
.pr-tab.on{color:var(--K);font-weight:600;border-bottom-color:var(--K)}
.pr-filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.pr-filters::-webkit-scrollbar{display:none}
.pr-fil{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--G5);padding:5px 14px;border:1px solid var(--G2);border-radius:20px;background:#fff;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.pr-fil.on,.pr-fil:hover{background:var(--K);color:#fff;border-color:var(--K)}
/* Grid */
.pr-grid{max-width:var(--MAX);margin:0 auto;padding:16px 28px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pr-c{background:#fff;border:1px solid var(--G2);border-radius:12px;padding:20px;cursor:pointer;transition:all .2s}
.pr-c:hover{border-color:#ccc;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.pr-c-cat{font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--G4);margin-bottom:8px}
.pr-c-q{font-family:var(--bg);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--K);margin-bottom:14px}
.pr-c-opts{margin-bottom:10px}
.pr-c-opt{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--G2)}
.pr-c-opt:last-child{border-bottom:none}
.pr-c-opt span{font-family:var(--dm);font-size:13px;color:var(--K)}
.pr-pill{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:5px 14px;border-radius:20px;font-family:var(--dm);font-size:13px;font-weight:700;cursor:pointer;transition:all .25s;border:none}
.pr-pill.yes{background:rgba(22,163,74,.1);color:#16a34a}
.pr-pill.yes:hover{background:rgba(22,163,74,.2)}
.pr-pill.yes.on{background:#16a34a;color:#fff;animation:prVote .35s ease}
.pr-pill.no{background:rgba(239,68,68,.08);color:#ef4444}
.pr-pill.no:hover{background:rgba(239,68,68,.18)}
.pr-pill.no.on{background:#ef4444;color:#fff;animation:prVote .35s ease}
@keyframes prVote{0%{transform:scale(1)}40%{transform:scale(.85)}100%{transform:scale(1)}}
.pr-c-foot{display:flex;justify-content:space-between;align-items:center;font-family:var(--dm);font-size:10px;color:var(--G4);padding-top:12px;border-top:1px solid var(--G2)}
.pr-c-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.pr-c-top .pr-c-q{flex:1;margin-bottom:0}
.pr-c-gauge{flex-shrink:0;position:relative;width:72px;height:45px}
.pr-c-gauge svg{display:block}
.pr-c-gauge-num{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--bg);font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--K);line-height:1}
.pr-c-bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}

.pr-c-btn{font-family:var(--dm);font-size:15px;font-weight:700;padding:12px;border:none;border-radius:10px;cursor:pointer;transition:all .25s;text-align:center}
.pr-c-btn.yes{background:#dcfce7;color:#16a34a}
.pr-c-btn.yes:hover{background:#bbf7d0}
.pr-c-btn.yes.on{background:#16a34a;color:#fff;animation:prVote .4s ease;box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.pr-c-btn.no{background:#fee2e2;color:#dc2626}
.pr-c-btn.no:hover{background:#fecaca}
.pr-c-btn.no.on{background:#dc2626;color:#fff;animation:prVote .4s ease;box-shadow:0 0 0 3px rgba(220,38,38,.2)}
.pr-c-icons{display:flex;gap:2px}
.pr-c-ico{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--G4);transition:all .15s;border-radius:4px}
.pr-c-ico:hover{color:var(--K);background:var(--G1)}
.pr-md-share{font-family:var(--dm);font-size:11px;font-weight:600;color:var(--K);background:var(--G1);border:1px solid var(--G2);padding:5px 12px;border-radius:6px;cursor:pointer;margin-left:auto;transition:all .15s}
.pr-md-share:hover{background:var(--K);color:#fff;border-color:var(--K)}
.pr-crt-custom{margin-top:-8px !important;margin-bottom:14px !important}
/* Ranking */
.pr-rank{max-width:var(--MAX);margin:0 auto;padding:16px 28px 40px}
.pr-rr{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;border:1px solid var(--G2);border-radius:10px;margin-bottom:8px;transition:background .15s}
.pr-rr:hover{background:var(--G1)}
.pr-rr.top{background:rgba(250,238,210,.3);border-color:rgba(242,186,73,.2)}
.pr-rr-pos{font-size:18px;min-width:28px;text-align:center}
.pr-rr-av{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:12px;font-weight:700;flex-shrink:0}
.pr-rr-info{flex:1;min-width:0}
.pr-rr-nm{font-family:var(--dm);font-size:13px;font-weight:600}
.pr-rr-sub{font-family:var(--dm);font-size:10px;color:var(--G4)}
.pr-rr-pts{font-family:var(--bg);font-size:15px;font-weight:700;min-width:70px;text-align:right;color:var(--K)}
/* Modal */
.pr-ov{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;overscroll-behavior:contain}
.pr-md{background:#fff;width:100%;max-width:560px;border-radius:14px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
.pr-md-sm{max-width:440px}
.pr-md-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--G2);font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--G4)}
.pr-md-top button{border:none;background:none;font-size:18px;color:var(--G4);cursor:pointer;padding:4px 8px;border-radius:4px}
.pr-md-top button:hover{background:var(--G1);color:var(--K)}
.pr-md-q{font-family:var(--bg);font-size:20px;font-weight:700;line-height:1.25;padding:18px 20px 8px}
.pr-md-meta{display:flex;gap:16px;padding:0 20px 16px;font-family:var(--dm);font-size:11px;color:var(--G4)}
.pr-md-vote{padding:0 20px 18px}
.pr-md-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pr-vb{font-family:var(--dm);font-size:14px;font-weight:700;padding:13px;border:none;border-radius:8px;cursor:pointer;transition:all .25s;text-align:center}
.pr-vb.yes{background:rgba(22,163,74,.1);color:#16a34a}
.pr-vb.yes:hover,.pr-vb.yes.on{background:#16a34a;color:#fff}
.pr-vb.no{background:rgba(239,68,68,.08);color:#ef4444}
.pr-vb.no:hover,.pr-vb.no.on{background:#ef4444;color:#fff}
.pr-vb.on{animation:prVote .35s ease}
.pr-md-bar{height:4px;background:var(--G2);border-radius:2px;overflow:hidden}
.pr-md-bar div{height:100%;background:#16a34a;border-radius:2px;transition:width .6s}
.pr-md-multi{padding:0 20px 18px}
.pr-md-opt{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--G2)}
.pr-md-opt:last-child{border-bottom:none}
.pr-md-opt span{font-family:var(--dm);font-size:14px}
.pr-md-cms{padding:16px 20px;border-top:1px solid var(--G2);font-family:var(--dm);font-size:13px}
.pr-md-inp{display:flex;gap:8px;margin:10px 0 14px}
.pr-md-inp input{flex:1;border:1px solid var(--G2);padding:9px 12px;font-family:var(--dm);font-size:12px;border-radius:6px;outline:none}
.pr-md-inp input:focus{border-color:var(--K)}
.pr-md-inp button{font-family:var(--dm);font-size:11px;font-weight:600;background:var(--K);color:#fff;border:none;padding:9px 14px;border-radius:6px;cursor:pointer}
.pr-cm{padding:8px 0;border-bottom:1px solid var(--G2);font-size:12px;line-height:1.5}
.pr-cm:last-child{border-bottom:none}
.pr-cm strong{margin-right:6px}
.pr-cm span{font-size:10px;color:var(--G4)}
.pr-cm-e{font-size:12px;color:var(--G4);text-align:center;padding:14px 0}
/* Create */
.pr-crt{padding:18px 20px}
.pr-crt label{display:block;font-family:var(--dm);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--G4);margin-bottom:5px}
.pr-crt input,.pr-crt select{width:100%;padding:9px 12px;border:1.5px solid var(--G2);border-radius:6px;background:#fff;font-family:var(--dm);font-size:13px;outline:none;margin-bottom:14px}
.pr-crt input:focus,.pr-crt select:focus{border-color:var(--K)}
.pr-crt-types{display:flex;gap:8px;margin-bottom:14px}
.pr-crt-t{flex:1;font-family:var(--dm);font-size:12px;font-weight:600;padding:10px;border:1.5px solid var(--G2);border-radius:6px;background:#fff;cursor:pointer;text-align:center;transition:all .15s}
.pr-crt-t.on{background:var(--K);color:#fff;border-color:var(--K)}
.pr-crt-opt{margin-bottom:8px !important}
.pr-crt-add{font-family:var(--dm);font-size:11px;font-weight:600;color:var(--K);background:none;border:1px dashed var(--G2);padding:8px;border-radius:6px;width:100%;cursor:pointer;margin-bottom:14px;transition:all .15s}
.pr-crt-add:hover{border-color:var(--K);background:var(--G1)}
.pr-crt-note{font-family:var(--dm);font-size:10px;color:var(--G4);line-height:1.5;margin-bottom:14px;padding:10px;background:var(--G1);border-radius:6px}
.pr-crt-go{width:100%;background:var(--K);color:#fff;padding:12px;font-family:var(--dm);font-size:13px;font-weight:600;border:none;border-radius:8px;cursor:pointer}
.pr-crt-go:hover{opacity:.85}
@media(max-width:1100px){.pr-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.pr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
.pr{min-height:calc(100vh - var(--MOB) - var(--BOTNAV))}
.pr-bar{padding:10px 16px;top:var(--MOB)}
.pr-hero{padding:0 16px}
.pr-hero-inner{padding:24px 0}
.pr-hero-q{font-size:20px}
.pr-hero-pct{font-size:36px}
.pr-hero-versus{flex-direction:row;gap:0}
.pr-hero-side{padding:14px 10px;max-width:140px}
.pr-hero-vote{padding:8px 18px;font-size:12px}
.pr-hero-vs{margin:0 10px;font-size:12px}
.pr-controls{padding:14px 16px 0}
.pr-grid{padding:14px 16px 40px;grid-template-columns:1fr;gap:10px}
.pr-rank{padding:14px 16px 40px}
.pr-c{padding:16px}
.pr-c-gauge-num{font-size:17px}
.pr-c-btn{font-size:14px;padding:10px}
.pr-md{border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:85vh}
.pr-ov{align-items:flex-end;padding:0}
}
.luna-shell{max-width:680px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - var(--NAV) - 28px);border-left:1px solid var(--G2);border-right:1px solid var(--G2);background:var(--W);overflow:hidden}
.luna-scroll-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.luna-welcome{padding:40px 28px 0}
.luna-chat-name{font-family:var(--dm);font-size:14px;font-weight:600;color:var(--K)}
.luna-greeting{font-family:var(--bg);font-size:clamp(28px,5vw,38px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--K);margin-bottom:8px}
.luna-sub{font-family:var(--dm);font-size:15px;color:var(--G4);font-weight:300;line-height:1.5}
.luna-tabs{display:flex;gap:0;padding:0 28px;margin-top:32px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--G2)}
.luna-tabs::-webkit-scrollbar{display:none}
.luna-tab{
font-family:var(--dm);font-size:13px;font-weight:400;
color:var(--G4);padding:12px 16px 12px 0;white-space:nowrap;
border-bottom:2.5px solid transparent;cursor:pointer;
transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;
flex-shrink:0;
}
.luna-tab:first-child{padding-left:0}
.luna-tab:hover{color:var(--K)}
.luna-tab.on{color:var(--K);font-weight:600;border-bottom-color:var(--K)}
.luna-suggestions{padding:0 28px 28px}
.luna-q{
display:flex;align-items:flex-start;gap:14px;
width:100%;text-align:left;padding:20px 0;
border-bottom:1px solid var(--G2);
background:none;border-top:none;border-left:none;border-right:none;
cursor:pointer;transition:background .15s;font-family:var(--dm);
font-size:15px;font-weight:400;color:var(--K);line-height:1.45;
}
.luna-q:last-child{border-bottom:none}
.luna-q:hover{opacity:.6}
.luna-q-icon{width:18px;height:18px;flex-shrink:0;color:var(--G4);margin-top:2px}
.luna-spacer{flex:1}
.luna-chat-top{
display:flex;align-items:center;justify-content:space-between;
padding:16px 24px;border-bottom:1px solid var(--G2);flex-shrink:0;
background:rgba(255,255,255,.92);backdrop-filter:blur(20px);
}

.luna-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--G4);cursor:pointer;border:none;background:none;transition:color .15s;border-radius:6px}
.luna-back:hover{background:var(--G1);color:var(--K)}
.luna-back svg{width:18px;height:18px}
.luna-msgs{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.luna-msgs::-webkit-scrollbar{width:0}
.luna-row{display:flex;align-items:flex-end;gap:8px;animation:fadeUp .25s ease}
.luna-row.user{flex-direction:row-reverse}
.luna-row.user+.luna-row.ai,.luna-row.ai+.luna-row.user{margin-top:14px}
.luna-bub{max-width:82%;padding:12px 16px;font-family:var(--dm);font-size:14px;line-height:1.6;word-break:break-word;font-weight:300}
.luna-row.ai .luna-bub{background:var(--G1);border:1px solid var(--G2);border-radius:2px 16px 16px 16px;color:var(--K)}
.luna-row.user .luna-bub{background:var(--K);color:var(--W);border-radius:16px 16px 2px 16px;font-weight:400}
.luna-typing{background:var(--G1);border:1px solid var(--G2);border-radius:2px 16px 16px 16px;padding:14px 18px;display:flex;align-items:center;gap:5px}
.luna-typing span{width:5px;height:5px;background:var(--G4);border-radius:50%;animation:askBounce 1.2s infinite ease-in-out}
.luna-typing span:nth-child(2){animation-delay:.18s}
.luna-typing span:nth-child(3){animation-delay:.36s}
@keyframes askBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.luna-input-bar{padding:16px 24px;flex-shrink:0;border-top:1px solid var(--G2);background:var(--G1)}
.luna-scroll-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:center}
.luna-input-wrap{display:flex;align-items:center;gap:10px;background:var(--W);border:1px solid var(--G2);padding:10px 12px 10px 18px;border-radius:24px;transition:border-color .15s}
.luna-input-wrap:focus-within{border-color:var(--K)}
.luna-input{flex:1;border:none;outline:none;font-family:var(--dm);font-size:14px;color:var(--K);background:transparent;resize:none;max-height:100px;line-height:1.5;font-weight:300}
.luna-input::placeholder{color:var(--G3)}
.luna-send{width:36px;height:36px;background:var(--K);color:var(--W);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:opacity .15s;flex-shrink:0;border-radius:50%}
.luna-send:disabled{opacity:.15;cursor:default}
.luna-send svg{width:14px;height:14px;margin-left:1px}
.luna-disclaimer{font-family:var(--dm);font-size:10px;color:var(--G4);text-align:center;margin-top:10px;line-height:1.5;font-weight:300}
@media(max-width:768px){
.luna-shell{height:calc(100vh - var(--MOB) - var(--BOTNAV));border:none}
.luna-welcome{padding:28px 20px 0}
.luna-tabs{padding:0 20px;margin-top:24px}
.luna-suggestions{padding:0 20px 20px}
.luna-msgs{padding:16px 20px}
.luna-chat-top{padding:14px 20px}
.luna-input-bar{padding:12px 16px}
.luna-greeting{font-size:28px}
.luna-q{font-size:14px;padding:18px 0}
}
.vf-page{display:flex;flex-direction:column;background:var(--K);min-height:calc(100vh - var(--NAV))}
.vf-top{
height:40px;display:flex;align-items:center;
justify-content:space-between;padding:0 28px;
border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;
}
.vf-label{font-family:var(--dm);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.vf-ctr{font-family:var(--dm);font-size:10px;color:rgba(255,255,255,.2)}
.vf-feed{
flex:1;overflow-y:scroll;
scroll-snap-type:y mandatory;
-webkit-overflow-scrolling:touch;
height:calc(100vh - var(--NAV) - 28px - 40px);
scrollbar-width:none;
}
.vf-feed::-webkit-scrollbar{display:none}
.vf-item{
height:calc(100vh - var(--NAV) - 28px - 40px);
scroll-snap-align:start;
position:relative;display:flex;align-items:flex-end;overflow:hidden;
}
.vf-bg{position:absolute;inset:0}
.vf-bg-img{width:100%;height:100%;transition:transform .5s}
.vf-grad{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.08) 70%,transparent 100%);
}
.vf-content{position:relative;flex:1;padding:0 80px 36px 32px}
.vf-idx{
font-family:var(--dm);font-size:10px;font-weight:500;
letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.35);margin-bottom:12px;
display:flex;align-items:center;gap:10px;
}
.vf-idx::before{content:'';width:20px;height:1px;background:rgba(255,255,255,.2)}
.vf-cat{
display:inline-block;font-family:var(--dm);font-size:9.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.2);
padding:3px 10px;margin-bottom:14px;
}
.vf-hl{
font-family:var(--bg);font-size:clamp(22px,3vw,40px);font-weight:700;
color:var(--W);line-height:1.06;letter-spacing:-.03em;
margin-bottom:12px;max-width:640px;
}
.vf-desc{
font-family:var(--dm);font-size:13.5px;color:rgba(255,255,255,.5);
line-height:1.6;max-width:480px;margin-bottom:16px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;font-weight:300;
}
.vf-by{
font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.3);
letter-spacing:.03em;display:flex;align-items:center;gap:8px;
}
.vf-by::before{content:'';width:12px;height:1px;background:rgba(255,255,255,.2)}
.vf-actions{
position:absolute;right:20px;bottom:90px;
display:flex;flex-direction:column;align-items:center;gap:24px;
}
.vf-btn{
display:flex;flex-direction:column;align-items:center;gap:5px;
background:none;border:none;cursor:pointer;color:var(--W);
-webkit-tap-highlight-color:transparent;
}
.vf-ico{
width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);
transition:background .2s;
}
.vf-btn:hover .vf-ico,.vf-btn.liked .vf-ico{background:rgba(255,255,255,.18)}
.vf-ico svg{width:21px;height:21px;stroke-width:1.75}
.vf-btn-n{font-family:var(--dm);font-size:10px;font-weight:500;color:rgba(255,255,255,.45)}
.vf-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08)}
.vf-progress-fill{height:100%;background:rgba(255,255,255,.45)}
.vf-ad{display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.vf-ad-inner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px}
.vf-ad-label{font-family:var(--dm);font-size:8px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.25);text-transform:uppercase}
.vf-ad-box{width:280px;height:360px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:13px;color:rgba(255,255,255,.2);text-align:center}
.vf-ad-skip{font-family:var(--dm);font-size:12px;font-weight:600;color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);padding:10px 28px;border-radius:20px;cursor:pointer;transition:all .15s}
.vf-ad-skip:hover{background:rgba(255,255,255,.15);color:#fff}
@media(min-width:769px){
.vf-feed{
display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
height:calc(100vh - var(--NAV) - 28px - 40px);
}
.vf-item{
height:100%;width:380px;flex-shrink:0;
scroll-snap-align:start;
border-right:1px solid rgba(255,255,255,.05);
}
.vf-content{padding:0 16px 30px 22px}
.vf-actions{right:14px;bottom:64px;gap:18px}
.vf-ico{width:40px;height:40px}
.vf-ico svg{width:18px;height:18px}
}
@media(max-width:768px){
.vf-page{min-height:calc(100vh - var(--MOB))}
.vf-top{padding:0 16px;height:36px}
.vf-feed{height:calc(100vh - var(--MOB) - var(--BOTNAV) - 36px)}
.vf-item{height:calc(100vh - var(--MOB) - var(--BOTNAV) - 36px)}
.vf-content{padding:0 70px 28px 20px}
.vf-actions{right:12px;bottom:60px;gap:20px}
.vf-ico{width:42px;height:42px}
.vf-ico svg{width:19px;height:19px}
.vf-hl{font-size:22px}
.vf-desc{font-size:12.5px;-webkit-line-clamp:2}
}
.home-section-divider{display:flex;align-items:center;justify-content:space-between;padding:28px 0 0;border-top:2px solid var(--K);margin-top:16px}
.hsd-left{display:flex;flex-direction:column;gap:2px}
.hsd-eyebrow{font-family:var(--dm);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--G4)}
.hsd-title{font-family:var(--bg);font-size:20px;font-weight:700;letter-spacing:-.04em;line-height:1}
.hsd-more{font-family:var(--dm);font-size:12px;font-weight:600;color:var(--K);display:flex;align-items:center;gap:4px;padding:8px 14px;border:1.5px solid var(--G2);border-radius:4px;transition:all .15s;white-space:nowrap;flex-shrink:0}
.hsd-more:hover{background:var(--K);color:var(--W);border-color:var(--K)}
.hsd-more svg{width:11px;height:11px;stroke-width:2.5}
.hv-scroll{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--G2);margin-top:16px}
.hv-scroll::-webkit-scrollbar{display:none}
.hv-card{flex-shrink:0;width:155px;border-right:1px solid var(--G2);cursor:pointer;overflow:hidden;transition:background .15s}
.hv-card:hover{background:var(--G1)}
.hv-thumb{width:155px;height:276px;position:relative;overflow:hidden}
.hv-thumb-bg{width:100%;height:100%;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.hv-card:hover .hv-thumb-bg{transform:scale(1.04)}
.hv-thumb-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,transparent 100%)}
.hv-thumb-content{position:absolute;bottom:10px;left:10px;right:10px}
.hv-play-sm{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);margin-bottom:8px}
.hv-play-sm svg{width:12px;height:12px;margin-left:2px}
.hv-cat{font-family:var(--dm);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:4px}
.hv-hl{font-family:var(--bg);font-size:13px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hv-dur{position:absolute;top:8px;right:8px;font-family:var(--dm);font-size:9.5px;font-weight:600;color:var(--W);background:rgba(0,0,0,.65);padding:2px 6px;border-radius:3px}
.hv-stats{padding:8px 10px;display:flex;gap:10px;border-top:1px solid var(--G2)}
.hv-stat{font-family:var(--dm);font-size:10px;color:var(--G4);display:flex;align-items:center;gap:3px}
.hv-stat svg{width:11px;height:11px;stroke-width:1.75}
@media(min-width:769px){
.hv-scroll{overflow-x:unset;display:grid;grid-template-columns:repeat(6,1fr)}
.hv-card{width:auto}
.hv-thumb{width:100%;height:auto;aspect-ratio:9/16}
}
.hx-feed{border-top:1px solid var(--G2);margin-top:16px}
.hx-post{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--G2);transition:background .12s;cursor:pointer}
.hx-post:last-child{border-bottom:none}
.hx-post:hover{background:var(--G1)}
.hx-av{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;font-weight:700;color:var(--W)}
.hx-body{flex:1;min-width:0}
.hx-top{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.hx-nm{font-family:var(--dm);font-size:13px;font-weight:700}
.hx-time{font-family:var(--dm);font-size:11px;color:var(--G4)}
.hx-dot{color:var(--G3);font-size:10px}
.hx-txt{font-family:var(--dm);font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;font-weight:300;color:var(--K)}
.hx-actions{display:flex;gap:0;margin-top:10px}
.hx-act{display:flex;align-items:center;gap:4px;font-family:var(--dm);font-size:11px;color:var(--G4);padding:5px 10px;border-radius:4px;background:none;border:none;cursor:pointer;transition:all .15s}
.hx-act svg{width:13px;height:13px;stroke-width:1.75}
.hx-act:first-child{padding-left:0}
.hx-act:hover{color:var(--K)}
.home-preds{padding-bottom:8px}
.hp-scroll{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--G2);margin-top:16px}
.hp-scroll::-webkit-scrollbar{display:none}
.hp-card{flex-shrink:0;width:300px;border-right:1px solid var(--G2);padding:20px 18px;background:var(--W);cursor:pointer;transition:background .15s}
.hp-card:hover{background:var(--G1)}
.hp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hp-cat-badge{font-family:var(--dm);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--G4)}
.hp-trend{font-family:var(--dm);font-size:9px;font-weight:700;color:var(--K);letter-spacing:.04em;background:var(--G1);padding:2px 8px;border:1px solid var(--G2)}
.hp-q{font-family:var(--bg);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.025em;color:var(--K);flex:1}
.hp-q-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.hp-gauge{flex-shrink:0;position:relative;width:68px;height:42px}
.hp-gauge svg{display:block}
.hp-gauge-num{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--bg);font-size:18px;font-weight:800;letter-spacing:-.04em;color:var(--K);line-height:1}
.hp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.hp-btn{font-family:var(--dm);font-size:14px;font-weight:700;padding:11px 8px;border:none;border-radius:10px;cursor:pointer;transition:all .25s;text-align:center}
.hp-btn-y{background:#dcfce7;color:#16a34a}
.hp-btn-y:hover{background:#bbf7d0}
.hp-btn-y.voted{background:#16a34a;color:#fff;animation:hpVote .4s ease;box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.hp-btn-n{background:#fee2e2;color:#dc2626}
.hp-btn-n:hover{background:#fecaca}
.hp-btn-n.voted{background:#dc2626;color:#fff;animation:hpVote .4s ease;box-shadow:0 0 0 3px rgba(220,38,38,.2)}
@keyframes hpVote{0%{transform:scale(1)}30%{transform:scale(.88)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.hp-footer{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--dm);font-size:10px;color:var(--G4);border-top:1px solid var(--G2);padding-top:12px}
/* Home prediction modal */
.hp-ov{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeUp .2s ease}
.hp-modal{background:#fff;width:100%;max-width:420px;border-radius:14px;padding:0;overflow:hidden}
.hp-modal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--G2);font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--G4)}
.hp-modal-top button{border:none;background:none;font-size:18px;color:var(--G4);cursor:pointer;padding:4px 8px;border-radius:4px}
.hp-modal-top button:hover{background:var(--G1);color:var(--K)}
.hp-modal-q{font-family:var(--bg);font-size:20px;font-weight:700;line-height:1.25;padding:18px 20px 16px;color:var(--K)}
.hp-modal-stats{display:flex;align-items:center;justify-content:center;gap:0;padding:0 20px 14px}
.hp-modal-pct{text-align:center;min-width:80px;font-family:var(--dm);font-size:11px;color:var(--G4)}
.hp-modal-big{display:block;font-family:var(--bg);font-size:40px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--K);margin-bottom:4px}
.hp-modal-big.no{color:var(--G4)}
.hp-modal-sep{width:1px;height:44px;background:var(--G2);margin:0 24px;flex-shrink:0}
.hp-modal-bar{height:4px;background:var(--G2);border-radius:2px;margin:0 20px 16px;overflow:hidden}
.hp-modal-bar div{height:100%;background:#16a34a;border-radius:2px;transition:width .6s}
.hp-modal-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 14px}
.hp-modal-vb{font-family:var(--dm);font-size:15px;font-weight:700;padding:13px;border:none;border-radius:10px;cursor:pointer;transition:all .25s;text-align:center}
.hp-modal-vb.yes{background:#dcfce7;color:#16a34a}
.hp-modal-vb.yes:hover,.hp-modal-vb.yes.on{background:#16a34a;color:#fff;animation:hpVote .4s ease}
.hp-modal-vb.no{background:#fee2e2;color:#dc2626}
.hp-modal-vb.no:hover,.hp-modal-vb.no.on{background:#dc2626;color:#fff;animation:hpVote .4s ease}
.hp-modal-info{display:flex;gap:16px;justify-content:center;font-family:var(--dm);font-size:11px;color:var(--G4);padding:0 20px 16px}
.hp-modal-cta{display:block;width:100%;padding:14px;background:var(--K);color:#fff;font-family:var(--dm);font-size:13px;font-weight:600;border:none;cursor:pointer;transition:opacity .15s;text-align:center}
.hp-modal-cta:hover{opacity:.85}
@media(min-width:769px){
.hp-scroll{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:unset}
.hp-card{width:auto}
}
@media(max-width:860px){
.g-asym{grid-template-columns:1fr}
.op-grid{grid-template-columns:1fr}
.op-card:nth-child(even){border-right:none;padding-left:0;border-top:1px solid var(--G2)}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1100px){
.top-story{grid-template-columns:1fr 360px;gap:36px}
.card-feat{grid-template-columns:1fr 340px;gap:24px}
}
@media(max-width:860px){
.top-story{grid-template-columns:1fr;gap:24px}
.ts-img{aspect-ratio:16/9;width:100%}
.sub-hero{grid-template-columns:1fr 1fr}
.sh-item:last-child{display:none}
.card-feat{grid-template-columns:1fr;gap:16px}
.card-feat-hl{font-size:22px}
.g2-row{grid-template-columns:1fr}
.peo-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
.nav,.ticker{display:none}
.mob-hd{display:flex}
.mob-nav{display:block}
.home-wrap{padding:0 16px 20px;overflow-x:hidden}
.peo-grid{margin:0 -16px}
.hv-scroll{margin:0 -16px}
.hx-feed{margin:0 -16px}
.hp-scroll{margin:0 -16px}
.top-story{
grid-template-columns:1fr;gap:0;
padding:20px 0 24px;
border-bottom:1px solid var(--G2);
}
.ts-img{order:-1;width:100%;aspect-ratio:16/9;border-radius:14px;margin-bottom:18px;overflow:hidden}
.ts-hl{font-size:26px;line-height:1.1;margin-bottom:12px}
.ts-desc{font-size:14.5px;margin-bottom:16px}
.hero2{min-height:320px}
.hero2-content{padding:28px 20px}
.hero2-hl{font-size:24px}
.hero2-desc{font-size:14px}
.hero3-grid{grid-template-columns:1fr}
.hero3-main{min-height:260px}
.hero3-side{flex-direction:row;overflow-x:auto;scrollbar-width:none;border-left:none;border-top:1px solid var(--G2)}
.hero3-side::-webkit-scrollbar{display:none}
.hero3-side-card{flex-shrink:0;width:220px;border-bottom:none;border-right:1px solid var(--G2)}
.sub-hero{
display:flex;overflow-x:auto;gap:0;scrollbar-width:none;border-bottom:1px solid var(--G2);
margin:0 -16px;
}
.sub-hero::-webkit-scrollbar{display:none}
.sh-item{flex-shrink:0;width:220px;padding:16px 14px;border-right:1px solid var(--G2);border-bottom:none !important;overflow:hidden}
.sh-item:last-child{display:block}
.sh-img{width:100%;height:110px;aspect-ratio:unset;border-radius:8px;margin-bottom:10px}
.sh-hl{font-size:14px}
.sec-label{padding:24px 0 14px;margin-bottom:0}
.sec{margin-bottom:12px}
.g3,.g4,.g2-row{grid-template-columns:1fr;border-top:none;display:flex;flex-direction:column}
.card-feat{grid-template-columns:1fr;gap:0;padding:0 0 16px;border-top:none}
.card-feat-img{aspect-ratio:16/9;border-radius:10px;margin-bottom:14px}
.card-feat-hl{font-size:20px;margin-bottom:8px}
.card-feat-desc{font-size:13.5px;margin-bottom:10px;-webkit-line-clamp:2}
.card-v{padding:16px 0;border-right:none;border-bottom:1px solid var(--G2)}
.card-v:last-child{border-bottom:none}
.card-v-img{aspect-ratio:16/9;border-radius:10px;margin-bottom:12px}
.card-v-hl{font-size:16px;margin-bottom:6px}
.card-v-desc{-webkit-line-clamp:2;font-size:12px;margin-bottom:8px}
.card{display:flex;flex-direction:row;gap:14px;align-items:flex-start;padding:14px 0;border-right:none;border-bottom:1px solid var(--G2)}
.card:last-child{border-bottom:none}
.card-img{width:110px;height:80px;aspect-ratio:unset;margin-bottom:0;flex-shrink:0;border-radius:8px}
.card-body-col{flex:1;min-width:0}
.card-cat{margin-bottom:4px;font-size:9px}
.card-hl{font-size:14.5px;margin-bottom:4px;line-height:1.3}
.card-desc{display:none}
.card-foot{padding-top:6px;font-size:10px}
.g-asym{grid-template-columns:1fr;border-top:none}
.card.lg{flex-direction:column;padding:16px 0}
.card.lg .card-img{width:100%;height:auto;aspect-ratio:16/9;margin-bottom:12px;border-radius:10px}
.card.compact{flex-direction:row;padding:14px 0;border-bottom:1px solid var(--G2) !important;border-right:none !important}
.op-grid{grid-template-columns:1fr;border-top:none}
.op-card{padding:18px 0;border-right:none;border-top:1px solid var(--G2)}
.op-card:first-child{border-top:none}
.op-card:nth-child(even){padding-left:0;border-left:none;border-top:1px solid var(--G2)}
.g-list{border-top:none}
.list-item{padding:14px 0;gap:14px}
.li-hl{font-size:15px}
.li-img{width:80px;height:58px;border-radius:8px}
.mkt-strip{margin:0 -16px;max-width:100vw}
.fin-hero{margin:0 -16px;min-height:220px}
.fin-hero-content{padding:20px}
.fin-hero-hl{font-size:20px;word-break:break-word}
.fin-hero-desc{font-size:13px;-webkit-line-clamp:2}
.fin-scroll{
display:flex;overflow-x:auto;gap:0;
grid-template-columns:unset;margin:0 -16px;
scrollbar-width:none;border-top:1px solid var(--G2);
-webkit-overflow-scrolling:touch;
}
.fin-scroll::-webkit-scrollbar{display:none}
.fin-scroll-card{
flex-shrink:0;width:75vw;max-width:280px;padding:16px;
border-right:1px solid var(--G2);border-bottom:none;
}
.fin-scroll-card:last-child{border-right:none}
.fin-scroll-img{border-radius:8px;margin-bottom:12px}
.fin-scroll-hl{font-size:15px;line-height:1.32}
.peo-grid{
display:flex;overflow-x:auto;gap:0;
grid-template-columns:unset;grid-template-rows:unset;
margin:0 -16px;scrollbar-width:none;border-top:1px solid var(--G2);
-webkit-overflow-scrolling:touch;
}
.peo-grid::-webkit-scrollbar{display:none}
.peo-card{
flex-shrink:0;width:70vw;max-width:260px;aspect-ratio:auto;
height:320px;border-right:1px solid rgba(255,255,255,.08);
}
.peo-content{padding:14px 16px}
.peo-hl{font-size:14px;-webkit-line-clamp:2}
.peo-play{width:40px;height:40px}
.peo-play svg{width:14px;height:14px}
.peo-cat{font-size:8px;margin-bottom:4px}
.peo-meta{font-size:10px}
.tend-grid{grid-template-columns:1fr;border-top:none}
.tend-item{padding:18px 0;border-right:none;border-bottom:1px solid var(--G2);gap:14px}
.tend-item:nth-child(even){padding-left:0;border-right:none}
.tend-item:last-child{border-bottom:none}
.tend-num{font-size:40px;width:40px}
.tend-hl{font-size:15px}
.tend-stats{font-size:11px}
}
@media(max-width:480px){
.ts-hl{font-size:22px}
}
/* ═══ PARA TI — Social discovery ═══ */
.home-parati{margin:0 -16px;padding:0 16px 20px}
.pt-feed{display:flex;flex-direction:column;gap:0;margin-top:16px;border-top:1px solid var(--G2)}
.pt-card{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--G2);cursor:pointer;transition:background .12s}
.pt-card:hover{background:var(--G1);margin:0 -8px;padding:20px 8px;border-radius:6px}
.pt-card-img{width:140px;height:95px;border-radius:8px;background:var(--G2);flex-shrink:0}
.pt-card-body{flex:1;min-width:0;display:flex;flex-direction:column}
.pt-card-hdr{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pt-card-cat{font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#dc2626}
.pt-card-time{font-family:var(--dm);font-size:10px;color:var(--G4)}
.pt-card-title{font-family:var(--bg);font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--K);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt-card-preview{font-family:var(--dm);font-size:13px;font-weight:300;line-height:1.5;color:var(--G5);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pt-card-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.pt-card-author{font-family:var(--dm);font-size:11px;font-weight:600;color:var(--K)}
.pt-card-reads{font-family:var(--dm);font-size:10px;color:var(--G4)}
@media(max-width:768px){
.pt-card-img{width:100px;height:72px}
.pt-card-title{font-size:14px}
.pt-card-preview{display:none}
}

/* ═══ AD SLOTS ═══ */
.ad-slot{display:flex;flex-direction:column;align-items:center;padding:12px 0;margin:16px 0}
.ad-slot-label{font-family:var(--dm);font-size:7px;font-weight:700;letter-spacing:.16em;color:var(--G4);text-transform:uppercase;margin-bottom:4px}
.ad-slot-box{background:var(--G1);border:1px dashed var(--G3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;color:var(--G4);text-align:center}
.ad-horizontal{width:100%}
.ad-horizontal .ad-slot-box{width:100%;max-width:728px}
.ad-square .ad-slot-box{width:300px;height:250px}
.ad-vertical .ad-slot-box{width:160px;height:600px}
.ad-banner{width:100%}
.ad-banner .ad-slot-box{width:100%;max-width:970px}
@media(max-width:768px){
.ad-slot-box{max-width:100% !important;width:100% !important}
.ad-vertical .ad-slot-box{width:100% !important;height:250px}
}

/* ═══ ARTICLE PAGE ═══ */
.art{background:#fff}
.art-layout{max-width:var(--MAX);margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:0;padding:0 28px}
.art-main{padding-right:28px}
.art-cat-badge{display:inline-block;font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dc2626;margin-bottom:14px}
.art-title{font-family:var(--bg);font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--K);margin-bottom:14px}
.art-subtitle{font-family:var(--dm);font-size:18px;font-weight:300;line-height:1.55;color:var(--G5);margin-bottom:24px}
.art-meta-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--G2)}
.art-author{display:flex;align-items:center;gap:10px}
.art-author-av{width:40px;height:40px;border-radius:50%;background:var(--K);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:12px;font-weight:700;flex-shrink:0}
.art-author-info{display:flex;flex-direction:column}
.art-author-nm{font-family:var(--dm);font-size:13px;font-weight:600;color:var(--K)}
.art-author-role{font-family:var(--dm);font-size:11px;color:var(--G4)}
.art-author-meta{display:flex;gap:6px;font-family:var(--dm);font-size:11px;color:var(--G4);margin-left:auto;padding-left:16px}
.art-share{display:flex;gap:6px}
.art-share-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--G2);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--G5);transition:all .15s}
.art-share-btn:hover{border-color:var(--K);color:var(--K);background:var(--G1)}
.art-body{margin-bottom:32px}
.art-p{font-family:var(--dm);font-size:17px;font-weight:300;line-height:1.8;color:#2a2a2a;margin-bottom:24px}
.art-h2{font-family:var(--bg);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--K);margin:36px 0 16px;padding-top:8px}
.art-quote{margin:32px 0;padding:24px 28px;border-left:3px solid var(--K);background:var(--G1);border-radius:0 8px 8px 0}
.art-quote p{font-family:var(--dm);font-size:18px;font-weight:400;font-style:italic;line-height:1.6;color:var(--K);margin-bottom:8px}
.art-quote cite{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--G4);font-style:normal}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:32px;border-bottom:1px solid var(--G2)}
.art-tag{font-family:var(--dm);font-size:11px;font-weight:500;color:var(--G5);padding:5px 14px;border:1px solid var(--G2);border-radius:20px;cursor:pointer;transition:all .15s}
.art-tag:hover{background:var(--K);color:#fff;border-color:var(--K)}
/* Sidebar */
.art-sidebar{padding:20px 38px 0 38px;border-left:1px solid var(--G2)}
.art-sb-sticky-ad{position:sticky;top:calc(var(--NAV) + 20px);margin-top:20px;text-align:center}
.art-sb-sticky-box{width:300px;height:600px;background:var(--G1);border:1px dashed var(--G3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;color:var(--G4);margin:0 auto}
.art-sb-h{font-family:var(--bg);font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px;color:var(--K)}
.art-sb-trending{margin-bottom:20px}
.art-sb-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--G2);cursor:pointer;transition:opacity .12s}
.art-sb-item:hover{opacity:.6}
.art-sb-item:last-child{border-bottom:none}
.art-sb-num{font-family:var(--bg);font-size:18px;font-weight:800;color:var(--G3);min-width:22px;flex-shrink:0}
.art-sb-item-body{flex:1;min-width:0;overflow:hidden}
.art-sb-item-title{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--K);line-height:1.35;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-sb-item-meta{font-family:var(--dm);font-size:10px;color:var(--G4)}
/* Related - article previews */
.art-related{padding:32px 0 0;border-top:1px solid var(--G2);margin-top:32px}
.art-related-h{font-family:var(--bg);font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:20px;color:var(--K)}
.art-rel-card{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--G2)}
.art-rel-card:last-child{border-bottom:none}
.art-rel-img{width:160px;height:110px;border-radius:8px;background:var(--G2);flex-shrink:0}
.art-rel-content{flex:1;min-width:0;display:flex;flex-direction:column}
.art-rel-cat{font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dc2626;display:block;margin-bottom:4px}
.art-rel-title{font-family:var(--bg);font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--K);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-rel-preview{font-family:var(--dm);font-size:13px;font-weight:300;line-height:1.5;color:var(--G5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:auto}
.art-rel-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.art-rel-meta{font-family:var(--dm);font-size:10px;color:var(--G4)}
.art-rel-btn{font-family:var(--dm);font-size:11px;font-weight:600;color:var(--K);background:none;border:1px solid var(--G2);padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .15s}
.art-rel-btn:hover{background:var(--K);color:#fff;border-color:var(--K)}
/* Recommendations */
.art-recos{background:var(--G1);padding:40px 28px}
.art-recos-h{font-family:var(--bg);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--K);max-width:var(--MAX);margin:0 auto 20px}
.art-recos-grid{max-width:var(--MAX);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.art-reco-card{background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s;border:1px solid var(--G2)}
.art-reco-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.art-reco-img{width:100%;height:140px;background:var(--G2)}
.art-reco-cat{display:block;font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dc2626;padding:14px 16px 0}
.art-reco-title{font-family:var(--bg);font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--K);padding:6px 16px 0}
.art-reco-meta{display:flex;gap:10px;font-family:var(--dm);font-size:10px;color:var(--G4);padding:10px 16px 16px}
/* V1: Classic */
.art-v1 .art-hero-img{width:100%;height:clamp(280px,40vw,480px);background:var(--G2)}
.art-v1 .art-main{padding-top:32px}
/* V2: Magazine dark */
.art-v2-hero{position:relative;width:100%;min-height:clamp(420px,55vw,620px);background:var(--K);display:flex;align-items:flex-end;overflow:hidden}
.art-v2-hero-img{position:absolute;inset:0;background:var(--G2);opacity:.3}
.art-v2-hero-content{position:relative;z-index:1;width:100%;max-width:720px;padding:60px 40px}
.art-v2-hero-content .art-cat-badge{color:#fff;border:1px solid rgba(255,255,255,.25);padding:4px 12px;border-radius:4px;background:rgba(255,255,255,.08)}
.art-v2-hero-content .art-title{color:#fff;font-size:clamp(28px,4vw,46px)}
.art-v2-hero-content .art-subtitle{color:rgba(255,255,255,.55);font-size:17px}
.art-v2-author{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.art-v2-author .art-author-nm{color:#fff}
.art-v2-author .art-author-role,.art-v2-author .art-author-meta{color:rgba(255,255,255,.4)}
.art-v2-author .art-author-av{background:rgba(255,255,255,.15);color:#fff}
.art-v2-author .art-share-btn{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6);background:none}
.art-v2-author .art-share-btn:hover{border-color:#fff;color:#fff}
.art-v2 .art-main{padding-top:32px}
/* Mobile sidebar (visible on mobile only) */
.art-mob-sidebar{display:none}
@media(max-width:860px){
.art-mob-sidebar{display:block;padding:0 16px 20px;border-top:1px solid var(--G2)}
.art-mob-sidebar .art-sidebar{position:static;max-height:none;padding:20px 0 0;overflow:visible}
}
/* V3: Side-by-side hero */
.art-v3-split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(340px,40vw,480px)}
.art-v3-img{background:var(--G2)}
.art-v3-header{display:flex;flex-direction:column;justify-content:center;padding:40px 36px}
.art-v3-header .art-cat-badge{margin-bottom:16px}
.art-v3-header .art-title{font-size:clamp(22px,3vw,34px)}
.art-v3-header .art-subtitle{margin-bottom:20px}
.art-v3-header .art-author{margin-bottom:16px}
.art-v3-header .art-share{margin-top:auto}
.art-v3 .art-main{padding-top:32px}
/* Variant selector bar */
.art-variant-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0;background:var(--K);font-family:var(--dm);font-size:11px;color:rgba(255,255,255,.5)}
.art-variant-btn{font-family:var(--dm);font-size:11px;font-weight:600;color:rgba(255,255,255,.5);background:none;border:1px solid rgba(255,255,255,.15);padding:4px 14px;border-radius:4px;cursor:pointer;transition:all .15s}
.art-variant-btn.on{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}
@media(max-width:1100px){.art-layout{grid-template-columns:1fr 380px}}
@media(max-width:860px){.art-layout{grid-template-columns:1fr}.art-sidebar{display:none}.art-main{padding-right:0}.art-recos-grid{grid-template-columns:repeat(2,1fr)}.art-v3-split{grid-template-columns:1fr}}
@media(max-width:768px){
.art-layout{padding:0 16px}
.art-title{font-size:26px}
.art-subtitle{font-size:15px}
.art-meta-row{flex-direction:column;gap:14px;align-items:flex-start}
.art-author-meta{margin-left:0;padding-left:0}
.art-p{font-size:15px}
.art-h2{font-size:19px}
.art-quote{padding:18px 20px}
.art-quote p{font-size:16px}
.art-related{padding:24px 0 0;margin-top:24px}
.art-rel-img{width:100px;height:72px}
.art-rel-title{font-size:14px}
.art-recos{padding:28px 16px}
.art-recos-grid{grid-template-columns:1fr;gap:12px}
/* V1 mobile: compact header, image above title */
.art-v1 .art-hero-img{height:220px;border-radius:0}
.art-v1 .art-main{padding-top:20px}
.art-v1 .art-title{font-size:24px}
/* V2 mobile: full dark hero, title big and centered */
.art-v2-hero{min-height:380px}
.art-v2-hero-content{padding:32px 20px}
.art-v2-hero-content .art-title{font-size:26px;text-align:center}
.art-v2-hero-content .art-subtitle{text-align:center;font-size:14px}
.art-v2-author{flex-direction:column;gap:12px;align-items:flex-start}
/* V3 mobile: stacked with accent top border */
.art-v3-split{grid-template-columns:1fr;min-height:auto}
.art-v3-img{height:200px}
.art-v3-header{padding:20px 16px;border-top:4px solid #dc2626}
.art-v3-header .art-title{font-size:22px}
}


/* ═══ CATEGORY PAGES ═══ */
.cat-page{background:#fff;min-height:calc(100vh - var(--NAV))}
.cat-hero{padding:32px 28px;border-bottom:3px solid}
.cat-hero-inner{max-width:var(--MAX);margin:0 auto}
.cat-eyebrow{font-family:var(--dm);font-size:11px;color:var(--G4);margin-bottom:4px}
.cat-name{font-family:var(--bg);font-size:clamp(32px,5vw,48px);font-weight:800;letter-spacing:-.05em;line-height:1}
.cat-layout{max-width:var(--MAX);margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:0;padding:0 28px}
.cat-main{padding:24px 28px 40px 0;border-right:1px solid var(--G2)}
.cat-feat{display:grid;grid-template-columns:1fr 1fr;gap:20px;cursor:pointer;padding-bottom:24px;border-bottom:1px solid var(--G2);margin-bottom:24px}
.cat-feat:hover{opacity:.85}
.cat-feat-img{border-radius:10px;background:var(--G2);min-height:220px}
.cat-feat-body{display:flex;flex-direction:column;justify-content:center}
.cat-feat-hl{font-family:var(--bg);font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--K);margin-bottom:10px}
.cat-feat-desc{font-family:var(--dm);font-size:14px;font-weight:300;line-height:1.6;color:var(--G5);margin-bottom:12px}
.cat-feat-meta{font-family:var(--dm);font-size:11px;color:var(--G4);display:flex;gap:10px}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px}
.cat-card{cursor:pointer;transition:opacity .12s}
.cat-card:hover{opacity:.75}
.cat-card-img{width:100%;aspect-ratio:16/10;border-radius:8px;background:var(--G2);margin-bottom:10px}
.cat-card-body{}
.cat-card-hl{font-family:var(--bg);font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--K);margin-bottom:4px}
.cat-card-desc{font-family:var(--dm);font-size:12px;font-weight:300;line-height:1.5;color:var(--G5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
.cat-card-meta{font-family:var(--dm);font-size:10px;color:var(--G4)}
.cat-side{padding:24px 38px}
.cat-side-sec{margin-bottom:24px}
.cat-side-h{font-family:var(--bg);font-size:15px;font-weight:700;margin-bottom:14px}
.cat-side-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--G2);cursor:pointer;transition:opacity .12s}
.cat-side-item:hover{opacity:.6}
.cat-side-item:last-child{border-bottom:none}
.cat-side-n{font-family:var(--bg);font-size:18px;font-weight:800;color:var(--G3);min-width:22px;flex-shrink:0}
.cat-side-title{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--K);line-height:1.35}
.cat-side-ad{position:sticky;top:calc(var(--NAV) + 20px)}
.cat-side-ad-box{width:300px;height:600px;background:var(--G1);border:1px dashed var(--G3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:11px;color:var(--G4)}
@media(max-width:860px){.cat-layout{grid-template-columns:1fr}.cat-side{display:none}.cat-main{border-right:none;padding-right:0}.cat-feat{grid-template-columns:1fr}.cat-grid{grid-template-columns:1fr}}
@media(max-width:768px){.cat-hero{padding:24px 16px}.cat-layout{padding:0 16px}.cat-feat-hl{font-size:20px}}
/* Video category layout */
.catv-layout{max-width:var(--MAX);margin:0 auto;padding:24px 28px 40px}
.catv-feat{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;cursor:pointer;padding-bottom:24px;border-bottom:1px solid var(--G2);margin-bottom:24px}
.catv-feat:hover{opacity:.85}
.catv-feat-img{position:relative;border-radius:12px;background:var(--K);min-height:280px;overflow:hidden}
.catv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--K);backdrop-filter:blur(10px);transition:transform .2s}
.catv-play.sm{width:40px;height:40px;font-size:14px}
.catv-feat:hover .catv-play{transform:translate(-50%,-50%) scale(1.1)}
.catv-dur{position:absolute;bottom:10px;right:10px;font-family:var(--dm);font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.7);padding:3px 8px;border-radius:4px}
.catv-feat-body{display:flex;flex-direction:column;justify-content:center}
.catv-feat-hl{font-family:var(--bg);font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--K);margin-bottom:12px}
.catv-feat-desc{font-family:var(--dm);font-size:15px;font-weight:300;line-height:1.6;color:var(--G5);margin-bottom:14px}
.catv-feat-meta{display:flex;gap:12px;font-family:var(--dm);font-size:12px;color:var(--G4)}
.catv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.catv-card{cursor:pointer;transition:opacity .12s}
.catv-card:hover{opacity:.75}
.catv-card-img{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;background:var(--K);overflow:hidden;margin-bottom:10px}
.catv-card-body{}
.catv-card-hl{font-family:var(--bg);font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--K);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catv-card-meta{display:flex;gap:6px;font-family:var(--dm);font-size:11px;color:var(--G4)}
@media(max-width:860px){.catv-grid{grid-template-columns:repeat(2,1fr)}.catv-feat{grid-template-columns:1fr}}
@media(max-width:768px){.catv-layout{padding:20px 16px}.catv-grid{grid-template-columns:1fr}.catv-feat-hl{font-size:20px}}

/* ═══ STATIC PAGES ═══ */
.static-page{background:#fff;min-height:calc(100vh - var(--NAV))}
.static-hero{padding:48px 28px 32px;border-bottom:1px solid var(--G2);max-width:var(--MAX);margin:0 auto}
.static-title{font-family:var(--bg);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.04em;color:var(--K)}
.static-body{max-width:720px;margin:0 auto;padding:32px 28px 60px}
.static-h2{font-family:var(--bg);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--K);margin:28px 0 10px}
.static-p{font-family:var(--dm);font-size:16px;font-weight:300;line-height:1.8;color:#2a2a2a;margin-bottom:16px}
@media(max-width:768px){.static-hero{padding:32px 16px}.static-body{padding:24px 16px 40px}.static-p{font-size:15px}}


.site-footer{
background:var(--K);color:var(--W);
padding:0;margin-top:0;
}
.ft-top{
max-width:var(--MAX);margin:0 auto;
display:flex;align-items:flex-start;justify-content:space-between;
padding:40px 28px 32px;gap:40px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.ft-brand{flex-shrink:0}
.ft-logo{font-family:var(--bg);font-size:28px;font-weight:800;letter-spacing:-.06em;display:flex;align-items:center;gap:3px;line-height:1;margin-bottom:10px}
.ft-logo-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--W);margin-bottom:2px}
.ft-tagline{font-family:var(--dm);font-size:12px;color:rgba(255,255,255,.35);line-height:1.6;font-weight:300}
.ft-cols{display:flex;gap:48px}
.ft-col-title{font-family:var(--dm);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:12px}
.ft-link{display:block;font-family:var(--dm);font-size:12.5px;color:rgba(255,255,255,.5);padding:3px 0;transition:color .15s;font-weight:300;background:none;border:none;cursor:pointer;text-align:left}
.ft-link:hover{color:var(--W)}
.ft-bottom{
max-width:var(--MAX);margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
padding:16px 28px 20px;font-family:var(--dm);font-size:10.5px;color:rgba(255,255,255,.2);
}
.ft-bottom-links{display:flex;gap:14px}
.ft-link-sm{font-family:var(--dm);font-size:10.5px;color:rgba(255,255,255,.2);background:none;border:none;cursor:pointer;transition:color .15s}
.ft-link-sm:hover{color:rgba(255,255,255,.5)}
@media(max-width:768px){
.ft-top{flex-direction:column;gap:28px;padding:32px 16px 24px}
.ft-cols{gap:24px;flex-wrap:wrap}
.ft-col{min-width:80px}
.ft-bottom{flex-direction:column;gap:8px;text-align:center;padding:14px 16px 90px}
}

/* ═══ WP FIXES ═══ */
body.admin-bar .nav{top:32px}
body.admin-bar .mob-hd{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}body.admin-bar .mob-hd{top:46px}}
a{text-decoration:none;color:inherit}
.snews-user-menu{display:flex;align-items:center;gap:8px;font-family:var(--dm);font-size:12px}
.snews-user-av{width:28px;height:28px;border-radius:50%;object-fit:cover}
.snews-logout{color:var(--G4);font-size:11px}
.wordmark img{height:28px;width:auto}
.mob-mark img{height:24px;width:auto}
.ft-logo img{height:28px;width:auto;filter:brightness(0) invert(1)}

/* Search Modal */
.search-ov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:120px}
.search-modal{background:#fff;border-radius:14px;width:90%;max-width:560px;padding:0;box-shadow:0 16px 48px rgba(0,0,0,.2);overflow:hidden}
.search-input-wrap{display:flex;align-items:center;gap:12px;padding:16px 20px}
.search-input{flex:1;border:none;outline:none;font-family:var(--dm);font-size:17px;font-weight:300;color:var(--K)}
.search-input::placeholder{color:var(--G3)}
.search-close{border:none;background:none;font-size:18px;color:var(--G4);cursor:pointer;padding:4px 8px;border-radius:4px}
.search-close:hover{background:var(--G1);color:var(--K)}

/* Predictions create form */
.pr-create-ov{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.pr-create-modal{background:#fff;width:100%;max-width:480px;border-radius:14px;overflow:hidden}
.pr-create-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--G2);font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--G4)}
.pr-create-top button{border:none;background:none;font-size:18px;color:var(--G4);cursor:pointer}
.pr-crt{padding:20px}
.pr-crt label{display:block;font-family:var(--dm);font-size:12px;font-weight:600;color:var(--K);margin:14px 0 6px}
.pr-crt label:first-child{margin-top:0}
.pr-crt input,.pr-crt select,.pr-crt textarea{width:100%;padding:10px 14px;border:1px solid var(--G2);border-radius:8px;font-family:var(--dm);font-size:14px;outline:none}
.pr-crt input:focus,.pr-crt select:focus{border-color:var(--K)}
.pr-crt-types{display:flex;gap:8px}
.pr-crt-t{font-family:var(--dm);font-size:13px;font-weight:500;padding:8px 16px;border:1px solid var(--G2);border-radius:8px;background:#fff;cursor:pointer;transition:all .12s}
.pr-crt-t.on{background:var(--K);color:#fff;border-color:var(--K)}
.pr-crt-go{width:100%;padding:12px;background:var(--K);color:#fff;border:none;border-radius:8px;font-family:var(--dm);font-size:14px;font-weight:600;cursor:pointer;margin-top:16px}
.pr-crt-go:hover{opacity:.85}
.pr-crt-note{font-family:var(--dm);font-size:11px;color:var(--G4);margin-top:8px;text-align:center}