/* ═══ 全局隐藏滚动条（保留滚动/触摸滑动能力，仅去掉视觉滚动条）═══ */
html, body, * {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 旧 Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #0a0a0f;
  --bg-2: #14141c;
  --card: #1a1a24;
  --card-hi: #22222e;
  --border: #2a2a38;
  --text: #f2f2f5;
  --text-2: #9a9aa8;
  --text-3: #6a6a78;
  --accent: #7c5cff;
  --accent-2: #4ad6ff;
  --danger: #ff5c7c;
  --ok: #34d399;
  --gen-glow: rgba(124, 92, 255, 0.45);
  --topbar-bg: rgba(10, 10, 15, 0.85);
  --mask-bg: rgba(0, 0, 0, 0.55);
  --sheet-bg: var(--bg-2);
}

/* Light 主题 */
[data-theme="light"] {
  --bg: #f5f5f8;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-hi: #f0f0f5;
  --border: #e2e2ea;
  --text: #1a1a2e;
  --text-2: #6a6a78;
  --text-3: #9a9aa8;
  --accent: #6c4eff;
  --accent-2: #00a8d8;
  --danger: #e8425a;
  --ok: #22b878;
  --gen-glow: rgba(108, 78, 255, 0.3);
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --mask-bg: rgba(0, 0, 0, 0.35);
  --sheet-bg: #ffffff;
}

/* Color 清新炫彩主题 */
[data-theme="color"] {
  --bg: #fff0f5;
  --bg-2: #faf5ff;
  --card: #ffffff;
  --card-hi: #fff5fa;
  --border: #f0d5e8;
  --text: #2d1b4e;
  --text-2: #333333;
  --text-3: #555;
  --accent: #ff6b9d;
  --accent-2: #00c9db;
  --danger: #ff4757;
  --ok: #2ed573;
  --gen-glow: rgba(255, 107, 157, 0.4);
  --topbar-bg: rgba(255, 240, 245, 0.9);
  --mask-bg: rgba(60, 20, 100, 0.35);
  --sheet-bg: #ffffff;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ─── 主框架高度链锁定（仅 index，player.html 等其它页面不受影响） ───
   #app 原 min-height:100% 会被内容撑开 → .tab-view(flex:1) 高度=内容高度，
   tab-view 自身永不滚动、滚动发生在 window 上（profileView.scrollTop 恒 0）——
   「我的」滚动位置保存/恢复从第一天起存的就是 0，"切回列表回顶"多轮修复无效的终极根因。
   锁定后 tab-view 真正内部滚动，scrollTop 有了真实值，存/恢复链路才成立。 */
body.page-home {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;      /* window 不再滚，滚动全进各 tab-view（弹窗均 fixed 不受影响） */
}
body.page-home #app {
  height: 100%;          /* min-height → height：flex 容器高度锁定视口 */
}

.hidden {
  display: none !important;
}

/* ─── 顶栏 ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 600;
}

.topbar-title .logo {
  font-size: 22px;
}

.topbar-logo {
  height: 30px;
  width: auto;
  display: block;
}

.btn-new {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px var(--gen-glow);
}

.btn-new:active {
  transform: scale(0.92);
}

/* 登录按钮/头像 */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-login-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
  flex-shrink: 0;
  overflow: hidden;
}

.btn-login-avatar:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-login-avatar--logged {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
}

/* ─── Tab 视图通用 ─── */
.tab-view {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(50px + max(0px, env(safe-area-inset-bottom)) + 16px);
}

/* ─── 广场列表 ─── */
.square-list {
  padding: 0;
  margin-bottom: 100px;
}

.empty {
  margin: 80px auto;
  text-align: center;
  color: var(--text-3);
}

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

.empty-text {
  font-size: 16px;
  color: var(--text-2);
  margin-bottom: 4px;
}

.empty-hint {
  font-size: 13px;
}

/* ─── 卡片 ─── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s;
}

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

/* 当前播放卡片：反色（浅底深字），在深色列表中醒目 */
.card.playing {
  background: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 22px var(--gen-glow);
}

.card.playing .card-title {
  color: var(--bg);
}

.card.playing .card-intro {
  color: #4a4a55;
}

.card.playing .card-meta {
  color: #6a6a78;
}

.card.playing .card-fmt {
  background: rgba(0, 0, 0, 0.06);
  color: #4a4a55;
  border-color: rgba(0, 0, 0, 0.12);
}

.card.playing .host-chip {
  background: rgba(0, 0, 0, 0.06);
  color: #4a4a55;
  border-color: rgba(0, 0, 0, 0.12);
}

.card.playing .host-chip .h-label {
  color: var(--accent);
}

/* 生成中：其他卡片变灰禁用，不可点击 */
.card.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* 生成中卡片（黑色高亮） */
.card.generating {
  background: #000;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 30px var(--gen-glow);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 1px var(--accent), 0 4px 18px rgba(124, 92, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 0 1px var(--accent), 0 8px 34px rgba(124, 92, 255, 0.6);
  }
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
}

.card-fmt {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--card-hi);
  color: var(--text-2);
  border: 1px solid var(--border);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* 视频生成失败 / 方案待确认：卡片右上角标签要能一眼看出来，别混在灰色「未生成视频」里 */
.card-fmt.fail { color: #ff5a5a; border-color: rgba(255, 90, 90, 0.5); background: rgba(255, 90, 90, 0.10); }
.card-fmt.pending { color: #f0a020; border-color: rgba(240, 160, 32, 0.5); background: rgba(240, 160, 32, 0.10); }

.card-intro {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 「正在生成视频」标签（后端视频任务 status=0 期间显示，跑完由轮询自动撤下） */
.card-gen-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 8px rgba(124, 92, 255, .28);
  animation: genBadgePulse 1.6s ease-in-out infinite;
}

@keyframes genBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}

/* 「视频生成失败 / 方案待确认」标签：最近一条视频任务的终态，跑成功后自动消失 */
.card-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.card-state-badge.fail { color: #ff6b6b; background: rgba(255, 90, 90, 0.14); border: 1px solid rgba(255, 90, 90, 0.42); }
.card-state-badge.pending { color: #f0a020; background: rgba(240, 160, 32, 0.14); border: 1px solid rgba(240, 160, 32, 0.42); }

@media (prefers-reduced-motion: reduce) {
  .card-gen-badge { animation: none; }
}

.card-hosts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.host-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--card-hi);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.host-chip .h-label {
  font-weight: 700;
  color: var(--accent-2);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.card-meta {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  gap: 12px;
}

/* 统计行：播放/点赞/评论单独一行，放在 AI 主播 chip 下方（不与时长挤一行） */
.card-stats {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
}
.card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.card-edit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}

.card-edit:active {
  transform: scale(0.9);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-download {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.card-download:active {
  transform: scale(0.9);
}

.card.playing .card-download {
  border-color: rgba(0, 0, 0, 0.12);
  color: #6a6a78;
}

.gen-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

.gen-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(124, 92, 255, 0.3);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

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

.gen-script {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  max-height: 80px;
  overflow: hidden;
}

.gen-script .line {
  display: block;
}

.gen-script .line .spk {
  color: var(--accent-2);
  font-weight: 700;
  margin-right: 4px;
}

/* ─── 底部弹窗 ─── */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--mask-bg);
  animation: fade .2s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  background: var(--sheet-bg);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-top: 1px solid var(--border);
  padding: 10px 16px max(24px, env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  animation: slideup .28s cubic-bezier(.2, .8, .2, 1);
}

@keyframes slideup {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* 子页面级底部弹窗：固定 80% 屏高，内容区独立滚动 */
.sheet-page {
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.sheet-page .sheet-handle {
  flex-shrink: 0;
}

.sheet-page .sheet-title {
  flex-shrink: 0;
}

.sheet-page .sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px 0;
}

.sheet-handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 4px auto 12px;
}

.sheet-title {
  font-size: 17px;
  font-weight: 600;
  /* 补上主题文字色：此前未定义 color，在部分主题下继承到与弹窗底色同色 → 标题看不清 */
  color: var(--text);
  margin-bottom: 14px;
  position: relative;
  text-align: center;
}

.sheet-confirm-btn {
  position: absolute;
  right: 0;
  top: -4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Emoji 头像选择网格 */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  padding-bottom: 10px;
}

.emoji-grid-item {
  aspect-ratio: 1;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--card);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
}

.emoji-grid-item:active {
  transform: scale(0.9);
}

.emoji-grid-item.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.1);
}

/* 生日显示框 */
.birthday-display {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text);
  background: var(--card);
  cursor: pointer;
  text-align: center;
}

.birthday-display:active {
  border-color: var(--accent);
}

.birthday-display.placeholder {
  color: var(--text-3);
}

/* 卡片抽屉式行（个人资料编辑页：左标题 + 右当前值 + 箭头） */
.field-card {
  display: flex;
  align-items: center;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.field-card:active {
  border-color: var(--accent);
  background: var(--card-hi);
}

.field-card-label {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  flex-shrink: 0;
}

.field-card-value {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
  font-size: 14px;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-card-value.has-value {
  color: var(--text);
}

.field-card-arrow {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 20px;
  color: var(--text-3);
  line-height: 1;
}

/* 生日滑动选择器 */
.birthday-picker {
  display: flex;
  gap: 8px;
  padding: 10px 0;
}

.birthday-col {
  flex: 1;
  text-align: center;
}

.birthday-col-label {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 6px;
}

.birthday-scroll {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.birthday-scroll::-webkit-scrollbar {
  display: none;
}

.birthday-scroll::before,
.birthday-scroll::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 80px;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.birthday-scroll::before {
  top: 0;
  background: linear-gradient(to bottom, var(--card), transparent);
}

.birthday-scroll::after {
  bottom: 0;
  background: linear-gradient(to top, var(--card), transparent);
}

.birthday-item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--text);
  scroll-snap-align: center;
}

.birthday-item.selected {
  color: var(--accent);
  font-weight: 700;
}

.field {
  margin-bottom: 14px;
}

.field-label {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 8px;
  font-weight: 500;
}

.field-hint {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}

.field-row {
  display: flex;
  gap: 12px;
}

.field-row .field {
  flex: 1;
}

.textarea,
.input {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  resize: none;
  outline: none;
}

.textarea:focus,
.input:focus {
  border-color: var(--accent);
}

.input {
  padding: 11px 12px;
}

/* 音色网格 */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.voice-tag {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}

.voice-tag .v-emoji {
  font-size: 22px;
}

.voice-tag .v-name {
  font-size: 12px;
  color: var(--text-2);
}

.voice-tag .v-gen {
  font-size: 10px;
  color: var(--text-3);
}

.voice-tag.selected {
  background: var(--card-hi);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.voice-tag.selected .v-name {
  color: var(--text);
}

/* 分段控件 */
.seg {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-2);
  padding: 8px 0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.seg-btn.active {
  background: var(--accent);
  color: #fff;
}

.btn-generate {
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #5a3fff);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--gen-glow);
  transition: transform .12s;
}

.btn-generate:active {
  transform: scale(0.98);
}

.btn-generate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── 播放浮条（Tab 栏上方） ─── */
.player-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(50px + max(0px, env(safe-area-inset-bottom)) + 10px);
  z-index: 25;
  background: var(--card-hi);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.pb-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pb-btn-stop {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  font-size: 13px;
}

.pb-btn-stop:active {
  background: var(--card-hi);
  color: var(--danger);
  border-color: var(--danger);
}

.pb-info {
  flex: 1;
  min-width: 0;
}

.pb-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-sub {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── 登录遮罩 ─── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.login-logo {
  height: 64px;
  width: auto;
  margin: 0 auto 12px;
  display: block;
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 28px;
}

.login-field {
  margin-bottom: 14px;
}

.login-input {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  text-align: left;
}

.login-input:focus {
  border-color: var(--accent);
}

.login-input::placeholder {
  color: var(--text-3);
}

.login-code-row {
  display: flex;
  gap: 10px;
}

.login-code-input {
  flex: 1;
}

.login-send-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.login-send-btn:active {
  background: var(--accent);
  color: #fff;
}

.login-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.login-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #5a3fff);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--gen-glow);
  margin-top: 6px;
}

.login-btn:active {
  transform: scale(0.98);
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-error {
  margin-top: 14px;
  font-size: 13px;
  color: var(--danger);
  text-align: center;
}

/* ─── 个人资料页 ─── */
.profile-view {
  padding-bottom: 0;
  margin-bottom: 80px;
}

/* ─── 下拉刷新指示条：平时高度0，下拉时由 JS 撑开 ─── */
.profile-ptr {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text3, #8a8f9d);
  font-size: 12px;
  user-select: none;
  -webkit-user-select: none;
}
.profile-ptr-icon {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.profile-ptr.armed .profile-ptr-icon { transform: rotate(180deg); }
.profile-ptr.refreshing .profile-ptr-icon { animation: ptr-spin 0.9s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 19;
}

.profile-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}

.profile-back-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

.profile-header-title {
  font-size: 16px;
  font-weight: 600;
}

/* 用户卡片改为左右结构 */
.profile-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.08) 0%, transparent 100%);
  cursor: pointer;
  transition: background .2s;
  user-select: none;
}

.profile-card-row:active {
  background: rgba(124, 92, 255, 0.12);
}

.profile-card-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15);
}

.profile-card-info {
  flex: 1;
  min-width: 0;
}

.profile-card-name {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-arrow {
  font-size: 24px;
  color: var(--text-3);
  flex-shrink: 0;
  line-height: 1;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bg-2);
  border: 1px solid var(---bg-2);
  border-radius: 14px;
  overflow: hidden;
  margin: 16px;
}

.profile-stat {
  background: var(--bg-2);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-stat-value {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.profile-stat-label {
  font-size: 12px;
  color: var(--text-2);
}

.profile-section-title {
  font-size: 16px;
  font-weight: 600;
  padding: 16px 16px 10px;
}

/* 标题行：文字居左、图标组居右 */
.profile-section-title--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 右侧图标组：AI 图标 + 控制台图标紧挨在一起，避免被 space-between 挤到行中间 */
.profile-title-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profile-console-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-2);
  background: var(--card-hi);
  transition: opacity .15s;
}

.profile-console-icon:active { opacity: 0.6; }

/* 「我的AI」图标是 button（复用 .profile-console-icon 的方块样式，清掉浏览器默认外观） */
button.profile-console-icon {
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ─── 我的创作：搜索栏（点右上角 🔍 展开，✕ 关闭并回到原列表）─── */
.podcast-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  padding: 9px 14px;
  background: var(--card-hi);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.podcast-search-row .ps-ico { flex: 0 0 17px; width: 17px; height: 17px; color: var(--text-3); }
.podcast-search-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.podcast-search-row input::placeholder { color: var(--text-3); }

/* 我的音色 tab 顶部：上传音频文件 / 录音我的音色 */
.my-voice-actions { display: flex; gap: 10px; margin: 0 0 12px; }
.my-voice-act { flex: 1; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.my-voice-act--rec { border-color: var(--accent); color: var(--accent); }
.my-voice-act:active { opacity: .8; }

/* 我的AI底部弹窗：列表区独立滚动，关闭按钮固定右上角 */
.my-ai-sheet { max-height: 76vh; }
.sheet-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--card-hi);
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-ai-list {
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
}

.profile-podcasts {
  padding: 0 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-podcasts .empty {
  margin: 40px auto;
}

/* "我的"页视频列表底部哨兵：加载中 / 上滑加载更多 / 没有更多了 */
.podcasts-sentinel {
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
  padding: 14px 0 6px;
  letter-spacing: 0.5px;
}

/* 广场搜索框 */
.square-search-bar {
  display: flex;
  gap: 8px;
  margin: 12px;
  margin-bottom: 12px;
  align-items: center;
}

.square-search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}

.square-search-input:focus {
  border-color: var(--accent);
}

.square-search-input::placeholder {
  color: var(--text-3);
}

.square-search-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}

.square-search-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

/* 布局切换按钮 */
.square-layout-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}

.square-layout-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

.square-layout-btn.single {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.square-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px;
}

/* 单排模式 */
.square-grid.layout-single {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 12px;
}

.square-more-wrap {
  text-align: center;
  padding: 16px 0;
}

.square-more-btn {
  padding: 10px 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}

.square-more-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

.square-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
}

.square-card:active {
  transform: scale(0.97);
}

/* 播放中的高亮 */
.square-card--playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 22px var(--gen-glow);
}

.square-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
}

.square-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 播放按钮覆盖在封面图上 */
.square-card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: all .15s;
}

.square-card-play-overlay:active {
  transform: scale(0.92);
}

.square-card-play-overlay .play-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  transition: all .15s;
}

.square-card-play-overlay:active .play-icon {
  transform: scale(0.88);
  background: rgba(124, 92, 255, 0.6);
}

.square-card-body {
  padding: 10px 10px 8px;
}

.square-card-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.square-card-meta {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.square-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.square-card-stats {
  display: flex;
  gap: 6px;
}

.square-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  transition: all .12s;
}

.square-card-stat:active {
  background: var(--card-hi);
}

.square-card-stat--active {
  color: var(--accent);
}

/* ─── 单排模式下的卡片 ─── */
.square-grid.layout-single .square-card {
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  overflow: hidden;
}

.square-grid.layout-single .square-card:active {
  transform: scale(0.98);
}

.square-grid.layout-single .square-card-cover {
  width: 100px;
  min-width: 100px;
  aspect-ratio: 1;
  border-radius: 0;
  flex-shrink: 0;
}

.square-grid.layout-single .square-card-cover img {
  border-radius: 0;
}

.square-grid.layout-single .square-card-play-overlay .play-icon {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.square-grid.layout-single .square-card-body {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.square-grid.layout-single .square-card-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.square-grid.layout-single .square-card-meta {
  margin-bottom: 4px;
}

.square-grid.layout-single .square-card-footer {
  margin-top: auto;
}

/* 单排移除底部的播放按钮（用封面覆盖的替代） */
.square-grid.layout-single .square-card-play {
  display: none;
}

/* ─── Toast ─── */
.toast-msg {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
  animation: toast-fade 0.25s ease;
}

@keyframes toast-fade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ─── Confirm 弹窗 ─── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: confirm-overlay-in 0.2s ease;
}

@keyframes confirm-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.confirm-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px 16px;
  width: 300px;
  max-width: 85vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.confirm-body {
  font-size: 15px;
  color: var(--text);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.confirm-btn:active {
  opacity: 0.7;
}

.confirm-btn--cancel {
  background: var(--card-hi);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.confirm-btn--ok {
  background: var(--accent);
  color: #fff;
}

/* ─── 个人资料操作按钮 ─── */
.profile-logout-btn {
  padding: 10px 24px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: transparent;
  color: var(--danger);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}

.profile-logout-btn:active {
  background: var(--danger);
  color: #fff;
}

/* 资料编辑弹窗内的退出登录：整宽居中（原"我的"页底部按钮已按需求移除） */
.profile-logout-btn--block {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
}

/* ─── 字数标签 ─── */
.word-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.word-tag {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.word-tag.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.word-tag:active {
  transform: scale(0.95);
}

/* ─── 文本标签点选 chip-tag ─── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-tag {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.chip-tag.active {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  font-weight: 600;
}

.chip-tag:active {
  transform: scale(0.94);
}

/* 卡片式 chip（如性别）：竖排卡片逐行点选，替代小文本标签 */
.chip-row--cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.chip-tag--card {
  padding: 16px 14px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* ─── 视频风格卡片列表（图标 + 名称 + 小标题说明） ─── */
.play-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.play-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.play-card:active {
  transform: scale(0.98);
}

.play-card.active {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
}

.play-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.play-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.play-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.play-card.active .play-card-name {
  color: var(--accent);
}

.play-card-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ─── 创建视频：已选 AI 预览 ─── */
.selected-ai-preview {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 14px;
  min-height: 56px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.selected-ai-preview:active {
  background: rgba(255, 255, 255, 0.03);
}

.selected-ai-empty {
  width: 100%;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

.selected-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.selected-ai-chip .crown {
  font-size: 14px;
  color: #facc15;
}

.selected-ai-chip .remove-btn {
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.3);
  color: var(--accent);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ─── AI 选择抽屉 ─── */
.ai-drawer {
  display: flex;
  flex-direction: column;
  padding: 10px 16px max(24px, env(safe-area-inset-bottom));
  max-height: 88vh;
}

.ai-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ai-drawer-header .sheet-title {
  margin-bottom: 0;
}

.ai-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}

.ai-drawer-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ai-drawer-tab {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}

.ai-drawer-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.ai-drawer-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  height: 50vh;
  min-height: 300px;
  max-height: 50vh;
}

/* 单列行卡片：左图标+名称，右侧试听+选中 */
.ai-drawer-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: all .15s;
}

.ai-drawer-card.selected {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.08);
}

.ai-drawer-card.primary {
  border-color: #facc15;
}

.ai-drawer-card .crown {
  position: absolute;
  top: -8px;
  left: -6px;
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.ai-drawer-card-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.ai-drawer-card-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.ai-drawer-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 试听按钮：右侧圆形描边 ▶ */
.ai-drawer-card-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0 0 0 2px;
}

.ai-drawer-card--playing {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.15);
}

.ai-drawer-card--playing .ai-drawer-card-play {
  background: var(--accent);
  color: #fff;
}

/* 「我的AI」卡片右侧的编辑图标（系统AI/明星AI卡片不渲染，它们不属于用户） */
.ai-drawer-card-edit {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}

.ai-drawer-card-edit:active {
  transform: scale(0.92);
  border-color: var(--accent);
}

.ai-drawer-card .check-mark {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
}

.ai-drawer-card.selected .check-mark {
  display: flex;
}

/* "我的AI"tab 最前面的"+创建AI"占位卡片 */
.ai-drawer-card-create {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  min-height: 96px;
  transition: border-color .15s, background .15s, transform .12s;
}

.ai-drawer-card-create:active {
  transform: scale(0.97);
  border-color: var(--accent);
  background: var(--card-hi);
}

.ai-drawer-card-create-icon {
  font-size: 30px;
  color: var(--accent);
  line-height: 1;
  font-weight: 300;
}

.ai-drawer-card-create-text {
  font-size: 12px;
  color: var(--text-2);
}

.ai-drawer-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ai-drawer-count {
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
}

.ai-drawer-footer .btn-generate {
  min-width: 100%;
  padding: 12px 22px;
}

/* ─── 我的AI主播弹窗（个人页） ─── */
.my-ai-sheet {
  display: flex;
  flex-direction: column;
  padding: 10px 16px max(24px, env(safe-area-inset-bottom));
  max-height: 85vh;
}
.my-ai-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-ai-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  position: relative;
}
.my-ai-card:active {
  transform: scale(0.98);
  border-color: var(--accent);
}
/* 点选保持态：点过的卡片持续高亮（表示"当前在听这个 AI"），直到点其它卡或关弹窗。
   旧版只有 --playing（播放几秒就撤），合成慢时高亮一闪而过＝"没有高亮"（华哥实测） */
.my-ai-card--active {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.10);
}
.my-ai-card--active .my-ai-card-name { color: var(--accent); }
/* 播放中脉冲：▶ 图标呼吸动画，明确"声音正在放" */
.my-ai-card--playing .my-ai-card-play-icon {
  animation: myAiPlayPulse 1s ease-in-out infinite;
}
@keyframes myAiPlayPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
.my-ai-card-emoji {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card-hi);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.my-ai-card-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.my-ai-card-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.my-ai-card-sub {
  font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.my-ai-card-fav {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.my-ai-card-fav:active { background: var(--card-hi); }
.my-ai-card-fav.active { color: var(--accent); }
.my-ai-card-play-icon {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  pointer-events: none;
}
.my-ai-card--playing .my-ai-card-play-icon {
  display: flex;
}

/* ─── 照片上传 ─── */
/* ─── 照片上传（多图网格）：PC / 手机自适应，一行铺满自动换行 ─── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-hi);
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-thumb-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-add {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}

.photo-add:active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── 用户资料标签行（抽屉入口） ─── */
.profile-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
  margin-top: 4px;
}

.profile-tag-row:active {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.05);
}

.profile-tag-value {
  font-size: 14px;
  color: var(--text-3);
  flex: 1;
}

.profile-tag-value.has-selected {
  color: var(--accent);
  font-weight: 500;
}

.profile-tag-arrow {
  font-size: 20px;
  color: var(--text-3);
  margin-left: 8px;
  line-height: 1;
}

/* ─── 标签选择抽屉 ─── */
.tag-drawer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
  max-height: 50vh;
  overflow-y: auto;
}

.tag-drawer-item {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}

.tag-drawer-item:active {
  transform: scale(0.95);
}

.tag-drawer-item.active {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.18);
  color: var(--accent);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--accent);
}

.tag-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.tag-drawer-hint {
  font-size: 12px;
  color: var(--text-3);
}

.tag-drawer-footer .btn-generate {
  width: auto;
  min-width: 120px;
  padding: 10px 20px;
}

/* 下拉选择框 */
.input-select {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  appearance: auto;
}

.input-select:focus {
  border-color: var(--accent);
}

/* ─── 我的创作按钮 ─── */
.btn-my-podcasts {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}

.btn-my-podcasts:active {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── 桌面适配（H5也用于官网） ─── */
@media (min-width: 768px) {
  #app {
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
  }

  .square-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }

  .square-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
}

/* ═══ AI 角色管理 ═══ */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.ai-card {
  padding: 12px 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}

.ai-card.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.12);
  box-shadow: 0 0 0 1px var(--accent);
}

.ai-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.ai-card-sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 3px;
}

/* AI 列表项（管理 sheet 内） */
.ai-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.ai-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ai-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 形象照：AI 列表头像直接用照片（上传后 ai_avatar_url 为图片 URL） */
.ai-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* AI 表单：形象照预览缩略图 */
.ai-avatar-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
}

.ai-item-info {
  flex: 1;
  min-width: 0;
}

.ai-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-item-sub {
  font-size: 12px;
  color: var(--text-2);
}

.ai-item-bio {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 6px;
  max-height: 38px;
  overflow: hidden;
}

.ai-item-tags {
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 10px;
}

/* 卡片右侧操作图标（编辑/删除） */
.ai-item-icons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ai-item-ico {
  border: none;
  background: transparent;
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
  filter: grayscale(0.2);
}

.ai-item-ico:active {
  transform: scale(0.88);
}

.ai-item-ico--del {
  opacity: 0.75;
}

/* 创建新 AI 占位卡片 */
.ai-item-create {
  border: 1px dashed var(--accent);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.06), rgba(255, 146, 200, 0.06));
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

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

.ai-item-avatar-create {
  background: transparent;
  border: 2px dashed var(--accent);
  color: var(--accent);
  font-size: 22px;
  font-weight: 300;
}

/* AI 表单内的标签 chips */
.ai-tags-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-tag-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  background: transparent;
  transition: all .12s;
  user-select: none;
}

.ai-tag-chip.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.15);
  color: var(--accent);
}

/* 视频风格类型 chip 容器（创建视频表单第一项） */
.podcast-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.podcast-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  background: transparent;
  transition: all .12s;
  user-select: none;
}

.podcast-type-chip:active {
  transform: scale(0.96);
}

.podcast-type-chip.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.15);
  color: var(--accent);
}

.podcast-type-chip .pt-icon {
  font-size: 15px;
}

/* AI 音色抽屉（我的音色/系统音色 双tab 卡片列表） */
.ai-voice-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  height: 46vh;
  min-height: 260px;
  max-height: 46vh;
}

.ai-voice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: all .15s;
}

.ai-voice-card.selected {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.08);
}

.ai-voice-card-emoji {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.ai-voice-card-info {
  flex: 1;
  min-width: 0;
}

.ai-voice-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-voice-card-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0 0 0 2px;
}

.ai-voice-card--playing {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.15);
}

.ai-voice-card--playing .ai-voice-card-play {
  background: var(--accent);
  color: #fff;
}

.ai-voice-card-use {
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.ai-voice-card-use:active {
  transform: scale(0.94);
}

/* 视频用途选择 */
.purpose-row {
  display: flex;
  gap: 8px;
}

.purpose-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
  background: var(--card);
}

.purpose-option.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.10);
  box-shadow: 0 0 0 1px var(--accent);
}

.purpose-icon {
  font-size: 20px;
  flex-shrink: 0;
}

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

.purpose-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.purpose-desc {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.3;
}

@media (max-width: 360px) {
  .purpose-row {
    flex-direction: column;
  }

  .ai-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── 转发弹窗 ─── */
.share-sheet {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  transition: background .15s;
}

.share-option:active {
  background: var(--bg-1);
}

.share-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.share-label {
  font-weight: 500;
}

/* ─── 微信内浏览器分享引导弹窗 ─── */
.wx-share-guide {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 62;
  width: 86%;
  max-width: 360px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 22px 22px;
  text-align: center;
  animation: fade .2s ease;
}

.wx-guide-arrow {
  font-size: 38px;
  color: var(--accent);
  position: absolute;
  top: 14px;
  right: 22px;
  line-height: 1;
}

.wx-guide-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  padding-right: 40px;
}

.wx-guide-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 18px;
}

.wx-guide-desc b {
  color: var(--accent);
  font-weight: 600;
}

.wx-guide-copy-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 8px;
}

.wx-guide-copy-btn:active {
  background: var(--bg-1);
}

.wx-guide-close-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.wx-guide-close-btn:active {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   底部 Tab 栏
   ═══════════════════════════════════════════════════════════ */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  transition: color .15s;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

.tab-item.active {
  color: var(--accent);
}

.tab-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.tab-label {
  font-size: 11px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   创作 Tab（内嵌全页面）
   ═══════════════════════════════════════════════════════════ */
.create-view {
  padding: 16px;
  margin-bottom: 80px;
}

.create-scroll {
  max-width: 600px;
}

/* ═══════════════════════════════════════════════════════════
   图片创作 Tab（内嵌 AI 图片工坊 /pic/，底部给 tab 栏留位）
   ═══════════════════════════════════════════════════════════ */
.pic-view {
  padding: 0;
  padding-bottom: calc(50px + max(0px, env(safe-area-inset-bottom)));
  overflow: hidden;
  min-height: 0;
}

.pic-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: #0b1120;
}

/* ═══════════════════════════════════════════════════════════
   声音克隆 / 个人资料编辑 共用片段（createAnchorView 已改为底部弹窗）
   ═══════════════════════════════════════════════════════════ */
.clone-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

/* 个人资料编辑底部弹窗 */
.profile-edit-sheet {
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.profile-edit-sheet .sheet-handle {
  flex-shrink: 0;
}

.profile-edit-sheet .sheet-title {
  flex-shrink: 0;
}

.profile-edit-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-edit-body .clone-section {
  border-bottom: none;
  padding: 0;
}

.clone-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* 头像行 */
.clone-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.clone-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.clone-avatar-change {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  position: absolute;
  right: 14px;
}

.clone-avatar-change:active {
  border-color: var(--accent);
  color: var(--accent);
}

/* 我的声音列表 */
.clone-voice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clone-voice-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clone-voice-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clone-voice-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.clone-voice-card-time {
  font-size: 12px;
  color: var(--text-3);
}

.clone-voice-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-2);
}

.clone-voice-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.clone-voice-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}

.clone-voice-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

.clone-voice-btn-del {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.3);
}

.clone-voice-btn-del:active {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* ═══════════════════════════════════════════════════════════
   录音区域
   ═══════════════════════════════════════════════════════════ */
.clone-record-area {
  text-align: center;
  padding: 10px 0;
}

.record-instruction {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 10px;
  padding: 0 4px;
}

.record-prompt {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  text-align: left;
}

.record-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
  cursor: pointer;
  transition: transform .15s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.record-btn:active {
  transform: scale(0.93);
}

.record-btn-icon {
  font-size: 28px;
}

.record-btn-label {
  font-size: 11px;
  font-weight: 500;
}

.record-btn-ready {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 18px var(--gen-glow);
}

.record-btn-recording {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 92, 124, 0.45);
  animation: record-pulse 1.2s ease-in-out infinite;
}

@keyframes record-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 92, 124, 0.4), 0 4px 18px rgba(255, 92, 124, 0.3);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(255, 92, 124, 0), 0 4px 24px rgba(255, 92, 124, 0.5);
    transform: scale(1.04);
  }
}

.record-hint {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 14px;
}

.record-timer {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.record-active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 录音完成 */
.record-done {
  text-align: center;
}

.record-done-info {
  margin-bottom: 20px;
}

.record-done-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.record-duration {
  font-size: 13px;
  color: var(--text-2);
}

.record-done-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.record-done-btn {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  flex: 1;
  max-width: 120px;
}

.record-done-btn:active {
  border-color: var(--accent);
  color: var(--accent);
}

/* 处理中按钮（如降噪进行中）：半透明+灰显+菊花指针 */
.record-done-btn.btn-busy,
.record-done-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.record-done-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.record-done-btn-primary:active {
  background: #5a3fff;
  color: #fff;
}

/* 上传进度 */
.record-upload-status {
  text-align: center;
  padding: 16px;
  color: var(--text-2);
  font-size: 14px;
}

.record-upload-status .gen-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* ═══ 桌面适配（Tab 相关） ═══ */
@media (min-width: 768px) {
  .tab-bar {
    left: auto;
    right: auto;
    width: 900px;
    margin: 0 auto;
  }

  .create-scroll {
    max-width: 600px;
    margin: 0 auto;
  }
}


/* ═══ AI 角色卡片横向滚动 ═══ */
.ai-character-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 16px 12px;
  margin: 0 -16px;
}

.ai-character-scroll::-webkit-scrollbar {
  display: none;
}

.ai-character-scroll-inner {
  display: flex;
  gap: 10px;
  padding: 4px 4px 8px;
  min-width: max-content;
}

.ai-character-card {
  flex: 0 0 calc(33.333vw - 20px);
  max-width: 140px;
  min-width: 110px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}

.ai-character-card:active {
  transform: scale(0.97);
}

.ai-character-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.25);
}

.ai-character-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

.ai-character-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-character-card-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-character-card-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  background: rgba(167, 139, 250, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
}

/* 创建新 AI 的加号卡片 */
.ai-character-card-add {
  flex: 0 0 calc(33.333vw - 20px);
  max-width: 140px;
  min-width: 110px;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  transition: border-color 0.15s;
}

.ai-character-card-add:active {
  transform: scale(0.97);
}

.ai-character-card-add:hover {
  border-color: var(--accent);
}

.ai-character-card-add-icon {
  font-size: 32px;
  color: var(--text-3);
  line-height: 1;
  margin-bottom: 6px;
}

.ai-character-card-add-text {
  font-size: 12px;
  color: var(--text-3);
}

/* 空状态 */
.ai-character-empty {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-3);
  font-size: 13px;
  width: 100%;
}

/* 占位符卡片（空列表时显示） */
.ai-character-card-add--placeholder {
  width: 100%;
  min-height: 120px;
  border: 2px dashed var(--accent);
  background: rgba(139, 92, 246, 0.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-character-card-add--placeholder:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: var(--accent);
}

.ai-character-card-add--placeholder .ai-character-card-add-icon {
  font-size: 32px;
  color: var(--accent);
  font-weight: 300;
}

.ai-character-card-add--placeholder .ai-character-card-add-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

/* ═══ 创建新主播页样式 ═══ */
.anchor-step {
  padding: 0 16px 24px;
}

.anchor-step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.anchor-step-desc {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 20px;
}

/* 声音来源三个入口卡片 */
.voice-source-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.voice-source-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.voice-source-card:active {
  transform: scale(0.98);
  border-color: var(--accent);
}

.voice-source-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(74, 214, 255, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.voice-source-info {
  flex: 1;
}

.voice-source-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.voice-source-desc {
  font-size: 12px;
  color: var(--text-3);
}

/* 声音详情列表 */
.voice-detail-list {
  margin-top: 8px;
}

.voice-detail-back {
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 12px;
}

.voice-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

.voice-grid-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 预置音色卡片 */
.voice-item-card {
  background: var(--card-hi);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}

.voice-item-card:active {
  transform: scale(0.97);
}

.voice-item-card.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.08);
}

.voice-item-emoji {
  font-size: 28px;
  margin-bottom: 6px;
}

.voice-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.voice-item-sub {
  font-size: 11px;
  color: var(--text-3);
}

/* 已选声音条 */
.selected-voice-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 20px;
}

.selected-voice-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(74, 214, 255, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.selected-voice-info {
  flex: 1;
}

.selected-voice-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.selected-voice-desc {
  font-size: 12px;
  color: var(--text-3);
}

.selected-voice-change {
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}

.selected-voice-change:active {
  background: rgba(124, 92, 255, 0.15);
}

@media (min-width: 768px) {
  .voice-source-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .voice-grid-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ═══ 创建主播表单页（重构） ═══ */
.anchor-form {
  padding: 20px 16px 24px;
  max-width: 640px;
  margin: 0 auto;
}

.anchor-form-title {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 18px;
  text-align: center;
}

/* 音色选择底部弹窗 - 顶部两个占位卡片 */
.anchor-voice-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.anchor-voice-source-card {
  background: var(--card);
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}

.anchor-voice-source-card:active {
  transform: scale(0.97);
  border-color: var(--accent);
  background: var(--card-hi);
}

.anchor-voice-source-icon {
  font-size: 26px;
  margin-bottom: 6px;
}

.anchor-voice-source-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.anchor-voice-source-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

.anchor-voice-list-title {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.anchor-voice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.anchor-voice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

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

.anchor-voice-item.selected {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.08);
}

.anchor-voice-item-emoji {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(74, 214, 255, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.anchor-voice-item-info {
  flex: 1;
  min-width: 0;
}

.anchor-voice-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anchor-voice-item-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anchor-voice-item-play {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-hi);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
}

.anchor-voice-item-edit {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--card-hi);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--accent-2);
  cursor: pointer;
}

.anchor-voice-item-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--card-hi);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--danger);
  cursor: pointer;
}

/* 音频编辑器 */
.anchor-editor-tips {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.anchor-editor-tip-row {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}

.anchor-editor-player {
  margin-bottom: 14px;
}

/* 音频编辑器弹窗：80%屏高 */
.editor-sheet {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.editor-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px;
}

/* 波形编辑画布 */
.waveform-canvas-wrap {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.waveform-canvas {
  display: block;
  width: 100%;
  height: 100px;
  cursor: pointer;
}

.waveform-time {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 4px 0;
  background: var(--card-hi);
}

.waveform-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.anchor-editor-counter {
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
  margin-top: 4px;
}

.anchor-editor-counter.over {
  color: #e54848;
  font-weight: 500;
}

.anchor-editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.anchor-editor-actions .record-done-btn {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   首页 Banner
   ═══════════════════════════════════════════════════════════ */
.home-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  padding-left: 10px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--bg-2), var(--card));
  border-bottom: 1px solid var(--border);
}

.banner-logo {
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

.banner-slogan {
  flex: 1;
}

.banner-slogan-main {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.banner-slogan-sub {
  font-size: 13px;
  color: var(--accent);
  margin-top: 2px;
}

/* 手机端：LOGO与slogan垂直排列 */
@media (max-width: 480px) {
  .home-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-left: 16px;
  }

  .banner-logo {
    height: 28px;
  }

  .banner-slogan-main {
    font-size: 14px;
  }

  .banner-slogan-sub {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   访谈 Tab
   ═══════════════════════════════════════════════════════════ */

/* 访谈标签栏 */




/* 历史记录按钮 */

/* 对话区域 */











/* 对话气泡内图片缩略图 */

/* AI问候消息内的话题标签 */




/* 摄像头开启时：内容浮动在视频之上，对话气泡半透明 */






/* 录音按钮区 */
















/* Toast 容器 */

.toast-item {
  background: rgba(20, 20, 30, 0.92);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: opacity .3s;
  max-width: 80vw;
}

.toast-item.hide {
  opacity: 0;
}

.toast-loading {
  pointer-events: auto;
}

.toast-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: toastSpin 0.8s linear infinite;
  flex-shrink: 0;
}

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

/* ─── 右上角主题切换按钮 ─── */
.theme-toggle-btn {
  position: absolute;
  right: 16px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, border-color .15s;
}

.theme-toggle-btn:active {
  transform: scale(0.9);
  border-color: var(--accent);
}

/* ─── 主题选择器 ─── */
.theme-options {
  display: flex;
  justify-content: space-around;
  padding: 20px 16px 24px;
  gap: 12px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
}

.theme-preview {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 2px solid var(--border);
  transition: border-color .2s, transform .15s;
}

.theme-option:active .theme-preview {
  transform: scale(.92);
}

.theme-option.selected .theme-preview {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--gen-glow);
}

.theme-preview-dark {
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a24 50%, #7c5cff 100%);
}

.theme-preview-light {
  background: linear-gradient(135deg, #f5f5f8 0%, #ffffff 50%, #6c4eff 100%);
}

.theme-preview-color {
  background: linear-gradient(135deg, #ff6b9d 0%, #8b5cf6 40%, #00c9db 100%);
}

.theme-option-name {
  font-size: 13px;
  color: var(--text-2);
}

.theme-option.selected .theme-option-name {
  color: var(--accent);
  font-weight: 600;
}

/* 摄像头全页背景 */




/* 历史记录弹窗固定70%屏高 */



/* 历史记录列表 */





/* 确认弹窗摘要预览 */

/* ─── 登录底部弹窗（改造自全屏遮罩） ─── */
.login-sheet .login-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  padding: 4px 0 8px;
}

.login-sheet .login-logo {
  height: 36px;
  width: auto;
  margin: 0 auto 8px;
  display: block;
}

.login-sheet .login-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.login-sheet .login-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 18px;
}

/* ─── 我的订阅入口卡片 ─── */
.profile-sub-card {
  margin: 12px 14px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(124, 92, 255, 0.04));
  border: 1px solid rgba(139, 92, 246, 0.18);
}

.profile-sub-card .field-card-label {
  font-size: 15px;
}

.profile-sub-card .field-card-value {
  color: var(--accent);
  font-weight: 600;
}

/* ─── 订阅底窗 ─── */
.subscribe-sheet {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.subscribe-current {
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  margin: -4px 0 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}

.subscribe-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
}

.sub-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 14px 16px;
  transition: border-color .15s, transform .1s;
}

.sub-card-current {
  border-color: var(--accent);
  background: rgb(255 74 74 / 20%);
  border-width: 2px;
}

.sub-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.sub-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.sub-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sub-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.sub-price-free {
  font-size: 16px;
  color: var(--ok, #34c759);
}

.sub-price-orig {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: line-through;
}

.sub-quota {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}

.sub-features {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.7;
}

.sub-features li::before {
  content: '';
}

.sub-btn {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.sub-btn:active {
  background: var(--accent);
  color: #fff;
}

.sub-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sub-btn-pay {
  background: linear-gradient(135deg, var(--accent), #5a3fff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px var(--gen-glow, rgba(139, 92, 246, 0.3));
}

.sub-btn-pay:active {
  transform: scale(0.98);
}

.sub-btn-current {
  border-color: var(--border);
  color: var(--text-3);
  background: var(--card);
}

.subscribe-tip {
  text-align: center;
  font-size: 12px;
  color: var(--danger);
  margin-top: 10px;
  min-height: 16px;
}

/* ─── 我的订阅：独立整页（订阅套餐 / 消费记录 / 生成记录）─── */
.sub-page {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.sub-page-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom: 1px solid var(--border);
}

.sub-page-back {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sub-page-back:active { opacity: .7; }

.sub-page-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.sub-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--border);
}

.sub-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 14px;
  color: var(--text-3);
  cursor: pointer;
}

.sub-tab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.sub-page-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}

.sub-record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-record {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.sub-record-main { flex: 1; min-width: 0; }

.sub-record-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-record-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
}

.sub-record-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   AI 对话窗口（全屏；点「我的 AI」卡片上的 💬 打开）
   与控制台 ai-chat.js 同一套 S2S 会话，仅承载形态改为移动端全屏
   ══════════════════════════════════════════════════════════ */
.ai-chat-view {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
}

.ai-chat-view.hidden { display: none; }

.ai-chat-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.ai-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--card);
  border: 1px solid var(--border);
}

.ai-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ai-chat-title-wrap { flex: 1; min-width: 0; }

.ai-chat-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-status { font-size: 12px; color: var(--text-3); }
.ai-chat-status.online { color: #22c55e; }
.ai-chat-status.listening { color: var(--accent); }
.ai-chat-status.speaking { color: #f59e0b; }

.ai-chat-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
}

.ai-chat-window {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 8px;
}

.ai-chat-load-more {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0 10px;
}

.ai-chat-placeholder {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  padding: 30px 12px;
}

.ai-chat-messages { display: flex; flex-direction: column; gap: 10px; }

.ai-chat-msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.ai-chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-chat-msg.ai {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.ai-chat-msg.system {
  align-self: center;
  max-width: 90%;
  padding: 2px 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.ai-chat-msg.partial {
  align-self: flex-start;
  background: var(--card);
  border: 1px dashed var(--border);
  color: var(--text-2);
  border-bottom-left-radius: 4px;
}

.ai-chat-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

.ai-chat-mic {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35);
}

.ai-chat-mic.listening { background: #ef4444; animation: aiChatPulse 1.4s infinite; }
.ai-chat-mic:disabled { opacity: .5; }

@keyframes aiChatPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
  70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.ai-chat-hint { font-size: 12px; color: var(--text-3); }

/* 「我的AI主播」卡片里的「对话」图标 */
.ai-item-ico--chat { color: var(--accent); }


.sub-record-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  padding: 48px 0;
}
/* ── AI 编辑表单「发布所有人可用」开关 ── */
#aiPublishAllSlider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border, #ddd);
  border-radius: 24px;
  transition: .3s;
}
#aiPublishAllToggle:checked + #aiPublishAllSlider {
  background: var(--accent, #8b5cf6);
}
#aiPublishAllSlider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
}
#aiPublishAllToggle:checked + #aiPublishAllSlider::before {
  transform: translateX(20px);
}

/* ── AI 主播资料底部弹窗 ── */
.ai-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ai-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-2, #1a1a22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
.ai-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ai-profile-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #fff);
}
.ai-profile-owner {
  font-size: 12px;
  color: var(--text-3, #888);
  margin-top: 3px;
}
.ai-profile-bio {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2, #bbb);
  background: var(--bg-2, #1a1a22);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  word-break: break-word;
}
.ai-profile-actions {
  display: flex;
  gap: 10px;
}
.ai-profile-actions button {
  flex: 1;
  padding: 11px 0;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ai-profile-btn-play {
  background: var(--bg-2, #1a1a22);
  color: var(--text, #fff);
}
.ai-profile-btn-fav {
  background: var(--accent, #8b5cf6);
  color: #fff;
}
.ai-profile-btn-fav--on {
  background: var(--bg-2, #1a1a22);
  color: var(--text-3, #888);
}

/* ── 首页 Feed 卡片可点击的主播标签 ── */
.feed-host--link {
  cursor: pointer;
}