:root {
        --primary-color: #e50914;
        --primary-glow: rgba(229, 9, 20, 0.5);
        --bg-color: #0b0b0b;
        --card-bg: #101010;
        --text-primary: #ffffff;
        --text-secondary: #a0a0a0;
        --border-color: rgba(255, 255, 255, 0.1);
        --plyr-color-main: #e50914;
        --)lyr-font-family: 'Poppins', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent; }
   html, body {
        height: 100%;
        max-width: 480px;
        margin: 0 auto;
        scroll-behavior: smooth; /* Makkhan Scrolling */
    }
    
    /* Hide annoying scrollbars globally for a clean App feel */
    ::-webkit-scrollbar {
        display: none;
    }
   body { 
        background-color: var(--bg-color); 
        color: var(--text-primary); 
        overflow-x: hidden; 
        -webkit-font-smoothing: antialiased; 
        display: flex; flex-direction: column;
        scroll-behavior: smooth;
        position: relative;
    }
    
    /* Advanced AI Ambient Glowing Background */
    body::before {
        content: '';
        position: fixed;
        top: -50%; left: -50%;
        width: 200vw; height: 200vh;
        background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 40%);
        z-index: -1;
        pointer-events: none;
        animation: ambientDrift 15s infinite alternate ease-in-out;
    }
    @keyframes ambientDrift {
        0% { transform: translate(0%, 0%) scale(1); }
        100% { transform: translate(5%, 10%) scale(1.2); }
    }
    .hidden { display: none !important; }

    /* --- Animations --- */
    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--primary-glow); } 70% { box-shadow: 0 0 0 8px rgba(229, 9, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); } }
    @keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

    .page-container, .page-content {
        animation: fadeIn 0.5s ease-out;
    }

    .list-item-animate {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeIn 0.5s ease-out forwards;
    }

   /* Advanced AI Level Hover & Click Animations */
    .content-card, .trending-card, .backdrop-card, .watchlist-card-pro, .livetv-channel-card, .slide, .auth-btn, .action-icon-btn, .menu-item {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy Spring Effect */
    }
    .card-clicked, .auth-btn:active, .action-icon-btn:active {
        transform: scale(0.92) !important;
        box-shadow: 0 0 10px var(--primary-glow) !important;
        transition: transform 0.1s ease-in;
    }

    #maintenance-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; z-index: 10000; }
    #maintenance-page .maintenance-icon { font-size: 60px; color: var(--primary-color); margin-bottom: 25px; }
    #maintenance-page h1 { font-size: 28px; font-weight: 700; margin-bottom: 15px; }
    #maintenance-page p { font-size: 16px; color: var(--text-secondary); line-height: 1.6; }

    #intro-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; z-index: 99999; transition: opacity 0.8s ease; }
.logo-wrapper { position: relative; margin-bottom: 20px; text-align: center; }
.glow-logo { 
    width: 150px; /* Size thoda bada kiya hai */
    height: 150px; 
    border-radius: 20px; /* Thoda round corners */
    object-fit: cover; /* Taki image stretch na ho */
    position: relative; 
    z-index: 2; 
    border: 2px solid var(--primary-color); /* Ek red border taki glow achha dikhe */
    animation: logoPop 1.2s ease-out forwards; 
}
.pulse-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; background: radial-gradient(circle, rgba(229, 9, 20, 0.7) 0%, transparent 70%); border-radius: 50%; animation: pulse 2s infinite; }
.reveal-text { color: white; font-size: 2.5rem; letter-spacing: 5px; opacity: 0; transform: translateY(20px); animation: textAppear 1s ease-out 1s forwards; }
.reveal-text span { color: #e50914; text-shadow: 0 0 15px #e50914; }
@keyframes logoPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; } }
@keyframes textAppear { to { opacity: 1; transform: translateY(0); } }
.fade-out-intro { opacity: 0; pointer-events: none; }

    #auth-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: var(--bg-color) url('https://i.ibb.co/svdhXJrL/1001802230.jpg') center center/cover; }
    #auth-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(11, 11, 11, 1) 20%, rgba(11, 11, 11, 0.6) 60%, rgba(11, 11, 11, 0.9) 100%); }
    .auth-page { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 20px; position: relative; animation: fadeIn 0.5s ease; }
    .auth-logo { text-align: center; margin-bottom: 40px; }
    .auth-logo .logo { font-size: 42px; font-weight: 700; letter-spacing: -1.5px; text-shadow: 0 0 15px var(--primary-glow); }
    .auth-logo .logo .movie-text { color: white; }
    .auth-logo .logo .hunt-text { color: var(--primary-color); }
    .auth-form { width: 100%; max-width: 350px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); padding: 30px; border-radius: 20px; border: 1px solid var(--border-color); }
    .auth-form h1 { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 25px; }
    .input-group { position: relative; margin-bottom: 20px; }
    .auth-input { width: 100%; padding: 15px 45px 15px 20px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; color: #fff; font-size: 15px; outline: none; transition: all 0.3s; }
    .auth-input:focus { border-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-glow); }
    #report-bug-description { min-height: 150px; resize: vertical; padding: 15px 20px; }
    .password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); cursor: pointer; font-size: 18px; }
    .auth-btn { width: 100%; padding: 15px; background-color: var(--primary-color); border: none; border-radius: 12px; color: white; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px var(--primary-glow); margin-top: 10px; }
    .auth-btn:hover { background-color: #ff1a25; transform: translateY(-2px); }
    .auth-btn:disabled { background-color: #555; cursor: not-allowed; transform: none; box-shadow: none; }
    .auth-btn.guest-btn { background-color: transparent; border: 2px solid var(--primary-color); margin-top: 15px; }
    .auth-btn.guest-btn:hover { background-color: var(--primary-color); }
    .auth-switch-link { text-align: center; margin-top: 25px; font-size: 14px; color: var(--text-secondary); }
    .auth-switch-link a { color: var(--primary-color); font-weight: 600; text-decoration: none; cursor: pointer; }
    .error-message { color: var(--primary-color); font-size: 13px; text-align: center; margin-top: 15px; display: none; }
    .avatar-selector { margin-top: 20px; }
    .avatar-selector p { text-align: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 15px; }
    .avatar-choices { display: flex; justify-content: center; gap: 15px; }
    .avatar-choice { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: all 0.3s ease; }
    .avatar-choice img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-choice.selected { border-color: var(--primary-color); transform: scale(1.1); box-shadow: 0 0 15px var(--primary-glow); }
    #app-wrapper { padding-bottom: 80px; flex-grow: 1; display: flex; flex-direction: column; }
    .header { padding: 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; transition: background-color 0.3s ease, padding 0.3s ease; background: transparent; }
    .header.scrolled { background-color: rgba(11, 11, 11, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 15px; border-bottom: 1px solid var(--border-color); }
    .logo { font-size: 28px; font-weight: 700; letter-spacing: -1px; text-shadow: 0 0 10px var(--primary-glow); }
    .logo .movie-text { color: white; }
    .logo .hunt-text { color: var(--primary-color); }
    .header-icons { display: flex; align-items: center; gap: 20px; }
    .header-icons i { font-size: 22px; color: white; cursor: pointer; transition: color 0.3s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    .header-icons i:hover { color: var(--primary-color); }
  
    /* 🚀 3D Futuristic Banner */
.slider-container { 
    position: relative; width: 100%; height: 350px; overflow: hidden; 
    margin-bottom: 30px; display: flex; align-items: center; justify-content: center; 
    perspective: 1500px; /* Enhanced Depth */
}
.slider { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }

.slide { 
    position: absolute; top: 0; left: 0; width: 85%; height: 90%; 
    margin: 5% 7.5%; border-radius: 24px; overflow: hidden; cursor: pointer; 
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); /* Smoother futuristic spring */
    opacity: 0; transform: scale(0.7) translateZ(-300px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); filter: blur(8px); 
}
.slide::after {
    content: ''; position: absolute; inset: 0; 
    border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); 
    pointer-events: none;
}

.slide.active { 
    opacity: 1; transform: scale(1.05) translateZ(50px) rotateX(2deg); /* 3D Pop */
    z-index: 10; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 40px var(--primary-glow); 
    filter: blur(0px); border-color: var(--primary-color);
}
.slide.prev { opacity: 0.6; transform: translateX(-65%) scale(0.85) translateZ(-150px) rotateY(35deg); z-index: 5; filter: blur(3px); }
.slide.next { opacity: 0.6; transform: translateX(65%) scale(0.85) translateZ(-150px) rotateY(-35deg); z-index: 5; filter: blur(3px); }

.slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 5s ease; }
.slide.active:hover img { transform: scale(1.15); }

.slide-overlay { 
    position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, transparent 100%); 
    padding: 30px 20px 20px; text-align: left; /* Left aligned for modern look */
    display: flex; flex-direction: column; justify-content: flex-end;
}
.slide-title { 
    font-size: 28px; font-weight: 900; margin-bottom: 8px; color: white; 
    text-shadow: 0 4px 15px rgba(0,0,0,1); letter-spacing: 0.5px; 
    transform: translateY(20px); opacity: 0; transition: all 0.5s ease 0.3s; 
}
.slide.active .slide-title { transform: translateY(0); opacity: 1; }
.slide-meta { 
    font-size: 14px; font-weight: 600; color: var(--text-secondary); 
    display: flex; gap: 10px; align-items: center;
    transform: translateY(20px); opacity: 0; transition: all 0.5s ease 0.4s;
}
.slide.active .slide-meta { transform: translateY(0); opacity: 1; }
.slide-meta span.rating { color: #f1c40f; background: rgba(241, 196, 15, 0.1); padding: 2px 8px; border-radius: 10px; }
   /* 🤖 Advanced AI Neural Mood Bot */
    .mood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; padding: 10px; }
    .mood-btn { 
        background: rgba(255, 255, 255, 0.03); 
        backdrop-filter: blur(20px); 
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1); 
        border-radius: 25px; 
        padding: 25px 15px; 
        text-align: center; 
        cursor: pointer; 
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        color: white; 
        display: flex; flex-direction: column; align-items: center; gap: 15px; 
        font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
        position: relative; overflow: hidden;
    }
    .mood-btn::before { 
        content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 0px; height: 0px; background: var(--primary-glow); border-radius: 50%; 
        opacity: 0; transition: all 0.5s ease; z-index: 0; filter: blur(20px);
    }
    .mood-btn i, .mood-btn span { position: relative; z-index: 1; transition: all 0.3s ease;}
    .mood-btn i { font-size: 35px; color: var(--text-secondary); }
    .mood-btn:hover { 
        transform: translateY(-8px) scale(1.05); 
        border-color: var(--primary-color); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(255,255,255,0.05); 
    }
    .mood-btn:hover::before { width: 150px; height: 150px; opacity: 0.3; }
    .mood-btn:hover i { color: var(--primary-color); transform: scale(1.2); text-shadow: 0 0 15px var(--primary-color); }
    .slider-indicators { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
    .indicator { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.3s; }
    .indicator.active { background-color: var(--primary-color); transform: scale(1.2); box-shadow: 0 0 8px var(--primary-glow); }
    .search-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 150; display: none; flex-direction: column; }
    .search-page.active { display: flex; animation: fadeIn 0.4s ease; }
    .search-header { display: flex; align-items: center; padding: 15px; flex-shrink: 0; border-bottom: 1px solid var(--border-color); }
    .search-header .back-btn-search { background: none; border: none; color: white; font-size: 20px; cursor: pointer; margin-right: 15px; }
    .search-header h1 { font-size: 22px; font-weight: 600; }
    .search-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; padding: 15px; }
    .search-input-wrapper .search-icon { position: absolute; left: 33px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 16px; }
    /* Advanced AI Prompt Search Bar */
    .search-input-full { 
        width: 100%; 
        padding: 16px 50px 16px 45px; 
        background: rgba(255,255,255,0.03); 
        backdrop-filter: blur(15px); 
        border: 1px solid rgba(255,255,255,0.1); 
        border-radius: 35px; 
        color: #fff; 
        font-size: 16px; 
        outline: none; 
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); 
    }
    .search-input-full:focus { 
        background: rgba(255,255,255,0.08); 
        border-color: var(--primary-color); 
        box-shadow: 0 0 25px var(--primary-glow), inset 0 2px 5px rgba(0,0,0,0.5); 
        transform: scale(1.02); 
    }
    .search-clear-btn { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; }
    .search-content-wrapper { flex-grow: 1; overflow-y: auto; padding-bottom: 90px; }
    #search-results-container { display: flex; flex-direction: column; gap: 15px; padding: 0 15px; }
    .search-results-container .empty-state { margin: 20px auto; }
    .search-result-card { display: flex; gap: 15px; background-color: var(--card-bg); border-radius: 12px; overflow: hidden; cursor: pointer; transition: background-color 0.3s ease; border: 1px solid transparent; }
    .search-result-card:hover { background-color: #1a1a1a; border-color: var(--primary-color); }
    .search-result-poster { width: 90px; flex-shrink: 0; }
    .search-result-poster img { width: 100%; height: 100%; object-fit: cover; }
    .search-result-info { padding: 12px 12px 12px 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .search-result-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
    .search-result-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
    .search-result-storyline { font-size: 13px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    #search-initial-state { padding: 0 15px; }

    .header-icons .icon-wrapper { position: relative; }
   /* AI Radar Pulse Indicator */
    .unread-indicator { 
        position: absolute; top: -2px; right: -4px; width: 12px; height: 12px; 
        background-color: var(--primary-color); border-radius: 50%; 
        border: 2px solid var(--bg-color); box-shadow: 0 0 10px var(--primary-glow); 
        animation: aiRadarPulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    }
    @keyframes aiRadarPulse { 
        0% { transform: scale(0.9); box-shadow: 0 0 0 0 var(--primary-glow); } 
        70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 
        100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 
    }
    #notification-page { padding: 0; }
    .notification-header { display: flex; align-items: center; justify-content: center; padding: 20px 15px 15px 15px; border-bottom: 1px solid var(--border-color); }
    .notification-header h1 { font-size: 22px; font-weight: 600; }
    .notification-list { padding: 15px; }
    .notification-card-wrapper { position: relative; background-color: #c62828; border-radius: 12px; margin-bottom: 15px; overflow: hidden; }
    .notification-card-actions { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; padding: 0 20px; }
    .notification-card-actions .delete-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
    .notification-card { display: flex; gap: 15px; background-color: var(--card-bg); padding: 15px; position: relative; z-index: 2; transition: transform 0.3s ease; touch-action: pan-y; }
    .notif-card-image { flex-shrink: 0; width: 70px; height: 100px; border-radius: 8px; background-color: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .notif-card-image img { width: 100%; height: 100%; object-fit: cover; }
    .notif-card-image .icon { font-size: 32px; color: var(--primary-color); }
    .notif-card-content { flex-grow: 1; display: flex; flex-direction: column; }
    .notif-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
    .notif-card-header h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .unread-dot-card { width: 10px; height: 10px; background-color: var(--primary-color); border-radius: 50%; box-shadow: 0 0 8px var(--primary-glow); flex-shrink: 0; }
    .notif-card-message { font-size: 14px; color: var(--text-secondary); line-height: 1.5; flex-grow: 1; }
    .notif-card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; }
    .notif-card-footer .time { font-size: 12px; color: #888; }
    .watch-now-btn { background-color: var(--primary-color); color: white; border: none; padding: 6px 14px; font-size: 13px; font-weight: 500; border-radius: 20px; cursor: pointer; transition: background-color 0.2s; }
    .watch-now-btn:hover { background-color: #ff1a25; }
    .page-header { padding: 20px 15px 15px 15px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
    .page-header h1 { font-size: 22px; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 12px; }
    .page-header.centered-header h1 { justify-content: center; text-align: center; width: 100%; }
    .watchlist-container-pro { display: flex; flex-direction: column; gap: 15px; padding: 15px; }
    .watchlist-card-pro { display: flex; background-color: var(--card-bg); border-radius: 12px; overflow: hidden; position: relative; }
    .watchlist-card-pro:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 15px var(--primary-glow); }
    .watchlist-card-pro .poster { width: 100px; flex-shrink: 0; }
    .watchlist-card-pro .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .watchlist-card-pro .info { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; }
    .watchlist-card-pro .info .title { font-size: 17px; font-weight: 600; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .watchlist-card-pro .info .meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
    .watchlist-card-pro .info .play-icon { color: var(--primary-color); font-size: 18px; }
    .watchlist-card-pro .remove-btn-pro { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
    .watchlist-card-pro .remove-btn-pro:hover { background-color: var(--primary-color); transform: scale(1.1); }
    .profile-header-pro { position: relative; padding: 40px 20px 30px 20px; text-align: center; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border-radius: 0 0 40px 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; }
    .profile-avatar-wrapper { position: relative; width: 120px; margin: 0 auto 15px; }
    .profile-avatar-pro { width: 120px; height: 120px; border-radius: 50%; border: 4px solid transparent; background-image: linear-gradient(var(--bg-color), var(--bg-color)), linear-gradient(45deg, var(--primary-color), transparent, var(--primary-color)); background-origin: border-box; background-clip: content-box, border-box; box-shadow: 0 0 25px var(--primary-glow); display: flex; justify-content: center; align-items: center; overflow: hidden; animation: pulseAvatar 3s infinite alternate; }
    @keyframes pulseAvatar { 0% { box-shadow: 0 0 15px var(--primary-glow); } 100% { box-shadow: 0 0 35px var(--primary-glow); } }
    .profile-avatar-pro img { width: 100%; height: 100%; object-fit: cover; }
    #change-avatar-btn { position: absolute; bottom: 5px; right: 0; background-color: var(--primary-color); color: white; border: 3px solid var(--bg-color); width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    #change-avatar-btn:hover { transform: scale(1.2) rotate(15deg); }
    .profile-name { font-size: 28px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
    .profile-email { font-size: 14px; color: var(--text-secondary); background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 20px; display: inline-block; }
    .profile-stats { display: flex; justify-content: space-around; padding: 20px; margin: 0 20px 30px 20px; background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
    .stat-item { text-align: center; transition: transform 0.3s ease; }
    .stat-item:hover { transform: translateY(-5px); }
    .stat-item .stat-number { font-size: 22px; font-weight: 800; color: var(--primary-color); text-shadow: 0 0 10px var(--primary-glow); }
    .stat-item .stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; text-transform: uppercase; font-weight: 600;}
    .form-page { padding: 20px 15px; }
    .form-page .auth-form { max-width: 100%; margin: 0 auto; background: transparent; backdrop-filter: none; border: none; padding: 10px 0; }
    .form-page .auth-form h1 { margin-bottom: 30px; }
    .settings-label { font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; text-align: center; font-weight: 500;}
    .gender-radio-group { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
    .gender-radio-group label { display: flex; align-items: center; cursor: pointer; }
    .gender-radio-group input[type="radio"] { display: none; }
    .gender-radio-label { padding: 10px 25px; border: 2px solid var(--border-color); border-radius: 25px; transition: all 0.3s ease; font-weight: 500; }
    .gender-radio-group input[type="radio"]:checked + .gender-radio-label { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--text-primary); }
    .toast-notification { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background-color: #2a2a2a; color: white; padding: 12px 20px; border-radius: 25px; font-size: 14px; z-index: 1100; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; border: 1px solid var(--border-color); }
    .toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(-10px); }
    .category-section { margin-bottom: 35px; }
    .category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 15px; }
    .category-title { position: relative; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-primary);}
    .category-title::before { content: ''; display: block; width: 5px; height: 24px; background-color: var(--primary-color); border-radius: 0; box-shadow: 0 0 8px var(--primary-glow); }
    .see-all-btn { color: var(--primary-color); text-decoration: none; font-size: 14px; font-weight: 500; text-shadow: 0 0 8px var(--primary-glow); transition: color 0.3s; }
    .see-all-btn:hover { color: white; }
    .content-slider { display: flex; overflow-x: auto; padding: 0 15px; scrollbar-width: none; -ms-overflow-style: none; gap: 12px; }
    .content-slider::-webkit-scrollbar { display: none; }
    .content-card, .trending-card, .backdrop-card { flex-shrink: 0; position: relative; border-radius: 12px; overflow: hidden; background-color: var(--card-bg); }
    .content-card, .trending-card { flex: 0 0 130px; }
    .backdrop-card { flex: 0 0 220px; }
   .content-card:hover, .trending-card:hover, .backdrop-card:hover { 
        transform: translateY(-8px) scale(1.03); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.8), 0 0 25px var(--primary-glow); 
        border: 1px solid var(--primary-color); /* Neon Border Reveal */
        z-index: 5;
    }
    .content-card img, .trending-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
    .backdrop-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
    .content-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); text-align: center; z-index: 2;}
    .content-card-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }

    .new-badge-ribbon {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 50px;
        height: 50px;
        overflow: hidden;
        z-index: 2;
    }
    .new-badge-ribbon span {
        position: absolute;
        display: block;
        width: 80px;
        padding: 5px 0;
        background: var(--primary-color);
        box-shadow: 0 5px 10px rgba(0,0,0,0.2), 0 0 10px var(--primary-glow);
        color: #fff;
        font: 700 11px/1 'Poppins', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        text-transform: uppercase;
        text-align: center;
        right: -17px;
        top: 13px;
        transform: rotate(45deg);
    }

    .trending-card .trending-rank { position: absolute; bottom: -15px; left: 5px; font-size: 80px; font-weight: 900; color: rgba(255, 255, 255, 0.9); line-height: 1; z-index: 2; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
    .trending-card .trending-title { position: absolute; bottom: 10px; left: 45px; right: 10px; font-size: 15px; font-weight: 700; color: white; line-height: 1.3; z-index: 3; text-shadow: 1px 1px 5px rgba(0,0,0,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .trending-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, transparent); z-index: 1; }
    .content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; padding: 15px; }
    .content-grid .content-card { flex-basis: auto; }
    .language-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background-color: var(--primary-color);
        color: var(--text-primary);
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 3;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .new-badge-ribbon ~ .language-badge {
        top: 40px;
    }
    .detail-page { 
    display: none; 
    padding-bottom: 90px; /* Safe space for bottom nav */
    background: var(--bg-color); 
    min-height: 100vh;
    overflow-x: hidden; /* Prevents weird zooming */
}

/* Dynamic Image Height without breaking aspect ratio */
.detail-backdrop { 
    width: 100%; 
    height: 45vh; /* Mobile friendly dynamic height */
    position: relative; 
}
.detail-backdrop img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: top;
}
.detail-backdrop::after { 
    content: ''; position: absolute; inset: 0; 
    /* Smooth gradient matching your app's dark theme */
    background: linear-gradient(to top, var(--bg-color) 0%, rgba(11,11,11,0.6) 40%, transparent 100%); 
}

/* Floating Glassmorphism Container */
.detail-content { 
    padding: 25px 20px; 
    position: relative; 
    z-index: 10; 
    margin-top: -15vh; /* Safe overlap */
    background: rgba(20, 20, 20, 0.65); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border-radius: 40px 40px 0 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; flex-direction: column;
}

.detail-title { 
    font-size: 28px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.8); letter-spacing: -0.5px; color: white;
}

/* NEW FEATURE: Cyber Meta Tags */
.cyber-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.cyber-tag { 
    background: rgba(229, 9, 20, 0.15); color: var(--primary-color); 
    padding: 4px 12px; border-radius: 8px; font-size: 11px; 
    font-weight: 800; border: 1px solid rgba(229, 9, 20, 0.3); 
    text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.1);
}
.cyber-tag.match { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border-color: rgba(46, 204, 113, 0.3); }

    .detail-meta { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; font-weight: 500;}
    .detail-actions { margin-bottom: 25px; }
    .btn-play-full { 
    background: linear-gradient(135deg, var(--primary-color) 0%, #ff4757 100%); 
    color: white; border: none; padding: 16px; width: 100%; 
    border-radius: 20px; cursor: pointer; font-size: 16px; font-weight: 800; 
    display: flex; justify-content: center; align-items: center; gap: 12px; 
    box-shadow: 0 8px 25px var(--primary-glow); transition: all 0.3s ease; 
    margin-bottom: 20px;
}
.btn-play-full:active { transform: scale(0.95); }

    .btn-play-full:hover { background-color: #ff1a25; }
    .btn-play-full i { font-size: 18px; }
    .storyline-wrapper { margin-bottom: 25px; }
    .detail-storyline { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
   .secondary-actions-container { 
    display: flex; justify-content: space-around; 
    background: rgba(0, 0, 0, 0.4); padding: 15px 10px; 
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.05); 
    margin-bottom: 25px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}
    .action-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 500; transition: color 0.3s ease, transform 0.2s ease; width: 70px; text-align: center; background: none; border: none; }
    .action-icon-btn i { font-size: 24px; }
    .action-icon-btn:hover { color: var(--text-primary); transform: scale(1.1); }
    .action-icon-btn.active { color: var(--primary-color); }
    .action-icon-btn span.action-count { font-size: 11px; color: var(--text-secondary); font-weight: 400; transition: color 0.3s ease; }
    .action-icon-btn.active span.action-count { color: var(--primary-color); }
    .cast-section { margin-bottom: 30px; }
    .cast-list { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px; scrollbar-width: none; }
    .cast-list::-webkit-scrollbar { display: none; }
    /* style.css mein Cast UI Upgrade */
    .cast-item { 
        text-align: center; 
        min-width: 85px; 
        flex-shrink: 0; 
        cursor: pointer; 
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect */
    }
    .cast-item img { 
        width: 75px; 
        height: 75px; 
        border-radius: 50%; 
        object-fit: cover; 
        margin-bottom: 10px; 
        border: 2px solid rgba(255,255,255,0.05); 
        box-shadow: 0 5px 15px rgba(0,0,0,0.6);
        transition: all 0.4s ease; 
    }
    .cast-item:hover {
        transform: translateY(-8px);
    }
    .cast-item:hover img { 
        border-color: var(--primary-color); 
        transform: scale(1.15); 
        box-shadow: 0 10px 25px var(--primary-glow);
    }
    .cast-item p { 
        font-size: 13px; 
        font-weight: 500;
        color: var(--text-primary); 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        transition: color 0.3s ease;
    }
    .cast-item:hover p {
        color: var(--primary-color);
        text-shadow: 0 0 10px var(--primary-glow);
    }
    #similar-section .category-header { padding: 0; }
    .back-btn { position: fixed; top: 15px; left: 15px; background: rgba(0,0,0,0.5); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 101; display: none; backdrop-filter: blur(5px); transition: background-color 0.3s ease; }
    .back-btn:hover { background-color: var(--primary-color); }
    /* Futuristic Floating Bottom Nav */
    .bottom-nav { 
        position: fixed; 
        bottom: 25px; 
        left: 50%; 
        transform: translateX(-50%); 
        width: 90%; 
        max-width: 420px; 
        height: 70px; 
        background: rgba(15, 15, 15, 0.4); 
        backdrop-filter: blur(30px); 
        -webkit-backdrop-filter: blur(30px); 
        border-radius: 40px; 
        display: flex; 
        justify-content: space-around; 
        align-items: center; 
        z-index: 200; 
        border: 1px solid rgba(255,255,255,0.15); 
        box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 2px 10px rgba(255,255,255,0.05); 
    }
    .nav-item { background: none; border: none; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; font-weight: 500; transition: all 0.3s ease; position: relative; padding: 8px 0; flex: 1; }
    .nav-item i { font-size: 22px; transition: color 0.3s ease; }
    .nav-item.active { 
        color: var(--primary-color); 
        transform: translateY(-12px) scale(1.15); /* Zada pop hoga */
        text-shadow: 0 0 15px var(--primary-glow); 
        background: rgba(255,255,255,0.05); /* Glass reflection */
        border-radius: 50%;
        padding: 10px;
    }
    .nav-item.active i { color: var(--primary-color); }
    .page-container.is-empty-page, .category-container.is-empty-page { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 200px); }
    .empty-state { text-align: center; padding: 20px 15px; color: var(--text-secondary); width: 100%; }
    .empty-state .empty-icon { font-size: 60px; margin-bottom: 20px; display: block; color: rgba(255,255,255,0.3); }
    .empty-state p { font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
    .empty-state span { font-size: 14px; }
    .search-suggestions-group { margin-bottom: 35px; }
    .suggestion-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
    .suggestion-title { font-size: 18px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
    .suggestion-title i { color: var(--primary-color); }
    .clear-btn { background: none; border: none; color: var(--primary-color); font-size: 13px; cursor: pointer; font-weight: 500; }
    .suggestion-tags-container { display: flex; flex-wrap: wrap; gap: 10px; }
    .suggestion-tag { padding: 8px 15px; background-color: var(--card-bg); border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border-color); }
    .suggestion-tag:hover { background-color: var(--primary-color); color: var(--text-primary); border-color: var(--primary-color); }
    .recent-search-item { display: flex; align-items: center; padding: 12px 5px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s ease; }
    .recent-search-item:last-child { border-bottom: none; }
    .recent-search-item:hover { background-color: rgba(255,255,255,0.05); }
    .recent-search-item .icon { color: var(--text-secondary); margin-right: 15px; font-size: 14px; width: 18px; text-align: center; }
    .recent-search-item .text { flex-grow: 1; color: var(--text-secondary); font-weight: 500; }
    .recent-search-item .remove-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; padding: 5px; }
    #profile-page.page-container { padding: 0; overflow-y: auto; }
    .profile-menu-group { margin: 0 15px 30px 15px; }
    .group-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; padding-left: 5px; }
    .profile-menu .menu-item { background-color: var(--card-bg); border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 15px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; border: 1px solid transparent; }
    .profile-menu .menu-item:hover { background-color: #2a2a2a; border-color: var(--primary-color); transform: translateX(5px); }
    .profile-menu .menu-item .icon { font-size: 18px; color: var(--primary-color); width: 20px; text-align: center; }
    .profile-menu .menu-item .text { flex-grow: 1; font-weight: 500; }
    .profile-menu .menu-item .chevron { font-size: 16px; color: var(--text-secondary); }
    .profile-menu .logout-item { border: 1px solid rgba(229, 9, 20, 0.5); }
    .profile-menu .logout-item .text { color: var(--primary-color); font-weight: 600; }
    .static-page-content { padding: 20px; color: var(--text-secondary); line-height: 1.7; }
    .static-page-content h2 { color: var(--text-primary); font-size: 18px; margin-bottom: 15px; }
    .static-page-content h3 { color: var(--text-primary); font-size: 16px; margin-top: 25px; margin-bottom: 10px; }
    .static-page-content p { margin-bottom: 20px; font-size: 15px; }
    .static-page-content ul { padding-left: 20px; margin-bottom: 20px; }
    .static-page-content li { margin-bottom: 10px; }

    .player-page {
        background-color: var(--bg-color);
        z-index: 500;
        display: none;
        flex-direction: column;
        width: 100%;
        height: 100vh;
    }
/* Cinematic Player Wrapper with Ambient Glow */
    .player-wrapper {
        width: 100%;
        position: relative;
        background-color: #000;
        overflow: hidden;
        font-size: 14px;
        user-select: none;
        line-height: 0;
        aspect-ratio: 16/9;
        border-radius: 0 0 25px 25px; /* Rounded bottom corners */
        box-shadow: 0 15px 60px var(--primary-glow); /* Cinematic ambient glow */
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .player-wrapper video { width: 100%; height: 100%; display: block; }

    .player-loading-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background-color: #000;
        z-index: 20;
        display: flex; justify-content: center; align-items: center;
        pointer-events: none; opacity: 0; transition: opacity 0.3s;
    }
    .player-loading-overlay.show { opacity: 1; pointer-events: auto; }
    .plyr__spinner {
        display: inline-block;
        width: 35px; height: 35px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: var(--primary-color);
        animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .player-error-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; }
    .player-error-overlay.show { display: flex; }
    .player-error-overlay i { font-size: 48px; color: var(--primary-color); margin-bottom: 15px; }
    .player-error-overlay p { font-size: 16px; font-weight: 500; }
    .error-back-btn { margin-top: 20px; padding: 10px 25px; background-color: var(--primary-color); border: none; border-radius: 25px; color: white; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }
    .error-back-btn:hover { background-color: #ff1a25; }
    #movie-player-page, #series-player-page, #livetv-player-page { overflow-y: auto; height: auto; } /* Allow scrolling on player pages */
    .movie-player-info { padding: 20px 15px; }
    .movie-player-title { font-size: 24px; font-weight: 700; margin-bottom: 15px; }
    .movie-player-suggestions { padding-bottom: 20px; }

    .player-back-btn {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0,0,0,0.5);
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        z-index: 25;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
        transition: background-color 0.3s ease;
    }
    .player-back-btn:hover {
        background-color: var(--primary-color);
    }

    .player-wrapper {
        --plyr-control-radius: 50%;
        --plyr-control-spacing: 10px;
        --plyr-tooltip-background: var(--primary-color);
        --plyr-tooltip-color: #fff;
        --plyr-range-thumb-height: 14px;
        --plyr-range-track-height: 5px;
        --plyr-control-icon-size: 20px;
    }
    .plyr--video .plyr__controls {
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        padding: 8px 10px 15px 10px;
    }
    .plyr__controls__item.plyr__progress__container { flex: 1 1 auto; margin: 0 10px; }
    .plyr__control { background: transparent !important; border-radius: 50%; transition: background-color 0.2s ease; width: 40px; height: 40px; }
    .plyr__control:hover, .plyr__control:focus { background: rgba(255,255,255,0.15) !important; }
    .plyr__control.plyr__tab-focus, .plyr__control--overlaid:focus { box-shadow: 0 0 0 4px var(--primary-glow); }
    .plyr__play-large { width: 70px; height: 70px; border-radius: 50%; background: rgba(229, 9, 20, 0.8) !important; border: 2px solid white; box-shadow: 0 0 20px var(--primary-glow); transition: all 0.2s ease; }
    .plyr__play-large:hover { transform: scale(1.1); background: rgba(229, 9, 20, 1) !important; }
    .plyr__play-large svg { width: 24px; height: 24px; left: 25px; }
    .plyr--video .plyr__progress input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; border: 0; border-radius: 20px; color: var(--plyr-color-main); display: block; height: 18px; margin: 0; padding: 0; transition: box-shadow .3s ease; width: 100%; }
    .plyr__progress input[type=range]::-webkit-slider-thumb { background: #fff; border: 0; border-radius: 50%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15); height: 14px; width: 14px; position: relative; transition: all .2s ease; -webkit-appearance: none; }
    .plyr__progress input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--primary-glow); }
    .plyr__time { font-size: 14px; }
    .plyr__preview-thumbnail { border: 2px solid white; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.5); background: #000; }
    .plyr__preview-thumbnail .plyr__preview-time { font-size: 13px; background: rgba(0,0,0,0.6); border-radius: 4px; padding: 2px 6px; bottom: 6px; right: 6px; }

    .player-rotate-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7);
        color: white;
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 50;
        pointer-events: none;
        text-align: center;
    }
    .player-rotate-overlay i { font-size: 48px; margin-bottom: 15px; transform: rotate(-90deg); }

    .plyr--fullscreen-active .player-wrapper:has(video:fullscreen) .player-rotate-overlay,
    .plyr--fullscreen-active .player-wrapper:has(video:-webkit-full-screen) .player-rotate-overlay {
        @media (orientation: portrait) {
            display: flex;
        }
    }

    #avatar-change-modal, #gender-choice-modal { position: fixed; bottom: 0; left: 0; max-width: 480px; margin: 0 auto; right: 0; background-color: var(--card-bg); z-index: 1100; border-top: 1px solid var(--border-color); border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 25px 15px; transform: translateY(100%); transition: transform 0.3s ease-in-out; }
    #avatar-change-modal.show, #gender-choice-modal.show { transform: translateY(0); }
    #avatar-change-modal h3, #gender-choice-modal h3 { text-align: center; font-size: 18px; margin-bottom: 25px; }
    #avatar-change-modal .avatar-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; justify-items: center; }
    #avatar-change-modal .avatar-choice { width: 65px; height: 65px; }
    .gender-choices { display: flex; justify-content: space-around; gap: 20px; }
    .gender-btn { background-color: var(--bg-color); border: 2px solid var(--border-color); color: var(--text-secondary); border-radius: 15px; padding: 20px; cursor: pointer; transition: all 0.3s ease; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
    .gender-btn i { font-size: 32px; }
    .gender-btn:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-5px); }
    .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1099; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
    .modal-backdrop.show { opacity: 1; pointer-events: auto; }

    auth-btn, .nav-item, .btn-play-full, .action-icon-btn, .menu-item, .suggestion-tag, .back-btn, .player-btn, .refresh-stream-btn, .error-back-btn, #change-avatar-btn, .search-clear-btn, .clear-btn, .remove-btn-pro, .channel-list-item, .indicator, .gender-btn, .player-back-btn { transition: transform 0.1s ease-out; }
    .auth-btn:active, .nav-item:active, .btn-play-full:active, .action-icon-btn:active, .menu-item:active, .suggestion-tag:active, .back-btn:active, .player-btn:active, .refresh-stream-btn:active, .error-back-btn:active, #change-avatar-btn:active, .search-clear-btn:active, .clear-btn:active, .remove-btn-pro:active, .channel-list-item:active, .indicator:active, .gender-btn:active, .player-back-btn:active { transform: scale(0.95); }

    .featured-series-card {
        position: relative;
        height: 350px;
        margin: 0 0 25px 0;
        border-radius: 0;
        overflow: hidden;
        background-color: var(--card-bg);
        cursor: pointer;
    }
    .featured-series-card .backdrop { width: 100%; height: 100%; object-fit: cover; }
    .featured-series-card .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(11,11,11,1) 15%, rgba(11,11,11,0.2) 60%, rgba(11,11,11,0.8) 100%); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
    .featured-series-card .title { font-size: 28px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
    .featured-series-card .meta { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 15px; }

    .detail-tabs { 
    display: flex; gap: 10px; padding: 0 20px; 
    margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; 
    border-bottom: none; /* Removed old boring line */
}
    .detail-tabs::-webkit-scrollbar { display: none; }
  .tab-link { 
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 10px 22px; border-radius: 30px; color: var(--text-secondary); 
    font-size: 14px; font-weight: 600; white-space: nowrap; transition: all 0.3s ease; 
}
.tab-link.active { 
    background: var(--primary-color); color: white; 
    border-color: var(--primary-color); box-shadow: 0 5px 15px var(--primary-glow); 
}
    .tab-content { display: none; padding: 0 15px; animation: fadeIn 0.4s; }

    .season-tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .season-tabs::-webkit-scrollbar { display: none; }
    .season-tab { padding: 10px 15px; cursor: pointer; font-weight: 600; color: var(--text-secondary); border-bottom: 3px solid transparent; transition: all 0.3s ease; white-space: nowrap; }
    .season-tab.active { color: var(--text-primary); border-bottom-color: var(--primary-color); }

    #livetv-page {
        display: none;
        flex-direction: column;
    }
    #livetv-page .header {
        position: static;
        background-color: transparent;
    }
    #livetv-page .search-input-wrapper {
        padding-bottom: 0;
    }

    .category-filters {
        display: flex;
        overflow-x: auto;
        padding: 15px 15px 15px 15px;
        gap: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .category-filters::-webkit-scrollbar { display: none; }
    .filter-chip {
        flex-shrink: 0;
        padding: 8px 18px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .filter-chip.active, .filter-chip:hover {
        background-color: var(--primary-color);
        color: var(--text-primary);
        border-color: var(--primary-color);
    }
    #livetv-content {
        padding-bottom: 20px;
    }
    .livetv-category-section { margin-bottom: 30px; }
    .livetv-grid { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px 15px; 
        padding: 0 15px; 
    }
    .livetv-channel-card {
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .livetv-channel-card .logo-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: #000; /* Changed from #fff to #000 for black background */
        border-radius: 12px;
        padding: 15px;
        border: 1px solid var(--border-color);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .livetv-channel-card:hover .logo-wrapper {
        border-color: var(--primary-color);
        transform: scale(1.05);
        box-shadow: 0 0 15px var(--primary-glow);
    }
    .livetv-channel-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .livetv-channel-card .channel-name {
        font-size: 13px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s ease;
        margin-top: 8px;
        width: 100%;
        text-align: center;
    }
    .livetv-channel-card:hover .channel-name {
        color: var(--text-primary);
    }
     .content-slider .livetv-channel-card {
        flex: 0 0 100px;
    }

    .autoplay-toggle-wrapper { display: flex; justify-content: flex-end; padding: 0 15px 20px; }
    .autoplay-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
    .autoplay-toggle .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
    .autoplay-toggle .switch input { opacity: 0; width: 0; height: 0; }
    .autoplay-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 24px; }
    .autoplay-toggle .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    .autoplay-toggle input:checked + .slider { background-color: var(--primary-color); }
    .autoplay-toggle input:checked + .slider:before { transform: translateX(20px); }

    #series-player-page .movie-player-info { padding: 20px 15px; }
    #series-player-page .movie-player-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
    #series-player-page .secondary-actions-container { margin-bottom: 25px; }
    .episodes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .episodes-header h3 { font-size: 18px; font-weight: 600; }
    #series-player-episode-list .episode-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    #series-player-episode-list .episode-item { flex-direction: column; gap: 8px; padding: 0; cursor: pointer; border-radius: 8px; overflow: hidden; background-color: var(--card-bg); border: 1px solid transparent; transition: all 0.3s ease; }
    #series-player-episode-list .episode-item:hover { border-color: var(--primary-color); transform: scale(1.05); }
    #series-player-episode-list .episode-item.active { border-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-glow); }
    #series-player-episode-list .episode-thumbnail { width: 100%; aspect-ratio: 16/9; position: relative; }
    #series-player-episode-list .episode-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
    #series-player-episode-list .episode-thumbnail .play-icon-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 32px; color: white; opacity: 0; transition: opacity 0.3s ease; }
    #series-player-episode-list .episode-item:hover .play-icon-wrapper { opacity: 1; }
    #series-player-episode-list .episode-details { padding: 10px; width: 100%; }
    #series-player-episode-list .episode-details .title { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #series-player-episode-list .episode-details .ep-desc { display: none; }

    #seasons-container .episode-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 15px; background: transparent; }
#seasons-container .episode-item { 
    display: flex; align-items: center; gap: 15px; padding: 10px; 
    background: var(--card-bg); border-radius: 18px; 
    border: 1px solid rgba(255,255,255,0.05); transition: background-color 0.2s ease; 
}
    #seasons-container .episode-item:last-child { border-bottom: none; }
    #seasons-container .episode-item .play-icon-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; opacity: 0; transition: opacity 0.3s ease; }
    #seasons-container .episode-item:hover .play-icon-wrapper { opacity: 1; }
   #seasons-container .episode-thumbnail { 
    width: 130px; aspect-ratio: 16/9; border-radius: 12px; 
    overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    position: relative; /* 🚀 YAHI WO LINE HAI JO GHOST CLICK KO ROKEGI */
}
    #seasons-container .episode-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
    #seasons-container .episode-details { flex-grow: 1; }
   #seasons-container .episode-details .title { font-size: 15px; font-weight: 700; color: white; }
#seasons-container .episode-details .ep-desc { font-size: 12px; margin-top: 4px; color: var(--text-secondary); }

   /* Holographic Floating Crown */
    .premium-crown {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 24px;
        color: #FFD700;
        text-shadow: 0 0 15px #FFD700, 0 0 30px #FFD700;
        z-index: 3;
        animation: floatCrown 2.5s infinite ease-in-out;
    }
    @keyframes floatCrown {
        0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
        50% { transform: translateY(-4px) scale(1.15) rotate(5deg); text-shadow: 0 0 25px #FFD700, 0 0 45px #FFD700; }
    }
    .new-badge-ribbon + .premium-crown {
        left: auto;
        right: 8px;
        top: 8px;
    }

    .subscription-plan-grid { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 15px; }
    /* style.css mein add karein */
.subscription-plan-card {
    background: linear-gradient(145deg, rgba(20,20,20,0.9), rgba(10,10,10,0.9)) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-top: 3px solid var(--primary-color) !important;
    position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
}
.subscription-plan-card::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 60%);
    opacity: 0.15; animation: rotatePlanGlow 8s linear infinite; pointer-events: none;
}
@keyframes rotatePlanGlow { 100% { transform: rotate(360deg); } }
.subscription-plan-card.highlighted {
    transform: scale(1.02);
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 30px var(--primary-glow) !important;
}
    .subscription-plan-card .plan-header {
        text-align: center;
    }
    .subscription-plan-card .plan-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary);
    }
    .subscription-plan-card .plan-rate {
        font-size: 36px;
        font-weight: 900;
        margin: 5px 0;
        color: var(--text-primary);
    }
    .subscription-plan-card .plan-rate span {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-secondary);
    }
    .subscription-plan-card .plan-description {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
        text-align: left;
    }
    .plan-description ul { list-style: none; padding: 0; }
    .plan-description li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .plan-description i { color: var(--primary-color); }
    .choose-plan-btn {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 12px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-top: auto;
    }
    .choose-plan-btn:hover { background-color: #ff1a25; }

    /* --- Payment Modal --- */
    #payment-modal {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.8);
        z-index: 1200;
        display: none;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    #payment-modal.show { 
        display: flex; 
        opacity: 1;
    }
    .payment-modal-content {
        background-color: var(--card-bg);
        padding: 25px;
        border-radius: 15px;
        text-align: center;
        border: 1px solid var(--border-color);
        position: relative;
        width: 90%;
        max-width: 400px;
        max-height: 90vh;
        overflow-y: auto;
        transform: scale(0.95);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    #payment-modal.show .payment-modal-content {
        transform: scale(1);
        opacity: 1;
    }
     .payment-modal-content::-webkit-scrollbar { display: none; }
    .payment-modal-content h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    #payment-qr-code-img {
        width: 200px;
        height: 200px;
        background: white;
        padding: 10px;
        border-radius: 8px;
    }
    .payment-modal-close-btn {
        position: absolute;
        top: 10px; right: 10px;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 28px;
        cursor: pointer;
    }
    #payment-details-form {
        margin-top: 20px;
    }
    #payment-details-form .input-group {
        margin-bottom: 15px;
    }
    #payment-details-form .auth-input {
        text-align: left;
        padding-left: 20px;
    }


    .detail-card {
        background-color: var(--card-bg);
        border-radius: 15px;
        padding: 25px;
        margin: 15px;
        border: 1px solid var(--border-color);
    }
    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid var(--border-color);
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .detail-label {
        font-size: 15px;
        color: var(--text-secondary);
    }
    .detail-value {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        text-align: right;
        text-transform: capitalize;
    }
    .premium-badge {
        background-color: #FFD700;
        color: #000;
        padding: 3px 8px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
    }
    .upgrade-btn {
        display: block;
        width: calc(100% - 30px);
        margin: 20px 15px 0 15px;
    }

    .comments-section {
        padding: 0 15px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .comments-section .category-title {
        margin-bottom: 20px;
    }
    .comment-form-container {
        margin-bottom: 25px;
    }
    .comment-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .comment-input {
        width: 100%;
        min-height: 80px;
        padding: 12px;
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        color: var(--text-primary);
        font-size: 15px;
        resize: vertical;
        outline: none;
        transition: border-color 0.3s, box-shadow 0.3s;
    }
    .comment-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 10px var(--primary-glow);
    }
    .comment-submit-btn {
        align-self: flex-end;
        padding: 10px 25px;
        background-color: var(--primary-color);
        border: none;
        border-radius: 25px;
        color: white;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.1s ease-out;
    }
     .comment-submit-btn:active {
        transform: scale(0.95);
    }
    .comment-submit-btn:hover {
        background-color: #ff1a25;
    }
    .comment-submit-btn:disabled {
        background-color: #555;
        cursor: not-allowed;
    }
    .comments-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .comment-item {
        display: flex;
        gap: 15px;
        align-items: flex-start;
    }
    .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }
    .comment-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .comment-content {
        flex-grow: 1;
    }
    .comment-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
    }
    .comment-user-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .comment-timestamp {
        font-size: 12px;
        color: var(--text-secondary);
    }
    .comment-text {
        font-size: 15px;
        color: var(--text-secondary);
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .comment-actions {
        margin-left: auto;
    }
    .comment-delete-btn {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 14px;
    }
    .comment-delete-btn:hover {
        color: var(--primary-color);
    }

    .app-lock-toggle-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background-color: var(--card-bg);
        border-radius: 12px;
        margin-bottom: 25px;
        font-size: 16px;
        font-weight: 500;
    }
    .app-lock-toggle-wrapper .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
    }
    .app-lock-toggle-wrapper .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .app-lock-toggle-wrapper .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #333;
        transition: .4s;
        border-radius: 24px;
    }
    .app-lock-toggle-wrapper .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    .app-lock-toggle-wrapper input:checked + .slider {
        background-color: var(--primary-color);
    }
    .app-lock-toggle-wrapper input:checked + .slider:before {
        transform: translateX(20px);
    }
    #pin-lock-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
        z-index: 10001;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .pin-lock-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 300px;
    }
    .pin-lock-prompt {
        font-size: 16px;
        color: var(--text-secondary);
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .pin-display {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    .pin-display span {
        width: 18px;
        height: 18px;
        background-color: var(--card-bg);
        border-radius: 50%;
        border: 1px solid var(--border-color);
        transition: background-color 0.2s ease;
    }
    .pin-display span.filled {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
    .pin-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        width: 100%;
    }
    .pin-keypad button {
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 28px;
        font-family: 'Orbitron', sans-serif;
        padding: 20px;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .pin-keypad button:hover, .pin-keypad button:active {
        background-color: var(--card-bg);
    }
    .pin-keypad button.keypad-blank {
        pointer-events: none;
    }
    .pin-lock-container .error-message {
        display: block;
        min-height: 20px;
        margin-top: 0;
    }
    @keyframes shake {
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(2px, 0, 0); }
        30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
        40%, 60% { transform: translate3d(4px, 0, 0); }
    }
    .pin-display.shake {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    }

    #upcoming-container {
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .upcoming-card {
        display: flex;
        gap: 15px;
        background-color: var(--card-bg);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border-color);
    }
    .upcoming-card .poster {
        width: 110px;
        flex-shrink: 0;
    }
    .upcoming-card .poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .upcoming-card .info {
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .upcoming-card .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .upcoming-card .countdown-timer {
        font-family: 'Orbitron', sans-serif;
        font-size: 16px;
        color: var(--primary-color);
        font-weight: 700;
        text-shadow: 0 0 8px var(--primary-glow);
    }
    .upcoming-card .meta {
        font-size: 13px;
        color: var(--text-secondary);
        margin-top: 10px;
    }

    .upcoming-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        text-align: center;
        padding: 8px;
        font-size: 11px;
        font-weight: 600;
        backdrop-filter: blur(5px);
    }
    .upcoming-overlay i {
        margin-right: 5px;
        color: var(--primary-color);
    }

    /* --- Theme Page Styles --- */
    #themes-page { padding: 0 15px; }
    #themes-page .form-page .auth-form { padding: 20px 0; }
    .themes-section { margin-bottom: 30px; }
    .themes-section h2 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 20px; }
    .themes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .theme-option { cursor: pointer; text-align: center; }
    .theme-preview {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 12px;
        border: 3px solid var(--border-color);
        margin-bottom: 10px;
        display: flex;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease;
    }
    .theme-preview .color-swatch {
        width: 50%;
        height: 100%;
    }
    .theme-preview .swatch-dark {
        background-color: #1c1c1c;
    }
    .theme-option .theme-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
        transition: color 0.3s ease;
    }
    .theme-option:hover .theme-preview {
        border-color: var(--primary-color);
    }
    .theme-option:hover .theme-name {
        color: var(--text-primary);
    }
    .theme-option.selected .theme-preview {
        border-color: var(--primary-color);
        box-shadow: 0 0 15px var(--primary-glow);
    }
    .theme-option.selected .theme-name {
        color: var(--primary-color);
        font-weight: 600;
    }
    .theme-option.selected .theme-preview::after {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: white;
        background-color: rgba(0,0,0,0.5);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    /* --- Trailer Modal --- */
    #trailer-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 1300;
        display: none;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(8px);
    }
    #trailer-modal.show {
        display: flex;
        animation: fadeIn 0.3s ease;
    }
    .trailer-modal-content {
        position: relative;
        width: 95%;
        max-width: 480px;
        aspect-ratio: 16/9;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .trailer-modal-close-btn {
        position: absolute;
        top: -40px;
        right: 0;
        background: none;
        border: none;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        font-weight: 300;
    }
    #trailer-link {
        display: inline-block;
        padding: 15px 30px;
        background-color: var(--primary-color);
        color: white;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
    }

    /* Report Modal Styles */
    #report-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1300;
        display: none;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(8px);
    }
    #report-modal.show {
        display: flex;
        animation: fadeIn 0.3s ease;
    }
    .report-modal-content {
        background-color: var(--card-bg);
        padding: 25px;
        border-radius: 15px;
        text-align: center;
        border: 1px solid var(--border-color);
        position: relative;
        width: 90%;
        max-width: 400px;
        max-height: 90vh;
        overflow-y: auto;
    }
    .report-modal-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 28px;
        cursor: pointer;
    }
    #report-form {
        margin-top: 20px;
    }
    #report-form .input-group {
        margin-bottom: 15px;
    }
    #report-form .auth-input {
        text-align: left;
        padding-left: 20px;
    }
    /* Toggle Switch Design */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider.round { 
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; 
    background-color: #333; transition: .4s; border-radius: 34px; border: 1px solid #444; 
}
.slider.round:before { 
    position: absolute; content: ""; height: 14px; width: 14px; 
    left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; 
}
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(18px); }

/* style.css ke aakhiri mein paste karein */

/* Upgraded Ambient Background */
body::after {
    content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 10% 20%, var(--primary-glow) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, var(--primary-glow) 0%, transparent 40%);
    z-index: -1; animation: floatAmbient 10s infinite alternate ease-in-out; pointer-events: none; opacity: 0.5;
}
@keyframes floatAmbient { 
    0% { transform: scale(1) translateY(0); } 
    100% { transform: scale(1.1) translateY(-20px); } 
}

/* Upgraded Login/Auth UI */
.auth-form {
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.1) !important;
}
.auth-input {
    background-color: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(5px);
}
.auth-input:focus {
    transform: translateY(-2px);
    background-color: rgba(0,0,0,0.6) !important;
}
.premium-lock-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    /* Opacity 0.6 se 0.2 kar di hai, takii photo clear dikhe */
    background: rgba(0, 0, 0, 0.2); 
    /* Blur 5px se 1.5px kar diya hai, jisse poster clean dikhega */
    backdrop-filter: blur(1.5px); 
    -webkit-backdrop-filter: blur(1.5px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    /* z-index kam kiya hai taki movie ka naam (title) overlay ke upar dikhe */
    z-index: 2; 
    color: #FFD700; border-radius: inherit;
    pointer-events: none; /* Taki card par click perfectly kaam kare */
}

.premium-lock-overlay i { 
    font-size: 24px; /* Icon thoda chota aur neat kiya */
    margin-bottom: 5px; 
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); 
}

.premium-lock-overlay span { 
    font-size: 11px; 
    font-weight: 700; 
    letter-spacing: 1px; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Text ko readable banane ke liye shadow */
}

/* Anime Page Unique Design */
.anime-special-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.anime-special-card:hover {
    transform: translateY(-5px);
    border-color: #ff4757; /* Anime theme color */
    box-shadow: 0 10px 20px rgba(255, 71, 87, 0.2);
}

.anime-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4757;
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
    z-index: 2;
}

/* Home Page Chips */
.category-chips {
    display: flex;
    overflow-x: auto;
    padding: 10px 15px;
    gap: 10px;
    scrollbar-width: none;
}
.chip {
    padding: 8px 18px;
    background: #222;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 13px;
    border: 1px solid #333;
}
.chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* =========================================
   🧊 ADVANCED 3D THEME MAGIC (Light Mode) 
   ========================================= */

body.theme-3d {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* 3D Shadows for Cards */
body.theme-3d .content-card, 
body.theme-3d .trending-card, 
body.theme-3d .backdrop-card,
body.theme-3d .livetv-channel-card,
body.theme-3d .auth-form,
body.theme-3d .detail-card,
body.theme-3d .subscription-plan-card {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: var(--card-bg) !important;
}

/* Bottom Nav 3D Glass Effect */
body.theme-3d .bottom-nav {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.05), inset 0 2px 10px rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.6);
}

/* Scrolled Header */
body.theme-3d .header.scrolled {
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* Fix text visibility on light images */
body.theme-3d .content-card-overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.95), transparent) !important;
}

body.theme-3d .content-card-title,
body.theme-3d .trending-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
    font-weight: 700;
}

/* Input Fields 3D effect */
body.theme-3d .auth-input, 
body.theme-3d .search-input-full {
    background-color: #e8ecef !important;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px rgba(255,255,255,0.9) !important;
    border: none !important;
    color: var(--text-primary) !important;
}

/* Ambient glow hide for light themes */
body.theme-3d::after, body.theme-3d::before {
    display: none !important;
}


/* Advanced Player Theater Mode - Naya Code */
.player-wrapper {
    box-shadow: 0 20px 80px rgba(229, 9, 20, 0.4); 
    transition: all 0.5s ease;
}

/* Double Tap Ripple Effect */
.seek-ripple {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    pointer-events: none;
    animation: rippleFade 0.6s ease-out forwards;
    z-index: 100;
}
.seek-ripple.left { left: 10%; }
.seek-ripple.right { right: 10%; }

@keyframes rippleFade {
    0% { transform: translateY(-50%) scale(0.5); opacity: 1; }
    100% { transform: translateY(-50%) scale(2); opacity: 0; }
}

/* Forgot Password Hover Effect */
.forgot-password-link a:hover {
    color: var(--primary-color) !important;
    text-shadow: 0 0 10px var(--primary-glow);
    transform: scale(1.05);
    display: inline-block;
}
/* Forgot Password Page ko screen ke beech mein laane ke liye */
#forgot-password-page-pro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    z-index: 1000;
    padding: 20px;
}

/* Jab 'hidden' class ho to bilkul na dikhe */
#forgot-password-page-pro.hidden {
    display: none !important;
}

/* --- PREMIUM ANIME & EPISODE UPGRADES --- */

/* Smart Horizontal Scroll for Player Episodes */
.smart-scroll-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 15px;
    scrollbar-width: none; /* Firefox */
}
.smart-scroll-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.mini-card {
    flex: 0 0 200px; /* Fixed width so it scrolls beautifully */
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.05);
}

.mini-card.active-playing {
    border-color: var(--primary-color) !important;
    background: linear-gradient(to right, rgba(229, 9, 20, 0.1), transparent) !important;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.2);
}

.now-playing-badge {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(229, 9, 20, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    animation: pulseAudio 1.5s infinite;
}

@keyframes pulseAudio {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* Upgraded Season Tabs */
.season-tabs {
    display: flex;
    gap: 12px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    margin-bottom: 20px;
}
.season-tab {
    padding: 8px 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    border: 1px solid transparent;
}
.season-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px var(--primary-glow);
}