/* ============================================================
   Niriv Cinema — Structural CSS only. Colors use Tailwind classes.
   ============================================================ */

:root {
    --cinema-header-h: 56px;
    --cinema-sidebar-w: 260px;
    --cinema-radius: 8px;
    --cinema-radius-lg: 12px;
    --cinema-radius-xl: 16px;
}

/* ── Reset ────────────────────────────────────────────────── */

.cinema-platform a { text-decoration: none; }
.cinema-platform img { max-width: 100%; display: block; }

/* ── App Shell ─────────────────────────────────────────────── */

.cinema-app { display:flex; flex-direction:column; min-height:100vh; padding-top:var(--cinema-header-h); }
.cinema-layout { display:flex; flex:1; min-height:0; }
.cinema-main { flex:1; min-width:0; padding:20px 24px 40px; max-width:900px; margin:0 auto; width:100%; transition:margin-left .3s cubic-bezier(.25,.1,.25,1); }
.sidebar-open .cinema-main,
.sidebar-open .cinema-footer-inner { margin-left:var(--cinema-sidebar-w); }

/* ── Floating Header ──────────────────────────────────────── */

.cinema-header { position:fixed; top:0; left:0; right:0; z-index:60; height:var(--cinema-header-h); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.cinema-header-inner { display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 12px; max-width:1440px; margin:0 auto; gap:8px; }
.cinema-header-left { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cinema-sidebar-toggle { display:flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; border:none; border-radius:8px; cursor:pointer; transition:background .2s; }
.cinema-logo { display:flex; align-items:center; gap:6px; font-size:16px; font-weight:700; white-space:nowrap; }
.cinema-logo svg { flex-shrink:0; }
.cinema-header-nav { display:flex; align-items:center; gap:2px; margin:0 auto; }
@media (max-width:767px) { .cinema-header-nav { display:none; } }
.cinema-nav-link { padding:5px 12px; border-radius:6px; font-size:13px; font-weight:600; white-space:nowrap; transition:all .2s; }
.cinema-header-right { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.cinema-icon-btn { display:flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; border:none; border-radius:8px; cursor:pointer; transition:background .2s; }
.theme-toggle-sun { display:none; }
.theme-toggle-moon { display:block; }
.dark .theme-toggle-sun { display:block; }
.dark .theme-toggle-moon { display:none; }

/* ── Sidebar ───────────────────────────────────────────────── */

.cinema-sidebar { position:fixed; top:var(--cinema-header-h); left:0; bottom:0; z-index:50; width:var(--cinema-sidebar-w); transform:translateX(-100%); transition:transform .3s cubic-bezier(.25,.1,.25,1); overflow-y:auto; }
.cinema-sidebar.open { transform:translateX(0); }
.cinema-sidebar-inner { display:flex; flex-direction:column; padding:16px 12px; gap:4px; height:100%; overflow-y:auto; }
.cinema-sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:8px 0; }
.cinema-sidebar-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:4px 12px 6px; }
.cinema-sidebar-link { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; font-size:14px; font-weight:500; transition:all .2s; }
.cinema-sidebar-link svg { flex-shrink:0; opacity:.7; }
.cinema-sidebar-link.active svg { opacity:1; }
.cinema-sidebar-link-sm { font-size:13px; padding:6px 12px; }
.cinema-sidebar-footer { margin-top:auto; padding-top:8px; }
.cinema-sidebar-copy { font-size:11px; }

/* ── Search Overlay ────────────────────────────────────────── */

.cinema-search-overlay { position:fixed; inset:0; z-index:90; display:none; }
.cinema-search-overlay.open { display:block; }
.cinema-search-backdrop { position:absolute; inset:0; }
.cinema-search-dialog { position:absolute; inset:0; overflow:hidden; animation:cinemaSearchIn .35s cubic-bezier(.25,.1,.25,1) forwards; }
@keyframes cinemaSearchIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
.cinema-search-container { position:relative; max-width:1360px; margin:0 auto; padding:16px 24px 0; height:100%; display:flex; flex-direction:column; }
.cinema-search-input-wrap { position:relative; margin-bottom:20px; flex-shrink:0; }
.cinema-search-input-inner { display:flex; align-items:center; gap:14px; padding:0 20px; min-height:66px; border-radius:20px; transition:border-color .2s; }
.cinema-search-input { flex:1; border:none; background:transparent; font-size:22px; font-weight:500; outline:none; padding:8px 0; min-width:0; }
.cinema-search-input::placeholder { opacity:.6; }
.cinema-search-close { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; border-radius:50%; cursor:pointer; flex-shrink:0; transition:background .2s; }
.cinema-search-loading { height:3px; margin-top:-1px; border-radius:0 0 20px 20px; overflow:hidden; display:none; }
.cinema-search-loading.active { display:block; }
.cinema-search-loading::after { content:''; display:block; width:33%; height:100%; border-radius:2px; animation:cinemaSearchLoading 1.2s ease-in-out infinite; }
@keyframes cinemaSearchLoading { 0% { transform:translateX(-100%); } 100% { transform:translateX(400%); } }
.cinema-search-results { flex:1; min-height:0; overflow-y:auto; padding-bottom:32px; }
.cinema-search-results::-webkit-scrollbar { display:none; }
.cinema-search-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; text-align:center; padding:40px 20px; }
.cinema-search-empty-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-bottom:20px; }
.cinema-search-empty-title { font-size:20px; font-weight:700; margin:0 0 8px; }
.cinema-search-empty-desc { font-size:14px; margin:0 0 20px; }
.cinema-search-empty-hints { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.cinema-search-hint { padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; transition:all .2s; }
.cinema-search-noresults { display:flex; align-items:center; justify-content:center; min-height:200px; }
.cinema-search-noresults-text { font-size:15px; }
.cinema-search-section { margin-bottom:28px; }
.cinema-search-section-title { font-size:14px; font-weight:700; margin:0 0 12px; }

/* ── Hero text colors (always over dark gradient) ──────────── */
.cinema-hero-title { color:#fff; }
.cinema-hero-badge { background:rgba(239,68,68,.9); color:#fff; }
.cinema-hero-meta { color:rgba(255,255,255,.7); }
.cinema-hero-overview { color:rgba(255,255,255,.8); }

/* ── Detail page cover ─────────────────────────────────────── */
.cinema-detail-cover { height:220px; }
@media (min-width:768px) { .cinema-detail-cover { height:320px; } }

/* ── Detail hero text colors (always over dark gradient) ──── */
.cinema-detail-title { color:#fff; }
.cinema-detail-tagline { color:rgba(255,255,255,.6); }
.cinema-detail-meta { color:rgba(255,255,255,.7); }
.cinema-rating-circle span { color:#fff; }
.cinema-detail-providers { color:rgba(255,255,255,.5); }

/* ── Actor hero text colors (always over dark gradient) ───── */

/* ── Feature card text colors (always over dark gradient) ─── */
.cinema-feature-badge { color:#fbbf24; }
.cinema-feature-card-content h3 { color:#fff; }
.cinema-feature-card-content p { color:rgba(255,255,255,.7); }

/* ── Hero (hub page) — full-bleed, immersive ─────────────── */

.cinema-hero { position:relative; min-height:85vh; overflow:hidden; margin-bottom:48px; display:flex; align-items:flex-end; width:100vw; left:50%; margin-left:-50vw; margin-top:-20px; border-radius:0; }
.cinema-hero-media { position:absolute; inset:0; clip-path:url(#heroTeardropClip); }
.cinema-hero-backdrop { position:absolute; inset:0; }
.cinema-hero-backdrop img { width:100%; height:100%; object-fit:cover; }
.cinema-hero-gradient { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0,rgba(0,0,0,.4) 50%,transparent 100%); }
.cinema-hero-content { position:relative; z-index:2; padding:100px 36px 40px; max-width:900px; width:100%; margin:0 auto; }
.cinema-hero-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; margin-bottom:12px; }
.cinema-hero-title { font-size:clamp(28px,5vw,52px); font-weight:800; margin:0 0 8px; line-height:1.1; }
.cinema-hero-meta { display:flex; align-items:center; gap:12px; font-size:14px; margin-bottom:14px; flex-wrap:wrap; }
.cinema-hero-overview { font-size:15px; max-width:600px; margin-bottom:16px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cinema-hero-actions { display:flex; gap:10px; }
.cinema-hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.cinema-hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; padding:0; transition:all .3s; }
.cinema-hero-dot.active { background:#fff; border-color:#fff; transform:scale(1.3); }
@media (max-width:767px) {
  .cinema-hero { min-height:60vh; margin-bottom:24px; }
  .cinema-hero-content { padding:80px 20px 24px; }
  .cinema-hero-title { font-size:24px; }
}

/* ── Theme-aware colors (uses theme CSS variables) ──────────── */
.cinema-section-title,
.cinema-decade-label { color:hsl(var(--card-foreground)); }
.cinema-section-header { border-bottom:1px solid hsl(var(--border)); padding-bottom:12px; }
.cinema-overview-text { color:hsl(var(--foreground)); }
.cinema-poster-placeholder { background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }
.cinema-btn-primary { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.cinema-btn-primary:hover { opacity:.9; }
.cinema-btn-secondary { background:hsl(var(--muted)); color:hsl(var(--foreground)); }
.cinema-btn-secondary:hover { background:hsl(var(--accent)); }
.cinema-search-loading::after { background:hsl(var(--primary)); }
.cinema-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cinema-section-title { font-size:20px; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; }
.cinema-scroll-arrows { display:flex; gap:4px; }
.cinema-scroll-arrow { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid hsl(var(--border)); background:hsl(var(--background)); color:hsl(var(--foreground)); cursor:pointer; font-size:18px; line-height:1; transition:all .2s; }
.cinema-scroll-arrow:hover { background:hsl(var(--accent)); }
.cinema-scroll-arrow:disabled { opacity:.3; cursor:default; }
.cinema-scroll-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.cinema-scroll-row::-webkit-scrollbar { height:4px; }
.cinema-scroll-row::-webkit-scrollbar-thumb { border-radius:4px; background:hsl(var(--border)); }
.cinema-scroll-row::-webkit-scrollbar-track { background:transparent; }
.cinema-section { margin-bottom:36px; }

/* ── Theme-aware dynamic element colors (JS-rendered) ───────── */
.cinema-card { background:hsl(var(--card)); }
.cinema-card-rating { background:rgba(0,0,0,.7); color:#fff; }
.cinema-card-rating svg { color:#f59e0b; }
.cinema-card-title { color:hsl(var(--card-foreground)); }
.cinema-card-year { color:hsl(var(--muted-foreground)); }
.cinema-card-watchlist { background:rgba(0,0,0,.5); color:#fff; }
.cinema-card-watchlist.is-active { color:hsl(var(--destructive)); }
.cinema-top-rank { color:hsl(var(--muted-foreground)); }
.cinema-top-rank.is-top { color:#f59e0b; }
.cinema-top-title { color:hsl(var(--foreground)); }
.cinema-top-sub { color:hsl(var(--muted-foreground)); }
.cinema-top-score { color:hsl(var(--foreground)); }
.cinema-side-card { background:hsl(var(--card)); }
.cinema-side-card-content h4 { color:hsl(var(--card-foreground)); }
.cinema-side-card-content span { color:hsl(var(--muted-foreground)); }
.cinema-cast-info strong { color:hsl(var(--foreground)); }
.cinema-cast-info span { color:hsl(var(--muted-foreground)); }
.cinema-filmography-info strong { color:hsl(var(--foreground)); }
.cinema-filmography-info span { color:hsl(var(--muted-foreground)); }
.cinema-season-item { background:hsl(var(--card)); border:1px solid hsl(var(--border)); }
.cinema-season-summary { color:hsl(var(--foreground)); }
.cinema-season-summary:hover { background:hsl(var(--accent)); }
.cinema-season-meta strong { color:hsl(var(--foreground)); }
.cinema-season-meta span { color:hsl(var(--muted-foreground)); }
.cinema-episode-card:hover { background:hsl(var(--accent)); }
.cinema-episode-number { color:hsl(var(--muted-foreground)); }
.cinema-episode-title { color:hsl(var(--foreground)); }
.cinema-episode-overview { color:hsl(var(--muted-foreground)); }
.cinema-episode-skeleton { color:hsl(var(--muted-foreground)); }
.cinema-skeleton { background:hsl(var(--muted)); }
.cinema-skeleton-poster { background:hsl(var(--border)); }
.cinema-skeleton-text { background:hsl(var(--border)); }
.cinema-genre-pill { background:hsl(var(--muted)); color:hsl(var(--foreground)); }
.cinema-genre-pill:hover { background:hsl(var(--accent)); }
.cinema-filter-select { background:hsl(var(--background)); color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); }
.cinema-search-bar { background:hsl(var(--muted)); }
.cinema-search-bar svg { color:hsl(var(--muted-foreground)); }
.cinema-search-bar input { background:transparent; color:hsl(var(--foreground)); }
.cinema-search-bar input::placeholder { color:hsl(var(--muted-foreground)); }
.cinema-page-info { color:hsl(var(--muted-foreground)); }
.cinema-btn-outline { background:transparent; color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); }
.cinema-btn-outline:hover { background:hsl(var(--accent)); }
.cinema-watchlist-btn { background:hsl(var(--muted)); color:hsl(var(--foreground)); display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
.cinema-watchlist-btn:hover { background:hsl(var(--accent)); }
.cinema-watchlist-btn.saved svg { fill:currentColor; }
.cinema-error h3 { color:hsl(var(--destructive)); }
.cinema-error p { color:hsl(var(--muted-foreground)); }
.cinema-watchlist-empty svg { color:hsl(var(--muted-foreground)); }
.cinema-watchlist-empty h3 { color:hsl(var(--foreground)); }
.cinema-watchlist-empty p { color:hsl(var(--muted-foreground)); }
.cinema-watchlist-subtitle { color:hsl(var(--muted-foreground)); }
.cinema-cast-row::-webkit-scrollbar-thumb { background:hsl(var(--border)); }
.cinema-social-link { color:hsl(var(--muted-foreground)); background:hsl(var(--muted)); }
.cinema-social-link:hover { background:hsl(var(--accent)); }
.cinema-created-by { color:hsl(var(--muted-foreground)); }

/* ── Card ──────────────────────────────────────────────────── */

.cinema-card { flex-shrink:0; width:160px; scroll-snap-align:start; cursor:pointer; border-radius:var(--cinema-radius-lg); overflow:hidden; position:relative; }
.cinema-card:hover .cinema-card-trailer-btn { opacity:1; }
.cinema-card-poster { position:relative; aspect-ratio:2/3; }
.cinema-card-poster img { width:100%; height:100%; object-fit:cover; border-radius:var(--cinema-radius-lg) var(--cinema-radius-lg) 0 0; }
.cinema-card-trailer-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; z-index:2; }
.cinema-card-trailer-btn-inner { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .2s,background .2s; cursor:pointer; }
.cinema-card-trailer-btn-inner:hover { background:rgba(255,255,255,.3); transform:scale(1.1); }
.cinema-card-rating { position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:3px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.cinema-card-rating svg { width:12px; height:12px; flex-shrink:0; }
.cinema-card-body { padding:10px 12px 12px; }
.cinema-card-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.cinema-card-year { font-size:11px; margin:0 4px; }
.cinema-card-watchlist { position:absolute; top:8px; left:8px; z-index:3; width:30px; height:30px; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; font-size:14px; }
.cinema-card-watchlist.saved { color:hsl(var(--destructive)); }

/* ── Shared ──────────────────────────────────────────────────── */

.cinema-genre-pill { padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; transition:all .2s; display:inline-block; }

/* ── Buttons ───────────────────────────────────────────────── */

.cinema-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none; }
.cinema-btn-primary { }
.cinema-btn-accent { }
.cinema-btn-outline { padding:6px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }

/* ── Cast Row ──────────────────────────────────────────────── */

.cinema-cast-row { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.cinema-cast-row::-webkit-scrollbar { height:4px; }
.cinema-cast-row::-webkit-scrollbar-thumb { border-radius:4px; }
.cinema-cast-card { flex-shrink:0; width:120px; text-decoration:none; }
.cinema-cast-photo { width:120px; height:120px; border-radius:50%; overflow:hidden; margin-bottom:8px; }
.cinema-cast-photo img { width:100%; height:100%; object-fit:cover; }
.cinema-cast-info { text-align:center; }
.cinema-cast-info strong { display:block; font-size:13px; font-weight:600; margin-bottom:2px; }
.cinema-cast-info span { font-size:11px; }

/* ── Trailer Modal ─────────────────────────────────────────── */

.trailer-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; }
.trailer-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.9); }
.trailer-modal-content { position:relative; width:90%; max-width:960px; aspect-ratio:16/9; border-radius:16px; overflow:hidden; }
.trailer-modal-close { position:absolute; top:-44px; right:0; width:36px; height:36px; border:none; border-radius:50%; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:10; }
.trailer-modal-player { width:100%; height:100%; }
.trailer-modal-player iframe { width:100%; height:100%; border:none; }

/* ── Actor page ────────────────────────────────────────────── */

.cinema-actor-bio-text { font-size:14px; line-height:1.6; }
.cinema-bio-toggle { background:none; border:none; font-size:13px; font-weight:600; cursor:pointer; padding:0; background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); padding:4px 12px; border-radius:6px; }
.cinema-actor-social { display:flex; gap:10px; }
.cinema-social-link { display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500; text-decoration:none; transition:background .2s; }
.cinema-decade-group { margin-bottom:28px; }
.cinema-decade-label { font-size:18px; font-weight:700; margin:0 0 14px; }
.cinema-filmography-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.cinema-filmography-item { text-decoration:none; transition:transform .2s,box-shadow .2s; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--cinema-radius-lg); overflow:hidden; padding-bottom:8px; }
.cinema-filmography-item:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.cinema-filmography-poster { aspect-ratio:2/3; overflow:hidden; }
.cinema-filmography-poster img { width:100%; height:100%; object-fit:cover; }
.cinema-filmography-info strong { display:block; font-size:12px; font-weight:600; margin-bottom:2px; }
.cinema-filmography-info span { font-size:11px; }

/* ── Listing page ──────────────────────────────────────────── */

.cinema-listing-page { }
.cinema-listing-header { margin-bottom:24px; }
.cinema-section-title { margin:0 0 8px; font-size:28px; font-weight:800; }
.cinema-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.cinema-filter-group { display:flex; gap:8px; flex-wrap:wrap; }
.cinema-filter-select { padding:6px 12px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.cinema-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.cinema-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:32px; }
.cinema-page-info { font-size:13px; }
.cinema-search-bar { display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:var(--cinema-radius-lg); }
.cinema-search-bar svg { flex-shrink:0; }
.cinema-search-bar .cinema-search-input { font-size:15px; padding:6px 0; }
.cinema-search-input-text { padding:8px 14px; border-radius:8px; font-size:14px; min-width:220px; }

/* ── Top list cards ───────────────────────────────────────── */

.cinema-top-list { display:flex; flex-direction:column; gap:8px; }
.cinema-top-row { display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; border-radius:12px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); }
.cinema-top-rank { width:28px; text-align:center; font-size:14px; font-weight:700; }
.cinema-top-rank.is-top { font-size:18px; }
.cinema-top-thumb { width:44px; height:66px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.cinema-top-info { flex:1; min-width:0; }
.cinema-top-title { font-size:14px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cinema-top-sub { font-size:11px; }
.cinema-top-score { font-size:13px; font-weight:700; }

/* ── Feature cards (top-movies/top-actors) ─────────────────── */

.cinema-feature-card { position:relative; border-radius:var(--cinema-radius-lg); overflow:hidden; text-decoration:none; grid-column:span 2; min-height:300px; display:flex; align-items:flex-end; }
.cinema-feature-card-bg { position:absolute; inset:0; }
.cinema-feature-card-bg img { width:100%; height:100%; object-fit:cover; }
.cinema-feature-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0,transparent 100%); }
.cinema-feature-card-content { position:relative; z-index:2; padding:20px; }
.cinema-feature-badge { display:inline-flex; align-items:center; gap:6px; margin-bottom:8px; font-size:12px; font-weight:700; }
.cinema-feature-badge span { opacity:.8; font-weight:500; }
.cinema-feature-card-content h3 { font-size:22px; font-weight:700; margin:0 0 4px; }
.cinema-feature-card-content p { font-size:13px; margin:0; max-width:400px; }
.cinema-side-card { border-radius:var(--cinema-radius-lg); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; }
.cinema-side-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.cinema-side-card-content { padding:12px; flex:1; display:flex; flex-direction:column; gap:4px; }
.cinema-side-card-content h4 { font-size:14px; font-weight:700; margin:0; }
.cinema-side-card-content span { font-size:11px; }

/* ── TV Seasons ────────────────────────────────────────────── */

.cinema-seasons-list { display:flex; flex-direction:column; gap:8px; }
.cinema-season-item { border-radius:var(--cinema-radius-lg); overflow:hidden; }
.cinema-season-summary { display:flex; align-items:center; gap:14px; padding:14px; cursor:pointer; font-size:14px; transition:background .2s; }
.cinema-season-summary::-webkit-details-marker { display:none; }
.cinema-season-poster-mini { flex-shrink:0; width:50px; }
.cinema-season-poster-mini img { width:100%; border-radius:8px; }
.cinema-season-meta { flex:1; }
.cinema-season-meta strong { font-weight:600; }
.cinema-season-meta span { font-size:12px; }
.cinema-season-chevron { transition:transform .2s; flex-shrink:0; }
.cinema-season-item[open] .cinema-season-chevron { transform:rotate(90deg); }
.cinema-season-episodes { padding:0 14px 14px; }
.cinema-season-episodes-grid { display:grid; gap:8px; }
.cinema-episode-card { display:flex; gap:10px; padding:8px; border-radius:8px; transition:background .2s; }
.cinema-episode-still { flex-shrink:0; width:120px; aspect-ratio:16/9; border-radius:6px; overflow:hidden; }
.cinema-episode-still img { width:100%; height:100%; object-fit:cover; }
.cinema-episode-info { flex:1; min-width:0; }
.cinema-episode-number { font-size:11px; font-weight:600; margin-bottom:2px; }
.cinema-episode-title { font-size:13px; font-weight:600; margin-bottom:2px; }
.cinema-episode-overview { font-size:11px; margin:0; }
.cinema-episode-skeleton { font-size:12px; padding:8px; }

/* ── Footer ────────────────────────────────────────────────── */

.cinema-footer { padding:16px 24px; }
.cinema-footer-inner { max-width:1360px; margin:0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; transition:margin-left .3s cubic-bezier(.25,.1,.25,1); }
.cinema-footer-logo { display:flex; align-items:center; gap:6px; font-weight:600; }
.cinema-footer-logo svg { }
.cinema-footer-divider { width:3px; height:3px; border-radius:50%; }
.cinema-footer-link { transition:color .2s; }

/* ── Skeleton / Utility ────────────────────────────────────── */

.cinema-skeleton { animation:cinemaPulse 2s cubic-bezier(.4,0,.6,1) infinite; border-radius:var(--cinema-radius-lg); }
@keyframes cinemaPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.cinema-skeleton-poster { aspect-ratio:2/3; border-radius:var(--cinema-radius-lg); margin-bottom:8px; }
.cinema-skeleton-text { height:14px; border-radius:6px; margin-bottom:6px; width:70%; }
.cinema-error { text-align:center; padding:60px 20px; }
.cinema-error h3 { font-size:18px; font-weight:700; margin:0 0 8px; }
.cinema-error p { font-size:14px; margin:0; }
.cinema-poster-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:inherit; }
.cinema-created-by { font-size:13px; margin-top:8px; }
.cinema-watchlist-page { max-width:900px; margin:0 auto; }
.cinema-watchlist-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:40vh; gap:12px; text-align:center; }
.cinema-watchlist-empty svg { opacity:.3; }
.cinema-watchlist-empty h3 { font-size:20px; font-weight:700; margin:0; }
.cinema-watchlist-empty p { font-size:14px; margin:0; max-width:400px; }
.cinema-watchlist-subtitle { font-size:14px; margin:8px 0 0; }
.scrollbar-hide { scrollbar-width:none; -ms-overflow-style:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width:1023px) {
    .cinema-sidebar.open { transform:translateX(0); }
    .sidebar-open .cinema-main,
    .sidebar-open .cinema-footer-inner { margin-left:0; }
    .cinema-detail-cover { height:160px; }
    .cinema-feature-card { grid-column:span 1; min-height:200px; }
    .cinema-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
    .cinema-hero { min-height:40vh; }
    .cinema-hero-content { padding:24px 20px; }
    .cinema-hero-title { font-size:24px; }
}

@media (max-width:767px) {
    .cinema-main { padding:16px 12px 32px; }
    .cinema-filmography-grid { grid-template-columns:repeat(2,1fr); }
    .cinema-search-input { font-size:17px; }
    .cinema-search-input-inner { min-height:56px; padding:0 14px; }
    .cinema-search-container { padding:12px 12px 0; }
    .cinema-footer-inner { flex-direction:column; text-align:center; gap:6px; }
    .cinema-footer-divider { display:none; }
}