/*!
 * 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;
    --tpl-text-on-inverse: #0a001f;

    /* 边框 / 底色 */
    --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;
    }
}