@charset "UTF-8";
/* ============================================================================
   skin.css —— 全站换肤层（照 www.xuezhijiaocheng.com 的观感重做）

   定位：**只覆盖外观，不动结构**。8 张复刻样式表（index / style_index / style /
   news / class / member / datagrid / site.css）一个字符都没改，本文件靠
   「在 site.css 之后加载 + 同权重后到者胜」压过它们。

   六个 head 片段里 site.css 都是最后一张，本文件挂在它后面，所以 19 个页面一网打尽。
   ★ 回退：删掉那 6 行 <link>（或把本文件清空），站点立刻回到换肤前的样子。

   为什么单独一个文件而不是追加进 site.css：site.css 自己的定位是「补原站没有的
   少数状态类 + 登录注册页补丁」（见其 371-375 行），塞进 700 行换肤会让它同时
   承担两种职责；独立文件也更好整体 review 与整体回退。

   ⚠ 本文件里 !important 只用来干一件事：**压 inline style 属性**（元素上的
     style="..." 与任何选择器之间没有权重可比，属性永远赢，只能靠 !important 反过来压）。
     目前共 4 处：858 / 978（两条）/ 990，每处都写了为什么非压不可。
   ⚠ 反过来，**不要用它去压复刻表** —— 本文件与复刻表同权重、又排在后面，
     本来就赢（第 3 节 .nav 那条注释记了这一点）。
   ⚠ 唯一真压不住的是**选择器权重更高**的复刻规则 —— 那得把选择器写够权重，
     不是 !important 能省的事。本文件里有两处是这样处理的，都写了注释：
       · 第 3 节 `.top1 #loginInfoHtml a:hover`（1,2,1）—— 照抄 site.css 那条的
         形状（带 id）才能同权重取胜，写成 `.login-name` 之类必输；
       · 第 6 节 `.jcym_ct21 .title_li1`（0,2,0）压 `.jcym_ct21 ul li`（0,1,2）
         —— 类数 2 > 1，与书写顺序无关。
   ⚠ 所有选择器与取值一律 ASCII，中文只出现在注释里 —— 免得浏览器拿错编码
     （style.css 是 GBK，注释会变乱码；那不影响渲染，但仍以 @charset 声明 UTF-8）。

   ── v2 这一轮做了什么（用户：「样式改动的不够大，前端完全采用目标站的样式」）──
   v1 的颜色是忠实的，收着的是**几何与字号**：14px 正文、1200 容器、34px 小标题条、
   零动效。v2 照目标站（WordPress + riplus 2.7 + Bootstrap 4.4.1）的实测值把这几项
   拉满：正文 16px / 容器 1440px / 区块标题 28px + 2px 字距 / 卡片 5px 圆角 + hover 上浮。
   ★ 只有一样没照抄：目标站的卡片 hover 是 `hover-scale-110`（放大 1.1）。本站卡片是
     float 紧排（li 之间只靠 margin 分隔，没有独立定位层），放大 1.1 会盖住左右邻居。
     换成 translateY(-4px) + 阴影加深，观感等价、不触发重排。

   ⚠⚠ 放大字号时会撞上复刻表里一批**按 12px/小图算死的 height**。v1 有几处只改了
     外层、没拆内层，这次一并拆掉，每条都在原处写了「原来是多少、为什么必须拆」：
       .jc_content02 dl{height:175px}（图已 187）、.dd1/.dd2{height:25px}（字已 18px）
       .jctj ul li{height:170px}、.bgzdhclass 内层 202/210px、.ul-text li{height:24px}
       （登录 / 注册两页当年也撞过同一类问题：.login_srk{height:24px} 裹着 40px 的输入框、
        #formbox .item{height:50px} —— 那两页 2026-10-10 已照目标站重写，结构不复存在）
       dt img 上那对 `padding:2px;border:1px`（内容盒下会撑出 6px、把图顶出框被裁）

   ── v3 这一轮做了什么（用户：「首页最上面一行 + 登录注册页，模仿目标站」）──
   ① 第 3 节：顶栏 .top1 那条窄栏照目标站页头右端重做 —— 站内快捷链接挪左，
      右侧「登录 / 注册」由纯文字改成两颗圆角小按钮（蓝 / 红，见那节注释）。
      下面 logo / 搜索 / 导航三段一行没动。
   ② 第 10 节：登录 / 注册两页**照目标站重写了 DOM**（全幅背景 + 居中白卡 + 标签 +
      框内图标 + 全宽蓝按钮），原来那套 317px 定宽浮动行的规则随之整套删除。

   分节：1 令牌 / 2 全局 / 3 页头 / 4 面包屑 / 5 首页 / 6 列表卡片 /
         7 详情页 / 8 播放页 / 9 分页 / 10 登录注册 / 11 我的账号 /
         12 会员中心 / 12b 会员充值(卡片式) / 13 页脚 / 14 底图清除
   ============================================================================ */

/* ---------------------------------------------------------------- 1. 令牌 */
:root {
    --sk-primary: #007bff;          /* 主色：按钮、链接 hover、选中态 */
    --sk-primary-h: #0069d9;        /* 主色 hover */
    --sk-accent: #007afb;           /* 文字强调（目标站链接色） */
    --sk-amber: #ffc12b;            /* 次级强调（VIP / 排行第 2~3 名） */
    --sk-green: #4caf50;            /* 第三位（排行第 4 名起） */

    --sk-text: #525252;             /* 正文（目标站实测 #525252） */
    --sk-text-2: #8f8f8f;           /* 次要文字 / 面包屑 */
    --sk-muted: #bdbdbd;            /* 禁用 / 空态 */

    --sk-page: #f0f4f5;             /* 页面底色（目标站实测 rgb(240,244,245)） */
    --sk-card: #fff;                /* 卡片底色 */
    --sk-head: #f7f9fb;             /* 表头 / 内嵌块的浅底 */
    --sk-line: #dee2e6;             /* 主边框 */
    --sk-line-2: #f1f3f5;           /* 分隔线 */

    --sk-foot-1: #333;              /* 页脚第一层 */
    --sk-foot-2: #202935;           /* 页脚第二层（目标站深色 #202935，v1 是 #2c2f31） */

    /* 圆角照目标站的出现频次取的：4px 用得最多、5px 次之、10px 是大卡片 */
    --sk-r: 5px;                    /* 常规圆角 / 卡片 */
    --sk-r-lg: 10px;                /* 大卡片（登录框、表单盒） */

    /* 阴影三档，取值逐字照目标站 */
    --sk-sh-1: 0 1px 10px rgba(0, 0, 0, .10);        /* 浮层（下拉菜单） */
    --sk-sh-2: 0 0 10px rgba(0, 0, 0, .05);          /* 卡片静置 */
    --sk-sh-3: 0 16px 32px 0 rgba(0, 0, 0, .06);     /* 卡片 hover */

    /* 字号标尺：16px 是主标尺（目标站 = Bootstrap 的 1rem） */
    --sk-fs-base: 16px;
    --sk-fs-h1: 28px;               /* 区块大标题（目标站 .section-title h2） */
    --sk-fs-h2: 20px;               /* 次级标题 / 选项卡 */
    --sk-fs-sm: 13px;               /* 元信息 */
    --sk-ls-title: 2px;             /* 大标题字距 —— 目标站最一眼可辨的签名 */

    --sk-w: 1440px;                 /* ★ 容器宽度：想更宽只改这一行 */
    --sk-side: 376px;               /* 首页右栏 */
    --sk-gap: 24px;                 /* 栏间距（目标站 mb-4 的 24px 同源） */
    /* ★ 登录 / 注册那张卡片（`.auth-box`，第 10 节）的宽度。原站那张 WebForms 卡片
       是 317px 内容 + 30×2 padding + 1×2 边框 = 379px；目标站对应的卡片（col-lg-4）
       在 1440 容器里约 450px。取 420 —— 落在两者之间，窄屏上也不至于贴边。 */
    --sk-login-w: 420px;
}

/* ------------------------------------------------------------- 2. 全局排版 */
/* body 的字体是这次收益最大的一条：原站是 12px 宋体，v1 提到 14px，v2 提到 16px。
   ⚠ 这里同时清掉两条复刻期的 margin：datagrid.css 的 `body{margin:0 20px}`
   （会员中心整页左右各缩 20px，连页头页脚通栏底都不贴边）和浏览器默认的 8px。
   ⚠ 用长写（font-size / line-height）而不是 `font:` 简写：简写里塞 var() 之后
     整条声明要等变量替换完再重新解析，部分浏览器对 `font: var(--x)/1.7 ...` 处理不一致。
     长写没有这个歧义。 */
body {
    margin: 0;
    background: var(--sk-page);
    color: var(--sk-text);
    font-family: Lato, -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--sk-fs-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* 链接默认走正文色、hover 走主色（复刻表里 a/a:hover 是 #0f91ed 与 #e75823）。 */
a { color: var(--sk-text); }
a:hover { color: var(--sk-accent); }

/* 表单控件统一底色，免得复刻表里的灰底露出一块。 */
input, button, select, textarea { font-family: inherit; }

/* 空态/占位文字
   ⚠ .empty-tip 一共 10 处，而且**宿主容器各不相同**：分类/搜索/错误页里它在
     .jc_content02 内（那层左右还有 20px padding），user.html 里在 .user-card 内，
     play.html 里在 .play-wrap 内。所以这里绝不能写固定宽度 —— 写 1440 会在这些被
     padding 收窄的父层里横向溢出；也不能做成带边框阴影的卡片，因为 .main_bgzdh /
     .user-card 本身已经是卡片，再套一层就是卡中卡。一律做「一段居中的灰字」。 */
.no-data, .empty-tip { color: var(--sk-text-2); }
.empty-tip {
    margin: 8px auto;
    padding: 20px;
    text-align: center;
    background: none;
    border: 0;
    box-shadow: none;
}
.empty-tip a { color: var(--sk-accent); }

/* 复刻表里散落的橙字（site.css 那批）统一收口到主色 */
.result-tip { color: var(--sk-text-2); }
.rank-no { color: var(--sk-primary); font-weight: 700; }
/* 登录 / 注册两页的服务端错误行（.auth-error）跟着那两页一起挪到了第 10 节末尾。
   ⚠ 旧类名 .login-error / .form-error 随 2026-10-10 的模板重写一起消失；
     site.css 里那条 `.login-error{width:379px}`（按 317px 的旧卡片量的）也就此作废。 */

/* ---------------------------------------------------------------- 3. 页头 */
/* 目标站是**白底页头 + 黑字导航**（主题默认深色页头，线上那份 inline 反成了白的）。 */

.top1 {
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-bottom: 1px solid var(--sk-line-2);
}
.top1 .top1_ct { width: var(--sk-w); margin: 0 auto; color: var(--sk-text-2); }
.top1 .top1_ct a { color: var(--sk-text-2); }
.top1 .top1_ct a:hover { color: var(--sk-primary); }
/* site.css 里这条带 id（权重 1,2,1），必须逐字同形才压得住 */
.top1 #loginInfoHtml a:hover { color: var(--sk-primary); }
.top1 .login-name { color: var(--sk-primary); font-weight: 600; }

/* 会员等级小标签：三档配色（site.css 里 .vip-m 是橙的，这里改蓝） */
.top1 .login-vip {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 9px;
    margin: 0 5px;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    background: var(--sk-muted);
    vertical-align: 1px;
}
.top1 .login-vip.vip-g { background: var(--sk-muted); }
.top1 .login-vip.vip-m { background: var(--sk-primary); }
.top1 .login-vip.vip-v { background: var(--sk-amber); color: #4a3300; }

/* ★ 顶栏右侧那两颗「登录 / 注册」：照目标站页头右端的一对按钮重做
   （那边是 Bootstrap 的 `btn btn-primary btn-sm` 与 `btn btn-danger btn-sm`：
    主色 #007bff / hover #0069d9，危险色 #dc3545 / hover #c82333，btn-sm 的 14px 字号）。
   原来这一格逐字是纯文字「登录 | 注册」，按用户要求改成按钮形态。
   ⚠ 这两颗在 #loginInfoHtml 里，而上面第 164 行那条 `.top1 #loginInfoHtml a:hover`（1,2,1）
     会先赢 —— 皮肤层不引 !important（全文件只有 4 处，且都是为压 inline style），
     改用**同形带 id** 的选择器：1,3,1，hover 时 1,3,2，两条都压得住。
   ⚠ height 28 + 上下各 1px 边框 = 30px，在 40px 高的窄栏里居得下；line-height 给 26
     （= 28 − 2 边框）让文字垂直居中，`vertical-align:middle` 再把它对到行中线。 */
.top1 #loginInfoHtml a.top1-btn {
    display: inline-block;
    height: 28px;
    line-height: 26px;
    padding: 0 13px;
    margin-left: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    color: #fff;
    background: var(--sk-primary);
    vertical-align: middle;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.top1 #loginInfoHtml a.top1-btn:hover { color: #fff; background: var(--sk-primary-h); }
.top1 #loginInfoHtml a.top1-btn-reg { background: #dc3545; }
.top1 #loginInfoHtml a.top1-btn-reg:hover { background: #c82333; }
/* ⚠ 模板里「登录」那颗还带一个 .top1-btn-login —— 它没有单独规则（蓝底就是 .top1-btn
   的默认），留着只是为了和 -reg 对称，也给以后单独调「登录」这颗留个钩子。 */

/* LOGO + 搜索框
   ⚠ index.css 里 .top2 是 960×127、.top2_r 是 float:left + margin-left:83px。
     这里把搜索框挪到右边（float:right）并把它加高到 44px。 */
.top2 { width: var(--sk-w); height: 112px; margin: 0 auto; }
/* LOGO 框。2026-10-12 页头换成正式 LOGO 图（/images/brand/logo.svg，比例 640:220）。
   尺寸两轮定下来：
     · 第一版 233×80 —— 只保证「装得下」，用户看后反馈**太小**；
     · 现版 **320×110** —— 顶到这条带子的上限。
   为什么 110 是上限：LOGO 的竖直中心必须落在 56（见下），`.top2` 又写死高 112
   ⇒ 高度最多 2×56 = 112，取 110 留 2px。**再想大只能抬 `.top2` 的高度** ——
   那是把整页往下推 20px，属于「改页面」不是「改 LOGO」，别顺手做。
   ★ 容器从 960 拉到 1440（--sk-w，1.5×）时 LOGO 没跟着放大，所以 233 那版只占容器宽 16%
     （原站是 202/960 = 21%）；320 是把它拉回 22%，跟原站的视觉占比同量级。
   ⚠ **图和框的尺寸必须来自同一处**：`.top2_l`（框）、`.top2_l img`（图）、`.site-logo`（<a>）
     三条是同一个 320×110，改一个三条一起改；比例是 640:220 = 32:11，
     320×110 正好是这个比（**取整数尺寸时优先挑 32:11 的倍数**，别凑合近似值，
     否则图形会被压扁零点几个百分点 —— 看不出来，但没必要留下）。
   margin-top 1：让 LOGO 竖直中心落在 1+55=56。搜索框是 padding-top 34 + 高 44，
   中心也是 56 ⇒ 两者精确对齐。1 + 110 = 111 < 112，装得下。
   ⚠ LOGO 比搜索框（44 高）高一倍半是**有意的** —— 页头就该由 LOGO 占主导。
   ⚠ 旧规则 `width:202px; height:53px` 是给已从页头删掉的 logo.jpg 用的；images/logo.jpg
     那个文件**别删**：course.html / listdown.html 里课程没封面图时还拿它当占位图。 */
.top2 .top2_l { float: left; display: inline; width: 320px; height: 110px; margin-top: 1px; }
.top2 .top2_l img { width: 320px; height: 110px; }
/* 页头 LOGO 是透明底矢量。取 SVG 不取同名 PNG：那张是白底的，而 .top2 这一带没有背景色、
   落在 body 的 --sk-page(#f0f4f5) 上，白底会显出一个方块。
   文字标的两条规则（.site-logo-k12 / .site-logo-cn）随本次改动一起撤掉了；想回退：
   把 layout.html 里那个 <img> 换回两个 <span>，再把那两条颜色/字号规则加回来。 */
.top2 .top2_l .site-logo {
    display: block;
    width: 320px;
    height: 110px;
}
.top2 .top2_r { float: right; display: inline; margin-left: 0; padding-top: 34px; font-size: 0; }
/* index.css 给 .top2_r .p1 写了 height:34px（那时里面是 32px 的框）。现在框 44px，
   34px 的壳会把浮动的两个 input 顶出 10px、压到下面的导航条上，一并拆掉。 */
.top2 .top2_r .p1 { height: auto; }
.top2 .top2_r .inp1 {
    float: left;
    width: 520px;
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid var(--sk-line);
    border-right: 0;
    border-radius: var(--sk-r) 0 0 var(--sk-r);
    background: #fff;
    color: var(--sk-text);
    font-size: 15px;
}
.top2 .top2_r .inp1:focus { border-color: var(--sk-primary); outline: 0; }
/* 原按钮是 but.jpg（橙底白字图），换成主色块 + 内联 SVG 放大镜 */
.top2 .top2_r .inp2 {
    float: left;
    width: 100px;
    height: 44px;
    box-sizing: border-box;
    border: 0;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: 0 var(--sk-r) var(--sk-r) 0;
    background: var(--sk-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
.top2 .top2_r .inp2:hover { background-color: var(--sk-primary-h); }

/* 主导航：去 navbj.jpg 深色底图，改白底黑字 + 下边线。
   ⚠ 高度/行高保持 41px —— `.sub_nav` 是 `position:absolute; top:41px`，
     改了这两行就得同时改 top，属于没必要的风险。字号 16px 只影响横向占用：
     1440 容器下 11 项约 1100px，余量从 v1 的 195px 变成 340px，只会更宽松。 */
.nav {
    height: 41px;
    line-height: 41px;
    background: #fff;
    border-bottom: 1px solid var(--sk-line);
}
.nav_ct { width: var(--sk-w); margin: 0 auto; position: relative; }
/* font-size:0 是为了吃掉 <a> 之间的换行空白；链接自己再写回字号 */
.nav_ct .first_nav { font-size: 0; }
.nav_ct .first_nav a {
    display: inline-block;
    vertical-align: top;
    height: 41px;
    line-height: 41px;
    /* ⚠ 复刻表在这条上留了 margin-top:1px。外壳 .nav 正好 41px，多出的 1px 会让
       每个导航项探出底边、盖住这里新加的 border-bottom。归零。 */
    margin-top: 0;
    padding: 0 18px;
    color: #222;
    font-size: 16px;
    font-weight: 500;
}
.nav_ct .first_nav a:hover { color: var(--sk-primary); background: #f2f8ff; }
/* .bj = 当前所在大类（JS 契约名，只改外观） */
.nav_ct .first_nav .bj { background: var(--sk-primary); color: #fff; }
.nav_ct .first_nav a.nav-disabled { color: var(--sk-muted); }
.nav_ct .first_nav a.nav-disabled:hover { color: var(--sk-muted); background: #fafafa; }

/* 二级下拉：白卡 + 主色顶边。
   ⚠ height / line-height / padding-top 是 inline 属性，也是 app.js 的
     showsub/closesub 直接写 style.height 的契约 —— 这里一个字都不碰，
     只改宽度（CSS 给的，能改）与配色。
   ⚠ 字号刻意留在 13px：index.css 给每个子类锚点写死了 height:14px; line-height:12px
     + margin-top:10px，每行的高度就是这两条算出来的；而本站 body 的字号从 12px 提到
     了 16px，不在这里压回去，锚点上的字会撑破那 14px 的行。13px 是折中（比原来的 12px
     略大一点点，又不至于撑破）。
   ⚠ 左右内边距保持复刻表的 10px —— 它直接决定一行能塞几个子类、也就是下拉要几行，
     属于布局数值，不跟着换肤走。 */
.nav_ct .sub_nav {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    box-shadow: var(--sk-sh-1);
}
.nav_ct .sub_nav a { color: #5a5f66; padding-left: 10px; padding-right: 10px; font-size: 13px; }
.nav_ct .sub_nav a:hover { color: var(--sk-primary); }
.nav-none { color: var(--sk-muted); }

/* 子类下拉框不再压住正文（用户 2026-10-10：「悬停弹出的小类框，不要挡住下面的内容，
   可以考虑将下面的内容整体下移一点」）。
   .sub_nav 是 position:absolute、不吃文档流 ⇒ 一弹出就直接盖在正文上（首页盖住 tab 行和
   「点击排行榜」，分类页盖住课程卡）。办法是让**页头自己长出同样高的一段**：正文跟在页头
   后面，页头一高就整体下移，下拉框正好落在多出来的那段空白里。
   高度由 app.js 的 showsub/closesub **现测现写**进 --sub-h —— 三个大类的子类数差很多
   （实测展开后 学前教育 / 大学课程 68px、中 小 学 180px），收起后是 94px，
   写死任何一个数都会在别的大类上露馅。默认 0 ⇒ 没悬停过时页头高度和以前一模一样，
   不白占一个像素。
   ⚠ 用 padding 不用 margin：正文那些外壳（.main02 等）自带 margin-top:10px，
     与外层 margin 会**合并**（那 10px 就白丢了），padding 则是实打实相加。
   ⚠ 这里只加高度、不动 z-index/层级：下拉框本来就是白的带边框，落在空白里正好。
   ⚠⚠ **刻意不加 transition**：下拉框本身是 display:none→block 的**瞬间**出现（app.js 里
     没有渐变），让位若做成 .18s 过渡，头 180ms 里框已经全开、空白还没长出来 ⇒ 反倒会挡一下，
     而且过渡究竟跑没跑还依赖 var() 的解析时机。要「永远不挡」就得和框同时到位。 */
.site-header {
    padding-bottom: var(--sub-h, 0px);
}

/* -------------------------------------------------------------- 4. 面包屑 */
/* ⚠ 复刻表里 .positionDiv 有两套数（index.css 42px 无下边线 / style_index.css
   30px 带虚线），皮肤层写单条就把两页归一了 —— 这是「统一观感」想要的，
   但要清楚它是一次有意的行为改变。有 inline `margin-top:10px` 的页面
   （course / play / rank / category / user）那 10px 压不动，也就那样。 */
.positionDiv {
    width: var(--sk-w);
    margin: 24px auto 0;
    height: 36px;
    line-height: 36px;
    padding-left: 0;
    background: none;
    border-bottom: 1px solid var(--sk-line-2);
    color: var(--sk-text-2);
    font-size: 14px;
}
.positionDiv a { color: var(--sk-text-2); }
.positionDiv a:hover { color: var(--sk-primary); }

/* ---------------------------------------------------------------- 5. 首页 */
/* ⚠ 两栏是浮动列，只有它们不是流式宽度。1440 下：左栏 calc(100% - 376 - 24) = 1040，
   右栏 376，中间自然留出 24px（1040 + 376 = 1416 < 1440）。 */
.main02 { width: var(--sk-w); margin: 24px auto 0; overflow: hidden; }
.m2left { width: calc(100% - var(--sk-side) - var(--sk-gap)); float: left; display: inline; }
.m2right { width: var(--sk-side); float: right; display: inline; }

/* 左栏（选项卡 + 课程卡）
   ⚠ 原站是 `height:553px`（模板里又用 inline 覆盖成 1120px）+ 4 列 133px 卡片，
     卡片里的图写死了 129×96。这里把卡片改成按列宽伸缩，所以**图也必须一起
     改成 100%**，否则卡片变宽而图不变，右边空一截。
   ⚠ 高度改 min-height：卡片变高后，固定 1120 会把多出来的行裁掉
     （.m2left 是 float、外面 .main02 有 overflow:hidden ⇒ 溢出被裁，不是可见的溢出）。
     index.html 里那条 inline `height:1120px` 已在本轮删除，复刻表 index.css 的
     `height:553px` 是同权重的旧值、本文件在后就压住了，所以这条**不需要 !important**。
   ⚠ overflow:hidden 是这里新加的（复刻表没给）。两个作用：收住下面两批浮动的 li，
   以及兜底裁掉任何溢出。 */
.m2_left_top {
    height: auto;
    min-height: 1120px;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    overflow: hidden;
}
/* 选项卡条：高度 56、行高 56。⚠ 这里刻意**不**把字号拉到 --sk-fs-h1：
   首页这条 .top_title 是一排可切换的选项卡（ta0/ta1/…，见 index.html），
   不是单个标题 —— 28px 的选项卡会挤成一片。单个标题的那条（分类页的
   `.main_bgzdh .top_title`，里面只有一个 a.zdha1）走第 6 节的 28px。 */
.top_title,
.m2_left_top .top_title,
.main_bgzdh .top_title {
    height: 56px;
    line-height: 56px;
    background: var(--sk-card) none;
    border-bottom: 1px solid var(--sk-line);
}
.m2_left_top .top_title a {
    display: inline-block;
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    color: var(--sk-text);
    font-size: var(--sk-fs-h2);
    font-weight: 500;
}
.m2_left_top .top_title a:hover { color: var(--sk-primary); }

/* 卡片都是浮动的，父层若不收一下，去掉固定高度后 .ul01 会塌成 0 高，
   后面的 .ul-text / .tab-more 就会叠到卡片上。 */
.m2_left_top .ul01::after { content: ""; display: table; clear: both; }
/* 封面格：一行 4 个、24px 沟。宽 = 25% - 30px 时左右各留 24px
   （24 + 4w + 3×24 + 24 = 100%），比 v1 的 `25% - 20px`（最后一张贴右边缘）更整齐。
   1440 下卡片约 240px 宽（v1 是 133px 硬宽）。 */
.m2_left_top .ul01 li {
    width: calc(25% - 30px);
    height: auto;
    float: left;
    display: inline;
    margin-left: 24px;
    margin-top: 24px;
    padding-bottom: 14px;
    background: var(--sk-card);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.m2_left_top .ul01 li:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-sh-3);
}
/* ⚠ index.css 给这张图写了 `padding:1px;border:1px`。现在图是 width:100%，
   内容盒算法下那 4px 会把图撑出卡片一截，去掉。
   ★★ 图框必须**钉死比例**（aspect-ratio + object-fit），不能只给 width:100%;height:auto：
      封面图是抓来的，比例五花八门（实测同一个 tab 里就有 800×800、769×459、300×200、
      1080×985…，缩放后图高 124~230px 不等）。height:auto 会让每张卡高矮不一，
      而这一格是 float 排版 —— 浮动盒只会往下/往右让位、永远不会回填空位，
      于是一张高卡就把后面整格的落点挤歪（2026-10-10 用户报「学前教育第 5 张卡没对齐」）。
      复刻表当年没露这个问题，是因为 index.css 把 li 钉成 133×153、图钉成 129×96 写死。
      比例取原站的 129×96 ≈ 4:3；object-fit:cover 负责裁齐（不裁就会像原站那样被压扁）。 */
.m2_left_top .ul01 li a img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--sk-r) var(--sk-r) 0 0;
}
/* ★★ 标题也得钉成固定两行（15px × 1.5 = 22.5px/行 ⇒ 45px）：
   卡片高 = 图 + 标题 + 内边距，标题一行和两行差 22.5px，同样是能把浮动格顶歪的量。
   -webkit-line-clamp 只用来给超长标题补个省略号，高度由 height 兜底。 */
.m2_left_top .ul01 .p2 {
    padding: 0 12px;
    text-align: center;
    margin-top: 12px;
    line-height: 1.5em;
    font-size: 15px;
    height: 45px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.m2_left_top .ul01 .p2 a { color: var(--sk-text); }
.m2_left_top .ul01 .p2 a:hover { color: var(--sk-accent); }

/* 「更多…」文字列表
   ⚠ 这一条是 site.css 给的、唯一的定义（index.css / style_index.css 里没有）：
       .m2_left_top .ul-text { clear:both; overflow:hidden; padding:6px 10px 0 }
       .m2_left_top .ul-text li { float:left; width:300px; height:24px; line-height:24px; margin-left:6px }
     300×24 是按 960px 容器 + 12px 字算死的。容器到 1040、字到 15px 之后，
     24px 的行会**上下各溢出一截**（15px 字的 2 倍行高是 30px），
     所以高度交还内容、宽度改成三列流式（ul 内宽 990：24 + 3w + 2×24 + 24 = 990 ⇒ w=298）。 */
.m2_left_top .ul-text { padding: 8px 24px 0; }
.m2_left_top .ul-text li {
    float: left;
    display: inline;
    width: calc((100% - 96px) / 3);
    height: auto;
    line-height: 2;
    margin-left: 24px;
    font-size: 15px;
    border-bottom: 1px dashed var(--sk-line-2);
}
.m2_left_top .ul-text li a { color: var(--sk-text-2); }
.m2_left_top .ul-text li a:hover { color: var(--sk-accent); }
.m2_left_top .tab-more { padding: 18px 24px 22px; }
.m2_left_top .tab-more a { color: var(--sk-primary); font-size: 15px; }

/* 右栏：点击排行榜 */
/* ★ v2 必须写 height:auto，不能沿用 index.css 的 350px：
   行高从 29 提到 36 之后，10 条 = 标题 56 + 间距 12 + 10×36 = 428 > 350，
   350px + overflow:hidden 会把最后两条裁掉。
   （v1 是 34 + 6 + 10×29 = 330 < 350，正好装得下，所以那时没暴露。） */
.m2_right_top {
    height: auto;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    overflow: hidden;
}
/* 右栏这两个小标题（点击排行榜 / 精品教程推荐）是**单个标题**，走大标题规格 */
.rtop_title {
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    background: var(--sk-card) none;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-text);
    font-size: var(--sk-fs-h1);
    letter-spacing: var(--sk-ls-title);
    font-weight: 400;
}
.m2_right_top ul { margin-top: 12px; padding: 0 16px; }
.m2_right_top ul li {
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid var(--sk-line-2);
}
.m2_right_top ul li a { color: var(--sk-text); }
.m2_right_top ul li a:hover { color: var(--sk-accent); }
/* 排行序号：原站是 gs1/gs/gs3.jpg 三张小图（index.css 给的是 14×12），
   改蓝/琥珀/绿圆角小方块。
   ⚠ 方块 24px 落在 36px 的行里 ⇒ margin-top 取 (36-24)/2 = 6px，
     不会把行撑高，也就不会让外壳多长出一截。 */
.m2_right_top ul .li01,
.m2_right_top ul .li02,
.m2_right_top ul .li03 {
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin-top: 6px;
    border-radius: var(--sk-r);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background-image: none;
}
.m2_right_top ul .li01 { background-color: var(--sk-primary); }
.m2_right_top ul .li02 { background-color: var(--sk-amber); color: #4a3300; }
.m2_right_top ul .li03 { background-color: var(--sk-green); }

/* 右栏：精品教程推荐（index.css 的 dl 是 width:257px; margin:0 auto，这里改成铺满；
   dl 自带 overflow:hidden，浮动已经被收住，不用补 clearfix）
   ⚠ 缩略图 110×78 是照 376px 的栏宽重算的（v1 是 87×62 / 95px 沟，那是按 312 算的）。
   ⚠ height:auto 是必须的：复刻表给这层写死了高度（index.css 890px / style_index.css
     540px）+ `overflow:hidden`，而模板里只有首页那处带 inline `height:auto` 顶着它。
     皮肤层自己声明一次，就不再依赖模板里那行 inline。 */
.m2_right_bottom {
    height: auto;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    margin-top: var(--sk-gap);
    overflow: hidden;
}
.m2_right_bottom dl {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;
    clear: both;
    border-bottom: 1px solid var(--sk-line-2);
    overflow: hidden;
    transition: background .2s ease;
}
.m2_right_bottom dl:last-child { border-bottom: 0; }
.m2_right_bottom dl:hover { background: #f7fbff; }
.m2_right_bottom dl dt { width: 110px; height: 78px; float: left; display: inline; }
.m2_right_bottom dl dt img {
    width: 110px;
    height: 78px;
    object-fit: cover;
    border-radius: var(--sk-r);
    display: block;
}
/* dt 110 + margin-left 12 = 122 —— 写 122 是刚好塞满，这里给到 126 留 4px 余量 */
.m2_right_bottom dd { float: left; display: inline; width: calc(100% - 126px); margin-left: 12px; }
.m2_right_bottom .dd1 a { color: var(--sk-text); font-size: 15px; }
.m2_right_bottom .dd1 a:hover { color: var(--sk-accent); }
.m2_right_bottom .dd2 { color: var(--sk-text-2); font-size: 13px; margin-top: 8px; line-height: 1.5em; }

/* ------------------------------------------------------------ 6. 列表卡片 */
/* 二级分类横条。复刻表给了两套死尺寸 —— index.css 是 128px/内部 dl 107/`dt` 107，
   style_index.css 是 222px/内部 dl 212/`dt` 202 + `dd` 210 且 overflow-y:scroll。
   两套都是按 960 容器算的行数，容器到 1440 之后只会更空，但**硬高会把内容裁掉**
   （两个壳都带 overflow:hidden），所以这份清单整个改成按内容撑开。
   ⚠ dl/dt/dd 都是浮动的 → dl 自己也带 overflow:hidden（BFC），高度才收得住。 */
.bgzdhclass {
    width: var(--sk-w);
    box-sizing: border-box;
    height: auto;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    margin-top: var(--sk-gap);
    overflow: hidden;
}
.bgzdhclass dl { height: auto; }
.bgzdhclass dt {
    height: auto;
    line-height: 2.4;
    /* 复刻表这格是 14px（配 12px 的旧正文），现在正文到 16px 了，跟着抬一档 */
    font-size: 15px;
    color: var(--sk-primary);
    border-right: 1px dashed var(--sk-line);
}
/* ⚠ 减数不能刚好等于 dt 的占位：dt = 120 内容 + 1 虚线边框 = 121，
   再加 dd 自己的 margin-left:10 ⇒ 要减 131 才不溢出。
   写成 130 会**差 1px**，dd 会被挤到下一行 —— 子分类云跑到大类名底下，
   而不是并排。这里给到 138，留 7px 余量，避开子像素舍入。 */
.bgzdhclass dd { width: calc(100% - 138px); height: auto; overflow: visible; }
.bgzdhclass dd a { color: var(--sk-text-2); border-right-color: var(--sk-line); }
.bgzdhclass dd a:hover { color: var(--sk-primary); }
/* 复刻表给计数 span 写的是橙色 #f57007 */
.bgzdhclass dd a span { color: var(--sk-text-2); }
/* site.css 里当前二级分类是 #dd6608 —— 两处写法都写上，保证压得住 */
.bgzdhclass dd .sub-active,
.bgzdhclass dd a.sub-active { color: var(--sk-primary); font-weight: 700; }

/* 标题条 + 内容壳 */
.main_bgzdh {
    width: var(--sk-w);
    box-sizing: border-box;
    margin: var(--sk-gap) auto 0;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    overflow: hidden;
}
/* 分类/搜索页这条 .top_title 里只有一个 a.zdha1（标题）+ span.result-tip（计数），
   是**单个标题**，所以走 28px 大标题；和首页那排选项卡不是一回事。 */
.main_bgzdh .top_title a {
    display: inline-block;
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    color: var(--sk-text);
    border-left: 0;
    border-right: 0;
    font-size: var(--sk-fs-h1);
    letter-spacing: var(--sk-ls-title);
    font-weight: 400;
}
.main_bgzdh .top_title a:hover { color: var(--sk-primary); }
/* 计数那格别跟着标题一起变大（它继承的是 .top_title 的 28px） */
.main_bgzdh .top_title .result-tip { font-size: 14px; margin-left: 16px; }
/* 当前选项卡 */
.top_title .ta0,
.m2_left_top .top_title .ta0,
.main_bgzdh .top_title .zdha1 {
    background: var(--sk-card);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    color: var(--sk-primary);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--sk-primary);
}

/* 课程列表（jc_content / jc_content02 两种壳，模板里用的是 02 这套）
   ⚠ style_index.css 里这一整块是按 960 容器 + 小图算死的，逐条拆：
       .jc_content02        { padding-left/right:20px }  ← 和 width 一起会溢出，改 100%+border-box
       .jc_content02 dl     { height:175px }            ← 图已 187px，必须 auto
       .jc_content02 .dd1   { height/line-height:25px } ← 标题字号已 18px
       .jc_content02 .dd2   { height/line-height:25px; span{margin-right:75px} }
       .jc_content02 dt img { width:200px;height:155px;padding:2px;border:1px }
   ⚠ dd 是 float:left，dt 没写宽度（宽度由图撑开）。这里给 dd 留 264px 让位，
     并把 dt 钉成确定尺寸 + object-fit，免得大图把 dd 顶到下一行。
     1440 下缩略图从 212×165 放大到 240×187（保持原来的宽高比）。 */
.jc_content02 { width: 100%; box-sizing: border-box; margin: 0 auto; }
.jc_content02 dl { height: auto; }
.jc_content02 dt {
    width: 240px;
    height: 187px;
    margin-right: 24px;
    border-radius: var(--sk-r);
    overflow: hidden;
    border: 1px solid var(--sk-line-2);
    box-sizing: border-box;
}
.jc_content02 dt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    padding: 0;
    border: 0;
}
/* dt 占 240（border-box，含边框）+ margin-right 24 = 264；这里给 268 留 4px。
   分母写 264 是「刚好塞满」，浮动的恰好相等在部分浏览器上会掉行，宁可多 4px 也不冒险。 */
.jc_content02 dd { width: calc(100% - 268px); }
.jc_content02 dd ul { margin: 6px 0 0; }
.jc_content02 dd li { color: var(--sk-text-2); }
.jc_content02 .dd1 { height: auto; line-height: 1.8; }
.jc_content02 .dd1 a { color: var(--sk-text); font-size: 18px; font-weight: 600; }
.jc_content02 .dd2 { height: auto; line-height: 1.8; color: var(--sk-text-2); font-size: 14px; margin-top: 8px; }
/* 四个元信息 span 原本两两隔 75px（按 696px 的 dd 算的），按新的 dd 宽收到 28px */
.jc_content02 .dd2 span { margin-right: 28px; }
.jc_content02 .dd3 {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 84px;
    margin-top: 10px;
    background: var(--sk-head);
    border-radius: var(--sk-r);
    padding: 12px 16px;
    color: var(--sk-text-2);
    line-height: 1.8;
}
.jc_content02 dd h3 a { color: var(--sk-text); }
.jc_content02 dd h3 a:hover { color: var(--sk-accent); }

/* 「推荐教程」小卡（jctj / jctj02）
   ⚠ 原站 jctj02 的 li 只有 96px 宽，里面却塞着 169×134 的图 —— 图会溢出到相邻卡上。
   ⚠ v1 给 jctj02 单开了一条「一行 8 个」，v2 撤掉：目标是「把设计语言拉满」，
     8 个一行在 1440 下每张只有 153px，比首页封面格还小，观感倒退。
     两个类现在共用一行 6 个（模板里 .jctj02 同时带 .jctj，所以直接删掉覆盖即可）。
   ⚠ 复刻表 li 是 height:170px（图 130 + 两行字），现在图按列宽放大到约 168px，
     必须 auto，否则第二行会叠到第一行上。 */
.jctj {
    width: var(--sk-w);
    box-sizing: border-box;
    border: 1px solid var(--sk-line);
    border-top: 2px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    margin: var(--sk-gap) auto 0;
    overflow: hidden;
}
.jctj .jctj_title {
    height: 56px;
    line-height: 56px;
    background: var(--sk-card) none;
    border-bottom: 1px solid var(--sk-line);
}
.jctj .jctj_title span {
    color: var(--sk-text);
    font-size: var(--sk-fs-h1);
    letter-spacing: var(--sk-ls-title);
    font-weight: 400;
    margin-left: 20px;
}
/* ⚠ 复刻表这里是 margin-top:20px（那是给 36px 的小标题条留的间距），
   标题条已经 56px 了，这里清零，间距交给 li 自己的 margin-top。 */
.jctj ul { clear: both; margin: 0; padding: 0 0 8px; }
.jctj ul::after { content: ""; display: table; clear: both; }
/* 6 个一行：24 + 6w + 5×24 + 24 = 100% ⇒ w = calc((100% - 168px) / 6)。1440 下约 212px。 */
.jctj ul li {
    width: calc((100% - 168px) / 6);
    height: auto;
    float: left;
    display: inline;
    margin-left: 24px;
    margin-top: 24px;
    padding-bottom: 14px;
    background: var(--sk-card);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.jctj ul li:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-sh-3);
}
.jctj ul li .p1 a { display: block; }
/* ⚠ 同 .ul01：复刻表的 `padding:2px;border:1px` 在 width:100% 下会把图撑出卡片。
   ★★ 图框钉死比例的理由见 .ul01 那条长注释 —— 这里一样：复刻表给的
      `width="169" height="134"` 属性只管「不变形」，换成 height:auto 之后
      每张卡高度随封面比例变，6 列浮动格会错位（实测 12 张卡里第 7 张被挤到
      第 6 列、第二行整行下沉 250px）。 */
.jctj ul li .p1 img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--sk-r) var(--sk-r) 0 0;
}
/* ★★ 同 .ul01：标题钉成固定两行 —— 一行/两行差 22.5px，一样能把浮动格顶歪。 */
.jctj ul li .p2 {
    padding: 0 12px;
    margin-top: 12px;
    line-height: 1.5em;
    font-size: 15px;
    height: 45px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.jctj ul li .p2 a { color: var(--sk-text); }
.jctj ul li .p2 a:hover { color: var(--sk-accent); }

/* -------------------------------------------------------------- 7. 详情页 */
.jcym_ct1 { width: var(--sk-w); margin: var(--sk-gap) auto 0; }
.jcym_ct1 dt {
    width: 240px;
    height: 187px;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-sizing: border-box;
    overflow: hidden;
}
/* ⚠ style_index.css 给这张图写的是 `width:208px;height:161px;padding:2px;border:1px`。
   模板里那张 img 又带 width="212" height="165" 属性 —— 图比框小一圈会露白边。
   这里用 CSS 顶掉属性并铺满裁齐（CSS 优先于表现属性），连 padding/border 一起清掉。 */
.jcym_ct1 dt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border: 0;
    border-radius: 3px;
    display: block;
}
/* dd 是 float:right 让位给 dt，宽度留 264px（240 + 24 沟） */
.jcym_ct1 dd { width: calc(100% - 264px); }
/* 复刻表给 h3 挂了 `border-bottom:#ddd 1px + padding:7px 0`，是给 15px 小标题用的 */
.jcym_ct1 dd h3 {
    color: var(--sk-text);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    border-bottom: 0;
    padding: 0 0 8px;
}
.jcym_ct1 dd .p1 { height: auto; line-height: 1.8; color: var(--sk-text-2); font-size: 14px; margin-top: 12px; }
.jcym_ct1 dd .p1 span { margin-right: 22px; font-size: 14px; }
.jcym_ct1 dd .p2 {
    background: var(--sk-head);
    border-radius: var(--sk-r);
    padding: 14px 16px;
    margin-top: 12px;
    color: var(--sk-text-2);
    line-height: 1.9;
}

/* 分集表
   ⚠ li 里的 .sp1/.sp2 是 **inline-block，不是浮动**（复刻表给它们的是
     `display:inline-block` + `vertical-align:middle`，那两条只有非浮动才起作用）。
     所以下面那行 li::after 的 clearfix 是个空操作 —— 留着只是防御：哪天有人把
     同排改回 float，这里仍然收得住。真正的收口是上面的 overflow:hidden。
     行高改 auto + min-height:48px —— 章节名长到两行时不会压住下一行。
   ⚠ 这张表每行是四格：.sp1 + 三个 .sp2。其中「文件格式」那格带 inline
     `style="width:90px"`，另两格（播放/权限、下载/权限）吃下面 .sp2 的 108px
     ⇒ 90 + 108 + 108 = **306**，正好是 .sp1 减掉的数。加/减列时两边要一起改。 */
.jcym_ct2 {
    width: var(--sk-w);
    box-sizing: border-box;
    margin: var(--sk-gap) auto 0;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    overflow: hidden;
}
.jcym_ct2 ul li {
    height: auto;
    min-height: 48px;
    line-height: 48px;
    background: var(--sk-card);
    border-top: 1px solid var(--sk-line-2);
    /* ⚠ font-size:0 是给下面的 inline-block 消空白用的：两个 <span> 之间隔着换行，
       渲染成一个约 4px 的空格，两处就是 8px —— 不消掉 sp1(100%-198)+90+108 就会
       正好超出 100% 而折行。子元素各自写回字号。 */
    font-size: 0;
}
.jcym_ct2 ul li::after { content: ""; display: table; clear: both; }
.jcym_ct2 ul li:first-child { border-top: 0; }
.jcym_ct2 ul li:hover { background: #f7fbff; }
/* ★ 复刻表写的是 `.jcym_ct2 ul li .sp1{width:590px;padding-left:30px;border-left:none}`
   —— 590px 是「960 容器 - 108 - 108 - 一截 padding」量出来的。这里改成吃余量。
   ⚠ 复刻表同时还给 `ul li span` 补了 inline-block 与一条 1px 左竖线（sp1 自己
     用 border-left:none 摘掉、sp2 保留）——那是它想要的分栏竖线，留着。
   ⚠⚠ 减掉的数 = 那张表**右侧所有 .sp2 的宽度之和**：文件格式 90（inline）+ 播放/权限 108
     + 下载/权限 108 = **306**。2026-10-13 补上第四列「下载/权限」时从 198 改成 306 ——
     只加模板不改这里，名称列会宽出 108px，把最后一格挤到第二行。 */
.jcym_ct2 ul li .sp1 {
    display: inline-block;
    width: calc(100% - 306px);
    box-sizing: border-box;
    padding-left: 24px;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
}
.jcym_ct2 ul li .sp1 a { color: var(--sk-text); }
.jcym_ct2 ul li .sp1 a:hover { color: var(--sk-accent); }
/* 当前正在播的那一节（play.html 用 th:classappend 打上的） */
.jcym_ct2 ul li .sp1 a.ch-current { color: var(--sk-primary); font-weight: 700; }
.jcym_ct2 ul li .sp2 {
    display: inline-block;
    width: 108px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    color: var(--sk-text-2);
    font-size: 14px;
}
/* 表头两行（复刻表是 37px，v1 抬到 44，v2 跟着行高到 48）
   ⚠⚠ 这里的 `font-size: 0` 是**必须**的，别当冗余删掉：
     上面 `.jcym_ct2 ul li` 那条也写了 font-size:0（同样为了消掉 span 之间的空白），
     但 style_index.css 里有一条 `.jcym_ct2 .title_li{…;font-size:14px}` —— 它是
     **(0,2,0) 两个类**，而 `.jcym_ct2 ul li` 是 **(0,1,2) 一个类 + 两个元素**；
     比权重先比类数 ⇒ **它赢**，于是表头行的 font-size 又变回 14px，
     两个 span 之间的换行空白（约 4px×2）把 `.sp1` 的 `calc(100% - 198px)` 顶出去，
     **「播放/权限」这一格被折到第二行**（实测：改前表头 202px 高、两行；
     数据行不受影响 —— 它们没有 .title_li 类，font-size:0 照常生效）。
     把 font-size:0 提到 (0,3,2) 这一条上才压得住。子元素各自写回 14px，字号不受影响。 */
.jcym_ct2 ul li.title_li,
.jcym_ct2 ul li.title_li1 {
    height: auto;
    line-height: 48px;
    background: var(--sk-head);
    border-top: 0;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-text-2);
    font-weight: 600;
    font-size: 0;
}
.jcym_ct2 ul li.title_h3 {
    height: auto;
    line-height: 44px;
    background: var(--sk-card);
    border-bottom: 1px solid var(--sk-line-2);
    color: var(--sk-text);
}

/* 相关课程条（course.html 的相关课程 / course-missing.html 的「没有这门课程」）
   ⚠ 复刻表给 .jcym_ct21 ul li 写了 height:100px + line-height:100px + background:#f4f4f4
     —— 那条是照原站「每行装一张缩略图」的高度写的，而这两个页面里的 li 只有一行文字，
     结果是每行一条 100px 高的浅灰横条贴在白卡片上。这里把高度交还给内容。
     （course.html 那条 li 的 inline width:297px 已在上一轮从模板里删掉。） */
.jcym_ct21 {
    width: var(--sk-w);
    box-sizing: border-box;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: var(--sk-card);
    box-shadow: var(--sk-sh-2);
    margin: var(--sk-gap) auto 0;
    overflow: hidden;
}
/* 复刻表里这条（style.css 里是 923×40 的绿字图条）改前一条 */
.jcym_ct21 .zhongjian_bkclb_lanmu {
    width: 100%;
    box-sizing: border-box;
    height: 56px;
    line-height: 56px;
    padding-left: 24px;
    background: var(--sk-card) none;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-text);
    font-size: var(--sk-fs-h1);
    letter-spacing: var(--sk-ls-title);
    font-weight: 400;
}
/* ⚠ course.html 里这个标题外面还套了一层 `<div style="float:left;width:135px;">`
   —— 135px 是按 15px 小字算的，换成 28px 之后「相关课程视频推荐」8 个字要 238px，
   在 135px 的框里会被折成两行、把 56px 的条撑破。只能靠 !important 压 inline 宽度。 */
.jcym_ct21 .zhongjian_bkclb_lanmu > div { width: auto !important; }
.jcym_ct21 .zhongjian_bkclb_neirong { width: 100%; box-sizing: border-box; }
/* 标题条：course-missing.html 的「没有这门课程」那一行用 .title_li1，
   复刻表给它铺 title_li.jpg（实测是 11 级纯灰 #f3f3f3~#fdfdfd，没有橙色，
   但也不是本皮肤的表头灰）—— 归到和 .jcym_ct2 表头同一套观感。
   ⚠ 只圈 .title_li1。同一页下面两行也是 .title_li，但那是正文（说明文字 + 返回首页），
     复刻表对 .jcym_ct21 .title_li 本来就没有专门规则，这里也不该给它们表头外观。 */
.jcym_ct21 .title_li1 {
    height: auto;
    line-height: 48px;
    background: var(--sk-head);
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-text);
    font-weight: 600;
    padding-left: 24px;
}
.jcym_ct21 .title_li1 .sp1 { font-size: 14px; }

/* 正文行（course.html 的相关课程列表 + course-missing.html 的两行说明）。
   权重 (0,1,2)，低于上面那条 .jcym_ct21 .title_li1 (0,2,0) —— 类数 2 > 1，
   表头不会被这里盖掉，与书写顺序无关。 */
.jcym_ct21 ul li {
    color: var(--sk-text-2);
    line-height: 2;
    height: auto;
    background: transparent;
    border-bottom-color: var(--sk-line-2);
    font-size: 15px;
}
.jcym_ct21 ul li a { color: var(--sk-text); }
.jcym_ct21 ul li a:hover { color: var(--sk-accent); }
/* course-missing.html 那两行说明文字（.title_li 行里的 .sp2）。
   ⚠ 复刻表的 `.jcym_ct21 ul li .sp2` 是 width:108px + text-align:center —— 那是给
     分集表「文件格式」那种窄格用的。这两行模板里本来靠 inline width:960px 顶着它
     （960 是按旧容器量的），本轮把 inline 宽度删了（见 course-missing.html 的注释），
     所以必须在这里显式收回：整宽 + 左对齐。权重 (0,3,2) > 复刻表的 (0,2,2)。
   ⚠ 别把这条挪到 .jcym_ct2 去：分集表那边的 .sp2 是 108px 的窄格，动不得。 */
.jcym_ct21 ul li.title_li .sp2 {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* ★ 2026-10-11 详情页新加的「教程下载」那一格（course.html 「网盘下载 start」）：
   一行「下载通道一：百度网盘」，点进 /ListDown/{id}.html。
   ⚠ 权重必须够 (0,4,2)：上面那条 `.jcym_ct21 ul li.title_li .sp2` (0,3,2) 是给
     course-missing.html 的说明行写的「整宽 + 左对齐」，这一行的 li 同样带 title_li、
     span 同样带 sp2，会被它一起钉成左对齐 —— 而原站这一行是**居中**的
     （原站那个 span 带 inline `width:960px;text-align:center`，960 是按它的旧容器量的，
      所以宽度这里不写死，交给容器的 100%）。 */
.jcym_ct21 ul li.title_li .sp2.dl-channel-line {
    text-align: center;
}
.jcym_ct21 ul li .sp2.dl-channel-line a {
    color: var(--sk-primary);
    font-weight: 600;
}
.jcym_ct21 ul li .sp2.dl-channel-line a:hover { color: var(--sk-accent); }

/* /ListDown 页那一格「网盘批量下载」里的**门**：「地址不可见，登陆/开通VIP会员」。
   ⚠ 这一行的 span 只有 .sp2，复刻表 `.jcym_ct21 ul li .sp2` (0,2,2) 把它钉成 108px 窄格 +
     居中 ⇒ 整句会被折成一列。这里 (0,3,2) 收回整宽、改左对齐。
   ⚠ 它和上面那条 .dl-channel-line 长得像但语义不同（一条是链接、一条是门，文案与落点都不同），
     所以是两个类，**不要合并**。 */
.jcym_ct21 ul li .sp2.dl-gate {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-left: 24px;
    color: var(--sk-text-2);
}
.jcym_ct21 ul li .sp2.dl-gate a { color: var(--sk-primary); font-weight: 600; }
.jcym_ct21 ul li .sp2.dl-gate a:hover { color: var(--sk-accent); }

/* /ListDown 页 VIP 那一档（2026-10-13 加）：一行一个文件 —— 名称 + 「点击下载」。
   几何与上面那条 .dl-gate 相同（同样是单个 .sp2 撑整行；复刻表的
   `.jcym_ct21 ul li .sp2` (0,2,2) 会把它钉成 108px 窄格 + 居中，这里 (0,3,2) 收回）。
   ⚠ 与 .dl-gate 分成两个类**不要合并**：那条是"门"（一句提示 + 充值/登录落点），
   这条是"地址"（文件名 + 站内下载链接），语义与落点都不同。 */
.jcym_ct21 ul li .sp2.dl-addr {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-left: 24px;
    color: var(--sk-text-2);
}
.jcym_ct21 ul li .sp2.dl-addr .dl-name { margin-right: 12px; }
.jcym_ct21 ul li .sp2.dl-addr a { color: var(--sk-primary); font-weight: 600; }
.jcym_ct21 ul li .sp2.dl-addr a:hover { color: var(--sk-accent); }

/* 教程简介（复刻表给标题下挂了 `border-bottom:#ddd dashed 1px`，是配 15px 小字用的） */
.Download_ct2 {
    width: var(--sk-w);
    box-sizing: border-box;
    margin: var(--sk-gap) auto 0;
    padding: 24px 28px;
    background: var(--sk-card);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
}
.Download_ct2_title2 {
    color: var(--sk-text);
    font-size: var(--sk-fs-h1);
    letter-spacing: var(--sk-ls-title);
    margin-bottom: 16px;
    border-bottom: 0;
    padding-bottom: 0;
}
/* 模板里是 `<p class="Download_ct2_title2"><b>教程简介</b></p>`，
   里面的 <b> 会把字重顶回 700 —— 目标站的大标题是 400，得连它一起压。 */
.Download_ct2_title2 b { font-weight: 400; }
.Download_ct2 .jcjj_txt { width: 100%; box-sizing: border-box; line-height: 2; color: var(--sk-text-2); }
/* 简介区的多图是**上下叠放**的 —— 但那是**模板侧**用 <br /> 换行实现的
   （见 course.html / listdown.html 的简介区，照原站 `<p><img><br/><img></p>` 的写法）。
   ⚠ 别在这加 `display:block`：会跟模板的 <br /> 叠加成两倍行距。
   复刻表 `.Download_ct2 .jcjj_txt{…float:left;display:inline}` 与目标站
   /style/index.css 那行逐字相同，保持原样即可。 */
.Download_ct2 .jcjj_txt img { max-width: 100%; height: auto; border-radius: var(--sk-r); }

/* 下载说明（course.html 与 listdown.html 共用的 fragments/download.html）。
   复刻表给 .Download_ct4 写的是 960px + 1px 底边，标题 .Download_ct3_title 是
   28px 高的小字条、里面的 <b> 还挂着一张 titlebj.jpg 的绿字图标 —— 都是配小字号的一套。
   这里让它和 .Download_ct2（教程简介）**同款**：同宽、同内边距、同圆角阴影、标题同样 28px。
   ⚠ 标题那条权重：(0,2,0) 压复刻表的 .Download_ct3_title (0,1,0) 够；
     但 <b> 那一条要压复刻表的 `.Download_ct4 .color2 b`（也是 (0,2,1)，同权重靠后到者胜），
     所以这里多带一个 p 写成 (0,3,1) —— 不靠加载顺序，避免以后有人调 link 次序时静默失效。 */
.Download_ct4 {
    width: var(--sk-w);
    box-sizing: border-box;
    margin: var(--sk-gap) auto 0;
    padding: 24px 28px;
    background: var(--sk-card);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
}
.Download_ct4 .Download_ct3_title {
    height: auto;
    line-height: 1.4;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
    font-size: var(--sk-fs-h1);
    letter-spacing: var(--sk-ls-title);
    color: var(--sk-text);
}
.Download_ct4 p.Download_ct3_title b {
    background: none;
    padding-left: 0;
    margin-left: 0;
    color: inherit;
    font-weight: 400;
}
.Download_ct4_nr {
    padding: 0;
    line-height: 2;
    color: var(--sk-text-2);
    text-indent: 0;
}
.Download_ct4_nr p { margin: 0 0 6px; }
.Download_ct4_nr a { color: var(--sk-accent); }
.Download_ct4_nr a:hover { color: var(--sk-primary); }

/* -------------------------------------------------------------- 8. 播放页 */
/* ⚠ site.css 里有明文警告：原站播放器就是 950×525，别再自己定 16:9。
   所以 .play-stage 保持 950 宽，只是**在 1440 的容器里居中**。
   .play-notice / .play-meta 也跟着玩家的 950 走，不铺满 1440 —— 铺满了会变成
   「一个 1440 宽的白条上顶着一台 950 的播放器」，两边的边线对不齐。 */
.play-wrap { width: var(--sk-w); }
.play-stage { margin: 0 auto; }
.play-stage video#vplayer,
.play-stage audio#vplayer { border-radius: var(--sk-r); background: #000; }
.play-notice {
    width: 950px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--sk-card);
    border: 1px solid var(--sk-line);
    border-left: 3px solid var(--sk-primary);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
    padding: 24px 28px;
    color: var(--sk-text-2);
    line-height: 1.9;
}
.play-notice b { color: var(--sk-text); }
.play-notice a { color: var(--sk-primary); }
.play-gate { border-left-color: var(--sk-amber); }
.play-gate .gate-note { color: var(--sk-muted); font-size: 14px; }
.play-meta {
    width: 950px;
    margin: 16px auto 0;
    box-sizing: border-box;
    background: var(--sk-card);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
    padding: 20px 28px;
}
.play-meta h3 { color: var(--sk-text); font-size: 20px; }
.play-meta p { color: var(--sk-text-2); font-size: 14px; margin-top: 10px; }
.play-meta p span { margin-right: 18px; }
.play-back { color: var(--sk-primary); }

/* ---------------------------------------------------------------- 9. 分页 */
/* ⚠ 现在是浏览器默认样式：复刻表的 .pages .spleft/.spright 与 class.css 的
   `div.pages current`（类名被写成了元素名）全都不匹配本站 DOM。这里按真实 DOM
   新写一套：.pages > span.gong + div#AspNetPager1 > a / span.current / a[disabled]。
   ⚠ index.css 的 `.pages{height:40px;line-height:40px;margin-top:20px}` 一并顶掉。 */
/* ⚠ 宽度用 100% 而不是 --sk-w：分页条在 DOM 里是 .main_bgzdh 的子节点
   （那层是 1440 的外壳、带 1px 边框和 overflow:hidden），写死 1440 会溢出 2px 被裁。 */
.pages {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    line-height: 1.6;
    margin: 28px auto 16px;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    text-align: center;
}
/* inline 属性 float:left / font-size:14px 压不过去，只能 !important */
.pages .gong { float: none !important; font-size: 14px !important; color: var(--sk-text-2); }
.pages .gong font { color: var(--sk-primary); }
.pages .gong b { font-size: 16px; }
.pages #AspNetPager1 { display: flex; align-items: center; gap: 6px; }
.pages #AspNetPager1 > a,
.pages #AspNetPager1 > span {
    display: inline-block;
    min-width: 40px;
    height: 40px;
    line-height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    margin-right: 0 !important;   /* 每个 <a> 都带 inline margin-right:5px */
    text-align: center;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: #fff;
    color: var(--sk-text);
    font-size: 14px;
    transition: all .2s ease;
}
.pages #AspNetPager1 > a:hover {
    border-color: var(--sk-primary);
    color: var(--sk-primary);
    background: #f2f8ff;
}
.pages #AspNetPager1 > .current {
    border-color: var(--sk-primary);
    background: var(--sk-primary);
    color: #fff;
    font-weight: 700;
}
.pages #AspNetPager1 > a[disabled] {
    color: var(--sk-muted);
    border-color: var(--sk-line-2);
    background: #fafafa;
    cursor: default;
}

/* ------------------------------------------- 10. 登录 / 注册（照目标站重写） */
/* ⚠ .zhongjian 的 margin-top:115px 是原站「固定页头」留下的偏移；本站页头在正常
   文档流里（那两处 position:fixed 是死掉的 .rides-cs），所以那 115px 是页头底下的
   一条空白带。这里收成 24px。
   ⚠ style.css 还写了 `min-height:550px`（短页面底部会留一大条空白才见页脚），
     一并清掉。
   ⚠ 登录 / 注册**两页已经不用 .zhongjian**（它们改成了全幅背景，见下），
     但会员中心 / 课程页 / 支付结果页还在用它，所以这两条留着。 */
.zhongjian {
    width: var(--sk-w);
    margin: 24px auto 0;
    min-height: 0;
}

/* ★ 登录 / 注册两页在 2026-10-10 按用户要求**照目标站重做了 DOM**
   （目标站 www.xuezhijiaocheng.com 的 /login 与 /register）：
   全幅背景 + 居中白卡 + 标题「用户登录 / 新用户注册」+ 每个字段「灰色小标签 +
   框内左侧图标」+ 全宽蓝色主按钮 + 底部一行「还没有账号 ? 注册新用户」。
   ⇒ 原来那套（原站 WebForms 的 .login 卡片 + .login_wenzi / _srk / _zuixia 三行浮动行
     + .login_gb 空盒子 + #formbox 表单盒）在模板里已经**不再出现**，对应规则同时删掉 ——
     留着就是死代码，还会让人以为那套 317px 定宽浮动行的结构还在。
   ⚠ 提交字段名没变（username / password / confirmPassword / email / next），
     UserController 一个字符都没改。
   ⚠ 目标站那张背景是一张照片（主题的 login-bg.jpg）。本站不放外站图片，改用同色调的
     深蓝渐变 —— 它只需要提供「深色底 + 白卡浮起」的对比，卡片本身才是模仿的主体。 */
.auth {
    min-height: 560px;
    padding: 56px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f3a68 0%, #2c5fa8 48%, #3d7fd1 100%);
}
/* 卡片照目标站 .login-page：白底、4px 圆角、`0 .5rem 1rem rgba(0,0,0,.15)` 的投影
   （Bootstrap 的 .shadow-lg）、p-4 = 24px 内边距、15px 字号。宽度沿用 --sk-login-w。 */
.auth-box {
    width: var(--sk-login-w);
    max-width: 100%;
    box-sizing: border-box;
    padding: 30px 34px 26px;
    background: #fff;
    border-radius: var(--sk-r);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    font-size: 15px;
}
/* 目标站是 <h4 class="mb-4">，Bootstrap 的 h4 = 1.5rem = 24px、mb-4 = 24px */
.auth-title {
    margin: 0 0 24px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
}
/* 字段标签照目标站的 <label class="text-muted">：灰色、字号跟随卡片（15px） */
.auth-label {
    display: block;
    margin-bottom: 8px;
    color: #6c757d;
    font-size: 15px;
    line-height: 1.5;
}
.auth-star { color: #dc3545; }
/* 「忘记密码？」在目标站是标签那一行里右浮的 <a class="text-dark small"> */
.auth-forgot { float: right; color: #343a40; font-size: 12px; }
.auth-forgot:hover { color: var(--sk-primary); }
/* ⚠ 图标压在输入框左内侧：目标站就是 `.form-group.position-relative` + 绝对定位的
   `<i class="mdi mdi-account icons">`。本站没有 MDI 那套图标字体（外站字体，不引），
   用同义的极简内联 SVG 顶替：账号 = 人形、密码 = 锁、邮箱 = 信封。
   ⚠ 用绝对定位而不是 flex，是为了跟目标站同一套几何 —— 输入框要能单独 100% 宽。 */
.auth-field { position: relative; margin-bottom: 20px; }
.auth-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #adb5bd;
    pointer-events: none;   /* 点到图标上要能落到输入框，别把焦点挡掉 */
}
.auth-ico svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 输入框照目标站 .form-control：38px 高（1.5em + .75rem + 2px，字号 1rem 时）、
   1px #ced4da、4px 圆角、聚焦 `#80bdff` 边框 + 一圈蓝影。
   ⚠ 左侧留 38px 给图标：目标站用的是 .pl-3（padding-left 1rem），那是配 16px 图标的，
     这里按图标 13 + 16 + 9 算得更准。 */
.auth-input {
    display: block;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px 0 38px;
    border: 1px solid #ced4da;
    border-radius: var(--sk-r);
    background: #fff;
    color: #495057;
    font-size: 15px;
    line-height: 1.5;
    outline: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.auth-input::placeholder { color: #b9c1c9; }
.auth-input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .18);
}
/* 主按钮照目标站 .btn.btn-primary.w-100：全宽、38px 高、4px 圆角、白字。
   ⚠ 目标站那颗是 <button> 元素，本站也是 —— 原来那两张图片按钮
     （addcar1.png / addcar2.png 的 <input type="image">）随 DOM 重写一起去掉了。 */
.auth-btn {
    display: block;
    width: 100%;
    height: 38px;
    margin-top: 4px;
    border: 1px solid var(--sk-primary);
    border-radius: var(--sk-r);
    background: var(--sk-primary);
    color: #fff;
    font-size: 15px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.auth-btn:hover { background: var(--sk-primary-h); border-color: var(--sk-primary-h); }
/* 卡片底部那行：目标站 `<small class="text-dark">还没有账号 ?</small>` +
   `<a class="text-dark font-weight-bold">注册新用户</a>` */
.auth-alt {
    margin: 22px 0 0;
    text-align: center;
    font-size: 12px;
    color: #343a40;
}
.auth-alt a { color: #343a40; font-weight: 700; }
.auth-alt a:hover { color: var(--sk-primary); }
/* 服务端错误行（用户名或密码不正确 / 用户名已存在 / 两次密码不一致…）。
   原站没有这一行：它那套 RequiredFieldValidator 只在浏览器端起作用，服务端结论
   得另找地方显示 —— 这里放在按钮下面，和目标站那行「注册新用户」同一层。
   ⚠ 旧类名是 .login-error / .form-error（两张页面各一套），随模板重写一并收口到这里。 */
.auth-error {
    margin: 14px 0 0;
    padding: 9px 12px;
    border-radius: var(--sk-r);
    background: #fdf2f2;
    color: #d93025;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}


/* ----------------------------------------------------------- 11. 我的账号 */
.user-wrap { width: var(--sk-w); }
.user-card {
    background: var(--sk-card);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-sh-1);
}
.user-title { color: var(--sk-text); }
.user-subtitle { color: var(--sk-text); }
.user-hint { color: var(--sk-text-2); }
.user-table th, .user-table td { border-bottom: 1px solid var(--sk-line-2); }
.user-card > .user-table th { color: var(--sk-text-2); font-weight: 600; }
.user-orders tr:first-child th { background: var(--sk-head); color: var(--sk-text); }
/* ⚠ user.html 里**没有任何表单控件**（一张信息表 + 两张只读表 + 几段说明），
   所以这里不需要输入框 / 按钮那一类规则 —— 写它们只会是死规则。 */
.user-hint code {
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--sk-head);
    color: var(--sk-text);
    font-size: 13px;
}

/* --------------------------------------------------------- 12. 会员中心 */
/* ⚠ style.css 里 .zhongjian 也是 margin-top:115px（同登录页那条），已在第 10 节收口。
   ⚠ 左右两栏的宽度是个不变式：.huiyuan_right = calc(100% - (178 + 20))。
     改左栏宽度就得同步改右栏的减数，这一对别拆开看。 */
.huiyuan {
    width: var(--sk-w);
    box-sizing: border-box;
    min-height: 0;
    margin-top: 20px;
    padding: 0 0 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.huiyuan_top {
    width: 100%;
    height: auto;
    padding: 12px 0;
    border-bottom: 1px solid var(--sk-line-2);
    color: var(--sk-text-2);
    font-size: 14px;
}
.huiyuan_top a { color: var(--sk-text-2); }
.huiyuan_top a:hover { color: var(--sk-primary); }

.huiyuan_left {
    width: 178px;
    float: left;
    background: var(--sk-card);
    background-image: none;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
    overflow: hidden;
}
/* ⚠ 左栏这三块（h1 / _langmu / _lie）在 style.css 里**都是 float:left**，
   而且宽度都正好是 178px = 整栏宽：原站就是靠「浮动块宽度恰好等于整栏」
   让它们各自独占一行的（128+50 / 160+18 / 178）。
   一旦把 width 改成 auto，浮动块就缩到文字宽 ——「会员管理」会缩成一个小方块，
   和下面的「充值管理」挤到同一行去。所以这三块都改成**不浮动的整宽块**。
   （.huiyuan_left 自己有 overflow:hidden，是 BFC，装得住子元素，不需要 clearfix。） */
.huiyuan_left h1 {
    float: none;
    width: auto;
    height: 50px;
    line-height: 50px;
    padding-left: 18px;
    margin-bottom: 0;
    background: var(--sk-head);
    background-image: none;
    color: var(--sk-text);
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--sk-line);
}
.huiyuan_left_langmu {
    float: none;           /* 同 .huiyuan_left h1：不浮动，靠块级整宽独占一行 */
    width: auto;
    height: 42px;
    line-height: 42px;
    padding-left: 18px;
    /* style.css 这里是 #669900 的绿块 */
    color: var(--sk-text-2);
    background: #fafbfc;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--sk-line-2);
}
/* 同 .huiyuan_left h1：style.css 给它 float:left + width:178px（正好整栏宽）。
   换算肤后的整宽块 —— 列里还剩 2px 边框的余量，177px 的固定宽在 178 的栏里
   虽然也放得下，但列宽一变就会掉行，不如直接给整宽。 */
.huiyuan_left_lie {
    float: none;
    width: auto;
}
.huiyuan_left_lie ul li {
    width: auto;
    height: 42px;
    line-height: 42px;
    padding-left: 18px;
    border-bottom: 1px solid var(--sk-line-2);
}
.huiyuan_left_lie ul li a { color: var(--sk-text); }
.huiyuan_left_lie ul li a:hover { color: var(--sk-primary); }

.huiyuan_right { width: calc(100% - 198px); float: right; }
/* ⚠ style.css 里把右栏**所有 span 刷成橙色 #fc5707**（.huiyuan_right span /
   .huiyuan_right_neirong span / .huiyuan_right_touxiang span 三条同族规则）。
   会员名、充值状态这些都落在里面，换肤后是一片橙。收回继承色。
   ⚠ 第三条 .huiyuan_right_touxiang 不用写：模板里根本没有这个类
     （本目录的会员页只有 `.huiyuan` / `.huiyuan_right` / `.huiyuan_right_neirong`
      三个 —— 右栏的栏目标题走的是 style.css 那套，本站没有对应元素）。 */
.huiyuan_right span,
.huiyuan_right_neirong span { color: inherit; }
.huiyuan_right_neirong {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    padding: 24px 28px;
    background: var(--sk-card);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-sh-2);
}
/* ⚠ 这里的表都是复刻 datagrid 那套（.ntcplist / .head / .FormBase …）。
     只改行线与内边距：**不能给 td 写 text-align**，member.html 的标签列靠
     `align="right"` 属性右对齐，作者样式一写就把属性顶掉、标签会全跑到左边。
   ⚠ 表头不是 <th>：member-gold-list / -play-record / -wpan-record 三张表写的是
     `<table class="ntcplist"><tr class="head">` + 一排 <td>（照原站 datagrid 的写法）。
     只写 `.huiyuan_right_neirong th` 的话那三行表头**一条规则都吃不到**，
     白底黑字混在正文里 —— 所以 `tr.head td` 必须一起写上。 */
.huiyuan_right_neirong table { border-collapse: collapse; }
.huiyuan_right_neirong th,
.huiyuan_right_neirong tr.head td {
    padding: 11px 14px;
    color: var(--sk-text);
    font-weight: 600;
    background: var(--sk-head);
    border-bottom: 1px solid var(--sk-line);
}
.huiyuan_right_neirong td { padding: 11px 14px; border-bottom: 1px solid var(--sk-line-2); }
.huiyuan_right_neirong tr:hover td { background: #f7fbff; }
/* 查询输入框（会员播放记录页那个 <input class="FormBase" size="30" style="width:270px;">） */
.huiyuan_right_neirong .FormBase {
    height: 34px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: #fff;
    color: var(--sk-text);
    font-size: 14px;
}
.huiyuan_right_neirong .FormBase:focus {
    border-color: var(--sk-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .12);
}
/* ⚠ 会员中心那几个按钮是 `<button class="ManagerButton">` 里塞一张
     `<img src="../images/search.gif"/>` —— 这张图本地没有（static/images 下 29 个文件，
     不含 search.gif），不处理的话按钮里就是一个碎图图标。图去掉，按钮自己撑起来。 */
.ManagerButton {
    height: 34px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--sk-r);
    background: var(--sk-primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.ManagerButton:hover { background: var(--sk-primary-h); }
.ManagerButton img { display: none; }
/* 提交/重置按钮 */
.huiyuan_right_neirong input[type="submit"],
.huiyuan_right_neirong input[type="button"] {
    height: 40px;
    padding: 0 26px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--sk-r);
    background: var(--sk-primary);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.huiyuan_right_neirong input[type="submit"]:hover { background: var(--sk-primary-h); }
.huiyuan_right_neirong input[type="reset"] {
    height: 40px;
    padding: 0 26px;
    box-sizing: border-box;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: #fff;
    color: var(--sk-text);
    font-size: 15px;
    cursor: pointer;
}
/* member.css 的 .center_rinput：宽 250 / 高 23 / hover 浅蓝。原站那套的底图都不在了 */
.center_rinput {
    width: 100%;
    max-width: 360px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    margin: 4px 0;
    padding: 0 12px;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: #fff;
    color: var(--sk-text);
    font-size: 15px;
}
.center_rinput:hover { background-color: #fff; border-color: var(--sk-primary); }
.center_rinput:focus {
    border-color: var(--sk-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .12);
}
/* -------------------------------------------- 12b. 会员充值（卡片式）*/
/* 照 www.xuezhijiaocheng.com/user?action=vip 的实测样式（riplus 2.7 的 app.css 原文）：
     .pay-vip-item{border:2px solid #cacaca;border-radius:5px;padding:10px;cursor:pointer}
     .pay-vip-item.ok{border-color:#ffc107;background:rgba(255,193,43,.1)}   ← 选中的类名是 .ok
     .vip-title{font-size:25px;font-weight:500;text-align:center;padding:10px}
     .vip-price{font-size:28px;font-weight:600;color:#ffc12b}  .vip-price small{color:#3c3c3c}
     .payvip-header{color:#fff;padding:30px;border-radius:4px 4px 0 0}
     .image-line{height:20px;background:url(img_line.png) center/cover no-repeat}

   ⚠ 目标站这套是长在 Bootstrap 4 上的（.card / .row / .col-md-3 / .badge / .btn /
     .border-dashed 全是 Bootstrap 的类）。本站没有 Bootstrap，所以下面顺手把这几个
     类在**本页范围内**的作用补出来，取值照 Bootstrap 4 —— 但都限定在各自的父选择器下，
     不写成全局 .card/.btn，免得跟复刻表里可能存在的同名类打架。

   ⚠ 网格：目标站是 `col-6 col-md-3` 四列。本站右栏宽 = 1440 - 198，四列时每张约 250px。
     在售只有三档 ⇒ 用固定宽 + `justify-content:center` 让三张居中，
     和「站里本来就是四列格、只是少了一张」的观感一致（少的那张正是被去掉的普通用户卡）。

   ★ 价格色用目标站那个金 #ffc12b（= 令牌里的 --sk-amber），不是主色蓝：目标站这一块
     本身就是金的自成一格，换成蓝反而「不像」。标题、边框、按钮同理都照抄原值。 */
.payvip-header {
    margin: 0 0 20px;
    padding: 30px;
    border-radius: var(--sk-r) var(--sk-r) 0 0;
    background: #f7a11a url("/images/payvip-header.png") center/cover no-repeat;
    color: #fff;
}
.payvip-header h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}

.pay-vip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.pay-vip-item {
    width: calc((100% - 48px) / 4);   /* 4 列格；gap 16 × 3 = 48 */
    box-sizing: border-box;
    padding: 18px 10px;
    border: 2px solid #cacaca;
    border-radius: var(--sk-r);
    background: #fff;
    cursor: pointer;
    transition: all .2s;
}
.pay-vip-item:hover {
    border-color: var(--sk-primary);
    box-shadow: var(--sk-sh-3);
    transform: translateY(-4px);
}
/* .ok 是目标站选中的类名（不是 .active），模板里的 JS 也是照它写的 */
.pay-vip-item.ok { border-color: #ffc107; background: rgba(255, 193, 43, .12); }
.pay-vip-item .vip-body { text-align: center; }
.pay-vip-item .vip-title {
    margin: 0;
    padding: 0 0 6px;
    font-size: 18px;        /* 目标站 25px 是给「月卡VIP」那种四字标题的，
                               本站套餐名是「VIP会员 12 个月」，照 25px 会把卡撑成两行 */
    font-weight: 500;
    color: var(--sk-text);
}
.pay-vip-item .vip-gem { font-style: normal; margin-right: 6px; color: #ffc12b; }
.pay-vip-item .vip-text { margin: 0; font-size: 14px; color: var(--sk-text-2); }
.pay-vip-item .vip-price {
    margin: 8px 0 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    color: #ffc12b;
}
.pay-vip-item .vip-price small { font-size: 16px; color: #3c3c3c; }

.image-line {
    height: 20px;
    margin: 20px 0;
    background: url("/images/img_line.png") center/cover no-repeat;
}

/* 底部支付区（目标站是 Bootstrap 的 .card.border-dashed） */
.pay-panel {
    padding: 20px 22px;
    border: 2px dashed rgba(0, 0, 0, .125);
    border-radius: var(--sk-r);
    background: #fff;
}
.pay-user {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--sk-text);
}
.pay-user .badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
}
.pay-user .badge-secondary { background: var(--sk-muted); color: #fff; }
.pay-user .badge-light { background: var(--sk-line-2); color: var(--sk-text-2); }

.pay-btns { margin: 0 0 14px; }
.pay-btns .btn {
    display: inline-block;
    margin-right: 8px;
    padding: 5px 12px;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    background: #fff;
    color: var(--sk-text-2);
    font-size: 13px;
    line-height: 1.5;
    cursor: default;        /* 这两个只是「当前选择」的读数，不是可点的按钮 */
}
.go-pay-vip {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--sk-r);
    background: var(--sk-amber);
    color: #4a3300;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.go-pay-vip:hover:not([disabled]) { filter: brightness(1.06); }
.go-pay-vip[disabled] { background: #e9ecef; color: #9aa2ab; cursor: not-allowed; }

.pay-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--sk-text-2);
}
.pay-note p { margin: 0; }
.pay-note p:first-child { color: var(--sk-text); }

/* ---------------------------------------------------------------- 13. 页脚 */
/* 只做元素级的表定义 —— 复刻表里那些真实生效的是 .bottom_box/.bottom_ct 这一套
   （index.css：`.bottom_box{height:90px;background:#eaeaea}`、`.bottom_ct{padding-top:30px}`）。 */
.bottom_box {
    height: auto;
    padding: 32px 0;
    background: var(--sk-foot-2);
    clear: both;
    margin-top: 40px;
}
.bottom_ct { width: var(--sk-w); padding-top: 0; color: #a8b3ba; }
.bottom_ct .p1 { text-align: center; }
.bottom_ct .p1 a {
    color: #a8b3ba;
    border-right: 1px solid #4a4f52;
    padding: 0 16px;
    font-size: 14px;
}
.bottom_ct .p1 a:hover { color: #fff; }
/* 站内导航那排的最后一个 <a> 带 inline border:none，别跟它抢 */
.bottom_ct .p1 a:last-child { border-right: 0; }

/* 第二行：备案信息。字号比 p1 小一号、不上 .p1 a 那条分隔竖线（那一行只有中间那个
   备案号是链接，加竖线会看成两个导航项）。颜色取与 p1 同一档，换肤跟着 --sk-foot-2 走。
   ⚠ 只写这一条 —— 居中沿用 index.css / style_index.css 的 `.bottom_ct{text-align:center}`，
     两套默认表都有，别在这里再写一遍（写死了 index.css 那套就不生效了）。 */
.bottom_ct .p2 { margin: 0; font-size: 13px; line-height: 1.9; color: #a8b3ba; }
.bottom_ct .p2 a { color: #a8b3ba; text-decoration: none; }
.bottom_ct .p2 a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------- 14. 底图清除 */
/* 上面各节里凡是「换底色」的地方都已经用 `background: <色> none` 或
   `background: <色> url(...)` 把老底图顶掉了。这一节只兜那些**没有被上面任何
   规则覆盖**、又确实在页面里出现的旧底图，避免蓝皮肤下露橙图/旧图。
   ⚠ 只停止引用，static/images/ 下的文件一个都不删（可回退）。
   ⚠ .ggao / .rmzwtj / .fbsp / .sy_* / .AD* / .pl_ct / .wdjc_ct / .xizann /
     .pgy_button / .showtags / .cloud-tags / .ul02 / .ul03 这些类的模板引用数是 0
     （死样式），当初那批 404 图本来就没渲染出东西，一律不处理。 */
.Download_ct2_title2, .zhongjian_bkclb_lanmu, .top_title, .rtop_title, .jctj_title,
.nav, .positionDiv, .m2_right_top ul .li01, .m2_right_top ul .li02, .m2_right_top ul .li03,
.huiyuan_left, .huiyuan_left h1, .huiyuan_right_neirong {
    background-image: none;
}