/* 心动AI - 通用弹窗与组件 */

/* ===== 灵魂问答弹窗 ===== */
.soul-chat-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 9999;
  display: none; opacity: 0;
  transition: opacity 0.3s;
}
.soul-chat-overlay.active { display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; }

.soul-chat-panel {
  width: 94%; max-width: 480px; height: 86vh; max-height: 86vh;
  background: var(--bone);
  border: 1px solid rgba(123,104,238,0.35);
  border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: soulSlideUp 0.4s ease-out;
}
@keyframes soulSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.soul-chat-header {
  padding: 16px 18px 14px;
  background: linear-gradient(135deg, rgba(123,104,238,0.3), rgba(212,83,126,0.3));
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.soul-chat-back {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding-bottom: 2px;
}
.soul-chat-back:active { background: rgba(255,255,255,0.3); }
.soul-chat-back.hidden { display: none; }
.soul-chat-header-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--soul);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.soul-chat-header-info { flex: 1; }
.soul-chat-header-title { font-size: 15px; font-weight: 600; color: #fff; }
.soul-chat-header-sub { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.soul-chat-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15); color: #fff; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.soul-chat-close:active { background: rgba(255,255,255,0.3); }

/* 灵魂对话消息区 */
.soul-chat-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.soul-msg {
  max-width: 85%; padding: 12px 16px; border-radius: 18px;
  font-size: 14px; line-height: 1.6; word-break: break-word;
  animation: soulMsgFade 0.3s ease-out;
}
@keyframes soulMsgFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.soul-msg.clone {
  align-self: flex-start;
  background: rgba(123,104,238,0.25); color: #e0dcf5;
  border-bottom-left-radius: 6px;
}
.soul-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7B68EE, #D4537E); color: #fff;
  border-bottom-right-radius: 6px;
}
.soul-msg.system {
  align-self: center;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  font-size: 12px; padding: 6px 14px; border-radius: 12px;
}

/* 灵魂话题选择区 */
.soul-topic-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 4px 0;
}
.soul-topic-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 14px 12px; cursor: pointer;
  transition: all 0.3s;
}
.soul-topic-card:active { transform: scale(0.96); }
.soul-topic-card.done {
  border-color: rgba(123,104,238,0.5);
  background: rgba(123,104,238,0.15);
}
.soul-topic-card .topic-icon { font-size: 24px; margin-bottom: 6px; }
.soul-topic-card .topic-name { font-size: 13px; font-weight: 600; color: #e0dcf5; }
.soul-topic-card .topic-desc { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; line-height: 1.4; }
.soul-topic-card.done .topic-name::after {
  content: ' ✓'; color: #4CAF50; font-size: 12px;
}
/* 每日任务引导：训练分身话题卡片脉冲 */
.soul-topic-card.task-pulse {
  border-color: rgba(255,255,255,0.55);
  background: rgba(123,104,238,0.22);
  z-index: 2;
}
.soul-topic-card.task-pulse::after {
  color: #7B68EE;
  top: -38px;
}

/* 快捷回复按钮 */
.soul-quick-replies {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0;
}
.soul-quick-btn {
  padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(123,104,238,0.5);
  background: rgba(123,104,238,0.15); color: #c4b5fd; font-size: 13px;
  cursor: pointer; transition: all 0.2s;
}
.soul-quick-btn:active { background: rgba(123,104,238,0.4); transform: scale(0.96); }

/* 输入区 */
.soul-chat-input-bar {
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; gap: 10px; align-items: center;
  background: rgba(0,0,0,0.2);
}
.soul-chat-input {
  flex: 1; padding: 10px 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; outline: none;
}
.soul-chat-input::placeholder { color: rgba(255,255,255,0.3); }
.soul-chat-input:focus { border-color: rgba(123,104,238,0.6); }
.soul-chat-send {
  width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid #fff;
  background: #fff; color: #000; font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.12);
}
.soul-chat-send:active { transform: scale(0.9); background: #f2f2f2; color: #000; border-color: #fff; }

/* 灵魂画像卡片 */
.soul-profile-card {
  background: linear-gradient(135deg, rgba(123,104,238,0.2), rgba(212,83,126,0.15));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 16px; margin: 8px 0;
}
.soul-profile-title {
  font-size: 14px; font-weight: 600; color: #e0dcf5;
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.soul-trait-item {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(255,255,255,0.06); border-left: 3px solid #7B68EE;
}
.soul-trait-topic { font-size: 12px; color: rgba(255,255,255,0.5); }
.soul-trait-surface { font-size: 13px; color: #ccc; margin-top: 4px; }
.soul-trait-deep { font-size: 13px; color: #c4b5fd; margin-top: 4px; font-weight: 500; }
.soul-trait-arrow { color: rgba(255,255,255,0.3); margin: 4px 0; font-size: 11px; }

/* 入口按钮 */
.soul-entry-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 16px; border-radius: 14px;
  border: 1px dashed rgba(123,104,238,0.4);
  background: linear-gradient(135deg, rgba(123,104,238,0.08), rgba(212,83,126,0.08));
  cursor: pointer; margin-top: 12px; transition: all 0.3s;
}
.soul-entry-btn:active { transform: scale(0.98); background: linear-gradient(135deg, rgba(123,104,238,0.15), rgba(212,83,126,0.15)); }
.soul-entry-icon { font-size: 28px; }
.soul-entry-info { flex: 1; }
.soul-entry-title { font-size: 14px; font-weight: 600; color: #7B68EE; }
.soul-entry-desc { font-size: 12px; color: #999; margin-top: 2px; }
.soul-entry-arrow { color: #7B68EE; font-size: 18px; }

/* ===== 悬浮分身状态球 ===== */
.floating-ai {
  position: absolute; right: 12px; bottom: 108px;
  z-index: 30; cursor: pointer; transition: transform 0.2s;
}
.floating-ai:active { transform: scale(0.92); }

/* 外圈脉冲光晕 */
.floating-ai-glow {
  position: absolute; top: -14px; left: -14px;
  width: 124px; height: 124px;
  border-radius: 50%;
  border: 2px dashed rgba(0,0,0,0.22);
  animation: cloneRotate 6s linear infinite;
}
@keyframes cloneRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 第二层脉冲光晕 */
.floating-ai-glow2 {
  position: absolute; top: -6px; left: -6px;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: rgba(123,104,238,0.22);
  animation: clonePulse 2s ease-in-out infinite;
}
@keyframes clonePulse {
  0%,100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.15); opacity: 0.70; }
}

/* 主球体 - 放大 + 跳跃（透明底，图片填满） */
.floating-ai-body {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #1A1A26;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: cloneBounce 1.8s ease-in-out infinite;
}
@keyframes cloneBounce {
  0%,100% { transform: translateY(0); }
  35% { transform: translateY(-12px); }
  55% { transform: translateY(-12px); }
}

/* 右上角数字徽章 */
.floating-clone-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 24px; height: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #D4537E, #f07fab);
  color: #fff; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(212,83,126,0.4);
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  border: 2px solid #fff;
}
@keyframes badgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* 机器人图标区 */
/* AI分身形象图（填满整个圆，去紫色背景） */
.floating-clone-img {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  /* 去掉残留紫色光晕，保持干净白底+黑边 */
}
.floating-clone-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.floating-ai-label {
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; color: rgba(123,104,238,0.85); text-align: center;
  white-space: nowrap;
  font-weight: 600; letter-spacing: 0.5px;
}


/* ===== 分身日报弹出卡片 ===== */
.clone-daily-card {
  position: absolute; right: 16px; bottom: 258px;
  width: 220px; background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(83,74,183,0.2), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 35; padding: 0 0 12px;
  display: none; opacity: 0;
  transform: scale(0.85) translateY(10px);
  transform-origin: bottom right;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
.clone-daily-card.active {
  display: block; opacity: 1;
  transform: scale(1) translateY(0);
}
.clone-daily-card-header {
  background: linear-gradient(135deg, #534AB7, #7B68EE);
  padding: 12px 14px 10px;
}
.clone-daily-card-title {
font-size: 13px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 5px;
}
.clone-daily-card-sub { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.clone-daily-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid #f5f3ff;
}
.clone-daily-row:last-of-type { border-bottom: none; }
.clone-daily-label { font-size: 12px; color: #888; }
.clone-daily-val { font-size: 13px; font-weight: 700; color: #534AB7; }
.clone-daily-news {
  margin: 4px 12px 0;
  padding: 8px 10px; background: #FFF0F5;
  border-radius: 10px; border-left: 3px solid #D4537E;
}
.clone-daily-news-text { font-size: 13px; color: #D4537E; line-height: 1.5; }
.clone-daily-btn {
  display: block; margin: 10px 12px 0;
  padding: 9px 0; border-radius: 10px; text-align: center;
  background: linear-gradient(135deg, #534AB7, #7B68EE);
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
  border: none; width: calc(100% - 24px);
}
.clone-daily-btn:active { opacity: 0.85; }
/* 小箭头指向悬浮球 */
.clone-daily-arrow {
  position: absolute; bottom: -8px; right: 28px;
  width: 16px; height: 16px; background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,0.06);
}

/* ===== 聊天室退出弹窗 ===== */
.chat-exit-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55); z-index: 10000;
  display: none; align-items: center; justify-content: center;
}
.chat-exit-overlay.active { display: flex; }

.chat-exit-dialog {
  width: 300px; background: #fff; border-radius: 20px;
  padding: 28px 24px 20px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: exitSlideUp 0.3s ease-out;
}
@keyframes exitSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.chat-exit-icon { font-size: 50px; margin-bottom: 12px; }
.chat-exit-title { font-size: 19px; font-weight: 600; color: #333; margin-bottom: 6px; }
.chat-exit-sub { font-size: 15px; color: #888; margin-bottom: 20px; line-height: 1.6; }
.chat-exit-btns { display: flex; flex-direction: column; gap: 10px; }
.chat-exit-btn {
  padding: 13px 0; border-radius: 14px; border: none;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.chat-exit-btn.primary {
  background: linear-gradient(135deg, #7B68EE, #9370DB);
  color: #fff;
}
.chat-exit-btn.primary:active { opacity: 0.85; transform: scale(0.97); }
.chat-exit-btn.secondary {
  background: #f5f3f8; color: #888;
}
.chat-exit-btn.secondary:active { background: #ebe8f2; }

/* 退出弹窗融合分身设置（一步到位滚动长面板） */
.chat-exit-dialog--merge {
  position: relative;
  width: 460px; max-width: 94vw;
  max-height: 90vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px 22px 20px; text-align: left;
}
.chat-exit-dialog--merge .chat-exit-icon,
.chat-exit-dialog--merge .chat-exit-title,
.chat-exit-dialog--merge .chat-exit-sub { text-align: center; }
.chat-exit-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.04); color: #999;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer;
}
.chat-exit-close:active { background: rgba(0,0,0,0.1); }
.chat-exit-dialog--merge .clone-guest-card-preview { margin: 14px 0 8px; }
.chat-exit-dialog--merge .clone-setup-section { margin: 12px 0 0; }
.chat-exit-dialog--merge .chat-exit-btns { margin-top: 16px; }

/* ===== 悬浮AI半屏面板 ===== */
.ai-panel-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.25); z-index: 60;
  display: none; opacity: 0; transition: opacity 0.3s;
}
.ai-panel-overlay.active { display: block; opacity: 1; }

.ai-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 65%; background: #fff;
  border-radius: 24px 24px 0 0; z-index: 61;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-panel.active { transform: translateY(0); }

.ai-panel-handle { width: 36px; height: 4px; border-radius: 2px; background: #ddd; margin: 12px auto; flex-shrink: 0; }

.ai-panel-header { display: flex; flex-direction: column; align-items: center; padding: 0 20px 16px; flex-shrink: 0; }
.ai-panel-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #7B68EE, #9370DB);
  display: flex; align-items: center; justify-content: center;
  position: relative; box-shadow: 0 4px 16px rgba(123,104,238,0.25);
}
.ai-panel-avatar-img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
}
.ai-panel-avatar-heart {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #D4537E; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
}
.ai-panel-name { font-size: 14px; font-weight: 600; color: #534AB7; margin-top: 8px; }
.ai-panel-desc { font-size: 12px; color: #999; margin-top: 2px; }

/* AI红娘定制方案入口 */
.ai-panel-upsell {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 10px 14px;
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
  border-radius: 12px; cursor: pointer;
  border: 1px solid #F0D88A;
  transition: all 0.2s;
}
.ai-panel-upsell:active { transform: scale(0.97); }
.ai-panel-upsell-icon { font-size: 18px; }
.ai-panel-upsell-text { flex: 1; font-size: 13px; font-weight: 600; color: #8B6914; }
.ai-panel-upsell-arrow { font-size: 20px; color: #C8A745; }

/* 定制方案价格卡片 */
.custom-plan-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 101; display: none;
  flex-direction: column; border-radius: 20px 20px 0 0;
  overflow-y: auto;
}
.custom-plan-overlay.active { display: flex; }
.custom-plan-header {
  padding: 16px; display: flex; align-items: center;
  border-bottom: 1px solid #f0edff;
}
.custom-plan-back {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #f5f3f8; color: #666;
  font-size: 20px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; margin-right: 10px;
}
.custom-plan-title { font-size: 17px; font-weight: 600; color: #333; }
.custom-plan-body { padding: 16px; }
.custom-plan-intro { font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 18px; }
.plan-card {
  border-radius: 16px; padding: 18px; margin-bottom: 12px;
  border: 2px solid #e8e4f5; position: relative;
}
.plan-card.recommended { border-color: #D4537E; background: #FFF5F8; }
.plan-card.premium { border-color: #B8860B; background: #FFFDF5; }
.plan-badge {
  position: absolute; top: -10px; right: 16px;
  padding: 3px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: #D4537E;
}
.plan-badge.premium { background: #B8860B; }
.plan-name { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 2px; }
.plan-price { font-size: 28px; font-weight: 800; color: #7B68EE; margin-bottom: 6px; }
.plan-price.premium { color: #B8860B; }
.plan-duration { font-size: 12px; color: #999; }
.plan-features { margin-top: 10px; }
.plan-feat { font-size: 13px; color: #555; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.plan-feat::before { content: '✓'; color: #4CAF50; font-weight: 700; }
.plan-btn {
  display: block; width: 100%; padding: 12px 0; margin-top: 12px;
  border-radius: 12px; border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  background: #7B68EE; color: #fff;
}
.plan-btn:active { opacity: 0.85; transform: scale(0.97); }
.plan-btn.premium { background: linear-gradient(135deg, #B8860B, #D4A017); }

.ai-panel-messages { flex: 1; overflow-y: auto; padding: 0 16px; -webkit-overflow-scrolling: touch; }
.ai-panel-messages::-webkit-scrollbar { display: none; }

.ai-panel-welcome { background: #FFF0F5; border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.ai-panel-welcome-title { font-size: 14px; font-weight: 500; color: #D4537E; margin-bottom: 6px; }
.ai-panel-welcome-text { font-size: 13px; color: #888; line-height: 1.6; }

.ai-panel-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ai-panel-quick-btn {
  padding: 7px 14px; border-radius: 16px; border: 1px solid #e8e4f5;
  background: #fff; font-size: 12px; color: #666; cursor: pointer; transition: all 0.15s;
}
.ai-panel-quick-btn:active { background: #f5f0ff; border-color: #7B68EE; color: #7B68EE; }

.ai-panel-chat-msg { margin-bottom: 10px; display: flex; }
.ai-panel-chat-msg.user { justify-content: flex-end; }
.ai-panel-chat-msg .ai-panel-bubble {
max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.6;
}
.ai-panel-chat-msg.bot .ai-panel-bubble { background: #FFF0F5; color: #333; border-bottom-left-radius: 4px; }
.ai-panel-chat-msg.user .ai-panel-bubble { background: #D4537E; color: #fff; border-bottom-right-radius: 4px; }

.ai-panel-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 30px; border-top: 1px solid #f0edff; flex-shrink: 0;
}
.ai-panel-input {
  flex: 1; height: 38px; border-radius: 19px; border: 1px solid #e4dff0;
background: #f8f7fc; padding: 0 14px; font-size: 13px; color: #333; outline: none;
}
.ai-panel-input::placeholder { color: #bbb; }
.ai-panel-input:focus { border-color: #D4537E; }
.ai-panel-send {
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  border: 2.5px solid #000; color: #000; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.08);
}
.ai-panel-send:active { transform: scale(0.9); background: #f2f2f2; color: #000; border-color: #000; }


/* ===== 找红娘协助·真人红娘咨询面板（平台代为沟通防跳单） ===== */
.mk-help-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.25); z-index: 60;
  display: none; opacity: 0; transition: opacity 0.3s;
}
.mk-help-overlay.active { display: block; opacity: 1; }

.mk-help-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 70%; background: #fff;
  border-radius: 24px 24px 0 0; z-index: 61;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-help-panel.active { transform: translateY(0); }

.mk-help-handle { width: 36px; height: 4px; border-radius: 2px; background: #ddd; margin: 12px auto; flex-shrink: 0; }

.mk-help-header { display: flex; flex-direction: column; align-items: center; padding: 0 20px 14px; flex-shrink: 0; }
.mk-help-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #E89B30, #D48352);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(232,155,48,0.22);
  color: #fff; font-size: 28px; font-weight: 700;
  overflow: hidden;
}
.mk-help-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-help-name { font-size: 18px; font-weight: 700; color: #6B4A1F; margin-top: 10px; }
.mk-help-sub { font-size: 14px; color: #B07032; margin-top: 4px; font-weight: 500; }

.mk-help-warn {
  margin: 6px 16px 14px; padding: 12px 14px;
  background: #FFF7E6; border: 1px solid #F0D88A; border-radius: 12px;
  font-size: 14.5px; color: #8B6914; line-height: 1.65;
}

.mk-help-messages { flex: 1; overflow-y: auto; padding: 0 16px 12px; -webkit-overflow-scrolling: touch; }
.mk-help-messages::-webkit-scrollbar { display: none; }

.mk-help-empty { padding: 24px 16px; text-align: center; color: #bbb; font-size: 13px; }

.mk-help-chat-msg { margin-bottom: 10px; display: flex; }
.mk-help-chat-msg.user { justify-content: flex-end; }
.mk-help-chat-msg .mk-help-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.6;
}
.mk-help-chat-msg.user .mk-help-bubble { background: #E89B30; color: #fff; border-bottom-right-radius: 4px; }

.mk-help-receipt {
  text-align: right; font-size: 11px; color: #4CAF50;
  margin: -4px 8px 12px; padding-right: 4px;
}
.mk-help-receipt.err { color: #D4537E; }

.mk-help-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 30px; border-top: 1px solid #f5edd9; flex-shrink: 0;
}
.mk-help-input {
  flex: 1; height: 40px; border-radius: 20px; border: 1px solid #ecdcc6;
  background: #FFFBF3; padding: 0 14px; font-size: 13px; color: #333; outline: none;
}
.mk-help-input::placeholder { color: #C4A06E; }
.mk-help-input:focus { border-color: #E89B30; }
.mk-help-input:disabled { opacity: 0.5; }
.mk-help-send {
  width: 36px; height: 36px; border-radius: 50%; background: #E89B30;
  border: none; color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(232,155,48,0.3);
}
.mk-help-send:disabled { opacity: 0.4; cursor: not-allowed; }
.mk-help-send:active { transform: scale(0.9); }

/* 批2v2+：红娘回复气泡（沿用面板视觉骨架，靠左、白色底） */
.mk-help-chat-msg.matchmaker { justify-content: flex-start; }
.mk-help-chat-msg.matchmaker .mk-help-bubble-mk {
  background: #fff;
  color: #6B4A1F;
  border: 1px solid #F0DCB5;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(232,155,48,0.06);
}
.mk-help-time {
  font-size: 11px;
  color: #B07032;
  margin-top: 2px;
  padding-left: 8px;
}


/* ===== 浮动嘉宾面板 ===== */
.guest-panel-handle {
  position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%); z-index: 80;
  cursor: pointer; transition: all 0.2s; display: none;
}
.guest-panel-handle.visible { display: flex; }
.guest-panel-handle:active { transform: translateY(-50%) scale(0.95); }

.guest-handle-inner {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 8px 8px 10px; background: var(--purple);
  border-radius: 14px 0 0 14px; color: #fff;
font-size: 13px; font-weight: 500;
  box-shadow: -2px 2px 8px rgba(123,104,238,0.2);
}
.guest-handle-count {
  background: #fff; color: var(--purple);
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-right: 2px;
}

.guest-panel {
  position: absolute; top: 100px; top: calc(100px + env(safe-area-inset-top, 0px)); right: 0; bottom: 160px;
  width: 300px; background: #fff; z-index: 60;
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  display: none; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.guest-panel.active { display: flex; transform: translateX(0); }

.guest-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #f0edff; flex-shrink: 0;
}
.guest-panel-title { font-size: 14px; font-weight: 600; color: #D4537E; }
.guest-panel-close { font-size: 14px; color: #999; cursor: pointer; padding: 4px; }

.guest-panel-list { flex: 1; overflow-y: auto; padding: 8px 12px; -webkit-overflow-scrolling: touch; }
.guest-panel-list::-webkit-scrollbar { display: none; }

.guest-panel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px; background: #F5F0FF; border: 1px solid rgba(123,104,238,0.15);
  border-radius: 12px; margin-bottom: 8px;
}
.guest-panel-item-avatar-wrap {
  flex-shrink: 0;
}
.guest-panel-item-avatar-wrap .guest-avatar-blur {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid #D4C8F7;
}
.guest-panel-item-avatar-wrap .guest-avatar-blur img {
  border-radius: 10px;
}
.guest-panel-item-avatar-blur {
  width: 36px; height: 36px; border-radius: 50%;
  position: relative; overflow: hidden; border: 2px solid #D4C8F7; flex-shrink: 0;
  display: none;
}
.guest-panel-item-avatar-blur img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.guest-panel-item-avatar-blur .blur-overlay {
  display: none;
}
.guest-panel-item-info { flex: 1; min-width: 0; }
.guest-panel-item-name { font-size: 13px; font-weight: 500; color: #333; }
.guest-panel-item-detail { font-size: 13px; color: #888; }
.guest-panel-item-btns { display: flex; gap: 6px; margin-top: 4px; }
.guest-panel-mini-btn {
  flex: 1;
  padding: 5px 8px; border-radius: 8px; border: 1px solid;
  font-size: 12px; cursor: pointer; background: #fff; transition: all 0.15s;
}
.guest-panel-mini-btn.chat { border-color: #7B68EE; color: #7B68EE; }
.guest-panel-mini-btn.chat:active { background: #7B68EE; color: #fff; }
.guest-panel-mini-btn.home { border-color: #7B68EE; background: #7B68EE; color: #fff; font-weight: 600; }
.guest-panel-mini-btn.home:active { background: #5a4fcf; }
.guest-panel-item-score { font-size: 13px; font-weight: 700; color: #D4537E; flex-shrink: 0; }

/* 图7 嘉宾列表：打破列表感——头像呼吸浮动 + 在线呼吸灯 */
.guest-panel-item-avatar-wrap .guest-avatar-blur {
  animation: gpFloat 3.8s ease-in-out infinite;
  box-shadow: 0 4px 14px rgba(123,104,238,0.25);
}
.guest-panel-item:nth-child(2n) .guest-panel-item-avatar-wrap .guest-avatar-blur { animation-delay: 0.6s; }
.guest-panel-item:nth-child(3n) .guest-panel-item-avatar-wrap .guest-avatar-blur { animation-delay: 1.2s; }
@keyframes gpFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
/* 在线呼吸灯（右上角小绿点） */
.guest-panel-item-avatar-wrap { position: relative; }
.guest-panel-item-avatar-wrap::after {
  content:''; position:absolute; top:-1px; right:-1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #4BE08A; border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(75,224,138,0.8);
  animation: gpOnline 1.8s ease-in-out infinite;
}
@keyframes gpOnline {
  0%,100% { transform: scale(1);    box-shadow: 0 0 5px rgba(75,224,138,0.7); }
  50%     { transform: scale(1.25); box-shadow: 0 0 12px rgba(75,224,138,1); }
}


/* ===== 情感状态切换弹窗 ===== */
.status-switcher {
  position: absolute; top: 50px; left: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 100; padding: 8px; display: none; min-width: 150px;
}
.status-switcher.active { display: block; }
.status-option {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  font-size: 15px; color: #333; transition: all 0.15s; font-weight: 500;
  max-width: 160px;
}
.status-option:active { background: #f5f5f5; }
.status-option.current { background: #f5f0ff; font-weight: 600; }
.status-option-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ===== Toast ===== */
.toast {
  position: fixed; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(51,51,51,0.92); color: #fff;
padding: 12px 28px; border-radius: 10px; font-size: 14px;
  z-index: 99999; pointer-events: none;
  max-width: 80%; text-align: center;
}

/* 分身按钮特殊高亮 */
.island-btn.clone-star {
  background: linear-gradient(135deg, #534AB7, #7B68EE);
  border-color: #534AB7;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(83,74,183,0.35);
  position: relative;
}
.island-btn.clone-star::after {
  content: '';
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D4537E;
  border: 1.5px solid #fff;
  animation: cloneBadgePulse 1.8s ease-in-out infinite;
}
@keyframes cloneBadgePulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}


/* ===== 聊天记录弹窗 ===== */
.chat-panel-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.35); z-index: 50;
  display: none; opacity: 0; transition: opacity 0.25s;
}
.chat-panel-overlay.active { display: block; opacity: 1; }

.chat-panel.fullscreen {
  max-width: 100%; width: 100%; height: 100%; border-radius: 0;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), height 0.3s ease, border-radius 0.2s ease;
}

/* 关系预演按钮（分身聊天面板右上角）——字号对齐聊天室 .sub-cd-unlock（15.5px/900） */
.chat-panel-btn.preplay {
  background: #f5f0ff; color: #7B68EE; border-color: #d4ccf0;
  font-size: 15.5px; font-weight: 900; padding: 7px 12px;
}
.chat-panel-btn.preplay:active { background: #7B68EE; color: #fff; }

/* 全屏切换按钮 */
.chat-panel-btn.fullscreen {
  background: #f5f5f5; color: #666; border-color: #ddd; font-size: 14px; padding: 6px 9px;
}
.chat-panel-btn.fullscreen:active { background: #e0e0e0; }

/* 解锁真人联系方式（分身聊天面板中部，与聊天室同款风格）——字号对齐聊天室 .sub-cd-unlock（15.5px/900） */
.clone-unlock-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 8px 16px 0; padding: 11px 16px; border: 1px solid #f5c6d8;
  border-radius: 999px; background: #fff0f5; color: #D4537E;
  font-size: 15.5px; font-weight: 900; cursor: pointer; transition: transform 0.16s ease;
  animation: unlockPulse 2.2s ease-in-out infinite;
}
.clone-unlock-btn:active { transform: scale(0.97); animation: none; }

/* 解锁按钮脉冲动画复用聊天室 */
@keyframes unlockPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
  55% { transform: scale(1.03); box-shadow: 0 4px 14px rgba(212,83,126,0.35), 0 0 0 3px rgba(212,83,126,0.18); }
}

.chat-panel {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 375px; height: 75%;
  background: #faf9ff; z-index: 51;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), height 0.3s ease, border-radius 0.2s ease, max-width 0.3s ease;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
}
.chat-panel.active { transform: translateX(-50%) translateY(0); }

.chat-panel-header {
  display: flex; align-items: center; padding: 14px 16px;
  background: #fff; border-radius: 20px 20px 0 0;
  border-bottom: 1px solid #f0edff; flex-shrink: 0;
}
.chat-panel-back { font-size: 26px; color: #7B68EE; cursor: pointer; margin-right: 10px; }
.chat-panel-title { flex: 1; font-size: 17px; font-weight: 600; color: #333; }
.chat-panel-actions { display: flex; gap: 6px; }

.chat-panel-btn {
  padding: 5px 10px; border-radius: 12px; border: 1px solid;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.chat-panel-btn.take-over {
  background: #f5f0ff; color: #7B68EE; border-color: #d4ccf0;
}
.chat-panel-btn.take-over:active { background: #7B68EE; color: #fff; }
.chat-panel-btn.unlock-self {
  background: #fff0f5; color: #D4537E; border-color: #f5c6d8;
}
.chat-panel-btn.unlock-self:active { background: #D4537E; color: #fff; }

.chat-panel-messages {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  -webkit-overflow-scrolling: touch;
}
.chat-panel-msg-row { display: flex; margin-bottom: 10px; gap: 8px; }
.chat-panel-msg-row.bot { flex-direction: row; }
.chat-panel-msg-row.user { flex-direction: row-reverse; }
.chat-panel-msg-bubble {
  max-width: 76%; padding: 11px 15px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.65; word-break: break-word;
}
.chat-panel-msg-row.bot .chat-panel-msg-bubble {
  background: #fff; color: #333; border: 1px solid #edeaf5;
  border-bottom-left-radius: 4px;
}
.chat-panel-msg-row.user .chat-panel-msg-bubble {
  background: linear-gradient(135deg, #7B68EE, #9370DB); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-panel-msg-time { font-size: 11.5px; color: #c4bcd8; text-align: center; margin: 8px 0; }

.chat-panel-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 24px; background: #fff;
  border-top: 1px solid #f0edff; flex-shrink: 0;
}
.chat-panel-input {
  flex: 1; height: 42px; border-radius: 21px;
  border: 1px solid #e4dff0; background: #f8f7fc;
  padding: 0 15px; font-size: 15px; color: #333; outline: none;
}
.chat-panel-input::placeholder { color: #bbb; }
.chat-panel-send {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: linear-gradient(135deg, #D4537E, #f07fab);
  color: #fff; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.chat-panel-send:active { opacity: 0.8; }

/* 内连接管按钮 */
.chat-panel-btn.take-over-inline {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid #7B68EE; background: #f5f0ff;
  color: #7B68EE; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 0 8px rgba(123,104,238,0.25);
  animation: takeoverPulse 2.5s ease-in-out infinite;
}
@keyframes takeoverPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(123,104,238,0.2); }
  50% { box-shadow: 0 0 14px rgba(123,104,238,0.45); }
}
.chat-panel-btn.take-over-inline:hover { background: #7B68EE; color: #fff; }
.chat-panel-btn.take-over-inline.active { background: #7B68EE; color: #fff; animation: none; box-shadow: 0 0 10px rgba(123,104,238,0.5); }


/* ===== 专属红娘企微二维码弹窗 ===== */
.matchmaker-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 200;
  display: none; align-items: center; justify-content: center;
}
.matchmaker-overlay.active { display: flex; }
.matchmaker-card {
  width: 300px; background: #fff; border-radius: 20px;
  padding: 28px 24px 24px; text-align: center;
  position: relative; animation: qrPopIn 0.3s ease;
}
@keyframes qrPopIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.matchmaker-close {
  position: absolute; top: 10px; right: 14px; font-size: 20px;
  color: #ccc; cursor: pointer; line-height: 1; padding: 4px;
}
.matchmaker-close:active { color: #999; }
.matchmaker-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 12px;
  object-fit: cover; display: block;
  border: 2px solid #E8453C;
}
.matchmaker-name { font-size: 17px; font-weight: 700; color: #333; margin-bottom: 2px; }
.matchmaker-role { font-size: 12px; color: #E8453C; font-weight: 500; margin-bottom: 16px; }
.matchmaker-qr {
  width: 180px; height: 180px; margin: 0 auto 14px;
  border-radius: 12px;
  object-fit: contain; display: block;
  border: 2px solid #edeaf5;
}
.matchmaker-tip { font-size: 12px; color: #999; line-height: 1.6; }
.matchmaker-tip b { color: #E8453C; }


/* ===== 登录按钮 & 用户标签 ===== */
.top-login-btn {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid #7B68EE;
  background: #fff;
  color: #7B68EE;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.top-login-btn:hover { background: #7B68EE; color: #fff; }
.top-user-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.top-user-tag-v {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  color: #7B68EE;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}

/* ===== 登录/支付遮罩 ===== */
.login-overlay, .pay-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 第5层：bottom 用 safe-area 确保覆盖到 Home Indicator 上方 */
  bottom: 0;
  bottom: calc(0px - env(safe-area-inset-bottom, 0px));
  -webkit-fill-available: true;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, background 0.8s ease;
}
.login-overlay.active, .pay-overlay.active { opacity: 1; visibility: visible; }
.login-card, .pay-card {
  background: #fff; border-radius: 20px; padding: 28px 24px 20px;
  width: 310px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px); transition: transform 0.3s;
}
.login-overlay.active .login-card, .pay-overlay.active .pay-card { transform: translateY(0); }
.login-card .lc-icon { font-size: 48px; margin-bottom: 10px; }
.login-card .lc-title { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 6px; }
.login-card .lc-desc { font-size: 13px; color: #888; margin-bottom: 18px; line-height: 1.5; }
.login-card .lc-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid #e8e4f5;
  border-radius: 12px; font-size: 14px; margin-bottom: 10px;
  outline: none; transition: border-color 0.2s;
}
.login-card .lc-input:focus { border-color: #7B68EE; }
.login-card .lc-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #7B68EE, #9B8EF0);
  color: #fff; font-size: 16px; font-weight: 600;
  cursor: pointer; margin-bottom: 10px; transition: all 0.2s;
}
.login-card .lc-btn:active { transform: scale(0.97); opacity: 0.9; }
.login-card .lc-skip {
  font-size: 13px; color: #bbb; cursor: pointer; background: none; border: none;
  text-decoration: underline;
}
.lc-divider {
  display: flex; align-items: center; margin: 10px 0;
  font-size: 11px; color: #bbb;
}
.lc-divider::before, .lc-divider::after {
  content: ''; flex: 1; border-top: 1px solid #eee;
}
.lc-divider span { padding: 0 12px; }

/* 余额显示 */
.coin-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 12px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #fff; font-size: 11px; font-weight: 700;
  cursor: pointer;
}



/* --- pwaIn 动画 --- */
@keyframes pwaIn {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* --- PWA 引导箭头弹跳动画 --- */
@keyframes pwaArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}


/* ===== 图片预览浮层 ===== */
.photo-preview-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  align-items: flex-end;
  justify-content: center;
}
.photo-preview-overlay.active { display: flex; }

.photo-preview-panel {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.photo-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0edff;
}
.photo-preview-title { font-size: 15px; color: #333; }
.photo-preview-title b { color: #7B68EE; }
.photo-preview-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: #f5f5f5;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.photo-preview-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.photo-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}
.photo-preview-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-preview-item .remove-btn {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.photo-preview-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #f0edff;
}
.photo-preview-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}
.photo-preview-btn.add-more {
  background: #f5f5f5;
  color: #666;
  flex: 0.35;
}
.photo-preview-btn.send-photos {
  background: linear-gradient(135deg,#7B68EE,#8B78F8);
  color: #fff;
  flex: 0.65;
}
.photo-preview-btn:active { transform: scale(0.97); }

/* ===== 法律声明强制同意弹窗 ===== */
.agree-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 第5层：覆盖全屏包括安全区域 */
  bottom: 0;
  bottom: calc(0px - env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.88);
  z-index: 10000;
  /* 默认隐藏（配合 HTML 的 hidden 属性） */
  display: none;
}
/* 有 hidden 属性时：彻底从布局移除 */
.agree-overlay[hidden] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* 无 hidden 属性时：显示弹窗 */
.agree-overlay:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.agree-card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.agree-header {
  padding: 24px 20px 16px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.agree-logo { font-size: 52px; margin-bottom: 4px; }
.agree-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.agree-subtitle { font-size: 12px; color: #999; }
.agree-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.agree-section { margin-bottom: 20px; }
.agree-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #7B68EE;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
}
.agree-text {
  font-size: 13px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 6px;
}
.agree-text strong { color: #1a1a2e; }
.agree-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  background: #fafafa;
}
.agree-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
  cursor: pointer;
  line-height: 1.5;
}
.agree-check-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #7B68EE;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.agree-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.agree-btn:hover { background: linear-gradient(135deg, #252525, #353535); }
.agree-btn:active { transform: scale(0.98); }
.agree-btn:disabled {
  background: #bbb;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}
.agree-decline {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  cursor: pointer;
  padding: 8px 0;
}
.agree-decline:hover { color: #666; }

/* 强制隐藏body滚动，防止遮罩层下可以滑动 */
body.agree-locked { overflow: hidden; }

/* ===== 登录旅程四步引导 ===== */
.login-journey-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-journey-overlay.active { display: flex; }
.login-journey-card {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 360px;
  padding: 28px 24px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: journeySlideIn 0.3s ease;
}
@keyframes journeySlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 步骤指示器 */
.journey-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  gap: 0;
}
.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.journey-step span {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  background: #f0f0f0;
  border: 2px solid #e0e0e0;
  transition: all 0.3s;
}
.journey-step small {
  font-size: 10px;
  color: #bbb;
  transition: color 0.3s;
}
.journey-step.active span {
  background: #7B68EE;
  color: #fff;
  border-color: #7B68EE;
  box-shadow: 0 2px 8px rgba(123,104,238,0.4);
}
.journey-step.active small { color: #7B68EE; font-weight: 600; }
.journey-step.done span {
  background: #07C160;
  color: #fff;
  border-color: #07C160;
}
.journey-step.done small { color: #07C160; }
.journey-line {
  width: 32px; height: 2px;
  background: #e0e0e0;
  margin: 0 4px;
  margin-bottom: 16px;
  transition: background 0.3s;
}
.journey-line.done { background: #07C160; }

/* 登录面板 */
.journey-panel { animation: journeyFadeIn 0.25s ease; }
@keyframes journeyFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.journey-icon { font-size: 40px; text-align: center; margin-bottom: 8px; }
.journey-title { font-size: 20px; font-weight: 700; color: #1a1a2e; text-align: center; margin-bottom: 6px; }
.journey-desc { font-size: 13px; color: #888; text-align: center; margin-bottom: 20px; line-height: 1.5; }
.journey-back { 
  font-size: 13px; color: #7B68EE; cursor: pointer; margin-bottom: 12px; display: inline-block;
}
.journey-back:hover { opacity: 0.8; }

/* 微信登录按钮 */
.journey-wx-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.journey-wx-btn:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.journey-wx-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* 分隔线 */
.journey-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: #ccc;
  font-size: 12px;
}
.journey-divider::before,
.journey-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e8e8;
}
.journey-divider span { padding: 0 12px; }

/* 手机号登录按钮 */
.journey-phone-btn {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s;
}
.journey-phone-btn:active { border-color: #7B68EE; color: #7B68EE; }

/* 输入框 */
.journey-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e8e4f5;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  background: #faf9ff;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.journey-input:focus { border-color: #7B68EE; }

/* 验证码按钮 */
.journey-code-btn {
  width: 110px;
  padding: 12px 8px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #7B68EE;
  background: #f3f0ff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.journey-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 底部协议提示 */
.journey-agree-footer {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin-top: 16px;
}
.journey-agree-link {
  color: #7B68EE;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== 通知中心 ===== */
.top-notify-btn {
  position: relative;
  background: none; border: none;
  font-size: 22px; cursor: pointer;
  padding: 4px 6px; border-radius: 8px;
  transition: background 0.2s;
  line-height: 1;
}
.top-notify-btn:hover { background: rgba(255,255,255,0.15); }
.notify-badge {
  position: absolute; top: -2px; right: -2px;
  background: #e74c3c; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
  line-height: 1;
}
.notify-panel {
  background: #fff; border-radius: 16px;
  width: 350px; max-width: 90vw;
  max-height: 70vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(20px);
  transition: transform 0.3s;
}
.login-overlay.active .notify-panel { transform: translateY(0); }
.notify-header {
  padding: 16px 16px 10px;
  border-bottom: 1px solid #f0eef8;
  display: flex; flex-direction: column; gap: 8px;
}
.notify-header span {
  font-size: 16px; font-weight: 700; color: #333;
}
.notify-header-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.notify-filter-btn {
  padding: 4px 12px; border-radius: 12px;
  border: 1px solid #e0dcf5; background: #fff;
  font-size: 12px; color: #888; cursor: pointer;
  transition: all 0.2s;
}
.notify-filter-btn.active {
  background: #7B68EE; color: #fff; border-color: #7B68EE;
}
.notify-read-all-btn {
  padding: 4px 12px; border-radius: 12px;
  border: 1px solid #e0dcf5;
  background: #f8f6ff; color: #7B68EE;
  font-size: 12px; cursor: pointer;
  margin-left: auto;
}
.notify-list {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
  min-height: 120px;
}
.notify-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f5f3fc;
  transition: background 0.15s;
  position: relative;
}
.notify-item:hover { background: #faf8ff; }
.notify-item.unread { background: #faf6ff; }
.notify-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.notify-body { flex: 1; min-width: 0; }
.notify-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 2px; }
.notify-content {
  font-size: 12px; color: #888;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.notify-time { font-size: 10px; color: #bbb; margin-top: 4px; }
.notify-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7B68EE;
  flex-shrink: 0;
  margin-top: 6px;
}
.notify-empty {
  text-align: center; padding: 40px 16px;
  color: #ccc; font-size: 14px;
}
.notify-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0eef8;
  text-align: center;
}
.notify-close-btn {
  padding: 8px 24px; border-radius: 12px;
  border: 1px solid #e0dcf5;
  background: #fff; color: #888;
  font-size: 13px; cursor: pointer;
}

/* ===== AI伴侣四步定制构建器 ===== */
.companion-builder-card {
  width: 92vw;
  max-width: 440px;
  /* 固定高度：7步全程卡片大小一致 */
  height: 88vh;
  max-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 20px 16px;
  border-radius: 26px;
  /* 深紫渐变底：白卡片"浮"在深紫上更突出（不穿透，5ed0dc0 卡片设计） */
  background: linear-gradient(180deg,
    rgba(95,60,140,0.85) 0%,
    rgba(110,75,155,0.82) 35%,
    rgba(85,55,130,0.80) 70%,
    rgba(75,50,115,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 20px 60px rgba(26,16,40,0.6);
}
/* 可滚动内容区：包含所有步骤 */
.builder-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -4px;
  padding: 0 4px;
}
.builder-body::-webkit-scrollbar { display: none; }
.builder-header {
  text-align: center;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.builder-header-icon {
  display: none; /* 第1点：去掉顶部图标，位置留给内容 */
}
.builder-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.builder-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
  line-height: 1.4;
}
/* 进度指示器（固定在按钮下方） */
.builder-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  transition: all 0.3s;
  flex-shrink: 0;
}
.progress-dot.active {
  width: 24px;
  border-radius: 4px;
  background: #D4B7FF;
}
.progress-dot.completed {
  background: #B894E6;
}
.progress-line {
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,0.20);
  margin: 0 4px;
  flex-shrink: 0;
  transition: background 0.3s;
}
.progress-dot.completed + .progress-line {
  background: rgba(180,148,230,0.55);
}
/* 步骤容器 — 不固定高度，由内容撑开，溢出由 builder-body 滚动 */
.builder-step {
  display: none;
  animation: fadeInStep 0.3s ease;
}
.builder-step.active {
  display: block;
}
@keyframes fadeInStep {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.step-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.step-hint {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
/* 步骤头部：普通文档流（不 sticky 浮在顶部挡下方卡片） */
.step-header {
  position: static;
  z-index: auto;
  background: transparent;
  margin: 0 -10px;
  padding: 2px 10px 10px;
}
/* ===== Step1 横向图片轮播选择器（封面流/Coverflow式）===== */
.avatar-carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  gap: 18px;
  padding: 24px 52px 16px;        /* 两侧留大padding让侧边图"缩进" */
  margin: 0 -24px;                 /* 抵消内边距让首尾贴边区更大 */
  /* 隐藏滚动条但保留功能 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.avatar-carousel::-webkit-scrollbar { display: none; }
.avatar-carousel-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  cursor: pointer;
  border-radius: 22px;
  padding: 6px;
  border: 2.5px solid transparent;
  transition: all 0.4s cubic-bezier(.25,.8,.25,1);
  background: transparent;
  /* 默认态：两侧略小，清晰可见 */
  transform: scale(0.88);
  opacity: 0.82;
}
.avatar-carousel-img-wrap {
  width: 185px;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
}
.avatar-carousel-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 选中态：紫框 + 放大凸起 = 与中间可见卡片同大 */
.avatar-carousel-item.active {
  border-color: #7B68EE;
  box-shadow: 0 6px 28px rgba(123,104,238,0.40), 0 0 0 2px rgba(123,104,238,0.12);
  transform: scale(1.05);
  opacity: 1;
  z-index: 2;
}
.avatar-carousel-label {
  font-size: 14px;
  color: #888;
  text-align: center;
  margin-top: 8px;
  line-height: 1.3;
  transition: color 0.3s, font-weight 0.3s;
  white-space: nowrap;
}
.avatar-carousel-item.active .avatar-carousel-label {
  color: #7B68EE;
  font-weight: 700;
  font-size: 15px;
}
/* 导航按钮 — 固定在底部，不随内容滚动 */
.builder-nav {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-shrink: 0;
}
.builder-btn-prev {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #2a2a2a;
  color: #2a2a2a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.2s;
}
.builder-btn-prev:hover {
  background: #2a2a2a;
  color: #fff;
}
.builder-btn-next {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}
.builder-btn-generate {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7B68EE 0%, #4B0082 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
  box-shadow: 0 4px 18px rgba(123,104,238,0.45);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.builder-btn-generate::before {
  content: ''; position: absolute; top: 0; left: -75%; width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg); pointer-events: none;
  animation: genBtnShimmer 2.2s ease-in-out infinite;
}
@keyframes genBtnShimmer { 0% { left: -75%; } 55% { left: 120%; } 100% { left: 120%; } }
.builder-btn-generate:active { transform: scale(0.96); filter: brightness(1.15); }
.builder-btn-generate.charging {
  animation: genBtnCharge 0.55s ease-in-out both;
  filter: brightness(1.25);
  background: linear-gradient(135deg, #9B7CFF 0%, #5A1EE6 100%);
}
@keyframes genBtnCharge {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(155,124,255,0.75), 0 4px 18px rgba(123,104,238,0.45); }
  40%  { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(155,124,255,0), 0 0 0 6px rgba(255,255,255,0.35), 0 8px 28px rgba(123,104,238,0.65); }
  100% { transform: scale(1.05); box-shadow: 0 0 0 28px rgba(155,124,255,0), 0 0 0 0 rgba(255,255,255,0), 0 6px 22px rgba(123,104,238,0.55); }
}
.builder-close-text {
  width: 100%;
  padding: 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.85);  /* 接近白色，在深紫底上更明显 */
  font-size: 13px;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ===== AI伴侣构建器弹窗（选项统一样式） ===== */
.ai-builder-section {
  margin-bottom: 18px;
}
.ai-builder-label {
  font-size: 16px;
  font-weight: 700;
  color: #D4B7FF;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ai-builder-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.ai-builder-option {
  padding: 12px 16px;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
}
.ai-builder-option:active {
  transform: scale(0.96);
}
/* 统一选中态：暗色底上"亮"起来——白渐变 + 白边 + 强脉冲光晕 + 扫光 */
.ai-builder-option.active {
  border: 2.5px solid #ffffff;
  background: linear-gradient(135deg, #9B7EE8 0%, #B894E6 50%, #D4B7FF 100%);
  color: #fff;
  font-weight: 700;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.25),
    0 8px 32px rgba(180,140,255,0.70),
    0 0 28px rgba(200,150,255,0.50),
    0 4px 14px rgba(26,16,40,0.30);
  animation: optPulse 2.0s ease-in-out infinite;
}
@keyframes optPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.25),
      0 8px 32px rgba(180,140,255,0.70),
      0 0 28px rgba(200,150,255,0.50),
      0 4px 14px rgba(26,16,40,0.30);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(255,255,255,0.15),
      0 10px 44px rgba(220,180,255,0.90),
      0 0 42px rgba(220,170,255,0.65),
      0 6px 20px rgba(26,16,40,0.34);
  }
}
/* 选中态扫光：从左上角扫到右下角（仿 Step 1/2 扫光感） */
.ai-builder-option.active::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.50) 50%, transparent 70%);
  animation: optSweep 2.2s ease-in-out infinite;
  pointer-events: none;
  border-radius: 16px;
}
@keyframes optSweep {
  0%   { transform: translate(-100%, -100%); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(0, 0); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(100%, 100%); opacity: 0; }
}

/* 选项双行：主词大字 + 副标题一行小字 */
.ai-builder-option {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  gap: 4px;
}
.opt-main { font-weight: 800; font-size: 22px; letter-spacing: 1px; position: relative; z-index: 2; }
.opt-sub {
  font-size: 13px; opacity: 0.85; font-weight: 400;
  max-width: 100%; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 2;
}
.ai-builder-option.active .opt-sub { opacity: 0.95; color: #fff; }

/* === 背景色彩流动：随步骤微变氛围 === */
.bstep-1 { background: rgba(58,40,92,0.74); }
.bstep-2 { background: rgba(44,38,72,0.80); }
.bstep-3 { background: rgba(74,44,60,0.74); }
.bstep-4 { background: rgba(58,38,86,0.72); }

/* 选中涟漪 */
.ai-builder-option.active::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: translate(-50%,-50%) scale(0);
  animation: optRipple 0.6s ease-out;
}
@keyframes optRipple {
  to { transform: translate(-50%,-50%) scale(16); opacity: 0; }
}

/* 点击水波纹扩散（弹性） —— 元宝方案：所有选项点击水波纹 */
.ai-builder-option, .resonance-opt, .builder-swipe-card, .builder-energy-option {
  position: relative;
  overflow: hidden;
}
.builder-ripple {
  position: absolute;
  border-radius: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: rgba(123,104,238,0.30);
  transform: scale(0);
  animation: builderRipple 0.6s ease-out;
  pointer-events: none;
  z-index: 3;
}
@keyframes builderRipple {
  to { transform: scale(20); opacity: 0; }
}

/* Step1 照片点击放大 Lightbox */
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbZoomIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 封面流中间卡片：紫框 + 心跳脉冲呼吸 */
.avatar-carousel-item.active {
  animation: coverBreathe 2s ease-in-out infinite;
}
@keyframes coverBreathe {
  0%,100% { transform: scale(1.05); box-shadow: 0 6px 28px rgba(123,104,238,0.40), 0 0 0 2px rgba(123,104,238,0.12); }
  30% { transform: scale(1.08); box-shadow: 0 10px 36px rgba(123,104,238,0.55), 0 0 0 5px rgba(123,104,238,0.20); }
  60% { transform: scale(1.05); }
}

/* 进度条拟人化 */
.builder-progress { position: relative; }
.progress-heart, .progress-sparkle {
  position: absolute; top: -16px;
  font-size: 14px; opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.progress-heart { left: 16%; animation: floatHeart 1.8s ease-in-out infinite; }
.progress-sparkle { right: 16%; animation: twinkle 1.4s ease-in-out infinite; }
.bstep-2 .progress-heart, .bstep-3 .progress-heart, .bstep-4 .progress-heart { opacity: 0.9; }
.bstep-4 .progress-sparkle { opacity: 1; }
@keyframes floatHeart {
  0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); }
}
@keyframes twinkle {
  0%,100% { transform: scale(0.8) rotate(-8deg); opacity: 0.6; }
  50% { transform: scale(1.15) rotate(8deg); opacity: 1; }
}

/* 智能联想提示（加大） */
.builder-smart-hint {
  display: flex; align-items: center; gap: 8px;
  background: #FAF7FF; border: 1.5px dashed #C9B8F0;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  font-size: 14px; color: #6a5a99;
}
.smart-hint-add {
  flex-shrink: 0; border: none; background: #7B68EE; color: #fff;
  border-radius: 10px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ai-builder-hint-small { font-size: 12px; color: #B0A0C8; margin-top: 8px; text-align: right; }

/* 全屏白光过渡（更长、更柔和） */
.builder-flash {
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.96), rgba(216,180,245,0.50) 40%, transparent 72%);
  opacity: 0; animation: flashFade 1.2s ease-out;
}
@keyframes flashFade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { opacity: 0; }
}

/* ===== AI伴侣生成仪式动画（元宝方案 v2：蓄力粒子 → 心跳倒数 → 揭晓连接） ===== */
.companion-ceremony {
  position: fixed; top:0; left:0; right:0; bottom:0; z-index:9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; opacity: 1; visibility: visible;
  background: linear-gradient(160deg, #2E0249 0%, #5B0A6B 55%, #A5026B 100%);
  background-size: 200% 200%;
}

/* 微光粒子星空 */
.ceremony-particles { position:absolute; inset:0; pointer-events:none; }
.ceremony-particle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 6px rgba(199,125,255,0.9);
  animation: cerTwinkle 3s ease-in-out infinite;
}
@keyframes cerTwinkle {
  0%,100% { opacity: 0.15; transform: scale(0.6); }
  50%     { opacity: 0.95; transform: scale(1.3); }
}

/* 蓄力文案 */
/* 蓄力文案 — 绝对居中（用left:50%+translateX确保任何webkit都居中），不占文档流 */
.ceremony-charge-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff; font-size: 18px; font-weight: 400; letter-spacing: 2px;
  opacity: 0.82; text-align: center;
  white-space: nowrap; line-height: 1.6;
}
.ceremony-charge-text.is-out { opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: all 0.5s ease-out; pointer-events: none; }
@keyframes cerChargeIn { from { opacity:0; transform: translate(-50%, -50%) translateY(10px); } to { opacity:0.82; transform: translate(-50%, -50%); } }
.ceremony-ellipsis { display:inline-block; margin-left:2px; }
.ceremony-ellipsis i {
  display:inline-block; width:4px; opacity:0.3; animation: cerDot 1.4s infinite;
  font-style: normal;
}
.ceremony-ellipsis i:nth-child(2) { animation-delay: 0.2s; }
.ceremony-ellipsis i:nth-child(3) { animation-delay: 0.4s; }
@keyframes cerDot { 0%,80%,100% { opacity:0.2; } 40% { opacity:1; } }

/* ===== 图1 加载页：微弱粒子星空 + 打字机文案（仅蓄力阶段，倒数阶段隐藏） ===== */
.ceremony-stars { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.ceremony-star {
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 6px rgba(199,125,255,0.8);
  animation: cerStarTwinkle 3.4s ease-in-out infinite;
}
/* Round 2 升级：流动粒子——从四周向中心飘移 */
.ceremony-star.flow {
  background: rgba(199,125,255,0.9);
  box-shadow: 0 0 10px rgba(199,125,255,0.8), 0 0 20px rgba(123,104,238,0.5);
  animation: cerStarFlow linear infinite;
}
@keyframes cerStarTwinkle {
  0%,100% { opacity: 0.10; transform: scale(0.5); }
  50%     { opacity: 0.9;  transform: scale(1.25); }
}
@keyframes cerStarFlow {
  0%   { transform: translate(var(--fx0), var(--fy0)) scale(0.3); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(calc(-1 * var(--fx0)), calc(-1 * var(--fy0))) scale(0.8); opacity: 0; }
}
.ceremony-charge-text.is-type {
  font-size: 24px; font-weight: 600; letter-spacing: 2px; line-height: 1.7;
  width: 92%; max-width: 360px; padding: 0 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: 0.96;
  top: 43%;
  text-shadow: 0 0 22px rgba(199,125,255,0.45);
  white-space: normal; /* 覆盖基类 nowrap，避免长文本溢出导致偏右 */
}

/* 倒数：仅中间数字保持动态，去掉整屏缩放/边缘脉冲，避免"两侧闪烁"错觉 */
.companion-ceremony.ceremony-beating { animation: cerHeartbeat 1.1s ease-in-out infinite; }
@keyframes cerHeartbeat {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.13); }
}

.ceremony-countdown-wrap {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 60vh;
}

/* Round 2：参数化背景文字（科技感纹理，倒数时显示） */
.ceremony-params {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  overflow: hidden; opacity: 0;
  transition: opacity 0.4s ease;
}
.ceremony-params.is-active { opacity: 1; }
.ceremony-param-frag {
  position: absolute;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 11px; letter-spacing: 1px;
  color: rgba(199,125,255,0.55);
  white-space: nowrap;
  animation: cerParamDrift 6s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(199,125,255,0.3);
}
.ceremony-param-frag:nth-child(2n) {
  color: rgba(123,104,238,0.5);
  font-size: 10px;
  animation-duration: 7.5s;
  animation-delay: -1.2s;
}
.ceremony-param-frag:nth-child(3n) {
  color: rgba(255,255,255,0.35);
  font-size: 9px;
  animation-duration: 5.5s;
  animation-delay: -2.5s;
}
.ceremony-param-frag:nth-child(5n) {
  color: rgba(246,196,83,0.5);
  font-size: 10.5px;
  animation-duration: 8s;
  animation-delay: -0.8s;
}
@keyframes cerParamDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  25%      { transform: translate(6px, -4px); opacity: 0.8; }
  50%      { transform: translate(-4px, 6px); opacity: 0.5; }
  75%      { transform: translate(4px, 4px); opacity: 0.8; }
}

/* 超大渐变数字 + 光晕 */
.ceremony-num {
  position: absolute;
  font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 42vh; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #FF6BFF 0%, #C77DFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 28px rgba(199,125,255,0.75));
  opacity: 0; transform: scale(0.55);
  will-change: transform, opacity;
}
/* 数字背后的脉冲光晕 */
.ceremony-num::before {
  content:''; position:absolute; left:50%; top:50%;
  width: 60vh; height: 60vh; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,255,0.35) 0%, rgba(123,104,238,0.12) 45%, transparent 70%);
  z-index: -1; animation: cerHalo 1s ease-out infinite;
}
@keyframes cerHalo {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.5; }
  50%  { transform: translate(-50%,-50%) scale(1.08); opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.5; }
}
.ceremony-num.num-3 { background: linear-gradient(135deg, #E0C3FF 0%, #8E5CFF 100%); -webkit-background-clip:text; background-clip:text; }
.ceremony-num.num-2 { background: linear-gradient(135deg, #C77DFF 0%, #FF6BFF 100%); -webkit-background-clip:text; background-clip:text; }
.ceremony-num.num-1 { background: linear-gradient(135deg, #FF6BFF 0%, #FFFFFF 100%); -webkit-background-clip:text; background-clip:text; filter: drop-shadow(0 0 40px rgba(255,255,255,0.85)); }

.ceremony-num-show { animation: cerNumIn 0.9s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
@keyframes cerNumIn {
  0%   { opacity:0; transform: scale(0.55); }
  45%  { opacity:1; transform: scale(1.12); }
  70%  { transform: scale(0.98); }
  100% { opacity:1; transform: scale(1); }
}
.ceremony-num-out { animation: cerNumOut 0.42s ease-in forwards; }
@keyframes cerNumOut {
  0%   { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(1.4); filter: blur(6px); }
}

/* 揭晓「连接成功」—— 屏幕正中间绝对居中 */
.companion-ceremony.ceremony-reveal { animation: cerRevealBg 0.8s ease-out forwards; }
@keyframes cerRevealBg {
  from { background: linear-gradient(160deg, #2E0249, #A5026B); }
  to   { background: linear-gradient(160deg, #1A1428 0%, #2E1A4A 60%, #160F24 100%); }
}
.ceremony-reveal-text {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 3; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  animation: cerRevealIn 0.7s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes cerRevealIn { from { opacity:0; transform: translateY(26px) scale(0.9); } to { opacity:1; transform: translateY(0) scale(1); } }
.ceremony-reveal-title {
  font-size: 42px; font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(135deg, #FFD6F5, #C77DFF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(199,125,255,0.6));
}
.ceremony-reveal-sub { font-size: 16.5px; color: rgba(255,255,255,0.82); letter-spacing: 2px; line-height: 1.6; padding: 0 20px; }

/* ===== AI伴侣候选：横向滑动轮播选择（元宝方案）v1.27.10放大版 ===== */
.companion-carousel {
  position: fixed; top:0; left:0; right:0; bottom:0; z-index:9998;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(165deg, #1A1428 0%, #2E1A4A 60%, #160F24 100%);
  opacity: 1; visibility: visible; padding: 56px 0 28px;
  animation: ccFadeIn 0.45s ease-out both;
}
@keyframes ccFadeIn { from { opacity:0; } to { opacity:1; } }
.cc-header { text-align: center; margin-bottom: 10px; padding: 0 20px; }
.cc-title {
  font-size: 25px; font-weight: 800; letter-spacing: 1.5px;
  background: linear-gradient(135deg,#FFD6F5,#C77DFF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(199,125,255,0.5));
}
.cc-sub { font-size: 15px; color: rgba(255,255,255,0.65); margin-top: 8px; letter-spacing: 1.5px; }

.cc-viewport { flex: 1; width: 100%; overflow: hidden; display: flex; align-items: center; }
.cc-track { display: flex; align-items: center; gap: 0; flex: 0 0 auto; position: relative; will-change: transform; padding: 0 7vw; box-sizing: content-box; }

.cc-card {
  flex: 0 0 auto;
  width: 72vw; max-width: 340px; height: 68vh; max-height: 600px;
  border-radius: 26px; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  box-sizing: border-box; position: relative;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 18px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 0.42s cubic-bezier(0.22,0.61,0.36,1), opacity 0.42s, box-shadow 0.42s;
  transform-origin: center center;
  cursor: pointer; user-select: none;
}
/* 侧卡：缩小 + 3D旋转 + 虚化 */
.cc-card.is-side-left,
.cc-card.is-side-right {
  opacity: 0.5;
  transform: scale(0.86) perspective(1100px) rotateY(14deg);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.cc-card.is-side-left { transform: scale(0.86) perspective(1100px) rotateY(-14deg); }
/* 中间卡：高亮发光 + 增强脉冲 */
.cc-card.is-center {
  opacity: 1;
  transform: scale(1) perspective(1100px) rotateY(0deg);
  box-shadow: 0 0 0 3.5px rgba(199,125,255,1), 0 0 30px rgba(199,125,255,0.5), 0 20px 60px rgba(123,104,238,0.6);
  z-index: 2;
  animation: ccCenterPulse 2.2s ease-in-out infinite;
}
@keyframes ccCenterPulse {
  0%,100% { box-shadow: 0 0 0 3.5px rgba(199,125,255,1), 0 0 30px rgba(199,125,255,0.45), 0 20px 60px rgba(123,104,238,0.55); }
  50%     { box-shadow: 0 0 0 4.5px rgba(199,125,255,1), 0 0 44px rgba(199,125,255,0.7), 0 24px 70px rgba(123,104,238,0.72); }
}

/* 卡内主题色（三变体） */
.cc-card.variant-heal   { background: linear-gradient(160deg,#FFF4E9,#FFE3C7); }
.cc-card.variant-perfect{ background: linear-gradient(160deg,#F3E9FF,#E2D0FF); }
.cc-card.variant-vivid  { background: linear-gradient(160deg,#E9F6FF,#D2ECFB); }

.cc-badge {
  position: absolute; top: 22px; right: 14px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg,#7B68EE,#D4537E);
  padding: 4px 12px; border-radius: 20px; box-shadow: 0 2px 12px rgba(123,104,238,0.45);
  z-index: 3;
}
.cc-avatar {
  width: 160px; height: 160px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 72px;
  margin: 10px 0 14px; border: 3px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  animation: ccFloat 3.4s ease-in-out infinite;
}
@keyframes ccFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cc-card.variant-heal   .cc-avatar { background: linear-gradient(135deg,#FFCA8A,#F4A35A); }
.cc-card.variant-perfect .cc-avatar { background: linear-gradient(135deg,#C9A0F4,#7B68EE); }
.cc-card.variant-vivid  .cc-avatar { background: linear-gradient(135deg,#A0E0F4,#5AC8F4); }
.cc-card.variant-princess .cc-avatar { background: linear-gradient(135deg,#FFE0EE,#FFB6D9); }
.cc-card.variant-lolita   .cc-avatar { background: linear-gradient(135deg,#F0D0FF,#E0A0F0); }

/* 轮播卡片头像：真实照片（替代emoji） */
.cc-avatar-img {
  width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover; border: 3px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  animation: ccFloat 3.4s ease-in-out infinite;
  margin: 10px 0 14px;
}
.cc-avatar-fallback {
  width: 160px; height: 160px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; border: 3px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  animation: ccFloat 3.4s ease-in-out infinite;
  margin: 10px 0 14px;
}

.cc-name { font-size: 28px; font-weight: 800; color: #2A203A; letter-spacing: 1px; }
.cc-age { font-size: 15px; font-weight: 600; color: rgba(42,32,58,0.55); margin-left: 5px; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.cc-chip {
  font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  background: rgba(123,104,238,0.12); color: #6B4FB0;
}
.cc-card.variant-heal   .cc-chip { background: rgba(244,163,90,0.18); color: #B5702A; }
.cc-card.variant-vivid  .cc-chip { background: rgba(90,200,244,0.18); color: #2C7FA6; }

.cc-quote {
  flex: 1; display: flex; align-items: center; text-align: center;
  font-size: 16px; line-height: 1.6; color: #4A3D5C; font-style: italic;
  padding: 8px 6px; max-width: 94%;
}
.cc-theme {
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px;
  padding: 6px 18px; border-radius: 20px; color: #fff; margin-top: 6px;
}
.cc-card.variant-heal   .cc-theme { background: linear-gradient(135deg,#F4A35A,#E08A3C); }
.cc-card.variant-perfect .cc-theme { background: linear-gradient(135deg,#C77DFF,#7B68EE); }
.cc-card.variant-vivid  .cc-theme { background: linear-gradient(135deg,#5AC8F4,#3AA0D4); }

/* 底部操作区 */
.cc-footer {
  width: 100%; padding: 16px 28px 10px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-sizing: border-box;
}
.cc-hint { font-size: 15px; color: rgba(255,255,255,0.72); letter-spacing: 1.5px; }
.cc-confirm {
  width: 100%; max-width: 360px; padding: 17px 0; border: none; border-radius: 32px;
  font-size: 20px; font-weight: 800; letter-spacing: 1.5px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg,#7B68EE 0%, #D4537E 100%);
  box-shadow: 0 10px 32px rgba(212,83,126,0.5);
  animation: ccPulseBtn 2s ease-in-out infinite;
}
@keyframes ccPulseBtn {
  0%,100% { transform: scale(1); box-shadow: 0 8px 26px rgba(212,83,126,0.40); }
  50%     { transform: scale(1.03); box-shadow: 0 10px 34px rgba(212,83,126,0.6); }
}
.cc-confirm:active { transform: scale(0.97); }
.ai-builder-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C0A0F4, #A0D4F4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
}

/* AI卡片卡通头像 —— 加大版 */
.ai-card-avatar {
  width: 92px;
  height: 92px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  background: linear-gradient(135deg, #C0A0F4, #7B68EE);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 12px rgba(123,104,238,0.25);
  flex-shrink: 0;
}
.ai-card-avatar.type-0 { background: linear-gradient(135deg, #C0A0F4, #A0D4F4); }
.ai-card-avatar.type-1 { background: linear-gradient(135deg, #F4C0A0, #C0A0F4); }
.ai-card-avatar.type-2 { background: linear-gradient(135deg, #A0D4F4, #C0A0F4); }
/* AI卡片头像：有照片时显示真实图片 */
.ai-card-avatar.has-photo {
  padding: 0; background: none; border: 2.5px solid #fff;
  overflow: hidden;
}
.ai-card-avatar.has-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 13px;
}


/* ===== 心动信箱（关系中心）· 深色磨砂玻璃 v2（20260708_2350） ===== */
.xinbox-page {
  flex-direction: column;
  background: linear-gradient(165deg, #1A1428 0%, #221833 55%, #150F22 100%);
}

/* 顶部标题栏：全屏宽度磨砂玻璃圆角顶卡片 */
.xinbox-topcard {
  display: flex; align-items: center; gap: 8px;
  margin: calc(40px + env(safe-area-inset-top, 0px)) 12px 6px;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,74,149,0.30), rgba(123,66,245,0.26));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(157,120,232,0.50);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  flex-shrink: 0;
}
.xinbox-back {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.xinbox-back:active { opacity: .7; }
.xinbox-heart { font-size: 18px; flex-shrink: 0; }
.xinbox-pagetitle { font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0; }
.xinbox-top-tip {
  flex: 1; text-align: right; margin-left: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.xinbox-tip-line1, .xinbox-tip-line2 {
  font-size: 11px; line-height: 1.4;
  color: rgba(255,255,255,0.82);
}

/* 心动信箱·顶部 Tab 切换（20260718） */
.xinbox-tabs {
  display: flex; gap: 8px; padding: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(157,120,232,0.40);
  border-radius: 16px; margin-bottom: 4px; flex-shrink: 0;
}
.xinbox-tab {
  flex: 1; text-align: center; padding: 10px 4px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.62);
  border-radius: 12px; cursor: pointer; transition: all .2s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.xinbox-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(123,104,238,0.88), rgba(212,83,126,0.88));
  box-shadow: 0 4px 14px rgba(123,66,245,0.30);
}
.xinbox-panel { display: none; flex-direction: column; gap: 14px; }
.xinbox-panel.active { display: flex; }
.xinbox-sub {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(157,120,232,0.55);
  border-radius: 20px; padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

/* 五大分类模块卡片 */
.xinbox-body { padding: 8px 14px 30px; display: flex; flex-direction: column; gap: 14px; }
.xinbox-card {
  background: rgba(255,255,255,0.10);            /* #ffffff18 */
  border: 1px solid rgba(157,120,232,0.55);      /* #9D78E8 */
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.xinbox-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(123,66,245,0.28);
}
.xinbox-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.xinbox-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(157,120,232,0.18); border: 1px solid rgba(157,120,232,0.40);
}
.xinbox-card-title { font-size: 16px; font-weight: 600; color: #fff; flex: 1; }

/* 心动信箱·Tab 面板内子区块标题 */
.xinbox-sub-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 12px;
}
.xinbox-sub-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* 心动信箱·申请退币入口（右对齐小胶囊） */
.xinbox-refund-entry {
  margin-left: auto; font-size: 12px; font-weight: 600; color: #FFC66B;
  background: rgba(255,198,107,0.12); border: 1px solid rgba(255,198,107,0.35);
  padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .18s, transform .12s;
}
.xinbox-refund-entry:active { transform: scale(0.94); background: rgba(255,198,107,0.22); }

/* 卡片下半区：内凹浅灰占位区 */
.xinbox-card-body {
  position: relative;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 14px 16px;
  min-height: 66px;
  display: flex; align-items: center; justify-content: center;
}
.xinbox-empty {
  font-size: 13px; color: #C8C2D9; text-align: center; line-height: 1.6;
  padding-right: 56px; /* 给右下角「去匹配」留位置 */
}
.xinbox-goto {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 13px; color: #C9B6F5; cursor: pointer;
  display: flex; align-items: center; gap: 2px;
  -webkit-tap-highlight-color: transparent;
}
.xinbox-goto:active { opacity: .7; }

/* 有数据时的条目卡（深色适配） */
.xinbox-card-body .msg-card {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(157,120,232,0.40);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.xinbox-card-body .msg-card:last-child { margin-bottom: 0; }
.xinbox-card-body .msg-card-name { font-size: 14px; font-weight: 600; color: #fff; }
.xinbox-card-body .msg-card-contact { font-size: 12px; color: #FFA0D2; margin-top: 4px; word-break: break-all; }
/* 已解锁嘉宾卡·申请退币链接 */
.xinbox-card-body .msg-card-refund { font-size: 11.5px; color: #FFC66B; margin-top: 8px; cursor: pointer; display: inline-block; opacity: .9; }
.xinbox-card-body .msg-card-refund:active { opacity: .6; }

/* ===== 分身托管页 ===== */
.clone-host-body { padding: 14px 16px 30px; }

.host-stat-card {
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 12px 32px rgba(123,104,238,0.28);
}
.host-stat-row { display: flex; justify-content: space-between; }
.host-stat-cell { text-align: center; flex: 1; }
.host-stat-label { font-size: 11px; opacity: .85; }
.host-stat-val { font-size: 22px; font-weight: 800; margin-top: 2px; }
.host-progress { margin-top: 14px; height: 6px; border-radius: 6px; background: rgba(255,255,255,0.25); overflow: hidden; }
.host-progress-bar { height: 100%; width: 0; border-radius: 6px; transition: width .3s, background .3s; }
.host-progress-bar.normal { background: #fff; }
.host-progress-bar.warn { background: #ffb042; }
.host-progress-bar.full { background: #ff5a5a; }
.host-progress-hint { font-size: 11px; opacity: .92; margin-top: 8px; text-align: center; }

.host-section-title { font-size: 14px; font-weight: 700; color: #333; margin: 22px 2px 10px; }

.host-setting-card, .host-add-card, .host-item {
  background: #fbfaff;
  border: 1px solid #efeaf9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 12px 24px rgba(123,104,238,0.08), 0 4px 8px rgba(123,104,238,0.04);
}
.host-add-card { margin-bottom: 4px; }
.host-empty {
  padding: 20px 16px;
  border-radius: 8px;
  background: #fbfaff;
  border: 1px dashed #e7e2f5;
  color: #aaa;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(123,104,238,0.04);
}

.host-field { margin-bottom: 12px; }
.host-field > label { display: block; font-size: 13px; color: #555; margin-bottom: 8px; }

.host-mode-group { display: flex; gap: 8px; }
.host-mode-opt {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-radius: 8px;
  background: #f6f5fc;
  border: 1.5px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all .2s;
}
.host-mode-opt small { display: block; font-size: 10px; font-weight: 400; color: #999; margin-top: 2px; }
.host-mode-opt.active {
  background: rgba(255,255,255,0.85);
  border-color: #7B68EE;
  color: #7B68EE;
  box-shadow: inset 0 0 0 1px rgba(123,104,238,0.35), 0 4px 12px rgba(123,104,238,0.12);
}
.host-mode-opt .host-opt-desc {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #999;
  margin-top: 2px;
  line-height: 1.3;
}

.host-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1.5px solid #e7e2f5;
  font-size: 14px;
  color: #333;
  background: #fbfaff;
}
.host-input:focus { outline: none; border-color: #7B68EE; }

.host-save-btn, .host-add-btn {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.host-add-btn { margin-top: 14px; }

/* 每日任务引导：从"训练你的分身"入口进来时，对关键按钮做脉冲提示，吸引点击（任意按钮通用） */
.task-pulse {
  position: relative;
  animation: hostSavePulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(123,104,238,0.55);
}
.task-pulse::after {
  content: var(--pulse-text, '👉 点这里完成，立得100币');
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
  color: #7B68EE;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(123,104,238,0.28);
  border: 1px solid rgba(123,104,238,0.25);
  animation: hostSaveHint 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hostSavePulse {
  0%   { box-shadow: 0 0 0 0 rgba(123,104,238,0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 12px rgba(123,104,238,0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(123,104,238,0); transform: scale(1); }
}
@keyframes hostSaveHint {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;    transform: translateX(-50%) translateY(-3px); }
}

.host-list { display: flex; flex-direction: column; gap: 10px; }
.host-empty {
  padding: 20px 16px;
  border-radius: 14px;
  background: #f7f7fb;
  color: #aaa;
  font-size: 12px;
  text-align: center;
}
.host-item {
  padding: 14px;
}
.host-item-top { display: flex; align-items: center; justify-content: space-between; }
.host-item-name { font-size: 15px; font-weight: 700; color: #333; }
.host-badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
.host-badge.active { background: rgba(123,104,238,0.12); color: #7B68EE; }
.host-badge.paused { background: #f0f0f4; color: #999; }
.host-badge.ended { background: #fff5f5; color: #ff5a5a; }
.host-item-meta { font-size: 12px; color: #999; margin: 8px 0 12px; }
.host-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.host-mini-btn {
  flex: 1;
  min-width: 60px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1.5px solid #e7e2f5;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.host-mini-btn.primary { background: rgba(123,104,238,0.10); border-color: #7B68EE; color: #7B68EE; }
.host-mini-btn.danger { border-color: #f3c9d6; color: #D4537E; background: #fff5f8; }

/* 聊天面板内的托管横幅 */
.clone-host-banner {
  background: linear-gradient(135deg, rgba(123,104,238,0.10), rgba(212,83,126,0.10));
  border: 1.5px solid rgba(123,104,238,0.25);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #6a5a9e;
  line-height: 1.7;
  text-align: center;
}
.clone-host-banner.paused { opacity: .7; }

/* ===== 分身托管设置 · 深色玻璃主题 + 阶段2（实时推进可视化） ===== */
.diary-page#cloneHostPage {
  background: radial-gradient(120% 80% at 50% 0%, #1d1430 0%, #120c1d 60%);
}
#cloneHostPage .diary-header {
  background: rgba(28,20,48,0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-top: 48px;
}
#cloneHostPage .diary-back {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); color: #fff;
}
#cloneHostPage .diary-title { color: #fff; }
.clone-host-body { background: transparent; }

.host-section-title { color: rgba(255,255,255,0.85); }

.host-setting-card, .host-add-card, .host-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e8e4f5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.host-field > label { color: rgba(255,255,255,0.70); }
.host-mode-opt {
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.72);
  border: 1.5px solid transparent;
}
.host-mode-opt small { color: rgba(255,255,255,0.45); }
.host-mode-opt.active {
  background: rgba(123,104,238,0.22); border-color: #7B68EE; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(123,104,238,0.4), 0 4px 12px rgba(123,104,238,0.3);
}
.host-mode-opt .host-opt-desc { color: rgba(255,255,255,0.45); }
.host-input {
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.14); color: #fff;
}
.host-input:focus { border-color: #7B68EE; }
.host-input option { background: #15101f; color: #fff; }
.host-empty {
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.45);
}
.host-item-name { color: #fff; }
.host-item-meta { color: rgba(255,255,255,0.55); }
.host-mini-btn {
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
}
.host-mini-btn.primary { background: rgba(123,104,238,0.20); border-color: #7B68EE; color: #fff; }
.host-mini-btn.danger { border-color: rgba(255,120,150,0.40); color: #ff9bb3; background: rgba(255,90,120,0.10); }
.host-mini-btn:active { transform: scale(0.96); }
#cloneHostPage .host-badge.paused { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.6); }
#cloneHostPage .host-badge.ended { background: rgba(255,90,120,0.12); color: #ff9bb3; }

/* 情感阶段进度条（6 阶段） */
.host-stage { margin: 8px 0 2px; }
.host-stage-bar { display: flex; gap: 4px; }
.host-stage-dot {
  flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,0.12);
}
.host-stage-dot.done { background: linear-gradient(135deg, #7B68EE, #D4537E); }
.host-stage-dot.cur {
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  animation: hostStagePulse 1.4s ease-in-out infinite;
}
@keyframes hostStagePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.host-stage-label {
  font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.host-stage-label b { color: #C9B8F0; }
.host-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #7CE0A8; font-weight: 600;
}
.host-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #7CE0A8; animation: hostLiveBlink 1.2s infinite;
}
@keyframes hostLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.clone-host-continue {
  margin-top: 10px;
  padding: 9px 22px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.clone-host-continue:disabled { opacity: .55; cursor: default; }
.clone-host-exit {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #D4537E;
  cursor: pointer;
  text-decoration: underline;
}

/* ===== 优化择偶条件引导弹窗（v1.24） ===== */
.match-guide-overlay {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 1002;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 38, 0.55);
  padding: 24px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.match-guide-overlay.active { display: flex; }
.match-guide-card {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 24px;
  padding: 26px 22px 22px;
  box-shadow: 0 20px 50px rgba(123, 104, 238, 0.25);
  text-align: center;
  animation: mgPop .25s ease;
}
@keyframes mgPop {
  from { transform: translateY(16px) scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mg-icon { font-size: 34px; margin-bottom: 8px; }
.mg-title { font-size: 19px; font-weight: 700; color: #1A1A26; margin-bottom: 6px; }
.mg-sub { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 14px; }
.mg-format {
  background: linear-gradient(135deg, #FAF7FF, #F3EDFF);
  border: 1px solid #E8DFF9;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  text-align: left;
}
.mg-format .fmt-main { font-size: 15px; font-weight: 700; color: #7B68EE; line-height: 1.6; }
.mg-format .fmt-eg { font-size: 13px; color: #999; margin-top: 4px; }
.mg-tip {
  background: #FFF5F9;
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 18px;
  text-align: left;
  font-size: 13px;
  color: #555;
  line-height: 1.95;
}
.mg-btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mg-btn-ghost {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 13px;
  cursor: pointer;
}

/* ===================== 心动币钱包悬浮弹窗 ===================== */
.coin-wallet-overlay {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 1003;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(26, 26, 38, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 58px 16px 24px;
}
.coin-wallet-overlay.active { display: flex; }
.coin-wallet-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 84vh;
  overflow-y: auto;
  background: #FAF7FF;
  border: 1px solid rgba(168, 120, 226, 0.18);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(123, 104, 238, 0.28);
  padding: 22px 18px 18px;
  animation: cwPop .26s ease;
}
@keyframes cwPop {
  from { transform: translateY(-14px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.cw-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(123, 104, 238, 0.1); color: #7B68EE;
  font-size: 15px; cursor: pointer; z-index: 2;
}

/* 模块1：余额核心区 */
.cw-balance { display: flex; align-items: center; gap: 12px; }
.cw-bal-left { display: flex; flex-direction: column; align-items: center; }
.cw-coin { font-size: 26px; line-height: 1; }
.cw-bal-label { font-size: 13px; color: #777; margin-top: 2px; }
.cw-bal-num {
  flex: 1; font-size: 46px; font-weight: 800; line-height: 1.15; text-align: left;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cw-recharge {
  padding: 11px 18px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, #7B68EE, #9B6BE8); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(123, 104, 238, 0.32);
}
.cw-bal-note { font-size: 12px; color: #9a93b5; text-align: center; margin-top: 8px; }

/* 通用分区 */
.cw-sec { margin-top: 16px; }
.cw-sec-head { font-size: 16px; font-weight: 700; color: #222; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cw-sec-sub { font-size: 11px; color: #aaa; font-weight: 400; }

/* 签到领币模块：气泡稍大，强化首屏视觉 */
.cw-signin-sec { margin-top: 16px; }
.cw-signin-sec .cw-sec-head { font-size: 17px; }
.cw-row.cw-signin-row { padding: 18px 16px; border-radius: 18px; background: #fff; border: 1.5px solid #E8DFF9; box-shadow: 0 3px 12px rgba(123,104,238,0.06); }
.cw-signin-row .cw-row-name { font-size: 17.5px; }
.cw-signin-row .cw-row-desc { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.cw-signin-btn { padding: 13px 22px; font-size: 16.5px; border-radius: 18px; }

/* 行卡片 */
.cw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px; border-radius: 16px;
  background: #fff; border: 1px solid #EFEAF9; margin-bottom: 8px;
  width: 100%; box-sizing: border-box;
}
.cw-ico { font-size: 26px; width: 34px; text-align: center; flex-shrink: 0; }
.cw-row-main { flex: 1; text-align: left; min-width: 0; }
.cw-row-name { font-size: 16.5px; font-weight: 600; color: #222; }
.cw-row-name small { font-size: 11px; color: #D4537E; background: #FFF0F5; border-radius: 6px; padding: 2px 6px; margin-left: 6px; }
.cw-row-desc { font-size: 13.5px; color: #999; margin-top: 2px; }
.cw-claim-btn {
  padding: 12px 18px; border: none; border-radius: 16px;
  background: linear-gradient(135deg, #7B68EE, #D4537E); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.cw-claim-btn.done { background: #EEE; color: #aaa; }

/* 每日签到主页弹窗（一天一次） */
.daily-signin-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 10, 28, 0.72); z-index: 11000;
  display: none; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(8px);
}
.daily-signin-overlay.active { display: flex; animation: fadeIn 0.25s ease; }
.daily-signin-card {
  width: 100%; max-width: 340px; text-align: center;
  background: linear-gradient(135deg, rgba(38,28,66,0.96), rgba(26,18,46,0.96));
  border: 1px solid rgba(168,120,226,0.28); border-radius: 24px;
  padding: 32px 24px 28px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  animation: popUp 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.daily-signin-close {
  position: absolute; top: 12px; right: 14px; font-size: 20px; color: #b8aadd;
  background: transparent; border: none; cursor: pointer;
}
.daily-signin-icon { font-size: 52px; margin-bottom: 8px; line-height: 1; }
.daily-signin-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.daily-signin-sub { font-size: 15px; color: #E6DDFA; line-height: 1.6; margin-bottom: 6px; }
.daily-signin-sub b { color: #FFD56A; font-size: 18px; }
.daily-signin-note { font-size: 12px; color: #998DBF; margin-bottom: 22px; }
.daily-signin-btn {
  width: 100%; padding: 15px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, #7B68EE, #D4537E); color: #fff;
  font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(123,104,238,0.35);
}
.daily-signin-btn:active { transform: scale(0.98); }
.daily-signin-btn.done { background: #4CAF50; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popUp { from { opacity: 0; transform: scale(0.86) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.cw-newbie {
  margin-top: 14px; padding: 14px 16px;
  background: linear-gradient(135deg, #FFF0F6, #FFE7F1);
  border: 1px solid #FFC9DD; border-radius: 18px;
}
.cw-sec-head.pink { color: #D4537E; }
.cw-newbie-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #7a4a5e; padding: 5px 0; }
.cw-newbie-reward { color: #D4537E; font-weight: 700; }
.cw-newbie-reward i { font-style: normal; font-size: 11px; color: #b07c8e; margin-left: 4px; }

/* 模块4：长效裂变（浅蓝卡片 + 黑色描边突出重点）*/
.cw-invite {
  margin-top: 14px; padding: 14px 16px;
  background: linear-gradient(135deg, #EAF3FF, #E2EFFF);
  border: 1.5px solid #1A1A26; border-radius: 18px;
}
.cw-sec-head.blue { color: #3B82F6; }
.cw-invite-desc { font-size: 13px; color: #5a6b85; line-height: 1.7; margin-bottom: 10px; }
.cw-invite-desc b { color: #3B82F6; }
.cw-invite-btn {
  width: 100%; padding: 15px; border: none; border-radius: 16px;
  background: #1A1A26; color: #fff;
  font-size: 16.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 26, 38, 0.28);
}

/* 模块5：底部增值小功能 */
.cw-quick { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cw-quick-item {
  background: #fff; border: 1px solid #EFEAF9; border-radius: 14px;
  padding: 12px 4px; text-align: center; cursor: pointer;
}
.cw-quick-ico { font-size: 24px; }
.cw-quick-name { font-size: 14px; color: #333; margin-top: 4px; font-weight: 600; }
.cw-quick-cost { font-size: 12px; color: #999; margin-top: 2px; }

/* 邀请模块统计（统一黑色）*/
.cw-invite-stat {
  font-size: 15px; font-weight: 700; color: #1A1A26 !important;
  background: #F0ECF6; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; text-align: center;
}

/* ===== 邀请好友分享弹层 ===== */
.invite-share-overlay {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1004;
  display: none; align-items: center; justify-content: center;
  background: rgba(26,26,38,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 24px 18px;
}
.invite-share-overlay.active { display: flex; }
.invite-share-card {
  position: relative; width: 100%; max-width: 380px;
  background: linear-gradient(165deg, #FFFFFF 0%, #F4EEFF 100%);
  border: 1px solid rgba(168,120,226,0.2); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(123,104,238,0.3);
  padding: 26px 20px 22px; text-align: center; animation: cwPop .26s ease;
}
.invite-share-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: none; border-radius: 50%; background: rgba(123,104,238,0.1);
  color: #7B68EE; font-size: 15px; cursor: pointer;
}
.invite-share-title { font-size: 19px; font-weight: 800; color: #1A1A26; margin-bottom: 8px; }
.invite-share-sub { font-size: 13.5px; color: #666; line-height: 1.6; margin-bottom: 16px; }
.invite-share-sub b { color: #D4537E; }
.invite-share-linkbox { display: flex; gap: 8px; margin-bottom: 12px; }
.invite-share-input {
  flex: 1; min-width: 0; font-size: 13px; color: #444; padding: 11px 12px;
  border: 1px solid #E0D6F5; border-radius: 12px; background: #FAF7FF;
}
.invite-share-copy {
  flex-shrink: 0; padding: 0 20px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #7B68EE, #9B6BE8); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.invite-share-stat {
  font-size: 14px; font-weight: 700; color: #1A1A26;
  background: rgba(26,26,38,0.06); border-radius: 10px; padding: 10px;
  margin-bottom: 12px;
}
.invite-share-tip { font-size: 12px; color: #999; line-height: 1.6; }

/* ================================================================
   合并自 styles.premium.css（原覆盖升级层，置于末尾确保最终生效）
   ================================================================ */
/* 心动AI - Premium UI v2 升级层 */
/* 此文件覆盖基础样式，实现粉紫轻奢AI风升级 */
/* 如需回退，从 styles.css 移除 @import 即可 */

/* ================================================================
   一、全局基底升级
   ================================================================ */

/* body 弥散粉紫背景 */
body {
  background: linear-gradient(145deg, #f0edff 0%, #f7f5ff 40%, #fdf4ff 70%, #f5f0ff 100%);
  background-attachment: fixed;
}

/* phone-frame 提升阴影层次 */
.phone-frame {
  background: #faf9ff;
  box-shadow:
    0 8px 40px rgba(123,104,238,0.15),
    0 2px 8px rgba(123,104,238,0.08);
}

/* ================================================================
   二、顶部栏磨砂玻璃升级
   ================================================================ */

.top-bar {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(123,104,238,0.08);
}

.top-name {
  color: #1A1A26;
  font-weight: 800;
}

/* 通知面板按钮：统一深色阴影 */
#journeyPanelNotify .journey-wx-btn,
.journey-panel .journey-wx-btn {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
#journeyPanelNotify .journey-wx-btn:active,
.journey-panel .journey-wx-btn:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}

/* 功能岛按钮升级 */
.island-btn {
  background: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(123,104,238,0.18);
  color: #4a4a6a;
  border-radius: var(--r-full);
  transition: all var(--duration-base) var(--ease-smooth);
  box-shadow: var(--shadow-xs);
}

/* 功能岛容器增加左右边距，避免贴边 */
.function-island {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.island-btn:first-child {
  margin-left: 0px;
}
.island-btn:active {
  transform: scale(0.93);
  box-shadow: none;
}
.island-btn.active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,26,38,0.30);
}

/* ================================================================
   三、个人中心页 — 顶部用户信息区重构
   ================================================================ */

/* 大幅增加顶部卡片留白和层次感 */
.profile-card-v3 {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px var(--space-page) 6px;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
}

/* 头像双圈设计：外圈渐变光环 + 内圈白底 */
.profile-avatar-v3 {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #7B68EE, #D4537E, #A78BFA);
  border-radius: 50%;
  margin: 0 auto 14px;
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 4px rgba(123,104,238,0.12),
    0 6px 20px rgba(123,104,238,0.25);
  position: relative;
}

.profile-avatar-v3::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7B68EE, #9B59B6);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}

/* 头像emoji包裹层 */
.profile-avatar-v3 > span {
  position: relative;
  z-index: 1;
  font-size: 30px;
  line-height: 1;
}
/* 【v20260726 修复】有真实头像图时让紫色 ::after 伪元素透明，
   否则 backgroundImage 会被 inset:3px 紫色圆完全盖住，看起来像"蒙了一层紫色" */
.profile-avatar-v3.has-image::after { display: none; }
.profile-avatar-v3.has-image { background: transparent; padding: 0; box-shadow: 0 0 0 4px rgba(123,104,238,0.12), 0 6px 20px rgba(123,104,238,0.25); }
.profile-avatar-v3.has-image > span { display: none; }
/* 头像上传提示（悬停/点击时显示） */
.avatar-upload-hint {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #7B68EE, #A878E2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
  box-shadow: 0 2px 6px rgba(123,104,238,0.4);
  z-index: 2; border: 2px solid #fff;
}
.profile-avatar-v3:hover .avatar-upload-hint,
#profileAvatar:active .avatar-upload-hint { display: flex !important; }

/* 姓名样式升级 */
.profile-name-v3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}

/* ================================================================
   会员横幅：长条形卡片，左大字+右按钮
   ================================================================ */
.profile-tier-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(123,104,238,0.15);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 16px 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(123,104,238,0.08);
}

.profile-tier-banner-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-tier-banner-title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.2px;
}

.profile-tier-banner-sub {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.profile-tier-banner-btn {
  font-size: 15px;
  font-weight: 700;
  color: #7B68EE;
  background: rgba(123,104,238,0.08);
  border: 1px solid rgba(123,104,238,0.20);
  padding: 9px 22px;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.2s;
  animation: profileUpgradePulse 1.8s ease-in-out infinite;
}
.profile-tier-banner-btn:active {
  background: rgba(123,104,238,0.15);
  transform: scale(0.96);
}
/* 升级按钮引导点击：呼吸光环 + 轻微放大 */
@keyframes profileUpgradePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,83,126,0); transform: scale(1); }
  50% { box-shadow: 0 0 0 9px rgba(212,83,126,0.16); transform: scale(1.04); }
}

/* ================================================================
   四、个人中心菜单分区升级
   ================================================================ */

/* 菜单包裹区：适度留白，不要过宽 */
.profile-menu-wrap {
  padding: 0 12px 20px;
}

/* 分区标题：浅紫加粗，左侧色条 */
.menu-section-label {
  font-size: 13px;
  color: #9B8FD8;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 16px 4px 8px;
  display: flex; align-items: center; gap: 6px;
}
.menu-section-label::before {
  content: '';
  width: 3px; height: 12px;
  background: linear-gradient(180deg, #7B68EE, #D4537E);
  border-radius: 2px;
}
.menu-section-label:first-of-type { padding-top: 2px; }

/* 菜单项：统一标准化，玻璃拟态 */
.menu-item {
  display: flex; align-items: center;
  padding: 14px 16px;
  background: var(--glass-bg);
  border: 1px solid rgba(123,104,238,0.10);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--duration-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
}
.menu-item:active {
  background: rgba(123,104,238,0.06);
  transform: scale(0.99);
  box-shadow: none;
}

/* 菜单图标：渐变底色圆角 */
.menu-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--c-primary-bg), #ede8ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.menu-text {
  flex: 1;
  font-size: 16px;
  color: var(--c-text-primary);
  font-weight: 500;
}

.menu-arrow {
  color: #c8c0e0;
  font-size: 14px;
  font-weight: 300;
}

/* 危险操作项 */
.menu-item-danger {
  background: rgba(255,245,245,0.8);
  border: 1px solid rgba(220,38,38,0.12);
  box-shadow: none;
}
.menu-item-danger:active { background: rgba(255,235,235,0.9); }
.menu-item-danger .menu-icon {
  background: linear-gradient(135deg, #fff0f0, #ffe8e8);
}

/* NEW标签重做：磨砂渐变 */
.menu-new-badge {
  font-size: 10px; color: #fff;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  padding: 2px 8px; border-radius: var(--r-full);
  font-weight: 700; margin-right: 8px;
  box-shadow: 0 2px 6px rgba(123,104,238,0.3);
}

/* 退出登录弱化处理 */
.profile-logout-link {
  text-align: center;
  padding: 16px 0 8px;
  font-size: 13px;
  color: var(--c-text-hint);
  cursor: pointer;
  transition: color var(--duration-fast);
}
.profile-logout-link:active { color: #dc2626; }

/* ================================================================
   五、设置页/子页面列表项升级
   ================================================================ */

.set-item {
  display: flex; align-items: center;
  padding: var(--space-item) 14px;
  background: var(--glass-bg);
  border: 1px solid rgba(123,104,238,0.10);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  cursor: pointer;
  gap: 0;
  transition: all var(--duration-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.set-item:active {
  background: rgba(123,104,238,0.06);
  transform: scale(0.99);
}

.set-item-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--c-primary-bg), #ede8ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  margin-right: 12px;
}

.set-item-text {
  flex: 1; font-size: 15px;
  color: var(--c-text-primary); font-weight: 500;
}

.set-item-hint { font-size: 12px; color: var(--c-text-tertiary); margin-right: 4px; }
.set-item-arrow { color: #c8c0e0; font-size: 14px; }

.set-section-title {
  font-size: 12px; font-weight: 700; color: #9B8FD8;
  padding: 14px 4px 8px; margin-top: 0;
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 6px;
}
.set-section-title::before {
  content: '';
  width: 3px; height: 11px;
  background: linear-gradient(180deg, #7B68EE, #D4537E);
  border-radius: 2px;
}
.set-section-title:first-child { padding-top: 0; }

/* ================================================================
   六、底部输入栏升级
   ================================================================ */

.input-bar {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(123,104,238,0.08);
}

.input-field {
  border-radius: var(--r-full);
  border: 1.5px solid rgba(123,104,238,0.18);
  background: rgba(245,240,255,0.6);
  transition: all var(--duration-base);
  box-shadow: inset 0 1px 3px rgba(123,104,238,0.06);
}
.input-field:focus {
  border-color: #7B68EE;
  background: rgba(245,240,255,0.9);
  box-shadow:
    inset 0 1px 3px rgba(123,104,238,0.06),
    0 0 0 3px rgba(123,104,238,0.10);
}

.input-send {
  background: linear-gradient(135deg, #7B68EE, #9370DB);
  box-shadow: 0 3px 12px rgba(123,104,238,0.35);
  transition: all var(--duration-fast) var(--ease-smooth);
}
.input-send:active {
  transform: scale(0.88);
  box-shadow: none;
}

.input-plus {
  border: 1.5px solid rgba(123,104,238,0.18);
  background: rgba(245,240,255,0.6);
  color: #9B8FD8;
  transition: all var(--duration-fast);
}
.input-plus:active {
  background: var(--c-primary-bg);
  border-color: #7B68EE;
  transform: scale(0.93);
}

/* ================================================================
   七、底部area磨砂升级
   ================================================================ */

.bottom-area {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(123,104,238,0.08);
}

/* skill pill升级 */
.skill-pill {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(123,104,238,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--duration-fast) var(--ease-smooth);
}
.skill-pill:active {
  transform: scale(0.94);
  background: var(--c-primary-bg);
  border-color: #7B68EE;
  color: #7B68EE;
}

/* ================================================================
   八、欢迎页行动按钮升级
   ================================================================ */

.welcome-action-btn {
  background: rgba(255,255,255,0.92);
  border: 1.5px solid rgba(123,104,238,0.22);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
  color: #4a4a6a;
  transition: all var(--duration-base) var(--ease-smooth);
}
.welcome-action-btn:hover {
  background: var(--c-primary-bg);
  border-color: #7B68EE;
  color: #7B68EE;
  box-shadow: 0 4px 16px rgba(123,104,238,0.15);
}
.welcome-action-btn:active {
  transform: scale(0.94);
  box-shadow: none;
}

/* ================================================================
   九、消息气泡升级
   ================================================================ */

/* ================================================================
   十、嘉宾卡片升级（样式统一由 styles.chat.css 的 .guest-card-inline 一套定义，
        此处不再定义 .msg-row.bot .msg-bubble，避免后加载覆盖 chat.css 中
        .guest-cards-row 的专用透明样式导致卡片变方/出边框
   ================================================================ */

/* ================================================================
   十一、底部action-pill升级（匹配结束三按钮）
   ================================================================ */

.action-pill {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-smooth);
}
.action-pill:active {
  transform: scale(0.94);
  box-shadow: none;
}

/* ================================================================
   十二、分身装扮页全屏升级（参考Copilot风格）
   ================================================================ */

.clone-outfit-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 20px !important;
  height: 100%;
  overflow: hidden;
}

/* 顶部引导文案 */
.clone-outfit-intro {
  text-align: center;
  padding: 24px 8px 16px;
  flex-shrink: 0;
}
.clone-outfit-intro-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.clone-outfit-intro-text {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  max-width: 280px;
}

/* 轮播占满中间空间 */
.clone-carousel-full {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clone-carousel-full .clone-carousel-track {
  display: flex;
  transition: transform 0.35s ease;
  height: 100%;
  width: 100%;
}
.clone-carousel-full .clone-carousel-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
.clone-carousel-full .clone-carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

/* 轮播按钮放大 */
.clone-carousel-full .clone-carousel-btn {
  width: 40px;
  height: 40px;
  font-size: 20px;
  background: rgba(255,255,255,0.95);
  border: 1.5px solid rgba(123,104,238,0.15);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.clone-carousel-full .clone-carousel-prev { left: 4px; }
.clone-carousel-full .clone-carousel-next { right: 4px; }

/* 圆点指示器 */
.clone-dots {
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* 底部操作区 */
.clone-bottom-area {
  width: 100%;
  max-width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.clone-bottom-area .clone-name-input-wrap {
  width: 100%;
  max-width: none;
  margin-top: 0;
}
.clone-bottom-area .clone-name-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid #e8e4f0;
  background: #f8f7fc;
  font-size: 15px;
  color: #333;
  text-align: left;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.clone-bottom-area .clone-name-input:focus { border-color: #7B68EE; }
.clone-bottom-area .clone-name-input::placeholder { color: #b8b4c8; }

/* 黑色创建按钮 */
.clone-create-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: var(--ink-900);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
}
.clone-create-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* 条款小字 */
.clone-bottom-area .clone-tos {
  font-size: 11px;
  color: #bbb;
  margin-top: 0;
  text-align: center;
}

/* ================================================================
   十二、会员中心页全面重构（豆包优化方案）
   ================================================================ */

/* VIP页面背景 */
.vip-page-body {
  background: linear-gradient(180deg, #f0edff 0%, #faf9ff 30%);
  padding: 0 !important;
}

/* ===== 一、顶部新人首单Banner区 ===== */
.vip-first-banner {
  position: relative;
  margin: 16px;
  padding: 24px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,230,240,0.85) 0%, rgba(230,220,255,0.90) 50%, rgba(210,200,245,0.88) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(123,104,238,0.18);
  box-shadow:
    0 4px 24px rgba(123,104,238,0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
  text-align: center;
  overflow: hidden;
}

/* 极淡全息浅蓝光细描边 */
.vip-first-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(160,210,255,0.25), rgba(123,104,238,0.15), rgba(160,210,255,0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 微弱外发光柔光 */
.vip-first-banner::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,160,255,0.20) 0%, transparent 70%);
  pointer-events: none;
}

/* 悬浮珠光浅粉胶囊角标 */
.vip-first-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,200,220,0.85), rgba(230,190,230,0.80));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,180,200,0.35);
  box-shadow: 0 2px 8px rgba(200,120,160,0.15);
  font-size: 11px;
  font-weight: 700;
  color: #8B4A6B;
  letter-spacing: 0.5px;
}

/* 主标题 */
.vip-first-title {
  font-size: 16px;
  font-weight: 800;
  color: #3a2a50;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

/* 价格区 */
.vip-first-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
}
.vip-first-unit {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #D4537E, #7B68EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vip-first-num {
  font-size: 40px;
  font-weight: 900;
  background: linear-gradient(135deg, #D4537E, #7B68EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.vip-first-origin-wrap {
  margin-left: 6px;
}
.vip-first-origin {
  font-size: 13px;
  color: #a0a0b0;
  text-decoration: line-through;
  font-weight: 500;
}

/* 立省提示 */
.vip-first-save {
  font-size: 11px;
  color: #D4537E;
  font-weight: 600;
  margin-bottom: 6px;
}

/* 辅助说明 */
.vip-first-hint {
  font-size: 12px;
  color: #8a8a9a;
  margin-bottom: 14px;
  font-weight: 400;
}

/* 立即开通按钮 - 粉紫渐变柔光胶囊 */
.vip-first-btn {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  padding: 12px 28px;
  border-radius: 24px;
  border: none;
  background: linear-gradient(135deg, #D4537E 0%, #7B68EE 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(123,104,238,0.35), 0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.vip-first-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}
.vip-first-btn:hover::after {
  left: 100%;
}
.vip-first-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(123,104,238,0.25);
}

/* ===== 二、中部会员套餐卡片区 ===== */

/* 套餐区容器 */
.vip-tiers-section {
  padding: 16px;
}

/* 选择会员方案标签 */
.vip-section-label {
  font-size: 17px;
  font-weight: 700;
  color: #3a2a50;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

/* 套餐卡片基础（统一规范） */
.vip-tier-card {
  flex: 0 0 260px;
  width: 260px;
  padding: 20px 16px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(123,104,238,0.18);
  box-shadow: 0 4px 20px rgba(123,104,238,0.10);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

/* 卡片内侧暗纹（爱心+芯片）- 通过伪元素实现极低透明度 */
.vip-tier-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(123,104,238,0.04) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(212,83,126,0.03) 0%, transparent 40%);
  pointer-events: none;
  border-radius: 20px;
}

.vip-tier-card.selected {
  border-color: #7B68EE;
  box-shadow: 0 0 0 3px rgba(123,104,238,0.12), 0 8px 32px rgba(123,104,238,0.18);
  transform: translateY(-2px);
}

/* 年卡 - 最划算（粉紫柔光描边） */
.vip-tier-hot {
  border: 2px solid rgba(123,104,238,0.35);
  box-shadow: 0 0 0 1px rgba(123,104,238,0.10), 0 6px 24px rgba(123,104,238,0.15);
}

/* 年卡角标 */
.vip-tier-hot-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, rgba(212,83,126,0.90), rgba(123,104,238,0.85));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(123,104,238,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 牵手会员 - 高端（淡金色细全息描边） */
.vip-tier-premium {
  border: 1.5px solid rgba(200,170,100,0.30);
  box-shadow: 0 0 0 1px rgba(200,170,100,0.08), 0 6px 24px rgba(200,170,100,0.12);
}

/* 牵手会员皇冠角标 */
.vip-tier-crown-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, rgba(230,200,120,0.92), rgba(200,160,80,0.88));
  color: #5a4020;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(200,170,100,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 套餐图标 */
.vip-tier-icon {
  font-size: 28px;
  text-align: center;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(123,104,238,0.15));
}

/* 套餐名称 */
.vip-tier-name {
  font-size: 17px;
  font-weight: 800;
  color: #3a2a50;
  text-align: center;
  margin-bottom: 6px;
}

/* 价格行 */
.vip-tier-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
}
.vip-tier-price {
  font-size: 30px;
  font-weight: 900;
  background: linear-gradient(135deg, #7B68EE, #D4537E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.vip-tier-unit {
  font-size: 14px;
  color: #8a8a9a;
  font-weight: 500;
}

/* 价值slogan */
.vip-tier-slogan {
  font-size: 13px;
  color: #8a8a9a;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 500;
  padding: 0 4px;
}

/* 权益清单 */
.vip-tier-features {
  margin-bottom: 14px;
}

/* 核心王牌权益 */
.vip-tier-f.king {
  font-weight: 600;
  color: #4a3a60;
}
.vip-tier-f.king .vip-f-check {
  font-size: 14px;
  opacity: 1;
}

/* 附加福利权益 */
.vip-tier-f.extra {
  font-weight: 400;
  color: #6a5a7a;
}
.vip-tier-f.extra .vip-f-check {
  font-size: 13px;
  opacity: 0.7;
}

.vip-tier-f {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(123,104,238,0.06);
}
.vip-tier-f:last-child {
  border-bottom: none;
}

.vip-f-check {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.vip-f-text {
  flex: 1;
}

/* 套餐按钮 */
.vip-tier-btn {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(123,104,238,0.20);
}

/* 月卡按钮 - 浅薰衣草紫渐变 */
.vip-tier-btn:not(.vip-tier-btn-hot):not(.vip-tier-btn-premium) {
  background: linear-gradient(135deg, #9B8FD8 0%, #B8A8E8 100%);
}

/* 年卡按钮 - 粉紫渐变 */
.vip-tier-btn-hot {
  background: linear-gradient(135deg, #D4537E 0%, #7B68EE 100%);
  box-shadow: 0 4px 14px rgba(123,104,238,0.30);
}

/* 牵手会员按钮 - 柔雾蜜桃粉渐变 */
.vip-tier-btn-premium {
  background: linear-gradient(135deg, #E8A0B8 0%, #D8A8C8 100%);
  box-shadow: 0 4px 14px rgba(200,120,160,0.25);
}

.vip-tier-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(123,104,238,0.25);
}
.vip-tier-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(123,104,238,0.15);
}

/* ===== 三、下半部分分区 ===== */

/* 分割条 */
.vip-divider {
  height: 8px;
  margin: 0 16px;
  background: linear-gradient(180deg, rgba(200,200,220,0.15), rgba(200,200,220,0.05));
  border-radius: 4px;
}

/* 分区通用 */
.vip-section {
  padding: 16px;
}

/* 分区标题 */
.vip-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #5a4a70;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

/* 分区图标 */
.vip-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}
.vip-section-icon.free {
  background: linear-gradient(135deg, rgba(180,210,255,0.30), rgba(160,190,240,0.20));
}
.vip-section-icon.coin {
  background: linear-gradient(135deg, rgba(255,220,140,0.30), rgba(240,200,100,0.20));
}
.vip-section-icon.bolt {
  background: linear-gradient(135deg, rgba(160,210,255,0.35), rgba(140,190,240,0.25));
}

/* 免费权益卡片 */
.vip-free-card {
  background: rgba(245,245,250,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(200,200,220,0.20);
}

.vip-free-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: #5a5a6a;
  border-bottom: 1px solid rgba(200,200,220,0.15);
}
.vip-free-row:last-child {
  border-bottom: none;
}

.vip-free-icon {
  font-size: 17px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* 升级引导 */
.vip-free-upgrade {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(123,104,238,0.15);
  font-size: 13px;
  color: #7B68EE;
  font-weight: 500;
  text-align: center;
}

/* 按需付费 - 三个功能方块 */
.vip-single-row {
  display: flex;
  gap: 10px;
}

.vip-single-item {
  flex: 1;
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  border: 1px solid rgba(123,104,238,0.12);
  box-shadow: 0 2px 10px rgba(123,104,238,0.06);
  transition: all 0.3s ease;
}
.vip-single-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(123,104,238,0.10);
}

.vip-single-icon {
  font-size: 24px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(123,104,238,0.15));
}

.vip-single-name {
  font-size: 13px;
  font-weight: 600;
  color: #4a4a5a;
  margin-bottom: 4px;
}

.vip-single-price {
  font-size: 12px;
  color: #8a8a9a;
  font-weight: 500;
}

.vip-single-hint {
  margin-top: 12px;
  font-size: 13px;
  color: #aaa;
  line-height: 1.6;
  text-align: center;
  padding: 0 8px;
}

/* 心动加速包 - 弱化 */
.vip-boost-row {
  display: flex;
  gap: 10px;
}

.vip-boost-card {
  flex: 1;
  background: rgba(250,250,252,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid rgba(200,200,220,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.3s ease;
}
.vip-boost-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.vip-boost-name {
  font-size: 14px;
  font-weight: 600;
  color: #5a5a6a;
  margin-bottom: 6px;
}

.vip-boost-price {
  font-size: 22px;
  font-weight: 800;
  color: #7B68EE;
  margin-bottom: 4px;
}

.vip-boost-unit {
  font-size: 13px;
  font-weight: 500;
  color: #8a8a9a;
}

.vip-boost-desc {
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
}

/* ===== 四、底部信任说明区 ===== */

.vip-footer-wrap {
  padding: 16px;
}

.vip-footer-card {
  background: rgba(245,245,250,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(200,200,220,0.20);
  text-align: center;
}

.vip-footer-line {
  font-size: 13px;
  color: #6a6a7a;
  line-height: 1.8;
  font-weight: 400;
}

.vip-footer-trust {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(123,104,238,0.15);
  font-size: 13px;
  color: #7B68EE;
  font-weight: 600;
}

/* ================================================================
   十三、子页面通用头部升级（diary-header）
   ================================================================ */

.diary-header {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(123,104,238,0.08);
}

/* ================================================================
   十四、Toast升级
   ================================================================ */

#toast {
  background: rgba(30,20,60,0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}

/* ================================================================
   十五、弹窗升级
   ================================================================ */

.overlay-panel,
.detail-panel,
.pay-panel {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -4px 40px rgba(123,104,238,0.18);
}

/* ================================================================
   十六、全局微动效（心动感）
   ================================================================ */

@keyframes premium-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes premium-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(123,104,238,0.25); }
  50% { box-shadow: 0 6px 24px rgba(123,104,238,0.40); }
}

/* 主按钮心跳效果（仅首屏大按钮） */
.btn-heartbeat {
  animation: premium-glow 2.5s ease-in-out infinite;
}

/* 解锁按钮升级 */
.gd-v2-footer-btn.primary {
  background: linear-gradient(135deg, #7B68EE 0%, #D4537E 100%);
  box-shadow: 0 6px 24px rgba(123,104,238,0.35);
  transition: all var(--duration-base) var(--ease-smooth);
}
.gd-v2-footer-btn.primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(123,104,238,0.20);
}

/* ================================================================
   十七、心动温度计升级
   ================================================================ */

.thermo-container {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(123,104,238,0.10);
  box-shadow: var(--shadow-md);
}

/* 温度管液态渐变升级 */
.thermo-bar-fill {
  background: linear-gradient(180deg,
    rgba(123,104,238,0.85) 0%,
    rgba(168,91,220,0.75) 50%,
    rgba(212,83,126,0.65) 100%
  ) !important;
  box-shadow: 0 -2px 8px rgba(123,104,238,0.30);
}

/* ================================================================
   十八、功能岛AI分身圆形头像升级
   ================================================================ */

.ai-clone-float {
  box-shadow:
    0 0 0 2px rgba(123,104,238,0.45),
    0 6px 18px rgba(123,104,238,0.22),
    0 8px 24px rgba(123,104,238,0.30) !important;
  transition: all var(--duration-base) var(--ease-smooth);
  animation: cloneFloatGlow 3.2s ease-in-out infinite;
}
.ai-clone-float:active {
  transform: scale(0.92);
  box-shadow: 0 4px 12px rgba(123,104,238,0.28) !important;
}
@keyframes cloneFloatGlow {
  0%,100% { box-shadow: 0 0 0 2px rgba(123,104,238,0.35), 0 6px 18px rgba(123,104,238,0.18), 0 8px 24px rgba(123,104,238,0.24) !important; }
  50% { box-shadow: 0 0 0 3px rgba(123,104,238,0.6), 0 6px 22px rgba(123,104,238,0.32), 0 10px 30px rgba(123,104,238,0.38) !important; }
}

/* ================================================================
   十九、心动AI聊天背景微纹
   ================================================================ */

.chat-area {
  background:
    radial-gradient(ellipse at 10% 20%, rgba(123,104,238,0.035) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(212,83,126,0.025) 0%, transparent 60%);
}

/* ================================================================
   二十、AI 伴侣沉浸式详情页（v1.27.5）
   ================================================================ */
.companion-detail-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: linear-gradient(165deg, #1A1428 0%, #221833 55%, #150F22 100%);
  display: none;
  flex-direction: column;
  color: #F3EEFF;
  overflow: hidden;
}
.companion-detail-page.active {
  display: flex;
  animation: cdFadeIn 0.28s ease;
}
@keyframes cdFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cd-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  /* 包含所有子元素的堆叠上下文，防止transform穿透 */
  isolation: isolate;
}
/* 下方内容区：不透明白底，与hero自然衔接 */
.cd-body {
  position: relative;
  /* 不依赖z-index，靠DOM顺序（在hero之后）即可正确层叠 */
  margin-top: -60px; /* 上移与hero底部融合 */
  background: #FAF7FF; /* 不透明白底，杜绝蒙层感 */
  border-radius: 22px 22px 0 0;
  padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 38vh;
  box-shadow: 0 -6px 28px rgba(123,104,238,0.12);
  /* 确保自身创建独立的层叠上下文，不受hero子元素transform影响 */
  isolation: isolate;
}

/* 头部：自然流式布局，70vh 浅灰渐变背景，头像居中大尺寸展示 */
.cd-hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  /* 不设z-index，靠DOM顺序层叠；避免transform创建堆叠上下文 */
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, #FAF8FC 0%, #F2EDF7 35%, #E8E1F0 75%, #DED6EC 100%);
  /* 锁住所有子元素动画(transform/scale)产生的堆叠上下文，不外溢影响body */
  isolation: isolate;
}
.cd-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top,0px));
  left: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
}
/* 大头图：填满 hero 区域（70vh），沉浸式展示 */
/* 注意：禁止在此元素或其动画子元素上使用transform，否则创建新堆叠上下文破坏层级 */
.cd-avatar-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  margin: 0 auto;
  overflow: hidden;
}
/* 鼠标悬停/下拉时：形象"活"过来（放大 + 光晕增强），由 JS 控制 */
.cd-avatar-wrap.hover-scale .cd-avatar-glow { opacity: 1; }
.cd-avatar-wrap.hover-scale .cd-avatar-ring { border-color: rgba(199,125,255,0.95); }
.cd-avatar {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  background-color: #7B68EE;
  box-shadow: none;
  animation: cdBreathe 3.4s ease-in-out infinite;
}
/* 无照片时显示渐变色（有照片时被 inline background-image 覆盖） */
.cd-avatar:not(.has-photo) {
  background: linear-gradient(135deg, #C0A0F4, #7B68EE);
}
/* 场景照片模式（g.photo 存在时）：用真人/人偶照片填满区域 */
/* 注意：不能用 background:none!important，会覆盖inline的background-image:url() */
.cd-avatar.has-photo {
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  border-radius: 0;
  animation: none;
}
.cd-avatar.has-photo::after { display: none; }
.cd-avatar.type-0 { background: linear-gradient(135deg, #C0A0F4, #A0D4F4); }
.cd-avatar.type-1 { background: linear-gradient(135deg, #F4C0A0, #C0A0F4); }
.cd-avatar.type-2 { background: linear-gradient(135deg, #A0D4F4, #C0A0F4); }
@keyframes cdBreathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
/* 眨眼：用一个覆盖层模拟（大图模式下弱化） */
.cd-avatar::after {
  content: '';
  position: absolute;
  left: 38%; top: 45%;
  width: 24%; height: 5%;
  border-radius: 50%;
  background: rgba(26,20,40,0.35);
  animation: cdBlink 4.2s infinite;
}
@keyframes cdBlink {
  0%,92%,100% { transform: scaleY(0.12); opacity: 0.7; }
  95% { transform: scaleY(1); opacity: 1; }
}
.cd-avatar-glow {
  position: absolute;
  inset: -2px;
  border-radius: 0;
  background: radial-gradient(ellipse at center 40%, rgba(160,132,255,0.25) 0%, transparent 70%);
  z-index: 1;
  animation: cdGlowPulse 3s ease-in-out infinite;
}
@keyframes cdGlowPulse {
  0%,100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
.cd-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 2px solid rgba(160,132,255,0.35);
  z-index: 1;
  animation: cdRing 2.8s linear infinite;
}
@keyframes cdRing {
  0% { box-shadow: 0 0 0 0 rgba(160,132,255,0.5); }
  100% { box-shadow: 0 0 0 10px rgba(160,132,255,0); }
}
/* 文字整体浮层：名字/年龄/状态/标签 浮在照片底部，极淡背景确保可读 */
/* 禁止使用transform/opacity动画，避免创建新堆叠上下文 */
.cd-hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 38px 20px 28px;
  text-align: center;
  background: linear-gradient(to top, rgba(250,248,252,0.65) 0%, rgba(250,248,252,0.35) 45%, rgba(250,248,252,0.10) 78%, transparent 100%);
}
/* 下拉时：文字平滑跟随手指 */
/* 不再切换transition，因为已移除transform动画 */
.cd-name {
  font-size: 32px; font-weight: 800; color: #1A1428;
  font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-shadow: 0 1px 8px rgba(255,255,255,0.6);
}
.cd-age { font-size: 17px; font-weight: 500; color: #7B68EE; }
.cd-emotion {
  display: inline-block;
  margin-top: 10px;
  font-size: 14.5px; font-weight: 600;
  padding: 4px 14px;
  border-radius: 12px;
}
.cd-emotion.online { color: #D4537E; background: rgba(212,83,126,0.12); border: 1px solid rgba(212,83,126,0.4); }
.cd-emotion.new { color: #5B3A9E; background: rgba(123,104,238,0.12); border: 1px solid rgba(123,104,238,0.35); }
.cd-emotion.rest { color: #888; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.12); }
.cd-chips {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  margin-top: 14px;
}
.cd-chip {
  font-size: 13.5px; font-weight: 600;
  color: #5B3A9E;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(123,104,238,0.35);
  box-shadow: 0 1px 6px rgba(123,104,238,0.08);
  padding: 4px 12px; border-radius: 999px;
}

/* 通用区块：浅底深字（body背景#FAF7FF上可见） */
.cd-section {
  margin-top: 18px;
  background: #fff;
  border: 1px solid rgba(123,104,238,0.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(123,104,238,0.06);
}
.cd-section-title {
  font-size: 16.5px; font-weight: 700; color: #3D2E5E;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.cd-section-title span { font-size: 17px; }

/* 心动指数 */
.cd-favor-bar {
  height: 10px; border-radius: 5px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.cd-favor-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #D4537E, #FF8FB3);
  transition: width 0.6s ease;
}
.cd-favor-text {
  margin-top: 8px; font-size: 14.5px; color: #6B5A8E;
}

/* 人设卡 */
.cd-persona-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.cd-persona-item {
  background: rgba(123,104,238,0.12);
  border: 1px solid rgba(123,104,238,0.3);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.cd-persona-k { font-size: 13.5px; color: #7B68EE; margin-bottom: 6px; }
.cd-persona-v { font-size: 16px; font-weight: 700; color: #1A1428; }
.cd-persona-hook {
  margin-top: 12px;
  font-size: 14px; font-style: italic; color: #5A4A70;
  line-height: 1.6;
  padding: 10px 12px;
  background: #F8F5FF;
  border-radius: 12px;
  border-left: 3px solid #7B68EE;
}

/* 语音卡 */
.cd-voice-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(123,104,238,0.25), rgba(212,83,126,0.18));
  border: 1px solid rgba(160,132,255,0.4);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.18s;
}
.cd-voice-card:active { transform: scale(0.98); }
.cd-voice-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: #fff; color: #7B68EE;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(123,104,238,0.4);
}
.cd-voice-card.playing .cd-voice-icon { animation: cdVoicePulse 0.8s ease-in-out infinite; }
@keyframes cdVoicePulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.12);} }
.cd-voice-text { flex: 1; min-width: 0; }
.cd-voice-title { font-size: 16.5px; font-weight: 700; color: #fff; }
.cd-voice-sub { font-size: 13.5px; color: #D9CEF5; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-voice-wave { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.cd-voice-wave span {
  width: 3px; height: 100%;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
  animation: cdWave 1s ease-in-out infinite;
}
.cd-voice-wave span:nth-child(2){ animation-delay: 0.2s; }
.cd-voice-wave span:nth-child(3){ animation-delay: 0.4s; }
.cd-voice-wave span:nth-child(4){ animation-delay: 0.6s; }
@keyframes cdWave { 0%,100%{ transform: scaleY(0.3);} 50%{ transform: scaleY(1);} }

/* 专属暗号 */
.cd-secret-card {
  background: #F8F5FF;
  border: 1px dashed rgba(123,104,238,0.35);
  border-radius: 14px;
  padding: 14px;
}
.cd-secret-label { font-size: 14.5px; color: #7B68EE; margin-bottom: 6px; }
.cd-secret-value { font-size: 18px; font-weight: 700; color: #D4537E; letter-spacing: 1px; }
.cd-secret-tip { font-size: 13px; font-weight: 400; color: #6B5A8E; letter-spacing: 0; line-height: 1.6; }

/* 穿插式引导 */
.cd-guide {
  margin-top: 18px;
  font-size: 13px; color: #7B68EE;
  text-align: center;
  padding: 10px 12px;
  background: #F5F0FF;
  border-radius: 12px;
}

/* 常驻底部 CTA 栏 */
.cd-cta-bar {
  flex: 0 0 auto;
  display: flex; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(26,20,40,0) 0%, rgba(26,20,40,0.9) 35%, #1A1428 100%);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.cd-btn-ghost {
  flex: 0 0 auto;
  padding: 15px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #E6DEFA; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.cd-btn-primary {
  flex: 1;
  padding: 15px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #7B68EE, #A084FF);
  color: #fff; font-size: 16.5px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(123,104,238,0.4);
}
.cd-btn-primary:active { background: linear-gradient(135deg, #6A57D8, #8F73E8); }

/* ===== 币不足防流失：聊天主页面常驻引导卡（exhausted-guide-card）===== */
/* 引导气泡：正常换行 */
#exhausted-guide-card { margin-top: 10px; }
#exhausted-guide-card > .msg-bubble {
  width: 100%;
  max-width: 100%;
}
.exh-guide-bubble .msg-bubble {
  max-width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}
/* 大卡片容器：全宽撑满，淡紫边框（参考"开通会员"大卡片） */
.exhausted-guide-inner {
  padding: 18px 10px 14px;
  background: linear-gradient(180deg, #FAF7FF, #F5EDFF);
  border-radius: 16px;
  border: 1.5px solid rgba(168,120,226,0.22);
}
/* 引导卡行：隐藏avatar不占位，让卡片真正居中 */
#exhausted-guide-card .msg-avatar[style*="visibility:hidden"] {
  display: none;
}
.exh-guide-title {
  text-align: center;
  font-size: 14px; font-weight: 600;
  color: #8B7AB8;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.exhausted-guide-inner .exh-btn {
  display: block; width: 100%; border: none; border-radius: 16px;
  cursor: pointer; text-align: center; margin-bottom: 13px;
  -webkit-tap-highlight-color: rgba(168,120,226,0.15);
}
/* 主推：充值心动币 —— icon+标题同行，全宽撑满 */
.exh-btn-primary {
  padding: 17px 16px; background: linear-gradient(135deg, #E070B8, #A878E2); color: #fff;
  box-shadow: 0 4px 18px rgba(168,120,226,0.4);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.exh-btn-primary:active { transform: scale(0.98); opacity: 0.92; }
/* 次推：AI伴侣 —— icon+标题同行 */
.exh-btn-secondary {
  padding: 17px 16px; background: #F5EDFF; color: #534AB7;
  border: 2.5px solid #A878E2 !important;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.exh-btn-secondary:active { transform: scale(0.98); background: #EDE1FA; }
/* 小按钮行：分身+红娘并排 */
.exh-btn-row { display: flex; gap: 10px; }
.exh-btn-small {
  flex: 1; padding: 13px 8px; border-radius: 14px;
  background: #fff; color: #534AB7; font-size: 14px; font-weight: 600;
  border: 2px solid #D0B8EC !important; white-space: nowrap; text-align: center;
}
.exh-btn-small:active { transform: scale(0.96); background: #F8F3FF; }
/* 按钮内部文字排版：icon与标题同行 */
.exh-btn-icon { font-size: 20px; display: inline; margin-right: 6px; margin-bottom: 0; }
.exh-btn-text { font-size: 19px; font-weight: 800; letter-spacing: 0.5px; display: inline; }
.exh-btn-sub { font-size: 12px; font-weight: 400; opacity: 0.88; margin-top: 3px; text-align: center; flex-basis: 100%; }

/* ===== 详情页弹性下拉交互（文字浮层平移 + 照片放大 + 回弹遮罩） ===== */
/* 过渡与下拉时的"贴手"已在 .cd-hero-text / .cd-avatar-wrap 上定义，此处无需额外规则 */

/* ===== 全局弹性微交互（Q弹质感：0.2~0.3s 缓动 + 回弹曲线） ===== */
.guest-btn, .cd-btn-primary, .cd-btn-ghost, .companion-confirm-bar, .ccb-heart,
.vip-tier-card, .ai-builder-avatar, .cc-confirm, .guest-panel-mini-btn, .match-guide-btn {
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.24s ease, filter 0.2s ease;
}
.guest-btn:active, .cd-btn-primary:active, .cd-btn-ghost:active,
.companion-confirm-bar:active, .guest-panel-mini-btn:active, .match-guide-btn:active {
  transform: scale(0.95);
}
/* 卡片滑动/切换也带弹性回弹观感 */
.guest-card-inline, .vip-tier-card {
  transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.26s ease, opacity 0.26s ease;
}

/* ============================================================
   七步构建器 · 新增步骤样式（Steps 1,4-7）
   ============================================================ */

/* ----- Step 1: 照片选择网格（大图卡片 + 选中变大+紫光圈） ----- */
/* ----- Step 1: 初见印象 · 左右滑动照片轮播（纯真人照片 · CoverFlow + 呼吸脉冲紫光） ----- */
.builder-carousel {
  overflow: hidden;
  position: relative;
  padding: 24px 0 12px;
  margin: 0 -16px;
}
.carousel-track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 0 28px;
  /* 触摸滑动 —— 不在CSS里设transition，由JS控制 */
  touch-action: pan-x;
  cursor: grab;
  will-change: transform;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { cursor: grabbing; }
/* 轮播照片卡片 —— 纯照片无标签 */
.carousel-photo-card {
  flex-shrink: 0;
  position: relative;
  width: 240px; height: 310px;  /* 220×290 → 240×310 再次大一圈 */
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 未选中态：缩小约22%，与中间选中态形成 Cover Flow 对比 */
  transform: scale(0.78) translateY(10px);
  opacity: 0.85;
  border: 2.5px solid rgba(255,255,255,0.55);
  box-shadow: 0 6px 20px rgba(26,16,40,0.18);
  /* transition 只在非拖拽时生效，避免抖动 */
  transition:
    transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}
.carousel-track.dragging .carousel-photo-card {
  transition: none !important;
}
.carousel-photo-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* 中心选中态：恢复原大小 + 白边 + 强呼吸脉冲光晕（深紫底上明显可见） */
.carousel-photo-card.active {
  transform: scale(1) translateY(0);
  opacity: 1;
  border: 3px solid #ffffff;
  z-index: 3;
  animation: carouselPulse 2.2s ease-in-out infinite;
}
@keyframes carouselPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.30),
      0 8px 30px rgba(180,140,255,0.65),
      0 0 24px rgba(180,140,255,0.40),
      0 4px 14px rgba(26,16,40,0.18);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(255,255,255,0.18),
      0 8px 42px rgba(220,180,255,0.85),
      0 0 38px rgba(200,150,255,0.55),
      0 6px 20px rgba(26,16,40,0.22);
  }
}
.carousel-photo-card.active img {
  filter: brightness(1.02);
}
/* 选中：淡紫色星光光晕（在紫色脉冲圈内叠加星点） */
.carousel-photo-card.active::after {
  content: ''; position: absolute; inset: 2px; border-radius: 19px; z-index: 3;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,255,255,0.95) 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 28%, rgba(255,255,255,0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 82%, rgba(214,188,255,0.95) 0 1.6px, transparent 2px),
    radial-gradient(circle at 76% 80%, rgba(214,188,255,0.85) 0 1.3px, transparent 2px);
  pointer-events: none; animation: carouselStars 2.6s ease-in-out infinite;
}
@keyframes carouselStars {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
/* 按下反馈 */
.carousel-photo-card:active { transform: scale(0.96)!important; transition: none!important; }
/* 两侧卡片 hover 微提亮 */
.carousel-photo-card:not(.active):hover {
  opacity: 1;
  transform: scale(0.88) translateY(4px);
}
/* 卡片色调背景层（照片底色 / 光晕底色） */
.carousel-card-bg {
  position: absolute; inset: 0; z-index: 0;
}
.carousel-photo-card img { position: relative; z-index: 1; }
/* 底部标签 + 副标题（半透明渐变，不挡脸） */
.carousel-card-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 10px 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.64), rgba(0,0,0,0));
  text-align: center; pointer-events: none;
}
.carousel-card-label {
  font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.carousel-card-sub {
  margin-top: 3px; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Step1 卡片下方"已选"提示（深紫底配色） */
.builder-selected-hint {
  text-align: center; font-size: 13px; color: rgba(255,255,255,0.88);
  margin-top: 10px; letter-spacing: 0.5px;
  animation: fadeInStep 0.4s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.builder-selected-hint b { color: #D4B7FF; font-weight: 700; }

/* ----- Step 4: 初遇记忆 · 沉浸式场景大图卡片 ----- */
.builder-swipe-container {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 10px 0 4px;
}
.builder-swipe-container::-webkit-scrollbar { display: none; }
.builder-swipe-track {
  display: flex; gap: 16px; padding: 0 6px;
  width: max-content;
}
.builder-swipe-card {
  flex-shrink: 0;
  width: 220px; height: 280px;
  scroll-snap-align: center;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 6px 22px rgba(26,16,40,0.22);
  background: #fff;
}
.swipe-card-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.4s ease;
}
/* 文字区：标题居中大字 + 描述在底部白底（用户：要"看怎么排版好看"） */
.swipe-card-text {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 14px;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.45) 100%
  );
  transition: background 0.3s ease;
}
/* 场景主标题：图片正中间大字 */
.swipe-card-title {
  font-size: 24px; font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75), 0 0 4px rgba(0,0,0,0.5);
  margin-bottom: 0;
  z-index: 3;
}
/* 描述：放在底部独立白底区，字号加大（用户要求"再大一些"） */
.swipe-card-desc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-size: 15px; color: #2D2640;
  line-height: 1.5;
  padding: 14px 14px 14px;
  background: rgba(255,255,255,0.94);
  text-shadow: none;
  font-weight: 500;
  letter-spacing: 0.3px;
}
/* 选中态：白边 + 强紫光脉冲 + 选中卡上浮 + 紫光自发光 + 扫光（更重更明显） */
.builder-swipe-card.selected {
  border: 2.5px solid #B894E6;  /* 紫色边（用户说"选中也有紫光"） */
  transform: translateY(-8px);  /* 选中卡往上动一下 */
  box-shadow:
    0 0 0 4px rgba(184,148,230,0.45),     /* 紫色散布（更亮） */
    0 0 0 10px rgba(184,148,230,0.18),    /* 紫色扩散圈 */
    0 16px 48px rgba(147,112,219,0.70),   /* 强紫光阴影 */
    0 0 36px rgba(184,148,230,0.65),      /* 紫色自发光 */
    0 0 60px rgba(147,112,219,0.45),      /* 远端紫光扩散 */
    0 8px 26px rgba(26,16,40,0.32);        /* 基础阴影 */
  animation: swipeCardPulse 2.2s ease-in-out infinite;
  z-index: 4;
}
@keyframes swipeCardPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(184,148,230,0.45),
      0 0 0 10px rgba(184,148,230,0.18),
      0 16px 48px rgba(147,112,219,0.70),
      0 0 36px rgba(184,148,230,0.65),
      0 0 60px rgba(147,112,219,0.45),
      0 8px 26px rgba(26,16,40,0.32);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(184,148,230,0.55),
      0 0 0 16px rgba(184,148,230,0.20),
      0 22px 64px rgba(147,112,219,0.85),
      0 0 50px rgba(184,148,230,0.80),
      0 0 80px rgba(147,112,219,0.60),
      0 10px 30px rgba(26,16,40,0.36);
  }
}
.builder-swipe-card.selected .swipe-card-bg {
  transform: scale(1.04);
  filter: brightness(1.06) saturate(1.18);  /* 选中后图片更亮更艳 */
}
.builder-swipe-card.selected .swipe-card-text {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.55) 100%
  );
}
/* 选中时扫光：从左下角扫到右上角 */
.builder-swipe-card.selected::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  z-index: 4;
  pointer-events: none;
  animation: swipeShineSweep 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
  border-radius: 20px;
}
@keyframes swipeShineSweep {
  0%   { transform: translate(-100%, -100%); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(0, 0); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(100%, 100%); opacity: 0; }
}
/* 按下反馈 */
.builder-swipe-card:active { transform: scale(0.99); }

/* Step 5 底部左右滑动提示 */
.builder-swipe-hint {
  text-align: center; font-size: 12px; color:#B0A0C8; margin-top: 8px;
}

/* ----- Step 2: 理想身份 · 沉浸式身份卡片（复用Step4滑动容器 + 渐变底色+图标文案） ----- */
.identity-card {
  flex-shrink: 0;
  width: 220px; height: 280px;  /* 与 Step 5 卡片等大 */
  scroll-snap-align: center;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #241a3e;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
  border: 2.5px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 16px rgba(26,16,40,0.18);
}
/* 身份卡背景图（低透明度，让职业氛围可见但不抢戏） */
.identity-card-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.30;  /* 比之前的 0.14 更明显（用户说蒙版更淡 = 图片更清楚） */
  transition: transform 0.4s ease, filter 0.4s ease, opacity 0.3s ease;
}
/* 极淡紫色调蒙版（比之前更淡：底部 0.80 → 0.35） */
.identity-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(75,40,110,0.05) 0%,
    rgba(75,40,110,0.10) 35%,
    rgba(45,20,75,0.22) 70%,
    rgba(30,15,55,0.35) 100%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* 文案区：垂直居中（让主标题"清冷画家"在图片正中间） */
.identity-card-text {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 0 14px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.identity-icon {
  font-size: 36px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.identity-title {
  font-size: 26px; font-weight: 800;  /* 主标题放大：17px → 26px（"清冷画家"4个字大字） */
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 10px; line-height: 1.25;
  letter-spacing: 2px;
  z-index: 2;
}
.identity-desc {
  font-size: 14px;  /* 描述放大：12.5px → 14px */
  color: rgba(255,255,255,0.92);
  line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 选中态：白边 + 强紫光脉冲 + 白光扫光 + translateY（用户说"点中特效更多"） */
.identity-card.selected {
  border: 3px solid #ffffff;
  transform: translateY(-6px) scale(1.04);
  z-index: 5;
  animation: identityPulse 2.2s ease-in-out infinite;
}
@keyframes identityPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.30),
      0 16px 42px rgba(147,112,219,0.65),
      0 8px 22px rgba(26,16,40,0.32),
      0 0 24px rgba(147,112,219,0.45);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(255,255,255,0.18),
      0 22px 60px rgba(147,112,219,0.85),
      0 12px 30px rgba(26,16,40,0.36),
      0 0 38px rgba(147,112,219,0.65);
  }
}
.identity-card.selected .identity-card-overlay {
  background: linear-gradient(
    to bottom,
    rgba(123,104,238,0.08) 0%,
    rgba(123,104,238,0.12) 35%,
    rgba(75,0,130,0.25) 70%,
    rgba(75,0,130,0.40) 100%
  );
}
.identity-card.selected .identity-card-bg {
  transform: scale(1.08);
  opacity: 0.42;
  filter: brightness(1.04) saturate(1.15);
}
.identity-card.selected .identity-title {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(147,112,219,0.85), 0 2px 8px rgba(0,0,0,0.6);
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
/* 白光扫光：选中时一道白光从左下扫到右上 */
.identity-card.selected::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.50) 50%,
    rgba(255,255,255,0) 60%,
    transparent 70%
  );
  z-index: 4;
  pointer-events: none;
  animation: identitySweep 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
  border-radius: 20px;
}
@keyframes identitySweep {
  0%   { transform: translate(-100%, 100%); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(100%, -100%); opacity: 1; }
  80%  { opacity: 0; }
  100% { transform: translate(100%, -100%); opacity: 0; }
}
.identity-card:active { transform: scale(0.98); }

/* ----- Step 5: 核心记忆碎片 ----- */
.builder-memory-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg,#FFF8F0,#FFE8F0);
  border: 1.5px solid #F0D0D8; border-radius: 14px;
  padding: 12px 16px; margin-bottom: 14px;
}
.memory-banner-icon { font-size: 26px; }
.memory-banner-text { font-size: 14px; color: #B04A5E; line-height: 1.5; font-weight: 600; }
.builder-memory-options { gap: 10px; }
/* 记忆碎片卡：去 emoji 后，垂直布局（主标题一行 + 副标题自然换行） */
.memory-opt {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  gap: 6px !important;
}
.memory-opt .opt-main {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}
.memory-opt .opt-sub {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
  /* 副标题允许换行（有些长句） */
  white-space: normal;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  position: relative;
  z-index: 2;
}
.ai-builder-option.active.memory-opt .opt-main { color: #fff; }
.ai-builder-option.active.memory-opt .opt-sub { color: rgba(255,255,255,0.95); }
/* 旧 emoji / memory-text / memory-effect class 保留以防兼容 */
.memory-emoji {
  font-size: 24pt;
  margin-right: 14px;
  margin-bottom: 0 !important;
  flex-shrink: 0;
  width: 36px; text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.memory-text {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1; min-width: 0;
}
.memory-exp {
  font-size: 16px; font-weight: 700; color: #2D2640; line-height: 1.3;
}
.memory-personality {
  font-size: 13px; color: #999; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-builder-option.active .memory-exp { color: #fff; }
.ai-builder-option.active .memory-personality { color: rgba(255,255,255,0.85); }
.ai-builder-option.active .memory-emoji { filter: brightness(1.2) drop-shadow(0 1px 4px rgba(0,0,0,0.3)); }
.memory-effect {
  display: block; margin-top: 5px; font-size: 13px !important;
  color: #D4537E !important; font-weight: 600; opacity: 0.85 !important;
}

/* ----- Step 6: 能量补给方式 · 圆形单选 ----- */
.builder-energy-group {
  display: flex; flex-direction: column; gap: 12px;
}
.builder-energy-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px;
  border: 2px solid #E4D4F0; background: #fff;
  cursor: pointer; transition: all 0.25s ease;
}
.builder-energy-option:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(135deg,#7B68EE,#9B6FE0);
  box-shadow: 0 4px 14px rgba(123,104,238,0.38);
}
.builder-energy-option input[type="radio"] { display: none; }
.energy-circle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2.5px solid #DDD; flex-shrink: 0;
  transition: all 0.25s ease; position: relative;
}
.builder-energy-option:has(input:checked) .energy-circle {
  border-color: #fff;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}
.builder-energy-option:has(input:checked) .energy-circle::after {
  content:''; position:absolute; inset:8px; border-radius:50%;
  background:#fff; box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
}
.energy-label { font-size: 16px; font-weight: 700; color: #333; }
.energy-desc { font-size: 13.5px; color: #666; line-height: 1.5; margin-top: 3px; }
.builder-energy-option:has(input:checked) .energy-label,
.builder-energy-option:has(input:checked) .energy-desc,
.builder-energy-option:has(input:checked) .energy-desc b {
  color: #fff;
}

/* ----- Step 7: 灵魂共鸣 · 多题滑动 ----- */
.builder-resonance-container {
  position: relative; min-height: 200px; overflow: hidden;
}
.builder-resonance-q {
  display: none;
}
.builder-resonance-q.active {
  display: block; animation: resonanceSlideIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
.builder-resonance-q.sliding-out {
  animation: resonanceSlideOut 0.45s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
}
@keyframes resonanceSlideIn {
  from { opacity: 0; transform: translateX(60px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes resonanceSlideOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-120px) scale(0.9); }
}
.resonance-q-num {
  display: inline-block;
  font-size: 15px; color: #fff;
  font-weight: 800; margin-bottom: 10px;
  padding: 4px 12px; border-radius: 12px;
  background: linear-gradient(135deg,#7B68EE,#A878E2);
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(123,104,238,0.32);
}
.resonance-q-text {
  font-size: 19px; font-weight: 700; color: #F0E6FF; line-height: 1.5;
  margin-bottom: 16px; padding: 12px 14px; border-radius: 14px;
  background: rgba(75,0,130,.18); border: 1px solid rgba(255,255,255,.12);
  text-shadow: 0 1px 4px rgba(0,0,0,.35); letter-spacing: 0.3px;
}
.resonance-options { display: flex; flex-direction: column; gap: 9px; }
.resonance-opt {
  padding: 14px 17px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10); text-align: left; font-size: 16px; color: #F0E6FF;
  cursor: pointer; transition: all 0.25s ease; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* 统一选中态：深紫渐变 + 白字 */
.resonance-opt.selected {
  border-color: transparent;
  background: linear-gradient(135deg,#7B68EE,#9B6FE0);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(123,104,238,0.38);
}
.resonance-nav { text-align: center; margin-top: 14px; display: none; }
.resonance-confirm-btn {
  padding: 12px 28px; border-radius: 20px; border: none;
  background: linear-gradient(135deg,#7B68EE,#A878E2); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(123,104,238,0.35);
}

/* 第7步内部 Q 进度（更小，置于进度条上方） */
.resonance-mini {
  text-align: right; font-size: 11px; color: #B0A0C8;
  margin: -6px 0 8px; letter-spacing: 0.5px;
}

/* ===== 灵魂融合过渡页（元宝方案：金色粒子飞向中央发光球体） ===== */
.soul-fusion {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(40,20,70,0.55), rgba(18,8,38,0.88));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: hidden;
}
.soul-fusion-sphere {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #F6C453 45%, #C8941F);
  box-shadow: 0 0 30px 6px rgba(246,196,83,0.65), 0 0 70px 18px rgba(246,196,83,0.30);
  animation: soulSphere 1.8s ease-in-out infinite;
}
@keyframes soulSphere {
  0%,100% { transform: scale(0.92); box-shadow: 0 0 26px 5px rgba(246,196,83,0.55), 0 0 60px 14px rgba(246,196,83,0.25); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px 10px rgba(246,196,83,0.75), 0 0 90px 26px rgba(246,196,83,0.35); }
}
.soul-fusion-particle {
  position: absolute; padding: 3px 9px; border-radius: 12px;
  background: rgba(246,196,83,0.16); border: 1px solid rgba(246,196,83,0.5);
  color: #FFE9A8; font-size: 11px; white-space: nowrap;
  transform: translate(-50%,-50%);
  transition: left 2.2s cubic-bezier(.4,0,.2,1), top 2.2s cubic-bezier(.4,0,.2,1), opacity 2.2s ease, transform 2.2s ease;
}
.soul-fusion-text {
  margin-top: 28px; color: #FFE9A8; font-size: 14px; letter-spacing: 1px;
  text-align: center; opacity: 0; animation: fadeInStep 0.6s ease forwards;
}

/* ============================================================
 * 仪式 v3 视觉升级：按钮反馈环 / 玻璃数字 / 灵魂核心球 / 揭晓
 * ============================================================ */

/* ① 按钮反馈：全屏暗化 + 能量环扩散 + 提示语 */
.ceremony-feedback {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(20,8,38,0.35) 0%, rgba(12,4,26,0.72) 55%, rgba(6,2,16,0.93) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.ceremony-feedback.is-active { opacity: 1; pointer-events: auto; }
.ceremony-feedback-ring {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 28px rgba(199,125,255,0.85), 0 0 56px rgba(123,104,238,0.45), inset 0 0 20px rgba(199,125,255,0.5);
  animation: fbRingExpand 1.5s cubic-bezier(.2,.7,.2,1) forwards;
}
.ceremony-feedback-ring.delay-1 { animation-delay: 0.14s; opacity: 0; }
.ceremony-feedback-ring.delay-2 { animation-delay: 0.32s; opacity: 0; }
@keyframes fbRingExpand {
  0%   { transform: scale(0.45); opacity: 0; border-width: 4px; }
  18%  { opacity: 1; }
  100% { transform: scale(18); opacity: 0; border-width: 0.5px; }
}
.ceremony-feedback-text {
  position: relative; z-index: 2;
  color: #FFE9A8; font-size: 16px; letter-spacing: 2px;
  text-align: center; padding: 0 30px; line-height: 1.7;
  opacity: 0; animation: fbTextIn 0.6s 0.3s ease forwards;
  text-shadow: 0 0 14px rgba(246,196,83,0.4);
}
@keyframes fbTextIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ② 第二幕：缓慢流动的星河 + 中心扫描光点 + 双行文案 */
.ceremony-galaxy {
  position: absolute; left: 50%; top: 50%; width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0%, rgba(123,104,238,0.14) 18%, transparent 36%,
    rgba(199,125,255,0.12) 58%, transparent 78%, rgba(123,104,238,0.10) 92%, transparent 100%);
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0; z-index: 1; pointer-events: none;
  animation: cerGalaxyIn 1.2s ease forwards, cerGalaxySpin 30s linear infinite;
}
@keyframes cerGalaxyIn { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes cerGalaxySpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ceremony-scan {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(199,125,255,0.65) 40%, transparent 72%);
  box-shadow: 0 0 22px rgba(199,125,255,0.8), 0 0 60px rgba(123,104,238,0.4);
  z-index: 2; opacity: 0.12; pointer-events: none;
  animation: cerScanBrighten 4s ease-in-out forwards, cerScanPulse 2.6s ease-in-out infinite;
}
@keyframes cerScanBrighten { 0% { opacity: 0.1; transform: scale(0.6); } 100% { opacity: 0.85; transform: scale(1.8); } }
@keyframes cerScanPulse {
  0%,100% { box-shadow: 0 0 18px rgba(199,125,255,0.5); }
  50%     { box-shadow: 0 0 34px rgba(199,125,255,0.8); }
}
.ceremony-charge-sub {
  position: absolute; left: 50%; top: calc(50% + 96px); transform: translate(-50%, 8px);
  z-index: 2; color: rgba(255,214,245,0.8); font-size: 13px; letter-spacing: 2px;
  text-align: center; max-width: 86%; white-space: normal; line-height: 1.7;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  text-shadow: 0 0 12px rgba(199,125,255,0.4);
}
.ceremony-charge-sub.is-show { opacity: 1; transform: translate(-50%, 0); }
.ceremony-charge-sub.is-out { opacity: 0; transition: opacity 0.5s ease; }

/* ② 玻璃拟态倒计时数字 */
.ceremony-num {
  position: absolute;
  font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 32vh; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(199,125,255,0.12) 50%, rgba(123,104,238,0.10) 100%);
  border: 1.5px solid rgba(199,125,255,0.45);
  border-radius: 24px;
  padding: 4vh 8vw;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 40px rgba(123,104,238,0.35),
    0 0 90px rgba(199,125,255,0.25);
  text-shadow:
    0 0 18px rgba(199,125,255,0.75),
    0 0 36px rgba(123,104,238,0.55);
  opacity: 0; transform: scale(0.6);
  will-change: transform, opacity;
}
.ceremony-num::before {
  content:''; position:absolute; left:50%; top:50%;
  width: 50vh; height: 50vh; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,104,238,0.35) 0%, rgba(199,125,255,0.15) 40%, transparent 70%);
  z-index: -1; animation: cerHalo 1s ease-out infinite;
  filter: blur(2px);
}
.ceremony-num::after {
  /* Round 2 精修：电光描边——旋转的电光锥形渐变 */
  content: ''; position: absolute; inset: -4px; border-radius: 28px;
  background: conic-gradient(
    from 0deg,
    rgba(123,104,238,0) 0%,
    rgba(123,104,238,0.6) 12%,
    rgba(199,125,255,0.95) 25%,
    rgba(255,107,255,0.7) 38%,
    rgba(123,104,238,0) 50%,
    rgba(123,104,238,0) 62%,
    rgba(199,125,255,0.85) 75%,
    rgba(255,255,255,0.7) 88%,
    rgba(123,104,238,0) 100%
  );
  z-index: -2; filter: blur(5px); opacity: 0.8;
  animation: cerElecSpin 2s linear infinite;
}
@keyframes cerElecSpin {
  to { transform: rotate(360deg); }
}
/.ceremony-num.num-3 { border-color: rgba(199,125,255,0.5); }
.ceremony-num.num-2 { border-color: rgba(255,107,255,0.55); }
.ceremony-num.num-1 { border-color: rgba(255,214,245,0.7); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 0 60px rgba(255,255,255,0.45), 0 0 120px rgba(199,125,255,0.35); }
.ceremony-num-show { animation: cerNumIn 0.85s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
@keyframes cerNumIn {
  0%   { opacity:0; transform: scale(0.6); }
  45%  { opacity:1; transform: scale(1.14); }
  70%  { transform: scale(0.97); }
  100% { opacity:1; transform: scale(1); }
}
.ceremony-num-out { animation: cerNumOut 0.42s ease-in forwards; }
@keyframes cerNumOut {
  0%   { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(1.35); filter: blur(8px); }
}

/* ③ 灵魂核心球 v2：AI 灵魂容器（星河 + 数据粒子 + 金色脉冲） */
.soul-fusion {
  background: radial-gradient(circle at center, rgba(40,20,70,0.7) 0%, rgba(18,8,38,0.92) 70%, rgba(8,4,18,0.96) 100%) !important;
}
.soul-fusion-sphere {
  position: relative;
  width: 130px; height: 130px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #FFFBE6 0%, #FFE9A8 12%, #F6C453 38%, #C8941F 70%, #6B4513 100%);
  box-shadow:
    0 0 36px 8px rgba(246,196,83,0.55),
    0 0 80px 22px rgba(246,196,83,0.25),
    inset 0 0 30px rgba(255,251,230,0.4);
  animation: soulSphere 1.8s ease-in-out infinite;
  z-index: 2;
}
/* 核心球内部星河：流动小点 */
.soul-fusion-sphere::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 20%, rgba(255,233,168,0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 45% 65%, rgba(255,255,255,0.8) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 80% 75%, rgba(199,125,255,0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 25% 80%, rgba(255,255,255,0.7) 0 1px, transparent 2px);
  animation: soulCoreRotate 6s linear infinite;
  opacity: 0.85;
}
@keyframes soulCoreRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 核心球外层光环脉冲 */
.soul-fusion-sphere::after {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246,196,83,0.4) 0%, rgba(246,196,83,0.1) 40%, transparent 70%);
  animation: soulHalo 1.8s ease-in-out infinite;
  z-index: -1;
}
@keyframes soulHalo {
  0%,100% { transform: scale(0.95); opacity: 0.5; }
  50%     { transform: scale(1.15); opacity: 0.85; }
}
@keyframes soulSphere {
  0%,100% { transform: scale(0.94); box-shadow: 0 0 32px 7px rgba(246,196,83,0.5), 0 0 70px 18px rgba(246,196,83,0.22), inset 0 0 30px rgba(255,251,230,0.35); }
  50%     { transform: scale(1.06); box-shadow: 0 0 44px 12px rgba(246,196,83,0.7), 0 0 100px 30px rgba(246,196,83,0.32), inset 0 0 36px rgba(255,251,230,0.5); }
}
/* 汇聚成球体后：三下心跳（大小大小 · 砰砰），跳完进入下一幕 */
.soul-fusion-sphere.is-beating { animation: soulSphereBeat 0.8s ease-in-out 3; }
@keyframes soulSphereBeat {
  0%   { transform: scale(1); }
  16%  { transform: scale(1.17); }
  34%  { transform: scale(0.96); }
  52%  { transform: scale(1.11); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.soul-fusion-particle {
  position: absolute; padding: 6px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(246,196,83,0.22), rgba(199,125,255,0.18));
  border: 1px solid rgba(246,196,83,0.55);
  color: #FFE9A8; font-size: 14px; font-weight: 600;
  white-space: nowrap; letter-spacing: 0.5px;
  transform: translate(-50%,-50%);
  box-shadow: 0 2px 10px rgba(246,196,83,0.25);
  transition: left 2.2s cubic-bezier(.4,0,.2,1), top 2.2s cubic-bezier(.4,0,.2,1), opacity 2.2s ease, transform 2.2s ease;
}
.soul-fusion-text {
  margin-top: 32px; color: #FFE9A8; font-size: 18px; letter-spacing: 1.5px;
  text-align: center; opacity: 0; animation: fadeInStep 0.6s ease forwards;
  text-shadow: 0 0 14px rgba(246,196,83,0.45);
}

/* ④ 揭晓 v2：灵魂连接成功 */
.ceremony-reveal-text {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 3; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  animation: cerRevealIn 0.7s cubic-bezier(0.175,0.885,0.32,1.275) both;
  padding: 0 24px;
}
.ceremony-reveal-title {
  font-size: 40px; font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(135deg, #FFD6F5 0%, #F6C453 50%, #C77DFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(246,196,83,0.45));
}
.ceremony-reveal-sub {
  font-size: 16px; color: #FFE9A8; letter-spacing: 1.5px; line-height: 1.6;
  text-shadow: 0 0 12px rgba(246,196,83,0.3);
}
.ceremony-reveal-tertiary {
  font-size: 13px; color: rgba(255,214,245,0.78); letter-spacing: 1px; line-height: 1.6;
  margin-top: 4px;
}
.ceremony-reveal-btn {
  padding: 13px 32px; border-radius: 24px; border: none;
  background: linear-gradient(135deg, #F6C453 0%, #C77DFF 100%);
  color: #1A1428; font-size: 15px; font-weight: 800; letter-spacing: 1.5px;
  cursor: pointer; box-shadow: 0 4px 18px rgba(246,196,83,0.45), 0 0 36px rgba(199,125,255,0.3);
  animation: cerRevealBtnIn 0.7s 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes cerRevealBtnIn { from { opacity:0; transform: translateY(12px) scale(0.92); } to { opacity:1; transform: translateY(0) scale(1); } }
.ceremony-reveal-btn:active { transform: scale(0.97); }
/* 开启按钮特效：光从左至右扫过 + 外圈紫光脉冲呼吸 */
.ceremony-reveal-btn { position: relative; overflow: hidden; }
.ceremony-reveal-btn::before {
  content: ''; position: absolute; top: 0; left: -70%; width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none;
  animation: cerBtnSweep 2.4s ease-in-out infinite;
}
@keyframes cerBtnSweep { 0% { left: -70%; } 55% { left: 120%; } 100% { left: 120%; } }
.ceremony-reveal-btn-wrap { position: relative; margin-top: 18px; display: inline-block; }
.ceremony-reveal-btn-glow {
  position: absolute; inset: -7px; border-radius: 30px; pointer-events: none;
  border: 1.5px solid rgba(199,125,255,0.7);
  box-shadow: 0 0 14px rgba(199,125,255,0.4);
  animation: cerBtnPulse 1.7s ease-in-out infinite;
}
@keyframes cerBtnPulse {
  0%,100% { opacity: 0.4; transform: scale(1); box-shadow: 0 0 12px rgba(199,125,255,0.35); }
  50%     { opacity: 0.95; transform: scale(1.045); box-shadow: 0 0 24px rgba(199,125,255,0.65); }
}