/* ============================================================
 * 学员端样式 — 复用主系统设计令牌（docs/项目交接库/手册/设计系统规范.md）
 * 视觉来源: OPC 主系统设计令牌 + 本目录自维护样式（2026-09-08 起自包含）
 * ============================================================ */

/* 全宽返回条(负 margin 铺满视口)防横向滚动条兜底 */
body { overflow-x: hidden; }

/* 学员端顶栏 */
.stu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow);
}
.stu-header .stu-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.stu-header .stu-brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  overflow: hidden; flex: none;
}
.stu-header .stu-brand .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-header .stu-brand b { font-size: 16px; font-weight: 700; }
.stu-header .stu-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sub); }
.stu-header .stu-user b { color: var(--ink); font-weight: 600; }

/* ============ 桌面端顶部导航(2026-09-02,像官网:任何页面一键回首页) ============ */
.stu-topnav {
  display: none; position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid var(--line);
}
.stu-topnav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 58px;
  display: flex; align-items: center; gap: 28px;
}
.stu-topnav .stu-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.stu-topnav .stu-brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  overflow: hidden; flex: none;
}
.stu-topnav .stu-brand .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-logo-mark {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: #fff; font-size: 17px; font-weight: 800; line-height: 1;
}
.stu-topnav .stu-brand b { font-size: 16px; font-weight: 700; }
.stu-topnav-links { display: flex; gap: 4px; margin-left: auto; margin-right: 10px; }
.stu-topnav-links a {
  padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--sub); cursor: pointer; transition: all .18s ease; user-select: none;
}
.stu-topnav-links a:hover { color: var(--accent); background: rgba(47, 111, 237, .07); }
.stu-topnav-links a.active { color: var(--accent); background: rgba(47, 111, 237, .1); font-weight: 600; }
.stu-topnav .stu-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sub); margin-left: auto; }
.stu-topnav .stu-user b { color: var(--ink); font-weight: 600; }

/* ============ 用户下拉菜单(2026-09-07,登录后右上角) ============ */
.stu-user-menu { position: relative; }
.stu-user-trigger {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); transition: all .15s ease; color: var(--ink);
}
.stu-user-trigger:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.stu-user-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.stu-user-name { font-size: 13px; font-weight: 600; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 160px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease;
}
.stu-user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.stu-user-dropdown a {
  display: block; padding: 8px 12px; border-radius: 6px;
  font-size: 13px; color: var(--ink); cursor: pointer; transition: background .12s ease;
}
.stu-user-dropdown a:hover { background: var(--bg); }
.stu-user-dropdown a.danger { color: #e11d48; }
.stu-user-dropdown-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* 移动端顶栏右侧（头像+汉堡） */
.stu-header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* 汉堡按钮 */
.stu-hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; padding: 8px;
  border-radius: 8px;
}
.stu-hamburger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; transition: all .2s ease; }
.stu-hamburger:hover { background: rgba(0,0,0,.04); }

/* 移动端展开菜单 */
.stu-mobile-menu {
  display: none; flex-direction: column; gap: 0;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  position: fixed; top: 48px; left: 0; right: 0; z-index: 999;
  max-height: 70vh; overflow-y: auto;
}
.stu-mobile-menu.open { display: flex; }
.stu-mobile-menu a {
  padding: 14px 20px; font-size: 15px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.stu-mobile-menu a:active { background: rgba(0,0,0,.04); }

@media (min-width: 768px) {
  .stu-topnav { display: block; }
  .stu-header { display: none; }
  .stu-bottom-nav { display: none !important; }
  .stu-hamburger { display: none; }
  .stu-mobile-menu { display: none !important; }
}

/* 学员端主容器 */
.stu-main { max-width: 760px; margin: 0 auto; padding: 20px 16px 80px; }
/* 学习页取消内容居中缩窄,内容铺满可用宽度 */
.stu-main.page-lesson { max-width: none; padding-left: 0; padding-right: 0; }
.stu-main.page-lesson .stu-back:not(.stu-back-bar) { max-width: 1280px; margin: 0 auto 10px; padding: 0 20px; }
.stu-main.page-lesson .stu-lesson-layout { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* 登录页 */
.stu-login {
  max-width: 380px; margin: 60px auto 0; padding: 36px 30px;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow-md);
}
.stu-login h1 { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.stu-login .sub { font-size: 14px; color: var(--sub); text-align: center; margin-bottom: 24px; }
.stu-login .form-group { margin-bottom: 16px; }
.stu-login .stu-login-btn { width: 100%; margin-top: 8px; }
.stu-login .stu-error { color: var(--danger); font-size: 13px; text-align: center; min-height: 20px; margin-top: 8px; }
/* 自动登录勾选框 */
.stu-remember { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sub); cursor: pointer; margin: 2px 0 4px; user-select: none; }
.stu-remember input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }

/* 课程卡片(列表页/我的学习) */
.stu-course-card {
  display: flex; gap: 14px; padding: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 14px; cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease;
}
.stu-course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stu-course-thumb { width: 128px; height: 84px; border-radius: 8px; flex: none; object-fit: cover; background: var(--bg); }
.stu-course-thumb-ph {
  width: 128px; height: 84px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.stu-course-thumb-ph span { font-size: 30px; font-weight: 800; color: rgba(255,255,255,.92); z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,.15); }
.stu-course-thumb-ph::after { content: ''; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.08); top: -14px; right: -14px; }
.stu-course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stu-course-info h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.stu-course-intro { font-size: 13.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-course-progress { margin-top: 4px; }

/* badge 标签 */
.stu-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.stu-badge.owned { background: #e7f8f1; color: var(--success); }
.stu-badge.locked { background: #fdf3e0; color: var(--warn); }
.stu-badge.info { background: #eef0ff; color: var(--accent); }
/* 匿名态课时:保持正常颜色(不褪色),只是 hover 提示预览 */
.stu-lesson-item.guest { color: var(--ink); }
.stu-lesson-item.guest .stu-lesson-idx { background: #eef0ff; color: var(--accent); }
.stu-lesson-item.guest:hover { border-color: var(--accent); background: #fafaff; }
/* 详情页匿名购卡:蓝色调 CTA 更醒目 */
.stu-state-card.guest-state .stu-state-row { margin-bottom: 4px; }

/* 课程标签(图文/视频数量) */
.stu-tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.stu-tag.text { background: #eef0ff; color: var(--accent); }
.stu-tag.video { background: #e6f7f6; color: #0ea5a4; }

/* 课程详情页头部(2026-09-02 左文右图):整块包白色背景卡片(与目录卡同款),左文右图是一个整体模块 */
/* 详情页两大块布局:块1=头部卡+进度状态卡相连(下圆角在状态卡),中间无线无隙 */
.stu-detail-head {
  display: flex; gap: 18px; align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none; padding: 18px; margin-bottom: 0; box-shadow: var(--shadow);
}
.stu-detail-info { flex: 1; min-width: 0; }
.stu-detail-cover-side {
  width: 260px; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
}
.stu-side-cover { display: block; width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.stu-side-cover-ph {
  width: 100%; min-height: 170px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.stu-side-cover-ph span { font-size: 34px; font-weight: 800; color: rgba(255,255,255,.92); z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.15); }
.stu-side-cover-ph::after { content: ''; position: absolute; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.08); top: -14px; right: -14px; }
/* 窄屏回退:封面在上(16:9)文字在下,卡片 padding 收窄 */
@media (max-width: 560px) {
  .stu-detail-head { flex-direction: column-reverse; gap: 12px; padding: 14px; }
  .stu-detail-cover-side { width: 100%; }
  .stu-side-cover, .stu-side-cover-ph { aspect-ratio: 16 / 9; min-height: 0; }
}
.stu-detail-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.stu-detail-intro { font-size: 14px; color: var(--sub); margin-bottom: 16px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.stu-detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--sub); margin-bottom: 0; }

/* 购课状态卡 */
/* 块1 底部:进度/购买状态卡,承接头部卡(上边无线,下圆角收尾) */
.stu-state-card { background: var(--card); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); padding: 16px; margin-bottom: 20px; box-shadow: var(--shadow); }
.stu-state-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stu-state-tip { margin-top: 12px; font-size: 14px; color: var(--sub); }
.stu-state-tip b { color: var(--warn); }

/* 登录页「添加老师微信」二维码弹层(点击按钮显示,同官网免费咨询) */
.stu-qr-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(17,24,39,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.stu-qr-pop {
  background: var(--card); border-radius: 16px; padding: 28px 30px 24px;
  text-align: center; max-width: 320px; width: 100%;
  box-shadow: 0 24px 64px rgba(17,24,39,.35);
}
.stu-qr-pop img { width: 200px; height: 200px; border-radius: 10px; display: block; margin: 0 auto 14px; background: #fff; }
.stu-qr-pop .stu-qr-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.stu-qr-pop .stu-qr-sub { font-size: 13px; color: var(--sub); line-height: 1.6; margin-bottom: 18px; }
.stu-qr-close { width: 100%; }

/* 课时列表(详情页内) */
.stu-lesson-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  margin-bottom: 8px; cursor: pointer; transition: border-color .12s, background .12s;
}
.stu-lesson-item + .stu-lesson-item { /* 间距已有 */ }
.stu-lesson-item:hover { border-color: var(--accent-line); background: #fafbfe; }
/* 课时编号方块 */
.stu-lesson-idx {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: #eef0ff; color: var(--accent);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* 学习状态文字标签 */
.stu-lesson-state { flex: none; font-size: 13px; font-weight: 600; min-width: 24px; text-align: right; }
.stu-lesson-state .done { color: var(--success); }
.stu-lesson-state .go { color: var(--lock); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.stu-lesson-state .go::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.stu-lesson-state .lock { color: var(--lock); display: inline-flex; align-items: center; }
/* 已学样式 */
.stu-lesson-item.learned .stu-lesson-idx { background: #e7f8f1; color: var(--success); }
.stu-lesson-item.learned .stu-lesson-name { color: var(--sub); }
/* 当前课高亮 */
.stu-lesson-item.current { border-color: var(--accent); background: #fafaff; }
.stu-lesson-item.current .stu-lesson-name { color: var(--accent); }
.stu-lesson-item.current .stu-lesson-state .go { color: var(--accent); }

.stu-lesson-info { flex: 1; min-width: 0; }
.stu-lesson-name { font-size: 15px; font-weight: 600; }
.stu-lesson-type { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* 章节两层目录 */
/* 目录卡片(有背景底,章节带序号,可收起展开) */
/* 详情页:作为块2 内容区承接 tab 行——上边无线、下圆角收尾,与 tab 行连成一张整卡 */
.stu-dir-card {
  background: var(--card); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px 18px;
}

/* ============ 课程详情页「课程介绍 / 课程目录」tab(2026-09-02) ============ */
/* 块2:tab 行是白色卡片的顶部(上圆角),与下方内容卡无线紧连成一张整卡 */
.stu-detail-tabs {
  display: flex; gap: 6px;
  /* sticky 固定在返回条下方(返回条 top 57/58px + 高约 41px) */
  position: sticky; top: 98px; z-index: 15;
  margin: 20px 0 0; padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
@media (min-width: 768px) { .stu-detail-tabs { top: 99px; } }
.stu-detail-tabs button {
  flex: 1; border: 1px solid var(--line-strong); background: var(--card); border-radius: 10px;
  padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: all .18s ease; font-family: inherit;
}
.stu-detail-tabs button.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
/* 介绍内容:与目录同款背景卡片 + 电商详情页式大图依次排列 */
.stu-intro-card { padding: 18px 16px 14px; }
.stu-detail-p { font-size: 14.5px; line-height: 1.85; color: var(--ink); margin: 0 0 14px; white-space: pre-wrap; }
.stu-detail-imgwrap {
  position: relative; margin: 0 0 10px; border-radius: 10px; overflow: hidden;
  min-height: 160px; background: linear-gradient(135deg, #eef1f7 0%, #e6eaf2 100%);
  /* 加载中的微光骨架,图片到达后淡入,避免白屏等待 */
}
.stu-detail-imgwrap img {
  display: block; width: 100%; height: auto; opacity: 0;
  transition: opacity .35s ease;
}
.stu-detail-imgwrap img.ld { opacity: 1; }
.stu-detail-imgwrap.err { min-height: 90px; display: flex; align-items: center; justify-content: center; }
.stu-detail-imgwrap.err::after { content: '图片加载失败'; font-size: 12.5px; color: var(--sub); }
.stu-detail-imgwrap.err img { display: none; }
.stu-ch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 10px 0 6px; cursor: pointer; user-select: none;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, #fafbfe 0%, #f5f7fb 100%);
  border: 1px solid #e6e8f1;
}
.stu-ch-head:hover { background: linear-gradient(180deg, #f1f3fb 0%, #eceff6 100%); border-color: var(--accent-line); }
.stu-ch-group.headless .stu-ch-head { display: none; }
/* 未解锁章节头置灰:标签/标题/底色全灰,仅琥珀色锁徽章保留强调 */
.stu-ch-head.locked { background: #f4f5f8; border-color: #e6e8ef; }
.stu-ch-head.locked:hover { background: #eef0f4; border-color: #dcdee7; }
.stu-ch-head.locked .stu-ch-label { background: #dfe2ea; box-shadow: none; color: #8a8d99; }
.stu-ch-head.locked .stu-ch-title { color: var(--sub); }
.stu-ch-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 章节标签:第一章/第二章样式(比课时更醒目) */
.stu-ch-label {
  flex: none; padding: 4px 12px; border-radius: 8px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; box-shadow: 0 2px 8px var(--accent-glow); letter-spacing: .5px;
}
.stu-ch-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.stu-ch-right { display: flex; align-items: center; gap: 8px; flex: none; }
.stu-ch-count { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--bg); padding: 2px 10px; border-radius: 999px; }
/* 章节进度胶囊:学过一部分(紫)/学完(绿),与课时已学标记同色系,不额外占宽度 */
.stu-ch-count.doing { color: var(--accent); background: #eef0ff; }
.stu-ch-count.done { color: var(--success); background: #e7f8f1; }
.stu-ch-arrow { color: var(--sub); display: inline-flex; align-items: center; transition: transform .15s ease; }
.stu-ch-group.collapsed .stu-ch-arrow { transform: rotate(-90deg); }
.stu-ch-group.collapsed .stu-ch-body { display: none; }
.stu-ch-lock {
  display: inline-flex; align-items: center; gap: 5px; flex: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--warn);
  background: rgba(253,243,224,.65); padding: 4px 10px; border-radius: 999px;
}
.stu-ch-lock:hover { background: rgba(253,243,224,.95); }
.stu-ch-empty { font-size: 13px; color: var(--sub); padding: 10px 4px; }
/* 锁定章节内的课时 */
.stu-lesson-item.locked { opacity: 1; cursor: not-allowed; background: #f6f7fb; }
.stu-lesson-item.locked:hover { border-color: var(--line); background: #f6f7fb; }
.stu-lesson-item.locked .stu-lesson-idx { background: #eceef3; color: var(--sub); }
.stu-lesson-item.locked .stu-lesson-name { color: var(--sub); }
.stu-lesson-item.locked .stu-lesson-type { color: var(--lock); }
.stu-lesson-item.locked .stu-lesson-state { color: var(--sub); }

/* 课时学习页 */
.stu-lesson-content { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 32px; margin-bottom: 20px; box-shadow: var(--shadow); }
/* 学习页双栏布局(左侧课程目录 + 右侧内容) */
.stu-lesson-layout { display: flex; gap: 20px; align-items: flex-start; }
/* main 显式 align-self:flex-start,否则默认 stretch 把 main 拉到 layout 高度,内部 sticky 失效 */
.stu-lesson-main { flex: 1; min-width: 0; align-self: flex-start; }
.stu-lesson-main-r { flex: 1; min-width: 0; }
/* 本节导航在正文区域内右侧(飞书知识库式):内容列 flex:1,TOC 168px sticky,父级高度覆盖正文+导航+评价 */
.stu-lesson-main-r.has-toc { display: flex; gap: 28px; align-items: flex-start; }
.stu-lesson-content-col { flex: 1; min-width: 0; }
.stu-lesson-side {
  /* top:104 = 返回条底边(约97) + 间距,侧栏不被全宽返回条遮挡 */
  width: 252px; flex: none; align-self: flex-start; position: sticky; top: 104px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 10px;
  max-height: calc(100vh - 124px); overflow-y: auto;
  z-index: 5;
}
/* 本节导航:移至 content 卡片外部,sticky 范围覆盖正文+导航+评价全区域 */
.stu-lesson-body { flex: 1; min-width: 0; }
.stu-lesson-toc-side {
  /* top:104 = 与左侧目录栏对齐,返回条底边约97 + 间距 */
  width: 168px; flex: none; align-self: flex-start; position: sticky; top: 104px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  padding: 2px 0;
  z-index: 5;
}
.stu-toc-title {
  font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--sub);
  margin-bottom: 10px; padding-left: 10px;
}
.stu-toc-body { display: flex; flex-direction: column; gap: 1px; }
.stu-toc-item {
  display: flex; align-items: flex-start; gap: 0;
  padding: 6px 10px; border-radius: 7px;
  font-size: 13px; line-height: 1.5; color: var(--sub); text-decoration: none; cursor: pointer;
  border-left: 2px solid transparent; transition: all .15s ease;
}
.stu-toc-item:hover { background: #f4f5fb; color: var(--ink); }
.stu-toc-item.active {
  background: #eef0ff; color: var(--accent); font-weight: 600;
  border-left-color: var(--accent);
}
.stu-toc-idx {
  flex: none; font-size: 12px; color: inherit; opacity: .75;
  font-weight: 600; min-width: 30px;
}
.stu-toc-name {
  flex: 1; min-width: 0;
  /* 标题过长省略(2026-09-04):配合 JS 剥离括号后仍超长时单行省略 */
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 128px;
}
/* 侧边课程目录里的课时名同样截断,防止撑破目录栏 */
.stu-side-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 锚点跳转时给sticky返回条留出空间,标题不被遮住 */
.blk-heading { scroll-margin-top: 100px; }
.stu-side-course {
  font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--ink);
  padding: 2px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stu-side-course:hover { color: var(--accent); }
/* 侧边栏章节小标签 */
.stu-side-ch {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--ink); margin: 12px 4px 6px; line-height: 1.4;
}
.stu-ch-label-s {
  flex: none; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  background: #eef0ff; color: var(--accent);
}
.stu-side-ch svg { width: 13px; height: 13px; flex: none; color: var(--sub); }
/* 锁定章节置灰(学习页左侧目录) */
.stu-side-ch.locked { color: var(--sub); }
.stu-side-ch.locked .stu-ch-label-s { background: #eceef3; color: var(--sub); }
.stu-side-item { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; transition: background .12s ease; color: var(--ink); }
.stu-side-item:hover { background: #f4f5fb; }
.stu-side-item.current { background: #eef0ff; color: var(--accent); font-weight: 600; border: 1px solid var(--accent-line); padding: 7px 9px; }
.stu-side-item.learned { color: var(--success); }
.stu-side-item.learned .stu-side-mark { color: var(--success); }
.stu-side-item.locked { color: var(--sub); cursor: not-allowed; }
.stu-side-item.locked:hover { background: transparent; }
.stu-side-mark { width: 16px; flex: none; text-align: center; font-size: 12px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.stu-side-mark svg { width: 13px; height: 13px; color: var(--sub); }
.stu-side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 课时标题颜色三态:已学=绿色 / 未学=黑色 / 未解锁=灰色 */
.stu-lesson-item.learned .stu-lesson-name { color: var(--success); }
.stu-lesson-item.learned .stu-lesson-idx { background: #e7f8f1; color: var(--success); }
/* 未学就是默认黑色,不需要改 */
.stu-lesson-item .stu-lesson-name { color: var(--ink); }
/* 当前课=accent 紫色高亮(优先级最高) */
.stu-lesson-item.current .stu-lesson-name { color: var(--accent); }
.stu-lesson-item.current { border-color: var(--accent); background: #fafaff; }
.stu-lesson-content h1 { font-size: 22px; font-weight: 700; line-height: 1.45; margin: 0; color: var(--ink); }
/* 课时顶部标题行:与正文内容块区分,底部细分隔线 */
.stu-lesson-content h1.stu-lesson-title { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.stu-lesson-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px; padding: 4px 0 14px; border-bottom: 1px dashed var(--line);
  /* 标题行 sticky 固定:top=96 与本节导航/返回条层级错开(返回条底边约97px),不被遮挡 */
  position: sticky; top: 96px; z-index: 4;
  background: var(--card); margin-top: -4px;
}
/* 已学标记 */
.stu-learned-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--success);
  background: #e7f8f1; border-radius: 999px; padding: 3px 10px;
  margin-bottom: 18px;
}
/* 内容块 — 层次感 */
.stu-lesson-content .content-block { margin-bottom: 16px; }

/* ---------- 多级标题：h2 / h3 / h4 ---------- */
.stu-lesson-content .blk-heading { font-weight: 700; line-height: 1.5; }
.stu-lesson-content .blk-heading.blk-h2 {
  font-size: 19px; margin: 32px 0 14px; padding: 0 0 0 12px;
  border-left: 5px solid var(--accent); color: #1f1f35;
}
.stu-lesson-content .blk-heading.blk-h3 {
  font-size: 16.5px; margin: 24px 0 10px; padding: 8px 14px;
  border-radius: 8px; background: linear-gradient(90deg, #f4f3ff 0%, rgba(244,243,255,0) 100%);
  color: var(--accent); font-weight: 700;
}
.stu-lesson-content .blk-heading.blk-h4 {
  font-size: 15px; margin: 18px 0 8px;
  color: #3d3d55; font-weight: 600;
}
/* 正文小标题序号(与本节导航共用扁平编号 1,2,3...) */
.blk-heading .blk-h-num {
  display: inline-block;
  min-width: 1.5em; margin-right: 6px;
  color: var(--accent); font-weight: 700;
}
/* 侧边栏课时编号(未学/未锁时显示数字) */
.stu-side-mark.num { color: var(--sub); font-weight: 700; }

.stu-lesson-content .blk-paragraph { font-size: 15px; line-height: 1.9; color: var(--ink); text-align: justify; }

.stu-lesson-content .blk-quote {
  border-left: 4px solid var(--accent); padding: 16px 20px 16px 28px; margin: 18px 0;
  color: #4b4b63; background: linear-gradient(135deg, #fafaff 0%, #f4f3ff 100%);
  border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.85;
  font-style: italic; position: relative;
}
.stu-lesson-content .blk-quote::before {
  content: "❝"; position: absolute; left: 6px; top: -8px;
  font-size: 40px; color: var(--accent); opacity: .22; line-height: 1;
}

.stu-lesson-content .blk-list { padding: 0; margin: 14px 0; }
.stu-lesson-content .blk-list ul,
.stu-lesson-content .blk-list ol { display: grid; gap: 8px; padding-left: 26px; margin: 0; }
.stu-lesson-content .blk-list li { font-size: 15px; line-height: 1.8; }
.stu-lesson-content .blk-list-ul li { list-style: disc; }
.stu-lesson-content .blk-list-ol li { list-style: decimal; }

.stu-lesson-content .blk-image { margin: 18px 0; }
.stu-lesson-content .blk-image img {
  width: 100%; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  display: block; background: linear-gradient(135deg, #eef1f7 0%, #e6eaf2 100%);
  min-height: 120px;
  /* 关键修复(2026-09-04):img 加载失败时显示占位,不白屏 */
}
.stu-lesson-content .blk-image.err {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f4f5fb 0%, #e9ecf5 100%);
  border-radius: 12px;
}
.stu-lesson-content .blk-image.err::after {
  content: '图片加载失败，请联系老师补图'; font-size: 12.5px; color: var(--sub);
}
.stu-lesson-content .blk-image.err img { display: none; }
.stu-lesson-content .blk-img-caption { text-align: center; font-size: 12.5px; color: var(--sub); margin-top: 10px; line-height: 1.6; }

.stu-lesson-content .blk-tip {
  margin: 18px 0; padding: 14px 18px;
  background: linear-gradient(135deg, #e9faf3 0%, #d9f5ea 100%);
  border-radius: 12px; color: #0b7a56; font-size: 15px; line-height: 1.85;
  position: relative; border: 1px solid #c7ecd9;
}
.stu-lesson-content .blk-tip .blk-tip-title {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; color: #0b9e6f;
  letter-spacing: 1.5px; margin-bottom: 6px; padding: 2px 10px;
  background: #fff; border-radius: 5px; margin-right: 8px;
}

/* ---------- 新增：代码块 ---------- */
.stu-lesson-content .blk-code {
  margin: 18px 0; padding: 16px 20px;
  background: #1a1c2e; border-radius: 12px; overflow-x: auto;
  color: #e7e8f0; font-size: 13.5px; line-height: 1.75;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid #2a2d46; position: relative;
}
.stu-lesson-content .blk-code code {
  background: none; padding: 0; font-size: 13.5px; line-height: 1.75;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; color: #e7e8f0;
}
.stu-lesson-content .blk-code-caption {
  text-align: right; font-size: 12px; color: #8d8fa8;
  margin-top: 8px; font-family: inherit; font-style: italic;
}

/* ---------- 新增：表格 ---------- */
.stu-lesson-content .blk-table-wrap { margin: 18px 0; overflow-x: auto; }
.stu-lesson-content .blk-table {
  width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  font-size: 14px;
}
.stu-lesson-content .blk-table th {
  background: linear-gradient(135deg, #f4f3ff 0%, #ebe9ff 100%);
  font-weight: 700; text-align: left; padding: 12px 16px; color: #3d3d55;
  border-bottom: 2px solid var(--accent); white-space: nowrap;
}
.stu-lesson-content .blk-table td {
  padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink);
  line-height: 1.7; vertical-align: top;
}
.stu-lesson-content .blk-table tr:last-child td { border-bottom: none; }
.stu-lesson-content .blk-table tr:hover td { background: #fafaff; }
.stu-lesson-content .blk-table-caption {
  text-align: center; font-size: 12.5px; color: var(--sub);
  margin-top: 8px; line-height: 1.6;
}

/* ---------- 新增：作业模块(独立样式,与正文视觉分隔) ---------- */
.stu-lesson-content .blk-homework {
  margin: 28px 0 20px; border: 2px dashed var(--accent);
  border-radius: 14px; overflow: hidden; background: #fbfaff;
  box-shadow: 0 4px 16px rgba(110, 80, 255, 0.06);
}
.stu-lesson-content .blk-hw-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff; font-weight: 700; font-size: 16px;
}
.stu-lesson-content .blk-hw-icon { font-size: 20px; line-height: 1; }
.stu-lesson-content .blk-hw-title { letter-spacing: 0.5px; }
.stu-lesson-content .blk-hw-body {
  padding: 18px 20px; font-size: 15px; line-height: 1.9;
  color: var(--ink);
}

/* ---------- 新增：正文内目录(TOC) ---------- */
.stu-lesson-content .blk-toc {
  margin: 0 0 24px; padding: 16px 20px;
  background: #fafaff; border: 1px solid #e0dcf5; border-radius: 12px;
}
.stu-lesson-content .blk-toc-title {
  font-weight: 700; font-size: 13.5px; color: var(--accent);
  letter-spacing: 1.5px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px dashed #d0cbf0;
  display: inline-flex; align-items: center; gap: 6px;
}
.stu-lesson-content .blk-toc-title::before { content: "📋"; }
.stu-lesson-content .blk-toc-body { display: grid; gap: 6px; }
.stu-lesson-content .blk-toc-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.7; color: #3d3d55;
  padding: 3px 0; cursor: default;
}
.stu-lesson-content .blk-toc-item.lvl-2 { font-weight: 600; color: var(--ink); }
.stu-lesson-content .blk-toc-item.lvl-3 { font-weight: 500; padding-left: 4px; }
.stu-lesson-content .blk-toc-item.lvl-4 { font-size: 13px; padding-left: 8px; color: var(--sub); }
.stu-lesson-content .blk-toc-idx {
  flex: none; font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12.5px; color: var(--accent); font-weight: 700; min-width: 34px;
}

/* 视频课时 */
.stu-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0c0f1a; border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.stu-video-wrap video { width: 100%; height: 100%; display: block; }
.stu-video-note { padding: 10px 0; font-size: 14px; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.stu-video-note .dot { width: 6px; height: 6px; border-radius: 50%; background: #0ea5a4; flex: none; }

/* 视频倍速控件 */
.stu-video-ctrl {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 14px; background: #f7f7fb; border-top: 1px solid var(--line);
}
.stu-video-ctrl-label {
  font-size: 13px; color: var(--sub); font-weight: 600; flex: none;
}
.stu-video-speed { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.spd-btn {
  border: none; background: #fff; color: var(--sub);
  padding: 6px 12px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 500; line-height: 1;
  transition: all .12s ease; border-right: 1px solid var(--line);
}
.spd-btn:last-child { border-right: none; }
.spd-btn:hover { background: #f4f3ff; color: var(--accent); }
.spd-btn.active { background: var(--accent); color: #fff; font-weight: 700; }

/* 正文内「视频教程」内容块(2026-09-05) */
.blk-video { margin-bottom: 4px; }
.blk-video .blk-video-box { width: 100%; aspect-ratio: 16 / 9; background: #0c0f1a; border-radius: 10px 10px 0 0; overflow: hidden; }
.blk-video .blk-video-box video { width: 100%; height: 100%; display: block; }
.blk-video .blk-video-ctrl { border: 1px solid var(--line); border-top: none; border-radius: 0 0 10px 10px; }
/* 视频占位框:复用配图占位 blk-img-ph 体系,标签换视频色 */
.blk-ph-video .blk-ph-tag { background: #e6f7f6; color: #0ea5a4; }

/* 内联样式：markdown内联标记渲染（escMd函数产出） */
.stu-lesson-content .inline-code {
  background: #f0f0fa; border: 1px solid #dcdce8;
  padding: 1px 6px; border-radius: 5px;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; color: #d63384; line-height: 1;
}
.stu-lesson-content a[href] {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dashed rgba(110, 80, 255, 0.35);
  transition: all .12s ease;
}
.stu-lesson-content a[href]:hover {
  color: #5a3bd8; border-bottom-color: var(--accent);
  background: rgba(110, 80, 255, 0.05);
}
.stu-lesson-content b, .stu-lesson-content strong { color: var(--ink); font-weight: 700; }
.stu-lesson-content i { font-style: italic; }

/* 配图占位组件 */
.blk-img-ph {
  margin: 20px 0; padding: 14px 16px;
  background: repeating-linear-gradient(
    45deg,
    #fafaff,
    #fafaff 10px,
    #f4f3ff 10px,
    #f4f3ff 20px
  );
  border: 2px dashed #c6c1ee; border-radius: 12px;
}
.blk-ph-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.blk-ph-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: #fff2d6; color: #a66a00;
  font-size: 12px; font-weight: 700; border-radius: 5px; border: 1px solid #f2ddab;
}
.blk-ph-tag::before { content: "🖼"; font-size: 13px; }
.blk-ph-size {
  font-size: 12.5px; color: #7a7796; font-weight: 500;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.blk-ph-body {
  background: #fff; border: 1px solid #e0ddee; border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
}
.blk-ph-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: flex-start;
  padding: 3px 0;
}
.blk-ph-label {
  font-size: 12.5px; color: var(--sub); font-weight: 600;
  padding-top: 2px; flex: none;
}
.blk-ph-val {
  font-size: 13.5px; line-height: 1.7; color: var(--ink);
  background: #fafaff; padding: 6px 8px; border-radius: 5px;
  border: 1px dashed #d8d5f0;
}
.blk-ph-val.blk-ph-prompt {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; background: #fff7ef; border-color: #f0d9bf;
  color: #5c3b00;
}
.blk-ph-foot {
  text-align: center; font-size: 12px; color: #7a7796;
  padding-top: 8px; border-top: 1px dashed #e0ddee;
}

/* 正文中已不再需要内联TOC块，但保留旧样式兼容(避免老记录报错) */
.blk-toc { display: none !important; }

/* 上一课 / 下一课导航 */
.stu-lesson-nav { display: flex; gap: 12px; margin-top: 20px; }
.stu-lesson-nav .stu-nav-btn {
  flex: 1; min-height: 52px; border: none; border-radius: var(--radius-btn, 8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 10px; cursor: pointer; font-family: inherit; font-weight: 600;
  transition: transform .08s ease, background .15s ease;
}
.stu-lesson-nav .stu-nav-btn:active { transform: scale(.97); }
.stu-lesson-nav .stu-nav-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px var(--accent-glow); }
.stu-lesson-nav .stu-nav-btn.ghost { background: #eef0ff; color: var(--accent); }
.stu-lesson-nav .stu-nav-btn:disabled { background: #eff1f6; color: var(--lock); box-shadow: none; cursor: not-allowed; transform: none; }
.stu-lesson-nav .stu-nav-btn span { font-size: 15px; }
.stu-lesson-nav .stu-nav-btn small { font-size: 12px; font-weight: 400; opacity: .8; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 继续学习按钮(详情页状态卡/我的学习) */
.stu-continue-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px;
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 12px var(--accent-glow); transition: transform .08s ease;
}
.stu-continue-btn:hover { background: var(--accent-dark); }
.stu-continue-btn:active { transform: scale(.97); }
/* 带下一节副标题的按钮:竖排 + 副标题溢出省略 */
.stu-continue-btn.has-sub { flex-direction: column; gap: 3px; min-height: 56px; padding: 9px 18px; }
.stu-continue-btn small { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 底部导航 */
.stu-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(30,36,51,.06);
}
.stu-bottom-nav button {
  flex: 1; border: none; background: none; min-height: 56px;
  font-size: 13px; color: var(--sub); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 0; font-weight: 500;
}
.stu-bottom-nav button.active { color: var(--accent); font-weight: 600; }
.stu-bottom-nav button .nav-ico { display: flex; align-items: center; }
.stu-bottom-nav button .nav-ico svg { width: 20px; height: 20px; }

/* 空状态 */
.stu-empty { text-align: center; padding: 56px 16px; color: var(--sub); }
.stu-empty p { font-size: 15px; margin-bottom: 8px; }

/* 面包屑 */
.stu-back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--sub); cursor: pointer; margin-bottom: 16px; }
/* 学习页返回条:sticky 固定顶部 + 行内显示当前课时名(2026-09-02)
   注:.page-lesson 左右 padding 已清零,负 margin 只用于顶部贴紧顶栏 */
.stu-back-bar {
  position: sticky; top: 57px; z-index: 15;
  display: flex; align-items: center; gap: 8px;
  margin: -16px 0 16px; padding: 10px 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.stu-back-bar .stu-back-arrow { font-size: 20px; line-height: 1; color: var(--sub); }
.stu-back-bar .stu-back-label { font-size: 14px; white-space: nowrap; }
.stu-back-bar .stu-back-title {
  /* 紧跟「返回课程目录」右侧,不推到最右;超长省略 */
  margin-left: 6px; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .stu-back-bar { top: 58px; margin: -20px 0 12px; }
  /* 两页返回条内容统一锚定 1280px 内容容器左缘(学习页目录/详情页头部卡),返回按钮同一位置 */
  .stu-back-bar {
    padding-left: max(20px, calc((100vw - 1280px) / 2 + 20px));
    padding-right: max(20px, calc((100vw - 1280px) / 2 + 20px));
  }
}
/* 详情页容器为 760px:返回条横向铺满视口(背景条全宽,内容用上面的统一锚点) */
.stu-main:not(.page-lesson) .stu-back-bar {
  margin-left: -14px; margin-right: -14px;
}
@media (min-width: 768px) {
  .stu-main:not(.page-lesson) .stu-back-bar {
    margin-left: calc(-16px - (100vw - 760px) / 2);
    margin-right: calc(-16px - (100vw - 760px) / 2);
  }
}
.stu-back:hover { color: var(--accent); }

/* section 标题 */
.stu-section-title { margin: 24px 4px 10px; font-size: 17px; font-weight: 700; }

/* ============================================================
   大卡片(封面在上,信息在下) — 首页课程列表 / 我的学习
   ============================================================ */
.stu-course-card.big { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.stu-card-cover { position: relative; aspect-ratio: 16 / 9; background: var(--bg); flex: none; }
.stu-card-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-card-cover-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.stu-card-cover-ph span { font-size: 46px; font-weight: 800; color: rgba(255,255,255,.92); z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.stu-card-cover-ph::after { content: ''; position: absolute; width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.08); top: -20px; right: -20px; }
/* 封面上的解锁状态标签 */
.stu-cover-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(12,15,26,.22); backdrop-filter: blur(4px); white-space: nowrap;
}
.stu-cover-badge.on { background: rgba(231,248,241,.95); color: var(--success); }
.stu-cover-badge.off { background: rgba(253,243,224,.95); color: var(--warn); }
.stu-cover-badge.warn { background: rgba(254,235,238,.95); color: var(--danger); }
/* 卡片信息区 */
.stu-card-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 16px 16px; }
.stu-card-body h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.stu-card-intro {
  font-size: 13.5px; color: var(--sub); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stu-card-meta { font-size: 13px; color: var(--sub); }
.stu-card-foot { font-size: 13px; color: var(--sub); }
.stu-card-foot.warn { color: var(--warn); font-weight: 600; }
/* 过期课程卡整体弱化 */
.stu-course-card.expired .stu-card-cover { filter: grayscale(.35) brightness(.97); }
.stu-course-card.expired .stu-card-body h3 { color: var(--sub); }
/* 待上架预告卡:不置灰,仅虚线边框轻提示(标签见 .stu-cover-badge.preview) */
.stu-course-card.preview { border: 1px dashed var(--border, #e5e7eb); }
/* 待上架标签(封面左上角,琥珀色) */
.stu-cover-badge.preview { background: rgba(253,243,224,.95); color: var(--warn); }
/* 感兴趣按钮(预告卡右下角,位于卡片内容流 foot 行右侧,非绝对定位) */
.stu-card-foot.preview-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px;
}
.stu-interest-btn {
  flex: none; cursor: pointer; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--sub);
  font-size: 12.5px; font-weight: 600; font-family: inherit; line-height: 1.4;
  transition: all .15s ease;
}
.stu-interest-btn:hover { color: var(--accent); border-color: var(--accent); }
.stu-interest-btn.on {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 2px 6px var(--accent-glow);
}
/* 卡片网格:默认 2~3 个自适应 */
.stu-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
/* 课程数少时放宽卡片:1 门 → 单列宽卡,2 门 → 两列(窄容器 760px) */
@media(min-width: 761px) {
  .stu-card-grid.n1 { grid-template-columns: minmax(0, 640px); }
  .stu-card-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 列表/我的页宽容器(2026-09-04):桌面一行 3 卡,平板 2 卡 */
.stu-main.wide { max-width: 1180px; }
@media(min-width: 1024px) {
  .stu-main.wide .stu-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stu-main.wide .stu-card-grid.n1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
  .stu-main.wide .stu-card-grid.n2 { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
}
@media(min-width: 761px) and (max-width: 1023px) {
  .stu-main.wide .stu-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stu-main.wide .stu-card-grid.n1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
}
.stu-course-card.big { margin-bottom: 0; }

/* ============================================================
   课时评价(点赞 + 留言) — 学习页底部
   ============================================================ */
.stu-fb-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px 20px; margin-top: 20px; box-shadow: var(--shadow);
}
.stu-fb-like-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stu-like-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--line); background: #fafbfe; color: var(--ink);
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease, transform .08s ease;
}
.stu-like-btn:hover { border-color: var(--accent); color: var(--accent); }
.stu-like-btn:active { transform: scale(.96); }
.stu-like-btn.liked { background: #eef0ff; border-color: var(--accent); color: var(--accent); }
.stu-like-btn b { font-size: 14px; }
.stu-fb-tip { font-size: 13px; color: var(--sub); }
.stu-fb-divider { height: 1px; background: var(--line); margin: 16px 0 14px; }
.stu-fb-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.stu-fb-title span { font-size: 12px; font-weight: 600; color: var(--sub); background: #f1f2f8; padding: 1px 8px; border-radius: 999px; }
.stu-fb-list { list-style: none; display: grid; gap: 14px; margin-bottom: 14px; }
.stu-fb-item { display: flex; gap: 10px; }
.stu-fb-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700;
}
.stu-fb-main { flex: 1; min-width: 0; }
.stu-fb-head { display: flex; align-items: baseline; gap: 8px; }
.stu-fb-head b { font-size: 13.5px; }
.stu-fb-head span { font-size: 12px; color: var(--lock); }
.stu-fb-text { font-size: 14px; line-height: 1.7; margin-top: 2px; word-break: break-word; }
.stu-fb-empty { font-size: 13.5px; color: var(--sub); padding: 6px 0 2px; }
.stu-fb-form { display: flex; gap: 10px; }
.stu-fb-form input {
  flex: 1; min-width: 0; height: 40px;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 0 16px;
  font-size: 14px; font-family: inherit; background: #fafbfe; outline: none; color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.stu-fb-form input:focus { border-color: var(--accent); background: #fff; }
.stu-fb-send {
  flex: none; min-height: 40px; padding: 0 20px;
  border: none; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 3px 10px var(--accent-glow); transition: transform .08s ease, opacity .12s ease;
}
.stu-fb-send:active { transform: scale(.96); }
.stu-fb-send:disabled { opacity: .6; cursor: default; transform: none; }

@media(max-width: 760px) {
  .stu-main { padding: 16px 14px 80px; }
  .stu-course-thumb, .stu-course-thumb-ph { width: 100px; height: 68px; }
  .stu-lesson-content { padding: 18px 16px; }
  .stu-detail-title { font-size: 19px; }
  .stu-lesson-nav { gap: 8px; }
  .stu-card-grid { grid-template-columns: 1fr; gap: 12px; }
  .stu-lesson-side { display: none; }
  .stu-lesson-layout { display: block; }
  /* 返回条与目录内容左对齐(页面 padding 14px) */
  .stu-back-bar { padding: 10px 14px; }
  /* 章节头精简:锁徽章只留图标(点击弹日期toast),进度胶囊缩成「3课时/2/3/✓」,给标题让位 */
  .stu-ch-head { padding: 9px 10px; gap: 8px; }
  .stu-ch-label { padding: 3px 9px; font-size: 12px; }
  .stu-ch-name { gap: 8px; font-size: 15px; }
  .stu-ch-lock { padding: 5px 8px; }
  .stu-ch-lock span { display: none; }
  .stu-ch-count { font-size: 0; padding: 2px 9px; }
  .stu-ch-count::before { content: attr(data-c); font-size: 12px; }
}
/* 中窄屏隐藏内嵌本节导航,正文占满 */
@media (max-width: 1199px) {
  .stu-lesson-toc-side { display: none; }
  .stu-lesson-main-r.has-toc { display: block; }
}

/* ============ 首页(2026-09-07) ============ */
/* 通用按钮:主/次两态,与既有卡片配色一致,避免硬编码 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 22px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1.5px solid transparent; cursor: pointer; transition: all .15s ease;
}
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 16px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }
.btn.ghost {
  background: var(--card); color: var(--ink);
  border-color: var(--line-strong);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Hero 区:品牌主张 + CTA,渐变背景营造仪式感 */
.stu-hero {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(135deg, #2B37B8 0%, #5B4FD8 50%, #7B6CF0 100%);
  border-radius: 20px; padding: 48px 36px; margin-bottom: 28px;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(43, 55, 184, 0.18);
}
.stu-hero::after {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(205, 215, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.stu-hero-inner { position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 520px; }
.stu-hero-art { position: relative; z-index: 1; flex: none; width: 320px; max-width: 40%; opacity: 0.92; }
.stu-hero-badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  font-size: 12px; font-weight: 600; margin-bottom: 14px; backdrop-filter: blur(8px);
}
.stu-hero-title {
  font-size: 30px; font-weight: 800; line-height: 1.3; margin: 0 0 14px;
  letter-spacing: -0.5px;
}
.stu-hero-sub {
  font-size: 16px; line-height: 1.7; opacity: 0.92; margin: 0 0 28px;
}
.stu-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.stu-hero-cta .btn-primary { background: #fff; color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.stu-hero-cta .btn-primary:hover { background: #f8faff; }
.stu-hero-cta .btn.ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.stu-hero-cta .btn.ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

/* 区块容器:统一的标题/副标题/更多链接 */
.stu-section { margin-bottom: 36px; }
.stu-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.stu-section-title {
  font-size: 22px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.5px;
}
.stu-section-sub { font-size: 13px; color: var(--sub); }
.stu-section-more {
  font-size: 13px; color: var(--accent); cursor: pointer;
  font-weight: 600; transition: opacity .15s ease;
}
.stu-section-more:hover { opacity: 0.7; }

/* 引流品网格:桌面 4 列,平板 2 列,手机 1 列 */
.stu-lead-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stu-lead-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg); padding: 20px;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.stu-lead-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-line);
}
.stu-lead-card.soon { opacity: 0.92; }
.stu-lead-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.stu-lead-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.stu-lead-body h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.stu-lead-body p { font-size: 13px; color: var(--sub); line-height: 1.6; margin: 0; }
.stu-lead-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 6px; align-self: flex-start;
}
.stu-lead-soon {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 600; color: var(--sub);
  background: var(--bg); padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--line);
}

/* ============ 工作坊/服务卡片(插画级,2026-09-07) ============ */
.stu-workshop-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stu-workshop-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.stu-workshop-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-line);
}
.stu-workshop-card.soon { opacity: 0.95; }
.stu-workshop-cover {
  width: 100%; aspect-ratio: 2 / 1; overflow: hidden; flex: none;
}
.stu-workshop-cover svg { display: block; width: 100%; height: 100%; }
.stu-workshop-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.stu-workshop-tags { display: flex; gap: 8px; align-items: center; }
.stu-workshop-tags .stu-lead-soon { position: static; }
.stu-workshop-body h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.4; }
.stu-workshop-body p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0; }
.stu-workshop-benefits { font-size: 12px; color: var(--sub); line-height: 1.6; padding-top: 10px; border-top: 1px dashed var(--line); }
.stu-workshop-benefits b { color: var(--ink); font-weight: 600; }
.stu-workshop-price { font-size: 14px; font-weight: 700; color: var(--accent); }

/* 关于我:整体感个人名片(2026-09-07 重设计,渐变底+白字+玻璃徽章) */
.stu-idcard {
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: var(--shadow-md);
  position: relative;
}
.stu-idcard::before { /* 装饰光斑,增加整体质感 */
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); filter: blur(60px);
  top: -140px; right: -100px; pointer-events: none;
}
.stu-idcard-main {
  display: flex; gap: 22px; align-items: center; padding: 32px 32px 20px; position: relative;
}
.stu-idcard-avatar {
  width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex: none;
  border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.stu-idcard-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-idcard-info h3 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: .5px; }
.stu-idcard-tagline { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); margin: 0 0 10px; }
.stu-idcard-desc { font-size: 13.5px; color: rgba(255, 255, 255, .82); line-height: 1.75; margin: 0; }
.stu-idcard-chips {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  padding: 4px 32px 26px; position: relative;
}
.stu-idcard-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; border-radius: 14px;
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24); cursor: default;
  transition: background .15s ease;
}
.stu-idcard-chip:hover { background: rgba(255, 255, 255, .24); }
.stu-idcard-chip-t { font-size: 13px; font-weight: 600; line-height: 1.4; }
.stu-idcard-chip-d { font-size: 12px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.stu-idcard-qrs {
  display: flex; gap: 28px; justify-content: center; padding: 22px 24px;
  background: var(--card); border-top: 1px solid var(--line); position: relative;
}
.stu-idcard-qr { text-align: center; }
.stu-idcard-qr img {
  width: 104px; height: 104px; border-radius: 12px; border: 1px solid var(--line);
  display: block; object-fit: cover; background: #fff;
}
.stu-idcard-qr p { font-size: 12.5px; color: var(--sub); margin: 8px 0 0; }
@media (max-width: 600px) {
  .stu-idcard-main { flex-direction: column; text-align: center; padding: 26px 20px 14px; }
  .stu-idcard-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 20px 22px; }
  .stu-idcard-qrs { flex-wrap: wrap; gap: 18px; }
}

/* ============ 免费资源区(文章/模板工具/案例/变现,2026-09-07) ============ */
/* tab 切换条 */
.res-tabs {
  display: flex; gap: 4px; margin-bottom: 24px;
  border-bottom: 2px solid var(--line); padding-bottom: 0;
  position: sticky; top: 0; z-index: 50;
  background: var(--card); padding-top: 12px;
}
.res-tab {
  padding: 10px 20px; font-size: 14.5px; font-weight: 600; color: var(--sub);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s ease, border-color .15s ease; user-select: none;
}
.res-tab:hover { color: var(--accent); }
.res-tab.active { color: var(--accent); border-color: var(--accent); }

/* 面板容器 */
.res-panel { min-height: 200px; }

/* 3列网格(文章) */
.stu-lead-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 卡片式外链(文章/变现) */
a.res-card-link { text-decoration: none; color: inherit; position: relative; }
.res-card-meta { display: flex; gap: 6px; margin-top: 6px; }

/* 首页资源入口卡片 */
.stu-lead-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.res-entry { position: relative; box-shadow: var(--shadow); }
.res-entry .stu-lead-body { padding-right: 24px; }
.res-entry-arrow {
  position: absolute; top: 50%; right: 18px; transform: translateY(-50%);
  font-size: 18px; color: var(--sub); transition: transform .18s ease, color .18s ease;
}
.res-entry:hover .res-entry-arrow { transform: translateY(-50%) translateX(4px); color: var(--accent); }

/* 外链列表:文章合集、AI 变现 */
.res-list { display: flex; flex-direction: column; gap: 10px; }
.res-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.res-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.res-item-main { flex: 1; min-width: 0; }
.res-item-main h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 0 3px; line-height: 1.5; }
.res-item-main p { font-size: 12.5px; color: var(--sub); margin: 0; line-height: 1.55; }
.res-item-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.res-topic { font-size: 11.5px; color: var(--sub); background: var(--bg); padding: 3px 9px; border-radius: 6px; font-weight: 500; white-space: nowrap; border: 1px solid var(--line); }
.res-src { font-size: 11.5px; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.res-arrow { color: var(--sub); font-size: 15px; line-height: 1; }

/* 模板/工具:子分组标题 */
.tool-sub { margin-top: 22px; }
.tool-sub:first-child { margin-top: 0; }
.tool-sub-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.tool-sub-title small { font-size: 12px; font-weight: 400; color: var(--sub); }
.stu-lead-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Skill 技能链接网格 */
.res-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skill-item {
  display: flex; flex-direction: column; gap: 4px; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 44px 12px 14px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.skill-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.skill-item b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.skill-item span { font-size: 12px; color: var(--sub); line-height: 1.5; }
.skill-item em {
  position: absolute; top: 10px; right: 12px; font-style: normal;
  font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap;
}
.skill-item em.skill-ext { color: var(--sub); }

/* 卡片型外链(案例库外部卡片)继承 lead 卡片样式,补上链接重置 */
a.stu-lead-card { text-decoration: none; color: inherit; }

/* 个人资料/修改密码页(2026-09-07) */
.stu-profile { max-width: 560px; margin: 0 auto; }
.stu-profile h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.stu-profile-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.stu-profile-form .form-group { margin-bottom: 16px; }
.stu-profile-form .form-group label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 6px; font-weight: 500; }
.stu-profile-form .form-group input,
.stu-profile-form .form-group select,
.stu-profile-form .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; color: var(--ink); background: var(--card); transition: border-color .15s ease;
  box-sizing: border-box;
}
.stu-profile-form .form-group input:focus,
.stu-profile-form .form-group select:focus,
.stu-profile-form .form-group textarea:focus { outline: none; border-color: var(--accent); }
.stu-profile-form .form-group input:disabled { background: var(--bg); color: var(--sub); }
.stu-profile-form .form-group textarea { resize: vertical; min-height: 72px; }
.stu-profile-meta { display: flex; gap: 20px; font-size: 12px; color: var(--sub); margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }

/* 定制开发详情页(2026-09-07,内容搬自官网 /enterprise/) */
.svc-hero { padding-top: 8px; }
.svc-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  margin-bottom: 14px;
}
.svc-case-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-case-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.svc-case-img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.svc-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-case-body { padding: 16px 18px 18px; }
.svc-case-icon { font-size: 20px; display: block; margin-bottom: 6px; }
.svc-case-body h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.svc-case-body p { font-size: 12.5px; color: var(--sub); line-height: 1.65; margin: 0; }
.svc-steps { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.svc-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.svc-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.svc-step h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.svc-step p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0; }
.svc-price-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.svc-price-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; text-align: center;
}
.svc-price-card.hot { border-color: var(--accent-line); box-shadow: var(--shadow); }
.svc-price-tag {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 12px;
  border-radius: 999px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); margin-bottom: 10px;
}
.svc-price-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.svc-price-amount { font-size: 28px; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.svc-price-amount small { font-size: 13px; font-weight: 500; color: var(--sub); }
.svc-price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.svc-price-card li { font-size: 13px; color: var(--sub); display: flex; gap: 8px; align-items: baseline; }
.svc-price-card li::before { content: '✦'; color: var(--accent); font-size: 11px; flex: none; }
.svc-cta {
  text-align: center; padding: 36px 24px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius);
}
.svc-cta h2 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.svc-cta p { font-size: 14px; color: var(--sub); margin: 0; }
@media (max-width: 960px) {
  .svc-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .svc-case-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .stu-workshop-grid, .stu-lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stu-hero { padding: 40px 22px 36px; }
  .stu-hero-title { font-size: 24px; }
  .stu-hero-sub { font-size: 14px; }
}
@media (max-width: 768px) {
  .stu-hero { flex-direction: column; text-align: center; padding: 36px 24px; gap: 0; }
  .stu-hero-art { display: none; }
  .stu-hero-inner { max-width: 100%; }
}
@media (max-width: 600px) {
  /* 免费资源4张卡片:2x2 网格,缩小卡片,隐藏描述文字 */
  .stu-lead-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stu-lead-grid-4 .stu-lead-card { padding: 12px 10px; gap: 6px; }
  .stu-lead-grid-4 .stu-lead-card .stu-lead-body p { display: none; }
  .stu-lead-grid-4 .stu-lead-card .stu-lead-ico { width: 32px; height: 32px; border-radius: 8px; }
  .stu-lead-grid-4 .stu-lead-card .stu-lead-body h3 { font-size: 13px; }
  /* 工作坊/服务恢复单列大卡片 */
  .stu-workshop-grid { grid-template-columns: 1fr; }
  /* 免费资源二级页面精选文章网格缩小 */
  .stu-lead-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stu-lead-grid-3 .stu-lead-card { padding: 12px 10px; }
  .stu-lead-grid-3 .stu-lead-card .stu-lead-body p { font-size: 12px; -webkit-line-clamp: 2; }
  .res-grid { grid-template-columns: 1fr; }
  .res-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .res-tab { white-space: nowrap; }
  .res-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 480px) {
  .stu-hero-cta .btn { width: 100%; }
}

/* ============ AI 答疑助手(悬浮,2026-09-07) ============ */
.stu-ai-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
}
.stu-ai-fab.hide { display: none; }
.stu-ai-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 8px 24px var(--accent-glow), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stu-ai-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 28px var(--accent-glow); }
.stu-ai-btn:active { transform: scale(.96); }

.stu-ai-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 101;
  width: 360px; max-width: calc(100vw - 36px);
  height: 520px; max-height: calc(100vh - 36px);
  background: var(--card); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30,36,51,.22), 0 4px 12px rgba(30,36,51,.08);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.stu-ai-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.stu-ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--accent); color: #fff;
  flex-shrink: 0;
}
.stu-ai-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.stu-ai-close {
  background: rgba(255,255,255,.18); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  font-size: 20px; line-height: 1; transition: background .15s ease;
}
.stu-ai-close:hover { background: rgba(255,255,255,.32); }

.stu-ai-body {
  flex: 1; overflow-y: auto; padding: 14px;
  background: var(--bg);
}
.stu-ai-hint {
  font-size: 13px; color: var(--sub); line-height: 1.6;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.stu-ai-hint b { color: var(--ink); }

.stu-ai-msg { display: flex; margin: 12px 0; }
.stu-ai-msg.u { justify-content: flex-end; }
.stu-ai-msg.ai { justify-content: flex-start; }
.stu-ai-bubble {
  max-width: 82%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.6; word-break: break-word;
}
.stu-ai-msg.u .stu-ai-bubble {
  background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.stu-ai-msg.ai .stu-ai-bubble {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 4px;
}

/* 加载点 */
.stu-ai-dots { display: inline-flex; gap: 4px; align-items: center; }
.stu-ai-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sub); animation: stu-ai-blink 1.2s infinite ease-in-out;
}
.stu-ai-dots i:nth-child(2) { animation-delay: .2s; }
.stu-ai-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes stu-ai-blink {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}

.stu-ai-foot {
  flex-shrink: 0; padding: 10px 12px;
  border-top: 1px solid var(--line); background: var(--card);
}
.stu-ai-quota {
  font-size: 11px; color: var(--sub); margin-bottom: 6px;
  text-align: right;
}
.stu-ai-wxlink {
  display: block; cursor: pointer; color: var(--accent);
  font-weight: 600; text-align: center; padding: 6px 10px;
  border-radius: 8px; background: var(--accent-soft);
  transition: background .15s ease;
}
.stu-ai-wxlink:hover { background: rgba(47, 111, 237, .14); }
.stu-ai-input { display: flex; gap: 8px; align-items: flex-end; }
.stu-ai-input textarea {
  flex: 1; resize: none; border: 1.5px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--ink);
  background: #fafbfe; outline: none;
  transition: border-color .15s ease; max-height: 120px;
}
.stu-ai-input textarea:focus { border-color: var(--accent); background: #fff; }
.stu-ai-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform .1s ease, opacity .15s ease;
}
.stu-ai-send:hover { opacity: .9; }
.stu-ai-send:active { transform: scale(.92); }
.stu-ai-send:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
  .stu-ai-panel { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
  .stu-ai-fab { right: 12px; bottom: 12px; }
}

/* ============================================================
   首页 2026-09-09 改版：Hero(AI 搜索) / 适用人群 / 免费课时卡 / 落地案例
   类名统一 hm- 前缀,与既有 stu- 样式隔离
   ============================================================ */

/* ---------- Hero(通栏横幅,对齐预览稿 2026-09-09c) ---------- */
.hm-hero {
  position: relative; overflow: hidden; text-align: center;
  width: 100vw; margin-left: calc(50% - 50vw);
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 72px 24px 60px;
}
.hm-hero::before {
  content: ""; position: absolute; pointer-events: none;
  width: 680px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,.07), transparent 65%);
  top: -220px; right: -140px;
}
.hm-hero::after {
  content: ""; position: absolute; pointer-events: none;
  width: 420px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,164,.06), transparent 65%);
  bottom: -180px; left: -100px;
}
.hm-hero > * { position: relative; z-index: 1; max-width: 720px; margin-left: auto; margin-right: auto; }
.hm-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #eef2ff; color: #4f46e5; font-size: 13px; font-weight: 700;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 20px;
}
.hm-dot { width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; }
.hm-title {
  font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1.2;
  color: var(--ink); margin: 0 auto 14px; text-align: center;
}
.hm-accent { color: var(--accent); }
.hm-sub { font-size: 16px; color: var(--sub); margin: 0 auto 28px; text-align: center; }
.hm-aibox {
  display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 8px 8px 8px 16px; box-shadow: 0 4px 16px rgba(17,24,39,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hm-aibox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,70,229,.10); }
.hm-aispark {
  color: #fff; display: flex; flex: none;
  width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 4px 12px rgba(79,70,229,.30);
}
.hm-aibox input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14.5px; font-family: inherit; color: var(--ink);
}
.hm-aibox input::placeholder { color: #9ca3af; }
.hm-aibtn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border: none; border-radius: 10px;
  height: 40px; padding: 0 18px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 12px rgba(79,70,229,.30);
  transition: all .18s ease;
}
.hm-aibtn:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(79,70,229,.35);
}
.hm-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px auto 0; max-width: 560px; }
.hm-chip {
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; color: var(--ink2, #374151);
  cursor: pointer; transition: all .18s ease; text-align: center;
}
.hm-chip svg { color: var(--accent); flex: none; }
.hm-chip:hover { border-color: var(--accent); color: var(--accent); background: #eef2ff; }
.hm-meta {
  display: flex; justify-content: center; gap: 44px; margin-top: 36px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.hm-meta-item b {
  display: block; font-size: 22px; font-weight: 800; color: var(--ink);
  letter-spacing: -.5px;
}
.hm-meta-item span { font-size: 13px; color: var(--muted, #9ca3af); }


/* ---------- 免费课时卡 ---------- */
.hm-lesson-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-lesson-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; cursor: pointer; display: flex; flex-direction: column;
  transition: all .22s ease;
}
.hm-lesson-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.hm-lesson-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hm-lesson-num {
  font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1;
  padding: 5px 10px; border-radius: 10px;
}
.hm-lesson-num.ln-indigo { background: #eef2ff; color: #4f46e5; }
.hm-lesson-num.ln-teal { background: #f0fdfa; color: #0d9488; }
.hm-lesson-num.ln-amber { background: #fffbeb; color: #b45309; }
.hm-lesson-num.ln-rose { background: #fff1f2; color: #e11d48; }
.hm-lesson-free {
  margin-left: auto; font-size: 11px; font-weight: 700; color: #059669;
  background: #ecfdf5; border-radius: 999px; padding: 3px 9px;
}
.hm-lesson-video { font-size: 11px; font-weight: 700; color: #b45309; background: #fffbeb; border-radius: 999px; padding: 3px 9px; }
.hm-lesson-card h3 { font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 0 0 8px; }
.hm-lesson-card p {
  font-size: 12.5px; color: var(--sub); line-height: 1.6; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-lesson-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px;
}
.hm-lesson-type { color: var(--muted, #9ca3af); }
.hm-lesson-go { color: var(--accent); font-weight: 700; white-space: nowrap; }
.hm-lesson-card:hover .hm-lesson-go { text-decoration: underline; }

/* ---------- 落地案例 ---------- */
.hm-case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hm-case-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: all .22s ease;
  display: flex; flex-direction: column;
}
.hm-case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(17,24,39,.10)); border-color: transparent; }
.hm-case-cover {
  height: 148px; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.hm-case-cover.cv-indigo { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.hm-case-cover.cv-teal { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); }
.hm-case-cover.cv-amber { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.hm-case-cover.cv-rose { background: linear-gradient(135deg, #fff1f2, #ffe4e6); }
.hm-case-cover.cv-slate { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.hm-case-cover.cv-emerald { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.hm-case-cover.cv-indigo .hm-case-ico { color: #4f46e5; }
.hm-case-cover.cv-teal .hm-case-ico { color: #0d9488; }
.hm-case-cover.cv-amber .hm-case-ico { color: #d97706; }
.hm-case-cover.cv-rose .hm-case-ico { color: #e11d48; }
.hm-case-cover.cv-slate .hm-case-ico { color: #475569; }
.hm-case-cover.cv-emerald .hm-case-ico { color: #059669; }
.hm-case-ico { opacity: .85; }
.hm-case-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}
.hm-case-body { padding: 16px 18px 14px; display: flex; flex-direction: column; flex: 1; }
.hm-case-body h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.hm-case-body p {
  font-size: 12.5px; color: var(--sub); line-height: 1.6; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-case-dev { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hm-case-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #4f46e5, #2563eb); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.hm-case-dev span:last-child { font-size: 12px; color: var(--muted, #9ca3af); }
.hm-case-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  font-size: 12.5px; white-space: nowrap;
}
.hm-case-link {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  text-decoration: none; background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit; transition: opacity .15s;
}
.hm-case-link:hover { text-decoration: underline; opacity: .8; }
.hm-like-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--sub, #6b7280);
  transition: all .18s ease; flex: none; margin-left: auto;
}
.hm-like-btn svg { width: 14px; height: 14px; }
.hm-like-btn:hover { border-color: #fda4af; color: #e11d48; transform: translateY(-1px); }
.hm-like-btn.liked { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }
.hm-like-btn.liked svg { fill: #e11d48; stroke: #e11d48; }
/* CTA:纯居中文字+按钮(无卡片背景,对齐预览稿) */
.hm-case-more {
  margin-top: 34px; display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.hm-case-more p { font-size: 14.5px; color: var(--ink2, #374151); font-weight: 500; margin: 0; }
.hm-case-more .btn { height: 40px; padding: 0 22px; font-size: 14px; border-radius: 10px; }

/* ---------- 关于我（完整名片，2026-09-09 换新卡片样式） ---------- */
.hm-about-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-md); padding: 32px;
}
.hm-about-head { display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.hm-about-ava {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid #eef2ff;
}
.hm-about-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-about-headinfo h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 0 0 4px; }
.hm-about-tagline { color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.hm-about-desc { color: var(--sub); font-size: 14px; line-height: 1.7; margin: 0; }
.hm-about-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px;
}
.hm-about-item {
  display: flex; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #fafbfd;
  transition: all .2s ease;
}
.hm-about-item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.hm-about-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.hm-about-item h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.hm-about-item p { font-size: 12.5px; color: var(--sub); line-height: 1.55; margin: 0; }
.hm-about-qrs {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 24px; justify-content: center;
}
.hm-about-qr { text-align: center; font-size: 12.5px; color: var(--sub); }
.hm-about-qr img {
  width: 88px; height: 88px; object-fit: cover; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fafbfd; margin-bottom: 6px;
  display: block;
}
.hm-about-qr p { margin: 0; }
.hm-about-cta { display: flex; gap: 10px; margin-left: auto; }
.hm-about-cta .btn { height: 40px; padding: 0 20px; font-size: 14px; border-radius: 10px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .hm-lesson-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-case-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-about-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .hm-hero { padding: 36px 18px 30px; }
  .hm-title { font-size: 28px; }
  .hm-sub { font-size: 14.5px; margin-bottom: 22px; }
  .hm-aibox { flex-wrap: wrap; padding: 10px; }
  .hm-aibox input { width: 100%; flex-basis: 100%; padding: 6px 4px; }
  .hm-aibtn { width: 100%; justify-content: center; }
  .hm-meta { gap: 20px; flex-wrap: wrap; }
  .hm-meta-item { flex: 0 0 40%; }
  .hm-lesson-grid, .hm-case-grid, .hm-about-grid { grid-template-columns: 1fr; }
  .hm-about-card { padding: 24px 18px; }
  .hm-about-head { flex-direction: column; text-align: center; }
  .hm-about-cta { margin-left: 0; width: 100%; justify-content: center; }
  .hm-about-cta .btn { flex: 1; }
  .hm-about-qrs { gap: 16px; }
  .hm-about-qr img { width: 72px; height: 72px; }
}

/* ============================================================
   2026-09-09c:通栏横幅 / 工作坊课程卡 / 服务横条 / 案例浏览器窗型封面
   视觉对齐:index-新版预览-学习平台.html
   ============================================================ */

/* Hero 顶到导航栏下沿(吃掉 stu-main 顶部 padding) */
.hm-hero { margin: -20px 0 0 calc(50% - 50vw); }

/* ---------- 通栏横幅(交替背景色) ---------- */
.hm-band {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 56px 0;
}
.hm-band-gray {
  background: #f8f9fb;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hm-band-first {
  padding-top: 72px;
}
.hm-band-inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* 通栏 band 不要 stu-section 默认的 36px 底距:那会露出页面底色(#f4f6fb),
   在相邻白/灰通栏之间形成一条灰带(2026-09-11 修)。通栏之间只靠 1px 分隔线 */
.stu-section.hm-band { margin-bottom: 0; }
.hm-hero + .hm-band,
.hm-band + .hm-band { border-top: none; }
/* 通栏与普通(非通栏)板块衔接时,用 margin 补回呼吸距离 */
#stuPreviewWrap { margin-top: 44px; }
#stuAbout { margin-top: 48px; }

/* ---------- 主题工作坊:课程卡(渐变封面 + 白底图标盒 + 徽章) ---------- */
.hm-ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hm-ws-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: all .25s ease;
}
.hm-ws-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.hm-ws-cover {
  aspect-ratio: 16/9; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hm-ws-cover.cv-slate { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.hm-ws-cover.cv-emerald { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.hm-ws-cover.cv-rose { background: linear-gradient(135deg, #fff1f2, #ffe4e6); }
.hm-ws-cover.cv-slate .hm-ws-ico { color: #475569; }
.hm-ws-cover.cv-emerald .hm-ws-ico { color: #059669; }
.hm-ws-cover.cv-rose .hm-ws-ico { color: #e11d48; }
.hm-ws-ico {
  width: 56px; height: 56px; border-radius: 15px; flex: none;
  background: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.hm-ws-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(15,23,42,.72); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.hm-ws-badge.free { background: #fff; color: var(--accent); font-weight: 700; }
.hm-ws-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.hm-ws-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.hm-ctag {
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
}
.hm-ctag.warn { background: #fffbeb; color: #b45309; }
.hm-ctag.teal { background: #f0fdfa; color: #0d9488; }
.hm-ws-body h3 {
  font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.45;
  margin: 0 0 8px; min-height: 46px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-ws-desc {
  font-size: 13.5px; color: var(--sub); line-height: 1.6; margin: 0 0 16px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-ws-teacher { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2, #374151); margin-bottom: 14px; }
.hm-ws-ava {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.hm-ws-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.hm-ws-meta { font-size: 12.5px; color: var(--muted, #9ca3af); min-width: 0; }
.hm-ws-price { font-size: 13px; font-weight: 700; color: var(--ink2, #374151); white-space: nowrap; flex: none; }
.hm-ws-price.warn { color: #b45309; }

/* ---------- 深度服务:横条列表 ---------- */
.hm-svc-list { display: flex; flex-direction: column; gap: 12px; }
.hm-svc-item {
  display: flex; align-items: center; gap: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 26px; cursor: pointer; transition: all .24s ease;
}
.hm-svc-item:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateX(4px); }
.hm-svc-ico {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.hm-svc-ico.i1 { background: var(--accent-soft); color: var(--accent); }
.hm-svc-ico.i2 { background: #fff7ed; color: #ea580c; }
.hm-svc-ico.i3 { background: #f0fdfa; color: #0d9488; }
.hm-svc-main { flex: 1; min-width: 0; }
.hm-svc-main h3 {
  font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hm-svc-main p { font-size: 13.5px; color: var(--sub); line-height: 1.55; margin: 0; }
.hm-svc-price { font-size: 14px; font-weight: 700; color: var(--ink2, #374151); white-space: nowrap; flex: none; }
.hm-svc-arrow { color: var(--muted, #9ca3af); font-size: 20px; flex: none; transition: all .2s; }
.hm-svc-item:hover .hm-svc-arrow { color: var(--accent); transform: translateX(3px); }

/* ---------- 案例:浏览器窗型封面 ---------- */
.hm-mock {
  width: 82%; max-width: 260px; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
  overflow: hidden; border: 1px solid rgba(15,23,42,.05);
}
.hm-mock-bar {
  display: flex; gap: 5px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: #fafbfd;
}
.hm-mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; display: block; }
.hm-mock-bar i:first-child { background: #fca5a5; }
.hm-mock-ico { height: 74px; display: flex; align-items: center; justify-content: center; }
/* 案例 tag:实心底色与封面色系一致 */
.hm-case-cover.cv-indigo .hm-case-tag { background: #eef2ff; color: #4f46e5; }
.hm-case-cover.cv-teal .hm-case-tag { background: #f0fdfa; color: #0d9488; }
.hm-case-cover.cv-amber .hm-case-tag { background: #fffbeb; color: #b45309; }
.hm-case-cover.cv-rose .hm-case-tag { background: #fff1f2; color: #e11d48; }
.hm-case-cover.cv-slate .hm-case-tag { background: #f1f5f9; color: #475569; }
.hm-case-cover.cv-emerald .hm-case-tag { background: #ecfdf5; color: #059669; }
/* 开发者信息:头像 + 名字 + 域名两行 */
.hm-case-devmeta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.hm-case-devmeta b { font-size: 13px; font-weight: 700; color: var(--ink); }
.hm-case-dev .hm-case-devmeta span {
  font-size: 11.5px; color: var(--muted, #9ca3af);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 2026-09-09c 响应式 ---------- */
@media (max-width: 1023px) {
  .hm-ws-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .hm-hero { padding: 48px 18px 40px; }
  .hm-band { padding: 40px 0; }
  .hm-ws-grid { grid-template-columns: 1fr; }
  .hm-svc-item { flex-wrap: wrap; padding: 18px 20px; }
  .hm-svc-arrow { display: none; }
  .hm-case-more { flex-direction: column; gap: 10px; }
}

/* ---------- 2026-09-09f 适用人群:人群卡(上) + 方式卡(下) ---------- */
/* 整段压一屏:收紧通栏上下留白(2026-09-11) */
#stuPath { padding-top: 52px; padding-bottom: 44px; }
/* 人群卡片行:纵向卡片,带痛点/场景说明 + 路径解说 */
.hm-ps-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 16px;
}
.hm-ps-card {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: inherit;
  padding: 18px 18px 14px; border-radius: 14px; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(17,24,39,.04);
  cursor: pointer; transition: all .18s ease;
}
.hm-ps-card:hover {
  border-color: #c7d2fe; background: #f5f3ff; transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(79,70,229,.08);
}
.hm-ps-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hm-ps-name { font-size: 15.5px; font-weight: 700; }
.hm-ps-focus { font-size: 12.5px; color: var(--muted, #9ca3af); margin-top: 2px; }
.hm-ps-desc {
  font-size: 12px; color: var(--sub, #6b7280); line-height: 1.65;
  margin: 10px 0 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-ps-path {
  font-size: 11.5px; color: var(--muted, #9ca3af); margin-top: 10px; line-height: 1.6;
}
.hm-ps-go {
  margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent, #4f46e5);
}

/* 人群配色 */
.hm-ps-card.c1 .hm-ps-ico { background: #ffedd5; color: #ea580c; }
.hm-ps-card.c2 .hm-ps-ico { background: #ccfbf1; color: #0d9488; }
.hm-ps-card.c3 .hm-ps-ico { background: #e0e7ff; color: #4f46e5; }
.hm-ps-card.c1 .hm-ps-name { color: #ea580c; }
.hm-ps-card.c2 .hm-ps-name { color: #0d9488; }
.hm-ps-card.c3 .hm-ps-name { color: #4f46e5; }

/* 方式卡片网格:一行 6 个紧凑卡(2026-09-11 由 3x2 改 1x6) */
.hm-mode-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.hm-mode-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 8px 10px; text-align: center; cursor: pointer;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.hm-mode-card:hover {
  box-shadow: 0 6px 20px rgba(79,70,229,.10); transform: translateY(-2px);
  border-color: #c7d2fe;
}
.hm-mode-num {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; background: var(--accent, #4f46e5);
  color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(79,70,229,.35);
}
.hm-mode-ico {
  width: 34px; height: 34px; margin: 2px auto 7px;
  border-radius: 10px; background: #eef2ff; color: #4f46e5;
  display: flex; align-items: center; justify-content: center;
}
.hm-mode-name { display: block; font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.hm-mode-desc {
  display: block; font-size: 10.5px; color: var(--muted, #9ca3af);
  margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 响应式 */
@media (max-width: 760px) {
  .hm-ps-row { grid-template-columns: 1fr; }
  .hm-mode-grid { grid-template-columns: repeat(3, 1fr); }
}