:root {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-surface: #252525;
    --bg-hover: #2a2a2a;
    --bg-active: #333;
    --accent: #4d8bf5;
    --accent-hover: #6ba0ff;
    --accent-dim: rgba(77,139,245,0.15);
    --text-primary: #e0e0e0;
    --text-secondary: #999;
    --text-muted: #666;
    --border: #333;
    --danger: #e74c3c;
    --success: #27ae60;
    --warning: #f39c12;
    --shadow: rgba(0,0,0,0.4);
    --radius: 8px;
    --radius-sm: 4px;
    --sidebar-width: 230px;
    --sidebar-collapsed: 56px;
    --player-height: 94px;
    --topbar-height: 50px;
}
/* ─── Blue Theme ─── */
.theme-blue {
    --bg-primary: #0a1628;
    --bg-secondary: #101e36;
    --bg-surface: #162544;
    --bg-hover: #1b2d52;
    --bg-active: #243a66;
    --accent: #4d8bf5;
    --accent-hover: #6ba0ff;
    --accent-dim: rgba(77,139,245,0.18);
    --text-primary: #dce4f0;
    --text-secondary: #8899b5;
    --text-muted: #5a6d8a;
    --border: #1e3355;
    --shadow: rgba(0,0,0,0.5);
}
/* ─── Purple Theme ─── */
.theme-purple {
    --bg-primary: #120b1e;
    --bg-secondary: #1a1029;
    --bg-surface: #221638;
    --bg-hover: #2a1c44;
    --bg-active: #352556;
    --accent: #9b6dff;
    --accent-hover: #b18aff;
    --accent-dim: rgba(155,109,255,0.18);
    --text-primary: #e0d8f0;
    --text-secondary: #9585b5;
    --text-muted: #6a5a8a;
    --border: #2e1f50;
    --shadow: rgba(0,0,0,0.5);
}
/* ─── Emerald Green Theme ─── */
.theme-emerald {
    --bg-primary: #0a1a14;
    --bg-secondary: #0f231b;
    --bg-surface: #142d23;
    --bg-hover: #1a382c;
    --bg-active: #224a39;
    --accent: #2ecc71;
    --accent-hover: #4edc8e;
    --accent-dim: rgba(46,204,113,0.18);
    --text-primary: #d8f0e4;
    --text-secondary: #85b59a;
    --text-muted: #5a8a6f;
    --border: #1e4a35;
    --shadow: rgba(0,0,0,0.5);
}
/* ─── Sky Grey Theme ─── */
.theme-sky-grey {
    --bg-primary: #454545;
    --bg-secondary: #515151;
    --bg-surface: #585858;
    --bg-hover: #5d5d5d;
    --bg-active: #666666;
    --accent: #4d8bf5;
    --accent-hover: #6ba0ff;
    --accent-dim: rgba(77,139,245,0.15);
    --text-primary: #f5f5f5;
    --text-secondary: #d0d0d0;
    --text-muted: #aaaaaa;
    --border: #6e6e6e;
    --shadow: rgba(0,0,0,0.3);
}
/* ─── Sky Blue Theme ─── */
.theme-sky-blue {
    --bg-primary: #1f437a;
    --bg-secondary: #284a84;
    --bg-surface: #2f5091;
    --bg-hover: #33579e;
    --bg-active: #3e65b1;
    --accent: #4d8bf5;
    --accent-hover: #6ba0ff;
    --accent-dim: rgba(77,139,245,0.18);
    --text-primary: #e8f0ff;
    --text-secondary: #a8bdd8;
    --text-muted: #7a9bbf;
    --border: #3860a0;
    --shadow: rgba(0,0,0,0.4);
}
*{margin:0;padding:0;box-sizing:border-box}

/* ─── Icon button base ─── */
#gbm-prev-btn,#gbm-next-btn,#gbm-shuffle-btn,#gbm-repeat-btn,#gbr-close-btn,.cat-modal-close,.cg-edit-btn,.ebook-reader-btn,.eq-close-btn,.gb-search-close-btn,.gbm-action-btn,.global-scan-close,.gpp-close,.home-see-all,.import-pl-close,.lyrics-close,.mobile-library-menu button,.mobile-nav-item,.mood-close-btn,.music-sub-tab,.nr-mode-btn,.pic-action-btn,.pic-inline-close-btn,.pic-inline-view-all,.pic-rename-btn,.picture-modal-close,.picvid-modal-close,.player-btn,.playlist-header-name button,.playlist-track-fav,.playlist-track-remove,.podcast-delete-btn,.podcast-np-btn,.radio-card-fav,.sidebar-toggle,.subtitle-off-btn,.topbar-btn,.track-fav-btn,.tv-player-close,.tv-player-fav,.wtw-region-select{background:none;border:none;cursor:pointer}
/* ─── Solid button base ─── */
#gb-mobile-start,#gbm-play-btn,.agp-btn,.an-dup-scan-btn,.btn-import-pl,.btn-primary,.card-play-btn,.cat-modal-actions .btn-primary,.cat-modal-actions .btn-secondary,.epub-nav-btn,.eq-power-btn,.ffmpeg-download-btn,.gb-hero-btn,.gbd-play-btn,.gbd-player-back-btn,.gbm-close-btn,.genre-thumb-menu-btn,.ins-wl-btn,.mv-nightclub-btn,.mv-shuffle-btn,.mv-shuffle-next-btn,.nc-viz-dot,.nexus-modal-btn,.nr-detail-close,.nr-tmdb-link,.nr-trailer-btn,.pic-album-card-rename,.pic-album-item-remove,.pic-card-menu-btn,.pic-inline-remove-btn,.picture-nav-btn,.picvid-nav-btn,.playlist-btn,.podcast-subscribe-btn,.rescan-btn,.scan-dialog-start,.settings-save-btn,.song-card-add-pl,.song-card-dots,.song-card-fav,.song-card-play,.subtitle-search-btn,.video-edit-btn,.video-edit-close,.video-up-next-cancel,.video-up-next-play,.welcome-modal-ack{border:none;cursor:pointer}
/* ─── Flex row base (display:flex;align-items:center) ─── */
.topbar,.topbar-actions,.sidebar-logo,.sidebar-logo .logo-icon,.sidebar-nav li a,.page-header,.genre-thumb-img,.gpp-header,.gpp-loading,.gpp-footer,.vid-sort-icon,.vid-folder-list-item,.card-cover,.artist-portrait-fallback,.card-play-btn,.songs-format-bar,.songs-genre-filter-bar,.player-track-info,.player-buttons,.player-btn.play-pause,.player-progress,.player-right,.volume-control,.home-section-header,.home-section-title,.home-nav-btn,.cg-page-btn,.cg-rule-check,.cg-assign-item,.genre-section-header,.cat-modal-overlay,.cat-modal-header,.cat-manage-row,.cat-toggle-label,.settings-section h3,.rescan-row-icon,.setting-row,.settings-share-type,.settings-save-floating,.ffmpeg-build-warn,.section-title,.playlist-header,.playlist-header-name,.playlist-btn,.playlist-track-row,.playlist-track-art,.playlist-track-actions,.add-pl-popup-item,.song-card-dots,.lyrics-header,.an-bar-row,.an-rank-row,.an-rank-num,.dup-section-header,.dup-group-title,.mobile-library-menu button,.player-bar .player-buttons,.player-bar .player-right,.player-bar #btn-prev,.player-bar #btn-next,.track-art-thumb,.track-art-placeholder,.song-card-art,.song-card-placeholder,.song-card-play,.pagination,.album-hero-art-placeholder,.picture-card-thumb,.picture-card-placeholder,.pic-view-tab-icon,.pic-cluster-icon,.ebook-card-cover,.ebook-card-placeholder,.ebook-reader-toolbar,.ebook-reader-actions,.ebook-reader-btn,.epub-page-nav,.mv-card-thumb,.mv-card-placeholder,.mv-watched-badge,.mv-card-play,.artist-header-meta,.collection-card-thumb,.collection-not-owned-overlay,.subtitle-toolbar,.subtitle-fetch-btn,.subtitle-result-row,.skip-intro-btn,.mv-stats-btn,.vp-actions-bar,.rating-widget.vp-inline-rating .rating-widget-community,.rating-widget.vp-inline-rating .rating-widget-user,.ep-nav-btn,.mv-shuffle-bar,.mv-shuffle-bar-badge,.mv-ratings-row,.series-ep-thumb-ph,.series-ep-play-overlay,.series-ep-edit,.director-row,.studio-logo-box,.mv-details-toggle,.audio-select-overlay,.picture-modal-overlay,.picture-modal-header,.picture-modal-actions,.pic-action-btn,.picture-modal-image-container,.pic-details-toggle,#pic-image-area:fullscreen,.pic-video-overlay,.pic-video-play-icon,.pic-albums-header,.pic-album-thumb-placeholder,.pic-album-card-placeholder,.pic-album-view-header,.pic-album-back-btn,.picvid-modal-overlay,.picvid-modal-header,.picvid-modal-body,.pic-inline-panel-header,.pic-inline-placeholder,.radio-toolbar,.radio-card,.radio-card-logo,.radio-card-placeholder,.radio-card-play,.btn-fetch-logos,.podcast-episode-row,.podcast-played-btn,.podcast-now-playing,.podcast-np-art-placeholder,.podcast-np-progress,.podcast-np-controls,.podcast-np-btn,.btn-import-m3u,.tv-player-header,.tv-player-actions,.tv-player-record,.mv-card-menu-btn,.video-menu-item,.video-edit-overlay,.video-edit-modal h2,.video-edit-close,.insights-section-title,.insight-message,.insights-comfort-item,.ins-type-legend-item,.ins-genre-row,.ins-wl-oldest,.home-header-btns,.nr-controls,.nr-right-controls,.nr-card-ph,.nr-pagination,.nr-detail-overlay,.nr-detail-close,.wtw-controls-row,.wtw-region-wrap,.wtw-input-wrap,.wtw-search-btn,.wtw-loading,.wtw-poster-ph,.wtw-source-card,.wtw-watch-now,.mood-results-header,.an-pie-container,.scan-dialog-overlay,.scan-dialog-option,.global-scan-inner,.rating-widget-community,.rating-widget-user,.child-setting-toggle,.viewing-hours-row label,.eq-header,.eq-header-title,.eq-macro-row,#nc-art-placeholder,#nc-controls,.nc-ctrl-btn,#gb-topbar,.gb-nav-btn,.gb-poster-ph,.gb-hover-play,.gb-thumb-ph,.gb-radio-ph,#gb-exit-btn,#gb-loading,.gbd-loading,.gbd-player-back-btn,.gbd-ep-row,.gbd-ep-thumb-overlay,.gbd-ep-title,#gb-mobile-start,#gbr-header,.gbr-item,.gbr-thumb-ph,.gbr-series-header,.gbr-back-series,.gbr-season-hdr,.gbr-ep-item,.gbr-ep-thumb-ph,.gbr-loading-eps,.gb-card-playlist .gb-pl-art,.gb-fake-fs-exit,#gb-music-player,.gbm-close-btn,#gbm-art-ph,#gbm-track-actions,.gbm-action-btn,#gbm-bar,#gbm-controls,#gbm-shuffle-btn,#gbm-repeat-btn,#gbm-prev-btn,#gbm-next-btn,#gbm-play-btn,.gb-search-bar,.gbs-poster-placeholder,.gbs-thumb-placeholder,.gbs-track-row,.gbs-track-art-placeholder,.gbs-person-placeholder,.gp-section-header,.agp-criteria-card,.agp-check,.agp-decade-cover,.metrics-legend,.welcome-modal-logo,.welcome-modal-section-title,.welcome-modal-step-num,.batch-toolbar,.batch-edit-chip,.batch-edit-overlay,.batch-edit-title,.batch-field-check,.import-pl-overlay,.import-pl-header,.import-pl-meta,.tpl-card-preview{display:flex;align-items:center}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden}

/* ─── Layout ─────────────────────────────────────── */
.app-container{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--topbar-height) 1fr var(--player-height);grid-template-areas:"sidebar topbar" "sidebar content" "player player";height:100vh;transition:grid-template-columns .3s ease}
.app-container.sidebar-collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}

/* ─── Top Bar ────────────────────────────────────── */
.topbar{grid-area:topbar;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:0 20px;gap:15px}
.topbar .breadcrumb{font-size:14px;color:var(--text-secondary)}.topbar .breadcrumb span{color:var(--text-primary);font-weight:500}
.search-box{position:relative}
.search-box input{background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;padding:7px 15px 7px 35px;color:var(--text-primary);font-size:13px;width:260px;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--accent)}
.search-box .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px}
/* Recent-search history dropdown - capped height + scroll so it never runs off-screen */
.search-history{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1300;display:none;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);max-height:min(50vh,360px);overflow-y:auto;padding:4px;min-width:260px}
.search-history.open{display:block}
.sh-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 4px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.sh-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:2px 4px;text-transform:none;letter-spacing:0}
.sh-clear:hover{color:var(--accent)}
.sh-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text-secondary)}
.sh-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.sh-item-icon{flex-shrink:0;opacity:.45;width:14px;height:14px}
.sh-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-item-x{flex-shrink:0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;padding:1px 6px;border-radius:50%;opacity:.35;transition:opacity .1s,color .1s,background .1s}
.sh-item:hover .sh-item-x{opacity:1}
.sh-item-x:hover{color:var(--danger,#e74c3c);background:rgba(231,76,60,.14)}
.sh-empty{padding:12px 10px;color:var(--text-muted);font-size:12px;text-align:center}
.topbar-actions{gap:10px;flex-wrap:nowrap;flex-shrink:0;margin-left:auto}
.topbar-btn{color:var(--text-secondary);padding:6px 8px;border-radius:var(--radius-sm);font-size:16px;transition:color .2s,background .2s}
.topbar-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.sidebar-expand-btn{font-size:18px!important}

/* ─── Sidebar ────────────────────────────────────── */
.sidebar{grid-area:sidebar;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width .3s ease;width:var(--sidebar-width)}
.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed)}

.sidebar-logo{padding:0 14px;gap:10px;border-bottom:1px solid var(--border);height:var(--topbar-height);flex-shrink:0}
.sidebar-logo .logo-icon{width:30px;height:30px;background:var(--accent);border-radius:8px;justify-content:center;font-size:16px;flex-shrink:0}
.sidebar-logo .logo-favicon{width:34px;height:34px;border-radius:7px;object-fit:contain;flex-shrink:0}
.sidebar-logo .logo-text{font-size:16px;font-weight:700;white-space:nowrap}
.logo-green{color:#22c55e}
.sidebar-toggle{color:#fff;font-size:18px;font-weight:700;padding:4px 6px;border-radius:var(--radius-sm);margin-left:auto;transition:all .2s;flex-shrink:0;line-height:1}
.sidebar-toggle:hover{color:var(--accent);background:var(--bg-hover)}

/* Collapsed state */
.sidebar-collapsed .sidebar-toggle{transform:none}
.sidebar-collapsed .nav-label{display:none}
.sidebar-collapsed .sidebar-section-title{height:12px;overflow:hidden}
.sidebar-collapsed .sidebar-section-title .nav-label{display:none}
.sidebar-collapsed .sidebar-section-title::after{content:'';display:block;width:20px;height:1px;background:var(--border);margin:6px auto}
.sidebar-collapsed .sidebar-nav li a{justify-content:center;padding:9px 0}
.sidebar-collapsed .sidebar-nav li a .nav-icon{margin:0}
.sidebar-collapsed .status-block{display:none}
.sidebar-collapsed .sidebar-status .sidebar-section-title{display:none}
.sidebar-version{padding:12px 18px;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.sidebar-collapsed .sidebar-version{display:none}

.sidebar-scroll{overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent}
.sidebar-scroll::-webkit-scrollbar{width:4px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:2px}

.sidebar-section{padding:8px 0}
.sidebar-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);padding:4px 16px 6px;white-space:nowrap;overflow:hidden}
.sidebar-nav{list-style:none}
.sidebar-nav li a{gap:10px;padding:7px 16px;text-decoration:none;color:var(--text-secondary);font-size:13px;font-weight:500;border-left:3px solid transparent;transition:all .15s;white-space:nowrap;overflow:hidden}
.sidebar-nav li a:hover{background:var(--bg-hover);color:var(--text-primary)}
.sidebar-nav li a.active{background:var(--accent-dim);color:var(--accent);border-left-color:var(--accent)}
.sidebar-nav li a .nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}

/* Badges */
.nav-badge{margin-left:auto;background:var(--bg-active);padding:1px 7px;border-radius:10px;font-size:10px;color:var(--text-muted);flex-shrink:0}
.live-badge{background:rgba(39,174,96,0.2);color:var(--success);font-weight:600}
.admin-badge{background:rgba(77,139,245,0.2);color:var(--accent);font-weight:600}

/* Status block */
.status-block{padding:4px 16px 8px;font-size:12px}
.status-row{display:flex;justify-content:space-between;padding:3px 0}
.status-label{color:var(--text-muted)}
.status-value{color:var(--text-secondary)}
.status-ok{color:var(--success);font-weight:600;background:rgba(39,174,96,0.15);padding:0 8px;border-radius:8px;font-size:11px}
.status-size-green{color:#22c55e;font-weight:600}
.status-separator{border-top:1px solid rgba(255,255,255,0.08);margin:8px 0;padding:0}
.status-shares-title{color:var(--text-muted);font-size:11px;margin-bottom:6px}
.status-share-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0;font-size:11px;line-height:1.7}
.status-share-label{color:var(--text-muted)}
.status-share-online{color:#22c55e;font-weight:600}
.status-share-offline{color:#ef4444;font-weight:600}
.status-size-row{display:flex;justify-content:space-between;padding:1px 0;font-size:11px;line-height:1.6}
.status-size-label{color:var(--text-muted)}
.status-size-value{color:#22c55e}

/* ─── Main Content ───────────────────────────────── */
.main-content{grid-area:content;overflow-y:auto;padding:24px;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent}
.main-content::-webkit-scrollbar{width:8px}.main-content::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:4px}
.page-header{justify-content:space-between;margin-bottom:24px}
.page-header h1{font-size:22px;font-weight:600}
.page-header .filter-bar{display:flex;gap:8px}
.filter-chip{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);padding:5px 14px;border-radius:16px;font-size:12px;cursor:pointer;transition:all .2s}
.filter-chip:hover,.filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.genre-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;scrollbar-width:none}
.genre-bar::-webkit-scrollbar{display:none}
.genre-bar-paged{overflow-x:hidden;flex-wrap:nowrap;align-items:center}
.genre-count{display:inline-block;margin-left:5px;opacity:.55;font-size:11px}

/* ─── Genre thumbnail card grid ─────────────────────────── */
.genre-thumb-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.genre-thumb-card{position:relative;width:88px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--bg-surface);transition:transform .15s,border-color .15s;padding:0;flex-shrink:0}
.genre-thumb-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.genre-thumb-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.genre-thumb-img{aspect-ratio:2/3;background:var(--bg-active);overflow:hidden;justify-content:center;position:relative}
.genre-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.genre-thumb-all-bg{background:linear-gradient(135deg,var(--accent-dim),var(--bg-active));color:var(--accent)}
.genre-thumb-label{position:absolute;bottom:0;left:0;right:0;padding:16px 5px 6px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 60%,transparent 100%);font-size:11px;font-weight:600;color:#fff;text-align:center;line-height:1.3;word-break:break-word}
.genre-thumb-count{display:block;font-size:10px;opacity:.75;font-weight:400}
.genre-thumb-menu-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,.65);border-radius:50%;color:#fff;font-size:16px;line-height:1;display:none;align-items:center;justify-content:center;z-index:2;padding:0;backdrop-filter:blur(4px)}
.genre-thumb-card:hover .genre-thumb-menu-btn{display:flex}
.genre-thumb-menu-btn:hover{background:rgba(0,0,0,.9)}
/* Genre bar: scrollable tile row + pinned "+" add tile on the right */
.genre-thumb-wrap{display:flex;gap:8px;align-items:flex-start;margin-bottom:14px}
.genre-thumb-scroll{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;padding-bottom:6px;scrollbar-width:thin}
.genre-thumb-scroll::-webkit-scrollbar{height:8px}
.genre-thumb-scroll::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:4px}
/* Grid layout: show every genre at once, wrapping to multiple lines. */
.genre-thumb-wrap.is-grid{flex-wrap:wrap}
.genre-thumb-wrap.is-grid .genre-thumb-scroll{flex-wrap:wrap;overflow-x:visible;overflow-y:visible;padding-bottom:0}
.genre-thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.genre-thumb-edit-btn{position:absolute;top:4px;left:4px;width:20px;height:20px;background:rgba(0,0,0,.65);border-radius:50%;color:#fff;line-height:1;display:none;align-items:center;justify-content:center;z-index:2;padding:0;backdrop-filter:blur(4px)}
.genre-thumb-card:hover .genre-thumb-edit-btn{display:flex}
.genre-thumb-edit-btn:hover{background:rgba(0,0,0,.9)}
.genre-thumb-add{flex-shrink:0;width:88px;aspect-ratio:2/3;border:2px dashed var(--border);border-radius:8px;background:var(--bg-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--text-secondary);transition:border-color .15s,color .15s,transform .15s}
.genre-thumb-add:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.genre-thumb-add-plus{font-size:34px;font-weight:300;line-height:1}
.genre-thumb-add-label{font-size:10px;font-weight:600;text-align:center;padding:0 4px;line-height:1.2}
/* Genre poster picker popup */
.genre-poster-picker{position:fixed;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.7);z-index:9999;width:460px;display:flex;flex-direction:column;overflow:hidden}
.gpp-header{justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.gpp-title{font-size:13px;color:var(--text-secondary)}
.gpp-title strong{color:var(--text-primary)}
.gpp-close{color:var(--text-muted);font-size:16px;padding:2px 6px;border-radius:4px;line-height:1;transition:color .15s}
.gpp-close:hover{color:var(--text-primary)}
.gpp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;min-height:220px}
.gpp-loading{grid-column:1/-1;justify-content:center;padding:40px 0}
.genre-poster-pick-item{aspect-ratio:2/3;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .12s}
.genre-poster-pick-item:hover{border-color:var(--accent);transform:scale(1.04)}
.genre-poster-pick-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.genre-poster-pick-item img{width:100%;height:100%;object-fit:cover;display:block}
.gpp-footer{justify-content:space-between;padding:10px 14px 14px;border-top:1px solid var(--border)}
.gpp-nav-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.gpp-nav-btn:hover:not(:disabled){background:var(--bg-hover)}
.gpp-nav-btn:disabled{opacity:.35;cursor:default}
.gpp-page-info{font-size:12px;color:var(--text-secondary)}

/* ─── Videos page: icon-only sort buttons ────────────────── */
.vid-sort-icon{justify-content:center;width:30px;height:30px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all .15s;flex-shrink:0}
.vid-sort-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vid-sort-icon:hover{background:var(--bg-hover);color:var(--text-primary)}
.vid-sort-icon.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── Videos page: folder panel + list ──────────────────── */
.vid-folder-panel{margin-bottom:6px}
.vid-folder-panel.hidden{display:none}
.vid-folder-list{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.vid-folder-list-item{gap:8px;padding:6px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--text-secondary);transition:background .12s,color .12s;user-select:none}
.vid-folder-list-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.vid-folder-list-item.active{background:var(--accent-dim);color:var(--accent);font-weight:500}
.vid-folder-count{margin-left:auto;font-size:11px;opacity:.55}

/* ─── Card Grid ──────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px}
.card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow)}
.card-cover{aspect-ratio:1/1;background:var(--bg-active);justify-content:center;position:relative;overflow:hidden}
.card-cover img{width:100%;height:100%;object-fit:cover}
.card-cover .placeholder-icon{font-size:48px;color:var(--text-muted)}
.artist-cover{border-radius:50%;margin:14px auto 0;width:calc(100% - 28px);aspect-ratio:1/1;overflow:hidden}
.artist-portrait{width:100%;height:100%;object-fit:cover;border-radius:50%}
.artist-portrait-fallback{width:100%;height:100%;justify-content:center;opacity:.3;border-radius:50%}
.artist-cover-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%}
.artist-cover-dual{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}
.artist-cover-cell{overflow:hidden;background:var(--bg-surface)}
.artist-cover-cell img{width:100%;height:100%;object-fit:cover;display:block}
.card-play-btn{position:absolute;bottom:8px;right:8px;width:40px;height:40px;background:var(--accent);border-radius:50%;color:#fff;font-size:18px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.card:hover .card-play-btn{opacity:1;transform:translateY(0)}
.card-info{padding:10px 12px}
.card-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-subtitle{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ─── Track List ─────────────────────────────────── */
.track-list{width:100%;border-collapse:collapse}
.track-list thead th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.track-list tbody tr{transition:background .15s;cursor:pointer}
.track-list tbody tr:hover{background:var(--bg-hover)}
.track-list tbody tr.playing{background:var(--accent-dim)}
.track-list tbody td{padding:10px 12px;font-size:13px;color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.03)}
.track-list tbody td.track-title{color:var(--text-primary);font-weight:500}
.track-format-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:#555;color:#fff;margin-left:6px;vertical-align:middle;white-space:nowrap;flex-shrink:0}
.track-fmt-mp3{background:#e67e22}.track-fmt-flac{background:#2980b9}.track-fmt-aac{background:#8e44ad}.track-fmt-alac{background:#1a7a4a}.track-fmt-wav{background:#27ae60}.track-fmt-ogg{background:#16a085}.track-fmt-wma{background:#c0392b}.track-fmt-opus{background:#d35400}.track-fmt-aiff{background:#2c3e50;color:#ecf0f1}.track-fmt-ape{background:#7f8c8d}.track-fmt-dsf{background:#b8860b}.track-fmt-dff{background:#a0522d}
.songs-format-bar{gap:8px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border)}
.songs-format-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-right:4px;white-space:nowrap}
.songs-genre-filter-bar{gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:9px 14px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--accent);border-left:3px solid var(--accent)}
.genre-filter-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;background:var(--accent);color:#fff}
.genre-filter-clear-btn{background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:3px 10px;margin-left:auto;white-space:nowrap}
.genre-filter-clear-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.track-number{width:40px;text-align:center}.track-duration{width:60px;text-align:right}.track-actions{width:96px;text-align:right;white-space:nowrap}
.track-fav-btn{color:var(--text-muted);font-size:14px;padding:4px}
.track-fav-btn:hover,.track-fav-btn.active{color:var(--danger)}

/* ─── Player Bar ─────────────────────────────────── */
.player-bar{grid-area:player;background:var(--bg-secondary);border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 20px}
.player-hidden{display:none}
.app-container:has(.player-hidden){grid-template-rows:var(--topbar-height) 1fr 0px}
.player-track-info{gap:12px;min-width:0}
.player-cover{width:62px;height:62px;border-radius:var(--radius-sm);background:var(--bg-active);overflow:hidden;flex-shrink:0}
.player-cover img{width:100%;height:100%;object-fit:cover}
.player-track-text{overflow:hidden;flex:1;min-width:0}
.player-fav-btn{flex-shrink:0}
.player-playlist-wrapper{flex-shrink:0}
.player-track-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-track-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-controls{display:flex;flex-direction:column;align-items:center;gap:6px}
.player-buttons{gap:16px}
.player-btn{color:var(--text-secondary);font-size:18px;padding:4px;transition:color .2s}
.player-btn:hover{color:var(--text-primary)}
.player-btn.play-pause{width:36px;height:36px;background:var(--accent);border-radius:50%;color:#fff;justify-content:center;font-size:16px}
.player-btn.play-pause:hover{background:var(--accent-hover)}
.player-btn-quality,.player-btn-rg{padding:3px 7px;border-radius:4px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.05)}
.player-btn-quality:hover,.player-btn-rg:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.1)}
.player-progress{gap:8px;width:100%;max-width:500px}
.player-meta{font-size:11px;font-weight:700;color:var(--text-muted);text-align:center;letter-spacing:.02em;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta:empty{display:none}
.player-meta .player-meta-dev{color:var(--text-secondary);font-weight:700}
.player-time{font-size:11px;font-weight:700;color:var(--text-muted);min-width:40px}
.progress-bar{flex:1;height:4px;background:var(--bg-active);border-radius:2px;cursor:pointer;position:relative}
.progress-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .1s linear}
.progress-bar:hover .progress-bar-fill{background:var(--accent-hover)}
.progress-cursor{display:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;height:22px;background:var(--accent);border-radius:1px;pointer-events:none;left:0}
.player-right{justify-content:flex-end;gap:12px}
/* Player Favourite & Playlist buttons */
.player-fav-icon{stroke:var(--text-secondary);fill:none;transition:stroke .2s,fill .2s}
.player-fav-btn:hover .player-fav-icon{stroke:var(--text-primary)}
.player-fav-btn.active .player-fav-icon{fill:var(--danger);stroke:var(--danger)}
.player-playlist-dropdown{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);min-width:200px;max-height:260px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:100;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent}
.player-playlist-dropdown.open{display:block}
.player-playlist-dropdown .pl-dropdown-title{padding:10px 14px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.player-playlist-dropdown .pl-dropdown-item{padding:8px 14px;font-size:13px;color:var(--text-primary);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-playlist-dropdown .pl-dropdown-item:hover{background:var(--accent-dim);color:var(--accent)}
.player-playlist-dropdown .pl-dropdown-item.pl-added{color:var(--success)}
.player-playlist-dropdown .pl-dropdown-empty{padding:12px 14px;font-size:12px;color:var(--text-muted);text-align:center}

.volume-control{gap:6px}
.volume-slider{width:80px;height:4px;-webkit-appearance:none;background:var(--bg-active);border-radius:2px;outline:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--text-primary);border-radius:50%;cursor:pointer}

/* ─── Stats / Dashboard ──────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:30px}
.stat-card{background:var(--bg-surface);border-radius:var(--radius);padding:18px;text-align:center}
.stat-value{font-size:28px;font-weight:700;color:var(--accent)}
.stat-label{font-size:12px;color:var(--text-secondary);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* ─── Home Page Sections ─────────────────────────── */
.home-section{margin-bottom:28px}
.home-section-header{justify-content:space-between;margin-bottom:14px}
.home-section-title{font-size:17px;font-weight:600;color:var(--text-primary);margin:0;gap:8px}
.home-section-icon{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.home-see-all{color:var(--accent);font-size:13px;font-weight:500;padding:4px 8px;border-radius:var(--radius-sm);transition:background .2s,color .2s}
.home-see-all:hover{background:var(--accent-dim);color:var(--accent-hover)}
.home-row{position:relative;overflow:hidden}
.home-row-scroll{display:flex;gap:16px;overflow-x:auto;padding:0 44px 8px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent}
.home-row-scroll::-webkit-scrollbar{height:6px}
.home-row-scroll::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:3px}
.home-row-scroll .home-card{flex:0 0 calc(170px * var(--home-poster-scale,1));min-width:calc(170px * var(--home-poster-scale,1))}
.home-row-scroll.home-row-wide .home-card{flex:0 0 calc(250px * var(--home-poster-scale,1));min-width:calc(250px * var(--home-poster-scale,1))}
.home-placeholder-row{background:var(--bg-surface);border-radius:var(--radius);padding:30px;text-align:center}
/* Home poster-size slider (0.5–1.0, remembered per user) */
.home-poster-size{display:inline-flex;align-items:center;margin-left:8px}
.home-poster-size input[type=range]{width:104px;accent-color:var(--accent);cursor:pointer}
.home-placeholder-text{font-size:13px;color:var(--text-muted);font-style:italic}
/* Navigation arrows */
.home-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:36px;height:36px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);font-size:16px;cursor:pointer;justify-content:center;transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.home-nav-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(77,139,245,.4)}
.home-nav-left{left:0}
.home-nav-right{right:0}

@media(max-width:768px){
.home-row-scroll .home-card{flex:0 0 calc(120px * var(--home-poster-scale,1));min-width:calc(120px * var(--home-poster-scale,1))}
.home-row-scroll.home-row-wide .home-card{flex:0 0 calc(110px * var(--home-poster-scale,1));min-width:calc(110px * var(--home-poster-scale,1))}
.home-row-scroll{padding:0 36px 8px;gap:10px}
.home-nav-btn{width:30px;height:30px;font-size:14px}
.home-card .mv-card-info{padding:6px 8px}
.home-card .mv-card-title{font-size:12px}
.home-card .mv-card-artist{font-size:10px}
.home-card .song-card-info{padding:6px 8px}
.home-card .song-card-title{font-size:12px}
.home-card .song-card-artist{font-size:10px}
.home-card .song-card-meta{font-size:10px}
}

/* ─── Empty / Placeholder State ──────────────────── */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state .empty-icon{margin-bottom:20px;opacity:.45}
.empty-state h2{font-size:20px;color:var(--text-secondary);margin-bottom:8px}
.empty-state p{font-size:14px;max-width:400px;margin:0 auto;line-height:1.6}
.btn-primary{background:var(--accent);color:#fff;padding:10px 24px;border-radius:var(--radius);font-size:14px;font-weight:500;margin-top:16px;transition:background .2s}
.btn-primary:hover{background:var(--accent-hover)}
.btn-import-pl{background:#16a34a;color:#fff;padding:10px 24px;border-radius:var(--radius);font-size:14px;font-weight:500;margin-top:0;transition:background .2s}
.btn-import-pl:hover{background:#15803d}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg-surface);color:var(--text-secondary);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;white-space:nowrap;text-decoration:none;line-height:1.4}
.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary);border-color:rgba(255,255,255,0.2)}
.btn-secondary:active{transform:translateY(1px)}

/* Placeholder page (for menus not yet built) */
.placeholder-page{text-align:center;padding:80px 20px}
.placeholder-page .ph-icon{font-size:72px;margin-bottom:20px;opacity:.5}
.placeholder-page h2{font-size:24px;color:var(--text-secondary);margin-bottom:8px}
.placeholder-page p{font-size:14px;color:var(--text-muted);max-width:420px;margin:0 auto;line-height:1.6}
.placeholder-page .ph-tag{display:inline-block;margin-top:16px;background:var(--bg-surface);padding:6px 16px;border-radius:16px;font-size:12px;color:var(--text-muted)}

/* ─── Misc ───────────────────────────────────────── */
.spinner{width:32px;height:32px;border:3px solid var(--bg-active);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-bar{background:var(--bg-surface);border-radius:var(--radius);padding:16px;margin-bottom:20px}
.scan-bar .scan-progress{height:6px;background:var(--bg-active);border-radius:3px;margin-top:10px}
.scan-bar .scan-progress-fill{height:100%;background:var(--success);border-radius:3px;transition:width .3s}
.scan-bar .scan-text{font-size:13px;color:var(--text-secondary)}
.scan-bar .scan-subtext{font-size:12px;color:var(--text-secondary);opacity:.7;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-bar .scan-subtext.scan-warn{color:#e0a83e;opacity:1;white-space:normal}
.genre-grid{display:flex;flex-wrap:wrap;gap:10px}
.genre-tag{background:var(--bg-surface);border:1px solid var(--border);padding:10px 20px;border-radius:20px;font-size:13px;cursor:pointer;transition:all .2s}
.genre-tag:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.genre-tag .genre-count{color:var(--text-muted);font-size:11px;margin-left:6px}
.genre-tag-folder{background:color-mix(in srgb,var(--accent) 12%,var(--bg-surface));border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.genre-tag-excluded{opacity:.65;border-style:dashed}
.genre-tag-custom{position:relative;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.15));border:1px solid rgba(139,92,246,.35);color:var(--text-primary)}
.genre-tag-custom:hover{border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.25)}
.cg-edit-btn{color:var(--text-secondary);font-size:13px;padding:0 0 0 6px;opacity:0.6;line-height:1;transition:opacity .15s}
.cg-edit-btn:hover{opacity:1;color:var(--accent)}
/* ─── Genre Cards (Spotify-style collage) ─────── */
.genre-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;margin-bottom:8px}
.genre-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--bg-active);aspect-ratio:1;transition:transform .18s,box-shadow .18s}
.genre-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.55)}
.gc-art{position:absolute;inset:0}
.gc-art-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.gc-cell{overflow:hidden;background:var(--bg-surface)}
.gc-cell img{width:100%;height:100%;object-fit:cover;display:block}
.gc-art-single{width:100%;height:100%}
.gc-art-single img{width:100%;height:100%;object-fit:cover;display:block}
.genre-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:36px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.genre-card-name{color:#fff;font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genre-card-count{color:rgba(255,255,255,.62);font-size:11px;margin-top:2px}
/* Music Explore (TIDAL-style browse landing) */
.explore-page-title{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.explore-section{margin:0 0 26px}
.explore-section-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.explore-section-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text-primary)}
.explore-section-ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.explore-viewall{background:none;border:none;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px}
.explore-viewall:hover{color:var(--text-primary);background:var(--bg-active)}
.explore-row{align-items:flex-start}
.explore-tile{flex:0 0 150px;min-width:150px;cursor:pointer}
.explore-tile-art{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-active);box-shadow:0 2px 10px rgba(0,0,0,.28);transition:transform .18s,box-shadow .18s}
.explore-tile:hover .explore-tile-art{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.explore-tile-art .gc-art{position:absolute;inset:0}
.explore-art-fallback,.explore-art-empty{position:absolute;inset:0}
.explore-tile-label{margin:8px 2px 0;font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.explore-tile-sub{margin:1px 2px 0;font-size:11px;color:var(--text-secondary)}
.explore-tile-decade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65);letter-spacing:.02em;background:rgba(0,0,0,.28)}
.explore-hires-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#f5c542,#e0912f);color:#1a1207;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 7px;border-radius:5px}
.explore-tile--wide{flex-basis:190px;min-width:190px}
/* Music "For You" landing (TIDAL-style overview) */
.mh-artist-tile{flex:0 0 150px;min-width:150px;cursor:pointer;text-align:center}
.mh-artist-art{position:relative;width:150px;height:150px;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--bg-active);box-shadow:0 2px 12px rgba(0,0,0,.35);transition:transform .18s,box-shadow .18s}
.mh-artist-tile:hover .mh-artist-art{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.55)}
.mh-artist-art img{width:100%;height:100%;object-fit:cover;display:block}
.mh-artist-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:800;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.mh-artist-name{margin:10px 4px 0;font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-artist-sub{margin:1px 4px 0;font-size:11px;color:var(--text-secondary)}
.mh-album-tile{flex:0 0 160px;min-width:160px;cursor:pointer}
.mh-album-art{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg-active);box-shadow:0 2px 10px rgba(0,0,0,.3);transition:transform .18s,box-shadow .18s}
.mh-album-tile:hover .mh-album-art{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.mh-album-art img{width:100%;height:100%;object-fit:cover;display:block}
.mh-album-empty::after{content:"\266B";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--text-muted);opacity:.4}
.mh-album-name{margin:8px 2px 0;font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-album-artist{margin:1px 2px 0;font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 26px;padding:0 4px}
.mh-track{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .15s}
.mh-track:hover{background:var(--bg-active)}
.mh-track-art{position:relative;width:55px;height:55px;flex-shrink:0;border-radius:5px;overflow:hidden;background:var(--bg-surface)}
.mh-track-art img{width:100%;height:100%;object-fit:cover;display:block}
.mh-track-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:18px}
.mh-track-play{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;font-size:15px}
.mh-track:hover .mh-track-play{display:flex}
.mh-track-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mh-track-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-track-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-track-dots{background:none;border:none;color:var(--text-secondary);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;opacity:0;transition:opacity .15s}
.mh-track:hover .mh-track-dots{opacity:.8}
@media(max-width:1100px){.mh-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
    .mh-track-grid{grid-template-columns:1fr;gap:2px 0;padding:0}
    .mh-track{gap:12px;padding:8px 6px}
    .mh-track-art{width:56px;height:56px}
    .mh-artist-tile{flex-basis:120px;min-width:120px}
    .mh-artist-art{width:120px;height:120px}
    .mh-artist-ph{font-size:36px}
    .mh-album-tile{flex-basis:132px;min-width:132px}
    .mh-track-dots{opacity:.6}
}
.cg-edit-icon{display:inline-flex;align-items:center;padding:0 0 0 5px;opacity:0.5;font-size:11px;cursor:pointer;transition:opacity .15s}
.cg-edit-icon:hover{opacity:1}
.cg-add-btn{border-style:dashed !important}
.custom-genre-bar{border-top:1px solid var(--border);margin-top:6px;padding-top:10px;flex-wrap:nowrap}
.cg-page-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);width:26px;height:26px;border-radius:50%;font-size:15px;cursor:pointer;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;line-height:1}
.cg-page-btn:hover:not(:disabled){background:var(--bg-active);border-color:var(--accent);color:var(--text-primary)}
.cg-page-btn:disabled{opacity:.3;cursor:default}
.cg-page-info{font-size:11px;color:var(--text-muted);white-space:nowrap;align-self:center;flex-shrink:0}
.cg-modal-box{max-width:540px;width:95vw;max-height:85vh;overflow-y:auto}
.cg-rules-section{margin-bottom:16px}
.cg-rules-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:8px}
.cg-rules-list{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow-y:auto;padding:8px;background:var(--bg-hover);border-radius:var(--radius);border:1px solid var(--border)}
.cg-rule-check{gap:5px;cursor:pointer;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:3px 10px 3px 6px;font-size:12px;transition:border-color .15s,background .15s}
.cg-rule-check:hover{border-color:var(--accent);background:var(--bg-active)}
.cg-rule-check input{accent-color:var(--accent);margin:0}
.btn-danger{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);padding:8px 16px;cursor:pointer;font-size:13px;transition:background .15s,border-color .15s}
.btn-danger:hover{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.5)}
.cg-assign-list{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--bg-hover);border-radius:var(--radius);border:1px solid var(--border)}
.cg-assign-item{gap:5px;cursor:pointer;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:4px 10px 4px 7px;font-size:12px;transition:border-color .15s,background .15s}
.cg-assign-item:hover{border-color:var(--accent);background:var(--bg-active)}
.cg-assign-item input{accent-color:var(--accent);margin:0;cursor:pointer}
.genre-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:18px 0 8px}
.genre-section-header{justify-content:space-between;margin:18px 0 8px}
.genre-section-header .genre-section-title{margin:0}
.custom-cat-bar{border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
.genre-bar-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);white-space:nowrap;align-self:center;padding-right:4px}
.cat-manage-btn{background:#16a34a;border:1px solid #16a34a;color:#fff;font-size:11px;padding:3px 9px;border-radius:5px;cursor:pointer;transition:background .15s}
.cat-manage-btn:hover{background:#15803d;border-color:#15803d}
.cat-excl-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:rgba(239,68,68,.15);color:#f87171;border-radius:3px;padding:1px 4px;margin-left:4px;vertical-align:middle}
.cat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;justify-content:center;backdrop-filter:blur(2px)}
.cat-modal-box{background:var(--bg-surface);border-radius:12px;border:1px solid var(--border);padding:22px 24px 20px;width:min(440px,92vw);max-height:82vh;display:flex;flex-direction:column;gap:0;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.cat-modal-header{justify-content:space-between;margin-bottom:8px}
.cat-modal-header h3{font-size:15px;font-weight:600;margin:0}
.cat-modal-close{color:var(--text-muted);font-size:16px;padding:4px 6px;border-radius:5px;line-height:1}
.cat-modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.cat-modal-hint{font-size:12px;color:var(--text-muted);line-height:1.5;margin:0 0 14px}
.cat-manage-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:4px;max-height:46vh}
.cat-manage-row{justify-content:space-between;padding:9px 12px;border-radius:8px;background:var(--bg-hover);gap:12px}
.cat-manage-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-manage-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-manage-count{font-size:11px;color:var(--text-muted)}
.cat-toggle-label{gap:7px;cursor:pointer;flex-shrink:0}
.cat-toggle-label input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.cat-toggle-text{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.cat-modal-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border);margin-top:14px}
.cat-modal-actions .btn-primary,.cat-modal-actions .btn-secondary{min-width:90px;display:inline-flex;align-items:center;justify-content:center;padding:8px 0;font-size:13px;font-weight:500;border-radius:7px;transition:background .15s;margin:0}
.cat-modal-actions .btn-primary{background:#16a34a;color:#fff}
.cat-modal-actions .btn-primary:hover{background:#15803d}
.cat-modal-actions .btn-secondary{background:var(--bg-hover);color:var(--text-primary)}
.cat-modal-actions .btn-secondary:hover{background:var(--border)}
.settings-section{background:var(--bg-surface);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.settings-docker-notice{display:flex;align-items:flex-start;gap:8px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:#93c5fd;border-radius:6px;padding:9px 12px;font-size:12px;line-height:1.5;margin-bottom:12px}
.settings-section h3{font-size:16px;margin-bottom:12px;gap:8px}
.settings-section-hint{font-size:12px;color:var(--text-secondary);margin:-6px 0 12px;}
.settings-icon{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* ─── Rescan Folders page ─────────────────────────────── */
.rescan-list{display:flex;flex-direction:column;gap:0;padding:4px 0}
.rescan-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);flex-wrap:wrap}
.rescan-row:last-child{border-bottom:none}
.rescan-row-icon{width:32px;height:32px;border-radius:8px;background:var(--accent-dim);justify-content:center;flex-shrink:0;margin-top:1px}
.rescan-row-icon svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rescan-row-body{flex:1;min-width:160px}
.rescan-row-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.rescan-row-desc{font-size:12px;color:var(--text-secondary);line-height:1.5}
.rescan-row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;flex-shrink:0}
.rescan-status{width:100%;font-size:12px;color:var(--text-muted);padding-left:44px;min-height:0}
.rescan-status:not(:empty){padding-top:4px}
.rescan-status.running{color:var(--accent)}
.rescan-status.done{color:var(--success)}
.rescan-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--radius);font-size:12px;font-weight:500;transition:all .15s;white-space:nowrap}
.rescan-btn svg{width:14px;height:14px;flex-shrink:0}
.rescan-btn-primary{background:var(--accent);color:#fff}
.rescan-btn-primary:hover{background:var(--accent-hover)}
.rescan-btn-primary:active{transform:translateY(1px)}
.rescan-btn-secondary{background:var(--bg-active);color:var(--text-secondary);border:1px solid rgba(255,255,255,.08)}
.rescan-btn-secondary:hover{color:var(--text-primary);border-color:rgba(255,255,255,.18)}
.rescan-btn-secondary:active{transform:translateY(1px)}
.rescan-row .scan-bar{background:transparent;padding:0;margin:0}
.rescan-row .scan-bar .scan-text{font-size:12px}
.rescan-row .scan-bar .scan-progress{margin-top:6px}
.setting-row{justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:13px}.setting-value{font-size:13px;color:var(--text-secondary)}
.settings-badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.5px;background:var(--accent);color:#fff;vertical-align:middle}
.settings-shares-table{width:100%;border-collapse:collapse;font-size:13px}
.settings-shares-table th{text-align:left;padding:8px 10px;color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.settings-shares-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.03)}
.settings-shares-table tr:last-child td{border-bottom:none}
.settings-share-type{gap:6px;white-space:nowrap;font-weight:500}
.settings-share-icon{width:16px;height:16px;stroke:var(--text-secondary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.settings-share-path{font-size:12px;color:var(--text-secondary);word-break:break-all}
.setting-input{width:100%;max-width:340px;padding:7px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:13px;outline:none;transition:border-color .2s}
.setting-input:focus{border-color:var(--accent)}
.setting-input-wide{max-width:100%}
.setting-input[type="number"]{max-width:120px}.setting-input.setting-input-sm{max-width:72px}
.setting-select{padding:7px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:13px;outline:none;cursor:pointer;transition:border-color .2s;min-width:120px}
.setting-select:focus{border-color:var(--accent)}
.setting-toggle{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.setting-toggle input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg-hover);border:1px solid var(--border);border-radius:12px;transition:background .25s,border-color .25s}
.toggle-thumb{position:absolute;left:3px;top:2.5px;width:17px;height:17px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.setting-toggle input:checked+.toggle-track{background:var(--success);border-color:var(--success)}
.setting-toggle input:checked+.toggle-track .toggle-thumb{transform:translateX(20px)}
.setting-hint{font-size:11px;color:var(--text-muted);margin-top:2px}
.setting-row-col{flex-direction:column;align-items:flex-start;gap:6px}
.setting-row-col .setting-value{width:100%}
/* ── Access Gate code list ── */
.gate-codes-list{display:flex;flex-direction:column;gap:6px;width:100%;margin-bottom:6px;max-width:820px}
.gate-code-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--bg-active);border-radius:8px;padding:6px 10px;border:1px solid var(--border)}
.gate-code-expired{opacity:.55;border-color:#e74c3c44}
.gate-code-val{background:var(--bg-hover);padding:3px 10px;border-radius:5px;font-size:13px;letter-spacing:2px;font-weight:600;color:var(--text-primary);white-space:nowrap;min-width:160px}
.gate-code-label-input{padding:3px 8px;border-radius:5px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font-size:12px;width:110px}
.gate-code-exp-display{padding:3px 10px;border-radius:5px;background:var(--bg-hover);color:var(--text-secondary);font-size:11px;white-space:nowrap;letter-spacing:.2px}
.gate-code-exp-expired{color:#e74c3c;background:rgba(231,76,60,.12)}
.gate-code-btns{display:flex;gap:4px;margin-left:auto}
.gate-code-btns button{font-size:11px;padding:2px 9px;border-radius:4px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text);cursor:pointer}
.gate-code-del{color:#e74c3c!important}
.gate-expired-badge{font-size:10px;padding:1px 6px;background:#e74c3c22;color:#e74c3c;border-radius:4px;border:1px solid #e74c3c44;white-space:nowrap}
.settings-save-floating{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);right:auto;z-index:100;gap:10px}
.settings-save-btn{background:var(--success);color:#fff;padding:12px 24px;border-radius:12px;font-size:14px;font-weight:600;transition:background .2s,transform .1s,box-shadow .2s;box-shadow:0 4px 16px rgba(46,204,113,.35);display:inline-flex;align-items:center;gap:8px}
.settings-save-btn:hover{background:#27ae60;transform:translateY(-2px);box-shadow:0 6px 24px rgba(46,204,113,.45)}
.settings-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(46,204,113,.3)}
.ffmpeg-download-btn{background:var(--accent);color:#fff;padding:6px 16px;border-radius:6px;font-size:13px;font-weight:600;margin-left:10px;transition:background .2s,opacity .2s}
.ffmpeg-download-btn:hover{background:#2980b9}
.ffmpeg-download-btn:disabled{opacity:.7;cursor:not-allowed}
.ffmpeg-downloading{background:var(--warning) !important;animation:ffmpeg-pulse 1.5s ease-in-out infinite}
.ffmpeg-installed{background:var(--success) !important}
.ffmpeg-failed{background:var(--danger) !important}
@keyframes ffmpeg-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.ffmpeg-caps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.ffmpeg-cap{font-size:12px;padding:3px 9px;border-radius:4px;font-weight:600;white-space:nowrap}
.ffmpeg-cap.cap-ok{background:rgba(46,204,113,.15);color:var(--success)}
.ffmpeg-cap.cap-miss{background:rgba(231,76,60,.12);color:var(--danger)}
.ffmpeg-build-warn{margin-top:8px;padding:8px 12px;border-radius:6px;background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.3);color:var(--danger);font-size:13px;flex-wrap:wrap;gap:8px}
.log-viewer{margin-top:12px;background:#0d1117;color:#c9d1d9;border-radius:6px;padding:12px 14px;font-family:'Consolas','Courier New',monospace;font-size:11.5px;line-height:1.65;max-height:420px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;border:1px solid rgba(255,255,255,.07)}
.log-err{color:#ff7b72}.log-wrn{color:#e3b341}.log-gpu{color:#79c0ff}
.nexus-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:none;align-items:center;justify-content:center}
.nexus-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:36px 32px 28px;max-width:380px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.nexus-modal-icon{margin-bottom:18px}
.nexus-modal-title{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.nexus-modal-body{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:26px}
.nexus-modal-btn{background:var(--accent);color:#fff;border-radius:var(--radius);padding:9px 32px;font-size:14px;font-weight:500;transition:opacity .15s}
.nexus-modal-btn:hover{opacity:.85}
.settings-save-msg{font-size:13px;transition:opacity .3s;background:rgba(0,0,0,.7);padding:4px 10px;border-radius:6px;backdrop-filter:blur(4px)}
.settings-save-msg:empty{display:none}
@media(max-width:768px){.settings-save-floating{bottom:140px;left:50%;transform:translateX(-50%);right:auto}}
.setting-group-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:12px 0 4px;border-bottom:none}
.user-mgmt-actions{text-align:right;white-space:nowrap}
.user-mgmt-btn{background:var(--bg-hover);border:1px solid var(--border);color:var(--text-secondary);padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}
.user-mgmt-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.user-mgmt-btn-danger{color:var(--danger)}
.user-mgmt-btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.user-mgmt-btn-add{background:var(--accent-dim);color:var(--accent);border-color:var(--accent);padding:8px 18px;font-size:13px;font-weight:500}
.user-mgmt-btn-add:hover{background:var(--accent);color:#fff}
.user-mgmt-btn-save{background:var(--accent);color:#fff;border-color:var(--accent)}
.user-mgmt-btn-save:hover{background:var(--accent-hover)}
.user-mgmt-form{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:20px;margin-top:16px}
.user-mgmt-form h4{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--text-primary)}
.user-mgmt-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.user-mgmt-field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.user-mgmt-field input,.user-mgmt-field select{width:100%;padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:13px;outline:none;transition:border-color .2s}
.user-mgmt-field input:focus,.user-mgmt-field select:focus{border-color:var(--accent)}
.user-mgmt-form-actions{display:flex;gap:8px;margin-top:14px}
.user-mgmt-error{color:var(--danger);font-size:12px;display:block;margin-top:8px}
.user-mgmt-inline-input{width:100%;padding:5px 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:12px;outline:none}
.user-mgmt-inline-input:focus{border-color:var(--accent)}
.topbar-btn-logout{color:var(--text-muted)}.topbar-btn-logout:hover{color:var(--danger)}
.section-title{font-size:18px;font-weight:600;margin:30px 0 16px;gap:8px}

/* ─── Playlist Detail ──────────────────────────────── */
.playlist-header{background:var(--bg-surface);border-radius:var(--radius);padding:20px;margin-bottom:16px;gap:20px}
.playlist-header-info{flex:1;min-width:0}
.playlist-header-name{font-size:22px;font-weight:700;gap:8px}
.playlist-header-name button{color:var(--text-muted);padding:4px;border-radius:4px;transition:color .2s}
.playlist-header-name button:hover{color:var(--accent)}
.playlist-header-meta{font-size:13px;color:var(--text-muted);margin-top:4px}
.playlist-header-desc{font-size:13px;color:var(--text-secondary);margin-top:6px}
.playlist-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.playlist-btn{padding:9px 20px;border-radius:8px;font-size:13px;font-weight:600;gap:6px;transition:opacity .2s,transform .1s}
.playlist-btn:hover{opacity:.85;transform:translateY(-1px)}
.playlist-btn:active{transform:translateY(0)}
.playlist-btn-play{background:var(--success);color:#fff}
.playlist-btn-shuffle{background:var(--accent);color:#fff}
.playlist-btn-delete{background:none;border:1px solid var(--border);color:var(--text-muted);margin-left:auto}
.playlist-btn-delete:hover{border-color:var(--danger);color:var(--danger);opacity:1}
.playlist-track-list{display:flex;flex-direction:column;gap:2px}
/* Auto-playlist "Show more" (paged track list) */
.agp-more-wrap{text-align:center;padding:12px 0 30px}
.agp-show-more{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer}
.agp-show-more:hover{color:var(--text-primary);border-color:var(--accent)}
.playlist-track-row{gap:12px;padding:8px 12px;background:var(--bg-surface);border-radius:8px;cursor:pointer;transition:background .15s}
.playlist-track-row:hover{background:var(--bg-hover)}
.playlist-track-row.playing{background:var(--accent-dim)}
.playlist-track-num{width:28px;text-align:center;font-size:13px;color:var(--text-muted);flex-shrink:0}
.playlist-track-art{width:44px;height:44px;border-radius:6px;background:var(--bg-active);overflow:hidden;flex-shrink:0;justify-content:center}
.playlist-track-art img{width:100%;height:100%;object-fit:cover}
.playlist-track-art-placeholder{color:var(--text-muted);font-size:18px}
.playlist-track-info{flex:1;min-width:0}
.playlist-track-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-track-sub{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.playlist-track-dur{font-size:12px;color:var(--text-muted);flex-shrink:0;width:45px;text-align:right}
.playlist-track-actions{gap:4px;flex-shrink:0}
.playlist-track-fav{color:var(--text-muted);font-size:16px;padding:4px;transition:color .2s}
.playlist-track-fav:hover{color:var(--danger)}
.playlist-track-fav.active{color:var(--danger)}
.playlist-track-remove{color:var(--text-muted);font-size:16px;padding:4px;opacity:.4;transition:opacity .2s,color .2s}
.playlist-track-remove:hover{opacity:1;color:var(--danger)}
.add-pl-popup{position:fixed;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:8px 0;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:1000;max-height:300px;overflow-y:auto}
.add-pl-popup-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:8px 14px 4px}
.add-pl-popup-item{padding:8px 14px;font-size:13px;cursor:pointer;transition:background .15s;justify-content:space-between}
.add-pl-popup-item:hover{background:var(--bg-hover)}
.add-pl-popup-item.added{color:var(--success);pointer-events:none}
.song-card-dots{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:#fff;width:28px;height:28px;border-radius:50%;font-size:20px;font-weight:700;justify-content:center;z-index:3;opacity:0;transition:opacity .2s,background .15s;padding:0;line-height:1}
.song-card:hover .song-card-dots{opacity:1}
.song-card-dots:hover{background:var(--accent)}
.song-card-add-pl{position:absolute;top:40px;left:6px;background:rgba(0,0,0,.6);color:#fff;width:26px;height:26px;border-radius:50%;font-size:16px;display:none;align-items:center;justify-content:center;transition:background .2s;z-index:2}
.song-card:hover .song-card-add-pl{display:flex}
.song-card-add-pl:hover{background:var(--accent)}

/* ─── Lyrics Overlay ──────────────────────────────── */
.lyrics-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.lyrics-panel{background:var(--bg-surface);border-radius:16px;width:90%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.5);overflow:hidden}
.lyrics-header{justify-content:space-between;padding:18px 22px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.lyrics-header-info{min-width:0;flex:1}
.lyrics-title{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrics-artist{font-size:13px;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrics-close{color:var(--text-muted);font-size:26px;padding:4px 8px;border-radius:6px;transition:background .2s,color .2s;flex-shrink:0}
.lyrics-close:hover{background:rgba(255,255,255,.1);color:#fff}
.lyrics-body{flex:1;overflow-y:auto;padding:20px 24px;min-height:200px}
.lyrics-text p{font-size:15px;line-height:2;color:var(--text-primary);margin:0}
.lyrics-text br{content:'';display:block;margin:8px 0}
.lyrics-loading,.lyrics-not-found{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px}
.lyrics-footer{padding:10px 22px;font-size:11px;color:var(--text-muted);text-align:center;border-top:1px solid var(--border);flex-shrink:0}
.lyrics-synced{text-align:center}
.lyrics-synced .lyrics-line{font-size:15px;line-height:2.1;color:var(--text-muted);margin:0;cursor:pointer;border-radius:6px;transition:color .25s,font-size .25s,transform .25s}
.lyrics-synced .lyrics-line:hover{color:var(--text-primary);background:rgba(255,255,255,.06)}
.lyrics-synced .lyrics-line.active{color:var(--accent);font-size:18px;font-weight:700;transform:scale(1.03)}

/* ─── Analysis Page ─────────────────────────────── */
.an-section-icon{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.an-panels-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.an-panel{background:var(--bg-surface);border-radius:var(--radius);padding:16px 20px}
.an-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:4px 0 20px}
.an-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:14px;font-weight:600;padding:10px 16px;cursor:pointer;border-radius:6px 6px 0 0;transition:color .15s,background .15s}
.an-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.an-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.an-tab:first-child .section-title,.an-tabpanel>.section-title:first-child{margin-top:0}
.an-tabpanel.hidden{display:none}
.an-tabpanel>.section-title:first-child{margin-top:6px}
/* Requests settings (Radarr/Sonarr) sub-tabs - same look as .an-tabs */
.req-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:16px 0 4px}
.req-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:14px;font-weight:600;padding:10px 16px;cursor:pointer;border-radius:6px 6px 0 0;transition:color .15s,background .15s}
.req-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.req-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.req-tabpanel.hidden{display:none}
/* User Statistics */
.us-cards{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.us-card{flex:1 1 120px;min-width:110px;background:var(--bg-surface);border-radius:var(--radius);padding:14px 16px;text-align:center}
.us-card-num{font-size:26px;font-weight:700;color:var(--accent);line-height:1.1}
.us-card-num-sm{font-size:20px}
.us-card-wide{flex:1 1 100%;text-align:left;display:flex;align-items:baseline;gap:12px}
.us-card-wide .us-card-label{margin-top:0}
/* My Account renders the shared stats inside a .settings-section (also --bg-surface), so
   the same-coloured panels/cards blend in. Give them a contrasting fill + border there so
   they read as boxes like the admin drill-down does on the darker Analysis page. */
#my-stats-body .an-panel,#my-stats-body .us-card{background:var(--bg-hover);border:1px solid var(--border)}
.us-card-label{font-size:12px;color:var(--text-secondary);margin-top:4px}
/* Labelled vertical-bar charts (peak hours / busiest days). */
.us-vbars{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:6px}
.us-vbar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;height:100%}
.us-vbar-track{flex:1 1 auto;width:100%;display:flex;align-items:flex-end;justify-content:center}
.us-vbar-fill{width:70%;min-height:0;background:var(--accent);border-radius:3px 3px 0 0;transition:height .2s}
.us-vbar-lbl{font-size:10px;color:var(--text-muted);margin-top:4px;height:12px;white-space:nowrap}
/* Doughnut ("cheese") chart: SVG ring + legend, side by side, wraps on narrow panels. */
.us-donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.us-donut{width:160px;height:160px;flex:0 0 160px}
.us-donut-center{fill:var(--text-primary);font-size:19px;font-weight:700}
.us-donut-center-sub{fill:var(--text-secondary);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.us-donut-legend{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:6px}
.us-donut-lg-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.us-donut-swatch{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.us-donut-lg-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.us-donut-lg-val{flex:0 0 auto;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.us-donut-lg-pct{color:var(--text-muted);margin-left:2px}
.us-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--text-secondary)}
.us-role-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:10px;background:var(--bg-hover);color:var(--text-secondary)}
.us-role-admin{background:rgba(230,126,34,.18);color:#e67e22}
.us-role-child{background:rgba(52,152,219,.18);color:#3498db}
.us-role-guest{background:rgba(155,89,182,.18);color:#9b59b6}
.us-table{width:100%;border-collapse:collapse;font-size:13px}
.us-table th{text-align:left;color:var(--text-secondary);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}
.us-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.us-table .us-num{text-align:right;font-variant-numeric:tabular-nums}
.us-row{cursor:pointer;transition:background .12s}
.us-row:hover{background:var(--bg-hover)}
/* Two-column stats rows: flex with min-width:0 so a panel can never overflow and
   overlap its neighbour (the shared .an-panels-row grid lacked that guard). */
.us-panels-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;align-items:stretch}
.us-panels-row>.an-panel{flex:1 1 320px;min-width:0}
/* Vertical spacing between stacked user-stats blocks (standalone .an-panel has no margin) */
.us-block{margin-bottom:16px}
/* User-stats bars: readable wide labels + a capped bar so long titles stay visible.
   No fr track (columns pack left) so the count sits right after the bar. */
.us-bars{min-width:0}
.us-bars .an-bar-row{display:grid;grid-template-columns:minmax(120px,320px) minmax(70px,440px) max-content;gap:12px;align-items:center;padding:5px 0}
.us-bars .an-bar-label{width:auto;max-width:none;color:var(--text-primary)}
.us-bars .an-bar-value{width:auto;min-width:34px}
.us-daychart{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:8px}
.us-day{flex:1;height:100%;display:flex;align-items:flex-end}
.us-day-bar{width:100%;background:var(--accent);border-radius:2px 2px 0 0;min-height:0;transition:height .3s}
.an-panel-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px}
.an-bar-row{gap:10px;padding:4px 0}
.an-bar-label{font-size:12px;color:var(--text-secondary);width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-bar-track{flex:1;height:8px;background:var(--bg-active);border-radius:4px;overflow:hidden}
.an-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.an-bar-value{font-size:12px;color:var(--text-primary);width:110px;flex-shrink:0;text-align:right;white-space:nowrap}
.an-bar-pct{color:var(--text-muted);font-size:11px}
.an-rank-row{gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.an-rank-row:last-child{border-bottom:none}
.an-rank-num{width:22px;height:22px;justify-content:center;border-radius:50%;background:var(--bg-active);font-size:11px;font-weight:700;color:var(--text-secondary);flex-shrink:0}
.an-rank-row:nth-child(1) .an-rank-num{background:var(--accent);color:#fff}
.an-rank-row:nth-child(2) .an-rank-num{background:rgba(77,139,245,.5);color:#fff}
.an-rank-row:nth-child(3) .an-rank-num{background:rgba(77,139,245,.3);color:#fff}
.an-rank-icon{width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.an-rank-name{flex:1;font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-rank-count{font-size:12px;color:var(--text-secondary);font-weight:600;flex-shrink:0}
.an-quality-meter{position:relative;height:24px;background:var(--bg-active);border-radius:12px;overflow:hidden;margin-bottom:10px}
.an-quality-fill{height:100%;background:#4caf50;border-radius:12px;transition:width .6s ease}
.an-quality-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.an-mini-stats{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-secondary);margin-bottom:10px}
.an-export-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--radius);background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s}
.an-export-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}
.an-export-icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ─── Duplicate Detection ────────────────────────── */
.an-dup-scan-btn{padding:9px 22px;background:var(--accent);border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;transition:opacity .2s}
.an-dup-scan-btn:hover{opacity:.85}
.an-dup-scan-btn:disabled{opacity:.5;cursor:default}
.dup-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;background:var(--bg-active);border-radius:var(--radius);margin-bottom:14px;font-size:13px;color:var(--text-secondary)}
.dup-summary strong{color:var(--text-primary)}
.dup-stat-sep{color:var(--border)}
.dup-empty{font-size:13px;color:var(--text-secondary);padding:8px 0}
.dup-section{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}
.dup-section-header{gap:8px;padding:10px 12px;cursor:pointer;background:var(--bg-surface);user-select:none;transition:background .15s}
.dup-section-header:hover{background:var(--bg-hover)}
.dup-section-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dup-section-label{font-size:13px;font-weight:600;flex:1}
.dup-section-count{font-size:12px;font-weight:700;background:var(--bg-active);padding:2px 8px;border-radius:10px;color:var(--text-secondary)}
.dup-chevron{stroke:var(--text-muted);flex-shrink:0;transition:transform .2s}
.dup-section-body{display:none;padding:0 12px}
.dup-section-body--open{display:block}
.dup-group{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.dup-group:last-child{border-bottom:none}
.dup-group-title{justify-content:space-between;gap:8px;margin-bottom:6px}
.dup-group-title>span:first-child{font-size:13px;font-weight:600;color:var(--text-primary)}
.dup-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(231,76,60,.2);color:#e74c3c;white-space:nowrap;flex-shrink:0}
.dup-item{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:6px;margin-bottom:3px;background:var(--bg-active)}
.dup-item--best{background:rgba(255,255,255,.04)}
.dup-item-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dup-item-path{font-size:11px;font-family:monospace;color:var(--text-secondary);word-break:break-all}
.dup-item-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--text-muted)}
.dup-item-check{flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:2px}
.dup-checkbox{width:17px;height:17px;cursor:pointer;accent-color:#e74c3c}
.an-dup-delete-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:#e74c3c;border:none;border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s}
.an-dup-delete-btn:hover{opacity:.85}
.an-dup-delete-btn .an-export-icon{width:15px;height:15px}

/* ─── Mobile: Hidden by default on desktop ──────── */
.mobile-nav{display:none}
.sidebar-overlay{display:none}
.mobile-progress-bar{display:none}
.mobile-library-menu{display:none}

/* ─── Responsive ─────────────────────────────────── */
@media(max-width:768px){

/* Layout: single column, no sidebar in grid */
.app-container{grid-template-columns:1fr;grid-template-rows:0 1fr 0;grid-template-areas:"topbar" "content" "player"}
.app-container.sidebar-collapsed{grid-template-columns:1fr}

/* ── Fixed Header ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:9997;background:rgba(30,30,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:0 12px;gap:10px}
.sidebar-expand-btn{display:flex!important;align-items:center;justify-content:center}
#btn-gobig{display:none!important}
.search-box input{width:0;padding:7px 0;border:none;background:transparent;opacity:0;transition:width .3s,opacity .3s,padding .3s}
.search-box input.mobile-search-open{width:140px;padding:7px 12px 7px 35px;border:1px solid var(--border);background:var(--bg-surface);opacity:1}
.search-box .search-icon{cursor:pointer;z-index:2}

/* ── Sidebar as Slide-in Drawer ── */
.sidebar{position:fixed;left:-280px;top:0;bottom:0;width:280px;z-index:10000;transition:left .3s ease;display:flex!important}
.sidebar.mobile-open{left:0}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sidebar-overlay.active{display:block}

/* ── Content Padding for Fixed Elements ── */
.main-content{padding:calc(var(--topbar-height) + 12px) 12px 100px 12px;overflow-y:auto}
body.mobile-player-active .main-content{padding-bottom:254px}

/* ── Mobile Bottom Navigation ── */
.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;z-index:9998;background:rgba(18,18,18,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0);align-items:stretch}
.mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);padding:4px 0;transition:color .2s;-webkit-tap-highlight-color:transparent}
.mobile-nav-item span{font-size:10px;font-weight:500;letter-spacing:.3px}
.mobile-nav-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-nav-item.active{color:#22c55e}
.mobile-nav-item.active .mobile-nav-icon{stroke:#22c55e}

/* Library sub-menu popup */
.mobile-library-menu{position:fixed;bottom:62px;left:50%;transform:translateX(-50%);background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:8px 0;min-width:220px;box-shadow:0 -8px 32px rgba(0,0,0,0.6);z-index:10001}
.mobile-library-menu.open{display:block}
.mobile-library-menu button{gap:10px;width:100%;color:var(--text-primary);padding:10px 16px;font-size:14px;transition:background .15s;-webkit-tap-highlight-color:transparent}
.mobile-library-menu button:hover,.mobile-library-menu button:active{background:var(--bg-hover)}
.mobile-library-menu button .mobile-nav-icon{width:18px;height:18px;stroke:var(--text-secondary)}
/* Media-type icon colours - mirror the desktop sidebar palette so each library "pops" on mobile too.
   Video = green, Audio/Music = amber, Pictures = orange, Books = blue, Actors = violet;
   Favorites = red, Playlists = teal, Watchlist = indigo, Analysis = cyan. */
.mobile-library-menu button[data-page="tvshows"] .mobile-nav-icon,
.mobile-library-menu button[data-page="musicvideos"] .mobile-nav-icon,
.mobile-library-menu button[data-page="internettv"] .mobile-nav-icon,
.mobile-library-menu button[data-page="anime"] .mobile-nav-icon{stroke:#3ddc84}
.mobile-library-menu button[data-page="podcasts"] .mobile-nav-icon,
.mobile-library-menu button[data-page="radio"] .mobile-nav-icon,
.mobile-library-menu button[data-page="audiobooks"] .mobile-nav-icon{stroke:#fbbf24}
.mobile-library-menu button[data-page="pictures"] .mobile-nav-icon{stroke:#ff6a1a}
.mobile-library-menu button[data-page="ebooks"] .mobile-nav-icon{stroke:#60a5fa}
.mobile-library-menu button[data-page="actors"] .mobile-nav-icon{stroke:#c084fc}
.mobile-library-menu button[data-page="favourites"] .mobile-nav-icon{stroke:#ef4444}
.mobile-library-menu button[data-page="playlists"] .mobile-nav-icon{stroke:#2dd4bf}
.mobile-library-menu button[data-page="watchlist"] .mobile-nav-icon{stroke:#6366f1}
.mobile-library-menu button[data-page="analysis"] .mobile-nav-icon{stroke:#22d3ee}

/* ── Mobile Mini-Player (expanded) ── */
.player-bar:not(.player-hidden){position:fixed;bottom:56px;left:0;right:0;height:170px;z-index:9997;display:flex;flex-direction:column;justify-content:center;padding:8px 12px;gap:4px;grid-template-columns:unset;background:rgba(30,30,30,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border)}
.player-bar .mobile-progress-bar{display:block;position:absolute;top:0;left:0;right:0;height:2px;background:var(--bg-active)}
.player-bar .mobile-progress-fill{height:100%;background:var(--accent);transition:width .1s linear;width:0}
/* Row 1: cover + text + action buttons */
.player-bar .player-track-info{flex:0 0 auto;min-width:0;gap:8px;width:100%}
.player-bar .player-track-text{flex:1;min-width:0}
.player-bar .player-track-title{font-size:13px}
.player-bar .player-track-artist{font-size:11px}
.player-bar .player-cover{width:53px;height:53px}
.player-bar .player-fav-btn{display:flex;flex-shrink:0}
.player-bar .player-playlist-wrapper{display:flex;flex-shrink:0}
.player-bar #btn-player-lyrics{display:flex;flex-shrink:0}
/* Row 2: transport buttons (own row, centered) */
.player-bar .player-controls{flex:0 0 auto;flex-direction:column;align-items:center;gap:4px;width:100%}
.player-bar .player-buttons{gap:0;flex-shrink:0;justify-content:center;width:100%}
/* Row 3: progress bar (full width below buttons) */
.player-bar .player-progress{display:flex;flex:0 0 auto;align-items:center;gap:6px;width:100%;max-width:none}
.player-bar .player-progress .progress-bar{flex:1;height:9px;border-radius:5px}
.player-bar .player-meta{display:none}
.player-bar .progress-cursor{display:block}
/* Row 4: EQ button - volume control hidden on mobile, only EQ shown */
.player-bar .player-right{justify-content:flex-end;width:100%;flex-shrink:0}
.player-bar .player-right .volume-control{display:none}
.player-bar #btn-shuffle{display:none}
.player-bar #btn-repeat{display:none}
/* Large tap targets for play/prev/next */
.player-bar .player-btn.play-pause{width:54px;height:54px;font-size:20px}
.player-bar #btn-prev,.player-bar #btn-next{width:54px;height:54px;justify-content:center;padding:0}
.player-bar #btn-prev svg,.player-bar #btn-next svg{width:52px;height:52px}
.player-bar #btn-android-player{display:none}
.player-bar #btn-quality{display:none}
.player-bar #btn-quality-mobile{display:flex!important}

/* ── Touch Optimizations ── */
*{touch-action:manipulation}
.card-play-btn,.song-card-play,.mv-card-play{opacity:1!important;transform:translateY(0)!important}
.song-card-fav,.mv-card:hover .song-card-fav{opacity:1}
.radio-card-fav{opacity:1}
.radio-card-play{opacity:1}
.mv-card-menu-btn{opacity:1}

/* ── Card Grids ── */
.card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.songs-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.ebooks-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.audiobooks-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.pictures-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.podcast-now-playing{flex-direction:column;align-items:flex-start;padding:14px;gap:12px}
.podcast-np-art,.podcast-np-art-placeholder{width:70px;height:70px}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.radio-grid{grid-template-columns:1fr}

/* ── Analysis ── */
.an-panels-row{grid-template-columns:1fr}
.an-bar-label{width:80px}
.an-bar-value{width:80px}
.an-pie-container{flex-direction:column;align-items:center}
.an-pie-svg{width:160px;height:160px}

/* ── Other Mobile Adjustments ── */
.page-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
.page-header h1{font-size:18px}
.page-header .filter-bar{flex-wrap:wrap}
.genre-thumb-card{width:64px}
.genre-thumb-add{width:64px}
.genre-thumb-add-plus{font-size:26px}
.genre-thumb-label{font-size:9px;padding:10px 4px 4px}
.music-sub-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.music-sub-nav::-webkit-scrollbar{display:none}
.music-sub-tab{padding:8px 14px;font-size:13px;flex-shrink:0}
.radio-toolbar{flex-direction:column;align-items:flex-start!important}
.radio-search-input{max-width:none;width:100%}
.mv-android-btn{display:none!important}
.pagination{margin-bottom:28px}
.section-title{font-size:16px}
.home-section-title{font-size:15px}
.settings-section{padding:14px}

/* ── User management fields ── */
.user-mgmt-fields{grid-template-columns:1fr}

/* ── Settings ── */
.setting-row{flex-direction:column;align-items:flex-start;gap:6px}
.setting-input{max-width:100%}
.setting-select{width:100%}

/* ── Playlist ── */
.playlist-header{flex-direction:column;gap:12px}
.playlist-actions{flex-direction:column}
.playlist-btn-delete{margin-left:0}

/* ── Video edit modal ── */
.video-edit-modal{padding:20px;max-width:100%}
.video-edit-row{grid-template-columns:1fr}

/* ── Picture modal ── */
.picture-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0}
.picture-modal-body{flex-direction:column}
.picture-modal-sidebar{width:100%;border-left:none;border-top:1px solid var(--border)}
.picture-modal-sidebar.collapsed{width:100%;height:0}
.picture-modal-metadata{min-width:0;max-height:200px}
.pic-details-toggle{min-width:0}

/* ── Lyrics panel ── */
.lyrics-panel{width:100%;max-width:100%;max-height:100vh;border-radius:0}

/* ── eBook reader ── */
.ebook-reader-toolbar{padding:8px 12px;gap:8px}
.ebook-reader-title{font-size:13px}
.epub-nav-btn{padding:8px 12px;font-size:22px}
}

/* ─── Music Table Album Art ─────────────────────────── */
.track-art{width:44px;padding:4px 6px !important}
.track-art-thumb{width:36px;height:36px;border-radius:4px;overflow:hidden;background:var(--bg-hover);justify-content:center;flex-shrink:0}
.track-art-thumb img{width:100%;height:100%;object-fit:cover}
.track-art-placeholder{justify-content:center;width:100%;height:100%;font-size:16px;color:var(--text-muted)}

/* ─── Music Sub-Navigation Tabs ─────────────────────── */
.music-sub-nav{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}
.music-sub-tab{border-bottom:2px solid transparent;color:var(--text-secondary);padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap}
.music-sub-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.music-sub-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ─── Songs Grid (card layout with big album art, multiple per row) ── */
.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.song-card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.song-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
.song-card-art{aspect-ratio:1/1;background:var(--bg-active);justify-content:center;position:relative;overflow:hidden}
.song-card-art img{width:100%;height:100%;object-fit:cover}
.song-card-placeholder{justify-content:center;width:100%;height:100%;font-size:64px;color:var(--text-muted)}
.song-card-play{position:absolute;bottom:10px;right:10px;width:44px;height:44px;background:var(--accent);border-radius:50%;color:#fff;font-size:20px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.song-card:hover .song-card-play{opacity:1;transform:translateY(0)}
.song-card-info{padding:10px 12px}
.song-card-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-card-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.song-card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:4px;gap:4px}
.song-card-meta span{white-space:nowrap}
.song-card-meta span:first-child{max-width:70%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.song-card-meta span:not(:first-child){flex-shrink:0}
.song-card-genres{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.song-card-genre-pill{font-size:9px;font-weight:600;padding:1px 6px;border-radius:8px;background:rgba(var(--accent-rgb,99,102,241),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb,99,102,241),.2);cursor:pointer;white-space:nowrap;letter-spacing:.2px;transition:background .15s}
.song-card-genre-pill:hover{background:var(--accent);color:#fff}
.song-card-fav{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:var(--text-muted);font-size:16px;padding:5px 7px;border-radius:50%;opacity:0;transition:opacity .2s,color .2s}
.song-card:hover .song-card-fav,.mv-card:hover .song-card-fav{opacity:1}
.song-card-fav:hover,.song-card-fav.active{color:var(--danger);opacity:1}

/* ─── Music library compact list view (tiny thumbnail + song name) ── */
.songs-list{display:flex;flex-direction:column;gap:2px}
/* Compact list rows for the Favorites card sections (music videos / movies / audiobooks) in List view */
.fav-list{display:flex;flex-direction:column;gap:2px}
.fav-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:8px;cursor:pointer;position:relative;transition:background .12s}
.fav-row:hover{background:var(--bg-hover)}
.fav-row-art{flex:0 0 auto;width:44px;height:44px;border-radius:5px;overflow:hidden;background:var(--bg-active);display:flex;align-items:center;justify-content:center}
.fav-row-art img{width:100%;height:100%;object-fit:cover}
.fav-row-ph{font-size:20px;color:var(--text-muted);line-height:1}
.fav-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.fav-row-title{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-row-sub{font-size:11.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-row-count{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.song-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:8px;cursor:pointer;position:relative;transition:background .12s}
.song-row:hover{background:var(--bg-hover)}
.song-row-art{flex:0 0 auto;width:38px;height:38px;border-radius:5px;overflow:hidden;background:var(--bg-active);display:flex;align-items:center;justify-content:center;position:relative}
.song-row-art img{width:100%;height:100%;object-fit:cover}
.song-row-ph{font-size:20px;color:var(--text-muted);line-height:1}
.song-row-play{position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;font-size:14px;display:none;align-items:center;justify-content:center;border:none;cursor:pointer}
.song-row:hover .song-row-play{display:flex}
.song-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.song-row-title{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-row-artist{font-size:11.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-row-album{flex:0 1 26%;min-width:0;font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-row-fmt{flex:0 0 auto;margin-left:0}
.song-row-dur{flex:0 0 auto;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
.song-row-actions{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.song-row-fav{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:15px;padding:4px;line-height:1;opacity:.55;transition:color .15s,opacity .15s}
.song-row:hover .song-row-fav{opacity:1}
.song-row-fav:hover,.song-row-fav.active{color:var(--danger);opacity:1}
.song-row-dots,.song-row-add-pl{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;line-height:1;opacity:0;transition:opacity .15s,color .15s}
.song-row-dots{font-size:18px;font-weight:700}
.song-row-add-pl{font-size:16px}
.song-row:hover .song-row-dots,.song-row:hover .song-row-add-pl{opacity:.7}
.song-row-dots:hover,.song-row-add-pl:hover{color:var(--accent);opacity:1}
.music-listmode-btn svg{width:15px;height:15px}
@media(max-width:640px){.song-row-album,.song-row-fmt{display:none}}

/* Compact list rows for grouped Album/Artist/Genre views (music list mode) */
.music-group-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.music-group-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .12s}
.music-group-row:hover{background:var(--bg-hover)}
.music-group-row-art{flex:0 0 auto;width:44px;height:44px;border-radius:6px;overflow:hidden;background:var(--bg-active);display:flex;align-items:center;justify-content:center}
.music-group-row-art--round{border-radius:50%}
.music-group-row-art img{width:100%;height:100%;object-fit:cover}
.music-group-row-ph{font-size:20px;color:var(--text-muted);line-height:1}
.music-group-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.music-group-row-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-group-row-sub{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-group-row-meta{flex:0 0 auto;font-size:12px;color:var(--text-muted);white-space:nowrap}
.music-group-row .song-row-dots{flex:0 0 auto}
.music-group-row:hover .song-row-dots{opacity:.7}

/* ─── Pagination ────────────────────────────────────── */
.pagination{justify-content:center;gap:4px;padding:20px 0;flex-wrap:wrap}
.page-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .15s;min-width:36px;text-align:center}
.page-btn:hover:not(.disabled):not(.active){background:var(--bg-hover);color:var(--text-primary)}
.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.page-btn.disabled{opacity:.35;cursor:default;pointer-events:none}
.page-ellipsis{color:var(--text-muted);padding:6px 4px;font-size:13px}
/* Duplicate of the bottom pager, rendered above the grid so changing page does not
   require scrolling past every card. Tighter spacing - it sits under the info row. */
.pagination.pagination-top{padding:0 0 14px;margin-bottom:0}

/* ─── Album Hero ─────────────────────────────────────── */
.album-hero{display:flex;gap:28px;align-items:flex-start;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.album-hero-art{width:200px;min-width:200px;height:200px;border-radius:12px;overflow:hidden;background:var(--bg-active);box-shadow:0 8px 32px rgba(0,0,0,.45);flex-shrink:0}
.album-hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.album-hero-art-placeholder{width:100%;height:100%;justify-content:center;font-size:64px;color:var(--text-muted)}
.album-hero-info{flex:1;min-width:0;padding-top:4px}
.album-hero-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.album-hero-title{font-size:26px;font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:10px;word-break:break-word}
.album-hero-genre{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.album-hero-genre .genre-chip{font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:20px;background:var(--accent-dim);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.album-hero-meta{font-size:13px;color:var(--text-secondary);margin-bottom:22px;line-height:1.5}
.album-hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.album-hero-actions .btn-primary{margin-top:0;padding:10px 24px;font-size:14px}
.album-hero-actions .btn-secondary{padding:10px 20px;font-size:14px}

/* ─── Pictures Grid ─────────────────────────────────── */
.pictures-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.picture-card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.picture-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
.picture-card-thumb{aspect-ratio:4/3;background:var(--bg-active);justify-content:center;overflow:hidden;position:relative}
.picture-card-thumb img{width:100%;height:100%;object-fit:cover}
.pic-360-badge{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.65);color:#fff;font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;letter-spacing:.5px;pointer-events:none;border:1.5px solid #7dd3fc;box-shadow:0 0 6px rgba(125,211,252,.45)}
.pic-live-badge{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.55);color:#4ade80;font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;letter-spacing:.5px;pointer-events:none}
.pic-raw-badge{position:absolute;top:5px;left:5px;color:#fff;font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;letter-spacing:.5px;pointer-events:none;opacity:.92}
.picture-card-placeholder{justify-content:center;width:100%;height:100%;font-size:28px;color:var(--text-muted)}
.picture-card-info{padding:5px 8px 6px}
.picture-card-name{font-size:11px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picture-card-meta{font-size:10px;color:var(--text-muted);margin-top:1px}

/* ─── Pictures: view tabs (icon-only) ─────────────────── */
.pic-view-tabs{display:flex;gap:3px}
.pic-view-tab-icon{justify-content:center;width:30px;height:30px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all .15s;flex-shrink:0}
.pic-view-tab-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pic-view-tab-icon:hover{background:var(--bg-hover);color:var(--text-primary)}
.pic-view-tab-icon.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── Pictures: Timeline view ──────────────────────── */
.pic-timeline-wrapper{position:relative;padding-right:52px}
.pic-year-anchor{height:0;position:relative;scroll-margin-top:80px}
.pic-date-group{margin-bottom:28px}
.pic-date-header{font-size:12px;font-weight:600;color:var(--text-secondary);padding:6px 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px;letter-spacing:.3px}
.pic-timeline-grid{display:flex;flex-wrap:wrap;gap:3px}
.pic-timeline-card{width:180px;height:135px;border-radius:4px;overflow:hidden;cursor:pointer;position:relative;background:var(--bg-active);flex-shrink:0}
.pic-timeline-card .picture-card-thumb{width:100%;height:100%;aspect-ratio:unset}
.pic-timeline-card .picture-card-thumb img{transition:transform .2s}
.pic-timeline-card:hover .picture-card-thumb img{transform:scale(1.06)}
.pic-timeline-card .picture-card-info{display:none}

/* ─── Pictures: Timeline scrubber ─────────────────── */
.pic-timeline-scrubber{position:fixed;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:2px;z-index:20;max-height:80vh;overflow:hidden;pointer-events:all;user-select:none}
.pic-year-label{font-size:12px;color:var(--text-secondary);text-align:right;cursor:pointer;padding:2px 6px 2px 4px;border-right:2px solid transparent;line-height:1.4;transition:all .12s;border-radius:2px 0 0 2px}
.pic-year-label:hover{color:var(--text-primary);background:var(--bg-hover)}
.pic-year-label.active{color:var(--accent);border-right-color:var(--accent);font-weight:700}

/* ─── Video: Letter / Year scrubber ───────────────── */
.vid-scrubber{position:fixed;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:1px;z-index:20;max-height:80vh;overflow:hidden;pointer-events:all;user-select:none;touch-action:none;padding:6px 3px;border-radius:12px;transition:background .15s}
.vid-scrubber:hover,.vid-scrubber:active{background:var(--bg-surface)}
.vid-scrubber-item{font-size:12px;color:var(--text-secondary);text-align:right;cursor:pointer;padding:2px 6px 2px 4px;border-right:2px solid transparent;line-height:1.5;transition:all .12s;border-radius:2px 0 0 2px;font-weight:600}
.vid-scrubber-item:hover{color:var(--text-primary);background:var(--bg-hover)}
.vid-scrubber-item.active{color:var(--accent);border-right-color:var(--accent);font-weight:700}
.vid-scrubber-item.empty{opacity:.2;cursor:default;pointer-events:none}
/* Up/down arrows for the windowed year rail (Videos/Anime by-year + Pictures timeline) */
.yr-arrow{font-size:14px;color:var(--text-secondary);text-align:right;cursor:pointer;padding:1px 5px 1px 4px;line-height:1.3;user-select:none;transition:color .12s;font-weight:700}
.yr-arrow:hover{color:var(--accent)}
.yr-arrow.disabled{opacity:.2;cursor:default;pointer-events:none}

/* ─── Video: Letter / Year timeline layout ────────── */
.vid-timeline-wrapper{padding-right:52px}
.vid-letter-anchor,.vid-year-anchor{height:0;position:relative;scroll-margin-top:80px}
.vid-letter-header{font-size:28px;font-weight:800;color:var(--accent);padding:10px 0 8px;border-bottom:2px solid var(--accent);margin-bottom:14px;opacity:.9;letter-spacing:-0.5px}
.vid-year-header{font-size:22px;font-weight:700;color:var(--text-primary);padding:14px 0 10px;border-bottom:1px solid var(--border);margin-bottom:14px}
.vid-year-count{font-size:13px;font-weight:400;color:var(--text-secondary);margin-left:8px}
/* Actors - compact list view */
.actors-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.actor-row{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border);cursor:pointer;transition:background .15s,border-color .15s}
.actor-row:hover{background:var(--bg-hover);border-color:var(--accent)}
.actor-row-thumb{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-card);display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.actor-row-thumb img{width:100%;height:100%;object-fit:cover}
.actor-row-name{flex:1;min-width:0;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actor-row-meta{color:var(--text-secondary);font-size:0.82rem;flex-shrink:0}

/* ─── Pictures: Map view ───────────────────────────── */
.pic-map-container{position:relative;border-radius:var(--radius);overflow:hidden;margin-top:4px}
.pic-cluster-icon{width:38px;height:38px;border-radius:50%;background:var(--accent,#3498db);color:#fff;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.25);cursor:pointer}
.pic-map-marker{width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;transition:transform .15s}
.pic-map-marker:hover{transform:scale(1.18)}
.pic-map-marker img{width:100%;height:100%;object-fit:cover}
.pic-map-no-gps{padding:48px 0;text-align:center;color:var(--text-secondary);font-size:14px}
.pic-map-no-gps svg{width:48px;height:48px;margin-bottom:12px;opacity:.3}
/* Override MarkerCluster default colours to use accent */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(var(--accent-rgb,52,152,219),.25)}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--accent,#3498db);color:#fff}

/* ─── eBooks Grid ──────────────────────────────────── */
.ebooks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.audiobooks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
/* Games "By Platform" view: fixed 8-wide rows per platform section (see _buildGamesPlatformContent).
   justify-items:start + a card width under 100% keeps posters packed flush left instead of each
   stretching to fill its 1fr column (the stretch was also what made the earlier anchor-in-grid bug
   look like a big gap rather than a simple left shift). Width is ~20% under the column's natural
   size, matching the ebooks-grid 180px baseline this view was modeled on. */
.games-platform-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:18px;margin-bottom:28px;justify-items:start}
.games-platform-grid .ebook-card{width:80%}
/* eBooks grouped view (Category / Type / Author) */
.ebook-count-row{color:var(--text-secondary);font-size:13px;margin-bottom:14px}
.ebook-groups{display:flex;flex-direction:column;gap:22px}
.ebook-group-header{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--text-primary);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:16px;letter-spacing:.01em}
.ebook-group-count{font-size:12px;font-weight:600;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;padding:1px 9px}
.ebook-back-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}
.ebook-back-btn:hover{background:var(--bg-hover);border-color:var(--accent)}
.ebook-back-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Collection sequence badge (Collections view) - top-left, clear of the format badge */
.ebook-seq-badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
/* Open Library metadata fetch modal + button */
.ol-fetch-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border)}
.ol-fetch-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.ol-fetch-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ol-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10002;display:flex;align-items:center;justify-content:center;padding:20px}
.ol-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:640px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.6);overflow:hidden}
.ol-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.ol-modal-title{font-size:16px;font-weight:600;color:var(--text-primary)}
.ol-modal-close{width:30px;height:30px;border:none;border-radius:50%;background:var(--bg-hover);color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer}
.ol-modal-close:hover{background:var(--bg-active,var(--bg-hover));color:var(--text-primary)}
.ol-search-row{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ol-search-row .video-edit-input{flex:1;min-width:120px}
.ol-results{overflow-y:auto;padding:6px 18px 18px}
.ol-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:34px}
.ol-result{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.ol-result:last-child{border-bottom:none}
.ol-cover{width:56px;height:84px;object-fit:cover;border-radius:6px;background:var(--bg-active);flex-shrink:0}
.ol-cover-ph{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--text-muted)}
.ol-result-info{flex:1;min-width:0}
.ol-result-title{font-weight:600;color:var(--text-primary);font-size:14px}
.ol-result-meta{color:var(--text-secondary);font-size:12px;margin-top:3px}
.ol-subjects{color:var(--text-muted);font-size:11px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-use-btn{flex-shrink:0}
.ebook-card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.ebook-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
/* Multi-select mode */
.ebook-card.is-selected{outline:3px solid var(--accent);outline-offset:-3px}
.ebook-selbox{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.55);border:2px solid #fff;display:flex;align-items:center;justify-content:center;z-index:2}
.ebook-selbox.checked{background:var(--accent);border-color:var(--accent)}
.ebook-selbox svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ebook-select-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:30;background:var(--bg-primary);border-bottom:1px solid var(--border);padding:10px 0}
.ebook-select-count{font-weight:600;color:var(--text-primary);margin-right:4px}
.ebook-card-cover{aspect-ratio:2/3;background:var(--bg-active);justify-content:center;position:relative;overflow:hidden}
.ebook-card-cover img{width:100%;height:100%;object-fit:cover}
/* Audio book covers are square (400×400) - override portrait defaults */
.audiobook-card .ebook-card-cover{aspect-ratio:1/1}
.audiobook-card .ebook-card-cover img{object-fit:contain;background:var(--bg-active)}
.ebook-card-placeholder{justify-content:center;width:100%;height:100%;font-size:64px;color:var(--text-muted)}
.ebook-format-badge{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.ebook-format-pdf{background:rgba(231,76,60,.85);color:#fff}
.ebook-format-epub{background:rgba(39,174,96,.85);color:#fff}
.ebook-format-cbz{background:rgba(230,126,34,.85);color:#fff}
.ebook-format-cbr{background:rgba(155,89,182,.85);color:#fff}
.ebook-format-mobi{background:rgba(243,156,18,.85);color:#fff}
.ebook-format-game{background:rgba(142,68,173,.85);color:#fff}
.ebook-format-mp3{background:rgba(52,152,219,.85);color:#fff}
.ebook-format-m4b{background:rgba(155,89,182,.85);color:#fff}
.ebook-format-m4a{background:rgba(142,68,173,.85);color:#fff}
.ebook-format-aac{background:rgba(230,126,34,.85);color:#fff}
.ebook-format-ogg{background:rgba(22,160,133,.85);color:#fff}
.ebook-format-opus{background:rgba(39,174,96,.85);color:#fff}
.ebook-format-flac{background:rgba(241,196,15,.85);color:#222}
.ebook-card-info{padding:10px 12px}
.ebook-card-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ebook-card-author{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ebook-card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:4px}
.ebook-card-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Per-user "read" state - green badge + dimmed cover (mirrors the movie/TV WATCHED badge) */
.ebook-read-badge{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;gap:3px;background:rgba(34,197,94,.92);color:#fff;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.3px;z-index:2}
.ebook-read-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ebook-card[data-read="1"] .ebook-card-cover img,.ebook-card[data-read="1"] .ebook-card-placeholder{opacity:.42;transition:opacity .18s}
.ebook-card[data-read="1"]:hover .ebook-card-cover img,.ebook-card[data-read="1"]:hover .ebook-card-placeholder{opacity:1}
/* 3-dot quick-menu button on eBook cards (reuses .mv-card-menu-btn look) */
.ebook-card:hover .ebook-card-menu-btn{opacity:1}
.ebook-count-hidden{color:var(--text-muted)}
/* Detail-page read toggle: solid green once the book is marked read */
.eb-read-toggle.is-read{background:rgba(34,197,94,.16)!important;color:#22c55e!important}

/* eBook Reader */
.ebook-reader-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);z-index:1000;display:flex;flex-direction:column}
.ebook-reader-toolbar{gap:12px;padding:10px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}
.ebook-reader-title{flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ebook-reader-actions{gap:4px;flex-shrink:0}
.ebook-reader-btn{color:var(--text-secondary);padding:6px 10px;border-radius:var(--radius-sm);font-size:13px;transition:color .2s,background .2s;gap:6px}
.ebook-reader-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.ebook-reader-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ebook-reader-body{flex:1;overflow:hidden;position:relative;display:flex;align-items:stretch}
.ebook-reader-content{flex:1;overflow:hidden;position:relative}
.ebook-reader-content iframe{border:none;background:#fff}
.ebook-pdf-frame{width:100%;height:100%;border:none}
.epub-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;font-size:28px;padding:12px 16px;border-radius:var(--radius-sm);transition:background .2s;z-index:2}
.epub-nav-btn:hover{background:rgba(0,0,0,.7)}
.epub-nav-prev{left:8px}
.epub-nav-next{right:8px}
.epub-progress{font-size:12px;color:var(--text-muted);white-space:nowrap}
.epub-page-nav{gap:4px}
.epub-page-input{width:52px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;padding:4px 6px;text-align:center;outline:none;-moz-appearance:textfield}
.epub-page-input::-webkit-outer-spin-button,.epub-page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.epub-page-input:focus{border-color:var(--accent)}
.epub-page-total{font-size:13px;color:var(--text-muted);white-space:nowrap}

/* ─── Music Videos Grid ────────────────────────────── */
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.mv-card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.mv-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
.mv-card-thumb{aspect-ratio:2/3;background:var(--bg-active);justify-content:center;position:relative;overflow:hidden}
.mv-card-thumb img{width:100%;height:100%;object-fit:cover}
.mv-card-placeholder{justify-content:center;width:100%;height:100%;font-size:48px;color:var(--text-muted)}
.mv-duration-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.8);color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600;letter-spacing:.3px}
.mv-format-badge{position:absolute;top:6px;left:6px;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(108,92,231,.85);color:#fff}
.mv-format-ok{background:rgba(39,174,96,.85)}
.mv-format-warn{background:rgba(231,76,60,.85)}
/* Resolution quality tiers - one set of 3 colours shared by poster badges and the
   Quality filter menu (defined after the badge bases so they override them). */
.vid-qual-4k{background:rgba(216,140,0,.92);color:#241800}
.vid-qual-hd{background:rgba(30,136,229,.92);color:#fff}
.vid-qual-sd{background:rgba(120,144,156,.92);color:#fff}
/* Quality badges ~50% larger than the base format badge (9-10px) so they read
   clearly in the menu and on posters, including on mobile. Applied via the shared
   .vid-qual-* classes (defined after the badge bases so this wins). */
.vid-qual-4k,.vid-qual-hd,.vid-qual-sd{font-size:10.5px;padding:2px 6px;border-radius:4px;letter-spacing:.5px}
.vid-qual-count{color:var(--text-muted);font-size:12px;font-weight:500}
.mv-hdr-badge{position:absolute;top:28px;left:6px;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:rgba(243,156,18,.9);color:#000}
.mv-hdr-badge.mv-hdr-dv{background:rgba(77,166,255,.9);color:#fff;letter-spacing:.2px;text-transform:none}
.mv-hdr-badge.mv-hdr-plus{background:rgba(230,81,0,.9);color:#fff}
.mv-hdr-badge.mv-hdr-hlg{background:rgba(26,188,156,.9);color:#fff}
.video-type-badge{position:absolute;top:6px;right:6px;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.video-type-movie{background:rgba(77,139,245,.85)}
.video-type-tv{background:rgba(155,89,182,.85)}
.video-type-documentary{background:rgba(230,126,34,.85)}
.video-type-anime{background:rgba(236,72,153,.85)}
.mv-episode-badge{position:absolute;bottom:6px;left:6px;background:rgba(155,89,182,.9);color:#fff;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.3px;min-width:18px;text-align:center}
.mv-card-series{border:1px solid rgba(155,89,182,.25)}
.mv-card-series:hover{border-color:rgba(155,89,182,.5)}
.mv-rating-badge{position:absolute;top:28px;right:6px;color:#fff;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;z-index:2}
.mv-poster-thumb{aspect-ratio:2/3}
.mv-card-poster .mv-card-thumb img{object-fit:cover}
.play-count-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.75);color:#fff;padding:2px 7px;border-radius:3px;font-size:10px;font-weight:600;letter-spacing:.3px;z-index:2}
.mv-watched-badge{position:absolute;top:6px;left:6px;background:rgba(34,197,94,0.9);color:#fff;padding:2px 7px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.3px;z-index:2;gap:3px}
.mv-watched-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Watched items are dimmed so they read as "already seen" at a glance - the badge
   alone is easy to miss on a dense grid. Only the artwork fades: the badge, title
   and the rest of the overlay keep full contrast, and hover restores the poster. */
.mv-card[data-watched="1"] .mv-card-thumb img,.mv-card[data-watched="1"] .mv-card-placeholder,.series-ep-card.is-watched .series-ep-thumb img,.series-ep-card.is-watched .series-ep-thumb-ph{opacity:.45;transition:opacity .18s}
.mv-card[data-watched="1"]:hover .mv-card-thumb img,.mv-card[data-watched="1"]:hover .mv-card-placeholder,.series-ep-card.is-watched:hover .series-ep-thumb img,.series-ep-card.is-watched:hover .series-ep-thumb-ph{opacity:1}
.mv-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);width:48px;height:48px;background:rgba(0,0,0,.65);border:2px solid rgba(255,255,255,.7);border-radius:50%;color:#fff;font-size:20px;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s;justify-content:center}
.mv-card:hover .mv-card-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Multiple-versions badge + inline edit on collection cards */
.mv-versions-badge{position:absolute;bottom:6px;left:6px;padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:rgba(0,0,0,.72);color:#fff;border:1px solid rgba(255,255,255,.35);z-index:2}
.mv-card-edit{position:absolute;top:6px;right:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.5);border-radius:6px;color:#fff;font-size:13px;cursor:pointer;opacity:0;transition:opacity .2s;z-index:3}
.mv-card:hover .mv-card-edit{opacity:1}
/* Version picker modal */
.ver-pick-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px}
.ver-pick-modal{background:var(--bg-surface);border-radius:14px;width:100%;max-width:460px;max-height:85vh;overflow-y:auto;padding:22px;box-shadow:0 16px 48px rgba(0,0,0,.6)}
.ver-pick-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ver-pick-header h3{margin:0;font-size:18px;color:var(--text-primary)}
.ver-pick-close{background:none;border:none;color:var(--text-secondary);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.ver-pick-sub{font-size:12px;color:var(--text-secondary);margin:4px 0 14px}
.ver-pick-list{display:flex;flex-direction:column;gap:8px}
.ver-pick-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02)}
.ver-pick-info{min-width:0}
.ver-pick-label{font-size:14px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.ver-pick-specs{font-size:11px;color:var(--text-secondary);margin-top:2px}
.ver-pick-watched{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:rgba(34,197,94,.9);color:#fff;padding:1px 6px;border-radius:3px}
.ver-pick-actions{display:flex;gap:6px;flex-shrink:0}
.ver-pick-btn{padding:6px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg-elevated,rgba(255,255,255,.05));color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.ver-pick-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ver-pick-btn:hover{filter:brightness(1.1)}
.mv-card-info{padding:10px 12px}
.mv-card-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-grid .mv-card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:unset;line-height:1.3}
.mv-card-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mv-card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:4px}
.mv-card-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-stats-bar{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;padding:10px 16px;background:var(--bg-surface);border-radius:var(--radius);font-size:13px;color:var(--text-secondary)}
.mv-stat-warn{color:var(--warning);font-weight:600}

/* ─── Library View picker (Poster / Banner / List / Table) ─────────────── */
.page-title-row{display:flex;align-items:center;gap:12px}
.vid-view-wrap{position:relative;display:inline-flex}
.vid-view-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:1200;min-width:180px;max-height:min(70vh,520px);overflow-y:auto;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px}
.vid-view-menu.hidden{display:none}
.vid-view-menu.vid-view-menu-right{left:auto;right:0}
/* Mobile (bottom-nav layout, <=768px): cap the menu width to the viewport so it is
   always fully visible. A right-aligned menu (sort buttons on the RIGHT, e.g. the
   Music library) must KEEP right:0 so it extends leftward and stays on-screen -
   forcing left:0 here pushed a right-edge menu off the right side of the screen. */
@media(max-width:768px){
  .vid-view-menu{max-width:calc(100vw - 24px)}
}
.vid-view-sep{height:1px;background:var(--border);margin:5px 4px}
.vid-view-menu-label{padding:4px 14px 3px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text-muted);text-transform:uppercase}
.vid-view-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:none;color:var(--text-secondary);border-radius:7px;cursor:pointer;font-size:13px;text-align:left;transition:background .12s,color .12s}
.vid-view-opt:hover{background:var(--bg-hover);color:var(--text-primary)}
.vid-view-opt.active{color:var(--text-primary);font-weight:600}
.vid-view-opt-ico{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vid-view-opt-label{flex:1 1 auto}
.vid-view-opt-check{width:15px;height:15px;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Recommended / "For You" view */
.rec-subtitle{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:14px;margin:2px 0 16px}
.rec-subtitle-ico{width:16px;height:16px;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rec-loading{color:var(--text-secondary);font-size:14px;padding:24px 4px}
.rec-reason{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;line-height:1.3;color:var(--accent);opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-reason-ico{width:11px;height:11px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Banner view - wide landscape cards */
.mv-banner-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.mv-banner{position:relative;background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.mv-banner:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
.mv-banner-img{position:relative;aspect-ratio:16/9;background:var(--bg-active)}
.mv-banner-img img{width:100%;height:100%;object-fit:cover}
.mv-banner-img .mv-card-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:44px;color:var(--text-muted)}
.mv-banner-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%)}
.mv-banner-overlay{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff}
.mv-banner-title{font-size:16px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-banner-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:rgba(255,255,255,.85)}
.mv-banner-badge{background:rgba(255,255,255,.18);padding:1px 7px;border-radius:3px;font-weight:600;letter-spacing:.3px}
.mv-banner-rating{color:#f5c518;font-weight:700}
.mv-banner-menu{position:absolute;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.5);border:none;color:#fff;width:28px;height:28px;border-radius:6px;font-size:18px;font-weight:700;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
.mv-banner:hover .mv-banner-menu{opacity:1}
.mv-banner-menu:hover{background:var(--accent)}
.mv-banner[data-watched="1"] .mv-banner-img img{opacity:.5;transition:opacity .18s}
.mv-banner[data-watched="1"]:hover .mv-banner-img img{opacity:1}

/* Detailed list view - thumb + title/meta/overview rows */
.mv-detail-list{display:flex;flex-direction:column;gap:8px}
.mv-lrow{display:flex;align-items:stretch;gap:14px;padding:10px;background:var(--bg-surface);border-radius:var(--radius);cursor:pointer;position:relative;transition:background .12s}
.mv-lrow:hover{background:var(--bg-hover)}
.mv-lrow-thumb{position:relative;flex:0 0 auto;width:64px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--bg-active)}
.mv-lrow-thumb img{width:100%;height:100%;object-fit:cover}
.mv-lrow-thumb .mv-card-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:26px;color:var(--text-muted)}
.mv-lrow-check{position:absolute;top:4px;left:4px;background:rgba(34,197,94,.92);color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.mv-lrow-check svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mv-lrow-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.mv-lrow-head{display:flex;align-items:baseline;gap:10px}
.mv-lrow-title{font-size:15px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-lrow-rating{flex:0 0 auto;color:#f5a623;font-size:12.5px;font-weight:700}
.mv-lrow-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.mv-lrow-dot{color:var(--text-muted)}
.mv-lrow-overview{font-size:12.5px;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mv-lrow-menu{flex:0 0 auto;align-self:flex-start;background:none;border:none;color:var(--text-muted);font-size:20px;font-weight:700;line-height:1;padding:4px 8px;cursor:pointer;opacity:.55;transition:color .15s,opacity .15s}
.mv-lrow:hover .mv-lrow-menu{opacity:1}
.mv-lrow-menu:hover{color:var(--accent)}
.mv-lrow[data-watched="1"] .mv-lrow-thumb img{opacity:.5}
.mv-lrow[data-watched="1"]:hover .mv-lrow-thumb img{opacity:1}

/* Table view - compact tabular rows */
.mv-table-wrap{overflow-x:auto;background:var(--bg-surface);border-radius:var(--radius)}
.mv-table{width:100%;border-collapse:collapse;font-size:13px}
.mv-table thead th{text-align:left;padding:10px 14px;color:var(--text-secondary);font-weight:600;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
.mv-table th.mv-th-c{text-align:center}
.mv-tr{cursor:pointer;transition:background .12s}
.mv-tr:hover{background:var(--bg-hover)}
.mv-tr td{padding:9px 14px;color:var(--text-secondary);border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.mv-tr:last-child td{border-bottom:none}
.mv-td-title{color:var(--text-primary);font-weight:600;max-width:360px;overflow:hidden;text-overflow:ellipsis}
.mv-td-c{text-align:center}
.mv-td-qual{background:var(--bg-active);padding:1px 7px;border-radius:3px;font-weight:600;font-size:11.5px}
.mv-td-check{width:16px;height:16px;stroke:#22c55e;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mv-tr[data-watched="1"] .mv-td-title{color:var(--text-secondary)}
.mv-td-sub{color:var(--text-muted);font-weight:400;font-size:12px}
.mv-td-prog{display:inline-block;vertical-align:middle;width:90px;height:6px;border-radius:3px;background:var(--bg-active);overflow:hidden}
.mv-td-prog-fill{height:100%;background:var(--accent);border-radius:3px}
.mv-td-prog-lbl{margin-left:8px;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* Banner centered play (Music Videos / In Progress) */
.mv-banner-play{z-index:2}
.mv-banner:hover .mv-banner-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mv-banner-prog{z-index:2}

/* Landscape (16:9) list-row thumb - Music Videos + In Progress */
.mv-lrow-thumb-wide{width:120px;aspect-ratio:16/9}
.mv-lrow-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);width:36px;height:36px;background:rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.7);border-radius:50%;color:#fff;font-size:14px;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .18s,transform .18s}
.mv-lrow:hover .mv-lrow-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mv-lrow-prog{z-index:2}
.mv-lrow-fav{position:static;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;padding:4px 6px;opacity:.55;transition:color .15s,opacity .15s;align-self:center}
.mv-lrow:hover .mv-lrow-fav{opacity:1}
.mv-lrow-fav:hover,.mv-lrow-fav.active{color:var(--danger);opacity:1}

@media(max-width:640px){
    .mv-banner-list{grid-template-columns:1fr}
    .mv-lrow-overview{-webkit-line-clamp:1}
    .mv-lrow-thumb-wide{width:96px}
}
.mv-artist-chips{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-bottom:16px;overflow:hidden}
.mv-artist-nav{flex-shrink:0;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius);padding:4px 10px;font-size:18px;line-height:1;cursor:pointer;transition:background .15s}
.mv-artist-nav:hover:not(.disabled){background:var(--bg-hover)}
.mv-artist-nav.disabled{opacity:.3;cursor:default}
.mv-artist-nav-label{flex-shrink:0;font-size:12px;color:var(--text-secondary);white-space:nowrap;padding:0 2px}
/* ─── Trakt.tv ─────────────────────────────────────── */
.trakt-connected-badge{color:#ed2224;font-weight:600}
.trakt-profile-link{margin-left:8px;font-size:12px;color:var(--text-secondary);text-decoration:none;opacity:.8}.trakt-profile-link:hover{opacity:1;text-decoration:underline}
.trakt-action-btn{margin-left:10px;padding:4px 12px;font-size:12px}
.setting-hint a,.setting-group-label a{color:var(--accent);text-decoration:none}.setting-hint a:hover,.setting-group-label a:hover{text-decoration:underline;opacity:.85}
/* ─── Artist Page ─────────────────────────────────────────── */
.artist-action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:13px}
/* Hero banner */
.artist-hero{position:relative;overflow:hidden;border-radius:12px;margin-bottom:24px;min-height:180px;background:var(--bg-surface)}
.artist-hero--no-bg{background:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-active) 100%)}
.artist-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center center;filter:blur(4px) brightness(.45);transform:scale(1.01)}
.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.15) 100%)}
.artist-hero-body{position:relative;z-index:1;display:flex;align-items:center;gap:28px;padding:28px 32px 26px}
.artist-hero-photo-wrap{flex-shrink:0}
.artist-hero-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.18);display:block}
.artist-hero-photo-fallback{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.12)}
.artist-hero-info{flex:1;min-width:0}
.artist-hero-name{font-size:32px;font-weight:700;color:#fff;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist-hero--no-bg .artist-hero-name{color:var(--text-primary)}
.artist-hero-meta{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:14px}
.artist-hero--no-bg .artist-hero-meta{color:var(--text-secondary)}
.artist-hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* Edit-artist modal */
.artist-edit-imgrow{display:flex;gap:14px;align-items:flex-start}
.artist-edit-thumb{width:110px;height:110px;flex-shrink:0;border-radius:10px;overflow:hidden;background:var(--bg-active);display:flex;align-items:center;justify-content:center}
.artist-edit-thumb img{width:100%;height:100%;object-fit:cover}
.artist-edit-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.artist-hero-bio{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin:8px 0 6px;max-width:640px}
.artist-hero--no-bg .artist-hero-bio{color:var(--text-muted)}
.artist-hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.artist-hero-tag{font-size:11px;padding:3px 10px;border-radius:12px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);text-transform:capitalize}
.artist-hero--no-bg .artist-hero-tag{background:var(--bg-active);color:var(--text-secondary);border-color:var(--border)}
/* Section headers */
.artist-section-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.artist-section-title{font-size:15px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.artist-section-count{font-size:13px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:1px 8px}
/* Album grid */
.artist-albums-section{margin-bottom:28px}
.artist-album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.artist-album-card{background:var(--bg-surface);border-radius:10px;border:1px solid var(--border);cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.artist-album-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35);border-color:var(--accent)}
.artist-album-cover{aspect-ratio:1;background:var(--bg-active);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.artist-album-cover img{width:100%;height:100%;object-fit:cover;display:block}
.artist-album-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:absolute;inset:0}
.artist-album-info{padding:10px 10px 4px}
.artist-album-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);margin-bottom:3px}
.artist-album-meta{font-size:11px;color:var(--text-secondary)}
.artist-album-footer{padding:6px 8px 8px}
.artist-album-play{width:100%;padding:5px 0;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.artist-similar-section{margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}
.artist-similar-title{font-size:15px;font-weight:600;margin:0 0 14px;color:var(--text-primary)}
.artist-similar-chips{display:flex;flex-wrap:wrap;gap:8px}
.artist-similar-loading,.artist-similar-none{font-size:13px;color:var(--text-secondary)}
.artist-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;font-size:13px;border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.artist-chip--local{color:var(--text-primary);border-color:var(--accent)}.artist-chip--local:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.artist-chip--external{color:var(--text-secondary);opacity:.65}.artist-chip--external:hover{opacity:1;color:var(--text-primary)}
.chip-name{font-weight:500}
.chip-count{font-size:11px;color:var(--accent);font-weight:600}.artist-chip--local:hover .chip-count{color:#fff}
.chip-match{font-size:11px;color:var(--text-muted)}
.trakt-pin-panel{margin-top:12px;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius)}
.trakt-pin-code{font-size:28px;font-weight:700;letter-spacing:.2em;color:var(--accent);margin-bottom:8px;font-family:monospace}
/* ─── Collections ──────────────────────────────────── */
.collections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.collection-card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative}
.collection-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow)}
.collection-card-thumb{aspect-ratio:2/3;background:var(--bg-active);justify-content:center;position:relative;overflow:hidden}
.collection-card-thumb img{width:100%;height:100%;object-fit:cover}
.collection-card-placeholder{font-size:48px;color:var(--text-muted)}
.collection-card-info{padding:10px 12px 12px}
.collection-card-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.collection-card-count{font-size:12px;color:var(--text-secondary);margin-bottom:8px}
.collection-progress-wrap{background:var(--bg-active);border-radius:4px;height:5px;overflow:hidden}
.collection-progress-bar{height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.collection-progress-label{font-size:11px;color:var(--text-secondary);margin-top:5px}
.collection-count-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:12px}
/* Collection detail */
.collection-detail-header{display:flex;gap:24px;margin-bottom:28px;align-items:flex-start}
.collection-detail-poster{width:160px;flex-shrink:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px var(--shadow)}
.collection-detail-poster img{width:100%;display:block}
.collection-detail-meta h1{font-size:22px;font-weight:700;margin-bottom:6px}
.collection-detail-meta .collection-progress-wrap{max-width:280px;height:7px;margin-bottom:6px}
.collection-detail-stat{font-size:13px;color:var(--text-secondary);margin-bottom:16px}
.collection-movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
/* Studios browse view (mirrors collections; logos need a light plate so both light- and dark-inked TMDB logos read) */
.studios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.studio-browse-card{background:var(--bg-surface);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid var(--border)}
.studio-browse-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--shadow);border-color:var(--accent)}
.studio-browse-logo{height:110px;display:flex;align-items:center;justify-content:center;padding:18px;background:#f2f2f2}
.studio-browse-logo img{max-width:100%;max-height:100%;object-fit:contain}
.studio-browse-mono{display:none;font-size:15px;font-weight:700;color:#222;text-align:center;line-height:1.25}
.studio-browse-logo.studio-nologo{background:linear-gradient(135deg,var(--bg-active),var(--bg-surface))}
.studio-browse-logo.studio-nologo .studio-browse-mono{display:block;color:var(--text-primary)}
.studio-browse-info{padding:10px 12px 12px}
.studio-browse-title{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.studio-browse-count{font-size:12px;color:var(--text-secondary)}
.studio-detail-logo{width:180px;flex-shrink:0;border-radius:var(--radius);overflow:hidden;background:#f2f2f2;padding:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--shadow)}
.studio-detail-logo img{max-width:100%;max-height:120px;object-fit:contain}
.collection-movies-grid .mv-card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:unset;line-height:1.3}
.collection-not-owned{opacity:.45;cursor:default}
.collection-not-owned-overlay{position:absolute;inset:0;justify-content:center;background:rgba(0,0,0,.35);border-radius:inherit}
.collection-not-owned-overlay span{background:rgba(0,0,0,.75);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase}
/* Video hero (Plex-style full backdrop) */
.video-hero{margin-bottom:16px}
/* overflow is visible so the Audio pop-out menu and the subtitle panel that now live
   inside the hero (above the cast) can extend past the backdrop without being clipped.
   The background image + scrim keep their rounded corners (border-radius clips the
   background by default; the scrim inherits the radius). */
.video-hero-backdrop{border-radius:var(--radius);background-size:cover;background-position:center 25%;position:relative;overflow:visible;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.video-hero-scrim{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(0,0,0,.04) 0%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.93) 100%)}
.video-hero-top{position:absolute;top:16px;left:16px;z-index:3}
.video-hero-body{position:relative;z-index:2;display:flex;align-items:flex-end;gap:22px;padding:28px 24px 28px}
.video-hero-poster{width:254px;min-width:254px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.85);flex-shrink:0;display:block}
/* Poster + "resume pending" state (thin progress bar across the poster bottom + a
   "Xmin left" caption beneath it, Plex-style) */
.video-hero-poster-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.video-hero-poster-frame{position:relative;display:block;border-radius:10px}
.video-hero-poster-resume{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.55);border-radius:0 0 10px 10px;overflow:hidden}
.video-hero-poster-resume-fill{height:100%;background:var(--accent)}
.video-hero-poster-left{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.video-hero-meta{flex:1;min-width:0}
.video-hero-episode{font-size:12px;font-weight:600;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.video-hero-title{margin:0 0 6px;font-size:1.9rem;font-weight:800;line-height:1.2;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 10px rgba(0,0,0,.95),0 4px 24px rgba(0,0,0,.8)}
.video-hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.85);margin-bottom:10px;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.video-detail-metabadges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.video-hero-overview{font-size:13px;color:rgba(255,255,255,.9);line-height:1.6;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.video-hero-meta .mv-genre-chip{background:rgba(15,15,15,.82);color:#fff;border-color:rgba(255,255,255,.2)}
.video-hero-meta .mv-rating-tmdb,.video-hero-meta .mv-rating-imdb,.video-hero-meta .mv-rating-rt-fresh,.video-hero-meta .mv-rating-rt-rotten,.video-hero-meta .mv-rating-metacritic{background:rgba(15,15,15,.82);border-color:rgba(255,255,255,.18)}
.video-hero-meta .mv-content-rating{background:rgba(15,15,15,.82)}
/* Meta badges over a backdrop: keep the hue but make the fill ~90% opaque so they stay readable on light backdrops */
.video-hero-meta .mv-meta-year{background:rgba(41,50,66,.9);border-color:rgba(148,163,184,.5)}
.video-hero-meta .mv-meta-duration{background:rgba(18,64,38,.9);border-color:rgba(34,197,94,.55)}
.video-hero-meta .mv-meta-res{background:rgba(21,44,84,.9);border-color:rgba(59,130,246,.55)}
.video-hero-meta .mv-meta-hdr{background:rgba(66,50,8,.92);border-color:rgba(234,179,8,.55)}
.video-hero-meta .mv-meta-audio{background:rgba(50,26,80,.9);border-color:rgba(168,85,247,.55)}
.video-hero-meta .mv-meta-size{background:rgba(70,47,10,.9);border-color:rgba(245,158,11,.55)}
.video-hero-meta .director-name{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.video-hero-meta .director-role{color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
/* Plex-style action buttons on the backdrop hero: translucent dark fill + light
   border + blur so they read well over ANY backdrop colour (matches the metadata
   language button). Only scoped to the hero - the poster / no-artwork variants sit
   on the solid dark page and keep the opaque --bg-surface look. */
.video-hero-meta .vp-watched-btn,
.video-hero-meta .vp-watchlist-btn,
.video-hero-meta .vp-fav-btn,
.video-hero-meta .vp-watchtogether-btn,
.video-hero-meta .vp-edit-btn,
.video-hero-meta .vp-more-btn,
.video-hero-meta .rating-widget.vp-inline-rating{
  background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(3px)}
.video-hero-meta .vp-watchtogether-btn.active,
.video-hero-meta .vp-watchtogether-btn:hover{color:var(--accent);border-color:var(--accent)}
.video-hero-meta .vp-edit-btn:hover{color:var(--accent);border-color:var(--accent)}
.video-hero-meta .vp-more-btn:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.video-hero-meta .rating-widget.vp-inline-rating .rating-widget-user{border-left-color:rgba(255,255,255,.22)}
.video-hero-meta .rating-widget.vp-inline-rating .rating-widget-label,
.video-hero-meta .rating-widget.vp-inline-rating .rating-widget-score,
.video-hero-meta .rating-widget.vp-inline-rating .rating-widget-count{color:rgba(255,255,255,.85)}
/* keep the accent-coloured active/hover states readable over the translucent fill */
.video-hero-meta .vp-watched-btn.active{color:#4ade80;border-color:rgba(74,222,128,.6)}
.video-hero-meta .vp-watched-btn:hover{color:#4ade80;border-color:rgba(74,222,128,.6)}
.video-hero-meta .vp-watchlist-btn.active,
.video-hero-meta .vp-watchlist-btn:hover{color:var(--accent);border-color:var(--accent)}
.video-hero-meta .vp-fav-btn.active,
.video-hero-meta .vp-fav-btn:hover{color:#ff5c78;border-color:rgba(255,92,120,.6)}
/* Music-video detail hero: mirrors the movie backdrop hero (frame thumbnail as the
   backdrop) but shorter, since an autoplaying player sits directly below. No
   overflow:hidden so the Video Details dropdown can overflow the hero freely;
   the background image + scrim still round via border-radius. */
.mv-detail-back{margin-bottom:12px}
.mv-detail-hero{position:relative;border-radius:var(--radius);background-size:cover;background-position:center 30%;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:16px}
.mv-detail-hero .video-hero-scrim{border-radius:inherit}
.mv-hero-actions .vp-details-popup{right:auto;left:0}
.video-hero-meta .mv-meta-artist{background:rgba(50,26,80,.9);border-color:rgba(168,85,247,.55);color:#e9d5ff}
.video-hero-meta .mv-stats-btn{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(3px)}
.video-hero-meta .mv-stats-btn:hover{color:#fff;border-color:rgba(255,255,255,.5)}
/* Cast strip rendered inside the backdrop hero (Plex-style, no boxed section) */
.video-hero-backdrop-withcast .video-hero-body{padding-bottom:10px}
.video-hero-cast{position:relative;z-index:2;padding:2px 24px 24px}
.video-hero-cast-title{margin:0 0 2px;color:#fff;font-size:1.05rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.video-hero-cast .mv-cast-name{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 6px rgba(0,0,0,.9)}
.video-hero-cast .mv-cast-char{color:rgba(255,255,255,.72);text-shadow:0 1px 3px rgba(0,0,0,.95)}
.video-hero-cast .mv-cast-eps{color:rgba(255,255,255,.6)}
.video-hero-cast .mv-cast-photo{border-color:rgba(255,255,255,.15)}
/* ─── Plex-style media-info bar (Video / Audio / Subtitles), above the Cast ─── */
.video-hero-mediabar{position:relative;z-index:4;padding:2px 24px 12px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 22px;max-width:900px}
.hero-mi-row{display:flex;align-items:center;gap:8px;min-height:24px}
.hero-mi-label{flex:0 0 auto;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hero-mi-value{font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.hero-mi-static{opacity:.95}
.hero-mi-dd{position:relative;display:inline-flex}
.hero-mi-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:4px 9px;cursor:pointer;font:inherit;font-size:13px;color:#fff;backdrop-filter:blur(3px);transition:border-color .15s}
.hero-mi-btn:hover{border-color:var(--accent)}
.hero-mi-caret{width:14px;height:14px;flex-shrink:0;opacity:.8}
.hero-mi-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:220px;max-width:min(360px,80vw);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.6);padding:6px;max-height:320px;overflow-y:auto}
.hero-mi-opt{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:8px 10px;font:inherit;font-size:13px;color:var(--text-primary);cursor:pointer}
.hero-mi-opt:hover{background:var(--bg-hover)}
.hero-mi-opt.active{color:var(--accent);font-weight:600}
.hero-mi-opt.active::after{content:"\2713";float:right;font-weight:700}
/* The subtitle toolbar, relocated into the Subtitles row of the media bar. The
   toolbar wrapper is transparent (just a container) and its fetch button is styled
   to match the Audio pop-out button - a single rectangular pill, not a rounded
   button nested inside a rectangle. */
.hero-mi-row-subs{align-items:center}
.hero-mi-subwrap{position:relative}
.hero-mi-subwrap .subtitle-toolbar{margin-bottom:0;padding:0;background:none;border:0;backdrop-filter:none}
.hero-mi-subwrap .subtitle-fetch-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:4px 9px;font-size:13px;color:#fff;backdrop-filter:blur(3px);transition:border-color .15s}
.hero-mi-subwrap .subtitle-fetch-btn:hover{border-color:var(--accent);color:#fff}
@media(max-width:640px){
.video-hero-backdrop{min-height:320px}
.video-hero-body{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 16px 20px}
.video-hero-poster{width:180px;min-width:180px}
.video-hero-title{font-size:1.4rem}
.video-hero-cast{padding:2px 16px 18px}
.video-hero-mediabar{padding:2px 16px 10px;gap:8px 16px}
.hero-mi-label{font-size:11px}
}
/* ─── Subtitle Toolbar ─── */
.subtitle-toolbar{gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:var(--radius);position:relative}
.subtitle-fetch-btn{background:none;border:1px solid rgba(255,255,255,.18);color:var(--text-secondary);padding:5px 12px;border-radius:20px;cursor:pointer;font-size:12px;transition:border-color .15s,color .15s}
.subtitle-fetch-btn:hover{border-color:var(--accent);color:var(--accent)}
.subtitle-active-label{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.subtitle-off-btn{color:var(--text-muted);padding:0;margin-left:4px;vertical-align:middle;line-height:1;display:inline-flex;align-items:center;opacity:.7;transition:color .15s,opacity .15s}
.subtitle-off-btn:hover{color:#e74c3c;opacity:1}
.subtitle-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-width:320px;max-width:min(500px,90vw);box-shadow:0 8px 24px var(--shadow)}
/* Fetch/search panel floated INSIDE the player, beside the CC button (opened from the CC
   quick-menu's "Subtitles" row). Kept fairly opaque - it holds form controls. */
.subtitle-panel-player{position:absolute;top:auto;left:auto;right:12px;bottom:64px;z-index:28;min-width:320px;max-width:min(400px,92%);max-height:56vh;overflow-y:auto;background:rgba(22,22,22,.97);border-color:rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:vpMenuIn .13s ease-out}
.subtitle-panel-player .subtitle-section-label{color:rgba(255,255,255,.6)}
.subtitle-panel-inner{display:flex;gap:8px;margin-bottom:10px}
.subtitle-lang-select{flex:1;background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px}
.subtitle-lang-select option{background:#1e1e1e;color:#fff}
.subtitle-search-btn{background:var(--accent);color:#fff;border-radius:6px;padding:6px 14px;font-size:13px;white-space:nowrap}
.subtitle-search-btn:hover{background:var(--accent-hover)}
.subtitle-results{max-height:220px;overflow-y:auto}
.subtitle-result-row{gap:6px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:12px;transition:background .12s;flex-wrap:wrap}
.subtitle-result-row:hover,.subtitle-result-row.selected{background:rgba(255,255,255,.07)}
.subtitle-result-row.loading{opacity:.6;pointer-events:none}
.subtitle-prov-tag{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--accent-dim);color:var(--accent);flex-shrink:0}
.subtitle-hi-tag{font-size:10px;font-weight:600;padding:1px 4px;border-radius:4px;background:rgba(255,200,0,.15);color:#f5c842;flex-shrink:0}
.subtitle-filename{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.subtitle-dl-count{font-size:11px;color:var(--text-muted);flex-shrink:0}
.subtitle-loading,.subtitle-no-results{padding:10px;color:var(--text-muted);font-size:13px;text-align:center}
.subtitle-error{padding:6px 10px;background:rgba(255,80,80,.1);color:#ff6b6b;border-radius:6px;font-size:12px;margin-bottom:6px}
.subtitle-section-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;padding:6px 0 4px;margin-top:4px;border-top:1px solid var(--border)}
.subtitle-section-label:first-child{border-top:none;margin-top:0}
.subtitle-sync-btn{background:none;border:1px solid rgba(255,255,255,.16);color:var(--text-secondary);border-radius:4px;padding:2px 7px;font-size:11px;cursor:pointer;transition:border-color .15s,color .15s}
.subtitle-sync-btn:hover{border-color:var(--accent);color:var(--accent)}
.subtitle-upload-toggle-btn:hover{border-color:var(--accent)!important;color:var(--accent)!important}
.mv-player-container{margin-bottom:20px;border-radius:var(--radius);background:#000;position:relative}
/* Seek-preview thumbnail overlay (inside .mv-player-container) */
.vp-thumb-tooltip{position:absolute;bottom:70px;transform:translateX(-50%);background:rgba(10,10,10,.92);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:4px;pointer-events:none;z-index:26;box-shadow:0 6px 20px rgba(0,0,0,.75)}
.vp-thumb-img{width:160px;height:90px;border-radius:3px;overflow:hidden;background:#000 no-repeat;flex-shrink:0}
.vp-thumb-time{text-align:center;color:#fff;font-size:11px;font-weight:700;margin-top:4px;letter-spacing:.04em}
.skip-intro-btn{position:absolute;bottom:72px;right:16px;z-index:25;gap:6px;padding:8px 18px;background:rgba(20,20,20,.92);border:1px solid rgba(255,255,255,.18);border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:.02em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,.5);transition:opacity .3s,background .15s}
.skip-intro-btn:hover{background:rgba(40,40,40,.96)}
.skip-intro-btn::after{content:'›';font-size:18px;line-height:1}
/* ── Custom video control bar (#vp-controls) ───────────────────────────────
   Replaces native <video controls>: seek bar on top, single button row below.
   Chapters + Cast sit inline after volume and before fullscreen. */
.vp-controls{position:absolute;left:0;right:0;bottom:0;z-index:25;display:flex;flex-direction:column;gap:6px;padding:6px 12px 10px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%);border-radius:0 0 var(--radius) var(--radius);transition:opacity .3s}
.vp-controls.vp-controls-hidden{opacity:0;pointer-events:none}
/* Big centre Play overlay (movie/TV/doc player) - shown while paused so users can read first */
.vp-big-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:background .15s,transform .15s;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.vp-big-play svg{margin-left:5px}
.vp-big-play:hover{background:var(--accent);transform:translate(-50%,-50%) scale(1.07)}
.vp-big-play.vp-big-play-hidden{display:none}
/* Plex-style Play / Resume button (after the description, above Director/Writer).
   Requesting the stream starts FFmpeg, so this is the deliberate "start" action. */
.vp-playbtn-row{margin:12px 0 6px;display:flex;flex-wrap:wrap;gap:10px}
.vp-playbtn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;background:var(--accent);color:#fff;font-size:15px;font-weight:700;padding:10px 22px 10px 17px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .12s ease,filter .12s ease}
.vp-playbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.vp-playbtn:active{transform:translateY(0)}
.vp-playbtn svg{flex-shrink:0;display:block}
.vp-playbtn-text{display:inline-flex;align-items:baseline}
.vp-playbtn-label{line-height:1}
.vp-playbtn-label:not(:last-child){margin-right:9px}
.vp-playbtn-sub{font-size:12px;font-weight:500;line-height:1;opacity:.9;padding-left:9px;margin-left:1px;border-left:1px solid rgba(255,255,255,.4)}
.mv-player-container.vp-cursor-hidden{cursor:none}
/* seek bar */
.vp-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer}
.vp-seek-rail{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.28);transition:height .12s}
.vp-seek:hover .vp-seek-rail{height:6px}
.vp-seek-buffered{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;background:rgba(255,255,255,.32)}
.vp-seek-played{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;background:var(--accent)}
.vp-seek-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%) scale(0);transition:transform .12s;box-shadow:0 0 4px rgba(0,0,0,.6)}
.vp-seek:hover .vp-seek-handle{transform:translate(-50%,-50%) scale(1)}
/* button row */
.vp-ctrl-row{display:flex;align-items:center;gap:6px}
.vp-ctrl-spacer{flex:1}
.vp-ctrl-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:none;border:none;border-radius:6px;color:#fff;cursor:pointer;flex-shrink:0;transition:background .12s,color .12s}
.vp-ctrl-btn:hover{background:rgba(255,255,255,.16)}
/* A solid-white stroke weight for every control icon. Without it, the intricate settings
   cog rendered at the hairline default and read as grey/disabled next to the others. */
.vp-ctrl-btn svg{stroke:currentColor;fill:none;display:block;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vp-ctrl-btn.cast-connected{color:var(--accent)}
.vp-time{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;margin:0 2px}
/* volume */
.vp-volume{display:flex;align-items:center}
.vp-mute.vp-muted{position:relative;opacity:.85}
.vp-mute.vp-muted::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:2px;background:#fff;transform:translate(-50%,-50%) rotate(-45deg);border-radius:2px}
.vp-vol-slider{width:0;opacity:0;height:4px;margin-left:0;cursor:pointer;accent-color:var(--accent);transition:width .15s,opacity .15s,margin-left .15s}
.vp-volume:hover .vp-vol-slider,.vp-vol-slider:focus{width:76px;opacity:1;margin-left:6px}
/* gear ▸ Settings menu (YouTube-style translucent panel) */
.vp-more-wrap{position:relative;display:flex}
.vp-more-menu{position:absolute;bottom:48px;right:0;z-index:26;min-width:250px;max-width:300px;background:rgba(28,28,28,.55);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);padding:7px;overflow:hidden;animation:vpMenuIn .13s ease-out}
/* No backdrop-filter support: fall back to a darker solid so text stays legible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vp-more-menu{background:rgba(28,28,28,.94)}}
@keyframes vpMenuIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.vp-set-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:10px 12px;background:transparent;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;line-height:1.2;transition:background .12s}
.vp-set-row:hover{background:rgba(255,255,255,.12)}
.vp-set-ic{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92)}
.vp-set-ic svg{stroke:currentColor;fill:none;display:block}
.vp-set-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-set-value{flex:0 1 auto;min-width:0;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.55);font-size:13px;margin-left:4px}
.vp-set-chev{flex-shrink:0;color:rgba(255,255,255,.55)}
.vp-set-row.on .vp-set-ic,.vp-set-row.on .vp-set-label{color:var(--accent)}
.vp-set-sep{height:1px;background:rgba(255,255,255,.1);margin:6px 4px}
/* speed sub-view */
.vp-set-back{font-weight:600;color:#fff}
.vp-set-back .vp-set-ic{width:18px}
.vp-set-choice .vp-set-check{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:0}
.vp-set-choice.active .vp-set-check{opacity:1}
.vp-set-choice.active .vp-set-label{font-weight:600}
/* CC quick-picker */
.vp-cc-btn.on{color:var(--accent)}
.vp-cc-btn.on::after{content:'';position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:var(--accent)}
.vp-cc-btn{position:relative}
.vp-cc-menu{min-width:230px;max-width:320px;max-height:56vh;overflow-y:auto}
.vp-set-cc-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.55);padding:4px 12px 8px}
.vp-set-cc-load{padding:14px 12px;color:rgba(255,255,255,.6);font-size:13px}
/* legacy compact speed list (kept for any callers still using it) */
.vp-more-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);padding:4px 10px 6px}
.vp-more-item{display:block;width:100%;text-align:left;padding:8px 10px;background:transparent;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;transition:background .12s}
.vp-more-item:hover{background:rgba(255,255,255,.1)}
.vp-more-item.active{background:var(--accent)}
/* fullscreen: the container fills the screen, so let the video fill it too (overrides max-height:70vh) */
.mv-player-container:fullscreen{display:flex;align-items:center;justify-content:center;background:#000;margin:0;border-radius:0}
.mv-player-container:fullscreen .mv-player{max-height:100vh;width:100%;height:100%;object-fit:contain;border-radius:0}
.mv-player-container:-webkit-full-screen{display:flex;align-items:center;justify-content:center;background:#000}
.mv-player-container:-webkit-full-screen .mv-player{max-height:100vh;width:100%;height:100%;object-fit:contain}
/* Google Cast button - player bar (.cast-btn). The video/music-video overlay variant
   (.vp-cast-btn) was retired when both players moved to the custom control bar. */
.cast-btn{cursor:pointer}
.cast-btn.cast-connected{color:var(--accent)}
.cast-btn.cast-needs-https{opacity:.45}
/* Server-side Cast device-picker dropdown */
.cast-menu{position:fixed;z-index:10050;min-width:240px;max-width:320px;background:#1e1e1e;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.6);overflow:hidden}
.cast-menu-head{padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.08)}
.cast-menu-list{max-height:280px;overflow-y:auto;padding:4px}
.cast-menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;color:var(--text-primary);font-size:14px;transition:background .12s}
.cast-menu-item:hover{background:rgba(255,255,255,.08)}
.cast-menu-item svg{stroke:currentColor;fill:none;flex-shrink:0}
.cast-menu-item.cast-menu-stop{color:#e5534b}
.cast-menu-empty{padding:12px 14px;color:var(--text-secondary);font-size:13px}
.cast-menu-item.audioout-on{color:var(--accent);font-weight:600}
.cast-menu-item.audioout-on::after{content:"\2713";margin-left:auto;font-weight:700}
.player-btn.audioout-btn.audioout-active{color:var(--accent)}
.chapters-menu{position:absolute;bottom:64px;right:12px;z-index:27;width:300px;max-height:55vh;overflow-y:auto;background:rgba(20,20,20,.97);border:1px solid rgba(255,255,255,.16);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px}
.chapters-menu-item{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;padding:9px 12px;background:transparent;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;transition:background .12s}
.chapters-menu-item:hover{background:rgba(255,255,255,.1)}
.chapters-menu-item.active{background:var(--accent)}
.chapters-menu-item.active .chapters-menu-time{color:#fff}
.chapters-menu-time{flex-shrink:0;font-variant-numeric:tabular-nums;font-size:12px;color:var(--accent);font-weight:600;min-width:48px}
.chapters-menu-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-player{width:100%;max-height:70vh;display:block;border-radius:var(--radius)}
/* Transcode stats overlay */
.tc-overlay{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.72);border-radius:6px;padding:7px 12px;z-index:10;pointer-events:none}
.tc-overlay #tc-stats-text{font-family:'Courier New',monospace;font-size:12px;color:#4ade80;white-space:pre;line-height:1.5}
.mv-stats-btn{gap:6px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:12px;padding:6px 12px;cursor:pointer;transition:color .2s,border-color .2s}
.mv-stats-btn:hover{color:var(--text-primary)}
.mv-stats-btn.active{color:#4ade80;border-color:#4ade80}
/* ─── Video player actions bar (rating + fav + details) ───────── */
.vp-actions-bar{gap:8px;flex-wrap:wrap}
/* Subtitles pill (left) + action buttons (right) row above the player */
.vp-action-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.vp-action-row-solo{justify-content:flex-end;margin-bottom:12px}
.vp-actions-side{flex-shrink:0;position:relative}
/* On phones the right-hand actions no longer overflow off-screen: the Subtitles
   pill takes its own row and the action buttons wrap into a tidy left-aligned
   block below it (2-3 lines instead of a single scrolling row). */
@media(max-width:768px){
  .vp-action-row{flex-wrap:wrap;justify-content:flex-start}
  .vp-action-row .subtitle-toolbar{margin-bottom:0;width:100%}
  .vp-actions-side{flex:1 1 100%;width:100%;min-width:0}
  .vp-actions-side .vp-actions-bar{justify-content:flex-start!important}
  .vp-actions-side .mv-stats-btn{flex:0 1 auto}
}
.vp-fav-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:16px;padding:5px 10px;cursor:pointer;transition:color .2s,border-color .2s;line-height:1}
.vp-fav-btn.active{color:#e2264d;border-color:rgba(226,38,77,.4)}
.vp-fav-btn:hover{color:#e2264d}
/* Watched toggle on the movie/episode detail page - green check when watched,
   matching the WATCHED badge on grid cards and the Android client. */
.vp-watched-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);padding:5px 10px;cursor:pointer;transition:color .2s,border-color .2s;line-height:1;display:inline-flex;align-items:center}
.vp-watched-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.vp-watched-btn.active{color:#22c55e;border-color:rgba(34,197,94,.45)}
.vp-watched-btn:hover{color:#22c55e}
/* Plex-style grouped interaction buttons (watched / watchlist / favourite + rating) */
.vp-action-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vp-hero-actions{margin:10px 0}
.vp-icon-btn{box-sizing:border-box;width:34px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.vp-icon-btn.vp-fav-btn{font-size:16px}
/* Metadata-editor (pen) + more (3-dot) icon buttons on the detail actions row */
.vp-edit-btn,.vp-more-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:color .2s,border-color .2s}
.vp-edit-btn svg{width:16px;height:16px;display:block}
.vp-more-btn svg{width:18px;height:18px;display:block}
.vp-edit-btn:hover{color:var(--accent);border-color:var(--accent)}
.vp-more-btn:hover{color:var(--text-primary);border-color:var(--text-muted)}
/* Watchlist (bookmark) toggle on the detail page - fills with the accent when saved */
.vp-watchlist-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.vp-watchlist-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:color .2s,border-color .2s;line-height:1}
.vp-watchlist-btn:hover{color:var(--accent)}
.vp-watchlist-btn.active{color:var(--accent);border-color:var(--accent)}
.vp-watchlist-btn.active svg{fill:currentColor}
/* Compact inline rating widget inside player actions bar */
.rating-widget.vp-inline-rating{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:5px 10px;flex-wrap:nowrap!important;white-space:nowrap}
.rating-widget.vp-inline-rating .rating-widget-community{gap:4px;font-size:12px;white-space:nowrap;flex-wrap:nowrap}
.rating-widget.vp-inline-rating .rating-widget-user{gap:4px;font-size:12px;border-left:1px solid var(--border);padding-left:8px;flex-wrap:nowrap}
.rating-widget.vp-inline-rating .rating-widget-label{font-size:11px;color:var(--text-muted)}
.rating-widget.vp-inline-rating .rating-widget-score,.rating-widget.vp-inline-rating .rating-widget-count{font-size:11px}
.rating-widget.vp-inline-rating .rating-stars-display span{font-size:13px!important}
.rating-widget.vp-inline-rating .star-btn{font-size:13px}
.rating-widget.vp-inline-rating .rating-remove-link{display:none}
/* Video details popup panel */
.vp-details-popup{position:absolute;right:0;top:calc(100% + 2px);z-index:100;background:var(--bg-card,var(--bg-surface));border:1px solid var(--border);border-radius:10px;padding:4px 0;min-width:300px;max-width:500px;box-shadow:0 8px 32px rgba(0,0,0,.55);max-height:60vh;overflow-y:auto}
.vp-details-popup .setting-row{padding:6px 14px;font-size:13px}
/* Details popup opened from the in-player gear ▸ Settings menu: floats bottom-right,
   above the control bar, matching the translucent player-menu look. */
.vp-details-popup-player{position:absolute;right:12px;bottom:64px;top:auto;left:auto;z-index:27;background:rgba(28,28,28,.6);border-color:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);max-height:55vh;animation:vpMenuIn .13s ease-out}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vp-details-popup-player{background:rgba(28,28,28,.95)}}
.vp-details-popup-player .setting-label{color:rgba(255,255,255,.6)}
.vp-details-popup-player .setting-value{color:#fff}
/* Continue Watching progress bar overlay */
.cw-progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(0,0,0,.4)}
.cw-progress-fill{height:100%;background:var(--accent);border-radius:0 2px 2px 0}
/* Episode Prev/Next navigation bar */
/* Episode navigation - overlay arrows pinned to the left/right edges of the player,
   vertically centred. They fade together with the control bar (via .vp-cursor-hidden). */
.ep-nav-overlay{position:absolute;top:0;bottom:52px;left:0;right:0;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:0 14px;pointer-events:none}
.ep-nav-side{display:flex;align-items:center;gap:12px;pointer-events:none}
.ep-nav-next{flex-direction:row-reverse}
.ep-nav-arrow{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;pointer-events:auto;transition:background .15s,transform .15s,border-color .15s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ep-nav-arrow:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
.ep-nav-arrow svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2}
/* Episode title/label - hidden until the arrow (or its side) is hovered */
.ep-nav-tip{min-width:0;max-width:230px;opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s;pointer-events:none;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ep-nav-next .ep-nav-tip{transform:translateX(6px);text-align:right}
.ep-nav-side:hover .ep-nav-tip{opacity:1;transform:translateX(0)}
.ep-nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.6);margin-bottom:2px}
.ep-nav-ep{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:1px}
.ep-nav-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
/* Fade the arrows out with the cursor/control bar */
.mv-player-container.vp-cursor-hidden .ep-nav-overlay{opacity:0;pointer-events:none;transition:opacity .3s}
.ep-nav-overlay{transition:opacity .2s}
/* Up Next overlay */
.video-up-next{display:none;position:absolute;bottom:70px;right:16px;width:280px;background:rgba(10,10,10,.95);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;color:#fff;z-index:20;flex-direction:column;gap:10px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.6);animation:upnext-in .3s ease}
.video-up-next.visible{display:flex}
@keyframes upnext-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.video-up-next-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.45)}
.video-up-next-thumb{width:100%;aspect-ratio:16/9;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.06)}
.video-up-next-info{display:flex;flex-direction:column;gap:2px}
.video-up-next-ep{font-size:11px;color:var(--accent);font-weight:600}
.video-up-next-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-up-next-countdown{font-size:11px;color:rgba(255,255,255,.5)}
.video-up-next-bar-wrap{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.video-up-next-bar{height:100%;background:var(--accent);border-radius:2px;width:0;transition:width 10s linear}
.video-up-next-btns{display:flex;gap:8px}
.video-up-next-play{flex:1;padding:8px 12px;background:var(--accent);border-radius:8px;color:#fff;font-weight:700;font-size:13px;transition:background .15s}
.video-up-next-play:hover{background:var(--accent-hover)}
.video-up-next-cancel{padding:8px 12px;background:rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.7);font-size:13px;transition:background .15s}
.video-up-next-cancel:hover{background:rgba(255,255,255,.18)}

/* Shuffle Play Button */
.mv-shuffle-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:8px 20px;border-radius:20px;font-size:13px;font-weight:600;transition:background .2s,transform .15s}
.mv-shuffle-btn:hover{background:var(--accent-hover);transform:scale(1.03)}
.mv-shuffle-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv-nightclub-btn{display:inline-flex;align-items:center;gap:8px;background:#7c3aed;color:#fff;padding:8px 20px;border-radius:20px;font-size:13px;font-weight:600;transition:background .2s,transform .15s}
.mv-nightclub-btn:hover{background:#6d28d9;transform:scale(1.03)}
.mv-nightclub-btn svg{width:16px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mv-android-btn{display:inline-flex;align-items:center;gap:8px;background:#166534;color:#4ade80;border:1px solid #22c55e44;padding:8px 20px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,transform .15s}
.mv-android-btn:hover{background:#14532d;transform:scale(1.03)}
.playlist-btn-android{background:#166534;color:#4ade80;border:1px solid #22c55e44}
.playlist-btn-android:hover{background:#14532d}
/* Shuffle bar shown above the player when shuffle mode is active */
.mv-shuffle-bar{justify-content:space-between;gap:12px;padding:10px 16px;background:var(--accent-dim);border:1px solid rgba(255,255,255,0.08);border-left:3px solid var(--accent);border-radius:var(--radius);margin-bottom:12px}
.mv-shuffle-bar-badge{gap:7px;color:var(--accent);font-size:13px;font-weight:600}
.mv-shuffle-bar-badge svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mv-shuffle-next-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;transition:background .2s,transform .15s;white-space:nowrap}
.mv-shuffle-next-btn:hover{background:var(--accent-hover);transform:scale(1.04)}
.mv-shuffle-next-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ─── Movie/TV Detail - Ratings Row ────────────────── */
.mv-ratings-row{gap:10px;flex-wrap:wrap;margin:10px 0}
.mv-rating-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:13px;font-weight:700;line-height:1}
.mv-rating-chip svg{width:14px;height:14px;flex-shrink:0}
.mv-rating-tmdb{background:rgba(1,180,228,.12);color:#01b4e4;border:1px solid rgba(1,180,228,.3)}
.mv-rating-imdb{background:rgba(245,197,24,.12);color:#e8b912;border:1px solid rgba(245,197,24,.3)}
.mv-rating-rt-fresh{background:rgba(250,80,50,.12);color:#fa5032;border:1px solid rgba(250,80,50,.3)}
.mv-rating-rt-rotten{background:rgba(130,130,130,.12);color:#888;border:1px solid rgba(130,130,130,.3)}
.mv-rating-metacritic{background:rgba(102,204,0,.12);color:#66cc00;border:1px solid rgba(102,204,0,.3)}
/* Music video meta badges (Singer / Running time / File size) */
.mv-meta-artist{background:rgba(168,85,247,.12);color:#c084fc;border:1px solid rgba(168,85,247,.3)}
.mv-meta-duration{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.mv-meta-size{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.mv-meta-year{background:rgba(148,163,184,.12);color:#cbd5e1;border:1px solid rgba(148,163,184,.3)}
.mv-meta-res{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.mv-meta-hdr{background:rgba(234,179,8,.14);color:#facc15;border:1px solid rgba(234,179,8,.35);text-transform:uppercase;letter-spacing:.4px;font-size:11px}
.mv-meta-audio{background:rgba(168,85,247,.12);color:#c084fc;border:1px solid rgba(168,85,247,.3)}
/* Content rating badge */
.mv-content-rating{display:inline-flex;align-items:center;padding:3px 9px;border:2px solid rgba(255,255,255,.25);border-radius:5px;font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--text-secondary)}
.mv-cr-red{border-color:rgba(231,76,60,.6);color:#e74c3c}
.mv-cr-yellow{border-color:rgba(241,196,15,.55);color:#c9a900}
.mv-cr-green{border-color:rgba(39,174,96,.5);color:#27ae60}
/* Genre chips */
.mv-genre-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.mv-genre-chip{padding:3px 11px;border-radius:12px;font-size:12px;background:rgba(255,255,255,.06);color:var(--text-secondary);border:1px solid rgba(255,255,255,.09)}
/* ── Series season tabs + horizontal episode cards ─────────────────── */
.series-episodes-section{margin-top:16px}
.series-season-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.series-season-tab{padding:5px 18px;border-radius:20px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;outline:none;transition:background .15s,border-color .15s,color .15s}
.series-season-tab:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text-primary)}
.series-season-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.series-ep-list{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.series-ep-list::-webkit-scrollbar{height:4px}
.series-ep-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.series-ep-card{flex-shrink:0;width:220px;background:var(--bg-surface);border-radius:10px;border:1px solid var(--border);cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative}
.series-ep-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.series-ep-card:hover .series-ep-play-overlay{opacity:1}
.series-ep-card:hover .series-ep-edit{opacity:1}
.series-ep-thumb{width:100%;aspect-ratio:16/9;background:var(--bg-active);position:relative;overflow:hidden}
.series-ep-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.series-ep-thumb-ph{width:100%;height:100%;justify-content:center}
.series-ep-badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;color:var(--accent);background:rgba(0,0,0,.78);padding:2px 7px;border-radius:4px;letter-spacing:.3px}
.series-ep-watched{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(34,197,94,.95);display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.series-ep-watched svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Quick watched toggle on the episode thumb (bottom-right, clear of the SxxExx badge and admin edit button) */
.series-ep-wbtn{position:absolute;bottom:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;z-index:4;cursor:pointer;padding:0;transition:background .15s,border-color .15s,transform .1s;opacity:.55}
.series-ep-card:hover .series-ep-wbtn{opacity:1}
.series-ep-wbtn svg{width:13px;height:13px;stroke:rgba(255,255,255,.9);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.series-ep-wbtn:hover{background:rgba(34,197,94,.85);border-color:rgba(34,197,94,.95);transform:scale(1.1)}
.series-ep-wbtn.is-on{background:rgba(34,197,94,.95);border-color:rgba(34,197,94,.95);opacity:1;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.series-ep-wbtn.is-on svg{stroke:#fff}
/* Multi-select checkbox (top-right, edit button is hidden in select mode) + selected card */
.series-ep-selbox{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.6);border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;z-index:4}
.series-ep-selbox svg{width:14px;height:14px;stroke:transparent;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.series-ep-selbox.checked{background:var(--accent);border-color:var(--accent)}
.series-ep-selbox.checked svg{stroke:#fff}
.series-ep-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
/* Season action bar (mark whole season / enter multi-select) */
.series-season-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px}
.series-sa-left,.series-sa-right{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.series-sa-count,.series-sa-progress{font-size:12px;color:var(--text-secondary);font-weight:600}
.series-sa-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;border-radius:7px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s,filter .15s}
.series-sa-btn svg{width:14px;height:14px}
.series-sa-btn:hover{background:var(--bg-hover);border-color:var(--accent)}
.series-sa-btn:disabled{opacity:.45;cursor:not-allowed}
.series-sa-btn.series-sa-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.series-sa-btn.series-sa-primary:hover{filter:brightness(1.1)}
.series-sa-btn.series-sa-primary svg{stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.series-ep-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);justify-content:center;opacity:0;transition:opacity .15s;color:#fff}
.series-ep-foot{padding:8px 10px 10px}
.series-ep-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.series-ep-meta{font-size:11px;color:var(--text-secondary)}
.series-ep-edit{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.15);color:var(--text-secondary);justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;padding:0}
.series-ep-edit:hover{background:rgba(255,255,255,.15);color:var(--text-primary)}
/* Resume bar pinned to the bottom of the episode thumb */
.series-ep-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.55);z-index:3}
.series-ep-progress-fill{height:100%;background:var(--accent);border-radius:0 2px 2px 0}
/* Audio / subtitle chips under the episode title */
.series-ep-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.series-ep-badge-chip{font-size:9px;font-weight:700;letter-spacing:.03em;padding:2px 5px;border-radius:3px;white-space:nowrap;border:1px solid transparent}
.series-ep-audio{color:#c4b5fd;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}
.series-ep-lang{color:#93c5fd;background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.3)}
.series-ep-sub{color:#fcd34d;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.3)}

/* Series Resume / Play Next button */
.series-resume-wrap{margin:10px 0 12px;max-width:420px}
.series-resume-btn{display:flex;align-items:center;gap:9px;width:100%;padding:10px 16px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;cursor:pointer;text-align:left;transition:filter .15s,transform .1s}
.series-resume-btn:hover{filter:brightness(1.12)}
.series-resume-btn:active{transform:scale(.985)}
.series-resume-label{font-weight:700;flex-shrink:0}
.series-resume-sub{font-size:11px;font-weight:500;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.series-resume-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.16);margin-top:6px;overflow:hidden}
.series-resume-fill{height:100%;background:var(--accent);border-radius:2px}

/* Watched-history maintenance (Settings > Library) */
.wh-stale-list{max-height:260px;overflow-y:auto;margin:10px 0;border:1px solid var(--border);border-radius:6px}
.wh-stale-item{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;border-bottom:1px solid var(--border)}
.wh-stale-item:last-child{border-bottom:none}
.wh-stale-item input{accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.wh-stale-name{flex:1;min-width:0;overflow:hidden;color:var(--text-primary);display:flex;flex-direction:column;gap:2px}
.wh-stale-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-stale-evidence{font-size:10px;color:var(--text-secondary)}
.wh-stale-date{font-size:10px;color:var(--text-muted);flex-shrink:0}
.wh-stale-code{font-size:10px;font-weight:700;color:var(--accent);flex-shrink:0}
.wh-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Cast strip */
.mv-cast-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 0 10px;margin-top:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.mv-cast-strip::-webkit-scrollbar{height:4px}
.mv-cast-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.mv-cast-member{flex-shrink:0;text-align:center;width:104px;transition:opacity .15s}
.mv-cast-member:hover{opacity:.8}
.mv-cast-photo{width:104px;height:104px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.06);margin:0 auto 6px;border:2px solid rgba(255,255,255,.07)}
.mv-cast-photo img{width:100%;height:100%;object-fit:cover}
.mv-cast-name{font-size:12px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-cast-char{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.mv-cast-eps{font-size:10px;color:var(--text-muted);opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
/* Director strip (same style as cast members) */
.director-strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.director-card{flex-shrink:0;text-align:center;width:110px}
.director-photo{width:90px;height:90px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.06);margin:0 auto 6px;border:2px solid rgba(255,255,255,.07)}
.director-photo img{width:100%;height:100%;object-fit:cover}
.director-name{font-size:12px;font-weight:600;color:var(--text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.director-role{font-size:11px;color:var(--text-muted);margin-top:1px}
/* Clickable director/writer cards on the detail pages → open crew page */
.director-clickable{cursor:pointer;transition:transform .15s}
.director-clickable:hover{transform:translateY(-3px)}
.director-clickable:hover .director-photo{border-color:var(--accent)}
/* Directors / Writers browse grid (A–Z, portraits) */
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;margin-bottom:28px}
.crew-card{text-align:center;cursor:pointer;transition:transform .15s}
.crew-card:hover{transform:translateY(-3px)}
.crew-portrait{width:110px;height:110px;border-radius:50%;overflow:hidden;margin:0 auto 8px;background:var(--bg-card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.crew-card:hover .crew-portrait{border-color:var(--accent)}
.crew-portrait img{width:100%;height:100%;object-fit:cover}
.crew-portrait-fb{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.crew-portrait-fb svg{width:44px;height:44px;stroke:var(--text-secondary);fill:none;stroke-width:1.5}
.crew-card-name{font-size:.9rem;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.crew-card-sub{font-size:.75rem;color:var(--text-secondary);margin-top:2px}
/* Director / Writer detail header portrait */
.crew-detail-portrait{width:150px;height:150px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-card);border:3px solid var(--border);display:flex;align-items:center;justify-content:center}
.crew-detail-portrait img{width:100%;height:100%;object-fit:cover}
.crew-detail-portrait svg{width:60px;height:60px;stroke:var(--text-secondary);fill:none;stroke-width:1.5}
/* Fallback plain-text director row */
.director-row{gap:6px;margin-top:6px;font-size:13px;color:var(--text-secondary)}
/* Studios strip */
.studios-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:flex-start}
.studio-card{text-align:center;max-width:96px;flex-shrink:0}
.studio-logo-box{height:38px;width:90px;background:rgba(255,255,255,.9);border-radius:6px;justify-content:center;margin:0 auto 4px;padding:5px 8px}
.studio-logo-box img{max-width:74px;max-height:26px;object-fit:contain}
.studio-name-label{font-size:10px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px;display:block}
.director-label{color:var(--text-muted)}

/* Collapsible Video Details */
.mv-details-toggle{gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}
.mv-details-toggle h3{margin:0}
.mv-details-arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .25s ease}
.mv-details-arrow svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mv-details-arrow.collapsed{transform:rotate(-90deg)}
.mv-details-body{overflow:hidden;transition:max-height .3s ease,opacity .25s ease;max-height:800px;opacity:1}
.mv-details-body.collapsed{max-height:0;opacity:0}

/* ─── Picture Viewer Modal ──────────────────────────── */
.audio-select-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:1000;justify-content:center;animation:fadeIn .2s ease}
.audio-select-dialog{background:var(--bg-secondary);border-radius:var(--radius);padding:24px 28px;min-width:280px;max-width:480px;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.audio-select-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:16px;text-align:center}
.audio-select-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.audio-select-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}
.audio-select-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.picture-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:10001;justify-content:center;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.picture-modal{background:var(--bg-secondary);border-radius:var(--radius);width:90vw;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.picture-modal.pic-360-mode{width:96vw;max-width:1800px;max-height:96vh}
.picture-modal-header{gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.picture-modal-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.picture-modal-actions{gap:4px;flex-shrink:0}
.pic-action-btn{color:var(--text-secondary);padding:6px;border-radius:var(--radius-sm);transition:color .2s,background .2s;justify-content:center}
.pic-action-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.pic-action-btn.active{color:var(--accent)}
.pic-action-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pic-autoplay-indicator{font-size:11px;font-weight:600;color:var(--accent);padding:2px 8px;border-radius:10px;background:var(--accent-dim);white-space:nowrap;display:none}
.pic-autoplay-indicator.active{display:inline-block}
.picture-modal-close{color:var(--text-secondary);font-size:24px;padding:0 4px;line-height:1;transition:color .2s;flex-shrink:0;margin-left:4px}
.picture-modal-close:hover{color:var(--text-primary)}
.picture-modal-body{display:flex;flex:1;overflow:hidden;min-height:0}
.picture-modal-image-container{flex:1;justify-content:center;position:relative;overflow:hidden;background:#000;min-width:0}
.picture-modal-image{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s ease;cursor:zoom-in}
.picture-modal-image.zoomed{transform:scale(2);cursor:zoom-out}
/* Collapsible metadata sidebar */
.picture-modal-sidebar{display:flex;flex-direction:column;border-left:1px solid var(--border);flex-shrink:0;width:280px;overflow:hidden;transition:width .3s ease}
.picture-modal-sidebar.collapsed{width:0;border-left:none}
.picture-modal-metadata{overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent;min-width:280px}
.pic-details-toggle{gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:12px 16px 0;min-width:280px}
.pic-details-toggle h3{font-size:14px;margin:0;color:var(--text-primary)}
.pic-details-arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .25s ease}
.pic-details-arrow svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pic-details-arrow.collapsed{transform:rotate(-90deg)}
.picture-modal-metadata .setting-row{padding:5px 0}
.picture-modal-metadata .setting-label{font-size:12px;color:var(--text-muted)}
.picture-modal-metadata .setting-value{font-size:12px}
.pic-exif-edit-section{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin:6px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--border)}
.pic-exif-row{display:flex;flex-direction:column;gap:2px;margin-bottom:7px}
.pic-exif-label{font-size:11px;color:var(--text-muted)}
.pic-exif-input{background:var(--bg-active);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;padding:4px 8px;width:100%;box-sizing:border-box;outline:none}
.pic-exif-input:focus{border-color:var(--accent)}
.pic-exif-clear-gps{font-size:11px;padding:3px 10px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;align-self:flex-start}
.pic-exif-clear-gps:hover{border-color:var(--accent);color:var(--text-primary)}
.pic-exif-edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;align-items:center}
.pic-exif-edit-actions .btn-primary{margin-top:0;padding:5px 14px;font-size:12px}
.pic-exif-edit-actions .btn-secondary{padding:5px 12px;font-size:12px}
.picture-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:32px;padding:8px 14px;border-radius:var(--radius-sm);transition:background .2s;z-index:2}
.picture-nav-btn:hover{background:rgba(0,0,0,.8)}
.picture-nav-prev{left:12px}
.picture-nav-next{right:12px}
/* Fullscreen mode for image area */
#pic-image-area:fullscreen{background:#000;justify-content:center}
#pic-image-area:fullscreen .picture-modal-image{max-width:100vw;max-height:100vh}

/* ─── Pictures/Videos: Video card overlay ───────── */
.picture-card.pic-video-card .picture-card-thumb{position:relative}
.pic-video-overlay{position:absolute;inset:0;justify-content:center;pointer-events:none}
.pic-video-play-icon{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);justify-content:center;transition:background .2s}
.pic-video-play-icon svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.picture-card.pic-video-card:hover .pic-video-play-icon{background:rgba(var(--accent-rgb,52,152,219),.85)}
.pic-video-duration{position:absolute;bottom:4px;right:6px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.65);padding:1px 5px;border-radius:3px;pointer-events:none}
.pic-video-badge{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;background:rgba(99,102,241,.85);color:#fff;padding:1px 4px;border-radius:3px;margin-left:4px;vertical-align:middle}

/* ─── Pictures/Videos: Albums section ───────────── */
.pic-albums-section{margin-bottom:16px}
.pic-albums-header{gap:8px;margin-bottom:8px;color:var(--text-secondary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.pic-albums-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pic-album-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:20px;border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;font-size:12px;color:var(--text-secondary);transition:all .15s;max-width:180px;position:relative}
.pic-album-chip:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}
.pic-album-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pic-album-chip.drag-over{background:var(--accent-dim);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pic-album-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--bg-active)}
.pic-album-thumb-placeholder{width:44px;height:44px;border-radius:6px;background:var(--bg-active);justify-content:center;font-size:20px;flex-shrink:0}
.pic-album-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pic-album-count{font-size:10px;opacity:.6;flex-shrink:0}
.pic-create-album-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;border:1px dashed var(--border);background:transparent;cursor:pointer;font-size:12px;color:var(--text-muted);transition:all .15s}
.pic-create-album-btn:hover{border-color:var(--accent);color:var(--accent)}
.pic-create-album-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ─── Pictures/Videos: Albums page (card grid) ─────── */
.pic-albums-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.pic-album-card{position:relative;background:var(--bg-surface);border-radius:10px;border:1px solid var(--border);cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s}
.pic-album-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3);border-color:var(--accent)}
.pic-album-card.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:scale(1.02)}
.pic-album-card-thumb{aspect-ratio:1;background:var(--bg-active);overflow:hidden;position:relative}
.pic-album-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pic-album-card-placeholder{width:100%;height:100%;justify-content:center;font-size:36px;opacity:.4}
.pic-album-card-info{padding:10px 10px 8px}
.pic-album-card-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.pic-album-card-count{font-size:11px;color:var(--text-secondary)}
.pic-album-card-rename{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;z-index:3}
.pic-album-card:hover .pic-album-card-rename{display:flex}

/* ─── Pictures/Videos: Album view ───────────────── */
.pic-album-view-header{gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pic-album-back-btn{gap:6px;padding:6px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;font-size:13px;transition:all .15s}
.pic-album-back-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.pic-album-back-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pic-album-empty{padding:48px 0;text-align:center;color:var(--text-muted);font-size:14px}
.pic-album-empty svg{width:40px;height:40px;margin-bottom:12px;opacity:.3}
.pic-album-item-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;display:none;align-items:center;justify-content:center;z-index:3}
.picture-card:hover .pic-album-item-remove{display:flex}

/* ─── Pictures/Videos: Media type filter chips ──── */
.pic-mediatype-chips{display:flex;gap:4px}

/* ─── Pictures/Videos: Drag feedback on cards ───── */
.picture-card.dragging{opacity:.5;cursor:grabbing}
.picture-card[draggable="true"]{cursor:grab}

/* ─── Pictures/Videos: Video player modal ───────── */
.picvid-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);z-index:10001;justify-content:center;animation:fadeIn .2s ease}
.picvid-modal{background:var(--bg-base);border-radius:var(--radius);overflow:hidden;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;width:min(900px,90vw)}
.picvid-modal-header{gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.picvid-modal-title{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.picvid-modal-close{color:var(--text-secondary);font-size:22px;padding:0 4px;line-height:1;flex-shrink:0}
.picvid-modal-close:hover{color:var(--text-primary)}
.picvid-video{width:100%;max-height:calc(90vh - 60px);background:#000;display:block;outline:none}
.picvid-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:28px;padding:8px 12px;border-radius:var(--radius-sm);transition:background .2s;z-index:2}
.picvid-nav-btn:hover{background:rgba(0,0,0,.85)}
.picvid-nav-prev{left:8px}
.picvid-nav-next{right:8px}
.picvid-modal-body{position:relative;flex:1;background:#000;min-height:0}

/* ─── Pictures two-panel layout ─────────────────────── */
.pic-controls-panel{flex-shrink:0;padding:24px 24px 12px;border-bottom:1px solid var(--border);background:var(--bg-base)}
.pic-grid-panel{flex:1;overflow-y:auto;padding:12px 24px 24px;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent}
.pic-grid-panel::-webkit-scrollbar{width:8px}
.pic-grid-panel::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:4px}
/* ─── Pictures inline album panel ─────────────────────── */
.pic-album-inline-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);margin-bottom:10px;overflow:hidden}
.pic-inline-panel-header{gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-hover)}
.pic-inline-panel-title{flex:1;font-size:13px;font-weight:600;color:var(--text-primary)}
.pic-inline-view-all{color:var(--accent);font-size:12px;padding:0 4px;text-decoration:underline}
.pic-inline-view-all:hover{opacity:.8}
.pic-inline-close-btn{color:var(--text-secondary);font-size:18px;padding:0 4px;line-height:1}
.pic-inline-close-btn:hover{color:var(--text-primary)}
.pic-inline-scroll{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;min-height:120px;align-items:flex-start;scrollbar-width:thin}
.pic-inline-scroll::-webkit-scrollbar{height:4px}
.pic-inline-scroll::-webkit-scrollbar-track{background:transparent}
.pic-inline-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.pic-inline-card{flex:0 0 auto;width:90px;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-base);border:1px solid var(--border);position:relative;transition:transform .15s}
.pic-inline-card:hover{transform:scale(1.04);border-color:var(--accent)}
.pic-inline-card-thumb{position:relative;width:90px;height:70px;overflow:hidden;background:var(--bg-hover);flex-shrink:0}
.pic-inline-card-thumb img,.pic-inline-card img{width:90px;height:70px;object-fit:cover;display:block}
.pic-inline-placeholder{width:90px;height:70px;justify-content:center;font-size:24px;color:var(--text-muted)}
.pic-inline-card-name{font-size:10px;padding:3px 4px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.pic-inline-remove-btn{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:11px;line-height:1;display:none;align-items:center;justify-content:center;z-index:3;padding:0}
.pic-inline-card:hover .pic-inline-remove-btn{display:flex}
.pic-inline-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:13px;width:100%}
.pic-inline-loading{padding:24px;text-align:center;color:var(--text-muted);font-size:13px;width:100%}

/* ─── Picture card 3-dot menu ─────────────────────── */
.pic-card-menu-btn{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;display:none;align-items:center;justify-content:center;z-index:4;padding:0}
.picture-card:hover .pic-card-menu-btn{display:flex}
.pic-add-to-album-submenu{display:none;padding:4px 0;border-top:1px solid var(--border)}
.pic-add-to-album-submenu.open{display:block}
.pic-submenu-item{padding:6px 16px;font-size:12px;cursor:pointer;color:var(--text-secondary);white-space:nowrap}
.pic-submenu-item:hover{background:var(--bg-hover);color:var(--text-primary)}
/* ─── Category/album rename ────────────────────────────── */
.pic-cat-chip-wrap{display:inline-flex;align-items:center;gap:2px}
.pic-rename-btn{color:var(--text-muted);font-size:12px;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s;line-height:1;flex-shrink:0}
.pic-cat-chip-wrap:hover .pic-rename-btn,.pic-album-chip:hover .pic-album-rename-btn{opacity:1}
.pic-rename-btn:hover{color:var(--accent);background:var(--bg-hover)}
.pic-album-rename-btn{opacity:0;transition:opacity .15s}
/* ─── Create Album popover ────────────────────────────── */
.pic-create-album-popover{position:fixed;z-index:10010;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ─── Radio ──────────────────────────────────────── */
.radio-header{margin-bottom:16px}
.radio-toolbar{gap:12px;margin-bottom:12px;flex-wrap:wrap}
.radio-search-input{flex:1;min-width:200px;max-width:400px;padding:8px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:14px;outline:none}
.radio-search-input:focus{border-color:var(--accent)}
.radio-search-input::placeholder{color:var(--text-muted)}
.radio-filters{margin-bottom:4px}
.radio-filters .filter-row{display:flex;flex-wrap:wrap;gap:6px}
.tv-filter-bar{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.tv-filter-group{display:flex;flex-direction:column;gap:4px}
.tv-filter-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.5}
.tv-filter-select{padding:7px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;cursor:pointer;outline:none;min-width:160px;max-width:260px}
.tv-filter-select:focus{border-color:var(--accent)}
.radio-count{font-size:13px;color:var(--text-secondary);margin-bottom:12px}
.tv-pager{display:flex;gap:4px;justify-content:center;align-items:center;padding:20px 0 8px;flex-wrap:wrap}
.tv-pager-btn{padding:6px 13px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;cursor:pointer;transition:all .15s;min-width:40px;text-align:center}
.tv-pager-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent);color:var(--accent)}
.tv-pager-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tv-pager-btn:disabled{opacity:.35;cursor:not-allowed}
.tv-pager-ellipsis{padding:6px 4px;color:var(--text-muted);font-size:13px;user-select:none}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.radio-card{gap:12px;background:var(--bg-surface);border:1px solid transparent;border-radius:var(--radius);padding:10px 12px;cursor:pointer;transition:all .2s;position:relative}
.radio-card:hover{background:var(--bg-hover);border-color:var(--border);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}
.radio-card.playing{border-color:var(--accent);background:var(--accent-dim)}
.radio-card-logo{width:52px;height:52px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--bg-active);justify-content:center}
.radio-card-logo img{width:100%;height:100%;object-fit:cover}
.radio-card-placeholder{justify-content:center;width:100%;height:100%}
.radio-card-info{flex:1;min-width:0}
.radio-card-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-card-desc{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.radio-card-meta{display:flex;gap:8px;margin-top:4px;font-size:11px}
.radio-card-country{color:var(--accent);font-weight:500}
.radio-card-genre{color:var(--text-muted)}
.radio-card-fav{color:var(--text-muted);font-size:16px;padding:4px;position:absolute;top:6px;right:6px;opacity:0;transition:all .2s;z-index:1}
.radio-card:hover .radio-card-fav{opacity:1}
.radio-card-fav.active{color:var(--danger);opacity:1}
.radio-card-fav:hover{color:var(--danger);transform:scale(1.2)}
.radio-card-play{width:34px;height:34px;border-radius:50%;background:var(--accent);justify-content:center;flex-shrink:0;opacity:0;transition:opacity .2s}
.radio-card:hover .radio-card-play{opacity:1}
.radio-card.playing .radio-card-play{opacity:1;background:var(--success)}
.radio-live-indicator{color:var(--danger);font-size:10px;animation:pulse-live 1.5s infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.4}}
.player-bar.radio-mode .player-progress{opacity:.3;pointer-events:none}
.player-bar.podcast-mode .player-playlist-wrapper{display:none}
.player-bar.podcast-mode #btn-player-lyrics{display:none}
.player-bar.podcast-mode #btn-shuffle,.player-bar.podcast-mode #btn-repeat,.player-bar.podcast-mode #btn-prev,.player-bar.podcast-mode #btn-next{display:none}
.btn-fetch-logos{padding:8px 16px;background:var(--success);border:1px solid var(--success);border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-fetch-logos:hover{background:color-mix(in srgb,var(--success) 85%,#fff);border-color:color-mix(in srgb,var(--success) 85%,#fff);color:#fff}
.btn-fetch-logos:disabled{opacity:.5;cursor:not-allowed}
.fetch-logos-status{font-size:13px;color:var(--text-secondary);margin-bottom:12px;padding:8px 0}
.fetch-progress-bar{width:100%;max-width:400px;height:6px;background:var(--bg-active);border-radius:3px;overflow:hidden;margin-bottom:6px}
.fetch-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease}
.fetch-progress-text{font-size:12px;color:var(--text-muted)}

/* Podcasts */
.podcast-unplayed-badge{display:inline-block;background:var(--accent);color:#fff;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:700;margin-left:4px;vertical-align:middle}
.podcast-delete-btn{position:absolute;bottom:6px;right:6px;color:var(--text-muted);font-size:13px;opacity:0;transition:opacity .2s;padding:2px 5px;border-radius:var(--radius-sm)}
.radio-card:hover .podcast-delete-btn{opacity:1}
.podcast-delete-btn:hover{color:var(--danger)}
.podcast-episode-list{display:flex;flex-direction:column;gap:2px}
.podcast-episode-row{gap:10px;padding:10px 12px;background:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border-color);cursor:pointer;transition:background .15s}
.podcast-episode-row:hover{background:var(--bg-active)}
.podcast-episode-played{opacity:0.5}
.podcast-episode-playing{background:var(--bg-active);border-color:var(--accent)!important}
.podcast-episode-playing .podcast-episode-title{color:var(--accent)}
.podcast-episode-info{flex:1;min-width:0}
.podcast-episode-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.podcast-episode-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.podcast-type-badge{display:inline-block;background:rgba(77,139,245,.15);color:var(--accent);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;flex-shrink:0}
.podcast-type-video{background:rgba(230,126,34,.15);color:#e67e22}
.podcast-played-btn{background:none;border:1px solid var(--border-color);border-radius:50%;width:24px;height:24px;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:12px;flex-shrink:0;transition:all .15s}
.podcast-played-btn:hover{border-color:var(--accent);color:var(--accent)}
.podcast-back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;color:var(--text-secondary);font-size:13px;margin-bottom:16px;transition:all .15s}
.podcast-back-btn:hover{background:var(--bg-active);color:var(--text-primary)}
/* Podcast Now Playing panel */
.podcast-np-hidden{display:none!important}
.podcast-now-playing{gap:20px;background:var(--bg-secondary);border-radius:var(--radius);padding:20px;margin-bottom:20px;border:1px solid var(--border)}
.podcast-np-art{width:110px;height:110px;border-radius:10px;object-fit:cover;flex-shrink:0}
.podcast-np-art-placeholder{width:110px;height:110px;border-radius:10px;background:var(--bg-active);justify-content:center;flex-shrink:0}
.podcast-np-body{flex:1;min-width:0}
.podcast-np-title{font-size:1rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.podcast-np-show{font-size:0.82rem;color:var(--text-muted);margin-bottom:14px}
.podcast-np-progress{gap:10px;margin-bottom:14px}
.podcast-np-time{font-size:0.75rem;color:var(--text-muted);flex-shrink:0;min-width:36px;font-variant-numeric:tabular-nums}
.podcast-np-bar{flex:1;height:5px;background:var(--bg-active);border-radius:3px;cursor:pointer;position:relative;transition:height .1s}
.podcast-np-bar:hover{height:7px}
.podcast-np-fill{height:100%;background:var(--accent);border-radius:3px;pointer-events:none;transition:width .1s linear}
.podcast-np-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);position:absolute;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .15s}
.podcast-np-bar:hover .podcast-np-thumb{opacity:1}
.podcast-np-controls{gap:16px}
.podcast-np-btn{color:var(--text-secondary);padding:7px 10px;border-radius:var(--radius);justify-content:center;transition:all .15s;font-size:0.82rem;font-weight:600;gap:4px}
.podcast-np-btn:hover{color:var(--text-primary);background:var(--bg-active)}
.podcast-np-play{width:46px;height:46px;padding:0;background:var(--accent)!important;color:#fff!important;border-radius:50%}
.podcast-np-play:hover{background:var(--accent-hover)!important;transform:scale(1.05)}
.podcast-discover-section{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-color)}
/* Discover cards */
.podcast-discover-card:hover{background:var(--bg-active)}
.podcast-subscribe-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:var(--accent);color:#fff;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;transition:all .15s;flex-shrink:0}
.podcast-subscribe-btn:hover{background:var(--accent-hover);transform:scale(1.03)}
.podcast-subscribe-btn:disabled{opacity:.6;cursor:default;transform:none}
.podcast-subscribe-lg{padding:8px 20px;font-size:13px;margin-top:12px}
/* Discover preview page */
.podcast-preview-header{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px}
.podcast-preview-art{width:120px;height:120px;border-radius:12px;object-fit:cover;flex-shrink:0}
.podcast-preview-meta{flex:1;min-width:0}
.podcast-preview-title{font-size:1.3rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.podcast-preview-author{font-size:0.9rem;color:var(--text-secondary);margin-bottom:2px}
.podcast-preview-category{display:inline-block;background:rgba(77,139,245,.12);color:var(--accent);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;margin-bottom:8px}
.podcast-preview-desc{font-size:0.85rem;color:var(--text-muted);line-height:1.5;margin-bottom:4px}

/* Internet TV */
.btn-import-m3u{padding:8px 16px;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-import-m3u:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.tv-url-import-row{display:flex;gap:8px;margin-top:8px;align-items:center}
.tv-url-input{flex:1;padding:8px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none}
.tv-url-input:focus{border-color:var(--accent)}
.tv-url-input:disabled{opacity:.5}
.tv-res-badge{display:inline-block;background:var(--bg-active);color:var(--text-muted);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600;margin-left:4px;vertical-align:middle}
.tv-player-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:#000;flex-direction:column}
.tv-player-header{justify-content:space-between;padding:12px 20px;background:rgba(0,0,0,.9);color:#fff;flex-shrink:0}
.tv-player-title{font-size:15px;font-weight:600}
.tv-player-close{color:#fff;font-size:22px;padding:4px 8px;border-radius:var(--radius-sm);transition:background .2s}
.tv-player-close:hover{background:rgba(255,255,255,.15)}
.tv-player-actions{gap:8px}
.tv-player-fav{color:rgba(255,255,255,.6);padding:4px;border-radius:var(--radius-sm);transition:color .2s,transform .2s}
.tv-player-fav:hover{color:#fff;transform:scale(1.15)}
.tv-player-fav.active{color:var(--danger)}
.tv-player-fav.active svg{fill:var(--danger);stroke:var(--danger)}
.tv-player-record{gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);color:rgba(255,255,255,.8);font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer;transition:all .2s;white-space:nowrap}
.tv-player-record:hover{background:rgba(255,255,255,.15);color:#fff}
.tv-player-record.recording{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444}
.tv-record-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.tv-record-dot.recording{animation:tv-rec-pulse 1s ease-in-out infinite}
@keyframes tv-rec-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── Video 3-dot menu button ──────────────────────────── */
.mv-card-menu-btn{position:absolute;bottom:8px;right:8px;width:32px;height:32px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:22px;font-weight:700;line-height:32px;text-align:center;cursor:pointer;opacity:0;transition:opacity .2s;z-index:2;justify-content:center;padding:0;letter-spacing:1px}
.mv-card:hover .mv-card-menu-btn,.card:hover .mv-card-menu-btn,.artist-album-card:hover .mv-card-menu-btn,.req-card:hover .mv-card-menu-btn{opacity:1}
.mv-card-menu-btn:hover{background:rgba(255,255,255,.2)}
.mv-card-menu-btn-thumb{right:auto!important;left:8px!important}

/* ── Video context menu ───────────────────────────────── */
.video-context-menu{position:fixed;min-width:190px;background:#1e1e1e;border:1px solid rgba(255,255,255,.15);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.7);z-index:9999;padding:6px 0;overflow:hidden;backdrop-filter:none}
.video-menu-item{gap:10px;padding:9px 14px;cursor:pointer;color:var(--text-primary);font-size:13px;transition:background .15s}
.video-menu-item:hover{background:rgba(255,255,255,.08)}
.video-menu-item-danger{color:var(--danger)!important}
.video-menu-item-danger:hover{background:rgba(231,76,60,.15)!important}
.video-menu-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.video-menu-check{margin-left:auto;color:var(--accent);font-weight:700}
.video-menu-divider{height:1px;background:rgba(255,255,255,.08);margin:4px 0}

/* ── External player (MPV) handoff modal ──────────────── */
.ext-player-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px}
.ext-player-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:440px;padding:24px;box-shadow:0 16px 48px rgba(0,0,0,.6)}
.ext-player-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ext-player-head h3{margin:0;font-size:17px;font-weight:600;color:var(--text-primary)}
.ext-player-close{width:30px;height:30px;background:rgba(255,255,255,.06);border:none;border-radius:50%;color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer}
.ext-player-close:hover{background:rgba(255,255,255,.14);color:var(--text-primary)}
.ext-player-desc{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.ext-player-tc{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--text-secondary);margin-bottom:16px;cursor:pointer}
.ext-player-tc input{margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.ext-player-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ext-player-btn{padding:11px 12px;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.ext-player-btn:hover{background:var(--accent-dim);border-color:var(--accent)}
.ext-player-result{margin-top:14px}
.ext-player-url{word-break:break-all;font-size:12px;font-family:monospace;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;padding:10px;color:var(--text-primary)}
.ext-player-copied{margin-top:6px;font-size:12px;color:var(--accent);font-weight:600}
.ext-player-note{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-secondary);opacity:.85}
/* DVD handoff panel: a small caption above each copyable field, plus a disc-tinted play button. */
.dvd-field-label{margin:14px 0 5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary)}
.vp-playbtn-dvd{background:var(--accent-dim);border:1px solid var(--accent)}
a.ext-player-btn{display:inline-block;text-decoration:none;margin:8px 0 0;text-align:center}
.video-type-dvd{background:rgba(52,73,94,.9)}

/* ── Video edit modal ─────────────────────────────────── */
.video-edit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:10000;justify-content:center;padding:20px;overflow-y:auto}
.video-edit-modal{background:var(--bg-surface);border-radius:14px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:28px;position:relative;box-shadow:0 16px 48px rgba(0,0,0,.6)}
.video-edit-modal h2{margin:0 0 20px 0;font-size:18px;font-weight:600;color:var(--text-primary);gap:8px}
.video-edit-close{position:absolute;top:14px;right:14px;width:32px;height:32px;background:rgba(255,255,255,.06);border-radius:50%;color:var(--text-secondary);font-size:20px;justify-content:center}
.video-edit-close:hover{background:rgba(255,255,255,.12);color:#fff}
.video-edit-form-group{margin-bottom:14px}
.video-edit-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.video-edit-input,.video-edit-select{width:100%;padding:10px 12px;background:#1e1e1e;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#e0e0e0;font-size:14px;font-family:inherit;box-sizing:border-box;transition:border-color .2s}
.video-edit-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.video-edit-select option{background:#1e1e1e;color:#e0e0e0;padding:8px}
.video-edit-input:focus,.video-edit-select:focus{outline:none;border-color:var(--accent)}
.video-edit-location{flex:1;color:var(--text-secondary);cursor:text;font-size:12px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-edit-copy-btn{flex-shrink:0;padding:9px 10px;background:#1e1e1e;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text-secondary);cursor:pointer;line-height:0;transition:border-color .2s,color .2s}
.video-edit-copy-btn:hover{border-color:var(--accent);color:#fff}
.video-edit-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.video-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.video-edit-btn{padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;transition:background .2s}
.video-edit-btn-secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15)}
.video-edit-btn-secondary:hover{background:rgba(255,255,255,.18)}
.video-edit-btn-primary{background:var(--accent);color:#fff}
.video-edit-btn-primary:hover{opacity:.85}
.video-edit-poster-preview{margin-top:10px;display:none}
.video-edit-poster-preview img{max-width:120px;border-radius:8px;border:2px solid rgba(var(--accent-rgb,46,204,113),.3)}
.video-edit-poster-dims{margin-top:4px;font-size:12px;color:var(--text-muted)}
.video-edit-poster-error{margin-top:8px;padding:10px;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.25);border-radius:8px;color:#e74c3c;font-size:12px;display:none}
.video-edit-note{margin-top:16px;padding:10px 12px;background:rgba(241,196,15,.08);border:1px solid rgba(241,196,15,.15);border-radius:8px;color:var(--text-secondary);font-size:12px}
/* fanart.tv artwork picker */
.fanart-empty{padding:24px 10px;font-size:13px;color:var(--text-muted);text-align:center}
.fanart-summary{min-height:0;font-size:12px}
.fanart-summary-ok{color:var(--success);font-weight:600}
/* modal */
.fanart-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:10001;display:flex;align-items:center;justify-content:center;padding:24px}
.fanart-modal{background:var(--bg-surface,#1c1c1e);border:1px solid rgba(255,255,255,.12);border-radius:14px;width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.fanart-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.fanart-modal-header h3{margin:0;font-size:17px;font-weight:700;color:#fff}
.fanart-modal-close{font-size:26px;line-height:1;color:var(--text-secondary);background:none;border:none;cursor:pointer;padding:0 4px}
.fanart-modal-close:hover{color:#fff}
.fanart-modal-body{padding:18px 20px;overflow-y:auto;flex:1}
.fanart-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid rgba(255,255,255,.1)}
.fanart-section{margin-bottom:22px}
.fanart-section:last-child{margin-bottom:0}
.fanart-section-title{font-size:13px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.fanart-count{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--text-muted);font-size:11px;font-weight:600}
.fanart-grid{display:grid;gap:12px}
.fanart-grid-poster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fanart-grid-artist{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fanart-grid-backdrop{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.fanart-cell{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;border:3px solid transparent;background:rgba(0,0,0,.3);transition:border-color .15s,transform .15s}
.fanart-cell:hover{transform:scale(1.03)}
.fanart-cell img{display:block;width:100%;height:auto;object-fit:cover}
.fanart-cell-poster img{aspect-ratio:2/3}
.fanart-cell-artist img{aspect-ratio:1/1}
.fanart-cell-backdrop img{aspect-ratio:16/9}
.fanart-cell.fanart-selected{border-color:var(--accent)}
.fanart-likes{position:absolute;bottom:6px;left:6px;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:600}
.fanart-check{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:15px;font-weight:700;display:none;align-items:center;justify-content:center}
.fanart-cell.fanart-selected .fanart-check{display:flex}

/* ─── Smart Insights Page ──────────────────────────────── */
.insights-page{padding:0 0 40px}
.insights-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px}
.insights-section-title{font-size:20px;font-weight:600;margin-bottom:16px;gap:10px}
.insights-section-desc{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:16px}
.insight-message{background:rgba(99,102,241,.12);border-left:3px solid #6366f1;padding:12px 16px;margin-bottom:10px;border-radius:0 8px 8px 0;gap:10px;font-size:14px;color:rgba(255,255,255,.85)}
.insight-icon{display:flex;flex-shrink:0}
.insights-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:16px}
.insights-progress-wrap{margin-top:8px}
.insights-progress-label{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:6px}
.insights-progress-bar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.insights-progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .6s ease}
.insights-genre-tags{display:flex;flex-wrap:wrap;gap:8px}
.insights-genre-tag{background:var(--bg-active);color:var(--text-primary);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500}
.insights-genre-tag small{opacity:.7;margin-left:2px}
.insights-comfort-list{display:flex;flex-direction:column;gap:10px}
.insights-comfort-item{gap:14px;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:10px;cursor:pointer;transition:background .2s}
.insights-comfort-item:hover{background:var(--bg-hover)}
.insights-comfort-thumb{width:80px;height:48px;border-radius:6px;overflow:hidden;flex-shrink:0;position:relative;background:rgba(255,255,255,.06)}
.insights-comfort-thumb img{width:100%;height:100%;object-fit:cover}
.insights-comfort-info{flex:1;min-width:0}
.insights-comfort-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insights-comfort-plays{font-size:12px;color:rgba(255,255,255,.5)}
.insights-rating-badge{position:absolute;top:6px;left:6px;background:var(--accent);color:#fff;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:700;backdrop-filter:blur(4px)}
.insights-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.insights-btn:hover{background:var(--bg-hover);border-color:var(--accent)}
.insights-btn-icon{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ── Insights Hero ── */
.insights-hero{background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;padding:24px 28px 20px;margin-bottom:24px}
.insights-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-bottom:16px}
.ins-stat-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;background:rgba(255,255,255,.04);border-radius:12px;border:1px solid rgba(255,255,255,.06);text-align:center}
.ins-stat-icon{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ins-stat-value{font-size:26px;font-weight:700;color:var(--text-primary);line-height:1}
.ins-stat-label{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.ins-stat-sub{font-size:10px;color:rgba(255,255,255,.3)}
.ins-tbl-icon{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;margin-right:6px;flex-shrink:0}
/* ── Type stacked bar ── */
.ins-type-bar{height:8px;border-radius:4px;display:flex;overflow:hidden;margin:2px 0 8px}
.ins-type-bar-seg{height:100%;min-width:2px}
.ins-type-bar-legend{display:flex;gap:14px;flex-wrap:wrap}
.ins-type-legend-item{gap:5px;font-size:11px;color:var(--text-secondary)}
.ins-type-legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* ── 2-col grid ── */
.insights-grid-2col{display:grid;grid-template-columns:55% 1fr;gap:24px;margin-bottom:24px}
.insights-grid-2col>.insights-section{margin-bottom:0}
@media(max-width:960px){.insights-grid-2col{grid-template-columns:1fr}}
/* ── Genre bars ── */
.ins-genre-row{gap:10px;margin-bottom:10px}
.ins-genre-name{font-size:13px;color:var(--text-primary);min-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.ins-genre-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.ins-genre-bar{height:100%;background:var(--accent);border-radius:3px}
.ins-genre-count{font-size:12px;color:var(--text-secondary);min-width:26px;text-align:right}
/* ── Activity chart ── */
.ins-activity-chart{height:120px;display:flex;gap:3px;align-items:stretch;position:relative}
.ins-activity-col{flex:1;position:relative}
.ins-activity-col:hover .ins-activity-tip{opacity:1;visibility:visible}
.ins-activity-col:hover .ins-activity-bar{filter:brightness(1.25)}
.ins-activity-bar{position:absolute;bottom:18px;left:2px;right:2px;background:var(--accent);border-radius:3px 3px 0 0}
.ins-activity-tip{position:absolute;top:-2px;left:50%;transform:translateX(-50%);background:rgba(20,20,40,.95);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:3px 7px;font-size:10px;white-space:nowrap;color:#fff;opacity:0;visibility:hidden;transition:opacity .15s;z-index:20;pointer-events:none}
.ins-activity-lbl{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.4);white-space:nowrap}
/* ── Watchlist section ── */
.ins-wl-stats{display:flex;gap:12px;margin-bottom:16px}
.ins-wl-stat{display:flex;flex-direction:column;align-items:center;padding:12px 8px;background:rgba(255,255,255,.04);border-radius:10px;flex:1;text-align:center}
.ins-wl-num{font-size:22px;font-weight:700;color:var(--accent);line-height:1}
.ins-wl-label{font-size:10px;color:var(--text-secondary);margin-top:4px}
.ins-wl-oldest{background:var(--bg-hover);border:1px solid var(--border);border-radius:10px;padding:12px 14px;gap:12px;cursor:pointer;transition:background .2s}
.ins-wl-oldest:hover{background:var(--bg-active)}
.ins-wl-poster{width:42px;height:62px;border-radius:5px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.06)}
.ins-wl-poster img{width:100%;height:100%;object-fit:cover}
.ins-wl-info{flex:1;min-width:0}
.ins-wl-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.ins-wl-days{font-size:11px;color:rgba(255,255,255,.45);margin-bottom:8px}
.ins-wl-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;background:var(--accent);color:#fff;border-radius:6px;font-size:11px;font-weight:500;transition:background .2s}
.ins-wl-btn:hover{background:var(--accent-hover,#4f46e5)}
/* ── Series progress ── */
.ins-series-prog{height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:4px;overflow:hidden}
.ins-series-prog-fill{height:100%;background:var(--accent);border-radius:2px}
.home-header-btns{gap:10px;margin-left:auto}
.nr-home-btn{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#34d399}
.nr-home-btn:hover{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.5)}
.nr-home-btn .insights-btn-icon{stroke:#34d399}
.nr-home-btn--disabled{opacity:.4;cursor:not-allowed}
.nr-home-btn--disabled:hover{background:rgba(16,185,129,.1)!important;border-color:rgba(16,185,129,.3)!important}
.nr-key-tooltip{position:fixed;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;font-size:13px;max-width:300px;text-align:center;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.5);pointer-events:none;line-height:1.5}
/* ─── New Releases Page ─────────────────────────── */
.nr-page{padding:0 0 40px}
.nr-loading{padding:60px 0;text-align:center;color:var(--text-secondary)}
.nr-controls{gap:12px;margin-bottom:18px;flex-wrap:wrap}
.nr-category-tabs{display:flex;gap:6px;flex-wrap:wrap}
.nr-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.nr-tab:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}
.nr-tab.active{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#34d399}
.nr-tab-ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nr-right-controls{gap:10px;margin-left:auto}
.nr-mode-toggle{display:flex;background:rgba(255,255,255,.05);border-radius:8px;padding:2px;border:1px solid rgba(255,255,255,.1)}
.nr-mode-btn{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);transition:all .2s;white-space:nowrap}
.nr-mode-btn.active{background:rgba(16,185,129,.2);color:#34d399}
.nr-country-select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text-primary);padding:6px 10px;font-size:13px;cursor:pointer}
.nr-country-select option{background:var(--bg-surface)}
.nr-genre-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.nr-chip{padding:5px 13px;border-radius:16px;font-size:12px;font-weight:500;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);cursor:pointer;transition:all .2s;white-space:nowrap}
.nr-chip:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}
.nr-chip.active{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#34d399}
.nr-results{min-height:200px}
.nr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(78px,7%),1fr));gap:8px}
.nr-card{background:rgba(255,255,255,.04);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .25s;border:1px solid rgba(255,255,255,.06)}
.nr-card:hover{transform:translateY(-2px);border-color:rgba(16,185,129,.3);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.nr-card-poster{width:100%;aspect-ratio:2/3;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.nr-card-poster img{width:100%;height:100%;object-fit:cover;display:block}
.nr-card-ph{width:100%;height:100%;justify-content:center;font-size:20px;color:rgba(255,255,255,.2)}
/* Provider strip - overlaid at bottom of poster */
.nr-provider-strip{position:absolute;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:3px;padding:4px 5px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 100%)}
.nr-provider-badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.3px;white-space:nowrap;line-height:1.5;text-shadow:none}
/* Provider badges inside the detail overlay - larger, pill-shaped, with breathing room */
.nr-detail-providers{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.nr-detail-providers .nr-provider-badge{font-size:12px;padding:5px 14px;border-radius:20px;letter-spacing:.4px}
.nr-provider-link{text-decoration:none;cursor:pointer;transition:filter .15s,transform .15s}
.nr-provider-link:hover{filter:brightness(1.2);transform:scale(1.05)}
.nr-provider-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nr-card-info{padding:5px 6px 6px}
.nr-card-title{font-size:11px;font-weight:500;line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nr-card-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.nr-card-year{font-size:10px;color:var(--text-secondary)}
.nr-card-rating{font-size:10px;color:#fbbf24}
/* ─── Requests Page (catalog-style browse/request grid) ─── */
.req-main-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.req-main-tab{padding:10px 18px;font-size:14px;font-weight:600;color:var(--text-secondary);background:transparent;border:none;border-bottom:2px solid transparent;transition:all .2s;cursor:pointer;white-space:nowrap}
.req-main-tab:hover{color:var(--text-primary)}
.req-main-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.req-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.req-card{display:flex;flex-direction:column;height:100%;background:rgba(255,255,255,.04);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:all .25s}
.req-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.req-card-poster{width:100%;aspect-ratio:2/3;background:rgba(255,255,255,.06);position:relative;overflow:hidden;flex:none}
.req-card-poster img{width:100%;height:100%;object-fit:cover;display:block}
.req-card-info{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1;gap:6px}
.req-card-title{font-size:13px;font-weight:600;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-primary)}
.req-card-sub{font-size:11px;font-style:italic;color:var(--text-secondary);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-4px}
.req-card-meta{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--text-secondary)}
.req-card-meta .req-rating{color:#fbbf24}
.req-card-action{margin-top:auto;padding-top:6px}
.req-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 0;border-radius:8px;font-size:12.5px;font-weight:600;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;transition:all .18s;cursor:pointer;border:none}
.req-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.req-btn:active{transform:translateY(0)}
.req-btn-secondary{background:rgba(255,255,255,.06);color:var(--text-secondary);border:1px solid rgba(255,255,255,.12)}
.req-btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--text-primary);filter:none}
.req-badge{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 0;border-radius:8px;font-size:12px;font-weight:600;background:rgba(255,255,255,.05);border:1px solid currentColor;box-sizing:border-box}
.req-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.req-actions-row{display:flex;gap:8px}
.req-actions-row .req-btn{flex:1}
.req-error{font-size:10.5px;color:var(--danger);line-height:1.3}
.req-empty-row{grid-column:1/-1}
.req-arr-warning{display:flex;align-items:center;gap:10px;background:rgba(243,156,18,.12);border:1px solid var(--warning);color:var(--warning);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:500;margin-bottom:16px}
.req-arr-warning svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.nr-pagination{justify-content:center;gap:16px;margin-top:28px}
.nr-page-info{font-size:13px;color:var(--text-secondary)}
.nr-no-key{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-secondary)}
.nr-no-key h3{margin:0;font-size:18px;color:var(--text-primary)}
.nr-no-key p{margin:0;font-size:14px;max-width:380px}
/* NR Detail overlay */
.nr-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10002;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.nr-detail-modal{background:var(--bg-surface);border-radius:16px;padding:32px;max-width:880px;width:100%;position:relative;max-height:90vh;overflow-y:auto;border:1px solid rgba(255,255,255,.1)}
.nr-detail-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.1);color:var(--text-primary);width:30px;height:30px;border-radius:50%;font-size:14px;justify-content:center;transition:background .2s}
.nr-detail-close:hover{background:rgba(255,255,255,.2)}
.nr-detail-body{display:flex;gap:26px}
.nr-detail-poster{flex-shrink:0;width:182px}
.nr-detail-poster img{width:182px;border-radius:10px;display:block}
.nr-detail-info{flex:1;min-width:0}
.nr-detail-title{font-size:20px;font-weight:700;margin:0 0 10px;line-height:1.25}
.nr-detail-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.nr-detail-meta span{font-size:13px;color:var(--text-secondary);background:rgba(255,255,255,.07);padding:3px 9px;border-radius:6px}
.nr-detail-type{background:rgba(16,185,129,.15)!important;color:#34d399!important}
.nr-detail-overview{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0 0 18px}
.nr-detail-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nr-detail-actions .btn-primary{margin-top:0}
.nr-trailer-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;background:#C0392B;color:#fff;transition:background .18s;white-space:nowrap}
.nr-trailer-btn:hover{background:#a93226}
.nr-trailer-btn:disabled{opacity:.6;cursor:default}
.nr-tmdb-link{text-decoration:none;display:inline-flex;align-items:center;padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;background:#01B4E4;color:#fff;transition:background .18s;white-space:nowrap}
.nr-tmdb-link:hover{background:#0099c5;color:#fff}
/* ─── Where to Watch Page (Watchmode) ──────────────────────── */
.wtw-page{padding:0 0 40px}
.wtw-search-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
/* Top row: type tabs left, region right */
.wtw-controls-row{justify-content:space-between;gap:12px;flex-wrap:wrap}
.wtw-type-tabs{display:flex;gap:6px}
.wtw-tab{padding:7px 18px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;line-height:1}
.wtw-tab:hover{border-color:var(--accent);color:var(--accent)}
.wtw-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Region picker */
.wtw-region-wrap{gap:6px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:0 10px;height:36px}
.wtw-region-select{color:var(--text-primary);font-size:13px;outline:none;padding:0;line-height:1}
.wtw-region-select option{background:#1e1e1e;color:#e0e0e0}
/* Search input row */
.wtw-input-row{display:flex;gap:8px;align-items:stretch}
.wtw-input-wrap{flex:1;position:relative}
.wtw-input-icon{position:absolute;left:12px;pointer-events:none}
.wtw-input{width:100%;padding:0 14px 0 36px;height:42px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font-size:14px;box-sizing:border-box}
.wtw-input:focus{outline:none;border-color:var(--accent)}
.wtw-search-btn{height:42px;padding:0 22px;white-space:nowrap;margin-top:0}
.wtw-hint{font-size:12px;color:var(--text-secondary);margin:0 0 12px}
.wtw-loading{padding:40px 0;text-align:center;color:var(--text-secondary);justify-content:center;gap:10px;font-size:14px}
.wtw-error{padding:30px 0;text-align:center;color:#f87171;font-size:14px}
/* Poster grid */
.wtw-poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.wtw-poster-card{cursor:pointer;border-radius:var(--radius);overflow:hidden;background:var(--bg-surface);border:1px solid var(--border);transition:transform .15s,border-color .15s,box-shadow .15s}
.wtw-poster-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.wtw-poster-img{position:relative;aspect-ratio:2/3;background:var(--bg-active);overflow:hidden}
.wtw-poster-img img{width:100%;height:100%;object-fit:cover;display:block}
.wtw-poster-ph{position:absolute;inset:0;justify-content:center}
.wtw-poster-info{padding:7px 8px 9px}
.wtw-card-title{font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.wtw-card-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:10px;color:var(--text-secondary)}
.wtw-card-rating{color:#fbbf24;font-size:10px}
.wtw-type-badge{background:rgba(16,185,129,.15);color:#34d399;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600}
/* Sources modal */
.wtw-sources-modal{max-width:560px!important}
.wtw-sources-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.wtw-modal-poster{width:80px;height:120px;object-fit:cover;border-radius:6px;flex-shrink:0}
.wtw-sources-body{display:flex;flex-direction:column;gap:14px}
.wtw-region-note{font-size:12px;color:var(--text-secondary);margin:0 0 4px}
.wtw-no-sources{padding:30px 0;text-align:center;color:var(--text-secondary);font-size:14px}
.wtw-group{display:flex;flex-direction:column;gap:6px}
.wtw-group-label{display:inline-block;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.4px;align-self:flex-start;margin-bottom:2px}
.wtw-source-list{display:flex;flex-direction:column;gap:6px}
.wtw-source-card{gap:10px;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);text-decoration:none;color:var(--text-primary);transition:background .15s,border-color .15s}
.wtw-source-card:hover{background:var(--bg-hover);border-color:var(--accent)}
.wtw-source-name{padding:4px 12px;border-radius:16px;font-size:13px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.wtw-source-meta{display:flex;gap:6px;align-items:center;flex:1;justify-content:flex-end}
.wtw-format{font-size:11px;font-weight:600;color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;padding:1px 6px}
.wtw-price{font-size:12px;font-weight:700;color:#fbbf24}
.wtw-watch-now{font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap;gap:3px;flex-shrink:0}
.wtw-attribution{margin-top:32px;font-size:11px;color:var(--text-secondary);text-align:center}
.wtw-attribution a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}
.wtw-attribution a:hover{color:var(--accent)}
/* Mood Explorer */
.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.mood-card{background:rgba(255,255,255,.04);border-radius:12px;padding:18px;cursor:pointer;transition:all .25s ease;border:2px solid transparent;text-align:center}
.mood-card:hover{transform:translateY(-3px);border-color:var(--mood-color);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.mood-card.mood-active{border-color:var(--mood-color);background:rgba(255,255,255,.08);box-shadow:0 0 20px color-mix(in srgb,var(--mood-color) 30%,transparent)}
.mood-card-icon{margin-bottom:8px;display:flex;justify-content:center}
.mood-svg-icon{width:32px;height:32px;stroke:var(--mood-color);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.mood-card-name{font-size:14px;font-weight:600;margin-bottom:4px}
.mood-card-desc{font-size:11px;color:rgba(255,255,255,.45);line-height:1.4}
.mood-results{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.mood-results-header{justify-content:space-between;margin-bottom:16px}
.mood-results-header h3{margin:0;font-size:18px;font-weight:600}
.mood-close-btn{color:rgba(255,255,255,.5);font-size:18px;padding:4px 8px;border-radius:6px;transition:all .2s}
.mood-close-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
/* ─── Analysis Page Enhancements ────────────────── */
.an-stats-panel{padding:0!important;overflow:hidden;margin-bottom:20px}
.an-stats-table{width:100%;border-collapse:collapse;font-size:13px}
.an-stats-table td,.an-stats-table th{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.an-stats-table tbody tr:last-child td{border-bottom:none}
.an-tbl-label{color:var(--text-secondary)}
.an-tbl-value{font-weight:600;text-align:right;white-space:nowrap}
.an-stats-table--ov th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding-top:10px;padding-bottom:6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.an-stats-table--ov th:not(:first-child){text-align:right}
.an-stats-table--ov td{font-weight:500}
.an-stats-table--ov td:nth-child(2){font-weight:700;text-align:right;white-space:nowrap}
.an-stats-table--ov td:nth-child(3){text-align:right;white-space:nowrap;color:var(--text-secondary);font-weight:400}
.an-tbl-total td{border-top:1px solid rgba(255,255,255,.1)!important;font-weight:700;color:var(--text-primary)!important}
.an-stat-highlight .stat-value{font-size:32px}
.an-medal-icon{width:24px;height:24px;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.an-stacked-bar{display:flex;height:28px;border-radius:var(--radius);overflow:hidden;margin-bottom:10px;background:var(--bg-surface)}
.an-stacked-seg{transition:width .4s ease;min-width:2px;cursor:default}
.an-stacked-seg:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.an-stacked-seg:last-child{border-radius:0 var(--radius) var(--radius) 0}
.an-stacked-seg:only-child{border-radius:var(--radius)}
.an-stacked-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px}
.an-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.an-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.an-pie-container{gap:24px;padding:8px 0}
.an-pie-svg{width:200px;height:200px;flex-shrink:0}
.an-pie-container .an-stacked-legend{flex:1;flex-direction:column;flex-wrap:nowrap;gap:10px 0;margin-top:0;justify-content:center!important}
.an-pie-container .an-legend-item{font-size:13px}
.an-pie-container .an-legend-dot{width:12px;height:12px}

@media(max-width:768px){
.insights-page{padding:0 0 20px}
.insights-section{padding:16px;margin-bottom:16px}
.insights-stats-grid{grid-template-columns:repeat(2,1fr)}
.insights-btn span{display:none}
.insights-btn{padding:8px 10px}
.mood-grid{grid-template-columns:repeat(2,1fr)}
.insights-hero{padding:16px}
.insights-hero-stats{grid-template-columns:repeat(3,1fr);gap:8px}
.ins-stat-value{font-size:20px}
.ins-genre-name{min-width:90px}
.ins-wl-stats{gap:8px}
.ins-activity-chart{height:100px}
.ins-activity-lbl{font-size:8px}
.nr-right-controls{margin-left:0;width:100%}
.nr-grid{grid-template-columns:repeat(3,1fr);gap:6px}
.req-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.req-main-tab{padding:9px 12px;font-size:13px}
.nr-controls{gap:8px}
.nr-detail-body{flex-direction:column}
.nr-detail-poster{width:100%}
.nr-detail-poster img{width:100%;max-width:200px}
.home-header-btns .insights-btn span{display:none}
.home-header-btns .insights-btn{padding:8px 10px}
}

/* ─── Mobile Grid Overrides ───────────────────────── */
@media(max-width:768px){
.mv-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
/* eBooks/audiobooks: match the compact movies grid on mobile (was collapsing to
   one giant column because the base minmax(180px) rule won over the dead 2-col rule). */
.ebooks-grid,.audiobooks-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
.games-platform-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
.ebooks-grid .ebook-card-info,.audiobooks-grid .ebook-card-info{padding:6px 8px 8px}
.ebooks-grid .ebook-card-title,.audiobooks-grid .ebook-card-title{font-size:12px}
.ebooks-grid .ebook-card-author,.audiobooks-grid .ebook-card-author{font-size:11px}
.ebooks-grid .ebook-card-meta,.audiobooks-grid .ebook-card-meta{font-size:10px}
.collections-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
.mv-player-container{margin-bottom:72px}
.collection-card-info{padding:6px 8px 8px}
.collection-card-title{font-size:12px}
.collection-card-count{font-size:11px;margin-bottom:4px}
.mv-stats-bar{display:none!important}
.mv-card-info{padding:6px 8px}
.mv-card-title{font-size:12px}
.mv-card-artist{font-size:10px}
.mv-card-meta{font-size:10px}
.songs-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
.song-card-info{padding:6px 8px}
.song-card-title{font-size:12px}
.song-card-artist{font-size:10px}
.song-card-meta{font-size:10px}
.album-hero{flex-direction:column;gap:16px}
.album-hero-art{width:100%;min-width:unset;height:200px;aspect-ratio:unset}
.album-hero-title{font-size:20px}
.genre-card-grid{grid-template-columns:repeat(2,1fr);gap:9px}
.genre-card-name{font-size:12px}
.genre-card-overlay{padding:28px 8px 8px}
}

/* ─── Scan Dialog ─────────────────────────────────── */
.scan-dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10002;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.scan-dialog{background:var(--bg-secondary);border-radius:var(--radius);padding:24px 28px;min-width:300px;max-width:420px;width:90vw;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.scan-dialog-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.scan-dialog-desc{font-size:13px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}
.scan-dialog-options{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.scan-dialog-option{gap:10px;font-size:14px;color:var(--text-primary);cursor:pointer;padding:8px 12px;border-radius:var(--radius-sm);transition:background .15s}
.scan-dialog-option:hover{background:var(--bg-hover)}
.scan-dialog-option input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.scan-dialog-icon{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.scan-dialog-buttons{display:flex;justify-content:flex-end;gap:10px}
.scan-dialog-cancel{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);padding:8px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}
.scan-dialog-cancel:hover{background:var(--bg-hover)}
.scan-dialog-start{background:var(--accent);color:#fff;padding:8px 24px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:background .15s}
.scan-dialog-start:hover{background:var(--accent-hover)}

/* ─── Global Scan Banner ──────────────────────────── */
.global-scan-banner{position:fixed;top:12px;right:12px;z-index:10003;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:280px;max-width:360px;animation:fadeIn .2s ease}
.global-scan-inner{gap:10px;padding:12px 16px}
.global-scan-text{flex:1;font-size:13px;font-weight:600;color:var(--text-primary)}
.global-scan-close{color:var(--text-muted);font-size:18px;padding:0 4px;line-height:1;transition:color .15s}
.global-scan-close:hover{color:var(--text-primary)}
.global-scan-spinner{width:18px;height:18px;border:2px solid var(--bg-active);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
.global-scan-check{width:18px;height:18px;flex-shrink:0;color:var(--success);font-size:16px;font-weight:700}
.global-scan-check::after{content:'\2713'}
@keyframes spin{to{transform:rotate(360deg)}}
.global-scan-details{padding:0 16px 12px;display:flex;flex-direction:column;gap:6px}
.global-scan-item{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);padding:2px 0}
.global-scan-item.scan-item-done{color:var(--success)}
.global-scan-item.scan-item-active{color:var(--text-primary)}

/* ─── Rating System ──────────────────────────────────── */
/* Interactive star picker */
.star-picker{display:flex;gap:6px;padding:4px 0;cursor:default}
.star-btn{font-size:26px;color:var(--text-muted);transition:color .1s;user-select:none;cursor:pointer;line-height:1}
.star-btn.filled,.star-btn.hovered{color:var(--warning)}
.star-btn:hover{color:var(--warning);transform:scale(1.1)}

/* Rating popup (positioned near 3-dot menu click) */
.rating-popup{position:fixed;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;min-width:230px;box-shadow:0 8px 32px rgba(0,0,0,.55);z-index:9999}
.rating-popup-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.rating-popup-avg{font-size:12px;color:var(--text-secondary);margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.rating-popup-remove{font-size:12px;color:var(--danger);cursor:pointer;margin-top:8px}
.rating-popup-remove:hover{text-decoration:underline}

/* Inline rating widget (in detail views) */
.rating-widget{display:flex;flex-direction:column;gap:8px}
.rating-widget-community{gap:6px;flex-wrap:wrap}
.rating-stars-display{display:flex;gap:1px;line-height:1}
.rating-widget-score{font-weight:700;color:var(--warning);font-size:15px}
.rating-widget-count{font-size:12px;color:var(--text-muted)}
.rating-widget-user{gap:8px;flex-wrap:wrap}
.rating-widget-label{font-size:12px;color:var(--text-muted);flex-shrink:0}
.rating-remove-link{font-size:11px;color:var(--danger);cursor:pointer;margin-left:4px}
.rating-remove-link:hover{text-decoration:underline}

/* Community rating badge on Best Rated cards */
.mv-community-rating{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.75);color:var(--warning);padding:2px 7px;border-radius:4px;font-size:11px;font-weight:700;backdrop-filter:blur(4px);pointer-events:none}

/* ─── Child User Settings Panel ────────────────────────── */
.child-settings-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-top:14px}
.child-settings-panel h4{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--text-primary)}
.child-settings-hint{font-size:12px;color:var(--text-muted);margin:0 0 12px}
.child-settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.child-setting-toggle{gap:8px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);font-size:13px;cursor:pointer;transition:background .15s}
.child-setting-toggle:hover{background:var(--bg-hover)}
.child-setting-toggle input[type="checkbox"]{accent-color:#22c55e;width:15px;height:15px;flex-shrink:0}
.child-settings-inline-cell{padding:0 !important;border-top:none !important}
.child-settings-inline-cell .child-settings-panel{border-radius:0;border-left:none;border-right:none;border-top:2px dashed var(--border);margin-top:0}
.viewing-hours-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:10px 0}
.viewing-hours-row label{gap:8px;font-size:13px;color:var(--text-secondary)}
.viewing-hours-row input[type="time"]{width:118px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;color:var(--text-primary);font-size:13px}

/* ─── Equalizer Panel ───────────────────────────────────── */
#eq-panel{position:fixed;bottom:calc(var(--player-height,80px) + 16px);left:50%;transform:translateX(-50%);width:min(780px,96vw);background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;box-shadow:0 -8px 32px rgba(0,0,0,.65);z-index:1100;overflow:hidden;display:flex;flex-direction:column}
.eq-header{gap:10px;padding:14px 18px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.eq-header-title{font-size:14px;font-weight:600;color:var(--text-primary);gap:7px;flex:1}
.eq-header-title svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eq-preset-select{background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:13px;padding:5px 10px;cursor:pointer;outline:none;margin-left:auto}
.eq-preset-select:focus{border-color:var(--accent)}
.eq-power-btn{border-radius:20px;font-size:12px;font-weight:600;padding:5px 14px;transition:background .2s,color .2s}
.eq-power-btn.on{background:rgba(77,139,245,.18);color:var(--accent)}
.eq-power-btn.off{background:rgba(231,76,60,.18);color:#e74c3c}
.eq-close-btn{color:var(--text-muted);font-size:20px;line-height:1;padding:2px 4px}
.eq-close-btn:hover{color:var(--text-primary)}
.eq-body{display:flex;gap:0;min-height:220px}
/* Left: macro sliders */
.eq-macros{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-right:1px solid var(--border);min-width:130px;flex-shrink:0;justify-content:center}
.eq-macro-row{gap:8px}
.eq-macro-label{font-size:11px;color:var(--text-muted);width:60px;flex-shrink:0;text-align:right}
.eq-macro-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-surface);border-radius:2px;outline:none;cursor:pointer;accent-color:var(--accent)}
.eq-macro-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-secondary)}
.eq-macro-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-secondary)}
/* Right: canvas + band sliders */
.eq-right{flex:1;display:flex;flex-direction:column;min-width:0}
.eq-canvas-wrap{position:relative;height:140px;background:var(--bg-primary);border-bottom:1px solid var(--border);flex-shrink:0}
#eq-canvas{width:100%;height:100%;display:block}
.eq-bands{display:flex;align-items:flex-end;padding:10px 12px 8px;gap:0;justify-content:space-around;flex:1}
.eq-band{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.eq-band-slider{appearance:none;writing-mode:vertical-lr;direction:rtl;width:28px;height:90px;background:transparent;outline:none;cursor:pointer;accent-color:var(--accent)}
.eq-band-slider::-webkit-slider-runnable-track{width:4px;background:var(--bg-surface);border-radius:2px}
.eq-band-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-secondary);cursor:pointer}
.eq-band-slider::-moz-range-track{width:4px;background:var(--bg-surface);border-radius:2px}
.eq-band-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-secondary);cursor:pointer}
.eq-band-db{font-size:10px;color:var(--text-muted);text-align:center;min-width:28px;line-height:1}
.eq-band-freq{font-size:9px;color:var(--text-muted);text-align:center;line-height:1;margin-top:2px}
/* EQ button active state */
#btn-eq.eq-active{color:var(--accent)}
/* Mobile: stack layout */
@media(max-width:580px){
  #eq-panel{width:98vw;bottom:214px}/* 56px nav + 150px player + 8px gap */
.eq-body{flex-direction:column}
.eq-macros{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;flex-wrap:wrap;min-width:0;gap:8px;padding:10px 12px;justify-content:flex-start}
.eq-macro-row{flex-direction:column;align-items:flex-start;gap:3px;width:calc(50% - 4px)}
.eq-macro-label{width:auto;text-align:left}
.eq-bands{padding:8px 6px;gap:0}
.eq-band-slider{height:60px}
.eq-canvas-wrap{height:100px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Night Club Mode
   ═══════════════════════════════════════════════════════════════════════════ */
body.nc-active{overflow:hidden}
body.nc-active #eq-panel{z-index:10001;bottom:80px}

/* Overlay container */
#nc-overlay{position:fixed;inset:0;background:#000;z-index:9999;display:flex;flex-direction:column;align-items:center;overflow:hidden}

/* Spotlight beams from the ceiling */
.nc-beams{position:absolute;top:0;left:0;right:0;height:88%;pointer-events:none;overflow:visible}
/* cone shape: ~18px opening at ceiling, full width at floor; mix-blend-mode:screen = additive coloured light */
.nc-beam{position:absolute;top:0;transform-origin:top center;mix-blend-mode:screen;clip-path:polygon(calc(50% - 9px) 0%,calc(50% + 9px) 0%,100% 100%,0% 100%)}

/* Beam 1 - Electric Blue */
.nc-beam-1{
  left:8%;width:260px;height:74vh;
  background:radial-gradient(ellipse 52% 100% at 50% 0%,rgba(40,110,255,.75) 0%,rgba(40,110,255,.36) 38%,transparent 72%);
  filter:blur(7px);
  animation:nc-sweep 9s ease-in-out infinite}

/* Beam 2 - Deep Red */
.nc-beam-2{
  left:40%;width:210px;height:67vh;
  background:radial-gradient(ellipse 52% 100% at 50% 0%,rgba(255,28,40,.75) 0%,rgba(255,28,40,.34) 38%,transparent 72%);
  filter:blur(7px);
  animation:nc-sweep 6.5s ease-in-out infinite;animation-delay:-2.2s}

/* Beam 3 - Emerald Green */
.nc-beam-3{
  left:70%;width:250px;height:78vh;
  background:radial-gradient(ellipse 52% 100% at 50% 0%,rgba(20,225,80,.75) 0%,rgba(20,225,80,.34) 38%,transparent 72%);
  filter:blur(7px);
  animation:nc-sweep 11s ease-in-out infinite;animation-delay:-5.8s}

@keyframes nc-sweep{0%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}100%{transform:rotate(-20deg)}}

/* Floor ambient glow - three coloured pools matching the beams */
#nc-floor{position:absolute;bottom:0;left:0;right:0;height:220px;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 32% 55% at 14% 100%,rgba(40,110,255,.18) 0%,transparent 100%),
    radial-gradient(ellipse 32% 55% at 50% 100%,rgba(255,28,40,.18) 0%,transparent 100%),
    radial-gradient(ellipse 32% 55% at 82% 100%,rgba(20,225,80,.18) 0%,transparent 100%)}

/* Rising particles */
#nc-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
.nc-particle{position:absolute;border-radius:50%;opacity:0;animation:nc-rise linear infinite}
@keyframes nc-rise{0%{transform:translateY(0) scale(1);opacity:.8}100%{transform:translateY(-95vh) scale(.2);opacity:0}}

/* Content column (art + info) */
#nc-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;flex:1;width:100%;padding:52px 20px 0;gap:18px}

/* Album art stack */
#nc-art-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
#nc-art-glow{position:absolute;top:-28px;left:-28px;right:-28px;bottom:0;border-radius:50%;background:radial-gradient(circle,rgba(77,139,245,.32) 0%,transparent 68%);animation:nc-glow-pulse 2.6s ease-in-out infinite;pointer-events:none}
@keyframes nc-glow-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}
#nc-art{width:220px;height:220px;border-radius:14px;object-fit:cover;display:none;box-shadow:0 0 52px rgba(77,139,245,.5),0 28px 72px rgba(0,0,0,.9);animation:nc-art-float 5s ease-in-out infinite}
#nc-art-placeholder{width:220px;height:220px;border-radius:14px;background:linear-gradient(135deg,#0d0d1a 0%,#1a0f2e 50%,#091e3a 100%);justify-content:center;font-size:82px;color:rgba(77,139,245,.22);box-shadow:0 0 52px rgba(77,139,245,.2),0 28px 72px rgba(0,0,0,.9);animation:nc-art-float 5s ease-in-out infinite}
#nc-art-reflect{width:220px;height:78px;border-radius:0 0 14px 14px;object-fit:cover;object-position:top;display:none;transform:scaleY(-1);opacity:.2;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 100%);margin-top:2px}
@keyframes nc-art-float{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-9px) rotate(.7deg)}}

/* Song info */
#nc-info{text-align:center;max-width:min(700px,90vw)}
#nc-title{font-size:clamp(15px,2.6vw,30px);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;text-shadow:0 0 28px rgba(77,139,245,.9),0 0 56px rgba(77,139,245,.4);animation:nc-title-shift 6s ease-in-out infinite;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nc-artist{font-size:clamp(10px,1.4vw,14px);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:6px}
@keyframes nc-title-shift{0%,100%{text-shadow:0 0 28px rgba(77,139,245,.9),0 0 56px rgba(77,139,245,.4)}50%{text-shadow:0 0 28px rgba(195,85,255,.95),0 0 56px rgba(195,85,255,.45)}}

/* ASCII dancer (bottom-right) */
#nc-dancer-wrap{position:absolute;right:3vw;bottom:234px;z-index:4}
#nc-dancer{font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.55;color:#00e5ff;text-shadow:0 0 10px #00e5ff,0 0 22px rgba(0,229,255,.5);white-space:pre;margin:0;animation:nc-dancer-hue 9s ease-in-out infinite;user-select:none}
@keyframes nc-dancer-hue{0%,100%{color:#00e5ff;text-shadow:0 0 10px #00e5ff,0 0 22px rgba(0,229,255,.5)}33%{color:#c355ff;text-shadow:0 0 10px #c355ff,0 0 22px rgba(195,85,255,.5)}66%{color:#7bffa0;text-shadow:0 0 10px #7bffa0,0 0 22px rgba(123,255,160,.5)}}

/* Frequency visualiser canvas */
#nc-canvas{position:absolute;bottom:64px;left:0;width:100%;height:156px;display:block;z-index:3}

/* Full-frame "Neon Trails" light-painting canvas (style 3 only) */
#nc-canvas-fx{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:1;pointer-events:none}
#nc-overlay.nc-fx-on #nc-canvas-fx{display:block}
/* When Neon Trails is on, clear the stage to pure black so the animation reads cleanly */
#nc-overlay.nc-fx-on .nc-beams,
#nc-overlay.nc-fx-on #nc-floor,
#nc-overlay.nc-fx-on #nc-particles,
#nc-overlay.nc-fx-on #nc-canvas,
#nc-overlay.nc-fx-on #nc-dancer-wrap{display:none}

/* Viz style selector dots */
#nc-viz-dots{position:absolute;bottom:228px;left:50%;transform:translateX(-50%);display:flex;gap:16px;z-index:5;pointer-events:auto}
.nc-viz-dot{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);transition:background .2s,transform .15s;padding:0;flex-shrink:0;cursor:pointer}
.nc-viz-dot:hover{background:rgba(255,255,255,.45);transform:scale(1.25)}
.nc-viz-dot.active{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.85)}
/* Viz style name flash label */
#nc-viz-label{position:absolute;bottom:266px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);pointer-events:none;z-index:6;opacity:0;transition:opacity .4s;white-space:nowrap;text-shadow:0 0 10px rgba(255,255,255,.5)}

/* Controls bar */
#nc-controls{position:absolute;bottom:0;left:0;right:0;height:64px;justify-content:center;gap:10px;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,transparent 100%);z-index:10;opacity:1}
.nc-ctrl-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:50%;width:38px;height:38px;font-size:14px;cursor:pointer;transition:background .2s,transform .12s;justify-content:center;flex-shrink:0;padding:0;line-height:1}
.nc-ctrl-btn:hover{background:rgba(77,139,245,.28);border-color:rgba(77,139,245,.5);transform:scale(1.12)}
#nc-btn-play{width:50px;height:50px;font-size:17px;background:var(--accent);border-color:var(--accent)}
#nc-btn-play:hover{background:var(--accent-hover);transform:scale(1.1)}
#nc-btn-exit{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.3)}
#nc-btn-exit:hover{background:rgba(231,76,60,.32)}
.nc-ctrl-sep{width:1px;height:20px;background:rgba(255,255,255,.1);flex-shrink:0}

/* Labels */
#nc-label{position:absolute;top:14px;left:18px;font-size:9px;letter-spacing:.38em;text-transform:uppercase;color:rgba(255,255,255,.16);z-index:10;pointer-events:none}
#nc-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.2);z-index:10;pointer-events:none;animation:nc-hint-fade 7s ease-in-out forwards;white-space:nowrap}
@keyframes nc-hint-fade{0%{opacity:0}8%{opacity:1}72%{opacity:1}100%{opacity:0}}

/* Night Club button in playlist actions */
.playlist-btn-nightclub{background:var(--accent);color:#fff}
.playlist-btn-nightclub:hover{opacity:.85}

/* Mobile: always show controls, hide dancer, smaller art */
@media(max-width:640px){
#nc-controls{opacity:1}
#nc-dancer-wrap{display:none}
#nc-art,#nc-art-placeholder{width:160px;height:160px}
#nc-art-placeholder{font-size:56px}
#nc-art-reflect{width:160px}
#nc-content{padding-top:36px;gap:12px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Go Big Mode - Full-Screen TV / Big-Screen Interface
   ═══════════════════════════════════════════════════════════════════════════ */

/* Topbar button - hidden on touch/mobile devices (floating button replaces it) */
.topbar-btn-gobig{position:relative}
.topbar-btn-gobig::after{content:'TV';position:absolute;top:-3px;right:-5px;font-size:7px;font-weight:800;letter-spacing:0;background:var(--accent);color:#fff;border-radius:2px;padding:1px 3px;line-height:1.4;pointer-events:none}
@media(pointer:coarse)and(max-width:899px){#btn-gobig{display:none!important}}

/* Root overlay */
#gb-overlay{position:fixed;inset:0;background:#080810;z-index:4000;overflow:hidden}

/* Top navigation bar */
#gb-topbar{position:absolute;top:0;left:0;right:0;height:64px;padding:0 4vw;gap:16px;z-index:20;background:linear-gradient(180deg,rgba(8,8,16,.98) 0%,transparent 100%);pointer-events:none}
#gb-topbar>*{pointer-events:auto}
#gb-logo{font-size:20px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.15)}
#gb-topbar-spacer{flex:1}
#gb-top-exit{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.75);border-radius:8px;padding:7px 18px;font-size:12px;letter-spacing:.1em;cursor:pointer;transition:background .2s,border-color .2s}
#gb-top-exit:hover{background:rgba(77,139,245,.18);border-color:var(--accent);color:#fff}

/* Scrollable inner container */
#gb-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
#gb-scroll::-webkit-scrollbar{width:5px}
#gb-scroll::-webkit-scrollbar-track{background:transparent}
#gb-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* ── Hero ──────────────────────────────────────────────────── */
#gb-hero{position:relative;width:100%;height:clamp(320px,52vh,520px);flex-shrink:0;overflow:hidden}
#gb-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 20%;background-color:#0d0d1a;transition:opacity .5s ease}
#gb-hero-bg.gb-bg-poster{background-position:right center;background-size:auto 100%}
#gb-hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,8,16,.96) 0%,rgba(8,8,16,.7) 45%,rgba(8,8,16,.15) 100%),linear-gradient(0deg,rgba(8,8,16,1) 0%,transparent 38%)}
#gb-hero-content{position:absolute;bottom:56px;left:5vw;max-width:46%}
.gb-hero-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(77,139,245,.45);border-radius:3px;padding:3px 10px;margin-bottom:14px}
#gb-hero-title{font-size:clamp(20px,3vw,50px);font-weight:800;line-height:1.08;color:#fff;margin:0 0 10px;text-shadow:0 2px 16px rgba(0,0,0,.8)}
#gb-hero-meta{font-size:clamp(10px,1vw,13px);color:rgba(255,255,255,.52);letter-spacing:.04em;margin-bottom:10px}
#gb-hero-overview{font-size:clamp(11px,1vw,14px);color:rgba(255,255,255,.68);line-height:1.65;margin:0 0 22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#gb-hero-btns{display:flex;gap:12px}
.gb-hero-btn{padding:10px 26px;border-radius:6px;font-size:clamp(11px,1.1vw,14px);font-weight:600;transition:transform .15s,background .2s;letter-spacing:.03em}
.gb-hero-btn:hover{transform:scale(1.04)}
.gb-hero-btn-primary{background:var(--accent);color:#fff}.gb-hero-btn-primary:hover{background:var(--accent-hover)}
.gb-hero-btn-secondary{background:rgba(255,255,255,.11);color:#fff;border:1px solid rgba(255,255,255,.2)}.gb-hero-btn-secondary:hover{background:rgba(255,255,255,.2)}
#gb-hero-dots{position:absolute;bottom:22px;left:5vw;display:flex;gap:6px;align-items:center}
.gb-hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:background .3s,width .3s,border-radius .3s;flex-shrink:0}
.gb-hero-dot.active{background:var(--accent);width:20px;border-radius:3px}

/* ── Content rows ──────────────────────────────────────────── */
#gb-rows{padding:20px 0 0}
.gb-row{margin-bottom:54px}
.gb-row-header{display:flex;align-items:baseline;gap:12px;padding:0 5vw;margin-bottom:18px}
.gb-row-title{font-size:clamp(17px,1.7vw,26px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff}
.gb-row-count{font-size:13px;color:rgba(255,255,255,.3)}
.gb-row-track{position:relative}
.gb-row-scroll{display:flex;gap:20px;overflow-x:auto;padding:8px 5vw 22px;scroll-behavior:smooth;scrollbar-width:none}
.gb-row-scroll::-webkit-scrollbar{display:none}

/* Row nav arrows */
.gb-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(8,8,16,.88);border:1px solid rgba(255,255,255,.18);color:#fff;width:48px;height:110px;border-radius:4px;cursor:pointer;z-index:5;opacity:0;transition:opacity .22s,background .2s;font-size:22px;justify-content:center}
.gb-row-track:hover .gb-nav-btn{opacity:1}
.gb-nav-btn:hover{background:rgba(77,139,245,.32)}
.gb-nav-left{left:0;border-radius:0 6px 6px 0}
.gb-nav-right{right:0;border-radius:6px 0 0 6px}

/* ── Movie / TV poster card ────────────────────────────────── */
.gb-card-movie{flex-shrink:0;width:clamp(190px,17vw,280px);cursor:pointer;border-radius:10px;overflow:hidden;background:#0f0f1e;transition:transform .22s,box-shadow .22s;position:relative}
.gb-card-movie:hover{transform:scale(1.06) translateY(-7px);box-shadow:0 24px 56px rgba(0,0,0,.85);z-index:5}
.gb-card-movie:focus-visible{outline:2px solid var(--accent);outline-offset:2px;transform:scale(1.06) translateY(-7px)}
/* Keyboard focus ring for Go Big navigation */
.gb-focused{outline:3px solid var(--accent)!important;outline-offset:3px;transform:scale(1.06) translateY(-7px);box-shadow:0 24px 56px rgba(0,0,0,.85);z-index:5}
.gb-focused.gb-card-mv{transform:scale(1.05) translateY(-6px)}
.gb-hero-btn.gb-focused{transform:scale(1.06);outline:3px solid var(--accent)!important;outline-offset:3px}
.gb-poster-wrap{position:relative;overflow:hidden}
.gb-poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#14142a}
.gb-poster-ph{width:100%;aspect-ratio:2/3;background:linear-gradient(135deg,#14142a,#0f3060);justify-content:center;color:rgba(77,139,245,.3);font-size:clamp(36px,4.5vw,62px)}
.gb-hover-play{position:absolute;inset:0;background:rgba(0,0,0,.45);justify-content:center;font-size:52px;color:#fff;opacity:0;transition:opacity .2s}
.gb-card-movie:hover .gb-hover-play,.gb-card-movie.gb-focused .gb-hover-play{opacity:1}
.gb-card-label{padding:12px 11px 11px;background:#0f0f1e}
.gb-card-label-title{font-size:clamp(12px,1.1vw,16px);font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-card-label-sub{font-size:clamp(10px,.9vw,14px);color:rgba(255,255,255,.38);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Music video landscape card ────────────────────────────── */
.gb-card-mv{flex-shrink:0;width:clamp(300px,26vw,430px);cursor:pointer;border-radius:10px;overflow:hidden;background:#0f0f1e;transition:transform .22s,box-shadow .22s;position:relative}
.gb-card-mv:hover{transform:scale(1.05) translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.85);z-index:5}
.gb-thumb-wrap{position:relative;overflow:hidden}
.gb-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#14142a}
.gb-thumb-ph{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#1a1030,#0a1e3a);justify-content:center;color:rgba(77,139,245,.28);font-size:clamp(32px,4vw,54px)}
.gb-card-mv:hover .gb-hover-play,.gb-card-mv.gb-focused .gb-hover-play{opacity:1}

/* ── Radio / Internet TV square card ───────────────────────── */
.gb-card-radio{flex-shrink:0;width:clamp(160px,14vw,224px);cursor:pointer;border-radius:12px;overflow:hidden;background:#101018;border:1px solid rgba(255,255,255,.07);transition:transform .22s,box-shadow .22s,border-color .22s;position:relative}
.gb-card-radio:hover{transform:scale(1.07) translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.75);border-color:rgba(77,139,245,.4)}
.gb-radio-logo{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;padding:18px;box-sizing:border-box;background:#101018}
.gb-radio-ph{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#101018,#1a1a2e);justify-content:center;color:rgba(77,139,245,.28);font-size:clamp(32px,4vw,56px)}
.gb-radio-name{padding:10px 12px 14px;font-size:clamp(11px,1vw,15px);font-weight:600;text-align:center;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Footer / exit button ──────────────────────────────────── */
#gb-footer{padding:28px 0 44px;display:flex;justify-content:center}
#gb-exit-btn{gap:10px;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.28);color:rgba(255,255,255,.55);border-radius:50px;padding:13px 40px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
#gb-exit-btn:hover{background:rgba(231,76,60,.26);border-color:rgba(231,76,60,.55);color:#fff}

/* Loading state */
#gb-loading{position:absolute;inset:0;justify-content:center;background:#080810;z-index:10}
.gb-loading-dots{display:flex;gap:8px}
.gb-loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.3;animation:gb-dot-pulse 1.4s ease-in-out infinite}
.gb-loading-dots span:nth-child(2){animation-delay:.2s}
.gb-loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes gb-dot-pulse{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ─── Go Big Detail Panel ──────────────────────────────────────────── */
#gb-detail{position:absolute;inset:0;overflow-y:auto;z-index:5;display:none}
#gb-detail::-webkit-scrollbar{width:5px}
#gb-detail::-webkit-scrollbar-track{background:transparent}
#gb-detail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.gbd-loading{position:absolute;inset:0;justify-content:center}
.gbd-wrap{min-height:100%;position:relative}

.gbd-backdrop{position:absolute;inset:0;background-size:cover;background-position:center 15%;pointer-events:none;z-index:0}
.gbd-backdrop-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,16,.5) 0%,rgba(8,8,16,.78) 45%,rgba(8,8,16,1) 82%),linear-gradient(90deg,rgba(8,8,16,.88) 0%,rgba(8,8,16,.1) 55%)}

.gbd-inner{position:relative;z-index:1;padding:80px 5vw 60px;max-width:1400px;margin:0 auto}

.gbd-toprow{margin-bottom:36px}
.gbd-back-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);border-radius:8px;padding:9px 20px;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.gbd-back-btn:hover,.gbd-back-btn.gb-focused{background:rgba(77,139,245,.2);border-color:var(--accent);color:#fff;outline:2px solid var(--accent);outline-offset:2px}

.gbd-hero{display:flex;gap:clamp(24px,3.5vw,52px);align-items:flex-start;margin-bottom:52px}
.gbd-poster{width:clamp(150px,15vw,250px);flex-shrink:0;border-radius:12px;box-shadow:0 28px 72px rgba(0,0,0,.8);aspect-ratio:2/3;object-fit:cover}

.gbd-meta-col{flex:1;min-width:0;padding-top:6px}
.gbd-title{font-size:clamp(26px,3.8vw,58px);font-weight:800;color:#fff;margin:0 0 12px;line-height:1.07;text-shadow:0 2px 24px rgba(0,0,0,.65)}
.gbd-sub{font-size:clamp(12px,1.1vw,15px);color:rgba(255,255,255,.48);letter-spacing:.05em;margin-bottom:16px}

.gbd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.gbd-chip{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:4px 11px;font-size:12px;color:rgba(255,255,255,.78);font-weight:500}
.gbd-chip-imdb{background:rgba(245,197,24,.12);border-color:rgba(245,197,24,.3);color:#f5c518}
.gbd-chip-genre{background:rgba(77,139,245,.1);border-color:rgba(77,139,245,.24);color:rgba(155,185,255,.9)}

.gbd-overview{font-size:clamp(13px,1.15vw,16px);color:rgba(255,255,255,.7);line-height:1.72;margin:0 0 20px;max-width:660px}
.gbd-director{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:30px}
.gbd-director strong{color:rgba(255,255,255,.72)}

.gbd-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.gbd-play-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border-radius:9px;padding:15px 40px;font-size:clamp(15px,1.3vw,18px);font-weight:700;letter-spacing:.03em;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 6px 28px rgba(77,139,245,.38)}
.gbd-play-btn:hover,.gbd-play-btn.gb-focused{background:var(--accent-hover);transform:scale(1.04);box-shadow:0 12px 36px rgba(77,139,245,.52);outline:3px solid #fff;outline-offset:3px}
.gbd-play-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;outline:none}

/* Cast */
.gbd-cast-section{margin-bottom:44px}
.gbd-section-title{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:18px}
.gbd-cast-strip{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.gbd-cast-strip::-webkit-scrollbar{display:none}
.gbd-cast-item{flex-shrink:0;width:clamp(76px,7.5vw,108px);text-align:center}
.gbd-cast-photo{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.07);margin-bottom:8px}
.gbd-cast-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gbd-cast-ph{width:100%;height:100%;background:linear-gradient(135deg,#14142a,#0f3060)}
.gbd-cast-name{font-size:clamp(10px,.9vw,13px);color:rgba(255,255,255,.82);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbd-cast-char{font-size:clamp(9px,.8vw,11px);color:rgba(255,255,255,.36);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.gbd-cast-eps{font-size:clamp(8px,.75vw,10px);color:rgba(255,255,255,.25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}

/* In-overlay player */
.gbd-player-section{margin-top:8px;margin-bottom:48px;border-radius:12px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.85);background:#000}
.gbd-player{width:100%;aspect-ratio:16/9;display:block;background:#000;max-height:72vh}
.gbd-tc-info{padding:8px 14px;background:rgba(255,255,255,.04);font-size:12px;color:var(--text-secondary)}
.gbd-player-back-btn{gap:6px;padding:8px 16px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);font-size:13px;font-weight:500;width:100%;text-align:left;letter-spacing:.02em;transition:background .15s,color .15s}
.gbd-player-back-btn:hover{background:rgba(255,255,255,.13);color:#fff}

/* Seasons & Episodes */
.gbd-seasons{margin-bottom:40px}
.gbd-season{margin-bottom:32px}
.gbd-season-hdr{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.gbd-season-title{font-size:clamp(16px,1.6vw,22px);font-weight:700;color:#fff;letter-spacing:.03em}
.gbd-season-count{font-size:13px;color:rgba(255,255,255,.32)}
.gbd-ep-list{display:flex;flex-direction:column;gap:3px}
.gbd-ep-row{gap:18px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.gbd-ep-row:hover{background:rgba(255,255,255,.07)}
.gbd-ep-row.gbd-ep-row-playing{background:rgba(77,139,245,.1);border-color:rgba(77,139,245,.22)}
.gbd-ep-row.gb-focused{background:rgba(77,139,245,.18);border-color:var(--accent);outline:none}
.gbd-ep-thumb{position:relative;width:clamp(120px,12vw,196px);flex-shrink:0;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06)}
.gbd-ep-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gbd-ep-thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);justify-content:center;font-size:26px;color:#fff;opacity:0;transition:opacity .2s}
.gbd-ep-row:hover .gbd-ep-thumb-overlay{opacity:1}
.gbd-ep-info{flex:1;min-width:0}
.gbd-ep-title{font-size:clamp(13px,1.2vw,16px);font-weight:600;color:rgba(255,255,255,.9);margin-bottom:5px;gap:10px}
.gbd-ep-num{color:var(--accent);font-size:.88em;flex-shrink:0;font-weight:700}
.gbd-ep-desc{font-size:clamp(11px,1vw,13px);color:rgba(255,255,255,.42);line-height:1.55;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gbd-ep-meta{font-size:12px;color:rgba(255,255,255,.32)}
.gbd-ep-now-playing{flex-shrink:0;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.06em;display:none;align-items:center;gap:5px;white-space:nowrap}

/* Music Video detail variant */
.gbd-backdrop-mv{background-position:center center;filter:blur(2px) brightness(.6);transform:scale(1.04)}
.gbd-mv-thumb{width:clamp(200px,22vw,340px);flex-shrink:0;border-radius:10px;box-shadow:0 20px 56px rgba(0,0,0,.75);aspect-ratio:16/9;object-fit:cover}
.gbd-mv-label{font-size:10px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* Mobile */
@media(max-width:640px){
#gb-hero-content{max-width:88%;bottom:36px}
#gb-hero{height:44vh}
.gb-hero-btn{padding:8px 18px}
.gbd-hero{flex-direction:column;gap:20px}
.gbd-poster{width:130px}
.gbd-inner{padding:68px 4vw 40px}
}

/* ── Go Big: mobile floating "Start Go Big" button ──────────────── */
#gb-mobile-start{position:fixed;bottom:80px;right:16px;z-index:9000;gap:8px;padding:12px 20px;background:var(--accent);color:#fff;border-radius:50px;font-size:15px;font-weight:700;box-shadow:0 4px 24px rgba(0,0,0,.55);letter-spacing:.03em;font-family:inherit;transition:opacity .6s ease}
#gb-mobile-start.gb-btn-hidden{opacity:0;pointer-events:none}
#gb-mobile-start:active{opacity:.8}
#gb-mobile-start:disabled{opacity:.55;cursor:default}

/* ── Go Big Remote Overlay (mobile) ─────────────────────────────── */
#gb-remote-overlay{position:fixed;inset:0;z-index:9999;background:#0a0a0f;display:flex;flex-direction:column;color:#fff;overflow:hidden;font-family:inherit}
#gbr-header{justify-content:space-between;padding:14px 18px 10px;background:#12121a;border-bottom:1px solid #1e1e2e;flex-shrink:0}
#gbr-logo{font-size:18px;font-weight:700;letter-spacing:.02em}
#gbr-close-btn{color:#888;font-size:18px;padding:4px 10px;border-radius:6px;transition:color .2s;line-height:1}
#gbr-close-btn:hover{color:#fff}
#gbr-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 14px;background:#0e0e18;border-bottom:1px solid #1e1e2e;flex-shrink:0}
.gbr-ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;background:#1a1a2a;border:1px solid #2a2a3e;border-radius:10px;color:#ccc;cursor:pointer;font-size:11px;transition:background .18s,color .18s;-webkit-tap-highlight-color:transparent}
.gbr-ctrl-btn:active{background:#2a2a40;color:#fff;transform:scale(.96)}
.gbr-ctrl-btn svg{width:20px;height:20px}
.gbr-ctrl-exit{color:#ef4444;border-color:#3a1a1a}
.gbr-ctrl-exit:active{background:#3a1a1a}
#gbr-tabs{display:flex;gap:6px;padding:10px 14px 0;flex-shrink:0;overflow-x:auto}
.gbr-tab{padding:7px 16px;background:none;border:1px solid #2a2a3e;border-radius:20px;color:#888;cursor:pointer;font-size:13px;transition:all .18s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.gbr-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
#gbr-list{flex:1;overflow-y:auto;padding:10px 14px 24px}
.gbr-item{gap:12px;padding:10px 10px;border-radius:10px;cursor:pointer;transition:background .15s;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.gbr-item:active{background:#1e1e30;border-color:#2a2a40}
.gbr-thumb{width:56px;height:80px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#1a1a2a}
.gbr-info{flex:1;min-width:0}
.gbr-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eee}
.gbr-meta{font-size:12px;color:#666;margin-top:3px}
.gbr-play-icon{width:18px;height:18px;color:#4d8bf5;flex-shrink:0;opacity:.6}
.gbr-empty{text-align:center;padding:40px 20px;color:#444;font-size:14px}
.gbr-thumb-ph{width:56px;height:80px;background:#1a1a2a;border-radius:6px;flex-shrink:0;justify-content:center;font-size:22px;color:#333}

/* Remote - series episode list */
.gbr-series-header{gap:10px;padding:8px 0 12px;border-bottom:1px solid #1e1e2e;margin-bottom:6px;min-width:0}
.gbr-back-series{gap:4px;background:none;border:1px solid #2a2a3e;border-radius:20px;color:#aaa;cursor:pointer;font-size:12px;padding:5px 12px;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.gbr-back-series:active{background:#1e1e30;color:#fff}
.gbr-series-title{font-size:14px;font-weight:600;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gbr-season-hdr{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;padding:10px 0 5px;gap:8px}
.gbr-season-count{font-weight:400;color:#555;text-transform:none;letter-spacing:0;font-size:11px}
.gbr-ep-item{gap:10px;padding:7px 6px;border-radius:8px;cursor:pointer;border:1px solid transparent;-webkit-tap-highlight-color:transparent;transition:background .15s}
.gbr-ep-item:active{background:#1e1e30;border-color:#2a2a40}
.gbr-ep-thumb{width:80px;height:46px;object-fit:cover;border-radius:5px;flex-shrink:0;background:#1a1a2a}
.gbr-ep-thumb-ph{width:80px;height:46px;background:#1a1a2a;border-radius:5px;flex-shrink:0;justify-content:center;font-size:18px;color:#333}
.gbr-ep-info{flex:1;min-width:0}
.gbr-ep-num{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.04em;margin-bottom:2px}
.gbr-ep-title{font-size:13px;font-weight:500;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbr-ep-meta{font-size:11px;color:#555;margin-top:2px}
.gbr-loading-eps{justify-content:center;padding:36px}

/* Remote - playlists tab */
.gbr-thumb-pl{font-size:26px;width:56px;height:56px;background:#0d1a2a;border-radius:8px;border:1px solid #1e3550;flex-shrink:0}

/* Go Big - playlist card art */
.gb-card-playlist .gb-pl-art{width:100%;aspect-ratio:1;background:linear-gradient(145deg,#0d1a2a,#0a1525);justify-content:center;border-radius:6px 6px 0 0}
.gb-card-playlist .gb-pl-art svg{width:48px;height:48px;color:#4d8bf5;opacity:.7}

/* CSS fake-fullscreen (used by mobile remote - requestFullscreen needs user gesture) */
#gbd-player-section.gb-fake-fs{position:fixed!important;inset:0!important;z-index:99998!important;background:#000!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column}
#gbd-player-section.gb-fake-fs .gbd-player{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;aspect-ratio:unset!important;object-fit:contain!important}
/* Back button in fake-fs: compact floating badge top-left, hidden with the rest of the UI */
#gbd-player-section.gb-fake-fs .gbd-player-back-btn{position:absolute!important;top:14px!important;left:14px!important;width:auto!important;border-radius:6px!important;background:rgba(0,0,0,.6)!important;z-index:1}
.gb-fake-fs-exit{position:fixed;top:16px;right:16px;z-index:99999;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:16px;justify-content:center;transition:background .2s,opacity .35s}
.gb-fake-fs-exit:hover{background:rgba(255,255,255,.15)}

/* Black out the overlay background and hide scrollbar when fake-fs is active */
#gb-overlay.gb-overlay-fs{background:#000!important;overflow:hidden!important}
/* Hide overlay chrome while fake-fs is active; reveal on mouse move */
.gb-overlay-fs #gb-topbar{opacity:0!important;pointer-events:none!important;transition:opacity .35s}
.gb-overlay-fs.gb-overlay-fs-hover #gb-topbar{opacity:1!important;pointer-events:none!important}
.gb-overlay-fs #gbd-tc-info{opacity:0!important;max-height:0!important;overflow:hidden!important;padding:0!important;transition:opacity .35s,max-height .35s,padding .35s}
.gb-overlay-fs.gb-overlay-fs-hover #gbd-tc-info{opacity:1!important;max-height:60px!important;padding:8px 14px!important}
.gb-overlay-fs #gbd-player-section .gbd-player-back-btn{opacity:0!important;pointer-events:none!important;transition:opacity .35s}
.gb-overlay-fs.gb-overlay-fs-hover #gbd-player-section .gbd-player-back-btn{opacity:1!important;pointer-events:auto!important}
.gb-overlay-fs .gb-fake-fs-exit{opacity:0;transition:background .2s,opacity .35s}
.gb-overlay-fs.gb-overlay-fs-hover .gb-fake-fs-exit{opacity:1}
/* ─── Go Big Music Player ──────────── */
#gb-music-player{position:absolute;inset:0;z-index:16;justify-content:center;overflow:hidden}
#gbm-bg{position:absolute;inset:-8px;background-size:cover;background-position:center;filter:blur(4px) brightness(.78) saturate(1.6);transform:scale(1.01)}
#gbm-bg-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.38) 100%)}
.gbm-close-btn{position:absolute;top:20px;right:24px;z-index:2;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:16px;width:38px;height:38px;border-radius:50%;transition:background .2s;justify-content:center}
.gbm-close-btn:hover{background:rgba(255,255,255,.22);color:#fff}
#gbm-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:820px;padding:0 48px}
.gbm-label{font-size:13px;font-weight:700;letter-spacing:4px;color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:32px}
#gbm-art-wrap{width:min(420px,55vw);height:min(420px,55vw);margin-bottom:36px;border-radius:18px;overflow:hidden;box-shadow:0 32px 90px rgba(0,0,0,.75)}
#gbm-art{width:100%;height:100%;object-fit:cover;display:block}
#gbm-art-ph{width:100%;height:100%;background:rgba(255,255,255,.06);justify-content:center;color:rgba(255,255,255,.15)}
#gbm-title{font-size:clamp(20px,3vw,38px);font-weight:700;color:#fff;text-align:center;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.25}
#gbm-meta{font-size:17px;color:rgba(255,255,255,.42);text-align:center;margin-bottom:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#gbm-track-actions{justify-content:center;gap:28px;margin-bottom:28px}
.gbm-action-btn{color:rgba(255,255,255,.45);width:48px;height:48px;border-radius:50%;justify-content:center;transition:color .18s,background .18s}
.gbm-action-btn:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.1)}
.gbm-action-btn.gbm-btn-active{color:#22c55e}
.gbm-quality-btn-el{width:auto;height:auto;border-radius:4px;padding:4px 9px;font-size:11px;font-weight:700;letter-spacing:.5px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
#gbm-playlist-dropdown{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#1e1e1e;border:1px solid rgba(255,255,255,.12);border-radius:10px;min-width:200px;max-height:260px;overflow-y:auto;z-index:10;display:none;box-shadow:0 8px 32px rgba(0,0,0,.6)}
#gbm-playlist-dropdown.open{display:block}
#gbm-playlist-dropdown .pl-dropdown-title{padding:10px 14px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.35)}
#gbm-playlist-dropdown .pl-dropdown-item{padding:9px 14px;font-size:13px;color:rgba(255,255,255,.8);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gbm-playlist-dropdown .pl-dropdown-item:hover{background:rgba(34,197,94,.15);color:#22c55e}
#gbm-playlist-dropdown .pl-dropdown-item.pl-added{color:#22c55e;background:rgba(34,197,94,.12);pointer-events:none}
#gbm-playlist-dropdown .pl-dropdown-empty{padding:12px 14px;font-size:12px;color:rgba(255,255,255,.3);text-align:center}
#gbm-progress-wrap{width:100%;margin-bottom:32px}
#gbm-bar{width:100%;height:40px;position:relative;cursor:pointer}
#gbm-track{position:absolute;inset:0;margin:auto;height:8px;background:rgba(255,255,255,.18);border-radius:4px}
#gbm-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:8px;background:#22c55e;border-radius:4px;width:0%;pointer-events:none}
#gbm-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:4px;height:32px;background:#22c55e;border-radius:2px;left:0%;pointer-events:none;box-shadow:0 0 8px rgba(34,197,94,.7)}
#gbm-times{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.32);margin-top:6px}
#gbm-controls{justify-content:center;gap:32px;margin-bottom:28px}
#gbm-shuffle-btn,#gbm-repeat-btn{color:rgba(255,255,255,.4);width:60px;height:60px;border-radius:50%;justify-content:center;transition:color .18s,background .18s;position:relative}
#gbm-shuffle-btn:hover,#gbm-repeat-btn:hover{color:rgba(255,255,255,.75);background:rgba(255,255,255,.08)}
#gbm-shuffle-btn.gbm-btn-active,#gbm-repeat-btn.gbm-btn-active{color:#22c55e}
#gbm-prev-btn,#gbm-next-btn{color:rgba(255,255,255,.65);width:68px;height:68px;border-radius:50%;justify-content:center;transition:color .18s,background .18s}
#gbm-prev-btn:hover,#gbm-next-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
#gbm-play-btn{background:#22c55e;color:#000;width:96px;height:96px;border-radius:50%;justify-content:center;transition:transform .15s,background .18s;box-shadow:0 6px 32px rgba(34,197,94,.5)}
#gbm-play-btn:hover{transform:scale(1.08);background:#16a34a}
#gbm-next-info{font-size:15px;color:rgba(255,255,255,.28);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ─── Go Big Search ──────────── */
#gb-search-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.75);border-radius:8px;padding:7px 16px;font-size:12px;letter-spacing:.08em;cursor:pointer;transition:background .2s,border-color .2s}
#gb-search-btn:hover{background:rgba(77,139,245,.18);border-color:var(--accent);color:#fff}
#gb-search{position:absolute;inset:0;background:rgba(8,8,16,.97);z-index:15;display:flex;flex-direction:column;padding-top:64px}
.gb-search-bar{gap:14px;padding:18px 4vw;border-bottom:1px solid rgba(255,255,255,.07)}
#gb-search-input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:22px;padding:12px 18px;border-radius:10px;outline:none;transition:border-color .2s,background .2s;min-width:0}
#gb-search-input:focus{border-color:var(--accent);background:rgba(255,255,255,.1)}
#gb-search-input::placeholder{color:rgba(255,255,255,.25)}
#gb-search-input::-webkit-search-cancel-button{display:none}
.gb-search-close-btn{color:rgba(255,255,255,.4);font-size:20px;padding:8px 10px;border-radius:6px;transition:color .2s,background .2s;flex-shrink:0}
.gb-search-close-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
#gb-search-results{flex:1;overflow-y:auto;padding:28px 4vw 64px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.gbs-section{margin-bottom:36px}
.gbs-section-title{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.gbs-grid{display:flex;flex-wrap:wrap;gap:12px}
/* Video poster card */
.gbs-card-video{width:clamp(110px,9vw,175px);cursor:pointer;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05);transition:transform .18s,box-shadow .18s;flex-shrink:0}
.gbs-card-video:hover,.gbs-card-video:focus{transform:scale(1.06);box-shadow:0 0 0 2px var(--accent);outline:none}
.gbs-poster{aspect-ratio:2/3;background:#18181f;overflow:hidden}
.gbs-poster img{width:100%;height:100%;object-fit:cover}
.gbs-poster-placeholder{width:100%;height:100%;justify-content:center;font-size:30px;color:rgba(255,255,255,.12)}
/* MV landscape card */
.gbs-card-mv{width:clamp(170px,14vw,250px);cursor:pointer;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05);transition:transform .18s,box-shadow .18s;flex-shrink:0}
.gbs-card-mv:hover,.gbs-card-mv:focus{transform:scale(1.06);box-shadow:0 0 0 2px var(--accent);outline:none}
.gbs-thumb{aspect-ratio:16/9;background:#18181f;overflow:hidden}
.gbs-thumb img{width:100%;height:100%;object-fit:cover}
.gbs-thumb-placeholder{width:100%;height:100%;justify-content:center;font-size:26px;color:rgba(255,255,255,.12)}
/* Shared card label */
.gbs-card-video .gbs-label,.gbs-card-mv .gbs-label{padding:6px 8px 3px;font-size:11px;font-weight:600;color:#fff;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gbs-card-video .gbs-sublabel,.gbs-card-mv .gbs-sublabel{padding:0 8px 7px;font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Track row */
.gbs-track-row{gap:14px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s}
.gbs-track-row:hover,.gbs-track-row:focus{background:rgba(255,255,255,.08);outline:none}
.gbs-track-row.gbs-track-playing{background:rgba(34,197,94,.1);border-left:2px solid #22c55e;padding-left:10px}
.gbs-track-art-placeholder{width:42px;height:42px;border-radius:6px;background:#18181f;justify-content:center;font-size:20px;color:rgba(255,255,255,.2);flex-shrink:0}
.gbs-track-title{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbs-track-sub{font-size:11px;color:rgba(255,255,255,.38);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.gbs-track-dur{font-size:11px;color:rgba(255,255,255,.28);flex-shrink:0;margin-left:auto;padding-left:12px}
/* Person card (artist / actor) */
.gbs-card-person{width:clamp(88px,7vw,128px);cursor:pointer;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05);transition:transform .18s,box-shadow .18s;text-align:center;flex-shrink:0}
.gbs-card-person:hover,.gbs-card-person:focus{transform:scale(1.06);box-shadow:0 0 0 2px var(--accent);outline:none}
.gbs-person-img{aspect-ratio:1/1;background:#18181f;overflow:hidden}
.gbs-person-img img{width:100%;height:100%;object-fit:cover}
.gbs-person-placeholder{width:100%;height:100%;justify-content:center;font-size:26px;color:rgba(255,255,255,.12)}
.gbs-card-person .gbs-label{padding:6px 6px 3px;font-size:10px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbs-card-person .gbs-sublabel{padding:0 6px 6px;font-size:10px;color:rgba(255,255,255,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Empty / searching state */
.gbs-empty{color:rgba(255,255,255,.25);font-size:15px;text-align:center;padding:70px 0}
.gbs-searching{display:flex;justify-content:center;padding:70px 0}
/* ─── Genre / Auto-generated Playlists ──────────── */
.gp-section-header{gap:12px;margin:28px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border);font-size:15px;font-weight:600;color:var(--text-primary)}
.gp-section-header button{margin-left:auto}
/* Generator panel */
.agp-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px 16px;margin-bottom:20px}
.agp-panel-hint{font-size:12px;color:var(--text-secondary);margin:0 0 14px}
.agp-criteria-group-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.agp-criteria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
@media(max-width:680px){.agp-criteria-grid{grid-template-columns:repeat(2,1fr)}}
.agp-criteria-card{border:1.5px solid var(--border);border-radius:var(--radius);padding:8px 10px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s,opacity .15s;gap:8px;opacity:.55}
.agp-criteria-card:hover{border-color:var(--accent);opacity:.8}
.agp-criteria-card.agp-selected{border-color:var(--accent);background:var(--accent-dim);opacity:1}
.agp-criteria-icon{flex-shrink:0;color:var(--text-secondary)}
.agp-criteria-card.agp-selected .agp-criteria-icon{color:var(--accent)}
.agp-criteria-name{font-size:12px;font-weight:600;color:var(--text-primary);flex:1}
.agp-criteria-desc{display:none}
.agp-check{width:16px;height:16px;border:2px solid var(--border);border-radius:3px;flex-shrink:0;justify-content:center;transition:background .15s,border-color .15s}
.agp-criteria-card.agp-selected .agp-check{background:var(--accent);border-color:var(--accent)}
.agp-check svg{display:none}
.agp-criteria-card.agp-selected .agp-check svg{display:block}
.agp-panel-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:4px;align-items:center}
.agp-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius);font-size:13px;font-weight:500;transition:background .18s,opacity .18s;white-space:nowrap;line-height:1.4}
.agp-btn:hover{opacity:.85}
.agp-btn-cancel{background:var(--bg-hover);color:var(--text-secondary)}
.agp-btn-cancel:hover{background:var(--bg-active);color:var(--text-primary);opacity:1}
.agp-btn-primary{background:var(--accent);color:#fff}
.agp-btn-primary:hover{background:var(--accent-hover);opacity:1}
.gp-section-header .agp-btn{padding:6px 14px;font-size:12px}
.agp-decade-cover{justify-content:center;width:100%;height:100%;font-size:22px;font-weight:800;color:var(--text-secondary);letter-spacing:-0.5px}

/* ── Server Resource Monitor ─────────────────────────────────────────── */
.metrics-charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.metrics-chart-card{background:var(--bg-primary);border-radius:calc(var(--radius) - 2px);padding:12px 12px 8px;border:1px solid rgba(255,255,255,.06)}
.metrics-chart-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;gap:8px}
.metrics-chart-title-group{display:flex;flex-direction:column;gap:3px}
.metrics-chart-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.metrics-legend{gap:6px;font-size:9px;color:var(--text-secondary)}
.metrics-legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}
.metrics-badge-group{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.metrics-badge{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.metrics-canvas{display:block;width:100%;height:110px;border-radius:4px}
@media(max-width:640px){.metrics-canvas{height:90px}}

/* ── Welcome Modal ──────────────────────────────────────────────── */
.welcome-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px}
.welcome-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:32px 28px 24px;max-width:520px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.welcome-modal-header{text-align:center;margin-bottom:24px}
.welcome-modal-logo{width:52px;height:52px;margin:0 auto 12px;background:var(--accent-dim);border-radius:12px;justify-content:center}
.welcome-modal-title{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.welcome-modal-version{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-dim);border-radius:20px;padding:2px 10px;letter-spacing:.04em}
.welcome-modal-divider{border:none;border-top:1px solid var(--border);margin:20px 0}
.welcome-modal-section-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:12px;gap:7px}
.welcome-modal-section-title svg{flex-shrink:0}
.welcome-modal-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.welcome-modal-step{display:flex;gap:12px;align-items:flex-start}
.welcome-modal-step-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;justify-content:center;flex-shrink:0;margin-top:1px}
.welcome-modal-step-text{font-size:13px;color:var(--text-secondary);line-height:1.55}
.welcome-modal-step-text strong{color:var(--text-primary);font-weight:600}
.welcome-modal-feedback{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:16px}
.welcome-modal-feedback-desc{font-size:13px;color:var(--text-secondary);line-height:1.55;margin-bottom:14px}
.welcome-modal-feedback-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius);padding:7px 14px;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;text-decoration:none;transition:all .15s}
.welcome-modal-feedback-btn:hover{background:var(--bg-active);border-color:var(--accent);color:var(--accent)}
.welcome-modal-ack{width:100%;padding:11px;background:var(--accent);color:#fff;border-radius:var(--radius);font-size:14px;font-weight:600;transition:opacity .15s;margin-top:22px}
.welcome-modal-ack:hover{opacity:.88}

/* ── Setup Wizard ───────────────────────────────────────────────── */
.wz-modal{max-width:540px}
.wz-step-indicator{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.wz-step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0;transition:all .2s}
.wz-dot-active{background:var(--accent);transform:scale(1.3)}
.wz-dot-done{background:var(--success,#27ae60)}
.wz-step-label{font-size:11px;color:var(--text-secondary);margin-left:6px;font-weight:500}
.wz-intro{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:0 0 16px}
.wz-desc{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:0 0 14px}
.wz-section-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:10px}
.wz-optional{font-size:11px;font-weight:400;color:var(--text-secondary)}
.wz-feature-list{display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
.wz-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}
.wz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:8px}
.wz-nav-right{display:flex;align-items:center;gap:8px}
.wz-btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;background:var(--accent);color:#fff;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;border:none}
.wz-btn-primary:hover{opacity:.88}
.wz-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.wz-btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--bg-hover);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.wz-btn-secondary:hover{background:var(--bg-active)}
.wz-btn-ghost{padding:7px 10px;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:color .15s;background:none;border:none}
.wz-btn-ghost:hover{color:var(--text-primary)}
.wz-btn-sm{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--accent-dim);color:var(--accent);border:1px solid transparent;border-radius:var(--radius);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.wz-btn-sm:hover{border-color:var(--accent)}
.wz-folder-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.wz-folder-row{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:11px 13px}
.wz-folder-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.wz-folder-type{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-primary)}
.wz-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:18px}
.wz-loading{font-size:13px;color:var(--text-secondary);padding:6px 0}
.wz-tmdb-row{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.wz-input{width:100%;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text-primary);outline:none;transition:border-color .15s;box-sizing:border-box}
.wz-input:focus{border-color:var(--accent)}
.wz-tmdb-status{font-size:12px;min-height:16px}
.wz-tmdb-set{font-size:12px;color:var(--success,#27ae60);margin:0}
.wz-scan-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.wz-scan-btn{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;font-size:12px;cursor:pointer;transition:all .15s;text-align:left;width:100%}
.wz-scan-btn:hover:not(:disabled){border-color:var(--accent);background:var(--bg-hover)}
.wz-scan-btn:disabled{opacity:.7;cursor:default}
.wz-scan-btn-title{font-size:12px;font-weight:600;color:var(--text-primary)}
.wz-scan-btn-status{font-size:10px;color:var(--text-secondary)}
.wz-scan-hint{font-size:12px;color:var(--text-secondary);margin:0 0 4px}
.wz-link{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.wz-link:hover{opacity:.8}
.wz-lang-row{display:flex;align-items:center;gap:8px;padding:8px 0}
.wz-lang-label{font-size:12px;color:var(--text-secondary);flex-shrink:0}
.wz-lang-select{flex:1;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:12px;padding:5px 8px;cursor:pointer}
.wz-lang-select:focus{outline:none;border-color:var(--accent)}

/* ── About / Contact tabs ───────────────────────────────────────── */
.about-hero{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.about-logo-wrap{width:56px;height:56px;background:var(--accent-dim);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.about-app-name{font-size:22px;font-weight:700;color:var(--text-primary)}
.about-app-version{font-size:12px;color:var(--accent);background:var(--accent-dim);border-radius:20px;padding:2px 10px;display:inline-block;margin-top:4px;font-weight:600}
.about-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:14px}
.about-section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-primary);margin:0 0 12px}
.about-row{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.about-row:last-child{border-bottom:none}
.about-label{width:140px;flex-shrink:0;color:var(--text-secondary);font-weight:500}
.about-value{color:var(--text-primary)}
.about-link{color:var(--accent);text-decoration:none}
.about-link:hover{text-decoration:underline}
.about-story{font-size:13px;color:var(--text-secondary);line-height:1.65;margin:0 0 10px}
.about-story:last-child{margin-bottom:0}
.about-timeline{display:flex;flex-direction:column;gap:0}
.about-tl-row{display:flex;gap:14px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.about-tl-row:last-child{border-bottom:none}
.about-tl-ver{width:70px;flex-shrink:0;font-weight:700;color:var(--accent);font-family:monospace}
.about-tl-desc{color:var(--text-secondary);line-height:1.45}
.about-screenshot-caption{font-size:12px;color:var(--text-secondary);font-style:italic;margin:12px 0 0}
.contact-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;margin-top:4px}
.contact-btn-primary{background:var(--accent);color:#fff;border:none}
.contact-btn-primary:hover{opacity:.88}
.contact-btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border)}
.contact-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.contact-links-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.contact-link-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;font-weight:500;color:var(--text-primary);text-decoration:none;transition:all .15s}
.contact-link-chip:hover{border-color:var(--accent);color:var(--accent)}

/* ── Batch Select / Edit ────────────────────────────────────────── */
.mv-card.batch-selected{outline:2px solid var(--accent);outline-offset:-2px;transform:scale(.98)}
.batch-cb-wrap{position:absolute;top:6px;left:6px;z-index:6;line-height:0}
.batch-cb{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;border-radius:3px;display:block}
.batch-toolbar{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;gap:8px;box-shadow:0 4px 24px rgba(0,0,0,.45);z-index:900;white-space:nowrap;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px)}
.batch-toolbar-count{font-size:13px;font-weight:600;color:var(--accent);min-width:88px;text-align:center}
.batch-toolbar-btn{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius);padding:6px 13px;font-size:12px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all .15s}
.batch-toolbar-btn:hover{background:var(--bg-active)}
.batch-toolbar-btn:disabled{opacity:.4;cursor:not-allowed}
.batch-toolbar-primary{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.batch-toolbar-primary:hover{opacity:.88}
.batch-toolbar-exit{color:var(--text-secondary);font-size:13px}
.batch-edit-chip{gap:4px}
.batch-edit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:10001;justify-content:center;padding:16px}
.batch-edit-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:26px 24px 20px;max-width:460px;width:100%;box-shadow:0 8px 36px rgba(0,0,0,.55);max-height:90vh;overflow-y:auto}
.batch-edit-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:4px;gap:8px}
.batch-edit-subtitle{font-size:12px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}
.batch-field{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:10px 12px;background:var(--bg-primary);border-radius:7px;border:1px solid transparent;transition:border-color .15s}
.batch-field:has(.batch-field-cb:checked){border-color:var(--accent)}
.batch-field-cb{flex-shrink:0;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin-top:3px}
.batch-field-body{flex:1;min-width:0}
.batch-field-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.batch-field-input{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;font-size:13px;color:var(--text-primary);box-sizing:border-box;transition:opacity .15s}
.batch-field-select{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;font-size:13px;color:var(--text-primary);box-sizing:border-box;transition:opacity .15s}
.batch-field-input:disabled,.batch-field-select:disabled{opacity:.35;pointer-events:none}
.batch-field-check{gap:7px;font-size:13px;color:var(--text-secondary);cursor:pointer}
.batch-field-check:has(input:disabled){opacity:.35;pointer-events:none}
.batch-edit-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.batch-edit-btn{padding:8px 20px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border)}
.batch-edit-btn-cancel{background:var(--bg-hover);color:var(--text-secondary)}
.batch-edit-btn-cancel:hover{background:var(--bg-active)}
.batch-edit-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.batch-edit-btn-primary:hover{opacity:.88}
.batch-edit-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.batch-edit-note{font-size:11px;color:var(--text-secondary);margin-top:10px;padding:8px 10px;background:var(--bg-primary);border-radius:6px;line-height:1.55;display:flex;gap:6px}
@media(max-width:600px){.batch-toolbar{bottom:70px;gap:6px;padding:8px 10px}.batch-toolbar-count{min-width:70px}}

/* ── Playlist Import Modal ──────────────────────────────────────── */
.import-pl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:10001;justify-content:center;padding:16px}
.import-pl-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:26px 24px 20px;max-width:440px;width:100%;box-shadow:0 8px 36px rgba(0,0,0,.55)}
.import-pl-header{justify-content:space-between;margin-bottom:20px}
.import-pl-title{font-size:17px;font-weight:700;color:var(--text-primary)}
.import-pl-close{color:var(--text-secondary);font-size:20px;padding:2px 6px;border-radius:var(--radius);line-height:1}
.import-pl-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.import-pl-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.import-pl-input{width:100%;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;font-size:14px;color:var(--text-primary);box-sizing:border-box;margin-bottom:14px}
.import-pl-input:focus{outline:none;border-color:var(--accent)}
.import-pl-meta{gap:8px;font-size:12px;color:var(--text-secondary);margin-bottom:8px}
.import-pl-format-badge{background:var(--accent-dim);color:var(--accent);border-radius:4px;padding:2px 7px;font-size:11px;font-weight:700;letter-spacing:.03em}
.import-pl-hint{font-size:12px;color:var(--text-secondary);line-height:1.55;padding:9px 11px;background:var(--bg-primary);border-radius:7px;margin-bottom:16px}
.import-pl-result{font-size:13px;padding:9px 12px;border-radius:7px;margin-bottom:12px;display:none;line-height:1.5}
.import-pl-result--error{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.25)}
.import-pl-result--warn{background:rgba(234,179,8,.10);color:#fbbf24;border:1px solid rgba(234,179,8,.22)}
.import-pl-footer{display:flex;gap:10px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}
.import-pl-footer .btn-secondary,.import-pl-footer .btn-primary{margin:0}
.tpl-card{background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .2s}.tpl-card:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(0,0,0,.3)}.tpl-card--active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.tpl-card-preview{height:90px;background:var(--bg-hover);justify-content:center;color:var(--text-muted);font-size:12px;overflow:hidden}.tpl-preview-default{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted)}.tpl-preview-custom{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-secondary)}.tpl-preview-custom span{font-size:11px;text-align:center;padding:0 8px}.tpl-card-body{padding:10px 12px}.tpl-card-name{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:3px}.tpl-card-desc{font-size:11px;color:var(--text-secondary);line-height:1.45;min-height:28px}.tpl-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}.tpl-card-author{font-size:10px;color:var(--text-muted)}.tpl-card-version{font-size:10px;color:var(--accent);font-weight:600}
.pic-memories-group{padding:20px 24px 12px;border-bottom:1px solid var(--border)}.pic-memories-group:last-child{border-bottom:none}.pic-memories-group-header{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.pic-memories-group-title{font-size:15px;font-weight:600;color:var(--text-primary)}.pic-memories-group-count{font-size:11px;color:var(--text-secondary)}.pic-memories-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.pic-memories-card{position:relative;flex-shrink:0;width:150px;height:110px;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--bg-hover)}.pic-memories-card img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.pic-memories-card:hover img{transform:scale(1.05)}.pic-memories-card-date{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:10px;padding:14px 6px 4px}.pic-memories-more{display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);font-size:13px;font-weight:600}.pic-memories-more:hover{background:var(--bg-hover);color:var(--text-primary)}
.places-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:4px 0}
.place-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--bg-surface);border:1px solid var(--border);transition:transform .18s,box-shadow .18s;aspect-ratio:1}
.place-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.place-card-img{width:100%;height:100%;object-fit:cover;display:block}
.place-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.08) 60%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.place-card-name{color:#fff;font-size:14px;font-weight:700;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.place-card-count{color:rgba(255,255,255,.72);font-size:11px;margin-top:3px}
.place-card-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);color:var(--text-muted)}
/* ─── Folder Browser Modal ────────────────────────────────── */
.fb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);animation:fadeIn .15s ease}
.fb-overlay.fb-open{display:flex}
.fb-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;width:min(620px,96vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.55);overflow:hidden}
.fb-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.fb-title{font-size:14px;font-weight:600}
.fb-close{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:2px 7px;border-radius:5px;line-height:1;transition:background .1s,color .1s}
.fb-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.fb-tabs{display:flex;gap:0;padding:8px 18px 0;border-bottom:1px solid var(--border);flex-shrink:0}
.fb-tab{background:none;border:none;border-bottom:2px solid transparent;padding:7px 16px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-1px;display:inline-flex;align-items:center;gap:5px}
.fb-tab:hover{color:var(--text-primary)}
.fb-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.fb-body{flex:1;overflow-y:auto;padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px}
.fb-nav-bar{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fb-back-btn{background:var(--bg-hover);border:1px solid var(--border);color:var(--text-secondary);padding:5px 11px;border-radius:6px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}
.fb-back-btn:hover:not(:disabled){background:var(--border);color:var(--text-primary)}
.fb-back-btn:disabled{opacity:.3;cursor:default}
.fb-current-path{font-size:11px;color:var(--text-muted);word-break:break-all;min-width:0;font-family:monospace;background:rgba(255,255,255,.03);padding:4px 8px;border-radius:5px;flex:1}
.fb-filter-row{display:flex;align-items:center;gap:7px;flex-shrink:0;background:var(--bg-hover);border:1px solid var(--border);border-radius:7px;padding:0 10px}
.fb-filter-icon{color:var(--text-muted);flex-shrink:0}
.fb-filter-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:12.5px;padding:8px 0}
.fb-filter-input::placeholder{color:var(--text-muted)}
.fb-filter-count{font-size:11px;color:var(--text-muted);font-family:monospace;flex-shrink:0}
.fb-folder-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;align-content:start;gap:5px;max-height:min(46vh,340px);min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px;flex-shrink:1}
.fb-folder-item{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:7px;cursor:pointer;border:1px solid transparent;background:var(--bg-hover);transition:background .1s,border-color .1s;overflow:hidden;user-select:none}
.fb-folder-item:hover{background:var(--bg-active,rgba(255,255,255,.1));border-color:var(--accent,#3498db)}
.fb-folder-item.inaccessible{opacity:.4;cursor:not-allowed}
.fb-folder-item .fb-icon{font-size:16px;flex-shrink:0}
.fb-folder-item .fb-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.fb-empty{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--text-muted);font-size:13px;gap:8px}
.fb-path-row{display:flex;gap:8px;align-items:center;flex-shrink:0}
.fb-path-row input{flex:1;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:7px;padding:8px 11px;font-size:13px;font-family:monospace}
.fb-path-row input:focus{outline:2px solid var(--accent);border-color:transparent}
.fb-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-shrink:0;flex-wrap:wrap}
.fb-btn-primary{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fb-btn-primary:hover{opacity:.85}
.fb-btn-secondary{background:var(--bg-hover);border:1px solid var(--border);color:var(--text-primary);border-radius:7px;padding:8px 14px;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .1s}
.fb-btn-secondary:hover{background:var(--border)}
.fb-status{font-size:11px;flex:1;min-width:0}
.fb-unc-notice{background:rgba(52,152,219,.1);border:1px solid rgba(52,152,219,.3);border-radius:8px;padding:10px 14px;font-size:12px;color:#7ec8e3;line-height:1.6;flex-shrink:0}
.fb-unc-notice code{background:rgba(255,255,255,.1);padding:1px 5px;border-radius:3px;font-size:11px;font-family:monospace}
.fb-creds-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.fb-creds-full{grid-column:1/-1}
.fb-creds-label{font-size:11px;color:var(--text-secondary);display:block;margin-bottom:3px}
.fb-creds-input{width:100%;background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:7px 9px;font-size:12px;box-sizing:border-box;transition:border-color .1s}
.fb-creds-input:focus{outline:2px solid var(--accent);border-color:transparent}
.fb-unc-cred-status{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:7px;font-size:12px}
/* ─── Share Folder Cards ─────────────────────────────────── */
.share-folder-card{padding:11px 13px;background:rgba(255,255,255,.02);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:8px;margin-bottom:8px}
.share-folder-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.share-folder-label{font-size:13px;font-weight:500;color:var(--text-primary)}
.share-add-btn{background:rgba(52,152,219,.12);border:1px solid rgba(52,152,219,.3);color:var(--accent,#3498db);border-radius:6px;padding:5px 11px;font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background .15s,border-color .15s;white-space:nowrap;flex-shrink:0}
.share-add-btn:hover{background:rgba(52,152,219,.25);border-color:var(--accent,#3498db)}
.share-chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:26px}
.share-no-paths{font-size:12px;color:var(--text-muted);font-style:italic}
.path-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 10px;background:var(--bg-hover);border:1px solid var(--border);border-radius:20px;font-size:11.5px;font-family:monospace;color:var(--text-primary);max-width:320px}
.path-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.path-chip-unc{border-color:rgba(52,152,219,.45);background:rgba(52,152,219,.07)}
.path-chip-key{font-size:12px;opacity:.75;flex-shrink:0}
.path-chip-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 5px;border-radius:10px;flex-shrink:0}
.path-chip-badge-mounted{background:rgba(39,174,96,.2);color:#2ecc71;border:1px solid rgba(39,174,96,.35)}
.path-chip-badge-unmounted{background:rgba(127,140,141,.12);color:var(--text-muted);border:1px solid var(--border)}
.path-chip-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1;padding:0 3px;border-radius:50%;transition:color .1s,background .1s;flex-shrink:0}
.path-chip-remove:hover{color:var(--danger,#e74c3c);background:rgba(231,76,60,.12)}

/* ─── Settings Tabs ──────────────────────────────────────── */
/* Fixed settings header + independently-scrolling body: the title/tabs/Save row never moves,
   the tab content scrolls in its own region below it so nothing ever overlaps the header. */
.main-content:has(.settings-page){padding:0;overflow:hidden}
.settings-page{display:flex;flex-direction:column;height:100%}
.settings-head{flex:0 0 auto;padding:24px 24px 0;background:var(--bg-primary)}
.settings-head .page-header{margin-bottom:16px}
.settings-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 24px 40px;scrollbar-width:thin;scrollbar-color:var(--bg-active) transparent}
.settings-body::-webkit-scrollbar{width:8px}
.settings-body::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:4px}
.settings-tabs-row{display:flex;align-items:flex-end;gap:12px;border-bottom:2px solid var(--border)}
.stab-bar{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;flex:1;min-width:0}
.stab-bar::-webkit-scrollbar{display:none}
.settings-save-inline{flex-shrink:0;display:flex;align-items:center;gap:10px;padding-bottom:6px}
.settings-save-inline .settings-save-btn{padding:7px 16px;border-radius:8px;font-size:13px;box-shadow:0 2px 8px rgba(46,204,113,.3)}
.settings-save-inline .settings-save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(46,204,113,.4)}
@media(max-width:768px){
    .settings-head{padding:calc(var(--topbar-height) + 12px) 12px 0}
    .settings-body{padding:14px 12px 120px}
    body.mobile-player-active .settings-body{padding-bottom:260px}
}
.stab-btn{padding:10px 18px;font-size:13px;font-weight:500;color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;font-family:inherit}
.stab-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.stab-btn--active{color:var(--accent);border-bottom-color:var(--accent)}
/* ─── Sidebar-style Settings (grouped left rail + one focused page) ─── */
.settings-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.settings-layout{display:grid;grid-template-columns:236px 1fr;gap:24px;align-items:start}
.settings-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:10px 8px}
.srail-label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:700;padding:12px 10px 5px}
.srail-label:first-child{padding-top:4px}
.srail-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:9px;background:none;color:var(--text-secondary);font:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;transition:background .12s,color .12s}
.srail-item .srail-ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.srail-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.srail-item.active{background:var(--accent-dim);color:var(--accent);font-weight:600}
/* Group-coloured rail icons, echoing the main menu scheme */
.srail-item[data-group="sys"] .srail-ico{color:#94a3b8}
.srail-item[data-group="lib"] .srail-ico{color:#22c55e}
.srail-item[data-group="play"] .srail-ico{color:#f59e0b}
.srail-item[data-group="net"] .srail-ico{color:#3b82f6}
.srail-item[data-group="sec"] .srail-ico{color:#f43f5e}
.srail-item[data-group="ui"] .srail-ico{color:#a855f7}
.srail-item[data-group="int"] .srail-ico{color:#14b8a6}
.srail-item[data-group="info"] .srail-ico{color:#94a3b8}
.settings-content{min-width:0}
.settings-content .settings-section:first-child{margin-top:0}
@media(max-width:820px){
    /* Single-column on phones: the rail stacks vertically above the content,
       full width, with its group labels kept for clarity. */
    .settings-layout{grid-template-columns:1fr;gap:14px}
    .settings-rail{position:static;flex-direction:column}
    .srail-item{width:100%}
}
.intg-logo{height:22px;width:auto;vertical-align:middle;margin-right:6px;position:relative;top:-1px}
.intg-logo-wide{height:16px;width:auto;vertical-align:middle;margin-right:6px;position:relative;top:-1px}
.gate-https-warning{display:flex;gap:8px;align-items:flex-start;background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.35);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:12px;color:var(--text-secondary);line-height:1.5}
/* ─── EPG Grid View ──────────────────────────────────────── */
.epg-genre-bar{display:flex;gap:6px;padding:0 0 10px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.epg-genre-bar::-webkit-scrollbar{display:none}
.epg-genre-tab{white-space:nowrap;padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s;font-family:inherit}
.epg-genre-tab:hover{background:var(--bg-hover);color:var(--text-primary)}
.epg-genre-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.epg-grid-day-bar{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.epg-grid-day-btn{background:transparent;border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:4px 11px;cursor:pointer;font-size:16px;line-height:1;transition:background .15s;font-family:inherit}
.epg-grid-day-btn:hover{background:var(--bg-hover)}
.epg-grid-day-label{font-size:14px;font-weight:500;min-width:80px;text-align:center}
.epg-grid-today-btn{background:var(--accent);border:none;color:#fff;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:12px;margin-left:4px;font-family:inherit}
.epg-grid-outer{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--border);border-radius:8px}
.epg-grid-table{border-collapse:collapse;table-layout:fixed}
.epg-grid-corner{position:sticky;top:0;left:0;z-index:4;background:var(--bg-surface);width:104px;min-width:104px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0}
.epg-grid-timecell{position:sticky;top:0;z-index:3;background:var(--bg-surface);padding:0;border-bottom:1px solid var(--border)}
.epg-grid-timebar{position:relative;height:34px;overflow:visible}
.epg-time-label{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-secondary);white-space:nowrap;padding-left:3px;pointer-events:none}
.epg-now-line-hdr{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:1;pointer-events:none}
.epg-grid-td-ch{position:sticky;left:0;z-index:2;background:var(--bg-surface);width:104px;min-width:104px;border-right:1px solid var(--border);border-bottom:1px solid rgba(255,255,255,.05);padding:0;vertical-align:middle}
.epg-grid-ch-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 4px;gap:3px;min-height:56px}
.epg-grid-ch-img{width:52px;height:34px;object-fit:contain}
.epg-grid-ch-ph{display:flex;align-items:center;justify-content:center;width:52px;height:34px;color:var(--text-secondary);opacity:.4}
.epg-grid-ch-name{font-size:9px;color:var(--text-secondary);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px;line-height:1.2}
.epg-grid-td-progs{padding:0;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.epg-grid-progs{position:relative;height:56px;overflow:visible}
.epg-grid-block{position:absolute;top:3px;bottom:3px;border-radius:4px;overflow:hidden;cursor:pointer;background:var(--bg-hover);border:1px solid rgba(255,255,255,.08);box-sizing:border-box;padding:3px 5px;transition:background .12s,border-color .12s,z-index 0s}
.epg-grid-block:hover{background:var(--bg-active);border-color:rgba(255,255,255,.2);z-index:1}
.epg-grid-block.now{background:var(--accent-dim);border-color:var(--accent)}
.epg-grid-block.past{opacity:.38}
.epg-block-title{font-size:11px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.epg-block-time{font-size:9px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;opacity:.8}
.epg-block-noguide{position:absolute;top:50%;left:8px;transform:translateY(-50%);font-size:10px;color:var(--text-secondary);opacity:.4;pointer-events:none}
.epg-grid-now-marker{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:2;pointer-events:none;opacity:.7}
/* EPG Grid inline popup */
.epg-gpopup-td{padding:0!important;background:var(--bg-secondary)!important}
.epg-gpopup{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border-top:2px solid var(--accent);border-bottom:1px solid var(--border);position:relative}
.epg-gpopup-logo{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;min-height:60px}
.epg-gpopup-body{flex:1;min-width:0}
.epg-gpopup-chname{font-size:11px;color:var(--text-secondary);margin-bottom:2px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.epg-gpopup-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:4px;line-height:1.3}
.epg-gpopup-meta{font-size:12px;color:var(--text-secondary);margin-bottom:6px}
.epg-gpopup-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.epg-gpopup-actions{position:sticky;z-index:4;background:var(--bg-secondary);display:flex;align-items:center;flex-shrink:0;padding:0 14px 0 0;margin-right:14px;border-right:1px solid rgba(255,255,255,.08)}
.epg-watch-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .15s;font-family:inherit}
.epg-watch-btn:hover{opacity:.85}
.epg-gpopup-close{position:absolute;top:8px;right:10px;background:transparent;border:none;color:var(--text-secondary);font-size:15px;cursor:pointer;padding:4px 6px;line-height:1;border-radius:4px;transition:color .1s,background .1s}
.epg-gpopup-close:hover{color:var(--text-primary);background:var(--bg-hover)}
.gate-https-warning svg{color:#d97706}
.gate-https-link{display:inline-block;margin-left:8px;font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;font-family:inherit}
/* ─── User table mini-avatar ───────────────────────────────── */
.up-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover,#5b9ef4));display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;position:relative}
.up-avatar.admin{background:linear-gradient(135deg,#f39c12,#e67e22)}
.up-avatar.child{background:linear-gradient(135deg,#22c55e,#16a34a)}
/* ─── My Profile section avatar ────────────────────────────── */
.my-profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover,#5b9ef4));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;position:relative}
.my-profile-avatar.admin{background:linear-gradient(135deg,#f39c12,#e67e22)}
.my-profile-avatar.child{background:linear-gradient(135deg,#22c55e,#16a34a)}
/* In Progress page */
.ip-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-6px 0 18px}
.ip-count{color:var(--text-secondary);font-size:13px;margin:0}
.ip-sort{display:flex;gap:6px}
.ip-sort-btn{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border);
  border-radius:999px;padding:5px 13px;font-size:12px;cursor:pointer;transition:color .15s,border-color .15s}
.ip-sort-btn:hover{color:var(--text-primary)}
.ip-sort-btn.active{color:var(--accent);border-color:var(--accent)}
.ip-sort-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* One block per series (or Movies), so a show with five unfinished episodes reads
   as a single group rather than five cards scattered across the page. */
.ip-group{margin-bottom:30px}
.ip-group-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
  padding-bottom:7px;border-bottom:1px solid var(--border)}
.ip-group-title{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}
.ip-group-meta{font-size:12px;color:var(--text-muted)}
/* Episode number, top-left of the thumb - diagonally opposite the time-left badge
   (bottom-right), so the two can never collide however long either label gets. */
.ip-ep-badge{position:absolute;top:6px;left:6px;z-index:2;background:rgba(0,0,0,.75);color:#fff;
  padding:2px 7px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.04em}

/* Metadata-language control - sits under the genre chips ON the backdrop/poster
   artwork, so it needs its own opaque-ish chip styling rather than the flat
   .mv-stats-btn used on the dark actions bar. */
.vp-metalang-wrap{position:relative;display:inline-block;margin:2px 0 8px}
.vp-metalang-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:14px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12px;
  font-weight:600;cursor:pointer;backdrop-filter:blur(3px);transition:background .15s,border-color .15s}
.vp-metalang-btn:hover{background:rgba(0,0,0,.75);border-color:var(--accent)}
.vp-metalang-btn svg{width:13px;height:13px;flex-shrink:0}
/* Opens leftward: the control sits at the left edge of the hero, so the popup's
   default right:0 would push it off-screen. */
.vp-metalang-popup{right:auto;left:0}

/* Inline result message for the My Account PIN form */
.acct-msg{font-size:12px;margin-left:10px}
.acct-msg-ok{color:#22c55e}
.acct-msg-err{color:#ef4444}
/* ─── Profile picture upload modal ─────────────────────────── */
.pp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10001;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.pp-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:24px 26px 20px;width:min(360px,94vw);box-shadow:0 12px 40px rgba(0,0,0,.55)}
.pp-modal-title{font-size:15px;font-weight:600;margin:0 0 18px;color:var(--text-primary)}
.pp-cropper-wrap{width:200px;height:200px;border-radius:50%;overflow:hidden;position:relative;cursor:grab;border:3px solid var(--accent);margin:0 auto 10px;background:var(--bg-secondary);user-select:none;touch-action:none}
.pp-cropper-wrap:active{cursor:grabbing}
.pp-cropper-img{position:absolute;max-width:none;user-select:none;pointer-events:none;touch-action:none;display:block}
.pp-cropper-hint{text-align:center;font-size:12px;color:var(--text-muted);margin-bottom:18px}
.pp-file-input-btn{display:block;text-align:center;cursor:pointer;padding:9px 16px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text-secondary);margin-bottom:14px;transition:all .2s}
.pp-file-input-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.pp-modal-actions{display:flex;gap:8px;justify-content:flex-end}
/* ─── Audiobook player panel ────────────────────────────────── */
.ab-chapter-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;border-radius:6px;margin:1px 6px;transition:background .15s;font-size:13px;color:var(--text-secondary)}
.ab-chapter-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.ab-chapter-item.ab-ch-active{color:var(--accent);font-weight:600}
.ab-chapter-num{font-size:10px;color:var(--text-muted);min-width:22px;text-align:right;flex-shrink:0}
.ab-chapter-time{font-size:11px;color:var(--text-muted);margin-left:auto;flex-shrink:0}
.ab-bookmark-item{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;margin:2px 6px;background:var(--bg-secondary);border-radius:7px;font-size:12px}
.ab-bookmark-info{flex:1;min-width:0;cursor:pointer}
.ab-bookmark-title{font-weight:600;color:var(--text-primary);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-bookmark-pos{font-size:11px;color:var(--accent)}
.ab-bookmark-note{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.4}
.ab-bookmark-del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;flex-shrink:0;padding:0 4px;line-height:1;border-radius:4px;transition:color .15s}
.ab-bookmark-del:hover{color:var(--danger)}
.ab-sleep-options{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px}
.ab-sleep-btn{padding:7px 16px;background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s}
.ab-sleep-btn:hover,.ab-sleep-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ab-sleep-countdown{text-align:center;padding:12px 16px;font-size:13px;color:var(--accent);font-weight:500}
.ab-progress-bar-wrap{padding:10px 16px 4px}
.ab-progress-bar-bg{height:4px;background:var(--bg-hover);border-radius:2px;overflow:hidden}
.ab-progress-bar-fill{height:100%;background:var(--accent);transition:width .5s}
.ab-progress-pct{font-size:11px;color:var(--text-muted);text-align:right;margin-top:3px}
.ab-speed-btn{min-width:34px!important}
/* ─── Audiobook detail page ─────────────────────────────────── */
.ab-detail-grid{display:grid;grid-template-columns:190px 1fr;gap:20px 24px;align-items:start;margin-bottom:16px}
.ab-detail-left{display:flex;flex-direction:column;gap:8px}
.ab-detail-cover-img{width:100%;border-radius:9px;display:block;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.ab-detail-cover-ph{width:100%;aspect-ratio:1;background:var(--bg-secondary);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.ab-detail-btns{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.ab-detail-btns .btn-primary,.ab-detail-btns a.btn-primary{text-align:center;padding:8px 0;font-size:13px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.ab-live-progress{margin-top:4px}
.ab-live-bar-bg{height:4px;background:var(--bg-hover);border-radius:2px;overflow:hidden}
.ab-live-bar-fill{height:100%;background:var(--accent);transition:width .8s linear;width:0%}
.ab-live-pct{font-size:11px;color:var(--text-muted);margin-top:3px;display:flex;justify-content:space-between}
.ab-meta-grid{display:grid;grid-template-columns:auto auto;row-gap:5px;column-gap:10px;align-items:baseline;width:fit-content;margin-left:auto}
.ab-meta-lbl{font-size:12px;color:var(--text-muted);white-space:nowrap;text-align:right}
.ab-meta-val{font-size:13px;color:var(--text-primary);word-break:break-word;text-align:left;max-width:420px}
.ab-desc-box{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ab-desc-collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ab-desc-toggle{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:3px 0 0;display:block}
/* Bookmark toast */
.ab-bm-toast{position:fixed;bottom:84px;right:16px;background:#16a34a;color:#fff;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;z-index:10002;box-shadow:0 4px 12px rgba(0,0,0,.45);display:flex;align-items:center;gap:8px;pointer-events:none}
.nm-toast{position:fixed;bottom:84px;right:16px;max-width:min(420px,calc(100vw - 32px));background:#1f2430;color:#fff;padding:11px 16px;border-radius:8px;font-size:13px;font-weight:500;line-height:1.35;z-index:10050;box-shadow:0 6px 20px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease;pointer-events:none;white-space:pre-wrap;word-break:break-word}
.nm-toast-show{opacity:1;transform:translateY(0)}
/* Anchored variant: positioned beside a trigger element (top/left set inline) instead of bottom-right. */
.nm-toast-anchored{bottom:auto;right:auto;transform:translateY(-6px)}
.nm-toast-anchored.nm-toast-show{transform:translateY(0)}
@media(max-width:600px){.ab-detail-grid{grid-template-columns:1fr}.ab-detail-cover-img,.ab-detail-cover-ph{max-width:150px;margin:0 auto}}

/* ─── Book / Audiobook hero detail (Calibre-style) ─────────────── */
.bookhero{max-width:1120px;margin:0 auto}
.bookhero-banner{position:relative;overflow:hidden;border-radius:14px 14px 0 0;min-height:54px;display:flex;align-items:center;gap:12px;padding:12px 20px}
.bookhero-banner-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:blur(20px) brightness(.45) saturate(1.25);transform:scale(1.15);z-index:0}
.bookhero-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.2));z-index:0}
.bookhero-banner.no-cover{background:var(--bg-secondary)}
.bookhero-banner>*{position:relative;z-index:1}
.bookhero-back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:.15s}
.bookhero-back:hover{background:rgba(255,255,255,.25)}
.bookhero-back svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bookhero-banner-title{color:#fff;font-size:14px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.7)}

.bookhero-card{position:relative;overflow:hidden;border-radius:0 0 14px 14px;background:var(--bg-secondary)}
.bookhero-card-bg{position:absolute;inset:0;background-size:cover;background-position:center 22%;filter:blur(34px) brightness(.34) saturate(1.3);transform:scale(1.18);z-index:0}
.bookhero-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.34) 0%,rgba(10,10,12,.7) 100%);z-index:0}
.bookhero-card.no-cover::before{display:none}
.bookhero-card-inner{position:relative;z-index:1;display:flex;gap:28px;align-items:flex-start;padding:28px 32px 32px}
.bookhero-cover-col{flex:0 0 210px;width:210px;display:flex;flex-direction:column;gap:14px}
.bookhero-cover{width:100%;border-radius:9px;display:block;box-shadow:0 12px 38px rgba(0,0,0,.6);aspect-ratio:2/3;object-fit:cover}
.bookhero-cover-ph{width:100%;aspect-ratio:2/3;background:rgba(255,255,255,.08);border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.bookhero-main{flex:1 1 auto;min-width:0}
.bookhero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.bh-primary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:24px;background:var(--accent);color:#fff;border:none;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:filter .15s}
.bh-primary:hover{filter:brightness(1.1)}
.bh-primary:disabled{background:var(--bg-surface,#333);color:var(--text-secondary,#888);cursor:not-allowed}
.bh-primary:disabled:hover{filter:none}
.bh-primary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bh-act{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:.15s;text-decoration:none;flex-shrink:0}
.bh-act:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.45)}
.bh-act.is-active,.bh-act.active{background:var(--accent);border-color:var(--accent);color:#fff}
.bh-act svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bookhero-title{font-size:clamp(22px,2.6vw,32px);font-weight:700;line-height:1.15;margin:0 0 8px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.bookhero-author{font-size:15px;color:rgba(255,255,255,.66);margin:0 0 12px}
.bookhero-stars{margin-bottom:12px;line-height:1}
.bookhero-series{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:20px}
.bookhero-series b{color:#fff;font-weight:600}
.bookhero-pills{display:flex;flex-wrap:wrap;gap:10px}
.bh-pill{display:flex;align-items:baseline;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 13px;min-height:36px}
.bh-pill-lbl{font-size:10.5px;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.55);text-transform:uppercase;white-space:nowrap;line-height:1}
.bh-pill-val{font-size:13px;color:#fff;font-weight:500;line-height:1;display:inline-flex;align-items:center}
.bh-chip{display:inline-block;background:rgba(255,255,255,.16);border-radius:6px;padding:3px 9px;font-size:12px;color:#fff}
.bookhero-progress{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px}
.bookhero-progress .ab-live-bar-bg{background:rgba(255,255,255,.2)}
.bookhero-progress-lbl{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.bookhero-progress-pct{display:flex;justify-content:space-between;font-size:12px;color:#fff;margin-top:6px}

.bookhero-desc{max-width:1120px;margin:26px auto 0}
.bookhero-desc-h{font-size:17px;font-weight:700;color:var(--text-primary);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.bookhero-desc-body{font-size:14px;line-height:1.75;color:var(--text-secondary)}
.bookhero-desc-body.ab-desc-collapsed{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.bookhero-section{max-width:1120px;margin:22px auto 0}
@media(max-width:680px){
  .bookhero-card-inner{flex-direction:column;gap:20px;padding:22px}
  .bookhero-cover-col{flex-basis:auto;width:100%;max-width:180px;margin:0 auto}
  .bookhero-actions{justify-content:center}
  .bookhero-title,.bookhero-author,.bookhero-series{text-align:center}
  .bookhero-pills{justify-content:center}
}

/* ─── Auto-Update ──────────────────────────────────────────────── */
.au-tab-badge{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;margin-left:5px;vertical-align:middle;flex-shrink:0}
.au-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.au-card-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.au-version-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.au-version-badge{font-size:18px;font-weight:700;color:var(--text-primary)}
.au-meta{font-size:12px;color:var(--text-secondary);margin-top:4px}
.au-update-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600}
.au-progress-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin:10px 0 4px}
.au-progress-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .3s}
/* Indeterminate "working" bar - a chunk sweeps across before real progress numbers arrive */
.au-progress-indeterminate{width:35%!important;transition:none;animation:auIndeterminate 1.05s ease-in-out infinite}
@keyframes auIndeterminate{0%{margin-left:-35%}100%{margin-left:100%}}
.au-progress-label{font-size:12px;color:var(--text-secondary);text-align:right}
.au-btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:opacity .15s}
.au-btn-primary{background:var(--accent);color:#fff}
.au-btn-primary:hover{opacity:.88}
.au-btn-secondary{background:var(--bg-hover);color:var(--text-primary)}
.au-btn-secondary:hover{background:var(--bg-active)}
.au-btn-danger{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.25)}
.au-btn-danger:hover{background:rgba(239,68,68,.25)}
.au-btn:disabled{opacity:.45;cursor:not-allowed}
.au-docker-notice{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:8px;padding:16px 18px;font-size:13px;color:var(--text-secondary)}
.au-docker-header{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.au-docker-explain{margin:0 0 14px;line-height:1.5}
.au-docker-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.au-docker-step-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(99,102,241,.35);color:#a5b4fc;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.au-docker-step-label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.au-docker-cmd{font-family:monospace;background:var(--bg-primary);padding:6px 10px;border-radius:5px;font-size:12px;color:#a5b4fc;margin-top:2px;display:block;user-select:all}
.au-docker-note{margin-top:12px;font-size:12px;color:var(--text-secondary);border-top:1px solid rgba(99,102,241,.2);padding-top:10px}
.au-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:10px 14px;font-size:13px;color:#f87171;margin-bottom:10px}
.au-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:8px;padding:10px 14px;font-size:13px;color:#4ade80;margin-bottom:10px}
/* ─── EPG Programme Guide ──────────────────────────────────────── */
.epg-guide{display:flex;height:calc(100vh - 130px);min-height:400px;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-secondary)}
.epg-channel-panel{width:260px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);background:var(--bg-secondary)}
.epg-channel-search{padding:10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-secondary);z-index:1}
.epg-channel-search input{width:100%;padding:7px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:13px}
.epg-channel-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s}
.epg-channel-item:hover{background:var(--bg-hover)}
.epg-channel-item.active{background:var(--bg-active);border-left:3px solid var(--accent)}
.epg-channel-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0;border-radius:4px}
.epg-channel-logo-ph{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border-radius:4px;flex-shrink:0}
.epg-channel-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.epg-channel-now{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.epg-schedule-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
.epg-schedule-header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.epg-schedule-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.epg-day-tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.epg-day-tabs::-webkit-scrollbar{display:none}
.epg-day-tab{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-secondary);white-space:nowrap;transition:all .15s}
.epg-day-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.epg-schedule-list{flex:1;overflow-y:auto;padding:8px 0}
.epg-programme{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .12s;position:relative}
.epg-programme:hover{background:var(--bg-hover)}
.epg-programme.now{background:rgba(var(--accent-rgb,59,130,246),.12);border-left:3px solid var(--accent)}
.epg-programme.past{opacity:.45}
.epg-programme-time{font-size:12px;color:var(--text-secondary);width:100px;flex-shrink:0;padding-top:1px;font-variant-numeric:tabular-nums}
.epg-programme-info{flex:1;min-width:0}
.epg-programme-title{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-programme-cat{font-size:11px;color:var(--text-secondary);margin-top:2px}
.epg-now-badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.epg-empty{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-secondary);font-size:14px;text-align:center;padding:20px}
.epg-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:flex;align-items:center;justify-content:center}
.epg-popup{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:480px;width:calc(100% - 32px);max-height:70vh;overflow-y:auto}
.epg-popup-title{font-size:17px;font-weight:700;margin-bottom:4px}
.epg-popup-time{font-size:13px;color:var(--text-secondary);margin-bottom:12px}
.epg-popup-desc{font-size:14px;line-height:1.6;color:var(--text-primary)}
.epg-popup-close{margin-top:16px;width:100%}
.epg-toolbar-btn{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:500;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.epg-toolbar-btn:hover{background:var(--bg-active)}
.epg-toolbar-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Now/Next badges on channel cards */
.tv-card-epg{font-size:11px;color:var(--text-secondary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-card-epg-now{color:var(--accent);font-weight:500}
/* EPG sources settings */
.epg-source-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.epg-source-info{flex:1;min-width:0}
.epg-source-url{font-size:12px;font-family:monospace;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-source-meta{font-size:11px;color:var(--text-secondary);margin-top:2px}
.epg-status-ok{color:#4ade80}
.epg-status-error{color:#f87171}
.epg-status-fetching{color:#fbbf24}
.epg-status-pending{color:var(--text-secondary)}
@media(max-width:700px){.epg-guide{flex-direction:column;height:auto}.epg-channel-panel{width:100%;height:200px;border-right:none;border-bottom:1px solid var(--border)}.epg-schedule-panel{height:350px}}
/* Actor social links */
.actor-social-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;text-decoration:none;transition:opacity .15s,transform .15s;vertical-align:middle;flex-shrink:0}
.actor-social-btn:hover{opacity:.82;transform:translateY(-1px)}
/* Actor filmography */
.actor-filmo-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.actor-filmo-tab{padding:8px 18px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-size:.9rem;transition:color .15s,border-color .15s;margin-bottom:-1px;white-space:nowrap}
.actor-filmo-tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}
.actor-filmo-tab:hover:not(.active){color:var(--text-primary)}
.actor-filmo-item{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.9rem}
.actor-filmo-item:last-child{border-bottom:none}
.actor-filmo-year{min-width:40px;color:var(--text-secondary);font-size:.82rem;flex-shrink:0}
.actor-filmo-ttl{color:var(--text-primary);font-weight:500}
.actor-filmo-role{color:var(--text-secondary);font-size:.82rem}

/* ===== Delete Media (file-level) modal + episode delete button ===== */
.delete-media-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:100010;display:flex;align-items:center;justify-content:center;padding:20px}
.delete-media-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius,10px);width:100%;max-width:440px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.delete-media-title{margin:0 0 10px;font-size:17px;font-weight:700;color:#ff5a5a;display:flex;align-items:center;gap:8px}
.delete-media-name{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-primary);word-break:break-word}
.delete-media-file{margin:0 0 12px;font-size:12px;color:var(--text-secondary);word-break:break-all}
.delete-media-file-label{color:var(--text-muted)}
.delete-media-file code{background:var(--bg-active);padding:2px 6px;border-radius:4px;font-size:11.5px}
.delete-media-warn{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
.delete-media-go-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.delete-media-input{width:100%;box-sizing:border-box;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text-primary);font-size:14px;letter-spacing:.1em;text-transform:uppercase;outline:none;transition:border-color .15s}
.delete-media-input:focus{border-color:#ff5a5a}
.delete-media-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.delete-media-cancel,.delete-media-confirm{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);transition:all .15s}
.delete-media-cancel{background:var(--bg-surface);color:var(--text-primary)}
.delete-media-cancel:hover{background:var(--bg-hover)}
.delete-media-confirm{background:#d32f2f;border-color:#d32f2f;color:#fff}
.delete-media-confirm:hover:not(:disabled){background:#b71c1c}
.delete-media-confirm:disabled{opacity:.45;cursor:not-allowed}
.rtl .series-ep-edit{right:auto;left:6px}

/* ===== RTL support (Arabic, Persian/Farsi, Hebrew, Urdu, …) =====
   Base direction is set by [dir=rtl] on <html> (App._applyTextDirection).
   Paragraph/bidi text and CSS-Grid columns (sidebar ↔ content) flip automatically;
   the rules below fix physical left/right properties that do NOT auto-flip. */
.rtl .app-container{direction:rtl}
.rtl input,.rtl textarea,.rtl select{text-align:right}
/* Sidebar */
.rtl .sidebar{border-right:none;border-left:1px solid var(--border)}
.rtl .sidebar-nav li a{border-left:none;border-right:3px solid transparent}
.rtl .sidebar-nav li a.active{border-left-color:transparent;border-right-color:var(--accent)}
.rtl .sidebar-logo .sidebar-toggle{margin-left:0;margin-right:auto}
.rtl .nav-badge{margin-left:0;margin-right:auto}
.rtl .sidebar-version{direction:ltr;text-align:right}
/* Topbar / search */
.rtl .topbar-actions{margin-left:0;margin-right:auto}
.rtl .search-box input{padding:7px 35px 7px 15px}
.rtl .search-box .search-icon{left:auto;right:12px}
.rtl .search-box input.mobile-search-open{padding:7px 35px 7px 12px}
/* Keep code / URLs / version strings readable as LTR runs inside RTL text */
.rtl code,.rtl kbd,.rtl pre{direction:ltr;unicode-bidi:embed;text-align:left}

/* ===== Analysis → Transcoding history (.txh-*) ===== */
.txh-table{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
.txh-table th{text-align:left;padding:8px 10px;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap}
.txh-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;white-space:nowrap}
.txh-table tbody tr:hover{background:rgba(255,255,255,.03)}
.txh-name{color:var(--accent);cursor:pointer;font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.txh-name:hover{text-decoration:underline}
.txh-media{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;font-size:10px;background:rgba(255,255,255,.07);color:var(--text-secondary);vertical-align:middle}
.txh-hw{max-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}
.txh-when{color:var(--text-muted);font-size:12px}
.txh-status{display:inline-block;padding:2px 9px;border:1px solid;border-radius:10px;font-size:11px;font-weight:600}
/* Detail modal */
.txh-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.txh-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);width:min(880px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(0,0,0,.55)}
.txh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.txh-title{margin:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txh-close{background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1}
.txh-close:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}
.txh-body{padding:16px 20px;overflow-y:auto}
.txh-subtitle{margin:18px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
.txh-body .txh-subtitle:first-child{margin-top:0}
.txh-subnote{color:var(--text-muted);font-weight:400;font-size:12px;text-transform:none;letter-spacing:0}
.txh-drow{display:flex;gap:14px;padding:5px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04);align-items:baseline}
.txh-dlabel{flex:0 0 130px;color:var(--text-muted)}
.txh-dvalue{flex:1;min-width:0;overflow-wrap:anywhere}
.txh-mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--text-secondary)}
/* Chart */
.txh-chart-wrap{position:relative;width:100%;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:10px 8px 6px}
.txh-chart-wrap canvas{display:block;cursor:crosshair}
.txh-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:12px;color:var(--text-secondary)}
.txh-legend-item{display:inline-flex;align-items:center;gap:6px}
.txh-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-right:2px}
.txh-tooltip{position:absolute;background:rgba(18,18,18,.95);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--text-primary);pointer-events:none;white-space:nowrap;line-height:1.6;z-index:2}
.txh-tt-time{font-weight:700;margin-bottom:2px}

/* ─── FranBold Player - brushed-metal skin (cyan accents + green LEDs; no third-party assets) ───
   RESKIN 2026-08-15. The previous skin (green LCD / blue titlebar / colour-gradient fills) is
   backed up verbatim at docs/franbold_skin_backup_2026-08-15.css - paste that block back over
   this one (plus revert the two JS canvas colours, see docs/franbold_metallic_reskin.md) to undo.
   Design rule: grayscale brushed-metal SURFACES; ACCENT colours are FLAT (no colour gradients).
   cyan #2fd3e8 = readouts / sliders / text ("others");  green #35e08c = "on" buttons + LEDs. */
.mv-franbold-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(#3a3f47,#23272d);color:#2fd3e8;border:1px solid #2fd3e855;padding:8px 20px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .2s;box-shadow:inset 0 1px 0 #565d68}
.mv-franbold-btn:hover{transform:scale(1.03);box-shadow:inset 0 1px 0 #565d68,0 0 10px #2fd3e855}
.mv-franbold-btn svg{color:#2fd3e8}
/* Pocket Player launcher - silver tint to set it apart from FranBold's cyan */
.mv-hwplayer-btn{color:#d6dae2;border-color:#8b93a355}
.mv-hwplayer-btn svg{color:#d6dae2}
.mv-hwplayer-btn:hover{box-shadow:inset 0 1px 0 #565d68,0 0 10px #8b93a355}

/* ─── Pocket Player (hardware-style MP3 player) ─────────────────────────────── */
#hw-overlay{position:fixed;inset:0;z-index:10100;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 0%,rgba(40,46,58,.7),rgba(0,0,0,.82));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .15s ease;padding:20px;overflow:auto}
.hw-exit{position:fixed;top:18px;right:20px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s}
.hw-exit:hover{background:rgba(255,255,255,.22)}
/* Device body - glossy black candy-bar */
.hw-device{position:relative;width:290px;padding:20px 22px 30px;border-radius:34px;background:linear-gradient(160deg,#55585c 0%,#434447 42%,#3c3d3e 100%);box-shadow:0 30px 70px rgba(0,0,0,.65),inset 0 2px 3px rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.6),0 0 0 1px #000;user-select:none}
.hw-device::before{content:'';position:absolute;inset:6px;border-radius:28px;background:linear-gradient(150deg,rgba(255,255,255,.06),transparent 45%);pointer-events:none}
/* Colour LCD */
.hw-screen{position:relative;border-radius:12px;padding:12px 12px 10px;background:linear-gradient(165deg,#404f62,#373b41 70%);box-shadow:inset 0 0 0 2px #000,inset 0 2px 10px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06);color:#dfe8f5;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
.hw-scr-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.06em;color:#aeb9cc;margin-bottom:8px}
.hw-counter{font-variant-numeric:tabular-nums;font-weight:600}
.hw-batt{width:24px;height:12px;color:#aeb9cc;display:block}
.hw-scr-body{position:relative;width:100%;aspect-ratio:1/1;cursor:pointer;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.25)}
.hw-view{position:absolute;inset:0;width:100%;height:100%}
.hw-art{display:flex;align-items:center;justify-content:center}
.hw-art img{width:100%;height:100%;object-fit:cover;display:block}
.hw-art-ph{font-size:64px;color:rgba(255,255,255,.25)}
.hw-viz{display:block;background:linear-gradient(#3b4659,#373b43)}
.hw-scr-title{margin-top:9px;text-align:center;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:clip;font-variant-numeric:tabular-nums;color:#eef3fb}
.hw-scr-foot{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12px;color:#c3cddd}
.hw-play-ind{color:#7fe0a0;font-size:11px;min-width:14px}
.hw-time{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hw-foot-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.hw-fbtn{width:19px;height:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8894a8;transition:color .15s}
.hw-fbtn svg{width:17px;height:17px;display:block}
.hw-fbtn:hover{color:#dfe8f5}
.hw-fbtn:active{color:#fff}
.hw-shuffle.on{color:#39d98a}
/* The EQ panel + add-to-playlist popup normally sit below the Pocket Player overlay
   (z 10100); lift them above it while the player is open so they're usable. */
body.hw-open #eq-panel{z-index:10300}
body.hw-open .add-pl-popup{z-index:10300}
.hw-progress{margin-top:7px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);cursor:pointer;overflow:hidden}
.hw-progress-fill{height:100%;width:0;border-radius:3px;background:#22c55e}
/* Brand + volume */
.hw-brand{text-align:center;margin:12px 0 14px;font-size:15px;font-weight:800;letter-spacing:.03em;color:#c7ccd4;text-shadow:0 1px 0 #000}
.hw-brand span{color:#39d98a}
.hw-vol-slider{display:block;width:80%;margin:0 auto 12px;accent-color:#39d98a;cursor:pointer}
/* Click-wheel */
.hw-wheel{position:relative;width:180px;height:180px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 50% 38%,#5a5d61,#48494d 62%,#3c3d40);box-shadow:inset 0 2px 4px rgba(255,255,255,.12),inset 0 -4px 10px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.5)}
/* Wheel buttons keep their positioning transform; the press feedback is a background/
   colour pulse (NOT a transform), so the button never shifts out of place. */
.hw-wbtn{position:absolute;background:none;border:none;color:#cfd4dc;font-size:14px;font-weight:700;letter-spacing:.05em;cursor:pointer;padding:6px 10px;border-radius:8px;transition:color .1s,background .1s}
.hw-wbtn:hover{color:#fff;background:rgba(255,255,255,.08)}
.hw-wbtn:active{color:#fff;background:rgba(255,255,255,.22)}
.hw-w-m{top:8px;left:50%;transform:translateX(-50%)}
.hw-w-prev{left:12px;top:50%;transform:translateY(-50%);font-size:18px}
.hw-w-next{right:12px;top:50%;transform:translateY(-50%);font-size:18px}
.hw-w-vol{bottom:8px;left:50%;transform:translateX(-50%)}
.hw-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#616469,#4d4e51 70%,#414143);border:1px solid #000;box-shadow:inset 0 2px 3px rgba(255,255,255,.16),inset 0 -3px 6px rgba(0,0,0,.7),0 2px 5px rgba(0,0,0,.5);color:#e8ebf0;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;letter-spacing:-2px;transition:box-shadow .1s,transform .06s}
.hw-center:hover{color:#fff}
/* Keep the centring translate, add scale so the press dips in place (no displacement) */
.hw-center:active{transform:translate(-50%,-50%) scale(.95);box-shadow:inset 0 3px 7px rgba(0,0,0,.85)}
/* Hardware-style OFF / power button, bottom-right corner of the device */
.hw-off{position:absolute;right:16px;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:1px;width:40px;padding:6px 0 4px;border-radius:11px;background:linear-gradient(#3a2226,#241416);border:1px solid #000;color:#ff8a80;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);cursor:pointer;transition:background .12s,box-shadow .08s}
.hw-off svg{width:15px;height:15px;display:block}
.hw-off span{font-size:8px;font-weight:800;letter-spacing:.08em}
.hw-off:hover{background:linear-gradient(#4a2a30,#2c181b);color:#ff9c93}
.hw-off:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.8)}
@media(max-width:520px){.hw-device{transform:scale(.94)}}

#fb-overlay{position:fixed;inset:0;z-index:4000;pointer-events:none;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
#fb-overlay .fb-win{pointer-events:auto}
.fb-win{position:fixed;width:340px;border-radius:5px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.05) 1px 2px),linear-gradient(#4c515a,#2a2e34);border:1px solid #0e1116;box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 1px 0 #5a616c,inset 0 0 0 1px #1b1f25;user-select:none}
.fb-titlebar{display:flex;align-items:center;justify-content:space-between;height:20px;padding:0 6px;cursor:move;border-radius:4px 4px 0 0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 2px),linear-gradient(#3b4049,#20242a);border-bottom:1px solid #0d1015;box-shadow:inset 0 1px 0 #5a616c}
.fb-tb-title{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#aeb6c4;text-transform:uppercase;text-shadow:0 1px 0 #0d1120;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-tb-btns{display:flex;gap:4px;flex-shrink:0}
.fb-tb-btn{width:13px;height:12px;line-height:11px;text-align:center;font-size:11px;color:#0d1120;background:linear-gradient(#c7cede,#8f97ac);border:1px solid #12151a;border-radius:2px;cursor:pointer;padding:0;font-weight:700}
.fb-tb-btn:hover{background:linear-gradient(#e4e9f5,#aab2c6)}
.fb-tb-btn.fb-tb-x:hover{background:#e0503c;color:#2a0a05}
.fb-body{padding:8px}
.fb-shaded .fb-body{display:none}
/* single fused block: titlebar fixed, sections scroll if the block is taller than the viewport */
.fb-main{display:flex;flex-direction:column;max-height:calc(100vh - 16px)}
.fb-scroll{overflow-y:auto;overflow-x:hidden}
.fb-win.fb-shaded .fb-scroll{display:none}
/* sub-section separator bar - same look as a window titlebar but not draggable */
.fb-subbar{cursor:default;border-radius:0}

/* main window */
.fb-main-top{display:flex;align-items:stretch;gap:8px}
.fb-lcd{background:#080b0e;border:1px solid #04070a;border-radius:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.85),inset 0 1px 2px rgba(0,0,0,.9);color:#2fd3e8;font-family:'Consolas','SF Mono','Menlo',monospace;text-shadow:0 0 5px rgba(47,211,232,.6)}
.fb-time{flex:0 0 auto;min-width:96px;font-size:28px;font-weight:700;line-height:1;padding:6px 10px;display:flex;align-items:center;justify-content:center;letter-spacing:2px;cursor:pointer}
/* Visualiser grows to fill the space between the clock and the (right-aligned) meta column,
   so there's no dead space on the right. _fbDrawViz resizes the drawing buffer to match. */
.fb-viz{background:#05080b;border:1px solid #04070a;border-radius:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.85);align-self:center;flex:1 1 0;width:0;min-width:60px;height:36px}
/* Meta column hugs its content on the right edge (matching the clock's left inset), rows right-aligned. */
.fb-main-meta{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;gap:2px;font-size:9px;color:#9aa4b2}
.fb-metrow{display:flex;align-items:baseline;gap:4px}
.fb-metrow b{color:#2fd3e8;font-family:'Consolas',monospace;font-size:12px;min-width:26px;text-align:right;text-shadow:0 0 4px rgba(47,211,232,.5)}
.fb-chan{display:flex;gap:8px;margin-top:2px}
/* Only ever show the active channel label so it sits flush-left, aligned under the kbps/kHz
   rows - the hidden inactive label used to occupy space and push STEREO off to the middle. */
.fb-chan-lbl{font-size:8px;font-weight:700;letter-spacing:1px;color:#4a525e;text-transform:uppercase;display:none}
.fb-chan-lbl.on{display:inline;color:#35e08c;text-shadow:0 0 5px rgba(53,224,140,.65)}
.fb-track-wrap{margin-top:8px}
.fb-track{font-size:12px;padding:5px 8px;white-space:pre;overflow:hidden;letter-spacing:.5px}
.fb-sliders{display:flex;gap:14px;margin-top:8px}
.fb-slider-row{flex:1;display:flex;align-items:center;gap:6px}
.fb-mini-lbl{font-size:8px;font-weight:800;letter-spacing:1px;color:#8a92a0}
.fb-hslider{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:linear-gradient(#12161c,#20252d);box-shadow:inset 0 1px 2px rgba(0,0,0,.7);accent-color:#2fd3e8;cursor:pointer}
.fb-hslider::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:15px;border-radius:2px;background:linear-gradient(#d0d5de,#8b9099);border:1px solid #0e1116;cursor:pointer;box-shadow:0 0 4px rgba(47,211,232,.7),inset 0 1px 0 #eef1f6}
.fb-hslider::-moz-range-thumb{width:9px;height:15px;border-radius:2px;background:linear-gradient(#d0d5de,#8b9099);border:1px solid #0e1116;cursor:pointer;box-shadow:0 0 4px rgba(47,211,232,.7)}
.fb-posbar{position:relative;height:8px;margin-top:8px;border-radius:4px;background:linear-gradient(#12161c,#20252d);box-shadow:inset 0 1px 2px rgba(0,0,0,.7);cursor:pointer}
.fb-pos-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:#2fd3e8;box-shadow:0 0 6px rgba(47,211,232,.6)}
.fb-pos-thumb{position:absolute;top:50%;width:8px;height:14px;transform:translate(-50%,-50%);border-radius:2px;background:linear-gradient(#d0d5de,#8b9099);border:1px solid #0e1116;box-shadow:0 0 4px rgba(47,211,232,.7)}
.fb-transport{display:flex;align-items:center;gap:4px;margin-top:9px}
.fb-transport > .fb-btn:not(.fb-toggle){flex:1 1 auto}
.fb-btn{min-width:26px;height:22px;padding:0 6px;font-size:12px;color:#e6eaf2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,.05) 1px 2px),linear-gradient(#40454e,#282c33);border:1px solid #0e1116;border-radius:3px;cursor:pointer;box-shadow:inset 0 1px 0 #565d68;font-family:'Segoe UI Symbol','Apple Symbols','Segoe UI',sans-serif;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.fb-btn:hover{background:linear-gradient(#4a515b,#31363e)}
.fb-btn:active{background:linear-gradient(#22262c,#2f343c);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.fb-btn.on{color:#08160e;background:#35e08c;border-color:#0d3a26;text-shadow:none;box-shadow:inset 0 1px 0 #9defc4,0 0 8px rgba(53,224,140,.55)}
.fb-btn-eject{color:#2fd3e8}
.fb-toggle{font-size:9px;font-weight:800;letter-spacing:.5px;min-width:34px}
.fb-transport-sep{width:1px;height:18px;background:#0e1116;box-shadow:1px 0 0 #565d68;margin:0 3px}

/* equalizer window */
.fb-eq-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.fb-eq-preset{flex:1;font-size:10px;padding:3px 4px;color:#2fd3e8;background:#080b0e;border:1px solid #04070a;border-radius:3px;font-family:'Consolas',monospace;cursor:pointer}
.fb-eq-graph{display:block;width:100%;height:52px;background:#05080b;border:1px solid #04070a;border-radius:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.85);margin-bottom:8px}
.fb-eq-bands{display:flex;align-items:flex-end;justify-content:space-between;gap:2px}
.fb-eq-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0}
.fb-eq-sep{width:1px;align-self:stretch;background:#0e1116;box-shadow:1px 0 0 #565d68;margin:0 2px}
.fb-eq-db{font-size:8px;color:#8a92a0;font-family:'Consolas',monospace;min-height:10px}
/* Vertical EQ sliders - modern writing-mode approach only. Mixing the deprecated
   -webkit-appearance:slider-vertical WITH writing-mode offset the thumb off the track's
   centre. Track fills the input width and paints only a centred 5px groove, so the wider
   thumb straddles it symmetrically. */
.fb-vslider{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:14px;height:66px;background:transparent;accent-color:#2fd3e8;cursor:pointer}
.fb-vslider::-webkit-slider-runnable-track{width:14px;height:100%;border-radius:3px;background:linear-gradient(#12161c,#20252d) no-repeat center / 5px 100%}
.fb-vslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:8px;border-radius:2px;background:linear-gradient(#d0d5de,#8b9099);border:1px solid #0e1116;box-shadow:0 0 4px rgba(47,211,232,.7)}
.fb-vslider::-moz-range-track{width:5px;height:100%;border-radius:3px;background:linear-gradient(#12161c,#20252d)}
.fb-vslider::-moz-range-thumb{width:14px;height:8px;border-radius:2px;background:linear-gradient(#d0d5de,#8b9099);border:1px solid #0e1116;box-shadow:0 0 4px rgba(47,211,232,.7)}
.fb-eq-flabel{font-size:8px;color:#8a92a0;font-weight:700;letter-spacing:.3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-eq-pre .fb-eq-flabel{color:#2fd3e8}

/* playlist window */
.fb-pl-list{height:172px;overflow-y:auto;background:#080b0e;border:1px solid #04070a;border-radius:3px;box-shadow:inset 0 0 8px rgba(0,0,0,.85);padding:3px}
.fb-pl-item{display:flex;align-items:center;gap:6px;padding:2px 5px;font-size:11px;color:#8fcede;font-family:'Consolas','SF Mono',monospace;border-radius:2px;cursor:pointer;white-space:nowrap}
.fb-pl-item:hover{background:rgba(47,211,232,.08)}
.fb-pl-item.sel{background:rgba(255,255,255,.14);box-shadow:inset 2px 0 0 #2fd3e8}
.fb-pl-item.active{background:rgba(47,211,232,.14);color:#2fd3e8;text-shadow:0 0 5px rgba(47,211,232,.5)}
.fb-pl-num{color:#4a7d8d;flex:0 0 auto;min-width:20px;text-align:right}
.fb-pl-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.fb-pl-dur{flex:0 0 auto;color:#5a869a}
.fb-pl-empty{padding:14px 8px;text-align:center;font-size:11px;color:#5a869a}
.fb-pl-foot{display:flex;align-items:center;gap:5px;margin-top:7px}
.fb-pl-btn{font-size:9px;font-weight:800;letter-spacing:.5px;min-width:34px}
.fb-pl-total{font-size:10px;color:#8fcede;font-family:'Consolas',monospace;margin-left:4px}
.fb-credit{margin-left:auto;font-size:8px;letter-spacing:1px;color:#5a616b;font-weight:700;text-transform:uppercase;cursor:help}
/* ADD/load picker popup */
.fb-add-pop{position:fixed;z-index:10200;width:240px;max-height:60vh;overflow-y:auto;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.05) 1px 2px),linear-gradient(#4c515a,#2a2e34);border:1px solid #0e1116;border-radius:5px;box-shadow:0 12px 34px rgba(0,0,0,.6),inset 0 1px 0 #5a616c;user-select:none}
.fb-add-head{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#aeb6c4;text-transform:uppercase;padding:6px 10px;background:linear-gradient(#3b4049,#20242a);border-bottom:1px solid #0d1015;border-radius:4px 4px 0 0}
.fb-add-list{padding:4px}
.fb-add-sep{font-size:8px;font-weight:800;letter-spacing:1px;color:#5a616b;text-transform:uppercase;padding:6px 8px 3px}
.fb-add-row{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:11px;color:#8fcede;font-family:'Consolas','SF Mono',monospace;border-radius:3px;cursor:pointer}
.fb-add-row:hover{background:rgba(47,211,232,.12);color:#2fd3e8}
.fb-add-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-add-cnt{flex:0 0 auto;color:#5a869a;font-size:10px}
.fb-add-empty{padding:10px 8px;text-align:center;font-size:10px;color:#5a869a}

/* mobile: stack the three windows in a scrollable centred column */
#fb-overlay.fb-mobile{pointer-events:auto;overflow-y:auto;background:rgba(4,7,9,.85);display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 70px}
#fb-overlay.fb-mobile .fb-win{position:relative!important;left:auto!important;top:auto!important;width:94vw;max-width:390px}
#fb-overlay.fb-mobile .fb-main{max-height:none}
#fb-overlay.fb-mobile .fb-scroll{overflow:visible}

/* Dialogue (subtitle) search - "Found in dialogue" shelf: one row per movie, all occurrences listed */
.dlg-results{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.dlg-movie{display:flex;gap:14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.dlg-movie-poster{flex:0 0 68px;width:68px;height:100px;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--bg-card)}
.dlg-movie-poster img{width:100%;height:100%;object-fit:cover}
.dlg-movie-body{flex:1;min-width:0}
.dlg-movie-title{font-size:14px;font-weight:600;color:var(--text-primary);cursor:pointer;margin-bottom:8px}
.dlg-movie-title:hover{color:var(--accent)}
.dlg-movie-year{color:var(--text-secondary);font-weight:400}
.dlg-movie-count{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);padding:2px 7px;border-radius:10px;vertical-align:1px}
.dlg-occ-list{display:flex;flex-direction:column;gap:4px}
.dlg-occ{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-radius:6px;padding:6px 8px;cursor:pointer;color:inherit}
.dlg-occ:hover{background:var(--bg-hover)}
.dlg-occ-time{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;min-width:52px}
.dlg-occ-text{flex:1;min-width:0;font-size:13px;font-style:italic;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ Watch Together (WatchTogether) ═══ */
.vp-watchtogether-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:color .2s,border-color .2s;line-height:1}
.vp-watchtogether-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.vp-watchtogether-btn:hover{color:var(--accent);border-color:var(--accent)}
.vp-watchtogether-btn.active{color:var(--accent);border-color:var(--accent)}
.wt-modal-title svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wt-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center}
.wt-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px)}
.wt-modal-card{position:relative;width:min(440px,92vw);max-height:86vh;overflow:auto;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 18px 50px var(--shadow)}
.wt-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.wt-modal-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text-primary)}
.wt-modal-title svg{color:var(--accent)}
.wt-modal-close{background:none;border:none;color:var(--text-secondary);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.wt-modal-close:hover{color:var(--text-primary)}
.wt-modal-body{padding:16px}
.wt-lead{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.wt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.wt-btn-primary{width:100%;background:var(--accent);color:#fff}
.wt-btn-primary:hover{background:var(--accent-hover)}
.wt-btn-danger{width:100%;margin-top:16px;background:transparent;border:1px solid var(--danger);color:var(--danger)}
.wt-btn-danger:hover{background:var(--danger);color:#fff}
.wt-btn-mini{padding:5px 10px;font-size:12px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border)}
.wt-btn-mini:hover{background:var(--bg-hover)}
.wt-sessions-head,.wt-members-head{margin:18px 0 8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.wt-session-list{display:flex;flex-direction:column;gap:8px}
.wt-empty{font-size:13px;color:var(--text-muted);padding:6px 0}
.wt-session{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}
.wt-session:hover{background:var(--bg-hover);border-color:var(--accent)}
.wt-session-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.wt-session-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}
.wt-session-code{font-family:monospace;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--accent)}
.wt-code-row{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-surface);border-radius:var(--radius-sm);margin-bottom:12px}
.wt-code-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.wt-code{font-family:monospace;font-size:20px;font-weight:700;letter-spacing:3px;color:var(--accent);flex:1}
.wt-state{font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.wt-members{display:flex;flex-direction:column;gap:8px}
.wt-member{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-primary)}
.wt-member-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.wt-dot.ok{background:var(--success)}
.wt-dot.buf{background:var(--warning);animation:wt-pulse 1s infinite}
.wt-dot.off{background:var(--text-muted);animation:wt-pulse 1.4s infinite}
@keyframes wt-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.wt-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--accent-dim);color:var(--accent);padding:2px 6px;border-radius:3px}
.wt-buffering{font-size:11px;font-style:italic;color:var(--warning)}
.wt-member-off .wt-member-name{opacity:.55}
.wt-reconnecting{font-size:11px;font-style:italic;color:var(--text-muted)}
.wt-hostonly{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:13px;color:var(--text-primary);cursor:pointer}
.wt-hostonly input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.wt-hostonly-note{margin:10px 0 2px;font-size:12px;font-style:italic;color:var(--text-muted)}
.wt-queue{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}
.wt-q-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-primary);padding:5px 8px;border-radius:5px;background:var(--surface-2,rgba(127,127,127,.08))}
.wt-q-item.clickable{cursor:pointer}
.wt-q-item.clickable:hover{background:var(--surface-3,rgba(127,127,127,.16))}
.wt-q-item.current{background:var(--accent-dim);color:var(--accent)}
.wt-q-idx{flex:0 0 auto;width:18px;text-align:center;font-size:11px;color:var(--text-muted)}
.wt-q-item.current .wt-q-idx{color:var(--accent)}
.wt-q-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-q-now{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.wt-q-x{flex:0 0 auto;background:none;border:none;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.wt-q-x:hover{color:var(--danger,#e5533c)}
.wt-q-controls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
/* App update banner - shown when a new service worker (= new build) took control */
#nm-update-banner{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);display:flex;align-items:center;gap:12px;background:#1f2430;color:#fff;padding:12px 16px;border-radius:10px;font-size:13px;font-weight:500;line-height:1.35;z-index:10060;box-shadow:0 8px 24px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);opacity:0;transition:opacity .28s ease,transform .28s ease;max-width:min(520px,calc(100vw - 32px))}
#nm-update-banner.nm-update-show{opacity:1;transform:translate(-50%,0)}
#nm-update-banner button{background:var(--accent,#4d8bf5);color:#fff;border:0;border-radius:6px;padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
#nm-update-banner button:hover{background:var(--accent-hover,#6ba0ff)}
#nm-update-banner button.nm-update-close{background:transparent;color:#aaa;padding:4px 6px;font-size:14px}
#nm-update-banner button.nm-update-close:hover{background:transparent;color:#fff}

/* "Now available" banner - full-width bar across the top when a request finishes downloading */
#nm-available-banner{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px;background:var(--success,#27ae60);color:#fff;padding:12px 40px 12px 16px;font-size:14px;font-weight:600;line-height:1.35;z-index:10070;box-shadow:0 2px 12px rgba(0,0,0,.35);transform:translateY(-100%);transition:transform .28s ease;text-align:center}
#nm-available-banner.nm-available-show{transform:translateY(0)}
#nm-available-banner .nm-available-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;opacity:.8;font-size:16px;line-height:1;cursor:pointer;padding:6px 8px}
#nm-available-banner .nm-available-close:hover{opacity:1}