/* UI audit fixes - cross-browser, responsive, and interaction polish. Frontend-only. */
:root{--ui-safe-x:clamp(14px,3vw,32px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(139,124,255,.18)}
button,input,select,textarea{-webkit-appearance:none;appearance:none;border-radius:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(139,124,255,.88);outline-offset:3px}
img{height:auto;max-width:100%}
.navbar,.hero-sidecard,.hero-arrow,.hero-cta-secondary,.site-header,.featured-filter-panel,.collections-reco-bar,.admin-card,.modal-content{-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%)}
.container,.collections-container,.featured-main .container{max-width:calc(100vw - var(--ui-safe-x) * 2)}
.navbar .container{min-width:0}.navbar-logo{min-width:0}.navbar-logo h1,.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navbar-categories{flex:1 1 auto;min-width:0}.navbar-search{flex:0 1 320px;min-width:180px}.navbar-actions{flex:0 0 auto}.nav-action-btn,.icon-btn{flex:0 0 auto;text-decoration:none}
.section-title,.hero-title,.detail-title,.featured-hero h1,.collections-hero h1,.collection-title,.movie-title,.recommend-title{overflow-wrap:anywhere}.section-desc,.hero-description,.detail-desc,.collection-desc,.movie-desc,.recommend-desc{overflow-wrap:anywhere}
.hero-slide-bg,.movie-cover,.rail-cover,.recommend-cover,.detail-cover,.collection-cover,.featured-card-cover,.collection-visual img{object-fit:cover;background:#12151D}
.hero-actions,.section-actions,.state-feedback-actions,.empty-state-actions,.detail-actions{min-width:0}.btn,.movie-get-btn,.hero-cta-primary,.hero-cta-secondary{max-width:100%;white-space:normal;text-align:center}.hero-progress,.hero-dots{pointer-events:auto}.hero-dot-btn,.featured-hero-dot,.collections-hero-dots button{cursor:pointer}
/* Collections page had a separate header without loaded styles. Keep it visually aligned with the shared navbar. */
.site-header{position:sticky;top:0;z-index:100;background:rgba(6,13,25,.82);border-bottom:1px solid rgba(139,124,255,.12);box-shadow:0 10px 35px rgba(0,0,0,.18)}
.site-header-inner{width:min(1320px,calc(100% - 48px));max-width:calc(100vw - var(--ui-safe-x) * 2);min-height:72px;margin:0 auto;display:flex;align-items:center;gap:18px;min-width:0}.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}.brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(139,124,255,.18),rgba(124,108,255,.18));border:1px solid rgba(120,210,255,.18);color:var(--accent,#8B7CFF);box-shadow:0 10px 28px rgba(139,124,255,.12);flex:0 0 auto}.brand-name{font-size:20px;font-weight:780;color:var(--text,#F2F5FA)}.main-nav{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}.main-nav::-webkit-scrollbar{display:none}.nav-item{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid transparent;color:var(--text-2,#a9b8ce);white-space:nowrap;text-decoration:none;transition:.22s cubic-bezier(.2,.8,.2,1)}.nav-item:hover{color:var(--text,#F2F5FA);background:rgba(255,255,255,.045);border-color:rgba(139,124,255,.14)}.nav-item.active{color:#0C0F15;background:linear-gradient(135deg,var(--accent,#8B7CFF),#8ddfff);border-color:rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(139,124,255,.20)}.header-search{width:min(320px,26vw);height:42px;border:1px solid rgba(139,124,255,.14);border-radius:14px;background:rgba(13,25,45,.72);display:flex;align-items:center;padding:0 6px 0 14px;flex:0 1 320px;min-width:190px}.header-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text,#F2F5FA);font-size:14px}.header-search button{width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--text-2,#a9b8ce);cursor:pointer}.header-actions{display:flex;gap:8px;flex:0 0 auto}.icon-btn{width:40px;height:40px;border-radius:14px;border:1px solid rgba(139,124,255,.12);background:rgba(13,25,45,.64);color:var(--text-2,#a9b8ce);display:grid;place-items:center;transition:.22s cubic-bezier(.2,.8,.2,1)}.icon-btn:hover{transform:translateY(-1px);color:var(--text,#F2F5FA);border-color:rgba(139,124,255,.32);background:rgba(139,124,255,.09)}
.collections-container{width:min(1560px,calc(100% - 96px))}.collections-hero-tags,.collections-filter-options{min-width:0}.collections-hero-tags button,.collections-filter-options button{max-width:100%;white-space:normal}.collections-section-header{gap:20px}.collection-card{min-width:0}.collection-footer{min-width:0}.collection-count-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1800px){:root{--container:1560px}.site-header-inner{width:min(1560px,calc(100% - 72px))}.movie-grid{gap:24px}.hero-copy{max-width:min(820px,54vw)!important}}
@media (max-width:991px){.site-header-inner{flex-wrap:wrap;padding:12px 0}.main-nav{order:3;width:100%;flex-basis:100%;padding-bottom:2px}.header-search{order:2;margin-left:auto;width:min(460px,48vw);flex-basis:min(460px,48vw)}.collections-container{width:calc(100% - 28px)}.collections-section-header{display:block}.collections-section-header p{max-width:100%}.featured-filter-row,.collections-filter-row{min-width:0}.featured-filter-panel,.collections-toolbar{overflow:hidden}.featured-filter-row,.collections-filter-options{overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}}
@media (max-width:767px){.container,.site-header-inner{width:calc(100% - 28px)}.navbar .container{gap:10px}.navbar-logo h1,.brand-name{font-size:18px}.navbar-search,.header-search{order:4;width:100%;flex-basis:100%;margin-left:0;min-width:0}.navbar-categories,.main-nav{order:3;width:100%;flex-basis:100%;padding-bottom:2px}.nav-category,.nav-item{height:36px;padding:0 13px}.nav-action-btn,.icon-btn{width:38px;height:38px}.collections-hero{height:auto;min-height:430px}.collections-hero-inner{padding:92px 0 62px}.collections-hero h1{font-size:clamp(48px,18vw,72px);letter-spacing:-.05em}.collections-subtitle{font-size:16px;line-height:1.65}.collections-content{padding-top:26px}.collection-card{min-height:0}.collection-info{padding:22px}.collection-footer{align-items:flex-start;flex-direction:column}.featured-hero-tags,.featured-filter-row,.hero-actions,.detail-actions{gap:8px}.featured-chip,.featured-filter-pill,.collections-hero-tags button,.collections-filter-options button{padding:9px 13px;font-size:13px}.state-feedback-bar,.collections-reco-bar,.featured-reco-bar{gap:14px}.movie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer .container{gap:14px}}
@media (max-width:460px){.movie-grid{grid-template-columns:1fr}.site-header-inner{gap:10px}.brand-mark{width:34px;height:34px}.collections-hero h1{font-size:48px}.collections-kicker{letter-spacing:.22em;font-size:12px}.collections-hero-tags,.collections-filter-options{gap:8px}.collections-empty{padding:28px 18px}.featured-load-more-wrap,.collections-load-wrap{text-align:left}.btn,.movie-get-btn{width:100%}.hero-actions .hero-cta-primary{width:auto}.nav-action-btn[title],.icon-btn[title]{position:relative}}
@supports not (text-wrap: balance){.hero-title,.section-title{text-wrap:normal}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.navbar,.site-header,.admin-card,.featured-filter-panel,.collections-reco-bar{background:rgba(6,13,25,.96)}}