@charset "UTF-8";
/* ==========================================================================
观影吧 · 暗黑主题覆盖样式 dark-theme.css
适用模板：/template/wdzzz-12/css/style.css （MacCMS）
用法：在公共模板 内，原有 style.css 引用之后再引入本文件即可：
说明：本文件只改配色与背景，不改动任何布局、尺寸、圆角、间距与海报图片。
第一部分重写 CSS 变量，原模板中引用变量的颜色会自动跟随；
第二部分逐个覆盖原 CSS 中写死为白色/浅色的容器、按钮与分隔线。
回退：删除上面这条 引用即可恢复浅色主题。
========================================================================== */
/* --------------------------------------------------------------------------
一、暗黑变量重定义（覆盖原 :root）
-------------------------------------------------------------------------- */
:root {
/* 品牌强调色：深色底上略提亮，保证按钮与链接对比度 */
--primary-pink: #E986BD; /* 原 #FF9ECD 暗黑粉 */
--primary-blue: #6FB7E8; /* 原 #7DD3FC 压暗天蓝 */
--primary-purple: #9D86E8; /* 原 #C4B5FD 暗紫 */
--primary-yellow: #E8C05A; /* 原 #FDE68A 暗金（评分标签） */
--primary-green: #6FCF97; /* 原 #86EFAC 压暗绿 */
--primary-orange: #E8A36A; /* 原 #FDBA74 压暗橙 */
--primary-cyan: #55C8D8; /* 原 #67E8F9 压暗青 */
/* 背景层级 */
--bg-light: #242430; /* 次级面：筛选标签 / 信息块 / 剧集按钮底 */
--bg-white: #1B1B25; /* 卡片面：比页面背景略亮一档 */
--bg-gradient: linear-gradient(160deg, #14141C 0%, #0E0E13 50%, #15111C 100%);
/* 文字层级 */
--text-dark: #F1F2F7; /* 主文字：标题、剧名 */
--text-light: #9AA0B0; /* 次要文字：演员、年份、地区、说明 */
/* 阴影：由粉色柔光改为深色投影 */
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.50);
--shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.65);
}
/* --------------------------------------------------------------------------
二、页面基础
-------------------------------------------------------------------------- */
body {
background: var(--bg-gradient);
background-attachment: fixed;
color: var(--text-dark);
}
/* 页面滚动条（深色） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0E0E13; }
::-webkit-scrollbar-thumb { background: #2E2E3C; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3D3D4E; }
/* --------------------------------------------------------------------------
三、顶部导航栏与页脚（原写死为 95% 不透明白）
-------------------------------------------------------------------------- */
.header {
background: rgba(20, 20, 28, 0.92);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.footer {
background: rgba(20, 20, 28, 0.92);
backdrop-filter: blur(10px);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}
/* logo 文字渐变保留（跟随变量），描边跟随变量，无需额外改 */
/* --------------------------------------------------------------------------
四、导航链接 / 下拉子菜单 / 移动端侧边栏
-------------------------------------------------------------------------- */
.nav-link,
.mobile-nav-link,
.mobile-subnav-link,
.subnav-link {
color: var(--text-dark);
}
/* 一级下拉子菜单（原白底） */
.subnav {
background: #1B1B25;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
/* 移动端侧边栏（原白底） */
.mobile-sidebar {
background: #12121A;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.55);
}
.mobile-nav-item {
border-bottom: 1px solid #2C2C38;
}
.mobile-subnav {
background: var(--bg-light);
}
.mobile-subnav-link {
background: #242430;
}
/* --------------------------------------------------------------------------
五、搜索框 / 下拉 / 输入框（原白底 + 粉紫描边）
-------------------------------------------------------------------------- */
.search-box {
background: #1B1B25;
border: 2px solid #4A3E5C;
box-shadow: var(--shadow-soft);
}
.search-type {
background: transparent;
color: var(--text-dark);
}
.search-type option {
background: #1B1B25;
color: var(--text-dark);
}
.search-input {
background: transparent;
color: var(--text-dark);
}
.search-input::placeholder {
color: #7C8294;
}
/* --------------------------------------------------------------------------
六、海报卡片与文章卡片（原白底）
-------------------------------------------------------------------------- */
.video-card,
.article-card,
.article-small-card {
background: var(--bg-white);
box-shadow: var(--shadow-soft);
}
/* 文章横向卡片 hover 原白到浅灰渐变 */
.article-card:hover {
background: linear-gradient(to right, #1B1B25, #20202C);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.55);
}
/* 卡片内文字跟随变量，这里兜底保证层级 */
.card-title,
.article-card .card-title,
.article-small-card .card-title {
color: var(--text-dark);
}
.card-desc,
.card-meta,
.article-card .card-desc,
.article-card .card-time,
.article-small-card .card-time {
color: var(--text-light);
}
/* 评分标签：暗金底 + 深色字，保持清晰对比 */
.card-score {
background: var(--primary-yellow);
color: #1B1B22;
}
/* --------------------------------------------------------------------------
七、板块标题 / 筛选条 / 友链按钮
-------------------------------------------------------------------------- */
.section-title,
.page-title,
.filter-label {
color: var(--text-dark);
}
.section-header,
.page-header,
.source-title,
.source-tabs,
.rank-title {
border-color: var(--primary-pink);
}
.filter-bar {
background: var(--bg-white);
box-shadow: var(--shadow-soft);
}
.filter-tag {
background: var(--bg-light);
color: var(--text-dark);
}
.friend-link {
background: var(--bg-white);
color: var(--text-dark);
box-shadow: var(--shadow-soft);
}
/* --------------------------------------------------------------------------
八、播放 / 详情 / 剧集 / 片源 容器（原白底）
-------------------------------------------------------------------------- */
.play-article,
.detail-article,
.detail-main,
.comment-section,
.article-content,
.rank-list {
background: var(--bg-white);
box-shadow: var(--shadow-soft);
}
.play-title,
.detail-title,
.detail-tag,
.info-value,
.detail-desc {
color: var(--text-dark);
}
.play-subtitle,
.detail-subtitle,
.detail-meta,
.info-label,
.rank-meta,
.breadcrumb,
.breadcrumb span {
color: var(--text-light);
}
/* .source-name、.episode-current、.rank-num、.source-item.current 保留原品牌粉 / 暗金，不覆盖 */
/* 剧集上下页按钮（两处写法：一处白底深字、一处白底粉字粉边） */
.episode-nav,
.play-info,
.detail-info,
.article-meta,
.source-tab {
background: var(--bg-light);
}
.episode-btn {
background: var(--bg-white);
color: var(--primary-pink);
border: 2px solid var(--primary-pink);
}
.episode-btn:hover:not(:disabled) {
background: var(--primary-pink);
color: #FFFFFF;
}
/* 片源单集按钮（两处写法：白底粉边 / 白底深字） */
.source-item {
background: var(--bg-white);
color: var(--text-dark);
border: 1px solid #33333F;
}
.source-item:hover {
background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
color: #FFFFFF;
border-color: transparent;
}
/* 分页按钮（原白底粉边粉字） */
.page-btn {
background: var(--bg-white);
border: 2px solid var(--primary-pink);
color: var(--primary-pink);
}
.page-btn:hover {
background: var(--primary-pink);
color: #FFFFFF;
}
/* 次要操作按钮（白底粉边粉字 → 深色底粉边粉字） */
.action-btn.secondary {
background: var(--bg-white);
color: var(--primary-pink);
border: 2px solid var(--primary-pink);
}
/* 排行榜条目分隔虚线（原浅灰 #eee） */
.rank-item {
border-bottom: 1px dashed #2E2E3C;
}
/* --------------------------------------------------------------------------
九、轮播轮左右箭头（原白底圆形）
-------------------------------------------------------------------------- */
.banner-arrow {
background: rgba(30, 30, 40, 0.85);
color: var(--primary-pink);
}
.banner-arrow:hover {
background: var(--primary-pink);
color: #FFFFFF;
}
/* --------------------------------------------------------------------------
十、正文细节兜底：深色底上残留的浅色文字一律校正
-------------------------------------------------------------------------- */
.article-content {
color: var(--text-dark);
}
/* 字体继承兜底：避免个别按钮 / 下拉 / 输入框使用浏览器默认底色与字体 */
button,
select,
input {
font-family: inherit;
color: inherit;
}