/* ========================================
   CimaLive - Main Stylesheet
   Professional Cinema Theme for WordPress
   Version: 1.0.0
   ======================================== */

/* ========================================
   Design System Variables
   ======================================== */
:root {
    --bg-primary: #030407;
    --bg-secondary: #0a0c14;
    --bg-tertiary: #111420;
    --bg-card: rgba(23, 26, 40, 0.8);
    --bg-glass: rgba(23, 26, 40, 0.6);
    --bg-hover: rgba(35, 39, 58, 0.9);
    --text-primary: #ffffff;
    --text-secondary: #a1a8c4;
    --text-muted: #6b7280;
    --accent-red: #ff3b5c;
    --accent-red-glow: rgba(255, 59, 92, 0.4);
    --accent-teal: #00e5b8;
    --accent-teal-glow: rgba(0, 229, 184, 0.3);
    --accent-gold: #ffc145;
    --accent-purple: #a78bfa;
    --accent-blue: #60a5fa;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px var(--accent-red-glow);
    --shadow-glow-teal: 0 0 40px var(--accent-teal-glow);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    --container-max: 1440px;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-hover: rgba(241, 245, 249, 0.95);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background var(--transition-normal), color var(--transition-normal);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(255, 59, 92, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 229, 184, 0.06) 0%, transparent 50%);
    background-attachment: fixed;
}

a { color: inherit; text-decoration: none; transition: var(--transition-normal); }
a:hover { color: var(--accent-red); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
img, video { max-width: 100%; display: block; }
ul { list-style: none; }
input, textarea { font-family: inherit; background: transparent; border: none; outline: none; color: var(--text-primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-red); }

/* Container */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.5rem; border-radius: var(--radius-md); font-weight: 600;
    font-size: 0.9rem; transition: var(--transition-normal); position: relative;
    overflow: hidden; white-space: nowrap;
}
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%); transition: transform var(--transition-slow);
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a); color: #fff;
    box-shadow: 0 4px 20px var(--accent-red-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-red-glow); }

.btn-outline { background: transparent; color: var(--text-primary); border: 2px solid var(--border-hover); }
.btn-outline:hover { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255, 59, 92, 0.1); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Badges */
.badge-ultra {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px;
    border-radius: 8px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.4px; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.35); transition: var(--transition-fast);
}
.badge-ultra.quality { background: linear-gradient(135deg, var(--accent-red), #ff6b8a); color: #fff; }
.badge-ultra.year { background: rgba(0, 0, 0, 0.7); color: var(--text-secondary); }
.badge-ultra.episode {
    background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff;
    animation: pulse-episode 2.5s infinite;
}
@keyframes pulse-episode {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 184, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(0, 229, 184, 0); }
}
.badge-ultra.rating { background: linear-gradient(135deg, var(--accent-gold), #fbbf24); color: #000; font-weight: 900; }
.badge-ultra.rating i { font-size: 0.6rem; }
.badge-type-ultra {
    position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 5px 11px;
    border-radius: var(--radius-full); display: flex; align-items: center; gap: 4px;
    backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1);
}
.badge-type-ultra.series { background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff; }

/* ========================================
   Header
   ======================================== */
.header {
    position: sticky; top: 0; z-index: 1000; background: var(--bg-glass);
    border-bottom: 1px solid var(--border); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); transition: background var(--transition-normal);
}
.header-top { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; gap: 1.5rem; flex-wrap: wrap; }

.logo { display: flex; align-items: center; gap: 0.6rem; font-size: 1.6rem; font-weight: 900; color: var(--accent-red); letter-spacing: -0.5px; }
.logo-icon {
    width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; box-shadow: 0 4px 20px var(--accent-red-glow);
    animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.search-box { flex: 1; max-width: 500px; position: relative; }
.search-box form { position: relative; }
.search-box input {
    width: 100%; padding: 0.75rem 3rem 0.75rem 1.2rem; background: var(--bg-tertiary);
    border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.9rem;
    transition: var(--transition-normal);
}
.search-box input:focus { border-color: var(--accent-red); box-shadow: 0 0 0 3px var(--accent-red-glow); background: var(--bg-card); }
.search-box i { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; pointer-events: none; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
    width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--bg-tertiary);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: var(--transition-normal); position: relative;
}
.icon-btn:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); transform: translateY(-2px); box-shadow: 0 4px 15px var(--accent-red-glow); }
.icon-btn .badge-count {
    position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--accent-red); color: #fff; border-radius: var(--radius-full); font-size: 0.65rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.theme-toggle {
    width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-tertiary);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); cursor: pointer; transition: var(--transition-normal);
}
.theme-toggle:hover { background: linear-gradient(135deg, var(--accent-red), var(--accent-teal)); color: #fff; transform: rotate(15deg) scale(1.05); }

.mobile-toggle { display: none; font-size: 1.4rem; color: var(--text-primary); }

/* Navigation */
.nav-bar { border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.nav-bar::-webkit-scrollbar { display: none; }
.nav-list { display: flex; align-items: center; gap: 0.2rem; padding: 0.6rem 0; min-width: max-content; }
.nav-item { position: relative; }
.nav-link {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-md);
    font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: var(--transition-normal); white-space: nowrap;
}
.nav-link:hover, .nav-link.active { background: linear-gradient(135deg, var(--accent-red), #ff6b8a); color: #fff; box-shadow: 0 4px 15px var(--accent-red-glow); }

.dropdown {
    position: absolute; top: 100%; right: 0; min-width: 220px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.5rem 0;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition-normal);
    box-shadow: var(--shadow-lg); z-index: 100; backdrop-filter: blur(20px);
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem;
    font-size: 0.85rem; color: var(--text-secondary); transition: var(--transition-fast);
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--accent-red); padding-right: 1.5rem; }
.dropdown-item i { width: 18px; text-align: center; font-size: 0.85rem; color: var(--accent-teal); }

/* ========================================
   Header Style Variants
   ======================================== */

/* --- Centered Style --- */
.header--centered .header-top {
    flex-direction: column; align-items: center; text-align: center;
    gap: 0.8rem; padding: 1.1rem 0;
}
.header--centered .logo { font-size: 1.8rem; }
.header--centered .search-box { max-width: 560px; width: 100%; order: 0; }
.header--centered .header-actions { gap: 0.6rem; }
.header--centered .nav-list { justify-content: center; }

/* --- Minimal Style --- */
.header--minimal {
    border-bottom: none;
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.header--minimal .header-top { padding: 0.5rem 0; gap: 1rem; }
.header--minimal .logo { font-size: 1.3rem; }
.header--minimal .logo-icon { width: 32px; height: 32px; font-size: 1rem; animation: none; box-shadow: none; }
.header--minimal .search-box { max-width: 400px; }
.header--minimal .search-box input { padding: 0.55rem 2.5rem 0.55rem 1rem; font-size: 0.82rem; background: transparent; border: 1px solid var(--border-hover); }
.header--minimal .icon-btn,
.header--minimal .theme-toggle { width: 36px; height: 36px; background: transparent; border-color: transparent; }
.header--minimal .nav-bar { border-top: none; }
.header--minimal .nav-list { padding: 0.3rem 0; gap: 0; }
.header--minimal .nav-link { padding: 0.4rem 0.9rem; font-size: 0.82rem; border-radius: var(--radius-sm); }

/* --- Transparent Style (changes on scroll) --- */
.header--transparent {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.header--transparent .icon-btn,
.header--transparent .theme-toggle {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15);
}
.header--transparent .search-box input {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12);
}
.header--transparent .nav-bar { border-top-color: rgba(255,255,255,0.06); }

/* Scrolled state */
.header--transparent.header--scrolled {
    background: var(--bg-glass);
    border-bottom-color: var(--border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.header--transparent.header--scrolled .icon-btn,
.header--transparent.header--scrolled .theme-toggle {
    background: var(--bg-tertiary); border-color: var(--border);
}
.header--transparent.header--scrolled .search-box input {
    background: var(--bg-tertiary); border-color: var(--border);
}
.header--transparent.header--scrolled .nav-bar { border-top-color: var(--border); }

/* Spacer for transparent header so content isn't hidden behind it */
.header--transparent ~ #main { padding-top: 0; }

/* --- Video Background Style --- */
.header--video {
    position: relative; overflow: hidden;
}
.header-video-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.header-video-bg video {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.35) saturate(1.3);
}
.header-video-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(3,4,7,0.7) 0%,
        rgba(3,4,7,0.5) 50%,
        rgba(3,4,7,0.85) 100%
    );
}
.header--video .header-top,
.header--video .nav-bar { position: relative; z-index: 2; }
.header--video .header-top { padding: 1.2rem 0; }
.header--video .nav-bar { border-top-color: rgba(255,255,255,0.1); }
.header--video .icon-btn,
.header--video .theme-toggle {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
}
.header--video .icon-btn:hover,
.header--video .theme-toggle:hover {
    background: var(--accent-red); border-color: var(--accent-red);
}
.header--video .search-box input {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
}
.header--video .search-box input:focus {
    background: rgba(255,255,255,0.15); border-color: var(--accent-red);
}
.header--video .logo { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* Light theme adjustments for transparent & video headers */
[data-theme="light"] .header--transparent .icon-btn,
[data-theme="light"] .header--transparent .theme-toggle {
    background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .header--transparent .search-box input {
    background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .header--transparent.header--scrolled {
    background: var(--bg-glass);
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
[data-theme="light"] .header--transparent.header--scrolled .icon-btn,
[data-theme="light"] .header--transparent.header--scrolled .theme-toggle {
    background: var(--bg-tertiary); border-color: var(--border);
}
[data-theme="light"] .header--transparent.header--scrolled .search-box input {
    background: var(--bg-tertiary); border-color: var(--border);
}

/* ========================================
   Hero Banner
   ======================================== */
.hero {
    position: relative; height: 520px; background-size: cover; background-position: center;
    display: flex; align-items: center; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--bg-primary) 8%, transparent 55%); z-index: 1;
}
.hero::after {
    content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--bg-primary)); z-index: 1;
}
.hero-content { position: relative; z-index: 3; max-width: 680px; padding: 2rem; animation: fadeInUp 0.9s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem;
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a); color: #fff;
    border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;
    box-shadow: 0 4px 20px var(--accent-red-glow); animation: pulse-badge 2.5s infinite;
}
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 4px 20px var(--accent-red-glow); }
    50% { box-shadow: 0 4px 35px var(--accent-red-glow); }
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.15; margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-meta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; font-size: 0.9rem; color: var(--text-secondary); }
.hero-meta-item { display: flex; align-items: center; gap: 0.4rem; }
.hero-meta-item i { color: var(--accent-gold); font-size: 0.9rem; }
.hero-rating { display: flex; align-items: center; gap: 0.3rem; color: var(--accent-gold); font-weight: 800; font-size: 1rem; }
.hero-desc { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 1.8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.7; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.hero-dots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 3; }
.hero-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.35); border: 2px solid transparent; cursor: pointer; transition: var(--transition-normal); }
.hero-dot.active { background: var(--accent-red); border-color: #fff; transform: scale(1.3); box-shadow: 0 0 15px var(--accent-red-glow); }

.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
    border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 1.1rem; cursor: pointer; transition: var(--transition-normal); z-index: 3; backdrop-filter: blur(10px);
}
.hero-nav:hover { background: var(--accent-red); border-color: var(--accent-red); transform: translateY(-50%) scale(1.1); box-shadow: 0 8px 30px var(--accent-red-glow); }
.hero-nav.prev { left: 2rem; }
.hero-nav.next { right: 2rem; }

/* ========================================
   Page Layout
   ======================================== */
.page-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; max-width: var(--container-max); margin: 0 auto; padding: 2rem 1.5rem; }

/* Sections */
.section { margin-bottom: 3rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); }
.section-title { display: flex; align-items: center; gap: 0.7rem; font-size: 1.5rem; font-weight: 800; }
.section-title::before { content: ''; width: 5px; height: 28px; background: linear-gradient(to bottom, var(--accent-red), var(--accent-teal)); border-radius: var(--radius-sm); box-shadow: 0 0 15px var(--accent-red-glow); }
.section-link { display: flex; align-items: center; gap: 0.4rem; color: var(--accent-red); font-size: 0.9rem; font-weight: 600; }
.section-link:hover { gap: 0.7rem; color: var(--accent-teal); }

/* ========================================
   Card Grid & Cards
   ======================================== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.4rem; }

.card-ultra {
    position: relative; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border); transition: var(--transition-normal); backdrop-filter: blur(10px);
}
.card-ultra:hover { transform: translateY(-10px) scale(1.02); border-color: var(--accent-red); box-shadow: var(--shadow-lg), var(--shadow-glow); z-index: 20; }
.card-ultra.series:hover { box-shadow: var(--shadow-lg), var(--shadow-glow-teal); border-color: var(--accent-teal); }

.card-poster-ultra { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--bg-tertiary); }
.card-poster-ultra img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.card-ultra:hover .card-poster-ultra img { transform: scale(1.15); }
.card-poster-ultra::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(3,4,7,0.95) 0%, rgba(3,4,7,0.7) 35%, transparent 75%);
    opacity: 0.7; transition: opacity var(--transition-normal);
}
.card-ultra:hover .card-poster-ultra::after { opacity: 0.5; }

.card-placeholder-poster {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--text-muted); background: var(--bg-tertiary);
}

.card-badges-ultra { position: absolute; top: 12px; right: 12px; left: 12px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 4; pointer-events: none; }
.badge-stack { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }

.preview-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
    width: 58px; height: 58px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a); border: 3px solid rgba(255,255,255,0.3);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    opacity: 0; cursor: pointer; transition: var(--transition-bounce);
    box-shadow: 0 8px 30px var(--accent-red-glow); z-index: 5;
}
.card-ultra:hover .preview-btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.preview-btn:hover { transform: translate(-50%, -50%) scale(1.15); }
.preview-btn.series { background: linear-gradient(135deg, var(--accent-teal), #00c9a0); box-shadow: 0 8px 30px var(--accent-teal-glow); }

.card-actions-ultra {
    position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transform: translateX(15px); transition: var(--transition-normal); z-index: 4;
}
.card-ultra:hover .card-actions-ultra { opacity: 1; transform: translateX(0); }
.action-btn-ultra {
    width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 0.85rem; transition: var(--transition-fast); backdrop-filter: blur(8px);
}
.action-btn-ultra:hover { background: var(--accent-red); border-color: var(--accent-red); transform: scale(1.12); box-shadow: 0 4px 15px var(--accent-red-glow); }
.action-btn-ultra.series:hover { background: var(--accent-teal); border-color: var(--accent-teal); box-shadow: 0 4px 15px var(--accent-teal-glow); }
.action-btn-ultra.favorited { background: var(--accent-red); border-color: var(--accent-red); }

.card-content-ultra { padding: 1.1rem; position: relative; z-index: 2; }
.card-title-ultra { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta-ultra { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--text-muted); }
.card-genre { display: flex; align-items: center; gap: 0.3rem; }
.card-genre i { color: var(--accent-purple); font-size: 0.7rem; }

/* ========================================
   Card Styles Variations (10 Unique Designs)
   ======================================== */

/* Style 1: Default - Standard card */
.card-style-default { /* inherits base .card-ultra */ }

/* Style 2: Classic - Netflix-style flat dark card */
.card-style-classic {
    border-radius: 4px;
    border: none;
    backdrop-filter: none;
    background: #141414;
    box-shadow: none;
}
.card-style-classic .card-poster-ultra::after {
    background: linear-gradient(to top, #141414 0%, rgba(20,20,20,0.6) 40%, transparent 70%);
    opacity: 1;
}
.card-style-classic .card-content-ultra {
    padding: 0.8rem 0.6rem;
    background: #141414;
}
.card-style-classic .card-title-ultra { font-size: 0.82rem; font-weight: 500; }
.card-style-classic .card-ctr-info { gap: 4px; }
.card-style-classic .card-ctr-badge { font-size: 0.65rem; padding: 2px 5px; }
.card-style-classic:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 50px rgba(0,0,0,0.8);
    border: none;
    z-index: 30;
}
.card-style-classic .badge-ultra {
    background: rgba(20,20,20,0.9);
    border: none;
    font-size: 0.68rem;
    padding: 3px 7px;
    border-radius: 3px;
}
.card-style-classic .preview-btn {
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.95);
    color: #141414;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Style 3: Modern - Glass morphism card */
.card-style-modern {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card-style-modern .card-poster-ultra { border-radius: 16px 16px 0 0; }
.card-style-modern .card-poster-ultra::after {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}
.card-style-modern .card-content-ultra {
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}
.card-style-modern:hover {
    transform: translateY(-12px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 80px rgba(255,59,92,0.08);
}
.card-style-modern.series:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 80px rgba(0,229,184,0.08);
}
.card-style-modern .badge-ultra {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
}
.card-style-modern .preview-btn {
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(12px);
    width: 52px; height: 52px;
}
[data-theme="light"] .card-style-modern {
    background: rgba(255,255,255,0.6);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 8px 40px rgba(0,0,0,0.06);
}

/* Style 4: Cinema - Cinematic dark with red accent */
.card-style-cinema {
    background: #0a0a0a;
    border: none;
    border-radius: 2px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.6);
    position: relative;
}
.card-style-cinema::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e50914, #ff6b6b, #e50914);
    z-index: 10;
}
.card-style-cinema .card-poster-ultra { border-radius: 0; }
.card-style-cinema .card-poster-ultra::after {
    background: linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,0.8) 30%, transparent 60%);
    opacity: 1;
}
.card-style-cinema .card-content-ultra {
    background: #0a0a0a;
    padding: 1rem 0.8rem;
}
.card-style-cinema .card-title-ultra {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 0.9rem;
}
.card-style-cinema:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(229,9,20,0.25), 0 4px 20px rgba(0,0,0,0.8);
}
.card-style-cinema:hover::before {
    background: linear-gradient(90deg, #ff0020, #ff6b6b, #ff0020);
    animation: cinema-glow 2s ease infinite;
}
@keyframes cinema-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.card-style-cinema .badge-ultra {
    background: #e50914;
    border: none;
    color: #fff;
    border-radius: 2px;
    font-weight: 700;
}
.card-style-cinema .preview-btn {
    background: #e50914;
    border: none;
    box-shadow: 0 4px 25px rgba(229,9,20,0.5);
}

/* Style 5: Neon - Cyberpunk neon glow */
.card-style-neon {
    background: rgba(0,0,0,0.92);
    border: 1px solid rgba(0,255,200,0.12);
    border-radius: 12px;
    position: relative;
}
.card-style-neon::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,255,200,0.3), rgba(0,100,255,0.3), rgba(255,0,200,0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.card-style-neon:hover::before { opacity: 1; }
.card-style-neon .card-poster-ultra::after {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,20,15,0.5) 50%, transparent 100%);
}
.card-style-neon:hover {
    transform: translateY(-10px);
    box-shadow:
        0 0 15px rgba(0,255,200,0.15),
        0 0 45px rgba(0,255,200,0.08),
        0 20px 50px rgba(0,0,0,0.6);
    border-color: rgba(0,255,200,0.4);
}
.card-style-neon.series:hover {
    box-shadow:
        0 0 15px rgba(0,200,255,0.15),
        0 0 45px rgba(0,200,255,0.08),
        0 20px 50px rgba(0,0,0,0.6);
    border-color: rgba(0,200,255,0.4);
}
.card-style-neon .badge-ultra {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(0,255,200,0.25);
    color: #00ffc8;
    text-shadow: 0 0 8px rgba(0,255,200,0.5);
}
.card-style-neon .preview-btn {
    background: linear-gradient(135deg, #00ffc8, #0099ff);
    border: none;
    box-shadow: 0 0 25px rgba(0,255,200,0.4), 0 0 60px rgba(0,255,200,0.15);
}
.card-style-neon .card-title-ultra {
    text-shadow: 0 0 20px rgba(0,255,200,0.1);
}

/* Style 6: Minimal - Ultra clean whitespace design */
.card-style-minimal {
    border: none;
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    backdrop-filter: none;
    overflow: visible;
}
.card-style-minimal .card-poster-ultra {
    border-radius: 16px;
    margin: 6px;
    overflow: hidden;
    aspect-ratio: 2/3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.card-style-minimal .card-poster-ultra::after {
    display: none;
}
.card-style-minimal .card-content-ultra {
    padding: 0.8rem 1rem 1rem;
}
.card-style-minimal .card-title-ultra {
    font-weight: 600;
    font-size: 0.88rem;
}
.card-style-minimal .card-badges-ultra {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.card-style-minimal:hover .card-badges-ultra { opacity: 1; }
.card-style-minimal:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    border: none;
}
.card-style-minimal .badge-type-ultra { display: none; }
.card-style-minimal .card-ctr-stars { margin-bottom: 0.3rem; }
.card-style-minimal .card-ctr-info {
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 8px;
    gap: 4px;
}
[data-theme="light"] .card-style-minimal {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .card-style-minimal:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

/* Style 7: Magazine - Full poster overlay layout */
.card-style-magazine {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}
.card-style-magazine .card-poster-ultra {
    aspect-ratio: 3/4;
}
.card-style-magazine .card-poster-ultra::after {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.7) 30%,
        rgba(0,0,0,0.2) 60%,
        transparent 100%
    );
    opacity: 1;
}
.card-style-magazine .card-content-ultra {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 0 1rem 1rem;
    background: none;
}
.card-style-magazine .card-title-ultra {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    -webkit-line-clamp: 2;
}
.card-style-magazine .card-meta-ultra,
.card-style-magazine .card-ctr-info { display: none; }
.card-style-magazine .card-ctr-stars .star-icon { color: #ffd700; }
.card-style-magazine:hover {
    transform: scale(1.04);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    border: none;
}
.card-style-magazine .badge-ultra {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
}

/* Style 8: Gradient - Colorful gradient overlay */
.card-style-gradient {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}
.card-style-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255,59,92,0.5) 0%,
        rgba(102,51,153,0.5) 35%,
        rgba(0,150,255,0.4) 65%,
        rgba(0,229,184,0.4) 100%
    );
    z-index: 3;
    opacity: 0.5;
    transition: opacity 0.5s ease;
    mix-blend-mode: color;
    pointer-events: none;
}
.card-style-gradient:hover::before { opacity: 0.2; }
.card-style-gradient .card-poster-ultra::after {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 2;
}
.card-style-gradient .card-content-ultra {
    position: relative;
    z-index: 4;
}
.card-style-gradient:hover {
    transform: translateY(-10px) rotate(-0.5deg);
    box-shadow: 0 20px 60px rgba(102,51,153,0.25), 0 10px 30px rgba(255,59,92,0.15);
    border: none;
}
.card-style-gradient.series::before {
    background: linear-gradient(135deg,
        rgba(0,229,184,0.5) 0%,
        rgba(0,150,255,0.5) 35%,
        rgba(102,51,153,0.4) 65%,
        rgba(255,59,92,0.3) 100%
    );
}
.card-style-gradient .badge-ultra {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
}

/* Style 9: Elegant - Luxury gold accent design */
.card-style-elegant {
    background: linear-gradient(160deg, rgba(20,18,25,1), rgba(30,25,35,1));
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.card-style-elegant::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.card-style-elegant .card-poster-ultra::after {
    background: linear-gradient(to top, rgba(20,18,25,1) 0%, rgba(20,18,25,0.7) 35%, transparent 70%);
    opacity: 1;
}
.card-style-elegant .card-content-ultra {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(212,175,55,0.1);
}
.card-style-elegant .card-title-ultra {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.card-style-elegant:hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,0.4);
    box-shadow: 0 10px 40px rgba(212,175,55,0.1), 0 4px 20px rgba(0,0,0,0.4);
}
.card-style-elegant .badge-ultra {
    background: linear-gradient(135deg, #d4af37, #c19b2e);
    color: #0a0a0a;
    border: none;
    font-weight: 700;
    border-radius: 3px;
}
.card-style-elegant .badge-ultra.rating {
    background: transparent;
    border: 1px solid rgba(212,175,55,0.4);
    color: #d4af37;
}
.card-style-elegant .preview-btn {
    background: linear-gradient(135deg, #d4af37, #a88c2a);
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 6px 25px rgba(212,175,55,0.3);
    color: #0a0a0a;
}
.card-style-elegant .card-ctr-badge {
    border-color: rgba(212,175,55,0.2);
}
[data-theme="light"] .card-style-elegant {
    background: linear-gradient(160deg, #faf8f2, #f5f0e6);
    border-color: rgba(180,150,50,0.2);
}

/* Style 10: Bold - Brutalist thick borders, bold typography */
.card-style-bold {
    border: 4px solid #ff3b5c;
    border-radius: 0;
    background: var(--bg-card);
    box-shadow: 8px 8px 0 rgba(255,59,92,0.3);
    backdrop-filter: none;
}
.card-style-bold .card-poster-ultra {
    border-radius: 0;
}
.card-style-bold .card-poster-ultra::after {
    background: linear-gradient(to top, var(--bg-primary) 0%, rgba(0,0,0,0.5) 40%, transparent 70%);
    opacity: 1;
}
.card-style-bold .card-content-ultra {
    padding: 0.8rem;
}
.card-style-bold .card-title-ultra {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
}
.card-style-bold:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 rgba(255,59,92,0.4);
    border-color: #ff3b5c;
}
.card-style-bold .badge-ultra {
    background: #ff3b5c;
    color: #fff;
    border: none;
    border-radius: 0;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 4px 8px;
    text-transform: uppercase;
}
.card-style-bold .preview-btn {
    border-radius: 0;
    border: 3px solid #fff;
}
.card-style-bold.series {
    border-color: #00e5b8;
    box-shadow: 8px 8px 0 rgba(0,229,184,0.3);
}
.card-style-bold.series:hover {
    box-shadow: 12px 12px 0 rgba(0,229,184,0.4);
    border-color: #00e5b8;
}
.card-style-bold.series .badge-ultra {
    background: #00e5b8;
    color: #0a0a0a;
}
[data-theme="light"] .card-style-bold {
    box-shadow: 6px 6px 0 rgba(255,59,92,0.2);
}
[data-theme="light"] .card-style-bold.series {
    box-shadow: 6px 6px 0 rgba(0,229,184,0.2);
}

/* ========================================
   2026 New Card Styles
   ======================================== */

/* Reset base hover for new styles */
.card-ultra.card-style-aurora:hover,
.card-ultra.card-style-holograph:hover,
.card-ultra.card-style-brutalist:hover,
.card-ultra.card-style-neumorphic:hover,
.card-ultra.card-style-glassdark:hover,
.card-ultra.card-style-retro:hover,
.card-ultra.card-style-floating:hover,
.card-ultra.card-style-spotlight:hover,
.card-ultra.card-style-polaroid:hover,
.card-ultra.card-style-cyberpunk:hover,
.card-ultra.card-style-ticket:hover,
.card-ultra.card-style-filmstrip:hover,
.card-ultra.card-style-hud:hover,
.card-ultra.card-style-watercolor:hover,
.card-ultra.card-style-vhs:hover,
.card-ultra.card-style-diamond:hover,
.card-ultra.card-style-comic:hover,
.card-ultra.card-style-origami:hover,
.card-ultra.card-style-frost:hover,
.card-ultra.card-style-lava:hover {
    transform: none;
    border-color: inherit;
    box-shadow: none;
}
.card-ultra.card-style-aurora.series:hover,
.card-ultra.card-style-holograph.series:hover,
.card-ultra.card-style-brutalist.series:hover,
.card-ultra.card-style-neumorphic.series:hover,
.card-ultra.card-style-glassdark.series:hover,
.card-ultra.card-style-retro.series:hover,
.card-ultra.card-style-floating.series:hover,
.card-ultra.card-style-spotlight.series:hover,
.card-ultra.card-style-polaroid.series:hover,
.card-ultra.card-style-cyberpunk.series:hover,
.card-ultra.card-style-ticket.series:hover,
.card-ultra.card-style-filmstrip.series:hover,
.card-ultra.card-style-hud.series:hover,
.card-ultra.card-style-watercolor.series:hover,
.card-ultra.card-style-vhs.series:hover,
.card-ultra.card-style-diamond.series:hover,
.card-ultra.card-style-comic.series:hover,
.card-ultra.card-style-origami.series:hover,
.card-ultra.card-style-frost.series:hover,
.card-ultra.card-style-lava.series:hover {
    box-shadow: none;
    border-color: inherit;
}

/* --- Aurora (شفق قطبي) --- */
.card-ultra.card-style-aurora {
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    z-index: 1;
}
.card-ultra.card-style-aurora::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #ff3b5c, #a78bfa, #00e5b8, #60a5fa, #ffc145, #ff3b5c);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    animation: aurora-spin 4s linear infinite;
}
@keyframes aurora-spin {
    to { transform: rotate(360deg); }
}
.card-ultra.card-style-aurora::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: calc(var(--radius-lg) - 2px);
    background: var(--bg-card);
    z-index: -1;
}
.card-ultra.card-style-aurora:hover::before { opacity: 1; }
.card-ultra.card-style-aurora:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 60px rgba(167, 139, 250, 0.3) !important;
    border-color: transparent !important;
}
.card-ultra.card-style-aurora .card-poster-ultra { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.card-ultra.card-style-aurora .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 50%, rgba(167, 139, 250, 0.2) 100%);
    opacity: 1;
}
.card-ultra.card-style-aurora .card-content-ultra { padding: 1rem; }
.card-ultra.card-style-aurora .card-title-ultra { font-weight: 700; }
.card-ultra.card-style-aurora .badge-ultra {
    border: none;
    background: rgba(167, 139, 250, 0.3);
    backdrop-filter: blur(8px);
}
.card-ultra.card-style-aurora .badge-ultra.rating {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #fff;
}

/* --- Holograph (هولوغرافي) --- */
.card-ultra.card-style-holograph {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(23, 26, 40, 0.9), rgba(40, 45, 70, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}
.card-ultra.card-style-holograph::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 59, 92, 0.1) 40%,
        rgba(0, 229, 184, 0.1) 50%,
        rgba(255, 193, 69, 0.1) 60%,
        transparent 70%
    );
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
}
.card-ultra.card-style-holograph:hover::before { transform: translate(25%, 25%); }
.card-ultra.card-style-holograph:hover {
    transform: perspective(800px) rotateY(-3deg) rotateX(2deg) translateY(-5px) !important;
    box-shadow: 10px 20px 60px rgba(0, 229, 184, 0.15), -5px -5px 30px rgba(255, 59, 92, 0.1) !important;
    border-color: rgba(0, 229, 184, 0.3) !important;
}
.card-ultra.card-style-holograph .card-poster-ultra {
    border-radius: var(--radius-md);
    margin: 8px 8px 0 8px;
    overflow: hidden;
}
.card-ultra.card-style-holograph .card-poster-ultra::after {
    background: linear-gradient(135deg, rgba(0, 229, 184, 0.1) 0%, transparent 50%, rgba(255, 59, 92, 0.1) 100%);
    mix-blend-mode: overlay;
    opacity: 1;
}
.card-ultra.card-style-holograph .card-content-ultra { padding: 0.8rem 1rem 1rem; }
.card-ultra.card-style-holograph .card-title-ultra { font-weight: 600; letter-spacing: 0.3px; }
.card-ultra.card-style-holograph .badge-ultra {
    background: rgba(0, 229, 184, 0.15);
    border: 1px solid rgba(0, 229, 184, 0.3);
}
.card-ultra.card-style-holograph .badge-ultra.quality {
    background: rgba(255, 59, 92, 0.2);
    border-color: rgba(255, 59, 92, 0.4);
    color: #ff6b8a;
}

/* --- Brutalist (بروتاليست) --- */
.card-ultra.card-style-brutalist {
    border-radius: 0 !important;
    background: var(--bg-secondary);
    border: 3px solid var(--text-primary) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-fast);
    box-shadow: 8px 8px 0 var(--accent-red);
    backdrop-filter: none;
}
.card-ultra.card-style-brutalist:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: 12px 12px 0 var(--accent-red) !important;
    border-color: var(--text-primary) !important;
}
.card-ultra.card-style-brutalist.series {
    box-shadow: 8px 8px 0 var(--accent-teal);
}
.card-ultra.card-style-brutalist.series:hover {
    box-shadow: 12px 12px 0 var(--accent-teal) !important;
}
.card-ultra.card-style-brutalist .card-poster-ultra {
    border-radius: 0;
    border-bottom: 3px solid var(--text-primary);
}
.card-ultra.card-style-brutalist .card-poster-ultra::after { display: none; }
.card-ultra.card-style-brutalist .card-content-ultra {
    padding: 0.8rem 1rem;
    background: var(--bg-secondary);
}
.card-ultra.card-style-brutalist .card-title-ultra {
    font-weight: 900;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}
.card-ultra.card-style-brutalist .badge-ultra {
    border-radius: 0;
    border: 2px solid currentColor;
    background: transparent;
    font-weight: 900;
}
.card-ultra.card-style-brutalist .badge-ultra.quality {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}
.card-ultra.card-style-brutalist .badge-ultra.rating {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #000;
}
.card-ultra.card-style-brutalist .preview-btn {
    border-radius: 0;
    border: 2px solid #fff;
}

/* --- Neumorphic (نيومورفيك) --- */
.card-ultra.card-style-neumorphic {
    border-radius: var(--radius-xl);
    background: var(--bg-tertiary);
    border: none !important;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5), -8px -8px 20px rgba(50, 55, 80, 0.3);
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    backdrop-filter: none;
}
.card-ultra.card-style-neumorphic:hover {
    transform: translateY(-5px) !important;
    box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.6), -12px -12px 30px rgba(50, 55, 80, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
.card-ultra.card-style-neumorphic .card-poster-ultra {
    border-radius: var(--radius-lg);
    margin: 10px;
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.3), inset -4px -4px 10px rgba(50, 55, 80, 0.2);
    overflow: hidden;
}
.card-ultra.card-style-neumorphic .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 60%, rgba(17, 20, 32, 0.8) 100%);
    opacity: 1;
}
.card-ultra.card-style-neumorphic .card-content-ultra { padding: 0.6rem 1.2rem 1.2rem; }
.card-ultra.card-style-neumorphic .card-title-ultra { font-weight: 600; }
.card-ultra.card-style-neumorphic .badge-ultra {
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4), -3px -3px 8px rgba(50, 55, 80, 0.2);
    border: none;
}
.card-ultra.card-style-neumorphic .preview-btn {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), -4px -4px 10px rgba(50, 55, 80, 0.2);
    border-radius: var(--radius-full);
}
[data-theme="light"] .card-ultra.card-style-neumorphic {
    background: #e8ecf0;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.1), -8px -8px 20px rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .card-ultra.card-style-neumorphic:hover {
    box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.15), -12px -12px 30px rgba(255, 255, 255, 1) !important;
}

/* --- Glass Dark (زجاج داكن) --- */
.card-ultra.card-style-glassdark {
    border-radius: var(--radius-lg);
    background: rgba(10, 12, 20, 0.7);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
}
.card-ultra.card-style-glassdark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}
.card-ultra.card-style-glassdark:hover::before { opacity: 1; }
.card-ultra.card-style-glassdark:hover {
    transform: translateY(-6px) !important;
    background: rgba(10, 12, 20, 0.85);
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
.card-ultra.card-style-glassdark .card-poster-ultra {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: relative;
}
.card-ultra.card-style-glassdark .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 20, 0.95) 100%);
    opacity: 1;
}
.card-ultra.card-style-glassdark .card-content-ultra {
    padding: 1rem;
    position: relative;
    margin-top: -2rem;
    z-index: 2;
}
.card-ultra.card-style-glassdark .card-title-ultra {
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.card-ultra.card-style-glassdark .badge-ultra {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Retro (ريترو) --- */
.card-ultra.card-style-retro {
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #1a1625 0%, #0d0a18 100%);
    border: 2px solid #2a2040 !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    backdrop-filter: none;
}
.card-ultra.card-style-retro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 59, 92, 0.03) 2px,
        rgba(255, 59, 92, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}
.card-ultra.card-style-retro:hover {
    transform: translateY(-4px) !important;
    border-color: #ff3b5c !important;
    box-shadow: 0 0 20px rgba(255, 59, 92, 0.3), inset 0 0 20px rgba(255, 59, 92, 0.05) !important;
}
.card-ultra.card-style-retro .card-poster-ultra { border-radius: 4px 4px 0 0; }
.card-ultra.card-style-retro .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 60%, #0d0a18 100%);
    opacity: 1;
}
.card-ultra.card-style-retro .card-content-ultra {
    padding: 0.8rem 1rem;
    border-top: 1px solid #2a2040;
}
.card-ultra.card-style-retro .card-title-ultra {
    font-weight: 700;
    color: #ff6b8a;
    text-shadow: 0 0 10px rgba(255, 59, 92, 0.3);
}
.card-ultra.card-style-retro .badge-ultra {
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 1px;
    background: rgba(255, 59, 92, 0.2);
    border: 1px solid rgba(255, 59, 92, 0.5);
    color: #ff6b8a;
}
.card-ultra.card-style-retro .badge-ultra.rating {
    background: rgba(255, 193, 69, 0.2);
    border-color: rgba(255, 193, 69, 0.5);
    color: #ffc145;
}
.card-ultra.card-style-retro .preview-btn {
    border: 1px solid #ff3b5c;
    background: rgba(255, 59, 92, 0.2);
}

/* --- Floating (عائم) --- */
.card-ultra.card-style-floating {
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: none;
}
.card-ultra.card-style-floating:hover {
    transform: translateY(-15px) rotate(-1deg) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 15px 30px rgba(255, 59, 92, 0.1) !important;
}
.card-ultra.card-style-floating .card-poster-ultra {
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
}
.card-ultra.card-style-floating:hover .card-poster-ultra img {
    transform: scale(1.08);
}
.card-ultra.card-style-floating .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 40%, rgba(3, 4, 7, 0.95) 100%);
    opacity: 1;
}
.card-ultra.card-style-floating .card-content-ultra {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem;
    z-index: 2;
}
.card-ultra.card-style-floating .card-title-ultra {
    font-weight: 800;
    font-size: 0.95rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    color: #fff;
}
.card-ultra.card-style-floating .card-meta-ultra { margin-top: 0.3rem; }
.card-ultra.card-style-floating .badge-ultra {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}
.card-ultra.card-style-floating .card-ctr-info { display: none; }
.card-ultra.card-style-floating .card-ctr-stars { display: none; }

/* --- Spotlight (سبوتلايت) --- */
.card-ultra.card-style-spotlight {
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
}
.card-ultra.card-style-spotlight::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 92, 0.5) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
}
.card-ultra.card-style-spotlight:hover::after {
    opacity: 1;
    transform: translate(-30px, 30px);
}
.card-ultra.card-style-spotlight.series::after {
    background: radial-gradient(circle, rgba(0, 229, 184, 0.5) 0%, transparent 70%);
}
.card-ultra.card-style-spotlight:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(255, 59, 92, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}
.card-ultra.card-style-spotlight.series:hover {
    border-color: rgba(0, 229, 184, 0.4) !important;
}
.card-ultra.card-style-spotlight .card-poster-ultra { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.card-ultra.card-style-spotlight .card-poster-ultra::after {
    background: radial-gradient(ellipse at top right, rgba(255, 59, 92, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.card-ultra.card-style-spotlight:hover .card-poster-ultra::after { opacity: 1; }
.card-ultra.card-style-spotlight .card-content-ultra { padding: 1rem; }
.card-ultra.card-style-spotlight .card-title-ultra { font-weight: 700; }
.card-ultra.card-style-spotlight .badge-ultra {
    border-radius: var(--radius-sm);
    background: rgba(255, 59, 92, 0.15);
    border: 1px solid rgba(255, 59, 92, 0.3);
}
.card-ultra.card-style-spotlight.series .badge-ultra {
    background: rgba(0, 229, 184, 0.15);
    border-color: rgba(0, 229, 184, 0.3);
}

/* --- Polaroid (بولارويد) --- */
.card-ultra.card-style-polaroid {
    border-radius: var(--radius-sm) !important;
    background: #fafafa;
    border: none !important;
    padding: 10px 10px 0 10px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: rotate(-1deg);
    backdrop-filter: none;
}
.card-ultra.card-style-polaroid:nth-child(even) { transform: rotate(1deg); }
.card-ultra.card-style-polaroid:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.03) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    border-color: transparent !important;
}
.card-ultra.card-style-polaroid .card-poster-ultra {
    border-radius: 2px;
    border: none;
}
.card-ultra.card-style-polaroid .card-poster-ultra::after { display: none; }
.card-ultra.card-style-polaroid .card-content-ultra {
    padding: 0.8rem 0.5rem;
    background: #fafafa;
}
.card-ultra.card-style-polaroid .card-title-ultra {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 0.85rem;
}
.card-ultra.card-style-polaroid .card-ctr-info { display: none; }
.card-ultra.card-style-polaroid .card-meta-ultra span { color: #555; }
.card-ultra.card-style-polaroid .badge-ultra {
    background: var(--accent-red);
    color: #fff;
    border: none;
    border-radius: 4px;
}
.card-ultra.card-style-polaroid .badge-type-ultra {
    background: #1a1a2e;
    color: #fff;
}
.card-ultra.card-style-polaroid .card-ctr-stars .star-icon { color: var(--accent-gold); }
.card-ultra.card-style-polaroid .card-actions-ultra .action-btn-ultra {
    background: rgba(0, 0, 0, 0.7);
}
.card-ultra.card-style-polaroid .preview-btn {
    background: rgba(26, 26, 46, 0.9);
}
[data-theme="light"] .card-ultra.card-style-polaroid {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* --- Cyberpunk (سايبربنك) --- */
.card-ultra.card-style-cyberpunk {
    border-radius: 4px !important;
    background: linear-gradient(180deg, #0a0015 0%, #1a0030 100%);
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    backdrop-filter: none;
}
.card-ultra.card-style-cyberpunk::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
    animation: cyberpunk-scan 3s linear infinite;
    z-index: 5;
}
@keyframes cyberpunk-scan {
    0% { left: -100%; }
    100% { left: 100%; }
}
.card-ultra.card-style-cyberpunk::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 255, 255, 0.02) 3px,
        rgba(0, 255, 255, 0.02) 6px
    );
    pointer-events: none;
    z-index: 1;
}
.card-ultra.card-style-cyberpunk:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 255, 255, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), 0 0 30px rgba(0, 255, 255, 0.1), inset 0 0 30px rgba(255, 0, 255, 0.05) !important;
}
.card-ultra.card-style-cyberpunk .card-poster-ultra { border-radius: 0; }
.card-ultra.card-style-cyberpunk .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 50%, #0a0015 100%);
    opacity: 1;
}
.card-ultra.card-style-cyberpunk .card-content-ultra {
    padding: 0.8rem 1rem;
    position: relative;
    z-index: 2;
}
.card-ultra.card-style-cyberpunk .card-title-ultra {
    font-weight: 800;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    font-size: 0.9rem;
}
.card-ultra.card-style-cyberpunk .badge-ultra {
    border-radius: 2px;
    background: rgba(255, 0, 255, 0.2);
    border: 1px solid rgba(255, 0, 255, 0.5);
    color: #ff66ff;
    font-family: monospace;
}
.card-ultra.card-style-cyberpunk .badge-ultra.quality {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.5);
    color: #00ffff;
}
.card-ultra.card-style-cyberpunk .badge-ultra.rating {
    background: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.5);
    color: #ffff00;
}
.card-ultra.card-style-cyberpunk .preview-btn {
    background: rgba(0, 255, 255, 0.2);
    border: 1px solid #00ffff;
    color: #00ffff;
    border-radius: 2px;
}
.card-ultra.card-style-cyberpunk .card-ctr-stars .star-icon { color: #ff00ff; }
.card-ultra.card-style-cyberpunk .card-genre { color: #ff66ff; }

/* ========================================
   Card Styles - Premium Collection 2026
   ======================================== */

/* --- Ticket (تذكرة سينما) --- */
.card-ultra.card-style-ticket {
    border-radius: 0 !important;
    background: linear-gradient(135deg, #fdf6e3 0%, #f5e6c8 100%);
    border: 2px dashed #c8a96e !important;
    position: relative;
    overflow: visible;
    transition: var(--transition-normal);
    box-shadow: 4px 4px 0 rgba(139, 109, 56, 0.3);
    transform: rotate(-0.5deg);
    backdrop-filter: none;
}
.card-ultra.card-style-ticket::before {
    content: '★ ADMIT ONE ★';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #c8a96e;
    color: #fdf6e3;
    padding: 2px 14px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 3px;
    z-index: 5;
    border-radius: 2px;
}
.card-ultra.card-style-ticket::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    box-shadow: calc(100% + 16px) 0 0 0 var(--bg-tertiary);
    z-index: 3;
}
.card-ultra.card-style-ticket:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.03) !important;
    box-shadow: 8px 12px 25px rgba(139, 109, 56, 0.4) !important;
    border-color: #8b6d38 !important;
}
.card-ultra.card-style-ticket.series:hover {
    box-shadow: 8px 12px 25px rgba(0, 200, 180, 0.3) !important;
    border-color: var(--accent-teal) !important;
}
.card-ultra.card-style-ticket .card-poster-ultra { border-radius: 0; border: 1px solid #c8a96e; }
.card-ultra.card-style-ticket .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 50%, rgba(253, 246, 227, 0.9) 100%);
}
.card-ultra.card-style-ticket .card-content-ultra { padding: 0.8rem; background: transparent; }
.card-ultra.card-style-ticket .card-title-ultra { font-weight: 700; color: #3e2c0a; font-family: Georgia, serif; }
.card-ultra.card-style-ticket .badge-ultra {
    background: #c8a96e; color: #fff; border: none; border-radius: 0;
}
.card-ultra.card-style-ticket .badge-type-ultra { background: #3e2c0a; color: #fdf6e3; }
.card-ultra.card-style-ticket .preview-btn {
    background: rgba(62, 44, 10, 0.85); border-radius: 0;
}
.card-ultra.card-style-ticket .card-meta-ultra span { color: #6b5630; }
.card-ultra.card-style-ticket .card-ctr-stars .star-icon { color: #c8a96e; }
.card-ultra.card-style-ticket .card-genre { color: #8b6d38; }

/* --- Filmstrip (شريط فيلم) --- */
.card-ultra.card-style-filmstrip {
    border-radius: 0 !important;
    background: #1a1a1a;
    border: none !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
    padding: 0 18px;
    backdrop-filter: none;
}
.card-ultra.card-style-filmstrip::before,
.card-ultra.card-style-filmstrip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 4px,
        #333 4px,
        #333 6px,
        transparent 6px,
        transparent 14px,
        #333 14px,
        #333 16px,
        transparent 16px,
        transparent 20px
    );
    z-index: 3;
}
.card-ultra.card-style-filmstrip::before { left: 0; }
.card-ultra.card-style-filmstrip::after { right: 0; }
.card-ultra.card-style-filmstrip:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 40px rgba(255, 200, 0, 0.2) !important;
}
.card-ultra.card-style-filmstrip.series:hover {
    box-shadow: 0 15px 40px rgba(0, 200, 180, 0.2) !important;
}
.card-ultra.card-style-filmstrip .card-poster-ultra { border-radius: 0; }
.card-ultra.card-style-filmstrip .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 40%, rgba(26, 26, 26, 0.95) 100%);
}
.card-ultra.card-style-filmstrip .card-content-ultra {
    padding: 0.7rem 0.4rem; background: #1a1a1a;
}
.card-ultra.card-style-filmstrip .card-title-ultra {
    font-weight: 600; color: #f0e68c; font-size: 0.85rem;
}
.card-ultra.card-style-filmstrip .badge-ultra {
    background: rgba(240, 230, 140, 0.15); color: #f0e68c;
    border: 1px solid rgba(240, 230, 140, 0.3); border-radius: 0;
}
.card-ultra.card-style-filmstrip .badge-type-ultra { background: #f0e68c; color: #1a1a1a; }
.card-ultra.card-style-filmstrip .preview-btn {
    background: rgba(240, 230, 140, 0.2); border: 1px solid #f0e68c; color: #f0e68c;
}
.card-ultra.card-style-filmstrip .card-meta-ultra span { color: #999; }
.card-ultra.card-style-filmstrip .card-ctr-stars .star-icon { color: #f0e68c; }
.card-ultra.card-style-filmstrip .card-genre { color: #d4c460; }

/* --- HUD (واجهة مستقبلية) --- */
@keyframes hud-scan-line {
    0% { top: -10%; }
    100% { top: 110%; }
}
@keyframes hud-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.card-ultra.card-style-hud {
    border-radius: 2px !important;
    background: linear-gradient(180deg, rgba(0, 20, 20, 0.95) 0%, rgba(0, 10, 15, 0.98) 100%);
    border: 1px solid rgba(0, 255, 200, 0.25) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.1), inset 0 0 30px rgba(0, 255, 200, 0.03);
    backdrop-filter: none;
}
.card-ultra.card-style-hud::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.6), transparent);
    animation: hud-scan-line 2.5s linear infinite;
    z-index: 5;
}
.card-ultra.card-style-hud::after {
    content: '◎ SCANNING';
    position: absolute;
    top: 8px; right: 8px;
    font-size: 0.5rem;
    color: rgba(0, 255, 200, 0.7);
    letter-spacing: 2px;
    animation: hud-pulse 1.5s ease-in-out infinite;
    z-index: 5;
}
.card-ultra.card-style-hud:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 0 30px rgba(0, 255, 200, 0.25), inset 0 0 50px rgba(0, 255, 200, 0.05) !important;
    border-color: rgba(0, 255, 200, 0.6) !important;
}
.card-ultra.card-style-hud.series:hover {
    box-shadow: 0 0 30px rgba(0, 200, 255, 0.25), inset 0 0 50px rgba(0, 200, 255, 0.05) !important;
    border-color: var(--accent-teal) !important;
}
.card-ultra.card-style-hud .card-poster-ultra { border-radius: 1px; }
.card-ultra.card-style-hud .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 30%, rgba(0, 15, 15, 0.95) 100%);
}
.card-ultra.card-style-hud .card-content-ultra { padding: 0.7rem; background: transparent; }
.card-ultra.card-style-hud .card-title-ultra {
    font-weight: 500; color: #00ffc8; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 1px;
}
.card-ultra.card-style-hud .badge-ultra {
    background: rgba(0, 255, 200, 0.08); color: #00ffc8;
    border: 1px solid rgba(0, 255, 200, 0.3); border-radius: 1px;
}
.card-ultra.card-style-hud .badge-type-ultra { background: rgba(0, 255, 200, 0.2); color: #00ffc8; }
.card-ultra.card-style-hud .preview-btn {
    background: rgba(0, 255, 200, 0.1); border: 1px solid rgba(0, 255, 200, 0.5); color: #00ffc8;
    border-radius: 50%;
}
.card-ultra.card-style-hud .card-meta-ultra span { color: rgba(0, 255, 200, 0.5); }
.card-ultra.card-style-hud .card-ctr-stars .star-icon { color: #00ffc8; }
.card-ultra.card-style-hud .card-genre { color: #00ddb0; }

/* --- Watercolor (ألوان مائية) --- */
.card-ultra.card-style-watercolor {
    border-radius: var(--radius-xl) !important;
    background: linear-gradient(135deg, #f8e8f0 0%, #e8f0f8 40%, #f0f8e8 70%, #f8f0e8 100%);
    border: none !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 0 8px 30px rgba(180, 140, 200, 0.2);
    backdrop-filter: none;
}
.card-ultra.card-style-watercolor::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 150, 180, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(150, 180, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(180, 255, 150, 0.12) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
}
.card-ultra.card-style-watercolor:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 20px 50px rgba(180, 140, 200, 0.3) !important;
}
.card-ultra.card-style-watercolor.series:hover {
    box-shadow: 0 20px 50px rgba(0, 200, 180, 0.25) !important;
}
.card-ultra.card-style-watercolor .card-poster-ultra {
    border-radius: var(--radius-lg); border: 3px solid rgba(255, 255, 255, 0.6);
}
.card-ultra.card-style-watercolor .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 50%, rgba(248, 232, 240, 0.85) 100%);
}
.card-ultra.card-style-watercolor .card-content-ultra { padding: 0.8rem; background: transparent; }
.card-ultra.card-style-watercolor .card-title-ultra {
    font-weight: 600; color: #5a3d6a; font-style: italic;
}
.card-ultra.card-style-watercolor .badge-ultra {
    background: rgba(255, 255, 255, 0.6); color: #6a4d7a;
    border: 1px solid rgba(180, 140, 200, 0.3); border-radius: var(--radius-full);
}
.card-ultra.card-style-watercolor .badge-type-ultra { background: rgba(90, 61, 106, 0.7); color: #fff; }
.card-ultra.card-style-watercolor .preview-btn {
    background: rgba(90, 61, 106, 0.6); backdrop-filter: blur(4px);
}
.card-ultra.card-style-watercolor .card-meta-ultra span { color: #8a6d9a; }
.card-ultra.card-style-watercolor .card-ctr-stars .star-icon { color: #d4a0c0; }
.card-ultra.card-style-watercolor .card-genre { color: #7a5d8a; }

/* --- VHS (كاسيت قديم) --- */
@keyframes vhs-tracking {
    0%, 100% { opacity: 0; transform: translateY(0); }
    10% { opacity: 1; }
    15% { opacity: 0; transform: translateY(5px); }
    50% { opacity: 0; }
    55% { opacity: 1; transform: translateY(-3px); }
    60% { opacity: 0; }
}
.card-ultra.card-style-vhs {
    border-radius: var(--radius-sm) !important;
    background: #1c1c1c;
    border: 2px solid #333 !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
}
.card-ultra.card-style-vhs::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(255, 255, 255, 0.02) 2px,
        rgba(255, 255, 255, 0.02) 4px
    );
    z-index: 3;
    pointer-events: none;
}
.card-ultra.card-style-vhs::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    top: 40%;
    background: rgba(255, 255, 255, 0.08);
    animation: vhs-tracking 4s ease-in-out infinite;
    z-index: 4;
    pointer-events: none;
}
.card-ultra.card-style-vhs:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(200, 50, 50, 0.2) !important;
    border-color: #666 !important;
}
.card-ultra.card-style-vhs.series:hover {
    box-shadow: 0 10px 30px rgba(0, 200, 180, 0.2) !important;
}
.card-ultra.card-style-vhs .card-poster-ultra { border-radius: 2px; filter: saturate(0.8) contrast(1.1); }
.card-ultra.card-style-vhs .card-poster-ultra::after {
    background: linear-gradient(180deg, rgba(28, 28, 28, 0.2) 0%, rgba(28, 28, 28, 0.9) 100%);
}
.card-ultra.card-style-vhs .card-content-ultra { padding: 0.7rem; background: #1c1c1c; }
.card-ultra.card-style-vhs .card-title-ultra {
    font-weight: 700; color: #e0e0e0; text-shadow: 2px 0 #ff0000, -2px 0 #00ffff;
    font-size: 0.83rem;
}
.card-ultra.card-style-vhs .badge-ultra {
    background: rgba(255, 255, 255, 0.08); color: #bbb;
    border: 1px solid #444; border-radius: 2px;
}
.card-ultra.card-style-vhs .badge-type-ultra { background: #c0392b; color: #fff; }
.card-ultra.card-style-vhs .preview-btn {
    background: rgba(192, 57, 43, 0.7); border-radius: var(--radius-sm);
}
.card-ultra.card-style-vhs .card-meta-ultra span { color: #777; }
.card-ultra.card-style-vhs .card-ctr-stars .star-icon { color: #e74c3c; }
.card-ultra.card-style-vhs .card-genre { color: #999; }

/* --- Diamond (ألماسي) --- */
@keyframes diamond-sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
.card-ultra.card-style-diamond {
    border-radius: var(--radius-md) !important;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(200, 220, 255, 0.25) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(100, 150, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
}
.card-ultra.card-style-diamond::before {
    content: '✦';
    position: absolute;
    top: 12px; right: 12px;
    font-size: 1rem;
    color: rgba(200, 220, 255, 0.7);
    animation: diamond-sparkle 3s ease-in-out infinite;
    z-index: 5;
}
.card-ultra.card-style-diamond::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 0%, transparent 40%,
        rgba(200, 220, 255, 0.05) 45%,
        rgba(200, 220, 255, 0.1) 50%,
        rgba(200, 220, 255, 0.05) 55%,
        transparent 60%, transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}
.card-ultra.card-style-diamond:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 40px rgba(100, 150, 255, 0.3),
                0 0 20px rgba(200, 220, 255, 0.15) !important;
    border-color: rgba(200, 220, 255, 0.5) !important;
}
.card-ultra.card-style-diamond.series:hover {
    box-shadow: 0 15px 40px rgba(0, 200, 180, 0.25),
                0 0 20px rgba(0, 200, 180, 0.15) !important;
    border-color: var(--accent-teal) !important;
}
.card-ultra.card-style-diamond .card-poster-ultra {
    border-radius: var(--radius-sm); border: 1px solid rgba(200, 220, 255, 0.15);
}
.card-ultra.card-style-diamond .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 40%, rgba(26, 26, 46, 0.9) 100%);
}
.card-ultra.card-style-diamond .card-content-ultra { padding: 0.8rem; background: transparent; }
.card-ultra.card-style-diamond .card-title-ultra {
    font-weight: 300; color: #c8dcff; letter-spacing: 1.5px; text-transform: uppercase;
    font-size: 0.8rem;
}
.card-ultra.card-style-diamond .badge-ultra {
    background: rgba(200, 220, 255, 0.1); color: #c8dcff;
    border: 1px solid rgba(200, 220, 255, 0.2); border-radius: var(--radius-sm);
}
.card-ultra.card-style-diamond .badge-type-ultra { background: rgba(200, 220, 255, 0.2); color: #e8f0ff; }
.card-ultra.card-style-diamond .preview-btn {
    background: rgba(200, 220, 255, 0.15); border: 1px solid rgba(200, 220, 255, 0.4);
    color: #c8dcff;
}
.card-ultra.card-style-diamond .card-meta-ultra span { color: rgba(200, 220, 255, 0.5); }
.card-ultra.card-style-diamond .card-ctr-stars .star-icon { color: #c8dcff; }
.card-ultra.card-style-diamond .card-genre { color: #a0b8e0; }

/* --- Comic (كوميك) --- */
.card-ultra.card-style-comic {
    border-radius: 4px !important;
    background: #fff9e6;
    border: 3px solid #222 !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 5px 5px 0 #222;
    backdrop-filter: none;
}
.card-ultra.card-style-comic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #222 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.04;
    z-index: 1;
    pointer-events: none;
}
.card-ultra.card-style-comic::after {
    content: 'POW!';
    position: absolute;
    top: 8px; left: 8px;
    background: #ff3366;
    color: #fff;
    font-weight: 900;
    font-size: 0.55rem;
    padding: 2px 8px;
    border-radius: 2px;
    border: 2px solid #222;
    transform: rotate(-5deg);
    z-index: 5;
    letter-spacing: 1px;
}
.card-ultra.card-style-comic:hover {
    transform: translateY(-6px) scale(1.04) rotate(1deg) !important;
    box-shadow: 8px 8px 0 #222 !important;
    border-color: #ff3366 !important;
}
.card-ultra.card-style-comic.series:hover {
    border-color: var(--accent-teal) !important;
}
.card-ultra.card-style-comic .card-poster-ultra {
    border-radius: 2px; border: 2px solid #222; filter: contrast(1.15) saturate(1.3);
}
.card-ultra.card-style-comic .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 50%, rgba(255, 249, 230, 0.9) 100%);
}
.card-ultra.card-style-comic .card-content-ultra { padding: 0.7rem; background: transparent; }
.card-ultra.card-style-comic .card-title-ultra {
    font-weight: 900; color: #222; text-transform: uppercase;
    font-size: 0.85rem; letter-spacing: 0.5px;
}
.card-ultra.card-style-comic .badge-ultra {
    background: #ffdd00; color: #222; border: 2px solid #222;
    border-radius: 2px; font-weight: 800;
}
.card-ultra.card-style-comic .badge-type-ultra { background: #ff3366; color: #fff; border-color: #222; }
.card-ultra.card-style-comic .preview-btn {
    background: #ff3366; border: 2px solid #222; color: #fff; border-radius: 4px;
}
.card-ultra.card-style-comic .card-meta-ultra span { color: #555; font-weight: 600; }
.card-ultra.card-style-comic .card-ctr-stars .star-icon { color: #ffdd00; }
.card-ultra.card-style-comic .card-genre { color: #ff3366; font-weight: 700; }

/* --- Origami (أوريغامي) --- */
.card-ultra.card-style-origami {
    border-radius: 0 !important;
    background: linear-gradient(135deg, #f5f0e8 0%, #ebe3d5 100%);
    border: 1px solid rgba(180, 160, 130, 0.3) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
    backdrop-filter: none;
}
.card-ultra.card-style-origami::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 20px; height: 20px;
    background: linear-gradient(225deg, transparent 50%, rgba(180, 160, 130, 0.2) 50%);
    z-index: 5;
}
.card-ultra.card-style-origami::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 48%, rgba(180, 160, 130, 0.06) 49%, rgba(180, 160, 130, 0.06) 51%, transparent 52%);
    z-index: 1;
    pointer-events: none;
}
.card-ultra.card-style-origami:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 4px 12px 30px rgba(0, 0, 0, 0.15) !important;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
}
.card-ultra.card-style-origami.series:hover {
    box-shadow: 4px 12px 30px rgba(0, 200, 180, 0.2) !important;
}
.card-ultra.card-style-origami .card-poster-ultra {
    border-radius: 0; border: none;
}
.card-ultra.card-style-origami .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 50%, rgba(245, 240, 232, 0.9) 100%);
}
.card-ultra.card-style-origami .card-content-ultra { padding: 0.8rem; background: transparent; }
.card-ultra.card-style-origami .card-title-ultra {
    font-weight: 600; color: #4a3f2f; font-size: 0.85rem;
}
.card-ultra.card-style-origami .badge-ultra {
    background: rgba(180, 160, 130, 0.15); color: #6b5d4a;
    border: 1px solid rgba(180, 160, 130, 0.3); border-radius: 0;
}
.card-ultra.card-style-origami .badge-type-ultra { background: #6b5d4a; color: #f5f0e8; }
.card-ultra.card-style-origami .preview-btn {
    background: rgba(74, 63, 47, 0.7); border-radius: 0;
}
.card-ultra.card-style-origami .card-meta-ultra span { color: #8a7d6a; }
.card-ultra.card-style-origami .card-ctr-stars .star-icon { color: #b4a082; }
.card-ultra.card-style-origami .card-genre { color: #7a6d5a; }

/* --- Frost (صقيع) --- */
@keyframes frost-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-8px) rotate(180deg); opacity: 1; }
}
.card-ultra.card-style-frost {
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(180deg, rgba(220, 235, 255, 0.95) 0%, rgba(200, 225, 250, 0.9) 50%, rgba(180, 210, 245, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(100, 160, 230, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
}
.card-ultra.card-style-frost::before {
    content: '❄';
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.9rem;
    animation: frost-drift 4s ease-in-out infinite;
    z-index: 5;
    opacity: 0.6;
}
.card-ultra.card-style-frost::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
}
.card-ultra.card-style-frost:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 15px 40px rgba(100, 160, 230, 0.35),
                0 0 25px rgba(200, 230, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}
.card-ultra.card-style-frost.series:hover {
    box-shadow: 0 15px 40px rgba(0, 200, 200, 0.25),
                0 0 25px rgba(0, 200, 200, 0.15) !important;
}
.card-ultra.card-style-frost .card-poster-ultra {
    border-radius: var(--radius-md); border: 2px solid rgba(255, 255, 255, 0.5);
    filter: brightness(1.05) contrast(0.95);
}
.card-ultra.card-style-frost .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 40%, rgba(200, 225, 250, 0.85) 100%);
}
.card-ultra.card-style-frost .card-content-ultra { padding: 0.8rem; background: transparent; }
.card-ultra.card-style-frost .card-title-ultra {
    font-weight: 600; color: #2a4a6b; font-size: 0.85rem;
}
.card-ultra.card-style-frost .badge-ultra {
    background: rgba(255, 255, 255, 0.5); color: #3a5a7b;
    border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
}
.card-ultra.card-style-frost .badge-type-ultra { background: rgba(42, 74, 107, 0.7); color: #e0f0ff; }
.card-ultra.card-style-frost .preview-btn {
    background: rgba(42, 74, 107, 0.5); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.card-ultra.card-style-frost .card-meta-ultra span { color: #5a7a9b; }
.card-ultra.card-style-frost .card-ctr-stars .star-icon { color: #6a9ac0; }
.card-ultra.card-style-frost .card-genre { color: #4a6a8b; }

/* --- Lava (حمم بركانية) --- */
@keyframes lava-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 80, 0, 0.3), inset 0 0 20px rgba(255, 80, 0, 0.05); }
    50% { box-shadow: 0 0 30px rgba(255, 80, 0, 0.5), inset 0 0 40px rgba(255, 80, 0, 0.08); }
}
@keyframes lava-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}
.card-ultra.card-style-lava {
    border-radius: var(--radius-md) !important;
    background: linear-gradient(180deg, #1a0a00 0%, #2d0f00 50%, #1a0800 100%);
    border: 1px solid rgba(255, 100, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-normal);
    animation: lava-glow 3s ease-in-out infinite;
    backdrop-filter: none;
}
.card-ultra.card-style-lava::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(
        0deg,
        rgba(255, 60, 0, 0.12) 0%,
        rgba(255, 120, 0, 0.06) 40%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}
.card-ultra.card-style-lava::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 80, 0, 0.1) 0deg 10deg,
        transparent 10deg 20deg
    );
    background-size: 200% 200%;
    animation: lava-flow 8s linear infinite;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}
.card-ultra.card-style-lava:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: 0 10px 40px rgba(255, 60, 0, 0.4),
                0 0 50px rgba(255, 120, 0, 0.2) !important;
    border-color: rgba(255, 150, 0, 0.7) !important;
}
.card-ultra.card-style-lava.series:hover {
    box-shadow: 0 10px 40px rgba(0, 200, 180, 0.3),
                0 0 50px rgba(0, 200, 180, 0.15) !important;
    border-color: var(--accent-teal) !important;
}
.card-ultra.card-style-lava .card-poster-ultra {
    border-radius: var(--radius-sm); border: 1px solid rgba(255, 100, 0, 0.2);
}
.card-ultra.card-style-lava .card-poster-ultra::after {
    background: linear-gradient(180deg, transparent 30%, rgba(26, 10, 0, 0.95) 100%);
}
.card-ultra.card-style-lava .card-content-ultra { padding: 0.7rem; background: transparent; position: relative; z-index: 2; }
.card-ultra.card-style-lava .card-title-ultra {
    font-weight: 700; color: #ff9040;
    text-shadow: 0 0 10px rgba(255, 80, 0, 0.3);
}
.card-ultra.card-style-lava .badge-ultra {
    background: rgba(255, 80, 0, 0.15); color: #ff9040;
    border: 1px solid rgba(255, 100, 0, 0.3); border-radius: var(--radius-sm);
}
.card-ultra.card-style-lava .badge-type-ultra { background: rgba(255, 80, 0, 0.3); color: #ffcc80; }
.card-ultra.card-style-lava .preview-btn {
    background: rgba(255, 60, 0, 0.3); border: 1px solid rgba(255, 100, 0, 0.5);
    color: #ff9040;
}
.card-ultra.card-style-lava .card-meta-ultra span { color: rgba(255, 144, 64, 0.5); }
.card-ultra.card-style-lava .card-ctr-stars .star-icon { color: #ff6020; }
.card-ultra.card-style-lava .card-genre { color: #cc6030; }

/* ========================================
   Preview Modal
   ======================================== */
.preview-modal {
    position: fixed; inset: 0; background: rgba(3, 4, 7, 0.92); backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center; z-index: 2000;
    opacity: 0; visibility: hidden; transition: var(--transition-normal); padding: 1.5rem;
}
[data-theme="light"] .preview-modal { background: rgba(248, 250, 252, 0.95); }
.preview-modal.active { opacity: 1; visibility: visible; }

.preview-content {
    position: relative; background: var(--bg-card); border-radius: var(--radius-xl);
    border: 1px solid var(--border-hover); max-width: 900px; width: 100%; max-height: 90vh;
    overflow: hidden; display: grid; grid-template-columns: 320px 1fr;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(255, 59, 92, 0.2);
    transform: scale(0.95) translateY(20px); transition: var(--transition-bounce); z-index: 2;
}
.preview-modal.active .preview-content { transform: scale(1) translateY(0); }

.preview-poster { position: relative; height: 100%; min-height: 450px; overflow: hidden; }
.preview-poster img { width: 100%; height: 100%; object-fit: cover; }
.preview-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-card) 20%, transparent 80%); }

.preview-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.preview-play-btn {
    width: 80px; height: 80px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    border: 4px solid rgba(255,255,255,0.3); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 1.8rem; cursor: pointer; transition: var(--transition-bounce);
    box-shadow: 0 12px 40px var(--accent-red-glow); animation: play-pulse 2s infinite;
}
@keyframes play-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.7); }
    70% { box-shadow: 0 0 0 25px rgba(255, 59, 92, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); }
}
.preview-play-btn:hover { transform: scale(1.1); animation: none; }

.preview-info { padding: 2rem; display: flex; flex-direction: column; overflow-y: auto; }
.preview-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.preview-title { font-size: 1.8rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.6rem; }
.preview-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.preview-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.4rem; font-size: 0.9rem; color: var(--text-secondary); }
.preview-meta-item { display: flex; align-items: center; gap: 0.4rem; }
.preview-meta-item i { color: var(--accent-gold); }
.preview-rating-large { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; background: linear-gradient(135deg, var(--accent-gold), #fbbf24); color: #000; border-radius: var(--radius-md); font-weight: 800; font-size: 1rem; }
.preview-desc { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.8rem; font-size: 1rem; }
.preview-genres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; }
.genre-chip { padding: 0.35rem 0.9rem; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.8rem; color: var(--text-secondary); transition: var(--transition-fast); }
.genre-chip:hover { background: var(--accent-red); border-color: var(--accent-red); color: #fff; transform: translateY(-2px); }
.preview-actions { display: flex; gap: 0.8rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--border); }

.preview-close {
    position: absolute; top: 1.2rem; left: 1.2rem; width: 40px; height: 40px;
    border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer; transition: var(--transition-fast); z-index: 3;
}
.preview-close:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); transform: rotate(90deg); }

/* ========================================
   Sidebar
   ======================================== */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 100px; align-self: start; }
.widget { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; backdrop-filter: blur(10px); }
.widget-header { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); font-size: 1.1rem; font-weight: 700; }
.widget-header i { color: var(--accent-red); font-size: 1.2rem; }
.widget-body { padding: 1rem 1.3rem; }
.widget-list { display: flex; flex-direction: column; gap: 0.9rem; }
.widget-item { display: flex; gap: 0.9rem; padding: 0.6rem; border-radius: var(--radius-md); transition: var(--transition-fast); cursor: pointer; }
.widget-item:hover { background: var(--bg-hover); transform: translateX(-4px); }
.widget-item-thumb { width: 55px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.widget-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.widget-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; }
.widget-item-title { font-size: 0.88rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget-item-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: var(--text-muted); }
.widget-item-meta i { color: var(--accent-gold); font-size: 0.7rem; }

.tags-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-ultra { padding: 0.4rem 0.9rem; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.8rem; color: var(--text-secondary); transition: var(--transition-fast); }
.tag-ultra:hover { background: var(--accent-red); border-color: var(--accent-red); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px var(--accent-red-glow); }

/* ========================================
   Single Post - TopCiema Style
   ======================================== */

/* Breadcrumb */
.sp-breadcrumb {
    padding: 1rem 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border);
}
.sp-breadcrumb-nav {
    display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-muted);
    flex-wrap: wrap;
}
.sp-breadcrumb-nav a {
    color: var(--text-secondary); transition: var(--transition-fast);
    display: flex; align-items: center; gap: 0.3rem;
}
.sp-breadcrumb-nav a:hover { color: var(--accent-red); }
.sp-breadcrumb-sep { font-size: 0.6rem; color: var(--text-muted); }
.sp-breadcrumb-current { color: var(--accent-red); font-weight: 600; }

/* Container */
.sp-container {
    display: grid; grid-template-columns: 1fr 320px; gap: 2rem;
    padding-top: 2rem; padding-bottom: 3rem;
}
.sp-post { min-width: 0; }

/* Two Column Flex */
.sp-flex {
    display: flex; gap: 2rem; margin-bottom: 2rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.8rem; backdrop-filter: blur(10px);
}

/* Poster Column */
.sp-col-poster { flex-shrink: 0; width: 280px; display: flex; flex-direction: column; gap: 1rem; }
.sp-poster-wrap {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); aspect-ratio: 2/3;
}
.sp-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-poster-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); font-size: 4rem; color: var(--text-muted);
}

/* IMDB Badge on Poster */
.sp-imdb-badge {
    position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 6px;
    background: rgba(0, 0, 0, 0.85); padding: 6px 12px; border-radius: var(--radius-sm);
    backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15);
}
.sp-imdb-logo {
    background: linear-gradient(135deg, var(--accent-gold), #fbbf24); color: #000;
    font-size: 0.65rem; font-weight: 900; padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.5px;
}
.sp-imdb-score { color: var(--accent-gold); font-weight: 800; font-size: 0.95rem; }

/* Trailer Button */
.sp-trailer-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.2rem; background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: #fff; border-radius: var(--radius-md); font-weight: 700; font-size: 0.9rem;
    transition: var(--transition-normal); text-align: center;
}
.sp-trailer-btn:hover {
    transform: translateY(-2px); box-shadow: 0 6px 25px rgba(231, 76, 60, 0.4); color: #fff;
}
.sp-trailer-btn i { font-size: 1.1rem; }

/* Info Column */
.sp-col-info { flex: 1; min-width: 0; }
.sp-title {
    font-size: 1.8rem; font-weight: 900; line-height: 1.3; margin-bottom: 1.5rem;
    padding-bottom: 1rem; border-bottom: 2px solid var(--border);
    background: linear-gradient(135deg, var(--text-primary), var(--accent-teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Media Details List */
.sp-media-list { display: flex; flex-direction: column; }
.sp-media-item {
    display: flex; align-items: flex-start; padding: 0.75rem 0;
    border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.sp-media-item:last-child { border-bottom: none; }
.sp-media-label {
    flex-shrink: 0; width: 160px; color: var(--text-muted); font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}
.sp-media-label i { width: 18px; text-align: center; color: var(--accent-red); font-size: 0.85rem; }
.sp-media-value { flex: 1; color: var(--text-primary); font-weight: 500; }
.sp-media-genres a {
    color: var(--accent-teal); transition: var(--transition-fast);
}
.sp-media-genres a:hover { color: var(--accent-red); }
.sp-quality-tag {
    display: inline-block; padding: 2px 10px; background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: var(--radius-full);
}

/* Story Section */
.sp-story {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.8rem; margin-bottom: 2rem; backdrop-filter: blur(10px);
}
.sp-story-title {
    font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem; padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--border); display: flex; align-items: center; gap: 0.6rem;
}
.sp-story-title i { color: var(--accent-red); }
.sp-story-content { color: var(--text-secondary); line-height: 2; font-size: 0.95rem; }
.sp-story-content p { margin-bottom: 0.8rem; }
.sp-story-content p:last-child { margin-bottom: 0; }

/* Action Buttons */
.sp-action-buttons {
    display: flex !important; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 2rem;
    flex-direction: row !important;
}
.sp-btn-action {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600;
    font-size: 0.9rem; transition: var(--transition-normal); cursor: pointer;
    position: relative; overflow: hidden; flex: 1;
}
.sp-btn-action::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-100%); transition: transform var(--transition-slow);
}
.sp-btn-action:hover::after { transform: translateX(100%); }
.sp-btn-action svg { width: 20px; height: 20px; }

.sp-btn-watch {
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a) !important; color: #fff !important; flex: 1;
    box-shadow: 0 6px 25px var(--accent-red-glow); border: none;
}
.sp-btn-watch:hover { transform: translateY(-3px); box-shadow: 0 10px 35px var(--accent-red-glow); color: #fff; }

.sp-btn-download {
    background: linear-gradient(135deg, var(--accent-teal), #00c9a0) !important; color: #fff !important; flex: 1;
    box-shadow: 0 6px 25px var(--accent-teal-glow); border: none;
}
.sp-btn-download:hover { transform: translateY(-3px); box-shadow: 0 10px 35px var(--accent-teal-glow); color: #fff; }

.sp-btn-favorite {
    background: var(--bg-card); color: var(--text-secondary);
    border: 2px solid var(--border-hover);
}
.sp-btn-favorite i { color: #ff3b5c; }
.sp-btn-favorite:hover {
    border-color: #ff3b5c; color: #ff3b5c;
    background: rgba(255,59,92,0.08);
    transform: translateY(-2px);
}

.sp-btn-share {
    background: var(--bg-card); color: var(--text-secondary);
    border: 2px solid var(--border-hover);
}
.sp-btn-share i { color: #a78bfa; }
.sp-btn-share:hover {
    border-color: #a78bfa; color: #a78bfa;
    background: rgba(167,139,250,0.08);
    transform: translateY(-2px);
}

/* Short Link */
.sp-short-link {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 0.8rem 1.2rem; margin-bottom: 2rem;
}
.sp-short-link-label {
    font-size: 0.85rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
    display: flex; align-items: center; gap: 0.4rem;
}
.sp-short-link-label i { color: var(--accent-teal); }
.sp-short-link-input {
    flex: 1; padding: 0.5rem 0.8rem; background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--text-secondary);
    direction: ltr; text-align: left; cursor: pointer;
}
.sp-short-link-input:focus { border-color: var(--accent-teal); }
.sp-copy-btn {
    width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-teal);
    color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: var(--transition-fast); flex-shrink: 0;
}
.sp-copy-btn:hover { background: var(--accent-red); transform: scale(1.05); }

/* Links Sections */
.sp-links-section {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.8rem; margin-bottom: 2rem; backdrop-filter: blur(10px);
}
.sp-section-title {
    font-size: 1.2rem; font-weight: 800; margin-bottom: 1.2rem; padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--border); display: flex; align-items: center; gap: 0.6rem;
}
.sp-section-title i { color: var(--accent-red); }
.sp-section-title::before {
    content: ''; width: 4px; height: 22px;
    background: linear-gradient(to bottom, var(--accent-red), var(--accent-teal));
    border-radius: var(--radius-sm);
}

.sp-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.sp-link-card {
    display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem;
    background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: var(--transition-normal); color: var(--text-primary);
}
.sp-link-card > i:first-child { font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; }
.sp-link-card > i:last-child { font-size: 0.85rem; color: var(--text-muted); margin-right: auto; }
.sp-link-info { flex: 1; min-width: 0; }
.sp-link-name { font-weight: 600; font-size: 0.9rem; display: block; }
.sp-link-quality {
    display: inline-block; padding: 1px 8px; background: var(--accent-red); color: #fff;
    font-size: 0.65rem; font-weight: 700; border-radius: 4px; margin-top: 2px;
}
.sp-link-meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 2px; }
.sp-link-size { font-size: 0.75rem; color: var(--text-muted); }

.sp-link-watch:hover {
    border-color: var(--accent-red); background: rgba(255,59,92,0.08);
    transform: translateX(-4px);
}
.sp-link-watch:hover > i:first-child { color: var(--accent-red); }
.sp-link-download:hover {
    border-color: var(--accent-teal); background: rgba(0,229,184,0.08);
    transform: translateX(-4px);
}
.sp-link-download:hover > i:first-child { color: var(--accent-teal); }

/* Related Section */
.sp-related { margin-top: 1rem; }
.sp-related .sp-section-title { margin-bottom: 1.5rem; }

/* Series-specific: Status Badge in media list */
.sp-status-tag {
    display: inline-block; padding: 3px 12px; border-radius: var(--radius-full);
    font-size: 0.78rem; font-weight: 700;
}
.sp-status-tag.ongoing { background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff; }
.sp-status-tag.completed { background: linear-gradient(135deg, var(--accent-gold), #fbbf24); color: #000; }
.sp-status-tag.upcoming { background: linear-gradient(135deg, var(--accent-purple), #8b5cf6); color: #fff; }

/* Legacy single-hero (kept for backward compat) */
.single-hero { position: relative; min-height: 500px; display: flex; align-items: flex-end; overflow: hidden; }
.single-hero-bg { position: absolute; inset: 0; }
.single-hero-bg img, .single-hero-img { width: 100%; height: 100%; object-fit: cover; }
.single-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--bg-primary) 10%, rgba(3,4,7,0.8) 50%, rgba(3,4,7,0.5) 100%);
}
.single-hero-content { position: relative; z-index: 2; padding: 3rem 0; width: 100%; }
.single-hero-grid { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; align-items: end; }

.single-poster { position: relative; }
.single-poster-img, .single-poster img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.single-poster .badge-ultra { position: absolute; top: 12px; right: 12px; }

.single-info { color: var(--text-primary); }
.single-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.single-title { font-size: 2.2rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.2; }
.single-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-secondary); }
.single-meta-item { display: flex; align-items: center; gap: 0.4rem; }
.single-meta-item i { color: var(--accent-gold); }
.single-genres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.single-desc { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; }
.single-detail { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }
.single-detail strong { color: var(--text-primary); margin-left: 0.5rem; }
.single-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Watch/Download Links */
.watch-links-grid, .download-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.watch-link-btn, .download-link-btn {
    display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-primary); font-weight: 600; transition: var(--transition-normal);
}
.watch-link-btn:hover { border-color: var(--accent-red); background: rgba(255,59,92,0.1); color: var(--accent-red); transform: translateY(-2px); }
.download-link-btn:hover { border-color: var(--accent-teal); background: rgba(0,229,184,0.1); color: var(--accent-teal); transform: translateY(-2px); }
.watch-quality, .dl-quality { font-size: 0.7rem; background: var(--accent-red); color: #fff; padding: 2px 6px; border-radius: 4px; margin-right: auto; }
.dl-size { font-size: 0.75rem; color: var(--text-muted); }

/* Seasons */
.seasons-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.season-tab {
    padding: 0.6rem 1.5rem; border-radius: var(--radius-md); background: var(--bg-tertiary);
    border: 1px solid var(--border); color: var(--text-secondary); font-weight: 600;
    cursor: pointer; transition: var(--transition-normal);
}
.season-tab.active, .season-tab:hover { background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff; border-color: var(--accent-teal); }
.season-content { display: none; }
.season-content.active { display: block; }

.episodes-grid { display: flex; flex-direction: column; gap: 0.8rem; }
.episode-card {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: var(--transition-normal);
}
.episode-card:hover { border-color: var(--accent-teal); background: var(--bg-hover); }
.episode-number {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
}
.episode-info { flex: 1; min-width: 0; }
.episode-title { font-size: 0.95rem; font-weight: 600; }
.episode-duration { font-size: 0.8rem; color: var(--text-muted); }
.episode-servers { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.episode-server-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem;
    background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 0.8rem; transition: var(--transition-fast);
}
.episode-server-btn:hover { background: var(--accent-teal); color: #fff; border-color: var(--accent-teal); }
.episode-servers-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; width: 100%; margin-bottom: 0.2rem; }
.episode-download-servers { margin-top: 0.5rem; }
.episode-dl-btn { background: rgba(0, 229, 184, 0.08); border-color: rgba(0, 229, 184, 0.25); }
.episode-dl-btn:hover { background: var(--accent-teal); color: #fff; border-color: var(--accent-teal); }
.episode-dl-btn i { color: var(--accent-teal); }
.episode-dl-btn:hover i { color: #fff; }
.ep-dl-quality { background: rgba(255,255,255,0.1); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.7rem; }
.ep-dl-size { font-size: 0.7rem; color: var(--text-muted); }
.episode-dl-btn:hover .ep-dl-size { color: rgba(255,255,255,0.8); }
.no-episodes { color: var(--text-muted); text-align: center; padding: 2rem; }

/* ========================================
   Archive & Filter
   ======================================== */
.archive-header-section {
    padding: 2.5rem 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border);
    text-align: center;
}
.series-archive-header { background: linear-gradient(135deg, var(--bg-secondary), rgba(0, 229, 184, 0.05)); }
.archive-title { font-size: 2rem; font-weight: 900; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.archive-title i { color: var(--accent-red); }
.series-archive-header .archive-title i { color: var(--accent-teal); }
.archive-desc { color: var(--text-secondary); font-size: 1rem; }

.filters-bar { margin-bottom: 2rem; padding: 1.2rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.filters-form { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.filter-group { flex: 1; min-width: 150px; }
.filter-select {
    width: 100%; padding: 0.7rem 1rem; background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-family);
    font-size: 0.9rem; cursor: pointer; transition: var(--transition-normal);
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 12px center;
}
.filter-select:focus { border-color: var(--accent-red); box-shadow: 0 0 0 2px var(--accent-red-glow); }
.filter-btn { min-width: 100px; }

/* Filter Labels */
.filter-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 0.4rem; white-space: nowrap;
}
.filter-label i { color: var(--accent-teal); font-size: 0.75rem; }

/* Range Slider Row */
.filters-range-row {
    display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.filter-range-group { flex: 1; min-width: 220px; }
.filter-reset-btn { align-self: flex-end; margin-bottom: 2px; white-space: nowrap; }

/* Range Display Value */
.range-display {
    color: var(--accent-red); font-weight: 700; font-size: 0.82rem;
    background: rgba(255,59,92,0.1); padding: 0.1rem 0.5rem; border-radius: var(--radius-sm);
    margin-right: 0.3rem;
}

/* Dual Range Slider */
.range-slider-wrap {
    position: relative; height: 36px; display: flex; align-items: center;
}
.range-slider {
    position: absolute; width: 100%; height: 6px;
    -webkit-appearance: none; appearance: none;
    background: transparent; pointer-events: none; z-index: 2;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    border: 3px solid var(--bg-card);
    box-shadow: 0 2px 8px var(--accent-red-glow);
    cursor: pointer; pointer-events: auto;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 16px var(--accent-red-glow);
}
.range-slider::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    border: 3px solid var(--bg-card);
    box-shadow: 0 2px 8px var(--accent-red-glow);
    cursor: pointer; pointer-events: auto;
}
.range-track {
    position: absolute; width: 100%; height: 6px;
    background: var(--bg-tertiary); border-radius: 3px; z-index: 1;
    border: 1px solid var(--border);
}
.range-track-fill {
    position: absolute; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-red), var(--accent-teal));
    transition: left 0.1s, right 0.1s;
}

/* Results Count */
.filter-results-count {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-secondary);
    padding: 0.4rem 0.8rem; background: var(--bg-tertiary);
    border-radius: var(--radius-sm); width: fit-content;
}
.results-number { font-weight: 800; color: var(--accent-teal); font-size: 1rem; }

/* AJAX Loading Overlay */
.ajax-loading-overlay {
    display: flex; align-items: center; justify-content: center;
    padding: 3rem; min-height: 200px;
}

/* ========================================
   Schedule / Calendar
   ======================================== */
.schedule-header { background: linear-gradient(135deg, var(--bg-secondary), rgba(167, 139, 250, 0.06)); }
.schedule-header .archive-title i { color: var(--accent-purple); }

.schedule-tabs {
    display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 0.4rem; margin-bottom: 1.5rem;
}
.schedule-tabs::-webkit-scrollbar { display: none; }

.schedule-tab {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.8rem 1.2rem; min-width: 90px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); cursor: pointer;
    transition: var(--transition-normal); flex: 1;
    color: var(--text-secondary); font-family: var(--font-family);
}
.schedule-tab:hover { border-color: var(--accent-purple); background: var(--bg-hover); }
.schedule-tab.active {
    background: linear-gradient(135deg, var(--accent-purple), #c4b5fd);
    color: #fff; border-color: var(--accent-purple);
    box-shadow: 0 4px 20px rgba(167, 139, 250, 0.4);
}
.schedule-tab-day { font-weight: 700; font-size: 0.9rem; }
.schedule-tab-badge {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    background: rgba(255,255,255,0.2); padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full); letter-spacing: 0.5px;
}
.schedule-tab:not(.active) .schedule-tab-badge {
    background: var(--accent-teal); color: #fff;
}
.schedule-tab-count {
    font-size: 0.7rem; font-weight: 600;
    background: rgba(255,255,255,0.15); padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full);
}
.schedule-tab:not(.active) .schedule-tab-count {
    background: var(--bg-tertiary); color: var(--text-muted);
}

/* Schedule Content */
.schedule-day { display: none; }
.schedule-day.active { display: block; animation: fadeInUp 0.3s ease; }

.schedule-list { display: flex; flex-direction: column; gap: 0.6rem; }

.schedule-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.2rem; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    transition: var(--transition-normal); text-decoration: none; color: inherit;
}
.schedule-item:hover {
    border-color: var(--accent-purple);
    background: var(--bg-hover);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.schedule-time {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    min-width: 60px; color: var(--accent-purple); font-weight: 700; font-size: 0.95rem;
}
.schedule-time i { font-size: 0.8rem; color: var(--text-muted); }

.schedule-poster { width: 55px; height: 75px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.schedule-poster img { width: 100%; height: 100%; object-fit: cover; }
.schedule-poster-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); color: var(--text-muted); font-size: 1.2rem;
}

.schedule-info { flex: 1; min-width: 0; }
.schedule-title {
    font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-primary);
}
.schedule-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.schedule-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full); background: var(--bg-tertiary);
    color: var(--text-secondary); border: 1px solid var(--border);
}
.schedule-badge.episode { background: rgba(167,139,250,0.15); color: var(--accent-purple); border-color: rgba(167,139,250,0.3); }
.schedule-badge.rating { background: rgba(255,193,69,0.12); color: var(--accent-gold); border-color: rgba(255,193,69,0.25); }
.schedule-badge.genre { background: rgba(0,229,184,0.1); color: var(--accent-teal); border-color: rgba(0,229,184,0.2); }

.schedule-action { flex-shrink: 0; }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; }

.schedule-empty {
    text-align: center; padding: 4rem 2rem; color: var(--text-muted);
}
.schedule-empty i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.schedule-empty p { font-size: 1rem; }

.pagination-wrap { margin-top: 2rem; display: flex; justify-content: center; gap: 0.3rem; }
.pagination-wrap .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
    padding: 0 0.8rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-secondary); font-weight: 600; transition: var(--transition-normal);
}
.pagination-wrap .page-numbers.current, .pagination-wrap .page-numbers:hover {
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a); color: #fff; border-color: var(--accent-red);
}

/* ========================================
   404 Page
   ======================================== */
.error-404-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; text-align: center; padding: 2rem; }
.error-404-content { max-width: 500px; }
.error-404-number {
    font-size: 8rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.error-404-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; }
.error-404-desc { color: var(--text-secondary); margin-bottom: 2rem; }
.error-404-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* No Results */
.no-results-wrap { text-align: center; padding: 4rem 2rem; }
.no-results-icon { font-size: 4rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.no-results-wrap h2 { font-size: 1.5rem; margin-bottom: 0.8rem; }
.no-results-wrap p { color: var(--text-secondary); margin-bottom: 1.5rem; }
.no-results-actions { display: flex; gap: 0.8rem; justify-content: center; }
.no-content { color: var(--text-muted); text-align: center; padding: 2rem; }

/* ========================================
   Article Styles
   ======================================== */
.single-article, .page-article { padding: 1rem 0; }
.article-header { margin-bottom: 2rem; }
.article-title { font-size: 2rem; font-weight: 800; margin-bottom: 0.8rem; }
.article-meta { display: flex; gap: 1.5rem; color: var(--text-secondary); font-size: 0.9rem; }
.article-meta span { display: flex; align-items: center; gap: 0.4rem; }
.article-thumbnail { margin-bottom: 2rem; border-radius: var(--radius-lg); overflow: hidden; }
.article-content { line-height: 1.9; color: var(--text-secondary); }
.article-content p { margin-bottom: 1.2rem; }
.article-content h2, .article-content h3 { color: var(--text-primary); margin: 1.5rem 0 0.8rem; }

/* ========================================
   Footer
   ======================================== */
.footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 3rem 1.5rem 2rem; margin-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; max-width: var(--container-max); margin: 0 auto; }
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; font-weight: 900; color: var(--accent-red); }
.footer-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.8; }
.social-links { display: flex; gap: 0.7rem; }
.social-link {
    width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--bg-tertiary);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: var(--transition-normal);
}
.social-link:hover { background: var(--accent-red); border-color: var(--accent-red); color: #fff; transform: translateY(-3px); box-shadow: 0 6px 20px var(--accent-red-glow); }
.footer-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.footer-links { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-link { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; transition: var(--transition-fast); }
.footer-link:hover { color: var(--accent-red); padding-right: 0.4rem; }
.footer-link i { width: 16px; text-align: center; font-size: 0.75rem; color: var(--accent-teal); }
.footer-bottom {
    max-width: var(--container-max); margin: 2.5rem auto 0; padding-top: 1.8rem; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    color: var(--text-muted); font-size: 0.85rem;
}
.footer-copyright { display: flex; align-items: center; gap: 0.4rem; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; }
.footer-legal-links li a { color: var(--text-muted); transition: var(--transition-fast); }
.footer-legal-links li a:hover { color: var(--text-secondary); }

/* ========================================
   Accessibility & Utility
   ======================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -40px; right: 0; background: var(--accent-red); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 1001; transition: top var(--transition-fast); }
.skip-link:focus { top: 0; }

/* Loading */
.loading { position: fixed; inset: 0; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.35s ease, visibility 0.35s ease; }
.loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader { width: 50px; height: 50px; border: 3px solid var(--border); border-top-color: var(--accent-red); border-radius: var(--radius-full); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Search Results */
.search-result-item { padding: 1.2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 1rem; transition: var(--transition-normal); }
.search-result-item:hover { border-color: var(--accent-red); }
.search-result-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.search-result-title a:hover { color: var(--accent-red); }
.search-result-excerpt { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; }
.search-result-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--text-muted); }
.search-result-meta span { display: flex; align-items: center; gap: 0.3rem; }

/* WordPress defaults */
.wp-block-image { margin-bottom: 1.5rem; }
.wp-block-image img { border-radius: var(--radius-md); }
.aligncenter { text-align: center; }
.alignleft { float: right; margin-left: 1.5rem; }
.alignright { float: left; margin-right: 1.5rem; }

/* Live search results */
.live-search-results {
    position: absolute; top: 100%; right: 0; left: 0; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: 0.5rem;
    box-shadow: var(--shadow-lg); z-index: 200; max-height: 400px; overflow-y: auto;
    display: none; backdrop-filter: blur(20px);
}
.live-search-results.active { display: block; }
.live-search-item {
    display: flex; gap: 0.8rem; padding: 0.8rem 1rem; transition: var(--transition-fast);
    border-bottom: 1px solid var(--border);
}
.live-search-item:last-child { border-bottom: none; }
.live-search-item:hover { background: var(--bg-hover); }
.live-search-thumb { width: 40px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.live-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.live-search-title { font-size: 0.85rem; font-weight: 600; }
.live-search-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; gap: 0.5rem; }

/* ========================================
   Embedded Player
   ======================================== */
.sp-player-wrap {
    margin-bottom: 1.5rem; border-radius: var(--radius-lg); overflow: hidden;
    border: 2px solid var(--accent-red); background: #000;
    box-shadow: 0 8px 40px rgba(255, 59, 92, 0.15);
    animation: playerFadeIn 0.4s ease;
}
@keyframes playerFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.sp-player-header {
    display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.2rem;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-bottom: 1px solid var(--border);
}
.sp-player-server-name {
    font-weight: 700; font-size: 0.9rem; color: var(--accent-teal);
    display: flex; align-items: center; gap: 0.4rem;
}
.sp-player-server-name::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-teal); display: inline-block;
    animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sp-player-close {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem;
    background: rgba(255, 59, 92, 0.15); border: 1px solid rgba(255, 59, 92, 0.3);
    border-radius: var(--radius-sm); color: var(--accent-red); font-size: 0.8rem;
    font-weight: 600; cursor: pointer; transition: var(--transition-fast);
    font-family: var(--font-family);
}
.sp-player-close:hover { background: var(--accent-red); color: #fff; }
.sp-player-container { position: relative; width: 100%; background: #000; }
.sp-player-iframe { width: 100%; height: 100%; border: none; display: block; }

/* Active server highlight */
.sp-embed-trigger.sp-active-server {
    border-color: var(--accent-red) !important;
    background: rgba(255, 59, 92, 0.12) !important;
    box-shadow: 0 0 15px rgba(255, 59, 92, 0.2);
}
button.sp-embed-trigger { cursor: pointer; font-family: var(--font-family); }
button.episode-server-btn.sp-embed-trigger { cursor: pointer; font-family: var(--font-family); }

/* ========================================
   Download Countdown Modal
   ======================================== */
.sp-countdown-modal {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(3, 4, 7, 0.92); backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: var(--transition-normal);
    padding: 1.5rem;
}
.sp-countdown-modal.active { opacity: 1; visibility: visible; }

.sp-countdown-content {
    background: var(--bg-card); border: 1px solid var(--border-hover);
    border-radius: var(--radius-xl); padding: 3rem 2.5rem; text-align: center;
    max-width: 420px; width: 100%; position: relative;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 229, 184, 0.15);
    transform: scale(0.9); transition: transform var(--transition-bounce);
}
.sp-countdown-modal.active .sp-countdown-content { transform: scale(1); }

.sp-countdown-header { margin-bottom: 2rem; }
.sp-countdown-icon {
    font-size: 2.5rem; color: var(--accent-teal); display: block; margin-bottom: 1rem;
    animation: spin 2s linear infinite;
}
.sp-countdown-header h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.5rem; }
.sp-countdown-server { color: var(--text-secondary); font-size: 0.9rem; }

.sp-countdown-timer {
    position: relative; width: 120px; height: 120px; margin: 0 auto 1.5rem;
}
.sp-countdown-circle { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-countdown-bg {
    fill: none; stroke: var(--bg-tertiary); stroke-width: 6;
}
.sp-countdown-progress {
    fill: none; stroke: var(--accent-teal); stroke-width: 6;
    stroke-linecap: round; stroke-dasharray: 339.292;
    stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear;
}
.sp-countdown-number {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 2.5rem; font-weight: 900; color: var(--accent-teal);
}
.sp-countdown-msg {
    color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.5rem;
}

.sp-countdown-link {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.9rem 2.5rem; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-teal), #00c9a0);
    color: #fff; font-weight: 700; font-size: 1rem;
    box-shadow: 0 6px 25px var(--accent-teal-glow);
    transition: var(--transition-normal);
    animation: bounceIn 0.5s ease;
}
.sp-countdown-link:hover {
    transform: translateY(-3px); color: #fff;
    box-shadow: 0 10px 35px var(--accent-teal-glow);
}
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.5); }
    60% { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.sp-countdown-close {
    position: absolute; top: 1rem; left: 1rem; width: 36px; height: 36px;
    border-radius: var(--radius-sm); background: var(--bg-tertiary);
    border: 1px solid var(--border); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition-fast);
}
.sp-countdown-close:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }

/* ========================================
   Trending Slider
   ======================================== */
.trending-section { padding: 2rem 0 1rem; overflow: hidden; }
.trending-title { display: flex; align-items: center; gap: 0.7rem; }
.trending-title i { color: var(--accent-red); }
.trending-live-badge {
    display: inline-flex; align-items: center; padding: 3px 10px;
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    color: #fff; font-size: 0.6rem; font-weight: 900; letter-spacing: 2px;
    border-radius: var(--radius-full); text-transform: uppercase;
    animation: pulse-badge 2s infinite; margin-right: 0.3rem;
}
.trending-nav-controls { display: flex; gap: 0.5rem; }
.trending-nav-btn {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: var(--transition-normal);
}
.trending-nav-btn:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); transform: scale(1.05); }

.trending-slider-wrap { overflow: hidden; position: relative; margin: 0 -0.5rem; }
.trending-slider {
    display: flex; gap: 1rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem; cursor: grab;
}
.trending-slider:active { cursor: grabbing; }
.trending-slider.dragging { transition: none; }

.trending-card {
    flex: 0 0 180px; position: relative; border-radius: var(--radius-lg);
    overflow: hidden; background: var(--bg-card); border: 1px solid var(--border);
    transition: var(--transition-normal);
}
.trending-card:hover { transform: translateY(-8px) scale(1.03); border-color: var(--accent-red); box-shadow: var(--shadow-lg), var(--shadow-glow); z-index: 10; }
.trending-card.series:hover { border-color: var(--accent-teal); box-shadow: var(--shadow-lg), var(--shadow-glow-teal); }

.trend-rank {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.85rem; color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
}
.trend-rank.top-three { background: linear-gradient(135deg, var(--accent-gold), #fbbf24); color: #000; border: none; }
.trend-rank.top-three i { display: none; }
.trend-rank-number { line-height: 1; }

.trending-card-link { display: block; }
.trending-poster { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--bg-tertiary); }
.trending-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.trending-card:hover .trending-poster img { transform: scale(1.12); }
.trending-poster::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(3,4,7,0.9) 0%, transparent 60%);
}

.trend-badge-wrap { position: absolute; top: 8px; left: 8px; z-index: 5; }
.trend-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
    background: linear-gradient(135deg, #ff3b5c, #ff6b8a); color: #fff;
    font-size: 0.6rem; font-weight: 800; border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(255, 59, 92, 0.4);
    animation: pulse-episode 2.5s infinite;
}
.trend-badge i { font-size: 0.55rem; }

.trending-quality-badge {
    position: absolute; bottom: 8px; right: 8px; z-index: 5;
    padding: 3px 8px; background: var(--accent-red); color: #fff;
    font-size: 0.6rem; font-weight: 800; border-radius: 4px;
}

.trending-views {
    position: absolute; bottom: 8px; left: 8px; z-index: 5;
    display: flex; align-items: center; gap: 3px; padding: 3px 7px;
    background: rgba(0, 0, 0, 0.75); color: var(--text-secondary);
    font-size: 0.65rem; border-radius: 4px; backdrop-filter: blur(6px);
}
.trending-views i { font-size: 0.6rem; color: var(--accent-gold); }

.trending-overlay {
    position: absolute; inset: 0; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.4); opacity: 0;
    transition: opacity var(--transition-normal);
}
.trending-card:hover .trending-overlay { opacity: 1; }
.trending-play-icon {
    width: 48px; height: 48px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem; transform: scale(0.8);
    transition: transform var(--transition-bounce);
    box-shadow: 0 6px 20px var(--accent-red-glow);
}
.trending-card:hover .trending-play-icon { transform: scale(1); }

.trending-info { padding: 0.9rem; }
.trending-card-title {
    font-size: 0.85rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.4rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.trending-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.3rem; flex-wrap: wrap; }
.trending-rating { display: flex; align-items: center; gap: 2px; color: var(--accent-gold); font-weight: 700; }
.trending-rating i { font-size: 0.6rem; }
.trending-episode { color: var(--accent-teal); font-weight: 700; }
.trending-genre { font-size: 0.65rem; color: var(--accent-purple); }

/* ========================================
   Enhanced Card - CTR Stars
   ======================================== */
.card-ctr-stars { display: flex; gap: 1px; margin-bottom: 0.3rem; }
.card-ctr-stars i { font-size: 0.6rem; color: var(--accent-gold); }
.card-ctr-stars i.far { color: var(--text-muted); opacity: 0.4; }
.card-ctr-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.card-ctr-badge {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 4px; font-size: 0.65rem; color: var(--text-muted); font-weight: 600;
}
.card-ctr-badge i { font-size: 0.55rem; }
.card-ctr-badge.quality-badge { background: rgba(255, 59, 92, 0.15); color: var(--accent-red); border-color: rgba(255, 59, 92, 0.3); }
.card-ctr-badge.year-badge i { color: var(--accent-blue); }
.card-ctr-badge.episode-badge { background: rgba(0, 229, 184, 0.15); color: var(--accent-teal); border-color: rgba(0, 229, 184, 0.3); }

/* ========================================
   News Styles
   ======================================== */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.news-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; transition: var(--transition-normal);
}
.news-card:hover { transform: translateY(-6px); border-color: var(--accent-red); box-shadow: var(--shadow-lg); }
.news-card-link { display: block; }
.news-card-image { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-tertiary); }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-card:hover .news-card-image img { transform: scale(1.08); }
.news-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--text-muted);
}
.news-category-badge {
    display: inline-block; padding: 4px 12px;
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a);
    color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: var(--radius-full);
    position: absolute; top: 12px; right: 12px; z-index: 3;
}
.news-category-badge.large { font-size: 0.8rem; padding: 6px 16px; }
.news-type-badge {
    position: absolute; bottom: 12px; right: 12px; z-index: 3;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.75); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; backdrop-filter: blur(6px);
}
.news-type-badge.series { background: var(--accent-teal); }
.news-card-body { padding: 1.2rem; }
.news-card-title { font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-excerpt { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); }
.news-card-footer span { display: flex; align-items: center; gap: 0.3rem; }
.news-card-footer i { font-size: 0.7rem; }

/* Featured News */
.news-featured-card {
    position: relative; border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 2rem;
    border: 1px solid var(--border);
}
.news-featured-image { position: relative; aspect-ratio: 21/9; overflow: hidden; }
.news-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.news-featured-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 2.5rem; background: linear-gradient(to top, rgba(3,4,7,0.95) 0%, rgba(3,4,7,0.5) 50%, transparent 100%);
}
.news-featured-title { font-size: 1.8rem; font-weight: 900; margin-bottom: 0.8rem; line-height: 1.3; }
.news-featured-title a:hover { color: var(--accent-red); }
.news-featured-excerpt { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1rem; max-width: 600px; }
.news-featured-meta { display: flex; gap: 1.5rem; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.2rem; }
.news-featured-meta span { display: flex; align-items: center; gap: 0.3rem; }

/* News Filters */
.news-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.news-filter-btn {
    padding: 0.5rem 1.2rem; border-radius: var(--radius-full);
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: var(--transition-normal); font-family: var(--font-family);
}
.news-filter-btn:hover, .news-filter-btn.active { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }

/* Single News */
.news-single-header { margin-bottom: 2rem; }
.news-single-categories { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.news-single-categories .news-category-badge { position: static; }
.news-single-title { font-size: 2rem; font-weight: 900; line-height: 1.4; margin-bottom: 1rem; }
.news-single-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.9rem; }
.news-meta-item { display: flex; align-items: center; gap: 0.4rem; }
.news-meta-item i { color: var(--accent-red); }
.news-single-image { margin-bottom: 2rem; border-radius: var(--radius-lg); overflow: hidden; }
.news-single-image img { width: 100%; }
.news-single-content { line-height: 2; color: var(--text-secondary); font-size: 1rem; margin-bottom: 2rem; }
.news-single-content p { margin-bottom: 1.2rem; }
.news-single-content h2, .news-single-content h3 { color: var(--text-primary); margin: 1.5rem 0 0.8rem; }

.news-related-content { margin-bottom: 2rem; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* News Share */
.news-share-section {
    padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); margin-bottom: 2rem;
}
.news-share-section h4 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.news-share-section h4 i { color: var(--accent-red); }
.news-share-buttons { display: flex; gap: 0.6rem; }
.news-share-btn {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; transition: var(--transition-normal);
}
.news-share-btn:hover { transform: translateY(-3px); color: #fff; }
.news-share-btn.facebook { background: #1877f2; }
.news-share-btn.twitter { background: #1da1f2; }
.news-share-btn.telegram { background: #0088cc; }
.news-share-btn.whatsapp { background: #25d366; }

/* ========================================
   Author Earnings Page
   ======================================== */
.earnings-page { padding: 2rem 0 3rem; }

.earnings-user-header {
    display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); margin-bottom: 2rem;
}
.earnings-avatar img { width: 80px; height: 80px; border-radius: var(--radius-lg); border: 3px solid var(--accent-red); }
.earnings-user-name { font-size: 1.5rem; font-weight: 800; }
.earnings-user-role { color: var(--text-muted); font-size: 0.9rem; }

.earnings-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2rem; }
.earnings-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.5rem; text-align: center;
    transition: var(--transition-normal); position: relative; overflow: hidden;
}
.earnings-stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.earnings-stat-card.balance-card::before { background: linear-gradient(90deg, var(--accent-teal), #00c9a0); }
.earnings-stat-card.earned-card::before { background: linear-gradient(90deg, var(--accent-gold), #fbbf24); }
.earnings-stat-card.views-card::before { background: linear-gradient(90deg, var(--accent-blue), #3b82f6); }
.earnings-stat-card.withdrawn-card::before { background: linear-gradient(90deg, var(--accent-purple), #8b5cf6); }
.earnings-stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.earnings-stat-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.balance-card .earnings-stat-icon { color: var(--accent-teal); }
.earned-card .earnings-stat-icon { color: var(--accent-gold); }
.views-card .earnings-stat-icon { color: var(--accent-blue); }
.withdrawn-card .earnings-stat-icon { color: var(--accent-purple); }

.earnings-stat-info { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; margin-bottom: 0.3rem; }
.earnings-stat-value { font-size: 1.8rem; font-weight: 900; }
.earnings-stat-currency { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.earnings-stat-label { font-size: 0.85rem; color: var(--text-muted); }

.earnings-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.earnings-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.earnings-panel-header {
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.earnings-panel-header h3 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.earnings-panel-header h3 i { color: var(--accent-red); }
.earnings-panel-body { padding: 1.5rem; }

.content-stats-list { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.2rem; }
.content-stat-item {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem;
    background: var(--bg-tertiary); border-radius: var(--radius-md);
    transition: var(--transition-fast);
}
.content-stat-item:hover { background: var(--bg-hover); }
.content-stat-icon {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.9rem;
}
.content-stat-icon.movie { background: var(--accent-red); }
.content-stat-icon.series { background: var(--accent-teal); }
.content-stat-icon.news { background: var(--accent-purple); }
.content-stat-icon.views { background: var(--accent-gold); }
.content-stat-label { flex: 1; font-size: 0.9rem; color: var(--text-secondary); }
.content-stat-value { font-weight: 800; font-size: 1.1rem; }

.earning-rate-info {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem;
    background: rgba(0, 229, 184, 0.08); border: 1px solid rgba(0, 229, 184, 0.2);
    border-radius: var(--radius-md); font-size: 0.85rem; color: var(--accent-teal);
}
.earning-rate-info i { flex-shrink: 0; }

/* Withdrawal Form */
.withdrawal-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.form-group small { font-size: 0.75rem; color: var(--text-muted); }
.form-group .cimalive-input {
    padding: 0.7rem 1rem; background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.9rem; transition: var(--transition-normal);
    font-family: var(--font-family); color: var(--text-primary);
}
.form-group .cimalive-input:focus { border-color: var(--accent-red); box-shadow: 0 0 0 2px var(--accent-red-glow); }
.form-group select.cimalive-input { -webkit-appearance: none; appearance: none; cursor: pointer; }
.withdrawal-submit-btn { width: 100%; margin-top: 0.5rem; }
.withdrawal-message { padding: 0.8rem; border-radius: var(--radius-md); font-size: 0.9rem; margin-top: 1rem; text-align: center; }
.withdrawal-message.success { background: rgba(0, 229, 184, 0.1); color: var(--accent-teal); border: 1px solid rgba(0, 229, 184, 0.3); }
.withdrawal-message.error { background: rgba(255, 59, 92, 0.1); color: var(--accent-red); border: 1px solid rgba(255, 59, 92, 0.3); }

/* Withdrawals Table */
.withdrawals-table-wrap { overflow-x: auto; }
.withdrawals-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.withdrawals-table th {
    padding: 0.8rem 1rem; text-align: right; background: var(--bg-tertiary);
    color: var(--text-muted); font-weight: 600; font-size: 0.8rem;
    border-bottom: 2px solid var(--border);
}
.withdrawals-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.withdrawal-status {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 700;
}
.withdrawal-status.status-pending { background: rgba(255, 193, 69, 0.15); color: var(--accent-gold); }
.withdrawal-status.status-approved { background: rgba(0, 229, 184, 0.15); color: var(--accent-teal); }
.withdrawal-status.status-paid { background: rgba(96, 165, 250, 0.15); color: var(--accent-blue); }
.withdrawal-status.status-rejected { background: rgba(255, 59, 92, 0.15); color: var(--accent-red); }

/* ========================================
   Responsive: New Features
   ======================================== */
@media (max-width: 992px) {
    .earnings-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .earnings-content-grid { grid-template-columns: 1fr; }
    .news-featured-title { font-size: 1.3rem; }
    .trending-card { flex: 0 0 160px; }
}
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-featured-image { aspect-ratio: 16/10; }
    .news-featured-overlay { padding: 1.5rem; }
    .trending-card { flex: 0 0 150px; }
}
@media (max-width: 480px) {
    .earnings-stats-grid { grid-template-columns: 1fr; }
    .trending-card { flex: 0 0 140px; }
    .news-single-title { font-size: 1.4rem; }
}

/* ========================================
   Latest Episodes Grid
   ======================================== */
.latest-episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.4rem;
}
.latest-episode-card {
    display: block;
    background: var(--card-bg, #12131a);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.06);
}
.latest-episode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.latest-episode-poster {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
}
.latest-episode-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.latest-episode-card:hover .latest-episode-poster img {
    transform: scale(1.05);
}
.latest-episode-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.latest-episode-card:hover .latest-episode-overlay {
    opacity: 1;
}
.latest-episode-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-color, #ff3b5c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.latest-episode-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent-color, #ff3b5c);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.latest-episode-quality {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.7);
    color: #00e5b8;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}
.latest-episode-info {
    padding: 10px 12px 14px;
}
.latest-episode-series-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #fff);
}
.latest-episode-name {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #8b8fa3);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.latest-episode-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--text-secondary, #8b8fa3);
}
.latest-episode-rating i {
    color: #ffc107;
    margin-left: 3px;
}
@media (max-width: 768px) {
    .latest-episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
}
@media (max-width: 480px) {
    .latest-episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.8rem;
    }
    .latest-episode-info { padding: 8px 10px 12px; }
    .latest-episode-series-title { font-size: 0.78rem; }
}

/* ========================================
   Subpage Styles (Watch / Download)
   ======================================== */

/* CTA Buttons (Main article page) */
.sp-cta-buttons {
    display: flex !important; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.sp-cta-btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.9rem 2rem; border-radius: var(--radius-md); font-weight: 700;
    font-size: 1.05rem; transition: var(--transition-normal); cursor: pointer;
    position: relative; overflow: hidden; border: none !important;
    text-decoration: none !important; flex: 1; min-width: 200px; font-family: var(--font-family);
    line-height: 1.5;
}
.sp-cta-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-100%); transition: transform var(--transition-slow);
}
.sp-cta-btn:hover::after { transform: translateX(100%); }
.sp-cta-btn i { font-size: 1.2rem; }
.sp-cta-watch,
a.sp-cta-watch,
a.sp-cta-btn.sp-cta-watch {
    background: linear-gradient(135deg, #ff3b5c, #ff6b8a) !important;
    color: #fff !important;
    box-shadow: 0 6px 25px rgba(255, 59, 92, 0.4);
}
.sp-cta-watch:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(255, 59, 92, 0.5) !important; }
.sp-cta-download,
a.sp-cta-download,
a.sp-cta-btn.sp-cta-download {
    background: linear-gradient(135deg, #00e5b8, #00c9a0) !important;
    color: #fff !important;
    box-shadow: 0 6px 25px rgba(0, 229, 184, 0.3);
}
.sp-cta-download:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0, 229, 184, 0.4) !important; }

/* Subpage Header */
.subpage-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}
.subpage-title {
    font-size: 1.2rem; font-weight: 800; color: var(--text-primary);
    display: flex; align-items: center; gap: 0.6rem;
}
.subpage-title::before {
    content: ''; width: 4px; height: 22px;
    background: linear-gradient(to bottom, var(--accent-red), var(--accent-teal));
    border-radius: var(--radius-sm);
}
.subpage-title i { color: var(--accent-red); font-size: 1.2rem; }
.sp-btn-back {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1.2rem; background: var(--bg-card); color: var(--text-secondary);
    border-radius: var(--radius-md); text-decoration: none; font-size: 0.85rem;
    transition: var(--transition-fast); border: 1px solid var(--border);
    font-weight: 600; backdrop-filter: blur(10px);
}
.sp-btn-back:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Empty State */
.sp-empty-state {
    text-align: center; padding: 4rem 2rem; color: var(--text-muted);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); backdrop-filter: blur(10px);
}
.sp-empty-state i { font-size: 3rem; margin-bottom: 1rem; color: var(--accent-gold); display: block; }
.sp-empty-state p { font-size: 1rem; margin-bottom: 1.5rem; }

/* Quality Tabs */
.quality-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.quality-tab {
    padding: 0.6rem 1.5rem; border-radius: var(--radius-md); background: var(--bg-tertiary);
    border: 1px solid var(--border); color: var(--text-secondary); font-weight: 600;
    cursor: pointer; transition: var(--transition-normal); font-family: var(--font-family);
    font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem;
}
.quality-tab:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.quality-tab.active {
    background: linear-gradient(135deg, var(--accent-red), #ff6b8a); color: #fff;
    border-color: var(--accent-red); box-shadow: 0 4px 15px var(--accent-red-glow);
}

/* Player Placeholder */
.sp-player-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); gap: 0.8rem;
}
.sp-player-placeholder i { font-size: 3rem; color: var(--accent-red); opacity: 0.5; }
.sp-player-placeholder p { font-size: 0.95rem; }
.sp-player-quality-badge {
    background: var(--accent-red); color: #fff; padding: 3px 10px;
    border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700;
}

/* Server Group (quality-grouped servers) */
.server-group { margin-bottom: 1.5rem; display: none; }
.server-group.active { display: block; }
.server-group-title {
    font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0.8rem;
    display: flex; align-items: center; gap: 0.5rem; font-weight: 600;
}
.server-group-title i { color: var(--accent-red); }

/* Server Tabs */
.server-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.server-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem; background: var(--bg-tertiary);
    color: var(--text-secondary); border: 1px solid var(--border);
    border-radius: var(--radius-md); cursor: pointer;
    transition: var(--transition-normal); font-family: var(--font-family);
    font-size: 0.85rem; font-weight: 600;
}
.server-tab:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.server-tab.active {
    border-color: var(--accent-red); background: rgba(255, 59, 92, 0.12);
    color: var(--accent-red); box-shadow: 0 0 15px rgba(255, 59, 92, 0.15);
}
.server-tab-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; background: rgba(255,255,255,0.08);
    border-radius: 50%; font-size: 0.7rem; font-weight: 700;
}
.server-tab.active .server-tab-num { background: var(--accent-red); color: #fff; }
.server-tab-name { font-weight: 600; }
.server-tab-quality {
    font-size: 0.7rem; padding: 1px 6px; background: var(--accent-red);
    color: #fff; border-radius: 4px;
}

/* Download Quality Sections */
.download-quality-section {
    margin-bottom: 1.5rem; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; backdrop-filter: blur(10px);
}
.download-quality-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.5rem; background: var(--bg-tertiary); border-bottom: 1px solid var(--border);
}
.download-quality-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0;
}
.download-quality-title i { color: var(--accent-teal); }
.download-quality-title-sm {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
}
.download-quality-title-sm i { color: var(--accent-teal); }
.download-quality-size {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: var(--text-muted);
}
.download-servers-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem; padding: 1rem 1.5rem;
}
.download-server-btn {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem;
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    text-decoration: none; font-size: 0.85rem; transition: var(--transition-normal);
    cursor: pointer; font-family: var(--font-family);
}
.download-server-btn:hover {
    border-color: var(--accent-teal); background: rgba(0, 229, 184, 0.08);
    transform: translateX(-4px); color: var(--text-primary);
}
.download-server-btn i { font-size: 1rem; color: var(--text-muted); flex-shrink: 0; }
.download-server-btn:hover i { color: var(--accent-teal); }
.download-server-name { font-weight: 600; flex: 1; }
.download-server-size {
    font-size: 0.7rem; color: var(--text-muted);
    background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px;
}
.download-server-btn:hover .download-server-size { color: var(--text-secondary); }
.download-quality-inline { margin-bottom: 0.8rem; border-radius: var(--radius-md); }

/* Subpage Episode Block */
.subpage-episode-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 1.2rem;
    margin-bottom: 0.8rem; transition: var(--transition-normal);
}
.subpage-episode-block:hover { border-color: var(--accent-teal); background: var(--bg-hover); }
.subpage-episode-header {
    display: flex; align-items: center; gap: 0.8rem;
    margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border);
}
.subpage-episode-num {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; flex-shrink: 0; font-size: 0.85rem;
}
.subpage-episode-title {
    font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1;
}
.subpage-episode-duration { font-size: 0.8rem; color: var(--text-muted); }

/* Episode Overview List (Main page season content) */
.episodes-list-overview { display: flex; flex-direction: column; gap: 0.5rem; }
.episode-overview-item {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1.2rem; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: var(--transition-normal);
}
.episode-overview-item:hover { border-color: var(--accent-teal); background: var(--bg-hover); }
.episode-overview-num {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-teal), #00c9a0); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; flex-shrink: 0; font-size: 0.8rem;
}
.episode-overview-title { flex: 1; font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
.episode-overview-duration { font-size: 0.78rem; color: var(--text-muted); }
.episode-overview-actions { display: flex; gap: 0.4rem; }
.episode-overview-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    text-decoration: none; transition: var(--transition-fast); font-size: 0.75rem;
}
.episode-overview-btn.watch {
    background: rgba(255, 59, 92, 0.1); color: var(--accent-red);
    border: 1px solid rgba(255, 59, 92, 0.25);
}
.episode-overview-btn.watch:hover {
    background: var(--accent-red); color: #fff; border-color: var(--accent-red);
    box-shadow: 0 0 12px var(--accent-red-glow); transform: scale(1.08);
}
.episode-overview-btn.download {
    background: rgba(0, 229, 184, 0.08); color: var(--accent-teal);
    border: 1px solid rgba(0, 229, 184, 0.25);
}
.episode-overview-btn.download:hover {
    background: var(--accent-teal); color: #fff; border-color: var(--accent-teal);
    box-shadow: 0 0 12px var(--accent-teal-glow); transform: scale(1.08);
}

/* Subpage Navigation Link */
.subpage-nav-link { margin-top: 2rem; text-align: center; }
.subpage-nav-link .sp-cta-btn { flex: unset; min-width: unset; display: inline-flex; }

/* Responsive */
@media (max-width: 768px) {
    .sp-cta-buttons { flex-direction: column; }
    .sp-cta-btn { padding: 0.8rem 1.5rem; font-size: 0.95rem; min-width: unset; width: 100%; }
    .subpage-header { flex-direction: column; align-items: flex-start; }
    .subpage-title { font-size: 1rem; }
    .download-servers-grid { grid-template-columns: 1fr; }
    .server-tabs { gap: 0.4rem; }
    .server-tab { padding: 0.6rem 1rem; font-size: 0.8rem; }
    .episode-overview-item { flex-wrap: wrap; }
    .episode-overview-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
    .quality-tabs { gap: 0.4rem; }
    .quality-tab { padding: 0.5rem 1rem; font-size: 0.8rem; }
    .subpage-episode-block { padding: 1rem; }
    .subpage-episode-header { flex-wrap: wrap; }
}