:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --ink:#071426; --ink-soft:rgba(7,20,38,.6); --border:rgba(7,20,38,.1);
}
html[data-theme="dark"]{
  --bg:#050B14; --surface:#0B1626; --ink:#F1F5F9; --ink-soft:rgba(241,245,249,.6); --border:rgba(255,255,255,.1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}
a{color:inherit; text-decoration:none}
.container{max-width:1400px; margin:0 auto; padding:0 16px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px}
.brand{color:#2563EB}
.pos{color:#00C875}
.neg{color:#EF4444}
.gold{color:#F5B942}
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:10px 20px; font-weight:600; font-size:14px; min-height:44px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--ink)}
.btn-primary{background:#2563EB; color:#fff; border-color:#2563EB}
.pill{border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; border:1px solid var(--border); background:transparent; white-space:nowrap; cursor:pointer}
.pill.active{background:#2563EB; color:#fff; border-color:#2563EB}
.muted{color:var(--ink-soft)}

/* Header / nav */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.topbar{display:flex; align-items:center; gap:16px; height:64px}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px}
.logo .mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#2563EB,#7C3AED);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.tagline{display:block; font-size:10.5px; color:var(--ink-soft); font-weight:400}
.search-wrap{flex:1; max-width:560px; display:none}
.search-box{display:flex; align-items:center; gap:8px; height:42px; border-radius:999px; border:1px solid var(--border); background:rgba(7,20,38,.03); padding:0 14px}
html[data-theme="dark"] .search-box{background:rgba(255,255,255,.05)}
.search-box input{border:0; background:transparent; outline:none; width:100%; color:var(--ink); font-size:14px}
.icon-btn{width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; background:transparent; cursor:pointer}
.icon-btn:hover{background:rgba(7,20,38,.05)}
html[data-theme="dark"] .icon-btn:hover{background:rgba(255,255,255,.06)}
.live-pill{display:none; align-items:center; gap:6px; background:rgba(0,200,117,.1); color:#00C875; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px}
.dot{width:7px;height:7px;border-radius:999px;background:#00C875;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
select.region{display:none; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--ink); font-size:12px; font-weight:600; padding:8px 12px}

nav.desktop-nav{display:none; border-top:1px solid var(--border)}
nav.desktop-nav .container{display:flex; gap:22px; height:44px; align-items:center; overflow-x:auto; font-size:13.5px; font-weight:500}
nav.desktop-nav a{color:var(--ink-soft); white-space:nowrap}
nav.desktop-nav a:hover{color:var(--ink)}
.badge-new{background:linear-gradient(135deg,#2563EB,#7C3AED); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-left:4px}

@media(min-width:1024px){
  .search-wrap{display:block}
  .live-pill{display:flex}
  select.region{display:block}
  nav.desktop-nav{display:block}
  .mobile-only{display:none !important}
}
@media(max-width:1023px){
  .desktop-only{display:none !important}
}

/* Ticker */
.ticker-wrap{overflow:hidden; border-top:1px solid var(--border); background:rgba(7,20,38,.02); padding:8px 0}
html[data-theme="dark"] .ticker-wrap{background:rgba(255,255,255,.02)}
.ticker-track{display:inline-flex; white-space:nowrap; animation:ticker 40s linear infinite}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.ticker-item{display:inline-flex; align-items:center; gap:6px; margin:0 16px; font-size:13px}

/* Mobile menu */
.mobile-menu{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; display:none}
.mobile-menu.open{display:block}
.mobile-panel{position:absolute; right:0; top:0; height:100%; width:82%; max-width:340px; background:var(--surface); padding:20px; overflow-y:auto}
.mobile-panel a{display:block; padding:12px; border-radius:10px; font-weight:600}
.mobile-panel a:hover{background:rgba(7,20,38,.05)}

/* Bottom nav (mobile) */
.bottom-nav{position:fixed; bottom:0; left:0; right:0; z-index:60; display:flex; background:color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter:blur(8px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom,0)}
.bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; font-size:11px; font-weight:600; color:var(--ink-soft)}
.bottom-nav a.active{color:#2563EB}
@media(min-width:1024px){.bottom-nav{display:none}}
@media(max-width:1023px){ body{padding-bottom:64px} }

/* Hero */
.hero{display:grid; gap:32px; padding:32px 0}
@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr; align-items:center}}
.hero h1{font-size:clamp(32px,6vw,48px); font-weight:800; line-height:1.05; margin:0 0 16px}
.gradient-text{background:linear-gradient(90deg,#2563EB,#7C3AED); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Snapshot / cards row */
.scroll-row{display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch}
.snap-card{min-width:180px; padding:16px; scroll-snap-align:start}
.scroll-row{scroll-snap-type:x proximity}
.sparkline{width:100%; height:32px; margin-top:8px}

/* Grid utilities */
.grid-auto{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid-auto{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-auto.cols-6{grid-template-columns:repeat(6,1fr)}}
.news-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.news-grid.cols-3{grid-template-columns:repeat(3,1fr)}}

/* World clock */
.session-grid{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.session-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.session-grid{grid-template-columns:repeat(6,1fr)}}
.session-card{border:1px solid var(--border); border-radius:12px; padding:12px}
.session-card.open{border-color:rgba(37,99,235,.4)}
.status-chip{display:inline-block; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; margin-top:4px}
.status-open{background:rgba(0,200,117,.15); color:#00C875}
.status-pre, .status-closing{background:rgba(245,185,66,.15); color:#F5B942}
.status-closed{background:rgba(7,20,38,.08); color:var(--ink-soft)}

/* News card */
.news-card{overflow:hidden; display:block}
.news-card img{width:100%; aspect-ratio:16/9; object-fit:cover; background:rgba(7,20,38,.05)}
.news-card .body{padding:14px}
.news-card .cat{font-size:11px; font-weight:700; text-transform:uppercase; color:#2563EB; letter-spacing:.03em}
.news-card h3{font-size:15px; font-weight:700; margin:6px 0; line-height:1.35}
.news-card .meta{font-size:11px; color:var(--ink-soft); display:flex; gap:8px}
.news-card.horizontal{display:flex; gap:12px; padding:10px}
.news-card.horizontal img{width:112px; aspect-ratio:auto; height:80px; border-radius:10px; flex-shrink:0}
.news-card.horizontal .body{padding:0}

/* Engagement bar */
.engage-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; margin:16px 0; font-size:14px}
.engage-btn{display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:7px 14px; background:transparent; color:var(--ink); font-weight:600; cursor:pointer}
.engage-btn.active-like{border-color:#2563EB; background:rgba(37,99,235,.1); color:#2563EB}
.engage-btn.active-save{border-color:#F5B942; background:rgba(245,185,66,.1); color:#F5B942}

/* Forms */
input[type=number], input[type=text], input[type=search], select.field{width:100%; border:1px solid var(--border); background:transparent; border-radius:10px; padding:10px 12px; color:var(--ink); font-size:14px}
label.field-label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}

footer.site{margin-top:60px; border-top:1px solid var(--border); background:rgba(7,20,38,.02); padding:40px 0 90px}
html[data-theme="dark"] footer.site{background:rgba(255,255,255,.02)}
footer.site .cols{display:grid; gap:24px; grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){footer.site .cols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){footer.site .cols{grid-template-columns:repeat(6,1fr)}}
footer.site h4{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 10px}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13.5px}
@media(min-width:1024px){footer.site{padding-bottom:40px} body{padding-bottom:0}}

/* AI widget */
.ai-fab{position:fixed; bottom:76px; right:16px; z-index:70; width:56px; height:56px; border-radius:999px; background:linear-gradient(135deg,#2563EB,#7C3AED); color:#fff; border:0; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,99,235,.35); cursor:pointer}
@media(min-width:1024px){.ai-fab{bottom:24px}}
.ai-panel{position:fixed; z-index:70; right:16px; left:16px; bottom:140px; max-height:70vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 20px 50px rgba(0,0,0,.25); display:none}
.ai-panel.open{display:block}
@media(min-width:640px){.ai-panel{left:auto; width:360px}}
@media(min-width:1024px){.ai-panel{bottom:96px}}
.ai-prompt{display:block; width:100%; text-align:left; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:transparent; color:var(--ink); font-size:13.5px; margin-bottom:8px; cursor:pointer}

.skip-link{position:absolute; left:-999px; top:0; background:#2563EB; color:#fff; padding:10px 16px; border-radius:8px; z-index:200}
.skip-link:focus{left:16px; top:16px}