/*
Theme Name: StreamForge V110.0 (Final Fix)
Version: 110.0
Description: 修复了媒体查询未闭合导致的PC端样式丢失问题。
*/

:root {
    --nav-height: 72px;
    --container: 1400px;
    --accent: #E50914;
    --bg-body: #0a0a0a; --bg-header: #0a0a0a; --bg-surface: #141414; --bg-footer: #141414;
    --text-main: #ffffff; --text-sub: #a3a3a3; --border: #333333;
}

/* 0. 基础重置 */
* { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg-body); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6; padding-top: var(--nav-height); overflow-x: hidden; margin: 0; }
a { text-decoration: none; color: inherit; transition: all 0.2s ease; } a:hover { color: var(--accent); }
ul, li { list-style: none !important; margin: 0; padding: 0; }
img { max-width: 100%; display: block; border: 0; }
button, input, textarea, select { font-family: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; background: transparent; }

/* ==========================================================================
   1. 顶部导航 (强制修复下拉菜单)
   ========================================================================== */
.site-header { 
    height: 72px; background: var(--bg-header); border-bottom: 1px solid var(--border); 
    position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 99999; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); backdrop-filter: blur(20px); transition: all 0.3s ease;
    /* ★ 核心：允许溢出，否则切断下拉菜单 ★ */
    overflow: visible !important; 
}
body.admin-bar .site-header { top: 32px !important; }

/* 容器 & 内胆 */
.site-header .container { 
    height: 100%; width: 100%; display: flex; justify-content: center; 
    overflow: visible !important; /* 关键 */
}
.header-inner { 
    width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; 
    height: 100%; display: flex; align-items: center; justify-content: space-between; 
    overflow: visible !important; /* 关键 */
    position: relative;
}

/* Logo */
.site-logo { flex-shrink: 0; z-index: 100; }
.site-logo a { display: flex; align-items: center; font-size: 1.4rem; font-weight: 900; color: var(--text-main); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.site-logo a svg { margin-right: 10px; width: 32px; height: 32px; fill: var(--accent); }

/* --- 桌面菜单 (Desktop Nav) --- */
.desktop-nav { 
    margin: 0 30px; flex: 1; height: 100%; 
    display: flex; align-items: center; 
    overflow: visible !important; 
}
.desktop-nav > ul { display: flex; justify-content: flex-end; align-items: center; width: 100%; margin: 0; height: 100%; }
.desktop-nav li { position: relative; height: 100%; display: flex; align-items: center; margin-left: 20px; }
.desktop-nav a { font-size: 0.95rem; font-weight: 600; color: var(--text-sub); opacity: 0.9; display: flex; align-items: center; height: 100%; white-space: nowrap; }
.desktop-nav a:hover { color: var(--text-main); opacity: 1; }

/* ★ 下拉菜单 (Sub Menu) ★ */
.desktop-nav .sub-menu, .desktop-nav .children { 
    display: none; /* 默认隐藏 */
    position: absolute; top: 100%; left: -20px; 
    min-width: 180px; background: #1a1a1a; 
    border-top: 3px solid var(--accent); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
    padding: 10px 0; z-index: 999999; 
    border-radius: 0 0 4px 4px;
}
/* 鼠标滑过显示 */
.desktop-nav li:hover > .sub-menu, .desktop-nav li:hover > .children { display: block; animation: sfFadeIn 0.2s; }
.desktop-nav .sub-menu li { display: block; width: 100%; height: auto; margin: 0; }
.desktop-nav .sub-menu a { 
    display: block; padding: 12px 20px; height: auto; 
    border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; font-weight: normal; 
}
.desktop-nav .sub-menu a:hover { background: #222; color: #fff; padding-left: 25px; transition: 0.2s; }
@keyframes sfFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* 搜索框 */
.header-actions { display: flex; align-items: center; height: 100%; }
.header-actions > * { margin-left: 15px; }
.search-box-fixed { width: 280px; height: 38px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; overflow: hidden; display: flex; align-items: center; }
.search-box-fixed:focus-within { border-color: var(--accent); background: #000; width: 300px; }
.search-box-fixed form { display: flex !important; width: 100%; height: 100%; margin: 0; }
.search-box-fixed input { flex: 1; height: 100%; background: transparent; border: none; color: var(--text-main); padding: 0 15px; font-size: 13px; outline: none; }
.search-box-fixed button { background: transparent; border: none; color: var(--text-sub); width: 50px; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }

/* 移动端菜单 (默认隐藏) */
.mobile-toggle { display: none; font-size: 24px; cursor: pointer; color: var(--text-main); padding: 8px; }
.mobile-drawer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #0a0a0a; padding: 80px 20px 20px 20px; transform: translateY(-150%); transition: 0.3s; z-index: 999999; visibility: hidden; }
.mobile-drawer.active { transform: translateY(0); visibility: visible; }
.mobile-search-input { width: 100%; height: 44px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 6px; padding: 0 15px; color: #fff; margin-bottom: 20px; }
.mobile-nav li a { display: block; padding: 15px 0; font-size: 16px; color: #ddd; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* --- 风格定义 (PC端) --- */
/* Style 1: 标准风格 */
body.header-standard { padding-top: 72px !important; }
.header-standard .desktop-nav { flex: 1; margin: 0 40px; }
.header-standard .desktop-nav > ul { justify-content: flex-end; }

/* Style 2: 资源搜索 (App) */
body.header-app { padding-top: 80px !important; }
body.header-app .site-header { height: 80px; }
.header-app .header-inner { gap: 30px; }
.header-app .header-actions { flex: 1; max-width: 600px; order: 2; margin: 0; }
.header-app .search-box-fixed { width: 100%; background: #222; border: 1px solid #333; height: 44px; }
.header-app .search-box-fixed:focus-within { background: #000; border-color: var(--accent); }
.header-app .desktop-nav { flex: 0; min-width: auto; order: 3; margin: 0; }
.header-app .desktop-nav > ul > li { margin-left: 20px; }

/* ==========================================================================
   2. 核心布局 & 首页模块 (PC端)
   ========================================================================== */
.container { max-width: var(--container); width: 100%; margin: 0 auto; padding: 0 20px; }
.site-main { padding: 30px 0; min-height: 80vh; }

/* 强制网格 */
[class*="video-grid"], .archive-grid, .related-grid, ul.products {
    display: grid !important; gap: 20px 15px !important; margin-bottom: 40px; width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
}
/* 强制执行列数 */
.grid-2, [class*="video-grid"].grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3, [class*="video-grid"].grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4, [class*="video-grid"].grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid-5, [class*="video-grid"].grid-5 { grid-template-columns: repeat(5, 1fr) !important; }
.grid-6, [class*="video-grid"].grid-6 { grid-template-columns: repeat(6, 1fr) !important; }
.list-row, [class*="video-grid"].list-row { grid-template-columns: 1fr !important; gap: 15px !important; }

/* 视频卡片 */
.video-card { background: transparent; overflow: hidden; position: relative; display: flex; flex-direction: column; border: none; transition: transform 0.2s; border-radius: 4px; }
.video-card:hover { transform: translateY(-3px); z-index: 2; }
.video-thumb { width: 100%; aspect-ratio: 2/3 !important; background: #222; border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.no-thumb { width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: #555; }
.duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.8); color: #fff; padding: 2px 6px; font-size: 11px; border-radius: 4px; }
.play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.2s; }
.video-card:hover .play-overlay { opacity: 1; }
.play-overlay svg { width: 48px; height: 48px; fill: #fff; }
.video-content { padding: 10px 0 0 0; flex: 1; display: flex; flex-direction: column; }
.video-title { margin: 0 0 5px 0; font-size: 0.95rem; line-height: 1.4; font-weight: normal; max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; }
.video-title a { color: #ddd; } .video-title a:hover { color: #fff; }
.video-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #666; padding: 0 5px; }
.rating { color: #ffc107; font-weight: bold; }

/* 列表模式 */
.list-row .video-card { flex-direction: row !important; height: 200px; background: var(--bg-surface); border: 1px solid var(--border); padding: 15px; }
.list-row .video-thumb { width: 135px !important; height: 100% !important; aspect-ratio: 2/3 !important; flex-shrink: 0; margin-right: 20px; }
.list-row .video-content { padding: 0; justify-content: center; align-items: flex-start; }

/* 纯文字模式 */
.text-list, [class*="video-grid"].text-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 30px !important; }
.text-list .video-card { flex-direction: row !important; align-items: center; background: transparent; border-bottom: 1px dashed rgba(255,255,255,0.1); padding: 10px 5px; height: auto !important; border-radius: 0; }
.text-list .video-card:hover { transform: none; background: rgba(255,255,255,0.02); }
.text-list .video-title { text-align: left; margin: 0; flex: 1; font-size: 15px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-list .video-title a::before { content: "•"; color: var(--accent); margin-right: 8px; font-weight: bold; }
.text-list .video-meta { margin-left: 10px; font-size: 12px; color: #555; }

/* 排行榜模式 */
.rank-list, [class*="video-grid"].rank-list { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 30px !important; }
.rank-list .video-card { flex-direction: row !important; height: 100px !important; background: var(--bg-surface); border: 1px solid var(--border); padding: 10px; align-items: center; position: relative; overflow: visible; }
.rank-badge { position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; background: #444; color: #fff; font-size: 12px; font-weight: bold; font-style: italic; display: flex; align-items: center; justify-content: center; border-radius: 4px; z-index: 5; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
.rank-badge.rank-1 { background: #ff4757; } .rank-badge.rank-2 { background: #ff9f43; } .rank-badge.rank-3 { background: #feca57; color: #333; }
.rank-list .video-thumb { width: 60px !important; height: 100% !important; aspect-ratio: 2/3 !important; flex-shrink: 0; margin-right: 15px; border-radius: 3px; }
.rank-list .video-content { padding: 0; justify-content: center; align-items: flex-start; }
.rank-list .video-title { text-align: left; font-size: 15px; margin-bottom: 5px; -webkit-line-clamp: 1; }
.rank-list .rating { font-size: 12px; }

/* 模块通用 */
.home-section { margin-bottom: 50px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-left: 4px solid var(--accent); padding-left: 15px; }
.section-title { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin: 0; }
.section-more { font-size: 0.9rem; color: var(--text-sub); background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 4px; }
.pagination { margin: 50px 0; width: 100%; display: flex; justify-content: center; }
.pagination ul.page-numbers { display: flex; gap: 5px; }
.pagination .page-numbers a, .pagination .page-numbers span { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 4px; }
.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 页脚 */
.site-footer { margin-top: 80px; border-top: 1px solid var(--border); padding: 60px 0 30px; background-color: var(--bg-footer) !important; color: var(--text-sub); }
.footer-widgets { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; margin-bottom: 40px; }
.footer-logo a { display: flex; align-items: center; font-size: 1.5rem; font-weight: 900; color: var(--text-main); text-transform: uppercase; }
.tag-cloud-style a { display: inline-block; padding: 5px 12px; margin: 0 5px 8px 0; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 4px; font-size: 13px; color: var(--text-sub); }
.footer-copyright { border-top: 1px solid var(--border); padding-top: 30px; text-align: center; font-size: 13px; color: #666; }

/* 详情页 */
.watch-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.player-wrapper { width: 100%; aspect-ratio: 16/9; background: #000; margin-bottom: 20px; border-radius: 8px; overflow: hidden; position: relative; }
.sf-vod-info-box { display: flex; gap: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 20px; border-radius: 8px; margin: 20px 0; }
.sf-info-poster { width: 150px; flex-shrink: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.sf-info-poster img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; }
.sf-info-data { flex: 1; }
.sf-info-data ul { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-info-data li { width: 48%; font-size: 14px; color: #ccc; display: flex; }
.sf-info-data li.full-width { width: 100%; }
.sf-info-data .label { color: #777; margin-right: 5px; flex-shrink: 0; }
.hl-status { background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 2px; font-size: 12px; }
.side-item { display: flex; margin-bottom: 15px; }
.side-thumb { width: 90px; aspect-ratio: 2/3 !important; background: #222; flex-shrink: 0; border-radius: 4px; overflow: hidden; margin-right: 12px; }
.side-thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-info h4 { font-size: 0.9rem; margin: 0; line-height: 1.4; color: var(--text-main); }
.sf-playlist-box { margin-top: 20px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 15px; }
.sf-playlist-header { font-size: 16px; font-weight: bold; color: var(--text-main); margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.sf-playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.sf-ep-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-sub); padding: 8px 5px; border-radius: 4px; cursor: pointer; text-align: center; font-size: 13px; transition: all 0.2s; width: 100%; }
.sf-ep-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #666; }
.sf-ep-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; }
/* ==========================================================================
   8. 全局响应式适配 (Mobile Styles) - 放在文件最后
   ========================================================================== */

/* 1024px 以下：平板 */
@media (max-width: 1024px) {
    .watch-layout { grid-template-columns: 1fr; gap: 30px; }
    .right-col { width: 100%; }
    .sidebar-widget { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } 
    /* 平板端列数调整 */
    .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 900px 以下：进入手机模式 */
@media (max-width: 900px) {
    /* 隐藏桌面导航和PC搜索框 */
    .desktop-nav, .search-box-fixed { display: none !important; }
    /* 显示汉堡菜单 */
    .mobile-toggle { display: block !important; margin-left: auto; }
    /* 页脚单列 */
    .footer-widgets { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    
    /* 统一头部高度，避免PC端的大高度影响手机 */
    body.header-standard, body.header-app { padding-top: 60px !important; }
    .site-header, body.header-app .site-header { height: 60px !important; }
    
    /* App模式手机端专用布局 */
    .header-app .header-inner { gap: 10px; justify-content: space-between; }
    .header-app .site-logo a span { display: none; } /* 隐藏文字只留图标 */
    .header-app .site-logo svg { margin: 0; width: 28px; }
    .header-app .header-actions { display: flex !important; flex: 1; max-width: none; order: 2; margin: 0 10px; }
    .header-app .search-box-fixed { display: flex !important; width: 100%; height: 36px; border-radius: 4px; background: #222; }
    .header-app .mobile-toggle { order: 3; margin-left: 0; }
}

/* 768px 以下：大屏手机 */
@media (max-width: 768px) {
    .header-inner, .site-footer .container, .site-main .container { padding: 0 15px; }
    
    /* 强制所有网格为 3 列 */
    [class*="video-grid"], .archive-grid, .related-grid, .sidebar-widget { 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 10px !important; 
    }
    
    /* 覆盖所有网格设置 */
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
    
    /* 列表模式保持单列 */
    .list-row, [class*="video-grid"].list-row { grid-template-columns: 1fr !important; }

    /* 纯文字模式单列 */
    .text-list, [class*="video-grid"].text-list { grid-template-columns: 1fr !important; gap: 0 !important; }
    /* 排行榜单列 */
    .rank-list, [class*="video-grid"].rank-list { grid-template-columns: 1fr !important; gap: 15px !important; }

    .sf-vod-info-box { flex-direction: column; }
    .sf-info-poster { width: 120px; margin: 0 auto; }
    .sf-info-data li { width: 100%; }
}

/* 480px 以下：小屏手机 */
@media (max-width: 480px) {
    /* 维持 3 列 */
    [class*="video-grid"], .archive-grid { grid-template-columns: repeat(3, 1fr) !important; }
}