/* ==========================================================================
   学长教育 (Xuechang Education) - 移动优先 H5 设计系统
   Design System for Xiaoetong-style Knowledge Payment Platform
   v2.0 — 审美升级批次 (P0 + P1 + P2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & CSS Variables
   -------------------------------------------------------------------------- */
:root {
  /* 品牌色彩 */
  --primary-color: #FF6B00;
  --primary-hover: #F25E00;
  --primary-active: #D95500;
  --primary-light: #FF8A3D;
  --primary-gradient: linear-gradient(135deg, #FF851B 0%, #FF5500 100%);
  --primary-bg-light: #FFF6F0;
  --primary-light-border: #FFE4D1;

  /* 辅助色彩 */
  --price-color: #FF4400;
  --text-main: #1A1D24;
  --text-regular: #4A5160;
  --text-muted: #8A92A2;
  --text-placeholder: #B8BEC9;
  --bg-page: #F5F6F8;
  --bg-desktop: #EDEDED;
  --bg-card: #FFFFFF;
  --bg-subtle: #F2F3F5;
  --border-color: #EEEEEE;
  --border-subtle: #EBEDF0;

  /* 状态颜色 */
  --color-success: #07C160;
  --color-warning: #FF9800;
  --color-danger: #FA5151;
  --color-info: #108EE9;

  /* 字体栈 */
  --font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', Roboto, 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  --font-num: -apple-system, 'DIN Alternate', 'SF Pro Display', Roboto, sans-serif;

  /* 阴影与圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --card-shadow: 0 2px 8px -2px rgba(20, 24, 35, 0.04), 0 1px 2px rgba(20, 24, 35, 0.02);
  --float-shadow: 0 8px 24px -4px rgba(255, 107, 0, 0.28), 0 2px 6px -1px rgba(255, 107, 0, 0.16);
  --modal-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);

  /* 尺寸及过渡 */
  --max-width: 480px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-desktop);
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   3. App Shell (480px 桌面端手机壳效果)
   -------------------------------------------------------------------------- */
.app-shell {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  background-color: var(--bg-page);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Topbar 顶部导航 (毛玻璃浮层)
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  transition: background-color var(--transition-fast);
}

.topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-action {
  font-size: 14px;
  color: var(--text-regular);
  cursor: pointer;
}

/* 渐变全彩导航变体 */
.topbar--gradient {
  background: var(--primary-gradient);
  border-bottom: none;
}

.topbar--gradient .topbar-title,
.topbar--gradient .topbar-action,
.topbar--gradient .topbar-icon {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   5. Search Bar 搜索框 (浅灰底圆角胶囊)
   -------------------------------------------------------------------------- */
.search-bar {
  padding: 8px 16px;
  background-color: #FFFFFF;
}

.search-bar-inner {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background-color: #F2F3F5;
  border-radius: 18px;
  gap: 8px;
}

.search-bar-input {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: var(--text-main);
  outline: none;
}

.search-bar-input::placeholder {
  color: var(--text-muted);
}

.search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   6. Banner 轮播容器 + Banner Item (品牌橙黑金系)
   -------------------------------------------------------------------------- */
.banner {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.banner::-webkit-scrollbar {
  display: none;
}

.banner-wrapper {
  position: relative;
  width: 100%;
  padding: 8px 16px 14px;
  overflow: hidden;
}

.banner-item {
  flex: 0 0 100%;
  width: 100%;
  height: 148px;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  scroll-snap-align: start;
  box-shadow: 0 8px 24px -4px rgba(255, 107, 0, 0.28);
}

/* Banner 装饰几何背景光球 */
.banner-item::before {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* 品牌橙系变体: 深浅不同的橙渐变(保持暖橙风格统一) */
.banner-theme-0 {
  background: linear-gradient(135deg, #FFA000 0%, #FF6B00 60%, #F55000 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.banner-theme-1 {
  background: linear-gradient(135deg, #FF8A3D 0%, #FF6B00 60%, #E66000 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.banner-theme-2 {
  background: linear-gradient(135deg, #FFB347 0%, #FF8A3D 55%, #FF6B00 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.banner-item-tag {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  color: #FFF;
  text-transform: uppercase;
  z-index: 2;
}

.banner-item-title {
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.2px;
  z-index: 1;
}

.banner-item-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   7. Category Tabs 分类横滑 Tab
   -------------------------------------------------------------------------- */
.cat-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  background: #FFFFFF;
}

.cat-tabs::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  padding: 6px 14px;
  font-size: 14px;
  color: var(--text-regular);
  border-radius: 16px;
  background-color: #F7F8FA;
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-touch-callout: none;
  user-select: none;
}

.cat-tab.active {
  background: var(--primary-bg-light);
  color: var(--primary-color);
  font-weight: 700;
}

.cat-tab:active {
  transform: scale(0.93);
}

/* --------------------------------------------------------------------------
   8. Section Title 区块标题
   -------------------------------------------------------------------------- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.section-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title-left::before {
  content: '';
  display: block;
  width: 4px;
  height: 16px;
  background: var(--primary-gradient);
  border-radius: 2px;
}

.section-title-more {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: normal;
}

/* --------------------------------------------------------------------------
   9. Course Card 课程卡片 + Cover + Price + Tag
   -------------------------------------------------------------------------- */
.course-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin: 0 16px 12px;
  box-shadow: var(--card-shadow);
  display: flex;
  gap: 12px;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

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

/* 课程封面 — 深色微质感渐变 + 抽象光效 */
.course-cover {
  width: 110px;
  height: 82px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1C2333 0%, #2E384D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 课程封面底纹光效 */
.course-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 107, 0, 0.35) 0%, transparent 60%);
}

.course-cover::after {
  content: 'COURSE';
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 封面主题变体 */
.cover-theme-0 {
  background: linear-gradient(135deg, #1C2333 0%, #2E384D 100%);
}
.cover-theme-0::before {
  background: radial-gradient(circle at 80% 20%, rgba(255, 107, 0, 0.35) 0%, transparent 60%);
}

.cover-theme-1 {
  background: linear-gradient(135deg, #2A1810 0%, #3D2518 100%);
}
.cover-theme-1::before {
  background: radial-gradient(circle at 20% 80%, rgba(255, 138, 61, 0.35) 0%, transparent 60%);
}

.cover-theme-2 {
  background: linear-gradient(135deg, #1A2332 0%, #192A3A 100%);
}
.cover-theme-2::before {
  background: radial-gradient(circle at 50% 50%, rgba(255, 168, 55, 0.25) 0%, transparent 65%);
}

.course-cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

/* 封面内 SVG 装饰图标 */
.cover-icon {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.3);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}

.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.course-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.course-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   9b. Price Box 价格电商排版系统
   -------------------------------------------------------------------------- */
.price-box {
  display: inline-flex;
  align-items: baseline;
  font-family: -apple-system, "SF Pro Display", "DIN Alternate", Roboto, sans-serif;
  color: #FF4D0D;
  font-variant-numeric: tabular-nums;
}

.price-currency {
  font-size: 12px;
  font-weight: 700;
  margin-right: 1.5px;
}

.price-integer {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.price-decimal {
  font-size: 13px;
  font-weight: 700;
}

.price-orig {
  color: #A0A0A5;
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 6px;
  font-family: -apple-system, sans-serif;
}

.sales-tag {
  font-size: 11px;
  color: #8E8E93;
  background: #F4F4F6;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 400;
}

/* 旧 .price / .sales 保留兼容 */
.price {
  color: var(--price-color);
  font-size: 17px;
  font-weight: 700;
}

.sales {
  font-size: 12px;
  color: var(--text-muted);
}

/* 标签样式 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background-color: var(--primary-bg-light);
  color: var(--primary-color);
  font-size: 11px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   10. Course Hero 详情页大封面
   -------------------------------------------------------------------------- */
.course-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1C2333 0%, #2E384D 50%, #44281D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.course-hero::before {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.course-hero::after {
  content: '';
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 138, 61, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Player Wrap 播放器 + 水印 + 锁屏遮罩
   -------------------------------------------------------------------------- */
.player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.watermark {
  position: absolute;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: watermark-float 12s infinite ease-in-out alternate;
  z-index: 5;
}

@keyframes watermark-float {
  0% { top: 10%; left: 10%; }
  25% { top: 60%; left: 40%; }
  50% { top: 20%; left: 70%; }
  75% { top: 70%; left: 15%; }
  100% { top: 30%; left: 50%; }
}

.lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #FFFFFF;
  padding: 20px;
  text-align: center;
  z-index: 10;
}

.lock-overlay-title {
  font-size: 16px;
  font-weight: 700;
}

.lock-overlay-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   12. Chapter List & Chapter Item 目录列表
   -------------------------------------------------------------------------- */
.chapter-list {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  margin: 12px 16px;
  padding: 8px 0;
  box-shadow: var(--card-shadow);
}

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

.chapter-item:last-child {
  border-bottom: none;
}

.chapter-item-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #F7F8FA;
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.chapter-item.active .chapter-item-dot {
  background-color: var(--primary-bg-light);
  color: var(--primary-color);
}

.chapter-item-content {
  flex: 1;
  min-width: 0;
}

.chapter-item-title {
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapter-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   13. Buy Bar 底部购买栏 (毛玻璃浮层)
   -------------------------------------------------------------------------- */
.buy-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
}

.buy-bar .btn-primary {
  height: 44px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35);
}

/* --------------------------------------------------------------------------
   14. Buttons 按钮系统 (含阻尼微缩放反馈)
   -------------------------------------------------------------------------- */
.btn-primary {
  background: var(--primary-gradient);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow: var(--float-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

.btn-primary:active {
  transform: scale(0.96);
  filter: brightness(0.96);
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

.btn-outline:active {
  transform: scale(0.96);
  filter: brightness(0.96);
}

.btn-danger {
  background: linear-gradient(135deg, #FF7875 0%, #FF4D4F 100%);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}

.btn-ghost {
  background: #F5F5F5;
  color: var(--text-regular);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   15. Mine Header 个人中心头部
   -------------------------------------------------------------------------- */
.mine-header {
  background: var(--primary-gradient);
  padding: 32px 20px 24px;
  color: #FFFFFF;
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mine-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background-color: #FFF3E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.mine-name {
  font-size: 18px;
  font-weight: 700;
}

.mine-tag {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
  display: inline-block;
}

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

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.order-card-body {
  padding: 10px 0;
  display: flex;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   17. Login Box 登录框
   -------------------------------------------------------------------------- */
.login-box {
  padding: 32px 24px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  margin: 40px 16px 0;
  box-shadow: var(--card-shadow);
}

.login-logo {
  text-align: center;
  font-size: 48px;
  margin-bottom: 16px;
}

.login-tabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.login-tab {
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding-bottom: 4px;
}

.login-tab.active {
  color: var(--primary-color);
  font-weight: 700;
  border-bottom: 2px solid var(--primary-color);
}

/* --------------------------------------------------------------------------
   18. Form Input 表单输入框
   -------------------------------------------------------------------------- */
.form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  background-color: #FAFAFA;
  margin-bottom: 16px;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--primary-color);
  background-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   19. Empty & Toast 空状态与提示组件 (毛玻璃升级)
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(28, 28, 30, 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 24px;
  z-index: 2000;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  animation: toast-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --------------------------------------------------------------------------
   20. Modal 弹窗组件 (弹簧进场 + 毛玻璃遮罩)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content {
  background: #FFFFFF;
  border-radius: 20px;
  width: 85%;
  max-width: 360px;
  padding: 20px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.2), 0 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  animation: modalSpring 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

@keyframes modalSpring {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --------------------------------------------------------------------------
   21. Badge 状态徽章 (莫兰迪呼吸灯)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-paid {
  background: #E8FFEA;
  color: #00B42A;
}

.badge-paid::before {
  background: #00B42A;
}

.badge-confirm {
  background: #FFF7E8;
  color: #FF7D00;
}

.badge-confirm::before {
  background: #FF7D00;
  box-shadow: 0 0 0 2px rgba(255, 125, 0, 0.2);
  animation: badgePulse 1.5s infinite;
}

@keyframes badgePulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.badge-pending {
  background: #F2F3F5;
  color: #86909C;
}

.badge-pending::before {
  background: #C9CDD4;
}

.badge-refunded {
  background: #FFECE8;
  color: #F53F3F;
}

.badge-refunded::before {
  background: #F53F3F;
}

/* --------------------------------------------------------------------------
   22. Admin Layout & Components 管理后台组件
   -------------------------------------------------------------------------- */
.admin-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background: #F0F2F5;
}

.admin-sidebar {
  width: 220px;
  background: #001529;
  color: #FFFFFF;
  padding: 16px 0;
  flex-shrink: 0;
}

.admin-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(229, 230, 235, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(0, 0, 0, 0.03);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
}

.data-table th {
  background: #F7F8FA;
  color: #4E5969;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #E5E6EB;
}

.data-table td {
  color: #1D2129;
  border-bottom: 1px solid #F2F3F5;
}

/* --------------------------------------------------------------------------
   23. Utilities 通用工具类
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
}

.flex {
  display: flex;
  align-items: center;
}

.spacer {
  flex: 1;
}

.muted {
  color: var(--text-muted);
  font-size: 12px;
}

.bold {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   24. Tabbar 底部导航 (毛玻璃 + SVG 图标)
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}

.tabbar .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: #8E8E93;
  text-decoration: none;
  gap: 3px;
  -webkit-touch-callout: none;
  user-select: none;
  transition: color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tabbar .tab-item:active {
  transform: scale(0.9);
}

.tabbar .tab-item.active {
  color: var(--primary-color);
  font-weight: 600;
}

.tabbar .tab-svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbar .tab-item .tab-ico {
  font-size: 20px;
  line-height: 1;
}

body.has-tabbar {
  padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px);
}

/* --------------------------------------------------------------------------
   25. Teacher Card 讲师卡片
   -------------------------------------------------------------------------- */
.teacher-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.teacher-avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.teacher-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8A3D 0%, #FF5000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-weight: 700;
  font-size: 16px;
}

.teacher-verify-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: #1890FF;
  border: 2px solid #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-verify-badge svg {
  width: 9px;
  height: 9px;
  fill: #FFF;
}

/* --------------------------------------------------------------------------
   26. Skeleton Shimmer 骨架屏加载
   -------------------------------------------------------------------------- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 骨架屏容器: 数据就绪后 .hidden 隐藏(透明度+移除交互, 不占位) */
.skeleton-group {
  position: relative;
}
.skeleton-group.hidden {
  display: none !important;
}

.skeleton {
  background: linear-gradient(90deg, #F0F1F3 25%, #E4E6EA 37%, #F0F1F3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}

.skeleton-card {
  height: 200px;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skeleton-cover {
  width: 100%;
  height: 120px;
  border-radius: 0;
}

.skeleton-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-text {
  height: 14px;
}

.skeleton-text-short {
  height: 14px;
  width: 60%;
}

.skeleton-price {
  height: 20px;
  width: 40%;
  margin-top: auto;
}

.skeleton-banner {
  height: 148px;
  border-radius: 16px;
  margin: 8px 16px 14px;
}

.skeleton-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
}

.skeleton-tab {
  height: 32px;
  width: 60px;
  border-radius: 16px;
}
```
/* ==========================================================================
   v2.2 视觉打磨覆盖层 (2026-08-08 双模型审美轮)
   按钮/价格/卡片/按压反馈统一规范
   ========================================================================== */

/* 按钮体系: 44px 触控区 + 阻尼按压 */
.btn-primary, .btn-primary:not(.btn-sm) {
  height: 44px;
  background: var(--primary-gradient);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--float-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-smooth), filter var(--transition-fast);
}
.btn-primary:active {
  transform: scale(0.96);
  filter: brightness(0.94);
}
.btn-outline {
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-smooth), background var(--transition-fast);
}
.btn-outline:active {
  transform: scale(0.96);
  background: var(--primary-bg-light);
}

/* 卡片统一: 干净通透双层阴影 + 按压缩放 */
.course-card, .card, .stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-light, rgba(0,0,0,0.03));
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-smooth), box-shadow var(--transition-fast);
}
.course-card:active, .card:active {
  transform: scale(0.985);
}

/* 价格体系: 高转化电商排版 */
.price-box {
  display: inline-flex;
  align-items: baseline;
  color: var(--price-color);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-currency { font-size: 12px; font-weight: 700; margin-right: 1px; }
.price-integer { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.price-decimal { font-size: 12px; font-weight: 700; }
.price-orig, .price-original {
  color: var(--text-placeholder);
  font-size: 11px;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 6px;
  font-family: var(--font-family);
}
.sales-tag {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--primary-bg-light);
  color: var(--primary-color);
  font-size: 11px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* 输入框聚焦态 */
.input:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="number"]:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12) !important;
  outline: none;
}

/* 弹窗/Toast 高级感 */
.modal, .modal-content {
  border-radius: var(--radius-lg);
  box-shadow: var(--modal-shadow);
}
.toast {
  background: rgba(28, 28, 30, 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #fff;
  font-weight: 500;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}

/* 空状态与章节列表细节 */
.chapter-item {
  transition: background var(--transition-fast);
}
.chapter-item:active {
  background: var(--bg-subtle);
}


/* ===== v2.3 质感组件(第二轮审美) ===== */
/* ==========================================================================
   AI 智学 - 审美升级 TOP 5 核心质感组件库 (可直接追加/覆盖至 style.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP 1: 输入框、搜索框与按钮触控质感系统 (Input & Search & Button Refinement)
   -------------------------------------------------------------------------- */
.form-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  color: var(--text-main);
  background-color: #F2F3F5;
  outline: none;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-fast);
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: var(--text-placeholder);
  font-size: 14px;
}

.form-input:focus {
  background-color: #FFFFFF;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3.5px rgba(255, 107, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.search-bar-inner {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  background-color: #F2F3F5;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: all var(--transition-fast);
}

.search-bar-inner:focus-within {
  background-color: #FFFFFF;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

/* 微信快捷登录按钮规范重构 */
.btn-wechat {
  background: #FFFFFF !important;
  color: #07C160 !important;
  border: 1px solid rgba(7, 193, 96, 0.35) !important;
  width: 100%;
  height: 44px;
  border-radius: var(--radius-pill) !important;
  font-size: 14.5px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(7, 193, 96, 0.08);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
}

.btn-wechat:active {
  transform: scale(0.97);
  background-color: #F0FAF3 !important;
}

/* --------------------------------------------------------------------------
   TOP 2: 弹窗 (Modal) 与 iOS 级轻提示 (Toast) 毛玻璃体系
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.modal.show,
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
  opacity: 1;
  pointer-events: auto;
}

.modal-content,
.modal .card {
  background: #FFFFFF;
  border-radius: 24px;
  width: 86%;
  max-width: 340px;
  padding: 24px 20px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transform: scale(0.92) translateY(12px);
  animation: modalSpringUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

@keyframes modalSpringUp {
  to {
    transform: scale(1) translateY(0);
  }
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: rgba(24, 24, 28, 0.88);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  z-index: 2500;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(255, 255, 255, 0.18) inset;
  pointer-events: none;
  opacity: 0;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.show,
.toast[style*="display: block"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* --------------------------------------------------------------------------
   TOP 3: 极致平滑骨架屏 (Shimmer) 与极简空状态 (Empty State)
   -------------------------------------------------------------------------- */
.skeleton {
  background: #EAECEF;
  background: linear-gradient(90deg, #EDF0F3 25%, #F7F9FA 50%, #EDF0F3 75%);
  background-size: 200% 100%;
  animation: shimmerScan 1.6s infinite ease-in-out;
  border-radius: var(--radius-sm);
}

@keyframes shimmerScan {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-banner {
  width: 100%;
  height: 148px;
  border-radius: 16px;
  margin-bottom: 16px;
}

.skeleton-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.skeleton-cover {
  width: 110px;
  height: 82px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.skeleton-text {
  height: 16px;
  border-radius: 4px;
}

.skeleton-text-short {
  height: 12px;
  width: 45%;
  border-radius: 4px;
}

.skeleton-price {
  height: 18px;
  width: 30%;
  border-radius: 4px;
}

/* 高级空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  text-align: center;
}

.empty::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.12) 0%, rgba(255, 107, 0, 0.02) 70%);
  border: 1.5px dashed rgba(255, 107, 0, 0.35);
  border-radius: 50%;
}

.empty-text {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   TOP 4: 呼吸状态徽章 (Badges) 与电商等宽价格排版 (Price Box)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: relative;
}

/* 已支付 / 成功 */
.badge-paid {
  background: #EAF9F1;
  color: #07C160;
}
.badge-paid::before {
  background: #07C160;
  box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.2);
}

/* 待确认 / 审核中呼吸灯 */
.badge-confirm,
.badge-pending {
  background: #FFF4EB;
  color: #FF6B00;
}
.badge-confirm::before,
.badge-pending::before {
  background: #FF6B00;
  box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.6);
  animation: badgeHaloPing 1.8s infinite cubic-bezier(0, 0, 0.2, 1);
}

@keyframes badgeHaloPing {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.6); }
  70% { box-shadow: 0 0 0 5px rgba(255, 107, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

/* 已退款 / 关闭 */
.badge-refunded {
  background: #FEECEB;
  color: #FA5151;
}
.badge-refunded::before {
  background: #FA5151;
}

/* 价格电商排版 */
.price-box {
  display: inline-flex;
  align-items: baseline;
  color: var(--price-color);
  font-family: -apple-system, 'SF Pro Display', 'DIN Alternate', 'Helvetica Neue', sans-serif;
  font-variant-numeric: tabular-nums;
}

.price-currency {
  font-size: 13px;
  font-weight: 700;
  margin-right: 1.5px;
}

.price-integer {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.price-orig {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: normal;
}

/* --------------------------------------------------------------------------
   TOP 5: 高级大封面 Hero 与课程卡片微光效果
   -------------------------------------------------------------------------- */
.course-hero {
  width: 100%;
  height: 210px !important;
  background: linear-gradient(145deg, #18191D 0%, #282A32 50%, #3B2318 100%) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移除廉价 Emoji，加入微光发光网格与光晕 */
.course-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.45) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.course-hero::after {
  content: '智学核心课 · 官方正版';
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
  font-weight: 500;
}

/* 课程详情大标题徽章 */
.hero-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* 卡片按压交互触感 */
.course-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin: 0 16px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 14px rgba(40, 20, 0, 0.04);
  display: flex;
  gap: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.03);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.course-card:active {
  transform: scale(0.975);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}


/* ===== v2.4 动效高级感(第三轮审美) ===== */
/* 修复完整流光骨架屏 */
.skeleton {
  background: linear-gradient(90deg, #F2F3F5 25%, #E5E6EB 37%, #F2F3F5 63%) !important;
  background-size: 400% 100% !important;
  animation: skeleton-shimmer 1.4s ease infinite !important;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}


.course-hero {
  position: relative;
  background: radial-gradient(circle at 85% 15%, rgba(255, 107, 0, 0.45) 0%, transparent 55%),
              radial-gradient(circle at 10% 90%, rgba(255, 138, 61, 0.25) 0%, transparent 50%),
              linear-gradient(145deg, #14171F 0%, #1F2430 60%, #2A1E17 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}


:root {
  --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tap-easing: cubic-bezier(0.32, 0.72, 0, 1);
}
.btn-primary:active, .course-card:active {
  transform: scale(0.965) translateY(1px);
  filter: brightness(0.94);
  transition: all 0.12s var(--tap-easing);
}


.buy-bar, .tabbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-top: 0.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03), 0 -1px 3px rgba(0, 0, 0, 0.02);
}


/* ==========================================================================
   AI 智学 - 第三轮 动效与高级感终极重构补丁 (Drop-in Ready)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP 1: 物理级微交互动效与弹簧曲线 (Physics Micro-Interactions)
   -------------------------------------------------------------------------- */
:root {
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tap: cubic-bezier(0.32, 0.72, 0, 1);
  --premium-orange: linear-gradient(135deg, #FFA000 0%, #FF6B00 60%, #FF3D00 100%);
  --glow-shadow: 0 8px 24px -4px rgba(255, 107, 0, 0.38);
}

/* 按钮通用触觉反馈 */
.btn-primary {
  background: var(--premium-orange);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-shadow);
  transition: transform 0.16s var(--ease-tap), filter 0.16s ease, box-shadow 0.16s ease;
  will-change: transform;
}
.btn-primary:active {
  transform: scale(0.95) translateY(1px);
  filter: brightness(0.92);
  box-shadow: 0 3px 10px -2px rgba(255, 107, 0, 0.3);
}

/* 幽灵微光：点击时的涟漪泛光 */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-primary:active::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   TOP 2: 极致流光骨架屏体系 (Zero-Lag Shimmer Skeleton)
   -------------------------------------------------------------------------- */
.skeleton-group {
  padding: 12px 16px;
  animation: skFadeIn 0.3s ease-out;
}
.skeleton-group.hidden {
  display: none !important;
}
@keyframes skFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.skeleton {
  background: linear-gradient(90deg, #F0F2F5 25%, #E6E8EC 45%, #F0F2F5 65%);
  background-size: 300% 100%;
  animation: shimmerWave 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmerWave {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.skeleton-banner {
  width: 100%;
  height: 140px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.skeleton-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.skeleton-tab {
  width: 64px;
  height: 30px;
  border-radius: 15px;
}
.skeleton-card {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  background: #FFF;
  padding: 12px;
  border-radius: var(--radius-md);
}
.skeleton-cover {
  width: 100px;
  height: 75px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.skeleton-text {
  height: 16px;
  border-radius: 4px;
}
.skeleton-text-short {
  height: 12px;
  width: 50%;
  border-radius: 4px;
}
.skeleton-price {
  height: 18px;
  width: 35%;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   TOP 3: 课程卡片分层光感与入场过渡 (Layered Course Card)
   -------------------------------------------------------------------------- */
.course-card {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 12px;
  margin: 0 16px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.015), 0 8px 20px -4px rgba(23, 27, 42, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.025);
  display: flex;
  gap: 12px;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
  will-change: transform;
}
.course-card:active {
  transform: scale(0.975);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 封面高质感纹理与暗光 */
.course-cover {
  width: 112px;
  height: 84px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.cover-theme-0 { background: linear-gradient(135deg, #1C2333 0%, #2E384D 100%); }
.cover-theme-1 { background: linear-gradient(135deg, #30190D 0%, #4D2614 100%); }
.cover-theme-2 { background: linear-gradient(135deg, #122828 0%, #1F4242 100%); }

.course-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255, 107, 0, 0.4) 0%, transparent 60%);
  pointer-events: none;
}
.course-cover-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFF;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

/* 列表卡片依次进入动画 */
.course-card.fade-in {
  animation: cardEntrance 0.45s var(--ease-out-expo) forwards;
}
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   TOP 4: 电商级价格排版与状态呼吸灯 (Numeric & Morse Dot)
   -------------------------------------------------------------------------- */
.price-box {
  display: inline-flex;
  align-items: baseline;
  color: #FF3B00;
  font-family: -apple-system, "SF Pro Display", "DIN Alternate", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
.price-currency {
  font-size: 12px;
  font-weight: 700;
  margin-right: 1.5px;
}
.price-integer {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}
.price-decimal {
  font-size: 13px;
  font-weight: 700;
}
.price-orig {
  font-size: 11px;
  color: #A0A5AE;
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 400;
}

/* 状态微光呼吸灯 */
.badge-confirm::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF7D00;
  box-shadow: 0 0 0 0 rgba(255, 125, 0, 0.7);
  animation: morsePulse 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes morsePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 125, 0, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(255, 125, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 125, 0, 0); }
}

/* --------------------------------------------------------------------------
   TOP 5: 浮层交互模态与毛玻璃安全栏 (Glass Popups & Safe Bars)
   -------------------------------------------------------------------------- */
.topbar, .buy-bar, .tabbar {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
}

/* 顶部与底部半透边界微光线 */
.topbar { border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); }
.buy-bar, .tabbar { border-top: 0.5px solid rgba(0, 0, 0, 0.05); }

/* 弹窗高级弹簧入场 */
.modal-content {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0,0,0,0.1);
  animation: springPop 0.38s var(--ease-spring) forwards;
}
@keyframes springPop {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 标签栏微动效 */
.cat-tab {
  transition: all 0.2s var(--ease-out-expo);
}
.cat-tab:active {
  transform: scale(0.92);
}
.cat-tab.active {
  background: #FFF3EB;
  color: #FF6B00;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.15);
}

/* ==========================================================================
   v2.7 自然橙风格 (2026-08-08 取长补短: 借鉴中午前版本, 橙色点缀而非框)
   原则: 卡片干净无粗框, 橙色用于 banner/按钮/价格/选中态
   ========================================================================== */
/* 课程卡片: 干净浅阴影, 无粗边框(去掉 AI 味) */
.course-card {
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
}
.course-card::before {
  display: none !important;  /* 去掉左侧橙条 */
}
.course-card:active {
  transform: scale(0.98);
}

/* 通用卡片: 干净无橙描边 */
.card {
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 分类 Tab 选中: 橙色胶囊(保留) */
.cat-tab.active {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.25);
}

/* 顶部导航栏: 白底干净(回中午前风格), 标题橙色点缀 */
.topbar {
  background: #FFFFFF !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid #F0F0F0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.topbar .topbar-title {
  color: var(--text-main) !important;
  font-weight: 700;
}
.topbar .logo-badge {
  background: var(--primary-gradient) !important;
  color: #fff !important;
}
.topbar .topbar-action, .topbar a, .topbar button {
  color: var(--primary-color) !important;
}

/* 区块标题: 简洁无橙条, 橙色仅小圆点 */
.section-title, .content-section h3, h3.section-title {
  position: relative;
  padding-left: 0;
  font-weight: 700;
  color: var(--text-main);
}
.section-title::before, .content-section h3::before, h3.section-title::before {
  display: none !important;
}

/* mine 页菜单宫格: 干净卡片 */
.menu-item {
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* ===== v2.6 底部导航避让购买栏 (2026-08-08) ===== */
/* course.html 有 buy-bar + tabbar, tabbar 上移避免遮挡 */
body.has-buybar .tabbar {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
body.has-buybar .app-shell {
  padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}
/* 无购买栏页面: tabbar 正常贴底, 内容留出 tabbar 高度 */
body.has-tabbar .app-shell {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ===== v2.8 桌面端体验增强 (2026-08-08) ===== */
/* 桌面背景: 柔和渐变, 手机壳有悬浮感 */
@media (min-width: 768px) {
  body {
    background: linear-gradient(160deg, #FFF7F0 0%, #F7F8FA 40%, #F0F2F5 100%);
  }
  .app-shell {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    min-height: 100vh;
  }
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px 20px;
  }
  .course-card {
    margin: 0;
  }
  /* 桌面顶部留白呼吸感 */
  .topbar {
    border-radius: 0;
  }
}

/* ==========================================================================
   v20260809a 质感打磨层 (gemini 审美审查 R1 落地)
   - 分类 tab 选中态: 淡橙底 + 橙字 (原灰底胶囊显"禁用")
   - 课程卡片: 悬停浮起 + 柔和阴影过渡
   - 价格: 统一 --price-color 微暖红, tabular-nums
   - 输入框: 聚焦橙色光环
   - 骨架屏: 扫光节奏微调
   - 按钮: 按压反馈统一
   ========================================================================== */

/* 分类 Tab 选中态: 淡橙底橙字, 未选中无底 (避免"禁用感") */
.cat-tab {
  background: transparent;
  color: var(--text-regular);
  font-weight: 500;
  transition: all 0.2s var(--transition-fast);
}
.cat-tab.active {
  background: var(--primary-bg-light);
  color: var(--primary-color);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--primary-light-border);
}

/* 课程卡片: 更柔和的阴影与浮起反馈 */
.course-card {
  box-shadow: var(--card-shadow);
  transition: transform 0.18s var(--transition-fast), box-shadow 0.18s var(--transition-fast);
}
.course-card:active {
  transform: scale(0.985);
  box-shadow: 0 2px 6px -2px rgba(20, 24, 35, 0.06);
}

/* 价格: 统一色值 + 等宽数字 */
.price-box, .price-tag, .course-price, .price-orig, .price-now {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--price-color);
}

/* 输入框聚焦光环 (登录/确认页) */
.form-input:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12) !important;
  background: #FFFFFF !important;
}

/* 骨架屏: 更细腻的扫光节奏 */
.skeleton {
  background: linear-gradient(90deg, #EEF0F3 25%, #F8F9FB 37%, #EEF0F3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 主按钮: 统一渐变 + 按压缩放 (原可能被内联样式覆盖) */
.btn-primary, .btn-buy, .btn-submit, .submit-btn, button[type="submit"] {
  background: var(--primary-gradient) !important;
  box-shadow: var(--float-shadow);
  transition: transform 0.15s var(--transition-fast), filter 0.15s ease;
}
.btn-primary:active, .btn-buy:active, .btn-submit:active, .submit-btn:active, button[type="submit"]:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}

/* ==========================================================================
   v20260809b 质感打磨层 R2 (组件质感落地)
   - btn-primary: 顶部高光 + 弹性按压
   - chapter-item: 按压反馈 + 激活章节橙色高亮
   - 章节序号 badge 圆点化
   - 讲师头像卡: 品牌渐变描边
   ========================================================================== */

/* 主按钮: 顶部 1px 浅高光制造微凸起 */
.btn-primary {
  background: linear-gradient(135deg, #FF7D1A 0%, #FF5500 100%) !important;
  box-shadow: 0 4px 14px 0 rgba(255, 107, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  -webkit-touch-callout: none;
  user-select: none;
}
.btn-primary:active {
  transform: scale(0.965);
  filter: brightness(0.93);
  box-shadow: 0 2px 6px 0 rgba(255, 107, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* 章节列表: 按压反馈 */
.chapter-item {
  transition: background-color 0.15s ease;
}
.chapter-item:active {
  background-color: #F9FAFB;
}

/* 章节序号: 圆形数字徽章(替代裸数字) */
.chapter-item .badge {
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-subtle) !important;
  color: var(--text-regular) !important;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: none !important;
}
.chapter-item .badge::before {
  display: none;
}
/* 当前播放章节(播放页高亮用 .active) */
.chapter-item.active {
  background: var(--primary-bg-light);
}
.chapter-item.active .badge {
  background: var(--primary-color) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.4) !important;
}
.chapter-item.active .chapter-item-title {
  color: var(--primary-color);
  font-weight: 600;
}

/* ==========================================================================
   v20260809c 质感打磨层 R3 (动效与高级感落地)
   - payModal: 弹簧入场 (display:none→flex 自动重触发动画)
   - 弹窗内价格统一品牌色
   - skeleton 隐藏平滑
   ========================================================================== */
#payModal .card {
  animation: modalSpring 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
#payModal .card .bold {
  color: var(--price-color);
}
#payModal .btn-primary {
  background: var(--primary-gradient) !important;
}

/* 骨架屏隐藏平滑过渡(不破坏 display:none 逻辑, 仅加过渡) */
.skeleton-group {
  transition: opacity 0.25s ease;
}

/* ==========================================================================
   v20260809d 最终打磨 (gemini 复审意见落地)
   - 菜单图标: 浅色底 + 彩色 emoji
   - 联系客服通栏: 消除 2+1 不对称留白
   - 按钮阴影降噪: 橙色弥散投影过重 → 轻量中性
   - 微信按钮与品牌橙冲突: 微调为更柔和的绿
   ========================================================================== */
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--card-shadow) !important;
}
.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.menu-item-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 14px 18px;
  gap: 12px;
}
.menu-item-wide .muted {
  margin-left: auto;
}

/* 按钮橙色弥散光降噪: 更轻更透 */
.btn-primary {
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* 微信按钮: 柔和绿(降低与品牌橙的冲突感) */
.btn-wechat {
  background: rgba(7, 193, 96, 0.07) !important;
  border: 1px solid rgba(7, 193, 96, 0.25) !important;
  color: #06AD56 !important;
}

/* ==========================================================================
   v2.9 桌面端响应式增强 (2026-08-16)
   - 桌面 ≥768px: 内容容器 480px 手机壳 → 960px 宽版, 手机端完全不变
   - 课程卡片 3 列 / banner 加高 / 顶栏舒展 / 章节 2 列 / 表单限宽居中
   ========================================================================== */
@media (min-width: 768px) {
  /* 内容容器: 480 → 960, 高特异性压过 login/mine 页面内联 max-width:480px */
  body .app-shell { max-width: 960px; }

  /* 顶栏 */
  body .topbar { height: 56px; padding: 0 24px; }
  body .topbar .topbar-title { font-size: 18px; }
  body .topbar .logo-badge { width: 32px; height: 32px; font-size: 16px; margin-right: 10px; }
  body .topbar .topbar-action { font-size: 14px; }

  /* 搜索栏 */
  body .search-bar { padding: 12px 24px; }
  body .search-bar-inner { height: 42px; border-radius: 21px; padding: 0 18px; }
  body .search-bar-input { font-size: 15px; }

  /* Banner 轮播 */
  body .banner-wrapper { padding: 12px 24px 18px; }
  body .banner-item { height: 210px; border-radius: 20px; padding: 28px; }
  body .banner-item-tag { font-size: 11px; padding: 4px 10px; }
  body .banner-item-title { font-size: 26px; }
  body .banner-item-sub { font-size: 14px; margin-top: 6px; }

  /* 分类 Tabs */
  body .cat-tabs { padding: 10px 24px; gap: 10px; }
  body .cat-tab { padding: 8px 18px; }

  /* 课程网格: 首页 3 列 */
  body .app-shell .course-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 18px 24px; }
  body .app-shell .course-cover { height: 170px; font-size: 56px; }
  body .app-shell .course-body { padding: 14px 16px; }
  body .app-shell .course-title { font-size: 16px; }
  body .app-shell .course-sub { font-size: 13px; }
  /* 桌面悬停浮起 */
  body .app-shell .course-card { transition: opacity 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease; }
  body .app-shell .course-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 30px -10px rgba(255, 107, 0, 0.25), 0 4px 10px rgba(20, 24, 35, 0.05); }

  /* 底部导航 / 购买栏跟随容器宽度 */
  body .tabbar, body .buy-bar { max-width: 960px; }
  body .tabbar { height: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body .tabbar .tab-item { font-size: 12px; }
  body .tabbar .tab-svg { width: 24px; height: 24px; }
  body.has-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px); }

  /* 章节列表: 详情/播放页 2 列 */
  body .chapter-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* 个人中心: 菜单 4 列 */
  body .menu-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px; }
  body .menu-item { padding: 24px 12px; }
  body .menu-item-wide { grid-column: 1 / -1; }

  /* 登录页: 表单限宽居中 */
  body .app-shell form { max-width: 420px; margin: 0 auto; }
  body .logo-container { margin-bottom: 36px; }
  body .logo-box { width: 84px; height: 84px; border-radius: 22px; font-size: 21px; }

  /* 课程详情页 hero 加高 (内联样式必须 !important) */
  body .course-hero { height: 260px !important; border-radius: 0 0 20px 20px; }
  body .course-hero #heroEmoji { font-size: 84px !important; }

  /* 个人中心头部 */
  body .mine-header { padding: 36px 24px !important; }
  body .avatar-box { width: 72px; height: 72px; font-size: 36px; }

  /* 内容区块留白呼吸感 */
  body .content-section, body .card { }
  body .order-card { border-radius: 14px; }
}