:root {
  color-scheme: dark;
  --bg: #0b0b0f; --panel: #15151c; --fg: #e7e7ea; --muted: #9a9aa2; --accent: #e50914;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px;
  padding: 12px 24px; background: rgba(11,11,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #1f1f28; }
.logo { font-weight: 800; letter-spacing: .3px; color: #fff; }
.logo .mk { color: var(--accent); }
.topbar .search { margin-left: auto; }
.topbar .search input { background: var(--panel); border: 1px solid #2a2a35; color: var(--fg);
  padding: 8px 12px; border-radius: 999px; width: min(42vw, 360px); outline: none; }

/* rows (home) */
.row { margin: 28px 0; }
.row h2 { font-size: 1.15rem; margin: 0 0 12px; }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }

/* grids (channel / search / more) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* card */
.card { display: block; }
.card .thumb { aspect-ratio: 16/9; background: #222 center/cover no-repeat; border-radius: 10px;
  position: relative; box-shadow: 0 1px 0 #000; transition: transform .12s ease; }
.card:hover .thumb { transform: translateY(-3px) scale(1.02); outline: 2px solid #2a2a35; }
.card .dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.8);
  font-size: .72rem; padding: 1px 5px; border-radius: 4px; }
.card .cmeta { padding: 8px 2px; }
.card .cmeta .t { font-weight: 600; line-height: 1.25; }
.card .cmeta .c { color: var(--muted); font-size: .85rem; }

/* watch */
.watch media-controller { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.watch h1 { margin: 18px 0 4px; font-size: 1.5rem; }
.watch .byline { color: var(--muted); margin-bottom: 12px; }
.watch .byline a { color: #cfcfe6; }
.watch .desc { white-space: pre-wrap; max-width: 80ch; }
.watch h3 { margin-top: 28px; }