:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --black:#0b0f1a;
  --red:#ef4444;
  --blue:#2563eb;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 14px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:var(--bg); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:min(1180px, 92vw); margin:0 auto; }
.muted{ color:var(--muted); }
.temp{ font-weight:700; }

.iconBtn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  transition:.2s ease;
}
.iconBtn:hover{ background:rgba(255,255,255,.12); }
.iconBtn:active{ transform:translateY(1px); }

.hamburger{ width:18px; height:2px; background:#fff; display:inline-block; position:relative; }
.hamburger::before,.hamburger::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.hamburger::before{ top:-6px; }
.hamburger::after{ top:6px; }

.topbar{
  background:var(--black);
  color:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:14px;
}
.topbar__left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
}
.brand__dot{
  width:12px; height:12px; border-radius:999px;
  background:linear-gradient(135deg, var(--red), #fb7185);
  display:inline-block;
}
.brand__text{ font-size:18px; }

.topnav{
  display:flex; gap:14px;
  border-left:1px solid rgba(255,255,255,.08);
  padding-left:14px;
  overflow:auto;
  scrollbar-width:none;
}
.topnav::-webkit-scrollbar{ display:none; }
.topnav a{
  color:rgba(255,255,255,.85);
  font-weight:600;
  font-size:14px;
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.topnav a:hover{ background:rgba(255,255,255,.08); }
.topnav a.active{ background:rgba(255,255,255,.12); color:#fff; }

.topbar__right{ display:flex; align-items:center; gap:10px; }
.pill{
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.dot.live{ background:var(--red); box-shadow:0 0 0 4px rgba(239,68,68,.15); }
.chev{ opacity:.8; }

.weather{
  display:flex; gap:10px; align-items:center;
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
}

/* Quick links */
.quicklinks{ border-bottom:1px solid var(--line); background:#fafafa; }
.quicklinks__inner{ display:flex; align-items:center; gap:14px; padding:10px 0; }
.quicklinks__label{
  color:var(--red);
  font-weight:900;
  font-size:13px;
  letter-spacing:.6px;
  white-space:nowrap;
}
.quicklinks__items{ display:flex; gap:10px; flex-wrap:wrap; }
.quicklinks__items a{
  font-weight:700;
  font-size:13px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.quicklinks__items a:hover{ border-color:#d1d5db; }

/* Ticker */
.ticker{ border-bottom:1px solid var(--line); background:#fff; }
.ticker__inner{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.tag{
  background:rgba(239,68,68,.12);
  color:var(--red);
  border:1px solid rgba(239,68,68,.25);
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}
.ticker__marquee{ overflow:hidden; width:100%; }
.ticker__track{
  display:inline-flex;
  gap:28px;
  white-space:nowrap;
  animation: scroll 20s linear infinite;
}
.ticker__track a{ font-weight:700; color:#111827; }
.ticker__track a:hover{ text-decoration:underline; }
@keyframes scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* Layout */
.page{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:22px;
  padding:18px 0 28px;
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 0.8fr;
  gap:18px;
  align-items:start;
}

.heroLead{
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.heroSide{ display:flex; flex-direction:column; gap:14px; }
.heroAd{ border-left:1px solid var(--line); padding-left:14px; }
.adLabel{ font-size:12px; font-weight:800; color:var(--muted); margin:6px 0 10px; }
.adCard{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  min-height:220px;
}

.leadMedia{
  height:320px;
  background:#0b0f1a;
  position:relative;
}
.leadBody{ padding:14px 14px 16px; }
.kicker{
  color:var(--red);
  font-weight:900;
  font-size:13px;
  letter-spacing:.3px;
  margin-bottom:6px;
}
.leadTitle{
  font-size:30px;
  line-height:1.12;
  margin:0 0 8px;
  font-weight:900;
}
.leadMeta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}
.leadDesc{
  margin:12px 0 0;
  color:#374151;
  font-size:14px;
  line-height:1.6;
}

.sideCard{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 140px 1fr;
  min-height:96px;
}
.sideCard__media{ height:100%; background:#0b0f1a; }
.sideCard__body{ padding:10px 12px; }
.sideCard__title{
  margin:0;
  font-weight:900;
  font-size:15px;
  line-height:1.25;
}
.sideCard__title:hover{ text-decoration:underline; }
.sideCard__meta{ margin-top:8px; color:var(--muted); font-size:12px; font-weight:600; }

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.sectionHead h2{ margin:0; font-size:20px; font-weight:900; }
.sectionHead__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.chip:hover{ border-color:#d1d5db; }
.chip.active{
  border-color:rgba(37,99,235,.35);
  background:rgba(37,99,235,.08);
  color:var(--blue);
}

.newsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}

.newsCard{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:320px;
}
.newsCard__media{ height:160px; background:#0b0f1a; }
.newsCard__body{
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.newsCard__kicker{ font-size:12px; font-weight:900; color:var(--red); letter-spacing:.2px; }
.newsCard__title{ margin:0; font-size:16px; font-weight:900; line-height:1.25; }
.newsCard__title:hover{ text-decoration:underline; }
.newsCard__desc{ margin:0; color:#374151; font-size:13px; line-height:1.6; }
.newsCard__meta{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.loadMoreWrap{ display:flex; justify-content:center; padding:18px 0 6px; }
.btn{
  border:none;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); }
.btn--dark{ background:#111827; box-shadow: 0 10px 20px rgba(0,0,0,.2); }

/* Sidebar */
.sidebar{
  position:sticky;
  top:76px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sideBlock{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.sideBlock__head{ padding:12px 12px 10px; border-bottom:1px solid var(--line); }
.sideBlock__head h3{ margin:0; font-size:15px; font-weight:900; }

.liveThumb{ height:160px; background:#0b0f1a; }
.liveMeta{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.liveTitle{ font-weight:900; font-size:16px; }

.trendingList{ display:flex; flex-direction:column; }
.trendingItem{ padding:12px; border-top:1px solid var(--line); }
.trendingItem:first-child{ border-top:none; }
.trendingItem a{ font-weight:900; font-size:14px; line-height:1.3; }
.trendingItem a:hover{ text-decoration:underline; }
.trendingItem .muted{ font-size:12px; font-weight:700; margin-top:6px; }

/* Footer */
.footer{ border-top:1px solid var(--line); background:#fafafa; padding:18px 0; }
.footer__inner{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.footer__links{ display:flex; flex-wrap:wrap; gap:12px; }
.footer__links a{ font-weight:800; font-size:13px; color:#374151; }
.footer__links a:hover{ text-decoration:underline; }
.brandSmall{ display:flex; align-items:center; gap:10px; font-weight:900; }

/* Drawer */
.drawerBackdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:.2s ease;
  z-index:40;
}
.drawer{
  position:fixed;
  top:0; left:0;
  width:min(86vw, 320px);
  height:100%;
  background:#fff;
  transform:translateX(-105%);
  transition:.25s ease;
  z-index:50;
  box-shadow: 18px 0 40px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.drawer__head{
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.drawer__nav{ padding:10px; display:flex; flex-direction:column; }
.drawer__nav a{
  padding:12px 12px;
  border-radius:12px;
  font-weight:900;
}
.drawer__nav a:hover{ background:#f3f4f6; }

.drawer.isOpen{ transform:translateX(0); }
.drawerBackdrop.isOpen{ opacity:1; pointer-events:auto; }

/* Responsive */
@media (max-width: 1100px){
  .heroGrid{ grid-template-columns: 1.5fr 1fr; }
  .heroAd{ display:none; }
  .page{ grid-template-columns: 1fr; }
  .sidebar{ position:static; }
}
@media (max-width: 820px){
  .topnav{ display:none; }
  .newsGrid{ grid-template-columns: repeat(2, 1fr); }
  .leadTitle{ font-size:24px; }
  .leadMedia{ height:260px; }
}
@media (max-width: 520px){
  .newsGrid{ grid-template-columns: 1fr; }
  .sideCard{ grid-template-columns: 120px 1fr; }
  .quicklinks__items{ overflow:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .quicklinks__items::-webkit-scrollbar{ display:none; }
}