/* ===== Manba Theme System ===== */

/* Dark Theme (Default) */
:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #14141f;
    --bg-card: #1a1a2e;
    --bg-hover: #22223a;
    --accent: #e91e63;
    --accent2: #ff5722;
    --blue: #2196F3;
    --cyan: #00BCD4;
    --gold: #FFD700;
    --text-primary: #ffffff;
    --text-secondary: #888;
    --text-muted: #555;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --font-family: inherit;
}

body {
    font-family: var(--font-family);
}

/* Light Theme (Cute White) */
:root[data-theme="light"] {
    --bg-primary: #f5f3ff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f0eeff;
    --text-primary: #1a1a2e;
    --text-secondary: #666;
    --text-muted: #999;
}

/* ===== Theme Toggle Button ===== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    width: 100%;
    transition: all 0.2s;
}
.theme-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.theme-toggle-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Mobile Header Toggle */
.theme-toggle-mobile {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-card); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08)); color: var(--text-secondary);
    cursor: pointer; padding: 0; transition: all 0.2s; flex-shrink: 0;
}
.theme-toggle-mobile:hover { color: var(--gold); }
.theme-toggle-mobile svg { width: 20px; height: 20px; fill: currentColor; }

/* Simple page toggle (need-login, need-vip) */
.theme-toggle-simple {
    position: fixed; top: 16px; left: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-card); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08)); color: var(--text-secondary);
    cursor: pointer; z-index: 9999; transition: all 0.2s;
}
.theme-toggle-simple:hover { color: var(--gold); }
.theme-toggle-simple svg { width: 22px; height: 22px; fill: currentColor; }

/* ===== Light Theme - Comprehensive Overrides ===== */

/* Bottom Navigation: 气泡样式在 index.ejs 内定义（--nav-bg / --nav-icon / --nav-text） */

/* Desktop Sidebar */
:root[data-theme="light"] .desktop-sidebar {
    background: #ffffff;
    border-left-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .sidebar-nav-item:hover {
    background: rgba(0,0,0,0.04);
}
:root[data-theme="light"] .sidebar-nav-item.active {
    background: rgba(233,30,99,0.08);
}
:root[data-theme="light"] .sidebar-divider {
    background: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .sidebar-source-item:hover {
    background: rgba(0,0,0,0.04);
}
:root[data-theme="light"] .sidebar-source-section {
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
:root[data-theme="light"] .sidebar-source-section::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
}
:root[data-theme="light"] .sidebar-source-section::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Search Inputs */
:root[data-theme="light"] .search-bar input,
:root[data-theme="light"] .category-search input {
    background: var(--bg-secondary);
    border-color: rgba(233,30,99,0.25);
    color: var(--text-primary);
}
:root[data-theme="light"] .search-bar input::placeholder,
:root[data-theme="light"] .category-search input::placeholder {
    color: var(--text-muted);
}
:root[data-theme="light"] .search-bar input:focus,
:root[data-theme="light"] .category-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(233,30,99,0.2);
}
:root[data-theme="light"] .search-source-select {
    background: var(--bg-secondary);
    border-color: rgba(233,30,99,0.25);
    color: var(--text-primary);
}

/* Banner */
:root[data-theme="light"] .banner-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
:root[data-theme="light"] .banner-card.active {
    box-shadow: 0 4px 20px rgba(233,30,99,0.2);
}
:root[data-theme="light"] .banner-indicators .dot {
    background: rgba(0,0,0,0.35);
    width: 6px;
    height: 6px;
}
:root[data-theme="light"] .banner-indicators .dot.active {
    background: var(--accent);
    box-shadow: 0 0 4px rgba(233,30,99,0.4);
}
:root[data-theme="light"] .movie-poster .score-tag {
    background: rgba(0,0,0,0.5);
}

/* Movie Cards */
:root[data-theme="light"] .movie-card {
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
:root[data-theme="light"] .movie-poster {
    background: #f0f0f0 center/40px no-repeat url('/load.gif');
}

/* Source Switch */
:root[data-theme="light"] .source-switch {
    background: var(--bg-secondary);
    border-color: rgba(0,0,0,0.1);
}

/* Filter Buttons */
:root[data-theme="light"] .filter-btn {
    border-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .source-tab {
    border-color: rgba(0,0,0,0.06);
}

/* VIP Card */
:root[data-theme="light"] .vip-card {
    background: linear-gradient(135deg, #fff8e1 0%, #fce4ec 50%, #e8eaf6 100%);
    border-color: rgba(255,215,0,0.3);
}
:root[data-theme="light"] .vip-card::before {
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
}
:root[data-theme="light"] .vip-card::after {
    background: radial-gradient(circle, rgba(233,30,99,0.1) 0%, transparent 70%);
}
:root[data-theme="light"] .vip-no-status {
    color: var(--text-secondary);
}

/* Plan Cards */
:root[data-theme="light"] .plan-card {
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

/* Menu Items */
:root[data-theme="light"] .menu-item {
    border-bottom-color: rgba(0,0,0,0.05);
}

/* Me Header */
:root[data-theme="light"] .me-header {
    background: linear-gradient(180deg, rgba(233,30,99,0.06) 0%, transparent 100%);
}

/* Modal */
:root[data-theme="light"] .modal-overlay {
    background: rgba(0,0,0,0.3);
}
:root[data-theme="light"] .modal-source-item.active {
    background: rgba(233,30,99,0.06);
}

/* Load More Error */
:root[data-theme="light"] .load-more-error button {
    border-color: rgba(0,0,0,0.1);
}

/* Loading Overlay */
:root[data-theme="light"] #loadingSpinner {
    background: rgba(255,255,255,0.7);
}

/* Play Page */
:root[data-theme="light"] .episode-btn {
    border-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .copy-notification {
    background: rgba(30,30,50,0.85);
}

/* VIP Page */
:root[data-theme="light"] .vip-icon {
    box-shadow: 0 2px 8px rgba(255,215,0,0.2);
}

/* Simple Pages (need-login, need-vip) */
:root[data-theme="light"] .simple-page-body {
    background: var(--bg-primary);
    color: var(--text-primary);
}
:root[data-theme="light"] .simple-page-body p {
    color: var(--text-secondary);
}
:root[data-theme="light"] .simple-page-body .icon {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

:root[data-theme="light"] .source-badge {
    background: linear-gradient(135deg, rgba(233,30,99,0.9), rgba(156,39,176,0.9));
    color: #fff;
}

/* Smooth theme transition */
html { transition: background-color 0.3s ease; }
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* ===== 毛玻璃 UI (Frosted Glass) =====
   说明：--bg-card / --bg-secondary 会被 theme.js 内联注入（即使默认值），
   无法用变量覆盖，故这里用 :root 前缀提高权重直接覆盖 background-color；
   [data-theme] 变体用于压过本文件前文的日间主题覆盖规则。 */

/* 玻璃材质变量 */
:root {
    --glass-bg: rgba(255,255,255,0.07);
    --glass-bg-strong: rgba(26,26,46,0.62);
    --glass-border: rgba(255,255,255,0.12);
    --glass-highlight: rgba(255,255,255,0.1);
    --glass-shadow: 0 4px 18px rgba(0,0,0,0.18);
    --glass-blur: blur(12px) saturate(140%);
    --bg-hover: rgba(255,255,255,0.1);
}
:root[data-theme="light"] {
    --glass-bg: rgba(255,255,255,0.55);
    --glass-bg-strong: rgba(255,255,255,0.85);
    --glass-border: rgba(255,255,255,0.9);
    --glass-highlight: rgba(255,255,255,0.95);
    --glass-shadow: 0 4px 18px rgba(90,60,140,0.12);
    --bg-hover: rgba(255,255,255,0.8);
}

/* 背景光斑装饰（给毛玻璃提供可模糊的色彩层次） */
body::before, body::after {
    content: '';
    position: fixed;
    top: -12%; right: -12%; bottom: -12%; left: -12%;
    z-index: -1;
    pointer-events: none;
}
/* 性能优化：光斑保持静态（全屏 fixed 层动画在低端机持续合成，卡顿明显） */
body::before {
    background:
        radial-gradient(42% 34% at 86% 10%, rgba(233,30,99,0.16), transparent 70%),
        radial-gradient(38% 30% at 8% 30%, rgba(33,150,243,0.13), transparent 70%);
}
body::after {
    background:
        radial-gradient(36% 30% at 16% 86%, rgba(156,39,176,0.14), transparent 70%),
        radial-gradient(30% 26% at 82% 72%, rgba(255,215,0,0.09), transparent 70%);
}
:root[data-theme="light"] body::before {
    background:
        radial-gradient(42% 34% at 86% 10%, rgba(233,30,99,0.1), transparent 70%),
        radial-gradient(38% 30% at 8% 30%, rgba(33,150,243,0.1), transparent 70%);
}
:root[data-theme="light"] body::after {
    background:
        radial-gradient(36% 30% at 16% 86%, rgba(156,39,176,0.08), transparent 70%),
        radial-gradient(30% 26% at 82% 72%, rgba(255,153,0,0.08), transparent 70%);
}
/* 玻璃卡片
   性能：卡片数量多（首页 20-30 张），backdrop-filter 会让每张卡片都实时模糊背景、
   滚动时逐帧重绘，低端机极卡；且卡片下是平坦纯色背景，模糊无视觉效果，
   故只保留半透明+高光，不挂 backdrop-filter。 */
:root .movie-card, :root[data-theme] .movie-card,
:root .menu-group, :root[data-theme] .menu-group,
:root .plan-card, :root[data-theme] .plan-card,
:root .stat-card, :root[data-theme] .stat-card,
:root .section-card, :root[data-theme] .section-card,
:root .modal-box, :root[data-theme] .modal-box {
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}

/* 玻璃胶囊按钮（数量多且背景平坦，不挂 backdrop-filter） */
:root .source-tab, :root[data-theme] .source-tab,
:root .filter-btn, :root[data-theme] .filter-btn,
:root .source-switch, :root[data-theme] .source-switch,
:root .tab-btn.active, :root[data-theme] .tab-btn.active {
    background-color: var(--glass-bg);
    border-color: var(--glass-border);
}

/* 玻璃输入框（背景平坦，不挂 backdrop-filter） */
:root .search-bar input, :root[data-theme] .search-bar input,
:root .category-search input, :root[data-theme] .category-search input,
:root .search-source-select, :root[data-theme] .search-source-select {
    background-color: var(--glass-bg);
    border-color: var(--glass-border);
}
/* 源站下拉箭头在日间主题会被 background 简写覆盖掉，这里补回 */
:root .search-source-select, :root[data-theme] .search-source-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
:root .search-bar input:focus, :root[data-theme] .search-bar input:focus,
:root .category-search input:focus, :root[data-theme] .category-search input:focus {
    border-color: var(--accent);
}

/* 玻璃小件（小元素且背景平坦，不挂 backdrop-filter） */
:root .modal-source-item, :root[data-theme] .modal-source-item,
:root .category-loading-box, :root[data-theme] .category-loading-box,
:root .modal-close, :root[data-theme] .modal-close,
:root .load-more-error button, :root[data-theme] .load-more-error button,
:root .back-btn, :root[data-theme] .back-btn,
:root .theme-toggle-mobile, :root[data-theme] .theme-toggle-mobile,
:root .theme-toggle-simple, :root[data-theme] .theme-toggle-simple,
:root .theme-toggle, :root[data-theme] .theme-toggle,
:root .me-avatar .avatar-placeholder, :root[data-theme] .me-avatar .avatar-placeholder,
:root .user-avatar .avatar-placeholder, :root[data-theme] .user-avatar .avatar-placeholder {
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

/* 剧集/分页按钮：背景平坦，只做半透明不做 backdrop 模糊（省 GPU） */
:root .episode-btn, :root[data-theme] .episode-btn {
    background-color: var(--glass-bg);
    border-color: var(--glass-border);
}
:root .pagination a, :root[data-theme] .pagination a,
:root .pagination span, :root[data-theme] .pagination span {
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

/* 强玻璃（顶栏/信息区/弹窗/侧边栏，需保证文字可读性） */
:root .top-bar, :root[data-theme] .top-bar,
:root .info-section, :root[data-theme] .info-section,
:root .modal-content, :root[data-theme] .modal-content,
:root .desktop-sidebar, :root[data-theme] .desktop-sidebar {
    background-color: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

/* 遮罩层毛玻璃 */
:root .modal-overlay, :root[data-theme] .modal-overlay {
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}
:root .category-loading-overlay, :root[data-theme] .category-loading-overlay {
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* VIP 卡保留原渐变，只加玻璃高光与光晕 */
:root .vip-card, :root[data-theme] .vip-card {
    box-shadow: inset 0 1px 0 rgba(255,215,0,0.15), 0 8px 32px rgba(255,215,0,0.1);
}

/* 日间主题下补齐被玻璃规则压掉的选中态 */
:root[data-theme] .source-tab.active,
:root[data-theme] .filter-btn.active,
:root[data-theme] .episode-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border-color: transparent;
}
:root[data-theme] .plan-card.recommended { border-color: var(--gold); }
:root[data-theme] .plan-card.selected { border-color: var(--accent); }
:root[data-theme] .modal-source-item.active {
    border-color: var(--accent);
    background-color: rgba(233,30,99,0.1);
}
:root .pagination .current, :root[data-theme] .pagination .current {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border-color: transparent;
}
:root .pagination .nav-btn, :root[data-theme] .pagination .nav-btn {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
    border-color: transparent;
}

/* ===== 柔光扫描特效（海报柔光） =====
   一束柔和的白青色光带缓慢扫过海报/轮播图，扫动时淡入淡出。
   纯 CSS：海报容器 ::after 渐变光带 + transform 动画（GPU 合成，不用 left 重排）。
   性能注意：不加 filter/blur（模糊滤镜逐帧重绘极卡），柔光靠渐变多级低透明度
   过渡实现；光带只占 40% 周期扫动、其余时间静止，配合错峰减少同时动画的层数。 */

.movie-poster::after,
.banner-card::after {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -60%;
    width: 60%;
    z-index: 1;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.05) 20%,
        rgba(170,225,255,0.14) 38%,
        rgba(200,238,255,0.22) 50%,
        rgba(170,225,255,0.14) 62%,
        rgba(255,255,255,0.05) 80%,
        rgba(255,255,255,0) 100%);
    animation: softScan 6s ease-in-out infinite;
}
@keyframes softScan {
    0%   { transform: skewX(-18deg) translateX(0);    opacity: 0; }
    10%  { transform: skewX(-18deg) translateX(60%);  opacity: 1; }
    32%  { transform: skewX(-18deg) translateX(380%); opacity: 1; }
    40%  { transform: skewX(-18deg) translateX(430%); opacity: 0; }
    100% { transform: skewX(-18deg) translateX(430%); opacity: 0; }
}
/* 悬停时快速扫过 */
.movie-card:hover .movie-poster::after {
    animation-duration: 1.6s;
}
/* 网格内错峰扫过，形成波浪感 */
.movies-grid .movie-card:nth-child(3n+2) .movie-poster::after { animation-delay: 1.3s; }
.movies-grid .movie-card:nth-child(3n)   .movie-poster::after { animation-delay: 2.6s; }
@media (prefers-reduced-motion: reduce) {
    .movie-poster::after, .banner-card::after { animation: none; }
}

/* ===== 电光描边特效（海报霓虹边） =====
   海报内圈一条青色电光描边 + 内发光脉动（霓虹灯闪动感）。
   性能：描边/内发光全部是静态 box-shadow，只动画 opacity（GPU 合成），
   不逐帧重绘；外层卡片 overflow:hidden 会裁掉外发光，所以光效做在内圈。 */

.movie-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(150,228,255,0.45),
        inset 0 0 2px 1px rgba(220,245,255,0.35),
        inset 0 0 10px rgba(120,215,255,0.30);
    opacity: 0.55;
    animation: electricPulse 5s ease-in-out infinite;
}
/* 网格内错峰脉动，避免同频闪 */
.movies-grid .movie-card:nth-child(3n+2) .movie-poster::before { animation-delay: 1.1s; }
.movies-grid .movie-card:nth-child(3n)   .movie-poster::before { animation-delay: 2.2s; }
/* 占空比：前 42% 周期闪动霓虹、之后静止（低端机持续合成是卡顿主因，静止期 GPU 可休息） */
@keyframes electricPulse {
    0%, 46% { opacity: 0.55; }
    4%  { opacity: 0.95; }
    7%  { opacity: 0.30; }
    12% { opacity: 0.90; }
    17% { opacity: 0.45; }
    26% { opacity: 0.15; }
    30% { opacity: 0.90; }
    37% { opacity: 0.35; }
    42% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .movie-poster::before { animation: none; opacity: 0.55; }
}

/* ===== 按钮电光描边特效 =====
   按钮内圈青色电光描边 + 内发光脉动（霓虹灯闪动感），与海报电光描边同风格。
   性能：描边/内发光全部是静态 box-shadow，只动画 opacity（GPU 合成），
   不逐帧重绘；btn-group 容器不参与，避免布局错乱。 */

button, [class*="btn"]:not(.btn-group) {
    position: relative;
    overflow: hidden;
}
button::before, [class*="btn"]:not(.btn-group)::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(150,228,255,0.55),
        inset 0 0 2px 1px rgba(220,245,255,0.40),
        inset 0 0 8px rgba(120,215,255,0.35);
    opacity: 0.55;
    animation: btnElectric 5s ease-in-out infinite;
}
/* 悬停/按压时脉动加快，通电感更强 */
button:hover::before, button:active::before,
[class*="btn"]:not(.btn-group):hover::before,
[class*="btn"]:not(.btn-group):active::before {
    animation-duration: 1.6s;
    opacity: 0.8;
}
/* 占空比：前 42% 周期闪动、之后静止（同海报电光，低端机省合成） */
@keyframes btnElectric {
    0%, 46% { opacity: 0.55; }
    4%  { opacity: 0.95; }
    7%  { opacity: 0.30; }
    12% { opacity: 0.90; }
    17% { opacity: 0.45; }
    26% { opacity: 0.15; }
    30% { opacity: 0.90; }
    37% { opacity: 0.35; }
    42% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    button::before, [class*="btn"]:not(.btn-group)::before { animation: none; opacity: 0.55; }
}