/* ================= 全站基础与顶部导航 ================= */
/* ================= 全站基础与顶部导航 (视觉精装版) ================= */
body { background-color: #f5f7fa; color: #333; font-family: "Microsoft YaHei", sans-serif; margin: 0; padding: 0; }
a { color: #333; text-decoration: none; transition: 0.3s; }
a:hover { color: #ff6a00; text-decoration: none; }

/* 1. 顶部背景：深邃渐变 + 底部高光线条 */
.header-top { 
    background: linear-gradient(135deg, #242933 0%, #171a21 100%); 
    padding: 15px 0; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    margin-bottom: 20px; 
    border-bottom: 2px solid #ff6a00; 
}

/* 2. Logo：鎏金渐变文字特效 */
.header-top .logo { font-size: 26px; font-weight: bold; margin-right: 30px; display: inline-block; vertical-align: middle; letter-spacing: 1px; }
.header-top .logo a { 
    background: linear-gradient(to right, #ffc371, #ff6a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 2px 10px rgba(255, 106, 0, 0.3);
}

/* 3. 导航菜单：现代 APP 级“胶囊”选中特效 */
.header-nav { display: inline-block; vertical-align: middle; margin: 0; padding: 0; list-style: none; }
.header-nav li { display: inline-block; margin-right: 8px; }
.header-nav li a { 
    color: #a3a9b3; 
    font-size: 16px; 
    font-weight: 500; 
    padding: 6px 16px; 
    border-radius: 20px; 
    transition: all 0.3s ease; 
}
.header-nav li a:hover, .header-nav li a.active { 
    color: #ff6a00; 
    background: rgba(255, 106, 0, 0.15); 
    font-weight: bold; 
}

/* 4. 搜索框：呼吸发光与伸缩交互 */
.header-search { float: right; margin-top: 2px; position: relative; }
.header-search input[type="text"] { 
    border: none; padding: 8px 15px; width: 200px; 
    border-radius: 20px 0 0 20px; outline: none; 
    background: #323843; color: #fff; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
/* 点击搜索框时变白、变长、发光 */
.header-search input[type="text"]:focus { 
    background: #fff; color: #333; width: 250px; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 10px rgba(255,106,0,0.4); 
}
.header-search button { 
    border: none; padding: 8px 22px; background: #ff6a00; color: #fff; 
    border-radius: 0 20px 20px 0; cursor: pointer; transition: 0.2s; font-weight: bold; 
}
.header-search button:hover { background: #e55f00; box-shadow: 0 0 8px rgba(255,106,0,0.5); }



/* ================= 视频列表排版 (适配 movie-item 结构) ================= */
.video-list { background: #fff; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.tag-title-sm { font-size: 18px; font-weight: bold; border-left: 4px solid #ff6a00; padding-left: 10px; margin: 0 0 15px 0; color: #222; }

/* 核心 Flex 布局，控制每行显示数量 */
.movie-item { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.movie-info { width: calc(16.666% - 16px); margin: 0 8px 15px 8px; position: relative; }

.movie-info a.not { display: block; position: relative; overflow: hidden; border-radius: 6px; padding-top: 140%; background: #e9ecef; }
.movie-pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.movie-info:hover .movie-pic { transform: scale(1.05); }

/* 文字与角标 */
.movie-info-format { margin: 8px 0 2px 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.movie-info-remarks { margin: 0; font-size: 12px; color: #fff; position: absolute; bottom: 35px; right: 5px; background: rgba(0,0,0,0.7); padding: 2px 6px; border-radius: 4px; pointer-events: none; }

/* ================= 响应式自适应 (手机端排版) ================= */
@media (max-width: 1200px) { .movie-info { width: calc(20% - 16px); } }
@media (max-width: 992px) { .movie-info { width: calc(25% - 16px); } }
@media (max-width: 768px) { 
    .movie-info { width: calc(33.333% - 16px); } 
    
    /* 手机端顶部微调 */
    .header-top { padding: 12px 0 15px 0; }
    
    /* Logo 居中并增加底部间距 */
    .header-top .logo { display: block; text-align: center; margin: 0 0 15px 0; font-size: 24px; }
    
 /* 🚀 导航栏：增加右侧渐隐特效，暗示可滑动 */
 .header-nav { 
    display: flex; 
    overflow-x: auto; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    margin-bottom: 18px; 
    /* 右侧额外增加 40px 的内边距，确保滑到最后时，最后一项能完全露出不被遮挡 */
    padding: 0 40px 0 5px; 
    scrollbar-width: none; 
    
    /* 核心科技：CSS 遮罩，85%之前是实体，85%到100%逐渐变透明 */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.header-nav::-webkit-scrollbar { display: none; }
.header-nav li { margin-right: 5px; }
.header-nav li a { font-size: 14px; padding: 6px 14px; }

/* 🚀 手机端筛选条件：同样增加右侧渐隐特效 */
.filter-list { 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    width: 100%; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    padding-right: 40px; /* 右侧留白 */
    
    /* 同款渐隐遮罩 */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.filter-list::-webkit-scrollbar { display: none; }
.filter-list a { white-space: nowrap; font-size: 13px; padding: 4px 10px; }
    .sort-box { flex-wrap: wrap; }
    
    /* 手机端分页缩小 */
    div.page { font-size: 12px; }
    div.page em, div.page span.pagenow, div.page a.pagelink_a, div.page a.pagelink_b { padding: 4px 10px; margin: 0 2px; }
}
@media (max-width: 576px) { .movie-info { width: calc(50% - 16px); } }






/* ================= 列表页筛选条件面板 ================= */
.filter-box { background: #fff; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.filter-line { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px dashed #eee; padding: 10px 0; }
.filter-line:last-child { border-bottom: none; }
.filter-label { font-weight: bold; color: #666; margin-right: 15px; font-size: 14px; white-space: nowrap; }
.filter-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.filter-list a { color: #333; font-size: 14px; padding: 4px 12px; border-radius: 4px; transition: 0.2s; }
.filter-list a:hover { color: #ff6a00; background: #fff3eb; }
/* 🚀 新增：被选中的分类高亮样式 */
.filter-list a.active { color: #fff; background: #ff6a00; font-weight: bold; box-shadow: 0 2px 4px rgba(255,106,0,0.3); }
/* ================= 排序栏 ================= */
.sort-box { background: #f9f9f9; padding: 10px 15px; border-radius: 6px; margin-bottom: 20px; display: flex; gap: 10px; align-items: center; border: 1px solid #eee; }
.sort-label { color: #888; font-size: 14px; margin-right: 5px; font-weight: bold; }
.sort-box a { color: #555; font-size: 13px; padding: 5px 15px; border-radius: 4px; background: #fff; border: 1px solid #ddd; }
.sort-box a:hover { color: #ff6a00; border-color: #ff6a00; }

/* ================= 强制覆盖系统默认的 page 分页样式 ================= */
div.page { clear: both; text-align: center; margin: 30px 0; font-size: 14px; color: #666; padding-bottom: 20px; line-height: 30px; }
div.page em, 
div.page span.pagenow, 
div.page a.pagelink_a, 
div.page a.pagelink_b { display: inline-block; padding: 4px 14px; margin: 0 3px; border-radius: 4px; border: 1px solid #ddd; background: #fff; color: #333; font-style: normal; text-decoration: none; transition: 0.2s; line-height: normal; }
div.page span.pagenow { background: #ff6a00; color: #fff; border-color: #ff6a00; font-weight: bold; }
div.page a.pagelink_a:hover, 
div.page a.pagelink_b:hover { background: #ff6a00; color: #fff; border-color: #ff6a00; }
div.page input.pagego { width: 45px; text-align: center; padding: 4px; border: 1px solid #ddd; border-radius: 4px; margin: 0 5px; outline: none; }
div.page input.pagebtn { padding: 4px 12px; border: none; background: #333; color: #fff; border-radius: 4px; cursor: pointer; transition: 0.2s; }
div.page input.pagebtn:hover { background: #ff6a00; }

/* ================= 响应式自适应 (手机端排版 & 筛选横向滑动) ================= */
@media (max-width: 1200px) { .movie-info { width: calc(20% - 16px); } }
@media (max-width: 992px) { .movie-info { width: calc(25% - 16px); } }
@media (max-width: 768px) { 
    .movie-info { width: calc(33.333% - 16px); } 
  
    
    /* 🚀 手机端筛选条件横向滑动核心代码 */
    .filter-box { padding: 12px; }
    .filter-line { flex-direction: column; align-items: flex-start; padding: 8px 0; }
    .filter-label { margin-bottom: 6px; width: 100%; font-size: 13px; }
    .filter-list { 
        flex-wrap: nowrap; /* 强制不换行 */
        overflow-x: auto;  /* 开启横向滚动 */
        width: 100%; 
        -webkit-overflow-scrolling: touch; /* 开启 iOS 惯性滑动 */
        scrollbar-width: none; /* Firefox 隐藏滚动条 */
    }
    .filter-list::-webkit-scrollbar { display: none; /* Chrome/Safari 隐藏滚动条 */ }
    .filter-list a { white-space: nowrap; /* 按钮文字不换行 */ font-size: 13px; padding: 4px 10px; }
    
    .sort-box { flex-wrap: wrap; }
    
    /* 手机端分页缩小 */
    div.page { font-size: 12px; }
    div.page em, div.page span.pagenow, div.page a.pagelink_a, div.page a.pagelink_b { padding: 4px 10px; margin: 0 2px; }
}
@media (max-width: 576px) { .movie-info { width: calc(50% - 16px); } }


/* ================= 详情页：图文信息面板 ================= */
.detail-box { background: #fff; padding: 25px 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-wrap: wrap; gap: 25px; }
.detail-pic-wrap { width: 220px; flex-shrink: 0; position: relative; }
.detail-pic-wrap img { width: 100%; border-radius: 6px; display: block; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.detail-info { flex: 1; min-width: 280px; }

.detail-title { margin-top: 0; font-size: 24px; font-weight: bold; color: #222; margin-bottom: 12px; }
.detail-title span { font-size: 14px; font-weight: normal; color: #888; margin-left: 10px; }
.detail-text { font-size: 14px; color: #444; line-height: 2; margin-bottom: 2px; }
.detail-text span.text-muted { color: #888; margin-right: 5px; }
.detail-text a { color: #ff6a00; margin-right: 8px; }
.detail-text a:hover { text-decoration: underline; }

/* 剧情简介区块 */
.detail-desc { margin-top: 15px; background: #f9f9fa; padding: 15px; border-radius: 6px; font-size: 13px; color: #555; line-height: 1.8; border: 1px solid #f0f0f0; }
.detail-desc-title { font-weight: bold; color: #333; margin-bottom: 8px; }

/* ================= 详情页：播放列表面板 ================= */
.play-box { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.play-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 15px; }
.play-title { font-size: 16px; font-weight: bold; margin: 0; color: #333; }
.play-title i { color: #ff6a00; margin-right: 6px; }
.play-list { display: flex; flex-wrap: wrap; gap: 10px; }
.play-list a { padding: 8px 18px; background: #f5f7fa; color: #333; border-radius: 4px; font-size: 14px; transition: 0.2s; border: 1px solid #ebeef5; text-align: center; }
.play-list a:hover { background: #ff6a00; color: #fff; border-color: #ff6a00; }

/* ================= 手机端自适应 ================= */
@media (max-width: 768px) {
    .detail-box { flex-direction: column; padding: 15px; gap: 15px; }
    .detail-pic-wrap { width: 140px; margin: 0 auto; }
    .detail-title { text-align: center; font-size: 18px; }
    .detail-text { font-size: 13px; line-height: 1.8; }
    .play-box { padding: 15px; }
    .play-list a { padding: 6px 12px; font-size: 13px; flex-grow: 1; /* 手机端按钮自动填满空间 */ }
}
/* ================= 详情页：评论区面板 ================= */
.comment-box { background: #fff; padding: 25px 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.comment-title { font-size: 18px; font-weight: bold; border-left: 4px solid #ff6a00; padding-left: 10px; margin: 0 0 15px 0; color: #222; }

/* 输入框区域 */
.comment-form { margin-bottom: 25px; }
.comment-input-area { width: 100%; height: 80px; padding: 12px; border: 1px solid #ebeef5; border-radius: 6px; resize: none; outline: none; font-size: 14px; background: #f9f9fa; margin-bottom: 10px; transition: border 0.3s, background 0.3s; }
.comment-input-area:focus { border-color: #ff6a00; background: #fff; }
.comment-action { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; }
.comment-submit { background: #ff6a00; color: #fff; border: none; padding: 8px 25px; border-radius: 4px; cursor: pointer; transition: 0.2s; font-size: 14px; outline: none; }
.comment-submit:hover { background: #e55f00; }

/* 评论列表区域 (覆盖苹果CMS默认输出的结构) */
#mac_comment { min-height: 50px; }
.mac_comment_list { padding: 0; margin: 0; }
.mac_comment_list li { border-bottom: 1px dashed #eee; padding: 15px 0; display: block; clear: both; }
.mac_comment_list li:last-child { border-bottom: none; }
.cmt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: #999; }
.cmt-name { color: #ff6a00; font-weight: bold; font-size: 14px; }
.cmt-content { font-size: 14px; color: #444; line-height: 1.6; word-wrap: break-word; }

/* 评论分页 */
#mac_comment .page { margin: 15px 0 0 0; border-top: none; }




/* ================= 播放页：沉浸式播放器与信息面板 ================= */
.player-container { background: #20242b; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }

/* 🚀 修改点：移除强制 16:9 的 padding 和绝对定位，高度由内部播放器决定 */
.player-wrapper { width: 100%; background: #000; border-radius: 4px; overflow: hidden; min-height: 200px;  justify-content: center; align-items: center; }
.player-wrapper iframe, 
.player-wrapper object, 
.player-wrapper embed, 
.player-wrapper video { max-width: 100%; width: 100%; border: none; }

.play-info-box { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.play-info-box h1 { margin-top: 0; margin-bottom: 12px; font-size: 22px; font-weight: bold; color: #222; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.play-info-box h1 .badge { background: #ff6a00; color: #fff; font-size: 13px; font-weight: normal; padding: 4px 8px; border-radius: 4px; }
.play-info-box .play-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: #666; }
.play-info-box .play-meta i { margin-right: 5px; color: #999; }
.play-info-box .play-meta .text-primary { color: #0d6efd; }
.play-info-box .play-meta .text-warning { color: #ff6a00; font-weight: bold; }

/* 手机端适配 */
@media (max-width: 768px) {
    .player-container { padding: 0; border-radius: 0; margin-left: -15px; margin-right: -15px; margin-top: -5px; } 
    .player-wrapper { border-radius: 0; }
    .play-info-box { padding: 15px; }
    .play-info-box h1 { font-size: 18px; }
    .play-info-box .play-meta { gap: 12px; }
}






/* ================= 搜索页：空状态提示 ================= */
.empty-state { text-align: center; padding: 60px 20px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.empty-state i { font-size: 50px; color: #ddd; margin-bottom: 15px; }
.empty-state h3 { font-size: 18px; color: #333; margin-bottom: 10px; font-weight: bold; }
.empty-state p { font-size: 14px; color: #888; margin: 0; }