@charset "utf-8";
/* ============================================================================
 *  自定义配色 / 字体覆盖文件
 *  放置位置：template/default/asset/css/my-theme.css
 *  引入位置：html/public/include.html 和 html/user/include.html
 *            要放在 public-head-main.css 之后，否则不生效
 *
 *  ★ 改完记得把引入标签的 ?v=1 版本号 +1，否则浏览器/CDN 用旧缓存
 *  ★ 深色模式下看站，就改【第二块 .bstem】；改上面那块不会有反应
 * ==========================================================================*/


/* ===========================================================================
 * 【第一块】亮色模式  —— body 没有 bstem class 时生效
 * 如果你后台已经设成「默认黑色」且关闭了切换按钮，这一块可以整个不管
 * ==========================================================================*/
:root {

  /* ---------- 背景 ---------- */
  --tpl-bg-base:        #ffffff;   /* 整站最底层背景 */
  --tpl-bg-muted:       #f9f9f9;   /* 卡片/区块/输入框背景 */
  --tpl-bg-login:       #ffffff;   /* 登录注册弹窗背景 */

  /* ---------- 文字 ---------- */
  --tpl-text:           #333333;   /* 正文默认字色 */
  --tpl-text-strong:    #111111;   /* 标题/片名 */
  --tpl-text-muted:     #666666;   /* 次要文字：年份、地区、简介 */
  --tpl-text-subtle:    #999999;   /* 最弱文字：时间戳、占位符 */
  --tpl-social-name:    #576b95;   /* 用户名/昵称 */

  /* ---------- 主色 ---------- */
  --tpl-accent:         #40cc92;   /* 主色：按钮、选中态、高亮 */
  --tpl-accent-hover:   #36b67e;   /* 主色悬停（比主色压暗 10~15%） */
  --tpl-accent-muted:   rgba(64,204,146,.24);  /* 主色半透明底 */

  /* ---------- 边框 ---------- */
  --tpl-border:         #e5e5e5;   /* 主分割线、输入框描边 */
  --tpl-border-soft:    #eeeeee;   /* 弱分割线 */
}


/* ===========================================================================
 * 【第二块】深色模式  —— body 有 bstem class 时生效  ★ 你主要改这里
 *
 * 下面给的是「深色紧凑」的一套起手值：
 *   底色比官方默认更沉一点，卡片层次拉开，弱分割线压暗（深色模式最影响观感）
 * 你把颜色换成自己想要的即可，结构不用动
 * ==========================================================================*/
.bstem,
body.bstem {

  /* ---------- 背景（三层，从深到浅：底 → 卡片 → 浮层） ---------- */
  --tpl-bg-base:        #0f0f13;   /* 整站底色。官方默认 #16151b，这里更沉 */
  --tpl-bg-muted:       #1a1a20;   /* 卡片/区块背景。要比底色亮一点，否则卡片"糊"在背景里 */
  --tpl-bg-login:       #22222b;   /* 弹窗背景。再亮一档 */

  /* ---------- 文字（三级对比，别都用同一个亮度） ---------- */
  --tpl-text:           #d6d6db;   /* 正文。不要用纯白 #fff，深色底上刺眼 */
  --tpl-text-strong:    #f2f3f5;   /* 标题/片名。最亮的一级 */
  --tpl-text-muted:     #8e8e96;   /* 次要文字 */
  --tpl-text-subtle:    #6b6b73;   /* 最弱文字 */
  --tpl-social-name:    #91a8cc;   /* 用户名 */

  /* ---------- 主色 ---------- */
  /* 换主色只需改这 3 行。举例：
     蓝  #3b82f6 / hover #2f6fd0 / muted rgba(59,130,246,.22)
     橙  #ff7a45 / hover #e56733 / muted rgba(255,122,69,.22)
     紫  #a855f7 / hover #9040d8 / muted rgba(168,85,247,.22)
     红  #ef4444 / hover #d23a3a / muted rgba(239,68,68,.22)          */
  --tpl-accent:         #40cc92;
  --tpl-accent-hover:   #36b67e;
  --tpl-accent-muted:   rgba(64,204,146,.22);

  /* ---------- 边框 ---------- */
  --tpl-border:         #33333c;   /* 官方默认 #d8d8d8 在深色下太亮，建议压暗 */
  --tpl-border-soft:    #24242c;   /* 弱分割线。深色模式观感好坏主要看它 */
}


/* ===========================================================================
 * 【第三块】紧凑度  —— 字号与行高（亮/深色共用，写在 :root 即可）
 *
 * 想更紧凑：优先减行高，别急着缩字号。
 * 行高比字号更影响"密度感"，字缩小了反而伤可读性。
 * ==========================================================================*/
:root {
  --tpl-font-heading:   14px;   /* 标题字号（片名、区块标题） */
  --tpl-line-heading:   18px;   /* 标题行高。官方 20px，这里收 2px */
  --tpl-font-body:      12px;   /* 正文字号 */
  --tpl-line-body:      16px;   /* 正文行高。官方 18px，这里收 2px */
}


/* ===========================================================================
 * 【第四块】圆角  —— 想要方正紧凑观感就调小
 * ==========================================================================*/
:root {
  --tpl-radius:              8px;   /* 搜索框、按钮。官方 25px（胶囊形），8px 更方正 */
  --tpl-radius-cover:        4px;   /* 封面图圆角 */
  --tpl-radius-nav-bottom:   4px;   /* 底部导航圆角 */
}


/* ===========================================================================
 * 【第五块】封面比例  —— ⚠️ ratio 和 pad 必须一起改
 *
 *   pad = 高 ÷ 宽 × 100%
 *   只改一个会导致封面变形或上下留白
 *
 *   竖版常用：  2/3   → pad 150%     （标准电影海报）
 *              20/29 → pad 145%     （官方默认，略扁）
 *              27/40 → pad 148.148%
 *   横版常用：  16/9  → pad 56.25%   （标准视频缩略图）
 *              69/40 → pad 57.971%  （官方默认）
 * ==========================================================================*/
:root {
  --tpl-poster-v-ratio:  20/29;
  --tpl-poster-v-pad:    145%;
  --tpl-poster-h-ratio:  69/40;
  --tpl-poster-h-pad:    57.97101%;
}


/* ===========================================================================
 * 【第六块】自定义补丁区
 * 上面的变量覆盖不了的零散样式写在这里。
 * 用浏览器右键「检查」找到元素的 class，照着写就行。
 *
 * 示例（默认注释掉，需要时去掉 / * * /）：
 * ==========================================================================*/

/* 收窄卡片间距，让首页更密 */
/*
.mac-poster { margin-bottom: 6px !important; }
*/

/* 顶部导航压矮 */
/*
.head_box { height: 46px !important; }
*/

/* 隐藏页脚某个板块 */
/*
.foot_link { display: none !important; }
*/


/* ============================================================================
 * 【修复】上传 PNG logo 后图片超大、盖住搜索框
 *
 * 原因：官方 head.css 里只给 .mac-logo-lottie（Lottie 动画容器）加了
 *       max-height:50px，对 <img> 完全没有尺寸约束。
 *       官方默认 logo 是 .json 动画，所以没暴露这个问题；
 *       你换成 PNG 后，img 按原始 512×512 渲染，就撑爆了。
 *
 * 下面给 img 补上约束。头部/页脚分开设，跟官方 Lottie 的尺寸对齐。
 * ==========================================================================*/

/* 头部 logo —— 官方 Lottie 是 max-height:50px，这里对齐 */
.head_logo .mac-logo .logo img,
.head_logo .mac-logo .logo > img{
    max-height: 44px;      /* ← 觉得还大就调小，40 / 36 都行 */
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* 页脚 logo —— 官方是 58px */
.foot-logo .mac-logo .logo img,
.mac-logo--foot .logo img{
    max-height: 44px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* 兜底：任何 .mac-logo 里的 img 都不许超高 */
.mac-logo .logo img{
    max-height: 44px;
    width: auto;
}

/* 顺带：logo 容器别被挤压，也别把搜索框挤没 */
.head_logo{
    flex-shrink: 0;
    max-width: 46%;
}












/* ============================================================================
 * 手机端搜索框收窄  （第 6 版 —— 改用百分比定宽）
 *
 * 第 5 版位置对了（☰ 回到最左、右边缘贴齐），但收得不够。
 * 因为那版用的是 margin-left: 50px —— 固定像素，在手机上只占约 13%，
 * 你要的是"搜索框占屏幕一半"，那得用百分比直接定宽。
 *
 * 这一版：给搜索胶囊设百分比宽度 + margin-left:auto 推到右边。
 *        ☰ 不动，右边缘贴齐，剩下的全变成中间空隙。
 *
 * ★ 调法：只改下面 --search-width 那个百分比 = 搜索框占屏幕的宽度
 *      70%    当前（你定的常用值，后面新站也照这个来）
 *      60%    再窄一点
 *      55%    偏窄，给"搜索"按钮留的余量比较紧
 *      50%    正好占屏幕一半
 *      100%   恢复满宽
 *
 *   注意：低于 45% 时，"火影忍者"那行提示文字会被挤得几乎看不见，
 *        因为里面还要塞 🔥 图标 + 输入框 + "搜索"按钮三样东西。
 *        真想更窄，建议同时把按钮里的"搜索"两个字去掉、只留图标。
 * ==========================================================================*/
#topnav .mobile-head .head_b{
    --search-width: 70%;
}

/* 1) .head_search 保持满宽（☰ 靠它待在最左） */
#topnav .mobile-head .head_b > .head_search.head_search_mobile.head_search_mobile_capsule{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2) ☰ 原地不动、不被压缩 */
#topnav .mobile-head .head_b .head_search.head_search_mobile_capsule > .head_menu_b{
    flex: 0 0 auto !important;
    margin: 0 0 0 var(--menu-shift) !important;   /* 左移量见下方说明 */
}

/* 3) 搜索胶囊：百分比定宽 + 推到最右 */
#topnav .mobile-head .head_b .head_search.head_search_mobile.head_search_mobile_capsule > .head_search_inner{
    flex: 0 0 auto !important;
    width: var(--search-width) !important;
    max-width: var(--search-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* ============================================================================
 * ☰ 三条横线的水平位置
 *
 * ☰ 比上面的 logo 略偏左，是因为第一行（logo 那行）和第二行（☰+搜索框那行）
 * 是两个不同的容器，各自内边距对不齐 —— 不是哪里写错了。
 *
 * ★ 改 --menu-shift 这一个数字：
 *      10px   跟 logo 左边缘对齐   （你说的第一种，当前）
 *      45px   居中在 logo 正下方   （你说的第二种）
 *      0px    回到原位
 *
 *   两种都试试哪个顺眼，数字可随便微调：8px / 12px / 40px 都行。
 * ==========================================================================*/
#topnav .mobile-head .head_b{
    --menu-shift: 10px;
}


/* ============================================================================
 * 右上角「最新」按钮 + 「最新公告」弹窗
 *
 * 这个功能【官方没有后台开关】—— 按钮和弹窗都是无条件渲染的。
 * 想关掉就把下面这段的注释去掉；想留着就不用管这里，去改内容即可
 * （内容改哪里见随附的对照表）。
 * ==========================================================================*/
#topnav .top_ico:has(> .js-save-site-url){ display: none !important; }
#topnav .top_link.js-save-site-url{ display: none !important; }


/* ============================================================================
 * ☰ 侧边菜单里隐藏用不上的项
 *
 * 官方 all_menu.html 里，这三项【没有后台开关】，是无条件渲染的：
 *     直播  留言  最新
 * （排行榜和专题有开关，去 模板配置 里关，别在这里动）
 *
 * 想关哪个，把对应那行前面的 / * 和 * / 去掉即可。
 * ==========================================================================*/

/* 隐藏「直播」 */
.all_menu .all-menu-item:has(> a[href*="live/show"]){ display: none !important; }

/* 隐藏「留言」 */
.all_menu .all-menu-item:has(> a[href*="gbook/index"]){ display: none !important; }

/* 隐藏「最新」——默认保留，一般还挺有用
.all_menu .all-menu-item:has(> a[href*="last_vod"]){ display: none !important; }
*/

/* 隐藏「排行榜」——建议改用后台 模板配置 → theme[rank][btn]
.all_menu .all-menu-item:has(> a[href*="label/rank"]){ display: none !important; }
*/


/* ============================================================================
 * 板块标题去掉「最新」两个字
 *
 * 现象：首页板块标题显示成「最新 高清在线」，前面那两个字是官方硬加的。
 *
 * 为什么用 CSS 隐藏、而不是去删模板里的字：
 *   这句标题在 4 个地方各写了一遍，其中最主要的一处在压缩过的
 *   asset/js/index-home-parts.js 里（手机端板块是 AJAX 拉回来后由它拼的）。
 *   去改压缩 JS 既难改又会被官方更新覆盖。这条 CSS 一行管住全部 4 处，
 *   而且升级不受影响。
 *
 * 影响范围：所有带 .hu-section-head 的板块标题
 *           = 首页各分类板块 / 漫画板块 / 文章板块 / 最近更新页的分组标题。
 *
 * 想把「最新」加回来：把下面这行删掉，或在行首行尾包上 / *  * /
 * ==========================================================================*/
.hu-section-head h2 > [data-lang="string_zuixin"]{ display: none !important; }
/* 顺手把它后面那个字留下的一点点缩进也去掉，标题左边缘对齐 */
.hu-section-head h2 > [data-lang="string_zuixin"] + span{ margin-left: 0 !important; }