:root{ --bg1:#0b1120; --bg2:#111827; --card:#0f172a; --border:#1f2937; --ink:#e5e7eb; --muted:#94a3b8; --accent:#38bdf8; }
body{background:linear-gradient(135deg,var(--bg1),var(--bg2)); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;}
.navbar{background:rgba(17,24,39,.9); border-bottom:1px solid var(--border);}
.container{max-width:1100px; margin:0 auto; padding:16px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.25);}
.card img{width:100%; height:170px; object-fit:cover; border-radius:10px; border:1px solid var(--border);}
.card h2{font-size:1.05rem; margin:.75rem 0;}
.card a{color:#93c5fd; text-decoration:none;}
.card a:hover{color:#bfdbfe;}
.article{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.25);}
.hero{width:100%; height:260px; object-fit:cover; border-radius:10px; border:1px solid var(--border);}
.meta{color:var(--muted); font-size:.9rem;}
.ratio{position:relative; width:100%; padding-top:56.25%; background:#0f172a; border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.badge{display:inline-block; padding:.2rem .5rem; border-radius:999px; border:1px solid rgba(125,211,252,.3); background:rgba(56,189,248,.15); color:#7dd3fc; font-size:.75rem; margin-right:6px; margin-top:6px;}
.footer{padding:24px 0; font-size:.9rem; color:var(--muted);}
.header-title{font-weight:800; font-size:1.8rem;}