/* ==========================================
   页面样式 - 各模块页面专用样式
   ========================================== */

/* ===== 首页样式 ===== */
/* 品牌区：Logo + 站名 + 口号（黄底白字） */
.home-header-wrap {
  position: relative;
  z-index: 30;
  margin-bottom: var(--spacing-2);
  background: var(--white);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: visible;
  box-shadow: 0 2px 12px rgba(255, 167, 38, 0.12);
}

.page-home .home-feature-card {
  position: relative;
  z-index: 1;
}

.home-brand-header {
  background: linear-gradient(120deg, #ffd95a 0%, #ffc107 42%, #ffb300 100%);
  padding: 14px var(--spacing-4) 14px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}

.home-brand-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-brand-logo-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.home-brand-text {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.home-brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
}

.home-brand-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(180, 120, 0, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-brand-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
  padding-right: 0;
}

.home-brand-grade-wrap {
  position: relative;
}

/* 年级选择：底部弹层（避免被头部 overflow 裁切） */
.home-grade-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 10);
  pointer-events: none;
  visibility: hidden;
}

.home-grade-sheet.is-open {
  pointer-events: auto;
  visibility: visible;
}

.home-grade-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.home-grade-sheet.is-open .home-grade-sheet-backdrop {
  opacity: 1;
}

.home-grade-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78vh, 520px);
  background: var(--white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  padding: 8px 16px calc(20px + var(--safe-area-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-grade-sheet.is-open .home-grade-sheet-panel {
  transform: translateY(0);
}

.home-grade-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 4px auto 12px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  flex-shrink: 0;
}

.home-grade-sheet .home-grade-dropdown-menu {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 8px;
}

body.home-grade-sheet-open {
  overflow: hidden;
}

.home-grade-dropdown-head {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-grade-dropdown-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500);
}

.home-grade-dropdown-group + .home-grade-dropdown-group {
  margin-top: 10px;
}

.home-grade-dropdown-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  margin-bottom: 6px;
  padding-left: 2px;
}

.home-grade-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.home-grade-dropdown-menu .child-dropdown-item {
  justify-content: center;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--gray-50);
  color: var(--gray-700);
  min-height: 40px;
}

.home-grade-dropdown-menu .child-dropdown-item:active {
  transform: scale(0.97);
}

.home-grade-dropdown-menu .child-dropdown-item.active {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  color: #e65100;
  border-color: rgba(255, 167, 38, 0.45);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 167, 38, 0.2);
}

.home-grade-dropdown-menu .child-dropdown-item.disabled {
  opacity: 0.38;
  pointer-events: none;
  background: var(--gray-100);
  color: var(--gray-400);
}

.home-grade-sheet-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--gray-100);
}

.home-grade-sheet-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
}

.home-grade-sheet-done {
  min-width: 96px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
}

.home-brand-slogan {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* 品牌条内的年级选择器 */
.home-child-dropdown--brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.98);
  color: #c62828;
  border-radius: var(--radius-full);
  padding: 6px 10px 6px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(180, 100, 0, 0.15);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.home-child-dropdown--brand.is-open {
  box-shadow: 0 4px 14px rgba(180, 100, 0, 0.22);
}

.home-child-dropdown--brand:active {
  transform: scale(0.98);
}

.home-child-dropdown--brand .home-grade-trigger-prefix {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  margin-right: 2px;
}

.home-child-dropdown--brand .home-grade-dropdown-text {
  color: #d84315;
  font-weight: 700;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-child-dropdown--brand .dropdown-arrow {
  color: #ef6c00;
  opacity: 1;
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.home-child-dropdown--brand.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

.home-brand-header .home-stats-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.home-brand-header .home-stats-btn-img {
  width: 36px;
  height: 36px;
}

.home-child-dropdown {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--primary-bg);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.home-child-dropdown:active {
  background: var(--primary-light);
  color: var(--white);
}

.dropdown-arrow {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.home-stats-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  flex-shrink: 0;
}

.home-stats-btn-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.home-stats-btn:active {
  opacity: 0.85;
  transform: scale(0.96);
}

/* 孩子下拉菜单 */
.child-dropdown-menu {
  position: absolute;
  top: 60px;
  left: var(--spacing-4);
  right: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: var(--spacing-2);
  z-index: var(--z-modal);
  border: 1px solid var(--gray-100);
}

.child-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.child-dropdown-item:active {
  background: var(--gray-50);
}

.child-dropdown-item.active {
  background: var(--primary-bg);
  color: var(--primary);
}

.child-dropdown-item .child-name {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.child-dropdown-item.add-child {
  color: var(--primary);
  border-top: 1px solid var(--gray-100);
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-3);
}

/* 功能卡片区域 - 统一简洁风格 */
.home-feature-card {
  margin: var(--spacing-2) var(--spacing-4) var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2);
}

.home-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.home-feature-item:active {
  background: var(--gray-50);
}

.home-feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.home-feature-icon svg {
  width: 24px;
  height: 24px;
}

.home-feature-icon.checkin { background: linear-gradient(135deg, #FF6B4A 0%, #FF8A6B 100%); }
.home-feature-icon.mall { background: linear-gradient(135deg, #FFB347 0%, #FFCC70 100%); }
.home-feature-icon.activity { background: linear-gradient(135deg, #4A90E2 0%, #6BA3F5 100%); }
.home-feature-icon.consult { background: linear-gradient(135deg, #7B68EE 0%, #9B87F5 100%); }
.home-feature-icon.course { background: linear-gradient(135deg, #F5A623 0%, #FFD666 100%); }
.home-feature-icon.test { background: linear-gradient(135deg, #52C41A 0%, #73D13D 100%); }

.home-feature-label {
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  font-weight: 500;
  text-align: center;
}

/* 推荐区域标题 */
.home-section-title {
  padding: var(--spacing-3) var(--spacing-4);
  padding-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

/* 旧样式保留（兼容） */
.home-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--white);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--gray-100);
}

.home-grade-capsule {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--primary-bg);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-grade-capsule::-webkit-scrollbar {
  display: none;
}

.grade-tag {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.grade-tag.active {
  background: var(--primary);
  color: var(--white);
}

/* 金刚区 */
.quick-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-4);
  background: var(--white);
  margin-bottom: var(--spacing-3);
}

.quick-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-nav-item:active {
  transform: scale(0.95);
}

.quick-nav-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-size: 24px;
}

.quick-nav-label {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  text-align: center;
}

/* 列表触底：已加载全部（底部留白避开悬浮 Tab） */
.list-end-hint {
  display: none;
  padding: 20px 16px calc(12px + var(--bottom-nav-offset) + var(--safe-area-bottom));
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
  line-height: 1.4;
}

.list-end-hint.is-visible {
  display: block;
}

.list-end-hint-text {
  display: inline-block;
}

.list-end-hint-text::before,
.list-end-hint-text::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gray-300);
  vertical-align: middle;
  margin: 0 10px;
}

/* 瀑布流 */
.waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  padding: 0 var(--spacing-4);
}

.waterfall-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.waterfall-item:active {
  transform: scale(0.98);
}

.waterfall-item-cover {
  position: relative;
  display: block;
  overflow: hidden;
}

.waterfall-item-cover .waterfall-type-tag {
  pointer-events: none;
}

.list-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #9ca3af;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-fav-btn.is-active {
  color: var(--primary);
}

.list-fav-btn span {
  pointer-events: none;
}

.activity-card .list-fav-btn {
  top: 8px;
  right: 8px;
  left: auto;
  bottom: auto;
  z-index: 4;
}

.waterfall-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--gray-100);
}

.waterfall-image--placeholder {
  background: var(--gray-200);
}

/* 视频帖子：封面 + 播放三角 */
.waterfall-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
  cursor: pointer;
}

.waterfall-video-wrap.is-playing {
  cursor: default;
}

.waterfall-video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.waterfall-video-wrap .waterfall-video-cover {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}

.waterfall-video-cover-el {
  pointer-events: none;
  background: #1e293b;
}

.waterfall-video-cover--placeholder {
  background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
}

.waterfall-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.waterfall-video-play svg {
  margin-left: 3px;
}

.waterfall-video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}

/* 纯文字帖子：封面区展示正文（浅底，不再用黑底） */
.waterfall-post-text-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 55%, #e2e8f0 100%);
  overflow: hidden;
  padding: 36px 12px 14px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.waterfall-post-text-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  max-width: 100px;
  opacity: 0.08;
  pointer-events: none;
  color: #64748b;
  line-height: 0;
}

.waterfall-post-text-play svg {
  width: 100%;
  height: auto;
  display: block;
}

.waterfall-post-text-body {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.38;
  color: #0f172a !important;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  text-shadow: none;
}

.waterfall-item--text-post .waterfall-post-text-cover {
  min-height: 120px;
}

.waterfall-item--text-post .waterfall-post-text-body {
  color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.waterfall-post-text-highlight {
  color: #2563eb;
}

.waterfall-item--text-post .waterfall-content {
  padding-top: 8px;
}

/* 投票贴：封面直接展示题目与选项 */
.waterfall-vote-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 168px;
  aspect-ratio: auto;
  /* 预留左上角「投票」标签高度，避免遮住标题 */
  padding: 40px 12px 12px;
  box-sizing: border-box;
  background: linear-gradient(165deg, #fff7ed 0%, #ffedd5 48%, #fed7aa 100%);
  overflow: hidden;
}

.waterfall-vote-question {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color: #9a3412;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.waterfall-vote-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.waterfall-vote-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(249, 115, 22, 0.18);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.waterfall-vote-option:active:not(.is-disabled) {
  transform: scale(0.98);
  background: #fff;
}
.waterfall-vote-option.is-disabled,
.waterfall-vote-option.is-voted {
  cursor: pointer;
}
.waterfall-vote-option.is-selected {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.2);
}
.waterfall-vote-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(251, 146, 60, 0.22);
  pointer-events: none;
}
.waterfall-vote-option-idx {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f97316;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.waterfall-vote-option-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #431407;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.waterfall-vote-option-pct {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #c2410c;
}

.waterfall-vote-more,
.waterfall-vote-empty {
  font-size: 11px;
  color: #9a3412;
  opacity: 0.75;
  padding: 2px 2px 0;
}

.waterfall-vote-foot {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #c2410c;
}

.waterfall-item--vote-post .waterfall-content {
  padding-top: 8px;
}

/* 关联贴：发帖内容 + 关联对象一目了然 */
.waterfall-related-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 168px;
  aspect-ratio: auto;
  padding: 40px 12px 12px;
  box-sizing: border-box;
  background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  overflow: hidden;
}

.waterfall-related-content {
  margin: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #1e3a8a;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.waterfall-related-content .waterfall-post-text-highlight {
  color: #2563eb;
}

.waterfall-related-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(37, 99, 235, 0.16);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.waterfall-related-card:active {
  transform: scale(0.98);
  background: #fff;
}
.waterfall-related-card-go {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.waterfall-related-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e2e8f0;
}

.waterfall-related-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.waterfall-related-card-type {
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  line-height: 1.2;
}

.waterfall-related-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waterfall-item--related-post .waterfall-content {
  padding-top: 8px;
}

/* 语音贴：与详情一致展示播放器，角标仍为「帖子」 */
.waterfall-audio-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  min-height: 148px;
  aspect-ratio: auto;
  padding: 40px 12px 12px;
  box-sizing: border-box;
  background: linear-gradient(160deg, #fff7f5 0%, #ffe8e0 55%, #ffd5c8 100%);
  overflow: hidden;
}

.waterfall-audio-content {
  margin: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #7c2d12;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.waterfall-audio-content .waterfall-post-text-highlight {
  color: #ea580c;
}

.waterfall-audio-player {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B4A, #FF8A65);
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.28);
}

.waterfall-audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.waterfall-audio-label {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.waterfall-audio-dur {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
}

.waterfall-audio-el {
  display: block;
  width: 100%;
  height: 32px;
}

.waterfall-item--audio-post .waterfall-content {
  padding-top: 8px;
}

.waterfall-content,
.product-info {
  padding: 10px 12px 12px;
  min-width: 0;
}

/* 列表卡片标题/副文案（与商城商品卡一致） */
.list-card-title,
.waterfall-title,
.product-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-800);
  line-height: 1.45;
  margin: 0 0 8px;
}

.list-card-meta,
.waterfall-meta,
.product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.product-card-meta--sales {
  justify-content: flex-end;
  margin-top: 6px;
}

.product-card .mall-price-wrap--card {
  margin-top: 4px;
}

/* 首页瀑布流商品：紧凑价格条，不撑开卡片 */
.waterfall-item .waterfall-product-title {
  margin-bottom: 6px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.waterfall-meta--product {
  justify-content: flex-end;
  margin-top: 4px;
}

.waterfall-meta-sales {
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.mall-price-wrap--waterfall {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  overflow: hidden;
}

.mall-price-wrap--waterfall .mall-price-original {
  font-size: 10px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mall-price-wrap--waterfall .mall-price-badge {
  grid-template-columns: 11fr 9fr;
  min-height: 44px;
  border-radius: 8px;
}

.mall-price-wrap--waterfall .mall-price-badge-left {
  padding: 5px 14px 5px 6px;
  gap: 2px;
  min-width: 0;
}

.mall-price-wrap--waterfall .mall-price-badge-right {
  padding: 4px 4px 4px 12px;
  gap: 2px;
  min-width: 0;
}

.mall-price-wrap--waterfall .mall-price-badge-tag {
  font-size: 9px;
}

.mall-price-wrap--waterfall .mall-price-yen {
  font-size: 10px;
}

.mall-price-wrap--waterfall .mall-price-int {
  font-size: 15px;
}

.mall-price-wrap--waterfall .mall-price-dec {
  font-size: 10px;
}

.mall-price-wrap--waterfall .mall-price-deduct-tag {
  font-size: 8px;
  padding: 1px 4px;
}

.mall-price-wrap--waterfall .mall-price-deduct-text {
  font-size: 8px;
}

.mall-price-wrap--waterfall .mall-price-deduct-yen {
  font-size: 9px;
}

.mall-price-wrap--waterfall .mall-price-deduct-int {
  font-size: 12px;
}

.mall-price-wrap--waterfall .mall-price-deduct-dec {
  font-size: 9px;
}

.mall-price-wrap--waterfall .mall-price-energy-icon {
  width: 22px;
  height: 22px;
}

.mall-price-wrap--waterfall .mall-price-energy-icon svg {
  width: 12px;
  height: 12px;
}

.product-card .product-title {
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-card-meta-left,
.product-card-energy {
  font-weight: 600;
  color: var(--gray-600);
}

.list-card-meta-right,
.product-card-sales {
  color: var(--gray-400);
  white-space: nowrap;
  font-weight: 400;
}

.waterfall-type-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
  color: white;
  display: block;
}

.waterfall-type-tag.free {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.waterfall-type-tag.vip {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #5D3A00;
}

.waterfall-type-tag.post {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.waterfall-type-tag.vote {
  background: rgba(249, 115, 22, 0.95);
  color: white;
}

.waterfall-type-tag.related {
  background: rgba(37, 99, 235, 0.95);
  color: white;
}

.waterfall-type-tag.challenge {
  background: rgba(168, 85, 247, 0.9);
  color: white;
}

.waterfall-type-tag.activity {
  background: rgba(236, 72, 153, 0.9);
  color: white;
}

.waterfall-type-tag.product {
  background: rgba(255, 107, 74, 0.9);
  color: white;
}

.waterfall-type-tag.paid {
  background: rgba(255, 107, 74, 0.9);
  color: white;
}

.waterfall-type-tag.energy-type {
  background: rgba(74, 144, 226, 0.9);
  color: white;
}

.waterfall-type-tag.mixed-type {
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.92) 0%, rgba(74, 144, 226, 0.92) 100%);
  color: white;
}

/* ===== 课程模块样式 ===== */
.course-header {
  position: relative;
}

.course-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--gray-100);
}

.course-info {
  padding: var(--spacing-4);
  background: var(--white);
}

.course-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.course-title-row .course-title {
  flex: 1;
  margin-bottom: 0;
}

.course-progress-ring {
  flex-shrink: 0;
}

.course-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
  line-height: 1.4;
}

.course-teacher {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.course-teacher-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--gray-100);
  border: 2px solid var(--gray-100);
  flex-shrink: 0;
}

.course-teacher-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.course-stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  flex-wrap: wrap;
}

.course-stats-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.course-stats-item--like {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, transform 0.15s ease;
}

.course-stats-item--like:active {
  transform: scale(0.96);
}

.course-stats-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.course-footer-action--like.liked,
.course-footer-action--like.liked .course-footer-action-icon,
.course-footer-action--like.liked .course-footer-action-label {
  color: var(--primary);
}

.course-footer-action--like.liked .course-footer-action-icon svg,
.course-footer-action--like.liked .course-footer-action-icon svg path {
  fill: currentColor;
  stroke: none;
}

.course-stats-item--liked {
  color: var(--primary);
}

.course-stats-item--liked svg,
.course-stats-item--liked svg path {
  fill: currentColor;
  stroke: none;
}

/* 课程目录：左单元 + 右章节（与全站珊瑚主色统一） */
.course-catalog-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  min-height: 280px;
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.course-catalog-units {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px;
  background: linear-gradient(180deg, #fffbfb 0%, #fff5f2 100%);
  border-right: 1px solid rgba(255, 107, 74, 0.08);
}

.course-catalog-unit-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 5px;
  border: 1px solid rgba(255, 107, 74, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.15s ease;
}

.course-catalog-unit-tab::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(255, 107, 74, 0.35);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.course-catalog-unit-tab:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .course-catalog-unit-tab:not(.is-active):hover {
    border-color: rgba(255, 107, 74, 0.28);
    background: #fff;
    box-shadow: 0 4px 12px rgba(255, 107, 74, 0.1);
  }
}

.course-catalog-unit-tab__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.22s ease;
}

.course-catalog-unit-tab.is-active {
  border-color: transparent;
  background: linear-gradient(145deg, #ff8f70 0%, var(--primary) 52%, #e85a3a 100%);
  box-shadow:
    0 6px 16px rgba(255, 107, 74, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.course-catalog-unit-tab.is-active::before {
  opacity: 1;
  transform: scale(1);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.course-catalog-unit-tab.is-active .course-catalog-unit-tab__label {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(180, 60, 30, 0.2);
}

.course-catalog-panels {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--white);
}

.course-catalog-panel {
  display: none;
  flex-direction: column;
  height: 100%;
}

.course-catalog-panel.is-active {
  display: flex;
}

.course-catalog-tag-head {
  padding: 12px 14px 6px;
  background: var(--white);
}

.course-catalog-tag-head + .course-catalog-tag-chapters .course-catalog-chapter:first-child {
  border-top: none;
}

.course-catalog-tag-title {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.course-catalog-tag-title__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.07) 0%, rgba(255, 138, 101, 0.12) 100%);
  border: 1px solid rgba(255, 107, 74, 0.16);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.35;
  box-shadow: 0 1px 3px rgba(255, 107, 74, 0.06);
}

.course-catalog-tag-title__text::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8a65 0%, var(--primary) 100%);
  box-shadow: 0 0 0 2px rgba(255, 107, 74, 0.15);
}

.course-catalog-tag-chapters {
  background: var(--white);
}

.course-catalog-chapters {
  flex: 1;
  overflow-y: auto;
}

.course-catalog-chapter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.15s;
}

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

.course-catalog-chapter:active {
  background: var(--gray-50);
}

.course-catalog-chapter--current {
  background: rgba(255, 107, 74, 0.06);
  box-shadow: inset 3px 0 0 var(--primary);
}

.course-catalog-chapter--locked {
  opacity: 0.72;
}

.course-catalog-chapter-thumb {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-100);
}

.course-catalog-chapter-thumb img,
.course-catalog-chapter-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-catalog-chapter-video {
  pointer-events: none;
  background: #1e293b;
}

.course-catalog-chapter-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
}

.course-catalog-chapter-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 10px;
  color: #fff;
  line-height: 1.4;
}

.course-catalog-chapter-main {
  flex: 1;
  min-width: 0;
}

.course-catalog-chapter-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.course-catalog-chapter-actions .chapter-lock-icon-wrap {
  margin-left: 0;
}

.course-catalog-chapter-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-catalog-chapter-btn {
  flex: 0 0 auto;
  min-width: 72px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--gray-300);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.course-catalog-chapter-btn--ghost {
  background: #f0f4f8;
  color: var(--gray-700);
  border-color: #e2e8f0;
}

.course-catalog-chapter-btn--primary {
  background: linear-gradient(135deg, #ff7a45 0%, var(--primary) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.28);
}

.course-catalog-chapter-btn.is-disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.course-catalog-chapter-btn--schedule {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.3;
  color: #e67e22;
  border-color: #f5dcc4;
  background: #fff7ef;
  white-space: nowrap;
}

.course-catalog-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--gray-500);
  font-size: 14px;
}

.course-catalog-empty--inline {
  padding: 24px 14px;
}

/* 章节列表（视频页等复用） */
.course-unit-block {
  margin-bottom: var(--spacing-4);
}

.course-unit-block:last-child {
  margin-bottom: 0;
}

.course-unit-head {
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-2);
}

.course-unit-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
}

.course-unit-title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff8a65 0%, var(--primary) 100%);
  flex-shrink: 0;
}

.course-unit-intro {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.chapter-list {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.chapter-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

.chapter-item:active {
  background: var(--gray-50);
}

.chapter-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gray-100);
  border-radius: 10px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--gray-600);
}

.chapter-item.active .chapter-index {
  background: linear-gradient(135deg, #ff7a45 0%, var(--primary) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3);
}

.chapter-item.completed .chapter-index {
  background: var(--success);
  color: var(--white);
}

.chapter-info {
  flex: 1;
}

.chapter-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: var(--spacing-1);
}

.chapter-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.chapter-free {
  padding: 2px 8px;
  background: var(--success);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--white);
}

.chapter-vip {
  padding: 2px 8px;
  background: var(--warning);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--white);
}

/* 课程详情：为底部购买栏 + 悬浮导航预留滚动空间 */
.page-course-detail {
  padding-bottom: calc(var(--bottom-nav-offset) + var(--course-footer-height) + var(--safe-area-bottom));
}

.video-resume-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #fff8f5;
  border-bottom: 1px solid #ffe0d6;
  font-size: 13px;
  color: #666;
}

.video-resume-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.video-resume-text {
  flex: 1;
  min-width: 0;
}

.video-interaction-hint {
  font-size: 13px;
  color: #b45309;
  line-height: 1.5;
}

.video-recording-list-section {
  margin-top: 0;
  margin-bottom: 16px;
  padding-top: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
}

/* 副标题与录音卡片间距：原约 48px（p 下边距 + 上下 padding），压缩为 1/3 */
/* 视频播放页：顶部贴边，底部为悬浮导航预留空间 */
.page-video.page-container {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: calc(var(--bottom-nav-offset) + var(--safe-area-bottom) + 16px);
}

.page-video .video-chapter-head--compact {
  padding-bottom: calc(var(--spacing-4) / 3);
}

.page-video .course-catalog-split--video {
  min-height: 240px;
  border-radius: 16px 16px 0 0;
  border-bottom: none;
  box-shadow: none;
}

.video-course-catalog-block {
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
  background: var(--white);
}

.video-course-catalog-block .video-chapter-checkin-panel {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255, 107, 74, 0.1);
  box-shadow: none;
}

.page-video .course-catalog-split--video + .video-chapter-checkin-panel {
  margin-top: 0;
}

.page-video .course-catalog-units {
  flex: 0 0 88px;
  padding: 8px 5px;
  gap: 5px;
}

.page-video .course-catalog-unit-tab {
  min-height: 32px;
  padding: 5px 4px;
  border-radius: 10px;
}

.page-video .course-catalog-unit-tab__label {
  font-size: 11px;
}

.course-catalog-chapter-btn--playing {
  min-width: 72px;
  color: var(--primary);
  border-color: rgba(255, 107, 74, 0.35);
  background: rgba(255, 107, 74, 0.08);
}

.page-video .video-chapter-subtitle--compact {
  margin-bottom: calc(var(--spacing-4) / 3);
}

.page-video .page-content--compact-recordings {
  padding-top: calc(var(--spacing-4) / 3);
}

.video-chapter-checkin-panel {
  background: linear-gradient(180deg, #fff 0%, #fffbfb 100%);
  overflow: hidden;
}

.video-chapter-checkin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, #fffbfb 0%, #fff 100%);
  border-bottom: 1px solid rgba(255, 107, 74, 0.08);
}

.video-chapter-checkin-head__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.video-chapter-checkin-head__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff8f70 0%, var(--primary) 52%, #e85a3a 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.25);
}

.video-chapter-checkin-head__icon svg {
  width: 18px;
  height: 18px;
}

.video-chapter-checkin-head__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}

.video-chapter-checkin-head__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-chapter-checkin-head__count {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.video-chapter-checkin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 4px;
}

.video-chapter-checkin-empty {
  padding: 32px 20px 28px;
  text-align: center;
}

.video-chapter-checkin-empty--inline {
  padding: 20px 8px;
}

.video-chapter-checkin-empty__illus {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  color: var(--primary);
  opacity: 0.55;
}

.video-chapter-checkin-empty__illus svg {
  width: 100%;
  height: 100%;
}

.video-chapter-checkin-empty__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
}

.video-chapter-checkin-empty__desc {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.55;
}

.video-chapter-checkin-card {
  padding: 14px;
  border-radius: 14px;
  background: #fafbfc;
  border: 1px solid #eef2f6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.video-chapter-checkin-card:last-child {
  margin-bottom: 0;
}

@media (hover: hover) {
  .video-chapter-checkin-card:hover {
    border-color: rgba(255, 107, 74, 0.18);
    box-shadow: 0 4px 16px rgba(255, 107, 74, 0.06);
  }
}

.video-chapter-checkin-card__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.video-chapter-checkin-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-100);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(255, 107, 74, 0.12);
}

.video-chapter-checkin-card__meta {
  flex: 1;
  min-width: 0;
}

.video-chapter-checkin-card__author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.video-chapter-checkin-card__author {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.35;
}

.video-chapter-checkin-card__energy {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.1);
}

.video-chapter-checkin-card__time {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
}

.video-chapter-checkin-card__text {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.video-chapter-checkin-card .checkin-post-images,
.video-chapter-checkin-card .ch-checkin-video-wrap {
  margin-top: 10px;
}

.video-chapter-checkin-card__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.video-chapter-checkin-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-chapter-checkin-action:active {
  opacity: 0.65;
}

.video-chapter-checkin-action__icon {
  font-size: 17px;
  line-height: 1;
}

.video-chapter-checkin-action__count {
  font-variant-numeric: tabular-nums;
}

.video-chapter-checkin-card__comments {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #eef2f6;
  cursor: pointer;
}

.video-chapter-checkin-comment-line {
  margin: 0;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.55;
}

.video-chapter-checkin-comment-line strong {
  margin-right: 4px;
  color: var(--gray-900);
}

.video-chapter-checkin-comment-line + .video-chapter-checkin-comment-line {
  margin-top: 4px;
}

.video-chapter-checkin-comment-more {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

.video-checkin-comment-sheet {
  padding-bottom: 4px;
}

.video-checkin-comment-post {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
}

.video-checkin-comment-post-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.video-checkin-comment-post-text {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.6;
  white-space: pre-wrap;
}

.video-checkin-comment-input {
  margin-top: 12px;
}

.video-checkin-comment-send {
  flex-shrink: 0;
  min-width: 64px;
}

.video-recording-list-title {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.video-recording-list-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.video-section-title {
  margin: 0 0 8px;
}

.video-interaction-submitted-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-interaction-submitted-item {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e8eef4;
}

.video-interaction-submitted-meta {
  margin-bottom: 10px;
}

.video-interaction-submitted-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.4;
}

.video-interaction-submitted-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-500);
}

.video-interaction-audio {
  width: 100%;
  height: 36px;
  display: block;
}

.video-interaction-audio-done {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

.video-player--locked {
  pointer-events: none;
  opacity: 0.72;
}

.course-interaction-sheet {
  text-align: center;
  padding: 8px 4px 4px;
}

.course-interaction-prompt {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.45;
  margin-bottom: 8px;
}

.course-interaction-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.course-interaction-timer {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.course-interaction-record-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff6b4a 0%, #ff4757 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 71, 87, 0.35);
}

.course-interaction-record-btn.is-recording {
  animation: course-interaction-pulse 1.2s ease-in-out infinite;
  background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
}

.course-interaction-record-icon {
  font-size: 32px;
  line-height: 1;
}

.course-interaction-status {
  min-height: 20px;
  font-size: 13px;
  color: var(--gray-600);
}

.course-interaction-sheet--choice {
  text-align: left;
}

.course-interaction-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.course-interaction-choice-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--gray-800);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.course-interaction-choice-opt.is-selected {
  border-color: var(--primary);
  background: rgba(255, 71, 87, 0.06);
}

.course-interaction-choice-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  position: relative;
}

.course-interaction-choice-opt.is-selected .course-interaction-choice-check {
  border-color: var(--primary);
  background: var(--primary);
}

.course-interaction-choice-opt.is-selected .course-interaction-choice-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.course-interaction-choice-label {
  flex: 1;
}

.video-interaction-choice-done {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 58%;
}

.video-interaction-choice-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 71, 87, 0.1);
  color: var(--primary);
  font-size: 12px;
  line-height: 1.4;
}

@keyframes course-interaction-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* 课程底部购买栏（固定在底部导航上方，避免被遮挡） */
.course-footer {
  position: fixed;
  bottom: calc(var(--bottom-nav-offset) + var(--safe-area-bottom));
  left: 0;
  right: 0;
  z-index: calc(var(--z-nav) + 1);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  box-shadow: var(--shadow-nav);
}

.course-footer-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.course-footer-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--gray-600);
  cursor: pointer;
}

.course-footer-action-icon {
  width: 24px;
  height: 24px;
}

.course-footer-action-label {
  font-size: var(--font-size-xs);
}

.course-footer-action.active {
  color: var(--primary);
}

.course-footer-action.active .course-footer-action-icon,
.course-footer-action.active .course-footer-action-label,
.course-footer-action.collected .course-footer-action-icon,
.course-footer-action.collected .course-footer-action-label {
  color: var(--primary);
}

.course-footer-action-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.course-footer-action.active .course-footer-action-icon {
  color: var(--primary);
}

.course-footer-right {
  flex: 1;
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.course-footer-vip-btn {
  flex-shrink: 0;
  min-width: 108px;
  padding: 10px 20px;
  border: none;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #ffd54f 0%, #ffb300 45%, #ff8f00 100%);
  box-shadow: 0 4px 14px rgba(255, 143, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(120, 60, 0, 0.2);
}

.course-footer-vip-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(255, 143, 0, 0.4);
}

.course-footer-right .btn-outline.btn-block {
  flex: 1;
  min-width: 0;
}

.video-player-controls .course-btn-on-dark.btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.video-player-controls .course-btn-on-dark.btn-outline:active {
  background: rgba(255, 255, 255, 0.16);
}

.video-player-controls .course-video-action-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.video-player-controls .btn-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.video-player-controls .btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.page-course-detail .course-header .video-player > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 圈子页 ===== */
.page-circle .page-header {
  display: none;
}

.page-circle {
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg-page);
}

.circle-page {
  min-height: 100%;
  padding-bottom: calc(var(--bottom-nav-offset) + 20px);
}

.page-circle .segment-tabs-bar--sticky {
  background: var(--white);
}

.circle-feed {
  padding: 4px 12px 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-circle .post-card {
  margin-bottom: 0;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 14px rgba(30, 58, 95, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.circle-fab {
  position: fixed;
  right: 20px;
  bottom: calc(var(--bottom-nav-offset) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff6b4a 0%, #ff8a6e 100%);
  box-shadow: 0 8px 24px rgba(255, 107, 74, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.circle-fab:active {
  transform: scale(0.92);
  box-shadow: 0 4px 16px rgba(255, 107, 74, 0.35);
}

.circle-fab svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.circle-loading {
  margin-top: 24px;
  padding: 48px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-500);
}

.circle-empty {
  margin-top: 24px;
  padding: 40px 24px;
  text-align: center;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.circle-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.circle-empty-icon svg {
  width: 40px;
  height: 40px;
}

.circle-empty-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.circle-empty-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.circle-empty-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  cursor: pointer;
}

/* ===== 圈子/社交模块样式 ===== */
.post-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.post-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.circle-follow-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.circle-follow-btn.is-following {
  border-color: var(--gray-300);
  color: var(--gray-500);
  background: var(--gray-50);
}

.post-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex: 1;
}

.post-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--gray-100);
  flex-shrink: 0;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gray-100);
}

.user-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-weight: 600;
  color: #fff;
  user-select: none;
  line-height: 1;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.post-avatar.user-avatar--placeholder {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.comment-avatar.user-avatar--placeholder {
  width: 36px;
  height: 36px;
  font-size: 15px;
  object-fit: unset;
}

.post-create-avatar.user-avatar--placeholder {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.page-profile .profile-avatar.user-avatar--placeholder {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  min-height: 72px;
  max-width: 96px;
  font-size: 28px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.15);
}

.vip-user-avatar.user-avatar--placeholder {
  width: 56px;
  height: 56px;
  font-size: 22px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.invite-member-avatar.user-avatar--placeholder {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.post-author-info {
  flex: 1;
}

.post-author-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.post-time {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.post-content {
  font-size: var(--font-size-base);
  color: var(--gray-800);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-3);
}

/* 帖子图片 */
.post-images {
  display: grid;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.post-images.single {
  grid-template-columns: 1fr;
}

.post-images.double {
  grid-template-columns: repeat(2, 1fr);
}

.post-images.multi {
  grid-template-columns: repeat(3, 1fr);
}

.post-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.post-image:hover {
  transform: scale(1.02);
}

.post-image:active {
  transform: scale(0.98);
}

/* 帖子视频 */
.post-video {
  position: relative;
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  cursor: pointer;
}

.post-video--detail {
  cursor: default;
  background: #000;
}

.post-video-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #1e293b;
}

.post-video-cover--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
}

.post-video-player {
  display: block;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.post-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.post-video--detail .post-video-play {
  display: none;
}

.post-video-duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

.page-post-detail .page-content {
  padding-top: 12px;
}

.video-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.video-preview-player {
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  border-radius: 8px;
  background: #000;
}

.video-preview-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.post-images.single .post-image {
  aspect-ratio: 16/9;
}

/* 关联内容卡片 */
.post-related {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
  cursor: pointer;
}

.post-related-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-md);
  color: var(--primary);
}

.post-related-info {
  flex: 1;
}

.post-related-type {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.post-related-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

/* 帖子底部操作栏 */
.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--gray-100);
}

.post-actions--detail {
  margin-top: 16px;
}

.post-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.post-action:active {
  transform: scale(0.95);
}

.post-action.liked,
.post-action.liked .post-action-icon,
.post-action.liked .post-action-count {
  color: var(--primary);
}

.post-action.liked .post-action-icon svg {
  fill: currentColor;
  stroke: none;
}

.post-action.liked .post-action-icon svg path {
  fill: currentColor;
  stroke: none;
}

.post-action.collected,
.post-action.collected .post-action-icon,
.post-action.collected .post-action-count {
  color: var(--warning);
}

.post-actions--detail .post-action.collected,
.post-actions--detail .post-action.collected .post-action-icon,
.post-actions--detail .post-action.collected .post-action-count {
  color: var(--primary);
}

.post-action-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.post-action-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.post-action-count {
  font-size: var(--font-size-sm);
}

/* 统一点赞 / 收藏高亮（课程、挑战、评论等） */
.interact-liked,
.interact-liked .interact-like-icon,
.interact-liked .interact-like-count,
.action-btn.liked,
.action-btn.liked .interact-like-icon,
.action-btn.liked .interact-like-count,
.action-btn.liked .action-icon,
.comment-action-btn.liked,
.comment-action-btn.liked .interact-like-icon,
.comment-action-btn.liked .interact-like-count {
  color: var(--primary);
}

.interact-liked .interact-like-icon svg,
.interact-liked .interact-like-icon svg path,
.action-btn.liked .interact-like-icon svg,
.action-btn.liked .interact-like-icon svg path,
.comment-action-btn.liked .interact-like-icon svg,
.comment-action-btn.liked .interact-like-icon svg path {
  fill: currentColor;
  stroke: none;
}

.interact-favorite.active,
.interact-favorite.active .course-footer-action-icon,
.interact-favorite.active .course-footer-action-label,
.interact-favorite.is-active,
.interact-favorite.is-active .ch-side-action-icon,
.interact-favorite.is-active .ch-side-action-label {
  color: var(--primary);
}

.interact-like-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.interact-like-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.action-btn .interact-like-icon,
.action-btn .action-icon {
  width: 20px;
  height: 20px;
}

.comment-action-btn .interact-like-icon {
  width: 16px;
  height: 16px;
}

.interact-like-count {
  font-size: inherit;
  line-height: 1;
}

.comments-section .comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.comments-section .comment-time {
  font-size: 12px;
  color: var(--gray-400);
}

.comment-action-btn--plain {
  color: var(--gray-500);
}

.comment-action-btn--danger {
  color: #ef4444;
}

.ch-side-action.is-active .ch-side-action-icon svg {
  display: block;
}

/* ===== 发布动态页 ===== */
.page-post-create .page-header {
  display: none;
}

.page-post-create {
  padding-bottom: calc(var(--bottom-nav-offset) + var(--spacing-6) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse 90% 50% at 100% 0%, rgba(255, 107, 74, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 0% 20%, rgba(30, 58, 95, 0.06) 0%, transparent 50%),
    var(--bg-page-gradient);
  background-color: var(--bg-page);
}

.post-create-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-create-body {
  flex-shrink: 0;
  padding: 12px 16px 8px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

.post-create-editor {
  background: var(--white);
  border-radius: 20px;
  padding: 18px 16px 16px;
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.08);
}

.post-create-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}

.post-create-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-bg);
  flex-shrink: 0;
}

.post-create-user-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}

.post-create-user-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gray-500);
}

.post-create-input-wrap {
  margin-bottom: 16px;
}

.post-create-textarea {
  width: 100%;
  min-height: 88px;
  max-height: 160px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-900);
  resize: none;
  overflow-y: auto;
  background: var(--gray-50);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.post-create-textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.12);
}

.post-create-textarea::placeholder {
  color: var(--gray-400);
}

.post-create-input-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.post-create-counter {
  font-size: 12px;
  color: var(--gray-500);
}

.post-create-media-block[hidden] {
  display: none !important;
}

.post-create-media-block {
  padding-top: 4px;
}

.post-create-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.post-create-media-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.post-create-media-hint {
  font-size: 12px;
  color: var(--gray-500);
}

.post-create-media.image-grid {
  gap: 8px;
}

.post-create-media-add.image-grid-add {
  border-radius: 12px;
  border-style: dashed;
  border-color: var(--gray-300);
  background: var(--primary-bg);
  color: var(--primary);
}

.post-create-media-add.image-grid-add:active {
  border-color: var(--primary);
  background: #ffe8e0;
}

.post-create-media-add .image-grid-add-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--primary);
}

.post-create-admin {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200);
}

.post-create-admin-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.post-create-admin-badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-bg);
  border-radius: var(--radius-full);
}

.post-create-admin-desc {
  font-size: 12px;
  color: var(--gray-500);
}

.post-create-admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-create-admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--gray-700);
  background: var(--gray-50);
  cursor: pointer;
}

.post-create-admin-chip svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary);
}

.post-create-admin-chip:active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.post-create-related-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--secondary-bg);
  border-radius: 12px;
  border: 1px solid rgba(30, 58, 95, 0.1);
}

.post-create-related-pill[hidden] {
  display: none !important;
}

.post-create-related-pill-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-800);
}

.post-create-related-pill-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--primary);
}

.post-create-related-pill-icon svg {
  width: 16px;
  height: 16px;
}

.post-create-related-pill-type {
  flex-shrink: 0;
  color: var(--gray-500);
}

.post-create-related-pill-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.post-create-related-pill-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--gray-500);
  background: var(--white);
  cursor: pointer;
}

.post-create-footer {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 16px 14px;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 -4px 20px rgba(30, 58, 95, 0.08);
}

.post-create-tools {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 12px;
}

.post-create-tool {
  flex: 1;
  max-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.post-create-tool:active {
  opacity: 0.7;
}

.post-create-tool-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-bg);
}

.post-create-tool-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--primary);
}

.post-create-tool-icon--voice {
  background: var(--secondary-bg);
}

.post-create-tool-icon--voice svg {
  stroke: var(--secondary);
}

.post-create-tool-icon--video {
  background: #e8f4ff;
}

.post-create-tool-icon--video svg {
  stroke: var(--info);
}

.post-create-tool-icon--location {
  background: #fff0e8;
}

.post-create-tool-icon--location svg {
  stroke: var(--primary-dark);
}

.post-create-tool-icon--poll {
  background: #eef9e8;
}

.post-create-tool-icon--poll svg {
  stroke: var(--success);
}

.post-create-tool-label {
  font-size: 12px;
  color: var(--gray-600);
}

.post-create-publish {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: var(--radius-full);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 6px 16px rgba(255, 107, 74, 0.35);
  cursor: pointer;
}

.post-create-publish:active {
  opacity: 0.92;
  transform: scale(0.99);
}

.post-create-publish:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

.post-create-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.post-create-attachments[hidden] {
  display: none !important;
}

.post-create-attach {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.post-create-attach-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--primary);
}

.post-create-attach-icon svg {
  width: 18px;
  height: 18px;
}

.post-create-attach-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--gray-800);
  font-weight: 500;
}

.post-create-attach-sub {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 400;
  margin-top: 2px;
}

.post-create-attach-video-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.post-create-attach-play,
.post-create-attach-edit {
  flex-shrink: 0;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-bg);
  cursor: pointer;
}

.post-create-attach-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--gray-500);
  background: var(--white);
  cursor: pointer;
}

.post-create-attach--audio {
  background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
  border-color: rgba(255, 107, 74, 0.2);
}

.post-create-attach--video {
  background: var(--secondary-bg);
  border-color: rgba(30, 58, 95, 0.12);
}

.post-create-attach--vote {
  background: #f0faf0;
  border-color: rgba(82, 196, 26, 0.25);
}

.post-create-attach--location {
  background: #fff8f0;
  border-color: rgba(255, 107, 74, 0.15);
}

.post-create-voice-sheet,
.post-create-location-sheet,
.post-create-vote-sheet {
  padding: 4px 0 8px;
}

.post-create-sheet-tip {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.post-create-sheet-label {
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.post-create-sheet-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  font-size: 15px;
  color: var(--gray-800);
  background: var(--white);
  cursor: pointer;
}

.post-create-sheet-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.post-create-sheet-btn--primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border: none;
}

.post-create-sheet-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}

.post-create-location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.post-create-location-item {
  padding: 10px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  color: var(--gray-700);
  background: var(--gray-50);
  cursor: pointer;
}

.post-create-location-item:active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.post-create-vote-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.post-create-vote-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-create-vote-num {
  flex-shrink: 0;
  width: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

.post-create-vote-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 15px;
  background: var(--gray-50);
}

.post-create-vote-input:focus {
  outline: none;
  border-color: var(--primary-light);
  background: var(--white);
}

/* 兼容旧发帖类名 */
.post-editor {
  background: var(--white);
  min-height: calc(100vh - 120px);
}

/* ===== 挑战/活动模块样式 ===== */
.challenge-header {
  position: relative;
}

.challenge-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--gray-100);
}

.challenge-info {
  padding: var(--spacing-4);
  background: var(--white);
}

.challenge-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

.challenge-desc {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: var(--line-height-base);
}

.challenge-bottom-bar {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: var(--spacing-4);
  display: flex;
  gap: var(--spacing-3);
  z-index: 450;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

/* ===== 挑战 v2：四种打卡类型 ===== */
.page-challenge-list.ch-v2 {
  background: linear-gradient(180deg, #fff6f2 0%, #f3f4f6 220px, #f3f4f6 100%);
  padding-bottom: calc(var(--bottom-nav-offset) + var(--safe-area-bottom) + 12px);
}

.page-challenge-v2 {
  background: #f3f4f6;
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-offset) + env(safe-area-inset-bottom, 0px) + 16px);
}

.page-challenge-v2.page-course-detail {
  padding-bottom: calc(var(--bottom-nav-offset) + env(safe-area-inset-bottom, 0px) + 16px);
}

.page-challenge-list.ch-v2 .page-content {
  padding: 12px 16px 24px;
}

.ch-list-hero {
  position: relative;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 107, 74, 0.18);
}

.ch-list-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #ff8a65 0%, #ff6b4a 55%, #ff5c3a 100%);
}

.ch-list-hero-inner {
  position: relative;
  padding: 12px 14px;
  color: #fff;
}

.ch-list-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ch-list-hero-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ch-list-hero-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.ch-list-hero-energy {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #ff6b4a;
}

.ch-list-hero-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

.ch-list-hero-stats-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 12px;
  opacity: 0.95;
}

.ch-list-hero-stats-inline strong {
  font-weight: 800;
  font-size: 13px;
}

.ch-list-hero-dot {
  opacity: 0.55;
}

.ch-list-section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 10px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ch-list-section-label::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff8a65, #ff6b4a);
}

.ch-v2-back {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 16px 8px;
  font-size: 14px;
  color: var(--gray-600);
  cursor: pointer;
  background: linear-gradient(180deg, #f3f4f6 70%, rgba(243, 244, 246, 0));
}

/* 挑战详情：收藏 / 分享 / 主操作 同一行 */
.ch-action-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.ch-action-toolbar--interact-only {
  justify-content: flex-start;
}

.ch-action-toolbar--interact-only .ch-side-actions {
  flex: 1;
}

/* 关卡挑战头图：共 N 关 + 点赞/收藏/分享（图四样式） */
.ch-hero-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.ch-hero-meta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff1f2;
  color: #e11d48;
  font-size: 12px;
  font-weight: 700;
}

.ch-hero-social {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
}

.ch-hero-social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ch-hero-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  line-height: 1;
}

.ch-hero-social-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.ch-hero-social-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

.ch-hero-social-btn.is-liked {
  color: #f97316;
}

.ch-hero-social-btn.is-liked .ch-hero-social-icon svg,
.ch-hero-social-btn.is-liked .ch-hero-social-icon svg path {
  fill: currentColor;
  stroke: currentColor;
}

.ch-hero-social-btn.is-collected,
.ch-hero-social-btn.interact-favorite.is-collected {
  color: #f59e0b;
}

.ch-hero-social-btn.is-collected .ch-hero-social-icon svg,
.ch-hero-social-btn.is-collected .ch-hero-social-icon svg path {
  fill: currentColor;
  stroke: currentColor;
}

.ch-side-action--like.is-active,
.ch-side-action--like.liked,
.ch-side-action--like.interact-liked {
  color: #ef4444;
}

.ch-side-action--like.is-active .ch-side-action-icon svg,
.ch-side-action--like.liked .ch-side-action-icon svg,
.ch-side-action--like.interact-liked .ch-side-action-icon svg,
.ch-side-action--like.is-active .ch-side-action-icon svg path,
.ch-side-action--like.liked .ch-side-action-icon svg path,
.ch-side-action--like.interact-liked .ch-side-action-icon svg path {
  fill: currentColor;
  stroke: currentColor;
}

.ch-action-toolbar .ch-side-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ch-action-toolbar .ch-side-action,
.ch-action-toolbar .ch-btn-makeup,
.ch-action-toolbar .ch-btn-primary,
.ch-action-toolbar .ch-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ch-action-toolbar .ch-side-action {
  flex-direction: row;
  gap: 4px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  font-weight: 500;
}

.ch-action-toolbar .ch-side-action-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ch-action-toolbar .ch-side-action-label {
  font-size: 13px;
}

.ch-action-toolbar .ch-side-action.is-active {
  color: var(--primary);
  border-color: rgba(255, 107, 74, 0.4);
  background: var(--primary-bg, #fff5f2);
}

.ch-action-toolbar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.ch-action-toolbar .ch-btn-primary,
.ch-action-toolbar .ch-btn-dark {
  width: 100%;
  padding: 0 14px;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.22);
}

.ch-action-toolbar .ch-btn-dark {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.ch-btn-primary--block {
  width: 100%;
}

.ch-action-toolbar-dual {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ch-action-toolbar-primary-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.ch-action-toolbar .ch-btn-makeup,
.ch-btn-makeup {
  flex-shrink: 0;
  border: 1px solid var(--primary);
  background: var(--white);
  color: var(--primary);
}

.ch-action-toolbar .ch-btn-makeup:active,
.ch-btn-makeup:active {
  opacity: 0.85;
}

.ch-btn-makeup--solo {
  width: 100%;
}

.ch-action-toolbar .ch-btn-makeup--solo {
  margin-top: 0;
}

.ch-btn-makeup--toolbar {
  min-width: 72px;
  padding: 0 14px;
}

.ch-makeup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid rgba(251, 146, 60, 0.35);
}

.ch-makeup-banner-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ch-makeup-banner-icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
}

.ch-makeup-banner-text {
  font-size: 14px;
  font-weight: 600;
  color: #9a3412;
  line-height: 1.35;
}

.ch-makeup-banner-text strong {
  font-size: 18px;
  color: #c2410c;
}

.ch-makeup-banner-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #b45309;
}

.ch-makeup-banner-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ch-makeup-banner-btn:active {
  opacity: 0.88;
}

.ch-list-makeup-tag {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(234, 88, 12, 0.92);
  color: #fff;
  font-weight: 600;
}

.calendar-day.missed {
  position: relative;
  cursor: pointer;
  background: rgba(251, 146, 60, 0.12);
  color: #c2410c;
  font-weight: 600;
  border-radius: 50%;
}

.calendar-day.missed:hover {
  background: rgba(251, 146, 60, 0.22);
}

.calendar-day-mark--missed {
  color: #ea580c;
  font-size: 8px;
}

.makeup-upload-wrap {
  margin-top: 12px;
}

.ch-v2-stack {
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ch-list-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.ch-list-cover-wrap {
  position: relative;
}

.ch-list-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.ch-list-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 20px);
}

.ch-type-tag {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ch-color, #ff6b4a);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
}

.ch-streak-tag {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 243, 232, 0.95);
  color: #ff6b4a;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ch-list-body {
  padding: 14px 16px 16px;
}

.ch-list-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--gray-900);
}

.ch-list-desc {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0 0 10px;
}

.ch-list-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ch-list-stat {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.ch-card {
  background: var(--white);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.ch-intro-video-card {
  padding: 12px 0 4px;
  margin-bottom: 12px;
  box-shadow: none;
  background: transparent;
}

.ch-progress-card .ch-intro-video-block {
  margin: 12px 0 4px;
}

.ch-intro-video-block .ch-intro-video-wrap {
  border-radius: 12px;
}

.ch-intro-video-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.ch-intro-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.ch-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ch-card-emoji {
  font-size: 20px;
}

.ch-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.ch-card-subtitle {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.ch-pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff3e8;
  color: #ff6b4a;
  font-weight: 600;
}

.ch-pill-ai {
  background: #fff0e8;
}

.ch-streak-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ch-flame {
  font-size: 36px;
}

.ch-streak-num {
  font-size: 36px;
  font-weight: 800;
  color: #ff6b4a;
  line-height: 1;
}

.ch-streak-label {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}

.ch-progress-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 16px;
}

.ch-progress-bar-track {
  display: flex;
  align-items: center;
  min-height: 20px;
}

.ch-progress-meta .ch-progress-bar.ch-progress-bar--inline {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 8px;
  margin: 0;
}

.ch-progress-meta .ch-progress-val {
  color: #ff6b4a;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.ch-progress-bar {
  height: 8px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.ch-progress-bar--inline {
  margin-bottom: 0;
}

.ch-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8a65, #ff6b4a);
  border-radius: 999px;
  transition: width 0.3s;
}

.ch-day-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.ch-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px 4px;
}

.ch-day-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--gray-500);
  border-radius: 50%;
}

.ch-day-cell.is-clickable {
  cursor: pointer;
}

.ch-day-cell.is-clickable:active {
  transform: scale(0.96);
}

.ch-day-num {
  line-height: 1;
}

.ch-day-mark {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 9px;
  line-height: 1;
  color: #ff6b4a;
  font-weight: 700;
}

.ch-day-cell.done {
  background: #ffe8e0;
  color: #ff6b4a;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(255, 107, 74, 0.35);
}

.ch-day-cell.current {
  background: #ff6b4a;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.45);
}

.ch-day-cell.current .ch-day-mark {
  color: #fff;
}

.ch-checkin-feed .checkin-post-item:last-child {
  margin-bottom: 0;
}

.ch-checkin-audio-wrap,
.ch-checkin-video-wrap,
.ch-checkin-voice-preview {
  margin-top: 10px;
}

.ch-checkin-audio {
  display: block;
  width: 100%;
  height: 40px;
}

.ch-checkin-video {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: 10px;
  background: #000;
}

.ch-checkin-media-meta {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-500);
}

.ch-upload-hint {
  margin: 8px 0 0;
}

.ch-upload-voice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-upload-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px dashed rgba(255, 107, 74, 0.35);
  border-radius: 12px;
  background: rgba(255, 107, 74, 0.05);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ch-upload-file-btn--ghost {
  background: var(--white);
  color: var(--gray-700);
  border-color: var(--gray-200);
}

.ch-media-remove-btn {
  margin-top: 8px;
}

.ch-feed-card {
  margin-bottom: 0;
}

.page-challenge-v2.ch-my-checkins {
  padding: 0;
  padding-bottom: calc(var(--bottom-nav-offset) + env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--bg-page);
}

.ch-my-wrap {
  min-height: 100%;
}

.ch-my-hero {
  position: relative;
  margin: 12px 16px 16px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(255, 107, 74, 0.22);
}

.ch-my-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(255, 214, 102, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(74, 144, 226, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, #ff6b4a 0%, #ff8a6e 52%, #ff5c3a 100%);
}

.ch-my-hero-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  right: -40px;
  top: -50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(2px);
}

.ch-my-hero-inner {
  position: relative;
  padding: 18px 18px 16px;
  color: #fff;
}

.ch-my-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ch-my-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ch-my-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.ch-my-hero-avatar.user-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
}

.ch-my-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.ch-my-hero-desc {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.92;
  line-height: 1.45;
}

.ch-my-hero-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ch-my-hero-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.ch-my-hero-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.85) 100%);
  transition: width 0.35s ease;
}

.ch-my-hero-progress-text {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.95;
  min-width: 32px;
  text-align: right;
}

.ch-my-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ch-my-hero-stat {
  text-align: center;
}

.ch-my-hero-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.ch-my-hero-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.88;
}

.ch-my-main {
  padding: 0 16px 8px;
}

.ch-my-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ch-my-entry {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: stretch;
  scroll-margin-top: 100px;
}

.ch-my-entry:target .ch-my-entry-card {
  box-shadow:
    0 0 0 2px rgba(255, 107, 74, 0.35),
    0 10px 28px rgba(255, 107, 74, 0.12);
}

.ch-my-entry-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 8px 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fff8f6 100%);
  border: 1px solid rgba(255, 107, 74, 0.12);
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.06);
}

.ch-my-entry-week {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
}

.ch-my-entry-md {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ch-my-entry-card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.ch-my-entry-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #ffb89a, #ff6b4a);
  opacity: 0.55;
}

.ch-my-entry.is-latest .ch-my-entry-card::before {
  opacity: 1;
}

.ch-my-entry-latest {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a65, #ff6b4a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.35);
}

.ch-my-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-right: 44px;
}

.ch-my-entry-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.ch-my-entry-day {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

.ch-my-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ch-my-pill--energy {
  background: rgba(255, 152, 0, 0.12);
  color: #e65100;
}

.ch-my-pill--energy svg {
  width: 12px;
  height: 12px;
}

.ch-my-pill--makeup {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.ch-my-entry-text {
  margin: 0 0 10px;
  padding-left: 2px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-800);
  white-space: pre-wrap;
}

.ch-my-entry-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8f6 0%, #fff 100%);
  border: 1px dashed rgba(255, 107, 74, 0.2);
  font-size: 14px;
  color: var(--gray-600);
}

.ch-my-entry-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 107, 74, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.ch-my-entry-images {
  margin-bottom: 10px;
}

.ch-my-entry-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}

.ch-my-entry-time {
  font-size: 12px;
  color: var(--gray-500);
}

.ch-my-entry-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-my-entry-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-500);
}

.ch-my-entry-meta-item svg {
  width: 14px;
  height: 14px;
}

.ch-my-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--white);
  border-radius: 18px;
  border: 1px dashed rgba(255, 107, 74, 0.18);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.ch-my-empty-art {
  font-size: 42px;
  margin-bottom: 12px;
  filter: grayscale(0.1);
}

.ch-my-empty-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-800);
}

.ch-my-empty-desc {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.6;
}

.calendar-day-mark {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 9px;
  line-height: 1;
  color: var(--primary);
  font-weight: 700;
}

.ch-bonus-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.ch-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.ch-upload-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  border: 2px dashed #e5e7eb;
  border-radius: 14px;
  background: #fafafa;
  font-size: 12px;
  color: var(--gray-700);
  cursor: pointer;
}

.ch-upload-tile.active {
  border-color: #ff6b4a;
  background: #fff8f5;
}

.ch-tile-icon {
  font-size: 26px;
}

.ch-upload-card .ch-btn-primary:not(.ch-btn-primary--block) {
  margin-top: 14px;
}

.ch-upload-panel {
  margin-bottom: 14px;
}

.ch-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 12px;
  font-size: 14px;
}

.ch-btn-primary {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7a45, #ff6b4a);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 107, 74, 0.35);
}

.ch-done-banner {
  text-align: center;
  padding: 20px;
  background: #ecfdf5;
  color: #059669;
  border-radius: 12px;
  font-weight: 600;
}

.ch-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.ch-stat-box {
  text-align: center;
  padding: 12px 8px;
  background: #fff8f5;
  border-radius: 12px;
}

.ch-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #ff6b4a;
}

.ch-stat-lbl {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.ch-energy-tip {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0;
}

.ch-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: 4px;
  font-weight: 600;
}

.ch-progress-card .ch-month-nav {
  margin-top: 12px;
}

.ch-month-week--mon .calendar-weekday {
  font-size: 12px;
}

.calendar-day.today:not(.checked) {
  box-shadow: inset 0 0 0 2px rgba(255, 107, 74, 0.45);
  font-weight: 700;
  color: var(--primary);
  border-radius: 50%;
}

.calendar-day.checked {
  position: relative;
  cursor: pointer;
  background: rgba(255, 107, 74, 0.14);
  color: var(--primary);
  font-weight: 600;
  border-radius: 50%;
}

.calendar-day.checked.today {
  background: rgba(255, 107, 74, 0.22);
  box-shadow: inset 0 0 0 2px rgba(255, 107, 74, 0.55);
}

.ch-month-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
}

.ch-month-week .calendar-weekday {
  font-size: 12px;
}

.ch-reaction-card {
  text-align: center;
}

.ch-reaction-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.ch-reaction-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}

.ch-reaction-desc {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 18px;
}

.ch-schulte-card {
  text-align: center;
  padding: 28px 20px 24px;
}

.ch-schulte-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.ch-schulte-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}

.ch-schulte-desc {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 16px;
}

.ch-schulte-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 220px;
  margin: 0 auto 14px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 74, 0.12);
}

.ch-schulte-preview-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  box-shadow: 0 2px 0 rgba(255, 107, 74, 0.15);
}

.ch-schulte-best-pill {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.1);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.ch-diff-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.ch-diff-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
  color: var(--gray-600);
  cursor: pointer;
}

.ch-diff-btn.active {
  border-color: #ff6b4a;
  color: #ff6b4a;
  font-weight: 600;
}

.ch-btn-dark {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: #1e293b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ch-record-list,
.ch-q-record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-record-item,
.ch-q-record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 12px;
  gap: 10px;
}

.ch-record-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.ch-record-acc {
  font-size: 14px;
  font-weight: 700;
  color: #22c55e;
}

.ch-empty-rec {
  text-align: center;
  color: var(--gray-400);
  font-size: 14px;
  padding: 16px;
}

.reaction-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.reaction-phase-flash,
.reaction-phase-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  text-align: center;
}

.reaction-input-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);
  margin: 0 auto;
}

.reaction-close,
.schulte-close,
.spotdiff-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 76px;
  height: 40px;
  padding: 0 14px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.reaction-close:active,
.schulte-close:active,
.spotdiff-close:active {
  transform: scale(0.96);
  filter: brightness(0.95);
}
.reaction-close__x,
.schulte-close__x,
.spotdiff-close__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.reaction-close {
  top: 16px;
  right: 16px;
}

/* 舒尔特：关闭钮独立顶栏，不压在橙色状态条上 */
.schulte-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -6px 0 10px;
  min-height: 40px;
}
.schulte-game .schulte-close {
  position: static;
  flex-shrink: 0;
}

.reaction-flash-num {
  font-weight: 800;
  color: #fff;
  text-align: center;
  max-width: 92%;
  line-height: 1.35;
  word-break: break-all;
  animation: reactionPulse 0.4s ease;
}

.reaction-flash-num--s {
  font-size: 48px;
  letter-spacing: 0.12em;
}

.reaction-flash-num--m {
  font-size: 34px;
  letter-spacing: 0.06em;
}

.reaction-flash-num--l {
  font-size: 26px;
  letter-spacing: 0.03em;
}

@keyframes reactionPulse {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.reaction-flash-tip {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin-top: 16px;
}

.reaction-input-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin: 0 0 20px;
  width: 100%;
  text-align: center;
}

.reaction-input {
  width: 100%;
  margin-top: 0;
  padding: 16px;
  font-size: clamp(18px, 4.5vw, 26px);
  text-align: center;
  letter-spacing: 0.06em;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.reaction-submit {
  width: 100%;
  margin-top: 24px;
}

.ch-schulte-meta {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
}

.ch-schulte-card .ch-hero-foot .ch-schulte-meta {
  margin-top: 0;
}
.ch-schulte-level-list { display: flex; flex-direction: column; gap: 10px; }
.ch-schulte-level-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; border: 1px solid #fed7aa; border-radius: 16px;
  background: #fff; text-align: left; cursor: pointer;
}
.ch-schulte-level-no {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff8f70, var(--primary));
  color: #fff; font-weight: 800; font-size: 15px;
}
.ch-schulte-level-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-schulte-level-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.ch-schulte-level-sub, .ch-schulte-level-meta { font-size: 12px; color: #64748b; }
.ch-schulte-level-go {
  flex-shrink: 0; padding: 8px 12px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
.schulte-level-label {
  margin: 0 0 10px; text-align: center; font-size: 14px; font-weight: 700; color: #9a3412;
}
.schulte-card--md { font-size: clamp(0.85rem, 3.2vw, 1.1rem); border-radius: 10px; }
.schulte-card--sm { font-size: clamp(0.7rem, 2.6vw, 0.95rem); border-radius: 8px; box-shadow: 0 2px 0 rgba(255, 107, 74, 0.18); }
.schulte-game--size-7 { width: min(100%, 480px); }
.schulte-grid--7 { gap: 5px; padding: 8px; }
.schulte-grid--6 { gap: 6px; padding: 10px; }
.schulte-grid--4 { gap: 10px; }

.schulte-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: linear-gradient(160deg, #fff8f3 0%, #ffe8dc 45%, #ffd4c4 100%);
}

.schulte-game {
  position: relative;
  width: min(100%, 420px);
  padding: 18px 16px 20px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 50px rgba(255, 107, 74, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.schulte-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff8f70 0%, var(--primary) 100%);
  color: #fff;
}

.schulte-status {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-weight: 700;
}

.schulte-status.is-done {
  background: rgba(255, 255, 255, 0.25);
}

.schulte-timer {
  flex: 1;
  min-width: 88px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.schulte-next,
.schulte-best {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
}

.schulte-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 74, 0.1);
}

.schulte-grid.is-win {
  animation: schulteWinPulse 0.45s ease-in-out 2;
}

@keyframes schulteWinPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

.schulte-card {
  aspect-ratio: 1;
  border: none;
  border-radius: 14px;
  background: #fff;
  color: var(--gray-800);
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(255, 107, 74, 0.18);
  transform: translateY(-1px);
  transition: transform 0.08s ease, background 0.08s ease, box-shadow 0.08s ease;
}

.schulte-card:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(255, 107, 74, 0.18);
}

.schulte-card.is-hit {
  background: #dcfce7;
  color: #166534;
}

.schulte-card.is-wrong {
  background: #fee2e2;
  color: #b91c1c;
  animation: schulteShake 0.18s ease;
}

.schulte-card.is-disabled {
  opacity: 0.65;
  cursor: default;
}

@keyframes schulteShake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.schulte-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.schulte-btn {
  flex: 1;
  padding: 11px 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.schulte-btn--new {
  background: linear-gradient(135deg, #ff8f70 0%, var(--primary) 100%);
  box-shadow: 0 4px 0 #d94f35;
}

.schulte-btn--reset {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 4px 0 #c27803;
}

.schulte-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.schulte-message {
  text-align: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 380px) {
  .schulte-grid {
    gap: 5px;
    padding: 8px;
  }
  .schulte-card {
    border-radius: 10px;
    font-size: 0.95rem;
  }
  .schulte-timer {
    font-size: 1.1rem;
  }
}

.ch-spotdiff-card { text-align: center; padding: 28px 20px 24px; }
.ch-spotdiff-icon { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.ch-spotdiff-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #0f766e; }
.ch-spotdiff-desc { margin: 0 auto 12px; max-width: 28em; color: #64748b; font-size: 14px; line-height: 1.55; }
.ch-spotdiff-meta { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #ccfbf1; color: #0f766e; font-size: 12px; font-weight: 700; }

.ch-question-card {
  text-align: center;
  padding: 28px 20px 24px;
}

.ch-question-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 10px;
}

.ch-question-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.ch-question-meta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffe4e6;
  color: #be123c;
  font-size: 12px;
  font-weight: 700;
}
.ch-spotdiff-level-list { display: flex; flex-direction: column; gap: 10px; }
.ch-spotdiff-level-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px; border: 1px solid #e2e8f0; border-radius: 16px;
  background: #fff; text-align: left; cursor: pointer;
}
.ch-spotdiff-level-thumb-wrap {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #f1f5f9;
}
.ch-spotdiff-level-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-spotdiff-level-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-spotdiff-level-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.ch-spotdiff-level-sub, .ch-spotdiff-level-hint { font-size: 12px; color: #64748b; }
.ch-spotdiff-level-go {
  flex-shrink: 0; padding: 8px 12px; border-radius: 999px;
  background: #0d9488; color: #fff; font-size: 13px; font-weight: 700;
}
.spotdiff-fullscreen {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: stretch; justify-content: center;
  padding: 12px; box-sizing: border-box; background: rgba(15, 23, 42, 0.92);
}
.spotdiff-game {
  position: relative; width: min(100%, 720px); max-height: 100%; overflow: auto;
  margin: auto; padding: 16px 14px 18px; border-radius: 20px; background: #fff;
}
.spotdiff-toolbar { padding-right: 96px; margin-bottom: 12px; }
.spotdiff-title { font-size: 17px; font-weight: 800; color: #0f172a; }
.spotdiff-progress-text { margin-top: 4px; font-size: 13px; color: #0d9488; font-weight: 700; }
.spotdiff-progress-bar { margin-top: 8px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.spotdiff-progress-fill { height: 100%; background: linear-gradient(90deg, #14b8a6, #0d9488); transition: width .2s ease; }
.spotdiff-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) {
  .spotdiff-pair { grid-template-columns: 1fr; }
}
.spotdiff-panel {
  position: relative; border-radius: 12px; overflow: hidden; border: 2px solid #e2e8f0;
  background: #f8fafc; cursor: crosshair; transition: border-color .15s ease;
}
.spotdiff-panel.spotdiff-miss { border-color: #f87171; animation: spotdiffShake .2s ease; }
@keyframes spotdiffShake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.spotdiff-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.spotdiff-marks { position: absolute; inset: 0; pointer-events: none; }
.spotdiff-mark {
  position: absolute; transform: translate(-50%, -50%);
  border: 2px solid #ef4444; border-radius: 50%; box-sizing: border-box;
  background: rgba(239, 68, 68, .15);
}
.spotdiff-mark.is-found { border-color: #16a34a; background: rgba(22, 163, 74, .18); }
.spotdiff-mark.is-hint {
  border-color: #f59e0b; background: rgba(245, 158, 11, .22);
  animation: spotdiffHintPulse 1s ease infinite;
}
@keyframes spotdiffHintPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: .75; }
}
.spotdiff-actions { margin-top: 12px; }
.spotdiff-btn {
  width: 100%; padding: 12px; border: none; border-radius: 14px;
  font-size: 14px; font-weight: 700; cursor: pointer; color: #fff;
}
.spotdiff-btn--hint { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.spotdiff-msg {
  margin-top: 10px; text-align: center; font-size: 13px; font-weight: 600; color: #64748b;
}

.video-preview-hint {
  font-size: 13px;
  color: var(--warning, #f59e0b);
  line-height: 1.5;
}

.chapter-item--preview {
  opacity: 0.95;
}

.ch-question-text {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
}

.ch-question-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 16px;
}

.ch-hint-bar {
  width: 3px;
  height: 14px;
  background: #ff6b4a;
  border-radius: 2px;
}

.ch-question-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-size: 15px;
  margin-bottom: 12px;
}

.ch-question-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.ch-question-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  margin: 0 auto 12px;
  max-width: 28em;
}

.ch-question-type-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
}

.ch-question-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.ch-question-choice-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--gray-800);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.ch-question-choice-opt.is-selected {
  border-color: var(--primary);
  background: rgba(255, 107, 74, 0.06);
}

.ch-question-choice-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
}

.ch-question-choice-opt.is-selected .ch-question-choice-check {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px #fff;
}

.ch-voice-answer-btn {
  width: 100%;
  padding: 14px;
  margin-bottom: 14px;
  border: 2px dashed #e5e7eb;
  border-radius: 14px;
  background: #fafafa;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
}

.ch-voice-answer-btn.active {
  border-color: #ff6b4a;
  background: #fff8f5;
}

.ch-change-q {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  background: none;
  color: #ff6b4a;
  font-size: 15px;
  font-weight: 600;
  padding: 4px;
  cursor: pointer;
}

.ch-q-record-q {
  flex: 1;
  font-size: 13px;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-q-grade {
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.ch-q-grade-correct { color: #22c55e; }
.ch-q-grade-partial { color: #f59e0b; }
.ch-q-grade-wrong { color: #ef4444; }

/* 打卡日历 */
.checkin-calendar {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin: var(--spacing-4);
}

.checkin-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--spacing-4);
  background: var(--primary-bg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
}

.checkin-stat {
  text-align: center;
}

.checkin-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary);
}

.checkin-stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* 打卡动态流 */
.checkin-feed {
  padding: var(--spacing-4);
}

.checkin-feed-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
}

.checkin-feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--gray-100);
}

.checkin-feed-content {
  flex: 1;
}

.checkin-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.checkin-feed-author {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.checkin-feed-date {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.checkin-feed-text {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: var(--line-height-base);
}

/* 打卡动态项 */
.checkin-post-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.checkin-post-header {
  margin-bottom: var(--spacing-3);
}

.checkin-post-content {
  margin-bottom: var(--spacing-3);
}

.checkin-post-content p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--gray-800);
}

.checkin-post-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.checkin-post-images.single {
  grid-template-columns: 1fr;
  max-width: 280px;
}

.checkin-post-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.2s;
}

.checkin-post-images.single .checkin-post-img {
  aspect-ratio: 4/3;
}

.checkin-post-img:hover {
  transform: scale(1.02);
}

/* 操作栏 */
.checkin-post-actions {
  display: flex;
  gap: var(--spacing-6);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--gray-100);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--gray-50);
}

.action-btn.active,
.action-btn.liked {
  color: var(--primary);
}

.action-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 评论预览 */
.checkin-post-comments-preview {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  margin-top: var(--spacing-3);
}

.comment-preview-item {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-2);
  cursor: pointer;
}

.comment-preview-item:last-child {
  margin-bottom: 0;
}

/* 评论容器 */
.ch-checkin-comment-sheet {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ch-checkin-comment-post {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.ch-checkin-comment-post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ch-checkin-comment-post-text {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.5;
  margin-bottom: 4px;
}

.ch-checkin-comment-input {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.ch-checkin-comment-input .comment-input {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--gray-200);
  border-radius: 22px;
  padding: 0 16px;
}

.ch-checkin-comment-send {
  min-width: 70px;
  min-height: 44px;
  border-radius: 22px;
}

.comments-container {
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--spacing-2) 0;
}

/* 评论项 */
.comment-item {
  padding: var(--spacing-3) 0;
}

.comment-main {
  display: flex;
  gap: var(--spacing-3);
}

.comment-body {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-1);
}

.comment-content {
  font-size: var(--font-size-base);
  color: var(--gray-800);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-2);
}

.comment-actions {
  display: flex;
  gap: var(--spacing-4);
}

.comment-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.comment-action-btn:hover {
  background: var(--gray-100);
}

.comment-action-btn.active,
.comment-action-btn.liked {
  color: var(--primary);
}

.action-icon-sm {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 回复列表 */
.comment-replies {
  margin-top: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.reply-item {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  line-height: var(--line-height-base);
  padding: var(--spacing-2) 0;
}

.reply-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-left: var(--spacing-2);
}

.reply-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--spacing-1);
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.reply-like-btn.active {
  color: var(--primary);
}

/* 评论输入栏 */
.comment-input-bar {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: var(--white);
  border-top: 1px solid var(--gray-100);
}

.comment-input {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  outline: none;
}

.comment-input:focus {
  border-color: var(--primary);
}

/* VIP徽章 */
.vip-badge {
  display: inline-block;
  padding: 2px var(--spacing-2);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: var(--white);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
}

/* 我的打卡记录样式 */
.my-checkin-list {
  max-height: 60vh;
  overflow-y: auto;
}

.my-checkin-item {
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  border: 1px solid var(--gray-100);
  transition: all var(--transition-normal);
}

.my-checkin-item.highlight {
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.1), rgba(255, 107, 74, 0.05));
  border: 2px solid var(--primary);
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.15);
}

.my-checkin-item.flash {
  animation: flashHighlight 1.5s ease-out;
}

@keyframes flashHighlight {
  0%, 100% { box-shadow: 0 4px 12px rgba(255, 107, 74, 0.15); }
  50% { box-shadow: 0 8px 24px rgba(255, 107, 74, 0.4); }
}

.my-checkin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.my-checkin-day {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--primary);
}

.my-checkin-time {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
}

.my-checkin-content {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-3);
}

.my-checkin-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.my-checkin-images.single {
  grid-template-columns: 1fr;
}

.my-checkin-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.my-checkin-stats {
  display: flex;
  gap: var(--spacing-4);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--gray-100);
}

.my-checkin-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.my-checkin-summary {
  text-align: center;
  padding: var(--spacing-3);
  font-size: var(--font-size-base);
  color: var(--gray-600);
  border-top: 1px solid var(--gray-100);
  margin-top: var(--spacing-2);
}

.highlight-text {
  color: var(--primary);
  font-weight: 600;
}

/* 日历点击效果 */
.calendar-day {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar-day:not(.other-month):hover {
  background: var(--gray-100);
}

.calendar-day.checked {
  cursor: pointer;
}

.calendar-day.checked:hover {
  background: rgba(255, 107, 74, 0.2);
}

/* 打卡弹窗样式 */
.checkin-type-tabs {
  display: flex;
  gap: var(--spacing-2);
  overflow-x: auto;
  padding-bottom: var(--spacing-2);
}

.type-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.type-tab svg {
  width: 18px;
  height: 18px;
}

.type-tab.active {
  background: var(--primary);
  color: var(--white);
}

.type-tab:hover:not(.active) {
  background: var(--gray-200);
}

/* 图片上传区域 */
.image-upload-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.image-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.image-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--gray-100);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.image-upload-btn .upload-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--spacing-1);
}

.image-upload-btn .upload-hint {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

/* 视频上传区域 */
.video-upload-area {
  width: 100%;
}

.video-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  background: var(--gray-100);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--gray-500);
}

.video-upload-btn .upload-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-2);
}

.video-upload-btn .upload-hint {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
}

.video-preview {
  text-align: center;
}

.video-remove-btn,
.voice-remove-btn {
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-md);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.video-remove-btn:hover,
.voice-remove-btn:hover {
  background: var(--gray-200);
}

/* 语音录制区域 */
.voice-record-area {
  text-align: center;
}

.voice-record-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  cursor: pointer;
  color: var(--gray-600);
  transition: all var(--transition-fast);
}

.voice-record-btn .record-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-2);
}

.voice-record-btn.recording {
  background: rgba(239, 68, 68, 0.1);
  border-color: #EF4444;
  color: #EF4444;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.voice-record-timer {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-700);
}

.voice-preview {
  padding: var(--spacing-4);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

.voice-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  justify-content: center;
}

.voice-preview-bar .voice-icon {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.voice-preview-bar .voice-duration {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-700);
}

/* 补卡日期选择 */
.makeup-date-list {
  padding: var(--spacing-2) 0;
}

.date-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}

.date-option-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.date-option-main {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}

.date-option-sub {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  line-height: 1.2;
}

.date-option-btn:hover {
  background: var(--gray-200);
}

.date-option-btn.active {
  background: rgba(255, 107, 74, 0.1);
  border-color: var(--primary);
}

.date-option-btn.active .date-option-main,
.date-option-btn.active .date-option-sub {
  color: var(--primary);
}

/* 打卡日期信息 */
.checkin-date-info,
.selected-date-info {
  padding: var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

/* 已打卡状态 */
.bg-green-50 {
  background: rgba(34, 197, 94, 0.1);
}

.text-green-600 {
  color: #16A34A;
}

/* ===== 活动报名模块样式 ===== */
.activity-list {
  padding: var(--spacing-3);
}

.activity-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-3);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.activity-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.activity-card .activity-cover {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  background-size: cover;
  background-position: center;
}

.activity-card .activity-cover .waterfall-type-tag {
  pointer-events: none;
  z-index: 3;
}

.activity-card .activity-status {
  position: absolute;
  top: 50%;
  right: var(--spacing-3);
  transform: translateY(-50%);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}

.status-open {
  background: rgba(34, 197, 94, 0.9);
  color: white;
}

.status-full {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

.status-ended {
  background: rgba(107, 114, 128, 0.9);
  color: white;
}

.activity-card .activity-info {
  padding: var(--spacing-4);
}

.activity-card .activity-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
  line-height: 1.4;
}

.activity-card .activity-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.activity-card .activity-meta span {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.activity-card .activity-meta svg {
  width: 14px;
  height: 14px;
}

.activity-card .activity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.activity-card .activity-price {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--primary);
}

.activity-card .activity-slots {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.slots-bar {
  width: 60px;
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}

.slots-progress {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
}

/* 活动详情页 */
.activity-detail-cover {
  height: 220px;
  background-size: cover;
  background-position: center;
}

.activity-detail-info {
  padding: var(--spacing-4);
}

.activity-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.activity-detail-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
  flex: 1;
}

.activity-detail-header .activity-status {
  flex-shrink: 0;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.activity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.activity-tag {
  padding: var(--spacing-1) var(--spacing-2);
  background: rgba(255, 107, 74, 0.1);
  color: var(--primary);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.activity-key-info {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
}

.info-item:not(:last-child) {
  border-bottom: 1px solid var(--gray-200);
}

.info-icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: 2px;
}

.info-value {
  font-size: var(--font-size-base);
  color: var(--gray-900);
}

.activity-price-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.1), rgba(255, 138, 107, 0.1));
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
}

.price-label {
  font-size: var(--font-size-base);
  color: var(--gray-600);
}

.price-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.price-free {
  color: #16A34A;
}

.price-cash {
  color: var(--primary);
}

.price-energy {
  color: var(--primary);
}

.price-or {
  color: var(--gray-500);
  margin: 0 var(--spacing-2);
  font-size: var(--font-size-base);
}

.price-unit {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.activity-section {
  margin-bottom: var(--spacing-4);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-3);
}

.activity-description {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.8;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3);
  background: var(--gray-50);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.session-item:hover {
  background: var(--gray-100);
}

.session-item.active {
  border-color: var(--primary);
  background: rgba(255, 107, 74, 0.1);
}

.session-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  color: var(--gray-900);
}

.session-time svg {
  width: 16px;
  height: 16px;
  color: var(--gray-500);
}

.session-slots {
  font-size: var(--font-size-sm);
  color: var(--primary);
  font-weight: 500;
}

.activity-images {
  display: flex;
  gap: var(--spacing-2);
  overflow-x: auto;
}

.activity-img {
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.activity-img:hover {
  transform: scale(1.05);
}

.organizer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.organizer-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-900);
  flex-shrink: 0;
}

.organizer-phone {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-left: auto;
  white-space: nowrap;
}

.organizer-phone svg {
  width: 14px;
  height: 14px;
}

.activity-deadline {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: #FEF3C7;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: #92400E;
  margin-bottom: var(--spacing-4);
}

.activity-deadline svg {
  width: 16px;
  height: 16px;
}

.activity-bottom-bar {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  z-index: 400;
}

/* 活动详情底栏：结构与课程详情 course-footer 一致（无点赞） */
.page-activity-detail .activity-detail-footer .course-footer-right {
  flex: 1;
  min-width: 0;
}

.page-activity-detail .activity-detail-footer .course-footer-right .btn-outline.btn-block {
  white-space: nowrap;
}

.page-activity-detail .activity-detail-footer .course-footer-right .btn-outline.btn-block:disabled {
  opacity: 0.55;
  color: var(--gray-500);
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.activity-bottom-price {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--primary);
}

.activity-register-btn {
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.activity-register-btn:hover:not(.disabled) {
  background: var(--primary-dark);
}

.activity-register-btn.disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

/* 报名表单样式 */
.register-form {
  padding: var(--spacing-4);
  padding-bottom: 140px;
}

.register-summary {
  padding: var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.summary-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

.summary-time,
.summary-location {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: var(--spacing-1);
}

.summary-time svg,
.summary-location svg {
  width: 14px;
  height: 14px;
}

.register-price-info {
  padding: var(--spacing-3);
  background: rgba(255, 107, 74, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.price-row,
.energy-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-base);
  color: var(--gray-700);
}

.energy-row {
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-2);
  border-top: 1px solid rgba(255, 107, 74, 0.2);
}

.price-amount {
  font-weight: 600;
  color: var(--primary);
}

.my-energy {
  font-weight: 600;
}

.energy-warning {
  margin-top: var(--spacing-2);
  padding: var(--spacing-2);
  background: #FEF3C7;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: #92400E;
  text-align: center;
}

.register-fields {
  margin-bottom: var(--spacing-4);
}

.register-fields-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--spacing-3);
}

.register-fields-empty {
  color: #9ca3af;
  font-size: 13px;
  margin: 0;
}

.form-field {
  margin-bottom: var(--spacing-4);
}

.field-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--spacing-2);
}

.field-label .required {
  color: #EF4444;
  margin-right: var(--spacing-1);
}

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--gray-900);
  transition: all var(--transition-fast);
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.1);
}

.field-textarea {
  min-height: 80px;
  resize: vertical;
}

.field-radio-group,
.field-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.radio-option input,
.checkbox-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.payment-method {
  margin-bottom: var(--spacing-4);
}

.method-label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--spacing-2);
}

.method-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.method-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: var(--gray-50);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.method-option:hover {
  background: var(--gray-100);
}

.method-option.active {
  border-color: var(--primary);
  background: rgba(255, 107, 74, 0.1);
}

.method-radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.method-option.active .method-radio {
  border-color: var(--primary);
  background: var(--primary);
}

.register-submit-btn {
  width: 100%;
  padding: var(--spacing-4);
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.register-submit-btn:hover:not(.disabled) {
  background: var(--primary-dark);
}

.register-submit-btn.disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

/* 核销码样式 */
.verify-code-container {
  padding: var(--spacing-4);
  text-align: center;
}

.verify-success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-4);
  color: #16A34A;
}

.verify-success-icon svg {
  width: 100%;
  height: 100%;
}

.verify-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

.verify-info {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-4);
}

.verify-info div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-1);
}

.verify-info svg {
  width: 14px;
  height: 14px;
}

.verify-code-box {
  padding: var(--spacing-4);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
}

.verify-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-2);
}

.verify-code-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 4px;
  word-break: break-all;
}

.verify-copy-btn {
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--primary);
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  font-size: 13px;
}

.verify-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0 16px;
}

.verify-qr-box {
  width: 180px;
  height: 180px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}

.verify-qr-box canvas,
.verify-qr-box img {
  width: 180px !important;
  height: 180px !important;
  display: block;
}

.verify-qr-hint {
  margin-top: 8px;
  font-size: 13px;
  color: #6b7280;
}

.verify-qr-empty {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  padding: 12px;
}

.verify-tip {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-4);
}

.verify-confirm-btn {
  width: 100%;
  padding: var(--spacing-3);
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
}

.verify-success-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verify-confirm-btn--ghost {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.activity-footer-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.activity-footer-btn {
  flex: 1;
  white-space: nowrap;
}

.my-regs-sheet {
  padding: 4px 4px 12px;
}

.my-regs-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px;
}

.my-regs-sheet-desc {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
}

.my-regs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow: auto;
}

.my-regs-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.my-regs-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.my-regs-item-idx {
  font-weight: 600;
  color: #111827;
}

.my-regs-item-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}

.my-regs-item-status.is-pending {
  background: #fff7ed;
  color: #ea580c;
}

.my-regs-item-status.is-done {
  background: #ecfdf5;
  color: #059669;
}

.my-regs-item-meta {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 10px;
}

.my-regs-item-form {
  margin-top: 4px;
  color: #6b7280;
}

.my-regs-continue {
  margin-top: 12px;
}
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
}

/* ===== 商城模块样式 ===== */
.mall-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--white);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--gray-100);
}

.mall-energy-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-lg);
  color: var(--white);
  margin: var(--spacing-4);
}

.mall-energy-info {
  display: flex;
  flex-direction: column;
}

.mall-energy-label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.mall-energy-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

.mall-energy-tip {
  font-size: var(--font-size-xs);
  padding: var(--spacing-2) var(--spacing-3);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
}

/* 商品列表 */
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  padding: var(--spacing-4);
}

.product-list > .empty-state {
  grid-column: 1 / -1;
  min-height: 42vh;
  width: 100%;
  box-sizing: border-box;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-card:active {
  transform: scale(0.98);
}

.product-card-cover {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.product-card-cover .product-type-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  pointer-events: none;
}

.product-type-tag--course {
  background: #22c55e;
}

.product-type-tag--physical,
.product-type-tag--default {
  background: #ff6b4a;
}

.product-type-tag--live {
  background: #8b5cf6;
}

.product-type-tag--success {
  background: #0ea5e9;
}

.product-image {
  width: 100%;
  aspect-ratio: var(--cover-aspect-ratio);
  object-fit: cover;
  background: var(--gray-100);
  display: block;
}


/* 能量商城 - 分割价格条 */
.mall-price-wrap {
  width: 100%;
}

.mall-price-wrap--card {
  margin-top: var(--spacing-1);
}

.mall-price-original {
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.2;
  margin-bottom: 6px;
  text-decoration: line-through;
}

.mall-price-badge {
  display: grid;
  grid-template-columns: 11fr 9fr;
  align-items: stretch;
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  overflow: hidden;
  min-height: 56px;
  box-shadow: 0 2px 10px rgba(255, 107, 74, 0.1);
}

.mall-price-badge-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 8px 20px 8px 10px;
  background: linear-gradient(135deg, #FFF8F5 0%, #FFF0EB 100%);
  min-width: 0;
}

.mall-price-badge-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--primary-dark);
  line-height: 1;
  opacity: 0.85;
}

.mall-price-amount {
  display: flex;
  align-items: baseline;
  color: var(--primary-dark);
  font-weight: 700;
  line-height: 1;
}

.mall-price-yen {
  font-size: 12px;
  margin-right: 1px;
}

.mall-price-int {
  font-size: 22px;
  letter-spacing: -0.5px;
}

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

.mall-price-badge-seam {
  position: absolute;
  left: 55%;
  top: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mall-price-energy-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(255, 107, 74, 0.15);
  box-shadow: 0 2px 6px rgba(255, 107, 74, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.mall-price-energy-icon svg {
  width: 14px;
  height: 14px;
}

.mall-price-badge-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px 6px 18px;
  background: linear-gradient(160deg, #FF6B4A 0%, #FF8A6B 100%);
  min-width: 0;
  text-align: center;
}

.mall-price-deduct-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  line-height: 1;
}

.mall-price-deduct-tag {
  flex-shrink: 0;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  line-height: 1.2;
}

.mall-price-deduct-text {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  white-space: nowrap;
}

.mall-price-deduct-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mall-price-deduct-yen {
  font-size: 10px;
  margin-right: 1px;
}

.mall-price-deduct-int {
  font-size: 16px;
  letter-spacing: -0.3px;
}

.mall-price-deduct-dec {
  font-size: 11px;
  font-weight: 700;
}

.mall-price-wrap--detail .mall-price-original {
  font-size: var(--font-size-sm);
  margin-bottom: 8px;
}

/* 列表卡片：紧凑字号，右侧固定比例 */
.mall-price-wrap--card .mall-price-badge {
  grid-template-columns: 11fr 9fr;
  min-height: 54px;
}

.mall-price-wrap--card .mall-price-int {
  font-size: 18px;
}

.mall-price-wrap--card .mall-price-dec {
  font-size: 11px;
}

.mall-price-wrap--card .mall-price-badge-left {
  padding: 7px 18px 7px 8px;
}

.mall-price-wrap--card .mall-price-badge-right {
  padding: 5px 6px 5px 16px;
  gap: 3px;
}

.mall-price-wrap--card .mall-price-deduct-int {
  font-size: 14px;
}

.mall-price-wrap--card .mall-price-deduct-dec {
  font-size: 10px;
}

.mall-price-wrap--card .mall-price-deduct-text {
  font-size: 9px;
}

.mall-price-wrap--card .mall-price-energy-icon {
  width: 26px;
  height: 26px;
}

.mall-price-wrap--detail .mall-price-badge {
  grid-template-columns: 12fr 10fr;
  min-height: 64px;
  max-width: 100%;
}

.mall-price-wrap--detail .mall-price-int {
  font-size: 26px;
}

.mall-price-wrap--detail .mall-price-dec {
  font-size: 15px;
}

.mall-price-wrap--detail .mall-price-deduct-int {
  font-size: 18px;
}

.mall-price-wrap--detail .mall-price-deduct-dec {
  font-size: 12px;
}

.mall-price-wrap--detail .mall-price-energy-icon {
  width: 32px;
  height: 32px;
}

/* 商品详情（布局对齐课程详情页） */
.page-mall-detail .product-detail-header {
  background: var(--black);
}

.page-mall-detail .product-detail-gallery {
  position: relative;
  overflow: hidden;
}

.page-mall-detail .product-detail-cover-tag {
  position: absolute;
  top: 12px;
  left: 52px;
  z-index: 12;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.page-mall-detail .product-detail-dots--overlay {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  z-index: 11;
}

.page-mall-detail .product-detail-dots--overlay .product-detail-dot {
  background: rgba(255, 255, 255, 0.45);
}

.page-mall-detail .product-detail-dots--overlay .product-detail-dot.active {
  background: var(--white);
}

.mall-detail-subtitle {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-500);
}

.mall-detail-panel {
  margin-top: 20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.mall-detail-panel-section {
  padding: 16px;
}

.mall-detail-panel-section--notice {
  background: linear-gradient(180deg, #fffaf8 0%, #fff5f2 100%);
}

.mall-detail-panel-divider {
  height: 1px;
  margin: 0 16px;
  background: var(--gray-100);
}

.mall-detail-panel-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}

.mall-detail-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mall-detail-audience-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  line-height: 1.2;
}

.mall-detail-audience-tag.is-primary {
  color: var(--primary);
  background: rgba(255, 107, 74, 0.08);
  border-color: rgba(255, 107, 74, 0.22);
}

.mall-detail-notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mall-detail-notice-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  background: rgba(255, 107, 74, 0.12);
  border-radius: 50%;
}

.mall-detail-notice-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.3;
}

.mall-detail-notice-text {
  margin: 0;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.65;
}

.mall-detail-notice-sub {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 107, 74, 0.2);
  font-size: 13px;
  color: #c2410c;
  line-height: 1.55;
}

.mall-detail-price {
  margin-bottom: 14px;
}

.mall-detail-stats {
  flex-wrap: wrap;
  row-gap: 8px;
}

.mall-energy-tip {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff8f5 0%, #ffede6 100%);
  border: 1px solid rgba(255, 107, 74, 0.18);
}

.mall-energy-tip-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #c2410c;
}

.mall-energy-tip-title strong {
  color: var(--primary);
}

.mall-energy-tip-desc {
  margin: 0;
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
}

.product-detail-body {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.65;
}

.product-detail-body p {
  margin: 0 0 12px;
}

.product-detail-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gray-100);
}

.product-detail-specs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.product-detail-specs li span {
  color: var(--gray-500);
}

.product-detail-specs li strong {
  color: var(--gray-800);
  font-weight: 600;
  text-align: right;
}

.page-mall-detail .mall-detail-footer .course-footer-right {
  flex: 1;
  min-width: 0;
}

.product-detail-gallery {
  position: relative;
  overflow: hidden;
}

.product-detail-swiper {
  display: flex;
  transition: transform 0.3s ease;
}

.product-detail-slide {
  flex-shrink: 0;
  width: 100%;
}

.product-detail-image {
  width: 100%;
  aspect-ratio: var(--cover-aspect-ratio);
  object-fit: cover;
  background: var(--gray-100);
}

.product-detail-dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: var(--white);
}

.product-detail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-detail-dot.active {
  background: var(--primary);
  width: 24px;
  border-radius: 4px;
}

.product-detail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: var(--gray-700);
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-md);
}

.product-detail-nav:hover {
  background: var(--white);
}

.product-detail-nav-prev {
  left: var(--spacing-3);
}

.product-detail-nav-next {
  right: var(--spacing-3);
}

.product-detail-info {
  padding: var(--spacing-4);
  background: var(--white);
}

.product-detail-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

.product-detail-price {
  flex: 1;
  min-width: 0;
  margin-bottom: var(--spacing-2);
}

.product-detail-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-6);
  padding: var(--spacing-2) 0;
}

.product-detail-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  cursor: pointer;
  background: transparent;
  border: none;
}

.product-detail-action-btn:hover {
  background: var(--gray-100);
}

.product-detail-action-btn svg {
  width: 24px;
  height: 24px;
  color: var(--gray-500);
}

.product-detail-action-btn:hover svg {
  color: var(--primary);
}

.product-detail-action-btn span {
  font-size: 12px;
  color: var(--gray-500);
}

/* 商品详情底部栏 */
.product-bottom-bar {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  background: white;
  padding: var(--spacing-3) var(--spacing-4);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  z-index: 400;
  display: flex;
  justify-content: center;
}

/* 兑换确认页 */
.exchange-confirm {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin: var(--spacing-4);
}

.exchange-item {
  display: flex;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: var(--spacing-4);
}

.exchange-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--gray-100);
}

.exchange-item-info {
  flex: 1;
}

.exchange-item-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: var(--spacing-2);
}

.exchange-item-spec {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.exchange-summary {
  padding: var(--spacing-4);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.exchange-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-base);
}

.exchange-row:last-child {
  margin-bottom: 0;
}

.exchange-row-label {
  color: var(--gray-600);
}

.exchange-row-value {
  font-weight: 500;
  color: var(--gray-800);
}

.exchange-row-value.highlight {
  color: var(--primary);
}

/* 配送方式 */
.delivery-options {
  margin-top: var(--spacing-4);
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.delivery-option.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.delivery-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-option.selected .delivery-radio {
  border-color: var(--primary);
  background: var(--primary);
}

.delivery-option.selected .delivery-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
}

.delivery-info {
  flex: 1;
}

.delivery-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.delivery-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.delivery-price {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--primary);
}

/* ===== 个人中心样式 ===== */
.page-profile .profile-menu {
  box-shadow: 0 2px 16px rgba(255, 107, 74, 0.06);
}

.page-profile .profile-assets {
  box-shadow: 0 4px 20px rgba(30, 58, 95, 0.08);
}

.profile-login-logo {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  object-fit: contain;
}

/* 个人中心顶部：左头像 + 右昵称/个签/成就图标 */
.page-profile .profile-hero {
  margin: 0 var(--spacing-4) var(--spacing-3);
  padding: var(--spacing-3) 0 var(--spacing-2);
}

.page-profile .profile-card {
  background: var(--white);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.1);
  color: var(--text-primary);
}

.page-profile .profile-top {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.page-profile .profile-avatar-wrap {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  text-decoration: none;
}

.page-profile .profile-avatar {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  min-height: 72px;
  max-width: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid rgba(15, 23, 42, 0.06);
  background: var(--gray-100);
  display: block;
}

.page-profile .profile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  min-height: 72px;
}

.page-profile .profile-name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
  flex-shrink: 0;
  min-height: 22px;
}

.page-profile .profile-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-profile .profile-switch-btn {
  flex-shrink: 0;
  border: 1px solid var(--gray-300);
  background: var(--white);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--gray-600);
  cursor: pointer;
  line-height: 1.3;
}

.page-profile .profile-sign-row {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--gray-500);
  margin-bottom: 0;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.page-profile .profile-sign-edit {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #60a5fa;
}

.page-profile .profile-sign-edit svg {
  width: 16px;
  height: 16px;
}

.page-profile .profile-sign-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 8px;
}

.profile-edit-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.profile-edit-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-100);
  box-shadow: 0 4px 14px rgba(255, 107, 74, 0.18);
}

.profile-edit-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  background: linear-gradient(145deg, rgba(255, 107, 74, 0.12) 0%, rgba(255, 138, 101, 0.2) 100%);
}

.profile-edit-avatar-tip {
  font-size: 13px;
  color: var(--primary);
}

.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-edit-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.profile-edit-input,
.profile-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--gray-900);
  background: var(--white);
}

.profile-edit-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.profile-edit-input:focus,
.profile-edit-textarea:focus {
  outline: none;
  border-color: rgba(255, 107, 74, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.12);
}

.page-profile {
  color-scheme: light;
}

.page-profile .profile-status-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0;
  background: transparent center/cover no-repeat;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-profile .profile-status-icons::-webkit-scrollbar {
  display: none;
}

.page-profile .profile-status-icons--has-bg {
  background-color: transparent;
  min-width: 0;
  justify-content: flex-start;
}

.page-profile .profile-status-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none !important;
}

.page-profile .profile-status-icon--png {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.page-profile .profile-status-icon--png img {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
  object-fit: contain;
  display: block;
  background: transparent !important;
}

/* 旧版渐变头部（兼容） */
.profile-header {
  padding: var(--spacing-6) var(--spacing-4);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
}

.profile-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* 年费会员徽章 - 统一样式基础 */
.profile-vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--spacing-2);
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  transition: all 0.2s ease;
}

/* 年费会员标签 - 金色尊贵 */
.profile-vip-badge.is-vip {
  background: linear-gradient(135deg, #FFD700 0%, #FFC107 50%, #FFB300 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-vip-badge.is-vip svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

/* 加入年费会员按钮 - 珊瑚橙显眼 */
.profile-vip-badge.is-btn {
  background: linear-gradient(135deg, #FF6B4A 0%, #FF8A65 50%, #FF7043 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255, 107, 74, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-vip-badge.is-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 74, 0.6);
}

.profile-vip-badge.is-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.5);
}

.profile-vip-badge.is-btn svg {
  width: 18px;
  height: 18px;
}

/* 旧样式兼容 */
.profile-vip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-2);
  padding: 8px 20px;
  background: linear-gradient(135deg, #FFD700 0%, #FFC107 50%, #FFB300 100%);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.profile-vip svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.profile-vip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-2);
  padding: 8px 20px;
  background: linear-gradient(135deg, #FF6B4A 0%, #FF8A65 50%, #FF7043 100%);
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255, 107, 74, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.profile-vip-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 74, 0.6);
}

.profile-vip-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.5);
}

.profile-vip-btn svg {
  width: 18px;
  height: 18px;
}

/* 资产栏 */
.profile-assets {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4) var(--spacing-3);
  margin: 0 var(--spacing-4);
  margin-top: calc(var(--spacing-4) * -1);
  box-shadow: var(--shadow-md);
}

.profile-asset {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-2);
  min-height: 72px;
  text-align: center;
}

.profile-asset:not(:last-child) {
  border-right: 1px solid var(--gray-200);
}

.profile-asset-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 0;
}

.profile-asset-reward .profile-asset-value,
.profile-asset-reward .profile-asset-label {
  color: #07C160;
}

.profile-asset-reward .profile-asset-arrow {
  color: #07C160;
  opacity: 0.45;
}

.profile-asset-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.profile-asset-label {
  font-size: var(--font-size-sm);
  line-height: 1.25;
  color: var(--gray-500);
  margin-top: 0;
}

.profile-asset-action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--primary);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--white);
  cursor: pointer;
  pointer-events: auto;
}
.profile-asset-action:active {
  transform: scale(0.95);
}

/* 申请领取按钮 - 独立样式 */
.profile-withdraw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  background: linear-gradient(135deg, #FF6B4A 0%, #FF8A65 100%);
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 107, 74, 0.4);
  transition: all 0.2s ease;
}

.profile-withdraw-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 74, 0.5);
}

.profile-withdraw-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 107, 74, 0.4);
}

.profile-withdraw-btn svg {
  width: 18px;
  height: 18px;
}

.profile-asset.clickable {
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.profile-asset.clickable:active {
  background: var(--gray-50);
}

.profile-asset-arrow {
  position: static;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transform: none;
}

.profile-asset-arrow svg {
  width: 16px;
  height: 16px;
}

/* 垂直菜单项 */
.profile-menu-item-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-menu-item-vertical:active {
  background: var(--gray-50);
}

.profile-menu-icon-top {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.1), rgba(255, 138, 107, 0.1));
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
  color: var(--primary);
}

.profile-menu-icon-top svg {
  width: 22px;
  height: 22px;
}

.profile-menu-icon-top .profile-menu-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* 订单入口：主题色图标底 + 白色线条 */
.profile-menu--order .profile-menu-icon-top {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.25);
}

.profile-menu--order .profile-menu-icon-top svg {
  stroke: #fff;
}

.profile-menu-text {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* 我的页功能入口网格 */
.profile-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
  padding: var(--spacing-2) var(--spacing-1);
}

/* 订单入口：单行 4 列自适应 */
.profile-menu-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 4px;
}

.profile-menu-grid--4 .profile-menu-item-vertical {
  min-width: 0;
  padding: var(--spacing-3) 2px;
}

.profile-menu-grid--4 .profile-menu-icon-top {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
}

.profile-menu-grid--4 .profile-menu-icon-top svg {
  width: 20px;
  height: 20px;
}

.profile-menu-grid--4 .profile-menu-icon-top .profile-menu-icon-img {
  width: 20px;
  height: 20px;
}

.profile-menu-grid--4 .profile-menu-text {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.profile-menu-grid .profile-menu-item-vertical {
  padding: var(--spacing-3) var(--spacing-1);
  border-radius: var(--radius-md);
}

.profile-menu-grid .profile-menu-text {
  font-size: 13px;
}

/* 功能入口 */
.profile-menu {
  background: var(--white);
  border-radius: var(--radius-lg);
  margin: var(--spacing-4);
  overflow: hidden;
}

.profile-menu-group {
  padding: var(--spacing-2);
}

.profile-menu-group:not(:last-child) {
  border-bottom: 1px solid var(--gray-100);
}

.profile-menu-group-title {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  padding: var(--spacing-2) var(--spacing-3);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-menu-item:active {
  background: var(--gray-50);
}

.profile-menu-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  color: var(--gray-600);
  font-size: 20px;
}

.profile-menu-content {
  flex: 1;
}

.profile-menu-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.profile-menu-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: 2px;
}

.profile-menu-item--switch {
  cursor: default;
}

.profile-menu-item--switch .switch {
  flex-shrink: 0;
  margin-left: auto;
}

.page-notifications .notify-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 4px 8px;
}

.page-notifications .notify-list-title {
  font-size: var(--font-size-md, 15px);
  font-weight: 600;
  color: var(--gray-800, #222);
}

.page-notifications .notify-unread-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 9px;
  background: #e54d42;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

.page-notifications .notify-mark-all {
  border: none;
  background: transparent;
  color: var(--primary, #1e9fff);
  font-size: 13px;
  padding: 4px 0;
}

.page-notifications .notify-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-notifications .notify-item {
  background: #fff;
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.page-notifications .notify-item.is-unread {
  border-left: 3px solid var(--primary, #1e9fff);
}

.page-notifications .notify-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.page-notifications .notify-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900, #111);
  flex: 1;
}

.page-notifications .notify-item.is-unread .notify-item-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e54d42;
  margin-right: 6px;
  vertical-align: middle;
}

.page-notifications .notify-item-time {
  font-size: 12px;
  color: var(--gray-400, #999);
  white-space: nowrap;
}

.page-notifications .notify-item-body {
  font-size: 13px;
  color: var(--gray-600, #666);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.page-notifications .notify-empty {
  text-align: center;
  color: var(--gray-400, #999);
  padding: 32px 12px;
  font-size: 14px;
}

.page-notifications .notify-load-more {
  display: block;
  width: 100%;
  margin: 12px 0 8px;
  border: none;
  background: transparent;
  color: var(--gray-500, #888);
  font-size: 13px;
  padding: 10px;
}

/* ===== VIP 六维报告 ===== */
.page-vip-report .vip-report-body {
  padding: 12px 16px 28px;
}

.page-vip-report .vip-report-loading,
.page-vip-report .vip-report-empty {
  text-align: center;
  color: var(--gray-400, #999);
  padding: 48px 12px;
  font-size: 14px;
}

.page-vip-report .vip-report-hero {
  background: linear-gradient(145deg, #1e3a5f 0%, #2e5a8f 55%, #3d7ab5 100%);
  color: #fff;
  border-radius: 16px;
  padding: 20px 18px 18px;
  margin-bottom: 14px;
}

.page-vip-report .vip-report-period {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.page-vip-report .vip-report-hello {
  font-size: 18px;
  font-weight: 600;
}

.page-vip-report .vip-report-avg {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.95;
}

.page-vip-report .vip-report-avg strong {
  font-size: 28px;
  font-weight: 700;
  margin-left: 4px;
}

.page-vip-report .vip-report-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.page-vip-report .vip-report-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
}

.page-vip-report .vip-radar-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.page-vip-report .vip-radar-svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-vip-report .vip-radar-grid {
  fill: none;
  stroke: #e8edf3;
  stroke-width: 1;
}

.page-vip-report .vip-radar-axis {
  stroke: #e8edf3;
  stroke-width: 1;
}

.page-vip-report .vip-radar-area {
  fill: rgba(62, 140, 200, 0.28);
  stroke: #2e5a8f;
  stroke-width: 2;
}

.page-vip-report .vip-radar-label {
  font-size: 11px;
  fill: #555;
}

.page-vip-report .vip-radar-score {
  font-size: 11px;
  font-weight: 700;
  fill: #1e3a5f;
}

.page-vip-report .vip-hex-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 4px;
}

.page-vip-report .vip-hex-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
}

.page-vip-report .vip-hex-legend-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-vip-report .vip-hex-legend-item strong {
  margin-left: auto;
  color: #222;
}

.page-vip-report .vip-report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.page-vip-report .vip-stat {
  background: #fff;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.page-vip-report .vip-stat .num {
  font-size: 18px;
  font-weight: 700;
  color: #1e3a5f;
}

.page-vip-report .vip-stat .lab {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.page-vip-report .vip-report-li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.page-vip-report .vip-report-li:last-child {
  border-bottom: none;
}

.page-vip-report .vip-report-li-title {
  font-size: 13px;
  color: #222;
  font-weight: 500;
}

.page-vip-report .vip-report-li-meta {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.page-vip-report .vip-report-empty-inline {
  font-size: 13px;
  color: #999;
  padding: 8px 0;
}

.page-vip-report .vip-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-vip-report .vip-skill-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: color-mix(in srgb, var(--skill-color, #64748B) 14%, #fff);
  color: var(--skill-color, #64748B);
  border: 1px solid color-mix(in srgb, var(--skill-color, #64748B) 28%, #fff);
}

.page-vip-report .vip-insight-list {
  margin: 0;
  padding-left: 18px;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}

.page-vip-report .vip-insight-list li {
  margin-bottom: 6px;
}

.page-vip-report .vip-suggest-hint {
  font-size: 12px;
  color: #999;
  margin: -4px 0 10px;
}

.page-vip-report .vip-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-vip-report .vip-suggest-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid #eef2f7;
}

.page-vip-report .vip-suggest-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.page-vip-report .vip-suggest-badge {
  flex-shrink: 0;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #e8eef5;
  color: #3d5a80;
}

.page-vip-report .vip-suggest-badge--grade {
  background: #e8f5e9;
  color: #2e7d32;
}

.page-vip-report .vip-suggest-badge--habit {
  background: #fff3e0;
  color: #ef6c00;
}

.page-vip-report .vip-suggest-badge--report {
  background: #e3f2fd;
  color: #1565c0;
}

.page-vip-report .vip-suggest-title {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

.page-vip-report .vip-suggest-text {
  font-size: 13px;
  color: #555;
  line-height: 1.55;
}

.profile-menu-arrow {
  color: var(--gray-400);
}

/* ===== 邀请奖励页 ===== */
.page-invite .bottom-nav,
.page-invite .page-header {
  display: none;
}

.page-invite {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + var(--safe-area-bottom));
  background: linear-gradient(180deg, #1e3a5f 0%, #2e5a8f 140px, #f7f8fa 240px, #f7f8fa 100%);
}

.invite-hero {
  position: relative;
  margin: 0 16px 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(30, 58, 95, 0.25);
}

.invite-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(255, 107, 74, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #1e3a5f 0%, #2e5a8f 100%);
}

.invite-hero-inner {
  position: relative;
  padding: 20px 18px 18px;
  color: #fff;
}

.invite-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.invite-hero-desc {
  margin: 0 0 16px;
  font-size: 13px;
  opacity: 0.88;
  line-height: 1.45;
}

.invite-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.invite-hero-stat {
  text-align: center;
}

.invite-hero-stat-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.invite-hero-stat-label {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 4px;
}

.invite-main {
  padding: 0 16px 8px;
}

.invite-panel {
  background: var(--white);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.invite-panel--members {
  margin-top: 0;
}

.invite-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.invite-panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.invite-panel-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}

.invite-member-table {
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  overflow: hidden;
}

.invite-member-thead,
.invite-member-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.9fr 0.7fr;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  font-size: 12px;
}

.invite-member-table--simple .invite-member-thead,
.invite-member-table--simple .invite-member-row {
  grid-template-columns: 1fr auto;
}

.invite-member-table--simple .invite-member-row .col-user {
  gap: 10px;
}

.invite-referral-panel {
  min-height: 120px;
}

.invite-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.invite-pager-btn {
  padding: 6px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-700);
  font-size: 13px;
  cursor: pointer;
}

.invite-pager-btn.is-disabled,
.invite-pager-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.invite-pager-info {
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 600;
}

.invite-pager-total {
  font-size: 12px;
  color: var(--gray-400);
}

.invite-pager-loading {
  padding: 24px;
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
}

.invite-member-thead {
  background: var(--gray-50);
  color: var(--gray-500);
  font-weight: 600;
}

.invite-member-row:not(:last-child) {
  border-bottom: 1px solid var(--gray-100);
}

.invite-member-row .col-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.invite-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.invite-member-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invite-member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-member-sub {
  font-size: 11px;
  color: var(--gray-400);
}

.invite-member-row .col-time {
  color: var(--gray-600);
  text-align: center;
}

.invite-member-row .col-reward {
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

.invite-member-row .col-status {
  text-align: center;
}

.invite-status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.invite-status-tag--active {
  background: #ecfdf5;
  color: #16a34a;
}

.invite-status-tag--pending {
  background: #fff7ed;
  color: #ea580c;
}

.invite-action-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.invite-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, opacity 0.15s;
}

.invite-action-btn:active {
  transform: scale(0.98);
  opacity: 0.92;
}

.invite-action-btn--primary {
  background: linear-gradient(135deg, #ff6b4a, #ff8a6e);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 107, 74, 0.3);
}

.invite-action-btn--outline {
  background: var(--white);
  color: var(--primary);
  border: 2px solid var(--primary);
}

.invite-action-icon svg {
  width: 20px;
  height: 20px;
}

.invite-rules {
  list-style: none;
  margin: 0;
  padding: 0;
}

.invite-rules li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.55;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

.invite-rules li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.invite-rule-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-reward-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.invite-reward-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.invite-reward-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.invite-reward-desc {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.4;
}

.invite-reward-time {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 4px;
}

.invite-reward-amount {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

.invite-empty {
  text-align: center;
  padding: 32px 16px;
  font-size: 14px;
  color: var(--gray-400);
}

/* 会员中心 */
.vip-benefits {
  padding: var(--spacing-4);
}

.vip-benefit {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
}

.vip-benefit-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-size: 24px;
}

.vip-benefit-content {
  flex: 1;
}

.vip-benefit-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.vip-benefit-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.order-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin: var(--spacing-3);
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--gray-100);
}

.order-no {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.order-status {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--primary);
}

.order-item {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.order-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--gray-100);
}

.order-item-info {
  flex: 1;
}

.order-item-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: var(--spacing-2);
}

.order-item-spec {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--gray-100);
}

.order-total {
  font-size: var(--font-size-base);
  color: var(--gray-800);
}

.order-total-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary);
}

.order-actions {
  display: flex;
  gap: var(--spacing-2);
}

/* ===== 活动报名（场次选择等） ===== */
/* 场次选择 */
.session-list {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  margin: var(--spacing-4);
}

.session-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.session-item.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.session-time {
  flex: 1;
}

.session-date {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.session-time-text {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.session-stock {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* 报名表单 */
.signup-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin: var(--spacing-4);
}

.form-item {
  margin-bottom: var(--spacing-4);
}

.form-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
  margin-bottom: var(--spacing-2);
}

.form-required {
  color: var(--error);
}

/* 支付方式选择 */
.payment-options {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin: var(--spacing-4);
}

.payment-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.payment-option.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.payment-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius-md);
}

.payment-info {
  flex: 1;
}

.payment-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
}

.payment-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.payment-price {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary);
}

/* 年级绑定弹窗（首次 / 未绑定） */
.grade-bind-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.grade-bind-panel {
  width: 100%;
  max-width: 400px;
  max-height: min(88vh, 640px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.grade-bind-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: center;
  margin: 0 0 8px;
}

.grade-bind-desc {
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 16px;
}

.grade-bind-body {
  margin-bottom: 16px;
}

.grade-bind-group + .grade-bind-group {
  margin-top: 12px;
}

.grade-bind-group-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
  padding-left: 4px;
}

.grade-bind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.grade-bind-item {
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 10px;
  padding: 10px 4px;
  font-size: 14px;
  color: var(--gray-800);
  cursor: pointer;
}

.grade-bind-item.active {
  border-color: var(--primary);
  background: rgba(255, 107, 74, 0.08);
  color: var(--primary);
  font-weight: 600;
}

.grade-bind-confirm {
  margin-top: 4px;
}

body.grade-bind-open {
  overflow: hidden;
}

/* 孩子管理页 */
.child-manage {
  padding: var(--spacing-6);
}

.child-manage-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  text-align: center;
  margin-bottom: var(--spacing-2);
}

.child-manage-desc {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  text-align: center;
  margin-bottom: var(--spacing-6);
}

/* ===== 专家咨询页（沉稳学术色）===== */
.page-consult .page-header,
.page-consult-detail .page-header {
  display: none;
}

.page-consult,
.page-consult-detail {
  --consult-ink: #1a2836;
  --consult-slate: #2c4054;
  --consult-gold: #b8922a;
  --consult-gold-deep: #8b6914;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + var(--safe-area-bottom, 0px));
  background: linear-gradient(180deg, var(--consult-ink) 0%, #3d5266 150px, #eef1f4 280px, #eef1f4 100%);
}

.page-consult-detail {
  padding-bottom: calc(88px + var(--safe-area-bottom, 0px));
  background: linear-gradient(180deg, var(--consult-ink) 0%, #354a5e 200px, #eef1f4 300px, #eef1f4 100%);
}

.consult-back {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.consult-back svg {
  width: 20px;
  height: 20px;
}

.consult-back--light {
  background: rgba(0, 0, 0, 0.15);
}

.consult-hero {
  position: relative;
  margin: 0 16px 14px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 40, 54, 0.22);
}

.consult-hero-bg,
.consult-detail-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 100% 0%, rgba(201, 168, 76, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 45% 40% at 0% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    linear-gradient(145deg, #1a2836 0%, #2c4054 48%, #3d5266 100%);
}

.consult-hero-inner {
  position: relative;
  padding: 22px 20px 20px;
  color: #fff;
}

.consult-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.consult-hero-desc {
  margin: 0 0 14px;
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.5;
}

.consult-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consult-hero-tags span {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.18);
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: rgba(255, 248, 230, 0.95);
}

.consult-main,
.consult-detail-main {
  padding: 0 16px 8px;
}

.consult-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 14px 12px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.consult-stat {
  text-align: center;
}

.consult-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.consult-stat-label {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gray-500);
}

.consult-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.consult-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-500);
  background: var(--white);
  border-radius: 16px;
}

.consult-expert-card {
  background: var(--white);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.consult-expert-top {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.consult-expert-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(184, 146, 42, 0.25);
}

.consult-expert-main {
  flex: 1;
  min-width: 0;
}

.consult-expert-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.consult-expert-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.consult-expert-price {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--consult-gold-deep, #8b6914);
}

.consult-expert-price small {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-500);
}

.consult-expert-title {
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
}

.consult-expert-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--gray-600);
}

.consult-expert-rating {
  color: #f59e0b;
  font-weight: 500;
}

.consult-expert-tags,
.consult-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.consult-expert-tag {
  padding: 3px 8px;
  font-size: 11px;
  color: var(--consult-gold-deep, #8b6914);
  background: rgba(184, 146, 42, 0.12);
  border-radius: 6px;
}

.consult-expert-summary {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.55;
}

.consult-expert-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}

.consult-expert-tip {
  font-size: 11px;
  color: var(--gray-500);
}

.consult-expert-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2c4054 0%, #3d5266 100%);
  cursor: pointer;
}

/* 专家详情 */
.consult-detail-hero {
  position: relative;
  margin: 0 16px 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(61, 50, 112, 0.25);
}

.consult-detail-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 48px 16px 18px;
  color: #fff;
}

.consult-detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.consult-detail-info {
  flex: 1;
  min-width: 0;
}

.consult-detail-name {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}

.consult-detail-title {
  margin: 0 0 8px;
  font-size: 13px;
  opacity: 0.9;
}

.consult-detail-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  opacity: 0.95;
}

.consult-detail-price-badge {
  flex-shrink: 0;
  text-align: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.consult-detail-price-num {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.consult-detail-price-unit {
  font-size: 11px;
  opacity: 0.85;
}

.consult-panel {
  background: var(--white);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.consult-panel-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.consult-panel-text {
  margin: 0;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.75;
}

.consult-notice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.consult-notice-item {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: var(--gray-50);
  border-radius: 12px;
}

.consult-notice-icon {
  font-size: 18px;
  line-height: 1;
}

.consult-notice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.consult-notice-text strong {
  font-size: 12px;
  color: var(--gray-900);
}

.consult-notice-text span {
  font-size: 11px;
  color: var(--gray-500);
  line-height: 1.4;
}

.consult-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consult-faq-item {
  border-radius: 12px;
  background: var(--gray-50);
  overflow: hidden;
  cursor: pointer;
}

.consult-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
}

.consult-faq-chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}

.consult-faq-a {
  display: none;
  padding: 0 14px 12px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
}

.consult-faq-item.open .consult-faq-a {
  display: block;
}

.consult-faq-item.open .consult-faq-chevron {
  color: #7b68ee;
}

.consult-detail-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.consult-detail-bar-price {
  display: flex;
  flex-direction: column;
}

.consult-detail-bar-label {
  font-size: 12px;
  color: var(--gray-500);
}

.consult-detail-bar-value {
  font-size: 20px;
  font-weight: 700;
  color: #7b68ee;
}

.consult-detail-bar-btn {
  flex: 1;
  max-width: 200px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #7b68ee 0%, #9b87f5 100%);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(123, 104, 238, 0.35);
}

/* 测评工具页 */
.test-intro {
  text-align: center;
  padding: var(--spacing-6) var(--spacing-4);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(139, 92, 246, 0.1));
  margin-bottom: var(--spacing-4);
}

.test-intro p {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-1);
}

.test-intro-tip {
  font-size: var(--font-size-sm);
  color: var(--gray-500) !important;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  padding: 0 var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.test-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.test-card:hover {
  border-color: var(--test-color, var(--primary));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.test-icon {
  font-size: 40px;
  margin-bottom: var(--spacing-2);
}

.test-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-1);
}

.test-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  line-height: 1.4;
  margin-bottom: var(--spacing-2);
}

.test-meta {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--gray-400);
}

.test-history {
  padding: 0 var(--spacing-4);
}

.test-history h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-3);
}

.test-history-list {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.test-history-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--font-size-sm);
}

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

.test-history-name {
  flex: 1;
  color: var(--gray-900);
}

.test-history-date {
  color: var(--gray-500);
  margin-right: var(--spacing-3);
}

.test-history-score {
  font-weight: 600;
  color: var(--primary);
}

/* 测评题目样式 */
.test-progress-bar {
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  margin: 0 var(--spacing-4) var(--spacing-4);
  overflow: hidden;
}

.test-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.test-question-card {
  margin: 0 var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.test-question-num {
  font-size: var(--font-size-sm);
  color: var(--primary);
  margin-bottom: var(--spacing-2);
}

.test-question-text {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-4);
  line-height: 1.6;
}

.test-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.test-option {
  display: flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--gray-50);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.test-option:hover {
  background: var(--gray-100);
}

.test-option.selected {
  background: rgba(255, 107, 74, 0.1);
  border-color: var(--primary);
}

.test-option-letter {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 50%;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-600);
  margin-right: var(--spacing-3);
}

.test-option.selected .test-option-letter {
  background: var(--primary);
  color: var(--white);
}

.test-option-text {
  flex: 1;
  font-size: var(--font-size-base);
  color: var(--gray-700);
}

.test-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0));
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  z-index: 600;
}

/* 测评结果样式 */
.test-result-card {
  margin: 0 var(--spacing-4);
  padding: var(--spacing-6);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.test-result-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-3);
}

.test-result-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-4);
}

.test-result-score {
  margin-bottom: var(--spacing-3);
}

.test-result-score .score-num {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
}

.test-result-score .score-unit {
  font-size: var(--font-size-lg);
  color: var(--gray-500);
}

.test-result-level {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.1), rgba(255, 138, 107, 0.1));
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--spacing-3);
}

.test-result-desc {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  margin-bottom: var(--spacing-4);
}

.test-result-tips {
  text-align: left;
  padding: var(--spacing-4);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.test-result-tips h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

.test-result-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.test-result-tips li {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  padding: var(--spacing-1) 0;
  padding-left: var(--spacing-4);
  position: relative;
}

.test-result-tips li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
}

/* ===== 能量 / 奖金记录页 ===== */
.page-record-history .page-header {
  display: none;
}

.page-record-history {
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + var(--safe-area-bottom, 0px));
}

.page-energy-history {
  background: linear-gradient(180deg, #fff9ed 0%, #fff5f2 120px, #f7f8fa 260px, #f7f8fa 100%);
}

.page-reward-history {
  background: linear-gradient(180deg, #fff8e8 0%, #fff5f2 120px, #f7f8fa 260px, #f7f8fa 100%);
}

.record-back {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.record-back svg {
  width: 20px;
  height: 20px;
}

/* 子页面通用返回（无标准顶栏时自动注入） */
.page-floating-back {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 200;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--gray-800);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.page-floating-back svg {
  width: 20px;
  height: 20px;
}

/* 大图/视频顶部的返回 */
.page-media-back {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.page-media-back svg {
  width: 20px;
  height: 20px;
}

.activity-detail-cover-wrap {
  position: relative;
}

.record-hero {
  position: relative;
  margin: 0 16px 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.record-hero-bg {
  position: absolute;
  inset: 0;
}

.record-hero--energy .record-hero-bg {
  background:
    radial-gradient(ellipse 65% 55% at 100% 0%, rgba(255, 214, 102, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(255, 107, 74, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #f5a623 0%, #ff8a6e 50%, #ff6b4a 100%);
}

.record-hero--reward .record-hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 90% 10%, rgba(255, 215, 0, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(255, 107, 74, 0.25) 0%, transparent 50%),
    linear-gradient(135deg, #c9a227 0%, #e8a020 40%, #ff6b4a 100%);
}

.record-hero-inner {
  position: relative;
  padding: 44px 18px 18px;
  color: #fff;
}

.record-hero-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}

.record-hero-desc {
  margin: 0 0 14px;
  font-size: 13px;
  opacity: 0.9;
}

.record-hero-balance {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.record-hero-balance-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.record-hero-balance-unit {
  font-size: 13px;
  opacity: 0.88;
}

.record-withdraw-btn {
  margin-left: 4px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  flex-shrink: 0;
}

.record-withdraw-btn:active {
  background: rgba(255, 255, 255, 0.28);
}

.record-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.record-hero-stat {
  text-align: center;
}

.record-hero-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.record-hero-stat-value--in {
  color: #fff;
}

.record-hero-stat-value--out {
  color: rgba(255, 255, 255, 0.85);
}

.record-hero-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.85;
}

.record-hero-tip {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.8;
}

.record-main {
  padding: 0 16px 12px;
}

.record-main .segment-tabs-bar {
  padding: 0 0 10px;
  background: transparent;
  border-bottom: none;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(30, 58, 95, 0.06);
}

.record-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.record-card-icon svg {
  width: 22px;
  height: 22px;
}

.record-card--in .record-card-icon {
  background: rgba(82, 196, 26, 0.12);
  color: var(--success);
}

.record-card--out .record-card-icon {
  background: rgba(255, 107, 74, 0.1);
  color: var(--primary);
}

.record-card-body {
  flex: 1;
  min-width: 0;
}

.record-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.record-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.record-card-amount {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.record-card--in .record-card-amount {
  color: var(--success);
}

.record-card--out .record-card-amount {
  color: var(--primary);
}

.record-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.record-card-type {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: 6px;
}

.record-card-balance {
  font-size: 12px;
  color: var(--gray-500);
}

.record-card-time {
  font-size: 12px;
  color: var(--gray-500);
}

.record-empty {
  padding: 48px 20px;
  text-align: center;
  background: var(--white);
  border-radius: 14px;
}

.record-empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.record-empty-title {
  margin: 0;
  font-size: 14px;
  color: var(--gray-500);
}

/* 兼容旧类名（其它页若仍引用） */
.history-list {
  padding: var(--spacing-4);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-4);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-4);
}

.empty-text {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin-bottom: var(--spacing-6);
}

.favorite-list {
  padding: var(--spacing-4);
}

.favorite-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  cursor: pointer;
}

.favorite-cover {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.favorite-info {
  flex: 1;
}

.favorite-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-1);
}

.favorite-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.order-list {
  padding: var(--spacing-4);
}

.order-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  cursor: pointer;
}

.order-cover {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 我的课程：封面 16:9 */
#course-list-container .order-item {
  align-items: flex-start;
}

#course-list-container .order-cover {
  width: 128px;
  height: auto;
  aspect-ratio: var(--cover-aspect-ratio);
  border-radius: var(--radius-md);
}

/* ===== 我的活动页 ===== */
.page-my-activities {
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + var(--safe-area-bottom, 0px));
  background: linear-gradient(180deg, #fff5f2 0%, #f0f6fc 140px, #f7f8fa 280px, #f7f8fa 100%);
}

.my-activity-wrap {
  min-height: 100%;
}

.my-activity-hero {
  position: relative;
  margin: 0 16px 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(255, 107, 74, 0.18);
}

.my-activity-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(74, 144, 226, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(255, 107, 74, 0.25) 0%, transparent 50%),
    linear-gradient(135deg, #ff6b4a 0%, #ff8a6e 55%, #4a90e2 100%);
}

.my-activity-hero-inner {
  position: relative;
  padding: 20px 18px 18px;
  color: #fff;
}

.my-activity-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.my-activity-hero-desc {
  margin: 0 0 16px;
  font-size: 13px;
  opacity: 0.92;
  line-height: 1.45;
}

.my-activity-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.my-activity-hero-stat {
  text-align: center;
}

.my-activity-hero-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.my-activity-hero-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.88;
}

.my-activity-main {
  padding: 0 16px 12px;
}

.my-activity-main .segment-tabs-bar {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  background: transparent;
  border-bottom: none;
}

.my-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.my-activity-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(30, 58, 95, 0.08);
  cursor: pointer;
}

.my-activity-card:active {
  transform: scale(0.995);
}

.my-activity-card-cover {
  position: relative;
  aspect-ratio: var(--cover-aspect-ratio);
  background: var(--gray-100);
}

.my-activity-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.my-activity-card-price {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.my-activity-card-stamp {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.35);
}

.my-activity-card-stamp--pending {
  background: linear-gradient(135deg, #4a90e2 0%, #6ba3f5 100%);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.35);
}

.my-activity-card--checked .my-activity-card-stamp {
  background: var(--success);
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.35);
}

.my-activity-card-body {
  padding: 14px 16px 16px;
}

.my-activity-card-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
}

.my-activity-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.my-activity-card-meta-item {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.45;
}

.my-activity-form {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.my-activity-form-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}

.my-activity-form-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.my-activity-form-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}

.my-activity-form-label {
  flex: 0 0 4.5em;
  color: var(--gray-500);
}

.my-activity-form-value {
  flex: 1;
  min-width: 0;
  color: var(--gray-800);
  word-break: break-word;
}

.my-activity-sheet .my-activity-form {
  margin: 12px 0 0;
}

.my-activity-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.my-activity-verify {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.my-activity-verify--done {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.my-activity-verify-label {
  font-size: 12px;
  color: var(--gray-500);
}

.my-activity-verify-code {
  font-size: 15px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: var(--secondary);
}

.my-activity-card--checked .my-activity-verify-code {
  color: var(--success);
}

.my-activity-verify-time {
  font-size: 11px;
  color: var(--gray-500);
}

.my-activity-card-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3);
  cursor: pointer;
}

.my-activity-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.my-activity-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.my-activity-empty-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.my-activity-empty-desc {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.my-activity-empty-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  cursor: pointer;
}

.my-activity-sheet {
  padding: 8px 8px 24px;
  text-align: center;
}

.my-activity-sheet-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.my-activity-sheet-meta {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--gray-500);
}

.my-activity-sheet-code-wrap {
  margin: 0 auto 16px;
  padding: 24px 20px;
  max-width: 280px;
  background: linear-gradient(180deg, var(--primary-bg) 0%, #fff 100%);
  border: 2px dashed rgba(255, 107, 74, 0.35);
  border-radius: 16px;
}

.my-activity-sheet-code {
  font-size: 28px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: var(--primary);
}

.my-activity-sheet-tip {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.55;
}

.order-info {
  flex: 1;
}

.order-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--spacing-1);
}

.order-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-bottom: var(--spacing-2);
}

.order-progress {
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}

.order-progress-fill {
  height: 100%;
  background: var(--primary);
}

.order-qrcode {
  font-size: var(--font-size-sm);
}

.order-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.order-status.pending {
  background: #FEF3C7;
  color: #D97706;
}

/* 课程章节打卡弹窗 */
.sheet-overlay:has(.course-checkin-sheet) .sheet {
  max-height: min(92vh, 720px);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.sheet-overlay:has(.course-checkin-sheet) .sheet-body {
  padding: 0;
  max-height: calc(92vh - 120px);
  overflow-y: auto;
}

.sheet-overlay:has(.course-checkin-sheet) .sheet-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
}

.sheet-overlay:has(.course-checkin-sheet) .sheet-handle {
  cursor: pointer;
}

.course-checkin-sheet {
  padding: 0 0 8px;
}

.course-checkin-sheet__hero {
  position: relative;
  padding: 20px 18px 18px;
  background: linear-gradient(145deg, #fff8f5 0%, #fff 55%, #fff5f2 100%);
  border-bottom: 1px solid rgba(255, 107, 74, 0.1);
}

.course-checkin-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gray-500);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.course-checkin-sheet__label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.12);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.course-checkin-sheet__chapter {
  margin: 10px 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.35;
  padding-right: 36px;
}

.course-checkin-sheet__course {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.45;
}

.course-checkin-sheet__requirement {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff8f0;
  border: 1px solid rgba(255, 143, 0, 0.18);
  text-align: left;
}

.course-checkin-sheet__requirement-label {
  font-size: 12px;
  font-weight: 700;
  color: #e68a00;
  margin-bottom: 6px;
}

.course-checkin-sheet__requirement-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-800);
  word-break: break-word;
}

.course-checkin-sheet__energy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 107, 74, 0.08);
  font-size: 13px;
  color: var(--gray-700);
}

.course-checkin-sheet__energy strong {
  color: var(--primary);
  font-weight: 700;
}

.course-checkin-sheet__energy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff8f70, var(--primary));
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.15);
}

.course-checkin-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 16px 0;
}

.course-checkin-type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 8px 4px;
  border: 1.5px solid #eef2f6;
  border-radius: 14px;
  background: #fafbfc;
  color: var(--gray-600);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.course-checkin-type-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--gray-500);
}

.course-checkin-type-tile__icon svg {
  width: 22px;
  height: 22px;
}

.course-checkin-type-tile__label {
  font-size: 12px;
  font-weight: 600;
}

.course-checkin-type-tile.active {
  border-color: rgba(255, 107, 74, 0.45);
  background: linear-gradient(180deg, #fff8f5 0%, #fff 100%);
  color: var(--primary);
  box-shadow: 0 4px 14px rgba(255, 107, 74, 0.12);
}

.course-checkin-type-tile.active .course-checkin-type-tile__icon {
  color: var(--primary);
}

.course-checkin-panel {
  padding: 14px 16px 4px;
}

.course-checkin-textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border: 1px solid #e8eef4;
  border-radius: 14px;
  background: #fafbfc;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-900);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.course-checkin-textarea:focus {
  outline: none;
  border-color: rgba(255, 107, 74, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.12);
  background: #fff;
}

.course-checkin-textarea--compact {
  min-height: auto;
  margin-bottom: 10px;
}

.course-checkin-interaction-recs {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e8eef4;
  border-radius: 14px;
  background: #fafbfc;
}

.course-checkin-interaction-recs__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  cursor: pointer;
}

.course-checkin-interaction-recs__head input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.course-checkin-interaction-recs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.course-checkin-interaction-recs__item {
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef2f6;
}

.course-checkin-interaction-recs__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
}

.course-checkin-interaction-recs__sub {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--gray-500);
}

.course-checkin-interaction-recs__item .video-interaction-audio {
  width: 100%;
  height: 36px;
}

.course-checkin-voice-studio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 0 4px;
}

.course-checkin-voice-record-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 112px;
  height: 112px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff6b4a 0%, #ff4757 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 71, 87, 0.28);
}

.course-checkin-voice-record-btn.is-recording {
  animation: course-interaction-pulse 1.2s ease-in-out infinite;
  background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
}

.course-checkin-voice-record-btn__icon {
  font-size: 30px;
  line-height: 1;
}

.course-checkin-voice-timer {
  font-size: 18px;
  font-weight: 700;
  color: #ff4757;
  font-variant-numeric: tabular-nums;
}

.course-checkin-voice-preview__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.course-checkin-voice-preview__actions {
  display: flex;
  gap: 8px;
}

.course-checkin-voice-action-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d8e0ea;
  background: #fff;
  color: var(--gray-700);
  font-size: 12px;
  cursor: pointer;
}

.course-checkin-voice-action-btn--danger {
  color: #ef4444;
  border-color: #fecaca;
}

.course-checkin-voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.course-checkin-upload-btn--compact {
  flex: 1 1 calc(50% - 4px);
  min-height: 44px;
  padding: 10px 8px;
}

.course-checkin-upload-btn--ghost {
  background: #fff;
  border: 1.5px dashed #d8e0ea;
}

.course-checkin-voice-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.course-checkin-voice-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fafbfc;
  border: 1px solid #e8eef4;
}

.course-checkin-interaction-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.course-checkin-interaction-feed__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.course-checkin-upload {
  margin-top: 4px;
}

.course-checkin-image-list {
  margin-bottom: 10px;
}

.course-checkin-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 120px;
  padding: 18px 16px;
  border: 1.5px dashed rgba(255, 107, 74, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffbfb 0%, #fff8f5 100%);
  color: var(--gray-700);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.course-checkin-upload-btn:active {
  border-color: var(--primary);
  background: #fff5f1;
}

.course-checkin-upload-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 107, 74, 0.12);
  color: var(--primary);
}

.course-checkin-upload-btn__icon svg {
  width: 22px;
  height: 22px;
}

.course-checkin-upload-btn__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.course-checkin-upload-btn__hint {
  font-size: 12px;
  color: var(--gray-500);
}

.course-checkin-video-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.course-checkin-video-preview video {
  width: 100%;
  max-height: 220px;
  border-radius: 14px;
  background: #000;
}

.course-checkin-media-remove {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: var(--gray-600);
  font-size: 13px;
  cursor: pointer;
}

.course-checkin-sheet__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff8f70 0%, var(--primary) 52%, #e85a3a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 107, 74, 0.32);
}

.course-checkin-sheet__submit:active {
  transform: scale(0.99);
}

.course-checkin-sheet__submit-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 13px;
  font-weight: 700;
}

/* 课程打卡弹窗样式（旧版兼容） */
.checkin-modal {
  padding: 0;
}

.checkin-course-info {
  padding: var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

.checkin-type-tabs {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--gray-100);
  border-radius: var(--radius-lg);
}

.checkin-type-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s;
}

.checkin-type-tab span:first-child {
  font-size: 20px;
}

.checkin-type-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.checkin-type-tab:hover {
  background: var(--white);
}

/* 视频/语音上传区域 */
.video-upload-box,
.audio-record-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-4);
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.video-upload-box:hover,
.audio-record-box:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.video-upload-icon,
.audio-record-icon {
  font-size: 32px;
  color: var(--gray-400);
}

.audio-record-icon.recording {
  color: var(--primary);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

.video-preview-box {
  padding: var(--spacing-2);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

/* 章节打卡标记 */
.chapter-checkin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.chapter-checkin-done {
  background: #DCFCE7;
  color: #16A34A;
}

/* 商城商品课程播放页 */
.page-product-course {
  min-height: 100vh;
  background: var(--bg-page);
  padding: 0 !important;
  padding-bottom: calc(var(--bottom-nav-offset, 72px) + var(--safe-area-bottom, 0px) + 12px) !important;
}

.page-product-course--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page-gradient);
}

.pc-loading {
  text-align: center;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.pc-loading__spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border: 3px solid var(--primary-bg);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pc-spin 0.8s linear infinite;
}

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

/* 视频舞台 */
.pc-stage {
  position: relative;
  background: #1a1a22;
  min-height: min(56.25vw, 42vh);
  max-height: 72vh;
  overflow: hidden;
}

.pc-stage__bg {
  position: absolute;
  inset: -20px;
  background-image: var(--pc-cover);
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.55);
  transform: scale(1.1);
  pointer-events: none;
}

.pc-stage__video-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(56.25vw, 42vh);
  max-height: 72vh;
}

.pc-stage__video {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: transparent;
  vertical-align: middle;
}

.pc-stage__gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(247, 248, 250, 0.92) 100%);
  pointer-events: none;
}

.pc-stage__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
}

.pc-stage__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.pc-stage__back:active {
  transform: scale(0.96);
}

.pc-stage__pill {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.92) 0%, rgba(255, 138, 110, 0.88) 100%);
  box-shadow: 0 2px 10px rgba(255, 107, 74, 0.35);
}

/* 续播条（浮在视频区底部） */
.pc-resume {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(30, 58, 95, 0.12);
}

.pc-resume__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  font-size: 14px;
}

.pc-resume__icon svg {
  width: 14px;
  height: 14px;
}

.pc-resume__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc-resume__label {
  font-size: 12px;
  color: var(--gray-500);
}

.pc-resume__time {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.pc-resume__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.pc-resume__btn {
  border: none;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.pc-resume__btn--ghost {
  background: var(--gray-100);
  color: var(--gray-700);
}

.pc-resume__btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.35);
}

/* 内容面板 */
.pc-panel {
  position: relative;
  z-index: 3;
  margin-top: -18px;
  padding: 0 16px 20px;
  border-radius: 20px 20px 0 0;
  background: var(--bg-page);
  background: linear-gradient(180deg, #fff 0%, var(--bg-page) 120px);
  box-shadow: 0 -4px 24px rgba(30, 58, 95, 0.06);
}

.pc-panel__handle {
  width: 36px;
  height: 4px;
  margin: 10px auto 14px;
  border-radius: 2px;
  background: var(--gray-300);
}

.pc-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.pc-hero__text {
  flex: 1;
  min-width: 0;
}

.pc-hero__label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.04em;
}

.pc-hero__course {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-hero__chapter {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  line-height: 1.45;
}

.pc-hero__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-100);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.pc-progress-card {
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5f2 0%, #fff 55%, #f0f6fc 100%);
  border: 1px solid rgba(255, 107, 74, 0.12);
}

.pc-progress-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--gray-600);
}

.pc-progress-card__row strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
}

.pc-progress-card__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 107, 74, 0.15);
  overflow: hidden;
}

.pc-progress-card__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  transition: width 0.35s ease;
}

/* 章节目录 */
.pc-episodes__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pc-episodes__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
}

.pc-episodes__count {
  font-size: 13px;
  color: var(--gray-500);
}

.pc-episodes__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pc-episode {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px 14px 12px;
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.pc-episode:active:not(:disabled) {
  transform: scale(0.99);
}

.pc-episode.is-active {
  border-color: rgba(255, 107, 74, 0.45);
  background: linear-gradient(135deg, #fff8f5 0%, #fff 100%);
  box-shadow: 0 4px 16px rgba(255, 107, 74, 0.12);
}

.pc-episode.is-watched:not(.is-active) .pc-episode__num {
  background: rgba(82, 196, 26, 0.12);
  color: var(--success);
}

.pc-episode.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.pc-episode__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--gray-100);
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}

.pc-episode.is-active .pc-episode__num {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
}

.pc-episode__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pc-episode__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-episode.is-active .pc-episode__title {
  color: var(--primary-dark);
}

.pc-episode__meta {
  font-size: 12px;
  color: var(--gray-500);
}

.pc-episode__chev {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--gray-400);
  line-height: 1;
}

.pc-episode__lock {
  flex-shrink: 0;
  font-size: 16px;
  opacity: 0.7;
}

.pc-episode__playing {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  padding: 0 2px;
}

.pc-episode__playing i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
  animation: pc-eq 0.9s ease-in-out infinite;
}

.pc-episode__playing i:nth-child(1) { height: 8px; animation-delay: 0s; }
.pc-episode__playing i:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.pc-episode__playing i:nth-child(3) { height: 10px; animation-delay: 0.3s; }

@keyframes pc-eq {
  0%, 100% { transform: scaleY(0.45); opacity: 0.65; }
  50% { transform: scaleY(1); opacity: 1; }
}

.page-video--checkin {
  padding-bottom: calc(var(--bottom-nav-offset) + 60px + var(--safe-area-bottom) + 16px) !important;
}

.video-checkin-hint {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.45;
}

.video-checkin-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-offset) + var(--safe-area-bottom));
  z-index: calc(var(--z-nav) + 2);
  padding: 8px 16px 10px;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--gray-100);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
}

.video-checkin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff7a5c 0%, #ff6b4a 100%);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(255, 107, 74, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.video-checkin-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 6px rgba(255, 107, 74, 0.22);
}

.video-checkin-btn--outline {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(255, 107, 74, 0.45);
  box-shadow: none;
}

.video-checkin-btn--outline:active {
  background: var(--primary-bg, #fff5f2);
}

.video-checkin-btn--disabled,
.video-checkin-btn:disabled {
  background: var(--gray-200);
  color: var(--gray-500);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.video-checkin-btn--disabled .video-checkin-btn-energy,
.video-checkin-btn:disabled .video-checkin-btn-energy {
  display: none;
}

.video-checkin-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.video-checkin-btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.video-checkin-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.video-checkin-btn-energy {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.video-checkin-btn--outline .video-checkin-btn-energy {
  background: var(--primary-bg, #fff5f2);
  color: var(--primary);
  opacity: 1;
}

.chapter-item--locked {
  opacity: 0.72;
}

.chapter-item--locked .chapter-arrow {
  opacity: 0.4;
}

.chapter-lock-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 0;
}

.chapter-lock-icon {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 兑换确认页底部栏 */
.exchange-bottom-bar {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--gray-100);
  padding: var(--spacing-4);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 450;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.exchange-price-detail {
  margin-bottom: var(--spacing-2);
}

.exchange-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-1) 0;
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.exchange-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
  margin-bottom: var(--spacing-3);
  border-top: 1px dashed var(--gray-200);
}

.exchange-total-label {
  font-size: var(--font-size-base);
  color: var(--gray-700);
}

.exchange-total-value {
  display: flex;
  align-items: baseline;
}

/* 兑换成功页面 */
.success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-4);
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 50%);
}

.success-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #DCFCE7;
  margin-bottom: var(--spacing-4);
}

.success-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--success);
  margin-bottom: var(--spacing-2);
}

.success-desc {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.success-info {
  width: 100%;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.success-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--gray-100);
}

.success-info-row:last-child {
  border-bottom: none;
}

.success-actions {
  width: 100%;
  margin-bottom: var(--spacing-6);
}

.success-tip {
  width: 100%;
  text-align: center;
  padding: var(--spacing-4);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

/* 支付弹窗样式 */
.payment-confirm {
  padding-bottom: 80px;
}

.payment-amount {
  text-align: center;
  padding: var(--spacing-6) 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: var(--spacing-4);
}

.amount-label {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin-bottom: var(--spacing-2);
}

.amount-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
}

.payment-detail {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
}

.detail-item:not(:last-child) {
  border-bottom: 1px solid var(--gray-200);
}

.detail-label {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.detail-value {
  font-size: var(--font-size-base);
  color: var(--gray-800);
  font-weight: 500;
}

.payment-methods {
  margin-bottom: var(--spacing-4);
}

.pay-method {
  display: flex;
  align-items: center;
  padding: var(--spacing-4);
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pay-method.active {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.method-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.wechat-icon {
  color: #07C160;
}

.method-name {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--gray-800);
  margin-left: var(--spacing-3);
}

.method-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.pay-method:not(.active) .method-check {
  display: none;
}

.payment-tips {
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-4);
}

.payment-tips .payment-tip-line {
  margin: 0;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-500);
}

.payment-tips .payment-tip-line + .payment-tip-line {
  margin-top: 2px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  padding: var(--spacing-1) 0;
}

.tip-item svg,
.payment-tips svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
}

.method-icon svg {
  width: 28px;
  height: 28px;
}

.method-check svg {
  width: 20px;
  height: 20px;
}

.payment-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--primary);
  color: white;
  border: none;
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  z-index: 350;
}

.payment-btn:active {
  background: var(--primary-dark);
}

/* 会员开通样式 */
.vip-open-section {
  padding: var(--spacing-6);
  padding-bottom: 100px;
}

.vip-price-options {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.vip-price-card {
  flex: 1;
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6) var(--spacing-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.vip-price-card.selected,
.vip-price-card.recommended {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.vip-price-card.selected::after,
.vip-price-card.recommended::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.price-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.vip-price-card .price-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.vip-price-card .price-unit {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: var(--spacing-1);
}

.vip-price-card .price-method {
  font-size: var(--font-size-base);
  color: var(--gray-700);
  margin-top: var(--spacing-3);
  font-weight: 500;
}

.vip-price-card .price-note {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: var(--spacing-2);
}

.vip-open-info {
  margin-bottom: var(--spacing-6);
}

.vip-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  padding: var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.vip-open-btn {
  width: 100%;
  padding: var(--spacing-4);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
}

.vip-open-btn:active {
  background: var(--primary-dark);
}

/* VIP确认弹窗 */
.vip-confirm {
  padding: var(--spacing-6);
  text-align: center;
  padding-bottom: 80px;
}

.confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  border-radius: 50%;
  color: var(--primary);
  font-size: 32px;
}

.confirm-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--spacing-2);
}

.confirm-desc {
  font-size: var(--font-size-base);
  color: var(--gray-500);
  margin-bottom: var(--spacing-6);
}

.confirm-detail {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-base);
  color: var(--gray-600);
}

.detail-row:not(:last-child) {
  border-bottom: 1px solid var(--gray-200);
}

.detail-row .text-primary {
  color: var(--primary);
  font-weight: 500;
}

.confirm-btn {
  width: 100%;
  padding: var(--spacing-4);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
}

.confirm-btn:active {
  background: var(--primary-dark);
}

/* 学习统计页面 */
.page-stats {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-3));
}

.page-stats .page-header {
  display: none;
}

.stats-page {
  padding: var(--spacing-4);
  padding-bottom: 100px;
}

.stats-overview {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.stats-card {
  flex: 1;
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  text-align: center;
}

.stats-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
}

.stats-icon.energy {
  background: #FFF3E0;
  color: #FF9800;
}

.stats-icon.checkin {
  background: #E8F5E9;
  color: #4CAF50;
}

.stats-icon.course {
  background: #E3F2FD;
  color: #2196F3;
}

.stats-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-800);
}

.stats-label {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: var(--spacing-1);
}

.stats-section {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.stats-section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--spacing-4);
}

.stats-loading,
.stats-empty {
  text-align: center;
  padding: var(--spacing-8) var(--spacing-4);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.stats-chart {
  position: relative;
}

.stats-chart-y-title {
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: var(--spacing-2);
  padding-left: 36px;
}

.stats-chart-body {
  display: flex;
  gap: var(--spacing-2);
  min-height: 180px;
}

.stats-chart-y-axis {
  flex-shrink: 0;
  width: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 28px;
  box-sizing: border-box;
}

.stats-chart-y-tick {
  font-size: 10px;
  color: var(--gray-400);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stats-chart-plot {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.stats-chart-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.stats-chart-grid-line {
  border-top: 1px dashed var(--gray-200);
}

.stats-chart-bars {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  padding-bottom: 28px;
  min-height: 152px;
  box-sizing: border-box;
}

.stats-chart-bar-col {
  flex: 1;
  min-width: 0;
  max-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 152px;
  padding-bottom: 0;
}

.stats-chart-bar-value {
  font-size: 9px;
  color: var(--gray-600);
  margin-bottom: 4px;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
}

.stats-chart-bar-track {
  width: 22px;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  background: var(--gray-100);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}

.stats-chart-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 0;
  transition: height 0.35s ease;
}

.stats-chart-bar-fill.study {
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}

.stats-chart-bar-fill.energy {
  background: linear-gradient(180deg, #FFB347, #FF9800);
}

.stats-chart-bar-label {
  margin-top: 6px;
  font-size: 10px;
  color: var(--gray-600);
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

.stats-energy-list {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.stats-energy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.stats-energy-date {
  color: var(--gray-600);
}

.stats-energy-amount {
  color: var(--primary);
  font-weight: 600;
}

.record-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  color: var(--primary);
}

.record-content {
  flex: 1;
}

.record-title {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  font-weight: 500;
}

.record-time {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: 2px;
}

.record-energy {
  font-size: var(--font-size-base);
  color: var(--primary);
  font-weight: 600;
}

/* ===== 公共顶部分段 Tab（Page.renderSegmentTabs）===== */
.segment-tabs-bar--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 16px 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
}

.segment-tabs-bar:not(.segment-tabs-bar--sticky) {
  padding: 10px 16px 8px;
}

.segment-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 48px;
  border-radius: 999px;
  background: var(--primary-bg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 74, 0.08);
}

.segment-tabs--compact {
  height: 42px;
}

.segment-tabs-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  transition: transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

.segment-tabs[data-theme="primary"] .segment-tabs-fill {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.segment-tabs[data-theme="gold"] .segment-tabs-fill {
  background: linear-gradient(135deg, #f5a623 0%, #ffd666 100%);
}

.segment-tabs[data-theme="secondary"] .segment-tabs-fill {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
}

.segment-tab {
  position: relative;
  z-index: 3;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: color 0.28s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.segment-tabs--compact .segment-tab {
  font-size: 13px;
  padding: 0 4px;
}

.segment-tabs--many .segment-tab {
  font-size: 12px;
}

.segment-tab-text {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}

.segment-tab.active {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.page-course-list {
  background: var(--bg-page);
}

.page-course-list .page-content {
  padding-top: 4px;
}

.page-activity-list .page-content {
  padding-top: 8px;
}

.page-consult .segment-tabs-bar {
  padding-left: 0;
  padding-right: 0;
}

.page-orders .segment-tabs-bar:not(.segment-tabs-bar--sticky) {
  padding-top: 8px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-4);
  color: var(--gray-400);
}

.empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: var(--spacing-4);
  opacity: 0.5;
}

.empty-text {
  font-size: var(--font-size-base);
}

/* 个人中心会员升级按钮 */
.profile-vip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #8B4513;
  border: none;
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--spacing-1);
}

.profile-vip-btn:active {
  transform: scale(0.95);
}

/* 会员升级弹窗 */
.vip-upgrade-popup {
  padding: var(--spacing-4);
  padding-bottom: 80px;
}

.vip-benefits-preview {
  display: flex;
  justify-content: space-around;
  padding: var(--spacing-4) 0;
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--gray-100);
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.benefit-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-bg);
  border-radius: 50%;
  color: var(--primary);
  font-size: 20px;
}

.benefit-text {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  text-align: center;
}

.vip-payment-options {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.vip-payment-card {
  flex: 1;
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.vip-payment-card.selected,
.vip-payment-card.recommended {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.vip-payment-card.selected::after,
.vip-payment-card.recommended::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.payment-tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
}

.vip-payment-card .payment-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.vip-payment-card .payment-unit {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: var(--spacing-1);
}

.vip-payment-card .payment-note {
  font-size: var(--font-size-xs);
  color: var(--gray-400);
  margin-top: var(--spacing-2);
}

.vip-upgrade-btn {
  width: 100%;
  padding: var(--spacing-4);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
}

.vip-upgrade-btn:active {
  background: var(--primary-dark);
}

/* 投票选项样式 */
.vote-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.vote-option {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  min-height: 52px;
}

.vote-option:hover {
  border-color: var(--primary);
  background: #FFF7F5;
}

.vote-option:active {
  transform: scale(0.98);
}

.vote-option.voted-selected {
  border-color: var(--primary);
  background: #FFF7F5;
}

.vote-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 107, 74, 0.15), rgba(255, 107, 74, 0.08));
  border-radius: 12px;
  transition: width 0.3s ease;
}

.vote-option-text {
  position: relative;
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
  z-index: 1;
  flex: 1;
}

.vote-option-count {
  position: relative;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  z-index: 1;
  white-space: nowrap;
}

.vote-total-info {
  text-align: center;
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #E5E7EB;
}

/* ===== 管理员关联内容样式 ===== */
.post-admin-section {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBF5 100%);
  border: 1px solid #FED7AA;
  border-radius: 12px;
  padding: 16px;
  margin: 16px;
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #EA580C;
  margin-bottom: 12px;
}

.admin-section-icon {
  width: 20px;
  height: 20px;
  color: #EA580C;
}

.admin-related-tools {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.related-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}

.related-tool:hover {
  border-color: #FF6B4A;
  background: #FFF7ED;
}

.related-tool-icon {
  width: 18px;
  height: 18px;
  color: #FF6B4A;
}

.selected-related {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #10B981;
}

.selected-related-label {
  font-size: 13px;
  color: #6B7280;
}

.selected-related-content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  font-size: 14px;
  color: #10B981;
}

.related-type-icon {
  width: 16px;
  height: 16px;
  color: #FF6B4A;
}

.related-type-label {
  color: #9CA3AF;
}

.related-title-text {
  font-weight: 500;
  color: #374151;
}

.clear-related-btn {
  padding: 4px 10px;
  background: #FEE2E2;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  color: #DC2626;
  cursor: pointer;
}

/* 关联内容选择器 */
.related-selector {
  padding: 0;
}

.related-search {
  padding: 12px 16px;
  border-bottom: 1px solid #F3F4F6;
}

.related-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.related-search-input:focus {
  border-color: #FF6B4A;
}

.related-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.related-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.related-item:hover {
  background: #F9FAFB;
}

.related-item-cover {
  width: 60px;
  height: 34px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.related-item-title {
  font-size: 14px;
  color: #374151;
  line-height: 1.4;
}

/* 我的订单：三区纵向列表（无 Tab） */
.orders-hub {
  padding: 12px 12px calc(20px + var(--safe-area-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-section-block {
  background: var(--white);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px));
}

.order-section-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

.order-section-block-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-section-more-btn {
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: 13px;
  padding: 0;
  cursor: pointer;
}

.order-section-more-btn:active {
  color: var(--primary);
}

.order-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.order-section-grid-item {
  min-width: 0;
  cursor: pointer;
}

.order-section-grid-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: var(--gray-100) center/cover no-repeat;
}

.order-section-grid-title {
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-section-grid-meta {
  margin: 0;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-section-grid-progress {
  height: 4px;
  margin-top: 6px;
  background: var(--gray-100);
  border-radius: 999px;
  overflow: hidden;
}

.order-section-grid-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

.orders-section-all {
  padding: 12px 16px calc(24px + var(--safe-area-bottom, 0px));
}

.order-section-block-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
}

.order-section-block-count {
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 10px;
}

.order-list--in-section,
.product-order-list--in-section {
  padding: 0;
}

.order-list--in-section .order-item {
  margin-bottom: 10px;
  padding: 12px;
}

.order-list--in-section .order-item:last-child {
  margin-bottom: 0;
}

.order-item--course {
  align-items: flex-start;
}

.order-item--course .order-cover {
  width: 128px;
  height: auto;
  aspect-ratio: var(--cover-aspect-ratio);
}

.product-order-list--in-section .product-order-card {
  margin-bottom: 10px;
  cursor: pointer;
}

.product-order-list--in-section .product-order-card:last-child {
  margin-bottom: 0;
}

.order-section-empty {
  text-align: center;
  padding: 20px 12px 8px;
}

.order-section-empty-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 8px;
}

.order-section-empty-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
}

.order-section-empty-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gray-400);
}

.order-section-empty-btn {
  border: none;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
}

.order-section-empty-btn:active {
  opacity: 0.85;
}

/* 我的课程（学习记录） */
.page-my-courses {
  padding-bottom: calc(var(--bottom-nav-offset, 80px) + 16px);
}

.my-courses-hero {
  padding: 20px 16px 12px;
  background: linear-gradient(180deg, #fff5f0 0%, #fff 100%);
}

.my-courses-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
}

.my-courses-hero-desc {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

.my-courses-body {
  padding: 12px 16px 24px;
}

.my-courses-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.my-course-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.my-course-cover {
  flex: 0 0 108px;
  width: 108px;
  aspect-ratio: var(--cover-aspect-ratio, 16 / 9);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-100);
  position: relative;
  overflow: hidden;
}

.my-course-access {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

.my-course-access--free {
  background: rgba(34, 197, 94, 0.92);
}

.my-course-access--vip {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.my-course-access--purchased {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.my-course-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.my-course-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-course-meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gray-500);
}

.my-course-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}

.my-course-progress-pct {
  color: var(--primary);
  font-weight: 600;
}

.my-course-progress {
  height: 4px;
  background: var(--gray-100);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.my-course-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8a6b, #ff6b4a);
  border-radius: 2px;
}

.my-course-btn {
  align-self: flex-start;
  border: none;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
}

.my-courses-empty {
  text-align: center;
  padding: 48px 20px;
}

.my-courses-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.my-courses-empty-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-700);
}

.my-courses-empty-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--gray-400);
}

.my-courses-empty-btn {
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 22px;
  cursor: pointer;
}

/* 订单概览样式（旧版网格，保留兼容） */
.order-overview {
  padding: 12px;
}

.order-section {
  margin-bottom: 20px;
  background: var(--white);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

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

.order-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.order-section-more {
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
}

.order-section-more:active {
  opacity: 0.7;
}

.order-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.order-grid-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-50);
  transition: transform 0.2s;
}

.order-grid-item:active {
  transform: scale(0.98);
}

.order-grid-cover {
  width: 100%;
  padding-top: 60%;
  background-size: cover;
  background-position: center;
}

.order-grid-info {
  padding: 8px;
}

.order-grid-title {
  font-size: 12px;
  color: var(--gray-800);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-grid-status {
  font-size: 11px;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.order-grid-status.pending {
  background: rgba(255, 107, 74, 0.1);
  color: var(--primary);
}

.order-grid-status.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

/* ===== 我的帖子页面 ===== */
.page-my-posts .page-header {
  display: none;
}

.page-my-posts {
  padding-top: env(safe-area-inset-top, 0px);
}

.my-posts-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 8px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 10;
}

.my-posts-top-info {
  flex: 1;
  min-width: 0;
}

.my-posts-count {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.my-posts-tip {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--gray-500);
}

.my-posts-publish-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
}

.my-posts-list {
  padding: 8px 16px 16px;
}

.my-post-item {
  margin-bottom: 10px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.my-post-preview {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.my-post-preview:active {
  background: var(--gray-50);
}

.my-post-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.my-post-preview-body {
  flex: 1;
  min-width: 0;
}

.my-post-preview-text {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--gray-800);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-post-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-500);
}

.my-post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--gray-100);
  padding-top: 10px;
  margin-top: 0;
}

.my-post-action {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--gray-100);
  cursor: pointer;
}

.my-post-action.active {
  color: var(--primary);
  background: rgba(255, 107, 74, 0.1);
}

.my-post-action--danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  flex: 0 0 auto;
  padding: 8px 12px;
}

.my-post-comments-panel {
  display: none;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  max-height: 280px;
  overflow-y: auto;
}

.my-post-comments-panel.is-open {
  display: block;
}

.my-post-comments-list .my-post-comment {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--white);
}

.my-post-comments-list .my-post-comment:last-child {
  border-bottom: none;
}

.my-post-comment .comment-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.my-post-comment .comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.my-post-comment .comment-body {
  flex: 1;
  min-width: 0;
}

.my-post-comment .comment-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.my-post-comment .comment-author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
}

.my-post-comment .comment-reply-to {
  font-size: 12px;
  color: var(--gray-400);
}

.my-post-comment .comment-reply-to span {
  color: var(--primary);
}

.my-post-comment .comment-content {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.6;
}

.my-post-comment .comment-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.my-post-comment .comment-time {
  font-size: 12px;
  color: var(--gray-400);
}

.my-post-comment .comment-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  cursor: pointer;
}

.my-post-comment .comment-action-btn.liked,
.my-post-comment .comment-action-btn.liked .interact-like-icon,
.my-post-comment .comment-action-btn.liked .interact-like-count {
  color: var(--primary);
}

.my-post-comment .comment-action svg,
.my-post-comment .comment-action-btn .interact-like-icon svg {
  width: 14px;
  height: 14px;
}

.my-post-comment .comment-action--danger {
  color: #ef4444;
}

.my-post-comments-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-400);
}

.my-posts-empty {
  padding: 48px 24px;
}

/* ===== 我的收藏页面 ===== */
.page-favorites .page-header {
  display: none;
}

.page-favorites {
  padding-top: env(safe-area-inset-top, 0px);
}

.favorite-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favorite-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.favorite-card:active {
  transform: scale(0.98);
}

.favorite-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  z-index: 1;
}

.favorite-tag-post {
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
}

.favorite-tag-challenge {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
}

.favorite-tag-course {
  background: linear-gradient(135deg, #22c55e, #4ade80);
}

.favorite-tag-product {
  background: linear-gradient(135deg, #FF6B4A, #FF8A65);
}

.favorite-tag-activity {
  background: linear-gradient(135deg, #EC4899, #F472B6);
}

.favorite-cover {
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-aspect-ratio, 16 / 9);
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.favorite-info {
  padding: 12px;
}

.favorite-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
}

.favorite-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #999;
}

.favorite-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 登录提示弹窗 */
.login-prompt {
  padding: 20px;
  text-align: center;
}
.login-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.login-text {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 8px;
}
.login-desc {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
}
.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #07C160 0%, #06AD56 100%);
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  margin-bottom: 16px;
}
.login-btn:active {
  transform: scale(0.98);
}
.login-skip {
  font-size: 14px;
  color: #9CA3AF;
  cursor: pointer;
  padding: 8px;
}
.login-skip:active {
  opacity: 0.7;
}
/* ===== 奖金提现 ===== */
.withdraw-page { padding-bottom: 100px; }
.withdraw-header { background: linear-gradient(135deg, #FF6B4A 0%, #FF8A6B 100%); padding: 30px 20px; text-align: center; color: white; }
.withdraw-balance-label { font-size: 14px; opacity: 0.9; margin-bottom: 8px; }
.withdraw-balance { font-size: 48px; font-weight: 700; }
.withdraw-balance-unit { font-size: 18px; font-weight: 400; }
.withdraw-card { background: white; border-radius: 16px; margin: -20px 16px 16px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.withdraw-input-section { margin-bottom: 20px; }
.withdraw-label { font-size: 15px; color: #333; margin-bottom: 12px; font-weight: 500; }
.withdraw-input-wrap { display: flex; align-items: center; border: 2px solid #eee; border-radius: 12px; padding: 12px 16px; transition: border-color 0.2s; }
.withdraw-input-wrap:focus-within { border-color: #FF6B4A; }
.withdraw-input-prefix { font-size: 24px; color: #333; font-weight: 600; margin-right: 8px; }
.withdraw-input { flex: 1; border: none; font-size: 24px; font-weight: 600; outline: none; color: #333; }
.withdraw-input::placeholder { color: #ccc; font-weight: 400; }
.withdraw-all-btn { background: #FFF5F0; color: #FF6B4A; border: none; padding: 8px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; }
.withdraw-tips { background: #F9FAFB; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.withdraw-tips-title { font-size: 14px; color: #666; margin-bottom: 10px; }
.withdraw-tips li { font-size: 13px; color: #888; margin-bottom: 6px; padding-left: 16px; position: relative; }
.withdraw-tips li::before { content: '•'; position: absolute; left: 0; color: #FF6B4A; }
.withdraw-bank { display: flex; align-items: center; padding: 16px; background: #F9FAFB; border-radius: 12px; margin-bottom: 20px; }
.withdraw-bank-icon { width: 40px; height: 40px; background: #1E3A5F; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px; }
.withdraw-bank-info { flex: 1; }
.withdraw-bank-name { font-size: 15px; color: #333; font-weight: 500; }
.withdraw-bank-num { font-size: 13px; color: #888; margin-top: 2px; }
.withdraw-btn { width: 100%; background: linear-gradient(135deg, #FF6B4A 0%, #FF8A6B 100%); color: white; border: none; padding: 16px; border-radius: 12px; font-size: 17px; font-weight: 600; cursor: pointer; }
.withdraw-btn:disabled { background: #ccc; cursor: not-allowed; }
.withdraw-records { margin-top: 20px; }
.withdraw-records-title { font-size: 15px; color: #333; font-weight: 500; margin-bottom: 12px; }
.withdraw-record { display: flex; align-items: center; padding: 16px; background: white; border-radius: 12px; margin-bottom: 10px; }
.withdraw-record-info { flex: 1; }
.withdraw-record-amount { font-size: 17px; font-weight: 600; color: #333; }
.withdraw-record-time { font-size: 13px; color: #888; margin-top: 4px; }
.withdraw-record-status { padding: 4px 10px; border-radius: 12px; font-size: 12px; }
.withdraw-record-status.success { background: #E8F5E9; color: #4CAF50; }
.withdraw-record-status.pending { background: #FFF3E0; color: #FF9800; }
.withdraw-record-status.failed { background: #FFEBEE; color: #F44336; }

/* ===== 会员中心（VIP）===== */
.page-vip .bottom-nav,
.page-vip .page-header {
  display: none;
}

.page-vip {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + var(--safe-area-bottom));
  background: linear-gradient(180deg, #1a2744 0%, #243b55 180px, #f7f8fa 280px, #f7f8fa 100%);
}

.page-vip--member {
  background: linear-gradient(180deg, #3d2e0a 0%, #5c4512 160px, #f7f8fa 260px, #f7f8fa 100%);
}

.vip-hero {
  position: relative;
  margin: 0 16px 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.vip-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 107, 74, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #2a3f5f 0%, #1e3a5f 100%);
}

.page-vip--member .vip-hero-bg {
  background:
    radial-gradient(ellipse 70% 55% at 90% 10%, rgba(255, 215, 0, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(255, 140, 60, 0.25) 0%, transparent 45%),
    linear-gradient(135deg, #4a3808 0%, #2d2205 100%);
}

.vip-hero-inner {
  position: relative;
  padding: 20px 18px 18px;
  color: #fff;
}

.vip-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vip-user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.vip-user-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vip-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #5d3a00;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.vip-user-badge-icon svg {
  width: 14px;
  height: 14px;
}

.vip-user-expire,
.vip-user-hint {
  font-size: 13px;
  opacity: 0.88;
  line-height: 1.45;
}

.vip-progress-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.vip-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.vip-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.vip-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd700, #ff8c42);
  transition: width 0.4s ease;
}

.vip-hero-promo {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vip-hero-promo-amount {
  font-style: normal;
  font-size: 32px;
  font-weight: 700;
  color: #ffd700;
  line-height: 1;
  flex-shrink: 0;
}

.vip-hero-promo-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.vip-hero-promo-unit {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1;
  flex-shrink: 0;
}

.vip-hero-promo-desc {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-stats {
  display: flex;
  margin: 0 16px 16px;
  padding: 14px 8px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.vip-stat {
  flex: 1;
  text-align: center;
  position: relative;
}

.vip-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--gray-200);
}

.vip-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1.2;
}

.page-vip--member .vip-stat-value {
  color: #b8860b;
}

.vip-stat-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.vip-main {
  padding: 0 16px 8px;
}

.vip-panel {
  background: var(--white);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.vip-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vip-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.vip-panel-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fff5e6, #ffe4b8);
  color: #b8860b;
  font-weight: 600;
}

.vip-panel-link {
  border: none;
  background: none;
  font-size: 13px;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 0;
}

.vip-panel-link svg {
  width: 16px;
  height: 16px;
}

.vip-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.vip-quick-item {
  border: none;
  background: var(--gray-50);
  border-radius: 12px;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.vip-quick-item:active {
  transform: scale(0.96);
  background: var(--primary-bg);
}

.vip-quick-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.vip-quick-icon svg {
  width: 22px;
  height: 22px;
}

.vip-quick-label {
  font-size: 12px;
  color: var(--gray-700);
  line-height: 1.2;
}

.vip-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.vip-benefit-card {
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}

.vip-benefit-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.vip-benefit-card-icon svg {
  width: 20px;
  height: 20px;
}

.vip-benefit-card--coral .vip-benefit-card-icon { background: #fff0eb; color: var(--primary); }
.vip-benefit-card--gold .vip-benefit-card-icon { background: #fff8e6; color: #e6a800; }
.vip-benefit-card--rose .vip-benefit-card-icon { background: #fff0f5; color: #e91e8c; }
.vip-benefit-card--green .vip-benefit-card-icon { background: #ecfdf5; color: #16a34a; }
.vip-benefit-card--blue .vip-benefit-card-icon { background: #eff6ff; color: #2563eb; }
.vip-benefit-card--purple .vip-benefit-card-icon { background: #f5f3ff; color: #7c3aed; }

.vip-benefit-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.vip-benefit-card-desc {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
}

.vip-compare {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gray-100);
}

.vip-compare-head,
.vip-compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  align-items: center;
}

.vip-compare-head {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-600);
}

.vip-compare-row:not(:last-child) {
  border-bottom: 1px solid var(--gray-100);
}

.vip-compare-name {
  color: var(--gray-800);
}

.vip-compare-normal {
  color: var(--gray-500);
  text-align: center;
}

.vip-compare-vip {
  color: #b8860b;
  text-align: center;
}

.vip-compare-vip-val {
  color: var(--gray-800);
  font-weight: 600;
  text-align: center;
}

.vip-course-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: 0 -4px;
  padding: 4px 4px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vip-course-scroll::-webkit-scrollbar {
  display: none;
}

.vip-course-card {
  flex: 0 0 140px;
  cursor: pointer;
}

.vip-course-card:active {
  opacity: 0.85;
}

.vip-course-cover {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--gray-100);
}

.vip-course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vip-course-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #5d3a00;
}

.vip-course-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-800);
  margin: 8px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vip-course-meta {
  font-size: 11px;
  color: var(--gray-500);
}

.vip-plan-cards {
  display: flex;
  gap: 12px;
}

.vip-plan-cards--packages {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-top: 12px;
  padding-bottom: 2px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}

.vip-plan-card--package {
  flex: 0 0 118px;
  min-width: 118px;
  max-width: 118px;
  scroll-snap-align: start;
  padding: 14px 8px;
  overflow: visible;
}

.vip-plan-card--package .vip-plan-name,
.vip-plan-card--package .vip-plan-price,
.vip-plan-card--package .vip-plan-method,
.vip-plan-card--package .vip-plan-tip {
  white-space: nowrap;
}

.vip-plan-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 6px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-panel--plans {
  overflow: visible;
}

.vip-panel--plans .vip-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.vip-panel-sub {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

.vip-sheet-btn--outline {
  margin-top: 10px;
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
}

.vip-sheet-btn--outline.is-disabled,
.vip-sheet-btn--outline:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.vip-sheet-energy-warn {
  margin: 8px 0 0;
  font-size: 12px;
  color: #e67e22;
  text-align: center;
}

.vip-pay-method {
  margin-bottom: 12px;
}

.vip-plan-card {
  flex: 1;
  position: relative;
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  padding: 16px 12px;
  background: var(--white);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  overflow: visible;
}

.vip-plan-card.is-selected {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 4px 16px rgba(255, 107, 74, 0.2);
}

.vip-plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  background: var(--primary);
  color: #fff;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.35);
}

.vip-plan-price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 6px;
  max-width: 100%;
}

.vip-plan-price-yen {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
}

.vip-plan-price em {
  font-style: normal;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
}

.vip-plan-price-unit {
  font-size: 13px;
  color: var(--gray-600);
  flex-shrink: 0;
  margin-left: 1px;
}

.vip-plan-method {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-800);
}

.vip-plan-tip {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 8px;
  white-space: nowrap;
}

.vip-plan-tip.is-warn {
  color: var(--error);
}

.vip-plan-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 10px;
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
}

.vip-plan-note-text {
  flex: 1;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.vip-plan-note-icon {
  flex-shrink: 0;
  color: var(--gray-400);
}

.vip-plan-note-icon svg {
  width: 16px;
  height: 16px;
}

.vip-faq-item {
  border-bottom: 1px solid var(--gray-100);
}

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

.vip-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-800);
  text-align: left;
  cursor: pointer;
}

.vip-faq-arrow {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform 0.25s;
}

.vip-faq-arrow svg {
  width: 18px;
  height: 18px;
}

.vip-faq-item.is-open .vip-faq-arrow {
  transform: rotate(180deg);
}

.vip-faq-a {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
  padding: 0 0 14px;
  display: none;
}

.vip-faq-item.is-open .vip-faq-a {
  display: block;
}

/* VIP 弹层 */
.vip-sheet-confirm,
.vip-sheet-pay {
  padding: 0 0 8px;
}

.sheet-overlay:has(.vip-sheet-pay) .sheet {
  bottom: 0;
  max-height: min(560px, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sheet-overlay:has(.vip-sheet-pay) .sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
}

.sheet-overlay:has(.vip-sheet-pay) .sheet-header {
  flex-shrink: 0;
}

.vip-sheet-pay .vip-pay-method {
  margin-bottom: 10px;
}

.vip-sheet-pay .vip-sheet-btn + .vip-sheet-btn--outline {
  margin-top: 10px;
}

.vip-sheet-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.vip-sheet-icon--energy {
  background: #fff8e6;
  color: #e6a800;
}

.vip-sheet-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 8px;
}

.vip-sheet-desc {
  text-align: center;
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 20px;
  line-height: 1.5;
}

.vip-sheet-detail {
  background: var(--gray-50);
  border-radius: 12px;
  padding: 2px 14px;
  margin-bottom: 12px;
}

.vip-sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--gray-700);
}

.vip-sheet-row:not(:last-child) {
  border-bottom: 1px solid var(--gray-200);
}

.vip-sheet-pay-amount {
  text-align: center;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 12px;
}

.vip-sheet-pay-label {
  display: block;
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 6px;
}

.vip-sheet-pay-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.vip-sheet-tips {
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 10px;
}

.vip-sheet-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
  padding: 4px 0;
}

.vip-sheet-tip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.vip-sheet-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.vip-sheet-btn:active {
  background: var(--primary-dark);
}

/* ===== 工作人员活动核销 ===== */
.page-staff-verify {
  padding: var(--spacing-4);
  padding-bottom: calc(var(--spacing-8) + env(safe-area-inset-bottom));
}

.staff-verify-hero {
  margin-bottom: var(--spacing-5);
}

.staff-verify-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-2);
}

.staff-verify-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  line-height: 1.5;
}

.staff-verify-form {
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.staff-verify-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: var(--spacing-2);
}

.staff-verify-input-row {
  display: flex;
  gap: var(--spacing-3);
}

.staff-verify-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.staff-verify-result {
  min-height: 80px;
}

.staff-verify-loading,
.staff-verify-empty {
  text-align: center;
  padding: var(--spacing-8) var(--spacing-4);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.staff-verify-card {
  padding: var(--spacing-4);
}

.staff-verify-card.is-verified {
  border: 1px solid rgba(34, 197, 94, 0.25);
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 48px);
}

.staff-verify-card-head {
  margin-bottom: var(--spacing-3);
}

.staff-verify-card-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.staff-verify-card-badge.pending {
  background: rgba(249, 115, 22, 0.12);
  color: #ea580c;
}

.staff-verify-card-badge.done {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.staff-verify-card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-4);
  line-height: 1.4;
}

.staff-verify-meta {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.staff-verify-meta dt {
  color: var(--gray-500);
}

.staff-verify-meta dd {
  margin: 0;
  color: var(--gray-800);
}

.staff-verify-code {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.staff-verify-tip {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-3);
}

.staff-verify-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.staff-scan-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.staff-verify-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-verify-activity-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.staff-verify-activity-card:active {
  transform: scale(0.99);
}

.staff-verify-activity-cover {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background: #e5e7eb center/cover no-repeat;
}

.staff-verify-activity-body {
  flex: 1;
  min-width: 0;
}

.staff-verify-activity-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.35;
}

.staff-verify-activity-meta {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--gray-500);
}

.staff-verify-activity-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-600);
}

.staff-verify-activity-stats span {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
}

.staff-verify-detail-head {
  margin-bottom: 12px;
}

.staff-verify-detail-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff7ed 0%, #eff6ff 100%);
}

.staff-verify-detail-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.staff-verify-detail-meta {
  margin: 0;
  font-size: 13px;
  color: var(--gray-600);
}

.staff-verify-scan-actions {
  margin-bottom: 12px;
}

.staff-verify-scan-tools {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.staff-verify-scan-tools .btn {
  flex: 1;
}

.staff-scan-panel {
  display: none;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #111827;
}

.staff-scan-panel.is-active {
  display: block;
}

.staff-scan-video-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 3 / 4;
  max-height: 420px;
}

.staff-scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-scan-frame {
  position: absolute;
  inset: 18% 14%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.staff-scan-tip {
  margin: 10px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.staff-verify-form-data {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.staff-verify-form-title {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
}

.staff-verify-form-row {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray-700);
}

.staff-verify-form-row span {
  flex: 0 0 4.5em;
  color: var(--gray-500);
}

.staff-verify-form-row strong {
  flex: 1;
  font-weight: 500;
  word-break: break-word;
}

.staff-verified-section {
  margin-top: 8px;
}

.staff-verified-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.staff-verified-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

.staff-verified-count {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.staff-verified-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.staff-verified-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eef2f7;
}

.staff-verified-item-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.staff-verified-item-head span {
  font-size: 12px;
  color: var(--gray-500);
}

.staff-verified-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--gray-600);
}

.home-waterfall-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-10) var(--spacing-4);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.home-recommend-loading,
.home-recommend-footer {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-6) var(--spacing-4);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.home-recommend-footer-text {
  display: inline-block;
}

/* ===== 全站搜索 ===== */
.page-search {
  padding-bottom: calc(var(--spacing-8) + env(safe-area-inset-bottom));
}

.search-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-back {
  border: none;
  background: none;
  padding: 8px;
  color: var(--gray-700);
  cursor: pointer;
}

.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--gray-50);
  border-radius: var(--radius-full);
  min-width: 0;
}

.search-input-icon {
  flex-shrink: 0;
  color: var(--gray-400);
}

.search-input-icon svg {
  width: 18px;
  height: 18px;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 15px;
  outline: none;
}

.search-submit {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.search-grade-tip {
  padding: 8px var(--spacing-4);
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-50);
}

.search-results {
  padding: var(--spacing-3) var(--spacing-4);
}

.search-hint,
.search-empty {
  text-align: center;
  padding: var(--spacing-10) var(--spacing-4);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.search-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.search-result-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.search-result-cover {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--gray-100) center/cover no-repeat;
  flex-shrink: 0;
}

.search-result-body {
  flex: 1;
  min-width: 0;
}

.search-result-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--primary);
  background: rgba(var(--primary-rgb, 255, 107, 74), 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: 4px;
}

.search-result-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-desc {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.post-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.post-delete-btn {
  border: none;
  background: #fee2e2;
  color: #dc2626;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.product-order-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
}

.product-order-card {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.product-order-cover {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  background: var(--gray-100) center/cover no-repeat;
  flex-shrink: 0;
}

.product-order-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0 0 4px;
}

.product-order-meta {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0 0 8px;
}

.product-order-status {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
}

.product-order-status--paid {
  background: #ecfdf5;
  color: #059669;
}

.product-order-status--pending {
  background: #fff7ed;
  color: #ea580c;
}

.exchange-address-card {
  padding: var(--spacing-4);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--white);
}

.exchange-address-form {
  padding: var(--spacing-2) 0;
}

.exchange-address-label {
  display: block;
  font-size: 13px;
  color: var(--gray-600);
  margin: 12px 0 6px;
}

.exchange-address-label:first-child {
  margin-top: 0;
}

.exchange-address-input,
.exchange-address-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 15px;
}

.exchange-address-textarea {
  min-height: 80px;
  resize: vertical;
}

.consult-my-orders {
  margin: var(--spacing-4) var(--spacing-4) 0;
  padding: var(--spacing-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.consult-my-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.consult-my-orders-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.consult-my-orders-count {
  font-size: 12px;
  color: var(--gray-500);
}

.consult-my-order-item {
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--gray-100);
}

.consult-my-order-item:last-child {
  border-bottom: none;
}

.consult-my-order-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.consult-my-order-expert {
  font-weight: 600;
  font-size: 14px;
}

.consult-my-order-status {
  font-size: 12px;
  color: var(--primary);
}

.consult-my-order-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-500);
}

.address-page { padding: var(--spacing-4); padding-bottom: 100px; }
.address-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.address-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.address-card-name { font-weight: 600; }
.address-default-tag { font-size: 11px; color: var(--primary); background: #fff5f0; padding: 2px 8px; border-radius: 999px; }
.address-card-detail { font-size: 14px; color: var(--gray-600); margin: 0 0 12px; line-height: 1.5; }
.address-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.address-empty, .cart-empty, .test-history-empty { text-align: center; color: var(--gray-500); padding: 24px 0; }

/* ===== 卡密兑换 ===== */
.page-card-redeem {
  background: var(--gray-50);
  min-height: 100vh;
  padding-bottom: 32px;
}

.card-redeem-hero {
  margin: 0 16px 16px;
  padding: 28px 20px 24px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #1e3a5f 0%, #2d4a73 40%, #ff6b4a 100%);
  box-shadow: 0 12px 32px rgba(30, 58, 95, 0.22);
}

.card-redeem-hero-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
}

.card-redeem-hero-icon svg {
  width: 28px;
  height: 28px;
  color: #ffd666;
}

.card-redeem-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.card-redeem-hero-desc {
  margin: 0;
  font-size: 13px;
  opacity: 0.88;
  line-height: 1.5;
}

.card-redeem-vip-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.card-redeem-panel {
  margin: 0 16px 16px;
  padding: 20px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.card-redeem-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.card-redeem-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.card-redeem-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--gray-900);
  background: var(--gray-50);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-redeem-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.12);
  background: var(--white);
}

.card-redeem-input::placeholder {
  font-weight: 400;
  letter-spacing: 0;
  font-family: inherit;
  color: var(--gray-400);
}

.card-redeem-paste {
  flex-shrink: 0;
  padding: 0 14px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

.card-redeem-paste:active {
  background: var(--gray-50);
}

.card-redeem-hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.5;
}

.card-redeem-submit {
  border-radius: 12px;
  font-weight: 600;
}

.card-redeem-benefits,
.card-redeem-rules {
  margin: 0 16px 16px;
  padding: 18px 20px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.card-redeem-benefits-title,
.card-redeem-rules-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.card-redeem-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card-redeem-benefit-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.3;
}

.card-redeem-benefit-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 107, 74, 0.1);
  color: var(--primary);
}

.card-redeem-benefit-icon svg {
  width: 16px;
  height: 16px;
}

.card-redeem-rules-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.65;
}

.card-redeem-rules-list li + li {
  margin-top: 8px;
}

.card-redeem-success {
  text-align: center;
  padding: 8px 0 4px;
}

.card-redeem-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.card-redeem-success-icon svg {
  width: 36px;
  height: 36px;
}

.card-redeem-success-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.card-redeem-success-desc {
  margin: 0;
  font-size: 14px;
  color: var(--gray-600);
}

.card-redeem-success-desc strong {
  color: var(--primary);
  font-size: 18px;
}

.card-redeem-success-expire {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--gray-500);
}

.page-cart .cart-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
}
.cart-item-cover { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.cart-item-body { flex: 1; }
.cart-item-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.cart-item-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cart-item-sub { font-size: 13px; color: var(--primary); margin-top: 6px; font-weight: 600; }
.cart-qty { min-width: 24px; text-align: center; }
.cart-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  z-index: 350;
}

/* ===== 体验会员页 ===== */
.page-trial-vip {
  background: linear-gradient(180deg, #fff5f2 0%, #f7f8fa 220px, #f7f8fa 100%);
  min-height: 100vh;
  padding-bottom: 88px;
}

.page-trial-vip--member {
  background: linear-gradient(180deg, #fff8ee 0%, #f7f8fa 220px, #f7f8fa 100%);
}

.trial-vip-hero {
  position: relative;
  margin: 12px 16px 16px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(255, 107, 74, 0.18);
}

.trial-vip-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 107, 74, 0.4) 0%, transparent 55%),
    linear-gradient(135deg, #ff6b4a 0%, #ff8f6b 100%);
}

.trial-vip-hero-inner {
  position: relative;
  padding: 24px 20px;
  color: #fff;
}

.trial-vip-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trial-vip-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.trial-vip-user-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.trial-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.22);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.trial-vip-expire,
.trial-vip-hint {
  font-size: 13px;
  opacity: 0.92;
}

.trial-vip-card {
  margin: 0 16px;
  padding: 24px 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.trial-vip-card-head {
  margin-bottom: 16px;
}

.trial-vip-card-tag {
  display: inline-block;
  font-size: 12px;
  color: #ff6b4a;
  background: #fff0ec;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.trial-vip-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.trial-vip-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 20px;
}

.trial-vip-price-currency {
  font-size: 20px;
  font-weight: 700;
  color: #ff6b4a;
}

.trial-vip-price-value {
  font-size: 40px;
  font-weight: 800;
  color: #ff6b4a;
  line-height: 1;
}

.trial-vip-price-unit {
  font-size: 15px;
  color: #666;
  margin-left: 4px;
}

.trial-vip-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.trial-vip-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #444;
  padding: 8px 0;
}

.trial-vip-benefits li svg {
  color: #ff6b4a;
  flex-shrink: 0;
}

.trial-vip-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, #ff6b4a 0%, #ff8f6b 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(255, 107, 74, 0.35);
}

.trial-vip-btn--disabled {
  background: #e8e8e8;
  color: #999;
  box-shadow: none;
}

.trial-vip-disabled-tip {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 12px 0;
}

.trial-vip-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.6;
}

/* ===== 学习页 /study ===== */
.page-study {
  background: linear-gradient(180deg, #fff5f0 0%, #f7f8fa 180px, #f7f8fa 100%);
  padding-bottom: calc(var(--bottom-nav-offset, 80px) + 16px);
}

.study-page {
  padding: 0 16px 24px;
}

.study-loading,
.study-empty,
.study-empty-block {
  padding: 32px 16px;
  text-align: center;
  color: var(--gray-500);
}

.study-hero {
  position: relative;
  margin-bottom: 12px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(255, 107, 74, 0.15);
}

.study-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(255, 107, 74, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, #ff6b4a 0%, #ff8f6b 100%);
}

.study-hero-inner {
  position: relative;
  padding: 18px 16px;
  color: #fff;
}

.study-hero-label {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.92;
}

.study-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.study-hero-stat {
  text-align: center;
}

.study-hero-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.study-hero-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.88;
}

.study-panel {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.study-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.study-panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

.study-panel-badge {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
}

.study-panel-desc {
  margin: 0;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.6;
}

.study-day-group + .study-day-group {
  margin-top: 12px;
}

.study-day-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
}

.study-learning-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--gray-50);
  cursor: pointer;
}

.study-learning-item + .study-learning-item {
  margin-top: 8px;
}

.study-learning-item--done {
  background: #fff7f4;
  border: 1px solid rgba(255, 107, 74, 0.12);
}

.study-learning-item-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}

.study-learning-item-sub {
  margin: 0;
  font-size: 12px;
  color: var(--gray-500);
}

.study-learning-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.study-learning-item-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 107, 74, 0.12);
  color: var(--primary);
  font-weight: 600;
}

.study-ability-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.study-ability-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.study-ability-icon {
  font-size: 22px;
  line-height: 1;
}

.study-ability-body {
  flex: 1;
  min-width: 0;
}

.study-ability-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
}

.study-ability-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
}

.study-ability-bar-fill {
  height: 100%;
  border-radius: inherit;
}

.study-ability-sources {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--gray-500);
}

.study-ability-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.study-ability-chip {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.study-ability-chip--ghost {
  background: var(--gray-100);
  color: var(--gray-600);
}

.study-compare-ring-wrap {
  display: flex;
  gap: 16px;
  align-items: center;
}

.study-compare-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--primary) calc(var(--rate, 0) * 1%), #f0f0f0 0);
  position: relative;
  flex-shrink: 0;
}

.study-compare-ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}

.study-compare-ring-value,
.study-compare-ring-label {
  position: relative;
  z-index: 1;
}

.study-compare-ring-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.study-compare-ring-label {
  font-size: 10px;
  color: var(--gray-500);
}

.study-compare-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.study-compare-metric-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-600);
}

.study-compare-metric-val {
  font-size: 13px;
  font-weight: 600;
  margin: 2px 0 4px;
}

.study-compare-metric-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
}

.study-compare-metric-fill {
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}

.study-plan-note-ref {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--gray-500);
}

.study-feedback-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.study-feedback-summary {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
}

.study-feedback-list {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-700);
  font-size: 13px;
  line-height: 1.7;
}

.study-feedback--success .study-feedback-title { color: #059669; }
.study-feedback--warn .study-feedback-title { color: #d97706; }
.study-feedback--primary .study-feedback-title { color: var(--primary); }

.study-plan-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.study-plan-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
}

.study-plan-field--full {
  grid-column: 1 / -1;
}

.study-plan-field input,
.study-plan-field textarea {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.study-plan-abilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.study-ability-pick {
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.study-ability-pick.is-active {
  border-color: var(--primary);
  background: rgba(255, 107, 74, 0.08);
  color: var(--primary);
}

.study-plan-save {
  grid-column: 1 / -1;
  margin-top: 4px;
}