/* (same CSS as previous attempt, trimmed for brevity in this cell) */
body{ background:#07101f; color:#cfe9ff; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Naskh Arabic UI', 'Tahoma'; }
.container{ max-width:1200px; margin:0 auto; padding:0 14px; }
.topbar{ position:sticky; top:0; z-index:50; background:#071322; border-bottom:1px solid rgba(0,191,255,.25); padding:10px 12px; display:flex; align-items:center; justify-content:space-between; }
.topbar .pill{ background:#10b7ff; color:#001019; font-weight:700; padding:8px 14px; border-radius:999px; text-decoration:none; transition:.2s; box-shadow:0 2px 10px rgba(16,183,255,.25); }
.topbar .brand-mini{ display:flex; align-items:center; gap:10px; }
.topbar .brand-mini img{ width:42px; height:42px; border-radius:50%; border:2px solid #00bfff; object-fit:cover; }
.topbar .brand-mini .txt{ line-height:1.05; text-align:right; }
.topbar .brand-mini .txt strong{ color:#cfe9ff; font-size:.98rem; letter-spacing:.2px; }
.topbar .brand-mini .txt span{ display:block; color:#87a6c6; font-size:.8rem; }
header{ background:#030b1a; text-align:center; padding:32px 10px 24px; border-bottom:2px solid #00bfff; }
header .title{ display:flex; justify-content:center; align-items:center; gap:14px; }
header .title h1{ font-size:2rem; margin:0; font-weight:800; color:#00c0ff; text-shadow:0 0 12px #0099ff; }
header .badge{ width:64px; height:64px; border-radius:50%; border:2px solid #00bfff; object-fit:cover; box-shadow:0 0 12px rgba(0,191,255,.35); }
header .subtitle{ margin-top:6px; color:#cfd6e6; font-size:1rem; font-weight:500; }
.grid{ display:grid; gap:16px; }
.cards{ grid-template-columns: repeat(3, 1fr); }
.card{ background:#0c1627; color:#d9e8ff; border:1px solid rgba(0,191,255,.25); border-radius:16px; padding:16px; text-align:center; }
.counter{ font-size:2rem; font-weight:900; }
.btn{ background:#0bd1ff; color:#03202f; padding:8px 12px; border-radius:10px; font-weight:800; text-decoration:none; display:inline-block; margin-top:8px; }
.btn.outline{ background:transparent; color:#0bd1ff; border:1px solid #0bd1ff; }
.hero{ text-align:center; margin:20px 0; }
.hero img{ width:100%; max-width:1100px; border-radius:16px; }
.breaking-small{ max-width:420px; margin:14px auto 18px; background:#111; color:#fff; padding:10px 12px; border-radius:12px; border:2px solid #c00; }
.breaking-small .label{ font-weight:800; font-size:.95rem; margin-bottom:6px; color:#ff5555; text-align:center; }
.breaking-small video{ width:100%; height:auto; border-radius:10px; }
.actions, .socials{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0 18px; }
.socials a{ color:#9fd9ff; text-decoration:none; padding:6px 10px; border:1px solid rgba(0,191,255,.25); border-radius:10px; }
.live{ margin:28px auto; max-width:1100px; padding:0 12px; text-align:center; }
.live iframe{ width:100%; height:480px; border:0; border-radius:10px; }
.article-box{ max-width:1000px; margin:10px auto 40px; padding:16px; border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fff; line-height:1.9; color:#0c1627; }
.article-box h2{ margin:0 0 10px; font-size:1.35rem }
.article-box p{ margin:.45rem 0 }
.footer{ text-align:center; color:#9db7cf; padding:24px 0 40px; }