/* --- MASTER GLOBAL CORE (CLEANED & MERGED) --- */

:root {
    /* Premium Cinematic Colors */
    --bg: #0b0d14;           
    --card: rgba(22, 25, 30, 0.6); 
    --accent: #9b59b6;       
    --gold: #f7e000;
    --red: #e11d48;
    --red-pro: #ff0000;
    --text: #ffffff;
    --text-dim: #9ca3af;
    --border: rgba(255, 255, 255, 0.08);
    --glass: rgba(255, 255, 255, 0.03);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. RESET & ACCESSIBILITY */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevents side-scrolling bugs */
}

body { 
    background-color: var(--bg);
    /* Premium ambient glow effect */
    background-image: radial-gradient(circle at 50% 0%, #1a1c29 0%, var(--bg) 70%);
    background-attachment: fixed;
    color: var(--text); 
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* 2. GLOBAL ELEMENTS */
a { 
    text-decoration: none; 
    color: inherit; 
    transition: var(--transition); 
}

/* 3. CUSTOM SCROLLBAR */
::-webkit-scrollbar { 
    width: 6px; 
}
::-webkit-scrollbar-track { 
    background: var(--bg); 
}
::-webkit-scrollbar-thumb { 
    background: #333; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: var(--accent); 
}


/* --- CURRENTLY PLAYING EPISODE STYLES --- */
.ep-row-premium.is-playing {
    border-color: #b535f6;
    background: rgba(181, 53, 246, 0.12);
    pointer-events: none; /* Makes it completely unclickable */
    box-shadow: 0 0 15px rgba(181, 53, 246, 0.15);
}

/* Highlight the title for playing episode */
.ep-row-premium.is-playing strong {
    color: #b535f6 !important;
}

/* Blur and darken the thumbnail for playing episode */
.ep-row-premium.is-playing .thumb-wrap img {
    filter: blur(3px) brightness(0.4);
    transform: scale(1.1); /* Slight zoom to hide messy blur edges */
    transition: all 0.3s ease;
}

/* Container for the wave animation */
.playing-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.ep-row-premium.is-playing .playing-overlay {
    display: flex;
}

/* The 3-Line Wave Animation */
.wave-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.wave-loader .stroke {
    display: block;
    width: 4px;
    height: 16px;
    background: #fff;
    border-radius: 10px;
    animation: epAudioWave 1.2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* Stagger the animation so they bounce like audio waves */
.wave-loader .stroke:nth-child(1) { animation-delay: 0s; }
.wave-loader .stroke:nth-child(2) { animation-delay: 0.2s; }
.wave-loader .stroke:nth-child(3) { animation-delay: 0.4s; }

@keyframes epAudioWave {
    0%, 100% { height: 6px; opacity: 0.6; }
    50% { height: 20px; opacity: 1; }
}

/* --- FILLER EPISODE BADGE (NEW SEXY RED & ANIMATED) --- */
.filler-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #f43f5e, #e11d48); /* Sexy vibrant cherry red gradient */
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px; /* Cute softer edges */
    font-size: 11px;
    font-weight: 900;
    margin: 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    vertical-align: middle;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
    line-height: 1;
    position: relative;
    overflow: hidden;
    animation: cutePulse 2.5s infinite ease-in-out;
}

/* Glassy Shine Sweep Animation */
.filler-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    animation: sexyShine 3.5s infinite;
}

/* Wiggle the warning icon gently */
.filler-badge svg {
    width: 13px;
    height: 13px;
    animation: gentleWiggle 3.5s infinite ease-in-out;
}

/* Responsive adjustments for mobile perfection */
@media (max-width: 480px) {
    .filler-badge {
        padding: 3px 8px;
        font-size: 10px;
        border-radius: 6px;
        margin: 0 4px;
        box-shadow: 0 3px 8px rgba(225, 29, 72, 0.3);
    }
    .filler-badge svg {
        width: 11px;
        height: 11px;
    }
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes cutePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35); }
    50% { transform: scale(1.05); box-shadow: 0 6px 16px rgba(225, 29, 72, 0.55); }
}

@keyframes sexyShine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

@keyframes gentleWiggle {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-10deg); }
    20%, 40% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
}

/* --- MASTER VISIBILITY & PURPLE TINT --- */
/* 1. Ensures Watched and Filler episodes have bright white text */
body .is-watched strong,
body .is-filler strong,
body .ep-row.is-watched .ep-info strong,
body .ep-row-premium.is-watched strong {
    color: #ffffff !important; /* Forces bright white text */
    opacity: 1 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* 2. Apply the Purple Tint ONLY to Watched rows */
.ep-row.is-watched,
.ep-row-premium.is-watched {
    background: rgba(181, 53, 246, 0.12) !important; /* Premium Purple Tint */
    border-color: rgba(181, 53, 246, 0.3) !important;
    transition: all 0.3s ease;
}

/* 3. Thumbnail slight dimming for watched status only */
.ep-row.is-watched img,
.ep-row-premium.is-watched .thumb-wrap img {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.ep-row.is-watched:hover img,
.ep-row-premium.is-watched:hover .thumb-wrap img {
    opacity: 1;
}



/* --- FILLER MODAL (PURPLE GLASSMORPHISM) --- */
.glass-modal-overlay {
    position: fixed; inset: 0; z-index: 9999999;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
    padding: 20px;
}
.glass-modal-overlay.show-modal {
    display: flex; opacity: 1;
}

.glass-modal-content {
    background: linear-gradient(145deg, rgba(88, 28, 135, 0.7), rgba(46, 16, 101, 0.85));
    border: 1px solid rgba(181, 53, 246, 0.4);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(181, 53, 246, 0.15);
    border-radius: 28px; padding: 30px;
    max-width: 360px; width: 100%;
    color: #fff; text-align: center;
    transform: translateY(30px) scale(0.95); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-modal-overlay.show-modal .glass-modal-content {
    transform: translateY(0) scale(1);
}

.glass-icon-wrap {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #b535f6, #7e22ce);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; box-shadow: 0 10px 20px rgba(181, 53, 246, 0.3);
}
.glass-icon-wrap svg { width: 30px; height: 30px; color: #fff; }

.glass-modal-header h3 {
    margin: 0 0 15px; font-size: 22px; font-weight: 800; color: #fdf2ff; letter-spacing: -0.5px;
}

.glass-modal-body p {
    font-size: 14px; color: #cbd5e1; line-height: 1.6; margin: 0 0 15px; font-weight: 500;
}
.glass-modal-body strong { color: #fff; font-weight: 800; }

.glass-modal-btn {
    width: 100%; background: #b535f6; color: #fff; border: none;
    padding: 14px; border-radius: 16px; font-weight: 800; font-size: 15px;
    cursor: pointer; margin-top: 10px; transition: 0.3s;
    box-shadow: 0 4px 15px rgba(181, 53, 246, 0.4);
}
.glass-modal-btn:hover { background: #d946ef; transform: translateY(-2px); }

/* Ensure badges look clickable */
.filler-badge { cursor: pointer; position: relative; z-index: 2; }
.filler-badge:hover { filter: brightness(1.1); transform: scale(1.05); }




.badge-18-plus {
    position: absolute;
    /* Responsive positioning: tighter on mobile, wider on PC */
    top: clamp(10px, 2vw, 15px);
    right: clamp(10px, 2vw, 15px);
    
    /* Responsive circle size */
    width: clamp(38px, 5vw, 46px);
    height: clamp(38px, 5vw, 46px);
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Red Glass Theme */
    background: rgba(239, 68, 68, 0.65); /* Rich translucent red */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 150, 150, 0.4); /* Glowing glass edge */
    border-radius: 50%; /* Perfect Circle */
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
    
    /* Text Styling */
    color: #ffffff;
    font-size: clamp(13px, 2vw, 15px);
    font-weight: 900;
    letter-spacing: 0.5px;
    z-index: 10;
    
    /* CRITICAL for the sweeping shine to stay inside the circle */
    overflow: hidden; 
    
    /* Hidden initially for LiteSpeed LazyLoad */
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

/* The Continuous Shine Animation */
.badge-18-plus::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 60%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); 
    transform: skewX(-25deg); 
    animation: continuousGlowFlow 2.2s infinite linear;
    z-index: 1;
}

@keyframes continuousGlowFlow { 
    0% { left: -100%; } 
    100% { left: 200%; } 
}

/* Trigger badge pop-in ONLY when LiteSpeed/LazyLoad finishes loading the image */
.cinematic-wrapper .poster-container img.litespeed-loaded ~ .badge-18-plus,
.cinematic-wrapper .poster-container img.lazyloaded ~ .badge-18-plus,
.cinematic-wrapper .poster-container img[data-ll-status="loaded"] ~ .badge-18-plus,
.cinematic-wrapper .poster-container img:not([data-src]) ~ .badge-18-plus {
    opacity: 1;
    transform: scale(1);
}




/* ==========================================
   MASTER FLOATING STACK (Single Item Anchor)
   ========================================== */
#at-floating-stack {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    width: 330px; /* Strict Desktop Width */
}
#at-floating-stack > div {
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   ULTRA-PREMIUM FLOATING APP PROMO BANNER
   ========================================== */
.at-app-promo-wrapper {
    position: relative; 
    background: linear-gradient(145deg, rgba(20, 8, 40, 0.85) 0%, rgba(10, 3, 20, 0.95) 100%);
    border: 1px solid rgba(168, 85, 247, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 8px 14px 8px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6), 
                0 0 20px rgba(168, 85, 247, 0.15), 
                inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transform: translateY(80px) scale(0.95);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    overflow: hidden; 
}

.at-app-promo-wrapper.show-promo {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: floatPremium 6s ease-in-out infinite alternate 0.6s;
}

/* Premium Shine Sweep Animation */
.at-app-promo-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: skewX(-25deg);
    animation: shineSweep 6s infinite 2s;
    pointer-events: none;
}

.at-promo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    flex-grow: 1;
    min-width: 0; /* Crucial for text truncation */
    overflow: hidden;
}

.at-promo-link:hover {
    transform: translateX(4px);
}

.at-promo-icon-wrap {
    background: linear-gradient(135deg, #d946ef 0%, #8b5cf6 100%);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(217, 70, 239, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    position: relative;
}

.at-promo-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: inherit;
    z-index: -1;
    filter: blur(8px);
    opacity: 0.6;
    animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.at-android-icon {
    width: 24px;
    height: 24px;
    color: #ffffff;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

.at-promo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; 
    flex: 1;
}

.at-promo-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-promo-subtitle {
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: linear-gradient(to right, #10b981, #34d399, #10b981);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s linear infinite;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-promo-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    margin-left: auto; 
}

.at-promo-close svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.5px;
}

.at-promo-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    transform: rotate(90deg) scale(1.1); 
}

/* ==========================================
   SKIP ADS: VERIFICATION BANNER
   ========================================== */
.sa-trial-banner-pro {
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid rgba(0, 242, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: default;
    flex-direction: column;
}
.sa-trial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.sa-trial-icon-wrap {
    background: rgba(0, 242, 255, 0.1);
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00f2ff;
    flex-shrink: 0;
}
.sa-trial-text-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sa-trial-title {
    font-weight: 800;
    color: #fff;
    font-size: 14px;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sa-trial-desc {
    font-size: 12px;
    color: #a1a1aa;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sa-trial-timer {
    color: #00f2ff;
    font-family: monospace;
    font-weight: 800;
    font-size: 13px;
    background: rgba(0,242,255,0.1);
    padding: 1px 5px;
    border-radius: 4px;
}
.sa-verify-btn-pro {
    background: linear-gradient(90deg, #00f2ff, #bc13fe);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(188, 19, 254, 0.3);
    transition: transform 0.2s;
}
.sa-verify-btn-pro:active {
    transform: scale(0.96);
}

/* --- ANIMATIONS --- */
@keyframes floatPremium {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}
@keyframes shineSweep {
    0% { left: -150%; opacity: 0; }
    10% { opacity: 1; }
    20% { left: 200%; opacity: 0; }
    100% { left: 200%; opacity: 0; }
}
@keyframes pulseGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes gradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ==========================================
   STANDARD MOBILE MODE
   ========================================== */
@media (max-width: 768px) {
    #at-floating-stack {
        bottom: 14px; /* Dropped closer to bottom edge */
        left: 14px;
        width: 265px; /* Strict Width Lock */
        right: auto;
    }
    .at-app-promo-wrapper, .sa-trial-banner-pro {
        padding: 10px 12px;
    }
    .at-promo-link {
        gap: 10px;
    }
    .at-promo-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .at-android-icon {
        width: 18px;
        height: 18px;
    }
    .at-promo-title {
        font-size: 13px;
    }
    .at-promo-subtitle {
        font-size: 10px;
    }
    .at-promo-close {
        width: 26px;
        height: 26px;
    }
    .sa-trial-icon-wrap {
        padding: 8px;
    }
    .sa-trial-icon-wrap svg {
        width: 18px !important;
        height: 18px !important;
    }
    .sa-trial-title {
        font-size: 13px;
    }
    .sa-trial-desc {
        font-size: 11px;
    }
    .sa-trial-timer {
        font-size: 12px;
    }
    .sa-verify-btn-pro {
        padding: 10px;
        font-size: 12px;
    }
}

/* ==========================================
   EXTRA SMALL DEVICES (Old Mobiles / iPhone SE)
   ========================================== */
@media (max-width: 380px) {
    #at-floating-stack {
        bottom: 10px; /* Hugs the bottom edge tightly */
        left: 10px;
        width: 240px; /* Shrunk further so it NEVER touches the bell */
    }
    .at-app-promo-wrapper, .sa-trial-banner-pro {
        padding: 8px 10px;
    }
    .at-promo-icon-wrap {
        width: 32px;
        height: 32px;
    }
    .at-android-icon {
        width: 16px;
        height: 16px;
    }
    .sa-trial-icon-wrap {
        padding: 6px;
    }
    .sa-trial-icon-wrap svg {
        width: 16px !important;
        height: 16px !important;
    }
    .sa-trial-title, .at-promo-title {
        font-size: 11.5px;
    }
    .sa-trial-desc, .at-promo-subtitle {
        font-size: 9.5px;
    }
    .sa-trial-timer {
        font-size: 11px;
    }
    .sa-verify-btn-pro {
        padding: 8px;
        font-size: 11px;
    }
}



/* 2. HEADER: [MENU | SITE NAME | SEARCH] */
.main-header {
    background: rgba(11, 13, 16, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 65px;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
}

/* Header Icons */
.menu-btn, .search-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: var(--transition);
}

.menu-btn:hover, .search-btn:hover { color: var(--accent); transform: scale(1.1); }

.site-logo a {
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(to right, #fff, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3. SEARCH OVERLAY (POPUPS & LOADER) */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2000; visibility: hidden; opacity: 0;
    transition: var(--transition);
    display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh;
}

.search-overlay.active { visibility: visible; opacity: 1; }

.search-overlay-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(8, 10, 12, 0.95); backdrop-filter: blur(25px);
}

.search-modal-box {
    position: relative; width: 90%; max-width: 600px;
    transform: translateY(-40px) scale(0.9);
    transition: var(--transition);
    z-index: 2;
}

.search-overlay.active .search-modal-box { transform: translateY(0) scale(1); }

.search-input-wrap { position: relative; width: 100%; }

#live-search-input {
    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 25px; color: #fff; font-size: 18px;
    outline: none; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* The Animated Spinner */
.search-loader {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.1);
    border-top: 2px solid var(--accent); border-radius: 50%;
    display: none; animation: spin 0.8s linear infinite;
}
@keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }

/* Results Container */
#search-results-box {
    margin-top: 15px; max-height: 50vh; overflow-y: auto;
    background: rgba(255,255,255,0.02); border-radius: 14px;
}

/* 4. HOME GRID (2 PER LINE MOBILE) */
.section-title {
    padding: 30px 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto;
}

.flame-svg { width: 22px; height: 22px; color: #ff5a5f; }
.section-title h2 { font-size: 19px; font-weight: 700; color: #eee; }





#ptr-wrapper {
  position: relative;
  /* Ensure the content handles its own layout */
  width: 100%;
}

#ptr-loader {
  position: absolute;
  top: -70px; /* Hide it exactly above the screen */
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f3e8ff; /* Light purple background */
  z-index: 100;
}

#ptr-text {
  font-family: sans-serif;
  font-size: 14px;
  color: #6b21a8; /* Deep purple text */
  margin-top: 8px;
  font-weight: 600;
}

/* The stylish purple spinning ring */
.purple-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #d8b4fe; /* Lighter purple track */
  border-top: 3px solid #7e22ce; /* Dark purple spinning edge */
  border-radius: 50%;
  transition: transform 0.2s ease-out;
}

/* A class we will add via JS when it's actively refreshing */
.ptr-refreshing .purple-spinner {
  animation: ptr-spin 1s linear infinite;
}

@keyframes ptr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* We animate the main content moving down */
#main-content {
  transition: transform 0s; /* Instant follow when finger drags */
  background-color: white; /* Prevent seeing through content */
  min-height: 100vh;
}



/* 1. SEARCH OVERLAY & INPUT */
.search-overlay { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 2000; 
    visibility: hidden; 
    opacity: 0; 
    transition: 0.4s; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    padding-top: 15vh; 
}

.search-overlay.active { visibility: visible; opacity: 1; }

.search-overlay-bg { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(8, 10, 12, 0.95); 
    backdrop-filter: blur(25px); 
}

.search-modal-box { 
    position: relative; 
    width: 90%; 
    max-width: 600px; 
    z-index: 2; 
    transform: translateY(-40px); 
    transition: 0.4s; 
}

.search-overlay.active .search-modal-box { transform: translateY(0); }

.search-input-wrap { 
    position: relative; 
    width: 100%; 
    display: flex;
    align-items: center;
}

/* SEARCH ICON: PERFECTLY CENTERED & SIZED */
.search-input-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: #888;
    pointer-events: none;
    z-index: 20;
}

#live-search-input { 
    width: 100%; 
    background: rgba(255,255,255,0.06); 
    border: 1px solid var(--border); 
    border-radius: 14px; 
    /* 65px Padding-Left ensures huge gap between Icon and Text */
    padding: 18px 25px 18px 65px !important; 
    color: #fff; 
    font-size: 17px; 
    outline: none; 
    transition: var(--transition);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

#live-search-input:focus {
    border-color: var(--accent);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 25px rgba(155, 89, 182, 0.25);
}

/* 2. THE LOADER (SVG SPINNER) */
.search-loader { 
    position: absolute; 
    right: 22px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 20px; 
    height: 20px; 
    border: 3px solid rgba(255,255,255,0.1); 
    border-top: 3px solid var(--accent); 
    border-radius: 50%; 
    display: none; 
    animation: spin 0.8s linear infinite; 
    z-index: 20;
}

@keyframes spin { 
    0% { transform: translateY(-50%) rotate(0deg); } 
    100% { transform: translateY(-50%) rotate(360deg); } 
}

/* --- 3. PERMANENT SEARCH SEPARATOR & SPACE FIX --- */

/* THE PERMANENT LINE: Enhanced Visibility */
.sa-search-divider {
    width: 100% !important;
    height: 1px !important;
    margin: 25px 0 10px 0 !important; /* Fixed margins to prevent large gaps */
    /* Brighter Purple Gradient for "Perfect" visibility */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(155, 89, 182, 0.4) 20%, 
        rgba(155, 89, 182, 0.4) 80%, 
        transparent 100%
    ) !important;
    border: none !important;
    display: block !important;
}

/* THE RESULTS & HISTORY BOXES: Space Killer Logic */
#search-results-box, 
.landing-history-box { 
    margin: 0 !important; 
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* 🔥 NEXT LEVEL: Only take up space when there is actually content inside */
#search-results-box:not(:empty),
.landing-history-box:not(:empty) {
    height: auto !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    padding: 15px 0 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
    animation: saContentFade 0.4s ease forwards;
}

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

/* Custom Scrollbar for Results */
#search-results-box::-webkit-scrollbar { width: 5px; }
#search-results-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }




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

/* Custom Scrollbar for Results */
#search-results-box::-webkit-scrollbar { 
    width: 5px; 
}

#search-results-box::-webkit-scrollbar-thumb { 
    background: var(--border); 
    border-radius: 10px; 
}

.search-res-item { 
    display: flex; 
    align-items: center; 
    padding: 12px 18px; 
    gap: 15px; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    transition: 0.2s; 
}

.search-res-item:hover { background: rgba(155, 89, 182, 0.12); }

.search-res-img img { 
    width: 45px; 
    height: 65px; 
    object-fit: cover; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
}

.search-res-info { display: flex; flex-direction: column; gap: 4px; }
.res-title { font-size: 15px; font-weight: 700; color: #fff; }

.res-subline { display: flex; align-items: center; gap: 12px; }
.sub-item { display: flex; align-items: center; gap: 5px; color: #888; font-size: 11px; }
.sub-item svg { width: 12px; height: 12px; color: var(--gold); }

/* TYPE HIGHLIGHT (Badge) */
.res-type-highlight { 
    background: rgba(155, 89, 182, 0.15); 
    padding: 2px 8px; 
    border-radius: 4px; 
    border: 1px solid rgba(155, 89, 182, 0.3); 
}
.res-type-highlight .type-text { 
    color: var(--accent) !important; 
    font-weight: 900; 
    text-transform: uppercase; 
    font-size: 10px; 
}
.res-type-highlight svg { color: var(--accent) !important; stroke-width: 3; }

/* 4. SEARCH HISTORY UI */
.search-history-container { 
    margin-top: 15px; 
    background: rgba(255,255,255,0.03); 
    border-radius: 14px; 
    border: 1px solid var(--border); 
    overflow: hidden;
}

.history-head { 
    padding: 12px 20px; 
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}

.history-head svg { width: 14px; height: 14px; color: #444; }
.history-head span { 
    font-size: 11px; 
    font-weight: 900; 
    color: #444; 
    letter-spacing: 1.5px; 
    text-transform: uppercase;
}

.history-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 20px; 
    cursor: pointer; 
    transition: 0.2s;
}

.history-item:hover { background: rgba(255,255,255,0.05); }

.history-label { display: flex; align-items: center; gap: 12px; flex: 1; }
.history-label svg { width: 14px; height: 14px; color: #666; }
.history-label span { font-size: 14px; color: #bbb; font-weight: 600; }

.history-remove { 
    width: 28px; 
    height: 28px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 6px; 
    color: #444; 
    transition: 0.2s;
}

.history-remove:hover { background: rgba(225, 29, 72, 0.2); color: var(--red); }

/* 5. NO RESULTS STATE */
.no-search-res { padding: 40px 20px; text-align: center; color: #666; }
.no-search-res svg { width: 40px; height: 40px; margin-bottom: 10px; color: #333; }
.no-search-res p { font-size: 14px; font-weight: 500; }

/* 6. WATCHED RIBBON */
.thumb-wrap { position: relative; width: 95px; height: 55px; overflow: hidden; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); }
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

.watched-ribbon { 
    position: absolute; top: 0; left: 0; width: 100%; height: 14px; 
    background: var(--red); display: none; z-index: 5; overflow: hidden; 
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); 
}

.watched-ribbon span { 
    position: relative; z-index: 2; display: block; width: 100%; 
    text-align: center; font-size: 7.5px; font-weight: 900; color: #fff; 
    letter-spacing: 1.2px; line-height: 14px; text-transform: uppercase; 
}

.watched-ribbon::after { 
    content: ''; position: absolute; top: 0; left: -100%; width: 40%; height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); 
    transform: skewX(-25deg); animation: continuousGlowFlow 2.2s infinite linear; 
}

@keyframes continuousGlowFlow { 0% { left: -100%; } 100% { left: 140%; } }

.ep-row-premium.is-watched .watched-ribbon { display: block; }
.ep-row-premium.is-watched strong { color: #555 !important; }

/* 7. SEASON GRID & BUTTONS */
.season-grid-cinematic { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 20px; }

.season-card-rect { 
    position: relative; width: calc(50% - 8px); height: 80px; 
    background: var(--card); border-radius: 12px; overflow: hidden; 
    display: flex; align-items: center; justify-content: center; 
    border: 1px solid var(--border); transition: 0.3s; 
}

.s-bg-blur { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    filter: blur(10px) brightness(0.4); transform: scale(1.1); 
}

.s-label { 
    position: relative; z-index: 2; font-size: 15px; font-weight: 900; 
    color: #fff; letter-spacing: 1px; text-transform: uppercase; 
}

@media (min-width: 768px) { .season-card-rect { width: calc(25% - 12px); height: 100px; } }

.dl-flex-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

.dl-btn-premium { 
    position: relative; display: flex; align-items: center; 
    justify-content: center; gap: 10px; background: #1e293b; 
    border: 1px solid #334155; padding: 12px 25px; border-radius: 50px; 
    font-weight: 800; text-transform: uppercase; font-size: 12px; 
    color: #fff; overflow: hidden; transition: 0.4s; min-width: 200px; 
}

.dl-btn-premium:hover { 
    border-color: var(--accent); 
    background: #243147;
    transform: translateY(-2px);
}



/* --- SKELETON PRELOADER STYLES --- */
.skeleton-grid {
    pointer-events: none;
    user-select: none;
}
.skeleton-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.skel-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: rgba(255, 255, 255, 0.04);
}
.skel-text {
    height: 18px;
    margin: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    width: 70%;
}

.skeleton-row {
    display: flex;
    align-items: center;
    background: rgba(20, 24, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}
.skel-num {
    width: 45px; height: 50px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px; margin-right: 18px;
}
.skel-poster-small {
    width: 55px; height: 80px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px; margin-right: 18px;
}
.skel-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.skel-line { width: 80%; height: 14px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; }
.skel-line.short { width: 40%; height: 20px; }

/* Global Shimmer Animation */
.skeleton-card::after, .skeleton-row::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-20deg);
    animation: skelShimmer 1.5s infinite;
}
@keyframes skelShimmer { 100% { left: 200%; } }

/* --- SLEEK TEXT TABS (LATEST ANIMES) --- */
.at-text-tabs { display: flex; align-items: center; gap: 15px; }
.at-txt-tab {
    background: transparent; border: none; color: #888; font-size: 14px;
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 0; cursor: pointer; transition: 0.3s ease;
}
.at-txt-tab:hover { color: #fff; }
.at-txt-tab.active { color: #9b59b6; text-shadow: 0 0 10px rgba(155, 89, 182, 0.5); }

/* --- TOP 10 ANIMES TABS --- */
.at-top-tabs {
    display: flex; background: rgba(255, 255, 255, 0.04); padding: 4px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
}
.at-t-tab {
    background: transparent; border: none; color: #888; padding: 8px 16px;
    font-size: 13px; font-weight: 800; border-radius: 8px; cursor: pointer; transition: 0.3s ease;
}
.at-t-tab:hover { color: #fff; }
.at-t-tab.active { background: #9b59b6; color: #fff; box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4); }



/* =========================================================
   HOMEPAGE GRID & STRUCTURE (ULTRA-FAST, NO ANIMATIONS)
   ========================================================= */

/* 5. ANIME CARD (POSTER STYLE) */
.anime-card {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
    position: relative;
    width: 100%; /* Prevents grid blowout */
    min-width: 0; /* Prevents grid blowout */
}

.anime-card:hover { 
    transform: translateY(-8px); 
    border-color: rgba(155, 89, 182, 0.4);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.poster-box {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3; /* Perfect vertical poster */
    overflow: hidden;
    background: #000;
}

.poster-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.anime-card:hover .poster-box img { transform: scale(1.1); filter: brightness(0.5); }

/* 6. BADGES (S-E, DUBBED BY, HINDI) */
.badge {
    position: absolute;
    z-index: 10;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
}

.se-badge { 
    top: 10px; left: 10px; 
    background: rgba(0,0,0,0.7); 
    border: 1px solid var(--border);
}

.dubby-badge { 
    top: 10px; right: 10px; 
    background: var(--accent); 
    color: #fff;
}

.meta-badge { 
    bottom: 10px; right: 10px; 
    background: rgba(10, 10, 10, 0.9); 
    color: #000000; 
    border: 1px solid #333;
}

/* 7. HOVER GENRES (One Piece Animation) */
.hover-genres {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 15;
}

.anime-card:hover .hover-genres { opacity: 1; transform: translateY(0); }

.hover-genres span {
    background: #3b82f6;
    color: #fff;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
}

/* Card Details */
.card-details { padding: 12px 10px; }
.card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Allows 2 lines, adds ... if it tries to make a 3rd */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 36.4px; /* 13px * 1.4 = 18.2px per line. 18.2 * 2 = 36.4px. Keeps all cards perfectly aligned! */
}

/* 8. SIDEBAR DRAWER (ANIMATED) */
.side-drawer {
    position: fixed; top: 0; left: -320px; width: 300px; height: 100%;
    background: #0d0f12; z-index: 3000;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: 20px 0 50px rgba(0,0,0,0.5);
    padding: 60px 25px;
}
.side-drawer.active { transform: translateX(320px); }

.drawer-blur-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(8px);
    z-index: 2500; display: none;
}

.drawer-nav a {
    display: block; font-size: 18px; color: #fff;
    margin-bottom: 25px; font-weight: 500; transition: 0.3s;
}
.drawer-nav a:hover { color: var(--accent); padding-left: 10px; }

/* 9. FOOTER */
.site-footer {
    text-align: center;
    padding: 50px 20px;
    border-top: 1px solid var(--border);
    margin-top: 50px;
    color: #444;
    font-size: 12px;
}

/* 🔥 LOCKED GRID: The !important forces CSS grid structurally and kills JS blowout bugs */
.home-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Strict 2 columns on small mobile */
    gap: 12px;
    padding: 20px 18px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* 🚀 WIDE MOBILE RESPONSIVE 3 COLUMNS */
@media (min-width: 480px) { 
    .home-grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 12px; 
    } 
}

@media (min-width: 768px) { .home-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px; } }
@media (min-width: 1200px) { .home-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 20px; } }

/* Fixes the header gap and layers your content properly */
.site-main {
    position: relative;
    padding-top: 30px; 
    padding-bottom: 50px;
    min-height: 100vh;
    z-index: 10;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }


/* 2. HEADER: [MENU | SITE NAME | SEARCH] */
.main-header {
    background: rgba(11, 13, 20, 0.95); /* Solidified background for speed */
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0; z-index: 1000; height: 65px;
    transform: translateZ(0); 
}

.header-inner {
    max-width: 1400px; margin: 0 auto; height: 100%;
    display: flex; justify-content: space-between; align-items: center; padding: 0 18px;
}

.menu-btn, .search-btn { cursor: pointer; display: flex; color: #fff; transition: var(--transition); }
.menu-btn svg, .search-btn svg { width: 24px; height: 24px; }
.menu-btn:hover, .search-btn:hover { color: var(--accent); transform: rotate(90deg) scale(1.1); }

.site-logo a {
    font-size: 22px; font-weight: 900; font-style: italic; text-transform: uppercase;
    letter-spacing: 2px; background: linear-gradient(to right, #fff, var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}


/* 3. SEARCH OVERLAY & RESULTS */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; 
    visibility: hidden; opacity: 0; transition: var(--transition);
    display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh;
}
.search-overlay.active { visibility: visible; opacity: 1; }
/* Replaced blur with solid color for mobile performance */
.search-overlay-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.98); }
.search-modal-box { position: relative; width: 90%; max-width: 600px; z-index: 2; transform: translateY(-40px) scale(0.9); transition: var(--transition); }
.search-overlay.active .search-modal-box { transform: translateY(0); }

#live-search-input {
    width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
    border-radius: 16px; padding: 20px 25px; color: #fff; font-size: 18px; outline: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

#search-results-box { margin-top: 15px; max-height: 50vh; overflow-y: auto; background: rgba(255,255,255,0.02); border-radius: 16px; }

/* 4. HOMEPAGE SECTIONS & 1-LINE HEADER */
.home-section-pro { margin: 0 auto 40px auto; max-width: 1400px; }

.section-head-pro {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 18px 20px; gap: 12px;
}

.head-left { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; }
.head-title { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }

.tab-triggers {
    display: flex; background: rgba(255, 255, 255, 0.04); padding: 4px; border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.tab-btn {
    background: transparent; border: none; color: #555;
    padding: 6px 14px; font-size: 12px; font-weight: 800; border-radius: 8px;
    cursor: pointer; transition: 0.3s;
}

.tab-btn.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3); }

/* TAB SWITCH (NO ANIMATIONS) */
.tab-pane { display: none; opacity: 1; }
.tab-pane.active { display: block; }

/* =========================================================
   BOTTOM FULL-WIDTH VIEW ALL BUTTON
   ========================================================= */
.section-footer-view-all {
    display: flex;
    justify-content: center;
    padding: 10px 18px 30px 18px;
    max-width: 1400px;
    margin: 0 auto;
}

.view-all-bottom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 400px; 
    padding: 14px 20px;
    background: rgba(155, 89, 182, 0.15); 
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.view-all-bottom-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(155, 89, 182, 0.3);
}

.view-all-bottom-btn svg { width: 16px; height: 16px; }

/* =========================================================
   🚀 NATIVE PAGINATION STYLING
   ========================================================= */
.at-pagination {
    margin: 40px auto 20px auto;
    text-align: center;
    padding: 0 18px;
}

.at-pagination ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.at-pagination li a, 
.at-pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #a1a1aa;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.3s ease;
    text-decoration: none;
}

.at-pagination li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.at-pagination li span.current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.4);
}


/* 6. ANIME CARD AESTHETIC - ENHANCED BORDERS & NO LAG */
.anime-card {
    background: #16191e;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); 
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transform: none !important; /* Strictly lock card wrapper structure in place */
    width: 100%; /* Safety lock */
    min-width: 0; /* Safety lock */
    -webkit-tap-highlight-color: transparent;
}

/* 🚀 REMOVED BORDER/SHADOW TRANSITIONS ON HOVER TO ELIMINATE LAG */

.anime-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Poster */
.poster-box {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #08090a;
    flex-shrink: 0;
}

.poster-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* 🚀 Image zooms inside the box, the card itself stays perfectly still */
.anime-card:hover .poster-box img {
    filter: brightness(0.6);
}

/* Play Icon Pop */
.play-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 15;
    transition: opacity 0.3s ease;
    pointer-events: none; 
}

.anime-card:hover .play-hover { opacity: 1; }

.play-btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #a855f7; 
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}

.anime-card:hover .play-btn-circle { transform: scale(1); }
.play-btn-circle svg { width: 24px; height: 24px; color: #fff; margin-left: 4px; }

/* Card Details */
.card-details {
    padding: 10px 12px;
    background: linear-gradient(to top, #16191e, rgba(22,25,30,0.8));
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0; 
    line-height: 1.3;
    min-height: 34px; 
    text-align: left;
}



/* 🚀 Hide badges completely on hover */
.anime-card:hover .badge {
    opacity: 0 !important;
}

/* 8. BADGES & NAVIGATION - 🚀 ULTRA-PREMIUM AMOLED & GLASSMORPHISM */
.badge {
    position: absolute; 
    z-index: 10; 
    font-size: 8.5px; /* Slightly refined text size */
    font-weight: 800;
    padding: 3px 10px; /* Reduced height, wider sides for a perfect pill shape */
    border-radius: 20px; /* Fully rounded pill shape */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Season/Episode & Movie Badge - AMOLED Rich Violet */
.se-badge { 
    top: 10px !important; 
    left: 10px !important; 
    background: rgba(124, 58, 237, 0.95) !important; /* Deep, highly saturated AMOLED Violet */
    color: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4) !important; /* Rich glowing ambient shadow */
}

/* Multi Audio Badge - Refined Frosted Glass */
.meta-badge { 
    bottom: 10px !important; 
    right: 10px !important; 
    background: rgba(255, 255, 255, 0.7) !important; /* True glass transparency */
    color: #0f172a !important; 
    border: 1px solid rgba(255, 255, 255, 0.4) !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; /* Soft, delicate shadow */
}

/* 1. FIX DOUBLE-CLICK BUG: Only apply hover animations on computers with a real mouse */
@media (hover: hover) and (pointer: fine) {
    .menu-btn:hover, .search-btn:hover { 
        color: var(--accent); 
        transform: rotate(90deg) scale(1.1); 
    }
}

/* 2. BULLETPROOF SIDE DRAWER */
.side-drawer {
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: -320px; 
    width: 300px; 
    background: #0d0f12; 
    z-index: 3000; 
    transition: transform 0.4s ease;
    box-shadow: 20px 0 60px rgba(0,0,0,0.8); 
    padding: 60px 25px 100px 25px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

.side-drawer.active { 
    transform: translateX(320px); 
}

body.menu-is-open {
    overflow: hidden !important;
}

/* FOOTER */
.site-footer { 
    text-align: center; 
    padding: 50px 20px; 
    border-top: 1px solid rgba(255,255,255,0.05); 
    color: #444; 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: 1px; 
}

/* SCROLLBAR */
::-webkit-scrollbar { 
    width: 5px; 
}

::-webkit-scrollbar-thumb { 
    background: var(--accent); 
    border-radius: 10px; 
}

/* MOBILE FONT SCALING */
@media (max-width: 480px) {
    .head-title { font-size: 17px; }
    .tab-btn { padding: 5px 10px; font-size: 10px; }
}

/* =========================================================
   🚀 THE HEARTBEAT V2 PRELOADER (SOLID BACKGROUND, PINNED TO TOP)
   ========================================================= */


/* 🚀 BULLETPROOF MOBILE OVERLAP FIX v2 (Centered Tabs) */

 @media (max-width: 450px) {
        #sa-top10-unique-header {
            flex-direction: column !important;
            align-items: flex-start !important;
        }
        #sa-top10-unique-header .at-top-tabs {
            width: 100% !important;
            display: flex !important;
            justify-content: center !important; /* Centers tabs on the second line */
        }
    }

/* =========================================================
   🚀 THE HEARTBEAT V2 PRELOADER (DIM & CROSSFADE - NO BLANK SPACE)
   ========================================================= */
.premium-tab-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Dims the old grid instead of a solid black curtain, fixing the blank space */
    background: rgba(17, 20, 26, 0.75); 
    z-index: 100;
    display: flex;
    align-items: flex-start; /* Pushes the heartbeat animation to the top */
    justify-content: center; /* Keeps it centered horizontally */
    padding-top: 80px; /* Puts it perfectly right below the tabs */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    border-radius: 14px;
}
.premium-tab-loader.is-loading { opacity: 1; visibility: visible; }

.heartbeat-loader {
    width: 150px;
    height: 50px;
}

.heartbeat-loader svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #a855f7;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: drawHeartbeat 1.1s linear infinite;
}

@keyframes drawHeartbeat {
    0% { stroke-dashoffset: 260; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -260; }
}

/* --- SKELETON PRELOADER STYLES --- */
.skeleton-grid {
    pointer-events: none;
    user-select: none;
}
.skeleton-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.skel-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: rgba(255, 255, 255, 0.04);
}
.skel-text {
    height: 18px;
    margin: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    width: 70%;
}

.skeleton-row {
    display: flex;
    align-items: center;
    background: rgba(20, 24, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 15px;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}
.skel-num {
    width: 45px; height: 50px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px; margin-right: 18px;
}
.skel-poster-small {
    width: 55px; height: 80px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px; margin-right: 18px;
}
.skel-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.skel-line { width: 80%; height: 14px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; }
.skel-line.short { width: 40%; height: 20px; }

/* Global Shimmer Animation - FIXED INFINITE LOOP */
.skeleton-card::after, .skeleton-row::after {
    content: ''; position: absolute; top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-20deg);
    animation: skelShimmer 1.5s linear infinite; /* Added 'linear' to force seamless infinite looping */
}
@keyframes skelShimmer { 
    0% { left: -150%; }
    100% { left: 250%; } 
}



/* --- SLEEK TEXT TABS (LATEST ANIMES) --- */
.at-text-tabs { display: flex; align-items: center; gap: 15px; }
.at-txt-tab {
    background: transparent; border: none; color: #888; font-size: 14px;
    font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 0; cursor: pointer; transition: 0.3s ease;
}
.at-txt-tab:hover { color: #fff; }
.at-txt-tab.active { color: #9b59b6; text-shadow: 0 0 10px rgba(155, 89, 182, 0.5); }

/* --- TOP 10 ANIMES TABS --- */
.at-top-tabs {
    display: flex; background: rgba(255, 255, 255, 0.04); padding: 4px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
}
.at-t-tab {
    background: transparent; border: none; color: #888; padding: 8px 16px;
    font-size: 13px; font-weight: 800; border-radius: 8px; cursor: pointer; transition: 0.3s ease;
}
.at-t-tab:hover { color: #fff; }
.at-t-tab.active { background: #9b59b6; color: #fff; box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4); }

/* --- AESTHETIC TOP 10 GRID --- */
.top-anime-section {
    padding: 0 15px !important;
    max-width: 1400px;
    margin: 0 auto 40px auto;
}

.top-10-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 20px;
}

@media (min-width: 900px) { .top-10-grid { grid-template-columns: repeat(2, 1fr); } }

.top-10-item {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(15, 17, 21, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 15px;
    text-decoration: none;
    overflow: hidden;
    min-height: 110px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* 🔥 The Ultimate Premium White Glass Hover */
.top-10-item::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    z-index: 10;
    pointer-events: none;
}

.top-10-item:hover {
    background: rgba(20, 24, 30, 0.95);
    border-color: #9b59b6;
    transform: translateY(-4px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(155, 89, 182, 0.2);
}

.top-10-item:hover::after {
    animation: ultimateShine 0.7s ease forwards;
}

@keyframes ultimateShine { 100% { left: 200%; } }

/* FIXED: Transparent outline for numbers matching your old screenshot exactly */
.top-number {
    font-size: 52px;
    font-weight: 900;
    -webkit-text-stroke: 1.5px #9b59b6;
    color: transparent;
    margin-right: 20px;
    min-width: 60px;
    text-align: center;
    font-family: 'Montserrat', 'Inter', sans-serif;
    letter-spacing: -2px;
    line-height: 1;
}

.top-poster {
    width: 55px; height: 80px; object-fit: cover;
    border-radius: 8px; margin-right: 18px; flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.top-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.top-info h3 {
    font-size: 14px; font-weight: 800; color: #fff; margin: 0 0 10px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.4;
}

.top-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.top-tags span {
    font-size: 9px; font-weight: 900; padding: 4px 8px;
    border-radius: 6px; text-transform: uppercase;
    letter-spacing: 0.5px; white-space: nowrap;
}



/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 


/* =========================================================
   SINGLE POST STYLES (OPTIMIZED & LIGHTWEIGHT)
   ========================================================= */

.post-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 15px;
}

.anime-single {
    background: var(--card); /* Solid background, no blur */
    border-radius: 20px;
    padding: 25px;
    border: 1px solid var(--border);
}

.anime-header-flex {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.anime-poster-large {
    position: relative;
    flex: 0 0 250px;
    border-radius: 15px;
    overflow: hidden;
    /* Reduced heavy shadow for better performance */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
}

.anime-poster-large img {
    width: 100%;
    height: auto;
    display: block;
}

.q-badge {
    position: absolute; 
    top: 15px; 
    right: 15px;
    background: var(--accent); 
    color: #fff;
    padding: 4px 10px; 
    border-radius: 6px; 
    font-weight: 800; 
    font-size: 11px;
}

.anime-info-box { flex: 1; }

.anime-main-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
}

.anime-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.m-item { font-size: 14px; color: #bbb; }
.m-item strong { color: #fff; margin-right: 5px; }
.m-item span { color: var(--accent); }

.genres-list a {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #eee;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: 0.3s;
}
.genres-list a:hover { background: var(--accent); }

/* SYNOPSIS */
.synopsis-section {
    border-top: 1px solid var(--border);
    padding-top: 25px;
}

.synopsis-section h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #f3e8ff;
    /* Reduced shadow for better text rendering performance */
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.synopsis-content {
    line-height: 1.8;
    color: #ccc;
    font-size: 15px;
}

.upcredit-box {
    margin-top: 30px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    font-size: 13px;
    color: #777;
    border: 1px dashed #333;
}

/* RESPONSIVE FOR MOBILE */
@media (max-width: 768px) {
    .anime-header-flex { flex-direction: column; align-items: center; text-align: center; }
    .anime-poster-large { flex: 0 0 auto; width: 200px; }
    .anime-meta-grid { grid-template-columns: 1fr; }
    .anime-main-title { font-size: 22px; }
}


/* =========================================================
   CINEMATIC SINGLE PAGE (OPTIMIZED)
   ========================================================= */
.cinematic-wrapper {
    position: relative;
    min-height: 100vh;
    padding: 40px 15px;
    z-index: 1;
}

/* Background Logic */
.hero-bg {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-size: cover; 
    background-position: center top;
    /* Lowered blur radius from 80px to 40px to reduce GPU strain */
    filter: blur(40px) saturate(1.2);
    transform: scale(1.1); /* Reduced scaling */
    opacity: 0.3; /* Slightly darker */
    z-index: -2;
    /* Hardware acceleration */
    will-change: transform;
}

.hero-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Simplified gradient to pure solid color with opacity for huge performance boost */
    background: rgba(11, 13, 16, 0.7); 
    z-index: -1;
}

.anime-content-area {
    max-width: 900px;
    margin: 0 auto;
}

/* Hero Section */
.hero-flex {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.hero-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.poster-container {
    position: relative;
    flex: 0 0 240px;
    border-radius: 16px;
    overflow: hidden;
    /* Reduced heavy box-shadow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Removed the poster scale animation on hover, it's unnecessary and uses CPU */
.main-poster { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.poster-badges {
    position: absolute; bottom: 10px; left: 0; width: 100%;
    display: flex; justify-content: center; gap: 5px;
}

.p-badge {
    font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 6px;
    /* Replaced backdrop-filter with solid color */
    background: rgba(0,0,0,0.9); 
}
.p-badge.quality { color: #00ffd5; border: 1px solid #00ffd5; }
.p-badge.type { color: #fff; }

.entry-title-pro {
    font-size: 32px; font-weight: 900; line-height: 1.2;
    margin-bottom: 20px; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.quick-stats { display: flex; gap: 20px; margin-bottom: 20px; }
.stat-box { background: rgba(255,255,255,0.05); padding: 10px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.stat-box span { display: block; font-size: 10px; color: #888; text-transform: uppercase; }
.stat-box strong { font-size: 18px; color: #fff; }

.genre-pills a {
    display: inline-block; background: var(--accent); color: #fff;
    padding: 6px 15px; border-radius: 50px; font-size: 12px; font-weight: 600;
    margin-right: 8px; margin-bottom: 8px; 
}


/* Glass Info Card (Optimized) */
.glass-info-card {
    /* Replaced backdrop-filter with solid color */
    background: #16191e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.info-quote-line {
    border-left: 4px solid #ff9d00;
    padding-left: 20px;
    margin-bottom: 30px;
}

.meta-row-pro { margin-bottom: 15px; font-size: 15px; display: flex; align-items: center; }
.label-pro { font-weight: 800; color: #888; margin-right: 15px; font-size: 12px; }
.value-pro { font-weight: 600; }
.neon-orange { color: #ff9d00; text-shadow: 0 0 5px rgba(255, 157, 0, 0.3); }
.neon-green { color: #00ff8c; text-shadow: 0 0 5px rgba(0, 255, 140, 0.3); }

.synopsis-pro h3 { font-size: 14px; letter-spacing: 2px; color: #555; margin-bottom: 15px; }
.synopsis-text { color: #ccc; line-height: 1.8; font-size: 16px; }

/* Spoiler Next Level */
.spoiler-section { margin-top: 40px; cursor: pointer; }
.spoiler-label { font-size: 11px; font-weight: 800; color: #555; display: block; margin-bottom: 10px; }
.spoiler-box-pro {
    background: rgba(255,255,255,0.02); border: 1px dashed #333;
    padding: 20px; border-radius: 15px; text-align: center; position: relative;
    overflow: hidden;
}
.spoiler-content-pro { filter: blur(12px); transition: 0.4s; display: block; color: var(--accent); font-weight: bold; }
.spoiler-content-pro.revealed { filter: blur(0); }
.tap-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #fff; }
.spoiler-content-pro.revealed + .tap-hint { opacity: 0; }

/* Responsive Spicy Stack */
@media (max-width: 768px) {
    .hero-flex { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .poster-container { flex: 0 0 auto; width: 200px; }
    .entry-title-pro { font-size: 24px; }
    .quick-stats { justify-content: center; }
}


/* =========================================================
   ACCORDION & SEASON STYLES
   ========================================================= */
.season-accordion {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    padding: 12px;
}

.season-block {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
}

.season-header {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 15px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.season-header:hover { background: rgba(255, 255, 255, 0.07); }

.header-left { display: flex; align-items: center; }

.s-poster-mini {
    width: 65px;
    height: 90px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Reduced shadow */
}
.s-poster-mini img { width: 100%; height: 100%; object-fit: cover; }

.s-info-text h3 {
    font-size: 22px;
    color: #f7e000;
    margin: 0;
    font-weight: 700;
}
.s-info-text p { font-size: 13px; color: #888; margin-top: 4px; }

/* SVG ARROW */
.arrow-svg {
    width: 24px;
    height: 24px;
    color: #555;
    transition: transform 0.3s ease; /* Simplified bezier curve */
}
.season-block.active .arrow-svg { transform: rotate(180deg); color: #f7e000; }

/* EPISODE DRAWER ANIMATION */
.ep-list-drawer {
    display: none;
    background: rgba(0, 0, 0, 0.4); /* Solidified background */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ep-row {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
}
.ep-row:hover { background: rgba(255, 255, 255, 0.05); }

.ep-row img {
    width: 90px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 20px;
}

.ep-info strong { font-size: 14px; font-weight: 500; transition: color 0.3s; }


/* --- WATCHED STATUS LOGIC --- */
.status-action { margin-left: auto; }

/* Simplified Watched Badge without Pulse Animation for CPU Savings */
.watched-badge {
    display: none;
    font-size: 11px;
    font-weight: 800;
    color: #4ade80; 
    text-transform: uppercase;
}

/* When watched... */
.ep-row.is-watched .ep-info strong { color: #555 !important; } 
.ep-row.is-watched .watch-btn { display: none !important; }
.ep-row.is-watched .watched-badge { display: block !important; }


.watch-btn {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.watch-btn:hover { background: #f7e000; color: #000; border-color: #f7e000; }

/* TRUNCATION LOGIC */
.ep-info { flex: 1; min-width: 0; }
.ep-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

/* SYNOPSIS MORE LINK */
.syn-more { color: #ff9d00 !important; font-weight: 800 !important; margin-left: 5px; }

/* MISC FIXES */
.ep-content-text { color: #aaa; font-size: 14px; margin-top: 15px; }


a { text-decoration: none; color: inherit; transition: var(--transition); }

.ep-main-wrapper { max-width: 1000px; margin: 30px auto; padding: 0 15px; position: relative; z-index: 1; }

/* 1. BI-COLOR TITLE (Next Level Typography) */
.ep-main-title { 
    font-size: 28px; 
    font-weight: 900; 
    margin-bottom: 22px; 
    line-height: 1.1; 
    letter-spacing: -0.8px; 
    text-rendering: optimizeLegibility;
}
.title-accent { 
    color: var(--gold); 
    text-shadow: 0 0 15px rgba(247, 224, 0, 0.4), 0 0 2px rgba(247, 224, 0, 0.2); 
}
.title-main { 
    color: #ffffff; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 2. ANIMATED META ICONS */
.ep-meta-row-animated { 
    display: flex; 
    gap: 25px; 
    margin-bottom: 25px; 
    padding-left: 5px; 
    align-items: center;
}
.meta-item-box { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    color: #94a3b8; 
    font-weight: 600; 
    transition: all 0.3s ease;
}
.meta-item-box:hover { color: #fff; transform: translateY(-1px); }
.meta-item-box strong { color: #fff; font-size: 15px; letter-spacing: 0.3px; }

.icon-star { 
    width: 20px; 
    height: 20px; 
    color: var(--gold); 
    filter: drop-shadow(0 0 5px rgba(247, 224, 0, 0.3));
    animation: starPulse 2.5s ease-in-out infinite; 
}
@keyframes starPulse { 
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--gold)); } 
    50% { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--gold)); } 
}

.icon-clock { width: 20px; height: 20px; color: #4ade80; filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.2)); }
.icon-clock polyline { animation: clockMove 5s linear infinite; transform-origin: 12px 12px; }
@keyframes clockMove { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 3. PREMIUM DOWNLOAD BUTTONS (Centered & Shimmering) */
.dl-flex-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 35px; }
.dl-btn-premium {
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%); 
    border: 1px solid rgba(255, 255, 255, 0.12); 
    padding: 15px 35px; 
    border-radius: 50px; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 13px; 
    color: #fff;
    letter-spacing: 1px;
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    min-width: 240px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
}

.dl-btn-premium:hover { 
    border-color: var(--accent); 
    box-shadow: 0 12px 35px rgba(155, 89, 182, 0.4), inset 0 1px 1px rgba(255,255,255,0.2); 
    transform: translateY(-6px); 
    color: #fff;
}

/* Shimmer Streak */
.dl-btn-premium::after {
    content: ''; 
    position: absolute; 
    top: -50%; 
    left: -120%; 
    width: 40%; 
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); 
    transform: rotate(30deg); 
    transition: 0.7s;
}
.dl-btn-premium:hover::after { left: 150%; }






/* --- 1. TITLE ICON ANIMATION (Cascading Flow - Indicates Down) --- */
.title-icon-anim svg { 
    width: 28px; 
    height: 28px; 
    color: var(--accent); 
    filter: drop-shadow(0 0 5px var(--accent));
    /* Smooth continuous flow pointing downward */
    animation: titleDownFlow 2s linear infinite;
}

@keyframes titleDownFlow {
    0% { transform: translateY(-10px); opacity: 0; }
    20% { transform: translateY(-5px); opacity: 1; }
    80% { transform: translateY(5px); opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}

/* --- 2. BUTTON ICON ANIMATION (Radiant Heartbeat - Unique & No Jumping) --- */
.dl-icon-anim svg { 
    width: 22px; 
    height: 22px; 
    color: var(--accent); 
    /* The icon stays in place but "breathes" with light and scale */
    animation: radiantHeartbeat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--accent));
    transition: filter 0.3s ease;
}

@keyframes radiantHeartbeat {
    0% { 
        transform: scale(1); 
        filter: drop-shadow(0 0 2px var(--accent)) brightness(1);
    }
    50% { 
        transform: scale(1.12); 
        filter: drop-shadow(0 0 15px var(--accent)) brightness(1.3);
    }
    100% { 
        transform: scale(1); 
        filter: drop-shadow(0 0 2px var(--accent)) brightness(1);
    }
}

/* Vertical alignment for the icons inside the container */
.title-icon-anim, .dl-icon-anim {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* 4. STICKY TOP WATCHED RIBBON (Rounded Bottom Fix) */
.thumb-wrap { 
    position: relative; width: 95px; height: 55px; overflow: hidden; 
    border-radius: 10px; flex-shrink: 0; border: 1px solid var(--glass-border); 
}
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

.watched-ribbon {
    position: absolute; top: 0; left: 0; width: 100%; height: 15px; 
    background: var(--red); display: none; z-index: 5; overflow: hidden;
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.watched-ribbon span {
    position: relative; z-index: 2; display: block; width: 100%; text-align: center;
    font-size: 8px; font-weight: 900; color: #fff; letter-spacing: 1.5px;
    line-height: 15px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* All-Time Glow Flow on Ribbon */
.watched-ribbon::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-25deg); animation: continuousGlowFlow 2.5s infinite linear;
}
@keyframes continuousGlowFlow { 0% { left: -100%; } 100% { left: 150%; } }

.ep-row-premium.is-watched .watched-ribbon { display: block; }
.ep-row-premium.is-watched strong { color: #444 !important; opacity: 0.6; }


/* 5. RECTANGULAR SEASON GRID (Ambient Blur) */
.season-grid-cinematic { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 18px; 
    margin-top: 25px; 
    align-items: stretch; /* Ensures cards in the same row match the height of the tallest card */
}

.season-card-rect {
    position: relative; 
    width: calc(50% - 10px); 
    min-height: 90px; /* Changed from fixed 'height' to 'min-height' to allow expansion */
    padding: 15px 10px; /* Added padding so text doesn't hit the top/bottom edges */
    box-sizing: border-box; /* Critical: keeps the width calculation accurate even with padding */
    background: var(--card); 
    border-radius: 16px; 
    overflow: hidden;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 1px solid var(--glass-border); 
    transition: var(--transition);
}

.season-card-rect:hover { 
    border-color: var(--gold); 
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.6); 
}

.season-card-rect:last-child:nth-child(odd) { 
    margin: 0 auto; 
}

.s-bg-blur {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; /* Background will now properly stretch to the new dynamic height */
    background-size: cover; 
    background-position: center;
    filter: blur(12px) brightness(0.3); 
    transform: scale(1.2);
}

.s-label { 
    position: relative; 
    z-index: 2; 
    font-size: 13.5px; /* Scaled down slightly from 16px to prevent massive text blocks */
    font-weight: 900; 
    color: #fff; 
    letter-spacing: 1px; /* Reduced from 2px to save horizontal space */
    text-transform: uppercase; 
    text-align: center; /* Ensures multi-line text is perfectly centered */
    line-height: 1.4; /* Adds clean breathing room between lines of text */
}

@media (min-width: 1024px) { 
    .season-card-rect { 
        width: calc(25% - 15px); 
        min-height: 110px; /* Also changed to min-height for desktop */
    } 
}




/* --- EPISODE NUMBER SEARCH BAR (PURPLE GLASS THEME) --- */
.ep-search-container {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.ep-search-icon-left {
    position: absolute;
    left: 20px;
    width: 20px;
    height: 20px;
    color: rgba(181, 53, 246, 0.7); 
    pointer-events: none; 
    transition: all 0.4s ease;
    z-index: 2;
}

.ep-search-input {
    width: 100%;
    background: rgba(181, 53, 246, 0.05); 
    border: 1px solid rgba(181, 53, 246, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; 
    padding: 18px 50px 18px 50px; 
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 10px rgba(181, 53, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

.ep-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.ep-search-input:hover {
    background: rgba(181, 53, 246, 0.08);
    border-color: rgba(181, 53, 246, 0.5);
}

.ep-search-input:focus {
    border-color: #b535f6; 
    background: rgba(181, 53, 246, 0.08);
    box-shadow: 0 0 25px rgba(181, 53, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px); 
}

.ep-search-input:focus ~ .ep-search-icon-left {
    color: #b535f6;
    filter: drop-shadow(0 0 5px rgba(181, 53, 246, 0.6));
    transform: scale(1.1);
}

.ep-search-input::-webkit-outer-spin-button,
.ep-search-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ep-search-clear {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
    z-index: 2;
}

.ep-search-clear:hover {
    color: #fff;
    transform: scale(1.15);
    background: rgba(181, 53, 246, 0.5);
    box-shadow: 0 0 15px rgba(181, 53, 246, 0.5);
}

.ep-search-clear svg { width: 18px; height: 18px; }

/* --- NEW: DYNAMIC AUTO-RESIZING SCROLL CONTAINER --- */
.ep-scroll-wrapper {
    /* Changed to max-height! It will shrink if there's only 1 episode, but scroll if there are many */
    max-height: 440px; 
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Matches the resting background and border of the search box perfectly */
    background: rgba(181, 53, 246, 0.05);
    border: 1px solid rgba(181, 53, 246, 0.3);
    border-radius: 16px;
    padding: 15px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 10px rgba(181, 53, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    -webkit-overflow-scrolling: touch;
    
    /* Smooth height transition when resizing */
    transition: all 0.3s ease; 
}


.ep-list-drawer-cinematic {
    display: flex;
    flex-direction: column;
    gap: 12px; 
}

/* --- 3 DOTS LOADER --- */
.ep-search-loader {
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px 0; /* Centers it beautifully inside the auto-sized wrapper */
    height: auto;
}

.ep-search-loader .dot {
    width: 10px;
    height: 10px;
    background-color: #b535f6;
    border-radius: 50%;
    animation: epBlink 1.4s infinite both;
    box-shadow: 0 0 12px rgba(181, 53, 246, 0.6);
}

.ep-search-loader .dot:nth-child(1) { animation-delay: -0.32s; }
.ep-search-loader .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes epBlink {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.3); }
}

/* --- NO RESULTS MESSAGE --- */
.ep-search-no-results {
    text-align: center;
    color: #ccc;
    font-size: 15px;
    font-weight: 600;
    padding: 40px 20px; /* Big padding inside the wrapper to look prominent */
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ep-search-no-results svg {
    width: 38px;
    height: 38px;
    color: #b535f6;
    filter: drop-shadow(0 0 8px rgba(181, 53, 246, 0.5));
}

/* --- CUSTOM PREMIUM SCROLLBAR FOR THE WRAPPER --- */
.ep-scroll-wrapper::-webkit-scrollbar { width: 6px; }
.ep-scroll-wrapper::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.ep-scroll-wrapper::-webkit-scrollbar-thumb { background: rgba(181, 53, 246, 0.4); border-radius: 10px; }
.ep-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(181, 53, 246, 0.9); }

/* --- RESPONSIVE MOBILE OPTIMIZATION --- */
@media (max-width: 480px) {
    .ep-search-input { padding: 15px 45px 15px 45px; font-size: 14px; border-radius: 14px; }
    .ep-search-icon-left { left: 15px; width: 18px; height: 18px; }
    .ep-search-clear { right: 12px; padding: 6px; }
    .ep-search-clear svg { width: 16px; height: 16px; }
    
    .ep-scroll-wrapper { max-height: 380px; padding: 12px; } /* Max-height for auto-resize */
    .ep-scroll-wrapper::-webkit-scrollbar { width: 4px; }
}





/* 6. EPISODE ROWS (Line Breaking & Sexy Hover) */
.ep-list-drawer-cinematic { display: grid; gap: 12px; margin-top: 20px; }
.ep-row-premium { 
    display: flex; align-items: center; gap: 18px; padding: 12px; 
    background: rgba(255,255,255,0.02); border-radius: 14px; 
    border: 1px solid var(--glass-border); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
.ep-row-premium:hover { background: rgba(155, 89, 182, 0.1); border-color: var(--accent); transform: translateX(5px); }

.ep-info-wrap { flex: 1; min-width: 0; }
.ep-row-premium strong { display: block; font-size: 14px; color: #eee; white-space: normal; word-wrap: break-word; line-height: 1.4; font-weight: 600; }

/* 7. CINEMATIC PLAYER & TABS */

/* --- CINEMATIC PLAYER CONTAINER & LOADER --- */
.player-container { 
    position: relative !important;
    background: #000; 
    border-radius: 24px; 
    overflow: hidden; 
    margin-bottom: 30px; 
    border: 1px solid var(--glass-border); 
    box-shadow: 0 0 50px rgba(155, 89, 182, 0.15); 
}

.player-container iframe { 
    width: 100%; 
    aspect-ratio: 16/9; 
    display: block; 
    position: relative;
    z-index: 2;
    opacity: 0; /* Hidden until loaded */
    transition: opacity 0.8s ease;
}

/* THE SEXY PRELOADER */
.player-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #08090a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 5;
    transition: 0.5s;
}

.loader-aura {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(155, 89, 182, 0.1);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: auraSpin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
    position: relative;
}

.loader-aura::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    background: var(--accent);
    border-radius: 50%;
    filter: blur(10px);
    animation: auraPulse 2s ease-in-out infinite;
}

@keyframes auraSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes auraPulse { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); } 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); } }

.loader-text {
    margin-top: 20px;
    color: #444;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: textFlicker 2s infinite;
}

@keyframes textFlicker { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Show iframe class */
.iframe-loaded iframe { opacity: 1; }
.iframe-loaded .player-loader { opacity: 0; pointer-events: none; }



.server-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; justify-content: center; }
.srv-btn { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); color: #777; padding: 10px 25px; border-radius: 14px; cursor: pointer; font-weight: 700; font-size: 13px; transition: 0.3s; }
.srv-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.srv-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4); }

/* 8. NAVIGATION BUTTONS */
.ep-nav-flex { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
.nav-btn { background: rgba(30, 41, 59, 0.5); border: 1px solid var(--glass-border); color: #fff; padding: 12px 35px; border-radius: 50px; font-weight: 800; transition: 0.3s; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.nav-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.05); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

/* MOBILE FONT TWEAKS */
@media (max-width: 480px) {
    .ep-main-title { font-size: 20px; }
    .nav-btn { padding: 10px 20px; font-size: 11px; }
    .dl-btn-premium { width: 100%; min-width: auto; font-size: 11px; }
    .season-card-rect { height: 75px; }
    .s-label { font-size: 13px; }
}


/* --- FIX: PREVENT TEXT OVERLAP WITH LOADER --- */
#live-search-input { 
    /* 65px on left for Search Icon | 60px on right for Loader Spinner */
    padding: 18px 60px 18px 65px !important; 
}

/* Ensure the loader stays centered and visible */
.search-loader {
    right: 22px !important;
    z-index: 30 !important;
}

/* Ensure the search icon stays centered and visible */
.search-input-icon {
    left: 22px !important;
    z-index: 30 !important;
}


/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/* READ MORE LINK STYLE */
.ep-content-text a {
    color: #ff9d00 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
}
.ep-content-text a:hover { text-decoration: underline !important; }

/* HOLD TO REVEAL TRANSITION */
.blur-text {
    filter: blur(12px) !important;
    transition: filter 0.1s linear !important; /* Instant transition */
    user-select: none !important;
}
.blur-text.revealed {
    filter: blur(0) !important;
}

/* SIDEBAR/EPISODE ALIGNMENT */
.ep-row strong {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* 1. MAIN CONTAINER SPACING */
.season-accordion {
    margin: 20px auto !important;
    padding: 10px !important;
    max-width: 100% !important;
}

/* 2. SEASON HEADER FIXES (POSTER -> TEXT -> ARROW) */
.season-block {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 14px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

.season-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 20px !important;
    cursor: pointer !important;
}

.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.s-poster-mini {
    width: 55px !important;
    height: 80px !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    flex-shrink: 0 !important;
}

.s-info-text h3 {
    font-size: 22px !important;
    color: #f7e000 !important; /* Sexy Yellow */
    margin: 0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.s-info-text p {
    color: #888 !important;
    font-size: 13px !important;
    margin: 5px 0 0 !important;
}

.header-right .arrow-svg {
    width: 22px !important;
    color: #555 !important;
    transition: transform 0.4s ease !important;
}

/* 3. EPISODE ROW ALIGNMENT & TEXT TRUNCATION */
.ep-list-drawer {
    background: rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ep-row {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    text-decoration: none !important;
    transition: background 0.3s !important;
}

.ep-row:hover { background: rgba(255, 255, 255, 0.05) !important; }

.ep-row img {
    width: 85px !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

.ep-info {
    flex: 1 !important;
    min-width: 0 !important; /* Allows truncation to work */
}

.ep-info strong {
    font-size: 13px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Fixes the long title issue in your screenshot */
    display: block !important;
}

/* 4. WATCH BUTTON / WATCHED BADGE POSITION */
.status-action {
    margin-left: 10px !important;
    flex-shrink: 0 !important;
}

.watch-btn {
    background: #252a31 !important;
    color: #eee !important;
    border: 1px solid #3b424d !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* 5. RESPONSIVE ADJUSTMENTS */
@media (max-width: 600px) {
    .s-info-text h3 { font-size: 18px !important; }
    .s-poster-mini { width: 45px !important; height: 65px !important; }
    .ep-row img { width: 70px !important; }
    .ep-info strong { font-size: 12px !important; }
    .watch-btn { padding: 4px 12px !important; font-size: 10px !important; }
}

/* 6. SEXY ANIMATION FOR ACCORDION */
.season-block.active .arrow-svg {
    transform: rotate(180deg) !important;
    color: #f7e000 !important;
}

.season-block.active {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(247, 224, 0, 0.2) !important;
}



/* FIX UPCREDIT ALIGNMENT AND REMOVE TOP GAP */
.meta-row-pro.spoiler-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: unset !important;
}

#reveal-trigger.meta-row-pro {
    margin-bottom: 12px !important; /* Matches the spacing of rows above */
}

/* Ensure label and blurred text are on the same line */
.meta-row-pro.spoiler-section .label-pro {
    margin-top: 0 !important;
}


/* --- FIX GIANT SVG LOADING BUG --- */

/* 1. Force the Back Button icon to stay small immediately */
.back-info-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* 2. Force Meta Icons (Star, Clock, Quality) to stay small */
.ep-meta-row-animated svg, 
.meta-item-box svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* 3. Global safety net for all SVGs in the content area */
.ep-main-wrapper svg {
    max-width: 50px !important; /* Prevents them from filling the screen */
    max-height: 50px !important;
}

/* 4. Ensure the container doesn't jump */
.back-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 150px !important;
    height: 24px !important;
}


/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/* --- PAGINATION STYLES --- */
.pagination-container {
    margin: 50px auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.pagination-container .page-numbers {
    background: #16191e !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    color: #888 !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: 0.3s !important;
    display: inline-flex !important;
    align-items: center !important;
}

.pagination-container .page-numbers:hover {
    background: rgba(155, 89, 182, 0.1) !important;
    color: #fff !important;
    border-color: #9b59b6 !important;
}

.pagination-container .page-numbers.current {
    background: #9b59b6 !important;
    color: #fff !important;
    border-color: #9b59b6 !important;
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4) !important;
}

.pagination-container .page-numbers svg {
    display: block !important;
}

/* --- ANIME PRO ULTRA: ARCHIVE HEADER (V15 FINAL FIX) --- */

.pro-section-header-v2 {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 55px auto 35px !important;
    padding: 0 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

/* ================= HEADER ================= */

.header-main-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    animation: fadeUp 0.7s ease !important;
}

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

/* ================= ICON ================= */

.icon-aura-v2 {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;

    background: #0f1014 !important;

    border: 2px solid transparent !important;
    background-image: linear-gradient(#0f1014, #0f1014),
                      linear-gradient(135deg, #7c4dff, #ff2e63, #00d2ff) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;

    box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
}

/* ✅ SVG FIX (IMPORTANT) */
.icon-aura-v2 svg {
    width: 28px !important;
    height: 28px !important;

    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2 !important;

    /* REMOVE BROKEN DASH ISSUE */
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;

    opacity: 1 !important;
}

/* ================= TEXT ================= */

.title-text-group-v2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.dynamic-pro-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255,255,255,0.6) !important;
}

.main-pro-title-v2 {
    font-size: clamp(26px, 5vw, 42px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}

/* ================= SEPARATOR (MAIN FIX) ================= */

.pro-full-separator {
    width: 100% !important;
    height: 3px !important;

    /* ❗ SHARP EDGES */
    border-radius: 0 !important;

    position: relative !important;
    overflow: hidden !important;

    background: #111 !important;
}

/* 🔥 MAIN MOVING 3 COLOR LINE */
.pro-full-separator::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background: linear-gradient(
        90deg,
        #7c4dff,
        #ff2e63,
        #00d2ff,
        #7c4dff
    ) !important;

    background-size: 300% 100% !important;

    /* ALWAYS RUNNING */
    animation: ultraFlow 1.5s linear infinite !important;
}

/* 🔥 STRONG GLOW */
.pro-full-separator::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background: linear-gradient(
        90deg,
        #7c4dff,
        #ff2e63,
        #00d2ff
    ) !important;

    filter: blur(8px) !important;
    opacity: 0.9 !important;
}

/* 🚀 FAST SMOOTH FLOW */
@keyframes ultraFlow {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* ================= HOVER ================= */

@media (min-width: 1024px) {
    .pro-section-header-v2:hover .icon-aura-v2 {
        transform: scale(1.05) !important;
    }

    .pro-section-header-v2:hover .pro-full-separator::before {
        animation-duration: 0.8s !important;
    }
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {
    .pro-section-header-v2 { margin: 30px auto 20px !important; }

    .header-main-content { gap: 14px !important; }

    .icon-aura-v2 {
        width: 50px !important;
        height: 50px !important;
    }

    .icon-aura-v2 svg {
        width: 22px !important;
        height: 22px !important;
    }

    .main-pro-title-v2 {
        font-size: 24px !important;
    }

    .dynamic-pro-label {
        font-size: 9px !important;
        letter-spacing: 1.5px !important;
    }
}


/* --- RECOMMENDATIONS SLIDER - PRO FIX --- */
.reco-section {
    margin-top: 60px !important;
    padding: 0 15px !important;
    position: relative !important;
    z-index: 100 !important; /* Fixed: Now stays in front of background */
}

.reco-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
}

.reco-icon { 
    width: 22px !important; 
    height: 22px !important; 
    color: #ff2e63 !important; 
    filter: drop-shadow(0 0 5px rgba(255, 46, 99, 0.4)) !important;
}

.reco-header h3 { 
    font-size: 19px !important; 
    font-weight: 800 !important; 
    letter-spacing: -0.5px !important;
    color: #fff !important; 
}

/* SLIDER CORE FIX */
.reco-slider {
    display: flex !important;
    gap: 15px !important;
    overflow-x: auto !important;
    padding-bottom: 25px !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
}

.reco-slider::-webkit-scrollbar { display: none !important; }

.reco-item {
    flex: 0 0 140px !important; /* Fixed width mobile */
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 1024px) {
    .reco-item { flex: 0 0 190px !important; }
}

/* FORCE UNIFORM POSTER HEIGHT */
.reco-poster {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important; /* Strict vertical ratio */
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #000 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}

.reco-poster img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; /* Prevents image stretching */
    transition: transform 0.5s ease !important;
}

.reco-item:hover .reco-poster img {
    transform: scale(1.1) !important;
}

/* FIX TITLE MISALIGNMENT */
.reco-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Max 2 lines */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-top: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    text-align: center !important;
    line-height: 1.4 !important;
    height: 36px !important; /* Fixed height for text area */
}

.reco-item:hover .reco-title {
    color: #fff !important;
}

/* GLASS OVERLAY ON HOVER */
.reco-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(155, 89, 182, 0.3) !important; /* Glassy purple */
    display: flex !important; align-items: center; justify-content: center;
    opacity: 0 !important; transition: 0.3s !important;
    backdrop-filter: blur(2px) !important;
}

.reco-item:hover .reco-overlay { opacity: 1 !important; }
.reco-overlay svg { width: 40px !important; height: 40px !important; color: #fff; }

/* DOTS INDICATOR STYLING */
.reco-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
}

.reco-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s ease !important;
}

.reco-dot.active {
    width: 20px !important; /* Stretched pill look */
    background: var(--accent) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 8px var(--accent) !important;
}


/* --- FIX MASSIVE GAP ABOVE FOOTER --- */
.site-main {
    min-height: auto !important; 
    padding-bottom: 0 !important; 
}

/* --- PREMIUM GLASS FOOTER A-Z --- */
.glass-footer {
    position: relative !important;
    margin-top: 30px !important;
    padding: 40px 20px 40px !important;
    background: rgba(11, 13, 16, 0.7) !important; 
    backdrop-filter: blur(25px) !important; 
    -webkit-backdrop-filter: blur(25px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 100 !important;
    transform: translateZ(0) !important; /* Prevents background flicker on scroll */
    clear: both !important;
}

.footer-inner-pro {
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.footer-label-pro {
    display: block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    color: var(--accent) !important;
    margin-bottom: 25px !important;
}

/* A-Z PILLS - OPTIMIZED FOR 0 LAG */
.az-grid-pro {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 50px !important;
}

.az-link-pro {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important; /* Upgraded to modern rounded squares for better text fitting */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    line-height: 1 !important; /* Perfect vertical centering */
    text-transform: uppercase !important;
    
    /* Hardware accelerated transition, strictly targeting specific properties for 0 lag */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    will-change: transform, box-shadow !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* THE BUG FIX: Automatically hides empty boxes to prevent ugly gaps */
.az-link-pro:empty {
    display: none !important;
}

/* Desktop Hover */
@media (hover: hover) {
    .az-link-pro:hover {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
        transform: scale(1.1) translateY(-3px) !important; /* Smoothed out hover jump */
        box-shadow: 0 5px 20px rgba(155, 89, 182, 0.4) !important;
    }
}

/* Active State & Mobile Tap Feedback */
.az-link-pro.is-active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 5px 20px rgba(155, 89, 182, 0.5) !important;
    color: #ffffff !important;
}

.az-link-pro:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
}

/* DYNAMIC PAGES */
.footer-nav-pages {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
}

.footer-nav-pages a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

.footer-nav-pages a:hover {
    opacity: 1 !important;
    color: var(--accent) !important; 
}

.nav-sep {
    color: rgba(255,255,255,0.1) !important;
}

/* HIGH-VISIBILITY DISCLAIMER */
.footer-disclaimer-pro {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 30px !important;
    border-radius: 16px !important; /* Modern rounded corners */
    max-width: 850px !important;
    margin: 0 auto 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* Premium outer drop-shadow */
}

.footer-disclaimer-pro p {
    color: #e2e8f0 !important; 
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.footer-disclaimer-pro strong {
    color: #fff !important;
    font-weight: 900 !important;
}

.brand-glow {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.4) !important;
}

/* MOBILE FIX */
@media (max-width: 480px) {
    .az-grid-pro {
        gap: 6px !important; /* Tighter spacing so they fit beautifully */
    }
    .az-link-pro { 
        width: 32px !important; 
        height: 32px !important; 
        font-size: 12px !important; 
    }
    .footer-nav-pages { 
        gap: 10px !important; 
    }
    .footer-disclaimer-pro { 
        padding: 20px !important; 
        border-radius: 12px !important;
    }
    .footer-disclaimer-pro p { 
        font-size: 12px !important; 
        line-height: 1.6 !important; 
    }
}



/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/* --- STYLISH 404 PAGE CSS --- */
.error-404-wrapper {
    min-height: 70vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
}

.error-content {
    max-width: 500px !important;
}

/* SVG Ghost Animation */
.error-svg-container {
    margin-bottom: 30px !important;
}

.ghost-svg {
    width: 150px !important;
    height: 150px !important;
    animation: ghostFloat 3s ease-in-out infinite !important;
}

@keyframes ghostFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Glitch Effect for 404 Text */
.glitch {
    font-size: 100px !important;
    font-weight: 900 !important;
    color: #fff !important;
    position: relative !important;
    display: inline-block !important;
    letter-spacing: 5px !important;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.8;
}

.glitch::before {
    color: var(--accent);
    z-index: -1;
    animation: glitchAnim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch::after {
    color: var(--gold);
    z-index: -2;
    animation: glitchAnim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

@keyframes glitchAnim {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 3px); }
    40% { transform: translate(-3px, -3px); }
    60% { transform: translate(3px, 3px); }
    80% { transform: translate(3px, -3px); }
    100% { transform: translate(0); }
}

.error-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

.error-desc {
    color: #888 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
}

@media (max-width: 480px) {
    .glitch { font-size: 70px !important; }
    .error-title { font-size: 18px !important; }
}



/* --- CONTINUE WATCHING & HISTORY PRO CSS V5 (SLIDER + GRID) --- */

/* 1. SECTION HEADER ICONS */
.history-actions {
    display: flex;
    gap: 12px;
}

.history-tool-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #888 !important;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-tool-btn svg { width: 20px; height: 20px; stroke-width: 2.2; }

.history-tool-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3);
}

#btn-history-clear:hover { 
    background: #ef4444 !important; 
    border-color: #ef4444 !important; 
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
}

/* 2. HISTORY CARD & DATE BADGE */
.history-card { position: relative; }

.history-date-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 12;
}

.history-date-badge svg { width: 12px; height: 12px; color: var(--accent); }
.history-date-badge span { font-size: 10px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }


/* --- HOMEPAGE SLIDER ENGINE --- */
.history-slider-track {
    display: flex !important;
    gap: 15px;
    overflow-x: auto;
    /* Reduced bottom padding to 5px to minimize gap */
    padding: 10px 18px 5px !important; 
    margin-bottom: 0 !important;
    /* Ensures the snap-to-grid logic respects the side gaps */
    scroll-padding-inline: 18px; 
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
    scroll-snap-type: x mandatory;
}

.history-slider-track::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

.history-slider-track .history-card {
    flex: 0 0 160px; /* Width on Mobile */
    scroll-snap-align: start;
}

/* Fix: Ensures the right-side gap works at the very end of the scroll */
.history-slider-track::after {
    content: '';
    padding-right: 1px;
}

@media (min-width: 768px) {
    .history-slider-track {
        gap: 20px;
        /* Reduced bottom padding for PC */
        padding: 10px 25px 10px !important;
        scroll-padding-inline: 25px;
    }
    .history-slider-track .history-card { 
        flex: 0 0 210px; 
    }
}

/* --- CIRCULAR VIEW ALL BUTTON (SLIDER END) --- */
.history-circle-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.history-circle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}

.circle-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circle-icon svg { width: 28px; height: 28px; }

.history-circle-btn span {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 1.2px;
    transition: 0.3s;
}

.history-circle-btn:hover .circle-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.15) rotate(90deg);
    border-color: var(--accent);
    box-shadow: 0 0 25px rgba(155, 89, 182, 0.5);
}

.history-circle-btn:hover span { color: #fff; transform: translateY(3px); }


/* --- ULTIMATE SELECTION UI --- */
.history-select-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(8, 10, 12, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 99999 !important;
    display: none; 
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition);
}

body.history-selection-active .history-select-overlay { display: flex !important; animation: glassFade 0.4s ease; }
body.history-selection-active .history-card a { pointer-events: none !important; }
body.history-selection-active .history-card .play-hover { display: none !important; }

.custom-check-wrapper {
    position: relative !important;
    width: 55px;
    height: 55px;
    pointer-events: none;
}

.history-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.check-mark-styled {
    position: absolute !important;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.history-checkbox:checked ~ .check-mark-styled {
    background: #ef4444 !important;
    border-color: #ffffff !important;
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
}

.check-mark-styled:after {
    content: "";
    position: absolute;
    display: none;
    width: 12px;
    height: 22px;
    border: solid white;
    border-width: 0 4.5px 4.5px 0;
    transform: rotate(45deg);
    margin-top: -3px;
}

.history-checkbox:checked ~ .check-mark-styled:after {
    display: block;
    animation: checkAnim 0.3s ease-in-out forwards;
}

@keyframes glassFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes checkAnim {
    from { transform: scale(0) rotate(0deg); opacity: 0; }
    to { transform: scale(1) rotate(45deg); opacity: 1; }
}


/* 4. CENTERED FOOTER BUTTONS (History Page) */
.history-buttons-footer {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.history-buttons-footer .view-all-btn {
    padding: 12px 40px !important;
    font-size: 13px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid var(--glass-border);
}


/* 5. FIXED FLOATING DELETE BAR */
.history-float-wrap {
    position: fixed !important;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    z-index: 99999;
    width: auto;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.history-float-wrap.show { transform: translateX(-50%) translateY(0); }

.history-del-btn-pro {
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 16px 45px;
    border-radius: 100px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.5);
    text-transform: uppercase;
    white-space: nowrap;
}


/* 6. MODAL STYLING */
.h-modal-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100000;
    display: none; 
    align-items: center;
    justify-content: center;
}

.h-modal-box {
    background: #111418;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
}

.h-modal-box h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.h-modal-box p { color: #9ca3af; font-size: 15px; margin-bottom: 30px; line-height: 1.6; }

.h-modal-btns { display: flex; gap: 15px; }
.h-btn-confirm { background: #ef4444; color: #fff; flex: 1; padding: 14px; border-radius: 12px; font-weight: 800; border: none; cursor: pointer; transition: 0.3s; }
.h-btn-cancel { background: #262b32; color: #fff; flex: 1; padding: 14px; border-radius: 12px; font-weight: 800; border: none; cursor: pointer; transition: 0.3s; }




/* 7. RESPONSIVE FIXES */
@media (max-width: 480px) {
    .history-float-wrap { bottom: 20px; width: 90%; }
    .history-del-btn-pro { width: 100%; font-size: 12px; padding: 14px; }
    .h-modal-box { padding: 25px; }
    .history-date-badge { padding: 2px 6px; left: 5px; bottom: 5px; }
    .history-date-badge span { font-size: 8px; }
    .custom-check-wrapper { width: 35px; height: 35px; }
    .check-mark-styled { width: 35px; height: 35px; border-width: 2px; }
    .check-mark-styled:after { left: 11px; top: 6px; width: 6px; height: 13px; }
    .circle-icon { width: 50px; height: 50px; }
    .circle-icon svg { width: 22px; height: 22px; }
}

@media (min-width: 1024px) {
    .history-card:hover .check-mark-styled { border-color: rgba(255, 255, 255, 0.5) !important; }
}


/* --- ULTRA MOVIE WATCH BUTTON --- */
.movie-watch-area {
    margin-top: 50px;
    text-align: center;
}

.btn-glow-container {
    display: inline-block;
    position: relative;
    padding: 5px;
}


/* --- 💎 TITAN DYNAMIC SHARE SUITE v6.0: FULL WIDTH GLASS EDITION --- */

.sa-share-box {
    position: relative;
    width: 100%;
    margin-top: 40px; /* 🔥 Big top margin to give breathing room from synopsis */
    padding: 20px 30px; /* 🔥 Provides the internal left & right gap */
    background: rgba(15, 18, 22, 0.5); /* Deep premium glass */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(155, 89, 182, 0.2); /* Restored the border */
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Restored depth shadow */
}

.sa-share-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row; /* Force strictly horizontal */
    align-items: center;
    justify-content: space-between; /* 🔥 Pushes Text to Left, Buttons to Right */
    width: 100%;
    flex-wrap: nowrap; /* Prevents wrapping */
}

/* --- 1. NEON ELECTRIC PURPLE LABEL --- */
.sa-share-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    flex-shrink: 0; /* Prevents the text from squishing */
}

.txt-pc, .txt-mob {
    color: #df9cff !important; 
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(191, 129, 214, 0.7);
    animation: saTextPulse 2.5s infinite ease-in-out;
}

/* 🔥 PC & Mobile Smart Display */
.txt-pc { font-size: 14px; display: inline; }
.txt-mob { font-size: 13px; display: none; }

/* --- 2. ALL-TIME ANIMATED ELECTRIC SVG --- */
.at-share-draw {
    width: 20px;
    height: 20px;
    color: #df9cff;
    stroke-dasharray: 50;
    stroke-dashoffset: 100;
    animation: saLineDraw 4s infinite linear, saIconNeonGlow 2s infinite ease-in-out;
}

@keyframes saLineDraw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@keyframes saIconNeonGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(223, 156, 255, 0.4)); opacity: 0.8; }
    50% { filter: drop-shadow(0 0 12px rgba(223, 156, 255, 1)); opacity: 1; transform: scale(1.1); }
}

@keyframes saTextPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.03); opacity: 1; color: #fff; }
}

/* --- 3. THE SHARE GRID --- */
.sa-share-grid {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Locks buttons to the right */
    gap: 8px; /* Tighter gap to fit perfectly on one line */
    flex-wrap: nowrap; /* Strictly single line */
}

.sa-share-icon {
    width: 40px; /* Perfectly sized for desktop single line */
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    flex-shrink: 0; /* Prevents buttons from squishing */
    transition: all 0.1s cubic-bezier(0.2, 0, 0, 1);
}

.sa-share-icon svg {
    width: 18px;
    height: 18px;
    transition: 0.1s;
}

/* --- 4. BRAND HOVER STATES --- */
.sa-share-icon:hover {
    transform: translateY(-4px) scale(1.1);
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.sa-share-icon.tg:hover { color: #0088cc; box-shadow: 0 0 20px rgba(0, 136, 204, 0.4); }
.sa-share-icon.fb:hover { color: #1877F2; box-shadow: 0 0 20px rgba(24, 119, 242, 0.4); }
.sa-share-icon.wa:hover { color: #25D366; box-shadow: 0 0 20px rgba(37, 211, 102, 0.4); }
.sa-share-icon.ms:hover { color: #0084FF; box-shadow: 0 0 20px rgba(0, 132, 255, 0.4); }
.sa-share-icon.sm:hover { color: #f1c40f; box-shadow: 0 0 15px rgba(241, 196, 15, 0.4); }
.sa-share-icon.cp:hover { color: #10b981; box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }

/* --- 5. ALL-TIME LIGHTING SWEEP --- */
.sa-share-shimmer {
    display: block; /* 🔥 Restored Shimmer */
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(155, 89, 182, 0.1) 45%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(155, 89, 182, 0.1) 55%, 
        transparent 100%
    );
    animation: saLightingSweep 6s infinite linear;
    pointer-events: none;
    z-index: 2;
}

@keyframes saLightingSweep {
    0% { left: -100%; }
    25% { left: 100%; }
    100% { left: 100%; }
}

/* --- 6. MOBILE RESPONSIVE POLISH --- */
@media (max-width: 768px) {
    .sa-share-box { padding: 15px 20px; margin-top: 30px; }
    .txt-pc { display: none; } /* Hide long text */
    .txt-mob { display: inline; } /* Show short text */
    .sa-share-icon { width: 36px; height: 36px; border-radius: 10px; }
    .sa-share-icon svg { width: 16px; height: 16px; }
}

@media (max-width: 480px) {
    .sa-share-box { padding: 15px 12px; margin-top: 25px; }
    /* Force space-between to utilize 100% of the mobile screen */
    .sa-share-inner { justify-content: space-between; gap: 8px; } 
    .sa-share-grid { gap: 6px; }
    
    /* Shrink sizes down to guarantee everything fits perfectly on one line */
    .sa-share-icon { width: 32px; height: 32px; border-radius: 8px; }
    .sa-share-icon svg { width: 14px; height: 14px; }
    .sa-share-label { gap: 6px; }
    .txt-mob { font-size: 11px; letter-spacing: 0.5px; }
    .at-share-draw { width: 16px; height: 16px; }
}






/* --- LATEST EPISODE GLASS BUTTON UI --- */
.at-latest-ep-btn-wrap {
    width: 100%;
    max-width: 850px; /* Matches your info cards */
    margin: 0 auto 30px;
    padding: 0 15px;
    box-sizing: border-box;
}

.at-latest-ep-btn {
    position: relative;
    display: block;
    width: 100%;
    background: rgba(155, 89, 182, 0.1); /* Subtle Purple Glass */
    border: 1.5px solid rgba(155, 89, 182, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 18px;
    padding: 18px;
    text-decoration: none !important;
    overflow: hidden;
    /* ULTRA FAST HOVER BASE */
    transition: all 0.1s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.at-btn-inner {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.at-btn-inner svg {
    width: 20px;
    height: 20px;
    color: #fff;
    fill: #fff;
    filter: drop-shadow(0 0 8px var(--accent));
}

.at-btn-inner span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- CONSTANT LIGHTNING SHINE ANIMATION --- */
.at-btn-shine-loop {
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: atLightningShine 4s infinite linear;
    z-index: 2;
}

@keyframes atLightningShine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* --- SNAPPY TITAN HOVER --- */
.at-latest-ep-btn:hover {
    background: rgba(155, 89, 182, 0.25);
    border-color: #fff;
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(155, 89, 182, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
}

.at-latest-ep-btn:active {
    transform: scale(0.98);
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .at-latest-ep-btn {
        padding: 14px;
        border-radius: 14px;
    }
    .at-btn-inner span {
        font-size: 13px;
    }
    .at-btn-inner svg {
        width: 16px;
        height: 16px;
    }
}

/* --- ELITE MATURE CONTENT SHIELD v6.0 --- */
.at-age-shield {
    position: relative;
    /* Forces width to be identical to other containers */
    width: 100% !important;
    /* Removed max-width to allow it to fill the container like .sa-external-card */
    margin: 30px 0 !important; /* Changed from '30px auto' to '30px 0' to match .sa-external-card */
    
    /* Matches .sa-external-card exactly */
    background: rgba(255, 46, 99, 0.04) !important;
    border: 1px solid rgba(255, 46, 99, 0.2) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px !important;
    padding: 20px !important; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    box-sizing: border-box !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* The Neon Pulse Line on the left */
.shield-accent {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #ff2e63;
    box-shadow: 0 0 15px #ff2e63;
    animation: shieldGlow 2s infinite ease-in-out;
    z-index: 1;
}

.shield-inner {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center; /* Vertically center icon */
    justify-content: center; /* Horizontally center text */
    min-height: 24px;
}

.shield-icon {
    /* Absolute keeps icon on the left without moving the centered text */
    position: absolute;
    left: 10px; /* Slight gap from the red line */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #ff2e63;
    filter: drop-shadow(0 0 5px rgba(255, 46, 99, 0.4));
    z-index: 2;
}

.shield-text {
    width: 100%;
    color: #efefef;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.2px;
    /* MATHEMATICAL CENTER */
    text-align: center; 
    /* Safe padding to prevent text hitting the left icon */
    padding: 0 40px; 
    display: block;
    text-transform: none !important;
    box-sizing: border-box;
}

@keyframes shieldGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Hover State */
.at-age-shield:hover {
    background: rgba(255, 46, 99, 0.08) !important;
    border-color: rgba(255, 46, 99, 0.4) !important;
    transform: translateY(-2px);
}

/* --- RESPONSIVE OPTIMIZATION --- */

@media (max-width: 900px) {
    .at-age-shield {
        /* Removed side margins and calc() that were squeezing the box on mobile */
        max-width: 100% !important;
        margin: 30px 0 !important; 
    }
}

@media (max-width: 480px) {
    .at-age-shield {
        padding: 15px !important;
        margin: 20px 0 !important; /* Changed from 'auto' to '0' to keep edges flush */
    }
    .shield-text {
        font-size: 12.5px;
        padding: 0 30px;
    }
    .shield-icon {
        width: 18px;
        height: 18px;
        left: 5px;
    }
}




.ultra-watch-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
    color: #fff !important;
    padding: 20px 50px !important;
    border-radius: 60px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(168, 85, 247, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    letter-spacing: 2px;
    animation: btnBreath 3s infinite ease-in-out;
}

/* Shimmer/Light Streak Effect */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: btnShine 4s infinite linear;
}

@keyframes btnShine {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

@keyframes btnBreath {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 40px rgba(168, 85, 247, 0.4); }
    50% { transform: scale(1.03); box-shadow: 0 15px 50px rgba(168, 85, 247, 0.6); }
}

.ultra-watch-btn:hover {
    transform: translateY(-5px) !important;
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%) !important;
}

.ultra-watch-btn svg { width: 22px; height: 22px; filter: drop-shadow(0 0 5px #fff); }

.movie-hint { 
    color: #94a3b8; /* Brightened up from #444 so it is actually visible */
    font-size: 11px; 
    margin-top: 20px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    opacity: 0.8; /* Keeps it looking like a subtle, premium hint */
}


/* FIX TAXONOMY LINK COLORS IN QUOTE */
.meta-row-pro a {
    color: inherit !important;
    text-decoration: none !important;
    transition: 0.3s;
}
.meta-row-pro a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* EPISODE LIST FIXES */
.ep-row {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    gap: 12px !important;
    width: 100% !important;
}

.ep-info { flex: 1 !important; min-width: 0 !important; }
.ep-info strong { display: block !important; word-wrap: break-word !important; white-space: normal !important; font-size: 13px !important; line-height: 1.4 !important; }

.status-action { flex-shrink: 0 !important; margin-left: auto !important; display: flex !important; align-items: center !important; }
.spoiler-section { margin-top: 0 !important; padding-top: 0 !important; display: flex !important; align-items: center; }

.blur-text {
    filter: blur(12px) !important;
    transition: filter 0.1s linear !important;
    user-select: none !important;
}
.blur-text.revealed { filter: blur(0) !important; }

@media (max-width: 480px) {
    .ep-row img { width: 70px !important; }
    .ultra-watch-btn { width: 100%; padding: 18px 20px !important; font-size: 14px !important; }
}


/* INTERNAL STYLE PRIORITY FIX */
.movie-nav-top { margin-bottom: 25px !important; }
.back-info-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #888 !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: 0.3s !important; height: 24px !important; min-width: 150px !important; }
.back-info-btn svg { width: 16px !important; height: 16px !important; transition: 0.3s !important; flex-shrink: 0 !important; }
.back-info-btn:hover { color: var(--gold) !important; }
.back-info-btn:hover svg { transform: translateX(-5px) !important; color: var(--gold) !important; }

/* CINEMATIC PLAYER & LOADER */
.player-container { position: relative !important; background: #000; border-radius: 24px; overflow: hidden; margin-bottom: 30px; border: 1px solid var(--glass-border); box-shadow: 0 0 50px rgba(155, 89, 182, 0.15); }
.player-container iframe { width: 100% !important; aspect-ratio: 16/9 !important; display: block !important; position: relative; z-index: 2; opacity: 0; transition: opacity 0.8s ease; }

.player-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #08090a; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 5; transition: 0.5s; }
.loader-aura { width: 60px; height: 60px; border: 3px solid rgba(155, 89, 182, 0.1); border-top: 3px solid var(--accent); border-radius: 50%; animation: auraSpin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite; position: relative; }
.loader-aura::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; background: var(--accent); border-radius: 50%; filter: blur(10px); animation: auraPulse 2s ease-in-out infinite; }
@keyframes auraSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes auraPulse { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); } 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); } }
.loader-text { margin-top: 20px; color: #444; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; animation: textFlicker 2s infinite; }
@keyframes textFlicker { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.iframe-loaded iframe { opacity: 1 !important; }
.iframe-loaded .player-loader { opacity: 0 !important; pointer-events: none !important; }

.player-glow { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle, rgba(155, 89, 182, 0.1) 0%, transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; }
.ep-main-title { font-size: 26px !important; font-weight: 900 !important; margin-bottom: 20px !important; line-height: 1.3 !important; }
.title-accent { color: var(--gold) !important; }
.title-main { color: #fff !important; }
.dl-flex-wrap { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 15px !important; margin-top: 20px !important; }
.dl-btn-premium { min-width: 240px !important; flex: 1 1 auto !important; max-width: 350px !important; }

/* Fix exploding SVGs during load */
.ep-meta-row-animated svg, .meta-item-box svg { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }


.ep-content-text { color: #bbb !important; line-height: 1.8 !important; margin-top: 20px !important; font-size: 15px !important; }
@media (max-width: 768px) { .back-info-btn { font-size: 12px !important; } .ep-main-title { font-size: 20px !important; } }

/* Fix exploding SVG during load */
.ep-meta-row-animated svg, .meta-item-box svg { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
.ep-main-wrapper svg { max-width: 50px !important; max-height: 50px !important; }


.page-pro-wrapper {
    position: relative !important;
    z-index: 1 !important;
}
.page-hero {
    position: relative !important;
    height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    margin-bottom: -50px !important; /* Overlap with content */
}

.page-hero-bg {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(10px) brightness(0.4) !important;
    transform: scale(1.1) !important;
}

.page-hero-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, var(--bg)) !important;
}

.page-hero-content {
    position: relative !important;
    z-index: 5 !important;
    padding: 0 20px !important;
}

.page-main-title {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    margin-bottom: 15px !important;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.page-breadcrumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #aaa !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.page-breadcrumb a { color: var(--accent) !important; text-decoration: none !important; }
.page-breadcrumb svg { width: 14px; height: 14px; color: #444 !important; }

.page-main-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px 80px !important;
}

.page-glass-card {
    background: rgba(22, 25, 30, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 50px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4) !important;
}

.page-entry-content {
    color: #cbd5e1 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.page-entry-content h1, .page-entry-content h2, .page-entry-content h3 {
    color: #fff !important;
    margin: 35px 0 20px !important;
    font-weight: 800 !important;
}

.page-entry-content p { margin-bottom: 20px !important; }

.page-entry-content strong { color: #fff !important; font-weight: 800 !important; }

.page-entry-content ul, .page-entry-content ol {
    margin-bottom: 25px !important;
    padding-left: 20px !important;
}

.page-entry-content li { margin-bottom: 10px !important; }

.page-entry-content a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .page-hero { height: 220px !important; }
    .page-main-title { font-size: 28px !important; }
    .page-glass-card { padding: 25px !important; border-radius: 16px !important; }
    .page-entry-content { font-size: 14px !important; }
}


/* --- PREMIERE HEADER & TOOLTIP ENGINE v5.0 --- */

/* 1. HEADER CORE STYLES (Extracted from HTML) */
.main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(10, 11, 14, 0.7) !important;
    backdrop-filter: blur(25px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
}

.header-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 18px !important;
}

.menu-btn, .search-btn {
    cursor: pointer !important;
    color: #ffffff !important;
    display: flex !important;
    transition: transform 0.3s ease !important;
}

.menu-btn:hover, .search-btn:hover { transform: scale(1.1); }

/* --- PERFECT CENTER LOGO & SIZE ENGINE --- */

.site-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    /* Prevents logo from being squashed */
    min-width: 150px !important; 
}

.site-logo img {
    /* 50px is the 'Golden Ratio' size for mobile/pc headers */
    max-height: 50px !important; 
    width: auto !important;
    /* Deep premium glow */
    filter: drop-shadow(0 0 15px rgba(155, 89, 182, 0.5)) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: block !important;
}

.site-logo a:hover img { 
    transform: scale(1.08) !important; 
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important; /* Slightly wider gap for professional spacing */
    margin-left: auto !important; /* Pushes icons to the far right */
    z-index: 20 !important;
}

/* Mobile specific height adjustment */
@media (max-width: 480px) {
    .site-logo img {
        max-height: 42px !important;
    }
}

/* 2. STATUS ICON STYLES */
.sa-fixed-icon {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.sa-fixed-icon.is-verified { color: #2ecc71 !important; filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.5)) !important; }
.sa-fixed-icon.is-warning { color: #e74c3c !important; filter: drop-shadow(0 0 8px rgba(231, 76, 60, 0.4)) !important; }
.sa-fixed-icon:hover { transform: scale(1.2) rotate(5deg) !important; }

/* 3. PREMIUM TOOLTIP ENGINE (OPEN & CLOSE ANIMATED) */
.sa-fixed-tooltip {
    position: fixed !important;
    top: 80px; 
    right: 15px;
    width: 280px;
    background: rgba(15, 18, 22, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 25px;
    padding: 30px 20px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 30px rgba(155, 89, 182, 0.2);
    z-index: 1000000 !important;
    
    /* Animation Properties */
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.8) translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.4s;
    
    transform-origin: top right;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

/* State when active (Added via JS) */
.sa-fixed-tooltip.sa-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
}

.sa-fixed-tt-close { position: absolute; top: 15px; right: 20px; font-size: 26px; color: #444; cursor: pointer; line-height: 1; transition: color 0.3s; }
.sa-fixed-tt-close:hover { color: #fff; }

.sa-tt-label { font-size: 10px; font-weight: 900; color: #555; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; }

/* Tooltip Content Elements */
.sa-tt-status-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; }

.sa-tt-icon-circle {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 5px;
}
.sa-tt-icon-circle svg { width: 24px; height: 24px; }
.bg-green { background: rgba(46, 204, 113, 0.1); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.2); }
.bg-red { background: rgba(231, 76, 60, 0.1); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.2); }

.sa-tt-status-title { font-size: 22px; font-weight: 950; margin: 0; letter-spacing: -0.5px; }
.verified-text { color: #2ecc71; text-shadow: 0 0 15px rgba(46, 204, 113, 0.3); }
.unverified-text { color: #e74c3c; }

.sa-tt-explanation { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 25px; }

/* TIMER SECTION */
.sa-tt-countdown-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    border-radius: 20px;
}

.sa-timer-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.sa-timer-head svg { width: 14px; height: 14px; color: var(--accent); }
.sa-cd-label { font-size: 9px; font-weight: 950; color: var(--accent); letter-spacing: 1px; }
.sa-cd-timer { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: 1.5px; font-family: monospace; }

/* ACTION BUTTON */
.sa-tt-action-btn {
    display: block;
    background: #9b59b6;
    color: #fff;
    padding: 15px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none;
    font-size: 13px;
    box-shadow: 0 10px 25px rgba(155, 89, 182, 0.3);
    transition: filter 0.3s;
}
.sa-tt-action-btn:hover { filter: brightness(1.2); }

/* RESPONSIVE MAPPING */
@media (max-width: 480px) {
    .sa-fixed-tooltip {
        width: calc(100% - 30px);
        left: 15px;
        right: 15px;
        top: 85px;
    }
}


 /* --- BUFFER FIX EXCLUSIVE CSS v3.0 --- */
        .bf-master-wrap { padding: 40px 18px; max-width: 1000px; margin: 0 auto; min-height: 80vh; font-family: 'Inter', sans-serif; position: relative; }

        /* 1. PREMIUM LANGUAGE SELECTOR */
        .bf-lang-section { display: flex; justify-content: center; margin-bottom: 50px; position: relative; }
        
        .bf-lang-btn {
            display: flex; align-items: center; gap: 12px;
            background: rgba(155, 89, 182, 0.1); border: 1px solid rgba(155, 89, 182, 0.3);
            padding: 12px 25px; border-radius: 50px; cursor: pointer; transition: 0.3s;
            backdrop-filter: blur(10px); color: #fff;
        }
        .bf-lang-btn:hover { background: var(--accent); border-color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(155, 89, 182, 0.3); }
        .bf-lang-btn svg { width: 22px; height: 22px; color: var(--accent); transition: 0.3s; }
        .bf-lang-btn:hover svg { color: #fff; }
        .bf-lang-btn span { font-weight: 900; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

        /* TOOLTIP POPUP ANIMATION */
        .bf-lang-popup {
            position: absolute; top: 65px; left: 50%; transform: translateX(-50%) scale(0.8);
            width: 320px; background: rgba(15, 18, 22, 0.98); border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px; padding: 25px; z-index: 1000; display: none; opacity: 0;
            box-shadow: 0 30px 70px rgba(0,0,0,0.8); backdrop-filter: blur(20px);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: top center;
        }
        .bf-lang-popup.is-visible { display: block; opacity: 1; transform: translateX(-50%) scale(1); }

        .bf-popup-head { font-size: 10px; font-weight: 950; color: #555; letter-spacing: 2px; margin-bottom: 20px; text-align: center; }
        .bf-lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        
        .bf-lang-item {
            padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
            border-radius: 12px; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer;
            color: #ccc; transition: 0.2s;
        }
        .bf-lang-item:hover { background: var(--accent); color: #fff; border-color: #fff; }
        .bf-lang-item.active { background: var(--accent); color: #fff; box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3); }

        /* 2. CONTENT STYLING */
        .bf-card {
            background: rgba(20, 23, 28, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 35px; padding: 40px; margin-bottom: 30px; backdrop-filter: blur(20px);
            box-shadow: 0 30px 60px rgba(0,0,0,0.4); animation: bfSlideIn 0.8s ease;
        }
        @keyframes bfSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .bf-step-tag { display: inline-block; padding: 6px 15px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 900; margin-bottom: 15px; }
        .bf-card h2 { font-size: 24px; font-weight: 950; margin: 0 0 15px; color: #fff; }
        .bf-card p { font-size: 15px; color: #94a3b8; line-height: 1.7; }

        /* 3. DNS BOX */
        .bf-dns-box {
            background: #000; border: 1px solid var(--accent); padding: 18px 25px;
            border-radius: 20px; display: flex; align-items: center; justify-content: space-between;
            margin: 25px 0; box-shadow: inset 0 0 20px rgba(155, 89, 182, 0.1);
        }
        .bf-dns-text { font-family: 'Courier New', monospace; color: #f7e000; font-weight: 900; font-size: 16px; word-break: break-all; }
        .bf-copy-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: var(--accent); cursor: pointer; transition: 0.3s; border-radius: 50%; background: rgba(255,255,255,0.03); }
        .bf-copy-icon:hover { transform: scale(1.2); color: #fff; background: var(--accent); }

        /* 4. DOWNLOAD GRID */
        .bf-tab-nav { display: flex; gap: 10px; margin: 30px 0 25px; background: rgba(0,0,0,0.4); padding: 6px; border-radius: 18px; }
        .bf-tab-trigger { flex: 1; padding: 14px; border: none; background: transparent; color: #555; font-weight: 900; font-size: 12px; cursor: pointer; border-radius: 12px; transition: 0.3s; }
        .bf-tab-trigger.active { background: var(--accent); color: #fff; box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3); }

        .bf-dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .bf-dl-item {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
            padding: 30px 20px; border-radius: 28px; text-align: center; text-decoration: none; transition: 0.4s;
        }
        .bf-dl-item:hover { border-color: var(--accent); transform: translateY(-10px); background: rgba(155, 89, 182, 0.08); }
        .bf-dl-icon-wrap { width: 60px; height: 60px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
        .bf-dl-item strong { display: block; color: #fff; font-size: 17px; margin-bottom: 8px; }
        .bf-dl-item .dl-tag { font-size: 10px; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; gap: 5px; }

        /* TOAST */
        #bf-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 14px 35px; border-radius: 50px; font-weight: 900; z-index: 10000; display: none; box-shadow: 0 15px 40px rgba(0,0,0,0.6); animation: bfPop 0.3s ease; }
        @keyframes bfPop { from { opacity: 0; bottom: 20px; } to { opacity: 1; bottom: 40px; } }

        @media (max-width: 600px) {
            .bf-card { padding: 30px 20px; }
            .bf-dl-grid { grid-template-columns: 1fr; }
            .bf-lang-popup { width: 90vw; }
        }



/* --- PREMIUM PLAYER UI IMPROVEMENTS --- */

/* Buffer Notification */
.sa-buffer-notify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(155, 89, 182, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 20px;
    border-radius: 16px;
    margin-bottom: 15px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.sa-buffer-notify:hover {
    background: rgba(155, 89, 182, 0.12);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.sa-notify-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-pulse-dot {
    width: 8px;
    height: 8px;
    background: #ff2e63;
    border-radius: 50%;
    box-shadow: 0 0 12px #ff2e63;
    animation: saPulseAlert 1.5s infinite;
}

.sa-notify-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.sa-accent-color {
    color: var(--accent);
    /* Explicitly removed underline */
    text-decoration: none !important;
}

.sa-notify-arrow {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

/* Player Container Space */
#at-container-v2 {
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    margin-bottom: 30px; /* Provides the extra gap to the hint text */
}

/* Server Switch Hint */
.sa-server-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    opacity: 0.8;
}

.sa-server-hint svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    filter: drop-shadow(0 0 5px var(--accent));
}

.sa-server-hint span {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* Animations */
@keyframes saPulseAlert {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

@media (max-width: 480px) {
    .sa-notify-text { font-size: 11px; }
    .sa-server-hint span { font-size: 9px; letter-spacing: 0.5px; }
}


/* --- TELEGRAM ELITE ENGINE v5.1: FONT AWESOME FILLED UPDATE --- */

/* 1. PAPER PLANE WRAPPER & NEON RED DOT */
.tg-float-anchor {
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 65px;
    height: 65px;
    z-index: 9999;
}

/* HIGH-INTENSITY NEON RED DOT */
.tg-status-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background: #ff0000; 
    border-radius: 50%;
    z-index: 15;
    animation: neonBreath 2s infinite ease-in-out;
}

@keyframes neonBreath {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 10px #ff0000, 0 0 15px rgba(255, 0, 0, 0.5); 
    }
    50% { 
        transform: scale(1.15); 
        box-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 45px rgba(255, 0, 0, 0.8); 
    }
}

/* THE FIXED TELEGRAM CIRCLE */
.tg-bell-core {
    width: 100%;
    height: 100%;
    background: #0088cc; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 136, 204, 0.4);
    overflow: hidden; 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.tg-bell-core:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 136, 204, 0.6);
}

/* THE NEW FA ICON: PERFECTLY CENTERED FLOAT */
.tg-bell-core svg {
    width: 36px;
    height: 36px;
    color: #fff;
    /* Removed margin hacks as FA icon is perfectly symmetrical */
    animation: planeFloat 3s infinite ease-in-out;
}

@keyframes planeFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}

/* 2. GLOBAL BLUR OVERLAY */
.tg-global-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tg-global-overlay.active { opacity: 1; visibility: visible; }

/* 3. FULL WIDTH POPUP */
.tg-full-sheet {
    position: fixed;
    bottom: 0; left: 0; width: 100% !important;
    z-index: 10001;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1.05); 
}
.tg-full-sheet.active { transform: translateY(0); }

.tg-sheet-content {
    background: rgba(10, 12, 15, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 35px 35px 0 0;
    padding: 45px 20px;
    position: relative;
    box-shadow: 0 -20px 80px rgba(0,0,0,0.9);
    text-align: center;
}

.tg-x-close {
    position: absolute; top: 20px; right: 20px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: #444; cursor: pointer; transition: all 0.3s ease;
    background: rgba(255,255,255,0.03); border-radius: 50%;
}
.tg-x-close:hover { color: #fff; background: #ff2e63; transform: scale(1.1) rotate(90deg); } 

.tg-elite-tag {
    font-size: 10px; font-weight: 900; color: #0088cc;
    letter-spacing: 3px; text-transform: uppercase;
    background: rgba(0, 136, 204, 0.1); padding: 8px 20px; border-radius: 50px;
}

.tg-main-msg { font-size: 16px; font-weight: 700; color: #94a3b8; margin: 25px 0 40px; line-height: 1.5; }

/* 4. BUTTONS & DANCING ICONS */
.tg-btn-grid { display: flex; flex-direction: column; gap: 15px; max-width: 450px; margin: 0 auto; }

.tg-elite-link {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    padding: 18px; border-radius: 24px; text-decoration: none;
    font-weight: 900; font-size: 14px; color: #fff; letter-spacing: 1.5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid transparent;
    overflow: hidden;
}

.tg-elite-link.chan { background: #0088cc; box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3); }
.tg-elite-link.group { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }

.tg-svg-dance { 
    display: flex; 
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: iconIdleSmooth 4s infinite ease-in-out;
}
.tg-svg-dance svg { width: 26px; height: 26px; }

@keyframes iconIdleSmooth {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-4px) rotate(5deg); }
    66% { transform: translateY(2px) rotate(-5deg); }
}

.tg-elite-link:hover { transform: translateY(-5px); filter: brightness(1.15); border-color: rgba(255,255,255,0.5); }

.tg-elite-link:hover .tg-svg-dance { 
    animation: none; 
    transform: scale(1.25) rotate(360deg); 
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.8));
}

.tg-elite-link.group:hover { border-color: #0088cc; background: rgba(0, 136, 204, 0.15); }



/* --- PREMIUM AUTO-NEXT TOGGLE CSS --- */
.sa-player-toggles.sa-hidden-ready {
    display: none; /* Hidden by default */
}

/* NUCLEAR CLASS: This forces the toggle to show */
.sa-player-toggles.sa-show-force {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 25px !important;
}

.sa-toggle-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid rgba(155, 89, 182, 0.2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.sa-toggle-item span {
    font-size: 11px;
    font-weight: 950;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sa-ios-switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.sa-ios-switch input { opacity: 0; width: 0; height: 0; }
.sa-ios-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #222; border: 1px solid #444; transition: .4s; border-radius: 30px;
}
.sa-ios-slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px;
    background-color: #777; transition: .4s; border-radius: 50%;
}
input:checked + .sa-ios-slider { background-color: rgba(155, 89, 182, 0.3); border-color: var(--accent); }
input:checked + .sa-ios-slider:before { transform: translateX(20px); background-color: var(--accent); box-shadow: 0 0 12px var(--accent); }



/* --- EXTERNAL RESOURCE GLASS CARD --- */
.sa-external-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 30px 20px;
    margin: 30px 0;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.sa-ext-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 25px;
    opacity: 0.8;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.sa-ext-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sa-ext-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 22px;
    border-radius: 12px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    /* --- ULTRA FAST TRANSITION --- */
    transition: all 0.1s cubic-bezier(0.2, 0, 0, 1); 
    will-change: transform, box-shadow;
}

.sa-ext-btn span {
    color: #ffffff; /* Keep white always */
    font-size: 14px;
    font-weight: 800;
}

.sa-btn-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: all 0.1s ease;
}

.sa-btn-logo.tmdb-svg {
    width: 35px;
    height: auto;
}

/* --- SNAPPY HOVER ENGINE --- */
.sa-ext-btn:hover {
    background: rgba(255, 255, 255, 0.12); /* Brighter glass instead of purple */
    border-color: #ffffff;
    transform: scale(1.04); /* Instant scale is more visible than slide */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Flash effect on hover to ensure visibility */
.sa-ext-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: 0.2s;
}

.sa-ext-btn:hover::before {
    left: 100%;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .sa-external-card { padding: 25px 15px; margin: 20px 0; }
    .sa-ext-title { font-size: 13px; }
    .sa-ext-btn {
        flex: 1;
        min-width: 140px;
        justify-content: center;
        padding: 12px 10px;
    }
}


/* --- 💎 TITAN SPOTLIGHT v20: AUTO-FADE & ANIMATED DOTS --- */

.sa-spotlight-wrapper {
    padding: 0 18px; 
    margin-top: 10px; 
    margin-bottom: 35px; 
    position: relative; 
    width: 100%;
}

.sa-spotlight-swiper {
    width: 100%;
    max-width: 1400px; 
    height: 450px; /* Absolutely locked height for Desktop */
    border-radius: 20px; 
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    transform: translateZ(0); 
}

.sa-spotlight-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end; 
    background: #08090a;
}

/* PURE CSS ZOOM - Prevents Layout Shifting via will-change */
.sa-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
    transform: scale(1);
    will-change: transform;
}

.swiper-slide-active .sa-card-bg,
.swiper-slide-duplicate-active .sa-card-bg {
    animation: spotlightZoom 6.8s linear forwards;
}

@keyframes spotlightZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.sa-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000000 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    z-index: 2;
}

.sa-card-content {
    position: relative;
    z-index: 10;
    padding: 0 40px 60px;
    width: 100%;
    max-width: 800px;
    opacity: 0; 
    transform: translateY(15px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.swiper-slide-active .sa-card-content,
.swiper-slide-duplicate-active .sa-card-content {
    animation: contentSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.1s;
}

@keyframes contentSlideUp {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.sa-rank-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
    color: #e9d5ff; 
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.sa-logo-img { max-width: 280px; max-height: 90px; object-fit: contain; object-position: left center; margin: 0 0 15px 0; }
.sa-text-title { font-size: 36px; font-weight: 900; margin: 0 0 10px 0; line-height: 1.1; text-align: left; }
.sa-meta-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 15px; }
.sa-badge { background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.sa-genres { color: #cbd5e1; font-size: 13px; font-weight: 700; }
.sa-description { color: #94a3b8; font-size: 14px; line-height: 1.6; margin-bottom: 25px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }

.sa-actions { display: flex; gap: 12px; }

.sa-btn-main { background: #ffffff; color: #000000; padding: 12px 28px; border-radius: 12px; font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.15s ease-in-out; }
.sa-btn-alt { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #ffffff; padding: 12px 28px; border-radius: 12px; font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: all 0.15s ease-in-out; }
.sa-btn-main:hover { background: var(--accent); color: #ffffff; transform: scale(1.05); }
.sa-btn-alt:hover { background: rgba(255,255,255,0.2); border-color: #ffffff; transform: scale(1.05); }
.sa-btn-main svg, .sa-btn-alt svg { width: 18px; height: 18px; }

/* =========================================================
   🔥 SPLIT CONTROLS (Dots Left, Arrows Right)
   ========================================================= */
.sa-spotlight-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    box-sizing: border-box;
}

.sa-dots-container {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: auto !important;
    bottom: auto !important;
}

.swiper-pagination-bullet {
    width: 8px !important; 
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.3) !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: all 0.15s ease !important; 
}

.swiper-pagination-bullet-active {
    width: 35px !important; 
    height: 6px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.2) !important;
    position: relative;
    overflow: hidden;
}

.swiper-pagination-bullet-active::after {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%; width: 100%;
    background: var(--accent);
    transform-origin: left center;
    animation: fillProgress 6800ms linear forwards; 
}

@keyframes fillProgress {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.sa-arrow-group {
    display: flex;
    gap: 12px;
}

.sa-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease-in-out; 
    -webkit-tap-highlight-color: transparent;
}

.sa-nav-btn svg { width: 20px; height: 20px; }
.sa-nav-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.swiper-button-disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================================
   📱 MOBILE ADJUSTMENTS
   ========================================================= */
@media (max-width: 768px) {
    .sa-spotlight-wrapper { padding: 0 12px !important; margin-top: 0px !important; margin-bottom: 30px !important; }
    
    .sa-spotlight-swiper { 
        height: 400px !important; /* Absolutely locked height for Mobile */
        border-radius: 16px !important; 
    }
    
    .sa-card-bg { object-position: center center !important; }

    .sa-card-overlay { background: linear-gradient(to top, #000000 0%, rgba(0,0,0,0.85) 45%, transparent 100%) !important; }
    .sa-card-content { padding: 0 16px 70px !important; } 
    .sa-description { display: none !important; }
    
    .sa-logo-img { max-width: 170px !important; margin-bottom: 12px !important; }
    .sa-text-title { font-size: 26px !important; margin-bottom: 8px !important; }
    .sa-meta-row { margin-bottom: 16px !important; }
    .sa-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; }
    .sa-btn-main, .sa-btn-alt { padding: 10px !important; font-size: 13px !important; justify-content: center !important; }

    .sa-spotlight-controls { 
        padding: 0 16px !important; 
        bottom: 15px !important; 
        display: flex !important;
        justify-content: space-between !important; 
    }
    
    .sa-nav-btn { width: 32px !important; height: 32px !important; }
    .sa-nav-btn svg { width: 16px !important; height: 16px !important; }
    .sa-arrow-group { gap: 8px !important; }
}



/* =========================================================
   AK-SIDEBAR MENU (NATIVE HTML5 SYSTEM)
   ========================================================= */

/* The Drawer Itself */
.ak-sidebar-wrapper {
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: -320px; 
    width: 300px; 
    background: #0d0f12 !important; 
    z-index: 999999 !important; /* Strictly above the backdrop */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 20px 0 60px rgba(0,0,0,0.8); 
    padding: 60px 25px 100px 25px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

.ak-sidebar-wrapper.is-open { 
    transform: translateX(320px); 
}

/* PC Responsive Adjustments */
@media (min-width: 1024px) {
    .ak-sidebar-wrapper {
        width: 350px;
        left: -370px;
    }
    .ak-sidebar-wrapper.is-open { 
        transform: translateX(370px); 
    }
}

/* Header & Close */
.ak-sidebar-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}
.ak-sidebar-logo {
    font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: 1px;
    text-transform: uppercase; color: #a855f7 !important;
}
.ak-sidebar-close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #a1a1aa !important; cursor: pointer; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

/* Nav Container */
.ak-sidebar-nav {
    display: flex; flex-direction: column; gap: 8px;
}

/* Single Links (Home, App, Series) */
.ak-single-link {
    display: flex; align-items: center; gap: 15px;
    color: #a1a1aa !important; font-weight: 700; font-size: 14px; text-transform: uppercase; 
    letter-spacing: 1px; padding: 14px 16px; border-radius: 12px;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
}

.ak-single-link svg { width: 22px; height: 22px; color: #a1a1aa !important; }

/* 🚀 NATIVE HTML5 ACCORDION STYLING */
.ak-native-drop {
    width: 100%;
}

/* Hide the default browser arrow */
.ak-native-drop summary {
    list-style: none;
}
.ak-native-drop summary::-webkit-details-marker {
    display: none;
}

/* The Clickable Trigger */
.ak-drop-trigger {
    display: flex; justify-content: space-between; align-items: center;
    background: transparent; color: #a1a1aa !important; 
    font-weight: 700; font-size: 14px; text-transform: uppercase; 
    letter-spacing: 1px; padding: 14px 16px; border-radius: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ak-drop-left { display: flex; align-items: center; gap: 15px; pointer-events: none; }
.ak-drop-left svg { width: 22px; height: 22px; color: #a1a1aa !important; transition: color 0.2s ease; }
.ak-drop-caret { width: 18px; height: 18px; color: #888 !important; transition: transform 0.3s ease; pointer-events: none; }

/* 🚀 OPEN STATE STYLING */
.ak-native-drop[open] .ak-drop-trigger {
    background-color: rgba(168, 85, 247, 0.15) !important;
    color: #fff !important;
}
.ak-native-drop[open] .ak-drop-left svg { color: #a855f7 !important; }
.ak-native-drop[open] .ak-drop-caret { transform: rotate(180deg); color: #fff !important; }

/* Inner Content Links */
.ak-drop-content {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px 10px 48px; 
}

.ak-sub-link {
    color: #888 !important; font-size: 13px; font-weight: 600; padding: 8px 12px;
    border-radius: 8px; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.ak-sub-link:active { color: #fff !important; background-color: rgba(255, 255, 255, 0.08) !important; }

/* Global Freeze Class */
body.at-menu-frozen { overflow: hidden !important; }

/* =========================================================
   AK-HAMBURGER BUTTON (COMPLETELY ISOLATED)
   ========================================================= */
.ak-hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    cursor: pointer;
    color: #fff;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.2s ease;
}

/* Nuke old theme hover/active animations */
.ak-hamburger-btn:hover,
.ak-hamburger-btn:active,
.ak-hamburger-btn:focus {
    background: transparent !important;
    transform: none !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}

/* =========================================================
   AK-SIDEBAR BACKDROP (BLUR & CLICK-TO-CLOSE)
   ========================================================= */
#at-backdrop.ak-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 9, 10, 0.6) !important; /* Dark tint */
    backdrop-filter: blur(5px) !important; /* The sexy blur */
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 999998 !important; /* Directly behind the 999999 sidebar */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer; /* Shows the user they can click it */
}

/* When the JS adds the .is-open class, it fades in smoothly */
#at-backdrop.ak-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}


/* --- ANIME TADKA: PROFESSIONAL CREDIT PAGE UI (AESTHETIC GOD V8) --- */

.at-cred-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    color: #cbd5e1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. HEADING STYLES & PERFECT ALIGNMENT */
.at-cred-header {
    display: flex;
    align-items: center; /* Locks dead center vertically */
    justify-content: center;
    gap: 12px;
    margin-bottom: 35px;
}

/* 🔥 Per-Letter Wave Animation Engine (BOUNCE RESTORED) */
.at-cred-title {
    display: flex;
    align-items: center;
    font-size: 28px; /* EXACT match to SVG dimensions */
    line-height: 1; /* STRIPS all invisible spacing above/below text */
    font-weight: 900;
    margin: 0;
    letter-spacing: 0.5px;
}

.at-cred-title span {
    display: inline-block;
    color: #9b59b6;
    animation: atLetterGlowBounce 3.5s infinite alternate ease-in-out;
    animation-delay: calc(0.1s * var(--i));
}

.at-cred-title span.at-space {
    width: 8px; 
    animation: none; 
}

@keyframes atLetterGlowBounce {
    0% {
        color: #9b59b6;
        filter: drop-shadow(0 0 4px rgba(155, 89, 182, 0.3));
        transform: translateY(0);
    }
    100% {
        color: #ff2e63;
        filter: drop-shadow(0 0 12px rgba(255, 46, 99, 0.8));
        transform: translateY(-4px); /* Sleek aesthetic bounce */
    }
}

/* 🔥 Animated Blue Verified Tick */
.at-verified-icon {
    width: 28px; /* EXACT match to font-size */
    height: 28px; /* EXACT match to font-size */
    display: block;
    flex-shrink: 0;
    animation: atVerifiedGlow 3.5s infinite alternate ease-in-out;
}

.at-verified-icon .at-tick {
    stroke-dasharray: 20;
    animation: atTickDraw 3.5s infinite alternate ease-in-out;
}

@keyframes atVerifiedGlow {
    0% {
        filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.3));
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.8));
        transform: scale(1.05); /* Pulses slightly to match text bounce energy */
    }
}

@keyframes atTickDraw {
    0% { stroke-dashoffset: 20; }
    100% { stroke-dashoffset: 0; }
}

/* 2. INFINITE CSS SLIDER */
.at-slider-wrapper {
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    padding: 10px 0 30px 0;
    margin-bottom: 20px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.at-slider-track {
    display: flex;
    width: max-content;
    animation: saPureScroll 15s linear infinite; 
}

.at-slide {
    width: 250px; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px; 
}

/* Logos: Colored but dimmed, blasting to 100% on hover */
.at-slide img {
    height: 45px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.5; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.at-slide img:hover {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.6)); 
    transform: scale(1.1);
}

@keyframes saPureScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1000px); } 
}

/* 3. SUBTEXT STYLES */
.at-cred-desc {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.8;
    margin: 0;
    text-align: center;
    max-width: 800px;
}

.at-desc-bold {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

/* 🔥 MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .at-cred-title { font-size: 24px; }
    .at-verified-icon { width: 24px; height: 24px; }
    .at-slide { width: 180px; padding: 0 15px; }
    .at-slide img { height: 35px; }
    
    @keyframes saPureScroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-720px); } 
    }
}