/* ============================================================
   動スク 学员端设计系统  student.css
   品牌色取自 logo：红 #e8001a / 黄 #ffd800 / 黑 #1a1a1a

   本文件不依赖任何 CSS 框架。
   结构：
     1. 设计 token
     2. 基础排版
     3. 兼容层（实现现有页面用到的 BS3 类名，逐页改造后可删）
     4. ds- 组件（新设计系统）
   ============================================================ */

/* ==========================================================
   1. 设计 token
   ========================================================== */
:root{
  --brand-red:      #e8001a;
  --brand-red-dark: #c00016;
  --brand-yellow:   #ffd800;
  --brand-black:    #1a1a1a;
  --line-green:     #06c755;

  /* 导航配色：用品牌黄。
     logo 含黑色圆圈和黑色「動」字，是为浅色底设计的，深色导航会让这些部分消失。
     若将来做出反白版 logo，把这两行改成 #1a1a1a / #ffffff 并去掉 nav 上的 light 类即可。 */
  --nav-bg:   #ffcf07;
  --nav-text: #1a1a1a;
  /* 导航选中态单独一组，不复用 --selected-bg。
     导航条本身是高饱和彩色表面，把浅色页面那套实心黑搬过来，
     等于在 62px 的窄条里挖个洞，视觉重量会压过 logo。
     取值刻意跟 hover 一致：选中项常驻这个淡淡的压暗，不做额外强调。
     若改成深色导航，这两行反过来（浅色半透明 + 白字）。 */
  --nav-selected-bg: rgba(0,0,0,.07);
  --nav-selected-fg: #000000;

  /* 语义色：组件里一律引用这一层，不要直接写 --brand-red。
     两个角色是分开的，因为它们不一定要同色：
       --primary   主行动色  按钮、链接、焦点框、徽章
       --selected  选中态    导航当前项、标签页、分页、列表当前项
     要统一调整「选中是什么颜色」，只改 --selected-bg / --selected-fg 两行。 */
  --primary:      var(--brand-red);
  --primary-dark: var(--brand-red-dark);
  /* 半透明版本无法从 --primary 推导（CSS 变量不能拆颜色分量），
     改 --primary 时这两行要一起改，否则焦点框和按钮光晕还是旧色。 */
  --primary-soft: rgba(232,0,26,.10);   /* 输入框焦点圈 */
  --primary-glow: rgba(232,0,26,.30);   /* 主按钮 hover 光晕 */
  --selected-bg:  var(--brand-black);
  --selected-fg:  #ffffff;

  --bg:         #f5f6f8;
  --surface:    #ffffff;
  --text:       #1a1a1a;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --border:     #e5e7eb;

  --success:#28a745; --success-bg:#e8f5ec;
  --warning:#f59e0b; --warning-bg:#fff7e6;
  --danger: #dc3545; --danger-bg:#fdecee;
  --info:   #17a2b8; --info-bg:#e6f6f8;

  --r-sm:4px; --r:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --sh-sm:0 1px 4px rgba(0,0,0,.06);
  --sh:   0 2px 10px rgba(0,0,0,.08);
  --sh-md:0 4px 20px rgba(0,0,0,.10);
  --sh-lg:0 8px 32px rgba(0,0,0,.14);
  --transition: all .2s ease;
  --header-h: 62px;
  --gutter: 15px;

  /* 页面容器宽度档位（详见 .ds-wrap） */
  --w-player: 1600px;
  --w-wide:   1440px;
  --w-base:   1040px;
  --w-form:    720px;
}

/* ==========================================================
   2. 基础排版
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
/* 注意：不要在 html/body 上加 overflow-x:hidden。
   它会掩盖真实的溢出问题，并且会使 position:sticky 失效。
   横向溢出应在源头修复（flex 用 min-width:0，grid 用 minmax(0,1fr)）。 */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Microsoft YaHei',Meiryo,sans-serif;
  font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none; transition:var(--transition)}
a:hover,a:focus{color:var(--primary-dark); text-decoration:none}
img{vertical-align:middle; border:0}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em; font-weight:700; line-height:1.4; color:var(--text)}
h1{font-size:1.8rem} h2{font-size:1.5rem} h3{font-size:1.25rem}
h4{font-size:1.05rem} h5{font-size:.95rem} h6{font-size:.85rem}
p{margin:0 0 1em}
hr{border:0; border-top:1px solid var(--border); margin:18px 0}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

/* ==========================================================
   3. 兼容层 —— 现有页面用到的 BS3 类名
      逐页改造成 ds- 组件后，可按注释分段删除
   ========================================================== */

/* ---- 3.1 栅格 ---- */
.container{max-width:1170px; margin:0 auto; padding:0 var(--gutter)}
.container-fluid{padding-left:60px; padding-right:60px}
/* 注意：必须沿用 BS3 的浮动实现，不能用 flex。
   .row 里除了 col-* 还常直接放 table/alert 等块级元素，
   若 .row 是 flex，这些元素会变成 flex item 缩成内容宽度（表格就不满宽了）。 */
.row{margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1)}
.row::after{content:''; display:table; clear:both}
[class*="col-xs-"],[class*="col-sm-"],[class*="col-md-"],[class*="col-lg-"]{
  position:relative; width:100%; min-height:1px;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
[class*="col-xs-"]{float:left}
.col-xs-1{width:8.3333%}   .col-xs-2{width:16.6667%} .col-xs-3{width:25%}
.col-xs-4{width:33.3333%}  .col-xs-5{width:41.6667%} .col-xs-6{width:50%}
.col-xs-7{width:58.3333%}  .col-xs-8{width:66.6667%} .col-xs-9{width:75%}
.col-xs-10{width:83.3333%} .col-xs-11{width:91.6667%} .col-xs-12{width:100%}
@media(min-width:768px){
  [class*="col-sm-"]{float:left}
  .col-sm-1{width:8.3333%}   .col-sm-2{width:16.6667%} .col-sm-3{width:25%}
  .col-sm-4{width:33.3333%}  .col-sm-5{width:41.6667%} .col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}  .col-sm-8{width:66.6667%} .col-sm-9{width:75%}
  .col-sm-10{width:83.3333%} .col-sm-11{width:91.6667%} .col-sm-12{width:100%}
  .col-sm-offset-1{margin-left:8.3333%}  .col-sm-offset-2{margin-left:16.6667%}
  .col-sm-offset-3{margin-left:25%}      .col-sm-offset-4{margin-left:33.3333%}
  .col-sm-offset-6{margin-left:50%}
}
@media(min-width:992px){
  [class*="col-md-"]{float:left}
  .col-md-3{width:25%} .col-md-4{width:33.3333%} .col-md-6{width:50%}
  .col-md-8{width:66.6667%} .col-md-9{width:75%} .col-md-12{width:100%}
}

/* ---- 3.2 显隐工具类 ---- */
.hidden,.is-hidden{display:none !important}
.visible-xs{display:none !important}
@media(max-width:767px){
  .visible-xs{display:block !important}
  .hidden-xs{display:none !important}
  .container-fluid{padding-left:16px; padding-right:16px}
}
.text-center{text-align:center} .text-right{text-align:right} .text-left{text-align:left}
.pull-right{float:right} .pull-left{float:left}
.clearfix::after{content:''; display:block; clear:both}
.img-responsive{display:block; max-width:100%; height:auto}
.text-muted{color:var(--text-muted)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- 3.3 表格 ---- */
.table{width:100%; max-width:100%; margin-bottom:18px; border-collapse:collapse; background:var(--surface)}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td{padding:12px 14px; vertical-align:middle; border-top:1px solid var(--border)}
.table > thead > tr > th{
  border-bottom:2px solid var(--border); border-top:0; text-align:left;
  font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--text-muted);
  background:#f8f9fb; white-space:nowrap;
}
.table-bordered,.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,.table-bordered > tbody > tr > th{border:1px solid var(--border)}
.table-striped > tbody > tr:nth-child(odd){background:#fafbfc}
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%}
/* 列表页表格（原 commonmobile.css，学员端已不加载该文件，迁移至此） */
.list-table{width:100%; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); background:var(--surface)}
.list-table thead th{border-top:none; white-space:nowrap}
.list-table th,.list-table td{vertical-align:middle !important}
.list-table td .btn{margin-bottom:5px}

/* ---- 3.4 表单 ---- */
.form-group{margin-bottom:16px}
.form-group::after{content:''; display:block; clear:both}
label{display:inline-block; margin-bottom:5px; font-weight:700; font-size:.86rem}
.control-label{font-weight:700; font-size:.86rem}
.form-control{
  display:block; width:100%; padding:9px 13px; font-family:inherit; font-size:.9rem;
  line-height:1.5; color:var(--text); background:#fff;
  border:1.5px solid var(--border); border-radius:var(--r);
  transition:var(--transition);
}
.form-control:focus{
  outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}
.form-control[disabled],.form-control[readonly]{background:#f3f4f6; cursor:not-allowed}
textarea.form-control{height:auto; resize:vertical}
.help-block{display:block; margin-top:5px; font-size:.78rem; color:var(--danger)}
/* 与 .form-control 同高的纯文本展示（表单里显示只读内容） */
.form-control-static{
  padding-top:9px; padding-bottom:9px; margin-bottom:0;
  min-height:38px; font-size:.9rem; line-height:1.5;
}
.checkbox,.radio{position:relative; margin:8px 0}
.checkbox label,.radio label{font-weight:400; cursor:pointer}
.radio-inline{display:inline-block; margin-right:14px; font-weight:400}
.input-group{display:flex; width:100%}
.input-group .form-control{flex:1; border-top-right-radius:0; border-bottom-right-radius:0}
.input-group-addon{
  display:flex; align-items:center; padding:0 13px; font-size:.86rem;
  background:#f3f4f6; border:1.5px solid var(--border); border-left:0;
  border-radius:0 var(--r) var(--r) 0; color:var(--text-muted);
}
/* form-horizontal 里的 form-group 相当于一个 .row，需要负边距 + 清浮动，
   否则 label(col-sm-4) 和输入区(col-sm-8) 不会并排 */
.form-horizontal .form-group{margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1)}
.form-horizontal .form-group::after{content:''; display:table; clear:both}
@media(min-width:768px){
  .form-horizontal .control-label{text-align:right; padding-top:10px; margin-bottom:0}
}
.form-inline{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.form-inline .form-group{margin-bottom:0; display:flex; align-items:center; gap:8px}
.form-inline .form-control{width:auto; display:inline-block}

/* ---- 3.5 按钮 ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; margin:0; cursor:pointer; user-select:none;
  border:1.5px solid transparent; border-radius:var(--r);
  font-family:inherit; font-size:.95rem; font-weight:700; line-height:1.2;
  text-align:center; white-space:nowrap; vertical-align:middle;
  transition:var(--transition); background:transparent; color:var(--text);
}
.btn:hover,.btn:focus{transform:translateY(-1px); text-decoration:none}
.btn:active{transform:none}
.btn[disabled],.btn.disabled{opacity:.45; transform:none; cursor:not-allowed; pointer-events:none}
.btn-sm{padding:7px 14px; font-size:.875rem}
.btn-lg{padding:14px 28px; font-size:1.05rem}
.btn-block{display:flex; width:100%}
.btn-main{flex:1 1 auto; min-width:0}   /* 双按钮：主按钮吃满剩余 */
.btn-sub{flex:0 0 auto}                 /* 双按钮：次按钮只占自身宽度 */

.btn-primary,.btn-primary:focus{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; box-shadow:0 3px 12px var(--primary-glow)}
.btn-default,.btn-default:focus{background:#fff; border-color:var(--border); color:var(--text-muted)}
.btn-default:hover{background:#fff; border-color:var(--brand-black); color:var(--brand-black)}
.btn-danger,.btn-danger:focus{background:var(--danger); border-color:var(--danger); color:#fff}
.btn-danger:hover{background:#c42d3a; border-color:#c42d3a; color:#fff}
.btn-warning,.btn-warning:focus{background:var(--warning); border-color:var(--warning); color:#fff}
.btn-warning:hover{background:#dd8908; border-color:#dd8908; color:#fff}
.btn-success,.btn-success:focus{background:var(--success); border-color:var(--success); color:#fff}
.btn-success:hover{background:#218838; border-color:#218838; color:#fff}
.btn-info,.btn-info:focus{background:var(--info); border-color:var(--info); color:#fff}
.btn-info:hover{filter:brightness(.93); color:#fff}
.btn-dark,.btn-dark:focus{background:var(--brand-black); border-color:var(--brand-black); color:#fff}
.btn-dark:hover{background:#000; border-color:#000; color:#fff; box-shadow:0 3px 12px rgba(0,0,0,.25)}
/* 次要操作：描边按钮。与 .btn-default 的区别是底色透明，用于跟实心主按钮并排 */
.btn-outline,.btn-outline:focus{background:transparent; border-color:var(--border); color:var(--text-muted)}
.btn-outline:hover{background:transparent; border-color:var(--brand-black); color:var(--brand-black)}
.btn-line,.btn-line:focus{background:var(--line-green); border-color:var(--line-green); color:#fff}
.btn-line:hover{filter:brightness(.94); color:#fff; box-shadow:0 3px 12px rgba(6,199,85,.3)}

/* ---- 3.6 标签 / 提示条 ---- */
.label{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border-radius:var(--r-pill); font-size:.72rem; font-weight:700; color:#fff;
}
.label-default{background:#9ca3af} .label-primary{background:var(--primary)}
.label-success{background:var(--success)} .label-info{background:var(--info)}
.label-warning{background:var(--warning)} .label-danger{background:var(--danger)}
.alert{
  padding:14px 18px; margin-bottom:18px; border:1px solid transparent;
  border-radius:var(--r-lg); font-size:.88rem;
}
.alert-success{background:var(--success-bg); border-color:#bcdfc8; color:#1c7430}
.alert-info{background:var(--info-bg); border-color:#b8e5eb; color:#11707f}
.alert-warning{background:var(--warning-bg); border-color:#fde3a7; color:#a86a08}
.alert-danger{background:var(--danger-bg); border-color:#f5c2c7; color:#b02a37}

/* ---- 3.7 list-group / page-header / breadcrumb ---- */
.list-group{padding-left:0; margin-bottom:18px; list-style:none}
.list-group-item{
  position:relative; display:block; padding:11px 15px; background:#fff;
  border:1px solid var(--border); margin-bottom:-1px; color:var(--text);
}
.list-group-item:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.list-group-item:last-child{border-radius:0 0 var(--r-lg) var(--r-lg); margin-bottom:0}
.list-group-item.active{background:var(--selected-bg); border-color:var(--selected-bg); color:var(--selected-fg)}
.list-group-item.disabled{color:var(--text-light); pointer-events:none; background:#fafbfc}
.page-header{padding-bottom:10px; margin:22px 0 18px; border-bottom:1px solid var(--border)}
.breadcrumb{
  padding:0; margin-bottom:14px; list-style:none; background:transparent;
  font-size:.82rem; color:var(--text-muted);
}
.breadcrumb > li{display:inline-block}
.breadcrumb > li + li::before{content:'/'; padding:0 8px; color:var(--text-light)}

/* ---- 3.8 弹窗（配合 ds.js） ---- */
.modal{
  display:none; position:fixed; inset:0; z-index:1050;
  overflow-x:hidden; overflow-y:auto; outline:0;
  -webkit-overflow-scrolling:touch;
}
.modal.in{display:block}
/* .fade 仅做淡入；显隐由 ds.js 切换的 .in 控制，不能用 opacity:0 隐藏，
   否则未加 .in 的弹窗会占位不可见 */
.modal.fade{opacity:0; transition:opacity .2s ease}
.modal.fade.in{opacity:1}
.modal-backdrop{position:fixed; inset:0; z-index:1040; background:#000; opacity:0; transition:opacity .2s ease}
.modal-backdrop.in{opacity:.5}
.modal-dialog{position:relative; width:auto; max-width:600px; margin:40px auto; padding:0 12px}
.modal-lg{max-width:900px}
.modal-sm{max-width:400px}
.modal-content{
  position:relative; background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); overflow:hidden;
  animation:dsModalIn .22s ease both;
}
@keyframes dsModalIn{from{opacity:0; transform:translateY(-14px)}to{opacity:1; transform:none}}
.modal-header{padding:16px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px}
.modal-header .modal-title{margin:0; font-size:1.02rem; font-weight:700; flex:1}
.modal-body{padding:22px; font-size:.9rem}
.modal-footer{padding:14px 22px; border-top:1px solid var(--border); background:#fafbfc; display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap}
.close{
  order:2; background:none; border:0; font-size:1.5rem; line-height:1;
  color:var(--text-light); cursor:pointer; opacity:.8; padding:0 4px;
}
.close:hover{opacity:1; color:var(--text)}
body.ds-modal-open{overflow:hidden}

/* ---- 3.9 下拉（配合 ds.js） ---- */
.dropdown{position:relative; display:inline-block}
.dropdown-menu{
  position:absolute; top:100%; left:0; z-index:1000; display:none; float:left;
  min-width:170px; padding:6px; margin-top:8px; list-style:none; text-align:left;
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-md);
}
.dropdown.open > .dropdown-menu{display:block}
.dropdown-menu-right{left:auto; right:0}
.dropdown-menu > li > a{
  display:block; padding:8px 12px; clear:both; font-weight:400; font-size:.86rem;
  color:var(--text); white-space:nowrap; border-radius:var(--r-sm);
}
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus{background:var(--bg); color:var(--primary)}
.dropdown-menu .divider{height:1px; margin:5px 0; overflow:hidden; background:var(--border)}
.caret{
  display:inline-block; width:0; height:0; margin-left:2px; vertical-align:middle;
  border-top:4px dashed; border-right:4px solid transparent; border-left:4px solid transparent;
}

/* ---- 3.10 折叠（配合 ds.js） ---- */
.collapse{display:none}
.collapse.in{display:block}
.collapsing{position:relative; height:0; overflow:hidden; transition:height .28s ease}

/* ---- 3.11 16:9 视频容器 ---- */
.embed-responsive{position:relative; display:block; width:100%; padding:0; overflow:hidden}
.embed-responsive-16by9{aspect-ratio:16/9}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ---- 3.12 分页（AspNetPager CssClass="pagination"） ---- */
.pagination{display:inline-flex; flex-wrap:wrap; gap:4px; padding:0; margin:18px 0; list-style:none}
.pagination a,.pagination span{
  display:inline-block; padding:6px 12px; font-size:.84rem;
  border:1px solid var(--border); border-radius:var(--r); background:#fff;
  color:var(--text); text-decoration:none; transition:var(--transition);
}
.pagination a:hover{border-color:var(--selected-bg); color:var(--selected-bg)}
.pagination .active,.pagination a.active{background:var(--selected-bg); border-color:var(--selected-bg); color:var(--selected-fg)}
.pagination input.form-control{display:inline-block; width:60px; padding:5px 8px}

/* 列表页分页铺满整行（WatchVideoStudent 等）：外层用 .ds-pager 取代 .pull-right，
   自定义信息（全X页…）居左，页码按钮 + 跳转框整体靠右，一行铺满、不再收缩到右侧。 */
.ds-pager{margin:18px 0}
.ds-pager .pagination{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  width:100%; margin:0; font-size:.84rem; color:var(--text-light);
}
.ds-pager .pagination ul{
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  margin:0 0 0 auto; padding:0; list-style:none;  /* margin-left:auto 把按钮组连同其后的跳转框一起推到右侧 */
}
.ds-pager .pagination li{margin:0}

/* ==========================================================
   4. ds- 组件（新设计系统）
   ========================================================== */

/* ---- 4.1 顶部导航 ---- */
.ds-nav{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:1030;
  background:var(--nav-bg); color:var(--nav-text);
  display:flex; align-items:center; gap:24px; padding:0 28px; box-shadow:var(--sh);
}
.ds-nav a{color:inherit}
.ds-brand{flex-shrink:0; display:flex; align-items:center}
.ds-brand img{height:34px; display:block}
.ds-menu{display:flex; gap:4px; list-style:none; margin:0; padding:0; flex:1}
.ds-menu > li > a{
  display:block; padding:8px 14px; border-radius:var(--r);
  font-size:.9rem; font-weight:500; color:rgba(255,255,255,.75); transition:var(--transition);
}
.ds-menu > li > a:hover{color:#fff; background:rgba(255,255,255,.1)}
.ds-menu > li.active > a{color:var(--selected-fg); background:var(--selected-bg)}
.ds-right{display:flex; align-items:center; gap:8px; flex-shrink:0}
.ds-chip{
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.12);
  font-size:.85rem; cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.ds-chip:hover{background:rgba(255,255,255,.2)}
.ds-avatar{
  width:26px;height:26px;border-radius:50%; background:var(--primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; flex-shrink:0;
}
.ds-toggle{
  display:none; background:none; border:0; color:var(--nav-text);
  font-size:1.3rem; cursor:pointer; padding:6px; line-height:1;
}
/* 浅色导航（黄底）时反色 */
.ds-nav.light .ds-menu > li > a{color:rgba(0,0,0,.7)}
.ds-nav.light .ds-menu > li > a:hover{color:#000; background:rgba(0,0,0,.07)}
/* 选中项必须在 light 里重写一遍：上面两条的优先级(0,3,2)/(0,4,2)
   高于通用的 .ds-menu > li.active > a (0,2,2)，不重写会被覆盖掉。
   带 :hover 的那条同理，用来防止 hover 时选中背景被冲掉。 */
.ds-nav.light .ds-menu > li.active > a,
.ds-nav.light .ds-menu > li.active > a:hover{
  color:var(--nav-selected-fg); background:var(--nav-selected-bg);
}
.ds-nav.light .ds-chip{background:rgba(0,0,0,.08); color:#000}
.ds-nav.light .ds-chip:hover{background:rgba(0,0,0,.15)}

/* ---- 4.2 容器 / 标题 ---- */
/* 页面容器只有四档，按内容类型选择，不要在页面里另写 max-width：
     .player-page(1600) 视频播放页 —— 视频尺寸直接影响核心体验，单独放宽
     默认   (1440) 卡片网格 / 宽表格
     .base  (1040) 卡片列表 / 只读信息 / 富文本阅读
     .form   (720) 表单 / 结账
   .narrow 是 .base 的旧别名，保留以兼容尚未改造的页面 */
/* 让开固定导航是外壳(.nms-newmain)的职责，页面容器只管自己的呼吸空间。
   两边都算 --header-h 会双重补偿——母版上原来还有个 margin-top:70px，
   导致导航下方空出 98px。 */
.nms-newmain{padding-top:var(--header-h)}

/* 页脚吸底（配合 SiteMasters/StudentFooter.ascx）：
   body 改纵向 flex，主内容区撑满剩余高度，把页脚顶到视口底部——内容少时页脚也贴底，不留空白。
   同时 .nms-newmain 作为 flex item 会形成 BFC，自动包裹页面内的浮动（如 .pull-right 分页），
   避免浮动溢出与页脚重叠。固定定位的 .ds-nav / #goTop 不参与 flex，不受影响。 */
body{display:flex; flex-direction:column; min-height:100vh}
.nms-newmain{flex:1 0 auto}
.ds-wrap{max-width:var(--w-wide); margin:0 auto; padding:28px 32px 64px}
.ds-wrap.player-page{max-width:var(--w-player)}
.ds-wrap.base,
.ds-wrap.narrow{max-width:var(--w-base)}
.ds-wrap.form{max-width:var(--w-form)}
.ds-page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.ds-title{margin:0; font-size:1.5rem; font-weight:900; letter-spacing:.02em; display:flex; align-items:center; gap:11px}
.ds-title::before{content:''; width:5px; height:24px; border-radius:3px; background:linear-gradient(180deg,var(--primary),var(--brand-yellow))}
.ds-sub{margin:2px 0 0 16px; font-size:.85rem; color:var(--text-muted)}
/* 必须 flex-wrap：不换行的话窄屏上几个 item 会互相挤压，
   每个被压成窄柱、内部再逐字换行。
   item 加 ellipsis 是为了超长的当前页标题——它单独占一行时仍会被压缩。 */
.ds-crumb{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:.82rem; color:var(--text-muted); margin-bottom:14px}
.ds-crumb a,.ds-crumb > span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 当前项（最后一个 span）加深加粗。祖先可点、当前项不可点，
   两者同色的话面包屑就只是一串装饰文字，传达不了层级。 */
.ds-crumb > span:last-child{color:var(--text); font-weight:500}
.ds-crumb a{color:var(--text-muted)}
.ds-crumb a:hover{color:var(--primary)}
.ds-crumb i{font-size:.65rem; opacity:.5}

/* ---- 4.2.1 表单辅助 ---- */
/* 勾选项（条款同意等） */
.ds-check{display:flex; gap:9px; align-items:flex-start; font-size:.9rem; cursor:pointer; font-weight:400; line-height:1.7}
.ds-check input{margin-top:5px; accent-color:var(--primary); width:16px; height:16px; flex-shrink:0}
.ds-check a{color:var(--primary); text-decoration:underline; text-underline-offset:2px}
/* 字段说明文字 */
.ds-field{margin-bottom:18px}
.ds-field > label{display:block; font-size:.86rem; font-weight:700; margin-bottom:6px}
.hint{font-size:.8rem; color:var(--text-light); margin-top:5px}

/* ---- 4.2.3 表单栅格（标签在上、输入在下，比 form-horizontal 更适合窄屏） ---- */
.ds-form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 20px}
.ds-form .full{grid-column:1 / -1}
.ds-form label{display:block; font-size:.86rem; font-weight:700; margin-bottom:6px}
.ds-form .form-control{width:100%}
/* 必填标记 */
.ds-req{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:var(--r-pill);
        background:var(--danger-bg); color:#b02a37; font-size:.68rem; font-weight:700; vertical-align:middle}
@media(max-width:768px){
  .ds-form{grid-template-columns:minmax(0,1fr)}
}

/* ---- 4.2.4 子导航（页面内分区切换） ---- */
.ds-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; border-bottom:1px solid var(--border); padding-bottom:12px}
.ds-tabs a{
  padding:8px 16px; border-radius:var(--r); font-size:.88rem; font-weight:700;
  color:var(--text-muted); background:var(--surface); border:1px solid var(--border);
  transition:var(--transition);
}
.ds-tabs a:hover{border-color:var(--selected-bg); color:var(--selected-bg)}
.ds-tabs a.active{background:var(--selected-bg); border-color:var(--selected-bg); color:var(--selected-fg)}

/* ---- 4.2.5 统计卡（关键指标） ---- */
.ds-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:20px}
.ds-stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-sm); min-width:0;
}
.ds-stat .k{font-size:.78rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:6px}
.ds-stat .v{font-size:1.5rem; font-weight:900; font-variant-numeric:tabular-nums; word-break:break-all}
.ds-stat .v small{font-size:.85rem; font-weight:700; color:var(--text-muted)}
.ds-stat.accent .v{color:var(--primary)}

/* ---- 4.2.6 数据行（只读信息展示，label/value 成对） ---- */
.ds-dl{display:flex; flex-direction:column}
.ds-dl > div{display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--border)}
.ds-dl > div:last-child{border-bottom:0}
.ds-dl .k{flex:0 0 132px; font-size:.84rem; color:var(--text-muted)}
.ds-dl .v{flex:1; min-width:0; font-size:.9rem; font-weight:500; word-break:break-word}
@media(max-width:600px){
  .ds-dl > div{flex-direction:column; gap:3px}
  .ds-dl .k{flex:none}
}

/* ---- 4.2.2 数据表格 ---- */
.ds-tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%}
.ds-tbl{width:100%; border-collapse:collapse; font-size:.88rem; background:var(--surface)}
.ds-tbl th{
  text-align:left; padding:12px 16px; background:#f8f9fb;
  font-size:.76rem; font-weight:700; letter-spacing:.04em;
  color:var(--text-muted); white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.ds-tbl td{padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle}
.ds-tbl tbody tr:last-child td{border-bottom:0}
.ds-tbl tbody tr:hover{background:#fafbfc}
.ds-tbl .num{text-align:right; font-variant-numeric:tabular-nums}
/* 表格直接嵌在 ds-panel 里时，去掉圆角处的白边 */
.ds-panel > .ds-tbl-wrap > .ds-tbl{margin:0}

/* ---- 4.3 徽章 ---- */
.ds-badge{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; letter-spacing:.03em}
.ds-badge-free {background:var(--success); color:#fff}
.ds-badge-paid {background:var(--primary); color:#fff}
.ds-badge-trial{background:var(--brand-yellow); color:var(--brand-black)}
.ds-badge-owned{background:rgba(26,26,26,.85); color:#fff}
.ds-badge-alert{background:var(--danger); color:#fff}
.ds-badge-ok   {background:var(--success-bg); color:#1c7430}
.ds-badge-warn {background:var(--warning-bg); color:#a86a08}
.ds-badge-err  {background:var(--danger-bg);  color:#b02a37}
.ds-badge-info {background:var(--info-bg);    color:#11707f}
.ds-badge-mute {background:#eef0f3; color:var(--text-muted)}

/* ---- 4.4 卡片 / 面板 ---- */
.ds-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:var(--transition)}
.ds-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; margin-bottom:20px}
.ds-panel-head{padding:14px 20px; border-bottom:1px solid var(--border); background:#fafbfc; font-size:.92rem; font-weight:700; display:flex; align-items:center; gap:9px}
.ds-panel-body{padding:20px}

/* ---- 4.5 提醒条 ---- */
.ds-notice{
  border-radius:var(--r-lg); padding:18px 22px; margin-bottom:24px;
  display:flex; gap:16px; align-items:flex-start;
  background:var(--warning-bg); border:1px solid #fde3a7; border-left:4px solid var(--warning);
}
.ds-notice.err {background:var(--danger-bg); border-color:#f5c2c7; border-left-color:var(--danger)}
.ds-notice.info{background:var(--info-bg); border-color:#b8e5eb; border-left-color:var(--info)}
.ds-notice-icon{
  flex-shrink:0; width:38px;height:38px; border-radius:50%; background:var(--warning); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:1rem;
}
.ds-notice.err .ds-notice-icon {background:var(--danger)}
.ds-notice.info .ds-notice-icon{background:var(--info)}
.ds-notice h4{margin:0 0 6px; font-size:.98rem; font-weight:700}
.ds-notice ul{margin:0 0 12px; padding-left:18px; font-size:.88rem; color:#7a5b13}
.ds-notice.err ul{color:#8c2530}
.ds-notice li{margin-bottom:4px}

/* ---- 4.6 空状态 / 页脚 / 回顶 ---- */
.ds-empty{text-align:center; padding:60px 20px; color:var(--text-light)}
.ds-empty i{font-size:2.6rem; opacity:.35; margin-bottom:14px; display:block}
.ds-empty p{margin:0 0 16px; font-size:.9rem}
.ds-foot{margin-top:56px; padding:26px 32px; text-align:center; border-top:1px solid var(--border); color:var(--text-light); font-size:.8rem}
#goTop{
  padding:6px 13px; position:fixed; right:32px; bottom:24px; display:none;
  background:var(--brand-black); color:#fff; text-align:center; z-index:99;
  border-radius:var(--r); opacity:.8; transition:var(--transition);
}
#goTop:hover{background:#000; color:#fff; opacity:1}

/* ==========================================================
   5. 响应式
   ========================================================== */
@media(max-width:1200px){ .ds-wrap{padding-left:24px; padding-right:24px} }
@media(max-width:860px){
  .ds-nav{padding:0 16px; gap:12px}
  .ds-menu{
    display:none; position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; gap:0; background:var(--nav-bg); padding:8px;
    box-shadow:var(--sh-md); max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .ds-menu.open{display:flex}
  .ds-menu > li > a{padding:12px 14px; font-size:.95rem; border-radius:var(--r)}
  .ds-toggle{display:block; order:3}
  .ds-brand{flex:1}
  .ds-wrap{padding:20px 16px 48px}
  .ds-title{font-size:1.22rem}
  .btn{padding:10px 14px; font-size:.9rem}
  .ds-chip .ds-chip-label{display:none}
  .modal-dialog{margin:20px auto}
  #goTop{right:16px}
}