/*!
 * user-kaiche —— 会员中心统一皮（把 MacCMS 默认主题的会员页换成 kaiche 风格）
 * 2026-10-05
 *
 * ⚠️ 这个文件**只加样式、不动 DOM**。
 *    会员中心的页面上有大量 JS 绑在现有 id/class 上
 *    （表单提交 #fm-login / 头像上传 .face / 左侧导航 #ui-nav / 验证码 #verify_img_* …），
 *    重写结构会把功能弄坏，所以一律换皮不换骨。
 *
 * 加载位置：user/include.html 末尾（所有 user/* 页面都会 include 它）。
 * 它前面会先加载默认主题自带的 black.css（暗色表，原本被 disabled 写死了，已放开），
 * 这里只做 kaiche 的细化：橙主色 / 窄栏 / 输入框按钮的观感 / 修掉残留的浅色块。
 */

/* ── 0. 自带设计变量（**必须**）──
   会员中心的页面走的是 user/include，**不加载 kaiche.css**，
   所以 --kc-* 这些变量在这里是空的 → 所有 var(--kc-*) 的颜色规则会**静默失效**
   （现象：写死 px 的规则生效、颜色全没变 —— 2026-10-05 就是被这个坑了一轮）。
   这里把 kaiche.css 里那套变量原样再定义一遍；值保持一致。 */
:root {
    --kc-bg: #000;
    --kc-bg-soft: #0a0a0a;
    --kc-card: #151515;
    --kc-card-hi: #1d1d1d;
    --kc-border: #2e2e2e;
    --kc-border-soft: #242424;
    --kc-text: #fff;
    --kc-text-2: #b7b7b7;
    --kc-text-3: #7d7d7d;
    --kc-accent: #f3951b;
    --kc-accent-soft: rgba(243, 149, 27, .14);
    --kc-hot: #ff2d2d;
    --kc-max: 960px;
    --kc-radius: 8px;
    --kc-radius-sm: 4.8px;
}

/* ── 0.5 覆盖默认主题的全套配色变量（**这是最省力的一招**）──
   默认主题（含它的 black.css 暗色表）把配色全挂在 --tpl-* 上：
     浅色定义在 :root、暗色定义在 body.bstem —— **两套都要覆盖**（会员页跑的是暗色那套）。
   覆盖之后**整个会员中心一次性换皮**：主色从绿 #40cc92 变橙、底色/边框/圆角/字号全跟着走，
   不用逐个 class 去写（会员中心的 CSS 有 20 多个文件，逐个写是不可能维护的）。 */
:root,
.bstem,
body.bstem {
    /* 主色：默认是绿 #40cc92 → 换成站点的橙 */
    --tpl-accent: #f3951b;
    --tpl-accent-hover: #ffa42f;
    --tpl-accent-muted: rgba(243, 149, 27, .24);

    /* 文字 */
    --tpl-text: #b7b7b7;
    --tpl-text-strong: #fff;
    --tpl-text-muted: #b7b7b7;
    --tpl-text-subtle: #7d7d7d;
    /* 🔴🔴 这个变量**必须保持浅色**（主题原值就是 #fff），别改成深色！
       它在一套 CSS 里被当成两个相反的意思用：
         · black.css（暗色表）当「**深底上的浅色字**」→ `.data__list li h4 a`、`.vod_info .detail`、
           `.content_detail`、`.box .title h2` … 一大票地方都靠它取浅色；
         · user-favs/plays.css 当「**橙底上的深色字**」→ 只用在 `.filter-tabs a.active`。
       2026-10-05 我为了后者把它改成 #0a001f（近黑），结果前者全部变成**黑底黑字、看不见**
       ——会员中心列表标题、页面标题、分页数字、集数、导航图标一共 7 处隐形。
       2026-10-07 还原成 #fff，橙底那个元素单独在下面指定深色。
       改之前务必先在前台看一遍「我的收藏 / 观看记录」。 */
    --tpl-text-on-inverse: #fff;

    /* 边框 / 底色 */
    --tpl-border: #2e2e2e;
    --tpl-border-soft: #242424;
    --tpl-bg-base: #000;
    --tpl-bg-muted: #151515;
    --tpl-bg-login: #151515;

    /* 圆角与字号（默认 25px 圆角 + 12px 小字，跟站点不搭） */
    --tpl-radius: 8px;
    --tpl-radius-cover: 4.8px;
    --tpl-font-heading: 15px;
    --tpl-line-heading: 22px;
    --tpl-font-body: 15px;
    --tpl-line-body: 23px;
}

/* ── 1. 整页底色（默认主题会员页是白的，跟本站暗色割裂）── */
body.auth-ui,
body#reg,
body#uindex,
body[id^="u"] {
    background: var(--kc-bg) !important;
    color: var(--kc-text) !important;
}

/* ── 2. 窄栏：跟站点一致（--kc-max = 960）── */
.auth-page-layout,
.member-wrap,
#member {
    width: 100%;
    max-width: var(--kc-max);
    margin-left: auto;
    margin-right: auto;
}

/* ── 3. 登录 / 注册页 ── */
/* 🔴 默认主题在这些地方**也用了 !important**，而且选择器更长
   （`.auth-page-form .reg-group .reg-control` = 3 个 class）。
   两边都 !important 时，**比的是 specificity，不是加载先后** ——
   所以下面这些必须**照抄它的选择器**把 specificity 打平，
   再靠「我的文件在最后加载」取胜（2026-10-05 被这个坑了两轮）。 */
.auth-page-form {
    background: transparent !important;
}

/* 左侧插画区：暗色下给它一块卡片底色，别是刺眼的白 */
.auth-page-hero {
    background-color: var(--kc-bg-soft) !important;
    border-radius: var(--kc-radius) 0 0 var(--kc-radius);
}

.auth-logo img,
.reg-logo img {
    max-height: 44px;
    width: auto;
}

.auth-field-label {
    color: var(--kc-text-2) !important;
    font-size: 14px !important;
}

/* 输入框（照抄默认主题的 .auth-page-form .reg-group .reg-control） */
.auth-ui .reg-w form .reg-group .reg-control,
.auth-page-form .reg-group .reg-control {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border) !important;
    border-radius: var(--kc-radius-sm) !important;
    color: var(--kc-text) !important;
    height: 46px !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: border-color .15s;
}

.auth-ui .reg-w form .reg-group .reg-control:focus,
.auth-page-form .reg-group .reg-control:focus {
    border-color: var(--kc-accent) !important;
    outline: 0 !important;
}

.auth-ui .reg-w form .reg-group .reg-control::placeholder,
.auth-page-form .reg-group .reg-control::placeholder {
    color: var(--kc-text-3) !important;
}

/* 输入框外层那个高 48px 的壳：底色也换掉 */
.auth-ui .reg-w form .reg-group,
.auth-page-form .reg-group {
    background: var(--kc-card) !important;
    border-color: var(--kc-border) !important;
}

/* 主按钮（照抄默认主题的 .auth-page-form .btn-sub.auth-page-btn） */
.auth-page-form .btn-sub.auth-page-btn,
.auth-ui .reg-w form .btn-sub,
.auth-ui .btn-brand {
    background: var(--kc-accent) !important;
    color: #0a001f !important;
    border: 0 !important;
    border-radius: var(--kc-radius) !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.auth-page-form .btn-sub.auth-page-btn:hover,
.auth-ui .reg-w form .btn-sub:hover,
.auth-ui .btn-brand:hover {
    background: #ffa42f !important;
    filter: none;
}

/* 次按钮 / 链接按钮 */
.btn-default,
.btn-gray {
    background: var(--kc-card) !important;
    color: var(--kc-text-2) !important;
    border: 1px solid var(--kc-border) !important;
    border-radius: var(--kc-radius-sm) !important;
}

.error-tip {
    color: var(--kc-hot) !important;
}

.auth-forgot-link,
.auth-inline-back,
a[href*="findpass"] {
    color: var(--kc-text-2) !important;
}

.auth-forgot-link:hover,
a[href*="findpass"]:hover {
    color: var(--kc-accent) !important;
}

/* 邀请码那一栏的折叠按钮 */
.auth-invite-toggle__text,
.auth-invite-toggle__chev {
    color: var(--kc-text-3) !important;
}

/* ── 4. 会员中心内页（收藏 / 播放记录 / 资料 …）── */
/* ⚠️ 默认主题用的是 ID 选择器，例如
     `#member #right { background: var(--tpl-text-on-inverse) }`
   —— 它拿"正文色"当背景用（一个 hack），优先级是 (1,1,0)，
   我的普通 class 规则压不住，必须**照抄它的选择器**。 */
#member #left,
#member #right,
.member-wrap-bg,
.dr-no,
.dl-bl {
    background: transparent !important;
}

/* 左侧那块（头像资料 + 导航）做成卡片，跟站点的卡片一致 */
#member #left #ui-nav,
#member #left .mac-user-left-nav-host,
#member #left #macUserLeftNav,
#member #left #mac-user-left-profile,
#member #left .tou {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border-soft) !important;
    border-radius: var(--kc-radius) !important;
}

#member #left .mb-title,
#member #left .member_name,
#member #left a {
    color: var(--kc-text) !important;
}

#member #left a:hover,
#member #left .current,
#member #left .active {
    color: var(--kc-accent) !important;
}

/* 内容卡片 */
#member #right .co-right,
.co-right,
.co-right-bg,
.pannel,
.list-box {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border-soft) !important;
    border-radius: var(--kc-radius) !important;
}

.co-right .title,
#right .title,
.mb-title {
    color: var(--kc-text) !important;
}

/* 列表行 / 表格 */
.mac-user-list li,
.user-list li,
#right li {
    border-color: var(--kc-border-soft) !important;
}

/* ── 5. 小屏：两张并排改成一列 ── */
@media (max-width: 780px) {
    .auth-page-layout {
        display: block !important;
    }

    .auth-page-hero {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   6. 我的收藏 / 观看记录（列表行）—— 2026-10-07

   两页共用一套 DOM（生成逻辑见 asset/js/user-ulog-lists.js 的
   renderFavItem / renderPlayItem），但**布局不同**：
     · 收藏页    = flex 行（只加载 user-favs.css）
     · 观看记录  = 5 列 grid `勾选|缩略图|信息|进度|操作`（只加载 user-plays.css）
   所以下面只调**观感**，不碰 grid-template-areas/columns —— 那是功能布局，
   改了会把进度条和按钮挤错位。观看记录只重平衡列宽（见 6.6）。

   ⚠️ 默认主题这些规则的选择器**很长而且带 !important**（例：
   `#member .co-right .data__del .btn-del.mac-ulog-one-del` = (1,4,0)），
   普通 class 规则压不住 —— 下面凡是覆盖它们的，都**照抄原选择器**再靠"我的文件最后加载"取胜。
   ══════════════════════════════════════════════════════════════════ */

/* 6.1 橙底上的深色字（--tpl-text-on-inverse 已还原成浅色，见文件开头那段的说明） */
.filter-tabs a.active {
    color: #0a001f !important;
    font-weight: 700;
}

/* 6.2 行本体：细分割线 + hover 微亮，最后一行不留线 */
#member .co-right .data__list .data__item {
    border-bottom: 1px solid var(--kc-border-soft);
    transition: background-color .15s ease;
}
#member .co-right .data__list .data__item:hover {
    background-color: rgba(255, 255, 255, .028);
}
#member .co-right .data__list .data__item:last-child {
    border-bottom: 0;
}

/* 6.3 缩略图：圆角 + 底色（图没加载出来时不是一块纯白/透明） */
#member .co-right .data__list .data__thumb {
    background-color: var(--kc-card-hi);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-sm);
}

/* 6.4 标题 / 元信息
   black.css 里 `.data__list li h4 a{color:var(--tpl-text-on-inverse)}` 是 (0,1,3)，
   下面这条 (1,3,1) 直接压过，不需要 !important。 */
#member .co-right .data__list .data__title,
#member .co-right .data__list .data__title a {
    color: var(--kc-text);
    font-weight: 600;
}
#member .co-right .data__list .data__title a:hover {
    color: var(--kc-accent);
}
#member .co-right .data__list .data__txt p {
    color: var(--kc-text-3);
    font-size: 13px;
    line-height: 1.6;   /* 默认 margin:0，三行元信息会贴成一坨 */
}
#member .co-right .data__list .data__txt p .co-tz {
    color: var(--kc-accent);
}

/* 6.5 操作按钮
   ⚠️ user-favs.css 把「删除」做成 24×24 的图标按钮，选择器是
   `#member .co-right .data__del .btn-del.mac-ulog-one-del` (1,4,0) 且全带 !important。
   我要把它改回**文字按钮**，就得**照抄这个选择器**并把 !important 打平，否则压不住。 */
#member .co-right .data__del .btn-del.mac-ulog-one-del {
    align-items: center !important;
    background: transparent !important;
    border: 1px solid var(--kc-border) !important;
    border-radius: var(--kc-radius-sm) !important;
    color: var(--kc-text-3) !important;
    display: inline-flex !important;
    font-size: 13px !important;
    height: auto !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    padding: 4px 12px !important;
    width: auto !important;
}
#member .co-right .data__del .btn-del.mac-ulog-one-del::before {
    content: none !important;   /* 干掉默认那枚垃圾桶图标 */
}
#member .co-right .data__del .btn-del.mac-ulog-one-del:hover {
    border-color: var(--kc-hot) !important;
    color: var(--kc-hot) !important;
}

/* 「继续播放 / 继续阅读」= 行里的主操作，用站点橙 */
#member .co-right .data__del .btn-continue,
#member .co-right .data__del .btn-continue.show-pc {
    background: var(--kc-accent) !important;
    border: 0 !important;
    border-radius: var(--kc-radius-sm) !important;
    color: #0a001f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 5px 14px !important;
}
#member .co-right .data__del .btn-continue:hover {
    background: #ffa42f !important;
}

/* 6.6 观看记录：窄栏下的列重排（2026-10-07）
   默认 `--plays-pc-cols:36px 96px minmax(0,1fr) 210px 160px` 一行要 550px + 间距，
   而会员中心整栏是 960、**左栏被默认主题的 `min-width:356px` 固定住**（它要装资料卡 +
   VIP 横幅 + 三个并排按钮，不能收窄），内容区实际只有 ~502px
   → `1fr` 那列被挤成 0，标题根本看不见。
   改成**两行网格**：进度条从独立一列挪到标题下方，标题列拿回 ~200px。
   `.data__del` 本来就是 1fr 1fr 的两列按钮，跨两行放右侧。 */
body.page-user-plays #member .co-right .data__list .data__item {
    grid-template-areas:
        "cb thumb meta actions"
        "cb thumb progress actions";
    grid-template-columns: 24px 88px minmax(0, 1fr) 160px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
}
/* 进度条原来限宽 180px，跟着新列宽走；顺手把它自带的那圈 10px 内边距收掉
   （网格的 row-gap 已经隔开了，20px 内边距纯属浪费行高） */
body.page-user-plays #member .co-right .data__list .data__item > .show-pc {
    max-width: none;
}
body.page-user-plays #member .co-right .data__list .play_progress,
body.page-user-plays #member .co-right .data__list .progress_item {
    padding: 2px 0 0;
    margin: 0;
}
body.page-user-plays #member .co-right .data__list .play_progress p {
    line-height: 1.3;
}

/* 6.7 进度条：站点橙 + 圆角 */
#member .co-right .layui-progress {
    background: var(--kc-border-soft);
    border-radius: 999px;
    overflow: hidden;
}
#member .co-right .layui-progress-bar {
    background: var(--kc-accent);
    border-radius: 999px;
}
#member .co-right .progress_item p,
#member .co-right .play_progress p {
    color: var(--kc-text-3) !important;
    font-size: 12px !important;
}

/* 6.8 底部批量条（全选/反选/删除/清空）—— 默认只在 >820px 显示 */
#member #right .gong,
#member #right .gong-bulk .gong-bulk__inner {
    border-radius: var(--kc-radius-sm) !important;
}
#member #right .gong a,
#member #right .gong-bulk__inner a {
    color: var(--kc-text-2) !important;
    font-size: 13px;
    text-decoration: none;
}
#member #right .gong a:hover,
#member #right .gong-bulk__inner a:hover {
    color: var(--kc-accent) !important;
}

/* 6.9 分页
   默认是「黑底 + --tpl-text-on-inverse」当文字色 → 还原变量后会有颜色，
   但底色仍是纯黑，跟卡片不搭，这里统一成暗色小圆角。 */
#member .co-right .mac-ulog-page li a,
#member .co-right .mac-ulog-page li span {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border-soft) !important;
    border-radius: var(--kc-radius-sm) !important;
    color: var(--kc-text-2) !important;
    display: inline-block;
    font-size: 13px !important;
    padding: 5px 12px !important;
    text-decoration: none;
}
#member .co-right .mac-ulog-page li a:hover {
    border-color: var(--kc-accent) !important;
    color: var(--kc-accent) !important;
}
#member .co-right .mac-ulog-page li.active a,
#member .co-right .mac-ulog-page li.active span {
    background: var(--kc-accent) !important;
    border-color: var(--kc-accent) !important;
    color: #0a001f !important;
    font-weight: 700;
}
#member .co-right .mac-ulog-page li {
    display: inline-block;
    margin: 0 3px;
}
#member .co-right .member-page {
    padding: 16px 0 4px;
    text-align: center;
}

/* 6.10 空状态 / 加载中 */
#member .co-right .no-data .nodata-txt {
    color: var(--kc-text-3) !important;
}
#member .co-right .mac-ulog-loading {
    color: var(--kc-text-3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. 登录 / 注册页的站点顶栏 —— 2026-10-07（用户要求）

   这两页原本是**独立全屏布局**（body.auth-ui / body#reg），没有站点顶栏。
   模板里已补上 {include file="public/head"} 和 {include file="public/foot"}：
     · 顶栏 DOM、左抽屉 #kcDrawer、右面板 #kcUserSheet 由 head 带来
     · 交互脚本 kc-ui.js 和 waitForMAC 由 foot 带来（**只加 head 不加 foot，汉堡点了没反应**）
   这里只做「精简版顶栏」的收尾 —— 用户选的是**只留 logo + 搜索**。

   ⚠️ 为什么不直接改 public/head.html：那是所有页共用的顶栏模板，
   动它会波及首页/分类页/详情页/会员页。按 body.auth-ui 作用域隐藏最安全、也最好还原。
   ══════════════════════════════════════════════════════════════════ */

/* 7.1 精简：隐掉分类导航整条、汉堡（左抽屉入口）、个人中心按钮 */
body.auth-ui .kc-nav,
body.auth-ui #kcMenuOpen,
body.auth-ui #kcUserOpen {
    display: none !important;
}

/* 7.2 顶栏是 sticky（占文档流），**实测整条高 55px**（.kc-header__bar 52px + 1px 边框 + padding）。
   默认主题在这两处都写了 min-height:100vh，加上顶栏后会整页顶出滚动条，各减掉 55px。
   选 55px 的作用域是 (0,2,0)，默认的是 (0,1,0)，压得住，不用 !important。
   （页脚在下面，本来就要滚一点才能看到 —— 这是正常网页行为，不用把页脚也塞进一屏。） */
body.auth-ui .auth-page-layout,
body.auth-ui .auth-page-form {
    min-height: calc(100vh - 55px);
    /* 7.3 默认 width:100vw —— 100vw 含滚动条宽度，会多出一条横向滚动 */
    width: 100%;
}

/* 7.4 小屏：第 5 节已经把 .auth-page-layout 转成 block 并隐藏插画区，
   这里只补顶栏带来的高度差。 */
@media (max-width: 820px) {
    body.auth-ui .auth-page-layout {
        min-height: auto;
    }
}

/* 7.5 隐掉页面原有的返回条（.show-mobile）—— 2026-10-07 用户要求
   它只提供「返回」+ 页面标题，跟顶栏叠起来小屏上是两层栏共 ~100px，太占地方。
   **这两页各只有 1 个 .show-mobile**（就是那条返回条，模板和线上渲染结果都核对过），
   所以按 body.auth-ui 隐掉是安全的、不会误伤别的东西。
   代价：小屏少一个返回按钮 —— 用浏览器返回代替，用户已确认。 */
body.auth-ui .show-mobile {
    display: none !important;
}

/* ============ 8. 个人中心：把剩下的浅色块换掉（2026-10-07 用户要求细化）============
   用户截图反馈「颜色、字体细化一下」。实测扫了一遍 #left/#right 下所有**浅色底/带背景图**
   的元素，就是默认主题那套「金色 VIP」配色，在暗色橙调的站上很跳：
     .member-vip-banner__inner      一张 VIP 背景图（浅色/绿色系）
     .member-vip-banner__btn--cta   金色渐变 rgb(247,221,162)→rgb(230,187,123)
     .user-info-stats__deck         米黄渐变 rgb(249,217,167)→rgb(253,246,205)
     .user-info-stats__card         白底
     .member-quick-card             #f8f8f8（金币充值 / 分享推广那两张小卡）
     .user-info-btn--secondary      白底（「修改密码」按钮）
     .business-coop-section         #f8f8f8（商务合作整块）
   全部换成本站的卡片色 + 橙色。**没动 DOM**（那页的 JS 绑在现有 id/class 上）。 */

/* VIP 横幅：背景图换成暗色暖调渐变（保留「VIP」那种金贵感，但底色归暗） */
.member-vip-banner__inner {
    background-image: linear-gradient(100deg, #1c1206 0%, #2a1a07 55%, #3d260b 100%) !important;
    border: 1px solid var(--kc-border) !important;
}

.member-vip-banner__btn--cta {
    background-image: none !important;
    background: var(--kc-accent) !important;
    border: 0 !important;
    color: #0a001f !important;
    font-weight: 700 !important;
}

.member-vip-banner__btn--cta:hover {
    background: #ffa42f !important;
}

/* 顶部三格统计（账户金币 / 到期时间 / 所属会员组）：整块米黄渐变 → 暗卡片 */
.user-info-stats__deck {
    background-image: none !important;
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border-soft) !important;
}

.user-info-stats__card {
    background: transparent !important;
    border: 0 !important;
}

/* 🔴 统计卡的**数值**：默认主题是给米黄底配的**深棕 rgb(92,51,1)**，
   换到本站的深卡片上对比度只剩 37、几乎看不见（实测抓到的）。
   换成站点橙，跟全站的主色一致。 */
.user-info-stats__val {
    color: var(--kc-accent) !important;
}

/* 三个小图标是 #999 的单色 PNG（实测），暗底上略暗 —— 提亮一档 */
.user-info-stats__ico {
    filter: brightness(1.35);
}

/* 快捷卡片（金币充值 / 每日签到 / 分享推广） */
.member-quick-card {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border-soft) !important;
}

.member-quick-card:hover {
    border-color: var(--kc-accent) !important;
}

/* 「修改密码」这个次要按钮：白底 → 暗卡片 + 描边 */
.user-info-btn--secondary,
button.user-info-btn--secondary {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border) !important;
    color: var(--kc-text-2) !important;
}

.user-info-btn--secondary:hover,
button.user-info-btn--secondary:hover {
    border-color: var(--kc-accent) !important;
    color: var(--kc-accent) !important;
}

/* 商务合作整块：#f8f8f8 → 暗卡片，里面的文字跟着走 */
.business-coop-section {
    background: var(--kc-card) !important;
    border: 1px solid var(--kc-border-soft) !important;
}

.business-coop-section .coop-title {
    color: var(--kc-text) !important;
}

.business-coop-section .coop-desc,
.business-coop-section .coop-label {
    color: var(--kc-text-3) !important;
}

.business-coop-section .coop-val,
.business-coop-section .coop-item {
    color: var(--kc-text-2) !important;
}