/* ============================================
   知识付费系统 - 响应式样式
   移动优先设计，适配微信H5和PC端
   ============================================ */

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #eef2ff;
  --accent: #f59e0b;
  --danger: #ef4444;
  --success: #10b981;
  --bg: #f5f6fa;
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
  --nav-height: 56px;
  --tabbar-height: 56px;
  --content-max: 1200px; /* 桌面端内容统一最大宽度（导航与正文据此对齐） */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.6;
  padding-bottom: calc(var(--tabbar-height) + 16px); /* 移动端给底部导航留空 */
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ============ 顶部导航（移动端） ============ */
.nav-mobile {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.nav-mobile .logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-mobile .logo .logo-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800;
}

/* 站点 Logo 图片（后台可上传替换） */
.logo { display: flex; align-items: center; gap: 8px; }
.logo .logo-img {
  height: 28px; width: auto; max-width: 120px;
  object-fit: contain; border-radius: 6px; display: block;
}
.logo .logo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 页脚（动态渲染自站点设置） */
.page-footer { line-height: 1.8; }
.page-footer .footer-slogan { font-weight: 600; color: var(--text-secondary); font-size: 13px; }
.page-footer .footer-copy { opacity: .6; }
.page-footer a.footer-icp { color: var(--text-muted); text-decoration: none; opacity: .6; }
.page-footer a.footer-icp:hover { color: var(--primary); opacity: 1; }

.nav-mobile .search-trigger {
  flex: 1;
  max-width: 200px;
  margin: 0 12px;
  background: var(--bg);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .icon-btn { font-size: 18px; color: var(--text-secondary); position: relative; }
.nav-actions .avatar-mini {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}

/* ============ PC顶部导航 ============ */
.nav-pc { display: none; }

/* ============ 底部TabBar（移动端） ============ */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card-bg);
  display: flex;
  border-top: 1px solid var(--border);
  z-index: 100;
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
  transition: color .2s;
}

.tabbar a .tab-icon { font-size: 20px; line-height: 1; }
.tabbar a.active { color: var(--primary); font-weight: 600; }

/* ============ 主内容区 ============ */
.page { padding-top: var(--nav-height); max-width: 100%; }

.container { padding: 12px 16px; }

/* ============ 轮播Banner ============ */
.banner {
  margin: 12px 16px 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  color: #fff;
  padding: 28px 20px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}

.banner::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.banner::before {
  content: '';
  position: absolute;
  right: 30px; bottom: -40px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.banner h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; position: relative; z-index: 1; }
.banner p { font-size: 13px; opacity: .9; position: relative; z-index: 1; }
.banner .banner-btn {
  position: absolute;
  right: 20px; bottom: 20px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  z-index: 1;
}

/* ============ 分类导航 ============ */
.category-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 16px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-nav::-webkit-scrollbar { display: none; }

.category-nav .cat-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--card-bg);
  font-size: 13px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all .2s;
}

.category-nav .cat-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ============ 区块标题 ============ */
.section { margin-top: 20px; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-title::before {
  content: '';
  width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--primary), #8b5cf6);
  border-radius: 2px;
}

.section-more { font-size: 13px; color: var(--text-muted); }

/* ============ 课程卡片 ============ */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 16px;
}

.course-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}

.course-card:active { transform: scale(.98); }

.course-card .card-cover {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
  overflow: hidden;
}

.card-cover.cover-0 { background: linear-gradient(135deg, #667eea, #764ba2); }
.card-cover.cover-1 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.card-cover.cover-2 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.card-cover.cover-3 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.card-cover.cover-4 { background: linear-gradient(135deg, #fa709a, #fee140); }
.card-cover.cover-5 { background: linear-gradient(135deg, #30cfd0, #330867); }
.card-cover.cover-6 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.card-cover.cover-7 { background: linear-gradient(135deg, #ff9a9e, #fecfef); }

/* 上传封面图：铺满封面容器，类型/免费角标浮在图片上方 */
.card-cover .cover-img,
.rank-cover .cover-img,
.pc-cover .cover-img,
.mc-cover .cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rank-cover, .pc-cover, .mc-cover { position: relative; overflow: hidden; }

.course-card .card-cover .type-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.course-card .card-cover .free-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--success);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.course-card .card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }

.course-card .card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.course-card .card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.course-card .card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: auto;
}

.course-card .card-meta .rating { color: var(--accent); }

.course-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid var(--bg);
}

.course-card .price { color: var(--danger); font-weight: 700; font-size: 17px; }
.course-card .price .symbol { font-size: 12px; }
.course-card .price .original { color: var(--text-muted); font-size: 12px; font-weight: 400; text-decoration: line-through; margin-left: 4px; }
.course-card .price.free { color: var(--success); font-size: 14px; }
.course-card .students { font-size: 12px; color: var(--text-muted); }

/* 排行榜卡片样式 */
.course-card.rank-card { flex-direction: row; align-items: center; padding: 12px; gap: 12px; }

.rank-card .rank-num {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  background: var(--bg);
  color: var(--text-muted);
  flex-shrink: 0;
}
.rank-card .rank-num.r1 { background: #fef3c7; color: #d97706; }
.rank-card .rank-num.r2 { background: #e2e8f0; color: #64748b; }
.rank-card .rank-num.r3 { background: #fee2e2; color: #dc2626; }

.rank-card .rank-cover {
  width: 72px; height: 54px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}

.rank-card .rank-info { flex: 1; min-width: 0; }
.rank-card .rank-info .card-title { font-size: 14px; margin-bottom: 4px; }
.rank-card .rank-info .rank-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; }

/* ============ 讲师卡片 ============ */
.teacher-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 16px 8px;
  scrollbar-width: none;
}
.teacher-scroll::-webkit-scrollbar { display: none; }

.teacher-card {
  flex-shrink: 0;
  width: 120px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow);
}

.teacher-card .t-avatar {
  width: 56px; height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}

.teacher-card .t-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.teacher-card .t-title { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teacher-card .t-followers { font-size: 11px; color: var(--primary); }

/* ============ 通用按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  transition: all .2s;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.btn-primary:active { transform: scale(.97); }

.btn-outline {
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-ghost { background: var(--bg); color: var(--text-secondary); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============ 表单 ============ */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}

.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--card-bg);
  transition: border-color .2s;
  outline: none;
}

.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

.form-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 6px;
  display: none;
}
.form-error.show { display: block; }

/* ============ 登录/注册页 ============ */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%);
}

.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo .logo-big {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(99,102,241,.35);
}

.auth-logo h1 { font-size: 22px; font-weight: 700; }
.auth-logo p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.auth-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}

.auth-card .form-input { margin-bottom: 4px; }

.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-switch a { color: var(--primary); font-weight: 600; }

.auth-quick {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.auth-quick .quick-icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}

.auth-quick .quick-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow);
}

/* ============ 课程详情页 ============ */
.detail-hero { 
  background: linear-gradient(135deg, #312e81, #6366f1 60%, #8b5cf6);
  color: #fff;
  padding: 20px 16px 24px;
  position: relative;
  overflow: hidden;
}

/* 详情页顶部封面大图 + 无封面时的半透明遮罩保证文字可读 */
.detail-hero .d-cover {
  display: none;
}

/* 上传了封面时：封面图与标题信息上下分离，避免标题文字叠在封面图上 */
.detail-hero.has-cover {
  background: var(--card-bg);
  color: var(--text-main);
  padding: 0 0 20px;
}
.detail-hero.has-cover .d-cover {
  display: block;
  position: static;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 16px;
}
.detail-hero.has-cover::before { display: none; }
.detail-hero.has-cover .d-info {
  padding: 0 16px;
  position: relative;
}
.detail-hero.has-cover h1 { color: var(--text-main); }
.detail-hero.has-cover .d-type,
.detail-hero.has-cover .d-subtitle { color: var(--text-secondary); }
.detail-hero.has-cover .d-stats { color: var(--text-secondary); opacity: 1; }
.detail-hero.has-cover > *:not(.d-cover) { position: static; }

.detail-hero .d-type { font-size: 12px; opacity: .8; margin-bottom: 6px; }
.detail-hero h1 { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.detail-hero .d-subtitle { font-size: 13px; opacity: .85; margin-bottom: 16px; }
.detail-hero .d-stats { display: flex; gap: 16px; font-size: 13px; opacity: .9; }

.detail-price-bar {
  background: var(--card-bg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
}

.detail-price-bar .price-now { color: var(--danger); font-size: 24px; font-weight: 800; }
.detail-price-bar .price-now .symbol { font-size: 14px; }
.detail-price-bar .price-now .original { font-size: 13px; color: var(--text-muted); font-weight: 400; text-decoration: line-through; margin-left: 6px; }
.detail-price-bar .price-now.free { color: var(--success); }

.detail-price-bar .buy-btn {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 32px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(239,68,68,.35);
}

.detail-tabs {
  display: flex;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(var(--nav-height) + 60px);
  z-index: 40;
  overflow-x: auto;
}

.detail-tabs button {
  flex: 1;
  min-width: 80px;
  padding: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  white-space: nowrap;
}

.detail-tabs button.active { color: var(--primary); font-weight: 700; }
.detail-tabs button.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.tab-panel { display: none; padding: 16px; }
.tab-panel.active { display: block; }

/* 章节列表 */
.chapter-list { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

.chapter-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg);
  gap: 12px;
}

.chapter-item:last-child { border-bottom: none; }
.chapter-item:active { background: var(--bg); }

.chapter-item .ch-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.chapter-item.locked .ch-icon { background: var(--bg); color: var(--text-muted); }

.chapter-item .ch-info { flex: 1; min-width: 0; }
.chapter-item .ch-title { font-size: 14px; font-weight: 500; }
.chapter-item.locked .ch-title { color: var(--text-muted); }
.chapter-item .ch-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.chapter-item .ch-lock { font-size: 14px; color: var(--text-muted); }
.chapter-item .ch-free-tag {
  font-size: 11px;
  color: var(--success);
  background: #ecfdf5;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 讲师信息块 */
.teacher-block {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 14px;
}

.teacher-block .tb-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  flex-shrink: 0;
}

.teacher-block .tb-info h3 { font-size: 16px; font-weight: 700; }
.teacher-block .tb-info .tb-title { font-size: 12px; color: var(--primary); margin: 2px 0 8px; }
.teacher-block .tb-info .tb-bio { font-size: 13px; color: var(--text-secondary); }

/* 评价 */
.review-item {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}

.review-item .rv-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-item .rv-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.review-item .rv-name { font-size: 14px; font-weight: 600; }
.review-item .rv-stars { color: var(--accent); font-size: 12px; margin-left: auto; }
.review-item .rv-content { font-size: 14px; color: var(--text-secondary); }
.review-item .rv-time { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ============ 学习页 ============ */
.learn-player {
  background: #0f172a;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 8px;
  padding: 30px 20px;
}

.learn-player .player-icon { font-size: 48px; }
.learn-player .player-title { font-size: 15px; opacity: .9; text-align: center; }
.learn-player .player-hint { font-size: 12px; opacity: .5; }

.learn-video-area {
  background: #000;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-direction: column;
  gap: 8px;
}

.chapter-nav-btns {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 10px;
}

.chapter-nav-btns .btn { flex: 1; font-size: 13px; padding: 10px 8px; }

/* 文章内容 */
.article-content {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-main);
}

.article-content h1 { font-size: 20px; margin-bottom: 14px; }
.article-content h2 { font-size: 17px; margin: 18px 0 10px; }
.article-content p { margin-bottom: 12px; color: var(--text-secondary); }

/* ============ 支付页 ============ */
.pay-page { padding: 20px 16px; }

.pay-course-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.pay-course-card .pc-cover {
  width: 80px; height: 60px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px;
  flex-shrink: 0;
}

.pay-course-card .pc-info h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.pay-course-card .pc-info .pc-teacher { font-size: 12px; color: var(--text-muted); }

.pay-methods {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 6px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.pay-method {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--bg);
  gap: 12px;
  cursor: pointer;
}

.pay-method:last-child { border-bottom: none; }
.pay-method .pm-icon { font-size: 24px; }
.pay-method .pm-name { flex: 1; font-size: 15px; font-weight: 500; }
.pay-method .pm-desc { font-size: 12px; color: var(--text-muted); margin-right: 8px; }
.pay-method .pm-radio {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.pay-method.selected .pm-radio { border-color: var(--primary); }
.pay-method.selected .pm-radio::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

.pay-summary {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.pay-summary .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.pay-summary .row.total { font-size: 16px; font-weight: 700; color: var(--text-main); margin-top: 10px; }
.pay-summary .row.total .amount { color: var(--danger); font-size: 22px; }

/* 支付成功 */
.pay-success { text-align: center; padding: 60px 24px; }
.pay-success .success-icon {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  background: #ecfdf5;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.pay-success h2 { font-size: 22px; margin-bottom: 8px; }
.pay-success p { color: var(--text-muted); font-size: 14px; margin-bottom: 30px; }
.pay-success .btn-group { display: flex; gap: 12px; justify-content: center; }

/* ============ 用户中心 ============ */
.user-header {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: 30px 20px 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-header .uh-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}

.user-header .uh-info h2 { font-size: 20px; font-weight: 700; }
.user-header .uh-info p { font-size: 13px; opacity: .85; margin-top: 2px; }
.user-header .uh-login-btn { color: #fff; font-weight: 600; font-size: 15px; }

.user-stats {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  margin: -40px 16px 0;
  display: flex;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 10;
}

.user-stats .stat { flex: 1; text-align: center; }
.user-stats .stat .num { font-size: 20px; font-weight: 800; color: var(--text-main); }
.user-stats .stat .label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* 学习记录卡片 */
.mycourse-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.mycourse-card .mc-cover {
  width: 72px; height: 54px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}

.mycourse-card .mc-info { flex: 1; min-width: 0; }
.mycourse-card .mc-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.mycourse-card .mc-progress { font-size: 12px; color: var(--text-muted); }

.progress-bar {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  border-radius: 2px;
}

/* 订单卡片 */
.order-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}

.order-card .oc-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.order-card .oc-status { font-weight: 600; }
.order-card .oc-status.paid { color: var(--success); }
.order-card .oc-status.pending { color: var(--accent); }

.order-card .oc-body { display: flex; gap: 10px; align-items: center; }
.order-card .oc-title { font-size: 14px; font-weight: 600; flex: 1; }
.order-card .oc-amount { color: var(--danger); font-weight: 700; }

/* ============ 搜索页 ============ */
.search-bar {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card-bg);
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
}

.search-bar input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: var(--bg);
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}

.search-bar .cancel-btn { color: var(--text-secondary); font-size: 14px; }

.hot-keywords { padding: 20px 16px; }
.hot-keywords h3 { font-size: 15px; margin-bottom: 12px; }
.hot-keywords .kw-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-keywords .kw {
  padding: 6px 14px;
  background: var(--card-bg);
  border-radius: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  box-shadow: var(--shadow);
}

/* 排序栏 */
.sort-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sort-bar::-webkit-scrollbar { display: none; }
.sort-bar .sort-item {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 14px;
}
.sort-bar .sort-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* 列表模式横幅（首页板块"查看全部"进入时） */
.list-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 16px 0;
  padding: 10px 14px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
.list-banner .banner-clear {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
}
.load-more-btn {
  padding: 8px 28px;
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-light);
  border: none;
  border-radius: 18px;
  cursor: pointer;
}
.load-more-btn:active { opacity: 0.7; }

/* ============ 管理后台 ============ */
.admin-layout { padding-top: var(--nav-height); }

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.stat-card .sc-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.stat-card .sc-num { font-size: 22px; font-weight: 800; }
.stat-card .sc-label { font-size: 12px; color: var(--text-muted); }

.admin-tabs {
  display: flex;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  overflow-x: auto;
}

.admin-tabs button {
  flex-shrink: 0;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
}

.admin-tabs button.active { color: var(--primary); font-weight: 700; }
.admin-tabs button.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

/* 表格（PC端） */
.admin-table-wrap { overflow-x: auto; padding: 16px; }

.admin-table {
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-collapse: collapse;
  min-width: 600px;
  font-size: 14px;
}

.admin-table th, .admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bg);
}

.admin-table th { font-weight: 600; color: var(--text-secondary); font-size: 13px; background: #fafbfc; }
.admin-table tr:last-child td { border-bottom: none; }

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.status-badge.published { background: #ecfdf5; color: var(--success); }
.status-badge.draft { background: #fef3c7; color: #d97706; }
.status-badge.offline { background: #f1f5f9; color: var(--text-muted); }
.status-badge.paid { background: #ecfdf5; color: var(--success); }
.status-badge.pending { background: #fef3c7; color: #d97706; }
.status-badge.cancelled { background: #f1f5f9; color: var(--text-muted); }

/* 模态框 */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.modal-mask.show { display: flex; }

.modal-sheet {
  background: var(--card-bg);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  animation: slideUp .25s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-sheet .ms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-sheet .ms-header h3 { font-size: 17px; }
.modal-sheet .ms-close { font-size: 20px; color: var(--text-muted); }

/* ============ 空状态 ============ */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}

.empty-state .es-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: 14px; }
.empty-state .btn { margin-top: 16px; }

/* ============ Toast ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  max-width: 80vw;
}

.toast.show { opacity: 1; }

/* ============ 加载动画 ============ */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.loading-spinner .spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 分页 ============ */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}

.pagination button {
  min-width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 14px;
  box-shadow: var(--shadow);
}

.pagination button.active { background: var(--primary); color: #fff; }
.pagination button[disabled] { opacity: .4; }

/* ==================================================
   PC端适配（>= 768px）
   ================================================== */
@media (min-width: 768px) {
  body { padding-bottom: 40px; font-size: 15px; }

  /* 隐藏移动导航和TabBar，显示PC导航 */
  .nav-mobile, .tabbar { display: none; }
  .page { padding-top: 0; }

  .nav-pc {
    display: flex;
    position: sticky;
    top: 0;
    height: 64px;
    background: var(--card-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    align-items: center;
    /* 让导航内容与下方正文（居中 max-width）左右对齐：两端留白 = (100% - 内容宽)/2 */
    padding: 0 max(0px, calc((100% - var(--content-max)) / 2));
    gap: 32px;
    z-index: 100;
  }

  .nav-pc .logo {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav-pc .logo .logo-icon {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; font-weight: 800;
  }
  .nav-pc .logo .logo-img { height: 34px; max-width: 150px; border-radius: 8px; }

  .nav-pc .nav-links { display: flex; gap: 28px; }
  .nav-pc .nav-links a { font-size: 15px; color: var(--text-secondary); font-weight: 500; }
  .nav-pc .nav-links a.active, .nav-pc .nav-links a:hover { color: var(--primary); font-weight: 600; }

  .nav-pc .nav-search {
    flex: 1;
    max-width: 380px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border-radius: 22px;
    padding: 9px 18px;
  }

  .nav-pc .nav-search input { border: none; background: none; outline: none; flex: 1; font-size: 14px; }

  .nav-pc .nav-user { display: flex; align-items: center; gap: 14px; }
  .nav-pc .nav-user .login-link { color: var(--primary); font-weight: 600; font-size: 15px; }
  .nav-pc .nav-user .avatar-mini {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
  }

  /* 内容最大宽度居中 */
  .container { max-width: var(--content-max); margin: 0 auto; padding: 20px 40px; }
  .banner { max-width: var(--content-max); margin: 20px auto 0; padding: 40px 36px; min-height: 180px; }
  .banner h2 { font-size: 28px; }
  .banner p { font-size: 15px; }
  .banner .banner-btn { padding: 8px 20px; font-size: 14px; bottom: 28px; right: 32px; }

  .category-nav { max-width: var(--content-max); margin: 0 auto; }
  .section { margin-top: 32px; }
  .section-header { max-width: var(--content-max); margin: 0 auto 14px; padding: 0; }

  /* PC多列网格 */
  .course-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: var(--content-max); margin: 0 auto; padding: 0; }

  .course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .course-card .card-cover { height: 170px; }

  .teacher-scroll { max-width: var(--content-max); margin: 0 auto; }
  .teacher-card { width: 150px; }

  /* 详情页PC布局 */
  .detail-hero { padding: 40px; }
  .detail-hero.has-cover { padding: 0 0 28px; }
  .detail-hero.has-cover .d-cover { border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 24px; }
  .detail-hero.has-cover .d-info { padding: 0 40px; }
  .detail-hero h1 { font-size: 26px; max-width: 800px; }

  .detail-wrap { max-width: var(--content-max); margin: 0 auto; }
  .detail-price-bar { max-width: var(--content-max); margin: -20px auto 0; border-radius: var(--radius); position: static; }
  .detail-tabs { max-width: var(--content-max); margin: 20px auto 0; border-radius: var(--radius) var(--radius) 0 0; }
  .tab-panel-wrap { max-width: var(--content-max); margin: 0 auto; }

  /* 用户中心 */
  .user-header { padding: 48px 40px 80px; }
  .user-header .uh-avatar { width: 80px; height: 80px; font-size: 32px; }
  .user-stats { max-width: var(--content-max); margin: -50px auto 0; }
  .user-content { max-width: var(--content-max); margin: 0 auto; padding: 0 16px 40px; }

  /* 登录页 */
  .auth-page { align-items: center; }
  .auth-card { width: 420px; padding: 32px; }
  .auth-logo { margin-bottom: 40px; }

  /* 支付页 */
  .pay-page { max-width: 560px; margin: 0 auto; }

  /* 学习页 */
  .learn-video-area { max-height: 500px; }
  .learn-content-wrap { max-width: var(--content-max); margin: 0 auto; }

  /* 管理后台 */
  .admin-stats-grid { grid-template-columns: repeat(4, 1fr); max-width: var(--content-max); margin: 0 auto; }
  .admin-table-wrap { max-width: var(--content-max); margin: 0 auto; }

  .admin-tabs { max-width: var(--content-max); margin: 0 auto; }

  /* 模态框PC居中 */
  .modal-mask { align-items: center; }
  .modal-sheet { border-radius: var(--radius); width: 560px; animation: fadeUp .25s ease; }

  @keyframes fadeUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* 超宽屏 */
@media (min-width: 1400px) {
  .course-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============ 微信H5特殊处理 ============ */
/* 防止iOS微信输入框聚焦页面放大 */
@media (max-width: 768px) {
  input.form-input, input[type="text"], input[type="password"], input[type="tel"] { font-size: 16px !important; }
  .search-bar input { font-size: 16px; }
}

/* ===== 微信支付/登录扩展 ===== */
.btn-wechat {
  width: 100%;
  background: #07C160;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.btn-wechat:active { opacity: .85; }

.qr-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qr-box {
  background: var(--bg-card, #fff);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.qr-box h3 { font-size: 17px; margin-bottom: 14px; }
.qr-amount { font-size: 26px; font-weight: 700; color: var(--danger, #e64340); margin: 10px 0 4px; }
.qr-tip { font-size: 13px; color: var(--text-muted, #999); line-height: 1.6; }
.qr-status { font-size: 13px; color: var(--text-secondary, #666); margin: 12px 0 16px; }
.qr-status .dots::after {
  content: '';
  animation: dots 1.5s steps(4) infinite;
}
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ===== 首页课程分类区块 ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px;
}
.cat-grid.cat-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cat-grid.cat-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-grid.cat-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-grid.cat-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-grid.cat-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cat-grid.cat-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cat-cell {
  background: var(--card-bg);
  border: 1px solid var(--border, #eef0f4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition: transform .15s, box-shadow .15s;
}
.cat-cell:active { transform: scale(.97); }
.cat-cell-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.cat-cell-icon img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.cat-cell-icon .cat-emoji { font-size: 28px; line-height: 1.2; }
.cat-cell-name { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.3; }
@media (max-width: 380px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) {
  .cat-grid { max-width: var(--content-max); margin: 0 auto; padding: 0; gap: 16px; }
  .cat-cell { padding: 18px 14px; }
  .cat-cell-icon, .cat-cell-icon img { width: 56px; height: 56px; }
  .cat-cell-icon .cat-emoji { font-size: 32px; }
  .cat-cell-name { font-size: 14px; }
}

/* ===== 首页排行榜列表 ===== */
.hot-list { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) {
  .hot-list { max-width: var(--content-max); margin: 0 auto; padding: 0; gap: 12px; }
}

/* ===== 页脚居中（PC） ===== */
@media (min-width: 768px) {
  .page-footer { max-width: var(--content-max); margin: 0 auto; padding: 24px 0; }
}

/* ===== 后台站点设置：首页课程列数（PC端） ===== */
@media (min-width: 1024px) {
  .course-grid.home-grid.cols-1 { grid-template-columns: minmax(0, 560px) !important; justify-content: center; }
  .course-grid.home-grid.cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .course-grid.home-grid.cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ===== 后台站点设置：课程列数（公众号/手机端，小于1024px 生效） ===== */
@media (max-width: 1023px) {
  .course-grid.cols-m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .course-grid.cols-m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

  /* 两列：卡片适度紧凑 */
  .course-grid.cols-m-2 .card-cover { height: 96px; font-size: 26px; }
  .course-grid.cols-m-2 .card-body { padding: 9px 10px; }
  .course-grid.cols-m-2 .card-title { font-size: 13px; }
  .course-grid.cols-m-2 .card-subtitle { font-size: 11px; -webkit-line-clamp: 1; }
  .course-grid.cols-m-2 .card-meta { font-size: 11px; }
  .course-grid.cols-m-2 .card-footer { padding: 8px 10px; }

  /* 三列：卡片更紧凑，隐藏次要信息 */
  .course-grid.cols-m-3 .card-cover { height: 74px; font-size: 20px; }
  .course-grid.cols-m-3 .card-body { padding: 7px 8px; }
  .course-grid.cols-m-3 .card-title { font-size: 12px; }
  .course-grid.cols-m-3 .card-subtitle,
  .course-grid.cols-m-3 .card-meta { display: none; }
  .course-grid.cols-m-3 .card-footer { padding: 6px 8px; font-size: 12px; }
  .course-grid.cols-m-3 .card-footer .students { display: none; }
}

/* ============ 网盘链接卡片 ============ */
.pan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 16px;
}
.pan-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.pan-info { flex: 1; min-width: 0; }
.pan-title { font-size: 15px; font-weight: 700; color: #312e81; }
.pan-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pan-btn {
  flex: none;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}
.pan-btn:active { transform: translateY(1px); }
.pan-card.pan-locked {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.pan-card.pan-locked .pan-title { color: var(--text-muted); }
.pan-btn.pan-btn-locked {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
  cursor: pointer;
}
.pan-btn.pan-btn-locked:active { background: var(--primary-light); }

/* 学习页内的网盘卡片宽度适配 */
.learn-content-wrap .pan-card { margin: 12px 16px 4px; }

/* ===== 首页板块排序（后台）===== */
.hs-row { display:flex; align-items:stretch; gap:10px; padding:10px 12px; border:1px solid var(--border, #ececf3); border-radius:10px; margin-bottom:10px; background:#fff; }
.hs-handle { display:flex; align-items:center; color:var(--text-muted, #999); font-size:18px; cursor:grab; user-select:none; }
.hs-body { flex:1; min-width:0; }
.hs-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hs-top .hs-title { flex:1; min-width:120px; }
.hs-enable { display:flex; align-items:center; }
.hs-limit-label { font-size:12px; color:var(--text-muted, #999); white-space:nowrap; }
.hs-limit { width:64px !important; }
.hs-actions { display:flex; gap:6px; }
.hs-actions .btn-sm { padding:4px 11px; font-size:13px; }
.hs-cats { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.hs-cat { display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border:1px solid var(--border, #ececf3); border-radius:999px; font-size:13px; cursor:pointer; background:#fafafe; color:var(--text-secondary, #444); }
.hs-cat.on { border-color:var(--primary, #6d5efc); color:var(--primary, #6d5efc); background:rgba(109,94,252,.08); }
.hs-hint { font-size:12px; color:var(--text-muted, #999); margin-top:6px; }


/* ============================================
   VIP 会员中心 - 高级感 UI（紧凑版）
   ============================================ */

/* ── Hero 主视觉 ── */
.vip-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin: 0 0 4px;
  padding: 22px 18px 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 35%, #0f3460 100%);
  box-shadow: 0 10px 26px -10px rgba(15, 52, 96, .45);
}
.vip-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(245, 158, 11, .35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, .35) 0%, transparent 55%);
  pointer-events: none;
}
.vip-hero-rays {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 0deg at 50% -20%,
      transparent 0deg, rgba(255,255,255,.06) 12deg, transparent 24deg,
      transparent 60deg, rgba(255,255,255,.06) 72deg, transparent 84deg,
      transparent 120deg, rgba(255,255,255,.06) 132deg, transparent 144deg,
      transparent 180deg, rgba(255,255,255,.06) 192deg, transparent 204deg,
      transparent 240deg, rgba(255,255,255,.06) 252deg, transparent 264deg,
      transparent 300deg, rgba(255,255,255,.06) 312deg, transparent 324deg);
  animation: vipRaySpin 28s linear infinite;
  pointer-events: none;
  opacity: .55;
}
@keyframes vipRaySpin { to { transform: rotate(360deg); } }

.vip-hero-active {
  background: linear-gradient(135deg, #b45309 0%, #d97706 35%, #f59e0b 100%);
  box-shadow: 0 14px 40px -10px rgba(217, 119, 6, .55);
}
.vip-hero-active::before {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(254, 215, 170, .5) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(245, 158, 11, .35) 0%, transparent 55%);
}

.vip-crown {
  position: relative;
  display: inline-block;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, .45));
  animation: vipCrownFloat 3.6s ease-in-out infinite;
}
.vip-crown-glow {
  filter:
    drop-shadow(0 4px 12px rgba(254, 215, 170, .6))
    drop-shadow(0 0 24px rgba(245, 158, 11, .7));
}
@keyframes vipCrownFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.vip-badge-new, .vip-badge-active {
  position: relative;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 14px;
}
.vip-badge-active {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .4);
}

.vip-hero-title {
  position: relative;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .3px;
  margin: 2px 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.vip-hero-sub {
  position: relative;
  font-size: 13px;
  opacity: .9;
  margin-bottom: 14px;
  letter-spacing: .3px;
}

.vip-trust {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.vip-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 50px;
}
.vip-trust-item b {
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(180deg, #fff, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .3px;
}
.vip-trust-item span {
  font-size: 11px;
  opacity: .75;
  letter-spacing: .3px;
}
.vip-trust-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .22);
}

/* 已开通状态下的 Hero 内容 */
.vip-active-row {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 10px 0 4px;
  padding: 10px 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vip-active-label { font-size: 11px; opacity: .8; letter-spacing: 1.2px; }
.vip-active-date {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.vip-active-tip {
  position: relative;
  font-size: 12px;
  opacity: .85;
  margin-top: 6px;
  padding: 3px 12px;
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  display: inline-block;
}

/* Hero 登录按钮（未登录态） */
.vip-hero-btn {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  padding: 9px 26px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 6px 18px -4px rgba(245, 158, 11, .55);
  transition: transform .15s ease;
}
.vip-hero-btn:active { transform: scale(.96); }

/* ── 区块标题 ── */
.vip-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 18px 0 10px;
  letter-spacing: 1px;
}
.vip-section-line {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── 套餐卡片区（单列紧凑） ── */
.vip-plans-section { padding: 0; }
.vip-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vip-plan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  isolation: isolate;
  height: 74px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .04);
}
.vip-plan-hot { height: 80px; }
.vip-plan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 158, 11, .06), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1;
}
.vip-plan:hover {
  transform: translateY(-3px);
  border-color: #f59e0b;
  box-shadow: 0 12px 28px -8px rgba(245, 158, 11, .32);
}
.vip-plan:hover::before { opacity: 1; }

.vip-plan-shine {
  position: absolute;
  top: -120%;
  left: -120%;
  width: 120%;
  height: 240%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .18) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  z-index: 2;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.vip-plan:hover .vip-plan-shine { opacity: 1; }

.vip-plan-hot {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .25), 0 8px 22px -4px rgba(245, 158, 11, .3);
  animation: vipHotPulse 3s ease-in-out infinite;
}
@keyframes vipHotPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245, 158, 11, .2), 0 8px 22px -4px rgba(245, 158, 11, .3); }
  50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, .35), 0 12px 28px -4px rgba(245, 158, 11, .4); }
}
.vip-plan-hot::before { opacity: 1; background: linear-gradient(180deg, rgba(245, 158, 11, .1), transparent 60%); }
.vip-plan-tag {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) scale(1.18);
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 999px;
  box-shadow: 0 3px 8px -2px rgba(245, 158, 11, .45);
  z-index: 3;
  backdrop-filter: blur(2px);
}

.vip-plan-left { flex: 1; min-width: 0; text-align: left; }
.vip-plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
}
.vip-plan-days {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  letter-spacing: .5px;
}
.vip-plan-per {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.vip-plan-save {
  margin-top: 1px;
  font-size: 10px;
  color: #b45309;
  font-weight: 600;
  letter-spacing: .3px;
}

.vip-plan-right { display: flex; align-items: center; gap: 8px; }
.vip-plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: #d97706;
  font-weight: 800;
}
.vip-plan-symbol { font-size: 15px; font-weight: 600; }
.vip-plan-num { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }

.vip-plan-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 7px 16px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px -3px rgba(245, 158, 11, .45);
  white-space: nowrap;
  transition: all .2s ease;
  letter-spacing: .5px;
  backdrop-filter: blur(0);
}
.vip-plan-cta svg { transition: transform .2s ease; }
.vip-plan:hover .vip-plan-cta {
  transform: scale(1.05);
  box-shadow: 0 6px 18px -3px rgba(245, 158, 11, .55);
}
.vip-plan:hover .vip-plan-cta svg { transform: translateX(2px); }

/* ── 权益区（紧凑） ── */
.vip-perks {
  margin-top: 16px;
  padding: 16px 14px 14px;
  background: var(--card-bg, #fff);
  border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0);
}
.vip-perks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.vip-perk {
  position: relative;
  padding: 10px 4px 8px;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #fafbff, #ffffff);
  border: 1px solid #f0f1f8;
  transition: all .2s ease;
}
.vip-perk:hover {
  border-color: rgba(99, 102, 241, .25);
  box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .18);
}
.vip-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 18px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #eef2ff, #ddd6fe);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .12);
}
.vip-perk-icon-1 { background: linear-gradient(135deg, #fef3c7, #fde68a); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .18); }
.vip-perk-icon-2 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .18); }
.vip-perk-icon-3 { background: linear-gradient(135deg, #ede9fe, #ddd6fe); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .18); }
.vip-perk-icon-4 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); box-shadow: inset 0 0 0 1px rgba(236, 72, 153, .18); }
.vip-perk-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0;
  line-height: 1.3;
}
.vip-perk-desc {
  display: none;
}

.vip-perks-extra {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vip-extra-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.vip-extra-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── 底部链接 ── */
.vip-bottom {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 8px;
}
.vip-bottom-link {
  display: inline-block;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: var(--card-bg, #fff);
  transition: all .2s ease;
}
.vip-bottom-link:hover, .vip-bottom-link:active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-light, #eef2ff);
}

/* ── 响应式 ── */
@media (min-width: 640px) {
  .vip-plans { max-width: 520px; margin: 0 auto; }
  .vip-perks { max-width: 520px; margin-left: auto; margin-right: auto; }
  .vip-hero { max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 360px) {
  .vip-hero { padding: 18px 14px 16px; }
  .vip-hero-title { font-size: 17px; }
  .vip-crown { font-size: 32px; }
  .vip-plan { height: 60px; padding: 10px 12px; }
  .vip-plan-hot { height: 66px; }
  .vip-plan-num { font-size: 22px; }
  .vip-plan-cta { padding: 5px 12px; font-size: 11px; }
  .vip-trust { gap: 8px; }
  .vip-trust-item b { font-size: 15px; }
  .vip-perks-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .vip-perk-icon { width: 30px; height: 30px; font-size: 16px; }
  .vip-perk-name { font-size: 11px; }
}