/* ============================================
   全声汇 — 全局样式
   主色: #FF9E6D（暖橙）  行动色: #FF5722（橙红）
   ============================================ */

/* TDesign 主题变量覆盖 */
page {
  /* 品牌色 → 暖橙 */
  --td-brand-color: #FF9E6D;
  --td-brand-color-light: rgba(255, 158, 109, 0.1);
  --td-brand-color-focus: rgba(255, 158, 109, 0.2);
  --td-brand-color-active: #FF5722;
  --td-brand-color-disabled: rgba(255, 158, 109, 0.4);

  /* 成功色 */
  --td-success-color: #10B981;
  --td-success-color-light: rgba(16, 185, 129, 0.1);

  /* 警告色 */
  --td-warning-color: #EF4444;

  /* 圆角 */
  --td-radius-default: 16rpx;
  --td-radius-large: 32rpx;
  --td-radius-extra-large: 40rpx;
  --td-radius-round: 999rpx;

  /* ── 核心品牌变量 ── */
  --color-primary: #FF9E6D;
  --color-primary-dark: #FF5722;
  --color-primary-light: rgba(255, 158, 109, 0.08);
  --color-primary-bg: rgba(255, 158, 109, 0.12);
  --color-accent: #34D399;
  --color-success: #10B981;
  --color-warning: #EF4444;

  /* ── 页面/容器色 ── */
  --color-bg-page: #FAFAF8;
  --color-bg-card: #FFFFFF;
  --color-bg-container: #FEFEFE;

  /* ── 文字色阶 ── */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-placeholder: #999999;
  --color-text-disabled: #CCCCCC;

  /* ── 边框/分割 ── */
  --color-border: #EEEEEE;
  --color-border-light: #F5F5F5;

  /* ── 领域色 ── */
  --domain-tech: #3B82F6;
  --domain-news: #F97316;
  --domain-realtime: #EF4444;
  --domain-psych: #10B981;
  --domain-money: #F59E0B;
  --domain-edu: #8B5CF6;

  /* 页面背景 */
  background-color: var(--color-bg-page);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
               'Helvetica Neue', sans-serif;
  font-size: 28rpx;
  color: var(--color-text-primary);
  line-height: 1.6;
  box-sizing: border-box;
}

/* ========== 通用工具类 ========== */

/* Flex */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }

/* 间距 */
.gap-sm { gap: 16rpx; }
.gap-md { gap: 24rpx; }
.gap-lg { gap: 32rpx; }

/* 文字 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-bold { font-weight: 700; }
.text-medium { font-weight: 500; }
.text-xs { font-size: 20rpx; }
.text-sm { font-size: 24rpx; }
.text-base { font-size: 28rpx; }
.text-lg { font-size: 32rpx; }
.text-xl { font-size: 36rpx; }
.text-2xl { font-size: 44rpx; }
.text-3xl { font-size: 56rpx; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-placeholder { color: var(--color-text-placeholder); }
.text-white { color: #FFFFFF; }

/* 单行省略 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 多行省略 */
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ========== 卡片 ========== */
.card {
  background: var(--color-bg-card);
  border-radius: var(--td-radius-extra-large);
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  border: 1rpx solid var(--color-border-light);
}

/* ========== 按钮 ========== */
.btn-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--td-radius-round);
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.btn-primary::after { border: none; }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2rpx solid var(--color-primary);
  border-radius: var(--td-radius-round);
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
}

.btn-ghost {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: none;
  border-radius: var(--td-radius-round);
  padding: 16rpx 32rpx;
  font-size: 24rpx;
  font-weight: 600;
}
.btn-ghost::after { border: none; }

/* 按钮点击反馈 */
.btn-primary:active,
.btn-outline:active,
.btn-ghost:active,
.tap-active:active {
  opacity: 0.85;
  transform: scale(0.97);
}

/* ========== 安全区 ========== */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

/* 播放栏底部安全占位（全局播放栏高度 128rpx + 底部安全区 + 20rpx 间距） */
.player-bottom-spacer {
  height: calc(148rpx + env(safe-area-inset-bottom));
  flex-shrink: 0;
}

/* 首字母彩色圆形（频道默认封面） */
.initial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  color: #FFF;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}

/* ========== 全局隐藏滚动条 ========== */
page {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

/* 隐藏所有 webkit 滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  color: transparent;
  background: transparent;
}

/* 通用滚动容器滚动条隐藏 */
page,
view,
scroll-view {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE / Edge */
}

page::-webkit-scrollbar,
view::-webkit-scrollbar,
scroll-view::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

/* ========== 动画 ========== */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.anim-rotate {
  animation: rotate 10s linear infinite;
}
.anim-rotate-paused {
  animation-play-state: paused;
}
.anim-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}
.anim-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ========== 暗色模式变量覆盖 ========== */
@media (prefers-color-scheme: dark) {
  page {
    --color-primary: #FFB088;
    --color-primary-dark: #FF5722;
    --color-primary-light: rgba(255, 176, 136, 0.12);
    --color-bg-page: #121212;
    --color-bg-card: #1E1E1E;
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #999;
    --color-text-placeholder: #666;
    --color-text-disabled: #555;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-success: #2ECC71;
  }
}