/* =========================================================================
   DTLingo 学生中心 · 覆盖样式层 (overlay) — v0.3
   (v0.3 在 v0.2 基础上追加:表格类页面 / 交易记录 / 我的课表 / 预约课程 / 按钮变体)
   -------------------------------------------------------------------------
   本版基于真实旧样式 (uCenter.css / center.css / button.css) 的 specificity
   逐条精确压制;每个选择器都"刚好高于"对应旧规则,尽量不用 !important。

   旧版关键事实(覆盖时要打赢的对象):
     .CenterLeft{width:170px}                                   (0,1,0)
     .centerRight{width:780px;margin-left:10px}                 (0,1,0)
     .centerRight .rightMain{width:740px}                       (0,2,0)
     .CenterLeft .centerNav li a.active{background:#999}        (0,3,2)
     .studentCenter .perInfoMain .userInfo li input.inputStyle{width:290px} (0,4,2)
     .studentCenter .perInfoMain .userInfo li .spanBox{width:150px}         (0,5,1)
     .studentCenter .perInfoMain .perInfoNav li a.active{background:#999}   (0,4,2)
     .aBtnRed{background:#ed3533}                               (0,1,0)

   注入(header.php,在现有两行 <link> 之后追加):
     <link rel="stylesheet" type="text/css"
           href="<?= static_url(FRONT . '/css/overlay/student-center.css?v=0.3') ?>"/>
   物理路径:webroot/dev/css/overlay/student-center.css

   作用范围:全部 scope 在 .studentCenter 下;主容器进一步限定 .studentCenter.layout,
   避免影响 center.css 里 .studentCenter.evaluationCourse 这类弹层复用。
   回退:删掉那一行 <link> 即彻底还原。
   ========================================================================= */

/* ---- 设计 token(占位,等 React 原型 token 来整批替换) ---- */
.studentCenter {
  --sc-brand:        #ed3533;   /* 真实品牌红,来自 button.css */
  --sc-brand-strong: #d9331f;   /* 旧版 hover 值,延续 */
  --sc-ink:          #1F2329;
  --sc-ink-soft:     #5A6068;
  --sc-line:         #E7E9EE;
  --sc-surface:      #FFFFFF;
  --sc-surface-2:    #F6F7F9;
  --sc-radius:       12px;
  --sc-radius-sm:    8px;
  --sc-font:         "Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --sc-shadow:       0 1px 2px rgba(20,30,50,.04), 0 8px 24px rgba(20,30,50,.06);
  font-family: var(--sc-font);
  color: var(--sc-ink);
  -webkit-font-smoothing: antialiased;
}
.studentCenter * { box-sizing: border-box; }

/* ---- 1. 主容器:旧 960 定宽 → 流式 flex 两列 ---- */
/* .studentCenter.layout (0,2,0) 干净压过 .layout(0,1,0),且只命中主页面 wrap */
.studentCenter.layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: auto;
  max-width: 1160px;
  margin: 24px auto 64px;
  padding: 0 20px;
}

/* ---- 2. 左侧栏:170px 拥挤 → 250px 单卡片 ---- */
.studentCenter .CenterLeft {           /* (0,2,0) > (0,1,0) */
  flex: 0 0 250px;
  width: 250px;
  min-height: 0;
}
.studentCenter .sidebar {              /* 旧 CSS 无此规则,自由发挥 */
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
}
.studentCenter .CenterLeft .personInfo {        /* (0,3,0) > (0,2,0) 去掉旧白底/定宽 */
  width: auto;
  background: transparent;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--sc-line);
}
.studentCenter .CenterLeft .personInfo .infoTop .userPhotoA { /* (0,5,0) 圆头像 */
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--sc-line);
}
.studentCenter .CenterLeft .personInfo .resetImg a {  /* (0,4,1) 让换头像热区跟上 56px */
  width: 56px; height: 56px; border-radius: 50%;
}
.studentCenter .CenterLeft .personInfo .names p {     /* (0,5,1) */
  font-size: 18px; font-weight: 600; line-height: 1.3;
}
.studentCenter .CenterLeft .personInfo > p {          /* (0,3,1) 课时计数行 */
  color: var(--sc-ink-soft); font-size: 13px; line-height: 22px;
}
.studentCenter .CenterLeft .personInfo p i {          /* (0,4,2) 数字 */
  color: var(--sc-ink); font-weight: 700; font-style: normal;
}
.studentCenter .CenterLeft .personInfo .buyCourse { margin-top: 14px; }
.studentCenter .CenterLeft .personInfo .buyCourse a { /* (0,4,1) > 旧(0,3,1) */
  display: block; width: 100%; text-align: center;
  height: 38px; line-height: 38px; padding: 0;
}

/* 左侧导航:旧 active 是灰底白字 → 品牌色左边线 */
.studentCenter .CenterLeft .centerNav {               /* (0,3,0) > (0,2,0) */
  width: auto; background: transparent;
  margin: 6px 0; padding: 8px 0; list-style: none;
}
.studentCenter .CenterLeft .centerNav li a {          /* (0,3,2) > (0,2,2) */
  display: block; height: auto; line-height: 1.4;
  padding: 11px 20px; color: var(--sc-ink-soft);
  font-size: 14px; border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.studentCenter .CenterLeft .centerNav li a:hover {    /* (0,3,3) */
  background: var(--sc-surface-2); color: var(--sc-ink);
}
.studentCenter .CenterLeft .centerNav li a.active {   /* (0,4,2) > 旧(0,3,2) */
  background: var(--sc-surface-2); color: var(--sc-brand);
  border-left-color: var(--sc-brand); font-weight: 600;
}

/* ---- 3. 右侧内容壳:去定宽 + 去米色顶条 ---- */
.studentCenter .centerRight {                         /* (0,2,0) > (0,1,0) */
  flex: 1; width: auto; margin-left: 0;
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
}
.studentCenter .centerRight .rightTop {               /* (0,3,0) > (0,2,0) 旧 #f3f1ef 米色 */
  padding: 20px 28px; background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-line);
}
.studentCenter .centerRight .rightTop h3 {            /* (0,3,1) > (0,2,1) */
  font-size: 18px; font-weight: 600;
}
.studentCenter .centerRight .rightMain {              /* (0,3,0) > (0,2,0) 去 740 定宽 */
  width: auto; min-height: 360px;
  padding: 24px 28px 40px; background: var(--sc-surface);
}

/* ---- 4. 账户信息子 tab(旧灰底胶囊 → 品牌下划线) ---- */
/* 用 .rightMain.perInfoMain 复合,(0,5,2) 干净压过旧 (0,4,2) */
.studentCenter .rightMain.perInfoMain .perInfoNav {
  border-bottom: 1px solid var(--sc-line);
}
.studentCenter .rightMain.perInfoMain .perInfoNav li { float: none; display: inline-block; margin-right: 4px; }
.studentCenter .rightMain.perInfoMain .perInfoNav li a {
  width: auto; height: auto; line-height: 1.4;
  padding: 10px 16px; background: transparent; color: var(--sc-ink-soft);
  border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.studentCenter .rightMain.perInfoMain .perInfoNav li a:hover { background: transparent; color: var(--sc-ink); }
.studentCenter .rightMain.perInfoMain .perInfoNav li a.active {
  background: transparent; color: var(--sc-brand);
  border-bottom-color: var(--sc-brand); font-weight: 600;
}

/* ---- 5. 账户表单(旧规则深达 0,5,2;这里 0,6,x 精确压制) ---- */
.studentCenter .rightMain.perInfoMain .userInfo { margin-top: 8px; }
.studentCenter .rightMain.perInfoMain .userInfo li {        /* 旧 12px 太小、灰条交替 */
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; padding: 14px 0; border-bottom: 1px solid var(--sc-line);
}
.studentCenter .rightMain.perInfoMain .userInfo li.bgGray { background: transparent; }
.studentCenter .rightMain.perInfoMain .userInfo li .spanBox { /* 旧 右对齐/150 → 左对齐标签 */
  width: 150px; flex: none; text-align: left;
  line-height: 1.4; padding-right: 0; color: var(--sc-ink-soft); font-size: 14px;
}
.studentCenter .rightMain.perInfoMain .userInfo li .inputBox { flex: 1; line-height: normal; }
.studentCenter .rightMain.perInfoMain .userInfo li input.inputStyle,
.studentCenter .rightMain.perInfoMain .userInfo li select {  /* 旧 290/300 定宽 → 流式 */
  width: 100%; max-width: 360px; height: 40px; padding: 0 12px;
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius-sm);
  font-size: 14px; color: var(--sc-ink); background: var(--sc-surface);
  transition: border-color .15s, box-shadow .15s;
}
.studentCenter .rightMain.perInfoMain .userInfo li input.inputStyle:focus,
.studentCenter .rightMain.perInfoMain .userInfo li select:focus {
  outline: none; border-color: var(--sc-brand);
  box-shadow: 0 0 0 3px rgba(237,53,51,.14);
}
.studentCenter .rightMain.perInfoMain .userInfo li input.phoneCode { width: 90px; max-width: 90px; margin-right: 8px; }
.studentCenter .rightMain.perInfoMain .userInfo li input.phoneNum  { width: 100%; max-width: 262px; }
.studentCenter .rightMain.perInfoMain .userInfo li .submitBtn {     /* 旧 margin:20px 180px hack 纠正 */
  width: auto; min-width: 120px; height: 40px; margin: 12px 0 0;
}

/* ---- 6. 品牌按钮 .aBtnRed(全站复用,(0,2,0) > (0,1,0)) ---- */
.studentCenter .aBtnRed {
  display: inline-block; padding: 0 22px; height: 40px; line-height: 40px;
  background: var(--sc-brand); color: #fff; text-decoration: none;
  border: none; border-radius: var(--sc-radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .05s;
}
.studentCenter .aBtnRed:hover  { background: var(--sc-brand-strong); color: #fff; }
.studentCenter .aBtnRed:active { transform: translateY(1px); }

/* ---- 7. 响应式:两列在窄屏叠起(旧版完全没有,直击移动端流量) ---- */
@media (max-width: 820px) {
  .studentCenter.layout { flex-direction: column; padding: 0 14px; }
  .studentCenter .CenterLeft { flex: 1 1 auto; width: 100%; }
  .studentCenter .centerRight { width: 100%; }
  .studentCenter .CenterLeft .centerNav { display: flex; flex-wrap: wrap; }
  .studentCenter .CenterLeft .centerNav li a { border-left: none; border-radius: 999px; padding: 8px 14px; }
  .studentCenter .rightMain.perInfoMain .userInfo li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .studentCenter .rightMain.perInfoMain .userInfo li .spanBox { width: auto; }
  .studentCenter .rightMain.perInfoMain .userInfo li input.inputStyle,
  .studentCenter .rightMain.perInfoMain .userInfo li select { max-width: 100%; }
}

/* ---- 可访问性底线 ---- */
.studentCenter a:focus-visible,
.studentCenter button:focus-visible,
.studentCenter input:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .studentCenter * { transition: none !important; } }


/* =========================================================================
   v0.3 追加 —— 表格类 / 交易记录 / 我的课表 / 预约课程 / 按钮变体
   说明:本段选择器均"刚好高于或等于"对应旧规则;本表必须最后加载,
   等价 specificity 时靠 source order 取胜(已在注入说明中保证顺序)。
   结构来自真实视图:trade.php / my_enrollment.php / my_course.php。
   JS 钩子(.payOrder/.cancelOrder/.cancleClass/.enClassRoom/.choiceCourse/
   #chooseTime/#course_id 等)只换视觉,不动。
   ========================================================================= */

/* ---- 8. 统一表格外观:杀掉 #999 深表头 / #f5f5f5 斑马纹 ---- */
.studentCenter .rightMain.recordMain table.recordTable,
.studentCenter .rightMain.myCourseTable table,
.studentCenter .rightMain.reviewMain table.reviewTable {
  width: 100%; border-collapse: collapse;
}
.studentCenter .rightMain.recordMain .recordList table.recordTable th,
.studentCenter .rightMain.myCourseTable table th,
.studentCenter .rightMain.reviewMain table.reviewTable th {
  background: var(--sc-surface-2); color: var(--sc-ink-soft);
  height: auto; padding: 11px 12px; font-size: 13px; font-weight: 500;
  text-align: left; border-bottom: 1px solid var(--sc-line);
}
.studentCenter .rightMain.recordMain .recordList table.recordTable td,
.studentCenter .rightMain.myCourseTable table td,
.studentCenter .rightMain.reviewMain table.reviewTable td {
  background: transparent; border-bottom: 1px solid var(--sc-line);
  padding: 14px 12px; vertical-align: top; height: auto;
}
/* 课表里课程名加粗保留;次级信息 div 用弱色 */
.studentCenter .rightMain.myCourseTable table td p { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.studentCenter .rightMain.myCourseTable table td div { color: var(--sc-ink-soft); font-size: 13px; line-height: 1.6; }

/* ---- 9. 交易记录:每个订单做成卡片 ---- */
.studentCenter .rightMain.recordMain .recordList {
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
  overflow: hidden; margin-bottom: 18px;
}
.studentCenter .rightMain.recordMain .recordList h4 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 14px 16px; background: var(--sc-surface-2);
  border-bottom: 1px solid var(--sc-line);
}
.studentCenter .rightMain.recordMain .recordList h4 strong { float: none; margin-left: 0; font-size: 14px; font-weight: 600; }
.studentCenter .rightMain.recordMain .recordList h4 p { float: none; display: flex; gap: 8px; align-items: center; color: var(--sc-ink-soft); font-size: 13px; }
.studentCenter .rightMain.recordMain .recordList h4 p a { float: none; margin: 0; height: 32px; line-height: 32px; padding: 0 14px; }
.studentCenter .rightMain.recordMain .recordList table.recordTable { margin: 0; }

/* ---- 10. 按钮变体(银/蓝),与 .aBtnRed 同形;table 内尺寸仍由旧规则掌控 ---- */
.studentCenter .aBtnSilver,
.studentCenter .aBtnSkypeBlue {
  display: inline-block; border: none; border-radius: var(--sc-radius-sm);
  font-size: 14px; font-weight: 600; text-align: center; text-decoration: none;
}
.studentCenter .aBtnSilver { background: var(--sc-surface-2); color: var(--sc-ink-soft); cursor: default; }
.studentCenter .aBtnSilver:hover { background: var(--sc-surface-2); color: var(--sc-ink-soft); }
.studentCenter .aBtnSkypeBlue { background: #2D8CF0; color: #fff; }     /* 进入教室主行动 */
.studentCenter .aBtnSkypeBlue:hover { background: #1F7AD9; color: #fff; }
.studentCenter .enClassRoom img { vertical-align: middle; }

/* 红色强调文字(金额 / 即将开始)对齐品牌色 */
.studentCenter .colorF3e { color: var(--sc-brand); }

/* ---- 11. 预约课程页(orderMain):两栏 float → flex,可塌 ---- */
.studentCenter .rightMain.orderMain .yourTime {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.studentCenter .rightMain.orderMain .yourTime i { width: auto; text-align: left; font-size: 14px; color: var(--sc-ink-soft); font-style: normal; }
.studentCenter .rightMain.orderMain .yourTime span { font-size: 18px; font-weight: 600; color: var(--sc-brand); }
.studentCenter .rightMain.orderMain .yourTime select {
  height: 38px; padding: 0 10px; border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-sm); font-size: 14px; background: var(--sc-surface);
}
.studentCenter .rightMain.orderMain .chooseBox {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; align-items: flex-start;
}
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse { flex: 0 0 240px; width: 240px; margin-right: 0; }
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse h4 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse #chooseCourseBar { background: transparent; padding-top: 0; }
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse ul li a {
  width: auto; height: auto; line-height: 1.4; padding: 11px 12px;
  border: 1px solid var(--sc-line); border-top: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-sm); margin-bottom: 6px; color: var(--sc-ink);
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: border-color .15s, background .15s;
}
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse ul li a:hover {
  background: var(--sc-surface-2); color: var(--sc-ink); border-color: var(--sc-brand);
}
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse ul li a.active {
  background: rgba(237,53,51,.06); color: var(--sc-brand); border-color: var(--sc-brand); font-weight: 600;
}
.studentCenter .rightMain.orderMain .chooseBox .chooseCourse ul li span {
  background: var(--sc-brand); border-radius: 999px;
}
.studentCenter .rightMain.orderMain .chooseBox .chooseTime { flex: 1; width: auto; min-width: 280px; }

/* 联系排课引导卡(两个 #text 块) */
.studentCenter .rightMain.orderMain #text {
  flex-basis: 100%; background: var(--sc-surface-2);
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
  padding: 16px 20px; margin: 4px 0;
}
.studentCenter .rightMain.orderMain #text h4 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--sc-ink); }
.studentCenter .rightMain.orderMain #text.colorF3e h4 { color: var(--sc-brand); }

/* 预约时间表(JS 注入,按旧 CSS 结构契约防御性换皮) */
.studentCenter .rightMain.orderMain .chooseBox .chooseTime table th {
  background: var(--sc-surface-2); color: var(--sc-ink-soft); height: auto; padding: 8px 0; font-weight: 500;
}
.studentCenter .rightMain.orderMain .chooseBox .chooseTime table td { border: 1px solid var(--sc-line); }
.studentCenter .rightMain.orderMain .chooseBox .chooseTime table td.green { background: #1D9E75; }

/* ---- 12. 空状态 .hasNo:旧 100px/250px 巨大留白 → 收敛 ---- */
.studentCenter .hasNo {
  padding: 64px 20px; background: transparent;
  color: var(--sc-ink-soft); font-size: 15px; text-align: center;
}

/* ---- 13. v0.3 响应式补充 ---- */
@media (max-width: 820px) {
  /* 宽表格在窄屏横向滚动(无法改 markup,用容器滚动兜底) */
  .studentCenter .rightMain.recordMain,
  .studentCenter .rightMain.myCourseTable,
  .studentCenter .rightMain.reviewMain { overflow-x: auto; }
  .studentCenter .rightMain.myCourseTable table,
  .studentCenter .rightMain.reviewMain table.reviewTable { min-width: 480px; }
  /* 预约页两栏叠起 */
  .studentCenter .rightMain.orderMain .chooseBox .chooseCourse,
  .studentCenter .rightMain.orderMain .chooseBox .chooseTime { flex: 1 1 auto; width: 100%; }
}


/* =========================================================================
   v0.3.1 追加 —— 课程回顾页 .contrlLine 操作按钮行(评价/反馈/Review&Practice)
   结构来自 completed.php:.reviewMain .contrlLine > table.class-function > a.*Btn
   关键约束:这些按钮的图标是 review_icon.png 精灵图,靠 background-position 切图,
   所以"绝不动 background",只理顺排版/文字色/hover,保住图标。
   ========================================================================= */

/* class-function 是排版用的内嵌 table,去掉它的表格观感 */
.studentCenter .rightMain.reviewMain table.class-function,
.studentCenter .rightMain.reviewMain table.class-function tr,
.studentCenter .rightMain.reviewMain table.class-function td {
  display: inline; background: transparent; border: none; padding: 0; height: auto;
}
.studentCenter .rightMain.reviewMain .contrlLine { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 24px; }
/* 只改文字色与对齐,background(精灵图标)保持原样 */
.studentCenter .rightMain.reviewMain .contrlLine a {
  float: none; color: var(--sc-ink-soft); font-size: 13px; line-height: 16px;
  transition: color .15s;
}
.studentCenter .rightMain.reviewMain .contrlLine a:hover { color: var(--sc-brand); }