/* ============================================
   云念AI - H5 应用样式
   真实配色：深蓝黑(#050913) + 青绿色(#35e6d0)
   字体：PingFang SC + Songti SC
   ============================================ */

/* ===== 设计变量 ===== */
:root {
  /* 背景色系 */
  --bg-darkest: #050913;
  --bg-dark: #08111e;
  --bg-card: #0d1928;
  --bg-card-hover: #13253a;
  --bg-elevated: #162c3c;
  --bg-border: #1b394a;
  --bg-accent: #24465b;

  /* 品牌色 */
  --brand: #35e6d0;
  --brand-dim: #2bc4b2;
  --brand-glow: rgba(53, 230, 208, 0.15);
  --brand-glow-strong: rgba(53, 230, 208, 0.3);

  /* 文字色 */
  --text-primary: #ffffff;
  --text-secondary: #f4f8ff;
  --text-tertiary: #9cb1c8;
  --text-muted: #6f879f;
  --text-warm: #fffaf4;

  /* 功能色 */
  --color-danger: #ff3946;
  --color-danger-dim: #fa5151;
  --color-pink: #ff8791;
  --color-skin: #e5d1c0;

  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 阴影 */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-brand: 0 0 24px var(--brand-glow);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-darkest);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ===== 桌面端手机框架 ===== */
.phone-shell {
  max-width: 430px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--bg-darkest);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}

@media (min-width: 768px) {
  body {
    background: #02050a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .phone-shell {
    min-height: 90dvh;
    max-height: 932px;
    height: 90dvh;
    border-radius: 40px;
    border: 8px solid #1a1a2e;
    overflow: hidden;
  }
}

/* ===== 页面系统 ===== */
.page {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}
.page.active { display: flex; }

@keyframes fadeIn {
  /* ★ 20260927aaa：去掉 transform —— iOS 上带 transform 的祖先动画会让 position:fixed
     后代（确认弹窗等）containing block 异常 → 弹窗画出屏外 = 白屏投诉根因 */
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

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

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ===== 顶部导航栏 ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--bg-darkest);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(53, 230, 208, 0.06);
}
.topbar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.topbar-back {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: var(--text-tertiary);
}
.topbar-back svg { width: 20px; height: 20px; }
.topbar-action {
  font-size: 15px;
  color: var(--brand);
}

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s;
  width: 100%;
}
.btn-primary {
  background: var(--brand);
  color: var(--bg-darkest);
  font-weight: 600;
}
.btn-primary:active { transform: scale(0.98); background: var(--brand-dim); }
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--bg-border);
}
.btn-ghost {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--bg-border);
}
.btn-danger {
  background: rgba(255, 57, 70, 0.12);
  color: var(--color-danger);
  border: 1px solid rgba(255, 57, 70, 0.3);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 底部 Tab 导航 ===== */
.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  background: rgba(8, 17, 30, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(53, 230, 208, 0.08);
  position: sticky;
  bottom: 0;
  z-index: 90;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  color: var(--text-muted);
  font-size: 11px;
  transition: color 0.2s;
}
.tab-item svg { width: 24px; height: 24px; }
.tab-item.active { color: var(--brand); }

/* ===== 内容容器 ===== */
.page-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page-content::-webkit-scrollbar { width: 0; }

.section { padding: 20px; }

/* ===== 首页（未登录）===== */
.landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  position: relative;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(53, 230, 208, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 80%, rgba(53, 230, 208, 0.04) 0%, transparent 50%),
              var(--bg-darkest);
}

.landing-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.landing-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0.4;
  animation: pulse 3s infinite;
}

.landing-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  position: relative;
}
.landing-logo svg { width: 100%; height: 100%; }

.landing-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 48px;
}

.landing-main {
  max-width: 300px;
  width: 100%;
}
.landing-heading {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.landing-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.7;
  margin-bottom: 36px;
}

.landing-cta { margin-bottom: 16px; }

.landing-footer {
  margin-top: auto;
  padding-top: 40px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
}
.landing-footer a { color: var(--text-muted); }

/* ===== 登录/注册页 ===== */
.auth-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 28px;
  overflow-y: auto;
}
.auth-logo {
  text-align: center;
  margin-bottom: 40px;
}
.auth-logo-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
}
.auth-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-size: 13px;
  color: var(--text-tertiary);
  padding-left: 4px;
}
.auth-input {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color 0.2s;
}
.auth-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.auth-input::placeholder { color: var(--text-muted); }

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: 20px;
}
.auth-consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--brand);
}
.auth-consent a { color: var(--brand); }

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}
.auth-switch a { color: var(--brand); font-weight: 500; }

.auth-error {
  background: rgba(255, 57, 70, 0.1);
  border: 1px solid rgba(255, 57, 70, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-danger);
}

/* ===== 创作库 ===== */
.library-header {
  padding: 20px 20px 12px;
}
.library-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}
.library-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.digital-humans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px 20px;
}
.dh-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--bg-border);
  transition: transform 0.2s;
  position: relative;
}
.dh-card:active { transform: scale(0.97); }
.dh-card-photo {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.dh-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 25, 40, 0.9) 0%, transparent 50%);
}
.dh-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dim), var(--bg-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  z-index: 1;
}
.dh-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(53, 230, 208, 0.2);
  color: var(--brand);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  z-index: 2;
}
.dh-card-info {
  padding: 12px;
}
.dh-card-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.dh-card-relation {
  font-size: 12px;
  color: var(--text-muted);
}
.dh-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}
.dh-card-actions button {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-elevated);
}

.create-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px dashed var(--bg-border);
  border-radius: var(--radius-lg);
  aspect-ratio: 3/4;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  transition: all 0.2s;
}
.create-card:active { border-color: var(--brand); color: var(--brand); }
.create-card svg { width: 32px; height: 32px; }

.section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 16px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-label .label-action {
  font-size: 13px;
  font-weight: 400;
  color: var(--brand);
}

/* ===== 创建角色页 ===== */
.create-page { padding-bottom: 100px; }
.create-section {
  padding: 20px;
  border-bottom: 1px solid rgba(53, 230, 208, 0.05);
}
.create-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.create-section-title .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg-darkest);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-left: 30px;
}

.upload-area {
  width: 100%;
  aspect-ratio: 3/4;
  max-width: 200px;
  margin: 0 auto;
  border: 2px dashed var(--bg-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  background: var(--bg-card);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.upload-area.has-photo { border-style: solid; border-color: var(--brand); }
.upload-area svg { width: 36px; height: 36px; }
.upload-area .upload-hint { font-size: 12px; text-align: center; }
.upload-preview {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.form-field { margin-bottom: 16px; }
.form-label {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: block;
}
.form-input, .form-textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 15px;
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-textarea { resize: none; min-height: 70px; }
.form-example {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 4px;
}

/* 音色选择 */
.voice-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 4px;
}
.voice-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-tertiary);
  transition: all 0.2s;
}
.voice-tab.active {
  background: var(--brand);
  color: var(--bg-darkest);
  font-weight: 600;
}

.voice-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: all 0.2s;
}
.voice-option.selected { border-color: var(--brand); background: rgba(53, 230, 208, 0.05); }
.voice-option-info { flex: 1; }
.voice-option-name { font-size: 15px; font-weight: 500; }
.voice-option-desc { font-size: 12px; color: var(--text-muted); }
.voice-option-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.voice-option-play svg { width: 18px; height: 18px; }

/* 音色角色分类筛选 */
.voice-category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.voice-category-tabs::-webkit-scrollbar { display: none; }
.voice-cat-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  transition: all 0.2s;
  white-space: nowrap;
}
.voice-cat-tab.active {
  background: var(--brand);
  color: var(--bg-darkest);
  border-color: var(--brand);
  font-weight: 600;
}

/* 音色分组小标题 */
.voice-group-label {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 4px 8px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.voice-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg-border);
}
.voice-group-label.hidden { display: none; }

/* 试听播放中状态 */
.voice-option-play.playing {
  background: var(--brand);
  color: var(--bg-darkest);
}
.voice-option-play.playing svg { animation: spin 1s linear infinite; }

.voice-empty-hint {
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--text-muted);
}

/* 授权同意 */
.consent-box {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
}
.consent-box-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.consent-box-text {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: 12px;
}
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.consent-check input { margin-top: 3px; accent-color: var(--brand); }

/* 底部提交栏（20260925gg：黑改白） */
.submit-bar {
  position: sticky;
  bottom: 0;
  padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid #ECE8F4;
}

/* ===== 通话页面 ===== */
.call-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  position: relative;
  overflow: hidden;
}

.call-video-area {
  flex: 1;
  position: relative;
  background: linear-gradient(180deg, #0a1a2e 0%, #050913 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.call-remote-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.call-avatar-large {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dim), var(--bg-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  position: relative;
  z-index: 2;
}
.call-avatar-large::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0.3;
  animation: breathe 3s infinite;
}
.call-avatar-large::after {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  opacity: 0.15;
  animation: breathe 3s 0.5s infinite;
}

.call-status-text {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  white-space: nowrap;
}
.call-status-text .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--brand);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 1.5s infinite;
}

.call-info-top {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
}
.call-name {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.call-ai-badge {
  font-size: 10px;
  background: rgba(53, 230, 208, 0.2);
  color: var(--brand);
  padding: 2px 8px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}
.call-duration {
  font-size: 14px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.call-local-preview {
  position: absolute;
  top: 70px;
  right: 16px;
  width: 90px;
  height: 120px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  overflow: hidden;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-local-preview .local-placeholder {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.call-controls {
  padding: 30px 20px max(30px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: rgba(5, 9, 19, 0.8);
  backdrop-filter: blur(20px);
}
.call-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  transition: all 0.2s;
  position: relative;
}
.call-btn svg { width: 24px; height: 24px; }
.call-btn.active { background: var(--brand); color: var(--bg-darkest); }
.call-btn:active { transform: scale(0.92); }
.call-btn-label {
  position: absolute;
  bottom: -20px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.call-btn-hangup {
  width: 64px;
  height: 64px;
  background: var(--color-danger);
  color: white;
}
.call-btn-hangup svg { width: 28px; height: 28px; }

/* 通话连接中 */
.call-connecting-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 9, 19, 0.9);
  z-index: 20;
  gap: 16px;
}
.connecting-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--bg-border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.connecting-text {
  font-size: 15px;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 280px;
}

/* ===== 消息页 ===== */
.message-list { padding: 8px 0; }
.message-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  transition: background 0.2s;
}
.message-item:active { background: var(--bg-card); }
.message-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.message-icon svg { width: 22px; height: 22px; }
.message-icon.system { background: rgba(53, 230, 208, 0.12); color: var(--brand); }
.message-icon.notice { background: rgba(244, 185, 66, 0.12); color: #f4b942; }
.message-icon.business { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.message-content { flex: 1; min-width: 0; }
.message-title {
  font-size: 15px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.message-time { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.message-preview {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.message-badge {
  width: 8px;
  height: 8px;
  background: var(--color-danger);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== 我的页 ===== */
.profile-header {
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(53, 230, 208, 0.08), transparent);
}
.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dim), var(--bg-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.profile-info { flex: 1; }
.profile-name { font-size: 18px; font-weight: 600; }
.profile-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.profile-balance {
  margin: 0 16px 16px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.balance-info .balance-label { font-size: 12px; color: var(--text-muted); }
.balance-info .balance-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  font-family: var(--font-serif);
}
.balance-info .balance-amount::after {
  content: ' 点';
  font-size: 13px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.menu-list { padding: 0 16px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  transition: background 0.2s;
}
.menu-item:active { background: var(--bg-card); }
.menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-icon svg { width: 20px; height: 20px; color: var(--brand); }
.menu-text { flex: 1; font-size: 15px; }
.menu-arrow { color: var(--text-muted); }
.menu-arrow svg { width: 18px; height: 18px; }

/* ===== 充值页 ===== */
.balance-card {
  margin: 20px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
}
.balance-card-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.balance-card-amount {
  font-size: 42px;
  font-weight: 700;
  color: var(--brand);
  font-family: var(--font-serif);
}
.balance-card-unit { font-size: 14px; color: var(--text-tertiary); }

.package-list { padding: 0 20px; }
.package-card {
  background: var(--bg-card);
  border: 2px solid var(--bg-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
  position: relative;
}
.package-card.selected { border-color: var(--brand); background: rgba(53, 230, 208, 0.05); }
.package-card-tag {
  position: absolute;
  top: -8px;
  right: 16px;
  background: var(--brand);
  color: var(--bg-darkest);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
}
.package-info { flex: 1; }
.package-name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.package-desc { font-size: 13px; color: var(--text-muted); }
.package-price {
  text-align: right;
}
.package-price .price {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
}
.package-price .price::before { content: '¥'; font-size: 14px; }
.package-price .period { font-size: 12px; color: var(--text-muted); }

/* ===== 设置与隐私 ===== */
.privacy-section { padding: 20px; }
.privacy-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.privacy-card-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.privacy-card-desc { font-size: 13px; color: var(--text-tertiary); line-height: 1.6; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--bg-border);
}
.toggle-row:first-of-type { border-top: none; }
.toggle-label { flex: 1; }
.toggle-label .title { font-size: 15px; }
.toggle-label .desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.switch {
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--bg-elevated);
  border-radius: 13px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch.on { background: var(--brand); }
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.switch.on::after { transform: translateX(18px); }

/* ===== 弹窗/模态框 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.active { display: flex; }
.modal-sheet {
  background: var(--bg-dark);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 430px;
  padding: 24px 20px max(24px, env(safe-area-inset-bottom));
  animation: slideUp 0.3s ease;
}
.modal-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
}
.modal-body { margin-bottom: 24px; }
.modal-actions { display: flex; gap: 12px; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(13, 25, 40, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-size: 14px;
  z-index: 2000;
  display: none;
  max-width: 80%;
  text-align: center;
}
.toast.active { display: block; animation: fadeIn 0.2s; }

/* ===== 工具类 ===== */
.text-brand { color: var(--brand); }
.text-muted { color: var(--text-muted); }
.text-tertiary { color: var(--text-tertiary); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }

/* 滚动加载动画 */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state .empty-title { font-size: 15px; margin-bottom: 6px; }
.empty-state .empty-desc { font-size: 13px; }

/* ============================================
   TRTC 通话大厅 / 邀请面板 / 视频容器
   ============================================ */
.call-lobby {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}
.lobby-icon {
  width: 72px; height: 72px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(53, 230, 208, 0.12);
  color: var(--brand, #35e6d0);
  margin-bottom: 20px;
}
.lobby-icon svg { width: 34px; height: 34px; }
.lobby-title { font-size: 22px; font-weight: 700; color: var(--text-primary, #fff); margin-bottom: 10px; }
.lobby-desc { font-size: 13px; color: var(--text-muted, #8a93a6); line-height: 1.7; margin-bottom: 28px; }
.lobby-form, .join-room-box, .invite-panel {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 12px;
}
.lobby-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary, #fff);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.lobby-input:focus { border-color: rgba(53, 230, 208, 0.6); }
.lobby-input::placeholder { color: var(--text-muted, #8a93a6); }
.lobby-btn { width: 100%; padding: 13px 16px; border-radius: 12px; font-size: 15px; }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(53, 230, 208, 0.45);
  color: var(--brand, #35e6d0);
  cursor: pointer;
}
.invite-panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(53,230,208,0.25); border-radius: 16px; padding: 20px 16px; }
.invite-room-no { font-size: 14px; color: var(--text-muted, #8a93a6); }
.invite-room-no span { color: var(--brand, #35e6d0); font-size: 22px; font-weight: 700; letter-spacing: 2px; margin-left: 6px; }
.invite-tip { font-size: 12px; color: var(--text-muted, #8a93a6); text-align: left; }
.invite-link {
  font-size: 12px; color: var(--brand, #35e6d0);
  background: rgba(53,230,208,0.08);
  border-radius: 8px; padding: 10px 12px;
  word-break: break-all; text-align: left;
  user-select: all;
}

/* 视频容器 */
.remote-video-box { position: absolute; inset: 0; width: 100%; height: 100%; }
.remote-video-box video, .call-local-preview video {
  width: 100%; height: 100%; object-fit: cover; background: transparent;
}
.call-local-preview { overflow: hidden; }

/* ============================================
   照片 / 音频上传预览
   ============================================ */
.upload-area { cursor: pointer; position: relative; overflow: hidden; }
.upload-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 1;
}
.upload-area.has-photo { border-style: solid; border-color: rgba(53,230,208,0.5); }
.upload-area.has-photo .upload-hint {
  position: relative; z-index: 2;
  background: rgba(5,9,19,0.65);
  border-radius: 8px; padding: 4px 10px;
  backdrop-filter: blur(4px);
}
.audio-preview-box {
  width: 100%; display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
.audio-file-name {
  font-size: 13px; color: var(--brand, #35e6d0);
  word-break: break-all; text-align: left;
}
.audio-rechoose { font-size: 11px; color: var(--text-muted, #8a93a6); text-align: center; }
.audio-preview-box audio { height: 36px; }

/* 通话诊断日志面板 */
.call-debug-log {
  position: absolute;
  left: 12px; bottom: 130px;
  max-width: 70%;
  max-height: 110px;
  overflow-y: auto;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  font-family: monospace;
  pointer-events: auto;
  z-index: 5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ============================================
   AI 角色通话（微信视频风格，对齐真实云念AI）
   ============================================ */

/* 确认弹窗 */
.aic-modal-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;   /* ★ 显式四边（inset 旧 iOS 不支持） */
  z-index: 300;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 0 32px;
}
.aic-confirm-card {
  width: 100%; max-width: 320px;
  background: #fff; border-radius: 20px;
  padding: 24px 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.aic-confirm-title { font-size: 18px; font-weight: 700; color: #1a1a1a; text-align: left; }
.aic-confirm-body { font-size: 14px; color: #444; line-height: 1.75; text-align: left; }
.aic-btn-red {
  width: 100%; padding: 13px 0; border: none; border-radius: 12px;
  background: #c53d3d; color: #fff; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.aic-btn-red:active { opacity: 0.85; }
.aic-btn-cancel {
  width: 100%; padding: 13px 0; border-radius: 12px;
  background: #fff; border: 1px solid #ddd; color: #333;
  font-size: 16px; cursor: pointer;
}

/* 全屏通话界面 */
.ai-call-screen {
  position: fixed; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 430px;
  z-index: 250;
  background: radial-gradient(120% 90% at 50% 30%, #2b241f 0%, #17120e 60%, #0b0908 100%);
  overflow: hidden;
  color: #fff;
}
.aic-connected { position: absolute; inset: 0; }
.aic-full-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: aicKenburns 26s ease-in-out infinite alternate;
}
/* 口型生效期间冻结照片的几何推拉：嘴必须与嘴唇保持确定性的位置关系，
   照片一动嘴巴就会滑走（详见 js/ai-call.js 的 aiPhotoSpeaking 注释）。 */
.aic-full-photo.nokb { animation: none; }
/* 说话时只保留亮度呼吸（非几何变换，不会让嘴错位）。注意此规则须在 .nokb 之后。 */
.aic-full-photo.speaking { animation: aicPulse 1.6s ease-in-out infinite; }
@keyframes aicKenburns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.05) translate(1%, -1.5%); }
  100% { transform: scale(1.02) translate(-1%, 1%); }
}
@keyframes aicPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.1); }
}

/* ★ 头部轻微晃动舞台：照片 + 嘴图层装进同一个容器再整体微动（用户要求「像活人」）。
   关键约束：嘴图层 .aic-mouth-layer 是按照片显示矩形绝对定位的，若只给照片加 transform，
   嘴会立刻从嘴唇上滑走 —— 所以 sway 动画只加在舞台 #aicPhotoStage 上，
   照片与嘴层永远同步位移（相对偏移恒为 0）。
   两档强度：idle（未说话，×0.4 幅度）/ speaking（说话，×1，由 JS 切 .speaking 类）。
   注意与 Ken Burns 的关系：KB 是照片自身的动画（口型期间 .nokb 冻结），
   sway 是舞台层动画，两层互不叠加、互不干扰。 */
.aic-photo-stage {
  position: absolute; inset: 0;
  z-index: 0;                 /* 必须低于 .aic-remote-box(z-index:1)：真实数字人出流时整体盖住舞台 */
  overflow: hidden;
  transform-origin: 50% 18%;  /* 头部为轴：照片上部偏中 */
  animation: aicSwayIdle 7.5s ease-in-out infinite alternate;
  will-change: transform;
}
.aic-photo-stage.speaking { animation: aicSwayTalk 5.5s ease-in-out infinite alternate; }
@keyframes aicSwayIdle {
  0%   { transform: translate(0.24%, -0.14%) rotate(-0.10deg); }
  100% { transform: translate(-0.24%, 0.20%) rotate(0.10deg); }
}
@keyframes aicSwayTalk {
  0%   { transform: translate(0.60%, -0.36%) rotate(-0.25deg); }
  100% { transform: translate(-0.60%, 0.52%) rotate(0.25deg); }
}
/* 系统开了「减弱动态」时直接关掉晃动（产品红线：不给任何开关 UI，只尊重系统设置） */
@media (prefers-reduced-motion: reduce) {
  .aic-photo-stage, .aic-photo-stage.speaking { animation: none; }
}

/* ===== 照片口型：声音驱动的嘴部覆盖层 =====
   方案：拉伸照片自身的嘴唇像素（下巴真的往下走）+ 边缘虚化的口腔暗腔
   + 上唇投影 + 下唇高光 —— 而不是在照片上贴一个深色椭圆。
   （照片的 Ken Burns 已由 .nokb 冻结，所以嘴与嘴唇的位置关系是确定性的。） */

.aic-mouth-layer {
  position: absolute; inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms linear, visibility 120ms linear;
}
.aic-mouth-layer.on { opacity: 1; visibility: visible; }

/* 唇像素层：整幅照片做背景（与 .aic-full-photo 的 object-fit:cover 等价），椭圆裁剪后纵向拉伸 */
.aic-lips {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transform: scaleY(1);
  will-change: transform;
  /* clip-path 与 transform-origin 由 JS 写 */
}
/* 下颌下移层：与唇像素层同图同遮罩思路，模式 A 时绕上唇枢轴做 scaleY，
   把「下巴+下唇」往下推。露出的缝隙由照片自己的上齿/口腔内部补上 ——
   嘴真的在张，牙齿始终是照片里的真牙。用连续形变而非 translateY：
   蒙版与内容无相对位移，不会出现「下移的唇 + 透出来的原唇」双唇重影 */
.aic-jaw {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transform: scaleY(1);
  will-change: transform;
  /* mask（软边遮罩）、transform-origin 由 JS 写 */
}
/* 口腔暗缝（只在「照片本身闭嘴」时出现；照片已张嘴时必须整体 display:none）。
   ★ 用户复测「露牙齿很假」根治：不再画任何白色合成牙 —— 开口的视觉只由
   「一道从照片自身唇线取样的暗缝」的纵向伸展表达。
   底色 = JS 从照片嘴框暗像素采样并去饱和后的 --aic-cav-rgb（低饱和暖褐，
   不是纯黑、更不是白；旧缓存无采样 → 落回中性暖褐兜底值）。
   radial 自身衰减出软边，没有硬轮廓，也就没有「椭圆盘/贴片」感。 */
.aic-cav {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.72, 0.06);
  transform-origin: 50% 30%;
  /* 上圆下尖的嘴形；柔边由渐变承担，圆角只影响最外缘的微弱收尾 */
  border-radius: 50% 50% 46% 46% / 66% 66% 34% 34%;
  /* ★ 20260923 黑点根治：中心 alpha 0.95→0.80 / 0.86→0.68 / 边缘 0.52→0.42 ——
     底色本身取自照片唇线（JS 已加亮度下限），再压 alpha 让缝「融」进嘴唇，
     不再是一块不透明的深色贴片；软边衰减带更长，小脸上不结成圆点。 */
  background: radial-gradient(ellipse 66% 104% at 50% 50%,
    rgba(var(--aic-cav-rgb, 30, 16, 12), 0.80) 0%,
    rgba(var(--aic-cav-rgb, 30, 16, 12), 0.68) 46%,
    rgba(62, 34, 23, 0.42) 76%,
    rgba(62, 34, 23, 0) 100%);
  opacity: 0.92;
  will-change: transform;
}
/* 口腔底/舌的暖色反光：低饱和暗红褐，给「缝」一点纵深，不再是死黑。
   --aic-cav-warm 可调；保持低饱和 —— 高饱和暗红会闪出历史踩坑的「酒红假牙套」 */
.aic-cav::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% 108%,
    var(--aic-cav-warm, rgba(58, 28, 20, 0.45)) 0%,
    rgba(58, 28, 20, 0) 70%);
  pointer-events: none;
}
/* 上下唇内缘接触暗影（原「合成白牙」已删除 —— 用户复测：纯白等宽贴纸牙极假）。
   现在它们只是暗缝内部的两道极淡暗影：
   .aic-teeth = 上唇内缘的接触阴影（上缘略深、向下融进缝里）
   .aic-teeth-low = 下唇内缘的暖色暗影（比上缘略暖，暗示下唇内侧受光）
   不再有白色、不再有等宽 tile 牙缝；opacity 由 JS 控制，v 小时几乎不可见、
   v 大时才给口腔内部一点结构，避免退回「一个平黑洞」。 */
.aic-teeth {
  position: absolute;
  left: 50%; top: 0;
  transform-origin: 50% 0%;
  border-radius: 42% 42% 50% 50% / 34% 34% 66% 66%;
  background: linear-gradient(180deg,
    rgba(20, 10, 8, 0.42) 0%,
    rgba(20, 10, 8, 0.20) 52%,
    rgba(20, 10, 8, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
}
/* 下唇内缘接触暗影：贴内腔下缘（bottom:0 天然跟随内腔 scaleY），
   厚度用与上缘相同的 1/s 反向补偿（origin 50% 100%，向下贴底不飘）。
   可调参数 --aic-low-teeth-h：暗影带高 / 上带高 比例（默认 0.55） */
.aic-teeth-low {
  position: absolute;
  left: 50%; bottom: 0;
  width: 73.9%;
  height: calc(34% * var(--aic-low-teeth-h, 0.55));
  min-height: 3px;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  background: linear-gradient(0deg,
    rgba(72, 38, 26, 0.40) 0%,
    rgba(72, 38, 26, 0.16) 55%,
    rgba(72, 38, 26, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
}
/* 上唇投影（压在暗腔上缘） */
.aic-lipshadow {
  position: absolute;
  transform: translate(-50%, -108%) rotate(-1.2deg);
  border-radius: 50%;
  background: radial-gradient(58% 100% at 50% 72%, rgba(20,4,6,0.55), rgba(20,4,6,0) 74%);
  opacity: 0;
}
/* 下唇高光（随开口出现） */
.aic-liphi {
  position: absolute;
  transform: translate(-50%, -160%);
  transform-origin: 50% 100%;
  border-radius: 50%;
  background: radial-gradient(60% 100% at 50% 40%, rgba(255,238,228,0.34), rgba(255,238,228,0) 72%);
  opacity: 0;
}
/* 右上角自己小窗 */
.aic-pip {
  position: absolute; top: 16px; right: 12px;
  width: 96px; height: 132px;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 15;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: auto;
}
/* 20260917a：前置摄像头预览做水平镜像（微信同款体验）——头往哪边甩画面就往哪边甩。
   原始前置流是「别人视角」，不加镜像用户感觉像后置拍的。只影响本地小窗显示，不影响推流。 */
.aic-pip video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.aic-pip-hint {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4);
}
.aic-pip-hint svg { width: 26px; height: 26px; }

/* 我说的话 / 字幕 */
.aic-user-bubble {
  position: absolute; left: 16px; right: 110px; bottom: 235px;
  z-index: 6;
  align-self: flex-start;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 13px;
  font-size: 13px; color: #fff; text-align: left;
}
.aic-subtitle {
  position: absolute; left: 50%; bottom: 270px;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 86%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 14px; line-height: 1.6; color: #fff; text-align: center;
  pointer-events: none;
}
.aic-chips {
  position: absolute; left: 0; right: 0; bottom: 290px;
  z-index: 7;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 0 16px;
}
.aic-chips button {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 13px;
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.aic-chips button:active { background: rgba(255,255,255,0.28); }

/* 打字对话输入框（通话中，位于控制区上方） */
.aic-textbar {
  position: absolute; left: 14px; right: 14px; bottom: 210px;
  z-index: 30;
  display: flex; gap: 8px; align-items: center;
  pointer-events: auto;
}
/* 聆听状态指示（微信视频式全时听） */
.aic-listen {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 224px;
  z-index: 28;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px; color: #fff;
  pointer-events: none;
  animation: aicListenPulse 1.6s ease-in-out infinite;
}
@keyframes aicListenPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
.aic-audio-unlock {
  position: absolute; left: 0; right: 0; bottom: 300px;
  z-index: 45;
  display: flex; justify-content: center;
  pointer-events: none;
}
.aic-audio-unlock button {
  pointer-events: auto;
  background: rgba(124, 106, 242, 0.92);
  border: none; color: #fff; font-size: 15px;
  padding: 13px 22px; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  animation: aicListenPulse 1.6s ease-in-out infinite;
}

/* ===== 微信式文字聊天页 ===== */
.chat-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.chat-back {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.7); border: none; border-radius: 50%;
  color: var(--brand, #7C6AF2); cursor: pointer;
}
.chat-back svg { width: 20px; height: 20px; }
.chat-top-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--brand, #7C6AF2);
  color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.chat-top-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-top-name {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 600; color: #2b2350;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-top-mem {
  flex-shrink: 0;
  background: rgba(124,106,242,0.1); color: var(--brand, #7C6AF2);
  border: none; border-radius: 999px;
  font-size: 13px; padding: 7px 14px; cursor: pointer;
}
.chat-msgs {
  padding: 14px 14px 20px;
  display: flex; flex-direction: column;
}
.chat-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.chat-row.me { justify-content: flex-end; }
.chat-msg-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; overflow: hidden;
  background: var(--brand, #7C6AF2);
  color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-bubble {
  max-width: 72%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.6;
  word-break: break-word;
}
.chat-row.ta .chat-bubble { background: #fff; color: #333; border-top-left-radius: 4px; box-shadow: 0 1px 4px rgba(43,35,80,0.08); }
.chat-row.me .chat-bubble { background: var(--brand, #7C6AF2); color: #fff; border-top-right-radius: 4px; box-shadow: 0 1px 4px rgba(124,106,242,0.3); }
.chat-dot-flash { animation: chatBlink 1s infinite; display: inline-block; }
@keyframes chatBlink { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
.chat-inputbar {
  flex-shrink: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(43,35,80,0.08);
}
.chat-inputbar input {
  flex: 1; min-width: 0;
  background: #f4f2fb;
  border: 1px solid rgba(124,106,242,0.15);
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 14px; color: #333;
  outline: none;
  -webkit-appearance: none;
}
.chat-inputbar input:focus { border-color: var(--brand, #7C6AF2); }
.chat-inputbar button {
  flex-shrink: 0;
  background: var(--brand, #7C6AF2);
  border: none; border-radius: 999px;
  color: #fff; font-size: 14px;
  padding: 11px 18px; cursor: pointer;
}
.chat-inputbar button:active { opacity: 0.85; }

/* 呼叫阶段 */
.aic-phase {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 18vh;
}
.aic-avatar {
  width: 108px; height: 108px;
  border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 18px;
}
.aic-avatar img { width: 100%; height: 100%; object-fit: cover; }
.aic-avatar-letter {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700; color: rgba(255,255,255,0.85);
}
.aic-name { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.aic-phase-main { font-size: 14px; color: rgba(255,255,255,0.75); }
.aic-phase-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* 底部控制区 */
.aic-bottom {
  position: absolute; left: 0; right: 0; bottom: 74px;
  z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  pointer-events: auto;
}
.aic-ctls { display: flex; gap: 34px; }
.aic-ctl { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.aic-ctl-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(60,60,60,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.2s;
}
.aic-ctl-circle svg { width: 22px; height: 22px; }
.aic-ctl.off .aic-ctl-circle { background: rgba(255,255,255,0.85); color: #222; }
.aic-ctl.off .aic-ctl-circle .slash { display: block; }
.aic-ctl-circle .slash { display: none; }
.aic-ctl-label { font-size: 11px; color: rgba(255,255,255,0.85); }
.aic-hangup-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 60; position: relative; }
.aic-hangup {
  pointer-events: auto; touch-action: manipulation;
  width: 62px; height: 62px; border-radius: 50%;
  border: none; background: #e34d4d; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(227,77,77,0.4);
}
.aic-hangup:active { transform: scale(0.94); }
.aic-hangup svg { width: 26px; height: 26px; transform: rotate(135deg); }
.aic-hangup-label { font-size: 11px; color: rgba(255,255,255,0.85); }

/* 底部状态条 */
.aic-statusbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 25;
  height: 44px;
  display: flex; align-items: center;
  padding: 0 14px;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
}
.aic-statusbar .aic-info { pointer-events: auto; }
.aic-timer { font-size: 13px; color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; }
.aic-badge {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.aic-info {
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent; color: rgba(255,255,255,0.75);
  font-size: 12px; font-style: italic; font-family: serif;
  cursor: pointer;
}

/* 真实数字人云渲染视频容器 + 调试日志 */
.aic-remote-box {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: #000;
  z-index: 1;
  overflow: hidden;
}
/* ★ TRTC 自动播放遮罩（.trtc_autoplay_mask）：SDK 在远端视频 play() 被浏览器拦截时
   会铺一层全屏透明遮罩吞掉所有点击，用于 SDK 自己的「恢复播放」——实测它会盖住
   我们的「▶ 点一下开始通话」浮层（点击落不到按钮上）。且 SDK 的恢复只管播放不管
   声音。统一隐藏，恢复路径完全交给 #aicAudioUnlock（aiUnlockAudio：
   取消静音 + play + muteRemoteAudio(false)，一步到位）。 */
.trtc_autoplay_mask { display: none !important; }
/* iOS Safari：<video> 默认 inline 且可能只有 150px 高，必须显式撑满 + 内联尺寸，
   否则数字人视频会塌成一条、看起来像「画面不动/没开口」 */
.aic-remote-box video {
  display: block;
  width: 100%; height: 100%; min-height: 100%;
  object-fit: cover;
  -webkit-object-fit: cover;
  background: #000;
}
.aic-debug-log {
  display: none;                 /* 诊断面板默认隐藏：正式通话里用户不该看到任何日志文字 */
  position: absolute;
  left: 10px; top: 10px;
  width: min(74%, 320px);
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 6px 8px 8px;
  font-size: 11px; line-height: 1.45;
  color: #ececec;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  z-index: 60;
  text-shadow: none;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
/* 仅当 URL 带 ?debug=1（JS 给 #aiCallScreen 加 debug-on 类）时才显示诊断面板。
   这是排查面板、不是「调嘴位控件」，不违反零控件约定；aiLog 始终在照常收集。 */
#aiCallScreen.debug-on .aic-debug-log { display: block; }
.aic-debug-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: #cfcfcf; margin-bottom: 5px;
  position: sticky; top: 0;
}
.aic-debug-head button {
  background: rgba(255,255,255,0.16); color: #fff; border: none;
  border-radius: 5px; font-size: 10px; padding: 2px 9px; cursor: pointer;
}
.aic-debug-head button:active { background: rgba(255,255,255,0.3); }
.aic-debug-line {
  white-space: pre-wrap; word-break: break-word;
  color: #e6e6e6;
}

/* ============================================================
   超级念 · 紫色主题（v2 换肤层）
   设计定稿：浅紫渐变底 #F1EDFB + 主紫 #7C6AF2 + 白色大圆角卡片
   通话页保持深色（微信视频风格）
   ============================================================ */

/* ===== 1. 变量整体翻转 ===== */
:root {
  /* 背景色系：浅紫 */
  --bg-darkest: #F1EDFB;
  --bg-dark: #F1EDFB;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FBFAFF;
  --bg-elevated: #FFFFFF;
  --bg-border: #ECE8F8;
  --bg-accent: #EFEAFE;

  /* 品牌紫 */
  --brand: #7C6AF2;
  --brand-dim: #5A48D6;
  --brand-glow: rgba(124, 106, 242, 0.15);
  --brand-glow-strong: rgba(124, 106, 242, 0.3);

  /* 文字：深色 */
  --text-primary: #1F1B2E;
  --text-secondary: #3A3550;
  --text-tertiary: #6E688C;
  --text-muted: #9A94B5;
  --text-warm: #1F1B2E;

  /* 阴影：柔和紫晕 */
  --shadow-card: 0 8px 28px rgba(124, 106, 242, 0.10);
  --shadow-brand: 0 0 24px var(--brand-glow);
}

/* ===== 2. 全局底色 ===== */
body {
  background: linear-gradient(160deg, #F5F1FC 0%, #EDE7F9 55%, #E7DFF8 100%);
  color: var(--text-primary);
}
.phone-shell {
  background: linear-gradient(160deg, #F5F1FC 0%, #EDE7F9 55%, #E7DFF8 100%);
  box-shadow: 0 20px 60px rgba(124, 106, 242, 0.18);
}
@media (min-width: 768px) {
  body { background: linear-gradient(160deg, #EFE9FA 0%, #E2D9F6 100%); }
  .phone-shell { border: 8px solid #FFFFFF; box-shadow: 0 24px 70px rgba(124, 106, 242, 0.22); }
}

/* ===== 3. 顶部导航栏 ===== */
.topbar {
  background: rgba(245, 241, 252, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(124, 106, 242, 0.08);
}
.topbar-title { color: var(--text-primary); font-weight: 700; }
.topbar-back { color: var(--text-tertiary); }
.topbar-action { color: var(--brand); font-weight: 600; }

/* ===== 4. 悬浮胶囊底部导航（参考用户截图样式） ===== */
.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 90;
  flex-shrink: 0;
  margin: 8px 14px max(12px, env(safe-area-inset-bottom));
  padding: 10px 6px calc(10px - 2px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 106, 242, 0.10);
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(124, 106, 242, 0.16);
}
.tabbar::before { display: none; }
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0 2px;
  color: #9A94B5;
  font-size: 11px;
  border-radius: 16px;
  transition: color 0.2s;
}
.tab-item svg { width: 23px; height: 23px; }
.tab-item.active { color: var(--brand); font-weight: 600; }
.tab-item.active svg { stroke-width: 2.4; }

/* ===== 5. 按钮 ===== */
.btn-primary {
  background: linear-gradient(135deg, #8B7CF6 0%, #7C6AF2 55%, #6A55E8 100%);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(124, 106, 242, 0.32);
  border-radius: 14px;
}
.btn-primary:active { background: var(--brand-dim); }
.btn-secondary {
  background: #FFFFFF;
  color: var(--text-primary);
  border: 1px solid var(--bg-border);
}
.btn-ghost {
  background: #FFFFFF;
  color: var(--brand);
  border: 1px solid rgba(124, 106, 242, 0.45);
  border-radius: 14px;
}
.btn-danger {
  background: rgba(255, 57, 70, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(255, 57, 70, 0.25);
  border-radius: 14px;
}

/* ===== 6. 首页（未登录）：紫色光晕 + 隐藏星空 ===== */
.landing {
  background: radial-gradient(ellipse at 50% 22%, rgba(139, 124, 246, 0.16) 0%, transparent 55%),
              radial-gradient(ellipse at 50% 85%, rgba(124, 106, 242, 0.10) 0%, transparent 55%),
              linear-gradient(160deg, #F5F1FC 0%, #E7DFF8 100%);
}
.landing-stars { display: none; }
.landing-title {
  color: var(--text-primary);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
}
.landing-subtitle { color: var(--text-tertiary); }
.landing-heading { color: var(--text-primary); }
.landing-desc { color: var(--text-tertiary); }
.landing-footer { color: var(--text-muted); }

/* ===== 6.1 登录页（1:1 复刻 login.html）===== */
.phone {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  padding-bottom: 34px;
  background: linear-gradient(180deg, #2e2450 0%, #45336e 14%, #6b4fa3 30%, #9b7fd0 48%, #c8b2ec 66%, #eee5fa 84%, #f8f4fe 100%);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.phone::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
/* 登录页内部内容最大宽度，防止宽屏过散 */
.mascot-zone, .card {
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
}
.card {
  width: calc(100% - 44px);
}
.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1.15); }
}
.spark { position: absolute; }
@keyframes sparkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.1) rotate(20deg); }
}
.spark svg { animation: sparkle 3.2s ease-in-out infinite; }
.mascot-zone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 34px;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mascot {
  width: 318px;
  height: 318px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 18px 30px rgba(40, 15, 90, 0.45));
  animation: floaty 3.6s ease-in-out infinite;
  display: block;
}
.welcome {
  margin-top: 14px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.welcome h1 {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(60, 25, 120, 0.35);
  margin: 0 0 4px;
}
.welcome p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin-top: 5px;
  letter-spacing: 0.5px;
}
.card {
  position: relative;
  z-index: 3;
  margin: 22px 22px 0;
  background: #fff;
  border-radius: 24px;
  padding: 22px 22px 26px;
  box-shadow: 0 18px 40px rgba(80, 45, 140, 0.22);
}
.tabs {
  display: flex;
  background: #f3eefb;
  border-radius: 999px;
  padding: 4px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #8b7ba8;
  cursor: pointer;
  transition: all 0.25s;
}
.tab.on {
  background: linear-gradient(90deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.form { margin-top: 20px; }
.field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #ece5f8;
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fbf9fe;
}
.field:focus-within {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
  background: #fff;
}
.field .ic { width: 22px; height: 22px; flex: none; display: flex; }
.field input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 15.5px;
  color: #2b2340;
  letter-spacing: 0.5px;
  min-width: 0;
}
.field input::placeholder { color: #b6abc9; }
.getcode {
  flex: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #c4b5fd, #a855f7);
  padding: 7px 13px;
  border-radius: 999px;
  transition: opacity 0.2s;
}
.getcode:disabled { opacity: 0.55; cursor: not-allowed; }
.eye { flex: none; cursor: pointer; display: flex; }
.aux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #8b7ba8;
  margin: 2px 2px 18px;
}
.aux .lnk { color: #7c3aed; font-weight: 600; cursor: pointer; }
/* 记住密码（与协议勾选框同款圆点样式） */
.aux .aux-left { display: inline-flex; align-items: center; gap: 6px; }
.aux .aux-left .checkbox { margin-top: 0; }
.aux .rm-lbl { cursor: pointer; }
.aux .aux-sep { margin-left: 8px; }
.login-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 15px 0;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #a855f7, #7c3aed);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.login-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); }
.agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 11.5px;
  color: #9b8fb3;
  line-height: 1.6;
}
.checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid #c9bce4;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: #fff;
}
.checkbox.on { background: linear-gradient(135deg, #a855f7, #7c3aed); border-color: #7c3aed; }
.checkbox svg { opacity: 0; transition: opacity 0.15s; }
.checkbox.on svg { opacity: 1; }
.agree a { color: #7c3aed; text-decoration: none; font-weight: 600; }
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: #b6abc9;
  font-size: 12px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #ece5f8; }
.socials { display: flex; justify-content: center; gap: 26px; }
.socal {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
  box-shadow: 0 4px 12px rgba(80, 45, 140, 0.14);
  background: #fff;
  border: 1px solid #f0eaf9;
}
.socal:hover { transform: translateY(-2px); }
.noaccount { text-align: center; margin-top: 20px; font-size: 13px; color: #8b7ba8; }
.noaccount b { color: #7c3aed; cursor: pointer; }
/* 注册区 */
.reg-panel {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #ece5f8;
}
.reg-title {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #2b2340;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
#toast {
  position: fixed;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  background: rgba(43, 35, 64, 0.92);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 99;
  white-space: nowrap;
}

/* ===== 7. 通用卡片/表单微调 ===== */
.aux-link { color: #7C3AED; font-weight: 600; cursor: pointer; }
.login-btn {
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 15px 0;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #A855F7, #7C3AED);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.login-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); }
.login-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 11.5px;
  color: #9B8FB3;
  line-height: 1.6;
}
.agree-checkbox {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid #C9BCE4;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: #fff;
}
.agree-checkbox.on { background: linear-gradient(135deg, #A855F7, #7C3AED); border-color: #7C3AED; }
.agree-checkbox svg { opacity: 0; transition: opacity 0.15s; }
.agree-checkbox.on svg { opacity: 1; }
.login-agree a { color: #7C3AED; text-decoration: none; font-weight: 600; }
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: #B6ABC9;
  font-size: 12px;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #ECE5F8; }
.login-socials { display: flex; justify-content: center; gap: 26px; }
.social-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
  box-shadow: 0 4px 12px rgba(80, 45, 140, 0.14);
  background: #fff;
  border: 1px solid #F0EAF9;
}
.social-btn:hover { transform: translateY(-2px); }
.login-noaccount { text-align: center; margin-top: 20px; font-size: 13px; color: #8B7BA8; }
.login-noaccount b { color: #7C3AED; cursor: pointer; }
.login-footer {
  margin-top: auto;
  padding-top: 40px;
  font-size: 11px;
  color: #9B8FB3;
  opacity: 0.6;
}

/* ===== 7. 通用卡片/表单微调 ===== */
.auth-input, .form-input, .form-textarea {
  background: #FFFFFF;
  border: 1px solid var(--bg-border);
  color: var(--text-primary);
  border-radius: 14px;
}
.auth-input:focus, .form-input:focus, .form-textarea:focus {
  border-color: rgba(124, 106, 242, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 106, 242, 0.12);
  outline: none;
}
.auth-title { color: var(--text-primary); }
.auth-subtitle { color: var(--text-tertiary); }
.auth-label { color: var(--text-secondary); }
.auth-switch a { color: var(--brand); }
.auth-error { color: var(--color-danger); }

.upload-area {
  background: rgba(124, 106, 242, 0.05);
  border: 1.5px dashed rgba(124, 106, 242, 0.45);
  border-radius: 18px;
  color: var(--brand);
}
.upload-hint { color: var(--text-tertiary); }

.voice-tab { color: var(--text-muted); background: transparent; border: 1px solid var(--bg-border); border-radius: 999px; }
.voice-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.voice-cat-tab { background: #FFFFFF; border: 1px solid var(--bg-border); color: var(--text-secondary); border-radius: 999px; }
.voice-cat-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.voice-option {
  background: #FFFFFF;
  border: 1px solid var(--bg-border);
  border-radius: 16px;
}
.voice-option.selected { border-color: var(--brand); box-shadow: 0 4px 16px rgba(124, 106, 242, 0.14); }
.voice-option-name { color: var(--text-primary); }
.voice-option-desc { color: var(--text-muted); }
.voice-option-play { color: var(--brand); }
.voice-option-play.playing { color: var(--brand); }
.voice-group-label { color: var(--text-tertiary); }

.consent-box { background: #FFFFFF; border: 1px solid var(--bg-border); border-radius: 16px; }
.consent-box-title { color: var(--brand); }
.consent-box-text { color: var(--text-tertiary); }
.create-section-title { color: var(--text-primary); }
.create-section-title .num { background: var(--brand); color: #fff; }
.create-section-desc { color: var(--text-muted); }

/* ===== 8. 创作平台：紫色渐变横幅（新） ===== */
.library-hero { padding: 4px 16px 8px; }
.library-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #9B8CF8 0%, #7C6AF2 55%, #6A55E8 100%);
  border-radius: 22px;
  padding: 22px 20px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(124, 106, 242, 0.30);
}
.library-hero-title { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.library-hero-sub { font-size: 13px; opacity: 0.88; margin-top: 2px; }
.library-hero-clock {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 58px; height: 58px;
  opacity: 0.5;
  color: #fff;
}
.library-header { padding: 12px 16px 2px; }
.library-title { color: var(--text-primary); font-weight: 700; }
.library-subtitle { color: var(--text-muted); }

/* ===== 9. 角色卡片 ===== */
.dh-card {
  background: #FFFFFF;
  border: 1px solid var(--bg-border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.dh-card-name { color: var(--text-primary); }
.dh-card-relation { color: var(--text-muted); }
.dh-card-badge {
  background: rgba(124, 106, 242, 0.9);
  color: #fff;
}
.dh-card-actions button {
  background: #FFFFFF;
  border: 1px solid rgba(124, 106, 242, 0.55);
  color: var(--brand);
  border-radius: 999px;
  font-weight: 600;
}
.dh-card-actions button:first-child {
  background: linear-gradient(135deg, #8B7CF6, #7C6AF2);
  border-color: transparent;
  color: #fff;
}
.dh-avatar { background: linear-gradient(135deg, #8B7CF6, #6A55E8); color: #fff; }
.create-card {
  border: 1.5px dashed rgba(124, 106, 242, 0.5);
  background: rgba(124, 106, 242, 0.04);
  color: var(--brand);
  border-radius: 20px;
}
.section-label { color: var(--text-secondary); font-weight: 600; }
.section-label .label-action { color: var(--text-muted); font-weight: 400; }

/* ===== 10. 商城（新） ===== */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 16px 4px;
}
.shop-card {
  background: #FFFFFF;
  border: 1px solid var(--bg-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s;
}
.shop-card:active { transform: scale(0.97); }
.shop-thumb {
  position: relative;
  aspect-ratio: 16 / 10.5;
  background: linear-gradient(140deg, #C9BFF9 0%, #A898F5 55%, #8B7CF6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-play {
  position: absolute;
  width: 44px; height: 44px;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.shop-thumb-emoji { font-size: 34px; opacity: 0.9; }
.shop-info { padding: 10px 12px 12px; }
.shop-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.shop-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.shop-price { color: var(--brand); font-weight: 800; font-size: 16px; }
.shop-sold { color: var(--text-muted); font-size: 11px; }

/* ===== 11. 消息页：紫色图标块 ===== */
.message-item {
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 0;
}
.message-item:active { background: #FBFAFF; }
.message-list {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid var(--bg-border);
  box-shadow: var(--shadow-card);
  margin: 8px 16px;
  padding: 4px 14px;
}
.message-item { border-bottom: 1px solid #F3F0FB; }
.message-item:last-child { border-bottom: none; }
.message-title { color: var(--text-primary); font-weight: 600; }
.message-preview { color: var(--text-muted); }
.message-time { color: var(--text-muted); font-weight: 400; }
.message-icon {
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.message-icon.system { background: linear-gradient(135deg, #8B7CF6, #6A55E8); color: #fff; }
.message-icon.notice { background: var(--bg-accent); color: var(--brand); }
.message-icon.business { background: var(--bg-accent); color: var(--brand); }
.message-badge { background: #F53F3F; }

/* ===== 12. 我的：紧凑个人卡 + 菜单 + 紫色退出 ===== */
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--bg-border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 14px 14px;
  margin: 8px 16px 14px;
}
.profile-card .profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B7CF6, #6A55E8);
  color: #fff;
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-card .profile-info { flex: 1; min-width: 0; }
.profile-card .profile-name { color: var(--text-primary); font-weight: 700; font-size: 16px; }
.profile-card .profile-meta { color: var(--text-muted); font-size: 12px; }
.profile-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.profile-balance-chip {
  background: var(--bg-accent);
  color: var(--brand);
  font-size: 12px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.profile-recharge-btn {
  background: #FFFFFF;
  border: 1px solid rgba(124, 106, 242, 0.55);
  color: var(--brand);
  font-size: 12px; font-weight: 600;
  padding: 4px 14px;
  border-radius: 999px;
}
.menu-list { padding: 0 16px; }
.menu-list .menu-item {
  background: transparent;
}
.menu-item { color: var(--text-primary); }
.menu-text { color: var(--text-primary); font-weight: 500; }
.menu-icon { color: var(--brand); background: var(--bg-accent); border-radius: 10px; }
.logout-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--brand);
  font-size: 15px;
  font-weight: 600;
  padding: 18px 0 6px;
  cursor: pointer;
}
.logout-row svg { width: 18px; height: 18px; }
.logout-row:active { opacity: 0.7; }

/* ===== 12b. 我的：权益版（1:1 复刻参考图） ===== */
#page-profile {
  background: linear-gradient(180deg, #453565 0%, #513F76 7%, #614F8B 14%, #6F5C99 17%, #7764A4 21%, #7C68AC 24%, #8270B4 35%, #8670BA 42%, #9079C2 48%, #967EC7 55%, #9E87CE 69%, #A48DD4 83%, #A68FD6 90%, #A990DA 100%);
}
#page-profile .page-content { padding: 0 0 10px; }
#page-profile .tabbar { background: rgba(58, 44, 92, 0.92); border-top: 1px solid rgba(255, 255, 255, 0.10); }
#page-profile .tab-item { color: rgba(255, 255, 255, 0.62); }
#page-profile .tab-item.active { color: #FFFFFF; }

/* 顶部两个圆形按钮 */
.pfx-topbar { display: flex; justify-content: flex-end; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 14px 0; }
.pfx-hbtn { width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0; background: rgba(255, 255, 255, 0.16); color: #fff; display: flex; align-items: center; justify-content: center; }
.pfx-hbtn svg { width: 17px; height: 17px; }
.pfx-hbtn:active { background: rgba(255, 255, 255, 0.28); }

/* 顶部用户区 */
.pfx-header { display: flex; align-items: center; gap: 12px; padding: 21px 16px 12px 19px; }
.pfx-avatar { width: 60px; height: 60px; border-radius: 50%; background: #0B0B0F; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); }
.pfx-avatar svg { width: 44px; height: 44px; }
.pfx-idbox { flex: 1; min-width: 0; }
.pfx-name { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-crown { font-size: 18px; flex-shrink: 0; }
.pfx-sub { display: flex; align-items: center; gap: 2px; margin-top: 5px; font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.pfx-sub svg { width: 13px; height: 13px; }

/* 专属权益 */
.pfx-vip { position: relative; z-index: 2; margin: 0 15px 11px; height: 128px; padding: 17px 16px; border-radius: 20px;
  background:
    radial-gradient(circle at 78% 36%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(100deg, #5B2FA8 0%, #5E2FB8 38%, #6832CC 70%, #7427DC 100%);
  box-shadow: 0 12px 26px rgba(70, 40, 140, 0.42); }
.pfx-gemart { position: absolute; right: 5px; top: -18px; width: 112px; height: auto; pointer-events: none; }
.pfx-medal { position: absolute; right: 33px; bottom: -48px; width: 69px; height: auto; pointer-events: none; }
.pfx-vip-l { position: relative; z-index: 1; }
.pfx-vip-titlerow { display: flex; align-items: center; gap: 10px; }
.pfx-vip-title { font-size: 19px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(58, 20, 126, 0.35); }
.pfx-vip-shop { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #7A4700; padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #FCE07C 0%, #F0B429 100%); }
.pfx-vip-shop svg { width: 13px; height: 13px; }
.pfx-vip-desc { margin-top: 11px; font-size: 12.5px; color: #fff; }
.pfx-vip-pills { display: flex; gap: 10px; margin-top: 12px; }
.pfx-vpill { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.22); padding: 5px 10px; border-radius: 10px; }
.pfx-vpill svg { width: 14px; height: 14px; }
.pfx-bal { position: absolute; right: 16px; bottom: 19px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.30);
  padding: 3px 8px 3px 10px; border-radius: 999px; }
.pfx-bal > svg:first-child { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.94); }
.pfx-bal > svg:last-child { width: 12px; height: 12px; color: rgba(255, 255, 255, 0.9); }

/* 超级代理 */
.pfx-agent { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 0 15px 15px; padding: 16px; border-radius: 20px;
  background: #FFFFFF; box-shadow: 0 8px 20px rgba(60, 40, 110, 0.16); }
.pfx-agent:active { transform: scale(0.99); }
.pfx-agent-ico { width: 66px; height: auto; flex-shrink: 0; display: block; margin: -6px 0; }
.pfx-agent-txt { flex: 1; min-width: 0; }
.pfx-agent-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: #1C1727; }
.pfx-redtag { font-size: 12px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #B45CF5 0%, #8B5CF6 100%); }
.pfx-agent-desc { margin-top: 5px; font-size: 13px; color: #A09CB0; }
.pfx-chev { width: 18px; height: 18px; color: #CFC8E0; flex-shrink: 0; }

/* 更多功能 */
.pfx-more { margin: 0 15px 13px; padding: 16px 10px 9px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 8px 20px rgba(60, 40, 110, 0.16); }
.pfx-more-title { font-size: 17px; font-weight: 800; color: #1C1727; line-height: 1.35; margin: 0 6px 17px; }
.pfx-grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 30px; }
.pfx-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pfx-cell:active { opacity: 0.7; }
.pfx-ico { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.pfx-ico svg { width: 36px; height: 36px; color: #B096E6; }
.pfx-dot { position: absolute; top: -6px; right: -7px; min-width: 24px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: #F43F5E; color: #fff; font-size: 11px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.pfx-lbl { font-size: 13px; line-height: 1.25; color: #3C3550; }

/* 退出登录 + 备案 */
.pfx-logout { display: block; width: calc(100% - 30px); margin: 0 15px 14px; padding: 12px 0; border: none; border-radius: 20px;
  background: #FFFFFF; color: #F43F5E; font-size: 17px; font-weight: 700; box-shadow: 0 8px 20px rgba(60, 40, 110, 0.16); }
.pfx-logout:active { opacity: 0.85; }
.pfx-footer { text-align: center; font-size: 11px; line-height: 1.7; color: rgba(255, 255, 255, 0.62); padding: 6px 0 12px; }

/* ===== 13. 充值页 ===== */
.balance-card {
  background: linear-gradient(135deg, #9B8CF8 0%, #7C6AF2 55%, #6A55E8 100%);
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 10px 28px rgba(124, 106, 242, 0.30);
}
.balance-card-label { color: rgba(255,255,255,0.85); }
.balance-card-unit { color: rgba(255,255,255,0.85); }
.package-card {
  background: #FFFFFF;
  border: 1.5px solid var(--bg-border);
  border-radius: 18px;
}
.package-card.selected { border-color: var(--brand); box-shadow: 0 6px 20px rgba(124, 106, 242, 0.18); }
.package-name { color: var(--text-primary); }
.package-desc { color: var(--text-muted); }
.package-price .price { color: var(--brand); }
.package-price .period { color: var(--text-muted); }
.package-tag { background: var(--brand); color: #fff; }

/* ===== 14. 设置/协议/隐私页 ===== */
.privacy-card { background: #FFFFFF; border: 1px solid var(--bg-border); border-radius: 18px; }
.privacy-card-title { color: var(--text-primary); }
.privacy-card-desc { color: var(--text-muted); }
.toggle-label .title { color: var(--text-primary); }
.toggle-label .desc { color: var(--text-muted); }
.text-danger { color: var(--color-danger); }

/* ===== 15. Toast ===== */
.toast {
  background: rgba(31, 27, 46, 0.92);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(31, 27, 46, 0.25);
}

/* ===== 16. 通话大厅：浅色化（通话中界面保持深色） ===== */
.call-page { background: linear-gradient(160deg, #F5F1FC 0%, #E7DFF8 100%); }
.call-lobby { color: var(--text-primary); }
.lobby-icon { background: rgba(124, 106, 242, 0.12); color: var(--brand); }
.lobby-title { color: var(--text-primary); }
.lobby-desc { color: var(--text-muted); }
.lobby-input {
  background: #FFFFFF;
  border: 1px solid var(--bg-border);
  color: var(--text-primary);
}
.lobby-input:focus { border-color: rgba(124, 106, 242, 0.55); }
.invite-panel {
  background: #FFFFFF;
  border: 1px solid rgba(124, 106, 242, 0.35);
  box-shadow: var(--shadow-card);
}
.invite-room-no { color: var(--text-secondary); }
.invite-room-no span { color: var(--brand); }
.invite-tip { color: var(--text-muted); }
.invite-link { color: var(--brand); background: rgba(124, 106, 242, 0.08); }

/* 通话中界面：保持深色沉浸（微信视频风） */
.call-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a1a2e 0%, #050913 100%);
  z-index: 10;
}
.call-info-top .call-name { color: #fff; }
.call-duration { color: #fff; }
.call-avatar-large { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.call-status-text { color: rgba(255,255,255,0.75); }
.call-btn { background: rgba(60,60,60,0.55); color: #fff; border-radius: 50%; }
.call-btn.active { background: rgba(60,60,60,0.55); }
.call-btn-label { color: rgba(255,255,255,0.85); }
.call-connecting-overlay { background: rgba(5, 9, 19, 0.8); }
.connecting-text { color: rgba(255,255,255,0.75); }

/* ===== 17. AI 通话界面：微信式白色圆钮 ===== */
.aic-ctl-circle {
  background: #FFFFFF;
  color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: none;
}
.aic-ctl.off .aic-ctl-circle { background: rgba(255, 255, 255, 0.85); color: #555; }
.aic-ctl-label { color: rgba(255, 255, 255, 0.92); font-size: 12px; }
.aic-ctls { gap: 40px; }
.aic-ctls-sub { gap: 52px; margin-top: -4px; align-items: center; }
.aic-ctl-mini {
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
}
.aic-ctl-mini svg { width: 20px; height: 20px; }
.aic-ctl-mini:active { background: rgba(255,255,255,0.15); }
.aic-bottom { gap: 22px; bottom: 46px; }
.aic-hangup { box-shadow: 0 8px 24px rgba(227, 77, 77, 0.45); }
.aic-statusbar { bottom: 0; }
.aic-pip.large {
  width: 150px; height: 205px;
}
.aic-confirm-card { border-radius: 22px; }
.aic-btn-red { background: #E34D4D; border-radius: 12px; }
.aic-btn-red:active { background: #d14040; }
.aic-btn-cancel { border: 1px solid #E4E1EE; color: #555; }

/* ===== 18. AI 生成角标保持可读 ===== */
.call-ai-badge {
  background: rgba(124, 106, 242, 0.85);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}

/* ===== 19. 创作平台 v3：按参考图 1:1 重构 ===== */
.lib-page { padding-bottom: 120px; }

/* 顶部紫色横幅：大标题 + 副标题 + 右侧时钟 */
.lib-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(115deg, #A493F8 0%, #7C6AF2 58%, #6A55E8 100%);
  border-radius: 26px;
  padding: 29.6px 26px; /* 20260921s：文字放大后上下 32→29.6，保持横幅总高 193.6 不变 */
  margin: 16px 16px 4px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(124, 106, 242, 0.32);
}
.lib-hero::before {
  content: "";
  position: absolute;
  left: -50px; top: -70px;
  width: 190px; height: 190px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 50%;
}
.lib-hero::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -90px;
  width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}
/* 20260921s：文字块锁定在用户红框宽度（≈149px，横幅内居中）
   margin-left:-17 使三行中轴落在红框中心略左 4px —— 标题「超级念」字形右缘
   与小熊毛边（含呼吸动画外扩）实测只差 3.7px，再往右就压字 */
.lib-hero-text {
  position: relative;
  z-index: 1;
  width: 149px;
  margin-left: -17px;
  text-align: center;
}
.lib-hero-title { font-size: 36px; font-weight: 900; letter-spacing: 3px; }
.lib-hero-sub { font-size: 16px; opacity: 0.92; margin-top: 8px; letter-spacing: 1px; }
/* ===== 20260917e：创作库横幅公仔（3D 礼盒，眼睛/手可「伸缩」） =====
   本体是一张透明 PNG。眼睛、手各自是一个 .lib-hero-fx 图层，复用「同一张 PNG」的局部：
   background-size 拉满 + background-position 负偏移 = 精确裁出该部位，像素与底图逐点重合，
   于是各层独立做 scale/translate 形变就是「局部伸缩」，不糊、不需要切图。
   羽化遮罩让形变边缘淡出到底图（底图同位置像素完全一致，故静止时零痕迹）。 */
.lib-hero-pills {
  display: flex; gap: 8px;
  margin-top: 12px; flex-wrap: wrap;
  justify-content: center;
}
.lib-hero-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  font-size: 12px; letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}
.lib-hero-pill b { font-weight: 800; font-size: 13px; }
/* 「点击查看 宠物宝宝」胶囊：可点开宠物卡片（20260921r）
   注意：文案比原来「今日已陪伴 0 分钟」宽 ~9px，会吃掉与右侧睡觉小熊的间隙
   → 收窄左右内边距 + 箭头负边距，把间隙还回来（实测 6.5px → ~12px） */
.lib-hero-pill[role="button"] {
  cursor: pointer; padding: 5px 10px;
  transition: background .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lib-hero-pill[role="button"]:hover { background: rgba(255, 255, 255, 0.26); }
.lib-hero-pill[role="button"]:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.32); }
.lib-hero-pill-arrow { font-size: 13px; line-height: 1; opacity: 0.9; margin: -1px 0 0 -2px; }

/* 区块标题行 */
.lib-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
}
.lib-section-title { font-size: 19px; font-weight: 800; color: #2B2740; }
.lib-add-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg-accent);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lib-add-btn svg { width: 16px; height: 16px; }
.lib-add-btn:active { transform: scale(0.92); }

/* 角色卡片：左图（图下名字/关系） + 右侧竖排两个胶囊按钮 */
.lib-role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  margin: 0 16px 14px;
  padding: 20px 20px 20px 24px;
  cursor: pointer;
  transition: transform 0.15s;
}
.lib-role-card:active { transform: scale(0.98); }
.lib-role-left { width: 132px; flex-shrink: 0; }
.lib-role-photo {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(150deg, #C3B2FA 0%, #9480F4 60%, #7C6AF2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lib-role-photo img { width: 100%; height: 100%; object-fit: cover; }
.lib-role-emoji { font-size: 46px; }
.lib-role-badge {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  z-index: 2;
  background: rgba(43, 39, 64, 0.78);
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 999px;
  padding: 3px 0;
}
.lib-role-name { font-size: 16px; font-weight: 800; color: #2B2740; margin-top: 14px; }
.lib-role-meta { font-size: 13px; color: #9A94B0; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-role-btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  margin-left: 20px;
}
.lib-btn-solid, .lib-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lib-btn-solid:active, .lib-btn-ghost:active { transform: scale(0.96); }
.lib-btn-solid {
  background: linear-gradient(135deg, #8B7CF6, #7461EE);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(124, 106, 242, 0.30);
}
.lib-btn-ghost {
  background: #FFFFFF;
  color: var(--brand);
  border: 1.5px solid rgba(124, 106, 242, 0.50);
}
.lib-btn-solid svg, .lib-btn-ghost svg { width: 17px; height: 17px; }
/* 视频按钮上的「188 超级币/次」计费标签（20260924r） */
.lib-btn-ghost .lib-vtxt { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.lib-btn-ghost .lib-vfee { font-style: normal; font-size: 10px; font-weight: 600; color: #a78fe0; letter-spacing: 0.2px; }

/* 空状态创建卡片 */
.lib-create-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 26px 0;
  border: 1.5px dashed rgba(124, 106, 242, 0.5);
  background: rgba(124, 106, 242, 0.04);
  color: var(--brand);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lib-create-card svg { width: 18px; height: 18px; }

/* 平台示例：三卡横滑（视频通话 / 聊天陪伴 / 记忆陪伴，按参考图版式） */
.lib-demo3-row {
  display: flex;
  gap: 12px;
  /* 用 margin 而非 padding：与上方「超级念」横幅、角色卡/创建卡落在同一条 16px 内边距线上，
     卡片左边缘与之对齐（padding + scroll-snap 会让 snap 按 padding box 对齐，把首卡整体左移 16px） */
  margin: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.lib-demo3-row::-webkit-scrollbar { display: none; }
/* 20260918j：图片铺满整卡（占满无留白），标签/按钮浮在图片上层
   按钮贴底（bottom:0），左/右侧与卡片边缘对齐（不再内缩），圆角跟随卡片 */
.lib-demo3-card {
  position: relative;
  flex: 0 0 150px;
  height: 220px;
  scroll-snap-align: start;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(124, 106, 242, 0.12);
  cursor: pointer;
  transition: transform 0.15s;
}
.lib-demo3-card:active { transform: scale(0.97); }
.lib-demo3-card.c1,
.lib-demo3-card.c2,
.lib-demo3-card.c3 { background: linear-gradient(168deg, #FFF7E4 0%, #FFEFC9 100%); }
.lib-demo3-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #7E8DFF 0%, #8B6BF2 100%);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(124, 106, 242, 0.32);
}
.lib-demo3-fig {
  position: absolute;
  inset: 0;
  display: block;
}
.lib-demo3-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-demo3-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #7E8DFF 0%, #8B6BF2 100%);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 -2px 8px rgba(124, 106, 242, 0.18);
}
.lib-demo3-btn svg { width: 12px; height: 12px; }

/* ===== 20. 角色卡：删除按钮 + 记忆库按钮 ===== */
.lib-role-card { position: relative; }
.lib-role-del {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #F5F2FC;
  color: #A8A1BE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lib-role-del svg { width: 14px; height: 14px; }
.lib-role-del:active { background: #EDE8FA; color: #F53F3F; transform: scale(0.92); }
.lib-btn-mem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-accent, #F1EDFB);
  color: var(--brand);
  border: none;
  transition: transform 0.12s;
}
.lib-btn-mem:active { transform: scale(0.96); }
.lib-btn-mem svg { width: 16px; height: 16px; }

/* ===== 21. 记忆库页面 ===== */
.mem-page { padding: 14px 16px 40px; }
.mem-char-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid rgba(124, 106, 242, 0.18);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: var(--shadow-card);
}
.mem-char-chip svg { width: 16px; height: 16px; }
.mem-input-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 14px;
  margin-top: 14px;
}
.mem-input-card textarea {
  width: 100%;
  border: none;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent;
  outline: none;
}
.mem-input-card textarea::placeholder { color: #B4AEC8; }
.mem-save-btn { width: 100%; border-radius: 999px; margin-top: 6px; }
.mem-tip {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 10px 4px 2px;
}
.mem-list { margin-top: 10px; }
.mem-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 40px 20px;
  line-height: 1.9;
}
.mem-empty span { font-size: 12px; color: var(--text-muted); }
.mem-item {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mem-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.mem-src {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}
.mem-src.hand { background: var(--bg-accent, #F1EDFB); color: var(--brand); }
.mem-src.auto { background: #EEF4F0; color: #3B9C6A; }
.mem-time { font-size: 11px; color: var(--text-muted); }

/* ===== 声音克隆（腾讯云 VoiceClone · 前端） ===== */
/* 创建页「克隆 TA 的声音」页签高亮 */
.vc-tab-star { color: var(--brand); margin-right: 4px; }
/* 克隆面板 */
.vc-panel {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.vc-panel-title { font-size: 15px; font-weight: 600; }
.vc-panel-sub { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; }
.vc-req {
  background: var(--bg-elevated, var(--bg-card));
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
}
.vc-req-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.vc-req-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-muted); line-height: 1.8; }
.vc-file-box { margin-top: 10px; width: 100%; }
.vc-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.vc-hint.vc-hint-bad { color: #e64340; }
.vc-prompt-field { margin-top: 12px; }
.vc-prompt-label { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.vc-opt { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.vc-prompt-sample { color: var(--brand); font-size: 12px; margin-left: 6px; }
.vc-prompt-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  min-height: 104px;
  resize: vertical;
}
.vc-consent { margin-top: 14px; }
/* 授权整行可点：label 包裹 checkbox+文字，卡片式热区（点文字即勾选） */
.vc-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated, var(--bg-card));
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.vc-consent-row:active { opacity: 0.85; }
/* checkbox 放大：约 21px 可视 + 卡片热区，选中态用品牌色勾 */
.vc-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 21px;
  height: 21px;
  min-width: 21px;
  margin: 1px 0 0;
  padding: 0;
  border: 1.5px solid var(--bg-border, #c8c8c8);
  border-radius: 5px;
  background: var(--bg-card, #fff);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.vc-consent input[type="checkbox"]:checked {
  background: var(--brand, #07c160);
  border-color: var(--brand, #07c160);
}
.vc-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vc-consent-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.vc-consent-text b { font-weight: 600; }
.vc-clone-btn { width: 100%; margin-top: 14px; }
.vc-clone-btn:disabled { opacity: 0.6; pointer-events: none; }
.vc-status { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }

/* 声音管理卡（记忆库 / 角色编辑处） */
.vc-manage-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.vc-manage-head { display: flex; align-items: center; gap: 8px; }
.vc-manage-title { font-size: 14px; font-weight: 600; }
.vc-manage-tag { font-size: 11px; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 1px 8px; }
.vc-manage-desc { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.6; }
.vc-manage-btns { display: flex; gap: 8px; margin-top: 10px; }
.vc-manage-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bg-border);
  background: var(--bg-elevated, var(--bg-card));
  color: var(--text-primary);
  font-size: 13px;
}
.vc-manage-btn.danger { color: #e64340; border-color: rgba(230, 67, 64, 0.4); }

/* 克隆双入口卡片（上传 / 现场录音） */
.vc-entry-row { display: flex; gap: 10px; margin-top: 12px; }
.vc-entry-card {
  flex: 1;
  min-width: 0;
  padding: 18px 10px;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--bg-border);
  border-radius: var(--radius-md);
  transition: all 0.2s;
}
.vc-entry-card:active { opacity: 0.7; }
.vc-entry-card svg { width: 26px; height: 26px; color: var(--brand); }
.vc-entry-title { font-size: 14px; font-weight: 600; margin-top: 8px; }
.vc-entry-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 480px) { .vc-entry-row { flex-direction: column; } }

/* 现场录音态 */
.vc-record-box {
  background: var(--bg-card);
  border: 1px solid rgba(230, 67, 64, 0.35);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
  text-align: center;
}
.vc-rec-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.vc-rec-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #e64340;
  animation: vcRecPulse 1.2s ease-in-out infinite;
}
@keyframes vcRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.vc-rec-timer { font-size: 26px; font-weight: 700; color: #e64340; font-variant-numeric: tabular-nums; }
.vc-rec-tip { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.vc-rec-btns { display: flex; gap: 8px; margin-top: 12px; }
.vc-rec-done { flex: 2; }
.vc-rec-done:disabled { opacity: 0.6; pointer-events: none; }
.vc-rec-cancel {
  flex: 1;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bg-border);
  background: var(--bg-elevated, var(--bg-card));
  color: var(--text-primary);
  font-size: 13px;
}
.mem-text { font-size: 14px; color: var(--text-primary); line-height: 1.6; padding-right: 8px; word-break: break-word; }
.mem-del {
  font-size: 12px;
  color: #B4AEC8;
  padding: 4px 2px;
  margin-top: 4px;
  cursor: pointer;
}
.mem-del:active { color: #F53F3F; }

/* ===== 22. 通用弹窗：商品详情 / 客服 / 合作 ===== */
.gen-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(24, 20, 40, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.gen-modal {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 82dvh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  animation: sheetUp 0.28s ease;
}
@keyframes sheetUp {
  from { transform: translateY(60px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}
.gen-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(24, 20, 40, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
}
.gen-modal-close svg { width: 15px; height: 15px; }

/* 商品详情 */
.pd-thumb {
  height: 190px;
  background: linear-gradient(140deg, #C9BFF9 0%, #A898F5 55%, #8B7CF6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-emoji { font-size: 64px; }
.pd-body { padding: 16px 20px 22px; }
.pd-name { font-size: 18px; font-weight: 800; color: #2B2740; }
.pd-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.pd-price { font-size: 22px; font-weight: 800; color: var(--brand); }
.pd-sold { font-size: 12px; color: var(--text-muted); }
.pd-brief { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.pd-detail { margin-top: 14px; border-top: 1px solid #F0EDF9; padding-top: 12px; }
.pd-line { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }
.pd-dot { display: block; color: var(--text-primary); }
.pd-buy { width: 100%; border-radius: 999px; margin-top: 18px; }

/* 客服 / 合作 */
.gm-center { text-align: center; padding: 28px 24px 30px; }
.gm-title { font-size: 18px; font-weight: 800; color: #2B2740; }
.gm-qr-box {
  width: 210px; height: 210px;
  margin: 18px auto 12px;
  border-radius: 18px;
  border: 1.5px dashed rgba(124, 106, 242, 0.45);
  background: var(--bg-accent, #F1EDFB);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gm-qr-box img { width: 100%; height: 100%; object-fit: contain; }
.gm-qr-empty {
  font-size: 13px;
  color: #9A94B0;
  line-height: 1.9;
  padding: 0 16px;
}
.gm-qr-empty small { font-size: 11px; color: #B4AEC8; }
.gm-text { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* 宠物宝宝卡片（点横幅「点击查看 宠物宝宝」弹出，20260921r） */
.gm-pet-box {
  width: 210px; height: 210px;
  margin: 14px auto 12px;
  border-radius: 20px;
  background: linear-gradient(160deg, #F4F0FF, #E7DFFF);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gm-pet-box img { width: 188px; height: auto; display: block; animation: gmPetFloat 3.2s ease-in-out infinite; }
@keyframes gmPetFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}

/* ===== 19. 超级代理中心 ===== */
.ag-hero { padding: 28px 20px 8px; text-align: center; }
.ag-hero-emoji { font-size: 44px; }
.ag-hero-title { margin-top: 8px; font-size: 20px; font-weight: 700; color: var(--text-main); }
.ag-hero-sub { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.ag-form { margin: 20px 20px 0; background: #fff; border-radius: 16px; padding: 20px 16px; box-shadow: 0 4px 20px rgba(124,106,242,0.08); }
.ag-form input { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #E6E1F5; border-radius: 12px; font-size: 14px; background: #FAF9FE; color: var(--text-main); }
.ag-form input:focus { outline: none; border-color: var(--brand); background: #fff; }
.ag-login-btn { width: 100%; }
.ag-tip { margin-top: 12px; text-align: center; font-size: 12px; color: var(--text-muted); }
.ag-stat-card { margin: 16px 20px 0; background: linear-gradient(135deg, #7C6AF2 0%, #9B7BFF 100%); border-radius: 18px; padding: 18px 16px; color: #fff; box-shadow: 0 10px 28px rgba(124,106,242,0.28); }
.ag-stat-head { display: flex; justify-content: space-between; align-items: center; }
.ag-name { font-size: 16px; font-weight: 700; }
.ag-rate { font-size: 12px; background: rgba(255,255,255,0.22); padding: 3px 10px; border-radius: 999px; }
.ag-commission { margin: 14px 0 12px; }
.ag-c-num { font-size: 34px; font-weight: 800; letter-spacing: -1px; }
.ag-c-unit { margin-left: 8px; font-size: 12px; opacity: 0.85; }
.ag-stat-row { display: flex; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 12px; }
.ag-stat-row > div { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ag-stat-row b { font-size: 16px; }
.ag-stat-row span { font-size: 11px; opacity: 0.8; }
.ag-section { display: flex; justify-content: space-between; align-items: center; margin: 20px 20px 8px; font-size: 15px; font-weight: 700; color: var(--text-main); }
.ag-sec-act { font-size: 12px; font-weight: 500; color: var(--brand); }
.ag-invite-card { margin: 0 20px; background: #fff; border-radius: 16px; padding: 18px 16px; text-align: center; box-shadow: 0 4px 20px rgba(124,106,242,0.08); }
.ag-qr-box { width: 160px; height: 160px; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; background: #F1EDFB; }
.ag-qr-box img { width: 100%; height: 100%; object-fit: cover; }
.ag-link { font-size: 11px; color: var(--text-muted); background: #F7F5FD; border-radius: 8px; padding: 8px 10px; word-break: break-all; margin-bottom: 12px; }
.ag-copy-btn { width: 100%; }
.ag-invite-tip { margin-top: 12px; font-size: 11px; color: var(--text-muted); line-height: 1.6; text-align: left; }
.ag-member-list, .ag-order-list { margin: 0 20px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(124,106,242,0.08); }
.ag-member-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #F3F0FC; }
.ag-member-item:last-child, .ag-order-item:last-child { border-bottom: none; }
.ag-m-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7C6AF2, #9B7BFF); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ag-m-info { flex: 1; min-width: 0; }
.ag-m-name { font-size: 14px; font-weight: 600; color: var(--text-main); }
.ag-m-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ag-m-consume { font-size: 12px; color: var(--brand); font-weight: 600; }
.ag-order-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #F3F0FC; }
.ag-o-title { font-size: 13px; font-weight: 600; color: var(--text-main); }
.ag-o-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ag-o-amt { font-size: 14px; font-weight: 700; color: #22B07D; white-space: nowrap; }
.ag-empty { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--text-muted); }

/* ===== 记忆库编辑 ===== */
.mem-item-btns { display: flex; gap: 14px; margin-top: 4px; }
.mem-edit { font-size: 12px; color: var(--brand); padding: 4px 2px; cursor: pointer; }
.mem-edit:active { opacity: 0.6; }
.mem-edit-ta {
  width: 100%; box-sizing: border-box; margin-top: 8px;
  padding: 10px 12px; border: 1px solid rgba(124,106,242,0.4); border-radius: 10px;
  font-size: 14px; line-height: 1.6; color: var(--text-primary);
  background: #FAF9FE; resize: vertical; font-family: inherit;
}
.mem-edit-ta:focus { outline: none; border-color: var(--brand); background: #fff; }
.mem-edit-btns { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.mem-edit-save {
  font-size: 13px; color: #fff; background: var(--brand);
  border: none; border-radius: 999px; padding: 6px 18px; cursor: pointer;
}
.mem-edit-save:active { opacity: 0.85; }

/* ===== 云端高清数字人制作（记忆库页/角色编辑，pm-* 前缀） ===== */
.pm-make-card { animation: pmFadeIn 0.25s ease; }
@keyframes pmFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pm-make-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 6px; }
.pm-make-desc.pm-err { color: #e64340; }
.pm-make-desc.pm-warn { color: #d08a00; }
.pm-make-btns { display: flex; gap: 8px; margin-top: 10px; }
.pm-make-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--bg-border);
  background: var(--bg-elevated, var(--bg-card));
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
.pm-make-btn:active { opacity: 0.8; }
.pm-make-btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.pm-make-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vc-manage-tag.ok {
  color: #0aa870;
  border-color: #0aa870;
}
/* 角色列表卡片上的云端状态小标签 */
.lib-cloud-tag {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  vertical-align: 1px;
  margin-left: 4px;
  color: var(--brand);
  border: 1px solid var(--brand);
  opacity: 0.9;
}
.lib-cloud-tag.making { color: #d08a00; border-color: #d08a00; }
.lib-cloud-tag.ok { color: #0aa870; border-color: #0aa870; }

/* ============================================
   12c. 充值页（超级币充值档位 1:1 复刻）
   设计源：超级币充值档位文件/recharge-vip.html
   ============================================ */
#page-recharge {
  background: linear-gradient(180deg, #e3d9f8 0%, #f0eafb 22%, #f7f4fc 55%, #f7f4fc 100%);
}
#page-recharge .rc-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px 18px;
}
#page-recharge .rc-back {
  display: flex; align-items: center; gap: 4px; font-size: 16px;
  color: #1c1727; font-weight: 600; background: none; border: none;
  font-family: inherit; cursor: pointer; padding: 0;
}
#page-recharge .rc-title { font-size: 17px; font-weight: 800; color: #1c1727; }
#page-recharge .rc-nav-sp { width: 40px; }
#page-recharge .rc-scroll { padding-bottom: 110px; }

/* 余额卡片 */
#page-recharge .hero {
  margin: 4px 16px 0 16px;
  border-radius: 20px;
  padding: 30px 20px 34px 20px;
  text-align: center;
  position: relative; overflow: visible;
  background: linear-gradient(135deg, #6d4fe0 0%, #8b5cf6 55%, #a78bfa 100%);
  box-shadow: 0 12px 28px rgba(109, 79, 224, 0.35);
}
#page-recharge .hero-label { color: rgba(255,255,255,0.85); font-size: 14px; letter-spacing: 2px; }
#page-recharge .hero-amount {
  font-size: 58px; font-weight: 800; color: #ffffff;
  line-height: 1.15; letter-spacing: 1px;
  text-shadow: 0 3px 10px rgba(60, 30, 130, 0.3);
}
#page-recharge .hero-unit { color: #fff; font-size: 19px; font-weight: 800; margin-top: 2px; letter-spacing: 3px; }
#page-recharge .coins-deco { position: absolute; right: 6px; bottom: -8px; filter: drop-shadow(0 4px 8px rgba(40,15,90,.35)); }
#page-recharge .spark { position: absolute; fill: #fde68a; }

/* 区块标题 */
#page-recharge .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 24px 18px 12px 18px;
}
#page-recharge .section-head .t { font-size: 17px; font-weight: 800; color: #1c1727; }
#page-recharge .section-head .s { font-size: 12.5px; color: #a49eb8; }

/* 档位卡片列表 */
#page-recharge .tier-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
#page-recharge .tier-card {
  background: #fff;
  border: 1.5px solid #eee9f7;
  border-radius: 16px;
  padding: 17px 16px;
  display: flex; align-items: center;
  cursor: pointer; transition: all 0.15s;
  position: relative;
}
#page-recharge .tier-card.selected { border-color: #8b5cf6; background: #f6f1ff; box-shadow: 0 6px 16px rgba(139,92,246,.18); }
#page-recharge .tier-icon { flex-shrink: 0; margin-right: 12px; }
#page-recharge .tier-info { flex: 1; min-width: 0; }
#page-recharge .tier-name-row { display: flex; align-items: center; gap: 6px; }
#page-recharge .tier-name { font-size: 16.5px; font-weight: 800; color: #1c1727; }
#page-recharge .tier-tag {
  font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, #f43f5e, #fb7185);
  padding: 2.5px 8px; border-radius: 999px; white-space: nowrap;
}
#page-recharge .tier-sub { font-size: 12.5px; color: #a49eb8; margin-top: 6px; }
#page-recharge .tier-right { text-align: right; flex-shrink: 0; margin-left: 10px; }
#page-recharge .tier-price { font-size: 21px; font-weight: 800; color: #7c3aed; }
#page-recharge .tier-price .yen { font-size: 14px; }
#page-recharge .tier-orig { font-size: 12.5px; color: #c4b8d8; text-decoration: line-through; font-weight: 600; margin-bottom: 2px; }
#page-recharge .tier-cycle { font-size: 12px; color: #a49eb8; margin-top: 3px; }
#page-recharge .tier-crown { position: absolute; top: -10px; right: 12px; filter: drop-shadow(0 2px 4px rgba(180,83,9,.4)); }

/* 底部支付栏 */
#page-recharge .rc-paybar {
  position: sticky; bottom: 0;
  padding: 12px 16px 20px 16px;
  background: linear-gradient(180deg, rgba(247,244,252,0) 0%, #f7f4fc 30%);
  z-index: 10;
}
#page-recharge .pay-btn {
  width: 100%; border: none; cursor: pointer;
  border-radius: 999px; padding: 15px;
  font-size: 17px; font-weight: 800; color: #fff; font-family: inherit;
  background: linear-gradient(90deg, #7c5cf0, #6d28d9);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.4);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ============================================
   12d. 邀请好友拿分成页（invite-friends 1:1 复刻）
   设计源：Desktop/invite-friends.html
   ============================================ */
#page-agent { background: #f4f0fb; }
#page-agent .iv-scroll { padding-bottom: 24px; }

/* 顶部导航 */
#page-agent .iv-nav {
  height: 48px; display: flex; align-items: center; padding: 0 14px;
  position: sticky; top: 0; z-index: 10; background: rgba(244,240,251,.92);
  backdrop-filter: blur(10px);
}
#page-agent .iv-back {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(120,90,180,.16); padding: 0; flex-shrink: 0;
}
#page-agent .iv-title { flex: 1; text-align: center; font-size: 17px; font-weight: 800; color: #1c1727; margin-right: 32px; }

/* 主视觉卡片 */
#page-agent .iv-hero {
  margin: 6px 14px 0 14px;
  border-radius: 22px;
  padding: 26px 22px 28px 22px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,221,138,.28) 0%, transparent 55%),
    linear-gradient(135deg, #5b3dd6 0%, #7c3aed 50%, #9d6bf5 100%);
  box-shadow: 0 14px 30px rgba(91,61,214,.38);
  color: #fff;
}
#page-agent .iv-kicker { font-size: 12.5px; letter-spacing: 3px; color: rgba(255,255,255,.82); }
#page-agent .iv-h1 { font-size: 26px; font-weight: 800; margin: 6px 0 0; letter-spacing: .5px; line-height: 1.25; }
#page-agent .iv-h1 .hl { color: #fde68a; }
#page-agent .iv-sub { font-size: 13px; color: rgba(255,255,255,.88); margin-top: 8px; line-height: 1.5; }
#page-agent .iv-stat-row { display: flex; gap: 10px; margin-top: 18px; align-items: stretch; }
#page-agent .iv-stat {
  flex: 1; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px; padding: 11px 4px 10px; text-align: center; backdrop-filter: blur(4px);
  display: flex; flex-direction: column; justify-content: center;
}
#page-agent .iv-num { font-size: 17.5px; font-weight: 800; color: #fde68a; letter-spacing: .3px; white-space: nowrap; line-height: 1.3; }
#page-agent .iv-num .u { font-size: 12px; font-weight: 700; margin: 0 1px; }
#page-agent .iv-lbl { font-size: 11.5px; color: rgba(255,255,255,.82); margin-top: 3px; letter-spacing: .5px; white-space: nowrap; }
#page-agent .iv-coin-art { position: absolute; right: -14px; top: -10px; filter: drop-shadow(0 6px 14px rgba(40,15,90,.45)); }
#page-agent .iv-crown-art { position: absolute; left: 14px; bottom: -6px; opacity: .92; filter: drop-shadow(0 4px 8px rgba(40,15,90,.4)); }

/* 区块标题 */
#page-agent .iv-sec { margin: 22px 16px 0 16px; display: flex; align-items: baseline; justify-content: space-between; }
#page-agent .iv-t { font-size: 16.5px; font-weight: 800; color: #1c1727; display: flex; align-items: center; gap: 7px; }
#page-agent .iv-dot { width: 5px; height: 16px; border-radius: 3px; background: linear-gradient(180deg,#a855f7,#7c3aed); }
#page-agent .iv-more { font-size: 12.5px; color: #a49eb8; }

/* 分成阶梯卡 */
#page-agent .iv-ladder { margin: 12px 16px 0 16px; display: flex; flex-direction: column; gap: 10px; }
#page-agent .iv-lc {
  background: #fff; border-radius: 16px; padding: 14px 14px; display: flex; align-items: center;
  box-shadow: 0 4px 14px rgba(120,90,180,.08); position: relative; overflow: hidden;
}
#page-agent .iv-lc-on { border: 2px solid #7c3aed; box-shadow: 0 6px 18px rgba(124,58,237,.18); }
#page-agent .iv-l-icon { width: 46px; height: 46px; flex-shrink: 0; margin-right: 12px; }
#page-agent .iv-l-info { flex: 1; }
#page-agent .iv-l-name { font-size: 15.5px; font-weight: 800; color: #1c1727; display: flex; align-items: center; gap: 6px; }
#page-agent .iv-l-sub { font-size: 12.5px; color: #a49eb8; margin-top: 3px; }
#page-agent .iv-l-right { text-align: right; flex-shrink: 0; margin-left: 10px; }
#page-agent .iv-pct { font-size: 22px; font-weight: 800; color: #7c3aed; letter-spacing: .5px; }
#page-agent .iv-pct .pct-y { font-size: 14px; }
#page-agent .iv-l-note { font-size: 11px; color: #c4b8d8; margin-top: 2px; }
#page-agent .iv-l-tag {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(90deg,#f43f5e,#fb7185); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 10px 3px 12px;
  border-radius: 0 16px 0 12px; letter-spacing: .5px;
}

/* 邀请链接卡 */
#page-agent .iv-linkcard {
  margin: 14px 16px 0 16px; background: #fff; border-radius: 16px;
  padding: 14px; box-shadow: 0 4px 14px rgba(120,90,180,.10);
}
#page-agent .iv-linkrow { display: flex; align-items: center; gap: 10px; }
#page-agent .iv-linkbox {
  flex: 1; height: 42px; border-radius: 11px;
  background: linear-gradient(90deg,#f5f0ff,#ede4ff);
  border: 1.5px dashed #c4b5fd; display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; color: #6d58a0; font-weight: 600; letter-spacing: .5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#page-agent .iv-copybtn {
  height: 42px; padding: 0 18px; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 5px 14px rgba(124,58,237,.32); display: flex; align-items: center; gap: 5px;
}
#page-agent .iv-sharerow { display: flex; gap: 10px; margin-top: 13px; }
#page-agent .iv-sharebtn {
  flex: 1; height: 46px; border-radius: 13px; background: #f5f0ff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid #ece4fb;
}
#page-agent .iv-sharebtn .ic { width: 22px; height: 22px; }
#page-agent .iv-sharebtn .tx { font-size: 11px; color: #6d58a0; font-weight: 600; }

/* 规则说明 */
#page-agent .iv-rules {
  margin: 14px 16px 0 16px; background: #fff; border-radius: 16px;
  padding: 16px 16px 8px 16px; box-shadow: 0 4px 14px rgba(120,90,180,.08);
}
#page-agent .iv-rules h3 { font-size: 14.5px; font-weight: 800; color: #1c1727; margin: 0 0 9px; }
#page-agent .iv-rule-item { display: flex; gap: 10px; margin-bottom: 11px; }
#page-agent .iv-rule-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
#page-agent .iv-rule-txt { font-size: 12.5px; color: #5a5566; line-height: 1.6; }
#page-agent .iv-rule-txt b { color: #7c3aed; }

/* 邀请榜单 */
#page-agent .iv-rank { margin: 14px 16px 0 16px; background: #fff; border-radius: 16px; padding: 14px 14px 6px 14px; box-shadow: 0 4px 14px rgba(120,90,180,.08); }
#page-agent .iv-rank-item { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid #f1ecf9; }
#page-agent .iv-rank-item:last-child { border-bottom: none; }
#page-agent .iv-rank-no { width: 24px; text-align: center; font-size: 13px; font-weight: 800; color: #c4b8d8; flex-shrink: 0; }
#page-agent .iv-rank-item.top1 .iv-rank-no { color: #f59e0b; }
#page-agent .iv-rank-item.top2 .iv-rank-no { color: #a78bfa; }
#page-agent .iv-rank-item.top3 .iv-rank-no { color: #fbbf24; }
#page-agent .iv-rank-av { width: 32px; height: 32px; border-radius: 50%; margin: 0 10px; flex-shrink: 0; }
#page-agent .iv-rank-name { flex: 1; font-size: 13.5px; font-weight: 700; color: #1c1727; }
#page-agent .iv-rank-name .tk { font-size: 11px; color: #a49eb8; font-weight: 500; margin-top: 2px; }
#page-agent .iv-rank-amt { font-size: 13.5px; font-weight: 800; color: #f59e0b; }
#page-agent .iv-rank-amt .y { font-size: 11px; }

/* 底部固定栏 */
#page-agent .iv-foot {
  position: sticky; bottom: 0; z-index: 20;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(244,240,251,.96); backdrop-filter: blur(10px);
  border-top: 1px solid #ece4fb;
}
#page-agent .iv-cta {
  width: 100%; height: 50px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit;
  background: linear-gradient(90deg,#7c3aed 0%,#9d6bf5 50%,#c084fc 100%);
  color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 8px 22px rgba(124,58,237,.42);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
#page-agent .iv-cta .star { width: 18px; height: 18px; }

/* ============================================
   12e. 更多功能五页 1:1（消息中心/新手教程/充值记录/音色管理/意见反馈）
   设计源：messages / tutorial / recharge-records / voice-manage / feedback .html
   ============================================ */
#page-messages, #page-tutorial, #page-records, #page-voice, #page-feedback { background: #f4f0fb; }

/* —— 通用：导航 / 区块标题 / 底部栏（各页同款） —— */
#page-messages .ms-nav, #page-tutorial .tu-nav, #page-records .rd-nav, #page-voice .vc-nav, #page-feedback .fb-nav {
  height: 48px; display: flex; align-items: center; padding: 0 14px;
  position: sticky; top: 0; z-index: 10; background: rgba(244,240,251,.92);
  backdrop-filter: blur(10px);
}
#page-messages .ms-back, #page-tutorial .tu-back, #page-records .rd-back, #page-voice .vc-back, #page-feedback .fb-back {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(120,90,180,.16); flex-shrink: 0;
}
#page-messages .ms-title, #page-tutorial .tu-title, #page-records .rd-title, #page-voice .vc-title, #page-feedback .fb-title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 800; color: #1c1727; margin-right: 32px;
}
#page-messages .ms-read, #page-feedback .fb-hist { font-size: 13px; color: #7c3aed; font-weight: 700; cursor: pointer; }
#page-messages .ms-read, #page-feedback .fb-hist { margin-right: 0; }
#page-feedback .fb-title { margin-right: 0; }
#page-tutorial .tu-sect, #page-records .rd-tabs, #page-voice .vc-sect, #page-feedback .fb-sect {
  font-size: 14px; font-weight: 800; color: #1c1727;
}
#page-tutorial .tu-sect, #page-voice .vc-sect {
  padding: 22px 18px 10px; display: flex; align-items: center; justify-content: space-between;
}
#page-tutorial .tu-sect .l, #page-voice .vc-sect .l { display: flex; align-items: center; gap: 7px; }
#page-tutorial .tu-sect .dot, #page-voice .vc-sect .dot, #page-feedback .fb-sect .dot {
  width: 5px; height: 15px; border-radius: 3px; background: linear-gradient(180deg,#a855f7,#7c3aed);
}
#page-tutorial .tu-sect .more, #page-voice .vc-sect .more { font-size: 12.5px; color: #a49eb8; cursor: pointer; }
#page-tutorial .tu-foot, #page-voice .vc-foot, #page-feedback .fb-foot {
  position: sticky; bottom: 0; z-index: 20;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(244,240,251,.96); backdrop-filter: blur(10px);
  border-top: 1px solid #ece4fb;
}
#page-tutorial .tu-foot .cta, #page-feedback .fb-foot .cta {
  width: 100%; height: 50px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit;
  background: linear-gradient(90deg,#7c3aed 0%,#9d6bf5 50%,#c084fc 100%);
  color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 8px 22px rgba(124,58,237,.42);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* —— 消息中心 —— */
#page-messages .ms-scroll { padding-bottom: 30px; }
#page-messages .ms-tabs { display: flex; gap: 8px; padding: 8px 16px 6px; overflow-x: auto; }
#page-messages .ms-tabs .tab {
  padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; color: #6d58a0;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(120,90,180,.08); position: relative; cursor: pointer;
}
#page-messages .ms-tabs .tab.on { background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; box-shadow: 0 5px 14px rgba(124,58,237,.32); }
#page-messages .ms-tabs .badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #f43f5e; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid #f4f0fb;
}
#page-messages .ms-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
#page-messages .msg {
  background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 4px 14px rgba(120,90,180,.08);
  display: flex; gap: 12px; position: relative;
}
#page-messages .msg.unread { border-left: 3px solid #7c3aed; }
#page-messages .ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#page-messages .ic.sys { background: linear-gradient(135deg,#ede4ff,#c4b5fd); }
#page-messages .ic.act { background: linear-gradient(135deg,#fef3c7,#fbbf24); }
#page-messages .ic.inv { background: linear-gradient(135deg,#ffedd5,#fdba74); }
#page-messages .ic.pay { background: linear-gradient(135deg,#dcfce7,#86efac); }
#page-messages .bd { flex: 1; min-width: 0; }
#page-messages .hd { display: flex; align-items: center; justify-content: space-between; }
#page-messages .tt { font-size: 14.5px; font-weight: 800; color: #1c1727; }
#page-messages .tm { font-size: 11px; color: #a49eb8; flex-shrink: 0; margin-left: 8px; }
#page-messages .ct {
  font-size: 12.5px; color: #6d58a0; margin-top: 5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#page-messages .dot-r { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; }
#page-messages .act-bar { margin-top: 8px; display: flex; gap: 8px; }
#page-messages .act-btn { padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
#page-messages .act-btn.pri { background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; }
#page-messages .act-btn.sec { background: #f5f0ff; color: #7c3aed; }

/* —— 新手教程 —— */
#page-tutorial .tu-scroll { padding-bottom: 24px; }
#page-tutorial .tu-banner {
  margin: 6px 14px 0; border-radius: 20px; padding: 24px 20px; position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,221,138,.28) 0%, transparent 55%),
              linear-gradient(135deg,#5b3dd6 0%,#7c3aed 50%,#9d6bf5 100%);
  box-shadow: 0 14px 30px rgba(91,61,214,.38); color: #fff;
}
#page-tutorial .tu-banner .kicker { font-size: 12px; letter-spacing: 3px; color: rgba(255,255,255,.82); }
#page-tutorial .tu-banner h1 { font-size: 24px; font-weight: 800; margin: 6px 0 0; }
#page-tutorial .tu-banner .sub { font-size: 12.5px; color: rgba(255,255,255,.88); margin-top: 8px; }
#page-tutorial .prog { margin-top: 16px; background: rgba(255,255,255,.2); height: 8px; border-radius: 999px; overflow: hidden; }
#page-tutorial .prog .bar { width: 100%; height: 100%; background: linear-gradient(90deg,#fde68a,#f59e0b); border-radius: 999px; }
#page-tutorial .prog-tx { font-size: 12px; color: rgba(255,255,255,.9); margin-top: 8px; }
#page-tutorial .prog-tx b { color: #fde68a; }
#page-tutorial .tu-banner .deco { position: absolute; right: -10px; top: -8px; filter: drop-shadow(0 6px 14px rgba(40,15,90,.4)); }
#page-tutorial .tu-steps { padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }
#page-tutorial .stp {
  background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 4px 14px rgba(120,90,180,.10);
  display: flex; gap: 14px; position: relative;
}
#page-tutorial .stp .no {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#ede4ff,#c4b5fd); color: #7c3aed; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(124,58,237,.2);
}
#page-tutorial .stp.done .no { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; }
#page-tutorial .stp .info { flex: 1; }
#page-tutorial .stp .tt { font-size: 15px; font-weight: 800; color: #1c1727; display: flex; align-items: center; gap: 8px; }
#page-tutorial .stp .ck { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #16a34a; }
#page-tutorial .stp .desc { font-size: 12.5px; color: #6d58a0; margin-top: 6px; line-height: 1.6; }
#page-tutorial .stp .ic-r { width: 54px; height: 54px; flex-shrink: 0; align-self: center; }
#page-tutorial .tu-vidlist { padding: 0 14px; display: flex; flex-direction: column; gap: 14px; }
#page-tutorial .vid { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(120,90,180,.10); }
#page-tutorial .vid-thumb { position: relative; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
#page-tutorial .vid-thumb .bg { position: absolute; inset: 0; }
#page-tutorial .vid-play {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); position: relative; z-index: 2;
}
#page-tutorial .vid-dur {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: flex; align-items: center; gap: 4px;
}
#page-tutorial .vid-body { padding: 13px 14px 15px; }
#page-tutorial .vid-tt { font-size: 15px; font-weight: 800; color: #1c1727; display: flex; align-items: center; gap: 7px; }
#page-tutorial .vid-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
#page-tutorial .vid-desc { font-size: 12.5px; color: #6d58a0; margin-top: 6px; line-height: 1.6; }
#page-tutorial .vid-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
#page-tutorial .vid-stats { font-size: 11.5px; color: #a49eb8; display: flex; gap: 14px; }
#page-tutorial .vid-go { font-size: 12.5px; font-weight: 700; color: #7c3aed; display: flex; align-items: center; gap: 3px; }

/* —— 充值记录 —— */
#page-records .rd-scroll { padding-bottom: 30px; }
#page-records .rd-hero {
  margin: 6px 14px 0; border-radius: 20px; padding: 22px 20px; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,221,138,.28) 0%, transparent 55%),
              linear-gradient(135deg,#5b3dd6 0%,#7c3aed 50%,#9d6bf5 100%);
  box-shadow: 0 14px 30px rgba(91,61,214,.38);
}
#page-records .rd-hero .kicker { font-size: 12px; letter-spacing: 3px; color: rgba(255,255,255,.82); }
#page-records .rd-hero .amt { font-size: 32px; font-weight: 800; margin-top: 6px; }
#page-records .rd-hero .amt .u { font-size: 16px; }
#page-records .rd-hero .row { display: flex; gap: 14px; margin-top: 14px; }
#page-records .rd-hero .s { flex: 1; }
#page-records .rd-hero .s .n { font-size: 15px; font-weight: 800; color: #fde68a; }
#page-records .rd-hero .s .l { font-size: 11px; color: rgba(255,255,255,.82); margin-top: 2px; }
#page-records .rd-hero .coin { position: absolute; right: -8px; top: -10px; filter: drop-shadow(0 6px 14px rgba(40,15,90,.45)); }
#page-records .rd-tabs { display: flex; gap: 8px; padding: 18px 16px 8px; overflow-x: auto; }
#page-records .rd-tabs .tab {
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; color: #6d58a0;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(120,90,180,.08); cursor: pointer;
}
#page-records .rd-tabs .tab.on { background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; box-shadow: 0 5px 14px rgba(124,58,237,.32); }
#page-records .rd-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
#page-records .it { background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 4px 14px rgba(120,90,180,.08); }
#page-records .it .top { display: flex; align-items: center; justify-content: space-between; }
#page-records .it .nm { font-size: 14.5px; font-weight: 800; color: #1c1727; display: flex; align-items: center; gap: 8px; }
#page-records .it .st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
#page-records .st.done { background: #dcfce7; color: #16a34a; }
#page-records .st.pending { background: #fef3c7; color: #d97706; }
#page-records .st.refund { background: #fee2e2; color: #ef4444; }
#page-records .it .mid { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
#page-records .it .coin-n { font-size: 18px; font-weight: 800; color: #7c3aed; }
#page-records .it .coin-n .u { font-size: 12px; color: #a49eb8; font-weight: 600; }
#page-records .it .price { font-size: 16px; font-weight: 800; color: #f59e0b; }
#page-records .it .meta { font-size: 11.5px; color: #a49eb8; margin-top: 8px; display: flex; justify-content: space-between; }
#page-records .empty { text-align: center; color: #a49eb8; font-size: 13px; padding: 40px 0; }

/* —— 音色管理 —— */
#page-voice .vc-scroll { padding-bottom: 24px; }
#page-voice .vc-hero {
  margin: 6px 14px 0; border-radius: 20px; padding: 22px 20px; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,221,138,.28) 0%, transparent 55%),
              linear-gradient(135deg,#5b3dd6 0%,#7c3aed 50%,#9d6bf5 100%);
  box-shadow: 0 14px 30px rgba(91,61,214,.38);
}
#page-voice .vc-hero .kicker { font-size: 12px; letter-spacing: 3px; color: rgba(255,255,255,.82); }
#page-voice .vc-hero h1 { font-size: 22px; font-weight: 800; margin: 6px 0 0; }
#page-voice .vc-hero .sub { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 8px; line-height: 1.5; }
#page-voice .vc-hero .deco { position: absolute; right: -6px; bottom: -8px; opacity: .85; filter: drop-shadow(0 6px 14px rgba(40,15,90,.4)); }
#page-voice .vc-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
#page-voice .vcard {
  background: #fff; border-radius: 16px; padding: 13px 14px; box-shadow: 0 4px 14px rgba(120,90,180,.10);
  display: flex; align-items: center; gap: 12px; position: relative;
}
#page-voice .vcard.default { border: 2px solid #7c3aed; box-shadow: 0 6px 18px rgba(124,58,237,.18); }
#page-voice .play {
  width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#a855f7,#7c3aed); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(124,58,237,.32); cursor: pointer;
}
#page-voice .vcard .info { flex: 1; }
#page-voice .vcard .nm { font-size: 15px; font-weight: 800; color: #1c1727; display: flex; align-items: center; gap: 7px; }
#page-voice .tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg,#f43f5e,#fb7185); color: #fff; }
#page-voice .tag.def { background: linear-gradient(90deg,#7c3aed,#a855f7); }
#page-voice .vcard .meta { font-size: 11.5px; color: #a49eb8; margin-top: 4px; }
#page-voice .vcard .dur { font-size: 11.5px; color: #6d58a0; font-weight: 600; margin-top: 3px; }
#page-voice .wave { flex: 0 0 60px; height: 30px; display: flex; align-items: center; gap: 2px; }
#page-voice .wave .b { width: 3px; background: #c4b5fd; border-radius: 2px; }
#page-voice .vc-foot { display: flex; gap: 10px; }
#page-voice .btn2 {
  flex: 1; height: 50px; border: none; border-radius: 14px; font-size: 15px; font-weight: 800; letter-spacing: 1px;
  font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
#page-voice .btn2.ghost { background: #fff; color: #7c3aed; border: 2px solid #7c3aed; }
#page-voice .btn2.fill { background: linear-gradient(90deg,#7c3aed 0%,#9d6bf5 50%,#c084fc 100%); color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,.42); }

/* —— 意见反馈 —— */
#page-feedback .fb-scroll { padding-bottom: 24px; }
#page-feedback .fb-nav .fb-title { margin-right: 0; }
#page-feedback .fb-sect { padding: 22px 18px 10px; display: flex; align-items: center; gap: 7px; }
#page-feedback .fb-types { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px; }
#page-feedback .tp {
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; color: #6d58a0;
  box-shadow: 0 2px 8px rgba(120,90,180,.08); display: flex; align-items: center; gap: 6px;
  border: 2px solid transparent; cursor: pointer;
}
#page-feedback .tp.on { background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; border-color: #7c3aed; box-shadow: 0 5px 14px rgba(124,58,237,.32); }
#page-feedback .tp svg { width: 15px; height: 15px; }
#page-feedback .fb-card {
  margin: 16px 14px 0; background: #fff; border-radius: 16px; padding: 16px;
  box-shadow: 0 4px 14px rgba(120,90,180,.10);
}
#page-feedback .ta {
  width: 100%; min-height: 130px; border: none; outline: none; resize: none; font-family: inherit;
  font-size: 14px; color: #1c1727; line-height: 1.6; background: transparent;
}
#page-feedback .ta::placeholder { color: #c4b8d8; }
#page-feedback .count { text-align: right; font-size: 11.5px; color: #c4b8d8; margin-top: 6px; }
#page-feedback .upload { margin-top: 14px; display: flex; gap: 10px; }
#page-feedback .up-box {
  width: 74px; height: 74px; border-radius: 12px; background: #f5f0ff; border: 1.8px dashed #c4b5fd;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #a49eb8; cursor: pointer;
}
#page-feedback .up-box .plus { font-size: 24px; font-weight: 300; line-height: 1; }
#page-feedback .up-box .tx { font-size: 10px; }
#page-feedback .up-img {
  width: 74px; height: 74px; border-radius: 12px; background: linear-gradient(135deg,#ede4ff,#c4b5fd);
  position: relative; overflow: hidden;
}
#page-feedback .up-img .del {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#page-feedback .fb-field {
  margin: 16px 14px 0; background: #fff; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(120,90,180,.08); display: flex; align-items: center; gap: 10px;
}
#page-feedback .fb-field .lbl { font-size: 14px; font-weight: 700; color: #1c1727; flex-shrink: 0; }
#page-feedback .fb-field input {
  flex: 1; border: none; outline: none; font-family: inherit; font-size: 14px; color: #1c1727; background: transparent;
}
#page-feedback .fb-field input::placeholder { color: #c4b8d8; }

/* ============================================
   12f. 商城页 —— 票务App UI 1:1（tk- 前缀，作用域 #page-shop）
   ============================================ */
#page-shop { background: #fff; }
#page-shop .tk-header {
  /* 20260924d 颜色保持原版浅紫不动；高度再 +10%：187.4px → 206.1px（用户 20260924 上午二次要求调高） */
  /* 20260924e 搜索框下移钉底：flex column + margin-top:auto，底距 12px（用户红框位置） */
  /* 20260925g 整页滚动：header 不再固定，随内容一起滚走 */
  background: linear-gradient(180deg,#d9c4ff 0%,#c9a8ff 55%,#bd97ff 100%);
  min-height: 206.1px; box-sizing: border-box;
  position: relative; padding: 12px 20px 12px; flex-shrink: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* 20260925g 商城整页滚动：紫色 header 随内容滚走，不再固定 */
#page-shop { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#page-shop::-webkit-scrollbar { width: 0; }
#page-shop .page-content.tk-body { overflow: visible; flex: none; }
#page-shop .tk-header::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.35), transparent 34%),
    radial-gradient(circle at 12% 80%, rgba(255,255,255,.22), transparent 30%);
  pointer-events: none;
}
#page-shop .tk-head-info { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; position: relative; min-height: 98px; }
#page-shop .tk-mascot {
  position: absolute; right: -8px; top: -58px; width: 290px; height: auto;
  object-fit: contain; z-index: 1; clip-path: inset(0 0 24px 0);
}
/* 20260924l 用户指定 290×245：画布加高后模型竖向居中，top -58 保证视觉底仍悬在搜索框上方、头顶不裁 */
#page-shop model-viewer.tk-mascot {
  display: block; width: 290px; height: 245px; background: transparent; clip-path: none;
  --poster-color: transparent;
}
/* AI修复 3D 图标：52×52 圆角槽位内自转 */
#page-shop .tk-ico model-viewer {
  display: block; width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
  background: transparent; --poster-color: transparent;
}
/* 20260924f 💤 从熊脸发出往左上角飘：起点锚在脸颊（x≈240,y≈16），放大淡出，2.8s 循环 */
#page-shop .tk-zzz { position: absolute; right: 160px; top: 10px; font-size: 22px; z-index: 1; animation: tkZzz 2.8s ease-out infinite; }
@keyframes tkZzz {
  0%   { transform: translate(0, 0) scale(.45) rotate(-10deg); opacity: 0; }
  16%  { opacity: .95; }
  55%  { transform: translate(-32px, -28px) scale(1) rotate(2deg); opacity: .8; }
  100% { transform: translate(-62px, -56px) scale(1.25) rotate(12deg); opacity: 0; }
}
#page-shop .tk-search { margin: auto 0 0; display: flex; align-items: stretch; position: relative; z-index: 3; }
#page-shop .tk-field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px 0 0 999px; padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(110,60,200,.18);
}
#page-shop .tk-mag { width: 16px; height: 16px; border: 2px solid #8a8a8a; border-radius: 50%; position: relative; flex-shrink: 0; }
#page-shop .tk-mag::after { content: ""; position: absolute; width: 7px; height: 2px; background: #8a8a8a; bottom: -2px; right: -4px; transform: rotate(45deg); }
#page-shop .tk-placeholder { flex: 1; color: #9a9a9a; font-size: 14px; }
#page-shop .tk-btn {
  background: #161616; color: #fff; font-size: 14px; font-weight: 600;
  border-radius: 0 999px 999px 0; padding: 8px 22px; flex-shrink: 0;
  display: flex; align-items: center; cursor: pointer;
}
#page-shop .page-content.tk-body {
  background: #fff; border-radius: 26px 26px 0 0; margin-top: 0;
  position: relative; z-index: 2; padding: 18px 16px 90px;
}
#page-shop .tk-cats { display: flex; justify-content: space-between; }
#page-shop .tk-cat { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 64px; position: relative; cursor: pointer; }
#page-shop .tk-ico {
  width: 52px; height: 52px; border-radius: 16px; background: #fff;
  box-shadow: 0 4px 10px rgba(140,80,230,.18);
}
#page-shop .tk-name { font-size: 12.5px; color: #2b2b2b; font-weight: 500; }
#page-shop .tk-badge {
  position: absolute; top: -6px; right: 2px; z-index: 2;
  font-size: 9px; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 8px 8px 8px 2px;
}
#page-shop .tk-badge.hot { background: linear-gradient(120deg,#ff5b5b,#ff2e92); }
#page-shop .tk-badge.art { background: linear-gradient(120deg,#8a4bff,#b06cff); }
/* 20260924m 用户要求删掉轮播点：visibility 隐藏（占位不变，页面间距完全不动） */
#page-shop .tk-dots { display: flex; justify-content: center; gap: 4px; margin: 12px 0 16px; visibility: hidden; }
#page-shop .tk-dots i { width: 5px; height: 5px; border-radius: 99px; background: #dcd2ee; }
#page-shop .tk-dots i.on { width: 14px; background: #7b42ff; }
#page-shop .tk-promo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; }
#page-shop .tk-promo-left {
  border-radius: 16px; padding: 14px 12px; position: relative; overflow: hidden; min-height: 132px;
  background: linear-gradient(150deg,#e7d6ff 0%,#c9a2ff 60%,#b78aff 100%);
}
#page-shop .tk-promo-right { display: flex; flex-direction: column; gap: 10px; }
#page-shop .tk-promo-green {
  border-radius: 16px; padding: 14px 12px; position: relative; overflow: hidden; flex: 1;
  background: linear-gradient(140deg,#d8f7c2 0%,#aef08e 55%,#8fe96a 100%);
}
#page-shop .tk-go {
  position: absolute; bottom: 14px; right: 10px; background: #161616; color: #fff;
  font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px;
  display: flex; align-items: center; gap: 3px; box-shadow: 0 4px 8px rgba(0,0,0,.3); cursor: pointer;
}
#page-shop .tk-go::after { content: "›"; font-size: 13px; }
#page-shop .tk-promo-green .tk-go { bottom: 10px; }
#page-shop .tk-promo-strip {
  background: #f2ecfb; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 10.5px; color: #6b5a8f; padding: 8px 4px; font-weight: 500;
}
#page-shop .tk-sec-head { display: flex; justify-content: space-between; align-items: center; margin: 20px 2px 12px; }
#page-shop .tk-sec-head h2 { font-size: 20px; font-weight: 900; color: #161616; }
#page-shop .tk-sec-head .tk-more { font-size: 12px; color: #8b8b8b; }
#page-shop .tk-events { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#page-shop .tk-event { cursor: pointer; }
#page-shop .tk-cover {
  height: 173px; border-radius: 12px; position: relative; overflow: hidden;   /* 20260924t 173×173 */
  display: flex; align-items: flex-end; padding: 10px;
}
#page-shop .tk-c1 { background: radial-gradient(circle at 30% 40%, rgba(160,90,255,.55), transparent 55%), linear-gradient(160deg,#2a1240 0%,#120a20 70%); }
#page-shop .tk-big { font-size: 30px; font-weight: 900; color: rgba(255,255,255,.85); letter-spacing: 2px; font-style: italic; }
#page-shop .tk-c2 { background: radial-gradient(circle at 70% 30%, rgba(255,180,80,.5), transparent 50%), linear-gradient(160deg,#e03a1f 0%,#8f1410 75%); }
#page-shop .tk-live { font-size: 13px; font-weight: 900; color: #ffe9c9; line-height: 1.25; font-style: italic; text-transform: uppercase; }
#page-shop .tk-t {
  font-size: 13.5px; font-weight: 700; color: #1c1c1c; margin-top: 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
#page-shop .tk-interest { font-size: 11px; color: #a0a0a0; margin-top: 3px; }
#page-shop .tk-price { margin-top: 5px; color: #e0332a; font-weight: 900; font-size: 19px; }
#page-shop .tk-price small { font-size: 11px; font-weight: 500; color: #e0332a; }

/* ============================================
   12g. 后台可配置项（商城/教程/消息/代理）
   数据源：admin.html → js/site-data.js（siteData）
   原则：字段为空时前台保持设计稿原样，这里只补「配置生效后」需要的样式
   ============================================ */

/* —— 商城：搜索框（.tk-placeholder 由 span 改为真实 input，沿用设计稿外观） —— */
#page-shop .tk-field input.tk-placeholder {
  flex: 1; min-width: 0; width: 100%;
  border: none; outline: none; background: transparent;
  padding: 0; margin: 0; font-family: inherit;
  font-size: 14px; line-height: 1.2;
  color: #1b1b1b;                 /* 输入时为深色文字 */
  -webkit-appearance: none; appearance: none;
}
#page-shop .tk-field input.tk-placeholder::placeholder { color: #9a9a9a; opacity: 1; }

/* —— 商城：搜索无结果空态（横跨整行，不破坏 2×2 网格） —— */
#page-shop .tk-events .tk-empty {
  grid-column: 1 / -1; text-align: center;
  color: #a0a0a0; font-size: 13px; padding: 28px 0;
}

/* —— 商城：运营卡叠加背景图后，GO 胶囊仍在图片之上 —— */
#page-shop .tk-promo-left .tk-go,
#page-shop .tk-promo-green .tk-go { z-index: 2; }

/* —— 新手教程：后台配置的视频封面图 —— */
#page-tutorial .vid-thumb img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* 主页横幅吉祥物 - 趴着睡觉 + Zzz 呼噜（绝对定位，不影响横幅尺寸）
   宠物尺寸按用户 20260921q 指定：210×185px（宽≈用户红框宽 205）→ 底边贴横幅底、右边缘留 2px
   注：Zzz 的 top 已整体 +23px 补偿盒子长高（195.2-185=10.2 顶边）带来的上移，避免被横幅上沿裁掉
   呼噜方向按用户红线：往「左上角」斜上方飘 */
.lib-hero-pet {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 210px;
  height: 185px;
  pointer-events: none;
  z-index: 1;
}
.lib-hero-mascot {
  display: block;
  width: 100%;
  height: 100%;
  animation: libPetSleep 3.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

@keyframes libPetSleep {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  50% { transform: scale(1.035) translateY(-3px) rotate(-1deg); }
}

/* 呼噜 Z：4 个 Z 从脑袋左侧依次飘出，往左上角斜着飘、越飘越大越淡 */
.lib-snore {
  position: absolute;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 2px 8px rgba(70, 40, 150, 0.5);
  animation: libSnore 2.6s ease-out infinite;
}
.lib-snore.s1 { right: 126px; top: 65px; font-size: 15px; animation-delay: 0s; }
.lib-snore.s2 { right: 134px; top: 51px; font-size: 19px; animation-delay: 0.62s; }
.lib-snore.s3 { right: 142px; top: 37px; font-size: 23px; animation-delay: 1.24s; }
.lib-snore.s4 { right: 150px; top: 25px; font-size: 27px; animation-delay: 1.86s; }

@keyframes libSnore {
  0%   { opacity: 0; transform: translate(12px, 12px) scale(0.55) rotate(-22deg); }
  18%  { opacity: 0.95; }
  55%  { opacity: 0.72; transform: translate(-18px, -14px) scale(1) rotate(-12deg); }
  88%  { opacity: 0; transform: translate(-46px, -30px) scale(1.16) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-46px, -30px) scale(1.16) rotate(-4deg); }
}

/* 20260927fff：余额不足时按钮框内提示态（视频按钮/示例卡点击条通用，3 秒后由 JS 还原） */
.lib-btn-insuff {
  opacity: 0.62;
  pointer-events: none;
  filter: grayscale(0.4);
}