/* Visual polish layer. Application behavior intentionally unchanged. */
:root{--brand-1:#ff6b35;--brand-2:#e73c7e;--brand-3:#7c5cff;--accent:#ff6b35;--radius:12px;--radius-sm:8px;--navbar-height:64px}
:root[data-theme=light]{--bg:#f4f5f8;--surface:#fff;--surface-2:#eceef3;--line:#11182714;--text:#13151b;--muted:#606575;--faint:#858a98;--header-bg:#f4f5f8ed;--nav-bg:#ffffffed;--shadow:#1118272b}
body{letter-spacing:0}.main-content{padding-bottom:calc(var(--navbar-height) + 42px + env(safe-area-inset-bottom,0px))}
.home-top{padding-top:12px;padding-bottom:10px;background:color-mix(in srgb,var(--header-bg) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}
.brand-logo{width:38px;height:38px;border-radius:10px;box-shadow:0 8px 20px -12px var(--shadow)}
.brand-name{background:none;color:var(--text);font-size:17px;letter-spacing:0}.brand-sub{font-size:11.5px}
.icon-btn{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--surface-2) 88%,transparent)}
.hero{margin:2px 0 14px}.hero-slide.has-bd{min-height:220px;max-height:360px}
.hero-bd,.hero-slide:before,.hero-bg,.hero-bg-under{border-radius:16px!important}
.hero-slide.has-bd:before{background:linear-gradient(0deg,#07080bf2 0,#07080ba8 37%,#07080b12 72%,#07080b38 100%),linear-gradient(90deg,#07080b80,#0000 62%);border-color:#ffffff12}
.hero-slide.has-bd .hero-poster{flex-basis:78px;margin:0 0 14px 14px}.hero-slide.has-bd .hero-poster img{width:78px;border-radius:10px;border:1px solid #ffffff47;box-shadow:0 12px 26px -10px #000}
.hero-slide.has-bd .hero-info{gap:6px;padding-bottom:14px}.hero-slide.has-bd .hero-title{font-size:21px;letter-spacing:0}.hero-kicker{letter-spacing:.5px}
.hero-btn{border-radius:10px;box-shadow:0 10px 22px -12px #e73c7e}.hero-counter{margin-top:8px;font-variant-numeric:tabular-nums}
.code-box{gap:8px;margin-bottom:22px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 30px -24px var(--shadow)}
.code-box-text b{font-size:14px}.code-box-text span{font-size:12px}.code-box-row input{height:43px;border-radius:10px;font-size:15px}.code-box-row .btn{width:46px;border-radius:10px}
.movie-section{margin-bottom:30px}.movie-section-header{padding-bottom:11px;align-items:center}.movie-section-header h2{font-size:18px;letter-spacing:0}.view-all-link{font-size:13px}
.horizontal-movie-list{gap:13px;padding-bottom:8px}.mc-poster{border-radius:10px;box-shadow:0 12px 28px -18px var(--shadow)}.mc-title{font-size:13px;letter-spacing:0;margin-top:7px}.mc-meta{font-size:11.5px}.mc-badge{border-radius:6px}
.genre-chip{border-radius:10px;padding:8px 12px;background:var(--surface)}.stories-section-title{font-size:14px}.story-image-wrapper{background:var(--surface);border:2px solid var(--accent);padding:2px}
.navbar{left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:var(--navbar-height);border-radius:16px;background:color-mix(in srgb,var(--nav-bg) 91%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);box-shadow:0 16px 36px -16px var(--shadow)}
.nav-link{gap:3px;font-size:10.5px}.nav-link svg{font-size:20px}.nav-link.active svg{filter:none}
.search-bar-container,.fd-sort-btn,.fd-genre,.fd-year,.ep-chip{border-radius:10px}.mp-cover{border-radius:0 0 18px 18px}.mp-poster,.mp-sk-poster{border-radius:12px}.mp-head h1,.page-title,.pf-hero-text h1{letter-spacing:0}.pf-card,.pf-stat,.pf-hero{border-radius:14px}
@media (min-width:900px){:root{--pad:30px}.home-top{padding-top:16px}.hero{margin-top:8px}.hero-slide.has-bd{max-height:410px}.hero-slide.has-bd .hero-poster{flex-basis:118px}.hero-slide.has-bd .hero-poster img{width:118px}.hero-slide.has-bd .hero-title{font-size:30px}.code-box{padding:12px 14px}.navbar{max-width:500px;width:500px}}
@media (max-width:420px){:root{--pad:12px}.home-top{padding-left:12px;padding-right:12px}.brand-sub{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-slide.has-bd{min-height:210px}.hero-slide.has-bd .hero-title{font-size:19px}.code-box{margin-left:12px;margin-right:12px}.navbar{left:8px;right:8px}}
@media (prefers-reduced-motion:reduce){.mc-poster,.hero-bd,.navbar,.home-top{transition:none!important}}

/* Filter drawer */
.fd-overlay{background:#080a0fc2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.fd-panel{width:min(94vw,440px);border-radius:18px 0 0 18px;border-left:1px solid var(--line);box-shadow:-28px 0 70px -24px #000c}
.fd-head{align-items:center;padding:20px 20px 15px;background:var(--bg);border-bottom:1px solid var(--line)}
.fd-head h2{font-size:22px;letter-spacing:0;line-height:1.1}.fd-head p{display:inline-flex;margin-top:7px;padding:5px 9px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:11.5px}
.fd-close{width:38px;height:38px;border-radius:10px;background:var(--surface-2);box-shadow:none}
.fd-body{padding:2px 20px 18px}.fd-sec{padding:2px 0;border-bottom:1px solid var(--line)}
.fd-sec-head{padding:16px 0 12px}.fd-sec-title{font-size:14.5px;letter-spacing:0}.fd-sec-value{padding:4px 8px;border-radius:7px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-size:11px}
.fd-sort,.fd-genres{gap:8px}.fd-sort-btn,.fd-genre{min-height:46px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px;box-shadow:0 8px 20px -18px var(--shadow)}
.fd-sort-btn.on,.fd-genre.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.fd-genre-emoji,.fd-sort-ico{font-size:16px}.fd-count{min-width:25px;padding:3px 7px;border-radius:6px;font-size:10.5px}
.fd-more{display:inline-flex;padding:9px 0 11px;font-size:12.5px}.fd-row{min-height:42px;padding:9px 8px;border-radius:8px;font-size:13.5px}.fd-years{gap:7px}.fd-year{min-height:54px;padding:9px 4px;border-radius:10px}
.fd-foot{padding:11px 20px calc(13px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 93%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fd-apply{height:48px;border-radius:10px;font-size:14px;box-shadow:0 12px 28px -14px #e73c7e}
body:has(.fd-overlay) .navbar{opacity:0;transform:translateY(120%);pointer-events:none}
@media (max-width:760px){
  .fd-panel{width:100vw;max-width:none;border:0;border-radius:0;box-shadow:none}
  .fd-head{padding:16px 16px 13px}.fd-head h2{font-size:20px}.fd-head p{margin-top:5px}
  .fd-body{padding-left:16px;padding-right:16px}.fd-foot{padding-left:16px;padding-right:16px}
}

/* Filter redesign v2: minimal cinema catalogue */
.fd-panel{background:var(--bg)}
.fd-head{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 14px;padding:18px 22px 14px}
.fd-head>div:first-child{display:contents}.fd-head h2{grid-column:1;grid-row:1;font-size:20px;font-weight:900}.fd-head p{grid-column:1;grid-row:2;display:block;margin:0;padding:0;background:none;border-radius:0;color:var(--muted);font-size:12px}
.fd-head-actions{grid-column:2;grid-row:1/3;align-self:center}.fd-close{width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-2)}
.fd-body{padding:0 22px 22px}.fd-sec{padding:0 0 4px}.fd-sec-head{padding:18px 0 10px}.fd-sec-title{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fd-sec-value{padding:0;background:none;color:var(--accent);font-size:11px}.fd-sort,.fd-genres{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fd-sort-btn,.fd-genre{min-height:48px;border:0;border-radius:0;background:var(--surface);box-shadow:none;padding:11px 13px;font-size:13px}
.fd-sort-btn.on,.fd-genre.on{border:0;background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 3px 0 0 var(--accent);color:var(--text)}
.fd-sort-ico,.fd-genre-emoji{display:none}.fd-count{margin-left:auto;min-width:28px;padding:3px 7px;border-radius:999px;background:var(--surface-2);font-size:10px}
.fd-genre.on .fd-count{background:var(--accent);color:#fff}.fd-more{padding:12px 2px 10px;color:var(--accent);font-size:12px}
.fd-list{gap:1px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}.fd-row{min-height:44px;border-radius:0;background:var(--surface);padding:9px 12px}.fd-flag{font-size:17px}.fd-row.on{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.fd-years{gap:1px;padding:1px;border-radius:12px;background:var(--line)}.fd-year{min-height:58px;border:0;border-radius:0;background:var(--surface)}.fd-year:first-child{border-radius:10px 0 0 10px}.fd-year:nth-child(3){border-radius:0 10px 10px 0}.fd-year.on{background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 0 -3px 0 var(--accent)}
.fd-foot{border-top:1px solid var(--line);padding-top:12px}.fd-apply{background:var(--text);color:var(--bg);box-shadow:none;border-radius:10px;font-weight:850}.fd-apply:hover{opacity:.92}
@media (max-width:760px){.fd-head{padding:16px 16px 13px}.fd-body{padding:0 16px 20px}.fd-foot{padding-left:16px;padding-right:16px}.fd-sort-btn,.fd-genre{min-height:46px}}

/* Katta ekranda pastki menyu markazda bo'lishi kerak.
   Yuqoridagi `.navbar{left:12px;right:12px}` asosiy CSS'ning
   @media(min-width:768px) qoidasini (left:50%; right:auto) bosib ketgan edi,
   `transform:translateX(-50%)` esa qolib ketib, menyu chapga — ekrandan
   tashqariga surilgan edi. */
@media (min-width:768px){
  .navbar{left:50%;right:auto;transform:translateX(-50%)}
  body:has(.fd-overlay) .navbar{transform:translate(-50%,120%)}
}

/* Hero rasmi: `object-fit:cover` markazdan kesardi — keng ekranda
   (hero ~2.8:1, TMDB backdrop 16:9) rasmning tepasi, ya'ni aktyorlarning
   boshi kesilib ketardi. O'lcham o'zgarmaydi, faqat kesish nuqtasi
   yuqoriga suriladi: tepa ko'rinadi, pastdan (matn/gradient ostidan) kesiladi. */
.hero-bd{object-position:50% 20%}
.hero-bg,.hero-bg-under{background-position:50% 20%}

/* Hero rasmi eng TEPADAN ko'rsatiladi: 20% ham keng ekranda yuzni kesardi.
   Rasmning yuqorisidan hech narsa yo'qolmaydi, pastdan (matn/gradient ostidan) kesiladi. */
.hero-bd{object-position:50% 0%}
.hero-bg,.hero-bg-under{background-position:50% 0%}

/* Sarlavha ingichkaroq: ~62px -> 46px */
.home-top{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}
.brand{gap:8px}
.brand-logo{width:32px;height:32px;border-radius:9px}
.brand-name{font-size:15.5px;line-height:1.15}
.brand-sub{font-size:11px;margin-top:0}
.top-actions{gap:6px}
.icon-btn{width:34px;height:34px;border-radius:9px;font-size:16px}