:root{--primary-hover:#ff6b85;--primary-dark:#c4354f;--bg-hover:#1e1e2e;--text-muted:#666680;--accent-teal:#00d4aa;--accent-amber:#ffb84d;--transition:all 0.2s ease}
.nav{display:flex;align-items:center;gap:8px}
.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:600;font-size:13px;padding:6px 12px;border-radius:6px;transition:var(--transition);text-transform:uppercase;letter-spacing:0.5px}
.nav-link:hover{color:var(--text-primary);background:rgba(233,69,96,0.1)}
.nav-link.active{color:var(--text-primary);background:var(--primary);box-shadow:0 2px 8px rgba(233,69,96,0.4)}
.header-center{flex:1;max-width:500px;display:flex;justify-content:flex-end;align-items:center}
.search-box{position:relative;width:100%}
.search-input{width:100%;padding:12px 20px 12px 44px;background:var(--bg-card);border:2px solid transparent;border-radius:30px;color:var(--text-primary);font-size:14px;transition:var(--transition);outline:none}
.search-input::placeholder{color:var(--text-muted)}
.search-input:focus{border-color:var(--primary);background:var(--bg-hover);box-shadow:0 0 0 4px rgba(233,69,96,0.1)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px;pointer-events:none}
.search-wrapper{position:relative;display:flex;align-items:center}
.search-icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:18px}
.search-icon-btn:hover{background:rgba(233,69,96,0.1);color:var(--primary);transform:translateY(-2px)}
.search-input-wrapper{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;opacity:0;visibility:hidden;transition:all 0.3s ease;width:0}
.search-input-wrapper.active{opacity:1;visibility:visible;width:250px}
.search-input-wrapper .search-input{padding:8px 35px 8px 15px;border-radius:20px;font-size:13px}
.search-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:0 5px}
.search-close:hover{color:var(--primary)}
.header-right{display:flex;align-items:center;gap:12px}
.icon-btn,.profile-btn{width:25px;height:25px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:18px}
.icon-btn{background:transparent;color:var(--text-secondary)}
.icon-btn:hover{background:rgba(233,69,96,0.1);color:var(--primary);transform:translateY(-2px)}
.profile-btn{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(233,69,96,0.4);margin-left:10px}
.profile-btn:hover{background:var(--primary-hover);transform:scale(1.05);box-shadow:0 4px 16px rgba(233,69,96,0.6)}
.movie-card{display:block;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;transition:var(--transition);cursor:pointer;position:relative;border:1px solid transparent;text-decoration:none;color:inherit}
.movie-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(233,69,96,0.3);border-color:var(--primary)}
.card-poster{aspect-ratio:2/3;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--bg-hover);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px;position:relative;overflow:hidden}
.card-poster img{width:100%;height:100%;object-fit:cover}
.card-poster::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.8) 100%);opacity:0;transition:var(--transition)}
.movie-card:hover .card-poster::before{opacity:1}
.card-info{padding:12px}
.card-title{font-size:15px;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-muted)}
.card-year{font-weight:500}
.card-rating{position:absolute;top:8px;left:8px;background:var(--primary);color:white;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:700;z-index:2}
.card-rating.high{background:var(--accent-teal);color:var(--bg-main)}
.card-rating.medium{background:var(--accent-amber);color:var(--bg-main)}
.studios-section{background:var(--bg-card);padding:40px 0;margin:40px 0}
.studios-grid{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px}
.studios-grid::-webkit-scrollbar{display:none}
.studio-tag{flex:0 0 auto;background:var(--bg-hover);color:var(--text-secondary);padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);border:1px solid transparent;white-space:nowrap}
.studio-tag:hover{background:rgba(233,69,96,0.15);color:var(--text-primary);border-color:var(--primary);transform:translateY(-2px)}
.series-nav-section{background:var(--bg-card);border-radius:var(--radius);padding:20px;margin-bottom:24px;border:1px solid rgba(233,69,96,0.1)}
.seasons-list{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.season-btn{background:transparent;border:none;color:var(--text-secondary);font-size:18px;font-weight:700;cursor:pointer;padding:6px 10px;border-radius:6px;transition:var(--transition);position:relative;min-width:28px;text-decoration:none;display:inline-block}
.season-btn:hover{color:var(--text-primary);background:rgba(233,69,96,0.1)}
.season-btn.active{color:var(--primary)}
.season-btn.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:60%;height:2px;background:var(--primary);border-radius:2px 2px 0 0}
.episodes-nav-wrapper{position:relative;display:flex;align-items:center;gap:10px;border-top:1px solid var(--bg-hover);padding-top:16px}
.episode-nav-btn{flex:0 0 36px;width:36px;height:36px;border-radius:8px;background:var(--bg-hover);border:1px solid rgba(233,69,96,0.3);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:16px;flex-shrink:0;z-index:10;text-decoration:none}
.episode-nav-btn:hover{background:var(--primary);border-color:var(--primary);transform:scale(1.05)}
.episode-nav-btn:active{transform:scale(0.95)}
.episode-nav-btn.hidden{display:none}
.episodes-carousel{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px;flex:1;scroll-snap-type:x mandatory}
.episodes-carousel::-webkit-scrollbar{display:none}
.episode-btn{flex:0 0 auto;background:var(--bg-hover);border:1px solid transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;padding:10px 16px;border-radius:6px;transition:var(--transition);white-space:nowrap;min-width:100px;scroll-snap-align:start;text-decoration:none;text-align:center}
.episode-btn:hover{background:rgba(233,69,96,0.15);color:var(--text-primary);border-color:rgba(233,69,96,0.3);transform:translateY(-2px)}
.episode-btn.active{background:var(--primary);color:var(--bg-main);font-weight:600;border-color:var(--primary)}
.franchise-section{background:var(--bg-card);border-radius:var(--radius);padding:20px;margin:24px 0}
.franchise-title{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text-primary)}
.franchise-list{list-style:none}
.franchise-item{display:flex;align-items:center;padding:6px 12px;margin-bottom:6px;background:var(--bg-hover);border-radius:6px;transition:var(--transition);cursor:pointer}
.franchise-item:hover{background:rgba(233,69,96,0.15);transform:translateX(4px);box-shadow:0 2px 12px rgba(233,69,96,0.2)}
.franchise-item.active{background:rgba(233,69,96,0.2);border-left:3px solid var(--primary);pointer-events:none}
.franchise-item:hover .franchise-name{color:var(--text-primary)}
.franchise-name{transition:var(--transition)}
.actors-section{margin:10px 0 0;padding:20px;background:var(--bg-card);border-radius:var(--radius)}
.actors-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.actors-title{font-size:18px;font-weight:700;color:var(--text-primary)}
.toggle-actors-btn{background:transparent;border:none;color:var(--accent-amber);font-size:13px;font-weight:600;cursor:pointer;padding:4px 10px;border-radius:4px;transition:var(--transition)}
.toggle-actors-btn:hover{background:rgba(255,184,77,0.1);color:var(--primary-hover)}
.actors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:16px}
.cast-item{text-align:center}
.cast-item.hidden-actor{display:none}
.cast-avatar{width:80px;height:80px;border-radius:50%;background:var(--bg-hover);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:10px;overflow:hidden;border:2px solid transparent;transition:var(--transition);background-size:140%;background-position:center 20%;background-repeat:no-repeat;flex-shrink:0}
.cast-avatar.has-photo{border-color:var(--primary);background-size:75%;background-position:center 15%}
.cast-avatar img{width:100%;height:100%;object-fit:cover}
.cast-avatar svg{width:32px;height:32px;opacity:0.5}
.cast-item:hover .cast-avatar{transform:scale(1.05)}
.cast-name{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;margin:0 auto;text-align:center;line-height:1.3}
.similar-section{padding:16px 0}
.section-title{font-size:18px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.movies-carousel{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:6px 4px;scroll-snap-type:x mandatory}
.movies-carousel::-webkit-scrollbar{display:none}
.movies-carousel .movie-card{flex:0 0 140px;scroll-snap-align:start}
.meta-link{color:var(--accent-amber);text-decoration:none;font-weight:500;transition:var(--transition)}
.meta-link:hover{color:var(--primary-hover);text-decoration:underline}
.genre-badge{display:inline-block;padding:3px 8px;background:var(--accent-amber);color:var(--bg-main);border-radius:3px;font-size:12px;font-weight:500;text-decoration:none;margin-right:4px;margin-bottom:3px;transition:var(--transition)}
.genre-badge:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.rating-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px}
.rating-badge.kp{background:var(--primary);color:#fff}
.rating-badge.imdb{background:#f5c518;color:#000}
.btn{background:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--primary-hover);transform:translateY(-1px)}
.footer{padding:30px 0;text-align:center;color:var(--text-muted);font-size:12px;border-top:1px solid var(--bg-hover);margin-top:30px}
.footer a{color:var(--primary);text-decoration:none}
@media (max-width:399px){.header-inner{padding:10px 15px;gap:12px }
 .logo{font-size:18px }
 .logo-zone{font-size:16px }
 .icon-btn{width:32px;height:32px;font-size:14px }
 .profile-btn{width:25px;height:25px }
 .player-wrapper{margin:10px 0 15px }
 .series-nav-section{padding:16px }
 .seasons-list{gap:10px }
 .season-btn{font-size:14px;padding:4px 8px }
 .episode-btn{min-width:80px;padding:8px 10px;font-size:11px }
 .episode-nav-btn{width:28px;height:28px;flex:0 0 28px;font-size:14px }
 .franchise-section{padding:16px }
 .franchise-title{font-size:14px }
 .franchise-name{font-size:12px }
 .movie-meta h1{font-size:20px }
 .rating-badge{padding:3px 6px;font-size:11px }
 .meta-grid{font-size:12px }
 .actors-section{padding:16px }
 .actors-title{font-size:16px }
 .actors-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px }
 .cast-avatar{width:70px;height:70px }
 .cast-name{font-size:11px;max-width:70px }
 .movies-carousel .movie-card{flex:0 0 120px }
 .card-info{padding:8px }
 .card-title{font-size:11px }
 .search-input-wrapper.active{width:180px }
 .search-input-wrapper .search-input{font-size:12px;padding:6px 30px 6px 12px }
}
@media (max-width:599px){.nav{display:none }
 .header-center{order:3;width:100%;justify-content:center }
 .search-input-wrapper.active{width:200px;right:130%;transform:translate(50%,-50%) }
 .seasons-list{gap:12px }
 .season-btn{font-size:16px;padding:6px 8px }
 .episode-btn{min-width:90px;padding:8px 12px;font-size:12px }
 .episode-nav-btn{width:32px;height:32px;flex:0 0 32px }
 .episodes-nav-wrapper{gap:8px }
 .franchise-item{padding:6px 10px }
 .franchise-name{font-size:13px }
}
@media (min-width:400px){.container{padding:0 20px }
 .header-inner{padding:12px 20px;gap:20px }
 .logo{font-size:22px }
 .nav-link{font-size:13px;padding:6px 12px }
 .movie-meta h1{font-size:24px }
 .section-title{font-size:18px }
 .actors-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:18px }
 .cast-avatar{width:80px;height:80px }
 .movies-carousel .movie-card{flex:0 0 150px }
}
@media (min-width:600px){.header-inner{padding:12px 0 }
 .logo{font-size:24px }
 .nav-link{font-size:14px;padding:8px 16px }
 .movie-meta h1{font-size:26px }
 .movie-info{grid-template-columns:200px 1fr }
 .actors-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:20px }
 .cast-avatar{width:90px;height:90px }
 .movies-carousel .movie-card{flex:0 0 160px }
 .search-input-wrapper.active{width:300px }
}
@media (min-width:768px){.container{max-width:1200px;padding:0 40px }
 .header-inner{padding:12px 40px;gap:24px }
 .header-center{max-width:500px }
 .logo{font-size:26px }
 .nav-link{font-size:14px;padding:8px 16px }
 .movie-meta h1{font-size:28px }
 .movie-info{grid-template-columns:240px 1fr }
 .actors-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:20px }
 .cast-avatar{width:80px;height:80px }
 .movies-carousel .movie-card{flex:0 0 170px }
 .search-input-wrapper.active{width:350px }
}
@media (min-width:1024px){.container{max-width:1200px;padding:0 60px }
 .header-inner{padding:12px 60px }
 .movie-info{grid-template-columns:280px 1fr }
 .actors-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:15px}
 .cast-avatar{width:80px;height:80px }
 .movies-carousel .movie-card{flex:0 0 180px }
 .search-input-wrapper.active{width:400px }
}
@media (min-width:968px) and (max-width:1199px){.movies-grid,.series-grid{grid-template-columns:repeat(4,1fr) }
}
@media (max-width:968px){.movies-grid,.series-grid{grid-template-columns:repeat(3,1fr) }
}
@media (max-width:640px){.movies-grid,.series-grid{grid-template-columns:repeat(2,1fr) }
}