:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#5b667a;
  --line:#e7ebf2;
  --soft:#f6f7fb;
  --red:#d41414;
  --red2:#ff3b30;
  --blue:#0a4cff;
  --max:1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg)}
a{color:inherit; text-decoration:none}
a:hover{color:var(--red)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}

/* Topbar */
.topbar{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:50}
.toprow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0}
.brand{display:flex; align-items:baseline; gap:10px}
.brand .logo{font-weight:950; letter-spacing:.2px; font-size:22px}
.brand .dot{display:inline-block; width:9px; height:9px; border-radius:2px; background:var(--red); transform:translateY(-2px)}
.brand .tag{font-size:12px; color:var(--muted)}

.tools{display:flex; align-items:center; gap:10px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:var(--soft); font-size:12px; color:var(--muted)}
.pill strong{color:var(--ink)}

/* Topic Nav (custom, avoid conflict with Bootstrap .nav)
   Desktop: single-line horizontal scroll (no wrapping)
*/
.topicNav{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 0 12px}
.topicNav a{padding:8px 10px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid var(--line); background:var(--soft); white-space:nowrap; flex:0 0 auto}
.topicNav a.on{background:rgba(212,20,20,.08); border-color:rgba(212,20,20,.18); color:var(--red)}
.topicNav a:hover{background:rgba(11,18,32,.06)}
.offcanvas .topicNav{overflow:visible}

@media (max-width: 720px){
  .brand{gap:8px}
  .brand .tag{display:none}
}

/* Ticker */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(212,20,20,.06), rgba(255,255,255,0));}
.tickerInner{display:flex; gap:10px; align-items:center; padding:10px 0}
.tickerBadge{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; color:#fff; background:var(--red); padding:6px 10px; border-radius:999px}
.tickerScroll{overflow:hidden; flex:1}
.tickerScroll .line{white-space:nowrap; display:inline-block; padding-left:100%; animation:ticker 34s linear infinite}
.tickerScroll .line span{display:inline-block; padding:0 18px; color:var(--ink)}
.tickerScroll .line span b{color:var(--red)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)} }

/* Layout */
.grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:18px; padding:18px 0 26px}
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
}

/* Post layout */
.postGrid{display:grid; grid-template-columns: 1fr .48fr; gap:18px; margin-top:16px}
@media (max-width: 980px){
  .postGrid{grid-template-columns: 1fr}
}

.hero{background:var(--soft); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.heroTop{padding:14px 14px 0}
.heroKicker{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px}
.heroKicker .cat{color:var(--red); font-weight:900}
.heroTitle{margin:10px 0 10px; font-size:28px; line-height:1.12; letter-spacing:-.2px}
.heroTitle a{color:var(--ink)}
.heroTitle a:hover{color:var(--red)}
.heroTeaser{color:var(--muted); font-size:14px; line-height:1.45; padding:0 14px 14px}
.heroImg{height:260px; background:radial-gradient(1200px 300px at 20% 30%, rgba(212,20,20,.18), transparent 55%), radial-gradient(900px 260px at 70% 10%, rgba(10,76,255,.12), transparent 50%), linear-gradient(180deg, #0b1220, #162443);}
.heroImg img{width:100%; height:100%; object-fit:cover; display:block; opacity:.92}

.cards{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:12px}
@media (max-width: 680px){.cards{grid-template-columns:1fr}}

.card{border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff}
.cardRow{display:flex; gap:12px; align-items:stretch}
.cardThumb{width:120px; height:86px; border-radius:12px; overflow:hidden; flex:0 0 auto; border:1px solid var(--line); background:linear-gradient(135deg, rgba(212,20,20,.10), rgba(10,76,255,.08));}
.cardThumb img{width:100%; height:100%; object-fit:cover; display:block}
.cardMain{flex:1}
.card .meta{display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px}
.card .meta .cat{color:var(--red); font-weight:900}
.card h3{margin:10px 0 6px; font-size:16px; line-height:1.25}
.card p{margin:0; color:var(--muted); font-size:13px; line-height:1.45}

.sectionTitle{margin:18px 0 10px; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.sectionTitle h2{margin:0; font-size:14px; letter-spacing:.3px; text-transform:uppercase}
.sectionTitle .rule{flex:1; height:1px; background:var(--line); margin-left:10px}

.list{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
.item{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .time{width:90px; color:var(--muted); font-size:12px; white-space:nowrap}
.item .thumb{width:84px; height:58px; border-radius:12px; overflow:hidden; flex:0 0 auto; border:1px solid var(--line); background:linear-gradient(135deg, rgba(212,20,20,.10), rgba(10,76,255,.08));}
.item .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.item .txt{flex:1}
.item .txt .cat{font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.3px; color:var(--red)}
.item .txt .t{margin-top:3px; font-weight:800; line-height:1.25}
.item:hover{background:var(--soft)}

@media (max-width: 520px){
  .heroTitle{font-size:22px}
  .heroImg{height:210px}
  .cardThumb{width:104px; height:74px}
  .item .time{display:none}
  .item .thumb{width:74px; height:52px}
}

/* Sidebar */
.side{display:flex; flex-direction:column; gap:12px}
.box{border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden}
.boxHead{padding:12px; background:linear-gradient(90deg, rgba(212,20,20,.08), rgba(255,255,255,0)); border-bottom:1px solid var(--line); font-weight:900; font-size:12px; letter-spacing:.3px; text-transform:uppercase}
.boxBody{padding:12px}
.boxBody .muted{color:var(--muted); font-size:12px; line-height:1.5}
.kv{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px dashed var(--line)}
.kv:first-child{border-top:0}
.kv b{font-size:12px}
.kv span{font-size:12px; color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--line); padding:18px 0; color:var(--muted); font-size:12px}