/* ✨ Modern Streaming UI */
:root{ --ring: 0 0% 100%; }
html.dark :root{ --ring: 0 0% 20%; }

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Header / Navbar */
.navbar{ position: sticky; top: 0; z-index: 40; backdrop-filter: blur(8px); background: rgba(255,255,255,.7); }
html.dark .navbar{ background: rgba(24,24,27,.7); }

/* Inputs / Buttons */
.input{ padding: .6rem .9rem; border-radius: .9rem; border: 1px solid rgb(212 212 216); background: #fff; color: #111827; transition: box-shadow .15s ease, border-color .15s ease; }
html.dark .input{ border-color: rgb(63 63 70); background: rgb(39 39 42); color: #e5e7eb; }
.input:focus{ outline: none; box-shadow: 0 0 0 4px rgba(251, 191, 36, .35); border-color: #f59e0b; }

.btn{ display:inline-flex; align-items:center; gap:.5rem; justify-content:center; padding:.6rem 1.1rem; border-radius:1rem; border:1px solid rgba(0,0,0,.04); background:#fbbf24; color:#000; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.14); cursor:pointer; transition: transform .08s ease, box-shadow .2s ease, opacity .15s ease; }
.btn:hover{ opacity:.95; box-shadow:0 10px 26px rgba(0,0,0,.18); transform: translateY(-1px); }
.btn:active{ transform:scale(.98); }

/* Cards */
.card{ display:block; border-radius:1.2rem; overflow:hidden; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.08); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.card:hover{ transform: translateY(-2px) scale(1.02); box-shadow:0 18px 38px rgba(0,0,0,.15); }
html.dark .card{ background: rgb(39 39 42); }

/* Thumbs */
.thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#e5e7eb; }
html.dark .thumb{ background:#3f3f46; }

/* Hero */
.hero{ margin-top:1rem; }
.hero-cover{ position:relative; border-radius:1.6rem; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter: blur(10px) saturate(1.1); transform: scale(1.05); }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 40%, rgba(255,255,255,0) 100%); }
html.dark .hero-overlay{ background: linear-gradient(180deg, rgba(24,24,27,.85) 0%, rgba(24,24,27,.6) 40%, rgba(24,24,27,0) 100%); }
.hero-inner{ position:relative; padding:2rem; min-height:220px; display:flex; flex-direction:column; justify-content:center; }
.hero-title{ font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem); font-weight:900; text-shadow: 0 2px 10px rgba(0,0,0,.15); }
.hero-text{ max-width: 720px; opacity:.9; }

/* Chips */
.chip{ display:inline-block; font-size:.85rem; padding:.25rem .75rem; border-radius:999px; background:rgba(9,9,11,.9); color:#fff; }
html.dark .chip{ background:#e5e7eb; color:#111827; }

/* Rows (horizontal scroller) */
.row{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
.row .item{ min-width: 260px; scroll-snap-align: start; }
.row::-webkit-scrollbar{ height: .6rem; }
.row::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: .5rem; }
html.dark .row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); }

/* Sidebar layout (season page) */
.layout{ display:grid; grid-template-columns: 1fr; gap:1.25rem; }
@media (min-width: 1024px){
  .layout{ grid-template-columns: 1fr 320px; }
}
.sidebar .block{ @apply card; }
.sidebar .block{ padding:1rem; }

/* Tabs (season switch) */
.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; }
.tab{ padding:.4rem .8rem; border-radius: 999px; background: rgba(0,0,0,.05); font-weight:600; }
.tab.active{ background:#111; color:#fff; }
html.dark .tab{ background: rgba(255,255,255,.1); color:#e5e7eb; }
html.dark .tab.active{ background: #e5e7eb; color:#111827; }

/* line clamp */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Scroll to top */
#scrollTop{ position:fixed; right:20px; bottom:20px; z-index:60; display:none; }