:root{
 --red:#ff1e1e; --red-dark:#b30000;
 --bg:#f6f7fb; --text:#15161a; --muted:#6b7280;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; }
a{ color:var(--text); text-decoration:none; }
a:hover{ color:white; }
.container{ width:min(1200px, 92%); margin:0 auto; }
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom:1px solid rgba(17,24,39,.08); }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px; }
.brand img{ width:44px; height:44px; border-radius:50%; border:2px solid var(--red); background:#fff; }
nav{ display:flex; gap:14px; flex-wrap:wrap; }
nav a{ padding:10px 14px; border-radius:999px; background:#ffffff; border:1px solid #e5e7eb; font-weight:600; color:var(--text); }
nav a.active, .pill{ background:linear-gradient(135deg, var(--red), var(--red-dark)); border:0; color:#fff; box-shadow:0 6px 20px rgba(255,30,30,.25); }
.subnav{ display:flex; overflow:auto; gap:10px; padding:8px 0 14px 0; }
.subnav a{ white-space:nowrap; padding:8px 12px; border-radius:999px; background:#ffffff; border:1px solid #e5e7eb; }
.marquee{ width:100%; background:#ffffff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; }
.marquee-inner{ display:flex; gap:40px; padding:10px 0; white-space:nowrap; animation: scroll 30s linear infinite; }
.marquee-inner span{ color:#111827; }
@keyframes scroll { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; padding:24px 0; align-items:stretch; }
.card{ background:#ffffff; border:1px solid #e5e7eb; border-radius:18px; padding:18px; }
.player{ position:relative; background:#ffffff; border:1px solid #e5e7eb; border-radius:22px; padding:18px; display:flex; align-items:center; gap:18px; }
.badge-live{ position:absolute; top:14px; left:14px; background:linear-gradient(135deg, var(--red), var(--red-dark)); padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.6px; text-transform:uppercase; }
.playbtn{ width:64px; height:64px; border-radius:50%; border:0; background:linear-gradient(135deg, var(--red), var(--red-dark)); color:white; cursor:pointer; box-shadow:0 14px 30px rgba(255,30,30,.25); font-weight:900; }
.meta h2{ margin:0 0 6px 0; }
.meta p{ margin:0; color:var(--muted); }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.card img.thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; }
.footer{ margin-top:40px; padding:24px 0 42px; border-top:1px solid #e5e7eb; color:var(--muted); }
.footer .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.btn{ padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#ffffff; color:var(--text); font-weight:600; display:inline-block; }
.btn.primary{ background:linear-gradient(135deg,var(--red),var(--red-dark)); border:0; color:#fff; box-shadow:0 6px 20px rgba(255,30,30,.25); }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid rgba(255,255,255,.08); padding:10px; text-align:left; }
input, textarea, select{ width:100%; padding:10px; border-radius:10px; border:1px solid #e2e8f0; background:#ffffff; color:#111; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.notice{ color:var(--muted); }
.small{ font-size:12px; color:var(--muted); }
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#ffffff; border:1px solid #e5e7eb; color:#111; }
.logo-bottom{ width:90px; height:auto; opacity:.95; filter: drop-shadow(0 0 10px rgba(255,30,30,.3)); }
.alert{ background:#fff; border:1px solid #e5e7eb; padding:12px; border-radius:12px; }

/* Dropdown */
nav .dropdown{ position:relative; }
nav .dropdown > a{ display:inline-flex; align-items:center; gap:8px; }
nav .dropdown-menu{ display:none; position:absolute; top:44px; left:0; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:8px; box-shadow:0 14px 30px rgba(0,0,0,.08); }
nav .dropdown:hover .dropdown-menu{ display:flex; gap:8px; }
nav .dropdown-menu a{ display:block; padding:10px 12px; border-radius:10px; background:#ffffff; border:1px solid #e5e7eb; white-space:nowrap; }
nav .dropdown-menu a:hover{ background:linear-gradient(135deg,var(--red),var(--red-dark)); border:0; color:#fff; }

/* Share buttons */
.share { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.share .share-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#111; font-weight:600; }
.share .share-btn i { font-size:14px; }
.share .share-copy { cursor:pointer; }
@media (prefers-color-scheme: dark){
  .share .share-btn { background:#151518; color:#fff; border:1px solid rgba(255,255,255,.12); }
}

/* ====== Responsive layout ====== */
:root{
  --container-max: 1200px;
}
.container{ width:min(var(--container-max), 92%); margin:0 auto; }

/* Fluid type scale */
h1{ font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
h2{ font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); }
h3{ font-size: clamp(1.1rem, 1.0rem + 0.5vw, 1.3rem); }
body{ line-height:1.5; }

/* Header responsive */
.navbar{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; }
.nav-toggle i{ pointer-events:none; }
@media (max-width: 860px){
  nav{ display:none; flex-direction:column; gap:10px; padding:10px 0; }
  nav.open{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .brand{ flex:1; }
  header .topbar{ gap:10px; }
}

/* Dropdown (tap-friendly) */
nav .dropdown{ position:relative; }
nav .dropdown > a:after{ content:''; }
nav .dropdown-menu{ min-width: 260px; }
@media (hover:none){
  nav .dropdown:focus-within .dropdown-menu{ display:flex; }
}

/* Grid responsive */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .player{ flex-direction:row; }
  .playbtn{ width:62px; height:62px; }
}

/* Player sizing */
.player .meta p{ font-size: clamp(.9rem, .8rem + .4vw, 1rem); }

/* Touch targets */
a, button, .share .share-btn{ min-height:40px; }

/* TV: focus styles */
:focus{ outline: 2px solid var(--red); outline-offset: 2px; }
.card:focus, .share-btn:focus, nav a:focus{ box-shadow: 0 0 0 3px rgba(255,30,30,.25); border-color: rgba(255,30,30,.35); }

/* News layouts */
.news-article.image-left{ display:grid; grid-template-columns: 1fr 1.2fr; gap:18px; align-items:start; }
.news-article.image-right{ display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; align-items:start; }
.news-article.image-right .main-img{ order:2; }
.news-article.highlight{ border-width:2px; box-shadow:0 10px 30px rgba(255,30,30,.08); }
.news-article .main-img{ width:100%; border-radius:12px; }
.news-article .content img{ max-width:100%; height:auto; border-radius:10px; }
.news-article .content h2, .news-article .content h3{ margin-top:1em; }
.news-article .content p{ margin: .6em 0; }
@media (max-width: 760px){
  .news-article.image-left, .news-article.image-right{ grid-template-columns: 1fr; }
}