:root{--bg-dark:#0f172a;--bg-card:#1e293b;--primary:#3b82f6;--primary-hover:#2563eb;--vip-color:#f59e0b;--text-main:#f8fafc;--text-muted:#94a3b8;--border-color:#334155;--radius:12px;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Roboto,sans-serif;}
body{background-color:var(--bg-dark);color:var(--text-main);overflow-x:hidden;}
button{transition:all 0.2s ease;}
button:active{transform:scale(0.97);}

/* ТОВЧНУУД */
.btn-main{background:var(--primary);color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;}
.btn-main:hover{background:var(--primary-hover);}
.btn-vip{background:var(--vip-color);color:#000;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;}
.btn-vip:hover{background:#d97706;}
.btn-danger{background:#000;color:#fff;border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;}
.btn-danger:hover{background:#dc2626;}
.btn-buy-vip{width:100%;padding:12px;background:linear-gradient(135deg,#1e40af,#3b82f6);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:15px;transition:all 0.2s;}
.btn-buy-vip:hover{background:linear-gradient(135deg,#1e3a8a,#2563eb);transform:translateY(-1px);}
.btn-lifetime-vip{width:100%;padding:12px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:15px;transition:all 0.2s;}
.btn-lifetime-vip:hover{background:linear-gradient(135deg,#6d28d9,#4338ca);transform:translateY(-1px);}
.btn-upload-file{background:#1e40af;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;}
.btn-upload-file:hover{background:var(--primary);}

/* HEADER */
.main-header{height:70px;background-color:var(--bg-card);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
.logo-area{display:flex;align-items:center;gap:10px;cursor:pointer;}
.logo-icon{font-size:28px;color:var(--primary);}
.logo-text{font-weight:800;font-size:20px;letter-spacing:1px;}
.logo-text span{color:var(--vip-color);}
.header-right{display:flex;align-items:center;gap:15px;}
.user-avatar-top{display:flex;align-items:center;gap:10px;cursor:pointer;}
.user-avatar-top img{width:38px;height:38px;border-radius:50%;border:2px solid var(--primary);object-fit:cover;}
.mobile-menu-toggle{display:none;background:transparent!important;border:none;font-size:22px;color:#fff;cursor:pointer;padding:5px;}

/* LAYOUT */
.app-container{display:flex;margin-top:70px;min-height:calc(100vh - 70px);}
.sidebar{width:250px;background-color:var(--bg-card);border-right:1px solid var(--border-color);padding:20px 10px;position:fixed;top:70px;bottom:0;left:0;z-index:90;transition:left 0.3s ease;overflow-y:auto;}
.nav-menu{display:flex;flex-direction:column;gap:8px;}
.nav-menu a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text-muted);text-decoration:none;border-radius:8px;font-weight:500;cursor:pointer;transition:0.2s;}
.nav-menu a:hover,.nav-menu a.active{background-color:rgba(59,130,246,0.1);color:#fff;}
.nav-menu a.active i{color:var(--primary);}
.main-content{flex:1;margin-left:250px;padding:30px;width:calc(100% - 250px);}
.page-section{animation:fadeIn 0.3s ease;}

/* SIDEBAR OVERLAY (mobile) */
.sidebar-overlay{display:none;position:fixed;top:70px;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:89;}
.sidebar-overlay.active{display:block;}

/* ХАЙЛТ */
.search-section-box{margin-bottom:30px;}
.search-bar-inner{position:relative;max-width:500px;}
.search-bar-inner input{width:100%;background:var(--bg-card);border:1px solid var(--border-color);padding:12px 16px 12px 45px;border-radius:var(--radius);color:#fff;font-size:14px;outline:none;}
.search-bar-inner input:focus{border-color:var(--primary);}
.search-bar-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
.category-filter-container{display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap;}
.filter-btn{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-muted);padding:8px 18px;border-radius:20px;cursor:pointer;font-weight:500;}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* КИНО GRID */
.movie-section-container{margin-bottom:40px;}
.section-title{font-size:20px;margin-bottom:20px;display:flex;align-items:center;gap:8px;}
.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;}
.movie-card{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-color);cursor:pointer;transition:transform 0.2s;position:relative;}
.movie-card:hover{transform:translateY(-5px);}
.card-cover{width:100%;height:240px;object-fit:cover;}
.card-info{padding:12px;}
.card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.badge{background:rgba(59,130,246,0.2);color:var(--primary);font-size:11px;padding:2px 6px;border-radius:4px;font-weight:bold;}
.badge-vip-card{position:absolute;top:10px;right:10px;background:var(--vip-color);color:#000;font-size:10px;padding:3px 6px;border-radius:4px;font-weight:bold;}

/* КИНО ДЭЛГЭРЭНГҮЙ */
.movie-profile-layout{display:flex;gap:30px;margin-top:20px;}
.m-profile-left img{width:260px;border-radius:var(--radius);border:1px solid var(--border-color);}
.m-profile-right{flex:1;}
.movie-title-main{font-size:28px;margin:10px 0;}
.movie-desc-text{color:var(--text-muted);margin-bottom:20px;line-height:1.6;}
.price-action-box{background:var(--bg-card);padding:15px 20px;border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.action-buttons-flex{display:flex;gap:10px;}
.episodes-grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:15px;}
.ep-btn{background:#334155;color:#fff;border:none;padding:12px 8px;border-radius:6px;cursor:pointer;text-align:center;font-weight:600;font-size:13px;transition:all 0.2s;}
.ep-btn:hover{background:var(--primary);}
.ep-btn.active-ep{background:var(--vip-color);color:#000;}

/* VIDEO PLAYER */
.video-player-wrapper{background:#000;border-radius:var(--radius);overflow:hidden;border:2px solid var(--vip-color);}
.video-player-header{background:#1a1a2e;padding:10px 15px;display:flex;justify-content:space-between;align-items:center;}

/* VIP ХУУДАС */
.vip-header-banner{text-align:center;margin-bottom:40px;}
.vip-cards-container{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.vip-card-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:30px;width:260px;text-align:center;position:relative;transition:transform 0.2s;}
.vip-card-box:hover{transform:translateY(-3px);}
.vip-card-box.featured{border-color:var(--vip-color);transform:scale(1.05);}
.vip-card-box.lifetime{border-color:#7c3aed;background:linear-gradient(135deg,#1e293b,#1a1035);}
.vip-plan-icon{font-size:32px;color:var(--primary);margin-bottom:10px;}
.vip-badge-popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--vip-color);color:#000;font-size:11px;font-weight:bold;padding:4px 12px;border-radius:20px;white-space:nowrap;}
.vip-price-display{font-size:28px;font-weight:800;color:#fff;margin:15px 0 5px;}
.vip-duration-tag{background:rgba(59,130,246,0.15);color:var(--primary);font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;display:inline-block;margin-bottom:15px;}
.vip-card-box ul{list-style:none;text-align:left;margin-bottom:20px;font-size:13px;color:var(--text-muted);}
.vip-card-box ul li{margin-bottom:10px;}
.vip-card-box h3{font-size:18px;margin-bottom:5px;}

/* ПРОФАЙЛ */
.profile-card-wrapper{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:30px;max-width:600px;margin:0 auto 30px;}
.profile-header-main{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:20px;margin-bottom:20px;}
.profile-user-info{display:flex;align-items:center;gap:20px;}
.profile-img-container img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--primary);}
.profile-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.detail-item-box{background:var(--bg-dark);padding:12px;border-radius:8px;}
.detail-label{font-size:11px;color:var(--text-muted);display:block;margin-bottom:3px;}
.profile-history-section{margin-top:30px;}

/* ADMIN */
.admin-tabs-nav{display:flex;gap:10px;border-bottom:1px solid var(--border-color);margin-bottom:20px;}
.admin-tabs-nav button{background:transparent;border:none;color:var(--text-muted);padding:12px 20px;cursor:pointer;font-weight:600;}
.admin-tabs-nav button.active{color:var(--primary);border-bottom:2px solid var(--primary);}
.admin-grid-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px;}
.admin-card-box{background:var(--bg-card);padding:20px;border-radius:var(--radius);border:1px solid var(--border-color);}
.form-group{margin-bottom:15px;}
.form-group label{display:block;font-size:13px;margin-bottom:6px;color:var(--text-muted);}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg-dark);border:1px solid var(--border-color);padding:10px;border-radius:6px;color:#fff;outline:none;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);}
.form-group select option{background:var(--bg-dark);}
.form-group-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-admin-submit{width:100%;padding:12px;background:#10b981;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:bold;}
.btn-admin-submit:hover{background:#059669;}
.admin-movies-vertical-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;}
.file-upload-area{background:var(--bg-dark);border:1px dashed var(--border-color);border-radius:8px;padding:12px;}
.file-upload-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ХҮСЭЛТҮҮД */
.admin-requests-wrapper{display:flex;flex-direction:column;gap:15px;}
.request-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:20px;}
.request-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:10px;}

/* МОДАЛУУД */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:none;justify-content:center;align-items:center;z-index:200;padding:15px;}
.modal-card{background:var(--bg-card);padding:25px;border-radius:var(--radius);width:100%;max-width:450px;position:relative;border:1px solid var(--border-color);max-height:90vh;overflow-y:auto;}
.btn-close-modal{position:absolute;top:15px;right:15px;background:transparent;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;}
.btn-close-modal:hover{color:#fff;}

/* ТӨЛБӨР МОДАЛ */
.payment-modal-box{text-align:center;}
.payment-badge-title{font-size:18px;font-weight:bold;color:var(--vip-color);margin-bottom:15px;}
.payment-amount-display{background:rgba(245,158,11,0.1);border:1px dashed var(--vip-color);padding:15px;border-radius:8px;font-size:24px;font-weight:800;color:#fff;margin-bottom:20px;}
.bank-account-item{background:var(--bg-dark);padding:14px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;margin-top:12px;border:1px solid var(--border-color);}
.bank-info-left{text-align:left;}
.bank-name{font-size:11px;color:var(--text-muted);text-transform:uppercase;}
.bank-num{font-size:15px;font-weight:bold;color:#fff;}
.btn-copy-inline{background:#334155;color:#fff;font-size:11px;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-weight:bold;}
.btn-copy-inline:hover{background:var(--primary);}

/* OTP INPUT */
.otp-input-wrapper{margin:15px 0;}
.otp-input-wrapper input{width:100%;background:var(--bg-dark);border:2px solid var(--border-color);padding:15px;border-radius:8px;color:#fff;outline:none;font-size:24px;font-weight:800;letter-spacing:8px;text-align:center;}
.otp-input-wrapper input:focus{border-color:var(--primary);}

/* ХҮСНЭГТ */
.table-responsive{overflow-x:auto;}
.users-data-table{width:100%;border-collapse:collapse;margin-top:15px;font-size:14px;}
.users-data-table th,.users-data-table td{padding:12px;border-bottom:1px solid var(--border-color);text-align:left;}
.users-data-table th{background:var(--bg-card);color:var(--text-muted);}

/* ТЭМДЭГҮҮД */
.hidden{display:none!important;}
.badge-count{background:#ef4444;color:#fff;font-size:11px;padding:2px 6px;border-radius:50%;}

/* RESPONSIVE */
@media(max-width:768px){
    .mobile-menu-toggle{display:block;}
    .sidebar{left:-260px;}
    .sidebar.open{left:0;}
    .main-content{margin-left:0;width:100%;padding:15px;}
    .movie-profile-layout{flex-direction:column;}
    .m-profile-left img{width:100%;max-width:300px;margin:0 auto;display:block;}
    .admin-grid-layout{grid-template-columns:1fr;}
    .vip-card-box.featured{transform:scale(1);}
    .profile-details-grid{grid-template-columns:1fr;}
    .vip-cards-container{flex-direction:column;align-items:center;}
    .vip-card-box{width:100%;max-width:360px;}
    .form-group-row{grid-template-columns:1fr;}
    .movie-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}

@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}

/* ====== LOADING OVERLAY ====== */
.loading-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.92);z-index:9999;display:none;justify-content:center;align-items:center;}
.loading-overlay.active{display:flex;}
.spinner{width:46px;height:46px;border:4px solid #334155;border-top-color:var(--primary);border-radius:50%;animation:spin 0.75s linear infinite;margin:0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ====== CAROUSEL ====== */
.carousel-wrapper{position:relative;width:100%;height:340px;border-radius:var(--radius);overflow:hidden;background:#000;margin-bottom:5px;}
.carousel-track{display:flex;height:100%;transition:transform 0.5s ease;}
.carousel-slide{min-width:100%;height:100%;position:relative;cursor:pointer;}
.carousel-img{width:100%;height:100%;object-fit:cover;display:block;}
.carousel-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 60%,transparent 100%);}
.carousel-content{position:absolute;bottom:30px;left:30px;max-width:50%;}
.carousel-title{font-size:24px;font-weight:800;color:#fff;margin:8px 0 6px;line-height:1.2;}
.carousel-desc{font-size:13px;color:#cbd5e1;line-height:1.5;margin-bottom:5px;}
.carousel-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-block;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.55);border:none;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;z-index:10;}
.carousel-btn:hover{background:rgba(59,130,246,0.8);}
.carousel-prev{left:12px;}
.carousel-next{right:12px;}
.carousel-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10;}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.2s;}
.carousel-dot.active{background:#fff;width:20px;border-radius:4px;}

/* ====== КИНО ДЭЛГЭРЭНГҮЙ + ХАЖУУ SIDEBAR ====== */
.movie-detail-with-sidebar{display:flex;gap:24px;align-items:flex-start;}
.movie-detail-main{flex:1;min-width:0;}
.recommended-sidebar{width:260px;flex-shrink:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:15px;position:sticky;top:90px;}
.rec-sidebar-title{font-size:15px;font-weight:700;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border-color);}
.rec-movie-item{display:flex;gap:10px;cursor:pointer;padding:8px 0;border-bottom:1px solid var(--border-color);transition:background 0.15s;border-radius:6px;}
.rec-movie-item:last-child{border-bottom:none;}
.rec-movie-item:hover{background:rgba(59,130,246,0.08);padding-left:4px;}
.rec-movie-thumb{width:55px;height:75px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.rec-movie-info{flex:1;min-width:0;}
.rec-movie-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;}

@media(max-width:900px){
    .movie-detail-with-sidebar{flex-direction:column;}
    .recommended-sidebar{width:100%;position:static;}
}
@media(max-width:768px){
    .carousel-wrapper{height:220px;}
    .carousel-content{left:15px;max-width:75%;}
    .carousel-title{font-size:16px;}
    .carousel-desc{display:none;}
}