/* ── Themes (Light/Dark Mode Only) ── */
[data-theme="dark"] {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a2e;
    --bg-hover: #252540;
    --accent: #e50914;
    --accent-glow: rgba(229, 9, 20, 0.3);
    --text-primary: #f0f0f0;
    --text-secondary: #9a9aaa;
    --text-muted: #6e6e82;
    --border: #2a2a3e;
    --success: #2ecc71;
    --warning: #f39c12;
    --gradient: linear-gradient(135deg, #e50914, #ff6b6b);
    --tag-bg: rgba(229, 9, 20, 0.15);
    --tag-color: #ff6b6b;
    --star-color: #f5c518;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f0f0f5;
    --accent: #c20008;
    --accent-glow: rgba(194, 0, 8, 0.15);
    --text-primary: #1d1d1f;
    --text-secondary: #3a3a3c;
    --text-muted: #6e6e73;
    --border: #d2d2d7;
    --success: #28a745;
    --warning: #d97706;
    --gradient: linear-gradient(135deg, #c20008, #e50914);
    --tag-bg: rgba(194, 0, 8, 0.08);
    --tag-color: #c20008;
    --star-color: #a67c00;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5;transition:background .4s,color .4s}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;background:radial-gradient(ellipse at center,var(--bg-secondary) 0%,var(--bg-primary) 70%)}
.welcome-icon{width:120px;height:120px;margin-bottom:2rem;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.welcome-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.welcome-subtitle{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2.5rem;max-width:500px}
.btn-select{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:50px;cursor:pointer;transition:.3s ease;box-shadow:0 4px 20px var(--accent-glow);font-family:inherit}
.btn-select:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
.btn-select.secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);box-shadow:none;margin-top:1rem}
.btn-select.secondary:hover{border-color:var(--accent);box-shadow:0 4px 15px rgba(0,0,0,.3)}
.supported-info{margin-top:2rem;padding:1rem 1.5rem;background:var(--bg-card);border-radius:12px;border:1px solid var(--border);max-width:450px}
.supported-info p{font-size:.85rem;color:var(--text-secondary);line-height:1.6}
.supported-info strong{color:var(--text-primary)}

.app-container{display:none;min-height:100vh}
.app-container.active{display:block}
.welcome-screen.hidden{display:none}
.loading-overlay.hidden{display:none}

.header{position:sticky;top:0;z-index:100;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1rem 2rem;backdrop-filter:blur(10px)}
.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.header-left{display:flex;align-items:center;gap:1rem}
.app-logo{width:40px;height:40px;flex-shrink:0}
.header-title{font-size:1.3rem;font-weight:700}
.header-stats{font-size:.85rem;color:var(--text-secondary)}
.header-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.search-box{position:relative}
.search-box input{padding:.6rem 1rem .6rem 2.5rem;font-size:.9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:50px;color:var(--text-primary);width:220px;transition:.3s;font-family:inherit}
.search-box input:focus{outline:none;border-color:var(--accent);width:280px;box-shadow:0 0 0 3px var(--accent-glow)}
.search-box svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted)}
.view-toggle{display:flex;background:var(--bg-card);border-radius:8px;border:1px solid var(--border);overflow:hidden}
.view-btn{padding:.5rem .75rem;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:.2s;display:flex;align-items:center;font-family:inherit}
.view-btn.active{background:var(--accent);color:#fff}
.view-btn:hover:not(.active){background:var(--bg-hover)}
.btn-header{padding:.5rem .75rem;font-size:.85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:.2s;font-family:inherit;display:flex;align-items:center;gap:.4rem}
.btn-header:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}
.theme-selector{position:relative;display:inline-flex;align-items:center;gap:4px}
.theme-btn{padding:.5rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:.2s;font-family:inherit;display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.theme-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.theme-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:.5rem;min-width:180px;box-shadow:0 12px 40px rgba(0,0,0,.4);display:none;z-index:200}
.theme-dropdown.open{display:block}
.theme-option{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border-radius:8px;cursor:pointer;transition:.2s;border:none;background:none;color:var(--text-primary);width:100%;font-family:inherit;font-size:.9rem}
.theme-option:hover{background:var(--bg-hover)}
.theme-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border)}
.theme-option.active .theme-dot{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}

.main-content{max-width:1400px;margin:0 auto;padding:1.5rem 2rem 3rem}
.filter-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.filter-bar select{padding:.5rem 1rem;font-size:.85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;font-family:inherit}
.filter-bar select:focus{outline:none;border-color:var(--accent)}
.filter-count{font-size:.85rem;color:var(--text-secondary);margin-left:auto}
.skipped-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .65rem;font-size:.75rem;background:rgba(243,156,18,.15);color:var(--warning);border-radius:6px;cursor:pointer}
.skipped-badge:hover{background:rgba(243,156,18,.25)}
.skipped-panel{margin-top:1rem;padding:1rem;background:var(--bg-card);border-radius:12px;border:1px solid var(--border);display:none}
.skipped-panel.active{display:block}
.skipped-panel h4{font-size:.9rem;margin-bottom:.5rem;color:var(--warning)}
.skipped-list{list-style:none;max-height:200px;overflow-y:auto}
.skipped-list li{padding:.4rem 0;font-size:.8rem;color:var(--text-secondary);border-bottom:1px solid var(--border)}

.loading-overlay{position:fixed;inset:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200}
.spinner{width:50px;height:50px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-progress{margin-top:.75rem;font-size:.85rem;color:var(--text-secondary)}

.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.movie-card{background:var(--bg-card);border-radius:12px;overflow:hidden;cursor:pointer;transition:.3s;border:1px solid transparent;position:relative;display:flex;flex-direction:column;contain:layout style paint}
.movie-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.movie-card:hover .card-overlay{opacity:1}
.poster-container{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center}
.poster-img{width:100%;height:100%;object-fit:cover;display:none;opacity:0;will-change:transform;backface-visibility:hidden;background:var(--bg-card);transition:opacity .4s ease,transform .3s}
.poster-img.loaded{display:block;opacity:1}
.movie-card:hover .poster-img.loaded{transform:scale(1.05)}
.no-poster-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;color:var(--text-secondary);font-size:.8rem;padding:1rem;text-align:center;z-index:1}
[data-theme="light"] .no-poster-placeholder{color:#515154}
.no-poster-placeholder svg{width:48px;height:48px;margin-bottom:.5rem;opacity:.5}
.logo-img{position:absolute;top:8px;left:8px;max-width:60px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));display:none;z-index:2;opacity:0;transition:opacity .4s ease}
.logo-img.loaded{display:block;opacity:1}
.card-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s;pointer-events:none}
.card-overlay svg{width:48px;height:48px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.nfo-badge{position:absolute;top:8px;right:8px;padding:.2rem .5rem;font-size:.65rem;background:rgba(0,0,0,.7);color:var(--text-secondary);border-radius:4px}
.rating-badge{position:absolute;top:8px;right:8px;padding:.2rem .4rem;font-size:.65rem;background:rgba(0,0,0,.7);border-radius:4px;display:flex;align-items:center;gap:3px;font-weight:600;color:var(--star-color);z-index:3}
.card-info{padding:.85rem;flex:1;display:flex;flex-direction:column}
.movie-title{font-size:.9rem;font-weight:600;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.movie-year{font-size:.8rem;color:var(--text-secondary);margin-bottom:.4rem}
.movie-quality{position:absolute;bottom:8px;left:8px;padding:.15rem .5rem;font-size:.7rem;font-weight:600;background:var(--tag-bg);color:var(--tag-color);border-radius:4px;z-index:3;white-space:nowrap;max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis}
.movie-genre{font-size:.7rem;color:var(--text-secondary);margin-bottom:.25rem}
[data-theme="light"] .movie-genre{color:#515154}
.movie-filesize{font-size:.75rem;color:var(--text-secondary);margin-top:auto}
[data-theme="light"] .movie-filesize{color:#515154}

/* Watch Progress Bar */
.watch-progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.15);z-index:4;border-radius:0 0 12px 12px;overflow:hidden}
.watch-progress-fill{height:100%;background:var(--accent);transition:width .3s ease;border-radius:0 2px 2px 0}
[data-theme="light"] .watch-progress-bar{background:rgba(0,0,0,.1)}
/* Watch progress bar for non-card contexts (detail view, compact, poster-wall, shelf) */
.detail-poster .watch-progress-bar{border-radius:0 0 8px 8px}
.compact-poster .watch-progress-bar{height:2px;border-radius:0 0 5px 5px}
.poster-wall-item .watch-progress-bar{border-radius:0 0 8px 8px}
.shelf-poster .watch-progress-bar{border-radius:0 0 8px 8px}
/* Detail page hero watch progress */
.detail-watch-progress{margin:.75rem 0;padding:.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(8px)}
.detail-watch-progress-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.85rem;color:var(--text-secondary)}
.detail-watch-progress-header svg{color:var(--accent);flex-shrink:0}
.detail-watch-progress-label{font-weight:600;color:var(--text-primary)}
.detail-watch-progress-time{color:var(--text-muted);margin-left:auto;font-size:.8rem}
.detail-watch-progress-bar{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.detail-watch-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#ff6b6b);border-radius:3px;transition:width .3s ease;box-shadow:0 0 8px var(--accent-glow)}
[data-theme="light"] .detail-watch-progress{background:var(--bg-secondary);border-color:var(--border)}
[data-theme="light"] .detail-watch-progress-bar{background:rgba(0,0,0,.1)}

/* Card favorite & watched badges */
.card-fav-btn{position:absolute;top:8px;left:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;z-index:4;opacity:0;transition:all .2s;padding:0;backdrop-filter:blur(4px)}
.movie-card:hover .card-fav-btn{opacity:1}
.card-fav-btn:hover{background:var(--accent);color:#fff}
.card-fav-btn.favorited{color:var(--accent);opacity:1}
.watched-badge{position:absolute;bottom:8px;right:8px;padding:.15rem .4rem;font-size:.6rem;background:rgba(46,204,113,.15);color:var(--success);border-radius:4px;z-index:4;display:flex;align-items:center;gap:2px}

/* Type badges */
.tv-badge{background:rgba(59,130,246,.15);color:#3b82f6 !important}
.anime-badge{background:rgba(168,85,247,.15);color:#a855f7 !important}
.animation-badge{background:rgba(234,179,8,.15);color:#eab308 !important}
.movie-badge{background:var(--tag-bg);color:var(--tag-color) !important}

/* Card entrance animation */
.card-new{animation:cardFadeIn .3s ease forwards}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.movie-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1.5rem}
.movie-detail-card{display:flex;gap:1.25rem;background:var(--bg-card);border-radius:12px;overflow:hidden;cursor:pointer;transition:.3s;border:1px solid transparent;padding:1rem}
.movie-detail-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.detail-poster{position:relative;width:120px;flex-shrink:0;background:var(--bg-secondary);aspect-ratio:2/3;border-radius:8px;overflow:hidden}
.detail-poster .poster-img{display:none;opacity:0}
.detail-poster .poster-img.loaded{display:block;opacity:1}
.detail-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.detail-title{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.detail-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.detail-tag{padding:.2rem .6rem;font-size:.75rem;background:rgba(255,255,255,.05);border-radius:4px;color:var(--text-secondary)}
.detail-filename{font-size:.7rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}
[data-theme="light"] .detail-filename{color:#515154}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;max-width:400px;margin:4rem auto}
.empty-state svg{width:80px;height:80px;color:var(--text-secondary);margin-bottom:1rem}
[data-theme="light"] .empty-state svg{color:#515154}
.empty-state h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--text-secondary)}

.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:600;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{padding:.85rem 1.25rem;background:var(--bg-card);border-radius:8px;border-left:3px solid var(--accent);box-shadow:var(--shadow);animation:slideIn .3s ease;max-width:350px;pointer-events:auto;color:var(--text-primary)}
.toast.success{border-left-color:var(--success)}
.toast.warning{border-left-color:var(--warning)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

.player-modal{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .3s ease}
.player-modal.active{opacity:1;pointer-events:all}
.player-header{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.player-title{font-size:1.2rem;font-weight:600}
.player-controls{display:flex;gap:.75rem}
.btn-close-player{padding:.5rem;background:var(--accent);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;transition:.2s}
.btn-close-player:hover{opacity:.8}
.player-container{width:100%;max-width:1200px;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.player-container video{width:100%;max-height:75vh;display:block;background:#000}
.player-nav{display:flex;justify-content:space-between;width:100%;max-width:1200px;margin-top:1rem}
.nav-btn{padding:.75rem 1.5rem;font-size:.9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:.2s;font-family:inherit;display:flex;align-items:center;gap:.5rem}
.nav-btn:hover{background:var(--bg-hover)}
.nav-btn:disabled{opacity:.3;cursor:not-allowed}

.detail-page{position:fixed;inset:0;z-index:400;overflow:hidden;background:var(--bg-primary);opacity:0;pointer-events:none;transition:opacity .4s ease}
.detail-page.active{opacity:1;pointer-events:all}
.detail-page-bg {
    position: fixed;
    top: -80px;
    left: -80px;
    right: -80px;
    bottom: -80px;
    z-index: 0;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    filter: blur(30px) brightness(0.35) saturate(1.4);
    transform: scale(1.2);
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.detail-page-bg.loaded {
    opacity: 1;
}

.detail-page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.4) 30%,
            rgba(0, 0, 0, 0.65) 60%,
            rgba(0, 0, 0, 0.85) 100%
        ),
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.4) 100%
        );
    pointer-events: none;
}

[data-theme="light"] .detail-page-bg {
    filter: blur(30px) brightness(0.6) saturate(1.2);
}

[data-theme="light"] .detail-page-bg::after {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.55) 30%,
            rgba(255, 255, 255, 0.75) 60%,
            rgba(255, 255, 255, 0.92) 100%
        ),
        radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.5) 100%
        );
}
.detail-page-scroll{position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x:hidden;box-shadow:inset 0 0 150px rgba(0,0,0,0.3)}
[data-theme="light"] .detail-page-scroll{box-shadow:inset 0 0 150px rgba(255,255,255,0.2)}
.detail-page-content{max-width:1200px;margin:0 auto;padding:2rem}
.detail-back-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1.4rem;font-size:.95rem;font-weight:600;background:rgba(255,255,255,.1);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.15);border-radius:50px;color:var(--text-primary);cursor:pointer;transition:.3s;font-family:inherit;margin-bottom:2rem}
.detail-back-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 20px var(--accent-glow)}
.detail-back-btn svg{width:18px;height:18px}
.detail-hero{display:flex;gap:2.5rem;margin-bottom:2.5rem}
.detail-hero-poster{width:280px;flex-shrink:0;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--bg-card);box-shadow:0 16px 50px rgba(0,0,0,.6)}
.detail-hero-poster img{width:100%;height:100%;object-fit:cover}
.detail-hero-poster .no-poster-placeholder{position:relative;width:100%;height:100%;background:var(--bg-card);display:flex;align-items:center;justify-content:center}
.detail-hero-poster .no-poster-placeholder svg{width:80px;height:80px;opacity:.3}
.detail-hero-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding:1rem 0}
.detail-hero-title{font-size:2.8rem;font-weight:800;line-height:1.1;margin-bottom:.5rem;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
[data-theme="light"] .detail-hero-title{text-shadow:0 1px 10px rgba(255,255,255,0.5)}
.detail-hero-subtitle{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:1.1rem;color:var(--text-secondary);margin-bottom:1.25rem}
.detail-hero-subtitle span{display:flex;align-items:center;gap:.3rem}
.detail-hero-rating{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem}
.detail-hero-rating-val{font-size:2rem;font-weight:800;color:var(--star-color)}
.detail-hero-rating-bar{flex:1;max-width:200px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.detail-hero-rating-fill{height:100%;background:var(--star-color);border-radius:3px;transition:width .6s ease}
.detail-hero-rating-votes{font-size:.9rem;color:var(--text-secondary)}
[data-theme="light"] .detail-hero-rating-votes{color:#515154}
.detail-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.detail-play-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:1.15rem;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:50px;cursor:pointer;transition:.3s ease;box-shadow:0 6px 24px var(--accent-glow);font-family:inherit}
.detail-play-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 35px var(--accent-glow)}
.detail-play-btn svg{width:22px;height:22px}
.detail-secondary-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:1.15rem;font-weight:700;color:var(--text-primary);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50px;cursor:pointer;transition:.3s ease;font-family:inherit;backdrop-filter:blur(16px) saturate(1.5)}
.detail-secondary-btn:hover{background:var(--bg-hover);border-color:var(--text-muted)}
.detail-secondary-btn svg{width:22px;height:22px}
.detail-section{margin-bottom:2rem;background:rgba(10,10,15,0.45);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-radius:14px;padding:1.25rem;border:1px solid rgba(255,255,255,0.06)}
[data-theme="light"] .detail-section{background:rgba(255,255,255,0.55);border:1px solid rgba(0,0,0,0.06)}
.detail-section-title{font-size:1.2rem;font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.08);color:var(--text-primary)}
[data-theme="light"] .detail-section-title{color:#1d1d1f;border-bottom-color:rgba(0,0,0,.08)}
.detail-page .tvshow-season-header,
.detail-page .detail-tech-item {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .detail-page .tvshow-season-header,
[data-theme="light"] .detail-page .detail-tech-item {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,.06);
}
.detail-page .tvshow-episode-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.06);
}
[data-theme="light"] .detail-page .tvshow-episode-card {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,.06);
}
.detail-plot{font-size:1.05rem;color:var(--text-primary);line-height:1.7;font-weight:500}
[data-theme="light"] .detail-plot{color:#2d2d2f}
.detail-tagline{font-size:1.1rem;font-style:italic;color:var(--text-secondary);margin-bottom:1.25rem;font-weight:500}
[data-theme="light"] .detail-tagline{color:#3a3a3c}
.detail-genres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.detail-genre-pill{padding:.35rem .9rem;font-size:.85rem;background:var(--tag-bg);color:var(--tag-color);border-radius:50px;font-weight:500;cursor:pointer;transition:.2s}
.detail-genre-pill:hover{background:var(--tag-color);color:var(--bg-primary)}
.detail-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.detail-tag-sm{padding:.25rem .6rem;font-size:.75rem;background:rgba(255,255,255,.05);border-radius:4px;color:var(--text-secondary)}
[data-theme="light"] .detail-tag-sm{color:#515154}
.detail-meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.detail-meta-item{display:flex;flex-direction:column;gap:.15rem}
.detail-meta-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
[data-theme="light"] .detail-meta-label{color:#515154}
.detail-meta-value{font-size:.95rem;color:var(--text-primary);word-break:break-word}
.detail-meta-value a{color:var(--accent);text-decoration:none}
.detail-meta-value a:hover{text-decoration:underline}
.detail-tech{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.detail-tech-item{padding:1rem;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid var(--border)}
.detail-tech-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
[data-theme="light"] .detail-tech-label{color:#515154}
.detail-tech-value{font-size:1rem;font-weight:600;color:var(--text-primary)}
.detail-cast-scroll{display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:.75rem;-webkit-overflow-scrolling:touch}
.detail-cast-card{flex-shrink:0;width:140px;text-align:center}
.detail-cast-avatar{width:160px;height:160px;border-radius:50%;margin:0 auto .75rem;overflow:hidden;background:var(--bg-card);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:3.6rem;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.detail-cast-avatar img{width:100%;height:100%;object-fit:cover}
.detail-cast-name{font-size:.85rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-cast-role{font-size:.75rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="light"] .detail-cast-role{color:#515154}

@media(max-width:768px){
.header-content{flex-direction:column;align-items:stretch}
.search-box input{width:100%}.search-box input:focus{width:100%}
.movie-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.movie-detail-grid{grid-template-columns:1fr}
.main-content{padding:1rem}
.welcome-title{font-size:1.8rem}
.detail-hero{flex-direction:column;align-items:center;text-align:center}
.detail-hero-poster{width:200px}
.detail-hero-title{font-size:2rem}
.detail-hero-rating{justify-content:center}
.detail-hero-actions{justify-content:center}
.detail-genres{justify-content:center}
}
@media(max-width:480px){.movie-grid{grid-template-columns:repeat(2,1fr)}}

/* Collections Tab Styles */
.nav-tabs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
}
.nav-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.nav-tabs {
    display: flex;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.nav-tab {
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-tab.hidden-tab {
    display: none;
}

.nav-tab.active {
    background: var(--accent);
    color: #fff;
}

.nav-tab:hover:not(.active) {
    background: var(--bg-hover);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.collections-header {
    margin-bottom: 2rem;
}

.collections-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.collections-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.collection-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid transparent;
    position: relative;
}

.collection-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.collection-poster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg-secondary);
}

.collection-poster-item {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    overflow: hidden;
}

.collection-poster-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collection-poster-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.collection-info {
    padding: 1rem;
}

.collection-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-movie-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.collection-overview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Collection Detail View */
.collection-detail-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.back-to-collections-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
    margin-bottom: 1rem;
}

.back-to-collections-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.collection-detail-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.collection-detail-overview {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 0.75rem;
}

.collection-detail-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.poster-container .movie-quality {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 4px;
    z-index: 3;
    white-space: nowrap;
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure card content stays within bounds */
.card-info {
    overflow: hidden;
}

.movie-title {
    word-wrap: break-word;
    hyphens: auto;
}

/* Search and view toggle always visible on all tabs */
#searchBox.hidden,
#viewToggle.hidden {
    display: none !important;
}

/* Player subtitle menu styles */
.player-subtitle-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-control-group {
    position: relative;
    display: flex;
    align-items: center;
}

.player-control-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.85rem;
}

.player-control-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.player-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 200;
    max-height: 300px;
    overflow-y: auto;
}

.player-dropdown.active {
    display: block;
}

.player-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.player-dropdown-item:hover {
    background: var(--bg-hover);
}

.player-dropdown-item:first-child {
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--accent);
}

/* ============================================================================
   PROFESSIONAL PLAYER CONTROLS (Speed, PiP, Fullscreen)
   ============================================================================ */

.player-pro-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    margin-top: 8px;
    backdrop-filter: blur(10px);
}

.control-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pro-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pro-btn:hover {
    background: #555;
    transform: translateY(-1px);
}

.pro-btn:active {
    transform: translateY(0);
}

.time-display {
    font-family: 'Courier New', monospace;
    color: #aaa;
    font-size: 13px;
    margin-left: 8px;
    min-width: 100px;
    text-align: right;
}

/* Dropdown Menu Enhancements */
.player-dropdown-menu {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.dropdown-toggle {
    background: #333;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.dropdown-toggle:hover {
    background: #555;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #222;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    z-index: 1000;
    padding: 4px 0;
    border: 1px solid #333;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-content.active {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

.dropdown-item {
    background: transparent;
    border: none;
    color: #ddd;
    padding: 10px 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:hover {
    background: #444;
    padding-left: 20px;
}

.dropdown-item.active {
    color: var(--accent, #e50914);
    font-weight: bold;
    background: rgba(229, 9, 20, 0.1);
}

.arrow {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.dropdown-toggle[aria-expanded="true"] .arrow,
.dropdown-content.active + .arrow {
    transform: rotate(180deg);
}

/* Scrollbar Styling for Dropdowns */
.dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Manage Folders Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-overlay.hidden {
    display: none;
}

.modal-container {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.folder-list {
    list-style: none;
    margin-bottom: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
}

.folder-item-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.folder-item-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-item-remove {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}

.folder-item-remove:hover {
    background: rgba(229, 9, 20, 0.15);
    color: var(--accent);
}

.btn-add-folder {
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
    font-family: inherit;
}

.btn-add-folder:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
}

.empty-folders-message {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ============================================================================
   TV SHOW DETAIL PAGE STYLES
   ============================================================================ */

/* TV Show type badge in hero section */
.tvshow-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* TV Show status badge */
.tvshow-status {
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
    border-radius: 4px;
    font-weight: 600;
}

/* Season Tabs */
.tvshow-season-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.tvshow-season-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    min-width: 100px;
}

.tvshow-season-tab:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.tvshow-season-tab.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.tvshow-season-tab.active .season-tab-count {
    color: rgba(255, 255, 255, 0.8);
}

.season-tab-number {
    font-size: 0.9rem;
    font-weight: 700;
}

.season-tab-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Season Header (poster + plot) */
.tvshow-season-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.tvshow-season-poster {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.tvshow-season-poster .season-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.tvshow-season-poster .season-poster-img.loaded {
    display: block;
}

.tvshow-season-info {
    flex: 1;
    min-width: 0;
}

.tvshow-season-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.tvshow-season-plot {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.tvshow-season-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Episode List */
.tvshow-episode-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tvshow-episode-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tvshow-episode-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    transform: translateX(4px);
}

.tvshow-episode-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tvshow-episode-card:hover .tvshow-episode-number {
    background: var(--accent);
    color: #fff;
}

.ep-num {
    font-size: 0.9rem;
}

.tvshow-episode-info {
    flex: 1;
    min-width: 0;
}

.tvshow-episode-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tvshow-episode-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.ep-filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.ep-quality {
    padding: 0.1rem 0.4rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.7rem;
}

.ep-size {
    font-size: 0.75rem;
}

.tvshow-episode-play {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tvshow-episode-card:hover .tvshow-episode-play {
    color: var(--accent);
}

.tvshow-no-episodes {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* TV Show badge on cards */
.tv-badge {
    background: rgba(46, 204, 113, 0.15) !important;
    color: var(--success) !important;
}

/* TV Show card in tab */
.tvshow-card .poster-container {
    aspect-ratio: 2/3;
}

/* TV Episode Navigator in Player */
.tv-episode-nav {
    gap: 0.5rem;
    align-items: center;
}

.tv-ep-nav-btn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.8rem !important;
}

.tv-ep-nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.tv-ep-indicator {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    padding: 0.3rem 0.6rem;
    background: var(--tag-bg);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* TV Show responsive styles */
@media(max-width:768px) {
    .tvshow-season-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .tvshow-season-poster {
        width: 140px;
        min-width: 140px;
    }
    
    .tvshow-season-tabs {
        justify-content: center;
    }
    
    .tvshow-season-tab {
        min-width: 80px;
        padding: 0.5rem 0.75rem;
    }
    
    .tvshow-episode-card {
        padding: 0.65rem 0.75rem;
    }
    
    .ep-filename {
        max-width: 150px;
    }
    
    .tv-episode-nav {
        flex-wrap: nowrap;
    }
}

@media(max-width:480px) {
    .tvshow-season-tab {
        min-width: 70px;
        padding: 0.4rem 0.5rem;
    }
    
    .season-tab-number {
        font-size: 0.8rem;
    }
    
    .season-tab-count {
        font-size: 0.65rem;
    }
}

/* ============================================================================
   SCROLL-TO-TOP BUTTON
   ============================================================================ */
.scroll-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 5.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 550;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}
.scroll-to-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-to-top-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-2px);
}
.scroll-to-top-btn.hidden {
    display: none;
}

/* ============================================================================
   KEYBOARD SHORTCUT HINT TOAST
   ============================================================================ */
.keyboard-hint-overlay {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f0f0f0;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.keyboard-hint-overlay.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   TOP RATED ROW (All tab)
   ============================================================================ */
.top-rated-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.top-rated-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}
.top-rated-title svg {
    color: var(--star-color);
}
.top-rated-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.top-rated-row::-webkit-scrollbar {
    height: 6px;
}
.top-rated-row::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.top-rated-card {
    flex-shrink: 0;
    width: 140px;
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid transparent;
}
.top-rated-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.top-rated-card .poster-container {
    aspect-ratio: 2/3;
}
.top-rated-card .card-info {
    padding: 0.6rem;
}
.top-rated-card .movie-title {
    font-size: 0.8rem;
}
.top-rated-card .movie-year {
    font-size: 0.7rem;
}
.top-rated-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 4;
}

/* ============================================================================
   GENRE FILTER DROPDOWN
   ============================================================================ */
.genre-filter-select {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    max-width: 180px;
}
.genre-filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ============================================================================
   IMPROVEMENT: Path Display in Detail Page
   Shows the file path that will be copied when clicking "Copy Path"
   ============================================================================ */
.detail-path-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    transition: all 0.2s ease;
}

.detail-path-display:hover {
    background: rgba(229, 9, 20, 0.08);
    border-color: var(--accent);
    color: var(--text-primary);
}

.detail-path-display span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
}

/* ============================================================================
   IMPROVEMENT: Folder Item Info in Manage Folders Modal
   Shows folder name and path separately for better visibility
   ============================================================================ */
.folder-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.folder-item-path {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Courier New', Courier, monospace;
}

[data-theme="light"] .folder-item-path {
    color: #86868b;
}

/* ============================================================================
   IMPROVEMENT: Performance Optimizations
   CSS containment and will-change hints for smoother animations
   ============================================================================ */
.movie-card {
    contain: layout style paint;
    will-change: transform;
}

.movie-card:hover {
    will-change: transform, box-shadow;
}

.tvshow-episode-card {
    contain: layout style;
}

.detail-section {
    /* contain removed - was causing detail sections to disappear with animations */
    opacity: 1;
}

/* Smooth scroll behavior */
.detail-page-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Reduce layout thrashing during search */
.movie-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* Faster transitions for interactive elements */
.nav-tab,
.view-btn,
.btn-header,
.filter-bar select {
    transition: all 0.15s ease;
}

/* Better scroll performance */
.main-content {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   IMPROVEMENT: Toast fade-out animation
   ============================================================================ */
.toast {
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 3.7s forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

/* ============================================================================
   IMPROVEMENT: Responsive path display
   ============================================================================ */
@media(max-width:768px) {
    .detail-path-display {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }
    .detail-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .detail-play-btn, .detail-secondary-btn {
        justify-content: center;
        width: 100%;
    }
    .detail-path-display {
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================================
   TASK 3: CSS STYLING ENHANCEMENTS
   ============================================================================ */

/* ── 1. Welcome Screen Animated Particles & Orbs ── */
.welcome-bg {
    position: relative;
    overflow: hidden;
}

.welcome-bg::before {
    content: '';
    position: absolute;
    inset: 0;
}

.welcome-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.welcome-gradient-orb.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--accent);
    top: -100px;
    right: -100px;
    animation: orbFloat1 8s ease-in-out infinite;
}

.welcome-gradient-orb.orb-2 {
    width: 300px;
    height: 300px;
    background: #9b59b6;
    bottom: -80px;
    left: -80px;
    animation: orbFloat2 7s ease-in-out infinite;
}

.welcome-gradient-orb.orb-3 {
    width: 250px;
    height: 250px;
    background: #3498db;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbFloat3 6s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -40px); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-40px, 30px); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(calc(-50% + 20px), calc(-50% + 20px)); }
}

.welcome-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ── 2. Card Shine/Glare Hover Effect ── */
.movie-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 5;
    border-radius: 12px;
}

.movie-card:hover::after {
    animation: shine 0.6s ease forwards;
}

@keyframes shine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* ── 3. Toast Improvements ── */
.toast {
    position: relative;
}

.toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 8px 8px;
    animation: toastProgress 4s linear forwards;
}

.toast.success::after {
    background: var(--success);
}

.toast.warning::after {
    background: var(--warning);
}

/* ── 5. Skeleton Loading/Shimmer Effect ── */
.skeleton {
    background: var(--bg-hover);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.skeleton-card {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 12px;
    background: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
    background: var(--bg-hover);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-text.short {
    width: 60%;
}

/* ── 6. Top Rated Section Polish ── */
.top-rated-section {
    margin-bottom: 2rem;
}

.top-rated-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--star-color);
}

.top-rated-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.top-rated-card {
    flex-shrink: 0;
    width: 150px;
    cursor: pointer;
    transition: 0.3s;
}

.top-rated-card:hover {
    transform: translateY(-5px);
}

.top-rated-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 4;
}

/* ── 7. Detail Page Animated Entry ── */
@keyframes detailFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-page.active .detail-page-content {
    animation: detailFadeIn 0.4s ease-out;
    animation-fill-mode: both;
}

.detail-hero {
    animation: detailFadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.detail-section {
    animation: detailFadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

/* Detail section stagger delays removed - handled by detailStaggerIn rules */

/* ── 8. Search Keyboard Shortcut Badge ── */
.search-kbd {
    padding: 2px 6px;
    font-size: 0.7rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: inherit;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.search-box input:focus ~ .search-kbd {
    display: none;
}

/* ── 9. Card Badge Improvements ── */
.tv-badge {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.movie-quality {
    backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
}

/* ── 10. Responsive Improvements ── */
@media(max-width:640px) {
    .nav-tabs {
        font-size: 0.75rem;
    }
    .nav-tab {
        padding: 0.4rem 0.6rem;
    }
    .header {
        padding: 0.75rem 1rem;
    }
}

@media(max-width:360px) {
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .welcome-title {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   FAVORITES SYSTEM STYLES
   ============================================================================ */
.card-fav-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: scale(0.8);
}
.movie-card:hover .card-fav-btn {
    opacity: 1;
    transform: scale(1);
}
.card-fav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.15) !important;
}
.card-fav-btn.favorited {
    color: #e74c3c;
    opacity: 1;
    transform: scale(1);
}
.card-fav-btn.favorited svg {
    filter: drop-shadow(0 0 4px rgba(231, 76, 60, 0.5));
}
.detail-fav-btn.favorited {
    color: #e74c3c;
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}
.detail-fav-btn.favorited svg {
    filter: drop-shadow(0 0 4px rgba(231, 76, 60, 0.3));
}
@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.card-fav-btn.just-toggled {
    animation: heartPop 0.3s ease;
}

/* ============================================================================
   APP WRAPPER & STICKY FOOTER
   ============================================================================ */
.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-footer {
    padding: 1rem 2rem;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: auto;
}

.footer-link {
    color: var(--accent);
    text-decoration: none;
    transition: 0.2s;
}

.footer-link:hover {
    text-decoration: underline;
}

/* ============================================================================
   WATCH HISTORY STYLES
   ============================================================================ */
.history-timeline {
    max-width: 800px;
}

.history-date-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 1rem 0 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 1;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    transition: background 0.2s;
    cursor: pointer;
}

.history-item:hover {
    background: var(--bg-hover);
}

.history-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--accent);
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.history-item-info {
    flex: 1;
    min-width: 0;
}

.history-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.history-item-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.history-year {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.history-quality {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 4px;
}

.history-item-time {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.history-actions {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.btn-clear-history {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-clear-history:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
    color: #e74c3c;
}

/* ============================================================================
   WATCHED BADGE
   ============================================================================ */
.watched-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 204, 113, 0.85);
    border-radius: 50%;
    color: #fff;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ============================================================================
   GLASSMORPHISM WELCOME SCREEN ENHANCEMENTS
   ============================================================================ */
.welcome-content {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 580px;
}

[data-theme="light"] .welcome-content {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.welcome-info-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

[data-theme="light"] .welcome-info-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.welcome-drop-zone:hover {
    border-color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
    color: var(--accent);
}

.welcome-drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(229, 9, 20, 0.1);
    transform: scale(1.02);
}

/* ============================================================================
   ENHANCED CARD HOVER EFFECTS
   ============================================================================ */
.movie-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid transparent;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.movie-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--accent);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px var(--accent),
        0 0 30px var(--accent-glow);
}

.poster-container {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--bg-hover);
}

.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.movie-card:hover .card-overlay {
    opacity: 1;
}

.card-overlay svg {
    width: 48px;
    height: 48px;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s;
}

.movie-card:hover .card-overlay svg {
    transform: scale(1.1);
}

.card-info {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}

.anime-badge {
    background: rgba(155, 89, 182, 0.85) !important;
    color: #fff !important;
}

.animation-badge {
    background: rgba(52, 152, 219, 0.85) !important;
    color: #fff !important;
}

/* ============================================================================
   ENHANCED DETAIL PAGE STYLING
   ============================================================================ */
.detail-page {
    position: fixed;
    inset: 0;
    z-index: 500;
    overflow-y: auto;
    background: var(--bg-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.detail-page.active {
    opacity: 1;
    pointer-events: all;
}

.detail-page-bg {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: blur(30px);
    z-index: -1;
    transition: opacity 0.5s;
}

.detail-page-scroll {
    min-height: 100%;
}

.detail-page-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    margin-bottom: 2rem;
    transition: all 0.2s;
}

.detail-back-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.detail-hero {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.detail-hero-poster {
    flex-shrink: 0;
    width: 250px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.detail-hero-poster img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}

.detail-hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.detail-hero-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.detail-hero-subtitle span {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: var(--bg-hover);
    border-radius: 6px;
}

.detail-hero-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.detail-hero-rating-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--star-color);
}

.detail-hero-rating-bar {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
}

.detail-hero-rating-fill {
    height: 100%;
    background: var(--star-color);
    border-radius: 3px;
    transition: width 0.6s;
}

.detail-hero-rating-votes {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.detail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.detail-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.detail-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.detail-play-btn svg {
    width: 20px;
    height: 20px;
}

.detail-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.detail-secondary-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.detail-secondary-btn svg {
    width: 18px;
    height: 18px;
}

.detail-path-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    transition: all 0.2s;
    overflow: hidden;
}

.detail-path-display:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.detail-path-display span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-tagline {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
}

.detail-genre-pill {
    padding: 0.35rem 0.85rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
}

.detail-genre-pill:hover {
    background: var(--accent);
    color: #fff;
}

.detail-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    margin-left: 0.75rem;
}

.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.detail-meta-value a {
    color: var(--accent);
    text-decoration: none;
}

.detail-meta-value a:hover {
    text-decoration: underline;
}

.detail-tech {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.detail-tech-item {
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    text-align: center;
}

.detail-tech-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
}

/* ============================================================================
   TV SHOW DETAIL ENHANCEMENTS
   ============================================================================ */
.tvshow-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tvshow-hero .detail-hero-subtitle {
    justify-content: center;
}

.tvshow-hero .detail-hero-actions {
    justify-content: center;
}

.tvshow-hero .detail-path-display {
    max-width: 500px;
}

.tvshow-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.tvshow-status {
    color: #2ecc71;
}

.tvshow-season-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.tvshow-season-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    flex-shrink: 0;
}

.tvshow-season-tab:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.tvshow-season-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.tvshow-season-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}

.tvshow-season-poster {
    flex-shrink: 0;
    width: 120px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.season-poster-img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s;
}

.season-poster-img.loaded {
    opacity: 1;
}

.tvshow-episode-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.tvshow-episode-card:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    transform: translateX(4px);
}

.tvshow-episode-card:hover .tvshow-episode-play {
    color: var(--accent);
}

/* ============================================================================
   ENHANCED STATS PAGE STYLES
   ============================================================================ */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-section {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.stats-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.stats-bar-fill {
    height: 100%;
    background: var(--gradient);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}

.decade-fill {
    background: linear-gradient(135deg, #3498db, #2ecc71) !important;
}

.stats-top-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
}

.stats-top-item:hover {
    background: var(--bg-hover);
}

.stats-top-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================================
   ENHANCED MODAL STYLES
   ============================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s;
}

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

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--accent);
    color: #fff;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.folder-item:hover {
    border-color: var(--accent);
}

.folder-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.folder-item-remove:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
    color: #e74c3c;
}

.btn-add-folder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    justify-content: center;
    margin-top: 0.5rem;
}

.btn-add-folder:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
}

/* ============================================================================
   ENHANCED HEADER & NAVIGATION
   ============================================================================ */
.nav-tab {
    padding: 0.45rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.nav-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-tab.active {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* ============================================================================
   LOADING OVERLAY ENHANCEMENT
   ============================================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

.loading-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   ENHANCED TOAST NOTIFICATIONS
   ============================================================================ */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    z-index: 1000;
    max-width: 400px;
}

.toast {
    padding: 0.85rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: toastSlideIn 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.toast.success {
    border-left: 3px solid var(--success);
}

.toast.warning {
    border-left: 3px solid var(--warning);
}

.toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    animation: toastProgress 4s linear forwards;
}

.toast.success::after {
    background: var(--success);
}

.toast.warning::after {
    background: var(--warning);
}

/* ============================================================================
   ENHANCED VIDEO PLAYER
   ============================================================================ */
.player-modal {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: #000;
    display: flex;
    flex-direction: column;
}

.player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
}

.btn-close-player {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close-player:hover {
    background: var(--accent);
}

.player-nav {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   ENHANCED COLLECTIONS STYLES
   ============================================================================ */
.collections-header {
    margin-bottom: 2rem;
}

.collections-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.collections-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.back-to-collections-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.back-to-collections-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

/* ============================================================================
   SCROLL-TO-TOP ENHANCEMENT
   ============================================================================ */
.scroll-to-top-btn {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--accent-glow);
    z-index: 200;
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.scroll-to-top-btn.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.scroll-to-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

/* ============================================================================
   ENHANCED EMPTY STATES
   ============================================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    max-width: 400px;
    margin: 4rem auto;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.empty-state h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 400px;
}

/* ============================================================================
   ENHANCED KEYBOARD HELP MODAL
   ============================================================================ */
.keyboard-help-container {
    max-width: 600px;
}

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.shortcut-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.shortcut-row kbd {
    padding: 2px 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.shortcut-row span {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ============================================================================
   COMPREHENSIVE RESPONSIVE IMPROVEMENTS
   ============================================================================ */
@media (max-width: 768px) {
    .detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .detail-hero-poster {
        width: 180px;
    }

    .detail-hero-subtitle {
        justify-content: center;
    }

    .detail-hero-actions {
        justify-content: center;
    }

    .detail-hero-rating {
        justify-content: center;
    }

    .detail-path-display {
        justify-content: center;
    }

    .detail-meta-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .stats-overview {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .tvshow-season-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tvshow-season-poster {
        width: 100px;
    }

    .welcome-info-grid {
        grid-template-columns: 1fr;
    }

    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .toast {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
    }

    .header-left {
        justify-content: center;
    }

    .header-controls {
        justify-content: center;
    }

    .detail-hero-title {
        font-size: 1.5rem;
    }

    .welcome-content {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }

    .welcome-title {
        font-size: 1.8rem;
    }

    .main-content {
        padding: 1rem;
    }

    .collections-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   DETAIL CAST CARDS ENHANCEMENT
   ============================================================================ */
.detail-cast-card {
    flex-shrink: 0;
    width: 120px;
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.detail-cast-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.detail-cast-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    overflow: hidden;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid var(--border);
}

.detail-cast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================================
   SEARCH INLINE FILTER (dropdown removed — search now filters items in place)
   ============================================================================ */

/* ============================================================================
   SHELF ROW STYLES (Continue Watching, Recently Added, Top Rated)
   ============================================================================ */
.shelf-section {
    margin-bottom: 2rem;
}

.shelf-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    cursor: default;
}

.shelf-title svg {
    color: var(--accent);
}

.shelf-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.shelf-row::-webkit-scrollbar {
    display: none;
}

.shelf-card {
    flex-shrink: 0;
    width: 140px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid transparent;
}

.shelf-card:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 15px var(--accent-glow);
}

.shelf-poster {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--bg-hover);
}

.shelf-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    opacity: 0;
}

.shelf-poster img.loaded {
    opacity: 1;
}

.shelf-card:hover .shelf-poster img.loaded {
    transform: scale(1.08);
}

.shelf-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.25s;
}

.shelf-card:hover .shelf-overlay {
    opacity: 1;
}

.shelf-rating {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--star-color);
    z-index: 2;
}

.shelf-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
}

.shelf-info {
    padding: 0.5rem;
}

.shelf-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.shelf-card-year {
    font-size: 0.7rem;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .shelf-card {
        width: 110px;
    }
}

/* ============================================================================
   PRIMARY GLOW ANIMATION
   ============================================================================ */
.primary-glow {
    position: relative;
    overflow: visible;
}

.primary-glow::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--accent);
    opacity: 0;
    filter: blur(12px);
    z-index: -1;
    animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    50% { opacity: 0.4; transform: scale(1.05); }
}

/* Particle animation for welcome screen */
.particle {
    position: absolute;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
    pointer-events: none;
}

@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0); }
    10% { opacity: 0.6; transform: translateY(-20px) scale(1); }
    90% { opacity: 0.2; transform: translateY(-150px) scale(0.5); }
    100% { opacity: 0; transform: translateY(-200px) scale(0); }
}

.welcome-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ============================================================================
   PLAYLIST/QUEUE STYLES
   ============================================================================ */
.playlist-queue {
    max-width: 800px;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border);
}

.playlist-item:hover {
    background: var(--bg-hover);
}

.playlist-item-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

.playlist-item-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.playlist-item-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.playlist-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.playlist-quality {
    padding: 1px 5px;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 3px;
    font-size: 0.7rem;
}

.playlist-item-play {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.playlist-item-play:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.playlist-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.playlist-item-remove:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
    color: #e74c3c;
}

.playlist-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
}

.btn-play-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-play-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-clear-playlist {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-clear-playlist:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.05);
}

.detail-playlist-btn.in-playlist {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.1);
}

/* ============================================================================
   TASK 8-a: MAJOR CSS STYLING OVERHAUL
   ============================================================================ */

/* ── 1. Welcome Screen Enhancement ── */
.welcome-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 16px;
    padding: 1.5rem 2.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    cursor: pointer;
}

.welcome-drop-zone:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.welcome-drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(229, 9, 20, 0.1);
    color: var(--accent);
    transform: scale(1.02);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 8px 30px rgba(0, 0, 0, 0.2);
}

.welcome-info-grid {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.welcome-info-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 160px;
}

[data-theme="light"] .welcome-info-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.welcome-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: rgba(229, 9, 20, 0.2);
}

[data-theme="light"] .welcome-info-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--accent);
}

.welcome-info-card strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}

.welcome-info-card span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.welcome-title {
    text-shadow: 0 2px 20px var(--accent-glow);
}

.btn-select.secondary {
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.btn-select.secondary:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(229, 9, 20, 0.08);
    box-shadow: 0 4px 15px var(--accent-glow);
}

[data-theme="light"] .btn-select.secondary {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
}

/* ── 2. Header Glassmorphism Effect ── */
.header {
    background: rgba(18, 18, 26, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--accent-glow), var(--border), var(--accent-glow), transparent) 1;
    transition: all 0.3s ease;
}

[data-theme="light"] .header {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-image: linear-gradient(90deg, transparent, rgba(194, 0, 8, 0.1), var(--border), rgba(194, 0, 8, 0.1), transparent) 1;
}

/* ── 3. Card Grid Improvements ── */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.movie-grid .movie-card {
    animation: cardFadeIn 0.4s ease both;
    contain: layout style paint;
}

.movie-grid .movie-card:nth-child(1) { animation-delay: 0ms; }
.movie-grid .movie-card:nth-child(2) { animation-delay: 35ms; }
.movie-grid .movie-card:nth-child(3) { animation-delay: 70ms; }
.movie-grid .movie-card:nth-child(4) { animation-delay: 105ms; }
.movie-grid .movie-card:nth-child(5) { animation-delay: 140ms; }
.movie-grid .movie-card:nth-child(6) { animation-delay: 175ms; }
.movie-grid .movie-card:nth-child(7) { animation-delay: 210ms; }
.movie-grid .movie-card:nth-child(8) { animation-delay: 245ms; }
.movie-grid .movie-card:nth-child(9) { animation-delay: 280ms; }
.movie-grid .movie-card:nth-child(10) { animation-delay: 315ms; }
.movie-grid .movie-card:nth-child(11) { animation-delay: 350ms; }
.movie-grid .movie-card:nth-child(12) { animation-delay: 385ms; }
.movie-grid .movie-card:nth-child(13) { animation-delay: 420ms; }
.movie-grid .movie-card:nth-child(14) { animation-delay: 455ms; }
.movie-grid .movie-card:nth-child(15) { animation-delay: 490ms; }
.movie-grid .movie-card:nth-child(n+16) { animation-delay: 500ms; }

.card-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

/* ── 4. Footer Enhancement ── */
.app-footer {
    background: rgba(18, 18, 26, 0.6);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--accent-glow), var(--border), var(--accent-glow), transparent) 1;
    padding: 1rem 2rem;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

[data-theme="light"] .app-footer {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.footer-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

[data-theme="light"] .footer-stat {
    background: rgba(0, 0, 0, 0.03);
}

.footer-stat svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

/* ── 5. Filter Bar Polish ── */
.filter-bar select {
    -webkit-appearance: none;
    -moz-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 24 24' fill='none' stroke='%239a9aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.25rem;
    border-radius: 10px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.25s ease;
    cursor: pointer;
}

.filter-bar select:hover {
    border-color: var(--text-muted);
    background-color: var(--bg-hover);
}

.filter-bar select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
}

/* ── 6. Loading Overlay Enhancement ── */
.loading-overlay {
    background: rgba(10, 10, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .loading-overlay {
    background: rgba(245, 245, 247, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.spinner {
    box-shadow: 0 0 20px var(--accent-glow);
    animation: spin 0.8s linear infinite, spinnerPulse 2s ease-in-out infinite;
}

@keyframes spinnerPulse {
    0%, 100% { box-shadow: 0 0 15px var(--accent-glow); }
    50% { box-shadow: 0 0 35px var(--accent-glow), 0 0 60px rgba(229, 9, 20, 0.15); }
}

.loading-bar-track {
    width: 280px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1rem;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #ff6b6b, var(--accent));
    background-size: 200% 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: loadingBarShimmer 1.5s linear infinite;
}

@keyframes loadingBarShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 7. Tab Navigation Polish ── */
.nav-tab {
    position: relative;
    overflow: hidden;
}

.nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-tab.active::after {
    width: 60%;
}

.nav-tab:hover:not(.active)::after {
    width: 30%;
}

/* ── 8. Improved Toast Notifications ── */
.toast {
    position: relative;
    overflow: hidden;
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    border-left-width: 4px;
}

@keyframes toastSlideIn {
    0% {
        transform: translateX(120%);
        opacity: 0;
    }
    60% {
        transform: translateX(-8px);
        opacity: 1;
    }
    80% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 0 8px;
    animation: toastProgress 4s linear forwards;
}

.toast.success::before {
    background: var(--success);
}

.toast.warning::before {
    background: var(--warning);
}

.toast.error::before {
    background: #e74c3c;
}

.toast.error {
    border-left-color: #e74c3c;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ── 9. Detail Page Improvements ── */
.detail-page-bg {
    will-change: transform;
    transition: transform 0.1s linear, background-image 0.5s ease;
}

.detail-hero {
    position: relative;
}

.detail-hero::after {
    display: none;
}

.detail-path-display {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .detail-path-display {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
}

/* ── 10. Dark Mode Specific Enhancements ── */
[data-theme="dark"] .header {
    background: rgba(10, 10, 15, 0.7);
}

[data-theme="dark"] .app-footer {
    background: rgba(10, 10, 15, 0.6);
}

[data-theme="dark"] .loading-overlay {
    background: rgba(10, 10, 15, 0.95);
}

/* Subtle noise texture for depth in dark mode */
[data-theme="dark"] .welcome-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.4;
    z-index: 0;
}

[data-theme="dark"] .welcome-screen > * {
    position: relative;
    z-index: 1;
}

/* Focus-visible states for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-select:focus-visible,
.btn-header:focus-visible,
.nav-tab:focus-visible,
.view-btn:focus-visible,
.detail-play-btn:focus-visible,
.detail-secondary-btn:focus-visible,
.detail-back-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.filter-bar select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Responsive adjustments for new styles ── */
@media (max-width: 768px) {
    .welcome-info-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .welcome-info-card {
        min-width: auto;
    }

    .welcome-drop-zone {
        padding: 1rem 1.5rem;
        font-size: 0.85rem;
    }

    .loading-bar-track {
        width: 220px;
    }

    .footer-stat {
        font-size: 0.72rem;
        padding: 0.2rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .welcome-info-grid {
        gap: 0.5rem;
    }

    .welcome-info-card {
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
    }

    .welcome-info-card svg {
        width: 16px;
        height: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 8-b: Page Size Selector
   ═══════════════════════════════════════════════════════════════════════════ */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.page-size-selector label {
    white-space: nowrap;
    font-weight: 500;
}

.page-size-selector select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.page-size-selector select:hover {
    border-color: var(--accent);
}

.page-size-selector select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.15);
}

/* Load More Button */
.load-more-wrapper {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 1rem;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.btn-load-more:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.15);
}

.btn-load-more svg {
    opacity: 0.7;
}

.btn-load-more:hover svg {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 8-b: Export Dropdown
   ═══════════════════════════════════════════════════════════════════════════ */
.export-wrapper {
    position: relative;
}

.export-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.4rem;
    min-width: 180px;
    display: none;
    z-index: 200;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: dropdownFadeIn 0.15s ease-out;
}

.export-dropdown.active {
    display: block;
}

.export-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
    text-align: left;
}

.export-option:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

.export-option svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.export-option:hover svg {
    opacity: 1;
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 8-b: Context Menu (Glassmorphism)
   ═══════════════════════════════════════════════════════════════════════════ */
.context-menu {
    position: fixed;
    z-index: 500;
    background: rgba(18, 18, 26, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.4rem;
    min-width: 200px;
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.context-menu.active {
    display: block;
    animation: ctxMenuIn 0.15s ease-out;
}

@keyframes ctxMenuIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.12s;
    text-align: left;
    white-space: nowrap;
}

.context-menu-item:hover {
    background: rgba(229, 9, 20, 0.15);
    color: var(--accent);
}

.context-menu-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.context-menu-item:hover svg {
    opacity: 1;
    color: var(--accent);
}

.context-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.3rem 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 5-d: Technical Info Modal
   ═══════════════════════════════════════════════════════════════════════════ */
.tech-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tech-info-modal.active {
    opacity: 1;
}

.tech-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tech-info-content {
    position: relative;
    z-index: 1;
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    min-width: 320px;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s ease;
}

.tech-info-modal.active .tech-info-content {
    transform: scale(1) translateY(0);
}

.tech-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-info-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-right: 1rem;
    line-height: 1.3;
}

.tech-info-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.tech-info-close:hover {
    background: rgba(229, 9, 20, 0.2);
    color: var(--accent);
}

.tech-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tech-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: background 0.12s;
}

.tech-info-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tech-info-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-right: 1rem;
}

.tech-info-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

/* Light theme for Technical Info Modal */
[data-theme="light"] .tech-info-content {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .tech-info-title {
    color: #1a1a1a;
}

[data-theme="light"] .tech-info-close {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

[data-theme="light"] .tech-info-close:hover {
    background: rgba(229, 9, 20, 0.1);
    color: var(--accent);
}

[data-theme="light"] .tech-info-label {
    color: #777;
}

[data-theme="light"] .tech-info-value {
    color: #1a1a1a;
}

[data-theme="light"] .tech-info-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .tech-info-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .tech-info-overlay {
    background: rgba(0, 0, 0, 0.3);
}

/* Mobile responsive for Technical Info Modal */
@media (max-width: 480px) {
    .tech-info-content {
        min-width: auto;
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 8-b: Recently Opened Folders (Welcome Screen)
   ═══════════════════════════════════════════════════════════════════════════ */
.recent-folders-section {
    margin-top: 1.5rem;
    text-align: center;
}

.recent-folders-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.recent-folders-title svg {
    color: var(--accent);
}

.recent-folders-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 400px;
    margin: 0 auto;
}

.recent-folder-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.recent-folder-item:hover {
    background: rgba(229, 9, 20, 0.1);
    border-color: rgba(229, 9, 20, 0.2);
    transform: translateX(4px);
}

.recent-folder-item svg {
    color: var(--accent);
    opacity: 0.7;
    flex-shrink: 0;
}

.recent-folder-item:hover svg {
    opacity: 1;
}

.recent-folder-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-folder-arrow {
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
}

.recent-folder-item:hover .recent-folder-arrow {
    opacity: 0.8;
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 8-b: Enhanced Stats Bars with Percentages & Animations
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-section {
    margin-top: 2rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.stats-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.stats-section-title svg {
    color: var(--accent);
    flex-shrink: 0;
}

.stats-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.stats-bar-label {
    width: 120px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-bar-track {
    flex: 1;
    height: 22px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.stats-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
    position: relative;
    min-width: 4px;
    transition: width 0.3s ease;
}

.stats-bar-fill.decade-fill {
    background: #2196f3;
}

.stats-bar-fill.quality-bar-fill {
    background: #ff6b35;
}

.stats-bar-fill.size-bar-fill {
    background: #4caf50;
}

.stats-bar-pct {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.stats-bar-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

@keyframes barGrow {
    from {
        width: 0 !important;
    }
}

/* ── Stats Visual Bar Chart (vertical bars) ── */
.stats-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 180px;
    padding: 0.5rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.stats-chart::-webkit-scrollbar {
    height: 4px;
}

.stats-chart::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.stats-bar-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 28px;
    max-width: 50px;
    height: 100%;
    position: relative;
}

.stats-bar-fill-vertical {
    width: 70%;
    border-radius: 4px 4px 0 0;
    position: absolute;
    bottom: 28px;
    left: 15%;
    right: 15%;
    min-height: 3px;
    transition: height 0.4s ease;
}

.stats-bar-label-vertical {
    position: absolute;
    bottom: 6px;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.stats-bar-count-vertical {
    position: absolute;
    top: -2px;
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ── Stats bar value (alternative display) ── */
.stats-bar-value {
    font-size: 0.78rem;
    color: var(--text-secondary);
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Stats chart card wrapper ── */
.stats-chart-card {
    margin-top: 2rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

@keyframes barGrowV {
    from {
        height: 0 !important;
    }
}

.stats-bar-fill-vertical {
    animation: barGrowV 0.6s ease-out both;
}

/* Responsive stats bars */
@media (max-width: 640px) {
    .stats-bar-label {
        width: 80px;
        font-size: 0.75rem;
    }

    .stats-bar-row {
        gap: 0.4rem;
    }

    .stats-bar-track {
        height: 18px;
    }

    .stats-bar-pct {
        width: 32px;
        font-size: 0.72rem;
    }

    .stats-bar-count {
        width: 24px;
        font-size: 0.72rem;
    }

    .stats-bar-value {
        width: 32px;
        font-size: 0.72rem;
    }

    .stats-chart {
        height: 140px;
        gap: 2px;
    }

    .stats-bar-vertical {
        min-width: 20px;
    }

    .stats-bar-label-vertical {
        font-size: 0.55rem;
    }

    .stats-bar-count-vertical {
        font-size: 0.5rem;
    }

    .stats-chart-card {
        padding: 0.85rem;
    }

    .page-size-selector {
        display: none;
    }
}

@media (max-width: 480px) {
    .stats-bar-label {
        width: 60px;
        font-size: 0.7rem;
    }
}

/* ============================================================================
   TASK 10: CSS STYLING POLISH + NEW FEATURE STYLES
   ============================================================================ */

/* ── 1. Playlist Tab Enhancement ── */
.playlist-queue {
    background: rgba(var(--bg-card), 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(26, 26, 46, 0.6);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

[data-theme="light"] .playlist-queue {
    background: rgba(255, 255, 255, 0.6);
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(var(--bg-secondary), 0.4);
    background: rgba(18, 18, 26, 0.5);
    border-radius: 10px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
}

[data-theme="light"] .playlist-item {
    background: rgba(240, 240, 245, 0.7);
}

.playlist-item:hover {
    border-left-color: var(--accent);
    background: var(--bg-hover);
}

.playlist-item-rank {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.playlist-item-play {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.playlist-item-play:hover {
    background: rgba(46, 204, 113, 0.15);
    color: var(--success);
}

.playlist-item-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.playlist-item-remove:hover {
    background: rgba(229, 9, 20, 0.15);
    color: var(--accent);
}

.btn-play-all {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-play-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--accent-glow);
}

.btn-clear-playlist {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(229, 9, 20, 0.08);
    border: 1px solid rgba(229, 9, 20, 0.2);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.btn-clear-playlist:hover {
    background: rgba(229, 9, 20, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.playlist-quality {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    letter-spacing: 0.02em;
}

/* ── 2. Shelf Section Polish ── */
.shelf-section {
    margin-bottom: 2rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, var(--accent-glow) 30%, var(--accent) 50%, var(--accent-glow) 70%, transparent 100%) 1;
    padding-top: 1.25rem;
}

.shelf-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px var(--accent-glow), 0 0 0 1px var(--accent);
}

.shelf-poster img.loaded {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.shelf-poster img:not(.loaded) {
    opacity: 0;
}

.shelf-overlay {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.shelf-card:hover .shelf-overlay {
    opacity: 1;
    transform: scale(1);
}

.shelf-rank {
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.shelf-card:hover .shelf-rank {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ── 3. Detail Page Action Buttons Polish ── */
.detail-playlist-btn {
    /* inherits detail-secondary-btn styles */
}

.detail-playlist-btn.in-playlist {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.detail-playlist-btn.in-playlist svg {
    fill: #3498db;
}

[data-theme="light"] .detail-playlist-btn.in-playlist {
    background: rgba(52, 152, 219, 0.08);
    border-color: rgba(52, 152, 219, 0.25);
}

.detail-secondary-btn {
    transition: all 0.25s ease;
    margin: 0.25rem;
}

.detail-secondary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.detail-secondary-btn:active {
    transform: translateY(0);
}

/* ── 4. Welcome Screen Animation Improvements ── */
.particle {
    animation: particleFloat var(--particle-duration, 5s) ease-in-out infinite var(--particle-delay, 0s), particlePulse 3s ease-in-out infinite;
}

@keyframes particlePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

.welcome-info-card {
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.welcome-info-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.recent-folder-item {
    animation: recentSlideIn 0.3s ease-out both;
}

.recent-folder-item:nth-child(1) { animation-delay: 0ms; }
.recent-folder-item:nth-child(2) { animation-delay: 60ms; }
.recent-folder-item:nth-child(3) { animation-delay: 120ms; }
.recent-folder-item:nth-child(4) { animation-delay: 180ms; }
.recent-folder-item:nth-child(5) { animation-delay: 240ms; }

@keyframes recentSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── 5. Advanced Filter Panel — Modern Redesign ── */
.advanced-filter-panel {
    background: rgba(20, 20, 36, 0.9);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                margin 0.3s ease;
    margin-top: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.advanced-filter-panel.active {
    max-height: 600px;
    opacity: 1;
    margin-top: 0.75rem;
}

[data-theme="light"] .advanced-filter-panel {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Filter content wrapper */
.afp-content {
    padding: 1.25rem 1.5rem;
}

/* Active filter chips row */
.afp-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 0;
    transition: margin 0.3s ease;
}
.afp-chips-row:empty {
    margin-bottom: 0;
}

.afp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    border: 1px solid rgba(229, 9, 20, 0.15);
    cursor: default;
    animation: chipIn 0.2s ease;
}
[data-theme="light"] .afp-chip {
    border-color: rgba(194, 0, 8, 0.12);
}

.afp-chip-x {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
}
.afp-chip-x:hover {
    opacity: 1;
}

@keyframes chipIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Filter controls grid */
.afp-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 1.4fr 0.8fr;
    gap: 1rem;
    align-items: start;
}

/* Individual filter group */
.afp-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Label with icon */
.afp-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.afp-label svg {
    flex-shrink: 0;
}

/* Modern select dropdowns */
.afp-select {
    padding: 0.35rem 2rem 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 10px 6px;
    width: 100%;
    height: 2rem;
}

.afp-select:hover {
    border-color: var(--accent);
    background-color: rgba(229, 9, 20, 0.06);
}

.afp-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

[data-theme="light"] .afp-select {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1d1d1f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 10px 6px;
}

[data-theme="light"] .afp-select:hover {
    background-color: rgba(194, 0, 8, 0.05);
    border-color: rgba(194, 0, 8, 0.3);
}

/* Number/text inputs */
.afp-input {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s;
    -moz-appearance: textfield;
    width: 100%;
    height: 2rem;
}
.afp-input::-webkit-inner-spin-button,
.afp-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.afp-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: rgba(255, 255, 255, 0.1);
}
.afp-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}
[data-theme="light"] .afp-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .afp-input:focus {
    background: #fff;
}

/* Year inputs layout */
.afp-year-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.afp-year-inputs .afp-input {
    width: 70px;
    flex-shrink: 0;
}

/* Size inputs layout */
.afp-size-inputs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.afp-size-inputs .afp-input {
    width: 65px;
    flex-shrink: 0;
}

/* Unit select for file size */
.afp-unit {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s;
    height: 2rem;
}
.afp-unit:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
[data-theme="light"] .afp-unit {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--accent);
}

/* Dash separator */
.afp-dash {
    color: var(--text-muted);
    font-size: 0.85rem;
    user-select: none;
    flex-shrink: 0;
}

/* Range sliders */
.afp-range-track {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 0.15rem;
}

.afp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.afp-range-track .afp-range {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.afp-range-track .afp-range:last-child {
    pointer-events: auto;
}

.afp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.afp-range::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 14px var(--accent-glow);
}

.afp-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
}

[data-theme="light"] .afp-range {
    background: rgba(0, 0, 0, 0.08);
}

/* Rating slider - full width */
.afp-range-rating {
    width: 100%;
}

/* Footer with reset */
.afp-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .afp-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.afp-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}

.afp-reset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.08);
    box-shadow: 0 2px 12px rgba(229, 9, 20, 0.15);
}

[data-theme="light"] .afp-reset-btn {
    border-color: rgba(0, 0, 0, 0.1);
    color: #86868b;
}

[data-theme="light"] .afp-reset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(194, 0, 8, 0.05);
}

/* Filter panel toggle button */
.filter-panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    position: relative;
}

.filter-panel-toggle:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.filter-panel-toggle.active {
    background: var(--tag-bg);
    border-color: var(--accent);
    color: var(--tag-color);
}

/* Active filter indicator dot on toggle button */
.filter-active-indicator {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    display: none;
}

.filter-active-indicator.visible {
    display: block;
    animation: filterDotPulse 1.5s ease-in-out infinite;
}

@keyframes filterDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Responsive: filter panel stacks on mobile */
@media (max-width: 900px) {
    .afp-controls {
        grid-template-columns: 1fr 1fr;
    }
    .afp-group-year {
        grid-column: 1 / -1;
    }
}
@media (max-width: 768px) {
    .advanced-filter-panel.active {
        max-height: 800px;
    }
    .afp-content {
        padding: 1rem;
    }
    .afp-controls {
        grid-template-columns: 1fr;
    }
    .afp-group-year {
        grid-column: auto;
    }
    .afp-reset-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── 6. Keyboard Navigation Focus Ring ── */
.movie-card.keyboard-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transform: scale(1.02);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.15s ease;
    z-index: 10;
}

.shelf-card.keyboard-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transform: scale(1.02);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.15s ease;
    z-index: 10;
}

/* ── 7. Playlist Actions Row ── */
.playlist-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ── 8. Filter Reset Button ── */
.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.filter-reset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
}

/* ============================================================================
   TASK 11-b: CSS ENHANCEMENTS — Scroll Progress, 3D Tilt, Welcome Animations,
   Search Dropdown, Resume Toast, Keyboard Focus, List View, Responsive
   ============================================================================ */

/* ── Enhancement 1: Scroll Progress Bar ── */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

.scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #ff6b6b);
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--accent-glow), 0 0 3px var(--accent-glow);
}

[data-theme="light"] .scroll-progress-fill {
    background: linear-gradient(90deg, var(--accent), #e50914);
    box-shadow: 0 0 6px var(--accent-glow), 0 0 2px var(--accent-glow);
}

/* ── Enhancement 2: Card 3D Tilt Micro-Interaction ── */
.movie-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.movie-card:hover {
    transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-5px) scale(1.02);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--accent);
}

.shelf-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shelf-card:hover {
    transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-5px) scale(1.03);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3), 0 0 8px var(--accent-glow);
}

[data-theme="light"] .movie-card:hover {
    box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--accent);
}

[data-theme="light"] .shelf-card:hover {
    box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.12), 0 0 8px var(--accent-glow);
}

/* ── Enhancement 3: Enhanced Welcome Screen ── */
@keyframes letterSpaceIn {
    from {
        letter-spacing: 0.3em;
        opacity: 0.6;
    }
    to {
        letter-spacing: 0.05em;
        opacity: 1;
    }
}

.welcome-title {
    animation: letterSpaceIn 1s ease-out forwards;
}

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

.welcome-actions {
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

@keyframes borderPulse {
    0%, 100% {
        border-color: var(--border);
    }
    50% {
        border-color: rgba(229, 9, 20, 0.3);
    }
}

[data-theme="light"] .welcome-drop-zone {
    animation-name: borderPulseLight;
}

@keyframes borderPulseLight {
    0%, 100% {
        border-color: var(--border);
    }
    50% {
        border-color: rgba(194, 0, 8, 0.25);
    }
}

.welcome-drop-zone {
    animation: borderPulse 3s ease-in-out infinite;
}

.welcome-info-card:nth-child(1) {
    animation: fadeInUp 0.5s ease-out 0.1s both;
}

.welcome-info-card:nth-child(2) {
    animation: fadeInUp 0.5s ease-out 0.25s both;
}

.welcome-info-card:nth-child(3) {
    animation: fadeInUp 0.5s ease-out 0.4s both;
}

.welcome-info-card:nth-child(4) {
    animation: fadeInUp 0.5s ease-out 0.55s both;
}

/* ── Enhancement 5: Playback Resume Toast Style ── */
.toast-resume {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-card);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow);
    animation: slideIn 0.3s ease;
    max-width: 400px;
    pointer-events: auto;
    color: var(--text-primary);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.toast-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.toast-resume-btn:hover {
    background: #ff1a25;
    transform: translateY(-1px);
}

[data-theme="light"] .toast-resume-btn:hover {
    background: #d90007;
}

/* ── Enhancement 6: Better Focus and Keyboard Navigation ── */
@keyframes focusGlow {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 16px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 0 5px var(--accent-glow), 0 4px 20px rgba(0, 0, 0, 0.3);
    }
}

.movie-card.keyboard-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transform: scale(1.02);
    animation: focusGlow 2s ease-in-out infinite;
    z-index: 10;
}

.shelf-card.keyboard-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transform: scale(1.02);
    animation: focusGlow 2s ease-in-out infinite;
    z-index: 10;
}

[data-theme="light"] .movie-card.keyboard-focus {
    animation-name: focusGlowLight;
}

[data-theme="light"] .shelf-card.keyboard-focus {
    animation-name: focusGlowLight;
}

@keyframes focusGlowLight {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow: 0 0 0 5px var(--accent-glow), 0 2px 12px rgba(0, 0, 0, 0.12);
    }
}

/* ── Enhancement 8: Responsive Improvements ── */
@media (max-width: 640px) {
    .scroll-progress-bar {
        height: 3px;
    }

    .movie-card:hover {
        transform: scale(1.02);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .shelf-card:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 480px) {
    .welcome-title {
        font-size: 1.6rem;
        letter-spacing: 0.02em;
    }

    .filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-bar select,
    .filter-bar .filter-count,
    .filter-bar .skipped-badge,
    .filter-bar .filter-reset-btn {
        flex-shrink: 0;
    }
}

/* ============================================================================
   RESUME PLAYBACK BUTTON - In player header
   ============================================================================ */
.resume-playback-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--accent, #e50914);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
    animation: resumeBtnPulse 2s ease-in-out infinite;
    white-space: nowrap;
}

.resume-playback-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.resume-playback-btn svg {
    flex-shrink: 0;
}

@keyframes resumeBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(229, 9, 20, 0); }
}

/* ============================================================================
   TOAST ACTION BUTTON - For actionable toasts like "Resume"
   ============================================================================ */
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast-action-btn {
    padding: 4px 12px;
    background: var(--accent, #e50914);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.toast-action-btn:hover {
    background: var(--accent-hover, #ff1a25);
    transform: scale(1.05);
}

.toast-action-btn:active {
    transform: scale(0.95);
}

/* ============================================================================
   TASK 12-b: CSS MICRO-INTERACTIONS AND POLISH
   ============================================================================ */

/* ── 1. Button Ripple Effect ── */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        transparent 70%
    );
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s ease, opacity 0.4s ease;
    border-radius: inherit;
    z-index: 1;
}

.btn-ripple:active::after {
    opacity: 1;
    transform: scale(2.5);
    transition: transform 0s, opacity 0s;
}

.btn-select.btn-ripple::after,
.btn-header.btn-ripple::after,
.nav-btn.btn-ripple::after,
.btn-load-more.btn-ripple::after {
    background-image: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        transparent 70%
    );
}

@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── 2. Skeleton Loading State ── */
.skeleton-card {
    background: var(--bg-hover);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 100%
    );
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
    border-radius: inherit;
}

@keyframes shimmerEnhanced {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton-poster {
    aspect-ratio: 2 / 3;
    background: var(--bg-hover);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-text {
    height: 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-badge {
    display: inline-block;
    height: 18px;
    min-width: 40px;
    background: var(--bg-hover);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.skeleton-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-card.group-of-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.skeleton-card.group-of-4 .skeleton-card-item {
    background: var(--bg-hover);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.skeleton-card.group-of-4 .skeleton-card-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 100%
    );
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
    border-radius: inherit;
}

.skeleton-card.group-of-4 .skeleton-card-item .skeleton-poster {
    border-radius: 0;
}

.skeleton-card.group-of-4 .skeleton-card-item .skeleton-info {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

@media (max-width: 640px) {
    .skeleton-card.group-of-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 3. Page Transition Effects ── */
.page-enter {
    animation: pageEnter 0.3s ease forwards;
}

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

.page-exit {
    animation: pageExit 0.2s ease forwards;
}

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

.tab-content.page-enter {
    animation: tabPageEnter 0.3s ease forwards;
}

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

.detail-page.page-enter {
    animation: detailPageEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ── 4. Enhanced Scroll Shadows ── */
.scroll-shadow-container {
    background:
        /* Top shadow */
        linear-gradient(to bottom, var(--bg-primary), transparent) top/100% 20px no-repeat local,
        /* Bottom shadow */
        linear-gradient(to top, var(--bg-primary), transparent) bottom/100% 20px no-repeat local,
        /* Left shadow */
        linear-gradient(to right, var(--bg-primary), transparent) left/20px 100% no-repeat local,
        /* Right shadow */
        linear-gradient(to left, var(--bg-primary), transparent) right/20px 100% no-repeat local,
        /* Base bg */
        var(--bg-primary);
}

.shelf-row.scroll-shadow-container {
    background:
        linear-gradient(to right, var(--bg-primary), transparent) left/24px 100% no-repeat local,
        linear-gradient(to left, var(--bg-primary), transparent) right/24px 100% no-repeat local,
        var(--bg-primary);
}

.nav-tabs-wrapper.scroll-shadow-container {
    background:
        linear-gradient(to right, var(--bg-secondary), transparent) left/16px 100% no-repeat local,
        linear-gradient(to left, var(--bg-secondary), transparent) right/16px 100% no-repeat local,
        var(--bg-secondary);
}

.history-timeline.scroll-shadow-container {
    background:
        linear-gradient(to bottom, var(--bg-primary), transparent) top/16px 100% no-repeat local,
        linear-gradient(to top, var(--bg-primary), transparent) bottom/16px 100% no-repeat local,
        var(--bg-primary);
}

/* ── 5. Interactive Hover Micro-animations ── */
.movie-card:hover .poster-img.loaded {
    transform: scale(1.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.movie-card:hover .card-info .movie-title {
    letter-spacing: 0.3px;
    transition: letter-spacing 0.3s ease;
}

.shelf-card:hover .shelf-card-title {
    color: var(--accent);
    transition: color 0.25s ease;
}

.nav-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--bg-hover) 80%, var(--accent) 20%);
    transition: background 0.25s ease;
}

.btn-header:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.filter-tag:hover {
    transform: scale(1.02);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow), 0 2px 8px var(--accent-glow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── 6. Toast Notification Enhancements ── */
.toast.info {
    border-left-color: #3498db;
}

.toast.info::before {
    background: #3498db;
}

.toast.action-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 1rem;
}

.toast-action-btn {
    padding: 4px 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.toast-action-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
}

.toast-action-btn:active {
    transform: scale(0.95);
}

.toast.close-animation {
    animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.stack {
    /* When 3+ toasts visible, slight offset for depth */
}

.toast.stack:nth-child(2) {
    transform: translateX(-8px) scale(0.97);
    opacity: 0.9;
    z-index: 1;
}

.toast.stack:nth-child(3) {
    transform: translateX(-16px) scale(0.94);
    opacity: 0.8;
    z-index: 0;
}

.toast.stack:first-child {
    z-index: 2;
}

/* ── 7. Welcome Screen Enhancement ── */
.welcome-title {
    background: linear-gradient(135deg, var(--accent), #ff6b6b, #ff8e53);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: welcomeGradient 4s ease infinite;
}

@keyframes welcomeGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.welcome-drop-zone::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px dashed var(--border);
    border-radius: inherit;
    animation: dashRotate 12s linear infinite;
    pointer-events: none;
}

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

.welcome-drop-zone {
    position: relative;
    border: 2px dashed transparent;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%239a9aaa' stroke-width='2' stroke-dasharray='10%2c 8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
    animation: dashBorderMove 8s linear infinite;
}

@keyframes dashBorderMove {
    0% { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%239a9aaa' stroke-width='2' stroke-dasharray='10%2c 8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e"); }
    50% { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%239a9aaa' stroke-width='2' stroke-dasharray='10%2c 8' stroke-dashoffset='18' stroke-linecap='round'/%3e%3c/svg%3e"); }
    100% { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%239a9aaa' stroke-width='2' stroke-dasharray='10%2c 8' stroke-dashoffset='36' stroke-linecap='round'/%3e%3c/svg%3e"); }
}

.welcome-info-card {
    position: relative;
    border-left: 3px solid transparent;
    border-image: linear-gradient(to bottom, var(--accent), rgba(255, 107, 107, 0.5)) 1;
}

.recent-folder-item::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 0.5rem;
    animation: folderDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes folderDotPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.welcome-icon {
    animation: welcomeIconSpin 30s linear infinite;
}

@keyframes welcomeIconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── 8. Dark/Light Mode Transition ── */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

[data-theme] .header,
[data-theme] .app-footer,
[data-theme] .nav-tabs,
[data-theme] .filter-bar select,
[data-theme] .movie-card,
[data-theme] .shelf-card,
[data-theme] .toast,
[data-theme] .modal-container,
[data-theme] .btn-header,
[data-theme] .btn-select,
[data-theme] .search-box input {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme] .detail-page {
    transition: opacity 0.4s ease, background-color 0.3s ease;
}

[data-theme] .detail-page-bg {
    transition: background-image 0.5s ease, filter 0.3s ease;
}

[data-theme] .welcome-screen {
    transition: background 0.4s ease, color 0.3s ease;
}

/* Preserve existing micro-animation transitions */
[data-theme] .movie-card:hover,
[data-theme] .shelf-card:hover,
[data-theme] .nav-tab:hover,
[data-theme] .btn-header:hover {
    transition: transform 0.2s ease, background-color 0.3s ease, border-color 0.2s ease, box-shadow 0.3s ease;
}

/* ── 9. Focus Ring Improvements ── */
.movie-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.nav-tab:focus-visible {
    outline: none;
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 2px 0 var(--accent);
}

.btn-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.btn-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.search-box input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 0 12px var(--accent-glow);
}

.nav-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.btn-load-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.filter-tag:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.view-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ── 10. PWA Install Button Style ── */
.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
    font-family: inherit;
    animation: installPulse 2.5s ease-in-out infinite;
}

.pwa-install-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px var(--accent-glow), 0 0 30px var(--accent-glow);
}

@keyframes installPulse {
    0%, 100% {
        border-color: var(--accent);
        box-shadow: 0 0 0 0 var(--accent-glow);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 0 8px transparent;
    }
}

/* ── 11. Responsive Improvements ── */
@media (max-width: 640px) {
    /* Reduce animation durations by half */
    .movie-card,
    .shelf-card,
    .nav-tab,
    .btn-header,
    .btn-select,
    .filter-tag,
    .toast,
    .detail-page,
    .detail-hero,
    .detail-section {
        animation-duration: 0.15s !important;
        transition-duration: 0.15s !important;
    }

    .movie-card:hover .poster-img.loaded {
        transform: none;
    }

    .btn-header:hover {
        transform: none;
    }

    .filter-tag:hover {
        transform: none;
    }

    /* Disable 3D transforms */
    .welcome-icon {
        animation: float 3s ease-in-out infinite;
    }

    .detail-page.page-enter {
        animation: detailPageEnterMobile 0.2s ease forwards;
    }

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

    .skeleton-card.group-of-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .welcome-icon {
        animation: none !important;
    }

    .movie-card:hover .poster-img.loaded {
        transform: none !important;
    }

    .btn-header:hover {
        transform: none !important;
    }

    .filter-tag:hover {
        transform: none !important;
    }

    .pwa-install-btn {
        animation: none !important;
    }

    .recent-folder-item::before {
        animation: none !important;
        opacity: 1 !important;
    }

    .welcome-title {
        animation: none !important;
    }

    .page-enter,
    .page-exit,
    .tab-content.page-enter,
    .detail-page.page-enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .toast.close-animation {
        animation: none !important;
        display: none !important;
    }

    .toast.stack:nth-child(2),
    .toast.stack:nth-child(3) {
        transform: none !important;
        opacity: 1 !important;
    }

    .skeleton-card::after,
    .skeleton-poster::after,
    .skeleton-text::after,
    .skeleton-badge::after {
        animation: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-primary: #0a0a0f;
        --bg-secondary: #12121a;
        --bg-card: #1a1a2e;
        --bg-hover: #252540;
        --accent: #e50914;
        --accent-glow: rgba(229, 9, 20, 0.3);
        --text-primary: #f0f0f0;
        --text-secondary: #9a9aaa;
        --text-muted: #6e6e82;
        --border: #2a2a3e;
        --success: #2ecc71;
        --warning: #f39c12;
        --gradient: linear-gradient(135deg, #e50914, #ff6b6b);
        --tag-bg: rgba(229, 9, 20, 0.15);
        --tag-color: #ff6b6b;
        --star-color: #f5c518;
        --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
}

/* ── 12. Playlist Drag-and-Drop Styles ── */
.playlist-item[draggable="true"] {
    cursor: grab;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.playlist-item[draggable="true"]:active {
    cursor: grabbing;
}

.playlist-item.dragging {
    opacity: 0.5;
    transform: scale(0.98) rotate(1deg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.playlist-item.drag-over {
    border-top: 2px solid var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 -2px 8px var(--accent-glow);
}

.playlist-drag-handle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    cursor: grab;
    opacity: 0.4;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.playlist-drag-handle:hover {
    opacity: 0.8;
}

.playlist-drag-handle:active {
    cursor: grabbing;
}

.playlist-drag-handle::before,
.playlist-drag-handle::after {
    content: '';
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.playlist-drag-handle::before {
    width: 14px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 1px;
    box-shadow: 0 4px 0 var(--text-muted), 0 8px 0 var(--text-muted);
}

.playlist-drag-handle::after {
    width: 14px;
    height: 2px;
    background: var(--text-muted);
    border-radius: 1px;
    box-shadow: 0 4px 0 var(--text-muted), 0 8px 0 var(--text-muted);
}

/* ============================================================================
   TASK 12-a: PWA Install Button, Playlist Drag-Drop, Poster Cache Indicator
   ============================================================================ */

/* PWA Install Button */
.pwa-install-btn {
    position: relative;
    overflow: hidden;
}

.pwa-install-btn.pwa-pulse {
    animation: pwaPulse 2s ease-in-out infinite;
}

@keyframes pwaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(229, 9, 20, 0); }
}

.pwa-install-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(229, 9, 20, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.pwa-install-btn:hover::after {
    width: 200%;
    height: 200%;
}

/* Playlist Drag-and-Drop */
.playlist-item[draggable="true"] {
    cursor: grab;
}

.playlist-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.playlist-item.drag-over {
    border-top: 2px solid var(--accent) !important;
    padding-top: calc(0.75rem - 2px);
}

.playlist-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    opacity: 0.4;
    transition: opacity 0.2s, color 0.2s;
    padding: 0 0.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.playlist-drag-handle:hover {
    opacity: 1;
    color: var(--accent);
}

.playlist-item:hover .playlist-drag-handle {
    opacity: 0.7;
}

.playlist-item.dragging .playlist-drag-handle {
    cursor: grabbing;
}

/* Poster Cache Indicator */
.cache-indicator {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    opacity: 0.7;
    z-index: 5;
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.5);
}

.cache-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 1px solid var(--success);
    opacity: 0.3;
}

/* ============================================================================
   TASK 13-b: CSS Polish, Animations, and UX Refinements
   ============================================================================ */

/* ── 1. (Bulk Select Mode Styles removed - feature not in UI) ── */

/* ── 2. Mini Player Styles ── */

.mini-player {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 360px;
    z-index: 1000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

.mini-player:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px var(--accent-glow);
}

.mini-player.hidden {
    display: none;
}

.mini-player-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: move;
}

.mini-player-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-player-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.mini-player-btn:hover {
    background: var(--accent);
    color: #fff;
}

.mini-player-btn svg {
    width: 16px;
    height: 16px;
}

.mini-player video {
    width: 100%;
    display: block;
    background: #000;
}

.mini-player-video-container {
    position: relative;
    background: #000;
}

.mini-player.entering {
    animation: miniPlayerIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mini-player.exiting {
    animation: miniPlayerOut 0.25s ease-in forwards;
}

@keyframes miniPlayerIn {
    from {
        opacity: 0;
        transform: scale(0.3) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes miniPlayerOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.3) translateY(40px);
    }
}

.mini-player .mini-player-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 5;
}

.mini-player .mini-player-resize::before {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
    .mini-player {
        width: 280px;
        bottom: 10px;
        right: 10px;
    }
}

/* ── 3. Custom Collections Styles ── */

.btn-create-collection {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-create-collection:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 12px var(--accent-glow);
}

.btn-create-collection svg {
    width: 16px;
    height: 16px;
}

.custom-collections-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.custom-collections-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.custom-collections-heading svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.custom-collection-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    position: relative;
}

.custom-collection-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.custom-collection-card .collection-poster-preview {
    display: flex;
    gap: 2px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg-secondary);
}

.custom-collection-card .collection-poster-preview img {
    flex: 1;
    width: 0;
    height: 100%;
    object-fit: cover;
}

.custom-collection-meta {
    padding: 0.85rem 1rem;
}

.custom-collection-meta .collection-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-collection-meta .collection-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.custom-collection-meta .collection-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.custom-collection-actions {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
}

.custom-collection-actions button {
    flex: 1;
    padding: 0.4rem;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.custom-collection-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.custom-collection-actions button svg {
    width: 12px;
    height: 12px;
}

.collection-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.collection-dialog.active {
    opacity: 1;
    pointer-events: all;
}

.collection-dialog .modal-container {
    max-width: 440px;
}

.collection-dialog-input {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.collection-dialog-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.collection-dialog-textarea {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.collection-dialog-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.collection-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.collection-item:hover {
    background: var(--bg-hover);
}

.collection-item-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
}

.collection-item:hover .collection-item-remove {
    opacity: 1;
}

.collection-item-remove:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.collection-item-remove svg {
    width: 14px;
    height: 14px;
}

/* ── 4. Smooth Tab Switch Animations ── */

.tab-content.fade-out {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tab-content.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tab-content.slide-in-left {
    animation: tabSlideInLeft 0.3s ease forwards;
}

.tab-content.slide-in-right {
    animation: tabSlideInRight 0.3s ease forwards;
}

@keyframes tabSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tabSlideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* ── 5. Enhanced Loading Skeleton States ── */

.skeleton-shelf {
    display: flex;
    gap: 12px;
    overflow-x: hidden;
    padding: 4px 0;
}

.skeleton-shelf .skeleton-shelf-card {
    display: inline-flex;
    flex-direction: column;
    width: 140px;
    gap: 8px;
    flex-shrink: 0;
}

.skeleton-shelf .skeleton-shelf-card .skeleton-poster {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 8px;
    background: var(--bg-hover);
    overflow: hidden;
    position: relative;
}

.skeleton-shelf .skeleton-shelf-card .skeleton-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-shelf .skeleton-shelf-card .skeleton-text {
    height: 12px;
    border-radius: 4px;
    background: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.skeleton-shelf .skeleton-shelf-card .skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-shelf .skeleton-shelf-card .skeleton-text.short {
    width: 60%;
}

.skeleton-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.skeleton-stats .skeleton-stat-card {
    padding: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.skeleton-stats .skeleton-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    animation: shimmerEnhanced 2s ease-in-out infinite;
}

.skeleton-stats .skeleton-stat-card .skeleton-text {
    height: 10px;
    border-radius: 4px;
    background: var(--bg-hover);
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}

.skeleton-stats .skeleton-stat-card .skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-stats .skeleton-stat-card .skeleton-text.value {
    height: 24px;
    width: 50%;
    margin-top: 0.5rem;
}

.skeleton-stats .skeleton-bar-section {
    grid-column: span 2;
    padding: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.skeleton-stats .skeleton-bar-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    animation: shimmerEnhanced 2s ease-in-out infinite;
}

.skeleton-detail {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

.skeleton-detail .skeleton-poster-area {
    width: 280px;
    flex-shrink: 0;
    aspect-ratio: 2/3;
    border-radius: 16px;
    background: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.skeleton-detail .skeleton-poster-area::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-detail .skeleton-info-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skeleton-detail .skeleton-info-area .skeleton-text {
    height: 14px;
    border-radius: 6px;
    background: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.skeleton-detail .skeleton-info-area .skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-detail .skeleton-info-area .skeleton-text.title {
    height: 32px;
    width: 70%;
    border-radius: 8px;
}

.skeleton-detail .skeleton-info-area .skeleton-text.subtitle {
    height: 16px;
    width: 45%;
}

.skeleton-detail .skeleton-info-area .skeleton-text.button {
    height: 44px;
    width: 160px;
    border-radius: 50px;
    margin-top: 0.5rem;
}

/* Enhanced skeleton-card with realistic card shape */
.skeleton-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}

.skeleton-card .skeleton-poster {
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.skeleton-card .skeleton-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-card .skeleton-card-info {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.skeleton-card .skeleton-card-info .skeleton-text {
    height: 10px;
    border-radius: 4px;
    background: var(--bg-hover);
    position: relative;
    overflow: hidden;
}

.skeleton-card .skeleton-card-info .skeleton-text::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: shimmerEnhanced 1.8s ease-in-out infinite;
}

.skeleton-card .skeleton-card-info .skeleton-text.title-line {
    width: 80%;
    height: 12px;
}

.skeleton-card .skeleton-card-info .skeleton-text.year-line {
    width: 40%;
    height: 8px;
}

/* ── 6. Scrollbar Customization ── */

/* App-wide custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-hover) transparent;
}

/* Hide scrollbar on horizontal scroll areas */
.movie-grid::-webkit-scrollbar {
    display: none;
}

.movie-grid {
    scrollbar-width: none;
}

.shelf-row::-webkit-scrollbar {
    display: none;
}

.shelf-row {
    scrollbar-width: none;
}

/* ── 7. Button Hover State Improvements ── */

.btn-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 12px var(--accent-glow);
    border-color: var(--accent);
    transition: all 0.2s ease;
}

.btn-header:active {
    transform: translateY(0);
    box-shadow: none;
}

.nav-btn:hover {
    transform: scale(1.02);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.nav-btn:active {
    transform: scale(0.99);
}

.btn-select:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--accent-glow);
}

.btn-load-more:hover {
    transform: scale(1.01);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}

.btn-create-collection:hover {
    background: var(--accent);
    color: #fff;
    transition: all 0.2s ease;
}

/* ── 8. Detail Page Animation Improvements ── */

.detail-page .detail-page-content > *:nth-child(1) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.05s;
}

.detail-page .detail-page-content > *:nth-child(2) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.15s;
}

.detail-page .detail-page-content > *:nth-child(3) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.25s;
}

.detail-page .detail-page-content > *:nth-child(4) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.35s;
}

.detail-page .detail-page-content > *:nth-child(5) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.45s;
}

.detail-page .detail-page-content > *:nth-child(6) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.55s;
}

.detail-page .detail-page-content > *:nth-child(n+7) {
    animation: detailStaggerIn 0.5s ease both;
    animation-delay: 0.65s;
}

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

.detail-hero {
    will-change: transform;
}

/* .detail-section initial state now handled by detailStaggerIn animation with 'both' fill mode */

.detail-cast-card {
    opacity: 0;
    animation: castStaggerIn 0.4s ease forwards;
}

.detail-cast-card:nth-child(1) { animation-delay: 0.1s; }
.detail-cast-card:nth-child(2) { animation-delay: 0.15s; }
.detail-cast-card:nth-child(3) { animation-delay: 0.2s; }
.detail-cast-card:nth-child(4) { animation-delay: 0.25s; }
.detail-cast-card:nth-child(5) { animation-delay: 0.3s; }
.detail-cast-card:nth-child(6) { animation-delay: 0.35s; }
.detail-cast-card:nth-child(7) { animation-delay: 0.4s; }
.detail-cast-card:nth-child(8) { animation-delay: 0.45s; }
.detail-cast-card:nth-child(n+9) { animation-delay: 0.5s; }

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

.detail-episode-card {
    opacity: 0;
    animation: episodeSlideIn 0.35s ease forwards;
}

.detail-episode-card:nth-child(1) { animation-delay: 0.05s; }
.detail-episode-card:nth-child(2) { animation-delay: 0.1s; }
.detail-episode-card:nth-child(3) { animation-delay: 0.15s; }
.detail-episode-card:nth-child(4) { animation-delay: 0.2s; }
.detail-episode-card:nth-child(5) { animation-delay: 0.25s; }
.detail-episode-card:nth-child(6) { animation-delay: 0.3s; }
.detail-episode-card:nth-child(7) { animation-delay: 0.35s; }
.detail-episode-card:nth-child(8) { animation-delay: 0.4s; }
.detail-episode-card:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes episodeSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── 9. Responsive Typography Scale ── */

:root {
    --font-size-hero: 2rem;
    --font-size-title: 1.25rem;
    --font-size-body: 0.875rem;
}

@media (min-width: 768px) {
    :root {
        --font-size-hero: 2.5rem;
        --font-size-title: 1.5rem;
        --font-size-body: 1rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --font-size-hero: 3rem;
        --font-size-title: 1.5rem;
        --font-size-body: 1rem;
    }
}

.welcome-title {
    font-size: var(--font-size-hero);
}

.detail-hero-title {
    font-size: var(--font-size-hero);
}

.movie-title {
    font-size: var(--font-size-body);
}

.header-title {
    font-size: var(--font-size-title);
}

/* ── 10. Accessibility Enhancements ── */

/* Screen-reader only, visible on focus (skip-to-content) */
.sr-only-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    box-shadow: 0 4px 12px var(--accent-glow);
}

/* Remove outline for mouse clicks, keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --border: rgba(255, 255, 255, 0.4);
        --text-secondary: rgba(255, 255, 255, 0.85);
        --text-muted: rgba(255, 255, 255, 0.7);
        --bg-hover: rgba(255, 255, 255, 0.12);
    }

    [data-theme="light"] {
        --border: rgba(0, 0, 0, 0.5);
        --text-secondary: rgba(0, 0, 0, 0.85);
        --text-muted: rgba(0, 0, 0, 0.7);
        --bg-hover: rgba(0, 0, 0, 0.08);
    }

    .movie-card {
        border: 2px solid var(--border);
    }

    .btn-header {
        border: 2px solid var(--border);
    }

    .nav-tab {
        border: 1px solid var(--border);
    }

    .modal-overlay {
        background: rgba(0, 0, 0, 0.95);
    }

    .detail-section-title {
        border-bottom: 2px solid var(--text-primary);
    }

    .filter-bar select {
        border: 2px solid var(--border);
    }
}

/* Reduced motion - complement prefers-reduced-motion */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print styles */
@media print {
    .header,
    .nav-tabs-wrapper,
    .nav-tabs,
    .filter-bar,
    .app-footer,
    .toast-container,
    .modal-overlay,
    .player-modal,
    .detail-page,
    .scroll-to-top,
    .context-menu,
    .mini-player,
    .search-box,
    .view-toggle,
    .btn-header,
    .theme-selector,
    .page-size-selector,
    .export-wrapper,
    .btn-load-more,
    .skip-to-content {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        min-height: auto;
    }

    .app-container {
        display: block !important;
    }

    .movie-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .movie-card {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
        transform: none;
    }

    .movie-card:hover {
        transform: none;
        box-shadow: none;
    }

    .card-overlay,
    .card-fav-btn,
    .watched-badge,
    .nfo-badge {
        display: none !important;
    }

    .poster-img {
        display: block !important;
    }

    .no-poster-placeholder {
        display: none !important;
    }

    .main-content {
        max-width: 100%;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ============================================================================
   FEATURE: Drag-and-Drop Playlist Reorder
   ============================================================================ */

.playlist-item[draggable="true"] {
    cursor: grab;
}

.playlist-item[draggable="true"]:active {
    cursor: grabbing;
}

.playlist-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.playlist-item.dragover {
    border-top: 3px solid var(--accent);
    padding-top: calc(0.75rem - 3px);
    transition: border-top 0.15s ease, padding-top 0.15s ease;
}

.playlist-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.playlist-drag-handle:hover {
    color: var(--accent);
    background: var(--tag-bg);
}

.playlist-drag-handle:active {
    cursor: grabbing;
}

/* ============================================================================
   FEATURE: Video Playback Speed Control
   ============================================================================ */

.speed-control-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 56px;
    text-align: center;
}

.speed-control-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--tag-bg);
}

.speed-control-btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--tag-bg);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ============================================================================
   FEATURE: Multi-Genre Filter Tags
   ============================================================================ */

.genre-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.genre-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.genre-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--tag-bg);
}

.genre-tag.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* Genre tag container in advanced filter panel */
#genreTagContainer {
    margin-bottom: 0.5rem;
}

#genreTagContainer .filter-range-label span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Responsive: smaller genre tags on mobile */
@media (max-width: 640px) {
    .genre-tag {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }

    .speed-control-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ============================================================================
   TASK 14-b: CSS POLISH & VISUAL ENHANCEMENTS
   ============================================================================ */

/* ── 1. Improved Card Hover Micro-interactions ── */
.movie-card:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px var(--accent),
        0 0 30px var(--accent-glow),
        inset 0 0 30px rgba(229, 9, 20, 0.05);
}

.movie-card .poster-img.loaded {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.movie-card:hover .poster-img.loaded {
    transform: scale(1.05);
}

@keyframes gradientBorderRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.movie-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        transparent 0%,
        var(--accent) 25%,
        transparent 50%,
        var(--accent) 75%,
        transparent 100%
    );
    background-size: 300% 300%;
    -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;
    pointer-events: none;
    z-index: 1;
}

.movie-card:hover::before {
    opacity: 1;
    animation: gradientBorderRotate 3s ease infinite;
}

/* ── 2. Enhanced Filter Bar Styling ── */
.filter-bar {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .filter-bar {
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.filter-panel-toggle {
    position: relative;
    transition: all 0.25s ease;
}

.filter-panel-toggle .filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border-radius: 50px;
    margin-left: 0.35rem;
    line-height: 1;
}

/* ── 3. Video Player Polish ── */
.player-header {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px 12px 0 0;
    padding: 0.75rem 1.5rem;
}

.player-nav {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 12px 12px;
    padding: 0.75rem 2rem;
}

.nav-btn {
    padding: 0.7rem 1.75rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.player-pro-controls {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── 4. Welcome Screen Polish ── */
@keyframes selectBtnPulse {
    0%, 100% {
        box-shadow: 0 4px 20px var(--accent-glow);
    }
    50% {
        box-shadow: 0 4px 20px var(--accent-glow), 0 0 40px var(--accent-glow);
    }
}

.btn-select.primary-glow,
.btn-select:not(.secondary) {
    animation: selectBtnPulse 2.5s ease-in-out infinite;
}

.btn-select:not(.secondary):hover {
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--accent-glow), 0 0 50px var(--accent-glow);
}

@keyframes dropZoneColorShift {
    0%, 100% {
        border-color: var(--border);
        background: transparent;
    }
    50% {
        border-color: rgba(229, 9, 20, 0.3);
        background: rgba(229, 9, 20, 0.02);
    }
}

.welcome-drop-zone:hover {
    animation: dropZoneColorShift 1.5s ease-in-out infinite;
}

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

.welcome-info-card:nth-child(1) {
    animation: infoCardStagger 0.5s ease-out 0.15s both;
}
.welcome-info-card:nth-child(2) {
    animation: infoCardStagger 0.5s ease-out 0.3s both;
}
.welcome-info-card:nth-child(3) {
    animation: infoCardStagger 0.5s ease-out 0.45s both;
}
.welcome-info-card:nth-child(4) {
    animation: infoCardStagger 0.5s ease-out 0.6s both;
}

/* ── 5. Scroll Progress Bar Enhancement ── */
.scroll-progress-bar {
    height: 2px;
}

.scroll-progress-fill {
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--accent),
        #ff6b6b,
        var(--accent)
    );
    background-size: 200% 100%;
    border-radius: 0 1px 1px 0;
    box-shadow:
        0 0 8px var(--accent-glow),
        0 0 3px var(--accent-glow),
        0 0 1px var(--accent);
    animation: scrollProgressShimmer 2s linear infinite;
}

@keyframes scrollProgressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-theme="light"] .scroll-progress-fill {
    background: linear-gradient(
        90deg,
        var(--accent),
        #e50914,
        var(--accent)
    );
    background-size: 200% 100%;
    box-shadow:
        0 0 6px var(--accent-glow),
        0 0 2px var(--accent-glow);
}

/* ── 6. Empty State Improvements ── */
@keyframes emptyFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.empty-state svg {
    animation: emptyFloat 3s ease-in-out infinite;
}

.empty-state h3 {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 320px;
}

/* ── 7. Modal Enhancement ── */
.modal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-container {
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
    opacity: 0;
}

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

/* ── 8. Dark/Light Mode Smooth Transitions ── */
body,
.header,
.app-footer,
.main-content,
.welcome-screen,
.movie-card,
.modal-container,
.player-modal,
.detail-page,
.filter-bar,
.nav-tabs,
.toast {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* ============================================================================
   CLEAR THUMBNAIL CACHE BUTTON
   ============================================================================ */

.btn-clear-cache {
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s;
    font-family: inherit;
    margin-top: 0.5rem;
}

.btn-clear-cache:hover {
    border-color: var(--warning);
    color: var(--warning);
    background: rgba(243, 156, 18, 0.05);
}

.btn-clear-cache:active {
    background: rgba(243, 156, 18, 0.1);
}

/* ================================================
   FIX: Light theme text visibility for player and context menu
   ================================================ */
[data-theme="light"] .player-title,
[data-theme="light"] .player-header {
    color: #1a1a2e;
}
[data-theme="light"] .player-nav .nav-btn,
[data-theme="light"] .speed-control-btn {
    color: #333;
    border-color: #ccc;
}
[data-theme="light"] .player-nav .nav-btn:hover,
[data-theme="light"] .speed-control-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
[data-theme="light"] .context-menu {
    background: rgba(255,255,255,0.95);
    border-color: #ddd;
}
[data-theme="light"] .context-menu-item {
    color: #333;
}
[data-theme="light"] .context-menu-item:hover {
    background: rgba(0,0,0,0.05);
    color: var(--accent);
}
[data-theme="light"] .btn-close-player {
    color: #333;
}
[data-theme="light"] .btn-close-player:hover {
    color: var(--accent);
}
[data-theme="light"] .detail-back-btn {
    color: #333;
}

/* ================================================
   COMPREHENSIVE LIGHT THEME FIX
   ================================================ */
[data-theme="light"] .player-header { background: rgba(245,245,248,0.92); color: #1a1a2e; }
[data-theme="light"] .player-nav { background: rgba(245,245,248,0.95); border-top: 1px solid #e0e0e5; }
[data-theme="light"] .player-nav .nav-btn { color: #444; background: transparent; border: 1px solid #ccc; }
[data-theme="light"] .player-nav .nav-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(229,9,20,0.06); }
[data-theme="light"] .speed-control-btn { color: #444; border: 1px solid #ccc; background: transparent; }
[data-theme="light"] .speed-control-btn:hover { color: var(--accent); border-color: var(--accent); }
[data-theme="light"] .btn-close-player { color: #444; }
[data-theme="light"] .btn-close-player:hover { color: var(--accent); }
[data-theme="light"] .context-menu { background: rgba(255,255,255,0.96); border-color: #ddd; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
[data-theme="light"] .context-menu-item { color: #333; }
[data-theme="light"] .context-menu-item:hover { background: rgba(0,0,0,0.04); color: var(--accent); }
[data-theme="light"] .detail-back-btn { color: #333; }
[data-theme="light"] .detail-back-btn:hover { color: var(--accent); }
[data-theme="light"] .player-title { color: #1a1a2e; }
[data-theme="light"] .detail-path-display { background: rgba(255,255,255,0.85); border-color: #ddd; color: #444; }
[data-theme="light"] .detail-secondary-btn { color: #444; border-color: #ccc; background: rgba(0,0,0,0.03); }
[data-theme="light"] .detail-secondary-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(229,9,20,0.06); }
[data-theme="light"] .detail-play-btn:hover { background: #c20008; }
[data-theme="light"] .tvshow-episode-card { background: rgba(255,255,255,0.8); border-color: #e8e8ec; }
[data-theme="light"] .tvshow-episode-card:hover { background: rgba(255,255,255,1); border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .tvshow-season-tab { color: #555; background: rgba(0,0,0,0.04); border: 1px solid #ddd; }
[data-theme="light"] .tvshow-season-tab.active { color: var(--accent); background: rgba(229,9,20,0.08); border-color: var(--accent); }
[data-theme="light"] .history-item { background: rgba(255,255,255,0.85); border-color: #e8e8ec; }
[data-theme="light"] .history-item:hover { background: #fff; border-color: var(--accent); }
[data-theme="light"] .btn-clear-history { color: #666; border-color: #ccc; }
[data-theme="light"] .btn-clear-history:hover { color: #e74c3c; border-color: #e74c3c; }
[data-theme="light"] .playlist-item { background: rgba(255,255,255,0.85); border-color: #e8e8ec; }
[data-theme="light"] .playlist-item:hover { background: #fff; border-color: var(--accent); }
[data-theme="light"] .export-dropdown { background: rgba(255,255,255,0.96); border-color: #ddd; }
[data-theme="light"] .export-option { color: #333; }
[data-theme="light"] .export-option:hover { background: rgba(0,0,0,0.04); color: var(--accent); }
[data-theme="light"] .modal-overlay { background: rgba(200,200,210,0.6); }
[data-theme="light"] .modal-container { background: #fff; border-color: #e0e0e5; color: #333; }
[data-theme="light"] .modal-title { color: #1a1a2e; }
[data-theme="light"] .modal-close { color: #666; }
[data-theme="light"] .modal-close:hover { color: var(--accent); }
[data-theme="light"] .folder-list-item { border-color: #e8e8ec; color: #333; }
[data-theme="light"] .folder-list-item:hover { background: rgba(229,9,20,0.04); border-color: var(--accent); }
[data-theme="light"] .btn-add-folder { color: var(--accent); border-color: var(--accent); }
[data-theme="light"] .btn-clear-cache { color: #e67e22; border-color: #e67e22; }
[data-theme="light"] .keyboard-help-container { background: #fff; }
[data-theme="light"] kbd { background: #f0f0f5; border-color: #ccc; color: #333; }
[data-theme="light"] .shortcut-row span { color: #555; }
[data-theme="light"] .stats-section { background: rgba(255,255,255,0.85); border-color: #e8e8ec; }
[data-theme="light"] .stats-chart-card { background: rgba(255,255,255,0.85); border-color: #e8e8ec; }
[data-theme="light"] .stats-bar-track { background: rgba(0,0,0,0.06); }
[data-theme="light"] .stats-chart { background: rgba(0,0,0,0.02); border-radius: 8px; }
[data-theme="light"] .genre-filter-tags .genre-tag { background: rgba(0,0,0,0.05); color: #444; border-color: #ccc; }
[data-theme="light"] .genre-filter-tags .genre-tag.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ================================================
   ACTIVE SORT INDICATOR
   ================================================ */
.filter-bar select option:checked { font-weight: 600; color: var(--accent); }
.filter-bar select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* ================================================
   CUSTOM SCROLLBAR STYLING
   ================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.5); }
.tvshow-season-content::-webkit-scrollbar { width: 6px; }
.shelf-row::-webkit-scrollbar { height: 6px; }
.movie-grid::-webkit-scrollbar { width: 8px; }
.history-timeline::-webkit-scrollbar { width: 6px; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* ================================================
   ENHANCED SKELETON LOADING
   ================================================ */
.skeleton { background: var(--bg-hover); border-radius: 8px; overflow: hidden; position: relative; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: skeletonShimmer 1.5s ease-in-out infinite; }
[data-theme="light"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent); }
@keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-card { aspect-ratio: 2/3; border-radius: 12px; }
.skeleton-text { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }

/* ================================================
   RATING STARS ENHANCEMENT
   ================================================ */
.rating-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #ffd700; }
.rating-badge svg { flex-shrink: 0; }
.detail-hero-rating-val { font-size: 1.4rem; font-weight: 800; color: var(--star-color); }
.detail-hero-rating-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.detail-hero-rating-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #e50914, #ffd700); transition: width 0.5s ease; }

/* ================================================
   WELCOME SCREEN GRADIENT ENHANCEMENT
   ================================================ */
.welcome-bg { background: radial-gradient(ellipse at 20% 50%, rgba(229,9,20,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(229,9,20,0.05) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(100,100,255,0.04) 0%, transparent 50%); }
[data-theme="light"] .welcome-bg { background: radial-gradient(ellipse at 20% 50%, rgba(229,9,20,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(229,9,20,0.03) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(100,100,255,0.03) 0%, transparent 50%); }


/* ============================================================================
   TASK 17-b: Image Lightbox, Sort Direction Indicator, Welcome Stats
   ============================================================================ */

/* Image Lightbox */
.lightbox-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; animation: lightboxFadeIn 0.2s ease; cursor: zoom-out; backdrop-filter: blur(8px); }
.lightbox-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 60px rgba(0,0,0,0.5); animation: lightboxZoomIn 0.25s ease; cursor: default; }
.lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border: none; background: rgba(255,255,255,0.1); color: #fff; font-size: 24px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; backdrop-filter: blur(8px); }
.lightbox-close:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
@keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxZoomIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Sort direction indicators */
.filter-bar select[data-sort-dir="asc"] { border-left: 3px solid var(--accent); }
.filter-bar select[data-sort-dir="desc"] { border-left: 3px solid var(--accent); opacity: 0.9; }

/* Welcome stats widget */
.welcome-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.04); border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); }
.welcome-stat-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); }
.welcome-stat-item svg { opacity: 0.6; }
.welcome-stat-value { font-weight: 600; color: var(--text-primary); }
[data-theme="light"] .welcome-stats { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }


/* ============================================================================
   LIGHT THEME FIXES - Player, Context Menu, and other overlays
   ============================================================================ */

/* Player Modal Light Theme */
[data-theme="light"] .player-modal {
    background: rgba(245, 245, 250, 0.97);
}

[data-theme="light"] .player-header {
    background: rgba(255, 255, 255, 0.88);
    color: #1a1a2e;
    border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .player-title {
    color: #1a1a2e;
}

[data-theme="light"] .player-controls {
    color: #1a1a2e;
}

[data-theme="light"] .player-control-btn,
[data-theme="light"] .player-control-btn span {
    color: #1a1a2e;
}

[data-theme="light"] .player-control-btn:hover {
    background: rgba(0,0,0,0.06);
}

[data-theme="light"] .nav-btn {
    color: #1a1a2e;
}

[data-theme="light"] .nav-btn:hover {
    background: rgba(0,0,0,0.06);
}

[data-theme="light"] .speed-control-btn {
    color: #1a1a2e;
    background: rgba(0,0,0,0.04);
}

[data-theme="light"] .speed-control-btn:hover {
    background: rgba(0,0,0,0.08);
}

[data-theme="light"] .btn-close-player {
    color: #1a1a2e;
}

[data-theme="light"] .btn-close-player:hover {
    background: rgba(0,0,0,0.08);
    color: #e50914;
}

[data-theme="light"] .player-nav {
    background: rgba(255, 255, 255, 0.88);
    border-top-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .player-subtitle-menu {
    color: #1a1a2e;
}

[data-theme="light"] .tv-ep-indicator {
    color: #1a1a2e;
}

[data-theme="light"] .tv-ep-nav-btn span {
    color: #1a1a2e;
}

/* Player Dropdown Light Theme */
[data-theme="light"] .player-dropdown {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

[data-theme="light"] .player-dropdown-item {
    color: #1a1a2e;
}

[data-theme="light"] .player-dropdown-item:hover {
    background: rgba(0,0,0,0.05);
}

[data-theme="light"] .player-dropdown-item.active {
    background: rgba(229, 9, 20, 0.08);
    color: var(--accent);
}

/* Context Menu Light Theme */
[data-theme="light"] .context-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    color: #1a1a2e;
}

[data-theme="light"] .context-menu-item {
    color: #1a1a2e;
}

[data-theme="light"] .context-menu-item:hover {
    background: rgba(0,0,0,0.05);
}

[data-theme="light"] .context-menu-item svg {
    color: #555;
}

[data-theme="light"] .context-menu-divider {
    border-top-color: rgba(0,0,0,0.08);
}

/* Detail Page Light Theme fixes */
[data-theme="light"] .detail-back-btn {
    color: #1a1a2e;
}

[data-theme="light"] .detail-back-btn:hover {
    background: rgba(0,0,0,0.06);
}

/* Export Dropdown Light Theme */
[data-theme="light"] .export-dropdown {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

[data-theme="light"] .export-option {
    color: #1a1a2e;
}

[data-theme="light"] .export-option:hover {
    background: rgba(0,0,0,0.05);
}

/* Keyboard Help Modal Light Theme */
[data-theme="light"] .keyboard-help-container {
    background: #fff;
    color: #1a1a2e;
}

[data-theme="light"] .shortcut-row kbd {
    background: rgba(0,0,0,0.06);
    color: #1a1a2e;
    border-color: rgba(0,0,0,0.1);
}

/* ============================================================================
   ADDITIONAL ENHANCEMENTS - Visual polish & improvements
   ============================================================================ */

/* Smooth theme transition on all elements */
html[data-theme] {
    transition: background-color 0.3s ease, color 0.3s ease;
}
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Better scroll indicator for shelf rows */
.shelf-row {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.shelf-row::-webkit-scrollbar {
    height: 4px;
}

.shelf-row::-webkit-scrollbar-track {
    background: transparent;
}

.shelf-row::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
    opacity: 0.5;
}

/* Improve empty state styling */
.empty-state svg {
    opacity: 0.3;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.empty-state p {
    font-size: 0.85rem;
    opacity: 0.6;
    max-width: 280px;
    text-align: center;
}

/* Improve rating badge styling */
.rating-badge {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Card info area improvements */
.card-info .movie-genre {
    font-size: 0.7rem;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Better focus ring for keyboard navigation */
.keyboard-focus {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
    z-index: 10;
}

/* Light theme specific welcome screen */
[data-theme="light"] .welcome-bg {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
}

[data-theme="light"] .welcome-gradient-orb {
    opacity: 0.15;
}

[data-theme="light"] .welcome-title {
    color: #1a1a2e;
    text-shadow: none;
}

[data-theme="light"] .welcome-subtitle {
    color: #555;
}

/* Better modal overlay for light theme */
[data-theme="light"] .modal-overlay {
    background: rgba(0,0,0,0.3);
}

[data-theme="light"] .modal-container {
    background: #fff;
    color: #1a1a2e;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

[data-theme="light"] .modal-header {
    border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .modal-title {
    color: #1a1a2e;
}

[data-theme="light"] .modal-close {
    color: #555;
}

[data-theme="light"] .modal-close:hover {
    color: #e50914;
    background: rgba(0,0,0,0.05);
}

/* Filter panel light theme */
[data-theme="light"] .filter-tag {
    color: #1a1a2e;
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .filter-tag.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

[data-theme="light"] .genre-tag {
    color: #1a1a2e;
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .genre-tag.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Toast light theme */
[data-theme="light"] .toast {
    background: rgba(255,255,255,0.97);
    color: #1a1a2e;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ── Light Theme Fixes for Player & Context Menu ── */
[data-theme="light"] .player-header {
    background: rgba(255, 255, 255, 0.88);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .player-title {
    color: #1a1a2e;
}
[data-theme="light"] .player-controls button {
    color: #1a1a2e;
}
[data-theme="light"] .player-nav {
    background: rgba(255, 255, 255, 0.88);
    border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .player-nav .nav-btn,
[data-theme="light"] .player-nav .speed-control-btn {
    color: #1a1a2e;
}
[data-theme="light"] .context-menu {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .context-menu-item {
    color: #1a1a2e;
}
[data-theme="light"] .context-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .context-menu-divider {
    border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .detail-back-btn {
    color: #1a1a2e;
}
[data-theme="light"] .detail-path-display {
    color: #444;
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .detail-path-display span {
    color: #333;
}

/* ── Shared Filter Bar ── */
.shared-filter-bar {
    display: none;
    padding: 0.5rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 60px;
    z-index: 50;
}
.shared-filter-bar.active {
    display: block;
}
.shared-filter-bar .filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.shared-filter-bar .advanced-filter-panel {
    margin-top: 0.75rem;
}
.shared-filter-bar .skipped-panel {
    margin-top: 0.5rem;
}

/* Ensure shared filter bar works well on mobile */
@media (max-width: 640px) {
    .shared-filter-bar {
        padding: 0.5rem 0.75rem;
        top: 56px;
    }
    .shared-filter-bar .filter-bar {
        gap: 0.35rem;
    }
}

/* ── Search Filter Indicator ── */
.search-box.has-filter input {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.15);
}
.search-clear-btn {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: none;
    transition: color 0.2s;
}
.search-clear-btn:hover {
    color: var(--text-primary);
}
.search-box.has-filter .search-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Improved Card Info Hover ── */
.movie-card:hover .card-info .movie-title {
    color: var(--accent);
}

/* ── Shared filter bar sort indicator ── */
.shared-filter-bar select {
    transition: border-color 0.2s;
}
.shared-filter-bar select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.12);
    outline: none;
}

/* ── Enhanced Empty State Styling ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 400px;
    margin: 3rem auto;
}
.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}
.empty-state h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.empty-state p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 400px;
}

/* ── Enhanced Card Animations ── */
.movie-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.movie-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* ── Smooth Tab Content Transitions ── */
.tab-content {
    animation: tabFadeIn 0.25s ease-out;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Rating Badge Enhancement ── */
.rating-badge {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── No Poster Placeholder Enhancement ── */
.no-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    color: var(--text-muted);
    opacity: 0.4;
}
.no-poster-placeholder svg {
    width: 40px;
    height: 40px;
}

/* ── Keyboard Focus Ring for Cards ── */
.movie-card.keyboard-focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.2);
}

/* ── Enhanced Skipped Badge ── */
.skipped-badge {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, transform 0.15s;
}
.skipped-badge:hover {
    transform: scale(1.05);
}
.skipped-badge:active {
    transform: scale(0.97);
}

/* ── View Toggle Enhancement ── */
.view-toggle {
    display: flex;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid var(--border);
}
.view-btn {
    border-radius: 6px;
    padding: 6px 10px;
    transition: all 0.2s;
    color: var(--text-muted);
}
.view-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 4px rgba(229, 9, 20, 0.3);
}
.view-btn:not(.active):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── Page Size Selector Enhancement ── */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.page-size-selector select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
}
.page-size-selector select:hover {
    border-color: var(--accent);
}

/* ── Toast Notification Enhancement ── */
.toast {
    position: relative;
    overflow: hidden;
}
.toast::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    animation: toastProgress 4s linear forwards;
}
.toast.success::before { background: var(--success, #2ecc71); }
.toast.warning::before { background: var(--warning, #f39c12); }
.toast.error::before { background: var(--error, #e74c3c); }
@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ── Light Theme Shared Filter Bar ── */
[data-theme="light"] .shared-filter-bar {
    background: #f5f5f7;
    border-bottom-color: #e0e0e5;
}

/* ── Enhanced Scroll to Top ── */
.scroll-to-top-btn {
    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
}
.scroll-to-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
}
.scroll-to-top-btn:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
.scroll-to-top-btn:hover {
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.3);
    transform: translateY(-2px);
}

/* ── Duplicate Finder ── */
.duplicate-groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0;
}
.duplicate-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.duplicate-group:hover {
    border-color: var(--accent);
}
.duplicate-group-header {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.duplicate-group-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.duplicate-group-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.duplicate-group-year {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.duplicate-group-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(229, 9, 20, 0.12);
    color: var(--accent);
}
.duplicate-items {
    display: flex;
    flex-direction: column;
}
.duplicate-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}
.duplicate-item:last-child {
    border-bottom: none;
}
.duplicate-item:hover {
    background: var(--bg-hover);
}
.duplicate-item-poster {
    width: 40px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-card);
}
.duplicate-item-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.duplicate-item-poster .no-poster-placeholder {
    width: 40px;
    height: 60px;
    opacity: 0.3;
}
.duplicate-item-poster .no-poster-placeholder svg {
    width: 20px;
    height: 20px;
}
.duplicate-item-info {
    flex: 1;
    min-width: 0;
}
.duplicate-item-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 2px;
}
.duplicate-item-path {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.duplicate-item-meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 4px;
}
.duplicate-item-quality {
    font-size: 0.75rem;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--tag-color);
}
.duplicate-item-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.duplicate-item-detail-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.duplicate-item-detail-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(229, 9, 20, 0.06);
}

/* Light theme for duplicates */
[data-theme="light"] .duplicate-group {
    background: #fff;
    border-color: #e0e0e5;
}
[data-theme="light"] .duplicate-group-header {
    background: #f5f5f7;
    border-bottom-color: #e0e0e5;
}
[data-theme="light"] .duplicate-group:hover {
    border-color: var(--accent);
}
[data-theme="light"] .duplicate-item {
    border-bottom-color: #f0f0f5;
}
[data-theme="light"] .duplicate-item:hover {
    background: #f5f5f7;
}

/* Subtitle menu divider */
.subtitle-menu-divider {
    height: 1px;
    background: var(--border-color, #333);
    margin: 4px 8px;
}
/* External subtitle load button */
.player-dropdown-item.subtitle-load-external {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent, #e50914);
}
.player-dropdown-item.subtitle-load-external svg {
    flex-shrink: 0;
}
/* Infinite scroll sentinel */
.infinite-scroll-sentinel {
    height: 1px;
    width: 100%;
    visibility: hidden;
}
/* Infinite scroll loading indicator */
.infinite-scroll-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.5rem;
    color: var(--text-muted, #888);
}
.infinite-scroll-loading .spinner-sm {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color, #333);
    border-top-color: var(--accent, #e50914);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Absolute path input in manage folders */
.folder-item-abspath {
    margin-top: 4px;
    width: 100%;
}
.folder-abspath-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color, var(--border));
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    transition: border-color 0.2s;
}
.folder-abspath-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.folder-abspath-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}
.folder-item-info {
    flex: 1;
    min-width: 0;
}

/* ============================================================================
   SMOOTH IMAGE LAZY LOAD TRANSITION
   Images fade in smoothly when they load from IntersectionObserver
   ============================================================================ */
.poster-img,
.logo-img {
    transition: opacity 0.4s ease, transform 0.3s ease;
}

.poster-img:not(.loaded),
.logo-img:not(.loaded) {
    opacity: 0;
}

.poster-img.loaded,
.logo-img.loaded {
    opacity: 1;
}

/* Smooth card entry animation for infinite scroll appended cards */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.movie-grid .movie-card.card-new {
    animation: cardSlideIn 0.3s ease forwards;
}

/* Infinite scroll sentinel styling */
.infinite-scroll-sentinel {
    height: 1px;
    width: 100%;
    clear: both;
}

/* Infinite scroll loading indicator */
.infinite-scroll-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.infinite-scroll-loader .spinner-sm {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================================================
   COMPREHENSIVE CSS STYLING POLISH — Appended Enhancements
   ============================================================================ */

/* ── 1. Enhanced Player Controls Styling ── */

/* Player subtitle menu: better positioning and glassmorphism */
.player-subtitle-menu {
    position: relative;
    z-index: 210;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Player dropdown: polished dropdown with hover effects */
.player-dropdown.active {
    animation: playerDropdownOpen 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

@keyframes playerDropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Player dropdown item: active state with accent color, hover animation */
.player-dropdown-item {
    position: relative;
    padding-left: 1.25rem;
    transition: all 0.2s ease;
}

.player-dropdown-item:hover {
    padding-left: 1.5rem;
    background: var(--bg-hover);
    color: var(--accent);
}

.player-dropdown-item:active {
    transform: scale(0.98);
    background: rgba(229, 9, 20, 0.08);
}

.player-dropdown-item.active {
    color: var(--accent);
    font-weight: 700;
    background: rgba(229, 9, 20, 0.06);
}

.player-dropdown-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

/* Player control button: hover lift effect, active press effect */
.player-control-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-control-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.player-control-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: none;
}

.player-control-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.player-control-btn:hover::after {
    opacity: 0.3;
}

/* Subtitle menu divider: subtle divider line */
.subtitle-menu-divider {
    height: 1px;
    margin: 6px 12px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── 2. Favorites Tab Enhancement ── */

/* Favorites tab special layout */
.tab-content .favorites-tab {
    position: relative;
}

/* Favorites empty state with animated heart icon */
.empty-state.favorites-empty {
    padding: 5rem 2rem;
}

.empty-state.favorites-empty svg {
    animation: heartFloat 2.5s ease-in-out infinite;
    color: #e74c3c;
    filter: drop-shadow(0 4px 12px rgba(231, 76, 60, 0.3));
}

@keyframes heartFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-8px) scale(1.05); }
    50% { transform: translateY(-3px) scale(1); }
    75% { transform: translateY(-10px) scale(1.03); }
}

.empty-state.favorites-empty h3 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state.favorites-empty p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 360px;
}

/* Favorite cards with subtle accent border on hover */
.movie-card.is-favorite {
    border-left: 3px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.movie-card.is-favorite:hover {
    border-left-color: #e74c3c;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), -4px 0 16px rgba(231, 76, 60, 0.15);
}

/* ── 3. Filter Bar on All Tabs Enhancement ── */

/* Shared filter bar polished glassmorphism effect */
.shared-filter-bar {
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    background: rgba(18, 18, 26, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .shared-filter-bar {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Sort select and genre select custom styling improvements */
.shared-filter-bar select,
.filter-bar select {
    appearance: none;
    -webkit-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='%239a9aaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    min-height: 36px;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.shared-filter-bar select:focus,
.filter-bar select:focus {
    box-shadow: 0 0 0 3px var(--accent-glow);
    border-color: var(--accent);
}

.shared-filter-bar select:hover,
.filter-bar select:hover {
    border-color: var(--text-muted);
}

/* Filter active indicator pulse animation */
.filter-active-indicator.visible {
    animation: filterDotPulseEnhanced 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.4);
}

@keyframes filterDotPulseEnhanced {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 4px rgba(231, 76, 60, 0.3);
    }
    50% {
        transform: scale(1.4);
        box-shadow: 0 0 10px rgba(231, 76, 60, 0.6);
    }
}

/* ── 4. Card Grid Refinements ── */

/* Staggered animation delays for appended cards */
.movie-card.card-new {
    opacity: 0;
    animation: cardStaggerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.movie-card.card-new:nth-child(8n+1) { animation-delay: 0.00s; }
.movie-card.card-new:nth-child(8n+2) { animation-delay: 0.04s; }
.movie-card.card-new:nth-child(8n+3) { animation-delay: 0.08s; }
.movie-card.card-new:nth-child(8n+4) { animation-delay: 0.12s; }
.movie-card.card-new:nth-child(8n+5) { animation-delay: 0.16s; }
.movie-card.card-new:nth-child(8n+6) { animation-delay: 0.20s; }
.movie-card.card-new:nth-child(8n+7) { animation-delay: 0.24s; }
.movie-card.card-new:nth-child(8n+8) { animation-delay: 0.28s; }

@keyframes cardStaggerIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Batch-loaded cards nth-child animation-delay variations */
.movie-grid .movie-card:nth-child(10n+1) { animation-delay: 0.00s; }
.movie-grid .movie-card:nth-child(10n+2) { animation-delay: 0.02s; }
.movie-grid .movie-card:nth-child(10n+3) { animation-delay: 0.04s; }
.movie-grid .movie-card:nth-child(10n+4) { animation-delay: 0.06s; }
.movie-grid .movie-card:nth-child(10n+5) { animation-delay: 0.08s; }
.movie-grid .movie-card:nth-child(10n+6) { animation-delay: 0.10s; }
.movie-grid .movie-card:nth-child(10n+7) { animation-delay: 0.12s; }
.movie-grid .movie-card:nth-child(10n+8) { animation-delay: 0.14s; }
.movie-grid .movie-card:nth-child(10n+9) { animation-delay: 0.16s; }
.movie-grid .movie-card:nth-child(10n+10) { animation-delay: 0.18s; }

/* Better card hover shadow with accent glow */
.movie-card:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 20px var(--accent-glow);
}

/* Poster container aspect ratio consistency */
.poster-container {
    aspect-ratio: 2 / 3;
    contain: layout paint style;
}

/* ── 5. Manage Folders Modal Enhancement ── */

/* Styled input for absolute path with monospace font */
.folder-abspath-input {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', 'Menlo', monospace;
    letter-spacing: -0.02em;
    line-height: 1.5;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Better focus state for the input */
.folder-abspath-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, 0.15);
    background: var(--bg-secondary);
}

/* Path prefix hint styling */
.folder-abspath-input.path-hint {
    color: var(--text-muted);
    font-style: italic;
}

.folder-item-abspath .path-prefix {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background: var(--tag-bg);
    color: var(--text-muted);
    border-radius: 4px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

/* ── 6. Detail Page Polish ── */

/* Detail path display: better glassmorphism, monospace font */
.detail-path-display {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    background: rgba(10, 10, 15, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.65rem 1rem;
    transition: all 0.3s ease;
}

.detail-path-display:hover {
    background: rgba(10, 10, 15, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .detail-path-display {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px) saturate(1.2);
}

[data-theme="light"] .detail-path-display:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Action buttons hover effects */
.detail-hero-actions .detail-secondary-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-hero-actions .detail-secondary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.detail-hero-actions .detail-secondary-btn:active {
    transform: translateY(0) scale(0.98);
}

.detail-hero-actions .detail-play-btn {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-hero-actions .detail-play-btn:active {
    transform: scale(0.96);
}

/* Season tabs in TV show detail page — improved hover/active states */
.tvshow-season-tab {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.tvshow-season-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tvshow-season-tab:hover::after {
    opacity: 0.15;
}

.tvshow-season-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--accent-glow);
}

.tvshow-season-tab.active {
    box-shadow: 0 4px 20px var(--accent-glow);
}

.tvshow-season-tab:active {
    transform: scale(0.97);
}

/* Episode cards hover animation */
.tvshow-episode-card {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tvshow-episode-card:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), -2px 0 12px var(--accent-glow);
}

.tvshow-episode-card:active {
    transform: translateX(3px) scale(0.99);
}

/* ── 7. Scroll Progress Bar Enhancement ── */

/* Smooth gradient on the scroll progress fill */
.scroll-progress-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #ff6b6b 50%,
        var(--accent) 100%
    );
    background-size: 200% 100%;
    animation: progressGradientShift 3s ease infinite;
    box-shadow:
        0 0 10px var(--accent-glow),
        0 0 4px var(--accent-glow);
    border-radius: 0 3px 3px 0;
}

@keyframes progressGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

[data-theme="light"] .scroll-progress-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #e50914 50%,
        var(--accent) 100%
    );
    background-size: 200% 100%;
    animation: progressGradientShift 3s ease infinite;
    box-shadow: 0 0 6px var(--accent-glow), 0 0 2px var(--accent-glow);
}

/* ── 8. Toast Notification Improvements ── */

/* Toast info variant with blue/teal left border */
.toast.info {
    border-left-color: #3498db;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(52, 152, 219, 0.04) 100%);
}

.toast.info::before {
    background: linear-gradient(180deg, #3498db, #2980b9);
}

[data-theme="light"] .toast.info {
    border-left-color: #2980b9;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(52, 152, 219, 0.03) 100%);
}

/* Smoother entry/exit animations */
.toast {
    animation: toastSlideInEnhanced 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

@keyframes toastSlideInEnhanced {
    from {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.toast.close-animation {
    animation: toastSlideOutEnhanced 0.3s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes toastSlideOutEnhanced {
    from {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
}

/* Better text truncation for long messages */
.toast {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.5;
}

.toast .toast-message {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 9. Light Theme Fixes ── */

/* Light mode card borders and shadows */
[data-theme="light"] .movie-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .movie-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--accent-glow);
}

[data-theme="light"] .collection-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .collection-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Light mode player controls */
[data-theme="light"] .player-control-btn {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="light"] .player-control-btn:hover {
    background: var(--bg-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Light mode player dropdown */
[data-theme="light"] .player-dropdown {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .player-dropdown-item:hover {
    background: var(--bg-hover);
}

/* Light mode episode cards */
[data-theme="light"] .tvshow-episode-card {
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .tvshow-episode-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Light mode season tabs */
[data-theme="light"] .tvshow-season-tab {
    border-color: var(--border);
    background: var(--bg-card);
}

[data-theme="light"] .tvshow-season-tab:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
}

/* Light mode toast contrast fix */
[data-theme="light"] .toast {
    color: #1d1d1f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Light mode modal */
[data-theme="light"] .modal-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Light mode folder-abspath input */
[data-theme="light"] .folder-abspath-input {
    background: #f5f5f7;
    border-color: var(--border);
}

[data-theme="light"] .folder-abspath-input:focus {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Light mode shared-filter-bar */
[data-theme="light"] .shared-filter-bar select {
    background-color: #ffffff;
    border-color: var(--border);
}

/* Light mode favorites accent glow fix */
[data-theme="light"] .movie-card.is-favorite:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), -4px 0 16px rgba(231, 76, 60, 0.1);
}

/* Light mode subtitle menu divider */
[data-theme="light"] .subtitle-menu-divider {
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── 10. Responsive Improvements ── */

/* Better mobile layout for filter bar (stacked on small screens) */
@media (max-width: 640px) {
    .shared-filter-bar .filter-bar,
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .shared-filter-bar select,
    .filter-bar select {
        width: 100%;
        min-height: 42px;
    }

    .filter-count {
        margin-left: 0;
        text-align: center;
    }

    .shared-filter-bar .advanced-filter-panel {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Mobile-friendly player controls */
@media (max-width: 768px) {
    .player-pro-controls {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
    }

    .control-group {
        gap: 4px;
    }

    .pro-btn {
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 6px;
        min-height: 36px;
    }

    .dropdown-toggle {
        padding: 8px 10px;
        font-size: 12px;
        min-height: 36px;
    }

    .time-display {
        font-size: 11px;
        min-width: 80px;
        margin-left: 4px;
    }

    .player-control-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
        min-height: 42px;
        border-radius: 10px;
    }

    .player-dropdown {
        min-width: 200px;
        right: -10px;
    }

    .player-dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .player-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .player-controls {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Touch-friendly targets for all interactive elements */
@media (max-width: 768px) {
    .nav-tab {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
        min-height: 42px;
    }

    .tvshow-season-tab {
        padding: 0.85rem 1rem;
        min-width: 80px;
        min-height: 54px;
    }

    .tvshow-episode-card {
        padding: 1rem;
    }

    .tvshow-episode-number {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .filter-bar select {
        min-height: 42px;
        font-size: 0.9rem;
    }

    .btn-add-folder {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .folder-item-remove {
        padding: 0.6rem;
        min-width: 36px;
        min-height: 36px;
    }

    .modal-close {
        padding: 0.65rem;
        min-width: 40px;
        min-height: 40px;
    }

    .toast {
        max-width: calc(100vw - 2rem);
        font-size: 0.9rem;
        padding: 1rem 1.25rem;
    }

    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }
}

@media (max-width: 480px) {
    .player-subtitle-menu {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .detail-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-hero-actions .detail-play-btn,
    .detail-hero-actions .detail-secondary-btn {
        justify-content: center;
        padding: 0.85rem 1.5rem;
        font-size: 1rem;
    }

    .tvshow-season-tabs {
        gap: 0.35rem;
    }

    .tvshow-season-tab {
        padding: 0.65rem 0.75rem;
        min-width: 70px;
        border-radius: 8px;
    }
}

/* ============================================================================
   VIDEO PLAYER ENHANCEMENTS - Subtitle/Audio Controls v3.0
   ============================================================================ */

/* Player header indicators (subtitle size, audio track count) */
.player-header-indicators {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
}

.player-indicator {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #aaa);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Subtitle section labels in dropdown */
.subtitle-section-label {
    padding: 0.4rem 1rem 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Subtitle delay controls */
.subtitle-delay-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.3rem 1rem 0.5rem;
}

.subtitle-delay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    background: var(--bg-hover, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    transition: all 0.15s ease;
    min-width: 48px;
}

.subtitle-delay-btn:hover {
    background: var(--accent, #e50914);
    border-color: var(--accent, #e50914);
    color: #fff;
}

.subtitle-delay-btn:active {
    transform: scale(0.95);
}

.subtitle-delay-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent, #e50914);
    min-width: 50px;
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Subtitle size controls */
.subtitle-size-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.3rem 1rem 0.5rem;
}

.subtitle-size-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s ease;
}

.subtitle-size-btn:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.15));
    border-color: var(--accent, #e50914);
}

.subtitle-size-btn.active {
    background: var(--accent, #e50914);
    border-color: var(--accent, #e50914);
    color: #fff;
}

.subtitle-size-btn:active {
    transform: scale(0.95);
}

/* Audio button disabled state (when audioTracks API unavailable) */
.player-control-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}

.player-control-btn.disabled:hover {
    border-color: var(--border);
    background: var(--bg-card);
}

/* Dropdown info message (no subtitles, audio not supported, etc.) */
.player-dropdown-info {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
    font-style: italic;
    line-height: 1.4;
}

/* Drag-and-drop overlay effect on player modal */
.player-modal.subtitle-drag-over {
    outline: 3px dashed var(--accent, #e50914);
    outline-offset: -6px;
}

.player-modal.subtitle-drag-over .player-container {
    opacity: 0.7;
}

.player-modal.subtitle-drag-over::after {
    content: 'Drop subtitle file here';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent, #e50914);
    background: rgba(0, 0, 0, 0.8);
    padding: 1rem 2rem;
    border-radius: 12px;
    border: 2px dashed var(--accent, #e50914);
    z-index: 300;
    pointer-events: none;
}

/* Player nav label for TV episode navigator */
.player-nav-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* Light theme adjustments for new elements */
[data-theme="light"] .player-indicator {
    background: rgba(0, 0, 0, 0.06);
    color: #666;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .subtitle-delay-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #333;
}

[data-theme="light"] .subtitle-delay-btn:hover {
    color: #fff;
}

[data-theme="light"] .subtitle-size-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #333;
}

[data-theme="light"] .subtitle-size-btn:hover {
    color: #fff;
}

[data-theme="light"] .subtitle-size-btn.active {
    color: #fff;
}

[data-theme="light"] .player-dropdown-info {
    color: #888;
}

[data-theme="light"] .player-control-btn.disabled {
    opacity: 0.4;
}

[data-theme="light"] .subtitle-section-label {
    color: #888;
}

[data-theme="light"] .subtitle-delay-value {
    color: var(--accent, #c20008);
}

/* Movie badge on card covers */
.movie-badge {
    background: rgba(220, 38, 38, 0.85) !important;
    color: #fff !important;
    border: 1px solid rgba(220, 38, 38, 0.5);
}

/* ============================================================================
   COMPACT VIEW - Removed duplicate (see enhanced version below)
   ============================================================================ */

/* ============================================================================
   POSTER WALL VIEW - Removed duplicate (see enhanced version below)
   ============================================================================ */

/* ============================================================================
   TASK 12: CSS POLISH AND REFINEMENTS
   ============================================================================ */

/* ── 1. Movie Badge Styling (warm amber/orange for movies) ── */
.movie-badge {
    background: rgba(245, 158, 11, 0.88) !important;
    color: #fff !important;
    border: 1px solid rgba(245, 158, 11, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
[data-theme="light"] .movie-badge {
    background: rgba(217, 119, 6, 0.9) !important;
    border-color: rgba(217, 119, 6, 0.4);
}

/* ── 2. Detail Path Display Polish ── */
.detail-path-display {
    position: relative;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    background: rgba(10, 10, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.75rem 1.1rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.detail-path-display:hover {
    background: rgba(10, 10, 18, 0.88);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}
.detail-path-display:active {
    transform: translateY(0) scale(0.995);
}
.detail-path-display span {
    word-break: break-all;
    white-space: normal;
}
[data-theme="light"] .detail-path-display {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #444;
}
[data-theme="light"] .detail-path-display:hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #333;
}

/* ── 3. Light Theme Fixes ── */
[data-theme="light"] .detail-hero-title {
    color: #1d1d1f !important;
    text-shadow: none;
}
[data-theme="light"] .detail-hero-subtitle {
    color: #3a3a3c !important;
}
[data-theme="light"] .detail-hero-subtitle span {
    color: #3a3a3c;
}
[data-theme="light"] .detail-plot {
    color: #2d2d2f !important;
}
[data-theme="light"] .detail-section-title {
    color: #1d1d1f !important;
    border-bottom-color: #d2d2d7;
}
[data-theme="light"] .detail-meta-label {
    color: #6e6e73 !important;
}
[data-theme="light"] .detail-meta-value {
    color: #1d1d1f !important;
}
[data-theme="light"] .movie-title {
    color: #1d1d1f !important;
}
[data-theme="light"] .movie-year {
    color: #6e6e73 !important;
}
[data-theme="light"] .movie-genre {
    color: #515154 !important;
}
[data-theme="light"] .movie-filesize {
    color: #86868b !important;
}
[data-theme="light"] .card-info {
    color: #1d1d1f;
}
[data-theme="light"] .nav-tab {
    color: #6e6e73;
}
[data-theme="light"] .nav-tab:hover:not(.active) {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .filter-bar select {
    color: #1d1d1f;
    background: #ffffff;
    border-color: #d2d2d7;
}
[data-theme="light"] .shelf-card-title {
    color: #1d1d1f !important;
}
[data-theme="light"] .shelf-card-year {
    color: #6e6e73 !important;
}
[data-theme="light"] .search-box input {
    color: #1d1d1f;
    background: #ffffff;
    border-color: #d2d2d7;
}
[data-theme="light"] .search-box input::placeholder {
    color: #86868b;
}
[data-theme="light"] .modal-container {
    background: #ffffff;
    color: #1d1d1f;
    border-color: #d2d2d7;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .modal-title {
    color: #1d1d1f;
}
[data-theme="light"] .modal-close {
    color: #6e6e73;
}
[data-theme="light"] .modal-close:hover {
    color: #1d1d1f;
}
[data-theme="light"] .genre-tag {
    color: #c20008;
    background: rgba(194, 0, 8, 0.06);
    border-color: rgba(194, 0, 8, 0.12);
}
[data-theme="light"] .context-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: #e0e0e5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .context-menu-item {
    color: #333;
}
[data-theme="light"] .context-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--accent);
}
[data-theme="light"] .toast {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .empty-state h3 {
    color: #1d1d1f;
}
[data-theme="light"] .empty-state p {
    color: #6e6e73;
}

/* ── 4. Skipped Badge Styling ── */
.skipped-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.skipped-badge:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.35);
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.skipped-badge:active {
    transform: scale(0.97);
    box-shadow: none;
}
[data-theme="light"] .skipped-badge {
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.2);
}
[data-theme="light"] .skipped-badge:hover {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(217, 119, 6, 0.3);
}

/* ── 5. Card Info Quality Display ── */
.movie-filesize {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: auto;
    letter-spacing: 0.01em;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.movie-card:hover .movie-filesize {
    opacity: 1;
}
[data-theme="light"] .movie-filesize {
    color: #86868b;
}
[data-theme="light"] .movie-card:hover .movie-filesize {
    color: #6e6e73;
}

/* ── 6. Responsive Improvements for Advanced Filter Panel ── */
@media (max-width: 640px) {
    .advanced-filter-panel .filter-year-range {
        flex-direction: column;
        gap: 0.5rem;
    }
    .advanced-filter-panel .filter-year-range input {
        width: 100%;
    }
    .advanced-filter-panel .genre-tag-container,
    .advanced-filter-panel .country-tag-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
        gap: 0.4rem;
    }
    .advanced-filter-panel .genre-tag-container::-webkit-scrollbar,
    .advanced-filter-panel .country-tag-container::-webkit-scrollbar {
        display: none;
    }
    .advanced-filter-panel .genre-tag,
    .advanced-filter-panel .country-tag {
        flex-shrink: 0;
    }
    .advanced-filter-panel .filter-size-inputs {
        flex-direction: column;
        gap: 0.5rem;
    }
    .advanced-filter-panel .filter-size-inputs input {
        width: 100%;
    }
}

/* ── 7. Poster Wall View ── */
.movie-poster-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    padding: 0.5rem 0;
    align-items: start;
}
.poster-wall-item {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    contain: layout style paint;
    will-change: transform;
}
.poster-wall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 0;
}
.poster-wall-item:hover {
    z-index: 5;
    border: 2px solid var(--accent);
    box-shadow: 0 8px 30px rgba(229, 9, 20, 0.25);
    border-radius: 10px;
}
.poster-wall-item:hover img {
    transform: scale(1.04);
}
.poster-wall-item .rating-badge {
    top: 6px;
    right: 6px;
    padding: 0.15rem 0.35rem;
    font-size: 0.6rem;
}
.poster-wall-item .movie-quality {
    bottom: 6px;
    left: 6px;
    padding: 0.12rem 0.4rem;
    font-size: 0.6rem;
}
.poster-wall-item .no-poster-placeholder {
    font-size: 0.7rem;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.poster-wall-item .no-poster-placeholder svg {
    width: 36px;
    height: 36px;
}
@media (max-width: 768px) {
    .movie-poster-wall {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.5rem;
    }
}
@media (max-width: 480px) {
    .movie-poster-wall {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
}
[data-theme="light"] .poster-wall-item:hover {
    box-shadow: 0 8px 30px rgba(194, 0, 8, 0.15);
    border-color: var(--accent);
}

/* ── 9. Compact View Enhancements ── */
.movie-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0;
    align-items: start;
}
.compact-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--bg-card);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    contain: layout style paint;
    will-change: transform;
    min-height: 63px;
}
.compact-card:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.compact-card:active {
    transform: translateY(0) scale(0.98);
}
.compact-poster {
    position: relative;
    width: 42px;
    height: 63px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.compact-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.compact-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.compact-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}
.compact-year {
    font-size: 0.75rem;
    color: var(--text-muted);
}
[data-theme="light"] .compact-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .compact-title {
    color: #1d1d1f;
}
[data-theme="light"] .compact-year {
    color: #86868b;
}
@media (min-width: 1200px) {
    .movie-compact-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
@media (max-width: 768px) {
    .movie-compact-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }
    .compact-title {
        font-size: 0.8rem;
    }
}
@media (max-width: 480px) {
    .movie-compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    .compact-poster {
        width: 36px;
        height: 54px;
    }
    .compact-title {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }
}

/* Light theme nav-tabs fix */
[data-theme="light"] .nav-tab {
    color: #555;
}
[data-theme="light"] .nav-tab:hover {
    color: #222;
}
[data-theme="light"] .nav-tab.active {
    color: #fff;
}
[data-theme="light"] .nav-tab.active svg {
    stroke: currentColor;
    color: currentColor;
}
[data-theme="light"] .nav-tab svg {
    stroke: currentColor;
    color: currentColor;
}

/* ============================================================================
   V2.0 STYLING IMPROVEMENTS - Enhanced Visual Design
   ============================================================================ */

/* ── OLED Dark Mode Theme ── */
[data-theme="oled"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #0f0f0f;
    --bg-hover: #1a1a1a;
    --accent: #e50914;
    --accent-glow: rgba(229, 9, 20, 0.35);
    --text-primary: #ffffff;
    --text-secondary: #8a8a9a;
    --text-muted: #5a5a6a;
    --border: #1a1a1a;
    --success: #2ecc71;
    --warning: #f39c12;
    --gradient: linear-gradient(135deg, #e50914, #ff6b6b);
    --tag-bg: rgba(229, 9, 20, 0.12);
    --tag-color: #ff6b6b;
    --star-color: #f5c518;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}
[data-theme="oled"] .movie-card:hover {
    box-shadow: 0 12px 40px rgba(229, 9, 20, 0.2), 0 0 0 1px rgba(229, 9, 20, 0.3);
}
[data-theme="oled"] .header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom-color: #1a1a1a;
}
[data-theme="oled"] .detail-page-bg {
    filter: blur(30px) brightness(0.25) saturate(1.5);
}

/* ── Enhanced Welcome Screen ── */
.welcome-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.welcome-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orbFloat 8s ease-in-out infinite;
}
.welcome-gradient-orb.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--accent);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}
.welcome-gradient-orb.orb-2 {
    width: 300px;
    height: 300px;
    background: #ff6b6b;
    bottom: -80px;
    left: -80px;
    animation-delay: 2s;
}
.welcome-gradient-orb.orb-3 {
    width: 250px;
    height: 250px;
    background: #f5c518;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 4s;
    opacity: 0.15;
}
@keyframes orbFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    33% { transform: translateY(-20px) scale(1.05); }
    66% { transform: translateY(15px) scale(0.95); }
}
.welcome-gradient-orb.orb-3 {
    animation-name: orbFloat3;
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}
.welcome-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.particle {
    position: absolute;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: particleFade 4s ease-in-out infinite;
}
@keyframes particleFade {
    0%, 100% { opacity: 0; transform: translateY(0); }
    50% { opacity: 0.6; transform: translateY(-20px); }
}
.welcome-content {
    position: relative;
    z-index: 2;
}
.welcome-logo-wrapper {
    position: relative;
    display: inline-block;
}
.welcome-logo-wrapper::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: var(--accent);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.2;
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.1); }
}
.welcome-icon {
    animation: welcomeFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--accent-glow));
}
@keyframes welcomeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.btn-select.primary-glow {
    position: relative;
    overflow: hidden;
}
.btn-select.primary-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    filter: blur(8px);
}
.btn-select.primary-glow:hover::before {
    opacity: 0.6;
}
.btn-select.primary-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.6s;
}
.btn-select.primary-glow:hover::after {
    transform: rotate(45deg) translateY(100%);
}
.welcome-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.welcome-info-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
[data-theme="light"] .welcome-info-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .welcome-info-card:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}
.welcome-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}
.welcome-drop-zone:hover,
.welcome-drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(229, 9, 20, 0.05);
    color: var(--accent);
}

/* ── Glassmorphism Header ── */
.header {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(18, 18, 26, 0.85);
}
[data-theme="light"] .header {
    background: rgba(255, 255, 255, 0.85);
}
[data-theme="oled"] .header {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
}
.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
    opacity: 0.5;
}

/* ── Enhanced Search Box ── */
.search-box {
    position: relative;
}
.search-box input {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] .search-box input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
.search-box input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    width: 300px;
    color: var(--text-primary);
}
.search-kbd {
    padding: 2px 6px;
    font-size: 0.7rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: inherit;
    transition: opacity 0.2s;
}
.search-box input:focus ~ .search-kbd,
.search-box.has-filter .search-kbd {
    opacity: 0;
}

/* ── Search Suggestions Dropdown ── */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 300;
    display: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.search-suggestions.active {
    display: block;
    animation: suggestionsFadeIn 0.2s ease;
}
@keyframes suggestionsFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-width: 0;
}
.search-suggestion-item:last-child {
    border-bottom: none;
}
.search-suggestion-item:hover,
.search-suggestion-item.focused {
    background: var(--bg-hover);
}
.search-suggestion-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
}
.search-suggestion-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.search-suggestion-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 0.5rem;
}

/* ── Enhanced Card Designs ── */
.movie-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}
.movie-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--accent);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-glow);
}
[data-theme="light"] .movie-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--accent-glow);
}
.poster-container:hover .poster-img.loaded {
    transform: scale(1.08);
    filter: brightness(1.05);
}
.card-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    transition: opacity 0.35s ease;
}
.card-overlay svg {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease;
}
.movie-card:hover .card-overlay svg {
    transform: scale(1.1);
}
.rating-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(245, 197, 24, 0.3);
}
.card-fav-btn {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-fav-btn.favorited {
    animation: favPulse 0.4s ease;
}
@keyframes favPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.watch-progress-bar {
    backdrop-filter: blur(4px);
}
.watch-progress-fill {
    background: linear-gradient(90deg, var(--accent), #ff6b6b);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Enhanced Filter Bar ── */
.advanced-filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .advanced-filter-panel {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
[data-theme="oled"] .advanced-filter-panel {
    background: rgba(15, 15, 15, 0.98);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}
.afp-range {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    transition: background 0.2s;
}
.afp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.afp-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 16px var(--accent-glow);
}
.afp-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.filter-panel-toggle {
    position: relative;
    overflow: hidden;
}
.filter-active-indicator {
    display: none;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 4px;
    animation: filterPulse 2s ease-in-out infinite;
}
.filter-active-indicator.active {
    display: inline-block;
}
@keyframes filterPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.afp-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.afp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.afp-chip:hover {
    background: var(--accent);
    color: #fff;
}
.afp-chip svg {
    width: 12px;
    height: 12px;
}

/* ── Better Toast Notifications ── */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 700;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    pointer-events: none;
}
.toast {
    padding: 0.85rem 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    border-left: 4px solid var(--accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: toastSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 380px;
    pointer-events: auto;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .toast {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.error { border-left-color: #e74c3c; }
.toast.info { border-left-color: var(--accent); }
.toast-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
}
.toast-close-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 0 12px;
    animation: toastProgress linear forwards;
}
.toast.success .toast-progress { background: var(--success); }
.toast.warning .toast-progress { background: var(--warning); }
.toast.error .toast-progress { background: #e74c3c; }
@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}
@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.toast.toast-exit {
    animation: toastSlideOut 0.3s ease forwards;
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}
.toast-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
    padding: 0.3rem 0.75rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}
.toast-action-btn:hover {
    filter: brightness(1.15);
}

/* ── Enhanced Scroll Progress Bar ── */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
}
.scroll-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #ff6b6b, #f5c518);
    box-shadow: 0 0 12px var(--accent-glow);
    width: 0%;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ── Better Loading Overlay ── */
.loading-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
}
.loading-spinner-ring {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
}
.spinner {
    width: 60px;
    height: 60px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: relative;
}
.spinner::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid transparent;
    border-top-color: rgba(229, 9, 20, 0.4);
    border-radius: 50%;
    animation: spin 1.2s linear infinite reverse;
}
.loading-bar-track {
    width: 200px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin: 0.75rem auto 0;
}
.loading-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #ff6b6b);
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Skeleton Loading ── */
.skeleton-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.skeleton-poster {
    aspect-ratio: 2/3;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}
.skeleton-poster::after,
.skeleton-text::after,
.skeleton-text-short::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    animation: shimmer 1.5s ease-in-out infinite;
}
[data-theme="light"] .skeleton-poster::after,
[data-theme="light"] .skeleton-text::after,
[data-theme="light"] .skeleton-text-short::after {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 50%, transparent 100%);
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skeleton-info {
    padding: 0.85rem;
}
.skeleton-text {
    height: 14px;
    background: var(--bg-secondary);
    border-radius: 4px;
    margin-bottom: 0.4rem;
    position: relative;
    overflow: hidden;
}
.skeleton-text-short {
    height: 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    width: 60%;
    margin-top: 0.3rem;
    position: relative;
    overflow: hidden;
}
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 480px) {
    .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Modal Improvements ── */
.modal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0.3s ease;
}
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.3);
}
.modal-container {
    animation: modalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .modal-container {
    border-color: rgba(0, 0, 0, 0.06);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Player UI Enhancements ── */
.player-modal {
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(16px);
}
.player-container {
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-btn {
    backdrop-filter: blur(10px);
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}
.nav-btn:hover {
    background: rgba(40, 40, 60, 0.9);
    border-color: var(--accent);
    box-shadow: 0 4px 16px var(--accent-glow);
}
.speed-control-btn {
    backdrop-filter: blur(10px);
}
.player-pro-controls {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

/* ── Detail Page Enhancements ── */
.detail-hero-title {
    background: linear-gradient(180deg, var(--text-primary) 0%, rgba(240, 240, 240, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .detail-hero-title {
    background: linear-gradient(180deg, #1d1d1f 0%, rgba(29, 29, 31, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.detail-genre-pill {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}
.detail-genre-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-glow);
    border-color: var(--accent);
}
.detail-play-btn {
    position: relative;
    overflow: hidden;
}
.detail-play-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.6s;
}
.detail-play-btn:hover::after {
    transform: rotate(45deg) translateY(100%);
}
.detail-section {
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    transition: border-color 0.3s;
}
.detail-section:hover {
    border-color: rgba(229, 9, 20, 0.15);
}
[data-theme="light"] .detail-section:hover {
    border-color: rgba(194, 0, 8, 0.12);
}
.detail-cast-card {
    transition: transform 0.2s ease;
}
.detail-cast-card:hover {
    transform: translateY(-4px);
}
.detail-cast-avatar {
    transition: box-shadow 0.3s ease;
}
.detail-cast-card:hover .detail-cast-avatar {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.tvshow-season-tab {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tvshow-season-tab:hover {
    transform: translateY(-2px);
}

/* ── Collections Grid Enhancement ── */
.collection-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.collection-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--accent-glow);
}
.collection-poster-grid {
    position: relative;
}
.collection-poster-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 50%);
    pointer-events: none;
}

/* ── Empty States ── */
.empty-state svg {
    animation: emptyFloat 3s ease-in-out infinite;
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.empty-state h3 {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Keyboard Focus Indicator ── */
.keyboard-focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent), 0 0 16px var(--accent-glow) !important;
    border-radius: 12px;
    z-index: 10;
}
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-header:focus-visible,
.nav-tab:focus-visible,
.view-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Context Menu ── */
.context-menu {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    min-width: 220px;
    overflow: hidden;
    animation: contextMenuIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes contextMenuIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.context-menu-item:last-child {
    border-bottom: none;
}
.context-menu-item:hover {
    background: var(--bg-hover);
    padding-left: 1.25rem;
}
.context-menu-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.context-menu-item:hover svg {
    color: var(--accent);
}

/* ── Scroll to Top Button ── */
.scroll-to-top-btn {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 200;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
.scroll-to-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.scroll-to-top-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-2px);
}
.scroll-to-top-btn.visible:hover {
    transform: translateY(-2px);
}

/* ── Accent Color Picker ── */
.accent-color-picker {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    flex-wrap: wrap;
}
.accent-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}
.accent-color-swatch:hover {
    transform: scale(1.2);
    border-color: var(--text-primary);
}
.accent-color-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary);
}

/* ── Recently Added Badge ── */
.recently-added-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--success);
    color: #fff;
    border-radius: 4px;
    z-index: 4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Poster Wall View ── */
.movie-poster-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}
.poster-wall-item {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}
.poster-wall-item:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.poster-wall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.poster-wall-item .poster-wall-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.75rem;
}
.poster-wall-item:hover .poster-wall-overlay {
    opacity: 1;
}
.poster-wall-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.poster-wall-year {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
    .movie-poster-wall {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.3rem;
    }
}

/* ── Responsive Enhancements ── */
@media (max-width: 768px) {
    .header-controls {
        gap: 0.5rem;
    }
    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }
    .toast {
        max-width: 100%;
    }
    .scroll-to-top-btn {
        bottom: 1rem;
        left: 1rem;
        width: 40px;
        height: 40px;
    }
    .search-suggestions {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
    }
}
@media (max-width: 480px) {
    .welcome-info-grid {
        grid-template-columns: 1fr;
    }
    .btn-select {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }
}

/* ── Shelf Section Enhancements ── */
.shelf-section {
    margin-bottom: 2rem;
}
.shelf-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.shelf-title svg {
    color: var(--text-muted);
    transition: transform 0.2s;
}
.shelf-title:hover svg {
    transform: translateX(4px);
}
.shelf-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.shelf-row::-webkit-scrollbar {
    display: none;
}
.shelf-card {
    flex-shrink: 0;
    width: 160px;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}
.shelf-card:hover {
    transform: scale(1.05);
}
.shelf-poster {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.shelf-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.shelf-card:hover .shelf-overlay {
    opacity: 1;
}
.shelf-rating {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.7);
    color: var(--star-color);
    border-radius: 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
}
.shelf-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}
.shelf-info {
    padding: 0.5rem 0.25rem;
}
.shelf-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.shelf-card-year {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.shelf-no-poster {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    color: var(--text-muted);
}

/* ============================================================================
   V2.1 ADDITIONAL STYLING - More Polish & Details
   ============================================================================ */

/* ── Skip to Content Link (Accessibility) ── */
.skip-to-content {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.3s ease;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.skip-to-content:focus {
    top: 0;
}

/* ── Stats Page Visual Enhancements ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.stats-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s;
}
.stats-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.stats-card:hover::before {
    opacity: 1;
}
.stats-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tag-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--accent);
}
.stats-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stats-card-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.stats-card-sublabel {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.stats-bar-track {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.75rem;
}
.stats-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--gradient);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-genre-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.stats-genre-tag {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    font-weight: 500;
}

/* ── Undo Toast Styling ── */
.toast-undo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
    padding: 0.3rem 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: inherit;
}
.toast-undo-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── Playlist Auto-Advance Toggle ── */
.playlist-settings {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.playlist-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    user-select: none;
}
.playlist-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
.playlist-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.playlist-toggle input[type="checkbox"]:checked {
    background: var(--accent);
}
.playlist-toggle input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}

/* ── Keyboard Shortcut Overlay in Player ── */
.player-shortcut-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.player-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 2rem;
    max-width: 500px;
}
.player-shortcut-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ccc;
    font-size: 0.85rem;
}
.player-shortcut-key {
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #fff;
    min-width: 50px;
    text-align: center;
}

/* ── Tab Transition Animations ── */
.tab-content {
    animation: tabFadeIn 0.25s ease;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Smooth Detail Page Transition ── */
.detail-page {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.detail-page:not(.active) {
    transform: scale(0.98);
}
.detail-page.active {
    transform: scale(1);
}

/* ── Better Poster Placeholder Animation ── */
.no-poster-placeholder {
    animation: placeholderPulse 3s ease-in-out infinite;
}
@keyframes placeholderPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
}

/* ── Rating Stars on Detail Page ── */
.rating-stars {
    display: flex;
    gap: 2px;
}
.rating-star {
    color: var(--star-color);
    font-size: 1.1rem;
    transition: transform 0.2s;
}
.rating-star:hover {
    transform: scale(1.2);
}
.rating-star.empty {
    color: var(--border);
}

/* ── Episode Card Progress ── */
.episode-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.5px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.episode-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 1.5px;
    transition: width 0.3s ease;
}
[data-theme="light"] .episode-progress-bar {
    background: rgba(0, 0, 0, 0.08);
}

/* ── Recently Watched Indicator ── */
.recently-watched-indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.4rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 4px;
    z-index: 5;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
}
.recently-watched-indicator svg {
    width: 10px;
    height: 10px;
    color: var(--accent);
}

/* ── Welcome Stats Enhancement ── */
.welcome-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.welcome-stat-item svg {
    color: var(--accent);
    flex-shrink: 0;
}
.welcome-stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Recent Folder Item Enhancement ── */
.recent-folder-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}
.recent-folder-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    transform: translateX(4px);
}
.recent-folder-item svg {
    color: var(--accent);
    flex-shrink: 0;
}
.recent-folder-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-folder-arrow {
    color: var(--text-muted);
    transition: transform 0.2s, color 0.2s;
}
.recent-folder-item:hover .recent-folder-arrow {
    color: var(--accent);
    transform: translateX(4px);
}

/* ── Welcome Shortcuts Hint Enhancement ── */
.welcome-shortcuts-hint {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}
.kbd-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}
.kbd-hint:hover {
    color: var(--text-primary);
}
.kbd-hint kbd {
    padding: 0.15rem 0.45rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ── Mini Player Enhancement ── */
.mini-player {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    z-index: 500;
    backdrop-filter: blur(20px);
    animation: miniPlayerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes miniPlayerIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.mini-player video {
    width: 100%;
    max-height: 200px;
    display: block;
}
.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
}
.mini-player-title {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-player-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.mini-player-btn:hover {
    color: var(--text-primary);
}
@media (max-width: 480px) {
    .mini-player {
        width: calc(100vw - 2rem);
        right: 1rem;
        bottom: 1rem;
    }
}

/* ── Duplicate Finder Enhancement ── */
.duplicate-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.3s;
}
.duplicate-group:hover {
    border-color: var(--accent);
}
.duplicate-group-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.duplicate-group-count {
    padding: 0.15rem 0.5rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}
.duplicate-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.15s;
}
.duplicate-item:hover {
    background: var(--bg-hover);
}

/* ── Genre Tag Pills for Filter ── */
.genre-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.genre-tag {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    font-weight: 500;
}
.genre-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.genre-tag.active {
    background: var(--tag-bg);
    border-color: var(--accent);
    color: var(--tag-color);
    font-weight: 600;
}
.genre-tag-all {
    background: transparent;
    border-style: dashed;
}

/* ── Improved Export Dropdown ── */
.export-dropdown {
    min-width: 200px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
}
.export-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.export-option:hover {
    background: var(--bg-hover);
}
.export-option:first-child {
    border-radius: 12px 12px 0 0;
}
.export-option:last-child {
    border-radius: 0 0 12px 12px;
}
.export-option svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Page Size Selector Enhancement ── */
.page-size-selector select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.35rem 1.75rem 0.35rem 0.75rem;
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: border-color 0.2s;
}
.page-size-selector select:focus {
    outline: none;
    border-color: var(--accent);
}
.page-size-selector label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ── Alphabetical Section Dividers ── */
.alpha-divider {
    position: sticky;
    top: 60px;
    z-index: 5;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
[data-theme="light"] .alpha-divider {
    background: var(--bg-primary);
}

/* ============================================================================
   GENRE CLOUD (Stats Tab)
   ============================================================================ */

.genre-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.genre-cloud-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    user-select: none;
}

.genre-cloud-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    filter: brightness(1.15);
    z-index: 1;
}

.genre-cloud-item:active {
    transform: scale(0.97);
}

.genre-cloud-count {
    font-size: 0.65em;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 0.1em 0.45em;
    font-weight: 700;
    line-height: 1.4;
}

/* ============================================================================
   MORE LIKE THIS (Detail Page)
   ============================================================================ */

.more-like-this-section {
    margin-top: 1rem;
}

.more-like-this-section .detail-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.more-like-this-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.more-like-this-grid::-webkit-scrollbar {
    height: 6px;
}

.more-like-this-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.more-like-this-grid::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.more-like-this-grid::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.more-like-this-card {
    flex-shrink: 0;
    width: 140px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    scroll-snap-align: start;
}

[data-theme="light"] .more-like-this-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.more-like-this-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .more-like-this-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.more-like-this-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--bg-secondary);
}

.more-like-this-poster .poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.3s;
}

.more-like-this-poster .poster-img.loaded {
    display: block;
    opacity: 1;
}

.more-like-this-card:hover .more-like-this-poster .poster-img.loaded {
    transform: scale(1.05);
}

.more-like-this-poster .no-poster-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: 0.5rem;
    text-align: center;
}

.more-like-this-poster .no-poster-placeholder svg {
    width: 36px;
    height: 36px;
    margin-bottom: 0.25rem;
    opacity: 0.4;
}

.more-like-this-rating {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.75);
    color: var(--star-color);
    border-radius: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    backdrop-filter: blur(4px);
}

.more-like-this-info {
    padding: 0.6rem 0.65rem;
}

.more-like-this-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
}

.more-like-this-year {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

[data-theme="light"] .more-like-this-year {
    color: #515154;
}

/* Mobile responsive for genre cloud and more like this */
@media (max-width: 768px) {
    .genre-cloud {
        gap: 0.4rem;
    }

    .genre-cloud-item {
        padding: 0.3rem 0.7rem;
    }

    .more-like-this-card {
        width: 115px;
    }

    .more-like-this-title {
        font-size: 0.75rem;
    }
}

/* ============================================================================
   MAJOR CSS STYLING IMPROVEMENTS — Task 4
   Appended styles for: Welcome, Cards, Header, Player, Detail, Stats,
   Toast, Context Menu, Responsive, Micro-animations
   ============================================================================ */

/* ── 1. WELCOME SCREEN ENHANCEMENT ── */

/* Animated gradient border on "Select Media Folder" button */
.btn-select.primary-glow {
    position: relative;
    z-index: 1;
    background: var(--accent);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.btn-select.primary-glow::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 52px;
    background: linear-gradient(
        var(--gradient-border-angle, 0deg),
        var(--accent),
        #ff6b6b,
        var(--accent),
        #ff6b6b,
        var(--accent)
    );
    z-index: -2;
    animation: gradientBorder 4s linear infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-select.primary-glow:hover::before {
    opacity: 1;
}

.btn-select.primary-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: var(--accent);
    z-index: -1;
}

@keyframes gradientBorder {
    0%   { --gradient-border-angle: 0deg; }
    100% { --gradient-border-angle: 360deg; }
}

/* Fallback for browsers without @property */
@supports not (background: paint(something)) {
    .btn-select.primary-glow::before {
        background: conic-gradient(
            from var(--gradient-border-angle, 0deg),
            var(--accent),
            #ff6b6b,
            var(--accent)
        );
        animation: gradientBorderFallback 4s linear infinite;
    }
}

@keyframes gradientBorderFallback {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Floating particles animation for #welcomeParticles */
.welcome-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.welcome-particles .particle {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    animation: particleDrift 8s ease-in-out infinite;
}

@keyframes particleDrift {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
    }
    15% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.2;
        transform: translateY(-80px) translateX(30px) scale(1);
    }
    85% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(-160px) translateX(-20px) scale(0.5);
    }
}

/* Welcome info cards with hover lift + glow */
.welcome-info-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

.welcome-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px var(--accent-glow),
                0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Recent folders section slide-in animation */
.recent-folders-section {
    animation: recentFoldersSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes recentFoldersSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Drop zone dashed border animation on hover */
.welcome-drop-zone {
    border: 2px dashed var(--border);
    transition: border-color 0.3s ease, background 0.3s ease, border-style 0.3s ease;
}

.welcome-drop-zone:hover {
    border-color: var(--accent);
    border-style: dashed;
    background: rgba(229, 9, 20, 0.05);
    animation: dropZoneDash 0.8s linear infinite;
}

@keyframes dropZoneDash {
    to {
        border-dash-offset: 12px;
    }
}

/* SVG-based dash animation workaround */
.welcome-drop-zone:hover {
    background-image: repeating-linear-gradient(
        90deg,
        var(--accent) 0,
        var(--accent) 6px,
        transparent 6px,
        transparent 12px
    );
    background-size: 200% 2px;
    background-position: 0 100%;
    background-repeat: repeat-x;
    animation: dropZoneBorderMove 1s linear infinite;
}

@keyframes dropZoneBorderMove {
    from { background-position: 0 100%; }
    to   { background-position: 24px 100%; }
}


/* ── 2. CARD HOVER EFFECTS ENHANCEMENT ── */

/* Movie card glow on hover with accent color */
.movie-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 20px var(--accent-glow),
                0 0 40px rgba(229, 9, 20, 0.1);
}

[data-theme="light"] .movie-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                0 0 15px var(--accent-glow);
}

/* Smoother poster zoom on hover */
.poster-img.loaded {
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Gradient overlay at bottom of poster images for text readability */
.poster-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 12px 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.movie-card:hover .poster-container::after {
    opacity: 1;
}

[data-theme="light"] .poster-container::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%
    );
}

/* Favorite button scale on hover */
.card-fav-btn:hover {
    transform: scale(1.2);
}

.card-fav-btn {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Watched badge subtle pulse animation */
.watched-badge {
    animation: watchedPulse 2.5s ease-in-out infinite;
}

@keyframes watchedPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* Card entrance stagger animation */
.movie-card.card-new {
    opacity: 0;
    animation: cardStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.movie-card.card-new:nth-child(1)  { animation-delay: 0.02s; }
.movie-card.card-new:nth-child(2)  { animation-delay: 0.04s; }
.movie-card.card-new:nth-child(3)  { animation-delay: 0.06s; }
.movie-card.card-new:nth-child(4)  { animation-delay: 0.08s; }
.movie-card.card-new:nth-child(5)  { animation-delay: 0.10s; }
.movie-card.card-new:nth-child(6)  { animation-delay: 0.12s; }
.movie-card.card-new:nth-child(7)  { animation-delay: 0.14s; }
.movie-card.card-new:nth-child(8)  { animation-delay: 0.16s; }
.movie-card.card-new:nth-child(9)  { animation-delay: 0.18s; }
.movie-card.card-new:nth-child(10) { animation-delay: 0.20s; }
.movie-card.card-new:nth-child(n+11) { animation-delay: 0.22s; }

@keyframes cardStaggerIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ── 3. HEADER ENHANCEMENT ── */

/* Active tab glow / bottom border highlight */
.nav-tab.active {
    position: relative;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* Search box focus styling — clean accent border + glow */
.search-box input:focus {
    border-color: var(--accent);
    border-radius: 50px;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Header subtle bottom glow line */
.header {
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent) 20%,
        var(--accent) 50%,
        var(--accent) 80%,
        transparent 100%
    );
    opacity: 0.4;
    pointer-events: none;
}

/* View toggle buttons smooth icon transitions */
.view-btn svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease;
}

.view-btn:hover svg {
    transform: scale(1.15);
}

.view-btn.active svg {
    transform: scale(1.1);
}


/* ── 4. PLAYER ENHANCEMENT ── */

/* Player modal vignette effect */
.player-modal {
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.97) 60%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* Player controls glass effect with blur */
.player-pro-controls {
    background: rgba(10, 10, 15, 0.65);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.player-controls {
    gap: 0.5rem;
}

.player-header {
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.player-nav {
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

/* Speed control button glow when speed ≠ 1x */
.speed-control-btn {
    transition: all 0.3s ease;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.speed-control-btn:not([data-speed="1"]):not([data-speed="1x"]):not(:empty) {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow),
                inset 0 0 8px rgba(229, 9, 20, 0.1);
}

/* Mini player distinctive border/glow */
.mini-player {
    border: 1px solid rgba(229, 9, 20, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 20px var(--accent-glow);
}

.mini-player:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6),
                0 0 30px var(--accent-glow);
}


/* ── 5. DETAIL PAGE ENHANCEMENT ── */

/* Hero poster reflection/shadow effect */
.detail-hero-poster {
    position: relative;
}

.detail-hero-poster::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 5%;
    right: 5%;
    height: 40%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 100%
    );
    transform: scaleY(-1);
    filter: blur(6px);
    opacity: 0.2;
    pointer-events: none;
    border-radius: 0 0 16px 16px;
}

[data-theme="light"] .detail-hero-poster::after {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 100%
    );
    opacity: 0.15;
}

/* Genre pills staggered entrance animation */
.detail-genre-pill {
    opacity: 0;
    animation: genrePillStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.detail-genre-pill:nth-child(1)  { animation-delay: 0.05s; }
.detail-genre-pill:nth-child(2)  { animation-delay: 0.10s; }
.detail-genre-pill:nth-child(3)  { animation-delay: 0.15s; }
.detail-genre-pill:nth-child(4)  { animation-delay: 0.20s; }
.detail-genre-pill:nth-child(5)  { animation-delay: 0.25s; }
.detail-genre-pill:nth-child(6)  { animation-delay: 0.30s; }
.detail-genre-pill:nth-child(7)  { animation-delay: 0.35s; }
.detail-genre-pill:nth-child(8)  { animation-delay: 0.40s; }
.detail-genre-pill:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes genrePillStagger {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Section titles left accent border */
.detail-section-title {
    border-left: 3px solid var(--accent);
    padding-left: 0.75rem;
    border-bottom: none;
    padding-bottom: 0;
}

/* Cast cards hover lift with shadow */
.detail-cast-card {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    border-radius: 12px;
}

.detail-cast-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .detail-cast-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Episode cards left border accent on hover */
.tvshow-episode-card {
    border-left: 3px solid transparent;
    transition: border-left-color 0.3s ease, background 0.3s ease;
}

.tvshow-episode-card:hover {
    border-left-color: var(--accent);
}


/* ── 6. STATS TAB ENHANCEMENT ── */

/* Stat cards hover lift and glow */
.stat-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

/* Chart bars gradient fills */
.stats-bar-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #ff6b6b 100%
    );
}

.stats-bar-fill.decade-fill {
    background: linear-gradient(
        90deg,
        #6366f1 0%,
        #8b5cf6 50%,
        var(--accent) 100%
    );
}

/* Stats title gradient text effect */
.stats-title {
    background: linear-gradient(135deg, var(--accent), #ff6b6b, var(--accent));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: statsGradientShift 4s ease infinite;
}

@keyframes statsGradientShift {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}


/* ── 7. TOAST NOTIFICATIONS ENHANCEMENT ── */

/* Toast slide in from right with bounce */
.toast {
    animation: toastBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastBounceIn {
    0% {
        transform: translateX(120%);
        opacity: 0;
    }
    60% {
        transform: translateX(-8px);
        opacity: 1;
    }
    80% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Success toast green left border glow */
.toast.success {
    border-left: 3px solid var(--success);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                -4px 0 12px rgba(46, 204, 113, 0.2);
}

/* Error toast red left border glow */
.toast.error,
.toast.danger {
    border-left: 3px solid #e74c3c;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                -4px 0 12px rgba(231, 76, 60, 0.2);
}

/* Toast close button hover effect */
.toast-close-btn,
.toast .toast-close {
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close-btn:hover,
.toast .toast-close:hover {
    transform: scale(1.15) rotate(90deg);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}


/* ── 8. CONTEXT MENU ENHANCEMENT ── */

/* Context menu items hover slide effect */
.context-menu-item {
    transition: padding-left 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.context-menu-item:hover {
    padding-left: 1.4rem;
}

/* Active/selected context menu item accent background */
.context-menu-item.active,
.context-menu-item.selected {
    background: var(--accent);
    color: #fff;
}

.context-menu-item.active:hover,
.context-menu-item.selected:hover {
    padding-left: 1.4rem;
    background: var(--accent);
    filter: brightness(1.1);
}

/* Context menu active indicator dot */
.context-menu-item.active::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    margin-right: 8px;
    flex-shrink: 0;
}


/* ── 9. RESPONSIVE IMPROVEMENTS ── */

/* Better mobile header layout — stacked, collapsible */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .header-left {
        justify-content: center;
        text-align: center;
    }

    .header-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Tab bar scrollable with fade indicators */
    .nav-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs-wrapper::after {
        content: '';
        position: sticky;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(
            to right,
            transparent,
            var(--bg-secondary)
        );
        pointer-events: none;
        flex-shrink: 0;
        display: block;
        z-index: 2;
    }

    .nav-tabs-wrapper::before {
        content: '';
        position: sticky;
        left: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(
            to left,
            transparent,
            var(--bg-secondary)
        );
        pointer-events: none;
        flex-shrink: 0;
        display: block;
        z-index: 2;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .search-box input {
        width: 100%;
    }

    .search-box input:focus {
        width: 100%;
    }

    /* Detail page hero stacks vertically on mobile */
    .detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .detail-hero-poster {
        width: 200px;
    }

    .detail-hero-info {
        align-items: center;
    }

    .detail-hero-actions {
        justify-content: center;
    }

    .detail-genres {
        justify-content: center;
    }

    .detail-hero-rating {
        justify-content: center;
    }

    /* Card grid columns for tablet */
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .movie-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* Card grid — 2 columns on small mobile */
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Stack header controls more tightly */
    .header-controls {
        gap: 0.35rem;
    }

    .view-toggle {
        order: 10;
        width: 100%;
        justify-content: center;
    }

    .search-box {
        width: 100%;
    }

    .detail-hero-title {
        font-size: 1.6rem;
    }

    .detail-hero-poster {
        width: 160px;
    }

    /* Stats cards stack */
    .stats-overview {
        grid-template-columns: 1fr 1fr;
    }

    /* Toast positioning */
    .toast-container {
        right: 1rem;
        left: 1rem;
        bottom: 1rem;
    }

    .toast {
        max-width: 100%;
    }
}


/* ── 10. MICRO-ANIMATIONS ── */

/* Button press effect — scale down on active */
.btn-select:active,
.btn-header:active,
.nav-btn:active,
.view-btn:active,
.detail-play-btn:active,
.detail-secondary-btn:active,
.pro-btn:active,
.player-control-btn:active,
.theme-btn:active,
.nav-tab:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Loading spinner pulse effect */
.spinner {
    animation: spin 0.8s linear infinite, spinnerPulseEnhanced 2s ease-in-out infinite;
}

@keyframes spinnerPulseEnhanced {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-glow);
    }
    50% {
        box-shadow: 0 0 12px 4px var(--accent-glow);
    }
}

.loading-spinner-ring {
    animation: loadingRingPulse 2s ease-in-out infinite;
}

@keyframes loadingRingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.05); }
}

/* Scroll progress bar gradient glow */
.scroll-progress-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #ff6b6b 50%,
        var(--accent) 100%
    );
    background-size: 200% 100%;
    animation: scrollGradientGlow 3s ease infinite;
    box-shadow: 0 0 8px var(--accent-glow);
}

@keyframes scrollGradientGlow {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

[data-theme="light"] .scroll-progress-fill {
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Tab switching subtle fade transition */
.tab-content {
    animation: tabContentFade 0.3s ease;
}

@keyframes tabContentFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ── LIGHT THEME OVERRIDES ── */

[data-theme="light"] .btn-select.primary-glow::before {
    background: linear-gradient(
        var(--gradient-border-angle, 0deg),
        var(--accent),
        #e88a8a,
        var(--accent),
        #e88a8a,
        var(--accent)
    );
}

[data-theme="light"] .btn-select.primary-glow::after {
    background: var(--accent);
}

[data-theme="light"] .movie-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                0 0 15px var(--accent-glow);
}

[data-theme="light"] .nav-tab.active::after {
    box-shadow: 0 0 6px var(--accent-glow);
}

[data-theme="light"] .header::after {
    opacity: 0.25;
}

[data-theme="light"] .player-pro-controls {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .player-header {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .player-nav {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .mini-player {
    border-color: rgba(194, 0, 8, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
                0 0 15px var(--accent-glow);
}

[data-theme="light"] .mini-player:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
                0 0 25px var(--accent-glow);
}

[data-theme="light"] .detail-section-title {
    border-left-color: var(--accent);
}

[data-theme="light"] .tvshow-episode-card:hover {
    border-left-color: var(--accent);
}

[data-theme="light"] .stat-card:hover {
    box-shadow: 0 6px 20px var(--accent-glow);
}

[data-theme="light"] .stats-bar-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #e88a8a 100%
    );
}

[data-theme="light"] .context-menu-item.active,
[data-theme="light"] .context-menu-item.selected {
    background: var(--accent);
    color: #fff;
}

[data-theme="light"] .welcome-info-card:hover {
    box-shadow: 0 6px 20px var(--accent-glow),
                0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .welcome-drop-zone:hover {
    background: rgba(194, 0, 8, 0.04);
}

[data-theme="light"] .toast.success {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
                -3px 0 10px rgba(40, 167, 69, 0.15);
}

[data-theme="light"] .toast.error,
[data-theme="light"] .toast.danger {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
                -3px 0 10px rgba(231, 76, 60, 0.15);
}

[data-theme="light"] .detail-hero-poster::after {
    opacity: 0.1;
}


/* ── OLED THEME OVERRIDES ── */

[data-theme="oled"] .movie-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
                0 0 20px var(--accent-glow),
                0 0 40px rgba(229, 9, 20, 0.15);
}

[data-theme="oled"] .header::after {
    opacity: 0.5;
}

[data-theme="oled"] .mini-player {
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9),
                0 0 25px var(--accent-glow);
}

[data-theme="oled"] .stat-card:hover {
    box-shadow: 0 8px 25px var(--accent-glow);
}

[data-theme="oled"] .welcome-info-card:hover {
    box-shadow: 0 8px 25px var(--accent-glow),
                0 2px 8px rgba(0, 0, 0, 0.5);
}


/* ── ACCESSIBILITY: prefers-reduced-motion ── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn-select.primary-glow::before {
        animation: none;
    }

    .welcome-particles .particle {
        animation: none;
        display: none;
    }

    .watched-badge {
        animation: none;
    }

    .movie-card.card-new {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .detail-genre-pill {
        animation: none;
        opacity: 1;
    }

    .recent-folders-section {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .poster-img.loaded {
        transition: opacity 0.1s ease;
    }

    .movie-card:hover .poster-img.loaded {
        transform: none;
    }

    .toast {
        animation: none;
    }

    .scroll-progress-fill {
        animation: none;
    }

    .spinner {
        animation: spin 1s linear infinite;
    }

    .stats-title {
        animation: none;
        background-size: auto;
    }

    .nav-tab.active::after {
        animation: none;
    }

    .welcome-drop-zone:hover {
        animation: none;
    }
}

/* ============================================================================
   TASK 4: MOBILE MENU + RESPONSIVE STYLING IMPROVEMENTS
   ============================================================================ */

/* ── Custom Properties for Mobile Menu ── */
:root {
    --mobile-menu-width: 280px;
    --mobile-menu-bg: var(--bg-card);
    --mobile-menu-speed: 0.3s;
    --hamburger-size: 24px;
}

/* ── Hamburger Button ── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    z-index: 150;
    transition: background 0.2s, border-color 0.2s;
}
.hamburger-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}
.hamburger-btn.active {
    background: var(--accent);
    border-color: var(--accent);
}
.hamburger-btn.active .hamburger-line {
    background: #fff;
}
.hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s;
}
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Menu Overlay ── */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    transition: opacity var(--mobile-menu-speed) ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mobile-menu-overlay.open {
    display: block;
    opacity: 1;
}

/* ── Mobile Menu Panel ── */
.mobile-menu-panel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: var(--mobile-menu-width);
    max-width: 85vw;
    height: 100vh;
    background: var(--mobile-menu-bg);
    border-left: 1px solid var(--border);
    z-index: 200;
    transform: translateX(100%);
    transition: transform var(--mobile-menu-speed) ease;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
}
.mobile-menu-panel.open {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.mobile-menu-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.mobile-menu-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}
.mobile-menu-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.mobile-menu-body {
    padding: 1rem 1.25rem;
}

.mobile-menu-section {
    margin-bottom: 1.25rem;
}
.mobile-menu-section-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.mobile-theme-options {
    display: flex;
    gap: 0.5rem;
}
.mobile-theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.mobile-theme-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.mobile-theme-btn.active {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--tag-bg);
}
.mobile-theme-btn .theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.mobile-accent-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mobile-accent-picker .accent-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
}
.mobile-accent-picker .accent-color-swatch:hover {
    transform: scale(1.15);
}
.mobile-accent-picker .accent-color-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
}

.mobile-menu-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
    text-align: left;
}
.mobile-menu-action:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}
.mobile-menu-action svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.mobile-menu-action--danger {
    color: var(--accent);
}
.mobile-menu-action--danger svg {
    color: var(--accent);
}
.mobile-menu-action--danger:hover {
    background: rgba(229, 9, 20, 0.1);
    border-color: var(--accent);
}

/* ── Responsive: Show hamburger on mobile, hide desktop controls ── */
@media (max-width: 767px) {
    .hamburger-btn {
        display: flex;
    }

    /* Hide desktop-only header controls on mobile */
    .header-controls .theme-selector,
    .header-controls .btn-header:not(.view-toggle .view-btn),
    .header-controls .export-wrapper,
    .header-controls .page-size-selector,
    .header-controls .pwa-install-btn {
        display: none !important;
    }

    /* Keep tabs, search, and view toggle visible on mobile */
    .header-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-tabs-wrapper {
        width: 100%;
        order: 1;
    }

    .search-box {
        width: 100%;
        order: 2;
    }

    .search-box input {
        width: 100% !important;
    }

    .search-box input:focus {
        width: 100% !important;
    }

    .search-kbd {
        display: none;
    }

    .view-toggle {
        order: 3;
    }

    /* Hamburger sits in header-left area on mobile */
    .header-content {
        flex-wrap: nowrap;
    }

    .header-left {
        flex: 1;
        min-width: 0;
    }
}

/* ── Tablet: Header controls wrap properly ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-tabs-wrapper {
        width: 100%;
    }

    .hamburger-btn {
        display: none;
    }

    .search-box input {
        width: 180px;
    }

    .search-box input:focus {
        width: 240px;
    }
}

/* ── Desktop: Ensure hamburger hidden ── */
@media (min-width: 768px) {
    .hamburger-btn {
        display: none !important;
    }

    .mobile-menu-panel,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ============================================================================
   IMPROVEMENT 2: ENHANCED RESPONSIVE LAYOUT
   ============================================================================ */

/* ── Search box full-width on mobile ── */
@media (max-width: 767px) {
    .search-box {
        width: 100%;
    }

    .search-box input {
        width: 100% !important;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .search-box input:focus {
        width: 100% !important;
    }

    /* Filter bar stacks vertically on mobile */
    .shared-filter-bar .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .shared-filter-bar .filter-bar select {
        width: 100%;
    }

    .shared-filter-bar .filter-bar .filter-panel-toggle {
        width: 100%;
        justify-content: center;
    }

    .shared-filter-bar .filter-bar .skipped-badge {
        justify-content: center;
    }

    .shared-filter-bar .filter-bar .filter-count {
        text-align: center;
        margin-left: 0;
    }

    /* Cards: 2 columns on small mobile */
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Cards: 3 columns on medium mobile (360px+) */
    @media (min-width: 360px) {
        .movie-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Detail page hero stacks vertically on mobile with smaller poster */
    .detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .detail-hero-poster {
        width: 160px;
    }

    .detail-hero-title {
        font-size: 1.6rem;
    }

    .detail-hero-subtitle {
        justify-content: center;
    }

    .detail-hero-rating {
        justify-content: center;
    }

    .detail-hero-actions {
        justify-content: center;
    }

    .detail-genres {
        justify-content: center;
    }

    .detail-play-btn,
    .detail-secondary-btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .detail-cast-avatar {
        width: 100px;
        height: 100px;
        font-size: 2.2rem;
    }

    .detail-cast-card {
        width: 100px;
    }

    .detail-meta-grid {
        grid-template-columns: 1fr;
    }

    .detail-tech {
        grid-template-columns: 1fr;
    }

    /* Compact view on mobile */
    .movie-compact-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
}

/* ── Tablet responsive adjustments ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }

    .detail-hero-poster {
        width: 220px;
    }

    .detail-hero-title {
        font-size: 2.2rem;
    }
}

/* ── Larger mobile: 3 columns ── */
@media (min-width: 480px) and (max-width: 767px) {
    .movie-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

/* ── Tablet+: auto-fill for cards ── */
@media (min-width: 768px) {
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ============================================================================
   IMPROVEMENT 3: POSTER WALL HOVER PREVIEW TOOLTIP
   ============================================================================ */

.poster-wall-item {
    position: relative;
}

.poster-wall-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    max-width: 240px;
    padding: 0.75rem 1rem;
    background: rgba(20, 20, 35, 0.92);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(4px);
    z-index: 50;
}

[data-theme="light"] .poster-wall-tooltip {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.poster-wall-item:hover .poster-wall-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.poster-wall-tooltip-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.poster-wall-tooltip-year {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.poster-wall-tooltip-rating {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--star-color);
    margin-bottom: 0.3rem;
}

.poster-wall-tooltip-rating svg {
    width: 12px;
    height: 12px;
    fill: var(--star-color);
}

.poster-wall-tooltip-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.poster-wall-tooltip-genre {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 4px;
    white-space: nowrap;
}

/* Tooltip arrow */
.poster-wall-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(20, 20, 35, 0.92);
}

[data-theme="light"] .poster-wall-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.92);
}

/* If tooltip would go off top, show below instead */
.poster-wall-item.tooltip-below .poster-wall-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

.poster-wall-item.tooltip-below:hover .poster-wall-tooltip {
    transform: translateX(-50%) translateY(0);
}

.poster-wall-item.tooltip-below .poster-wall-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(20, 20, 35, 0.92);
}

[data-theme="light"] .poster-wall-item.tooltip-below .poster-wall-tooltip::after {
    border-bottom-color: rgba(255, 255, 255, 0.92);
}

/* ============================================================================
   IMPROVEMENT 4: TAB SCROLL INDICATORS
   ============================================================================ */

.nav-tabs-wrapper {
    position: relative;
}

/* Left fade indicator */
.nav-tabs-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, var(--bg-secondary), transparent);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Right fade indicator */
.nav-tabs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, var(--bg-secondary), transparent);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show indicators when scrolled (class added by JS or via scroll state) */
.nav-tabs-wrapper.scroll-left::before {
    opacity: 1;
}

.nav-tabs-wrapper.scroll-right::after {
    opacity: 1;
}

.nav-tabs-wrapper.scroll-both::before,
.nav-tabs-wrapper.scroll-both::after {
    opacity: 1;
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .hamburger-line {
        transition: none;
    }

    .mobile-menu-panel {
        transition: none;
    }

    .mobile-menu-overlay {
        transition: none;
    }

    .poster-wall-tooltip {
        transition: none;
    }

    .nav-tabs-wrapper::before,
    .nav-tabs-wrapper::after {
        transition: none;
    }

    .mobile-menu-action {
        transition: none;
    }

    .mobile-theme-btn {
        transition: none;
    }

    .mobile-accent-picker .accent-color-swatch {
        transition: none;
    }
}

/* ── Mobile-specific header padding ── */
@media (max-width: 767px) {
    .header {
        padding: 0.75rem 1rem;
    }

    .header-content {
        gap: 0.5rem;
    }

    .app-logo {
        width: 32px;
        height: 32px;
    }

    .header-title {
        font-size: 1.1rem;
    }

    .header-stats {
        font-size: 0.75rem;
    }

    .main-content {
        padding: 0.75rem;
    }

    /* View toggle compact on mobile */
    .view-toggle {
        border-radius: 6px;
    }

    .view-btn {
        padding: 0.4rem 0.5rem;
    }

    .view-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Nav tabs more compact on mobile */
    .nav-tab {
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
    }

    .nav-tab svg {
        width: 12px;
        height: 12px;
    }

    /* Movie cards compact on mobile */
    .card-info {
        padding: 0.5rem;
    }

    .movie-title {
        font-size: 0.8rem;
    }

    .movie-year {
        font-size: 0.7rem;
    }

    .movie-quality {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }

    .rating-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.3rem;
    }

    /* Poster wall dense on mobile */
    .movie-poster-wall {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    /* Detail page content padding */
    .detail-page-content {
        padding: 1rem;
    }

    .detail-section {
        padding: 0.85rem;
        border-radius: 10px;
    }

    .detail-section-title {
        font-size: 1rem;
    }

    .detail-plot {
        font-size: 0.95rem;
    }

    /* Back button compact */
    .detail-back-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    /* Toast adjustments for mobile */
    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .toast {
        max-width: 100%;
    }

    /* Player adjustments */
    .player-modal {
        padding: 0.5rem;
    }

    .player-header {
        margin-bottom: 0.5rem;
    }

    .player-nav {
        margin-top: 0.5rem;
    }

    .nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* ── Extra small mobile (<360px) ── */
@media (max-width: 359px) {
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .movie-poster-wall {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px !important;
    }

    .poster-wall-tooltip {
        display: none;
    }

    .detail-hero-title {
        font-size: 1.3rem;
    }
}

/* Multi-select / Batch Operations */
.select-mode .movie-card { cursor: pointer; }
.card-checkbox { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.5); z-index: 5; display: none; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(4px); }
.select-mode .card-checkbox { display: flex; }
.card-checkbox svg { width: 16px; height: 16px; opacity: 0; transition: opacity 0.2s; }
.movie-card.selected .card-checkbox { background: var(--accent); border-color: var(--accent); }
.movie-card.selected .card-checkbox svg { opacity: 1; color: #fff; }
.movie-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.batch-action-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: var(--bg-card); border-top: 1px solid var(--border); backdrop-filter: blur(16px); padding: 0.75rem 2rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); }
.batch-count { font-size: 0.9rem; font-weight: 600; color: var(--accent); margin-right: auto; }
.batch-btn { padding: 0.5rem 1rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font-family: inherit; transition: 0.2s; display: flex; align-items: center; gap: 0.4rem; }
.batch-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.batch-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.batch-btn.primary:hover { opacity: 0.9; }
[data-theme="light"] .batch-action-bar { box-shadow: 0 -4px 20px rgba(0,0,0,0.08); }
.select-mode-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 500; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); cursor: pointer; transition: all 0.25s ease; font-family: inherit; }
.select-mode-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
.select-mode-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================================
   DRAG TO PLAYLIST - Nav tab drop zone & card drag styles
   ============================================================================ */
.nav-tab.drag-over { border-color: var(--accent) !important; background: var(--accent) !important; color: #fff !important; box-shadow: 0 0 16px var(--accent-glow); transform: scale(1.05); transition: all 0.2s; }
.movie-card[draggable="true"] { cursor: grab; }
.movie-card[draggable="true"]:active { cursor: grabbing; }

/* ============================================================================
   STYLING IMPROVEMENTS — Task 4+5-c: Enhanced Visual Polish
   ============================================================================ */

/* ── 1. Welcome Screen Animated Background Particles ── */
#welcomeParticles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
#welcomeParticles::before,
#welcomeParticles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    animation: welcomeParticleFloat 8s ease-in-out infinite;
}
#welcomeParticles::before {
    width: 6px;
    height: 6px;
    background: var(--accent);
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    box-shadow:
        12vw 8vh 0 2px var(--accent),
        35vw -5vh 0 1px var(--accent),
        55vw 15vh 0 3px var(--accent),
        70vw -10vh 0 1px var(--accent),
        85vw 5vh 0 2px var(--accent),
        25vw 25vh 0 1px var(--accent),
        45vw -15vh 0 2px var(--accent),
        60vw 30vh 0 1px var(--accent),
        80vw -20vh 0 3px var(--accent),
        10vw 35vh 0 2px var(--accent);
}
#welcomeParticles::after {
    width: 4px;
    height: 4px;
    background: var(--tag-color);
    top: 60%;
    left: 25%;
    animation-delay: -4s;
    opacity: 0.1;
    box-shadow:
        20vw -10vh 0 2px var(--tag-color),
        40vw 5vh 0 1px var(--tag-color),
        65vw -8vh 0 3px var(--tag-color),
        75vw 12vh 0 1px var(--tag-color),
        90vw -15vh 0 2px var(--tag-color),
        5vw 20vh 0 1px var(--tag-color),
        30vw -25vh 0 2px var(--tag-color),
        50vw 18vh 0 1px var(--tag-color),
        85vw -5vh 0 3px var(--tag-color),
        15vw 30vh 0 2px var(--tag-color);
}
@keyframes welcomeParticleFloat {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); }
    25% { transform: translateY(-30px) translateX(15px) scale(1.1); }
    50% { transform: translateY(-15px) translateX(-10px) scale(0.95); }
    75% { transform: translateY(-40px) translateX(5px) scale(1.05); }
}
[data-theme="light"] #welcomeParticles::before,
[data-theme="light"] #welcomeParticles::after {
    opacity: 0.08;
}

/* ── 2. Card Shimmer Effect on Hover ── */
.movie-card {
    overflow: hidden;
}
.movie-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.03) 40%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 80%
    );
    z-index: 5;
    pointer-events: none;
    transition: none;
}
.movie-card:hover::before {
    animation: cardShimmer 0.8s ease forwards;
}
@keyframes cardShimmer {
    0% { left: -100%; }
    100% { left: 150%; }
}
[data-theme="light"] .movie-card::before {
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.15) 60%,
        transparent 80%
    );
}
.collection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.03) 40%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 80%
    );
    z-index: 5;
    pointer-events: none;
    transition: none;
}
.collection-card:hover::before {
    animation: cardShimmer 0.8s ease forwards;
}
[data-theme="light"] .collection-card::before {
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.15) 60%,
        transparent 80%
    );
}

/* ── 3. Detail Page Section Dividers ── */
.detail-section {
    position: relative;
}
.detail-section::after {
    content: '';
    display: block;
    height: 2px;
    margin-top: 1.25rem;
    border-radius: 1px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--accent-glow) 30%,
        transparent 100%
    );
    opacity: 0.3;
}
[data-theme="light"] .detail-section::after {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        rgba(194, 0, 8, 0.08) 30%,
        transparent 100%
    );
    opacity: 0.5;
}

/* ── 4. Playlist Tab Enhanced Items ── */
.playlist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    position: relative;
    cursor: grab;
}
.playlist-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.playlist-item:active {
    cursor: grabbing;
    transform: translateX(4px) scale(1.01);
}
.playlist-item .drag-handle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.3;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.playlist-item:hover .drag-handle {
    opacity: 0.7;
    color: var(--accent);
}
.playlist-item .drag-handle::before,
.playlist-item .drag-handle::after {
    content: '';
    display: block;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.playlist-item .playback-order {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s;
}
.playlist-item:hover .playback-order {
    background: var(--tag-bg);
    color: var(--accent);
}
[data-theme="light"] .playlist-item .playback-order {
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .playlist-item:hover .playback-order {
    background: var(--tag-bg);
}

/* ── 5. Settings/Preferences Panel Styling ── */
.settings-panel,
.prefs-panel,
.modal-container.form-modal {
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .settings-panel,
[data-theme="light"] .prefs-panel,
[data-theme="light"] .modal-container.form-modal {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.settings-panel label,
.prefs-panel label,
.form-modal label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 500;
}
.settings-panel input[type="text"],
.settings-panel input[type="number"],
.settings-panel select,
.prefs-panel input[type="text"],
.prefs-panel select,
.form-modal input[type="text"],
.form-modal select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-panel input:focus,
.settings-panel select:focus,
.prefs-panel input:focus,
.prefs-panel select:focus,
.form-modal input:focus,
.form-modal select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-panel input[type="range"],
.prefs-panel input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}
.settings-panel .toggle-switch,
.prefs-panel .toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.settings-panel .toggle-switch.active,
.prefs-panel .toggle-switch.active {
    background: var(--accent);
}
.settings-panel .toggle-switch::after,
.prefs-panel .toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.settings-panel .toggle-switch.active::after,
.prefs-panel .toggle-switch.active::after {
    transform: translateX(20px);
}

/* ── 6. Alphabetical Section Dividers in Poster Wall (Enhanced) ── */
.alpha-divider {
    position: sticky;
    top: 60px;
    z-index: 5;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent);
    background: linear-gradient(90deg, var(--bg-primary), transparent);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.alpha-divider::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent-glow);
}
.alpha-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
[data-theme="light"] .alpha-divider {
    background: linear-gradient(90deg, var(--bg-primary), transparent);
}

/* ── 7. Empty State Illustrations (Enhanced) ── */
.empty-state {
    position: relative;
    padding: 5rem 2rem;
}
.empty-state svg {
    animation: emptyStateFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}
.empty-state p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    max-width: 350px;
}
@keyframes emptyStateFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}
.empty-state::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--accent-glow);
    filter: blur(40px);
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.3;
}
[data-theme="light"] .empty-state::before {
    opacity: 0.15;
}

/* ── 8. Loading Skeleton Polish ── */
.skeleton-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[data-theme="light"] .skeleton-card::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.03) 25%,
        rgba(0, 0, 0, 0.06) 50%,
        rgba(0, 0, 0, 0.03) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
}
.skeleton-poster {
    aspect-ratio: 2/3;
    background: var(--bg-secondary);
}
.skeleton-text {
    height: 12px;
    margin: 0.5rem 0.75rem;
    border-radius: 4px;
    background: var(--bg-secondary);
}
.skeleton-text.short {
    width: 60%;
}
.skeleton-text.tiny {
    width: 40%;
    height: 10px;
}

/* ── 9. Scrollbar Customization ── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-secondary);
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
    border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}
.main-content::-webkit-scrollbar-thumb {
    background: var(--border);
}
.detail-page-scroll::-webkit-scrollbar {
    width: 6px;
}
.detail-page-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
[data-theme="light"] .detail-page-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

/* ── 10. Button Ripple Effect ── */
.btn-select,
.detail-play-btn,
.detail-secondary-btn,
.detail-back-btn,
.nav-btn,
.pro-btn,
.btn-header,
.btn-close-player,
.modal-close,
.btn-add-folder,
.folder-item-remove,
.back-to-collections-btn,
.view-btn {
    position: relative;
    overflow: hidden;
}
.btn-select::after,
.detail-play-btn::after,
.detail-secondary-btn::after,
.detail-back-btn::after,
.nav-btn::after,
.pro-btn::after,
.btn-header::after,
.btn-close-player::after,
.modal-close::after,
.btn-add-folder::after,
.folder-item-remove::after,
.back-to-collections-btn::after,
.view-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.btn-select:active::after,
.detail-play-btn:active::after,
.detail-secondary-btn:active::after,
.detail-back-btn:active::after,
.nav-btn:active::after,
.pro-btn:active::after,
.btn-header:active::after,
.btn-close-player:active::after,
.modal-close:active::after,
.btn-add-folder:active::after,
.folder-item-remove:active::after,
.back-to-collections-btn:active::after,
.view-btn:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0s, height 0s, opacity 0.4s ease 0.1s;
}
[data-theme="light"] .btn-select::after,
[data-theme="light"] .detail-play-btn::after,
[data-theme="light"] .detail-secondary-btn::after,
[data-theme="light"] .detail-back-btn::after,
[data-theme="light"] .nav-btn::after,
[data-theme="light"] .btn-header::after,
[data-theme="light"] .btn-add-folder::after,
[data-theme="light"] .back-to-collections-btn::after {
    background: rgba(0, 0, 0, 0.08);
}

/* ── Search Suggestion Reason Badge ── */
.search-suggestion-reason {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
[data-theme="light"] .search-suggestion-reason {
    background: var(--tag-bg);
    color: var(--accent);
}

/* ── Reduced Motion: Disable all animations ── */
@media (prefers-reduced-motion: reduce) {
    #welcomeParticles::before,
    #welcomeParticles::after {
        animation: none !important;
    }
    .movie-card::before,
    .collection-card::before {
        animation: none !important;
        display: none !important;
    }
    .empty-state svg {
        animation: none !important;
    }
    .skeleton-card::after {
        animation: none !important;
    }
    .btn-select::after,
    .detail-play-btn::after,
    .detail-secondary-btn::after,
    .detail-back-btn::after,
    .nav-btn::after,
    .pro-btn::after,
    .btn-header::after,
    .btn-close-player::after,
    .modal-close::after,
    .btn-add-folder::after,
    .folder-item-remove::after,
    .back-to-collections-btn::after,
    .view-btn::after {
        display: none !important;
    }
    .playlist-item:hover {
        transform: none !important;
    }
    .movie-card:hover {
        transform: none !important;
    }
    .collection-card:hover {
        transform: none !important;
    }
    .welcome-icon {
        animation: none !important;
    }
    .alpha-divider::before {
        box-shadow: none !important;
    }
    .empty-state::before {
        display: none !important;
    }
}

/* ============================================================================
   V3 ENHANCED VISUAL POLISH — Card shimmer, dividers, playlist, alpha dividers,
   skeleton shimmer, scrollbar, ripple, empty states, focus-visible, reduced-motion
   ============================================================================ */

/* ── 1. Card shimmer effect on hover ── */
.movie-card {
    --shimmer-color: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.movie-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--shimmer-color) 50%,
        transparent 100%
    );
    z-index: 5;
    pointer-events: none;
    transition: none;
}
.movie-card:hover::before {
    animation: cardShimmer 0.7s ease-out forwards;
}
@keyframes cardShimmer {
    0% { left: -100%; }
    100% { left: 150%; }
}
[data-theme="light"] .movie-card {
    --shimmer-color: rgba(255, 255, 255, 0.35);
}

/* ── 2. Detail page section decorative dividers ── */
.detail-section-title {
    position: relative;
    padding-bottom: 0.75rem;
}
.detail-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 1px;
}
[data-theme="light"] .detail-section-title::after {
    background: linear-gradient(90deg, var(--accent), rgba(0, 0, 0, 0.08));
}

/* ── 3. Playlist items enhanced ── */
.playlist-item {
    position: relative;
    padding-left: 2.75rem;
}
.playlist-item::before {
    content: '⠿';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.4;
    cursor: grab;
    transition: opacity 0.2s;
}
.playlist-item:hover::before {
    opacity: 0.8;
    color: var(--accent);
}
.playlist-item-order {
    position: absolute;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 1.2rem;
    text-align: center;
}
[data-theme="light"] .playlist-item-order {
    color: #8e8e93;
}

/* ── 4. Alphabetical dividers in poster wall view ── */
.alpha-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin: 1rem 0 0.5rem;
    grid-column: 1 / -1;
}
.alpha-divider-letter {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    min-width: 2rem;
    text-align: center;
    text-shadow: 0 0 20px var(--accent-glow);
}
.alpha-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.alpha-divider-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
[data-theme="light"] .alpha-divider-letter {
    text-shadow: none;
}
[data-theme="light"] .alpha-divider-line {
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ── 5. Better loading skeleton shimmer ── */
.skeleton-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 80%,
        transparent 100%
    );
    animation: skeletonShimmer 1.8s ease-in-out infinite;
}
@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
[data-theme="light"] .skeleton-card::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.03) 20%,
        rgba(0, 0, 0, 0.06) 50%,
        rgba(0, 0, 0, 0.03) 80%,
        transparent 100%
    );
}
.skeleton-poster {
    aspect-ratio: 2 / 3;
    background: var(--bg-secondary);
}
.skeleton-text {
    height: 0.8rem;
    margin: 0.5rem 0.75rem;
    border-radius: 4px;
    background: var(--bg-secondary);
}
.skeleton-text-short {
    width: 40%;
}
.skeleton-text-medium {
    width: 70%;
}

/* ── 6. Custom scrollbar for the whole app ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*:hover {
    scrollbar-color: var(--accent) transparent;
}

/* ── 7. Button ripple/flash effect on click ── */
.btn-select,
.btn-header,
.nav-btn,
.detail-play-btn,
.detail-secondary-btn,
.detail-back-btn,
.pro-btn,
.view-btn,
.playlist-item-play,
.card-fav-btn {
    position: relative;
    overflow: hidden;
}
.btn-select::after,
.btn-header::after,
.nav-btn::after,
.detail-play-btn::after,
.detail-secondary-btn::after,
.detail-back-btn::after,
.pro-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.btn-select:active::after,
.btn-header:active::after,
.nav-btn:active::after,
.detail-play-btn:active::after,
.detail-secondary-btn:active::after,
.detail-back-btn:active::after,
.pro-btn:active::after {
    animation: btnRipple 0.4s ease-out;
}
@keyframes btnRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}
[data-theme="light"] .btn-select::after,
[data-theme="light"] .btn-header::after,
[data-theme="light"] .nav-btn::after,
[data-theme="light"] .detail-play-btn::after,
[data-theme="light"] .detail-secondary-btn::after,
[data-theme="light"] .detail-back-btn::after,
[data-theme="light"] .pro-btn::after {
    background: rgba(0, 0, 0, 0.08);
}

/* ── 8. Enhanced empty states with floating animation ── */
.empty-state svg {
    animation: emptyFloat 3s ease-in-out infinite;
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.empty-state h3 {
    position: relative;
}
.empty-state h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    margin: 0.5rem auto 0;
}

/* ── 9. Focus-visible outlines for accessibility ── */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn-select:focus-visible,
.btn-header:focus-visible,
.nav-btn:focus-visible,
.view-btn:focus-visible,
.nav-tab:focus-visible {
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.movie-card:focus-visible,
.collection-card:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── 10. Light theme overrides for new styles ── */
[data-theme="light"] .playlist-item::before {
    color: #8e8e93;
}
[data-theme="light"] .playlist-item:hover::before {
    color: var(--accent);
}
[data-theme="light"] .alpha-divider-letter {
    color: var(--accent);
}
[data-theme="light"] .empty-state h3::after {
    background: var(--accent);
}
[data-theme="light"] .skeleton-card {
    background: var(--bg-card);
}
[data-theme="light"] .skeleton-poster,
[data-theme="light"] .skeleton-text {
    background: #e5e5ea;
}

/* ── 11. Reduced motion — disable all animations ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .movie-card::before {
        display: none;
    }
    .skeleton-card::after {
        display: none;
    }
    .empty-state svg {
        animation: none;
    }
    .welcome-icon {
        animation: none;
    }
}

/* ============================================================================
   TASK 3-a: EXTENSIVE NEW CSS STYLING ENHANCEMENTS
   ============================================================================ */

/* ── 1. 3D Card Tilt Effect on Hover ── */
.movie-card {
    transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s ease;
}
.movie-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 15px var(--accent-glow);
}
.shelf-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 15px var(--accent-glow);
}
.shelf-card {
    transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s ease;
}

/* ── 2. Animated Tab Indicator ── */
.nav-tabs {
    position: relative;
}
.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient);
    border-radius: 1px;
    animation: tabSlideIn 0.3s ease;
}
@keyframes tabSlideIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ── 3. Enhanced Search Box Focus Animation ── */
.search-box input:focus {
    border-color: var(--accent);
    width: 280px;
    box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow);
    animation: searchPulse 2s ease-in-out infinite;
}
@keyframes searchPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-glow); }
    50% { box-shadow: 0 0 0 5px var(--accent-glow), 0 0 20px var(--accent-glow); }
}

/* ── 4. Shelf Row Gradient Overlay and Scroll Arrows ── */
.shelf-row {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.shelf-section {
    position: relative;
}
.shelf-section::before,
.shelf-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}
.shelf-section::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary), transparent);
}
.shelf-section::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary), transparent);
}

/* ── 5. Rating Star Display on Cards ── */
.card-rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}
.card-rating-stars .star-filled {
    color: var(--star-color);
}
.card-rating-stars .star-empty {
    color: var(--text-muted);
    opacity: 0.3;
}

/* ── 6. Tab Badge Styling ── */
.nav-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    margin-left: 4px;
    line-height: 1;
}
.nav-tab.active .tab-badge {
    animation: badgePop 0.3s ease;
}
@keyframes badgePop {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ── 7. Decade Filter Pill Styling ── */
.decade-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0 2rem;
}
.decade-pill {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.decade-pill:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.decade-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 10px var(--accent-glow);
}

/* ── 8. Watched Filter Button Styling ── */
.watched-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.watched-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.watched-filter-btn.active {
    background: var(--tag-bg);
    color: var(--accent);
    border-color: var(--accent);
}
.watched-filter-btn svg {
    width: 14px;
    height: 14px;
}

/* ── 9. Random Pick Button Styling ── */
.random-pick-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
}
.random-pick-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 15px var(--accent-glow);
    transform: translateY(-1px);
}
.random-pick-btn:active {
    transform: translateY(0) scale(0.98);
}
.random-pick-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
.random-pick-btn:hover svg {
    transform: rotate(180deg);
}

/* ── 10. Lightbox Overlay Styling ── */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: zoom-out;
    backdrop-filter: blur(10px);
}
.lightbox-overlay.active {
    opacity: 1;
}
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: lightboxZoom 0.3s ease;
}
@keyframes lightboxZoom {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.lightbox-title {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.lightbox-close:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

/* ── 11. Enhanced Detail Page Hero ── */
.detail-hero {
    position: relative;
    overflow: hidden;
}

/* ── 12. Improved Context Menu with Icons ── */
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9rem;
}
.context-menu-item:hover {
    background: var(--accent);
    color: #fff;
    transform: translateX(4px);
}
.context-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}
.context-menu-item:hover svg {
    opacity: 1;
}

/* ── 13. Poster Hover Info Overlay ── */
.poster-container:hover .card-overlay {
    opacity: 1;
    transform: scale(1);
}
.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.25s ease;
    border-radius: 8px 8px 0 0;
}
.card-overlay svg {
    width: 48px;
    height: 48px;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
    transition: transform 0.2s ease;
}
.poster-container:hover .card-overlay svg {
    transform: scale(1.1);
}

/* ── 14. Mobile Responsive Improvements ── */
@media (max-width: 768px) {
    .header-controls {
        display: none;
    }
    .hamburger-btn {
        display: flex !important;
    }
    .decade-filter-pills {
        padding: 0 1rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .decade-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    }
    .detail-hero {
        flex-direction: column !important;
    }
    .detail-hero-poster {
        width: 200px !important;
        margin: 0 auto;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .shelf-card {
        min-width: 120px !important;
    }
    .nav-tabs {
        gap: 2px !important;
    }
    .nav-tab {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }
}
@media (max-width: 480px) {
    .main-content {
        padding: 1rem !important;
    }
    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }
    .filter-bar {
        gap: 4px !important;
    }
}

/* ── 15. Smooth Tab Transitions ── */
.tab-content {
    animation: tabFadeIn 0.25s ease;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 16. Gradient Progress Bar Enhancement ── */
.watch-progress-fill {
    background: linear-gradient(90deg, var(--accent), #ff6b6b, var(--accent));
    background-size: 200% 100%;
    animation: progressShimmer 3s linear infinite;
}
@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 17. Enhanced Rating Badge on Cards ── */
.rating-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    color: var(--star-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
}

/* ── 18. Shared Filter Bar Enhancement ── */
.shared-filter-bar {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

/* ── 19. OLED Theme Additions ── */
[data-theme="oled"] .shelf-section::before {
    background: linear-gradient(to right, #000000, transparent);
}
[data-theme="oled"] .shelf-section::after {
    background: linear-gradient(to left, #000000, transparent);
}
[data-theme="oled"] .shared-filter-bar {
    background: #0a0a0a;
    border-color: #1a1a1a;
}
[data-theme="oled"] .decade-pill,
[data-theme="oled"] .watched-filter-btn {
    background: #0a0a0a;
    border-color: #1a1a1a;
}

/* ── 20. Light Theme Overrides for New Elements ── */
[data-theme="light"] .shared-filter-bar {
    background: #fff;
    border-color: #e5e5ea;
}
[data-theme="light"] .lightbox-overlay {
    background: rgba(255,255,255,0.95);
}
[data-theme="light"] .lightbox-overlay img {
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
[data-theme="light"] .lightbox-close {
    color: #333;
    background: rgba(0,0,0,0.05);
}
[data-theme="light"] .lightbox-title {
    color: #333;
    text-shadow: none;
}
[data-theme="light"] .card-overlay {
    background: rgba(255,255,255,0.7);
}
[data-theme="light"] .card-overlay svg {
    color: var(--accent);
}
[data-theme="light"] .shelf-section::before {
    background: linear-gradient(to right, #f5f5f7, transparent);
}
[data-theme="light"] .shelf-section::after {
    background: linear-gradient(to left, #f5f5f7, transparent);
}

/* ==========================================================================
   USER STAR RATING WIDGET
   ========================================================================== */
.user-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 2px 0;
}
.user-star-rating .star-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    line-height: 1;
}
.user-star-rating .star-btn:hover {
    transform: scale(1.2);
    filter: brightness(1.3);
}
.user-star-rating .star-btn svg {
    fill: rgba(255,255,255,0.15);
    stroke: rgba(255,255,255,0.3);
    stroke-width: 1.5;
    transition: fill 0.15s ease, stroke 0.15s ease;
}
.user-star-rating .star-btn.filled svg {
    fill: var(--star-color, #f5c518);
    stroke: var(--star-color, #f5c518);
}
.user-star-rating .star-btn.hover-preview svg {
    fill: rgba(245, 197, 24, 0.5);
    stroke: rgba(245, 197, 24, 0.7);
}
.user-star-rating.sm .star-btn svg {
    width: 14px;
    height: 14px;
}
.user-star-rating.lg .star-btn svg {
    width: 24px;
    height: 24px;
}
.user-star-rating-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 4px;
    opacity: 0.7;
}
/* Card-level user rating */
.card-user-rating {
    display: flex;
    align-items: center;
    margin-top: 2px;
    min-height: 20px;
}
/* Detail page user rating section */
.detail-user-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.detail-user-rating .rating-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.detail-user-rating .rating-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--star-color, #f5c518);
}

/* Light theme overrides */
[data-theme="light"] .user-star-rating .star-btn svg {
    fill: rgba(0,0,0,0.08);
    stroke: rgba(0,0,0,0.2);
}
[data-theme="light"] .user-star-rating .star-btn.filled svg {
    fill: var(--star-color, #f5c518);
    stroke: var(--star-color, #f5c518);
}
[data-theme="light"] .user-star-rating .star-btn.hover-preview svg {
    fill: rgba(245, 197, 24, 0.5);
    stroke: rgba(245, 197, 24, 0.7);
}

/* OLED theme overrides */
[data-theme="oled"] .user-star-rating .star-btn svg {
    fill: rgba(255,255,255,0.1);
    stroke: rgba(255,255,255,0.2);
}

/* Rating star pop animation */
@keyframes ratingPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.user-star-rating .star-btn.just-clicked {
    animation: ratingPop 0.3s ease;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .user-star-rating.lg .star-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================================================
   V4 STYLING ENHANCEMENTS — Staggered Cards, FAB, Enhanced Animations
   ========================================================================== */

/* 1. Staggered Card Entry Animation */
.movie-grid .movie-card {
    opacity: 0;
    transform: translateY(20px);
    animation: cardStaggerIn 0.4s ease forwards;
}
.movie-grid .movie-card:nth-child(1) { animation-delay: 0.02s; }
.movie-grid .movie-card:nth-child(2) { animation-delay: 0.04s; }
.movie-grid .movie-card:nth-child(3) { animation-delay: 0.06s; }
.movie-grid .movie-card:nth-child(4) { animation-delay: 0.08s; }
.movie-grid .movie-card:nth-child(5) { animation-delay: 0.10s; }
.movie-grid .movie-card:nth-child(6) { animation-delay: 0.12s; }
.movie-grid .movie-card:nth-child(7) { animation-delay: 0.14s; }
.movie-grid .movie-card:nth-child(8) { animation-delay: 0.16s; }
.movie-grid .movie-card:nth-child(9) { animation-delay: 0.18s; }
.movie-grid .movie-card:nth-child(10) { animation-delay: 0.20s; }
.movie-grid .movie-card:nth-child(n+11) { animation-delay: 0.22s; }
@keyframes cardStaggerIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Shelf card stagger */
.shelf-card {
    opacity: 0;
    animation: shelfStaggerIn 0.35s ease forwards;
}
.shelf-card:nth-child(1) { animation-delay: 0.05s; }
.shelf-card:nth-child(2) { animation-delay: 0.10s; }
.shelf-card:nth-child(3) { animation-delay: 0.15s; }
.shelf-card:nth-child(4) { animation-delay: 0.20s; }
.shelf-card:nth-child(5) { animation-delay: 0.25s; }
.shelf-card:nth-child(n+6) { animation-delay: 0.30s; }
@keyframes shelfStaggerIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 2. Enhanced Custom Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.22);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
[data-theme="light"] * {
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.22);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* 3. Button Ripple Effect */
.btn-header, .btn-select, .nav-tab, .view-btn, .afp-reset-btn,
.btn-clear-history, .select-mode-toggle, .filter-panel-toggle,
.watched-filter-btn, .detail-play-btn, .detail-secondary-btn,
.detail-back-btn, .nav-btn, .pro-btn {
    position: relative;
    overflow: hidden;
}
.btn-header::after, .btn-select::after, .nav-tab::after, .view-btn::after,
.detail-play-btn::after, .detail-secondary-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}
.btn-header:active::after, .btn-select:active::after, .nav-tab:active::after,
.view-btn:active::after, .detail-play-btn:active::after {
    width: 200px;
    height: 200px;
    opacity: 0;
    transition: width 0s, height 0s, opacity 0.4s ease;
}

/* 4. Floating Action Button (FAB) — Mobile Only */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: none;
}
@media (max-width: 768px) {
    .fab-container {
        display: block;
    }
}
.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 0 var(--accent);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}
.fab-main:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.fab-main.open {
    transform: rotate(45deg);
    background: #ef4444;
}
.fab-main.open:hover {
    transform: rotate(45deg) scale(1.08);
}
.fab-menu {
    position: absolute;
    bottom: 64px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-menu.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.fab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 28px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    font-family: inherit;
}
.fab-item:hover {
    background: var(--accent);
    color: #fff;
    transform: translateX(-4px);
}
.fab-item svg {
    flex-shrink: 0;
}
.fab-menu.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: -1;
}
[data-theme="light"] .fab-item {
    background: #fff;
    color: #333;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .fab-item:hover {
    background: var(--accent);
    color: #fff;
}
[data-theme="oled"] .fab-item {
    background: #111;
    border-color: rgba(255,255,255,0.06);
}
[data-theme="oled"] .fab-main {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 15px rgba(229, 9, 20, 0.2);
}

/* 5. Enhanced Welcome Screen Animations */
.welcome-gradient-orb {
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.welcome-gradient-orb.orb-1 { animation-name: orbFloat1; }
.welcome-gradient-orb.orb-2 { animation-name: orbFloat2; animation-delay: -2s; }
.welcome-gradient-orb.orb-3 { animation-name: orbFloat3; animation-delay: -4s; }
@keyframes orbFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, -40px) scale(1.15); }
}
@keyframes orbFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50px, 30px) scale(1.2); }
}
@keyframes orbFloat3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 50px) scale(0.9); }
}
.welcome-icon {
    animation: welcomeIconPulse 3s ease-in-out infinite;
}
@keyframes welcomeIconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px var(--accent)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 20px var(--accent)); }
}
.welcome-info-card {
    opacity: 0;
    transform: translateY(15px);
    animation: welcomeCardIn 0.5s ease forwards;
}
.welcome-info-card:nth-child(1) { animation-delay: 0.3s; }
.welcome-info-card:nth-child(2) { animation-delay: 0.5s; }
.welcome-info-card:nth-child(3) { animation-delay: 0.7s; }
@keyframes welcomeCardIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 6. Enhanced Card Hover Effects */
.movie-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
    z-index: 5;
}
.movie-card .poster-container img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
}
.movie-card:hover .poster-container img {
    transform: scale(1.08);
    filter: brightness(1.1);
}
.movie-card .card-overlay {
    opacity: 0;
    transition: all 0.3s ease;
}
.movie-card:hover .card-overlay {
    opacity: 1;
}
.movie-card .card-overlay svg {
    transform: scale(0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.movie-card:hover .card-overlay svg {
    transform: scale(1);
}
[data-theme="light"] .movie-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
}
[data-theme="oled"] .movie-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 15px rgba(229, 9, 20, 0.15);
}

/* 7. Stat Card Entrance Animation */
.stat-card {
    opacity: 0;
    transform: translateY(20px);
    animation: statCardIn 0.5s ease forwards;
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-card:nth-child(5) { animation-delay: 0.5s; }
.stat-card:nth-child(6) { animation-delay: 0.6s; }
@keyframes statCardIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 8. Enhanced Toast Animations */
.toast-container .toast {
    animation: toastSlideInEnhanced 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.toast-container .toast.removing {
    animation: toastSlideOutEnhanced 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes toastSlideInEnhanced {
    from { transform: translateX(100%) scale(0.8); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes toastSlideOutEnhanced {
    from { transform: translateX(0) scale(1); opacity: 1; }
    to { transform: translateX(100%) scale(0.8); opacity: 0; }
}

/* 9. Tab Content Transition Enhancement */
.tab-content.active {
    animation: tabContentIn 0.3s ease;
}
@keyframes tabContentIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 10. Glow Effects on Active Elements */
.search-box:focus-within {
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.nav-tab.active {
    text-shadow: 0 0 12px var(--accent);
}
#scrollToTopBtn.visible {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px var(--accent);
}
[data-theme="light"] .search-box:focus-within {
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* 11. Continue Watching Progress Enhancement */
.continue-watching-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #fff;
}
.continue-watching-progress .cw-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.continue-watching-progress .cw-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.continue-watching-progress .cw-pct {
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

/* 12. NEW Badge for Recently Added Items */
.new-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
    animation: newBadgePulse 2s ease-in-out infinite;
}
@keyframes newBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
[data-theme="oled"] .new-badge {
    box-shadow: 0 0 8px var(--accent);
}

/* 13. Enhanced Filter Chips */
.afp-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    min-height: 0;
    transition: all 0.2s ease;
}
.afp-chips-row:not(:empty) {
    padding: 8px 0;
}
.afp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.afp-chip:hover {
    background: var(--accent-hover, #ff2a2a);
    transform: scale(1.05);
}
.afp-chip-x {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.afp-chip-x:hover {
    opacity: 1;
}
[data-theme="light"] .afp-chip {
    color: #fff;
}

/* 14. Stat Bar Animation */
.stat-bar-fill {
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-value {
    font-variant-numeric: tabular-nums;
    transition: all 0.5s ease;
}

/* 15. Mobile Improvements */
@media (max-width: 768px) {
    .movie-grid .movie-card:nth-child(n+7) {
        animation-delay: 0s;
    }
    .fab-container {
        display: block;
    }
}
@media (max-width: 480px) {
    .movie-grid .movie-card:nth-child(n+5) {
        animation-delay: 0s;
    }
}

/* ========================================================================
   TASK 7-a: EXTENSIVE CSS STYLING ENHANCEMENTS
   20 NEW sections — appended only, no existing styles modified
   ======================================================================== */

/* ——————————————————————————————————————————————————————————————
   1. PARTICLE / AMBIENT BACKGROUND EFFECT
   CSS-only floating particles behind the welcome screen
   —————————————————————————————————————————————————————————————— */
.welcome-screen {
    position: relative;
    overflow: hidden;
}
.welcome-screen::before,
.welcome-screen::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.welcome-screen::before {
    box-shadow:
        10vw 20vh 0 0 rgba(229,9,20,0.3),
        25vw 60vh 0 1px rgba(229,9,20,0.2),
        40vw 15vh 0 0 rgba(229,9,20,0.25),
        55vw 75vh 0 1px rgba(229,9,20,0.15),
        70vw 35vh 0 0 rgba(229,9,20,0.3),
        85vw 80vh 0 1px rgba(229,9,20,0.2),
        15vw 90vh 0 0 rgba(229,9,20,0.2),
        60vw 45vh 0 1px rgba(229,9,20,0.25),
        90vw 10vh 0 0 rgba(229,9,20,0.15),
        35vw 50vh 0 1px rgba(229,9,20,0.3),
        5vw 55vh 0 0 rgba(229,9,20,0.2),
        78vw 25vh 0 1px rgba(229,9,20,0.2),
        45vw 85vh 0 0 rgba(229,9,20,0.15),
        92vw 55vh 0 1px rgba(229,9,20,0.25),
        20vw 40vh 0 0 rgba(229,9,20,0.2);
    animation: particleFloat1 18s ease-in-out infinite;
}
.welcome-screen::after {
    box-shadow:
        8vw 30vh 0 0 rgba(229,9,20,0.2),
        30vw 70vh 0 1px rgba(229,9,20,0.15),
        50vw 20vh 0 0 rgba(229,9,20,0.2),
        65vw 85vh 0 1px rgba(229,9,20,0.25),
        80vw 40vh 0 0 rgba(229,9,20,0.15),
        12vw 65vh 0 1px rgba(229,9,20,0.2),
        48vw 10vh 0 0 rgba(229,9,20,0.25),
        72vw 60vh 0 1px rgba(229,9,20,0.15),
        95vw 75vh 0 0 rgba(229,9,20,0.2),
        38vw 95vh 0 1px rgba(229,9,20,0.3);
    animation: particleFloat2 22s ease-in-out infinite;
}
@keyframes particleFloat1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -25px); }
    50% { transform: translate(-10px, 15px); }
    75% { transform: translate(20px, 10px); }
}
@keyframes particleFloat2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-20px, 15px); }
    66% { transform: translate(10px, -20px); }
}
[data-theme="light"] .welcome-screen::before {
    box-shadow:
        10vw 20vh 0 0 rgba(229,9,20,0.15),
        25vw 60vh 0 1px rgba(229,9,20,0.1),
        40vw 15vh 0 0 rgba(229,9,20,0.12),
        55vw 75vh 0 1px rgba(229,9,20,0.08),
        70vw 35vh 0 0 rgba(229,9,20,0.15),
        85vw 80vh 0 1px rgba(229,9,20,0.1),
        15vw 90vh 0 0 rgba(229,9,20,0.1),
        60vw 45vh 0 1px rgba(229,9,20,0.12),
        90vw 10vh 0 0 rgba(229,9,20,0.08),
        35vw 50vh 0 1px rgba(229,9,20,0.15),
        5vw 55vh 0 0 rgba(229,9,20,0.1),
        78vw 25vh 0 1px rgba(229,9,20,0.1),
        45vw 85vh 0 0 rgba(229,9,20,0.08),
        92vw 55vh 0 1px rgba(229,9,20,0.12),
        20vw 40vh 0 0 rgba(229,9,20,0.1);
}
[data-theme="oled"] .welcome-screen::before {
    box-shadow:
        10vw 20vh 0 0 rgba(229,9,20,0.5),
        25vw 60vh 0 1px rgba(229,9,20,0.35),
        40vw 15vh 0 0 rgba(229,9,20,0.4),
        55vw 75vh 0 1px rgba(229,9,20,0.25),
        70vw 35vh 0 0 rgba(229,9,20,0.5),
        85vw 80vh 0 1px rgba(229,9,20,0.35),
        15vw 90vh 0 0 rgba(229,9,20,0.35),
        60vw 45vh 0 1px rgba(229,9,20,0.4),
        90vw 10vh 0 0 rgba(229,9,20,0.25),
        35vw 50vh 0 1px rgba(229,9,20,0.5),
        5vw 55vh 0 0 rgba(229,9,20,0.35),
        78vw 25vh 0 1px rgba(229,9,20,0.35),
        45vw 85vh 0 0 rgba(229,9,20,0.25),
        92vw 55vh 0 1px rgba(229,9,20,0.4),
        20vw 40vh 0 0 rgba(229,9,20,0.35);
}

/* ——————————————————————————————————————————————————————————————
   2. CARD FLIP ANIMATION ON DOUBLE-CLICK
   CSS 3D flip showing movie metadata on the back
   —————————————————————————————————————————————————————————————— */
.movie-card.flippable {
    perspective: 1000px;
}
.movie-card.flippable .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.movie-card.flippable.flipped .card-inner {
    transform: rotateY(180deg);
}
.movie-card.flippable .card-front,
.movie-card.flippable .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--card-radius, 8px);
    overflow: hidden;
}
.movie-card.flippable .card-front {
    z-index: 2;
}
.movie-card.flippable .card-back {
    transform: rotateY(180deg);
    background: var(--bg-secondary, #1a1a2e);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    gap: 8px;
}
.card-back-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.card-back-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.card-back-plot {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-back-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}
.card-back-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.card-back-genre {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(229,9,20,0.15);
    color: rgba(255,255,255,0.7);
}
[data-theme="light"] .movie-card.flippable .card-back {
    background: #f0f0f5;
}
[data-theme="light"] .card-back-title {
    color: #111;
}
[data-theme="light"] .card-back-meta {
    color: rgba(0,0,0,0.55);
}
[data-theme="light"] .card-back-plot {
    color: rgba(0,0,0,0.45);
}
[data-theme="oled"] .movie-card.flippable .card-back {
    background: #0a0a0a;
}

/* ——————————————————————————————————————————————————————————————
   3. NEON GLOW TEXT EFFECT
   On important headings and stats numbers
   —————————————————————————————————————————————————————————————— */
.neon-text {
    color: #fff;
    text-shadow:
        0 0 7px var(--accent),
        0 0 10px var(--accent),
        0 0 21px var(--accent),
        0 0 42px var(--accent);
    animation: neonFlicker 3s ease-in-out infinite;
}
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 7px var(--accent),
            0 0 10px var(--accent),
            0 0 21px var(--accent),
            0 0 42px var(--accent);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}
.stats-value.neon-text {
    font-variant-numeric: tabular-nums;
}
.detail-title.neon-text {
    font-size: inherit;
    font-weight: inherit;
}
[data-theme="light"] .neon-text {
    text-shadow:
        0 0 5px var(--accent),
        0 0 10px rgba(229,9,20,0.3);
    animation: none;
}
[data-theme="oled"] .neon-text {
    text-shadow:
        0 0 7px var(--accent),
        0 0 12px var(--accent),
        0 0 28px var(--accent),
        0 0 56px var(--accent),
        0 0 80px var(--accent);
}

/* ——————————————————————————————————————————————————————————————
   4. SHIMMER / SKELETON LOADING FOR DETAIL PAGE
   Animated placeholders when detail page is loading
   —————————————————————————————————————————————————————————————— */
.detail-skeleton {
    animation: detailShimmer 1.8s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #1a1a2e) 25%,
        var(--bg-tertiary, #252540) 37%,
        var(--bg-secondary, #1a1a2e) 63%
    );
    background-size: 400% 100%;
    border-radius: 6px;
}
@keyframes detailShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.detail-skeleton-hero {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}
.detail-skeleton-poster {
    width: 200px;
    height: 300px;
    border-radius: 8px;
    flex-shrink: 0;
}
.detail-skeleton-title {
    width: 60%;
    height: 28px;
    margin-bottom: 12px;
}
.detail-skeleton-subtitle {
    width: 40%;
    height: 18px;
    margin-bottom: 8px;
}
.detail-skeleton-text {
    width: 100%;
    height: 14px;
    margin-bottom: 8px;
}
.detail-skeleton-text.short {
    width: 70%;
}
.detail-skeleton-text.medium {
    width: 85%;
}
.detail-skeleton-button {
    width: 120px;
    height: 40px;
    border-radius: 20px;
    display: inline-block;
    margin-right: 10px;
}
.detail-skeleton-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 24px;
}
.detail-skeleton-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-theme="light"] .detail-skeleton {
    background: linear-gradient(
        90deg,
        #e8e8ec 25%,
        #f2f2f6 37%,
        #e8e8ec 63%
    );
    background-size: 400% 100%;
}
[data-theme="oled"] .detail-skeleton {
    background: linear-gradient(
        90deg,
        #0a0a0a 25%,
        #151515 37%,
        #0a0a0a 63%
    );
    background-size: 400% 100%;
}
@media (max-width: 768px) {
    .detail-skeleton-grid {
        grid-template-columns: 1fr;
    }
    .detail-skeleton-poster {
        width: 140px;
        height: 210px;
    }
    .detail-skeleton-hero {
        height: 200px;
    }
}

/* ——————————————————————————————————————————————————————————————
   5. MORPHING SEARCH BAR
   Search input morphs with animated border-radius and width on focus
   —————————————————————————————————————————————————————————————— */
.search-box.morphing {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
    width: var(--search-width, 280px);
}
.search-box.morphing:focus-within {
    border-radius: 8px;
    width: var(--search-width-focus, 360px);
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 20px rgba(229,9,20,0.12),
        0 4px 16px rgba(0,0,0,0.2);
    background: var(--bg-card);
    color: var(--text-primary);
}
.search-box.morphing input {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] .search-box.morphing:focus-within {
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 15px rgba(229,9,20,0.08),
        0 2px 8px rgba(0,0,0,0.06);
    background: #fff;
}
[data-theme="oled"] .search-box.morphing:focus-within {
    background: #111;
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 25px rgba(229,9,20,0.2),
        0 4px 16px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
    .search-box.morphing {
        --search-width: 180px;
        --search-width-focus: 240px;
    }
}
@media (max-width: 480px) {
    .search-box.morphing {
        --search-width: 140px;
        --search-width-focus: 200px;
    }
}

/* ——————————————————————————————————————————————————————————————
   6. STAGGERED NOTIFICATION STACK
   Multiple toasts stack with offset and z-index animation
   —————————————————————————————————————————————————————————————— */
.toast-container.stacked {
    display: flex;
    flex-direction: column;
    gap: 8px;
    perspective: 800px;
}
.toast-container.stacked .toast:nth-child(1) {
    transform: translateZ(0) translateY(0);
    z-index: 100;
}
.toast-container.stacked .toast:nth-child(2) {
    transform: translateZ(-10px) translateY(8px) scale(0.96);
    z-index: 99;
    opacity: 0.9;
}
.toast-container.stacked .toast:nth-child(3) {
    transform: translateZ(-20px) translateY(16px) scale(0.92);
    z-index: 98;
    opacity: 0.8;
}
.toast-container.stacked .toast:nth-child(4) {
    transform: translateZ(-30px) translateY(24px) scale(0.88);
    z-index: 97;
    opacity: 0.7;
}
.toast-container.stacked .toast:nth-child(n+5) {
    transform: translateZ(-40px) translateY(32px) scale(0.84);
    z-index: 96;
    opacity: 0.6;
}
.toast-container.stacked .toast {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-container.stacked .toast:hover {
    transform: translateZ(0) translateY(0) scale(1) !important;
    opacity: 1 !important;
    z-index: 101 !important;
}

/* ——————————————————————————————————————————————————————————————
   7. BREATHING ANIMATION ON ACTIVE ELEMENTS
   Subtle scale pulse on active tab, playing indicator
   —————————————————————————————————————————————————————————————— */
.nav-tab.active.breathing {
    animation: breathe 3s ease-in-out infinite;
}
.playing-indicator {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    animation: breatheScale 2s ease-in-out infinite;
}
.playing-indicator .bar {
    width: 3px;
    background: var(--accent);
    border-radius: 2px;
    animation: playingBarBounce 1.2s ease-in-out infinite;
}
.playing-indicator .bar:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}
.playing-indicator .bar:nth-child(2) {
    height: 10px;
    animation-delay: 0.15s;
}
.playing-indicator .bar:nth-child(3) {
    height: 14px;
    animation-delay: 0.3s;
}
.playing-indicator .bar:nth-child(4) {
    height: 8px;
    animation-delay: 0.45s;
}
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
@keyframes breatheScale {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes playingBarBounce {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

/* ——————————————————————————————————————————————————————————————
   8. GRADIENT BORDER ANIMATION
   Rotating gradient border on focused/hovered cards using conic-gradient
   —————————————————————————————————————————————————————————————— */
.movie-card.gradient-border {
    position: relative;
    border: none;
    z-index: 1;
}
.movie-card.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--card-radius, 8px) + 2px);
    background: conic-gradient(
        from var(--gradient-angle, 0deg),
        var(--accent),
        #ff6b35,
        #ffd700,
        var(--accent),
        #6b35ff,
        var(--accent)
    );
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: gradientBorderRotate 3s linear infinite;
}
.movie-card.gradient-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius, 8px);
    background: var(--bg-secondary, #1a1a2e);
    z-index: -1;
}
.movie-card.gradient-border:hover::before {
    opacity: 1;
}
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes gradientBorderRotate {
    to { --gradient-angle: 360deg; }
}
/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .movie-card.gradient-border::before {
        background: linear-gradient(135deg, var(--accent), #ff6b35, #ffd700, var(--accent));
    }
}
[data-theme="light"] .movie-card.gradient-border::after {
    background: #fff;
}
[data-theme="oled"] .movie-card.gradient-border::after {
    background: #000;
}
[data-theme="oled"] .movie-card.gradient-border:hover::before {
    opacity: 1;
    filter: brightness(1.3);
}

/* ——————————————————————————————————————————————————————————————
   9. PARALLAX SCROLLING LAYERS
   CSS-only parallax effect on detail page hero
   —————————————————————————————————————————————————————————————— */
.detail-hero-parallax {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1px;
    height: 350px;
}
.detail-hero-parallax .parallax-back {
    position: absolute;
    inset: -50px;
    background-size: cover;
    background-position: center;
    transform: translateZ(-2px) scale(3);
    filter: blur(2px) brightness(0.4);
    z-index: 0;
}
.detail-hero-parallax .parallax-mid {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,0,0,0.3) 50%,
        var(--bg-primary, #0d0d1a) 100%
    );
    transform: translateZ(-1px) scale(2);
    z-index: 1;
}
.detail-hero-parallax .parallax-front {
    position: relative;
    z-index: 2;
    transform: translateZ(0);
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 24px;
}
[data-theme="light"] .detail-hero-parallax .parallax-mid {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5) 50%,
        var(--bg-primary, #f5f5f5) 100%
    );
}
@media (max-width: 768px) {
    .detail-hero-parallax {
        height: 250px;
    }
}
@media (max-width: 480px) {
    .detail-hero-parallax {
        height: 200px;
    }
    .detail-hero-parallax .parallax-front {
        padding: 16px;
    }
}

/* ——————————————————————————————————————————————————————————————
   10. RETRO / VHS SCAN LINE EFFECT
   Subtle CRT scan lines overlay for video player
   —————————————————————————————————————————————————————————————— */
.vhs-scanlines {
    position: relative;
}
.vhs-scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 10;
    animation: vhsScanMove 8s linear infinite;
    mix-blend-mode: multiply;
}
.vhs-scanlines.vhs-heavy::after {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.15) 1px,
        rgba(0, 0, 0, 0.15) 3px
    );
}
.vhs-flicker {
    animation: vhsFlicker 0.15s infinite;
}
@keyframes vhsScanMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}
@keyframes vhsFlicker {
    0% { opacity: 1; }
    50% { opacity: 0.98; }
    100% { opacity: 1; }
}
[data-theme="light"] .vhs-scanlines::after {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}
[data-theme="oled"] .vhs-scanlines::after {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.12) 2px,
        rgba(0, 0, 0, 0.12) 4px
    );
}

/* ——————————————————————————————————————————————————————————————
   11. RIBBON / CORNER BADGE
   Decorative corner badges for "NEW", "HD", "4K" on cards
   —————————————————————————————————————————————————————————————— */
.corner-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    overflow: hidden;
    width: 70px;
    height: 70px;
    pointer-events: none;
}
.corner-badge span {
    position: absolute;
    display: block;
    width: 100px;
    padding: 4px 0;
    background: var(--badge-bg, var(--accent));
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    right: -28px;
    top: 16px;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.corner-badge.badge-hd span {
    --badge-bg: #2196f3;
}
.corner-badge.badge-4k span {
    --badge-bg: #9c27b0;
}
.corner-badge.badge-new span {
    --badge-bg: var(--accent);
    animation: badgeGlow 2s ease-in-out infinite;
}
.corner-badge.badge-top span {
    --badge-bg: #ff9800;
}
@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 2px 12px rgba(229,9,20,0.5); }
}
[data-theme="light"] .corner-badge span {
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
[data-theme="oled"] .corner-badge span {
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
@media (max-width: 480px) {
    .corner-badge {
        width: 55px;
        height: 55px;
    }
    .corner-badge span {
        font-size: 7px;
        width: 80px;
        right: -22px;
        top: 13px;
    }
}

/* ——————————————————————————————————————————————————————————————
   12. ANIMATED COUNTER NUMBERS
   Count-up animation for stats numbers using CSS counters
   —————————————————————————————————————————————————————————————— */
.counter-animated {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    animation: counterPop 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: scale(0.5) translateY(10px);
}
.counter-animated:nth-child(1) { animation-delay: 0.1s; }
.counter-animated:nth-child(2) { animation-delay: 0.2s; }
.counter-animated:nth-child(3) { animation-delay: 0.3s; }
.counter-animated:nth-child(4) { animation-delay: 0.4s; }
.counter-animated:nth-child(5) { animation-delay: 0.5s; }
.counter-animated:nth-child(6) { animation-delay: 0.6s; }
@keyframes counterPop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
    }
    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.stats-value.counter-animated {
    font-size: inherit;
}

/* ——————————————————————————————————————————————————————————————
   13. SPLIT-TEXT HOVER EFFECT
   On card titles, text splits into colored halves on hover
   —————————————————————————————————————————————————————————————— */
.split-text-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.split-text-hover::before,
.split-text-hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.split-text-hover::before {
    clip-path: inset(0 50% 0 0);
    color: var(--accent);
    z-index: 1;
}
.split-text-hover::after {
    clip-path: inset(0 0 0 50%);
    color: inherit;
    z-index: 1;
}
.split-text-hover:hover::before {
    transform: translateX(-4px);
}
.split-text-hover:hover::after {
    transform: translateX(4px);
}
.card-title.split-text-hover:hover {
    transform: none;
}
[data-theme="light"] .split-text-hover::before {
    color: var(--accent);
}

/* ——————————————————————————————————————————————————————————————
   14. WATER RIPPLE CLICK EFFECT
   Expanding circular ripple on card click (CSS-only)
   —————————————————————————————————————————————————————————————— */
.ripple-container {
    position: relative;
    overflow: hidden;
}
.ripple-container .ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(229,9,20,0.3) 0%,
        rgba(229,9,20,0.1) 40%,
        transparent 70%
    );
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}
@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
[data-theme="light"] .ripple-container .ripple {
    background: radial-gradient(
        circle,
        rgba(229,9,20,0.15) 0%,
        rgba(229,9,20,0.05) 40%,
        transparent 70%
    );
}
[data-theme="oled"] .ripple-container .ripple {
    background: radial-gradient(
        circle,
        rgba(229,9,20,0.5) 0%,
        rgba(229,9,20,0.2) 40%,
        transparent 70%
    );
}

/* ——————————————————————————————————————————————————————————————
   15. GLASSMORPHISM DETAIL PANEL
   Enhanced glass effect with animated blur on detail page side panel
   —————————————————————————————————————————————————————————————— */
.glass-panel {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: glassFadeIn 0.5s ease forwards;
}
.glass-panel:hover {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}
@keyframes glassFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}
[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .glass-panel:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="oled"] .glass-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
[data-theme="oled"] .glass-panel:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ——————————————————————————————————————————————————————————————
   16. HOVER-EXPAND SHELF ROW
   Shelf row slightly expands in height on hover
   —————————————————————————————————————————————————————————————— */
.shelf-section.hover-expand {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 8px;
}
.shelf-section.hover-expand:hover {
    padding-bottom: 16px;
    transform: scale(1.005);
}
.shelf-section.hover-expand .shelf-row {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.shelf-section.hover-expand:hover .shelf-row {
    transform: translateY(-4px);
}
.shelf-section.hover-expand .shelf-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.shelf-section.hover-expand:hover .shelf-card {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
[data-theme="light"] .shelf-section.hover-expand:hover .shelf-card {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ——————————————————————————————————————————————————————————————
   17. ANIMATED SORT INDICATOR
   Animated up/down arrows on sort options
   —————————————————————————————————————————————————————————————— */
.sort-indicator {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 4px;
    line-height: 0;
    vertical-align: middle;
}
.sort-indicator .sort-arrow {
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: all 0.25s ease;
    opacity: 0.3;
}
.sort-indicator .sort-arrow-up {
    border-bottom: 5px solid rgba(255,255,255,0.4);
}
.sort-indicator .sort-arrow-down {
    border-top: 5px solid rgba(255,255,255,0.4);
}
.sort-asc .sort-indicator .sort-arrow-up {
    border-bottom-color: var(--accent);
    opacity: 1;
    transform: translateY(-1px);
}
.sort-asc .sort-indicator .sort-arrow-down {
    opacity: 0.2;
}
.sort-desc .sort-indicator .sort-arrow-down {
    border-top-color: var(--accent);
    opacity: 1;
    transform: translateY(1px);
}
.sort-desc .sort-indicator .sort-arrow-up {
    opacity: 0.2;
}
.sort-indicator.changing .sort-arrow {
    animation: sortArrowBounce 0.3s ease;
}
@keyframes sortArrowBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
[data-theme="light"] .sort-indicator .sort-arrow-up {
    border-bottom-color: rgba(0,0,0,0.3);
}
[data-theme="light"] .sort-indicator .sort-arrow-down {
    border-top-color: rgba(0,0,0,0.3);
}
[data-theme="light"] .sort-asc .sort-indicator .sort-arrow-up {
    border-bottom-color: var(--accent);
}
[data-theme="light"] .sort-desc .sort-indicator .sort-arrow-down {
    border-top-color: var(--accent);
}

/* ——————————————————————————————————————————————————————————————
   18. TYPING CURSOR EFFECT
   Blinking cursor on search placeholder text
   —————————————————————————————————————————————————————————————— */
.search-box.typing-cursor input::placeholder {
    animation: placeholderTyping 4s steps(30) infinite;
}
.search-box.typing-cursor::after {
    content: '|';
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-weight: 300;
    animation: cursorBlink 1s step-end infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.search-box.typing-cursor input:placeholder-shown ~ .search-icon ~ .cursor-element,
.search-box.typing-cursor input:placeholder-shown::after {
    opacity: 1;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes placeholderTyping {
    0% { opacity: 0.6; }
    50% { opacity: 0.6; }
    51% { opacity: 0; }
    100% { opacity: 0; }
}

/* ——————————————————————————————————————————————————————————————
   19. ANIMATED PROGRESS RING
   Circular SVG progress indicator for watch completion
   —————————————————————————————————————————————————————————————— */
.progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.progress-ring svg {
    transform: rotate(-90deg);
}
.progress-ring .progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
}
.progress-ring .progress-ring-fill {
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 4px rgba(229,9,20,0.4));
}
.progress-ring .progress-ring-text {
    position: absolute;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.progress-ring.complete .progress-ring-fill {
    stroke: #4caf50;
    filter: drop-shadow(0 0 4px rgba(76,175,80,0.4));
}
.progress-ring-mini {
    width: 32px;
    height: 32px;
}
.progress-ring-mini .progress-ring-text {
    font-size: 8px;
}
.progress-ring-large {
    width: 64px;
    height: 64px;
}
.progress-ring-large .progress-ring-text {
    font-size: 16px;
}
@keyframes progressRingSpin {
    to { stroke-dashoffset: 0; }
}
[data-theme="light"] .progress-ring .progress-ring-bg {
    stroke: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .progress-ring .progress-ring-text {
    color: #333;
}
[data-theme="oled"] .progress-ring .progress-ring-fill {
    filter: drop-shadow(0 0 6px rgba(229,9,20,0.6));
}
@media (max-width: 480px) {
    .progress-ring-large {
        width: 48px;
        height: 48px;
    }
    .progress-ring-large .progress-ring-text {
        font-size: 12px;
    }
}

/* ——————————————————————————————————————————————————————————————
   20. SMOOTH PAGE SCROLL WITH MOMENTUM
   Enhanced scroll-behavior with CSS scroll-snap
   —————————————————————————————————————————————————————————————— */
html.smooth-scroll {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
.main-content.scroll-snap {
    scroll-snap-type: y proximity;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.main-content.scroll-snap > section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.shelf-section.scroll-snap-x .shelf-row {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 16px;
}
.shelf-section.scroll-snap-x .shelf-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
/* Momentum scroll feel via smooth deceleration */
.momentum-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.momentum-scroll::-webkit-scrollbar {
    width: 6px;
}
.momentum-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.momentum-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}
.momentum-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}
[data-theme="light"] .momentum-scroll {
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}
[data-theme="light"] .momentum-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}
[data-theme="light"] .momentum-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    html.smooth-scroll {
        scroll-padding-top: 64px;
    }
}

/* ========================================================================
   BONUS ENHANCEMENT SECTIONS
   Additional polish beyond the 20 core items
   ======================================================================== */

/* ——————————————————————————————————————————————————————————————
   B1. HOVER REVEAL CARD OVERLAY ANIMATION
   Cards reveal more info with a sweeping overlay on hover
   —————————————————————————————————————————————————————————————— */
.movie-card.hover-reveal .card-info-extra {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                margin 0.3s ease;
    margin-top: 0;
}
.movie-card.hover-reveal:hover .card-info-extra {
    max-height: 60px;
    opacity: 1;
    margin-top: 6px;
}

/* ——————————————————————————————————————————————————————————————
   B2. STAGGERED CARD ENTRANCE WITH CUSTOM DELAY
   Each card in a grid has a staggered entrance
   —————————————————————————————————————————————————————————————— */
.stagger-entrance .movie-card,
.stagger-entrance .shelf-card {
    opacity: 0;
    transform: translateY(20px);
    animation: staggerIn 0.4s ease forwards;
}
.stagger-entrance .movie-card:nth-child(1), .stagger-entrance .shelf-card:nth-child(1) { animation-delay: 0.02s; }
.stagger-entrance .movie-card:nth-child(2), .stagger-entrance .shelf-card:nth-child(2) { animation-delay: 0.04s; }
.stagger-entrance .movie-card:nth-child(3), .stagger-entrance .shelf-card:nth-child(3) { animation-delay: 0.06s; }
.stagger-entrance .movie-card:nth-child(4), .stagger-entrance .shelf-card:nth-child(4) { animation-delay: 0.08s; }
.stagger-entrance .movie-card:nth-child(5), .stagger-entrance .shelf-card:nth-child(5) { animation-delay: 0.10s; }
.stagger-entrance .movie-card:nth-child(6), .stagger-entrance .shelf-card:nth-child(6) { animation-delay: 0.12s; }
.stagger-entrance .movie-card:nth-child(7), .stagger-entrance .shelf-card:nth-child(7) { animation-delay: 0.14s; }
.stagger-entrance .movie-card:nth-child(8), .stagger-entrance .shelf-card:nth-child(8) { animation-delay: 0.16s; }
.stagger-entrance .movie-card:nth-child(9), .stagger-entrance .shelf-card:nth-child(9) { animation-delay: 0.18s; }
.stagger-entrance .movie-card:nth-child(10), .stagger-entrance .shelf-card:nth-child(10) { animation-delay: 0.20s; }
.stagger-entrance .movie-card:nth-child(n+11), .stagger-entrance .shelf-card:nth-child(n+11) { animation-delay: 0.22s; }
@keyframes staggerIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ——————————————————————————————————————————————————————————————
   B3. DETAIL PAGE SECTION FADE-IN
   Sections on the detail page fade in as they appear
   —————————————————————————————————————————————————————————————— */
.detail-section-animated {
    opacity: 0;
    transform: translateY(16px);
    animation: detailSectionIn 0.5s ease forwards;
}
.detail-section-animated:nth-child(1) { animation-delay: 0.05s; }
.detail-section-animated:nth-child(2) { animation-delay: 0.1s; }
.detail-section-animated:nth-child(3) { animation-delay: 0.15s; }
.detail-section-animated:nth-child(4) { animation-delay: 0.2s; }
.detail-section-animated:nth-child(5) { animation-delay: 0.25s; }
.detail-section-animated:nth-child(6) { animation-delay: 0.3s; }
@keyframes detailSectionIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ——————————————————————————————————————————————————————————————
   B4. TOOLTIP STYLING
   Polished tooltips on hover for various elements
   —————————————————————————————————————————————————————————————— */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}
.tooltip-wrapper .tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(30, 30, 50, 0.95);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.tooltip-wrapper .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(30, 30, 50, 0.95);
}
.tooltip-wrapper:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
[data-theme="light"] .tooltip-wrapper .tooltip {
    background: rgba(50, 50, 60, 0.9);
}
[data-theme="oled"] .tooltip-wrapper .tooltip {
    background: rgba(20, 20, 20, 0.95);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

/* ——————————————————————————————————————————————————————————————
   B5. ENHANCED FOCUS RING FOR KEYBOARD NAVIGATION
   More visible focus indicators for accessibility
   —————————————————————————————————————————————————————————————— */
.focus-ring-enhanced *:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
    transition: outline-offset 0.15s ease;
}
.focus-ring-enhanced button:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(229,9,20,0.2);
}
.focus-ring-enhanced .movie-card:focus-visible {
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(229,9,20,0.15), 0 8px 24px rgba(0,0,0,0.2);
}
.focus-ring-enhanced input:focus-visible {
    outline-offset: 1px;
}
[data-theme="light"] .focus-ring-enhanced button:focus-visible {
    box-shadow: 0 0 0 4px rgba(229,9,20,0.1);
}

/* ——————————————————————————————————————————————————————————————
   B6. LOADING SPINNER ENHANCEMENTS
   Advanced spinner with ring rotation
   —————————————————————————————————————————————————————————————— */
.spinner-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    animation: spinnerRingRotate 0.8s linear infinite;
    position: relative;
}
.spinner-ring::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(229,9,20,0.4);
    animation: spinnerRingRotate 1.4s linear infinite reverse;
}
@keyframes spinnerRingRotate {
    to { transform: rotate(360deg); }
}
.spinner-ring.small {
    width: 24px;
    height: 24px;
    border-width: 2px;
}
.spinner-ring.small::after {
    inset: 2px;
    border-width: 1.5px;
}
.spinner-ring.large {
    width: 60px;
    height: 60px;
    border-width: 4px;
}
.spinner-ring.large::after {
    inset: 5px;
    border-width: 3px;
}
[data-theme="light"] .spinner-ring {
    border-color: rgba(0,0,0,0.08);
    border-top-color: var(--accent);
}
[data-theme="light"] .spinner-ring::after {
    border-top-color: rgba(229,9,20,0.3);
}

/* ——————————————————————————————————————————————————————————————
   B7. IMAGE HOVER ZOOM PAN
   Poster images zoom and pan slightly on card hover
   —————————————————————————————————————————————————————————————— */
.zoom-pan-hover .card-poster img,
.zoom-pan-hover .poster-img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.zoom-pan-hover:hover .card-poster img,
.zoom-pan-hover:hover .poster-img {
    transform: scale(1.08) translateX(2%);
}

/* ——————————————————————————————————————————————————————————————
   B8. EPISODE CARD ENHANCEMENT
   Better styling for episode cards in TV show detail
   —————————————————————————————————————————————————————————————— */
.episode-card-enhanced {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.25s ease;
    cursor: pointer;
}
.episode-card-enhanced:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(229,9,20,0.2);
    transform: translateX(4px);
}
.episode-card-enhanced .episode-thumb {
    width: 120px;
    height: 68px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.episode-card-enhanced .episode-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.episode-card-enhanced .episode-title {
    font-size: 13px;
    font-weight: 600;
    color: #eee;
}
.episode-card-enhanced .episode-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}
.episode-card-enhanced.watched {
    opacity: 0.6;
}
.episode-card-enhanced.watched .episode-title::after {
    content: ' ✓';
    color: #4caf50;
    font-size: 11px;
}
[data-theme="light"] .episode-card-enhanced {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .episode-card-enhanced:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(229,9,20,0.2);
}
[data-theme="light"] .episode-card-enhanced .episode-title {
    color: #222;
}
[data-theme="light"] .episode-card-enhanced .episode-meta {
    color: rgba(0,0,0,0.4);
}
@media (max-width: 480px) {
    .episode-card-enhanced {
        flex-direction: column;
        gap: 8px;
    }
    .episode-card-enhanced .episode-thumb {
        width: 100%;
        height: 100px;
    }
}

/* ——————————————————————————————————————————————————————————————
   B9. SELECTION / HIGHLIGHT COLOR
   Custom text selection color matching accent
   —————————————————————————————————————————————————————————————— */
.accent-selection ::selection {
    background: rgba(229, 9, 20, 0.3);
    color: #fff;
}
.accent-selection ::-moz-selection {
    background: rgba(229, 9, 20, 0.3);
    color: #fff;
}
[data-theme="light"] .accent-selection ::selection {
    background: rgba(229, 9, 20, 0.2);
    color: #111;
}

/* ——————————————————————————————————————————————————————————————
   B10. RESPONSIVE ENHANCEMENTS FOR NEW SECTIONS
   Mobile breakpoints for all new enhancement sections
   —————————————————————————————————————————————————————————————— */
@media (max-width: 768px) {
    .detail-skeleton-hero { height: 200px; }
    .detail-skeleton-grid { grid-template-columns: 140px 1fr; gap: 16px; padding: 16px; }
    .detail-skeleton-poster { width: 140px; height: 210px; }
    .glass-panel { border-radius: 12px; padding: 16px; }
    .progress-ring-large { width: 48px; height: 48px; }
    .progress-ring-large .progress-ring-text { font-size: 13px; }
    .corner-badge { width: 60px; height: 60px; }
    .corner-badge span { font-size: 8px; width: 90px; right: -25px; top: 14px; }
    .shelf-section.hover-expand:hover { padding-bottom: 12px; }
}
@media (max-width: 480px) {
    .detail-skeleton-grid { grid-template-columns: 1fr; }
    .detail-skeleton-poster { width: 100px; height: 150px; }
    .glass-panel { border-radius: 10px; padding: 12px; }
    .neon-text { text-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent); }
    .vhs-scanlines::after { display: none; }
    .search-box.morphing { --search-width: 140px; --search-width-focus: 90vw; }
    .corner-badge { width: 50px; height: 50px; }
    .corner-badge span { font-size: 7px; width: 75px; right: -20px; top: 11px; padding: 3px 0; }
    .detail-hero-parallax { height: 180px; }
    .detail-hero-parallax .parallax-front { padding: 12px; }
    .tooltip-wrapper .tooltip { font-size: 10px; padding: 4px 8px; }
    .episode-card-enhanced { padding: 8px; }
}

/* ============================================================================
   FEATURE 1: KEYBOARD SHORTCUTS PANEL STYLES
   ============================================================================ */
.keyboard-shortcuts-panel .modal-container {
    max-width: 640px;
}
.keyboard-shortcuts-panel .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.keyboard-shortcuts-panel .shortcut-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.keyboard-shortcuts-panel .shortcut-section h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.keyboard-shortcuts-panel .shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}
.keyboard-shortcuts-panel .shortcut-row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    line-height: 1.4;
}
.keyboard-shortcuts-panel .shortcut-row span {
    color: var(--text-secondary);
    margin-left: auto;
    text-align: right;
}
@media (max-width: 600px) {
    .keyboard-shortcuts-panel .shortcut-grid {
        grid-template-columns: 1fr;
    }
    .keyboard-shortcuts-panel .modal-container {
        max-width: 100%;
        margin: 1rem;
    }
}

/* ============================================================================
   FEATURE 2: CARD SIZE SLIDER STYLES
   ============================================================================ */
.card-size-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    margin: 0.5rem 0 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 220px;
}
.card-size-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: 500;
}
.card-size-range {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.card-size-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 6px rgba(0,0,0,0.3), 0 0 4px var(--accent-glow);
    transition: transform 0.15s;
}
.card-size-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.card-size-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-card);
}
.card-size-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Apply card width via CSS custom property */
.movie-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width, 200px), 1fr)) !important;
}

/* ============================================================================
   FEATURE 3: CONTINUE WATCHING SHELF STYLES (enhanced)
   ============================================================================ */
.continue-watching-card {
    position: relative;
}
.continue-watching-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}
.cw-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.cw-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.cw-pct {
    font-size: 0.65rem;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ============================================================================
   FEATURE 4: MOVIE NOTES STYLES
   ============================================================================ */
/* Note indicator on cards */
.note-indicator {
    position: absolute;
    top: 32px;
    left: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    border-radius: 4px;
    color: #f5c518;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s;
    backdrop-filter: blur(4px);
}
.movie-card:hover .note-indicator,
.shelf-card:hover .note-indicator {
    opacity: 1;
}
.note-indicator:hover {
    background: rgba(245,197,24,0.25);
    color: #ffd700;
}

/* Movie note dialog */
.movie-note-dialog {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.movie-note-dialog.active {
    opacity: 1;
    pointer-events: all;
}
.movie-note-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}
.movie-note-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.movie-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.movie-note-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.movie-note-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: 0.2s;
}
.movie-note-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.movie-note-textarea {
    flex: 1;
    min-height: 120px;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}
.movie-note-textarea::placeholder {
    color: var(--text-muted);
}
.movie-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
}
.movie-note-save {
    padding: 0.5rem 1.25rem;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
}
.movie-note-save:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.movie-note-delete {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(229,9,20,0.3);
    border-radius: 8px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
}
.movie-note-delete:hover {
    background: rgba(229,9,20,0.1);
}

/* Detail page note section */
.detail-note-section {
    margin-bottom: 1.5rem;
    background: rgba(10,10,15,0.45);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .detail-note-section {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.06);
}
.detail-note-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.detail-note-header span {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.detail-note-edit-btn {
    margin-left: auto;
    padding: 0.3rem 0.8rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s;
}
.detail-note-edit-btn:hover {
    background: var(--tag-bg);
    border-color: var(--accent);
}
.detail-note-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.7;
    white-space: pre-wrap;
}
.detail-note-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================================
   FEATURE 5: QUICK STATS WIDGET STYLES
   ============================================================================ */
.quick-stats-widget {
    margin-top: 1.5rem;
    max-width: 500px;
    width: 100%;
}
.quick-stats-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}
.quick-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: 0.3s;
}
.quick-stat-item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 15px var(--accent-glow);
    transform: translateY(-2px);
}
.quick-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
.quick-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ============================================================
   TASK 9-a: EXTENSIVE NEW CSS STYLING ENHANCEMENTS
   15 sections covering view toggle, card overlays, animations,
   micro-interactions, accessibility, genre colors, badges, and more.
   Supports dark (default), light [data-theme="light"], OLED [data-theme="oled"]
   Mobile responsive: @media 768px and 480px
   ============================================================ */

/* ----------------------------------------------------------
   1. VIEW TOGGLE BAR REDESIGN (4 buttons: grid, detail, compact, posters)
   ---------------------------------------------------------- */
.view-toggle-bar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 3px;
    position: relative;
    overflow: hidden;
}
.view-toggle-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    border-radius: inherit;
    pointer-events: none;
}
.view-toggle-bar .view-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #888);
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.25s, background 0.25s, transform 0.15s, box-shadow 0.25s;
    z-index: 1;
}
.view-toggle-bar .view-btn:hover {
    color: var(--text-primary, #eee);
    background: rgba(255,255,255,0.06);
}
.view-toggle-bar .view-btn:active {
    transform: scale(0.92);
}
.view-toggle-bar .view-btn.active {
    color: #fff;
    background: var(--accent, #e50914);
    box-shadow: 0 2px 12px var(--accent-glow, rgba(229,9,20,0.35));
}
.view-toggle-bar .view-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    border-radius: 3px;
    background: #fff;
    animation: viewActiveIndicator 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes viewActiveIndicator {
    0% { width: 0; opacity: 0; }
    100% { width: 16px; opacity: 1; }
}
/* Tooltip on hover for view buttons */
.view-toggle-bar .view-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-card, #1a1a2e);
    color: var(--text-primary, #eee);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 100;
}
.view-toggle-bar .view-btn:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Light theme view toggle */
[data-theme="light"] .view-toggle-bar {
    background: #f0f0f5;
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .view-toggle-bar::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, transparent 100%);
}
[data-theme="light"] .view-toggle-bar .view-btn {
    color: #666;
}
[data-theme="light"] .view-toggle-bar .view-btn:hover {
    color: #222;
    background: rgba(0,0,0,0.06);
}
[data-theme="light"] .view-toggle-bar .view-btn::before {
    background: #fff;
    color: #222;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* OLED theme view toggle */
[data-theme="oled"] .view-toggle-bar {
    background: #0a0a0a;
    border-color: rgba(255,255,255,0.06);
}
[data-theme="oled"] .view-toggle-bar .view-btn:hover {
    background: rgba(255,255,255,0.04);
}

/* ----------------------------------------------------------
   2. CARD METADATA OVERLAY ON LONG-PRESS / HOLD
   ---------------------------------------------------------- */
.movie-card .card-meta-overlay,
.shelf-card .card-meta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
}
.movie-card.card-long-press .card-meta-overlay,
.shelf-card.card-long-press .card-meta-overlay {
    opacity: 1;
    pointer-events: auto;
    animation: metaOverlayFadeIn 0.4s ease forwards;
}
@keyframes metaOverlayFadeIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.card-meta-overlay .meta-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}
.card-meta-overlay .meta-detail {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}
.card-meta-overlay .meta-detail span {
    display: inline-block;
    margin-right: 8px;
}
.card-meta-overlay .meta-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.card-meta-overlay .meta-genre-tag {
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}
/* Light theme meta overlay */
[data-theme="light"] .card-meta-overlay {
    background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
}
[data-theme="light"] .card-meta-overlay .meta-title {
    color: #111;
}
[data-theme="light"] .card-meta-overlay .meta-detail {
    color: rgba(0,0,0,0.6);
}
[data-theme="light"] .card-meta-overlay .meta-genre-tag {
    background: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.7);
}
/* OLED theme meta overlay */
[data-theme="oled"] .card-meta-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
}

/* ----------------------------------------------------------
   3. ANIMATED EMPTY STATE ILLUSTRATION
   ---------------------------------------------------------- */
.empty-state-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}
.empty-state-illustration svg {
    width: 120px;
    height: 120px;
    animation: emptyBounceFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(229,9,20,0.15));
}
@keyframes emptyBounceFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-12px) scale(1.03); }
    50% { transform: translateY(-4px) scale(0.98); }
    75% { transform: translateY(-8px) scale(1.01); }
}
.empty-state-illustration .empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #eee);
    margin-top: 1.25rem;
    animation: emptyFadeUp 0.6s ease 0.2s both;
}
.empty-state-illustration .empty-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
    margin-top: 0.4rem;
    animation: emptyFadeUp 0.6s ease 0.4s both;
}
@keyframes emptyFadeUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
.empty-state-illustration .empty-action-btn {
    margin-top: 1.25rem;
    padding: 0.6rem 1.5rem;
    background: var(--accent, #e50914);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    animation: emptyFadeUp 0.6s ease 0.6s both;
    transition: transform 0.2s, box-shadow 0.2s;
}
.empty-state-illustration .empty-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--accent-glow, rgba(229,9,20,0.4));
}
/* Light theme empty state */
[data-theme="light"] .empty-state-illustration svg {
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
}
[data-theme="light"] .empty-state-illustration .empty-title {
    color: #222;
}
[data-theme="light"] .empty-state-illustration .empty-subtitle {
    color: #666;
}
/* OLED empty state */
[data-theme="oled"] .empty-state-illustration svg {
    filter: drop-shadow(0 8px 24px rgba(229,9,20,0.1));
}

/* ----------------------------------------------------------
   4. MICRO-INTERACTION FEEDBACK ON FAVORITE TOGGLE
   ---------------------------------------------------------- */
.favorite-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 20;
}
.favorite-burst .burst-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #e50914);
    animation: burstParticle 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.favorite-burst .burst-particle:nth-child(1) { --burst-angle: 0deg; --burst-dist: 28px; }
.favorite-burst .burst-particle:nth-child(2) { --burst-angle: 45deg; --burst-dist: 32px; }
.favorite-burst .burst-particle:nth-child(3) { --burst-angle: 90deg; --burst-dist: 26px; }
.favorite-burst .burst-particle:nth-child(4) { --burst-angle: 135deg; --burst-dist: 30px; }
.favorite-burst .burst-particle:nth-child(5) { --burst-angle: 180deg; --burst-dist: 28px; }
.favorite-burst .burst-particle:nth-child(6) { --burst-angle: 225deg; --burst-dist: 34px; }
.favorite-burst .burst-particle:nth-child(7) { --burst-angle: 270deg; --burst-dist: 26px; }
.favorite-burst .burst-particle:nth-child(8) { --burst-angle: 315deg; --burst-dist: 30px; }
@keyframes burstParticle {
    0% {
        transform: rotate(var(--burst-angle)) translateX(0);
        opacity: 1;
        width: 6px;
        height: 6px;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(var(--burst-angle)) translateX(var(--burst-dist));
        opacity: 0;
        width: 3px;
        height: 3px;
    }
}
/* Heart icon pulse when toggled */
.movie-card .favorite-btn.just-toggled,
.shelf-card .favorite-btn.just-toggled {
    animation: heartPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes heartPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
/* Light theme burst */
[data-theme="light"] .favorite-burst .burst-particle {
    background: var(--accent, #e50914);
}

/* ----------------------------------------------------------
   5. SCROLL-LINKED PROGRESS INDICATOR
   ---------------------------------------------------------- */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #e50914), #ff6b6b, var(--accent, #e50914));
    background-size: 200% 100%;
    z-index: 10000;
    transition: width 0.05s linear;
    box-shadow: 0 0 8px var(--accent-glow, rgba(229,9,20,0.4));
    animation: progressGradientShift 3s linear infinite;
}
@keyframes progressGradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.scroll-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    width: 20px;
    height: 5px;
    background: #fff;
    border-radius: 0 0 4px 0;
    box-shadow: 0 0 10px var(--accent-glow, rgba(229,9,20,0.6));
    opacity: 0.9;
}
/* Light theme progress bar */
[data-theme="light"] .scroll-progress-bar {
    height: 2px;
    box-shadow: 0 0 6px rgba(229,9,20,0.2);
}
[data-theme="light"] .scroll-progress-bar::after {
    opacity: 0.7;
    box-shadow: 0 0 6px rgba(229,9,20,0.3);
}
/* OLED theme progress bar */
[data-theme="oled"] .scroll-progress-bar {
    height: 2px;
}

/* ----------------------------------------------------------
   6. KEYBOARD NAVIGATION HIGHLIGHT (focus-visible)
   ---------------------------------------------------------- */
*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg, #0d0d1a), 0 0 0 4px var(--accent, #e50914);
    border-radius: 4px;
    animation: focusRingPulse 1.5s ease-in-out infinite;
}
@keyframes focusRingPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--bg, #0d0d1a), 0 0 0 4px var(--accent, #e50914); }
    50% { box-shadow: 0 0 0 2px var(--bg, #0d0d1a), 0 0 0 6px var(--accent, #e50914), 0 0 12px var(--accent-glow, rgba(229,9,20,0.3)); }
}
/* Card-specific keyboard focus */
.movie-card:focus-visible,
.shelf-card:focus-visible {
    box-shadow: 0 0 0 3px var(--accent, #e50914), 0 0 20px var(--accent-glow, rgba(229,9,20,0.3));
    transform: translateY(-4px);
    border-radius: var(--card-radius, 12px);
}
/* Button keyboard focus */
button:focus-visible,
.nav-tab:focus-visible,
.view-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--bg, #0d0d1a), 0 0 0 4px var(--accent, #e50914);
    border-radius: 8px;
}
/* Light theme focus */
[data-theme="light"] *:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent, #e50914);
}
[data-theme="light"] *:focus-visible {
    animation: focusRingPulseLight 1.5s ease-in-out infinite;
}
@keyframes focusRingPulseLight {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent, #e50914); }
    50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--accent, #e50914), 0 0 8px rgba(229,9,20,0.15)); }
}
/* OLED theme focus */
[data-theme="oled"] *:focus-visible {
    box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--accent, #e50914);
}

/* ----------------------------------------------------------
   7. GENRE TAG COLOR CODING
   ---------------------------------------------------------- */
.genre-tag--action    { --genre-color: #e53935; --genre-bg: rgba(229,57,53,0.15); }
.genre-tag--adventure { --genre-color: #ff9800; --genre-bg: rgba(255,152,0,0.15); }
.genre-tag--comedy    { --genre-color: #fdd835; --genre-bg: rgba(253,216,53,0.15); color: #333 !important; }
.genre-tag--drama     { --genre-color: #ab47bc; --genre-bg: rgba(171,71,188,0.15); }
.genre-tag--horror    { --genre-color: #6a1b9a; --genre-bg: rgba(106,27,154,0.2); }
.genre-tag--sci-fi    { --genre-color: #00e5ff; --genre-bg: rgba(0,229,255,0.12); }
.genre-tag--thriller  { --genre-color: #ef6c00; --genre-bg: rgba(239,108,0,0.15); }
.genre-tag--romance   { --genre-color: #f06292; --genre-bg: rgba(240,98,146,0.15); }
.genre-tag--fantasy   { --genre-color: #7c4dff; --genre-bg: rgba(124,77,255,0.15); }
.genre-tag--animation { --genre-color: #26c6da; --genre-bg: rgba(38,198,218,0.15); }
.genre-tag--documentary { --genre-color: #8d6e63; --genre-bg: rgba(141,110,99,0.15); }
.genre-tag--mystery   { --genre-color: #5c6bc0; --genre-bg: rgba(92,107,192,0.15); }
.genre-tag--crime     { --genre-color: #c62828; --genre-bg: rgba(198,40,40,0.15); }
.genre-tag--family    { --genre-color: #66bb6a; --genre-bg: rgba(102,187,106,0.15); }
.genre-tag--musical   { --genre-color: #ec407a; --genre-bg: rgba(236,64,122,0.15); }
.genre-tag--war       { --genre-color: #78909c; --genre-bg: rgba(120,144,156,0.15); }
.genre-tag--western   { --genre-color: #a1887f; --genre-bg: rgba(161,136,127,0.15); }
.genre-tag--biography { --genre-color: #5e35b1; --genre-bg: rgba(94,53,177,0.15); }
.genre-tag--history   { --genre-color: #8d6e63; --genre-bg: rgba(141,110,99,0.15); }
.genre-tag--sport     { --genre-color: #43a047; --genre-bg: rgba(67,160,71,0.15); }
.genre-tag--music     { --genre-color: #ec407a; --genre-bg: rgba(236,64,122,0.15); }

.genre-tag[data-genre],
.card-meta-overlay .meta-genre-tag[data-genre] {
    background: var(--genre-bg, rgba(255,255,255,0.1));
    color: var(--genre-color, var(--text-secondary, #ccc));
    border: 1px solid var(--genre-color, transparent);
    transition: background 0.2s, transform 0.15s;
}
.genre-tag[data-genre]:hover {
    background: var(--genre-color);
    color: #fff;
    transform: scale(1.05);
}
/* Light theme genre tags */
[data-theme="light"] .genre-tag--comedy { color: #5d4037 !important; }
[data-theme="light"] .genre-tag--horror { --genre-bg: rgba(106,27,154,0.1); }
[data-theme="light"] .genre-tag[data-genre]:hover {
    color: #fff;
}
/* OLED theme genre tags */
[data-theme="oled"] .genre-tag--horror { --genre-bg: rgba(106,27,154,0.3); }

/* ----------------------------------------------------------
   8. CARD QUALITY BADGE REDESIGN — Glass-style
   ---------------------------------------------------------- */
.quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}
.quality-badge:hover {
    transform: scale(1.08);
}
.quality-badge--4k {
    background: rgba(255,215,0,0.2);
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255,215,0,0.4);
    box-shadow: 0 0 10px rgba(255,215,0,0.15), inset 0 0 12px rgba(255,215,0,0.05);
    border-color: rgba(255,215,0,0.3);
}
.quality-badge--1080p {
    background: rgba(0,200,255,0.15);
    color: #00c8ff;
    text-shadow: 0 0 8px rgba(0,200,255,0.3);
    box-shadow: 0 0 10px rgba(0,200,255,0.12), inset 0 0 12px rgba(0,200,255,0.04);
    border-color: rgba(0,200,255,0.25);
}
.quality-badge--720p {
    background: rgba(76,175,80,0.18);
    color: #66bb6a;
    text-shadow: 0 0 6px rgba(76,175,80,0.3);
    box-shadow: 0 0 8px rgba(76,175,80,0.1);
    border-color: rgba(76,175,80,0.25);
}
.quality-badge--sd {
    background: rgba(158,158,158,0.2);
    color: #bdbdbd;
    box-shadow: none;
    border-color: rgba(158,158,158,0.2);
}
/* Light theme quality badges */
[data-theme="light"] .quality-badge--4k {
    background: rgba(180,140,0,0.12);
    color: #b8860b;
    text-shadow: none;
    box-shadow: 0 0 6px rgba(180,140,0,0.1);
    border-color: rgba(180,140,0,0.2);
}
[data-theme="light"] .quality-badge--1080p {
    background: rgba(0,120,200,0.1);
    color: #0077cc;
    text-shadow: none;
    box-shadow: 0 0 6px rgba(0,120,200,0.08);
    border-color: rgba(0,120,200,0.2);
}
[data-theme="light"] .quality-badge--720p {
    background: rgba(46,125,50,0.1);
    color: #2e7d32;
    text-shadow: none;
    border-color: rgba(46,125,50,0.2);
}
[data-theme="light"] .quality-badge--sd {
    background: rgba(100,100,100,0.08);
    color: #757575;
    border-color: rgba(100,100,100,0.15);
}
/* OLED quality badges */
[data-theme="oled"] .quality-badge--4k {
    background: rgba(255,215,0,0.12);
    box-shadow: 0 0 12px rgba(255,215,0,0.1);
}

/* ----------------------------------------------------------
   9. TAB BAR SCROLL INDICATOR ARROWS
   ---------------------------------------------------------- */
.tab-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.tab-scroll-container .nav-tabs {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
}
.tab-scroll-container .nav-tabs::-webkit-scrollbar {
    display: none;
}
.tab-scroll-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-card, #1a1a2e);
    color: var(--text-secondary, #888);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 5;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.tab-scroll-arrow:hover {
    background: var(--accent, #e50914);
    color: #fff;
    transform: scale(1.1);
}
.tab-scroll-arrow:active {
    transform: scale(0.95);
}
.tab-scroll-arrow--left {
    margin-right: 4px;
}
.tab-scroll-arrow--right {
    margin-left: 4px;
}
.tab-scroll-container.can-scroll-left .tab-scroll-arrow--left,
.tab-scroll-container.can-scroll-right .tab-scroll-arrow--right {
    display: flex;
    animation: arrowFadeIn 0.3s ease;
}
@keyframes arrowFadeIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
/* Light theme scroll arrows */
[data-theme="light"] .tab-scroll-arrow {
    background: #eee;
    color: #555;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .tab-scroll-arrow:hover {
    background: var(--accent, #e50914);
    color: #fff;
}
/* OLED theme scroll arrows */
[data-theme="oled"] .tab-scroll-arrow {
    background: #111;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ----------------------------------------------------------
   10. DETAIL PAGE HERO GRADIENT ANIMATION
   Hero overlay removed — user preference
   ---------------------------------------------------------- */
.detail-hero {
    position: relative;
    overflow: hidden;
}
.detail-hero::after {
    display: none;
}
[data-theme="light"] .detail-hero::after {
    display: none;
}
[data-theme="oled"] .detail-hero::after {
    display: none;
}

/* ----------------------------------------------------------
   11. RATING STAR SHIMMER EFFECT
   ---------------------------------------------------------- */
.user-rating-stars {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.user-rating-stars::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,215,0,0.3) 40%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,215,0,0.3) 60%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.user-rating-stars:hover::after {
    opacity: 1;
    animation: starShimmer 0.8s ease-in-out;
}
@keyframes starShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
.user-rating-stars .star {
    transition: transform 0.15s, filter 0.15s;
}
.user-rating-stars:hover .star {
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}
.user-rating-stars:hover .star:hover {
    transform: scale(1.25) rotate(-8deg);
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.8));
}
/* Light theme rating shimmer */
[data-theme="light"] .user-rating-stars::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,180,0,0.2) 40%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,180,0,0.2) 60%,
        transparent 100%
    );
}

/* ----------------------------------------------------------
   12. SEARCH RESULTS COUNT BADGE
   ---------------------------------------------------------- */
.search-results-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-secondary, #888);
    font-weight: 500;
    transition: opacity 0.3s, transform 0.3s;
    animation: badgeSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.search-results-badge .results-count {
    font-weight: 800;
    color: var(--accent, #e50914);
    font-size: 0.85rem;
}
.search-results-badge .results-label {
    font-weight: 400;
}
@keyframes badgeSlideIn {
    0% { opacity: 0; transform: translateY(-8px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.search-results-badge.badge-updating {
    animation: badgePulseUpdate 0.4s ease;
}
@keyframes badgePulseUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* Light theme search badge */
[data-theme="light"] .search-results-badge {
    background: #f0f0f5;
    border-color: rgba(0,0,0,0.08);
    color: #555;
}
[data-theme="light"] .search-results-badge .results-count {
    color: var(--accent, #e50914);
}
/* OLED search badge */
[data-theme="oled"] .search-results-badge {
    background: #0a0a0a;
    border-color: rgba(255,255,255,0.06);
}

/* ----------------------------------------------------------
   13. TOAST NOTIFICATION TYPE ICONS
   ---------------------------------------------------------- */
.toast-notification {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    min-width: 280px;
    max-width: 420px;
    border-radius: 10px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(30,30,50,0.92);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toastSlideIn {
    0% { opacity: 0; transform: translateX(40px) scale(0.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
}
.toast-icon--success {
    background: rgba(76,175,80,0.2);
    color: #4caf50;
    border: 1px solid rgba(76,175,80,0.3);
}
.toast-icon--error {
    background: rgba(244,67,54,0.2);
    color: #f44336;
    border: 1px solid rgba(244,67,54,0.3);
}
.toast-icon--info {
    background: rgba(33,150,243,0.2);
    color: #2196f3;
    border: 1px solid rgba(33,150,243,0.3);
    font-style: italic;
    font-family: Georgia, serif;
}
.toast-icon--warning {
    background: rgba(255,152,0,0.2);
    color: #ff9800;
    border: 1px solid rgba(255,152,0,0.3);
}
.toast-body {
    flex: 1;
    min-width: 0;
}
.toast-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary, #eee);
    margin-bottom: 2px;
}
.toast-message {
    font-size: 0.75rem;
    color: var(--text-secondary, #aaa);
    line-height: 1.4;
}
/* Light theme toasts */
[data-theme="light"] .toast-notification {
    background: rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
[data-theme="light"] .toast-title {
    color: #222;
}
[data-theme="light"] .toast-message {
    color: #666;
}
/* OLED toasts */
[data-theme="oled"] .toast-notification {
    background: rgba(10,10,10,0.96);
    border-color: rgba(255,255,255,0.06);
}

/* ----------------------------------------------------------
   14. CARD WATCHED OVERLAY
   ---------------------------------------------------------- */
.card-watched-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    border-radius: inherit;
    z-index: 6;
    pointer-events: none;
    animation: watchedOverlayIn 0.4s ease;
}
@keyframes watchedOverlayIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.card-watched-overlay .watched-eye-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    opacity: 0.85;
}
.card-watched-overlay .watched-eye-icon svg {
    width: 100%;
    height: 100%;
    fill: rgba(255,255,255,0.8);
}
.card-watched-overlay .watched-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* Light theme watched overlay */
[data-theme="light"] .card-watched-overlay {
    background: rgba(255,255,255,0.6);
}
[data-theme="light"] .card-watched-overlay .watched-eye-icon svg {
    fill: rgba(0,0,0,0.5);
}
[data-theme="light"] .card-watched-overlay .watched-label {
    color: rgba(0,0,0,0.5);
    text-shadow: none;
}
/* OLED watched overlay */
[data-theme="oled"] .card-watched-overlay {
    background: rgba(0,0,0,0.65);
}

/* ----------------------------------------------------------
   15. SMOOTH VIEW MODE TRANSITION
   ---------------------------------------------------------- */
.movie-grid,
.card-grid,
.poster-wall-grid {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.movie-grid.view-transitioning,
.card-grid.view-transitioning,
.poster-wall-grid.view-transitioning {
    opacity: 0;
    transform: scale(0.97);
}
.movie-grid.view-entering,
.card-grid.view-entering,
.poster-wall-grid.view-entering {
    animation: viewModeEnter 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes viewModeEnter {
    0% { opacity: 0; transform: scale(0.97) translateY(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Individual card stagger animation on view mode change */
.view-entering .movie-card,
.view-entering .shelf-card,
.view-entering .poster-card {
    animation: cardStaggerIn 0.3s ease both;
}
.view-entering .movie-card:nth-child(1),
.view-entering .shelf-card:nth-child(1),
.view-entering .poster-card:nth-child(1) { animation-delay: 0.02s; }
.view-entering .movie-card:nth-child(2),
.view-entering .shelf-card:nth-child(2),
.view-entering .poster-card:nth-child(2) { animation-delay: 0.04s; }
.view-entering .movie-card:nth-child(3),
.view-entering .shelf-card:nth-child(3),
.view-entering .poster-card:nth-child(3) { animation-delay: 0.06s; }
.view-entering .movie-card:nth-child(4),
.view-entering .shelf-card:nth-child(4),
.view-entering .poster-card:nth-child(4) { animation-delay: 0.08s; }
.view-entering .movie-card:nth-child(5),
.view-entering .shelf-card:nth-child(5),
.view-entering .poster-card:nth-child(5) { animation-delay: 0.10s; }
.view-entering .movie-card:nth-child(n+6),
.view-entering .shelf-card:nth-child(n+6),
.view-entering .poster-card:nth-child(n+6) { animation-delay: 0.12s; }
@keyframes cardStaggerIn {
    0% { opacity: 0; transform: translateY(10px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Light theme view transition */
[data-theme="light"] .view-entering .movie-card,
[data-theme="light"] .view-entering .shelf-card,
[data-theme="light"] .view-entering .poster-card {
    animation: cardStaggerInLight 0.3s ease both;
}
@keyframes cardStaggerInLight {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE RESPONSIVE BREAKPOINTS — ALL 15 SECTIONS
   ============================================================ */

/* --- 768px and below --- */
@media (max-width: 768px) {
    /* 1. View toggle bar */
    .view-toggle-bar {
        gap: 1px;
        padding: 2px;
    }
    .view-toggle-bar .view-btn {
        width: 34px;
        height: 30px;
    }
    .view-toggle-bar .view-btn::before {
        display: none; /* hide tooltips on tablet */
    }

    /* 2. Card meta overlay */
    .card-meta-overlay .meta-title {
        font-size: 0.78rem;
    }
    .card-meta-overlay .meta-detail {
        font-size: 0.65rem;
    }

    /* 3. Empty state */
    .empty-state-illustration svg {
        width: 90px;
        height: 90px;
    }
    .empty-state-illustration .empty-title {
        font-size: 1rem;
    }

    /* 4. Favorite burst - smaller particles */
    .favorite-burst .burst-particle {
        width: 4px;
        height: 4px;
    }

    /* 5. Scroll progress bar */
    .scroll-progress-bar {
        height: 2px;
    }

    /* 7. Genre tags */
    .genre-tag[data-genre] {
        font-size: 0.6rem;
        padding: 2px 5px;
    }

    /* 8. Quality badges */
    .quality-badge {
        padding: 2px 6px;
        font-size: 0.58rem;
    }

    /* 9. Tab scroll arrows */
    .tab-scroll-arrow {
        width: 28px;
        height: 28px;
    }

    /* 10. Hero — no animated gradient */

    /* 11. Rating stars */
    .user-rating-stars:hover .star:hover {
        transform: scale(1.15);
    }

    /* 12. Search results badge */
    .search-results-badge {
        padding: 3px 8px;
        font-size: 0.7rem;
    }

    /* 13. Toast */
    .toast-notification {
        min-width: 240px;
        max-width: 360px;
        padding: 10px 14px;
    }

    /* 14. Watched overlay */
    .card-watched-overlay .watched-eye-icon {
        width: 26px;
        height: 26px;
    }
    .card-watched-overlay .watched-label {
        font-size: 0.55rem;
    }

    /* 15. View transition */
    .view-entering .movie-card,
    .view-entering .shelf-card,
    .view-entering .poster-card {
        animation: none !important; /* skip stagger on tablet for performance */
    }
}

/* --- 480px and below --- */
@media (max-width: 480px) {
    /* 1. View toggle bar */
    .view-toggle-bar {
        gap: 0;
        padding: 2px;
        border-radius: 10px;
    }
    .view-toggle-bar .view-btn {
        width: 30px;
        height: 28px;
        border-radius: 7px;
    }
    .view-toggle-bar .view-btn.active::after {
        width: 12px;
        height: 2px;
    }

    /* 2. Card meta overlay */
    .card-meta-overlay .meta-title {
        font-size: 0.72rem;
    }
    .card-meta-overlay .meta-detail {
        font-size: 0.6rem;
    }
    .card-meta-overlay .meta-genre-tag {
        font-size: 0.55rem;
        padding: 1px 5px;
    }

    /* 3. Empty state */
    .empty-state-illustration svg {
        width: 72px;
        height: 72px;
    }
    .empty-state-illustration .empty-title {
        font-size: 0.9rem;
    }
    .empty-state-illustration .empty-subtitle {
        font-size: 0.78rem;
    }

    /* 4. Favorite burst */
    .favorite-burst .burst-particle {
        width: 3px;
        height: 3px;
    }

    /* 5. Scroll progress bar */
    .scroll-progress-bar {
        height: 2px;
    }
    .scroll-progress-bar::after {
        width: 12px;
        height: 3px;
    }

    /* 6. Keyboard focus */
    *:focus-visible {
        box-shadow: 0 0 0 2px var(--bg, #0d0d1a), 0 0 0 3px var(--accent, #e50914);
    }

    /* 7. Genre tags */
    .genre-tag[data-genre] {
        font-size: 0.55rem;
        padding: 1px 4px;
    }

    /* 8. Quality badges */
    .quality-badge {
        padding: 1px 5px;
        font-size: 0.52rem;
        border-radius: 4px;
    }

    /* 9. Tab scroll arrows */
    .tab-scroll-arrow {
        width: 24px;
        height: 24px;
    }

    /* 10. Hero — no animated gradient */

    /* 11. Rating stars */
    .user-rating-stars .star {
        font-size: 1rem;
    }

    /* 12. Search results badge */
    .search-results-badge {
        padding: 2px 6px;
        font-size: 0.65rem;
        border-radius: 14px;
    }
    .search-results-badge .results-count {
        font-size: 0.75rem;
    }

    /* 13. Toast */
    .toast-notification {
        min-width: 200px;
        max-width: 300px;
        padding: 8px 10px;
        gap: 8px;
    }
    .toast-icon {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    .toast-title {
        font-size: 0.75rem;
    }
    .toast-message {
        font-size: 0.68rem;
    }

    /* 14. Watched overlay */
    .card-watched-overlay .watched-eye-icon {
        width: 22px;
        height: 22px;
    }
    .card-watched-overlay .watched-label {
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }

    /* 15. View transition */
    @keyframes cardStaggerIn {
        0% { opacity: 0; transform: translateY(6px); }
        100% { opacity: 1; transform: translateY(0); }
    }
}

/* ============================================================
   CSS CUSTOM PROPERTIES FOR TASK 9-a ENHANCEMENTS
   (Centralized for easy theming overrides)
   ============================================================ */
:root {
    --view-toggle-bg: var(--bg-card, #1a1a2e);
    --view-toggle-radius: 12px;
    --view-btn-size: 38px;
    --view-btn-height: 34px;
    --scroll-progress-height: 3px;
    --focus-ring-color: var(--accent, #e50914);
    --focus-ring-width: 4px;
    --quality-badge-radius: 6px;
    --toast-radius: 10px;
    --toast-backdrop: 16px;
    --watched-overlay-opacity: 0.55;
    --view-transition-duration: 0.25s;
    --card-stagger-delay: 0.02s;
    --hero-gradient-duration: 12s;
    --shimmer-speed: 0.8s;
    --burst-particle-count: 8;
    --burst-duration: 0.6s;
    --empty-float-duration: 3s;
    --tab-arrow-size: 32px;
}

[data-theme="light"] {
    --view-toggle-bg: #f0f0f5;
    --scroll-progress-height: 2px;
    --watched-overlay-opacity: 0.6;
}

[data-theme="oled"] {
    --view-toggle-bg: #0a0a0a;
    --scroll-progress-height: 2px;
    --watched-overlay-opacity: 0.65;
}

/* ============================================================================
   V5 NEW FEATURES — Fullscreen, Recently Played, Duplicate Finder, etc.
   ============================================================================ */

/* Fullscreen Toggle Button */
#fullscreenToggleBtn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: .5rem .75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}
#fullscreenToggleBtn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--text-muted);
}
#fullscreenToggleBtn:active { transform: scale(0.95); }
#fullscreenToggleBtn .fs-icon { transition: transform 0.3s ease; }
#fullscreenToggleBtn:hover .fs-icon { transform: rotate(90deg); }

/* Recently Played Widget */
.recently-played-widget {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.recently-played-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.recently-played-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.recently-played-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    padding: 8px 12px;
    background: var(--surface-hover);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.recently-played-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.recently-played-poster {
    width: 36px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface);
}
.recently-played-poster .poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recently-played-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.recently-played-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recently-played-year {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Duplicate Finder Modal */
.duplicate-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.duplicate-modal.active { display: flex; }
.duplicate-modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.duplicate-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.duplicate-modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}
.duplicate-count {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--accent);
    color: white;
    font-weight: 500;
}
.duplicate-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    line-height: 1;
}
.duplicate-modal-close:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.duplicate-groups {
    padding: 12px;
}
.duplicate-group {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.duplicate-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--surface-hover);
    transition: background 0.2s;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}
.duplicate-group-header:hover { background: var(--surface); }
.duplicate-group-header svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.duplicate-group.expanded .duplicate-group-header svg {
    transform: rotate(180deg);
}
.duplicate-group-items {
    display: none;
    padding: 8px 12px;
}
.duplicate-group.expanded .duplicate-group-items {
    display: block;
}
.duplicate-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}
.duplicate-item:hover {
    background: var(--surface-hover);
}
.duplicate-item-title {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.duplicate-item-year {
    color: var(--text-secondary);
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}
.duplicate-item-size {
    color: var(--text-secondary);
    font-size: 12px;
    min-width: 70px;
    text-align: right;
}

/* Duplicate Finder Button (for Stats tab) */
.find-duplicates-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.find-duplicates-btn:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Light theme overrides */
[data-theme="light"] .recently-played-widget {
    background: #fff;
    border-color: #e5e5e5;
}
[data-theme="light"] .recently-played-item {
    background: #f8f8f8;
}
[data-theme="light"] .recently-played-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
[data-theme="light"] .duplicate-modal-content {
    background: #fff;
    border-color: #e5e5e5;
}
[data-theme="light"] .duplicate-modal-header {
    background: #fff;
    border-color: #e5e5e5;
}
[data-theme="light"] .duplicate-group {
    border-color: #e5e5e5;
}
[data-theme="light"] .duplicate-group-header {
    background: #f8f8f8;
}

/* OLED theme overrides */
[data-theme="oled"] .recently-played-widget {
    background: #111;
    border-color: #333;
}
[data-theme="oled"] .recently-played-item {
    background: #1a1a1a;
}
[data-theme="oled"] .duplicate-modal-content {
    background: #111;
    border-color: #333;
}
[data-theme="oled"] .duplicate-modal-header {
    background: #111;
    border-color: #333;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .recently-played-list {
        gap: 8px;
    }
    .recently-played-item {
        min-width: 160px;
        padding: 6px 10px;
    }
    .duplicate-modal-content {
        max-width: 100%;
        margin: 10px;
    }
}
@media (max-width: 480px) {
    .recently-played-item {
        min-width: 140px;
    }
    .recently-played-title {
        font-size: 12px;
    }
}
/* ============================================================================
   TABLE VIEW - Structured tabular view for media items
   ============================================================================ */
.movie-table-view {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}
.movie-table-header {
    display: grid;
    grid-template-columns: 50px 3fr 60px 70px 2fr 80px 70px;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface-elevated, rgba(255,255,255,0.05));
    border-bottom: 2px solid var(--border-color, rgba(255,255,255,0.1));
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: 8px 8px 0 0;
    backdrop-filter: blur(10px);
}
.movie-table-row {
    display: grid;
    grid-template-columns: 50px 3fr 60px 70px 2fr 80px 70px;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
    cursor: pointer;
    transition: background 0.15s ease;
}
.movie-table-row:hover {
    background: var(--surface-hover, rgba(255,255,255,0.08));
}
.movie-table-row.selected {
    background: var(--accent-dim, rgba(229,9,20,0.15));
    border-left: 3px solid var(--accent);
}
.mt-col { padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-col-poster { width: 36px; height: 52px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.mt-col-poster img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; }
.mt-col-poster .no-poster-placeholder { width: 36px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--surface-elevated, rgba(255,255,255,0.05)); border-radius: 4px; }
.mt-col-title { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-primary); }
.mt-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-fav-icon { color: var(--accent); flex-shrink: 0; }
.mt-watched-icon { color: var(--text-muted); flex-shrink: 0; }
.mt-col-year { color: var(--text-secondary); text-align: center; }
.mt-col-rating { text-align: center; }
.mt-rating { color: var(--star-color, #f5c518); font-weight: 600; }
.mt-col-genres { color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-col-size { color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.mt-col-quality { text-align: center; }
.movie-table-row .card-checkbox {
    width: 18px; height: 18px; border: 2px solid var(--border-color);
    border-radius: 4px; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.movie-table-row .card-checkbox svg { opacity: 0; transition: opacity 0.15s ease; }
.movie-table-row.selected .card-checkbox { background: var(--accent); border-color: var(--accent); }
.movie-table-row.selected .card-checkbox svg { opacity: 1; color: #fff; }
[data-theme="light"] .movie-table-header { background: rgba(0,0,0,0.03); border-bottom-color: rgba(0,0,0,0.12); }
[data-theme="light"] .movie-table-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .movie-table-row:hover { background: rgba(0,0,0,0.04); }
[data-theme="oled"] .movie-table-header { background: rgba(255,255,255,0.03); }
[data-theme="oled"] .movie-table-row:hover { background: rgba(255,255,255,0.05); }
@media (max-width: 900px) {
    .movie-table-header, .movie-table-row { grid-template-columns: 40px 1fr 50px 60px; }
    .mt-col-genres, .mt-col-size, .mt-col-quality { display: none; }
}
@media (max-width: 560px) {
    .movie-table-header, .movie-table-row { grid-template-columns: 36px 1fr 50px; }
    .mt-col-rating { display: none; }
    .mt-col-poster img { width: 30px; height: 44px; }
}

/* ============================================================================
   SELECT MODE CHECKBOXES - For detail, compact, poster wall, and table views
   ============================================================================ */
/* Detail view card needs position relative for checkbox overlay */
.movie-detail-card { position: relative; }
.card-checkbox-detail {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.6) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(4px);
}
/* Compact view checkbox overlay */
.compact-card { position: relative; }
.card-checkbox-compact {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.6) !important;
    border-radius: 4px !important;
    backdrop-filter: blur(4px);
}
/* Poster wall checkbox overlay */
.poster-wall-item { position: relative; }
.card-checkbox-poster {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.6) !important;
    border-radius: 4px !important;
    backdrop-filter: blur(4px);
    transform: scale(0.85);
}
/* Light theme overrides for select mode checkboxes */
[data-theme="light"] .card-checkbox-detail,
[data-theme="light"] .card-checkbox-compact,
[data-theme="light"] .card-checkbox-poster {
    background: rgba(255,255,255,0.8) !important;
}
/* OLED theme overrides */
[data-theme="oled"] .card-checkbox-detail,
[data-theme="oled"] .card-checkbox-compact,
[data-theme="oled"] .card-checkbox-poster {
    background: rgba(0,0,0,0.7) !important;
}

/* ============================================================================
   V3.1 STYLING ENHANCEMENTS — 10 Enhancement Sections
   ============================================================================ */

/* 1. Table View Row Hover Stripe Effect — Zebra striping for readability */
.movie-table-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}
.movie-table-row:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .movie-table-row:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .movie-table-row:nth-child(even):hover {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="oled"] .movie-table-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}
[data-theme="oled"] .movie-table-row:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.06);
}

/* 2. View Toggle Button Animations — Smooth sliding highlight indicator */
.view-toggle {
    position: relative;
}
/* Sliding highlight indicator removed — accent background on button provides visual */
.view-btn {
    position: relative;
    z-index: 1;
    transition: color 0.25s ease, background 0.25s ease;
}
.view-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px var(--accent-glow, rgba(229,9,20,0.35));
}
/* data-active indicator rules removed — no longer needed */
[data-theme="light"] .view-btn.active {
    color: #fff !important;
    background: var(--accent) !important;
}
[data-theme="light"] .view-toggle::before {
    display: none;
}
[data-theme="oled"] .view-toggle::before {
    display: none;
}

/* 3. Card Entrance Animations — Staggered fade-in for view switches */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.card-stagger-in {
    animation: cardSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}
.card-stagger-in:nth-child(1) { animation-delay: 0.02s; }
.card-stagger-in:nth-child(2) { animation-delay: 0.04s; }
.card-stagger-in:nth-child(3) { animation-delay: 0.06s; }
.card-stagger-in:nth-child(4) { animation-delay: 0.08s; }
.card-stagger-in:nth-child(5) { animation-delay: 0.10s; }
.card-stagger-in:nth-child(6) { animation-delay: 0.12s; }
.card-stagger-in:nth-child(7) { animation-delay: 0.14s; }
.card-stagger-in:nth-child(8) { animation-delay: 0.16s; }
.card-stagger-in:nth-child(9) { animation-delay: 0.18s; }
.card-stagger-in:nth-child(10) { animation-delay: 0.20s; }
.card-stagger-in:nth-child(n+11) { animation-delay: 0.22s; }
.movie-table-row.card-stagger-in {
    animation-name: cardSlideIn;
}

/* 4. Improved Poster Wall Tooltip — Backdrop blur, better shadow, smooth fade-in */
.poster-wall-tooltip {
    background: rgba(15, 15, 25, 0.85) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border-radius: 10px !important;
    padding: 0.65rem 0.85rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    pointer-events: none;
}
.poster-wall-item:hover .poster-wall-tooltip {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
[data-theme="light"] .poster-wall-tooltip {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="oled"] .poster-wall-tooltip {
    background: rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* 5. Table View Poster Thumbnail Hover Zoom */
.mt-col-poster .poster-img {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.mt-col-poster:hover .poster-img.loaded {
    transform: scale(1.25);
}
.mt-col-poster {
    overflow: hidden;
    border-radius: 4px;
}

/* 6. Filter Bar Glass Effect Enhancement */
.shared-filter-bar {
    background: rgba(15, 15, 30, 0.6) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
}
[data-theme="light"] .shared-filter-bar {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="oled"] .shared-filter-bar {
    background: rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* 7. Context Menu Position-Aware Styling — Flip upward when near bottom */
.context-menu.flip-up {
    transform-origin: bottom left;
    animation: contextFlipUp 0.2s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}
@keyframes contextFlipUp {
    from {
        opacity: 0;
        transform: translateY(8px) scaleY(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}
.context-menu:not(.flip-up) {
    transform-origin: top left;
}

/* 8. View Mode Transition — Smooth fade when switching views */
.view-transition-out {
    animation: viewFadeOut 0.15s ease forwards;
}
@keyframes viewFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.view-transition-in {
    animation: viewFadeIn 0.25s ease forwards;
}
@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.movie-grid.view-transition-in,
.movie-detail-grid.view-transition-in,
.movie-compact-list.view-transition-in,
.movie-poster-wall.view-transition-in,
.movie-table-view.view-transition-in {
    animation: viewFadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 9. Select Mode Highlight — Pulsing border when select mode is active */
@keyframes selectPulse {
    0%, 100% { border-color: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { border-color: var(--accent); box-shadow: 0 0 8px 2px var(--accent-glow); }
}
.select-mode .movie-card {
    animation: selectPulse 2.5s ease-in-out infinite;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}
.select-mode .movie-card.selected {
    border-color: var(--accent) !important;
    animation: none;
    box-shadow: 0 0 12px var(--accent-glow);
}
.select-mode .movie-table-row {
    animation: selectPulse 2.5s ease-in-out infinite;
    border-left: 3px solid transparent;
}
.select-mode .movie-table-row.selected {
    border-left-color: var(--accent) !important;
    animation: none;
}
[data-theme="light"] .select-mode .movie-card.selected {
    box-shadow: 0 0 10px rgba(194, 0, 8, 0.15);
}
[data-theme="oled"] .select-mode .movie-card.selected {
    box-shadow: 0 0 16px var(--accent-glow);
}

/* 10. Header Scroll Shadow — Box-shadow on header when scrolled */
.header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: box-shadow 0.3s ease;
}
.header:not(.scrolled) {
    transition: box-shadow 0.3s ease;
}
[data-theme="light"] .header.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.04);
}
[data-theme="oled"] .header.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Table sort header styling */
.mt-sort-header {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mt-sort-header:hover {
    color: var(--accent);
}
.mt-sort-indicator {
    font-size: 0.7em;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
.mt-sort-header.active .mt-sort-indicator {
    opacity: 1;
    color: var(--accent);
}

/* Drag-to-select highlight for table rows */
.movie-table-row.drag-selecting {
    background: var(--accent-glow) !important;
    border-left: 3px solid var(--accent);
}
[data-theme="light"] .movie-table-row.drag-selecting {
    background: rgba(194, 0, 8, 0.08) !important;
}
[data-theme="oled"] .movie-table-row.drag-selecting {
    background: rgba(229, 9, 20, 0.15) !important;
}

/* ============================================================================
   TASK 10-a: COMPREHENSIVE CSS STYLING ENHANCEMENTS
   12 sections appended — dark / light / OLED theme support
   ============================================================================ */

/* ── 1. View Toggle Hover Ripple Effect ── */
.view-btn {
    position: relative;
    overflow: hidden;
}
.view-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.45s ease, height 0.45s ease, opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}
.view-btn:hover:not(.active)::after {
    width: 120%;
    height: 300%;
    opacity: 1;
}
.view-btn > * {
    position: relative;
    z-index: 1;
}
@keyframes viewRipple {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}
.view-btn:active::after {
    animation: viewRipple 0.5s ease-out;
}
[data-theme="light"] .view-btn::after {
    background: radial-gradient(circle, rgba(194, 0, 8, 0.1) 0%, transparent 70%);
}
[data-theme="oled"] .view-btn::after {
    background: radial-gradient(circle, rgba(229, 9, 20, 0.25) 0%, transparent 70%);
}

/* ── 2. Search Box Subtle Pulse Animation on Focus ── */
.search-box input {
    transition: width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-box input:focus {
    animation: searchBreathe 2.4s ease-in-out infinite;
}
@keyframes searchBreathe {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--accent-glow), 0 0 6px rgba(229, 9, 20, 0.08);
    }
    50% {
        box-shadow: 0 0 0 4px var(--accent-glow), 0 0 14px rgba(229, 9, 20, 0.15);
    }
}
[data-theme="light"] .search-box input:focus {
    animation: searchBreatheLight 2.4s ease-in-out infinite;
}
@keyframes searchBreatheLight {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(194, 0, 8, 0.12), 0 0 4px rgba(194, 0, 8, 0.04);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(194, 0, 8, 0.18), 0 0 10px rgba(194, 0, 8, 0.08);
    }
}
[data-theme="oled"] .search-box input:focus {
    animation: searchBreatheOLED 2.4s ease-in-out infinite;
}
@keyframes searchBreatheOLED {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.3), 0 0 8px rgba(229, 9, 20, 0.1);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.45), 0 0 18px rgba(229, 9, 20, 0.2);
    }
}

/* ── 3. Table View Row Hover Enhancement — Left Accent Border Slide-In ── */
.movie-table-row {
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-left-color 0.3s ease, border-left-width 0.2s ease;
}
.movie-table-row:hover {
    border-left-color: var(--accent);
    border-left-width: 3px;
    background: var(--surface-hover, rgba(255,255,255,0.08));
}
@keyframes tableRowSlideIn {
    from { border-left-width: 0; border-left-color: transparent; }
    to { border-left-width: 3px; border-left-color: var(--accent); }
}
.movie-table-row:hover {
    animation: tableRowSlideIn 0.25s ease forwards;
}
[data-theme="light"] .movie-table-row:hover {
    background: rgba(0, 0, 0, 0.04);
    border-left-color: var(--accent);
}
[data-theme="oled"] .movie-table-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent);
}

/* ── 4. Detail Card Hover Lift Effect ── */
.movie-detail-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease;
}
.movie-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(229, 9, 20, 0.12);
    border-color: var(--accent);
}
[data-theme="light"] .movie-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1),
                0 4px 12px rgba(194, 0, 8, 0.08);
}
[data-theme="oled"] .movie-detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6),
                0 4px 16px rgba(229, 9, 20, 0.2);
}

/* ── 5. Compact Card Grid Gap Polish ── */
.compact-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    margin-bottom: 2px;
}
.compact-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--accent-glow);
}
.compact-card + .compact-card {
    margin-top: 2px;
}
/* Subtle separator line between compact cards */
.compact-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}
.compact-card:first-child::before {
    display: none;
}
[data-theme="light"] .compact-card {
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .compact-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(194, 0, 8, 0.08);
}
[data-theme="oled"] .compact-card {
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="oled"] .compact-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(229, 9, 20, 0.2);
}

/* ── 6. Poster Wall Item Hover Zoom + Gradient Overlay ── */
.poster-wall-item {
    position: relative;
}
.poster-wall-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 8px 8px;
}
.poster-wall-item:hover::after {
    opacity: 1;
}
.poster-wall-item:hover img {
    transform: scale(1.08);
}
/* Poster wall overlay title (if present) */
.poster-wall-item .pw-overlay-title {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    z-index: 3;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.poster-wall-item:hover .pw-overlay-title {
    opacity: 1;
    transform: translateY(0);
}
[data-theme="light"] .poster-wall-item::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 100%
    );
}

/* ── 7. Context Menu Item Hover Slide ── */
.context-menu-item {
    position: relative;
    transition: background 0.15s ease, padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease;
}
.context-menu-item:hover {
    padding-left: 1.1rem;
    background: rgba(229, 9, 20, 0.12);
    color: var(--accent);
}
.context-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.context-menu-item:hover::before {
    transform: scaleY(1);
}
[data-theme="light"] .context-menu-item:hover {
    background: rgba(194, 0, 8, 0.08);
}
[data-theme="oled"] .context-menu-item:hover {
    background: rgba(229, 9, 20, 0.18);
}

/* ── 8. Batch Action Bar Slide-up Animation ── */
.batch-action-bar {
    transform: translateY(100%);
    animation: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.batch-action-bar.visible,
.batch-action-bar:not([style*="display: none"]) {
    transform: translateY(0);
}
@keyframes batchSlideUp {
    0% { transform: translateY(100%); opacity: 0; }
    60% { transform: translateY(-4px); opacity: 1; }
    80% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}
.batch-action-bar.slide-in {
    animation: batchSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
[data-theme="light"] .batch-action-bar {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="oled"] .batch-action-bar {
    background: #0a0a0a;
    border-top-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.8);
}

/* ── 9. Card Checkbox Style Enhancement ── */
.card-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-checkbox:hover {
    border-color: var(--accent);
    transform: scale(1.15);
    background: rgba(229, 9, 20, 0.15);
}
.card-checkbox svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(0.5);
}
.movie-card.selected .card-checkbox {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 2px 8px rgba(229, 9, 20, 0.3);
}
.movie-card.selected .card-checkbox svg {
    opacity: 1;
    transform: scale(1);
}
@keyframes checkBounce {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.movie-card.selected .card-checkbox {
    animation: checkBounce 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Table row checkbox stays square for compact layout */
.movie-table-row .card-checkbox {
    border-radius: 4px;
    width: 18px;
    height: 18px;
}
[data-theme="light"] .card-checkbox {
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .card-checkbox:hover {
    background: rgba(194, 0, 8, 0.08);
    border-color: var(--accent);
}
[data-theme="light"] .movie-card.selected .card-checkbox {
    box-shadow: 0 0 0 3px rgba(194, 0, 8, 0.12), 0 2px 8px rgba(194, 0, 8, 0.15);
}
[data-theme="oled"] .card-checkbox {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.6);
}
[data-theme="oled"] .movie-card.selected .card-checkbox {
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.4), 0 2px 10px rgba(229, 9, 20, 0.4);
}

/* ── 10. Mobile Header Responsive Polish ── */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .header-left {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .header-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .search-box {
        order: 10;
        width: 100%;
        flex: 1 1 100%;
    }
    .search-box input {
        width: 100% !important;
    }
    .search-box input:focus {
        width: 100% !important;
    }
    /* Hide non-essential buttons on mobile */
    .header-stats,
    .btn-header:not(.theme-selector),
    .random-pick-btn,
    .select-mode-toggle {
        display: none !important;
    }
    /* Keep theme selector accessible */
    .theme-selector {
        flex-shrink: 0;
    }
    /* View toggle compact */
    .view-toggle {
        flex-shrink: 0;
    }
    .view-btn {
        padding: 0.4rem 0.6rem;
    }
    /* Nav tabs full width below search */
    .nav-tabs-wrapper {
        width: 100%;
        order: 11;
    }
    .nav-tabs {
        width: 100%;
    }
    /* Filter bar full width */
    .filter-bar,
    .shared-filter-bar {
        width: 100%;
    }
    .watched-filter-btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }
    .decade-filter-pills {
        flex-wrap: wrap;
    }
    .decade-pill {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
}
@media (max-width: 480px) {
    .header {
        padding: 0.75rem 1rem;
    }
    .header-title {
        font-size: 1rem;
    }
    .theme-btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
    .app-logo {
        width: 32px;
        height: 32px;
    }
}

/* ── 11. Filter Panel Smooth Open/Close ── */
.advanced-filter-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease,
                margin-top 0.35s ease,
                padding 0.35s ease;
}
.advanced-filter-panel.active {
    max-height: 700px;
    opacity: 1;
}
/* Inner content fade stagger */
.advanced-filter-panel .afp-content {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}
.advanced-filter-panel.active .afp-content {
    opacity: 1;
    transform: translateY(0);
}
[data-theme="oled"] .advanced-filter-panel {
    background: rgba(5, 5, 5, 0.95);
    border-color: rgba(255, 255, 255, 0.04);
}

/* ── 12. Scroll Progress Bar Gradient Enhancement ── */
.scroll-progress-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #ff6b6b 30%,
        #ff9a56 55%,
        #ffcd38 75%,
        var(--accent) 100%
    );
    background-size: 200% 100%;
    animation: scrollGradShift 3s linear infinite;
    box-shadow: 0 0 10px var(--accent-glow),
                0 0 4px var(--accent-glow),
                0 1px 2px rgba(0, 0, 0, 0.3);
}
@keyframes scrollGradShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
[data-theme="light"] .scroll-progress-fill {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #e50914 30%,
        #ff6b6b 55%,
        #c20008 75%,
        var(--accent) 100%
    );
    background-size: 200% 100%;
    animation: scrollGradShift 3s linear infinite;
    box-shadow: 0 0 8px rgba(194, 0, 8, 0.15),
                0 0 3px rgba(194, 0, 8, 0.1);
}
[data-theme="oled"] .scroll-progress-fill {
    background: linear-gradient(
        90deg,
        #e50914 0%,
        #ff2d2d 25%,
        #ff6b6b 50%,
        #ff2d2d 75%,
        #e50914 100%
    );
    background-size: 200% 100%;
    animation: scrollGradShift 3s linear infinite;
    box-shadow: 0 0 14px rgba(229, 9, 20, 0.5),
                0 0 6px rgba(229, 9, 20, 0.35),
                0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   END TASK 10-a: CSS STYLING ENHANCEMENTS
   ============================================================================ */

/* ── Jump to Letter Navigation Sidebar ── */
.jump-to-letter-nav {
    position: fixed;
    top: 50%;
    right: -300px;
    transform: translateY(-50%);
    z-index: 500;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    box-shadow: -8px 0 30px rgba(0,0,0,0.4);
    transition: right 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.jump-to-letter-nav.active {
    right: 16px;
}
.jtl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.jtl-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}
.jtl-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.jtl-letters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.jtl-letter {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.jtl-letter:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: scale(1.1);
}
.jtl-letter:active {
    transform: scale(0.95);
}

/* Jump highlight animation for cards */
@keyframes jumpFlash {
    0% { box-shadow: 0 0 0 0 var(--accent); }
    50% { box-shadow: 0 0 0 6px var(--accent-glow); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.jump-highlight {
    animation: jumpFlash 0.5s ease 3;
}

[data-theme="light"] .jump-to-letter-nav {
    box-shadow: -8px 0 30px rgba(0,0,0,0.1);
}
[data-theme="oled"] .jump-to-letter-nav {
    background: #0a0a0a;
    border-color: #222;
}

@media (max-width: 768px) {
    .jump-to-letter-nav {
        top: auto;
        bottom: -300px;
        right: 50%;
        transform: translateX(50%);
        transition: bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .jump-to-letter-nav.active {
        bottom: 16px;
        right: 50%;
    }
}

/* ============================================================================
   TASK 11: COMPREHENSIVE STYLING IMPROVEMENTS — Polish & Micro-interactions
   10 sections — dark / light / OLED theme support + responsive
   ============================================================================ */

/* ── 1. Smooth Card Selection Glow ── */
/* When a card is in select mode and selected, add a pulsing glow border */
.movie-card.selected {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--accent-glow);
    animation: selectedPulse 2s ease-in-out infinite;
}

@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent-glow); }
    50% { box-shadow: 0 0 0 3px var(--accent), 0 0 24px var(--accent-glow); }
}

[data-theme="light"] .movie-card.selected {
    box-shadow: 0 0 0 2px var(--accent), 0 0 15px rgba(194, 0, 8, 0.15);
}

@keyframes selectedPulseLight {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 8px rgba(194, 0, 8, 0.1); }
    50% { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(194, 0, 8, 0.2); }
}

[data-theme="light"] .movie-card.selected {
    animation-name: selectedPulseLight;
}

[data-theme="oled"] .movie-card.selected {
    box-shadow: 0 0 0 2px var(--accent), 0 0 30px var(--accent-glow);
}

@keyframes selectedPulseOLED {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--accent-glow); }
    50% { box-shadow: 0 0 0 4px var(--accent), 0 0 40px var(--accent-glow); }
}

[data-theme="oled"] .movie-card.selected {
    animation-name: selectedPulseOLED;
}

@media (max-width: 768px) {
    .movie-card.selected {
        box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent-glow);
    }
    @keyframes selectedPulseMobile {
        0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 8px var(--accent-glow); }
        50% { box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--accent-glow); }
    }
    .movie-card.selected {
        animation-name: selectedPulseMobile;
    }
}

@media (max-width: 480px) {
    .movie-card.selected {
        box-shadow: 0 0 0 1px var(--accent), 0 0 6px var(--accent-glow);
    }
}


/* ── 2. Enhanced Loading Skeleton Shimmer ── */
/* Better skeleton loading placeholders with wave effect */
.skeleton-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent 100%
    );
    animation: skeletonWave 1.8s ease-in-out infinite;
}

@keyframes skeletonWave {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

[data-theme="light"] .skeleton-card::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.03) 40%,
        rgba(0, 0, 0, 0.06) 50%,
        rgba(0, 0, 0, 0.03) 60%,
        transparent 100%
    );
}

[data-theme="oled"] .skeleton-card::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 60%,
        transparent 100%
    );
}

@media (max-width: 768px) {
    .skeleton-card {
        border-radius: 8px;
    }
    .skeleton-card::after {
        animation-duration: 2.2s;
    }
}

@media (max-width: 480px) {
    .skeleton-card {
        border-radius: 6px;
    }
}


/* ── 3. Toast Notification Type Icons ── */
/* Add colored left-border indicators to toasts by type */
.toast {
    border-left: 3px solid var(--accent);
}

.toast.success {
    border-left: 4px solid #2ecc71;
}

.toast.error {
    border-left: 4px solid #e74c3c;
}

.toast.warning {
    border-left: 4px solid #f39c12;
}

.toast.info {
    border-left: 4px solid var(--accent);
}

[data-theme="light"] .toast.success {
    border-left-color: #28a745;
}

[data-theme="light"] .toast.error {
    border-left-color: #dc3545;
}

[data-theme="light"] .toast.warning {
    border-left-color: #d97706;
}

[data-theme="oled"] .toast {
    background: #111;
    border: 1px solid #222;
}

[data-theme="oled"] .toast.success {
    border-left: 4px solid #2ecc71;
}

[data-theme="oled"] .toast.error {
    border-left: 4px solid #e74c3c;
}

[data-theme="oled"] .toast.warning {
    border-left: 4px solid #f39c12;
}

[data-theme="oled"] .toast.info {
    border-left: 4px solid var(--accent);
}

@media (max-width: 768px) {
    .toast-container {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }
    .toast {
        max-width: 100%;
        font-size: 0.85rem;
        padding: 0.7rem 1rem;
    }
}

@media (max-width: 480px) {
    .toast-container {
        bottom: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
    }
    .toast {
        border-left-width: 3px;
    }
}


/* ── 4. Genre Pill Hover Scale Effect ── */
/* Genre filter pills scale up slightly on hover with glow */
.genre-pill,
.decade-pill {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.genre-pill:hover,
.decade-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.genre-pill.active,
.decade-pill.active {
    transform: scale(1.05);
    box-shadow: 0 2px 12px var(--accent-glow);
}

[data-theme="light"] .genre-pill:hover,
[data-theme="light"] .decade-pill:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .genre-pill.active,
[data-theme="light"] .decade-pill.active {
    box-shadow: 0 2px 12px rgba(194, 0, 8, 0.2);
}

[data-theme="oled"] .genre-pill:hover,
[data-theme="oled"] .decade-pill:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

[data-theme="oled"] .genre-pill.active,
[data-theme="oled"] .decade-pill.active {
    box-shadow: 0 2px 16px var(--accent-glow);
}

@media (max-width: 768px) {
    .genre-pill:hover,
    .decade-pill:hover {
        transform: scale(1.03);
    }
    .genre-pill.active,
    .decade-pill.active {
        transform: scale(1.03);
    }
}

@media (max-width: 480px) {
    .genre-pill,
    .decade-pill {
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .genre-pill:hover,
    .decade-pill:hover {
        transform: scale(1.02);
    }
    .genre-pill.active,
    .decade-pill.active {
        transform: scale(1.02);
    }
}


/* ── 5. Detail Page Cast Card Hover ── */
/* Actor cards in detail page lift on hover with shadow */
.cast-card,
.detail-cast-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cast-card:hover,
.detail-cast-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .cast-card:hover,
[data-theme="light"] .detail-cast-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="oled"] .cast-card:hover,
[data-theme="oled"] .detail-cast-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 12px var(--accent-glow);
}

@media (max-width: 768px) {
    .cast-card:hover,
    .detail-cast-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 480px) {
    .cast-card:hover,
    .detail-cast-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}


/* ── 6. Improved Scrollbar Styling ── */
/* Thin custom scrollbar for the entire app */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="oled"] *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="oled"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

[data-theme="light"] * {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

[data-theme="oled"] * {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

@media (max-width: 768px) {
    *::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    * {
        scrollbar-width: none;
    }
}

@media (max-width: 480px) {
    *::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
}


/* ── 7. Nav Tab Active Underline Animation ── */
/* Smooth slide-in underline for the active nav tab */
.nav-tab {
    position: relative;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    animation: tabUnderlineIn 0.3s ease forwards;
}

@keyframes tabUnderlineIn {
    from { width: 0; opacity: 0; }
    to { width: 70%; opacity: 1; }
}

[data-theme="light"] .nav-tab.active::after {
    height: 2px;
    background: var(--accent);
    box-shadow: 0 1px 3px rgba(194, 0, 8, 0.3);
}

[data-theme="oled"] .nav-tab.active::after {
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

@keyframes tabUnderlineInOLED {
    from { width: 0; opacity: 0; box-shadow: 0 0 0 transparent; }
    to { width: 70%; opacity: 1; box-shadow: 0 0 8px var(--accent-glow); }
}

[data-theme="oled"] .nav-tab.active::after {
    animation-name: tabUnderlineInOLED;
}

@media (max-width: 768px) {
    .nav-tab.active::after {
        width: 60%;
        height: 2px;
    }
    @keyframes tabUnderlineInMobile {
        from { width: 0; opacity: 0; }
        to { width: 60%; opacity: 1; }
    }
    .nav-tab.active::after {
        animation-name: tabUnderlineInMobile;
    }
}

@media (max-width: 480px) {
    .nav-tab.active::after {
        width: 50%;
    }
    @keyframes tabUnderlineInSmall {
        from { width: 0; opacity: 0; }
        to { width: 50%; opacity: 1; }
    }
    .nav-tab.active::after {
        animation-name: tabUnderlineInSmall;
    }
}


/* ── 8. Card Quality Badge Enhancement ── */
/* Quality badges (1080p, 720p, 4K) with gradient background */
.movie-quality {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.movie-quality:not(.tv-badge):not(.anime-badge):not(.animation-badge) {
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color: #fff;
    box-shadow: 0 1px 4px var(--accent-glow);
}

[data-theme="light"] .movie-quality:not(.tv-badge):not(.anime-badge):not(.animation-badge) {
    background: linear-gradient(135deg, #c20008, #e50914);
    color: #fff;
    box-shadow: 0 1px 4px rgba(194, 0, 8, 0.25);
}

[data-theme="oled"] .movie-quality:not(.tv-badge):not(.anime-badge):not(.animation-badge) {
    background: linear-gradient(135deg, var(--accent), #ff3333);
    color: #fff;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* 4K badge special treatment */
.movie-quality[href*="4K"],
.movie-quality.quality-4k {
    background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
    box-shadow: 0 1px 6px rgba(155, 89, 182, 0.4) !important;
}

[data-theme="light"] .movie-quality[href*="4K"],
[data-theme="light"] .movie-quality.quality-4k {
    box-shadow: 0 1px 6px rgba(155, 89, 182, 0.3) !important;
}

[data-theme="oled"] .movie-quality[href*="4K"],
[data-theme="oled"] .movie-quality.quality-4k {
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.5) !important;
}

@media (max-width: 768px) {
    .movie-quality {
        font-size: 0.6rem;
        padding: 1px 5px;
        border-radius: 3px;
    }
}

@media (max-width: 480px) {
    .movie-quality {
        font-size: 0.55rem;
        padding: 1px 4px;
    }
}


/* ── 9. Filter Panel Slide-Down Animation ── */
/* Advanced filter panel slides down smoothly */
.advanced-filter-panel {
    animation: filterPanelSlide 0.3s ease forwards;
    transform-origin: top;
}

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

[data-theme="light"] .advanced-filter-panel {
    animation-name: filterPanelSlideLight;
}

@keyframes filterPanelSlideLight {
    from {
        opacity: 0;
        transform: translateY(-10px);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
}

[data-theme="oled"] .advanced-filter-panel {
    animation-name: filterPanelSlideOLED;
}

@keyframes filterPanelSlideOLED {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
    }
}

/* Filter panel collapse animation */
.advanced-filter-panel.collapsing {
    animation: filterPanelCollapse 0.25s ease forwards;
}

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

@media (max-width: 768px) {
    .advanced-filter-panel {
        animation-duration: 0.25s;
    }
    @keyframes filterPanelSlideMobile {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .advanced-filter-panel {
        animation-name: filterPanelSlideMobile;
    }
}

@media (max-width: 480px) {
    .advanced-filter-panel {
        animation-duration: 0.2s;
    }
}


/* ── 10. Empty State Illustration Animation ── */
/* Empty state SVG icons gently float up and down */
.empty-state svg {
    animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

[data-theme="light"] .empty-state svg {
    animation: emptyFloatLight 3.5s ease-in-out infinite;
}

@keyframes emptyFloatLight {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
    50% {
        transform: translateY(-10px);
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
    }
}

[data-theme="oled"] .empty-state svg {
    animation: emptyFloatOLED 3s ease-in-out infinite;
}

@keyframes emptyFloatOLED {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 6px rgba(229, 9, 20, 0.15));
    }
    50% {
        transform: translateY(-12px);
        filter: drop-shadow(0 0 12px rgba(229, 9, 20, 0.3));
    }
}

/* Empty state text fade-in */
.empty-state h3 {
    animation: emptyTextFade 0.6s ease 0.3s both;
}

.empty-state p {
    animation: emptyTextFade 0.6s ease 0.5s both;
}

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

@media (max-width: 768px) {
    .empty-state svg {
        width: 60px;
        height: 60px;
    }
    @keyframes emptyFloatMobile {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }
    .empty-state svg {
        animation-name: emptyFloatMobile;
        animation-duration: 2.5s;
    }
}

@media (max-width: 480px) {
    .empty-state svg {
        width: 48px;
        height: 48px;
    }
    @keyframes emptyFloatSmall {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    .empty-state svg {
        animation-name: emptyFloatSmall;
        animation-duration: 2s;
    }
    .empty-state {
        padding: 2.5rem 1rem;
    }
}