:root{
      --bg: #0f0f0f;
      --card: #181818;
      --text: #e6e6e6;
      --muted: #aaaaaa;
      --accent: #f00;
      --stroke: #2a2a2a;
      --chip: #000000cc;
      --focus: 2px solid #ffffff80;
      --radius: 16px;
      --shadow: 0 10px 20px rgba(0,0,0,.35);
    }
    *{box-sizing: border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg); color: var(--text); line-height:1.35;
      display:flex; flex-direction:column; gap:24px;
    }
    header{
      padding:16px 20px; display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap;
      position:sticky; top:0; background:linear-gradient(180deg, rgba(15,15,15,1), rgba(15,15,15,.85)); backdrop-filter: blur(6px); border-bottom:1px solid var(--stroke); z-index: 5;
    }
    .brand{display:flex; align-items:center; gap:10px; font-weight:700}
    .brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent)}
    .actions{display:flex; gap:10px}
    button, .btn{
      appearance:none; border:1px solid var(--stroke); background:var(--card); color:var(--text);
      padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600; box-shadow:none; transition:.2s ease; 
    }
    button:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
    button:focus-visible{outline: var(--focus)}

    .grid{ 
      padding: 8px 20px 40px; 
      display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:22px; align-content:start;
    }

    /* CARD */
    .video-card{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; outline:none; }
    .thumb-wrap{
      position:relative; border-radius: clamp(12px, 3vw, var(--radius)); overflow:hidden; background:#111; aspect-ratio:16/9; border:1px solid var(--stroke);
    }
    .thumb{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); }
    .duration{ position:absolute; right:8px; bottom:8px; background:var(--chip); color:#fff; padding:3px 6px; border-radius:6px; font-size:12px; font-weight:700; letter-spacing:.2px; }
    .badge-live{ position:absolute; left:8px; top:8px; background:#ff0033; color:#fff; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:800; text-transform:uppercase; }
    .play{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:.25s ease; }
    .play svg{ width:62px; height:62px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
    .thumb-wrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.25), transparent 40%); opacity:.6; pointer-events:none; }
    .video-card:hover .play{ opacity:1 }
    .video-card:focus-visible .thumb-wrap{ outline: var(--focus) }

    .meta{ display:grid; grid-template-columns: 40px 1fr 28px; gap:10px; }
    .avatar{ width:40px; height:40px; border-radius:50%; background:#222; border:1px solid var(--stroke); object-fit:cover; }
    .title{ font-size: clamp(14px, 1.6vw, 16px); font-weight: 700; margin:2px 0; }
    .channel{ color: var(--muted); font-size: 13px; }
    .stats{ color: var(--muted); font-size: 13px; }
    .more{ align-self:start; display:grid; place-items:center; padding-top:6px; opacity:.8 }
    .more svg{ width:18px; height:18px }

    /* Light theme toggle */
    .light{ --bg:#f6f6f7; --card:#ffffff; --text:#111; --muted:#5d5d5d; --accent:#cc0000; --stroke:#e5e5e5; --chip:#000000b3; }

    /* Skeleton */
    .skeleton{ background:linear-gradient(90deg, #222 25%, #2a2a2a 37%, #222 63%); background-size:400% 100%; animation:shimmer 1.2s infinite; }
    @keyframes shimmer{ 0%{background-position: 100% 0} 100%{background-position: -100% 0} }

    footer{padding: 10px 20px 30px; color:var(--muted); font-size:13px; text-align:center}
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }