/*
Theme Name: StreamForge V17.6 (Chameleon Layout Fix)
Version: 17.6
Description: 修复后台布局设置无效的问题，全面适配动态类名
*/

: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; }

body {
    background: var(--bg-body); 
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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 { font-family: inherit; }

/* ==========================================================================
   1. 头部导航 (适配动态类)
   ========================================================================== */
[class*="site-header"] {
    height: var(--nav-height); 
    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);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

body.admin-bar [class*="site-header"] { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar [class*="site-header"] { top: 46px !important; } }

[class*="header-inner"] {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex !important;
    align-items: center !important; 
    justify-content: space-between;
    position: relative;
    padding-top: 4px; /* 视觉微调 */
}

/* Logo */
[class*="site-logo"] { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
[class*="site-logo"] a { 
    display: flex; align-items: center; gap: 10px; 
    font-size: 1.4rem; font-weight: 900; color: var(--text-main); 
    text-transform: uppercase; letter-spacing: -0.5px;
    line-height: 1; 
}
[class*="site-logo"] svg { width: 32px; height: 32px; fill: var(--accent); max-width: 32px; }

/* 桌面导航 */
[class*="desktop-nav"] { margin: 0 30px; flex: 1; height: 100%; display: flex; align-items: center; }
[class*="desktop-nav"] ul { display: flex; gap: 20px; justify-content: flex-end; width: 100%; margin: 0; align-items: center; }
[class*="desktop-nav"] a { font-size: 0.95rem; font-weight: 600; color: var(--text-sub); opacity: 0.9; display: flex; align-items: center; height: 100%; }
[class*="desktop-nav"] a:hover { color: var(--text-main); opacity: 1; }

/* 头部右侧 */
[class*="header-actions"] { display: flex; align-items: center; gap: 15px; height: 100%; }

/* 搜索框 */
[class*="search-box-fixed"] {
    width: 260px; height: 36px;
    background: rgba(255,255,255,0.08); 
    border: 1px solid transparent; 
    border-radius: 50px; 
    overflow: hidden; 
    transition: 0.3s;
}
[class*="search-box-fixed"]:focus-within { border-color: var(--accent); background: #000; width: 280px; }
[class*="search-box-fixed"] form { display: flex !important; align-items: center !important; width: 100%; height: 100%; margin: 0; }
[class*="search-box-fixed"] input { flex: 1; height: 100%; background: transparent; border: none; color: var(--text-main); padding: 0 15px; font-size: 13px; margin: 0; line-height: normal; }
[class*="search-box-fixed"] button { background: transparent; border: none; color: var(--text-sub); width: 40px; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
[class*="search-box-fixed"] button:hover { color: var(--text-main); }

/* 手机汉堡按钮 */
[class*="mobile-toggle"] { display: none; font-size: 24px; cursor: pointer; color: var(--text-main); padding: 8px; }

/* ==========================================================================
   2. 移动端抽屉 (Mobile Drawer)
   ========================================================================== */
[class*="mobile-drawer"] {
    position: fixed; top: var(--nav-height); left: 0; width: 100%;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 20px;
    transform: translateY(-150%);
    transition: transform 0.3s ease;
    z-index: 990;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    visibility: hidden;
}
[class*="mobile-drawer"].active { transform: translateY(0); visibility: visible; }

[class*="mobile-search-wrapper"] { margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
[class*="mobile-search-wrapper"] form { display: flex; gap: 10px; }
[class*="mobile-search-input"] { flex: 1; height: 44px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 6px; padding: 0 15px; color: var(--text-main); font-size: 14px; -webkit-appearance: none; }
[class*="mobile-search-btn"] { width: 44px; height: 44px; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 16px; display: flex; align-items: center; justify-content: center; }

[class*="mobile-nav"] ul li { border-bottom: 1px solid rgba(255,255,255,0.05); }
[class*="mobile-nav"] ul li a { display: block; padding: 12px 0; font-size: 15px; color: var(--text-sub); }
[class*="mobile-nav"] ul li a:hover { color: var(--accent); padding-left: 5px; }

/* ==========================================================================
   3. 布局与网格 (关键修复：支持动态前缀)
   ========================================================================== */
[class*="header-inner"], [class*="site-footer"] .container { max-width: var(--container); width: 100%; margin: 0 auto; padding: 0 20px; }
.site-main .container { max-width: 1300px !important; width: 100%; margin: 0 auto; padding: 0 20px; }
.site-main { padding: 2px 0; min-height: 80vh; }

/* 基础网格容器 */
[class*="video-grid"] {
    display: grid !important;
    gap: 24px !important;
    margin-bottom: 40px;
    width: 100%;
}

/* ★★★ 关键修改：布局类名现在使用模糊匹配，以适应变色龙前缀 ★★★ */
/* 例如: abcd-grid-4 也能被 [class*="grid-4"] 匹配到 */

[class*="grid-2"] { grid-template-columns: repeat(2, 1fr) !important; }
[class*="grid-3"] { grid-template-columns: repeat(3, 1fr) !important; }
[class*="grid-4"] { grid-template-columns: repeat(4, 1fr) !important; }
[class*="grid-5"] { grid-template-columns: repeat(5, 1fr) !important; }
[class*="grid-6"] { grid-template-columns: repeat(6, 1fr) !important; }

/* 列表模式 */
[class*="list-row"] {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
}

/* ==========================================================================
   4. 卡片样式 (Cards)
   ========================================================================== */
[class*="video-card"] {
    background: var(--bg-surface);
    border-radius: 8px; overflow: hidden;
    transition: transform 0.2s ease;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative; display: flex; flex-direction: column;
}
[class*="video-card"]:hover { transform: translateY(-5px); border-color: var(--accent); z-index: 2; }

[class*="video-thumb"] {
    position: relative; width: 100%; aspect-ratio: 16/9;
    background: #000; overflow: hidden; display: block;
}
[class*="video-thumb"] img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
[class*="video-card"]:hover [class*="video-thumb"] img { transform: scale(1.05); }

/* --- 列表模式特殊样式 (List Row) --- */
/* 注意：这里也改为模糊匹配，确保后台选“列表模式”时生效 */
[class*="list-row"] [class*="video-card"] {
    flex-direction: row !important;
    height: 140px;
    align-items: stretch;
}
[class*="list-row"] [class*="video-thumb"] {
    width: 240px !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    flex-shrink: 0;
}
[class*="list-row"] [class*="video-content"] {
    padding: 15px 20px;
    justify-content: center;
    text-align: left;
}
[class*="list-row"] [class*="video-title"] {
    font-size: 1.1rem;
    height: auto;
    -webkit-line-clamp: 2;
    margin-bottom: 10px;
}

/* 通用组件 */
.no-thumb { width: 100%; height: 100%; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: #555; font-size: 12px; }
[class*="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; font-weight: 700; pointer-events: none; }
[class*="play-overlay"] { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.2s; }
[class*="video-card"]:hover [class*="play-overlay"] { opacity: 1; }
[class*="play-overlay"] svg { width: 48px; height: 48px; fill: #fff; }

[class*="video-content"] { padding: 12px; flex: 1; display: flex; flex-direction: column; }
[class*="video-title"] { margin: 0 0 8px 0; font-size: 0.95rem; line-height: 1.4; height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
[class*="video-title"] a { color: var(--text-main); }
[class*="video-title"] a:hover { color: var(--accent); }
[class*="video-meta"] { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-sub); }
[class*="rating"] { color: #ffc107; font-weight: bold; }

/* ==========================================================================
   5. 首页与分页
   ========================================================================== */
[class*="home-section"] { margin-bottom: 50px; }
[class*="section-header"] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-left: 4px solid var(--accent); padding-left: 15px; }
[class*="section-title"] { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin: 0; }
[class*="section-more"] { font-size: 0.9rem; color: var(--text-sub); background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 4px; }

[class*="pagination"] { margin: 50px 0; width: 100%; display: flex; justify-content: center; }
[class*="pagination"] ul.page-numbers { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; }
[class*="pagination"] .page-numbers li { margin: 0; list-style: none; }
[class*="pagination"] .page-numbers a, [class*="pagination"] .page-numbers span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 4px; font-size: 14px; text-decoration: none; }
[class*="pagination"] .page-numbers.current, [class*="pagination"] .page-numbers a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==========================================================================
   6. 详情页 & 侧边栏
   ========================================================================== */
[class*="watch-layout"] { display: grid; grid-template-columns: 1fr 340px; gap: 40px; }
[class*="player-wrapper"] { width: 100%; aspect-ratio: 16/9; background: #000; margin-bottom: 20px; border-radius: 8px; overflow: hidden; position: relative; }
[class*="video-header"] [class*="real-title"] { font-size: 1.6rem; margin: 20px 0 15px; line-height: 1.3; color: var(--text-main); font-weight: 700; }

[class*="author-bar"] { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
[class*="author-info"] { display: flex; align-items: center; gap: 12px; }
[class*="author-avatar-link"] { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; background: #333; display: block; flex-shrink: 0; }
[class*="video-interactions"] { display: flex; gap: 15px; align-items: center; margin-left: auto; }
.stat-badge { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-main); padding: 6px 15px; border-radius: 20px; cursor: pointer; }

[class*="video-desc"] { margin: 30px 0; color: var(--text-sub); line-height: 1.8; font-size: 1rem; }
[class*="sidebar-title"] { font-size: 1.2rem; margin-bottom: 20px; border-left: 4px solid var(--accent); padding-left: 12px; color: var(--text-main); font-weight: 700; }
[class*="side-item"] { display: flex; gap: 12px; margin-bottom: 15px; text-decoration: none; }
[class*="side-thumb"] { width: 130px; aspect-ratio: 16/9; background: #222; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
[class*="side-info"] h4 { font-size: 0.9rem; margin: 0; line-height: 1.4; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   7. 页脚 (Footer)
   ========================================================================== */
[class*="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); }
[class*="footer-widgets"] { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; margin-bottom: 40px; }
[class*="footer-logo"] a { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 900; color: var(--text-main); text-transform: uppercase; }
[class*="footer-logo"] svg { width: 32px !important; height: 32px !important; fill: var(--accent); }
[class*="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; text-decoration: none; color: var(--text-sub); }
[class*="footer-copyright"] { border-top: 1px solid var(--border); padding-top: 30px; text-align: center; font-size: 13px; color: #666; }

/* ==========================================================================
   8. 响应式适配
   ========================================================================== */
@media (max-width: 1024px) {
    [class*="grid-4"] { grid-template-columns: repeat(3, 1fr) !important; }
    [class*="watch-layout"] { grid-template-columns: 1fr; gap: 40px; }
    [class*="header-inner"], [class*="site-footer"] .container { padding: 0 20px; } 
    .site-main .container { padding: 0 50px; } 
}

@media (max-width: 900px) {
    [class*="desktop-nav"], [class*="search-box-fixed"] { display: none !important; }
    [class*="mobile-toggle"] { display: block !important; margin-left: auto; }
    [class*="footer-widgets"] { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    [class*="footer-logo"], [class*="footer-logo"] a { justify-content: center; }
    [class*="section-header"] { padding-left: 0; border-left: none; border-bottom: 2px solid var(--accent); padding-bottom: 10px; display: block; }
    [class*="section-title"] { display: inline-block; }
    [class*="section-more"] { float: right; }
    body.admin-bar [class*="site-header"] { top: 46px !important; }
    body.admin-bar [class*="mobile-drawer"] { top: 110px !important; }
}

@media (max-width: 768px) {
    [class*="header-inner"], [class*="site-footer"] .container { padding: 0 15px !important; }
    .site-main .container { padding: 0 28px !important; }
    
    /* 修复手机端列数 */
    [class*="grid-4"], [class*="grid-3"], [class*="grid-5"] { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important; 
    }
}

@media (max-width: 480px) {
    .site-main .container { padding: 0 24px !important; }
    [class*="grid-4"], [class*="grid-3"], [class*="grid-5"] { grid-template-columns: 1fr !important; }
    [class*="side-thumb"] { width: 110px; }
}

/* ==========================================================================
   9. 紧急修复补丁
   ========================================================================== */
.sf-share-btn svg { width: 20px !important; height: 20px !important; max-width: 20px !important; display: block; }
.sf-share-bar { display: flex; gap: 10px; margin-top: 10px; }
[class*="fake-comment-item"] { display: flex !important; gap: 15px; margin-bottom: 25px; align-items: flex-start; }
[class*="fc-avatar"] { width: 40px !important; height: 40px !important; border-radius: 50%; text-align: center; line-height: 40px; color: #fff; font-weight: bold; flex-shrink: 0; font-size: 16px; }
[class*="fc-content"] { flex: 1; display: flex; flex-direction: column; }
[class*="fc-header"] { margin-bottom: 4px; }
[class*="author-info"] { display: flex; align-items: center; gap: 12px; }
[class*="author-avatar-link"] { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #333; display: block; flex-shrink: 0; }
[class*="author-avatar-link"] img { width: 100%; height: 100%; object-fit: cover; }
.author-meta-text span:first-child { color: #ffffff !important; font-size: 15px; font-weight: bold; }
/* ==========================================================================
   分页导航修复 (Pagination Fix)
   ========================================================================== */

/* 1. 分页外层容器 (支持变色龙动态类名) */
[class*="pagination"] {
    margin: 60px 0; /* 增加上下间距 */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    clear: both;
}

/* 2. WordPress 默认生成的内部容器 (.nav-links) */
[class*="pagination"] .nav-links {
    display: flex;
    gap: 10px; /* 按钮之间的间距 */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* 3. 分页按钮通用样式 (数字、上一页、下一页) */
[class*="pagination"] .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; /* 稍微加大按钮尺寸，更易点击 */
    height: 44px;
    padding: 0 15px;
    
    background: var(--bg-surface); /* 使用卡片背景色 */
    border: 1px solid var(--border); /* 边框 */
    color: var(--text-sub); /* 默认文字颜色 */
    
    border-radius: 6px; /* 圆角 */
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1;
    cursor: pointer;
}

/* 4. 激活状态 (当前页) */
[class*="pagination"] .page-numbers.current {
    background: var(--accent); /* 品牌色背景 */
    border-color: var(--accent);
    color: #fff; /* 白色文字 */
    transform: scale(1.05); /* 稍微放大 */
    box-shadow: 0 4px 10px rgba(237, 105, 4, 0.3); /* 添加发光阴影 */
    cursor: default;
}

/* 5. 鼠标悬停状态 */
[class*="pagination"] a.page-numbers:hover {
    background: #fff; /* 悬停变白 */
    border-color: #fff;
    color: #000; /* 文字变黑 */
    transform: translateY(-2px); /* 上浮效果 */
}

/* 6. 省略号 (...) 的特殊样式 */
[class*="pagination"] .page-numbers.dots {
    background: transparent;
    border: none;
    color: var(--text-sub);
    min-width: auto;
    cursor: default;
}
[class*="pagination"] .page-numbers.dots:hover {
    background: transparent;
    border: none;
    color: var(--text-sub);
    transform: none;
}

/* 7. 上一页/下一页 图标修正 */
[class*="pagination"] .prev, 
[class*="pagination"] .next {
    font-family: Arial, sans-serif; /* 确保箭头符号显示正常 */
}
/* ==========================================================================
   视觉微调：顶部元素整体下移 (Logo + 导航 + 搜索框)
   ========================================================================== */

/* 1. 统一选中这三个模块，给它们加一个相对定位 */
[class*="site-logo"],           /* 网站 Logo 和标题 */
[class*="desktop-nav"] ul,      /* 中间导航菜单 */
[class*="search-box-fixed"] {   /* 右侧搜索框 */
    position: relative;
    top: 12px;  /* ★ 调节这个数字：越大越往下，越小越往上 */
}

/* 2. (可选) 如果觉得搜索框里面的 🔍 图标和文字不对齐，可以单独微调它 */
[class*="search-box-fixed"] form {
    position: relative;
    top: 1px; /* 搜索框内部内容微调 */
}
/* ==========================================================================
   移动端修复：菜单按钮下移 (与 Logo 平行)
   ========================================================================== */
@media (max-width: 768px) {
    /* 选中常见的手机菜单按钮类名 */
    button.menu-toggle,
    [class*="mobile-toggle"],
    [class*="navbar-toggle"],
    .main-navigation button {
        position: relative;
        top: 10px; /* 保持和 Logo 一样的下移数值 */
        /* 如果觉得还是不对齐，可以微调这个数字，比如 4px 或 6px */
    }
}