@font-face{font-family:"Montserrat";src:url("../assets/fonts/_Montserrat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/_Montserrat-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/_Montserrat-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:400 14px/1.4 "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--fg);}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:root{--bg:#0b0711;--fg:#eceaf4;--muted:#a9a5b5;--brand:#6c7bff;--accent:#ff4ddb;--blue:#2ea8ff;--surface:#1b1426;--card:#1f172c;--radius:14px;--w:clamp(300px,92vw,1100px);--border:1px solid rgba(255,255,255,.08);}
.theme--dark{background:radial-gradient(1000px 1000px at 30% -10%,#1a1225 0%,#0b0711 45%),var(--bg);color:var(--fg);}
.container{width:var(--w);margin-inline:auto;padding-inline:12px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes bounce{0%,20%,53%,80%,100%{transform:translateY(0)}40%,43%{transform:translateY(-10px)}70%{transform:translateY(-5px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slideInUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideInDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes star-pop{0%{transform:scale(.6);filter:drop-shadow(0 0 0 #ff7bf5)}70%{transform:scale(1.1);filter:drop-shadow(0 0 10px #ff7bf5)}100%{transform:scale(1);filter:drop-shadow(0 0 4px #a24bff)}}
@keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(1)}75%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes tabBarBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 3px rgba(255,77,219,0.3)}50%{box-shadow:0 0 12px rgba(255,77,219,0.7)}}
.animate-fadeIn{animation:fadeIn .5s ease-out}
.animate-fadeInUp{animation:fadeInUp .5s ease-out}
.animate-fadeInDown{animation:fadeInDown .5s ease-out}
.animate-fadeInLeft{animation:fadeInLeft .5s ease-out}
.animate-fadeInRight{animation:fadeInRight .5s ease-out}
.animate-scaleIn{animation:scaleIn .4s ease-out}
.animate-pulse{animation:pulse 1.5s infinite}
.animate-bounce{animation:bounce .8s ease-in-out}
.animate-shake{animation:shake .4s ease-in-out}
.animate-rotate{animation:rotate 1.5s linear infinite}
.animate-slideInUp{animation:slideInUp .3s ease-out}
.animate-slideInDown{animation:slideInDown .3s ease-out}
.animate-heartBeat{animation:heartBeat .5s ease-in-out}
.animate-tabBarBounce{animation:tabBarBounce .4s ease-in-out}
.animate-glowPulse{animation:glowPulse 1.5s infinite}
.delay-100{animation-delay:.1s}
.delay-200{animation-delay:.15s}
.delay-300{animation-delay:.2s}
.delay-400{animation-delay:.25s}
.delay-500{animation-delay:.3s}
.header{position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);background:rgba(11,7,17,.6);border-bottom:1px solid rgba(255,255,255,.06);animation:fadeInDown .4s ease-out;}
.header__inner{height:56px;display:flex;align-items:center;justify-content:space-between;animation:fadeIn .6s ease-out;}
.logo{font-weight:700;letter-spacing:.3px;animation:scaleIn .5s ease-out;}
.header__actions{display:flex;gap:10px;animation:fadeInRight .5s ease-out;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:#2a2036;border:1px solid rgba(255,255,255,.08);color:#e8defb;transition:all .2s ease;}
.pill:hover{transform:translateY(-1px);background:#3a2a52;}
.pill--ghost{background:transparent;border-color:rgba(255,255,255,.14);}
.pill .i{width:16px;height:16px}
.main{padding:10px 0 60px;animation:fadeIn .6s ease-out;}
.hero{display:grid;grid-template-columns:1fr;gap:12px;padding:14px 0 6px;}
.hero-card{position:relative;background:var(--card);border:var(--border);border-radius:16px;overflow:hidden;animation:scaleIn .5s ease-out;}
.hero-card__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid transparent;font-weight:600;transition:all .2s ease;}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);}
.btn .i{width:16px;height:16px}
.btn--share{position:absolute;left:12px;bottom:12px;background:linear-gradient(180deg,#46b0ff,#1e90ff);color:#071521;box-shadow:0 4px 12px rgba(30,144,255,.35);animation:pulse 1.5s infinite;}
.chips{display:flex;gap:10px;overflow:auto;padding:10px 0 4px;animation:fadeInUp .5s ease-out;}
.chip{padding:10px 14px;border-radius:12px;background:#2a2036;border:1px solid rgba(255,255,255,.06);color:#d7d3e3;white-space:nowrap;transition:all .2s ease;}
.chip:hover{transform:translateY(-1px);background:#3a2a52;}
.chip--active{background:#3a2a52;border-color:rgba(255,255,255,.12);animation:glowPulse 1.5s infinite;}
.section{padding:12px 0 2px;animation:fadeInUp .5s ease-out;}
.h2{margin:6px 0 10px;font-size:18px;animation:fadeInLeft .5s ease-out;}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.card{background:var(--card);border:var(--border);border-radius:14px;padding:8px;transition:all .2s ease;animation:scaleIn .4s ease-out;}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.3);border-color:rgba(255,255,255,.25);animation:glowPulse 1.5s infinite;}
.card__img{height:70px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),url("../assets/images/home/hero-left.jpg") center/cover no-repeat;transition:all .2s ease;}
.card:hover .card__img{transform:scale(1.03);}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;animation:fadeInUp .3s ease-out;}
.card__title{margin:0;font-size:10px;font-weight:600;}
.badge {
    color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    animation: none !important;
    box-shadow: none !important;
}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;padding:8px 4px;background:#0b0711f2;border-top:1px solid #201734;backdrop-filter:blur(6px) saturate(130%);z-index:1000;animation:slideInUp .4s ease-out;}
.tabbar__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;color:#e9d7ff;text-decoration:none;font-size:11px;transition:all .2s ease;}
.tabbar__item:hover{transform:translateY(-2px);}
.tabbar__item img{width:18px;height:18px;transition:all .2s ease;}
.tabbar__item:active img{transform:translateY(1px) scale(.96);animation:tabBarBounce .2s ease-in-out;}
.tabbar__ink{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:24px;height:4px;border-radius:6px;filter:blur(4px);opacity:.85;background:linear-gradient(90deg,#ff7bf5,#8b3dff);transition:all .2s ease;}
.tabbar__item--active .tabbar__ink{animation:glowPulse 1.5s infinite;}
.tabbar__item--active{animation:bounce .4s ease-in-out;}
.filters{border:none;padding:0;background:transparent;animation:scaleIn .2s ease-out;}
.filters::backdrop{background:rgba(0,0,0,.6);animation:fadeIn .2s ease-out;}
.filters__panel{width:min(90vw,320px);background:#1f172c;color:var(--fg);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;animation:slideInUp .3s ease-out;}
.filters__title{margin:0 0 10px;font-size:16px;font-weight:700;animation:fadeInDown .3s ease-out;}
.filters__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0;animation:fadeInUp .3s ease-out;}
.filters__row select{background:#2a2036;border:1px solid rgba(255,255,255,.12);color:var(--fg);padding:6px 8px;border-radius:8px;transition:all .2s ease;}
.filters__row select:focus{transform:scale(1.01);border-color:var(--accent);}
.filters__buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;animation:fadeInUp .4s ease-out;}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#e8defb;transition:all .2s ease;}
.btn--ghost:hover{transform:translateY(-1px);border-color:var(--accent);}
.btn--apply{background:linear-gradient(135deg,var(--accent),#a65bff);color:#140a1a;transition:all .2s ease;}
.btn--apply:hover{transform:translateY(-1px);animation:pulse .8s infinite;}
@media (min-width:768px){.hero{grid-template-columns:1fr 1fr}.cards{grid-template-columns:repeat(3,1fr)}.card__img{height:140px}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(4,1fr)}.card__img{height:160px}}
.icon{width:20px;height:20px;display:inline-block;background:linear-gradient(135deg,#fff 0%,#ff4ddb 100%);-webkit-mask:var(--src) no-repeat center/contain;mask:var(--src) no-repeat center/contain;transition:all .2s ease;}
.icon--sm{width:16px;height:16px}
.tabbar__item--active .icon{background:linear-gradient(135deg,#ffffff 0%,#ff83ff 100%);filter:drop-shadow(0 0 6px rgba(255,131,255,.55));animation:bounce .4s ease-in-out;}
.tabbar__item:hover .icon{filter:drop-shadow(0 0 4px rgba(255,131,255,.35));transform:scale(1.05);}
.hero-row{overflow-x:auto;overflow-y:hidden;padding:14px 0 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.hero-row__track{display:flex;gap:12px;min-width:100%}
.hero-row .hero-card{flex:0 0 calc((100% - 3*12px)/4);position:relative;border-radius:16px;overflow:hidden;background:var(--card);border:2px solid transparent;transition:all .2s ease;scroll-snap-align:start;animation:fadeInUp .5s ease-out;}
.hero-row .hero-card:hover{border-color:rgba(255,77,219,.7);transform:translateY(-3px) scale(1.01);animation:glowPulse 1.5s infinite;}
.hero-row .hero-card__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:all .2s ease;}
.hero-row .hero-card:hover .hero-card__img{transform:scale(1.03);}
.hero-row::-webkit-scrollbar{height:4px}
.hero-row::-webkit-scrollbar-thumb{background:rgba(255,77,219,.4);border-radius:8px;transition:all .2s ease;}
.hero-row::-webkit-scrollbar-thumb:hover{background:rgba(255,77,219,.7);transform:scale(1.05);}
@media (max-width:900px){.hero-row .hero-card{flex:0 0 calc((100% - 12px)/2)}}
@media (max-width:520px){.hero-row .hero-card{flex:0 0 100%}}
.logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--fg);transition:all .2s ease;}
.logo:hover{transform:scale(1.03);filter:drop-shadow(0 0 8px rgba(255,77,219,.5));}
.logo__icon{width:16px;height:auto;object-fit:contain;filter:brightness(0) invert(1);transition:all .2s ease;}
.logo__text{font-size:16px;font-weight:700;letter-spacing:.3px;}
.ticket,.poster-card{position:relative;overflow:visible;}
.ticket__star,.poster-card .star,.ticket .ticket__star{position:absolute;right:-6px;bottom:-6px;z-index:5;transition:all .2s ease;}
.ticket__star:hover{transform:scale(1.1);animation:heartBeat .5s ease-in-out;}
@media (prefers-reduced-motion:no-preference){
  .poster-card,.ticket,.card{transition:all .2s ease;will-change:transform,filter;}
  .poster-card:hover .ticket,.card:hover .ticket{transform:translateY(-3px) scale(1.01);}
  .ticket{position:relative;}
  .ticket::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:all .2s ease;background:linear-gradient(180deg,#ff7bf5 0%,#8b3dff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;}
  .poster-card:hover .ticket::after,.card:hover .ticket::after{opacity:.9;animation:glowPulse 1.5s infinite;}
  .poster-card:active .ticket,.card:active .ticket{transform:translateY(0) scale(.98);}
}
.ticket__star.is-on{color:#fff;text-shadow:0 0 6px #ff7bf5;animation:heartBeat .5s ease-in-out;}
.ticket__star.anim{animation:star-pop .3s ease;}
.watch-later-btn{transition:all .2s ease;}
.watch-later-btn.added{animation:heartBeat .5s ease-in-out;color:var(--accent);}
.search-suggestions{animation:fadeInDown .2s ease-out;}
.profile-avatar{transition:all .2s ease;}
.profile-avatar:hover{transform:scale(1.03);filter:drop-shadow(0 0 12px rgba(255,77,219,.5));}
html{scroll-behavior:smooth;}
.scroll-animate{opacity:0;transform:translateY(20px);transition:all .5s ease;}
.scroll-animate.visible{opacity:1;transform:translateY(0);}
---
@media (prefers-color-scheme: dark){:root{--bg:#0b0a12;--bg-elev:#14121e;--text:#f4f4f8;--text-muted:#b8b6c8;--accent:#ff2da3;--accent-2:#6a00ff;--card:#181628;--chip-bg:#1f1b2f;--tabbar-bg:rgba(12,10,18,.9);--tabbar-active:#ff2da3;color-scheme:dark;}}
@media (prefers-color-scheme: light){:root{--bg:#f7f7fb;--bg-elev:#ffffff;--text:#16141f;--text-muted:#5f5b73;--accent:#d81b60;--accent-2:#5c3aff;--card:#ffffff;--chip-bg:#f1f0f6;--tabbar-bg:rgba(255,255,255,.9);--tabbar-active:#d81b60;color-scheme:light;}}
body.theme--dark{--bg:#0b0a12;--bg-elev:#14121e;--text:#f4f4f8;--text-muted:#b8b6c8;--accent:#ff2da3;--accent-2:#6a00ff;--card:#181628;--chip-bg:#1f1b2f;--tabbar-bg:rgba(12,10,18,.9);--tabbar-active:#ff2da3;color-scheme:dark;}
body.theme--light{--bg:#f8fafc;--bg-elev:#ffffff;--text:#1a1d2e;--text-muted:#6b7280;--accent:#ec4899;--accent-2:#8b5cf6;--card:#ffffff;--chip-bg:#f1f5f9;--tabbar-bg:rgba(255,255,255,.95);--tabbar-active:#ec4899;--border:rgba(0,0,0,.08);--surface:#f1f5f9;color-scheme:light;}
.theme--light{background:radial-gradient(1000px 1000px at 30% -10%,#f0f4ff 0%,#f8fafc 45%),var(--bg);color:var(--text);}
.theme--light .logo__icon{filter:brightness(0) invert(0);}
.theme--light .icon{background:linear-gradient(135deg,#4b5563 0%,var(--accent) 100%);}
.theme--light .tabbar__item--active .icon{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);}
.theme--light .pill{background:var(--chip-bg);border:1px solid rgba(0,0,0,.08);color:var(--text);}
.theme--light .pill--ghost{background:transparent;border-color:rgba(0,0,0,.12);}
.theme--light .btn--share{background:linear-gradient(180deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.35);}
.theme--light .btn--ghost{border:1px solid rgba(0,0,0,.15);color:var(--text);}
.theme--light .btn--apply{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;}
.theme--light .card{box-shadow:0 3px 15px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06);}
.theme--light .card:hover{box-shadow:0 10px 25px rgba(0,0,0,.12);border-color:rgba(0,0,0,.15);}
.theme--light .hero-card{border:1px solid rgba(0,0,0,.06);}
.theme--light .tabbar{border-top:1px solid rgba(0,0,0,.08);}
.theme--light .tabbar__item{color:var(--text-muted);}
.theme--light .tabbar__item--active{color:var(--tabbar-active);}
.theme--light .tabbar__ink{background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.theme--light .filters__panel{background:var(--card);border:1px solid rgba(0,0,0,.08);}
.theme--light .filters__row select{background:var(--chip-bg);border:1px solid rgba(0,0,0,.12);color:var(--text);}
.theme--light .badge{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;}
.theme--light .hero-row::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);}
.theme--light .hero-row::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4);}
.theme--light .header{background:rgba(248,250,252,.8);border-bottom:1px solid rgba(0,0,0,.06);}
.theme--light .chip{background:var(--chip-bg);border:1px solid rgba(0,0,0,.08);color:var(--text);}
.theme--light .chip:hover{background:#e2e8f0;}
.theme--light .chip--active{background:var(--accent);color:#fff;border-color:var(--accent);}
body{background:var(--bg);color:var(--text);transition:background-color .3s ease,color .25s ease;}
.card{background:var(--card);box-shadow:0 8px 25px rgba(0,0,0,.35);transition:background-color .3s ease,box-shadow .3s ease;}
.chip{background:var(--chip-bg);color:var(--text);transition:background-color .3s ease;}
.tabbar{background:var(--tabbar-bg);transition:background-color .3s ease;}
.tabbar__item--active{color:var(--tabbar-active);}