/* ===== 手机端极致适配（轻盈不挤压） ===== */
@media (max-width: 768px) {
  /* 基础排版 */
  body {
    font-size: 14px;
  }

  /* 导航栏：超薄紧凑 */

.messages-container::-webkit-scrollbar {
  width: 6px;
}
.messages-container::-webkit-scrollbar-thumb {
  background: rgba(181, 193, 245, 0.735);
  border-radius: 10px;
}
  .input-area {
    display: flex;
    gap: 8px;
    padding: 12px;
    flex-shrink: 0;
  }
  .input-area input {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
    flex: 1;
    touch-action: manipulation;
  }
  .input-area button {
    padding: 12px 18px;
    font-size: 0.9rem;
    min-height: 44px;
    min-width: 60px;
    touch-action: manipulation;
  }

  /* 情绪模式卡片（手机端额外限制高度） */
  .emotion-pattern-card {
    max-height: 180px;
    overflow-y: auto;
    word-break: break-word;
    padding: 12px;
    font-size: 0.85rem;
    -webkit-overflow-scrolling: touch;
  }
  .emotion-pattern-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #6e4d62;
    margin: 8px 0;
    text-align: justify;
  }

  /* ===== 心晴指南 ===== */
  .sun-two-columns {
    flex-direction: column;
    gap: 18px;
  }
  .sun-right-column {
    min-width: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .daily-warm-quote.compact {
    padding: 18px;
  }
  .daily-warm-quote.compact p {
    font-size: 1.2em;
  }
  .section-title {
    font-size: 1.3em !important;
  }
  .tip-card-compact {
    padding: 14px;
    min-height: 120px;
  }
  .tip-card-compact .tip-title {
    font-size: 1.1em;
  }
  .community-section,
  .warm-words-wall {
    padding: 18px 12px;
  }
  .wall-grid,
  .community-tips {
    grid-template-columns: 1fr;
  }
  .counseling-float-btn {
    bottom: 20px;
    right: 16px;
    padding: 12px 20px;
    font-size: 0.85rem;
    border-radius: 25px;
    min-height: 48px;
    touch-action: manipulation;
  }

  /* 排行榜在手机端保持最小宽度，防挤压 */
  .tips-ranking-section.compact {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ranking-list {
    min-width: 260px;
  }

  /* ===== 树洞 ===== */
  .treehole-container {
    flex-direction: column;
    gap: 18px;
  }
  .public-confessions-panel {
    max-height: 350px;
    border-radius: 20px;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .my-treehole-panel {
    min-width: auto !important;
    width: 100%;
    border-radius: 20px;
    padding: 18px;
  }
  .confession-card {
    padding: 12px 14px;
    min-height: 60px;
  }
  .confession-card .card-content {
    word-break: break-word;
    white-space: normal;
  }
  .card-footer-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
  }
  .action-btn {
    min-height: 44px;
    min-width: 60px;
    touch-action: manipulation;
  }
  .throw-btn,
  .pick-btn {
    padding: 12px 22px;
    font-size: 0.95rem;
    min-height: 48px;
    min-width: 100px;
    touch-action: manipulation;
  }
  .picked-bottle {
    margin-top: 18px;
    padding: 16px;
  }
  .picked-bottle-content {
    font-size: 0.95em;
    padding: 12px;
    width: 100% !important;
    box-sizing: border-box;
    word-break: break-word;
    white-space: pre-wrap;
  }
  .bottle-input {
    padding: 12px;
    font-size: 16px;
    width: 100% !important;
    box-sizing: border-box;
    touch-action: manipulation;
  }

  /* ===== 我的空间 ===== */
  .profile-page {
    padding: 15px 12px 50px;
  }
  .guest-welcome {
    padding: 40px 15px;
  }
  .guest-welcome h2 {
    font-size: 1.6rem;
  }
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px;
  }
  .avatar {
    width: 75px;
    height: 75px;
    font-size: 40px;
    margin: 0 auto;
  }
  .info h1 {
    font-size: 1.4rem;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat-card {
    padding: 14px 10px;
    min-height: 100px;
  }
  .stat-card h3 {
    font-size: 0.95rem;
  }
  .stat-card p {
    font-size: 1.1rem;
  }
  .test-section-header h2 {
    font-size: 1.3rem;
  }
  .card-title h3 {
    font-size: 1.05rem;
  }
  .custom-input {
    width: 100%;
    min-width: auto;
    min-height: 44px;
    font-size: 16px;
    touch-action: manipulation;
  }
  .input-group {
    flex-direction: column;
    gap: 8px;
  }
  .q-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 50px;
  }
  .q-btns {
    align-self: flex-end;
  }
  .tag-btn {
    min-height: 44px;
    min-width: 60px;
    padding: 8px 16px;
    touch-action: manipulation;
  }
  .btn-logout {
    padding: 12px 28px;
    font-size: 0.9rem;
    min-height: 48px;
    min-width: 120px;
    touch-action: manipulation;
  }

  /* ===== 通用弹窗紧缩 ===== */
  .modal-backdrop .modal,
  .counseling-modal .modal-box,
  .tip-modal {
    width: 92% !important;
    max-width: 92% !important;
    padding: 20px 15px;
    border-radius: 18px;
  }
  .tip-modal {
    max-width: 95vw !important;
    margin: 10px;
  }
  .modal-header h3 {
    font-size: 1.3em !important;
  }

  /* 通用按钮最小触摸区域 */
  button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* 输入框字体大���防止自动缩放 */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* 备案胶囊在手机端缩小 */
  .icp-footer {
    padding: 4px 12px;
    font-size: 0.65rem;
    bottom: 12px;
    right: 12px;
  }

  /* ===== 额外微调 ===== */
  
  /* 防止点击延迟 */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* 输入框不被键盘遮挡 */
  input:focus,
  textarea:focus {
    position: relative;
    z-index: 100;
  }

  /* 文本长按菜单优化 */
  .message,
  .history-text,
  .card-content {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ===== 1. 全局基础样式 ===== */
body {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1035 50%, #0d0d2b 100%);
  min-height: 100vh;
  font-family: 'Quicksand', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

.fade {
  transition: opacity 0.6s;
  opacity: 1;
}
.fade-leave {
  opacity: 0;
}

/* ===== 2. 导航栏 ===== */
.navigation img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex-shrink: 0;
}
.navigation h1 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e0d5ff;
  font-family: 'Pacifico', cursive;
  margin-left: 12px;
  white-space: nowrap;
}
.navigation ul { display: none; }
.navigation a, .navigation li span {
  color: #b8a8f5;
  font-size: 20px;
  padding: 6px 18px;
  border-radius: 48px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  display: block;
}
.navigation a:hover, .navigation li span:hover {
  background: rgba(106, 90, 249, 0.25);
}

/* ===== 3. 主页样式（高级深夜便利店重构） ===== */

.page-home::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 50% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.4), transparent);
  background-size: 200px 200px;
  animation: starPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes starPulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

.store-signboard {
  text-align: center;
  z-index: 2;
  margin-bottom: 50px;
  animation: fadeInUp 1s ease;
}

.neon-text {
  font-family: 'Pacifico', cursive;
  font-size: clamp(3rem, 10vw, 5rem);
  background: linear-gradient(135deg, #f0e6ff, #b4a0ff, #7c6aff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 15px rgba(180, 100, 255, 0.6));
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.2;
}
.store-slogan {
    color: #d9ccff !important;           /* 实色，不再半透明 */
    text-shadow: none !important;        /* 移除发光阴影 */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    filter: none !important;
}



.all_words {
  width: 100%;
  height: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  margin: 20px 0 35px;
}

.words-row {
  white-space: nowrap;
  animation: Move 50s linear infinite;
  will-change: transform;
  display: flex;
  align-items: center;
}

.words {
  display: inline-block;
  margin-right: 45px;
  padding: 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.68);
  font-family: 'Quicksand', 'PingFang SC', sans-serif;
  font-weight: 400;
  letter-spacing: 1.5px;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  transition: color 0.3s;
}

.words:hover {
  color: #ffffff;
  background: none;
  box-shadow: none;
  transform: none;
}

@keyframes Move {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

.floating-thoughts {
  position: absolute;
  top: 20%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0.3;
}

.thought-row {
  display: flex;
  white-space: nowrap;
  animation: marquee linear infinite;
}

.thought-item {
  padding: 0 50px;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  font-style: italic;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.minimal-doorway {
  display: flex;
  gap: 30px;
  z-index: 10;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

.door-btn {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 16px 36px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.door-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-25deg);
  transition: 0.6s;
}

.door-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(100, 80, 200, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.door-btn:hover::after {
  left: 125%;
}

/* ===== 4. 心情便签页面（日记 + 档案）===== */
.page-diary {
  position: absolute;
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #2b1b3a 0%, #0f0c1e 100%);
  overflow: hidden;
}

.diary-center-zone {
 margin-left: 600px;
  margin:0 auto;
}

.sticky-note {
  width: 480px;
  min-height: 520px;
  background: #fdfae2;
  background-image: linear-gradient(#e8e0c8 1px, transparent 1px);
  background-size: 100% 2.4rem;
  border-radius: 6px 20px 20px 20px;
  padding: 50px 40px 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 200, 0.3);
  position: relative;
  transform: rotate(0.5deg);
  transition: transform 0.3s ease;
  font-family: 'Quicksand', 'PingFang SC', sans-serif;
  display: flex;
  flex-direction: column;
}

.sticky-note:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

.tape {
  position: absolute;
  top: -18px;
  left: 40px;
  width: 100px;
  height: 35px;
  background: rgba(255, 255, 240, 0.7);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #d0c8a8;
}

.note-date {
  font-size: 1.1rem;
  color: #6b5e4a;
  font-weight: 500;
}

.emoji-selector {
  display: flex;
  gap: 10px;
}

.emoji-selector span {
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.2s;
  filter: grayscale(0.5);
}

.emoji-selector span:hover,
.emoji-selector span.active {
  opacity: 1;
  transform: scale(1.3);
  filter: none;
}

.sticky-note textarea {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  font-size: 1.25rem;
  line-height: 2.4rem;
  color: #3e3a2e;
  outline: none;
  font-family: 'Quicksand', 'PingFang SC', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.sticky-note textarea::placeholder {
  color: #000000;
  font-style: italic;
}

.note-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.submit-note-btn {
  background: #5e4b3c;
  color: #fef7e0;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 1px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.submit-note-btn:hover {
  background: #7b6450;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

/* ===== 5. 情绪档案本 ===== */
.history-book-wrapper {
  position: absolute;
  left: 30px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 240px;
  z-index: 50;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.book-cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  padding: 15px 0;
}

.book-pages {
  display: none;
}

.history-book-wrapper.is-open {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 580px;
  z-index: 9999;
}

.history-book-wrapper.is-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}


.history-card {
  background: transparent;
  border: none;
  border-left: 4px solid #a78bfa;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.history-card:hover {
  background: rgba(255, 255, 255, 0.04);
}

.history-scroll {
  background: transparent;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.history-scroll::-webkit-scrollbar {
  width: 4px;
}
.history-scroll::-webkit-scrollbar-thumb {
  background: rgba(180, 150, 255, 0.4);
  border-radius: 4px;
}

.history-book-wrapper.is-open .book-pages {
  display: flex;
  flex-direction: column;
  padding: 30px;
  height: 100%;
  overflow: hidden;
}

.history-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-time {
  font-size: 0.9rem;
  color: #a78bfa;
}

.history-text {
  font-size: 0.88rem;
  color: rgba(230,220,255,0.85);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  word-break: break-word;
}
.history-text.hc-full {
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word;
}

.close-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  align-self: flex-end;
  margin-top: 12px;
}

.close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ===== 6. 小伴AI ===== */
.ai-page {
  position: relative;
  min-height: calc(100vh - 65px);
  background: radial-gradient(circle at 20% 20%, rgba(111, 66, 255, 0.18), transparent 25%),
              radial-gradient(circle at 80% 15%, rgba(70, 143, 255, 0.16), transparent 24%),
              linear-gradient(180deg, #090912 0%, #161a3a 45%, #111428 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px 40px;
  overflow-x: hidden;
}

.ai-page .ai-container {
  width: min(1120px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  background: rgba(10, 12, 35, 0.88);
  border: 1px solid rgba(117, 90, 255, 0.18);
  box-shadow: 0 25px 80px rgba(10, 14, 40, 0.35);
  backdrop-filter: blur(18px);
}

.ai-page h2 {
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  color: #edf0ff;
  text-shadow: 0 0 18px rgba(99, 102, 241, 0.3);
  margin: 0;
}

.ai-page .ai-tools {
  display: flex;
  justify-content: flex-end;
}

.ai-page .btn-emotion-pattern {
  border: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.24);
}

.ai-page .btn-emotion-pattern:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.3);
}

.ai-page .emotion-pattern-card {
  background: rgba(88, 76, 205, 0.08);
  border: 1px solid rgba(145, 87, 255, 0.16);
  border-radius: 24px;
  padding: 20px 24px;
  color: #e7eafc;
  box-shadow: 0 14px 30px rgba(24, 28, 80, 0.24);
}

.ai-page .emotion-pattern-card h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.ai-page .emotion-pattern-card p {
  white-space: pre-wrap;
  line-height: 1.8;
  color: #d9dbff;
}

.ai-page .chat-area {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 22px;
    border-radius: 24px;
    background: rgba(40, 70, 50, 0.6);             /* 透明绿 */
    backdrop-filter: blur(12px);                   /* 毛玻璃 */
    border: 1px solid rgba(100, 150, 110, 0.35);   /* 绿边框 */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ai-page .chat-area::-webkit-scrollbar {
  width: 7px;
}

.ai-page .chat-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.ai-page .chat-area::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.35);
  border-radius: 999px;
}

.ai-page .message {
  max-width: 74%;
  padding: 14px 18px;
  border-radius: 22px;
  line-height: 1.65;
  word-break: break-word;
  animation: messageSlide 0.25s ease;
}

.ai-page .message.assistant {
  align-self: flex-start;
  background: rgba(90, 64, 255, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.24);
  color: #edf2ff;
}

.ai-page .message.user {
  align-self: flex-end;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(143, 148, 255, 0.3);
  color: #fff;
}

.ai-page .input-area {
    padding: 16px 18px;
    background: rgba(45, 80, 55, 0.65);            /* 透明绿 */
    backdrop-filter: blur(10px);                   /* 毛玻璃 */
    border-radius: 20px;
    border: 1px solid rgba(110, 160, 120, 0.4);    /* 绿边框 */
    display: flex;
    gap: 12px;
}

.ai-page .input-area input {
  flex: 1;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(118, 79, 255, 0.2);
  color: #f8f9ff;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 0.98rem;
}

.ai-page .input-area input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ai-page .input-area input:focus {
  border-color: rgba(148, 60, 255, 0.6);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.16);
}

.ai-page .input-area button {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  padding: 14px 24px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-page .input-area button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.25);
}

.ai-page .input-area button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-page .message.assistant,
.ai-page .message.user {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.ai-page .chat-area::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 55%);
  pointer-events: none;
}

.ai-page .chat-area::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 18px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14), transparent 55%);
  pointer-events: none;
}

.ai-page .message {
  position: relative;
}

.ai-page .message.assistant::after,
.ai-page .message.user::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  bottom: 8px;
}

.ai-page .message.assistant::after {
  left: -4px;
}

.ai-page .message.user::after {
  right: -4px;
}

.ai-page .chat-area .message {
  max-width: 78%;
}

.ai-page .message.user {
  align-self: flex-end;
}

.ai-page .message.assistant {
  align-self: flex-start;
}

.ai-page .ai-tools,
.ai-page .emotion-pattern-card,
.ai-page .chat-area,
.ai-page .input-area {
  z-index: 1;
}


.quick-tip-label {
  font-size: 0.9rem;
  color: #c4b5fd;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

.quick-tip-item {
  background: rgba(99, 70, 180, 0.3);
  border: 1px solid rgba(168, 150, 255, 0.25);
  color: #e8d5ff;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  margin-bottom: 8px;
  width: 100%;
  text-align: left;
  display: block;
}

.quick-tip-item:hover {
  background: rgba(120, 85, 200, 0.4);
  border-color: rgba(200, 170, 255, 0.4);
  transform: translateX(4px);
}

.ai-chat-panel {
  flex: 6;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(40, 20, 80, 0.4), rgba(20, 30, 70, 0.3));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(180, 150, 255, 0.25);
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.ai-chat-panel:hover {
  border-color: rgba(200, 170, 255, 0.35);
  box-shadow: 0 12px 40px rgba(106, 90, 249, 0.2),
              inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.ai-chat-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(80, 60, 150, 0.4), rgba(40, 80, 150, 0.2));
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.ai-chat-header h2 {
  font-family: 'Pacifico', cursive;
  font-size: 1.4rem;
  color: #e8d5ff;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  margin: 0;
}

.typing-indicator {
  font-size: 0.9rem;
  color: #a78bfa;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.typing-indicator .dots {
  display: inline-block;
  animation: blink 1.4s infinite;
}

@keyframes blink {
  0%, 20%, 50%, 80%, 100% { opacity: 0.4; }
  40% { opacity: 1; }
  60% { opacity: 0.4; }
}

.chat-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  position: relative;
}

.chat-area::-webkit-scrollbar {
  width: 6px;
}

.chat-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.chat-area::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 3px;
}

.chat-area::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.6);
}

.message {
  display: inline-block;
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.5;
  word-break: break-word;
  animation: messageSlide 0.3s ease;
}

@keyframes messageSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.assistant {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(99, 70, 180, 0.3), rgba(59, 130, 246, 0.2));
  border: 1px solid rgba(168, 150, 255, 0.3);
  color: #e8d5ff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(99, 102, 241, 0.3));
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #fff;
  box-shadow: 0 4px 12px rgba(106, 90, 249, 0.3);
}

.input-area {
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(60, 40, 110, 0.3), rgba(30, 60, 120, 0.2));
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.input-area input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 170, 255, 0.3);
  color: #e8d5ff;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
}

.input-area input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.input-area input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(200, 170, 255, 0.5);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.input-area button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  position: relative;
  overflow: hidden;
}

.input-area button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.input-area button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.input-area button:hover::before {
  left: 100%;
}

.dot-flash {
  animation: dotFlash 1.4s infinite;
  margin: 0 2px;
}

.dot-flash:nth-child(2) {
  animation-delay: 0.2s;
}

.dot-flash:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotFlash {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.typing-bubble {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

/* ===== 7. 其他页面（简略版） ===== */

/* 心晴指南、树洞等页面保持原始样式 */
.moodsun-page,
.treehole-page,
.profile-page {
  position: relative;
  min-height: calc(100vh - 65px);
}

/* ===== 8. 通用样式 ===== */

.page-container {
  width: 100%;
  min-height: calc(100vh - 65px);
}

/* 响应式媒体查询 */
@media (max-width: 1024px) {
  .ai-layout {
    flex-direction: column;
    gap: 16px;
    height: auto;
    max-height: calc(100vh - 100px);
  }

  .ai-sidebar {
    width: 100%;
    flex: unset;
    max-height: 150px;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 12px;
  }

  .ai-chat-panel {
    min-height: 400px;
  }
}

@media (max-width: 480px) {
  .navigation {
    height: auto;
  }

  .navigation h1 {
    font-size: 1rem;
  }

  .neon-text {
    font-size: 2rem !important;
  }

  .door-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .sticky-note {
    width: 95% !important;
    max-width: none;
    padding: 20px 15px;
  }

  .ai-layout {
    gap: 10px;
  }

  .ai-sidebar {
    padding: 10px 8px;
  }

  .message {
    max-width: 95%;
  }

  button {
    min-height: 40px;
    min-width: 40px;
  }
}

/* 打印样式 */
@media print {
  .navigation,
  .counseling-float-btn,
  .icp-footer {
    display: none;
  }

  .page-home,
  .page-diary,
  .ai-page,
  .moodsun-page,
  .treehole-page,
  .profile-page {
    background: white;
    color: black;
  }
}
/* ===== 1. 全局基础样式 ===== */
body {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1035 50%, #0d0d2b 100%);
  min-height: 100vh;
  font-family: 'Quicksand', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  width: 100%;
}

.fade {
  transition: opacity 0.6s;
  opacity: 1;
}
.fade-leave {
  opacity: 0;
}

/* ===== 2. 导航栏 ===== */
.api-down-banner {
  margin: 0;
  padding: 10px 16px;
  background: #fff3e0;
  color: #8a4b00;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #ffcc80;
}
.api-down-banner code {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);   /* 半透明白色，与按钮一致 */
    padding: 0 28px;
    height: 90px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);  /* 半透边框 */
    border-radius: 0;                          /* 去除圆角，保持直角 */
    box-shadow: none;                          /* 去除阴影 */
}
.navigation img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex-shrink: 0;
}
.navigation h1 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e0d5ff;
  font-family: 'Pacifico', cursive;
  margin-left: 12px;
  white-space: nowrap;
}
.navigation ul {
  display: flex;
  gap: 2vw;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation a, .navigation li span {
  color: #b8a8f5;
  font-size: 20px;
  padding: 6px 18px;
  border-radius: 48px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  display: block;
}
.navigation a:hover, .navigation li span:hover {
  background: rgba(106, 90, 249, 0.25);
}

/* ===== 3. 主页样式（高级深夜便利店重构） ===== */
.page-home {
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(242, 166, 90, 0.1) 0%, transparent 52%),
      linear-gradient(180deg, #1c1410 0%, #14110e 50%, #12100e 100%) !important;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 40px;
    overflow-x: hidden;
}

/* 动态星光背景（用伪元素简单粒子） */
.page-home::before,
.page-home::after {
    display: none !important;
}
@keyframes starPulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* 主页招牌（深棕底 + 奶白金字 + 粉珊瑚弹幕） */
.page-home .store-signboard {
  text-align: center;
  z-index: 2;
  margin-bottom: 36px;
  padding: 0 12px;
  animation: fadeInUp 1s ease;
}

.page-home .home-sign-open {
  margin: 0 0 16px;
  font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: rgba(255, 228, 180, 0.75) !important;
  text-shadow: none;
}

.page-home .home-store-title {
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Pacifico', cursive;
  font-size: clamp(2.8rem, 10vw, 4.8rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #f5d078;
  -webkit-text-fill-color: #f5d078;
  background: none;
  filter: none;
  text-shadow: 0 2px 16px rgba(255, 200, 90, 0.35);
}

.page-home .store-slogan {
  margin-top: 20px;
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  font-size: clamp(0.95rem, 2.8vw, 1.12rem);
  font-weight: 300;
  color: rgba(232, 218, 198, 0.92) !important;
  letter-spacing: 0.14em;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: opacity 0.45s ease;
}

.page-home .home-companion {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(0.8rem, 2.2vw, 0.9rem);
  font-weight: 300;
  color: rgba(200, 210, 225, 0.9) !important;
  letter-spacing: 0.06em;
  animation: homeCompanionFloat 4.2s ease-in-out infinite;
  will-change: transform;
}

.page-home .home-companion-text {
  display: inline-block;
  animation: homeCompanionTextGlow 4.2s ease-in-out infinite;
}

.page-home .home-companion-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8896b;
  box-shadow: 0 0 12px rgba(232, 137, 107, 0.85);
  flex-shrink: 0;
  animation: homeCompanionDotPulse 2.4s ease-in-out infinite;
}

.page-home .home-companion em {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  color: #f5ddb8 !important;
  font-weight: 600;
  font-size: 1.15em;
  text-shadow: 0 0 16px rgba(242, 196, 140, 0.6);
}

@keyframes homeCompanionFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

@keyframes homeCompanionTextGlow {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

@keyframes homeCompanionDotPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 600px) {
  .page-home .home-sign-open {
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
  .page-home .home-store-title {
    letter-spacing: 0.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-companion,
  .page-home .home-companion-text,
  .page-home .home-companion-dot {
    animation: none;
  }
}

/* 弹幕容器 */
.all_words {
  width: 100%;
  height: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  margin: 20px 0 35px;
  z-index: 2;
  position: relative;
}

/* 每一行 */
.words-row {
  white-space: nowrap;
  animation: Move 50s linear infinite;
  will-change: transform;
  display: flex;
  align-items: center;
}

.words {
  display: inline-block;
  margin-right: 64px;
  padding: 0;
  font-size: 1.7rem;
  color: #c47e8a !important;
  font-family: '华文行书', 'STXingkai', '方正行楷', 'KaiTi', 'ZCOOL KuaiLe', cursive !important;
  font-weight: 450;
  letter-spacing: 2.5px;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  transition: color 0.3s;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.words:hover {
  color: #b05c6e !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}


/* 手机端适配 */
@media (max-width: 768px) {
  .words {
    margin-right: 42px;
    font-size: 0.95rem;
    letter-spacing: 1.8px;
  }
}
@keyframes Move {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* 浮动思绪流 */
.floating-thoughts {
  position: absolute;
  top: 20%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0.3;
}

.thought-row {
  display: flex;
  white-space: nowrap;
  animation: marquee linear infinite;
}

.thought-item {
  padding: 0 50px;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  font-style: italic;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* 入口按钮 - 玻璃拟态，更加精致 */
.minimal-doorway {
  display: flex;
  gap: 30px;
  z-index: 10;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

.door-btn {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 16px 36px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.door-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-25deg);
  transition: 0.6s;
}

.door-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(100, 80, 200, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.door-btn:hover::after {
  left: 125%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .neon-text {
    font-size: 2.8rem;
  }
  .door-btn {
    padding: 14px 28px;
    font-size: 1rem;
  }
  .all_words {
    height: 150px;
  }
}
/* ===== 心情便签页面（日记 + 档案）全新设计 ===== */
.page-diary {
  position: relative;
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #2b1b3a 0%, #0f0c1e 100%);
  overflow: hidden;
}

/* 中央日记便签 - 质感纸张 */


.sticky-note {
  width: 480px;
  min-height: 520px;
  background: #fdfae2;
  background-image: linear-gradient(#e8e0c8 1px, transparent 1px);
  background-size: 100% 2.4rem;
  border-radius: 6px 20px 20px 20px;
  padding: 50px 40px 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 200, 0.3);
  position: relative;
  transform: rotate(0.5deg);
  margin-left: 1040px;
  transition: transform 0.3s ease;
  font-family: 'Quicksand', 'PingFang SC', sans-serif;
}

.sticky-note:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* 左上角胶带 */
.tape {
  position: absolute;
  top: -18px;
  left: 40px;
  width: 100px;
  height: 35px;
  background: rgba(255, 255, 240, 0.7);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #d0c8a8;
}

.note-date {
  font-size: 1.1rem;
  color: #6b5e4a;
  font-weight: 500;
}

.emoji-selector {
  display: flex;
  gap: 10px;
}

.emoji-selector span {
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.2s;
  filter: grayscale(0.5);
}

.emoji-selector span:hover,
.emoji-selector span.active {
  opacity: 1;
  transform: scale(1.3);
  filter: none;
}

/* 输入区 - 手写感 */
.sticky-note textarea {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  font-size: 1.25rem;
  line-height: 2.4rem;
  color: #3e3a2e;
  outline: none;
  font-family: 'Quicksand', 'PingFang SC', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.sticky-note textarea::placeholder {
  color: #b9ad8c;
  font-style: italic;
}

.note-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.submit-note-btn {
  background: #5e4b3c;
  color: #fef7e0;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 1px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.submit-note-btn:hover {
  background: #7b6450;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

/* ===== 情绪档案本 - 左侧悬浮设计 ===== */
.history-book-wrapper {
  position: absolute;
  left: 30px;                /* 改为左侧 */
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;               /* 闭合时的宽度，像一本侧立的书 */
  height: 240px;
  z-index: 50;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 书脊装饰 */
.magic-book::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 4px;
    background: linear-gradient(to bottom, #e9ca8f, #e9ca8f, #e9ca8f);
    border-radius: 4px;
}

.book-cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  padding: 15px 0;
}

.cover-title {
    font-family: 'Pacifico', cursive;
    font-size: 1rem;
    color: #f3f2f5;
    text-align: center;
    line-height: 1.3;
}

.book-pages {
  display: none;
}

/* 展开状态 - 移到中央并放大 */
/* ===== 情绪档案展开状态（优化版） ===== */
.history-book-wrapper.is-open {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 580px;
  z-index: 9999;
  /* 不再有任何投影，完全靠遮罩撑开层次 */
}

/* 完全移除遮罩背景，只保留轻微模糊 */
.history-book-wrapper.is-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;          /* 无黑色叠加 */
  backdrop-filter: blur(6px);       /* 只保留一点点毛玻璃，不想要可删除 */
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}


/* 卡片：干净、无背景色，只保留左侧色条 */
.history-card {
  background: transparent;               /* 完全透明，不产灰块 */
  border: none;                           /* 去掉多余边框 */
  border-left: 4px solid #a78bfa;        /* 只保留左侧紫色装饰线 */
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 鼠标悬停时仅轻轻提示，不用背景色 */
.history-card:hover {
  background: rgba(255, 255, 255, 0.04);  /* 极微弱，可忽略 */
}

/* 滚动区域完全透明，依附书本背景 */
.history-scroll {
  background: transparent;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

/* 滚动条变细、变淡 */
.history-scroll::-webkit-scrollbar { width: 4px; }
.history-scroll::-webkit-scrollbar-thumb {
  background: rgba(180, 150, 255, 0.4);
  border-radius: 4px;
}
.history-book-wrapper.is-open .book-pages {
  display: flex;
  flex-direction: column;
  padding: 30px;
  height: 100%;
  overflow: hidden;
}

.history-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-time {
  font-size: 0.75rem;
  color: rgba(200, 180, 255, 0.6);
}

.history-text {
  font-size: 0.95rem;
  color: rgba(230, 220, 255, 0.85);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-btn {
  align-self: center;
  margin-top: 15px;
  background: rgba(106, 90, 249, 0.3);
  color: #fff;
  border: 1px solid rgba(180, 150, 255, 0.4);
  padding: 8px 24px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}

.close-btn:hover {
  background: rgba(106, 90, 249, 0.6);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .sticky-note {
    width: 90%;
    padding: 30px 25px;
  }
  
  .history-book-wrapper {
    left: 10px;
    width: 55px;
    height: 180px;
  }
  
  .history-book-wrapper.is-open {
    width: 90vw;
    height: 80vh;
  }
}

/* --- AI 页面基础布局 --- */
.ai-page {
  position: relative;
  min-height: calc(100vh - 65px);
  /* 延续主页的深邃宇宙背景 */
  background: radial-gradient(circle at 20% 20%, rgba(111, 66, 255, 0.15), transparent 25%),
              radial-gradient(circle at 80% 15%, rgba(70, 143, 255, 0.12), transparent 24%),
              linear-gradient(180deg, #090912 0%, #161a3a 45%, #111428 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ai-layout {
  display: flex;
  width: 95vw;
  max-width: 1400px;
  height: 85vh; 
  gap: 20px;
  box-sizing: border-box;
}

/* --- 左侧侧边栏 (功能控制区) --- */
.ai-sidebar {
  flex: 0 0 300px;
  background: rgba(30, 41, 59, 0.5); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.ai-sidebar-title {
  font-family: 'Pacifico', cursive;
  font-size: 1.3rem;
  color: #e8d5ff;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  margin-bottom: 5px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.3);
}

.ai-sidebar-btn {
  background: linear-gradient(135deg, rgba(99, 70, 180, 0.3), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(168, 150, 255, 0.2);
  color: #e8d5ff;
  padding: 15px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.ai-sidebar-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: rgba(200, 170, 255, 0.5);
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(106, 90, 249, 0.2);
}

/* --- 右侧聊天面板 (核心对话区) --- */
.ai-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(15, 12, 35, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

.ai-chat-header {
  padding: 18px 24px;
  background: rgba(168, 85, 247, 0.1);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-header h2 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #c4b5fd;
  margin: 0;
}

/* --- 消息气泡设计 --- */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.message {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  animation: fadeInUp 0.4s ease forwards;
}

.message.assistant {
  align-self: flex-start;
  background: rgba(99, 70, 180, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #e8d5ff;
  border-bottom-left-radius: 4px;
}

.message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(109, 40, 217, 0.3);
}

/* --- 输入框区域 --- */
.input-area {
  padding: 20px 24px;
  background: rgba(10, 10, 25, 0.4);
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  display: flex;
  gap: 12px;
}

.input-area input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.input-area input:focus {
  border-color: #a78bfa;
}

.input-area button {
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 0 25px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.input-area button:hover {
  background: #6d28d9;
  transform: translateY(-2px);
}

/* --- 手机端适配 (覆盖逻辑) --- */
@media (max-width: 768px) {
  .ai-layout {
    flex-direction: column;
    height: calc(100vh - 120px);
    gap: 10px;
    padding: 10px;
  }

  .ai-sidebar {
    flex: 0 0 auto;
    padding: 12px;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    border-radius: 15px;
  }

  .ai-sidebar-title {
    display: none; /* 手机端隐藏侧栏标题以节省空间 */
  }

  .ai-sidebar-btn {
    flex: 0 0 auto;
    padding: 8px 15px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .ai-chat-panel {
    border-radius: 20px;
  }

  .message {
    max-width: 90%;
    font-size: 0.85rem;
    padding: 10px 14px;
  }

  .input-area {
    padding: 12px;
  }
}

/* --- 动画 --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 6. 心晴指南页面（新版两栏布局） ===== */
.moodsun-page {
  min-height: calc(100vh - 65px);
  background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
  padding: 30px 20px 100px;
}
.sun-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 两栏布局 */
.sun-two-columns {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}
.sun-left-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.sun-right-column {
  flex: 1;
  min-width: 300px;
}

/* 今日暖言（紧凑版） */
.daily-warm-quote.compact {
    background: linear-gradient(135deg, #ffecd2 0%, #fcd99f 100%);
    padding: 25px 30px;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(252, 182, 159, 0.2);
    border: 2px solid #ffd19a;
    margin: 0;
}
.daily-warm-quote.compact p {
  font-size: 1.5em;
  margin: 15px 0;
  text-align: center;
}
.quote-tag {
  display: inline-block;
  background: rgb(241 206 153 / 66%);
  padding: 8px 20px;
  border-radius: 20px;
  color: #ff6b6b;
  font-weight: 700;
}
.quote-author {
  text-align: center;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.quote-likes {
  color: #ff6b6b;
  font-weight: bold;
}

/* 情绪调整方法（垂直卡片列表） */
.emotion-tips-section.compact .section-title {
  font-size: 1.6em;
  margin-bottom: 20px;
}
.tips-grid-vertical {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.tip-card-compact {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(140, 130, 255, 0.08);
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tip-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(140, 130, 255, 0.15);
  border-color: #d3c9ff;
}
.tip-card-compact .tip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tip-card-compact .tip-emoji {
  font-size: 1.8em;
}
.tip-card-compact .tip-title {
  font-size: 1.3em;
  color: #5a4b9e;
  margin: 0;
}
.tip-card-compact .tip-summary {
  color: #666;
  margin-bottom: 15px;
  font-size: 0.95em;
}
.tip-stats {
  display: flex;
  gap: 20px;
  color: #888;
  font-size: 0.9em;
}

/* 排行榜（紧凑版） */
/* 排行榜（极简清爽版） */
.tips-ranking-section.compact {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  color: #2c3e50;
  height: fit-content;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f5;
}

.tips-ranking-section.compact .ranking-title {
  font-size: 1.4em;
  margin-bottom: 20px;
  text-align: left;
  color: #4a5568;
  font-weight: 600;
  letter-spacing: -0.3px;
  padding-left: 8px;
  border-left: 4px solid #a78bfa;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 12px;
  border-radius: 16px;
  transition: background 0.2s;
}

.rank-item:hover {
  background: #fafafd;
}

.rank-number {
  width: 32px;
  height: 32px;
  background: #f4f4f9;
  color: #7c7f9b;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9em;
  margin-right: 16px;
  flex-shrink: 0;
}

.rank-number.top-1 {
  background: #fef3c7;
  color: #b45309;
}
.rank-number.top-2 {
  background: #f1f5f9;
  color: #475569;
}
.rank-number.top-3 {
  background: #fce7f3;
  color: #be185d;
}

.rank-content {
  flex: 1;
  font-size: 0.95em;
  line-height: 1.5;
  color: #334155;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9em;
  color: #94a3b8;
  flex-shrink: 0;
}

.rank-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-author {
  color: #a78bfa;
  font-weight: 500;
}

/* 情绪方法弹窗 */
.tip-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.tip-modal {
  background: white;
  border-radius: 25px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.2);
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tip-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
}
.tip-modal-header h3 {
  margin: 0;
  color: #5a4b9e;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.close-modal-btn {
  background: none;
  border: none;
  font-size: 1.8em;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}
.close-modal-btn:hover { color: #333; }
.tip-modal-body {
  padding: 25px;
}
.tip-modal-body h4 {
  color: #5a4b9e;
  margin: 20px 0 15px;
}
.step-list {
  list-style: none;
  padding: 0;
  counter-reset: step-counter;
}
.step-item {
  margin-bottom: 15px;
  padding-left: 40px;
  position: relative;
  counter-increment: step-counter;
  font-size: 1.05em;
  line-height: 1.6;
  color: #444;
}
.step-item::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: #6a5af9;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9em;
}

/* 社区互动空间 */
.community-section {
  background: white;
  border-radius: 25px;
  padding: 35px;
  margin-bottom: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.section-title {
  font-size: 1.8em;
  color: #5a4b9e;
  margin-bottom: 25px;
  padding-left: 15px;
  border-left: 5px solid #6a5af9;
}
.new-tip-form {
  background: rgba(42, 33, 27, 0.5);
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 30px;
  border: 1px dashed rgba(255, 238, 214, 0.16);
}
.tip-input {
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border: 1.5px solid rgba(255, 238, 214, 0.2);
  border-radius: 15px;
  font-size: 1.1em;
  resize: vertical;
  outline: none;
  background: transparent;
  color: #f3e9dd;
  caret-color: #f2a65a;
}
.tip-input:focus {
  border-color: rgba(242, 166, 90, 0.55);
  box-shadow: 0 0 0 3px rgba(242, 166, 90, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.tip-input::placeholder {
  color: rgba(195, 178, 162, 0.55);
}
.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.char-count { color: #888; }
.submit-tip-btn {
  background: linear-gradient(135deg, #f9d35a, #da9512);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
}
.submit-tip-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.community-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.community-tip-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s;
}
.community-tip-card:hover {
  border-color: #d3c9ff;
  box-shadow: 0 8px 25px rgba(140, 130, 255, 0.1);
  transform: translateY(-3px);
}
.tip-content { font-size: 1.1em; line-height: 1.6; color: #333; margin-bottom: 15px; }
.tip-meta { display: flex; justify-content: space-between; color: #888; margin-bottom: 15px; }
.tip-author { color: #6a5af9; font-weight: 500; }
.tip-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #f5f5f5; }
.like-btn {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
}
.like-btn.liked { background: #ff6b6b; color: white; }

/* 暖心话语墙 */
.warm-words-wall {
  background: white;
  border-radius: 25px;
  padding: 35px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.new-warmword-form {
  background: rgba(42, 33, 27, 0.5);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px dashed rgba(255, 238, 214, 0.16);
}
.warmword-input {
  width: 100%;
  padding: 15px;
  border: 1.5px solid rgba(255, 238, 214, 0.2);
  border-radius: 15px;
  font-size: 1em;
  resize: vertical;
  outline: none;
  background: transparent;
  color: #f3e9dd;
  caret-color: #f2a65a;
}
.warmword-input:focus {
  border-color: rgba(242, 166, 90, 0.55);
  box-shadow: 0 0 0 3px rgba(242, 166, 90, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.warmword-input::placeholder {
  color: rgba(195, 178, 162, 0.55);
}
.warmword-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.submit-warmword-btn {
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  color: #5a4b9e;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
}
.submit-warmword-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.word-card {
  background: linear-gradient(135deg, #fff9c4 0%, #ffecb3 100%);
  border-radius: 15px;
  padding: 25px;
  position: relative;
  border: 2px solid transparent;
}
.word-card:hover { transform: translateY(-5px); border-color: #ffb74d; }
.word-card.top-word {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border: 3px solid #ff6b6b;
}
.word-card.top-word::after {
  content: "🏆 今日精选";
  position: absolute;
  top: -12px;
  right: 20px;
  background: #ff6b6b;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8em;
}
.word-content {
  font-size: 1.2em;
  line-height: 1.6;
  color: #5d4037;
  font-style: italic;
  margin-bottom: 20px;
  text-align: center;
}
.word-footer {
  display: flex;
  justify-content: space-between;
  color: #795548;
}
.word-likes {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.word-likes:hover { color: #ff6b6b; transform: scale(1.1); }

/* 心理咨询浮动按钮 */
.counseling-float-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
     background: linear-gradient(135deg, #dcea66 0%, #f0ba35 100%);
  color: white;
  padding: 16px 32px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  border: none;
  z-index: 100;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.counseling-float-btn:hover { transform: translateY(-5px); }

/* 心理咨询弹窗（简化保留） */
.counseling-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-box {
  background: white;
  width: 90%;
  max-width: 800px;
  border-radius: 25px;
  overflow: hidden;
}
.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  color: white;
  position: relative;
}
.modal-header h3 { margin: 0; font-size: 2em; }
.doctor-list { max-height: 500px; overflow-y: auto; padding: 20px; }
.doctor-card {
  display: flex;
  background: #f9f8ff;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 20px;
  border: 2px solid #e0d6ff;
}
.doctor-avatar {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2em;
  margin-right: 20px;
}
.doctor-info h4 { color: #5a4b9e; margin: 0 0 8px; }
.consult-btn {
  background: #6a5af9;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  cursor: pointer;
}
.emergency-hotline {
  background: #fff5f5;
  padding: 20px;
  text-align: center;
  color: #d32f2f;
  font-weight: 600;
}

/* ===== 7. 树洞页面 · 全新治愈系 UI ===== */
.treehole-main-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 高度占满视口，减去顶部导航栏高度，保证底部不被挤压 */
  height: calc(100vh - 70px);
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 20px 20px;
  box-sizing: border-box;
}
.treehole-page {
  min-height: calc(100vh - 65px);
  background: radial-gradient(circle at 20% 30%, #1e2a4a, #0f1626);
  padding: 30px 20px;
  position: relative;
  overflow-x: hidden;
}
.treehole-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><circle cx="200" cy="150" r="80" fill="rgba(106,90,249,0.08)"/><circle cx="900" cy="500" r="120" fill="rgba(100,180,255,0.05)"/><circle cx="600" cy="700" r="150" fill="rgba(255,154,158,0.04)"/></svg>');
  pointer-events: none;
}

.treehole-container {
  display: flex;
  max-width: 1300px;
  margin: 0 auto;
  gap: 30px;
  min-height: 600px;
  position: relative;
  z-index: 1;
}

/* ---------- 左侧：TA的心事 ---------- */
.confessions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.confession-card {
  background: rgba(20, 30, 50, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 18px 20px;
  border-left: 5px solid #6a5af9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.confession-card, .conf-card {
  background: rgba(20, 30, 50, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 18px 20px;
  border-left: 5px solid #6a5af9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.confession-card:hover, .conf-card:hover {
  background: rgba(40, 55, 80, 0.7);
  transform: translateX(6px) translateY(-2px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(106, 90, 249, 0.3);
  border-color: rgba(106, 90, 249, 0.5);
}
.conf-card-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c6cf0, #c084fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
}
.conf-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conf-card-body {
  flex: 1;
  min-width: 0;
}
.conf-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e5d9ff;
  margin-bottom: 8px;
}
.conf-card-text {
  font-size: 0.95rem;
  color: rgba(230,220,255,0.92);
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  color: #5b5e7a;
  font-size: 0.95rem;
  margin: 14px 0 18px;
}
.comment-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #4f4c70;
}
.comment-time {
  font-size: 0.82rem;
  color: rgba(105, 110, 155, 0.9);
}
.comment-text-content {
  margin: 0;
  color: #3b3c51;
  line-height: 1.8;
  white-space: pre-wrap;
}
.comment-expand-btn {
  margin-top: 8px;
  background: transparent;
  border: none;
  color: #6a5af9;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.comment-expand-btn:hover {
  text-decoration: underline;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.card-emoji {
  font-size: 1.7em;
  background: rgba(106, 90, 249, 0.2);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.card-time {
  font-size: 0.8em;
  color: #a0b5d0;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 10px;
  border-radius: 30px;
  font-weight: 500;
}
.card-content {
  color: #f0f4ff;
  line-height: 1.6;
  font-size: 1em;
  word-break: break-word;
  margin-bottom: 14px;
  padding-left: 6px;
}
.card-footer {
  display: flex;
  gap: 20px;
  font-size: 0.9em;
  color: #b8d0e9;
}
.likes-count, .comments-count {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.15);
  padding: 4px 12px;
  border-radius: 30px;
  transition: all 0.2s;
}
.likes-count:hover, .comments-count:hover {
  background: rgba(106, 90, 249, 0.2);
}

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: #a0b5d0;
}
.empty-icon {
  font-size: 3.5em;
  margin-bottom: 15px;
  opacity: 0.7;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* 详情弹窗美化 */
.modal {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    width: 450px;
    max-height: 85vh;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    border: none;
    display: flex;
    flex-direction: column;
}
/* 消息内容区 */
.detail-message {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d3436;
    background: #f8faff;
    padding: 20px;
    border-radius: 15px;
    margin: 15px 0;
    border-left: 5px solid #6c5ce7;
}
.modal-header h3 {
    color: #333;
    font-size: 1.5rem;
    background: linear-gradient(120deg, #6a5af9, #d66efd);
    /* -webkit-background-clip: text; */
    -webkit-text-fill-color: transparent;
}

.detail-content {
    background: #f0f2ff;
    padding: 20px;
    border-radius: 16px;
    margin: 15px 0;
    line-height: 1.6;
    color: #444;
}
.comment-input-group {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #eee;
    border-radius: 50px; /* 圆角胶囊风格 */
    margin: 20px 0;
}

.comment-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    padding-left: 15px;
    outline: none;
}
.comment-input-group input:focus {
    border-color: #6a5af9;
    box-shadow: 0 0 8px rgba(106, 90, 249, 0.2);
}

.comment-input-group button {
    background: #6c5ce7;
    color: white;
    border-radius: 50px;
    padding: 8px 20px;
    transition: 0.3s;
}
/* ---------- 右侧：漂流瓶核心区 ---------- */
.my-treehole-panel {
  flex: 2;
  min-width: 480px;
  background: rgba(15, 25, 45, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(106, 90, 249, 0.15) inset;
}

.my-treehole-panel .panel-header h2 {
  color: #f5eeff;
  font-size: 2em;
  margin-bottom: 8px;
  font-family: 'Pacifico', cursive;
  letter-spacing: 1.5px;
}
.my-treehole-panel .panel-subtitle {
  color: #b8d0e9;
  margin-bottom: 20px;
}

/* 用户信息条 */
.user-match-info {
  display: flex;
  gap: 25px;
  padding: 16px 20px;
  background: rgba(106, 90, 249, 0.15);
  border-radius: 40px;
  margin-bottom: 30px;
  color: #d9e2ff;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
}
.user-match-info span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 扔/捡瓶子区域共用卡片样式 */
.throw-bottle-section, .pick-bottle-section {
  background: rgba(20, 32, 55, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.throw-bottle-section h3, .pick-bottle-section h3 {
  color: #d6e3ff;
  font-size: 1.5em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 匹配偏好 */
.match-preference {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}
.pref-label {
  color: #e0ecff;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1.05em;
  padding: 6px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 40px;
  transition: 0.2s;
}
.pref-label:hover {
  background: rgba(106, 90, 249, 0.2);
}
.pref-label input {
  accent-color: #8b7dff;
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/* 输入框 */
.bottle-input {
  width: 100%;
  padding: 18px;
  border-radius: 20px;
  background: rgba(10, 18, 30, 0.7);
  border: 2px solid rgba(106, 90, 249, 0.3);
  color: #f0f4ff;
  font-size: 1.05em;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: all 0.3s;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
}
.bottle-input:focus {
  border-color: #8b7dff;
  box-shadow: 0 0 0 4px rgba(106, 90, 249, 0.2), inset 0 2px 6px rgba(0,0,0,0.3);
  background: rgba(15, 25, 40, 0.9);
}

.char-counter {
  text-align: right;
  color: #a0b5d0;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 0.9em;
}

/* 按钮 */
.bottle-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.throw-btn, .pick-btn {
  background: linear-gradient(145deg, #3a5f7a, #1e3a5a);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 60px;
  font-size: 1.15em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3), 0 2px 0 rgba(255,255,255,0.1) inset;
  border: 1px solid rgba(255,255,255,0.15);
  letter-spacing: 0.5px;
}
.throw-btn:hover:not(:disabled), .pick-btn:hover:not(:disabled) {
  transform: translateY(-4px);
  background: linear-gradient(145deg, #4a7a9a, #2a4a6a);
  box-shadow: 0 15px 25px rgba(0,0,0,0.4), 0 0 0 2px rgba(139, 125, 255, 0.3);
}
.throw-btn:disabled, .pick-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* 捡到的瓶子卡片 */
.picked-bottle {
  
    min-height: 200px; /* 或与内容高度相近的值 */
  margin-top: 30px;
  background: linear-gradient(145deg, #1c2b45, #132035);
  border-radius: 24px;
  padding: 24px;
  border: 2px solid #6a5af9;
  box-shadow: 0 20px 30px rgba(0,0,0,0.5), 0 0 30px rgba(106, 90, 249, 0.2);
  position: relative;
  overflow: hidden;
}
.picked-bottle::after {
  content: "✨";
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 2em;
  opacity: 0.2;
  color: #ffd966;
}
.picked-bottle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d6e3ff;
  margin-bottom: 18px;
}
.bottle-emoji {
  font-size: 2.5em;
  filter: drop-shadow(0 4px 6px black);
}
.picked-bottle-content {
  color: #f5f9ff;
  font-size: 1.2em;
  line-height: 1.7;
  padding: 18px;
  background: rgba(0,0,0,0.2);
  border-radius: 18px;
  margin-bottom: 20px;
  border: 1px dashed rgba(255,255,255,0.2);
}
.picked-bottle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: #b8d0e9;
  font-size: 0.95em;
  margin-bottom: 24px;
  background: rgba(0,0,0,0.2);
  padding: 12px 18px;
  border-radius: 40px;
}
.picked-bottle-actions {
  display: flex;
  gap: 20px;
}
.like-picked-btn, .close-picked-btn {
  padding: 10px 24px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  font-size: 1em;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.like-picked-btn {
  background: rgba(255,107,107,0.25);
  color: #ffb3b3;
  border: 1px solid rgba(255,107,107,0.5);
}
.like-picked-btn:hover {
  background: #ff6b6b;
  color: white;
  transform: scale(1.02);
}
.close-picked-btn {
  background: rgba(255,255,255,0.08);
  color: #d0d0e0;
  border: 1px solid rgba(255,255,255,0.2);
}
.close-picked-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* 历史瓶子 */
.bottle-history {
  margin-top: 30px;
  background: rgba(0,0,0,0.2);
  border-radius: 20px;
  padding: 18px 20px;
}
.bottle-history h4 {
  color: #d6e3ff;
  margin-bottom: 15px;
  font-size: 1.2em;
}
.history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed #3a4a6a;
  color: #c0d0e8;
}
.history-status {
  color: #7ae07a;
  font-weight: 500;
}

/* 心事详情弹窗优化 */
.confession-modal .modal-content {
  background: linear-gradient(145deg, #1e2a4a, #0f1a2e);
  border: 1px solid rgba(106, 90, 249, 0.5);
  box-shadow: 0 30px 50px rgba(0,0,0,0.7);
}
/* 解决冒号渲染问题的评论样式 */
.comment-item {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #f1f1f1;
}
.u-name { color: #6c5ce7; font-weight: bold; margin-right: 5px; }
.u-text { color: #636e72; }

.confession-modal .comment-input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: rgba(10,18,30,0.8);
  border: 1px solid #6a5af9;
  color: #fff;
  resize: none;
}

.public-confessions-panel{
  flex: 1;
  min-width: 360px;
  max-width: 480px;
  background: rgba(20, 32, 55, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
public-confessions-panel h3 {
  color: #d6e3ff;
  font-size: 1.5em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 滚动条美化 */
.public-confessions-panel::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 6px;
}
.public-confessions-panel::-webkit-scrollbar-thumb {
  background: #6a5af9;
  border-radius: 10px;
}

/* 响应式微调 */
@media (max-width: 768px) {
  .my-treehole-panel { min-width: auto; }
  .throw-btn, .pick-btn { padding: 12px 20px; }
}
/* 评论 */
/* ---------- 评论弹窗美化（替换/覆盖原有规则） ---------- */

/* 覆盖原来的 .comment-modal .modal-box，使捡到瓶子的留言弹窗更统一美观 */
.comment-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.comment-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.comment-modal .modal-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(145deg, #1f2b45, #142033);
  border-radius: 18px;
  padding: 18px;
  color: #e8eefc;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  border: 1px solid rgba(106,90,249,0.12);
}

/* 头部 */
.comment-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.comment-modal .modal-header h3 {
  margin: 0;
  font-size: 1.2em;
  color: #fff;
}
.comment-modal .modal-header button {
  background: none;
  border: none;
  color: #cfd6ff;
  font-size: 1.4em;
  cursor: pointer;
}

/* 评论列表项 */
.comment-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.comment-item {
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}
.comment-top {
  display:flex;
  justify-content:space-between;
  font-size: 0.85em;
  color: #bcd0ff;
}
.comment-text {
  margin-top:6px;
  color: #ffffff;
}

/* 输入区 */
.comment-input-area textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: #fff;
  resize: vertical;
}

/* 优化发送按钮样式（与站点按钮风格一致） */
.comment-modal .btn-confirm {
  background: linear-gradient(135deg, #6a5af9, #8b7dff);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 600;
}
.comment-modal .btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(106,90,249,0.25);
}

/* 公开心事详情弹窗复用 tip-modal 的样式，不需要额外规则（已有 tip-modal 样式） */
/* ===== 8. 我的空间页面（全新设计） ===== */
.profile-page {
  min-height: 100vh;
  background: radial-gradient(circle at 30% 40%, #2b2240 0%, #14102a 100%);
  padding: 60px 20px 80px;
  position: relative;
  overflow: visible;
}

/* 背景光晕装饰 */
.bg-decoration {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(160, 120, 255, 0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.profile-container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

/* 未登录欢迎区 */
.guest-welcome {
  text-align: center;
  padding: 80px 20px;
  color: #d1c4e9;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.guest-welcome h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #ede7f6;
  font-weight: 600;
}
.guest-welcome p {
  color: #b39ddb;
  font-size: 1.2rem;
  margin-bottom: 35px;
}

.auth-actions {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}
.btn-login, .btn-register {
  padding: 14px 40px;
  border: none;
  border-radius: 40px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.5px;
}
.btn-login {
  background: rgba(255, 255, 255, 0.15);
  color: #ede7f6;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-login:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}
.btn-register {
  background: linear-gradient(135deg, #7c4dff, #b388ff);
  color: white;
  box-shadow: 0 8px 20px rgba(124, 77, 255, 0.35);
}
.btn-register:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(124, 77, 255, 0.5);
}

/* ---------- 已登录状态 ---------- */
.user-profile {
  animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 头部信息卡 */
.profile-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 35px;
  padding: 25px 30px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 55px;
  border: 3px solid rgba(180, 140, 255, 0.5);
  box-shadow: 0 10px 25px rgba(100, 60, 200, 0.3);
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.info h1 {
  font-size: 2.2rem;
  color: #ffffff;
  margin: 0 0 8px 0;
  font-weight: 700;
  letter-spacing: 1px;
}
.meta {
  color: #c0b0e8;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 35px;
}
.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(180, 140, 255, 0.3);
}
.stat-card h3 {
  margin: 0 0 12px 0;
  color: #b7a0e0;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.stat-card p {
  margin: 8px 0;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.4rem;
}
.stat-card small {
  color: #9a8abf;
  font-size: 0.9rem;
}

/* 人格实验室标题 */
.test-section-header {
  text-align: center;
  margin: 20px 0 25px;
}
.test-section-header h2 {
  color: #ede7f6;
  font-size: 1.8rem;
  margin-bottom: 5px;
}
.section-subtitle {
  color: #b39ddb;
}

/* 测试卡片通用 */
.test-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 25px;
  margin-bottom: 20px;
  transition: all 0.3s;
}
.test-card:hover {
  border-color: rgba(180, 140, 255, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.card-title .icon {
  font-size: 2rem;
}
.card-title h3 {
  color: #d1c4e9;
  font-size: 1.3rem;
  margin: 0;
}

/* 大五人格输入组 */
.input-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.custom-input {
  flex: 1;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: white;
  font-size: 1rem;
  outline: none;
  transition: 0.2s;
}
.custom-input:focus {
  border-color: #b388ff;
  box-shadow: 0 0 0 3px rgba(179, 136, 255, 0.2);
}

/* 按钮风格统一 */
.btn-primary, .btn-submit-all {
  background: linear-gradient(135deg, #7c4dff, #b388ff);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(124, 77, 255, 0.3);
}
.btn-primary:hover, .btn-submit-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 77, 255, 0.5);
}

/* 依恋测评折叠 */
.card-header-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.arrow-icon {
  color: #b388ff;
  font-size: 1.2rem;
  transition: transform 0.3s;
}
.arrow-icon.is-active {
  transform: rotate(180deg);
}

.attachment-body {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.q-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d1c4e9;
}
.q-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.q-idx {
  background: #7c4dff;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.q-text {
  font-size: 1rem;
}
.q-btns button {
  padding: 6px 16px;
  margin-left: 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #d1c4e9;
  cursor: pointer;
  transition: 0.2s;
}
.q-btns button.active {
  background: #7c4dff;
  border-color: #7c4dff;
  color: white;
  box-shadow: 0 0 12px rgba(124, 77, 255, 0.4);
}

/* AI报告卡片 */
.ai-report-card {
  margin-top: 25px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
  border-left: 5px solid #b388ff;
  color: #ede7f6;
}
.ai-report-card h4 {
  margin: 0 0 15px 0;
  font-size: 1.3rem;
  color: #d1c4e9;
}
.analysis-text {
  line-height: 1.8;
  color: #d1c4e9;
  font-style: normal;
  font-size: 1.05rem;
}
.loading-text {
  color: #b39ddb;
  font-style: italic;
}

/* 退出按钮 */
.action-footer {
  text-align: center;
  margin-top: 40px;
}
.btn-logout {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d1c4e9;
  padding: 12px 40px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-logout:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: #ff6b6b;
  color: #ff6b6b;
  transform: translateY(-2px);
}

/* 保留登录/注册弹窗原有样式，无需修改 */
/* 弹窗 */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

body:not(.is-profile-page) .profile-auth-modal {
  display: none !important;
  pointer-events: none !important;
}

.modal {
  background: white;
  width: 90%;
  max-width: 420px;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.modal h3 {
  color: #5a4b9e;
  text-align: center;
  margin-bottom: 20px;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #6b5ca8;
  font-weight: 500;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 1em;
  outline: none;
}
.form-group input:focus,
.form-group select:focus {
  border-color: #6a5af9;
  box-shadow: 0 0 0 2px rgba(106, 90, 249, 0.2);
}
.modal-footer {
  text-align: center;
  margin-top: 20px;
}
.btn-cancel {
  background: #f0f0f0;
  color: #666;
  padding: 10px 20px;
  border: none;
  border-radius: 24px;
  margin-right: 10px;
  cursor: pointer;
}
.btn-confirm {
  background: linear-gradient(90deg, #6a5af9, #9a7dff);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 24px;
  cursor: pointer;
}
.switch-link {
  text-align: center;
  margin-top: 16px;
  color: #8a7db5;
}
.switch-link a {
  color: #6a5af9;
  text-decoration: none;
}
.avatar-preview {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
.avatar-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e0d6ff;
  box-shadow: 0 4px 12px rgba(106, 90, 249, 0.2);
}
/* ===== 情绪档案本（点击展开）===== */
.history-book-wrapper {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 90px;
  height: 120px;
  z-index: 200;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.magic-book {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #5e4b3c;
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.book-cover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.cover-hint {
    font-size: 0.65rem;
    color: rgb(247 226 181 / 70%);
    margin-top: 6px;
}

.book-pages {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden;
}

/* 展开状态 */
.history-book-wrapper.is-open {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 520px;
  bottom: auto;
  right: auto;
  z-index: 9999;
}

/* .history-book-wrapper.is-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: -1;
} */

.history-book-wrapper.is-open .magic-book {
  border-radius: 20px;
  background: rgb(227 206 147 / 80%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(180, 150, 255, 0.2);
  width: 100%;
  height: 100%;
}

.history-book-wrapper.is-open .book-cover {
  display: none;
}

.history-book-wrapper.is-open .book-pages {
  display: flex;
}

.page-title {
  font-family: 'Pacifico', cursive;
  font-size: 1.8rem;
  color: #deb438;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(180, 150, 255, 0.2);
  flex-shrink: 0;
}

.history-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.history-scroll::-webkit-scrollbar { width: 4px; }
.history-scroll::-webkit-scrollbar-thumb {
  background: rgba(180, 150, 255, 0.3);
  border-radius: 4px;
}

.history-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(180, 150, 255, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.history-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.history-time {
  font-size: 0.72rem;
  color: rgba(200, 180, 255, 0.6);
}

.history-emoji {
  font-size: 1.2rem;
}

.history-text {
  font-size: 0.88rem;
  color: rgba(230, 220, 255, 0.85);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 0;
  margin: 0;
  font-family: inherit;
  font-weight: normal;
}

.empty-state {
  text-align: center;
  color: rgba(200, 180, 255, 0.4);
  font-size: 0.88rem;
  padding: 40px 0;
}

/* 往日回音详情弹窗（点击卡片后出现在正中央）*/
.archive-global-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 5, 30, 0.8);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.archive-global-modal {
  background: linear-gradient(145deg, #1e1050, #2d1b69);
  width: 90%;
  max-width: 440px;
  padding: 36px 32px 28px;
  border-radius: 24px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(180, 150, 255, 0.2);
  text-align: center;
}

.archive-global-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(200, 180, 255, 0.5);
  transition: color 0.2s;
  line-height: 1;
}
.archive-global-close:hover { color: #c4b5fd; }

.archive-global-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}

.archive-global-time {
  font-size: 0.82rem;
  color: rgba(200, 180, 255, 0.6);
  margin-bottom: 4px;
}

.archive-global-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  color: #c4b5fd;
  border-bottom: 1px dashed rgba(180, 150, 255, 0.25);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.archive-global-body p {
  line-height: 1.9;
  font-size: 1rem;
  color: rgba(230, 220, 255, 0.9);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  text-indent: 0;
  margin: 0 0 16px;
  font-weight: normal;
  font-family: inherit;
}

.archive-global-footer {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.modal-tag {
  background: rgba(180, 150, 255, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(180, 150, 255, 0.25);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
}

/* 弹窗动画 */
.archive-pop-enter-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.archive-pop-leave-active {
  transition: all 0.2s ease-in;
}
.archive-pop-enter-from,
.archive-pop-leave-to {
  opacity: 0;
  transform: scale(0.85) translateY(20px);
}

.icp-footer {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: rgba(15, 10, 30, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(180, 150, 255, 0.3);
  border-radius: 30px;
  padding: 6px 16px;
  color: #c4b5fd;
  font-size: 0.75rem;
  z-index: 9998;
  letter-spacing: 0.5px;
}
.icp-footer a {
  color: #c4b5fd;
  text-decoration: none;
}
.icp-footer a:hover {
  color: #ffffff;
}
/* 弹窗样式 */
.conf-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,5,25,0.82);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999; padding: 20px;
}
.conf-modal-box {
  background: linear-gradient(160deg, #1a1040 0%, #251560 100%);
  border: 1px solid rgba(180,150,255,0.2);
  border-radius: 26px;
  width: 100%; max-width: 440px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  position: relative;
}
.conf-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,0.08); border: none;
  color: rgba(200,180,255,0.6); width: 30px; height: 30px;
  border-radius: 50%; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  min-height: unset; transition: all 0.2s; z-index: 1;
}
.conf-modal-close:hover { background: rgba(255,255,255,0.14); color: white; }
.conf-modal-author { display: flex; align-items: center; gap: 12px; padding: 20px 20px 12px; flex-shrink: 0; }
.conf-modal-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.conf-modal-avatar-letter { background: linear-gradient(135deg,#7c6cf0,#c084fc); color: white; font-size: 1.1rem; font-weight: 700; }
.conf-modal-author-info { display: flex; flex-direction: column; gap: 2px; }
.conf-modal-username { font-size: 0.92rem; font-weight: 600; color: #c4b5fd; }
.conf-modal-time { font-size: 0.72rem; color: rgba(200,180,255,0.45); }
.conf-modal-content { padding: 0 20px 14px; font-size: 1rem; color: rgba(235,225,255,0.92); line-height: 1.7; flex-shrink: 0; white-space: pre-wrap; word-break: break-word; }
.conf-modal-actions { display: flex; align-items: center; gap: 16px; padding: 0 20px 14px; flex-shrink: 0; }
.conf-modal-like { display: flex; align-items: center; gap: 6px; background: rgba(255,100,100,0.1); border: 1px solid rgba(255,100,100,0.2); color: rgba(255,160,160,0.85); border-radius: 20px; padding: 6px 16px; font-size: 0.88rem; cursor: pointer; transition: all 0.2s; min-height: 34px; }
.conf-modal-like:hover { background: rgba(255,100,100,0.22); color: #ff8888; }
.conf-modal-comment-count { font-size: 0.82rem; color: rgba(200,180,255,0.5); }
.conf-modal-divider { height: 1px; background: rgba(180,150,255,0.1); margin: 0 20px; flex-shrink: 0; }
.conf-modal-comments { flex: 1; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.conf-modal-comments::-webkit-scrollbar { width: 3px; }
.conf-modal-comments::-webkit-scrollbar-thumb { background: rgba(180,150,255,0.25); border-radius: 3px; }
.conf-modal-empty { text-align: center; color: rgba(200,180,255,0.35); font-size: 0.85rem; padding: 20px 0; }
.conf-modal-comment-item { display: flex; gap: 10px; align-items: flex-start; }
.conf-modal-c-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#4a3a8a,#6a4a9a); color: white; font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.conf-modal-c-body { flex: 1; min-width: 0; }
.conf-modal-c-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.conf-modal-c-name { font-size: 0.78rem; font-weight: 600; color: #c4b5fd; }
.conf-modal-c-time { font-size: 0.7rem; color: rgba(200,180,255,0.38); }
.conf-modal-c-text { font-size: 0.88rem; color: rgba(220,210,255,0.82); line-height: 1.55; word-break: break-word; }
.conf-modal-input-area { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid rgba(180,150,255,0.1); flex-shrink: 0; }
.conf-modal-input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(180,150,220,0.2); border-radius: 22px; padding: 9px 16px; color: #e0d5ff; font-size: 0.88rem; outline: none; font-family: inherit; transition: border-color 0.2s; min-height: 40px; }
.conf-modal-input:focus { border-color: rgba(180,150,220,0.5); }
.conf-modal-input::placeholder { color: rgba(200,180,255,0.3); }
.conf-modal-send { background: linear-gradient(135deg,#7c6cf0,#c084fc); color: white; border: none; border-radius: 22px; padding: 9px 18px; font-size: 0.86rem; cursor: pointer; min-height: 40px; white-space: nowrap; font-family: inherit; }
.conf-modal-fade-enter-active { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.conf-modal-fade-leave-active { transition: all 0.18s ease-in; }
.conf-modal-fade-enter-from, .conf-modal-fade-leave-to { opacity: 0; transform: scale(0.92) translateY(12px); }

/* 我的瓶子回应样式 */
.response-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(180,150,220,0.06);
  border-radius: 10px;
  margin-bottom: 6px;
}
.response-user { font-size: 0.78rem; font-weight: 600; color: #c4b5fd; }
.response-text { font-size: 0.85rem; color: rgba(220,210,255,0.82); line-height: 1.5; }
.response-time { font-size: 0.7rem; color: rgba(200,180,255,0.38); }

@media (max-width: 768px) {
  .conf-modal-box { max-width: 96vw; border-radius: 20px; max-height: 88vh; }
}
/* ===== 往日回音 ===== */
.archive-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-shrink:0; }
.archive-close-x {
    background: rgb(223 188 95 / 43%);
    border: 1px solid rgb(255 241 150 / 76%);
    color: rgb(255 248 180 / 74%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset;
    transition: all 0.2s;
}
.archive-close-x:hover { background:rgba(180,150,255,0.18); color:white; }
.history-card { cursor:pointer; transition:background 0.2s; border-radius:10px; padding:10px 12px; margin-bottom:6px; border:1px solid rgba(180,150,255,0.08); }
.history-card:hover { background:rgba(255,255,255,0.05); }
.history-card.hc-expanded { border-color:rgba(180,150,255,0.25); background:rgba(180,150,255,0.06); }
.history-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.history-emoji { margin-left:auto; font-size:1rem; }
.hc-del-btn { background:none; border:none; cursor:pointer; font-size:0.82rem; padding:2px 4px; border-radius:6px; opacity:0.35; transition:opacity 0.2s; min-height:unset; min-width:unset; }
.hc-del-btn:hover { opacity:1; background:rgba(239,68,68,0.15); }
.history-text { font-size:0.88rem; color:rgba(230,220,255,0.85); line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.history-text.hc-full { white-space:pre-wrap !important; overflow:visible !important; text-overflow:unset !important; word-break:break-word; }
.hc-hint { font-size:0.7rem; color:rgba(180,150,255,0.45); display:block; margin-top:4px; }
.hc-empty { text-align:center;color: rgb(184 153 20 / 74%); font: size 1.2rem; padding:20px 0; }
/* ===== 依恋人格情景题 ===== */
.q-scenario {
  padding: 16px 0;
  border-bottom: 1px solid rgba(180,150,220,0.08);
}
.q-scenario:last-child { border-bottom: none; }

.q-scenario .q-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.q-scenario .q-idx {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(124,108,240,0.2); color: #c4b5fd;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

.q-scenario .q-text {
  font-size: 0.92rem;
  color: rgba(230,220,255,0.9);
  line-height: 1.6;
  font-weight: 500;
}

.q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 32px;
}

.q-opt-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(180,150,220,0.18);
  background: rgba(255,255,255,0.03);
  color: rgba(200,180,255,0.7);
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  line-height: 1.5;
  min-height: unset;
  user-select: none;
}

.q-opt-btn:hover {
  border-color: rgba(180,150,220,0.4);
  background: rgba(124,108,240,0.08);
  color: #c4b5fd;
}

.q-opt-btn.active {
  border-color: #7c6cf0;
  background: linear-gradient(135deg, rgba(124,108,240,0.25), rgba(192,132,252,0.15));
  color: #e0d5ff;
  font-weight: 500;
}

@media (max-width: 768px) {
  .q-options { padding-left: 28px; }
  .q-opt-btn { font-size: 0.82rem; padding: 9px 12px; }
}
/* ===== 小伴AI 左右布局 ===== */
.ai-page {
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: stretch;
  padding: 20px;
  box-sizing: border-box;
}

.ai-layout-v2 {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  height: calc(100vh - 110px);
}

/* 左侧工具箱 */
.ai-left-panel {
    flex: 4;
    min-width: 260px;
    max-width: 420px;
    background: rgba(60, 100, 70, 0.3);           /* 透明绿 */
    backdrop-filter: blur(16px);                   /* 毛玻璃 */
    border: 1px solid rgba(100, 150, 120, 0.4);    /* 绿边框 */
    border-radius: 24px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.ai-left-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8d5ff;
  letter-spacing: 1px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(168,85,247,0.25);
}

.ai-gen-btn {
    background: rgba(80, 120, 90, 0.35);           /* 透明绿 */
    backdrop-filter: blur(8px);                    /* 毛玻璃 */
    border: 1px solid rgba(120, 180, 130, 0.5);    /* 绿边框 */
    color: #e0ffe0;                                /* 浅绿文字 */
    padding: 14px 16px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s;
    text-align: left;
    min-height: 52px;
}
.ai-gen-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-gen-btn.loading { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.7} 50%{opacity:1} }

/* 情绪模式卡片 */
.emotion-pattern-card {
  background: rgba(147,51,234,0.12);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 16px;
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pattern-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(168,85,247,0.2);
  color: #c4b5fd;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.pattern-close {
  background: transparent;
  border: none;
  color: rgba(200,180,255,0.5);
  cursor: pointer;
  font-size: 1.3rem;
  min-height: unset;
  transition: color 0.2s;
}
.pattern-close:hover { color: #ef4444; }
.pattern-body {
  overflow-y: auto;
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.75;
  color: #e8d5ff;
}
.pattern-body::-webkit-scrollbar { width: 3px; }
.pattern-body::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius:3px; }
.pattern-body h2 { font-size:0.95rem; font-weight:700; color:#c4b5fd; margin:12px 0 5px; padding-bottom:3px; border-bottom:1px solid rgba(168,85,247,0.15); }
.pattern-body h3 { font-size:0.88rem; font-weight:600; color:#a78bfa; margin:10px 0 4px; }
.pattern-body strong { color:#f0d5ff; font-weight:600; }
.pattern-body p { margin:0 0 8px; }
.pattern-body ul { padding-left:16px; margin:4px 0 8px; }
.pattern-body li { margin-bottom:4px; }

/* 右侧聊天 */
.ai-right-panel {
  flex: 6;
  background: linear-gradient(135deg, rgba(40,20,80,0.4), rgba(20,30,70,0.3));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(180,150,255,0.2);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-header-v2 {
    padding: 18px 24px;
    background: rgba(50, 90, 60, 0.5);             /* 透明绿 */
    backdrop-filter: blur(12px);                   /* 毛玻璃 */
    border-bottom: 1px solid rgba(120, 180, 130, 0.35); /* 绿边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #d4ffd4;                                /* 浅绿文字 */
}

.ai-chat-dropdown-trigger {
  list-style: none;
  width: 100%;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  background: rgba(50, 90, 60, 0.45);
  border-bottom: 1px solid rgba(120, 180, 130, 0.28);
  font-family: inherit;
  text-align: left;
  transition: background 0.2s ease;
}

.ai-chat-dropdown-trigger:hover {
  background: rgba(55, 98, 66, 0.55);
}

.ai-chat-dropdown-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #d4ffd4;
}

.ai-chat-dropdown-hint {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(200, 230, 205, 0.55);
}

.ai-chat-chevron {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid rgba(200, 230, 205, 0.75);
  border-bottom: 2px solid rgba(200, 230, 205, 0.75);
  transform: rotate(45deg);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.ai-chat-chevron.open {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.ai-chat-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 漂流瓶留言美化 */
.pb-comment-box {
  margin-top: 12px;
}
.pb-comment-input-row {
  display: flex;
  gap: 8px;
}
.pb-comment-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(180,150,220,0.2);
  border-radius: 20px;
  padding: 9px 14px;
  color: #e0d5ff;
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  min-height: 40px;
}
.pb-comment-input:focus { border-color: rgba(180,150,220,0.5); }
.pb-comment-input::placeholder { color: rgba(200,180,255,0.3); }
.pb-comment-send {
    background: linear-gradient(135deg, #6cbef0, #c084fc);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 9px 18px;
    font-size: 0.86rem;
    cursor: pointer;
    min-height: 40px;
    white-space: nowrap;
    font-family: inherit;
}

.pb-comments-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pb-comments-label { font-size: 0.78rem; color: rgba(200,180,255,0.5); margin-bottom: 4px; }
.pb-comment-item { display: flex; gap: 8px; align-items: flex-start; }
.pb-c-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#4a3a8a,#6a4a9a); color:white; font-size:0.72rem; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pb-c-body { flex:1; min-width:0; }
.pb-c-meta { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.pb-c-name { font-size:0.76rem; font-weight:600; color:#c4b5fd; }
.pb-c-time { font-size:0.68rem; color:rgba(200,180,255,0.38); }
.pb-c-text { font-size:0.86rem; color:rgba(220,210,255,0.82); line-height:1.5; word-break:break-word; }

@media (max-width: 768px) {
  .ai-layout-v2 { flex-direction: column; height: auto; }
  .ai-left-panel { max-width: 100%; min-width: unset; }
}
/* ===== 捡到的漂流瓶 重设计 ===== */
.picked-bottle-card {
    background: linear-gradient(135deg, rgb(20 48 80 / 60%), rgb(15 27 50 / 50%));
    border: 1px solid rgb(80 125 223 / 30%);
    border-radius: 20px;
    padding: 20px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

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

.pb-card-badge {
    background: linear-gradient(135deg, rgb(108 137 240 / 30%), rgba(192, 132, 252, 0.2));
    border: 1px solid rgb(108 154 240 / 30%);
    color: #b5c1fd;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.pb-card-time {
  font-size: 0.72rem;
  color: rgba(200,180,255,0.45);
}

.pb-card-content {
  font-size: 0.95rem;
  color: rgba(235,225,255,0.92);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0;
}

.pb-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pb-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,100,100,0.1);
  border: 1px solid rgba(255,100,100,0.2);
  color: rgba(255,160,160,0.9);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 34px;
}
.pb-like-btn:hover { background: rgba(255,100,100,0.2); color: #ff8888; }

.pb-comment-count {
  font-size: 0.82rem;
  color: rgba(200,180,255,0.5);
  flex: 1;
}

.pb-close-btn {
  background: none;
  border: 1px solid rgba(180,150,220,0.2);
  color: rgba(200,180,255,0.45);
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 30px;
  font-family: inherit;
}
.pb-close-btn:hover { border-color: rgba(180,150,220,0.4); color: #c4b5fd; }

.pb-divider {
  height: 1px;
  background: rgba(180,150,255,0.1);
}

.pb-no-comment {
  font-size: 0.82rem;
  color: rgba(200,180,255,0.3);
  text-align: center;
  padding: 8px 0;
}

.pb-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}
.pb-comments-list::-webkit-scrollbar { width: 3px; }
.pb-comments-list::-webkit-scrollbar-thumb { background: rgba(180,150,255,0.25); border-radius: 3px; }

.pb-comment-item { display:flex; gap:8px; align-items:flex-start; }
.pb-c-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#4a3a8a,#6a4a9a); color:white; font-size:0.72rem; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pb-c-body { flex:1; min-width:0; }
.pb-c-meta { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.pb-c-name { font-size:0.76rem; font-weight:600; color:#c4b5fd; }
.pb-c-time { font-size:0.68rem; color:rgba(200,180,255,0.38); }
.pb-c-text { font-size:0.86rem; color:rgba(220,210,255,0.82); line-height:1.5; word-break:break-word; }

.pb-comment-input-row {
  display: flex;
  gap: 8px;
}
.pb-comment-input {
  flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(180,150,220,0.2);
  border-radius:20px; padding:9px 14px; color:#e0d5ff; font-size:0.88rem;
  outline:none; font-family:inherit; transition:border-color 0.2s; min-height:40px;
}
.pb-comment-input:focus { border-color:rgba(180,150,220,0.5); }
.pb-comment-input::placeholder { color:rgba(200,180,255,0.3); }

@media (max-width: 768px) {
  .public-confessions-panel { min-width: unset !important; max-width: 100% !important; }
  .picked-bottle-card { padding: 16px; }
}
/* ===== 导航品牌 ===== */
.nav-brand {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.nav-right {
  display: flex; align-items: center; gap: 8px;
}
.nav-pill-btn {
cursor: pointer;
font-size: 1.1rem;                /* 原 0.84rem */
padding: 10px 24px;               /* 原 7px 16px */
border-radius: 28px;              /* 原 20px */
border: 1px solid rgb(244 244 244 / 18%);
background: rgb(236 235 243 / 8%);
transition: all 0.2s;
user-select: none;
/* 可选：增加最小宽度保证触摸区域 */
min-width: 80px;
text-align: center;
color: rgba(255, 255, 255, 0.9);
}
.nav-pill-btn:hover {
  background: rgba(124,108,240,0.22);
  color: #c4b5fd;
  border-color: rgba(180,150,255,0.4);
}

/* ===== 主页入口胶囊 ===== */
.home-nav-pills {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; padding: 20px 0 10px;
}

.pill-icon { font-size: 1.1rem; line-height: 1; }
@media (max-width: 600px) {
  .home-nav-pills { gap: 8px; }
  .pill-btn { padding: 10px 18px; font-size: 0.88rem; }
}
/* ===== 敬请期待 ===== */
.coming-soon-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 40px 20px; text-align: center;
}
.coming-soon-icon { font-size: 3rem; opacity: 0.6; }
.coming-soon-title {
  font-size: 1.2rem; font-weight: 600;
  color: #c4b5fd;
  font-family: 'Noto Serif SC', serif;
}
.coming-soon-sub {
  font-size: 0.88rem; color: rgba(200,180,255,0.5); line-height: 1.8;
}

/* ===== ICP 备案底栏 ===== */
.icp-footer-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 8px 16px;
  font-size: 0.7rem;
  color: rgba(200,180,255,0.22);
  background: rgba(8,5,20,0.7);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.04);
  z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.icp-footer-bar a { color: inherit; text-decoration: none; }
.icp-footer-bar a:hover { color: rgba(200,180,255,0.5); }
.icp-sep { opacity: 0.4; }
/* ===== 大五人格跳转入口样式 ===== */
.bf-link-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.bf-existing-score {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(124,108,240,0.1);
    border: 1px solid rgba(124,108,240,0.25);
    border-radius: 12px;
    padding: 10px 18px;
    width: 100%;
    justify-content: center;
}
.bf-existing-label {
    font-size: 0.8rem;
    color: rgba(200,190,255,0.6);
}
.bf-existing-code {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #c084fc;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.bf-hint-text {
    font-size: 0.75rem;
    color: rgba(200,190,255,0.35);
    text-align: center;
    margin-top: -4px;
}
/* ===== 大五人格 iframe 内嵌 ===== */
.bf-iframe-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
.bf-iframe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(124,108,240,0.12);
    border-bottom: 1px solid rgba(124,108,240,0.2);
    font-size: 0.88rem;
    color: #c4b5fd;
}
.bf-iframe-close {
    background: none;
    border: 1px solid rgba(200,180,255,0.25);
    color: rgba(200,180,255,0.6);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}
.bf-iframe-close:hover {
    background: rgba(200,100,100,0.15);
    border-color: rgba(200,100,100,0.3);
    color: #f87171;
}
.bf-iframe {
    width: 100%;
    height: 600px;
    border: none;
    background: transparent;
}
@media (max-width: 768px) {
    .bf-iframe {
        height: 80vh;
    }
}

/* ===== 大五人格入口样式 ===== */
.bf-link-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.bf-existing-score {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(124,108,240,0.1);
    border: 1px solid rgba(124,108,240,0.25);
    border-radius: 12px;
    padding: 10px 18px;
    width: 100%;
    justify-content: center;
}
.bf-existing-label { font-size: 0.8rem; color: rgba(200,190,255,0.6); }
.bf-existing-code {
    font-family: 'Courier New', monospace;
    font-size: 1rem; color: #c084fc;
    letter-spacing: 0.1em; font-weight: 600;
}
/* ===== 各页面独立背景（覆盖原有背景） ===== */

.page-home::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    pointer-events: none;
}

/* 寄存心情：卡其色渐变 */
.page-diary {
        background: linear-gradient(135deg, #f5e6d3, #ebca93) !important;
}

/* 倾听树洞：蓝色渐变 */
.treehole-page {
       background: linear-gradient(315deg, #001a5f, #a2dbf3) !important;}

/* 情绪诊断：绿色渐变 */
.ai-page {
        background: linear-gradient(135deg, #dbffdc, #004e04) !important;
}

/* 心晴指南：金色渐变 */
.moodsun-page {
    background: linear-gradient(135deg, #f3f5d6, #ac9f49) !important;
}

/* 我的空间：粉色渐变 */
.profile-page {
        background: linear-gradient(157deg, #ecd2da, #d36a88) !important;
}

/* 确保子容器透明，让背景透出来 */
.page-diary .diary-center-zone,
.page-diary .history-book-wrapper,
.treehole-page .treehole-container,
.ai-page .ai-layout-v2,
.moodsun-page .sun-container,
.profile-page .profile-container {
    background: transparent !important;
    backdrop-filter: none; /* 如果有模糊效果，清除 */
}

/* 保留卡片原有背景，不强制透明（避免内容看不清） */
.sticky-note, .conf-card, .message, .tip-card-compact {
    background: rgb(230 214 163 / 78%);
}







/* ==========================================
   ✨ 24h情绪便利店 - 梦幻水彩·光影玻璃治愈风 ✨
   ========================================== */

:root {
    --text-main: #44475a;          /* 柔和的紫灰色文字，绝不刺眼 */
    --text-muted: #797c91;         /* 次要文字颜色 */
    --glass-bg: rgba(255, 255, 255, 0.45); /* 高透毛玻璃背景 */
    --glass-border: rgba(255, 255, 255, 0.7); 
    --glass-shadow: 0 16px 40px rgba(162, 172, 190, 0.18);
    --btn-gradient: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
}

/* 全局基础设置重置 */
body, #Store {
    color: var(--text-main) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.6s ease-in-out;
}

/* 顶部全景导航栏 - 极致通透 */
/* ========== 深色玻璃质感导航栏（无装饰） ========== */

/* 移除所有伪元素装饰 */
.navigation::before,
.navigation::after {
    display: none !important;
}

/* 标题文字 */
.navigation h1 {
    color: #e0d5ff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 右侧按钮 */
.nav-pill-btn {
    background: rgba(30, 28, 45, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #e0d5ff !important;
    border-radius: 40px !important;
    transition: all 0.25s;
    padding: 8px 24px !important;
}
.nav-pill-btn:hover {
    background: rgba(60, 55, 90, 0.85) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.nav-pill-btn:hover, .nav-pill-btn.active {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #44475a !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5) !important;
}

/* ===== 核心页面背景：拒绝纯色，采用“水彩流体多重渐变” ===== */

/* 1. 主页：温暖黄色 · 深夜便利店灯火 */
.page-home {
    background:
      radial-gradient(ellipse 95% 55% at 50% -8%, rgba(255, 214, 120, 0.42) 0%, transparent 58%),
      radial-gradient(ellipse 60% 45% at 12% 88%, rgba(255, 198, 90, 0.14) 0%, transparent 50%),
      radial-gradient(ellipse 55% 40% at 92% 75%, rgba(242, 166, 90, 0.12) 0%, transparent 48%),
      linear-gradient(178deg, #2a2216 0%, #1e1810 42%, #16120c 100%) !important;
    background-image: none !important;
}

/* 2. 寄存心情（日记）：落日余晖（暖橘+柔桃晕染） */
.page-diary {
    background-color: #fdf5f0 !important;
    background-image: 
        radial-gradient(at 20% 20%, hsla(22, 100%, 88%, 0.8) 0px, transparent 50%),
        radial-gradient(at 80% 80%, hsla(340, 100%, 89%, 0.8) 0px, transparent 50%),
        radial-gradient(at 80% 20%, hsla(45, 100%, 85%, 0.8) 0px, transparent 50%),
        radial-gradient(at 20% 80%, hsla(300, 40%, 89%, 0.8) 0px, transparent 50%) !important;
}

/* 3. 倾听树洞：深海极光（柔和深蓝+薄荷绿光斑，保留深夜感但不死板） */
.treehole-page {
    background-color: #1a1f35 !important;
    background-image: 
        radial-gradient(at 0% 0%, hsla(240, 40%, 30%, 0.9) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(180, 50%, 25%, 0.8) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(280, 40%, 35%, 0.7) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(200, 60%, 25%, 0.8) 0px, transparent 50%) !important;
}
.treehole-page, .treehole-page h2, .treehole-page h3, .treehole-page p {
    color: #e2e6f3 !important; /* 树洞专属浅色文字 */
}

/* 4. 情绪诊断（AI）：空谷幽兰（淡青+浅蓝绿晕染） */
.ai-page {
    background-color: #f0f7f4 !important;
    background-image: 
        radial-gradient(at 10% 10%, hsla(160, 60%, 85%, 0.8) 0px, transparent 50%),
        radial-gradient(at 90% 90%, hsla(200, 70%, 88%, 0.8) 0px, transparent 50%),
        radial-gradient(at 90% 10%, hsla(120, 40%, 88%, 0.8) 0px, transparent 50%),
        radial-gradient(at 10% 90%, hsla(240, 50%, 90%, 0.8) 0px, transparent 50%) !important;
}

/* 5. 心晴指南：午后微风（奶油白+阳光黄+天空蓝） */
.moodsun-page {
    background-color: #fcfcf7 !important;
    background-image: 
        radial-gradient(at 20% 0%, hsla(50, 90%, 85%, 0.8) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(210, 80%, 88%, 0.8) 0px, transparent 50%),
        radial-gradient(at 100% 30%, hsla(0, 0%, 95%, 0.8) 0px, transparent 50%) !important;
}

/* 6. 我的空间：紫云梦境（丁香紫+樱花粉晕染） */
.profile-page, .page-profile {
    background-color: #f8f5fc !important;
    background-image: 
        radial-gradient(at 0% 0%, hsla(270, 70%, 90%, 0.8) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(330, 80%, 90%, 0.8) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(220, 60%, 90%, 0.8) 0px, transparent 50%) !important;
}

/* ===== 统一容器清除底色 ===== */
.diary-center-zone, .history-book-wrapper, .treehole-container, .ai-layout-v2, .sun-container, .profile-container {
    background: transparent !important;
}

/* ===== 核心：高级毛玻璃卡片（质感来源） ===== */
.sticky-note, .conf-card, .message, .tip-card-compact, .chat-box, .panel-card, .archive-card, .mood-stats-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--glass-shadow) !important;
    padding: 20px !important;
    color: var(--text-main) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

/* 树洞页面的特殊玻璃卡片（深色玻璃） */
.treehole-page .conf-card, .treehole-page .chat-box {
    background: rgba(20, 25, 45, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e2e6f3 !important;
}

/* 悬浮微动效果 */
.sticky-note:hover, .conf-card:hover, .tip-card-compact:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 50px rgba(162, 172, 190, 0.3) !important;
}

/* ===== 情感输入区：通透感 ===== */
textarea, input[type="text"], input[type="password"], select {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
}

textarea:focus, input[type="text"]:focus, select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(162, 172, 190, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5) !important;
}

/* ===== 治愈系光影按钮 ===== */
button, .btn, .submit-btn, .action-btn {
    background: var(--btn-gradient) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    color: #5c627a !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    box-shadow: 0 8px 20px rgba(162, 172, 190, 0.2) !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

button:hover, .btn:hover {
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 12px 25px rgba(162, 172, 190, 0.3) !important;
    color: #3b3f54 !important;
}

/* 进度条与高亮元素的柔和化 */
.progress-bar-fill, .chart-fill, .active-bar {
    background: linear-gradient(90deg, #ffd3b6 0%, #ffaaa5 100%) !important;
    border-radius: 20px !important;
}

/* 文字标题的清晰感 */
h2, h3, h4, .section-title {
    color: var(--text-main) !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(255,255,255,0.8);
}

/* 全局下侧移动端TabBar优化 */
.mobile-tabbar {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.tabbar-item.active {
    color: #ffaaa5 !important;
}

/* 柔和的滚动条 */
::-webkit-scrollbar-thumb {
    background: rgba(162, 172, 190, 0.3) !important;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(162, 172, 190, 0.5) !important;
}

/* ===================================================================
 * 「炉火暖夜」主题 + 招牌 + 返回键 + 树洞结构（原 theme-web.css 内容，已合并至此）
 * 放在文件末尾，覆盖前面的旧样式。
 * =================================================================== */
/* =========================================================================
 * 24h 情绪便利店 · 网页版「炉火暖夜」主题（对齐 App 暖调暗色）
 * 放在 emotion.css 之后加载。全面覆盖背景/文字/按钮/输入框配色。
 * ========================================================================= */
:root{
  --w-bg:#1C1410; --w-bg-2:#2A211B; --w-bg-3:#342A22;
  --w-primary:#F2A65A; --w-accent:#F4C77B; --w-coral:#E8896B; --w-sage:#93B79E;
  --w-ink:#F3E9DD; --w-ink-soft:#C3B2A2; --w-ink-faint:#8A7A6B;
  --w-line:rgba(255,238,214,0.09); --w-line-2:rgba(255,238,214,0.16);
  --w-radius:18px; --w-sh:0 10px 30px rgba(0,0,0,.3); --w-sh-s:0 4px 14px rgba(0,0,0,.22);
}

/* ---- 全局底色 ---- */
html,body,#Store,.page-container{ background:var(--w-bg) !important; color:var(--w-ink) !important; }
body{ background:radial-gradient(120% 70% at 50% -10%, rgba(242,166,90,.10), transparent 55%), var(--w-bg) !important; }
.page-diary,.ai-page,.moodsun-page,.treehole-page,.profile-page{ background:transparent !important; }

/* ---- 顶部导航 ---- */
.navigation{ background:rgba(24,17,13,.82) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--w-line) !important; box-shadow:none !important; }
.nav-brand,.nav-brand *{ color:var(--w-accent) !important; }
.nav-pill-btn{ background:var(--w-bg-2) !important; color:var(--w-ink-soft) !important; border:1px solid var(--w-line) !important; border-radius:999px !important; }
.nav-pill-btn:hover{ border-color:var(--w-primary) !important; color:var(--w-primary) !important; }

/* ---- 卡片/面板：清除紫色，统一暖卡片 ---- */
.glass-card,.card,.panel,.section-card,.stat-card,.test-card,.ai-card,.sun-card,
.treehole-card,.profile-header,.messages-container,.public-confessions-panel,
.my-treehole-panel,.panel-header,.tip-card-compact,.rank-item,.community-tip-card,
.word-card,.emotion-pattern-card,.history-card,.conf-card,.conf-modal-box,
.tip-modal-content,.modal-content,.daily-warm-quote,.emotion-tips-section,
.sun-right-column,.community-section,.warm-words-wall,.tips-ranking-section,
.new-tip-form,.new-warmword-form,.throw-bottle-section,.pick-bottle-section,
.magic-book,.book-pages,.stats-grid,.test-section,.attachment-section,.bigfive-section{
  background:var(--w-bg-2) !important; border:1px solid var(--w-line) !important;
  border-radius:var(--w-radius) !important; color:var(--w-ink) !important; box-shadow:var(--w-sh-s) !important;
}
/* 日记档案展开：不用全站深色卡片，保持纸色可读 */
.page-diary .history-book-wrapper.is-open .magic-book,
.page-diary .history-book-wrapper.is-open .book-pages {
  background: #fbf4e5 !important;
  color: #3a3028 !important;
  border: none !important;
  box-shadow: none !important;
}
.page-diary .history-book-wrapper.is-open .history-card {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid rgba(180, 150, 110, 0.45) !important;
  color: #3a3028 !important;
}

/* ---- 文字 ---- */
h1,h2,h3,h4,h5,.page-title,.section-title,.ranking-title,.form-title,.panel-header h3,.brand-title{ color:var(--w-ink) !important; }
p,span,li,label,div,.tip-content,.tip-summary,.rank-content{ color:var(--w-ink); }
.panel-subtitle,.section-subtitle,.meta,small,.tip-time,.tip-author,.rank-author,.char-count,.empty-hint,.tip-duration{ color:var(--w-ink-faint) !important; }
[style*="color: #666"],[style*="color:#666"],[style*="color: #999"],[style*="color: #333"],[style*="color: #555"]{ color:var(--w-ink-soft) !important; }

/* ---- 按钮：紫渐变 → 暖渐变 ---- */
.btn-emotion-pattern,.submit-tip-btn,.submit-warmword-btn,.send-btn,.save-btn,
.primary-btn,.btn-login,.enter-btn,.throw-btn,.pick-btn,.btn-submit,.confirm-btn,
.bottle-throw-btn,.bottle-pick-btn,.publish-btn{
  background:linear-gradient(120deg,var(--w-primary),var(--w-accent)) !important;
  color:#3A2410 !important; border:none !important; box-shadow:0 4px 16px rgba(242,166,90,.26) !important;
}

/* ---- 输入框 ---- */
input:not([type="checkbox"]):not([type="radio"]),
textarea,select,.tip-input,.warmword-input,.chat-input,.message-input,.bottle-input{
  background:var(--w-bg-3) !important; border:1.5px solid var(--w-line-2) !important; color:var(--w-ink) !important;
}
input::placeholder,textarea::placeholder{ color:var(--w-ink-faint) !important; }
input:focus,textarea:focus{ border-color:var(--w-primary) !important; box-shadow:0 0 0 3px rgba(242,166,90,.16) !important; }

/* ---- AI 去紫简约 ---- */
.ai-page,.ai-container,.chat-area{ background:transparent !important; }
.message.assistant,.ai-bubble,.msg-ai{ background:var(--w-bg-3) !important; color:var(--w-ink) !important; border:1px solid var(--w-line) !important; }
.message.user,.user-bubble,.msg-user{ background:var(--w-primary) !important; color:#3A2410 !important; border:none !important; }

/* ---- 强调色 ---- */
.tip-likes,.rank-likes,.word-likes,.like-count,.conf-likes{ color:var(--w-coral) !important; }
.rank-number{ color:var(--w-primary) !important; }

/* ---- 弹窗遮罩 ---- */
.modal-overlay,.conf-modal-overlay,.tip-modal-overlay{ background:rgba(10,7,5,.72) !important; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

/* ---- 滚动条 ---- */
::-webkit-scrollbar{ width:8px;height:8px; } ::-webkit-scrollbar-thumb{ background:var(--w-line-2);border-radius:10px; } ::-webkit-scrollbar-track{ background:transparent; }

/* =========================================================================
 * 每页返回键（顶部）——宽屏下也居中限宽，观感统一
 * ========================================================================= */
/* 页面顶部返回栏：透明背景，固定在导航栏下方 */
.page-topbar1 {
    background: transparent !important;
    backdrop-filter: none;
    border-bottom: none;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 确保返回按钮样式不变（可保留原有背景） */
.page-topbar1 .back-btn1 {
    background: var(--w-bg-2, rgba(0,0,0,0.5));
    border: 1px solid var(--w-line, rgba(255,238,214,0.2));
    color: var(--w-primary, #F2A65A);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
}


/* =========================================================================
 * 树洞：粒子墙 + 漂流瓶区（宽屏居中，桌面友好）
 * ========================================================================= */
.treehole-container{ max-width:none; margin:0; padding:0; width:100%; }
.hearts-particle-zone {
  flex: 1;
  min-height: 52vh;
  width: 100%;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(99, 102, 241, 0.12), transparent 70%),
              radial-gradient(circle at 30% 80%, rgba(244, 199, 123, 0.06), transparent 50%);
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  margin: 0;
}
.hpz-header {
  padding: 20px 20px 0;
  text-align: center;
  z-index: 10;
}
.hpz-header .hpz-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #e0d5ff;
  margin: 0;
}
.hpz-field {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 52vh;
  overflow: hidden;
}
.hpz-header .hpz-desc {
  font-size: 0.85rem;
  color: rgba(200, 180, 255, 0.6);
  margin-top: 4px;
}
.hpz-star{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,224,163,.9), rgba(255,224,163,0)); animation:hpzTwinkle ease-in-out infinite alternate; pointer-events:none; }
@keyframes hpzTwinkle{ from{opacity:.2;transform:scale(.7)} to{opacity:.9;transform:scale(1.1)} }
.heart-word {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(240px, 42vw);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(232, 212, 168, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.2s ease, text-shadow 0.2s ease;
  will-change: left, top, transform, opacity;
  -webkit-tap-highlight-color: transparent;
}

.heart-word .heart-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.heart-word:hover {
  filter: brightness(1.25);
  text-shadow: 0 0 18px rgba(255, 230, 180, 0.75);
  z-index: 300 !important;
}

.conf-modal-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hpz-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--w-ink-faint); font-size:.95rem; }

.treehole-page .th-tap.my-records-entry.active {
  color: #e8d4a8;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.my-records-footnote {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(200, 210, 235, 0.5);
  margin: 6px 0 0;
}
.my-records-panel {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(12, 18, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-height: min(42vh, 320px);
  overflow-y: auto;
}
.my-records-hint,
.my-records-empty {
  font-size: 0.85rem;
  color: rgba(200, 210, 235, 0.65);
  text-align: center;
  margin: 8px 0;
}
.my-records-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.my-records-tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 230, 243, 0.75);
  border: 1px solid transparent;
}
.my-records-tab.on {
  background: rgba(232, 201, 122, 0.2);
  color: #e8d4a8;
  border-color: rgba(232, 201, 122, 0.35);
}
.my-records-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-record-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.my-record-meta {
  font-size: 0.75rem;
  color: rgba(200, 210, 235, 0.55);
  margin: 0 0 6px;
}
.my-record-text {
  font-size: 0.9rem;
  color: rgba(232, 236, 248, 0.92);
  margin: 0;
  line-height: 1.5;
  word-break: break-word;
}
.my-record-sub {
  font-size: 0.78rem;
  color: #c4b5fd;
  margin: 6px 0 0;
}
.my-record-reply {
  font-size: 0.82rem;
  color: rgba(200, 210, 235, 0.8);
  margin: 8px 0 0;
  line-height: 1.45;
}
.my-record-reply span {
  display: inline-block;
  margin-right: 6px;
  color: #93b79e;
  font-size: 0.75rem;
}
.my-record-del {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
}
.my-record-interact {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.my-record-interact--star {
  border-top-color: rgba(147, 183, 158, 0.25);
}
.my-record-interact-title {
  font-size: 0.72rem;
  color: rgba(200, 210, 235, 0.5);
  margin: 0 0 6px;
}
.my-record-comment {
  font-size: 0.82rem;
  margin: 4px 0;
  line-height: 1.4;
}
.my-record-c-user {
  color: #c4b5fd;
  margin-right: 6px;
  font-size: 0.78rem;
}
.my-record-c-text {
  color: rgba(226, 230, 243, 0.88);
}
.my-record-empty-inline {
  font-size: 0.78rem;
  color: rgba(200, 210, 235, 0.45);
  margin: 8px 0 0;
}
.stat-card.bottles {
  cursor: pointer;
}
.stat-card.treehole {
  cursor: pointer;
}

.bottle-zone {
  flex-shrink: 0;
  width: min(640px, calc(100% - 24px));
  margin: 0 auto 12px;
  background: rgba(22, 32, 52, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 18px 20px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.bottle-zone-hint {
  font-size: 0.78rem;
  color: rgba(200, 210, 235, 0.55);
  margin: -6px 0 12px;
  text-align: center;
}
.throw-char { font-size: 0.75rem; color: rgba(200, 210, 235, 0.5); text-align: right; margin: 4px 0 8px; }
.picked-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.picked-like, .picked-discard {
  background: none;
  border: none;
  color: #e8d4a8;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 0;
}
.picked-discard { margin-left: auto; opacity: 0.75; font-size: 0.82rem; }
.picked-comment-count { font-size: 0.82rem; color: rgba(200, 210, 235, 0.6); }
.picked-c-item { font-size: 0.85rem; margin-bottom: 8px; color: rgba(226, 230, 243, 0.85); }
.picked-c-name { color: #c4b5fd; margin-right: 8px; font-size: 0.8rem; }
.picked-input-row { display: flex; gap: 8px; margin-top: 10px; }
.picked-input {
  flex: 1;
  background: rgba(15, 22, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: #e2e6f3;
  font-family: inherit;
}
.picked-send {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(120deg, #e8c97a, #d4a574);
  color: #3a2410;
  font-weight: 700;
  cursor: pointer;
}
.bottle-zone-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
}

.bmp-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.bmp-label {
  font-size: 0.9rem;
  color: #a78bfa;
  white-space: nowrap;
}

.bmp-options {
  display: flex;
  gap: 8px;
  flex: 1;
}
.bmp-opt{ flex:1; padding:11px 6px; border-radius:12px; font-size:.85rem; font-weight:700; background:var(--w-bg-3); border:1.5px solid var(--w-line); color:var(--w-ink-soft); cursor:pointer; }
.bmp-opt.on{ background:var(--w-primary); color:#3A2410; border-color:var(--w-primary); }
.bottle-actions{ display:flex; gap:12px; }
.bottle-act{ flex:1; padding:15px 6px; border-radius:14px; font-size:.95rem; font-weight:800; cursor:pointer; border:none; }
.bottle-act.throw{ background:linear-gradient(100deg,var(--w-primary),var(--w-accent)); color:#3A2410; }
.bottle-act.pick{ background:var(--w-bg-3); color:var(--w-primary); border:1.5px solid var(--w-primary); }
.throw-box{ margin-top:14px; background:var(--w-bg-3); border:1px solid var(--w-line); border-radius:14px; padding:16px; }
.throw-textarea{ width:100%; box-sizing:border-box; min-height:90px; resize:none; background:var(--w-bg) !important; border:1.5px solid var(--w-line-2) !important; border-radius:12px !important; color:var(--w-ink) !important; padding:12px !important; font-family:inherit; }
.throw-public{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--w-ink-soft); margin:10px 0; }
.throw-send{ width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer; background:linear-gradient(120deg,var(--w-primary),var(--w-accent)); color:#3A2410; font-size:.95rem; font-weight:800; }
.throw-send:disabled{ opacity:.5; }
.picked-box{ margin-top:14px; background:linear-gradient(135deg,#93B79E22,var(--w-bg-3)); border:1px solid #93B79E55; border-radius:14px; padding:16px; }
.picked-tag{ font-size:.82rem; color:var(--w-sage); font-weight:700; margin-bottom:10px; }
.picked-msg{ font-size:.95rem; line-height:1.6; color:var(--w-ink); margin-bottom:12px; }
.picked-detail{ background:none; border:none; color:var(--w-primary); font-size:.9rem; font-weight:700; cursor:pointer; }

/* 主页背景勿再用蓝紫渐变，与全站暖棕夜店色一致（见上方 .page-home） */
.bmp-opt {
  flex: 1;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #c4b5fd;
  font-size: 0.85rem;
  transition: all 0.2s;
  text-align: center;
}

.bmp-opt.on {
  background: rgba(99, 102, 241, 0.25);
  border-color: #8b5cf6;
  color: #fff;
  font-weight: bold;
}

.bottle-actions {
  display: flex;
  gap: 12px;
}

.bottle-act {
  flex: 1;
  padding: 14px;
  border-radius: 16px;
  font-weight: bold;
  font-size: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}

.bottle-act.throw {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.bottle-act.pick {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.bottle-act:active {
  transform: scale(0.96);
}

.throw-hint {
  font-size: 0.78rem;
  color: rgba(200, 180, 255, 0.5);
  margin-top: 8px;
  text-align: center;
}

/* ==========================================================================
   Codex layout polish: sub pages only
   - Home and bodymap.html stay untouched.
   - Diary only gets a visible return bar and sane centering.
   ========================================================================== */

.ai-page,
.moodsun-page,
.treehole-page,
.profile-page,
.page-diary {
  isolation: isolate;
}

/* 功能页：仅悬浮返回键，无顶栏背景条 */
.page-back-fab {
  position: fixed;
  top: calc(90px + 10px);
  left: max(14px, calc((100vw - min(1120px, 100% - 32px)) / 2 + 14px));
  z-index: 500;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
}

.page-back-fab:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(255, 255, 255, 0.35);
}

.page-back-fab--sun,
.page-back-fab--profile {
  border-color: rgba(80, 60, 40, 0.2);
  background: rgba(255, 255, 255, 0.55);
  color: #4a3820;
  box-shadow: 0 4px 14px rgba(80, 60, 30, 0.12);
}

.page-back-fab--sun:hover,
.page-back-fab--profile:hover {
  background: rgba(255, 255, 255, 0.78);
}

.page-back-fab--profile {
  color: #6b3548;
  border-color: rgba(180, 90, 120, 0.25);
}

/* 旧顶栏样式保留兼容，默认隐藏标题条 */
.page-topbar,
.page-topbar1 {
  display: none !important;
}

.page-topbar-title,
.page-topbar-title1 {
  display: none !important;
}

/* Diary: make the requested return-home button visible and keep the note centered. */
.page-diary {
  position: relative !important;
  min-height: calc(100vh - 90px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 20px 20px 110px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.page-diary .page-topbar1 {
  align-self: stretch !important;
}

.diary-center-zone {
  width: min(720px, 100%) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}

.page-diary .sticky-note {
  width: min(480px, 100%) !important;
  margin: 22px auto 0 !important;
}

.page-diary .history-book-wrapper {
  left: max(24px, calc((100vw - 1180px) / 2 + 24px)) !important;
  top: calc(50% + 36px) !important;
}

/* AI: a deliberate tool rail plus a large conversation workspace. */
.ai-page {
  display: block !important;
  padding: 20px 20px 100px !important;
}

.ai-page .ai-layout-v2 {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  height: calc(100vh - 160px) !important;
  min-height: 460px !important;
  max-height: calc(100vh - 140px) !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

.ai-page .ai-left-panel,
.ai-page .ai-right-panel {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 46px rgba(36, 25, 12, 0.18) !important;
}

.ai-page .ai-left-panel {
  max-width: none !important;
  padding: 22px !important;
  overflow-y: auto !important;
}

.ai-page .ai-left-title {
  padding: 0 0 14px !important;
  flex-shrink: 0 !important;
}

.ai-page .ai-gen-btn {
  flex-shrink: 0 !important;
}

.ai-page .emotion-pattern-card {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.ai-page .ai-chat-header-bar {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(201, 184, 150, 0.1) !important;
  background: rgba(16, 20, 26, 0.72) !important;
}

.ai-page .ai-chat-header-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: rgba(225, 215, 200, 0.95) !important;
  letter-spacing: 0.03em !important;
}

.ai-page .ai-right-panel {
  min-width: 0 !important;
  max-height: 100% !important;
}

.ai-page .ai-chat-panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.ai-page .ai-chat-panel-body .chat-area {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-page .ai-chat-panel-body .ai-chat-input-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 12px 14px 14px !important;
  gap: 10px !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  position: relative !important;
  background: rgba(14, 18, 24, 0.92) !important;
  border-top: 1px solid rgba(201, 184, 150, 0.1) !important;
}

.ai-page .ai-chat-input-bar input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
}

.ai-page .ai-chat-input-bar .ai-send-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 76px !important;
  min-height: 44px !important;
  padding: 10px 20px !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mood guide: stronger editorial rhythm across guide, ranking, and community sections. */
.moodsun-page {
  display: block !important;
  padding: 20px 20px 120px !important;
}

.moodsun-page .sun-container {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  display: grid !important;
  gap: 24px !important;
}

.moodsun-page .sun-two-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.78fr) !important;
  gap: 24px !important;
  margin-bottom: 0 !important;
  align-items: start !important;
}

.moodsun-page .sun-left-column {
  gap: 22px !important;
}

.moodsun-page .daily-warm-quote.compact {
  display: grid !important;
  gap: 12px !important;
  padding: 28px !important;
  border-radius: 22px !important;
}

.moodsun-page .daily-warm-quote.compact p {
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.55 !important;
}

.moodsun-page .quote-author {
  justify-content: space-between !important;
  text-align: left !important;
  flex-wrap: wrap !important;
}

.moodsun-page .emotion-tips-section.compact {
  padding: 24px !important;
  border-radius: 22px !important;
}

.moodsun-page .tips-grid-vertical {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.moodsun-page .tip-card-compact {
  min-height: 168px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.moodsun-page .sun-right-column {
  min-width: 0 !important;
  position: sticky !important;
  top: 108px !important;
}

.moodsun-page .tips-ranking-section.compact,
.moodsun-page .community-section,
.moodsun-page .warm-words-wall {
  padding: 24px !important;
  border-radius: 22px !important;
}

.moodsun-page .community-tips,
.moodsun-page .wall-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.moodsun-page .new-tip-form,
.moodsun-page .new-warmword-form {
  margin-bottom: 18px !important;
}

/* Treehole: 上为莫比乌斯心事星海，下为漂流瓶 */
.treehole-page {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 0 88px !important;
  min-height: calc(100vh - 65px) !important;
  overflow: hidden !important;
}

.treehole-page .treehole-main-layout {
  width: 100% !important;
  max-width: none !important;
  flex: 1 !important;
  min-height: calc(100vh - 120px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.treehole-page .hearts-particle-zone {
  flex: 1 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.treehole-page .bottle-zone {
  flex-shrink: 0 !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32) !important;
}

.treehole-page .bmp-section {
  display: grid !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.treehole-page .bmp-options,
.treehole-page .bottle-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.treehole-page .bottle-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.treehole-page .hpz-header { display: none; }

.treehole-page .throw-box,
.treehole-page .picked-box {
  margin-top: 0 !important;
}

/* Profile: turn the account page into a side summary plus main test workspace. */
.profile-page {
  display: block !important;
  padding: 20px 20px 120px !important;
}

.profile-page .profile-container {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
}

.profile-page .guest-welcome {
  min-height: 520px !important;
  display: grid !important;
  place-content: center !important;
  gap: 18px !important;
  padding: 56px 28px !important;
  border-radius: 24px !important;
}

.profile-page .user-profile {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.profile-page .profile-header {
  grid-column: auto !important;
}

.profile-page .avatar {
  width: 86px !important;
  height: 86px !important;
  font-size: 42px !important;
}

.profile-page .stats-grid {
  grid-column: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

.profile-page .stat-card {
  text-align: left !important;
  min-height: 130px !important;
  display: grid !important;
  align-content: center !important;
}

.profile-page .test-section-header,
.profile-page .test-card,
.profile-page .ai-report-card {
  grid-column: auto !important;
}

.profile-page .test-section-header {
  text-align: left !important;
  margin: 0 !important;
  padding: 24px !important;
  border-radius: 22px !important;
  background: rgba(42, 33, 27, 0.62) !important;
  border: 1px solid rgba(255, 238, 214, 0.1) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16) !important;
}

.profile-page .test-card {
  margin: 0 !important;
  padding: 22px !important;
  border-radius: 22px !important;
}

.profile-page .card-header-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.profile-page .card-title {
  min-width: 0 !important;
  margin: 0 !important;
}

.profile-page .q-scenario {
  border-radius: 18px !important;
}

.profile-page .action-footer {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 0 !important;
}

@media (max-width: 1080px) {
  .ai-page .ai-layout-v2,
  .moodsun-page .sun-two-columns,
  .treehole-page .treehole-main-layout,
  .profile-page .user-profile {
    grid-template-columns: 1fr !important;
  }

  .moodsun-page .sun-right-column {
    position: static !important;
  }

  .profile-page .profile-header,
  .profile-page .stats-grid,
  .profile-page .test-section-header,
  .profile-page .test-card,
  .profile-page .ai-report-card {
    grid-column: 1 !important;
  }
}

@media (max-width: 760px) {
  .page-topbar,
  .page-topbar1,
  .ai-page .ai-layout-v2,
  .moodsun-page .sun-container,
  .treehole-page .treehole-main-layout,
  .profile-page .profile-container {
    width: min(100%, calc(100% - 20px)) !important;
  }

  .page-topbar-title,
  .page-topbar-title1 {
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .page-diary,
  .ai-page,
  .moodsun-page,
  .treehole-page,
  .profile-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-diary .history-book-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(100%, 420px) !important;
    height: 76px !important;
    margin: 18px auto 0 !important;
  }

  .page-diary .history-book-wrapper.is-open {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(92vw, 500px) !important;
    height: min(78vh, 580px) !important;
  }

  .moodsun-page .tips-grid-vertical,
  .moodsun-page .community-tips,
  .moodsun-page .wall-grid {
    grid-template-columns: 1fr !important;
  }

  .treehole-page .hearts-particle-zone,
  .treehole-page .bottle-zone {
    min-height: 420px !important;
  }

  .treehole-page .bmp-options,
  .treehole-page .bottle-actions {
    grid-template-columns: 1fr !important;
  }

  .profile-page .profile-header {
    align-items: center !important;
    text-align: center !important;
  }

  .profile-page .action-footer {
    justify-content: center !important;
  }
}

/* Hide raw Vue teleport markup if the browser renders it before/without Vue compilation. */
teleport {
  display: none !important;
}

/* 文字链操作（全站复用，避免全局 button 药丸样式） */
.th-tap {
  display: inline;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(165, 152, 138, 0.65);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.th-tap:hover { color: rgba(215, 200, 178, 0.88); }
.th-tap.active {
  color: rgba(228, 208, 175, 0.95);
  border-bottom-color: rgba(228, 208, 175, 0.32);
}
.th-tap-faint {
  font-size: 0.78rem;
  color: rgba(150, 140, 128, 0.48);
}
.th-tap-send {
  font-size: 0.82rem;
  color: rgba(210, 190, 165, 0.72);
  border-bottom-color: rgba(210, 190, 165, 0.22);
}
.th-tap.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.th-tap-main {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.th-tap.waiting {
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}

/* =========================================================================
 * 树洞 · 深夜星海（莫比乌斯心事 + 岸边漂流瓶）
 * ========================================================================= */
.treehole-page {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(242, 166, 90, 0.06), transparent 58%),
    radial-gradient(ellipse 70% 45% at 82% 18%, rgba(120, 140, 170, 0.05), transparent 50%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(18, 28, 42, 0.55), transparent 72%),
    #12161e !important;
  color: #c8bfb2 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 0 88px !important;
  min-height: calc(100vh - 65px) !important;
  overflow: hidden !important;
}

.treehole-page::before {
  display: none !important;
}

.treehole-page .treehole-main-layout {
  width: 100% !important;
  max-width: none !important;
  flex: 1 !important;
  min-height: calc(100vh - 120px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: auto !important;
  grid-template-columns: unset !important;
}

.treehole-page .hearts-particle-zone {
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.treehole-page .hpz-field {
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 52vh;
  overflow: hidden;
}

.hpz-star {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: thStarDrift ease-in-out infinite alternate;
}

@keyframes thStarDrift {
  from { transform: translate(0, 0) scale(0.85); }
  to   { transform: translate(2px, -3px) scale(1.08); }
}

.treehole-page .heart-word {
  position: absolute !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: unset !important;
  min-width: unset !important;
  font-weight: 400 !important;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  will-change: left, top, transform, opacity;
}

.treehole-page .heart-word:hover {
  filter: brightness(1.2) !important;
  text-shadow: 0 0 20px rgba(200, 190, 170, 0.35) !important;
  z-index: 300 !important;
}

.treehole-page .heart-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hpz-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: rgba(180, 170, 155, 0.45) !important;
  font-size: 0.92rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
  font-weight: 300;
}

.hpz-empty small {
  font-size: 0.78rem;
  color: rgba(160, 150, 138, 0.38) !important;
  letter-spacing: 0.04em;
}

.treehole-page .bottle-zone {
  flex-shrink: 0 !important;
  width: min(520px, calc(100% - 40px)) !important;
  margin: 0 auto 24px !important;
  padding: 28px 8px 12px !important;
  background: linear-gradient(to top, rgba(14, 18, 26, 0.88) 0%, rgba(14, 18, 26, 0.45) 45%, transparent 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  min-height: auto !important;
}

.th-shore-whisper {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(190, 178, 160, 0.55) !important;
}

.th-match-row,
.th-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 6px;
  margin-bottom: 16px;
  line-height: 1.9;
}

.th-match-lead {
  font-size: 0.8rem;
  color: rgba(160, 150, 138, 0.42) !important;
  letter-spacing: 0.1em;
  margin-right: 4px;
}

.th-sep {
  color: rgba(120, 110, 100, 0.22);
  font-size: 0.7rem;
  user-select: none;
  padding: 0 1px;
}

.treehole-page .throw-box {
  margin-top: 8px;
  padding: 16px 4px 0;
  background: none !important;
  border: none !important;
  border-top: 1px solid rgba(255, 238, 214, 0.06) !important;
  border-radius: 0 !important;
}

.treehole-page .throw-public {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.treehole-page .throw-public-input {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.treehole-page .throw-public-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid rgba(232, 201, 122, 0.45);
  border-radius: 5px;
  background: rgba(12, 18, 32, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  pointer-events: none;
}

.treehole-page .throw-public.is-checked .throw-public-mark {
  background: linear-gradient(145deg, #e8c97a, #d4a574);
  border-color: #e8c97a;
  box-shadow: 0 0 0 2px rgba(232, 201, 122, 0.25);
}

.treehole-page .throw-public.is-checked .throw-public-mark::after {
  content: '✓';
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #3a2410;
}

.treehole-page .throw-public-label {
  font-size: 0.82rem;
  color: rgba(160, 150, 138, 0.65);
  letter-spacing: 0.03em;
}

.treehole-page .throw-public.is-checked .throw-public-label {
  color: rgba(232, 212, 168, 0.95);
}

.treehole-page .throw-textarea {
  width: 100% !important;
  box-sizing: border-box;
  min-height: 72px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 238, 214, 0.12) !important;
  border-radius: 0 !important;
  color: rgba(220, 210, 195, 0.88) !important;
  padding: 8px 0 12px !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  resize: none;
  box-shadow: none !important;
}

.treehole-page .throw-textarea::placeholder {
  color: rgba(150, 140, 128, 0.4) !important;
}

.treehole-page .throw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.treehole-page .throw-char {
  font-size: 0.72rem;
  color: rgba(140, 130, 118, 0.4) !important;
}

.treehole-page .picked-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 238, 214, 0.06);
  background: none !important;
}

.treehole-page .picked-tag {
  font-size: 0.72rem;
  color: rgba(150, 140, 128, 0.45) !important;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.treehole-page .picked-msg {
  font-size: 0.94rem;
  line-height: 1.75;
  color: rgba(210, 200, 185, 0.82) !important;
  margin-bottom: 12px;
}

.treehole-page .picked-actions {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 12px;
}

.treehole-page .picked-actions .th-tap-faint {
  margin-left: auto;
}

.treehole-page .picked-c-item {
  font-size: 0.82rem;
  margin-bottom: 10px;
  color: rgba(180, 170, 155, 0.65) !important;
}

.treehole-page .picked-c-name {
  color: rgba(200, 185, 165, 0.5) !important;
  margin-right: 8px;
  font-size: 0.76rem;
}

.treehole-page .picked-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 238, 214, 0.1) !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  color: rgba(210, 200, 185, 0.85) !important;
  font-size: 0.86rem;
  box-shadow: none !important;
}

.treehole-page .picked-input-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.treehole-page .bottle-animation {
  text-align: center;
  margin-top: 8px;
  opacity: 0.6;
}

/* 心事详情弹窗 */
.conf-modal-box {
  background: rgba(22, 20, 18, 0.94) !important;
  border: 1px solid rgba(255, 238, 214, 0.08) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  border-radius: 16px !important;
}

.conf-modal-avatar-letter {
  background: rgba(180, 160, 140, 0.2) !important;
  color: rgba(220, 205, 185, 0.85) !important;
  font-weight: 500 !important;
}

.conf-modal-username,
.conf-modal-c-name {
  color: rgba(200, 185, 165, 0.75) !important;
}

.conf-modal-time,
.conf-modal-c-time,
.conf-modal-comment-count,
.conf-modal-empty {
  color: rgba(150, 140, 128, 0.45) !important;
}

.conf-modal-content,
.conf-modal-c-text {
  color: rgba(220, 210, 195, 0.88) !important;
}

.conf-modal-like {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(232, 180, 160, 0.25) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  min-height: unset !important;
}

.conf-modal-divider {
  background: rgba(255, 238, 214, 0.06) !important;
}

.conf-modal-c-avatar {
  background: rgba(160, 150, 140, 0.15) !important;
  color: rgba(200, 190, 175, 0.7) !important;
}

.conf-modal-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 238, 214, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.conf-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  min-height: unset !important;
}

@media (max-width: 760px) {
  .treehole-page .bottle-zone {
    width: calc(100% - 28px) !important;
  }

  .treehole-page .hearts-particle-zone {
    min-height: auto !important;
  }
}

/* =========================================================================
 * 寄存心情 · 便签 + 档案本（修复布局冲突，治愈暖夜）
 * ========================================================================= */
.page-diary {
  position: relative !important;
  min-height: calc(100vh - 65px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 24px 20px 100px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(242, 166, 90, 0.1), transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(147, 183, 158, 0.06), transparent 50%),
    #161412 !important;
}

.diary-page-lead {
  margin: 0 0 28px;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(190, 178, 160, 0.5);
  text-align: center;
}

.diary-layout {
  width: min(920px, 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 5vw, 48px);
  position: relative;
  z-index: 2;
}

.diary-center-zone {
  margin: 0 !important;
  margin-left: 0 !important;
}

.diary-write-zone {
  flex: 1 1 420px;
  max-width: 480px;
  display: flex;
  justify-content: center;
}

.page-diary .sticky-note {
  width: 100% !important;
  max-width: 480px;
  min-height: 420px;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 44px 36px 32px !important;
  background: #f8f2e4 !important;
  background-image: linear-gradient(rgba(200, 185, 155, 0.35) 1px, transparent 1px) !important;
  background-size: 100% 2.2rem !important;
  border: none !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.4) inset,
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(220, 200, 170, 0.25) !important;
  transform: rotate(-0.4deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex !important;
  flex-direction: column !important;
  font-family: inherit !important;
}

.page-diary .sticky-note:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.45) inset,
    0 22px 56px rgba(0, 0, 0, 0.32) !important;
}

.page-diary .tape {
  top: -14px;
  left: 36px;
  width: 88px;
  height: 28px;
  background: rgba(255, 248, 230, 0.75);
  border: 1px solid rgba(210, 190, 160, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.page-diary .note-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(160, 140, 110, 0.35);
}

.page-diary .note-date {
  font-size: 0.82rem;
  color: rgba(100, 85, 65, 0.75);
  letter-spacing: 0.06em;
  font-weight: 400;
}

.page-diary .emoji-selector {
  gap: 6px;
}

.page-diary .emoji-selector span {
  font-size: 1.25rem;
  opacity: 0.35;
  filter: grayscale(0.4);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
  padding: 2px;
}

.page-diary .emoji-selector span:hover,
.page-diary .emoji-selector span.active {
  opacity: 1;
  transform: scale(1.15);
  filter: none;
}

.page-diary .diary-textarea,
.page-diary .sticky-note textarea {
  flex: 1 !important;
  min-height: 200px !important;
  font-size: 1.05rem !important;
  line-height: 2.2rem !important;
  color: rgba(55, 48, 38, 0.9) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  resize: vertical;
}

.page-diary .diary-textarea::placeholder,
.page-diary .sticky-note textarea::placeholder {
  color: rgba(130, 115, 95, 0.45) !important;
  font-style: normal;
}

.page-diary .note-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(160, 140, 110, 0.2);
}

.page-diary .diary-char {
  font-size: 0.72rem;
  color: rgba(120, 105, 85, 0.45);
  letter-spacing: 0.04em;
}

.page-diary .diary-save-link {
  color: rgba(90, 70, 50, 0.75) !important;
  border-bottom-color: rgba(90, 70, 50, 0.25) !important;
}

.page-diary .diary-save-link:hover:not(.disabled) {
  color: rgba(70, 55, 38, 0.95) !important;
}

.page-diary .submit-note-btn {
  display: none !important;
}

/* 档案本：与便签并排，不再 absolute 乱飞 */
.diary-archive-zone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 320px;
}

.page-diary .history-book-wrapper {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  width: 72px !important;
  height: 260px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1),
              height 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.page-diary .magic-book {
  width: 100%;
  height: 100%;
  border-radius: 6px 14px 14px 6px;
  background: linear-gradient(145deg, #4a3d32 0%, #3a2f26 100%) !important;
  box-shadow:
    4px 0 12px rgba(0, 0, 0, 0.25),
    inset -2px 0 8px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
}

.page-diary .magic-book::before {
  background: linear-gradient(to bottom, rgba(232, 200, 140, 0.5), rgba(180, 150, 100, 0.3)) !important;
}

.page-diary .book-cover {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.page-diary .cover-title {
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(245, 230, 200, 0.88) !important;
  line-height: 1.6;
}

.page-diary .cover-hint {
  font-size: 0.65rem;
  color: rgba(220, 200, 170, 0.45);
  margin-top: 12px;
  letter-spacing: 0.12em;
}

.page-diary .book-pages {
  display: none;
}

.diary-archive-overlay,
.diary-archive-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 8, 0.34);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 9998;
  pointer-events: auto;
}

/* 避免全屏伪元素抢点击，导致点面板误关 */
.history-book-wrapper.is-open::before {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
}

.page-diary .history-book-wrapper.is-open .magic-book,
.page-diary .history-book-wrapper.is-open .book-pages {
  pointer-events: auto;
}

.page-diary .history-book-wrapper.is-open {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 480px) !important;
  height: min(78vh, 560px) !important;
  z-index: 9999 !important;
  cursor: default;
}

.page-diary .history-book-wrapper.is-open::before {
  display: none !important;
}

.page-diary .history-book-wrapper.is-open .magic-book {
  border-radius: 12px !important;
  background: #fbf4e5 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.page-diary .history-book-wrapper.is-open .book-cover {
  display: none !important;
}

.page-diary .history-book-wrapper.is-open .book-pages {
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 22px !important;
  height: 100% !important;
  overflow: hidden;
  background: #fbf4e5 !important;
  color: #3a3028 !important;
  border: none !important;
  box-shadow: none !important;
}

.page-diary .archive-top {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120, 100, 75, 0.15);
}

.page-diary .history-book-wrapper.is-open .page-title,
.page-diary .history-book-wrapper.is-open .archive-top .th-tap-faint {
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #3d3228 !important;
  letter-spacing: 0.1em;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.page-diary .history-book-wrapper.is-open .archive-top .th-tap-faint {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: rgba(90, 72, 52, 0.75) !important;
}

.page-diary .archive-close-x {
  display: none !important;
}

.page-diary .history-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.page-diary .history-scroll::-webkit-scrollbar {
  width: 4px;
}

.page-diary .history-scroll::-webkit-scrollbar-thumb {
  background: rgba(140, 120, 90, 0.25);
  border-radius: 4px;
}

.page-diary .history-card {
  border: none !important;
  border-left: 2px solid rgba(180, 150, 110, 0.45) !important;
  border-radius: 0 !important;
  padding: 12px 0 12px 14px !important;
  margin-bottom: 4px !important;
  background: transparent !important;
}

.page-diary .history-card:hover {
  background: rgba(180, 150, 110, 0.06) !important;
}

.page-diary .history-book-wrapper.is-open .history-time {
  font-size: 0.72rem !important;
  color: rgba(90, 72, 52, 0.78) !important;
  letter-spacing: 0.04em;
}

.page-diary .history-book-wrapper.is-open .history-emoji {
  font-size: 1rem;
}

.page-diary .history-book-wrapper.is-open .history-text {
  color: rgba(45, 38, 30, 0.92) !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
}

.page-diary .history-book-wrapper.is-open .history-text.hc-full {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  white-space: pre-wrap !important;
  text-overflow: unset !important;
  word-break: break-word;
}

.page-diary .history-book-wrapper.is-open .hc-hint {
  font-size: 0.72rem;
  color: rgba(100, 80, 58, 0.65) !important;
  letter-spacing: 0.06em;
}

.page-diary .history-book-wrapper.is-open .hc-del-btn {
  color: rgba(120, 70, 55, 0.85) !important;
  opacity: 1 !important;
}

.page-diary .hc-empty {
  text-align: center;
  padding: 32px 12px;
  font-size: 0.85rem;
  color: rgba(120, 105, 85, 0.45);
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.page-diary .hc-del-btn {
  font-size: 0.72rem !important;
  margin-left: auto;
}

@media (max-width: 820px) {
  .diary-layout {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .diary-archive-zone {
    min-height: auto;
    width: 100%;
    justify-content: center;
  }

  .page-diary .history-book-wrapper {
    width: min(100%, 320px) !important;
    height: 72px !important;
  }

  .page-diary .magic-book {
    border-radius: 14px 14px 6px 6px !important;
  }

  .page-diary .book-cover {
    writing-mode: horizontal-tb;
    flex-direction: row;
    gap: 12px;
    padding: 16px 20px !important;
  }

  .page-diary .cover-title {
    writing-mode: horizontal-tb;
  }

  .page-diary .cover-hint {
    margin-top: 0;
  }
}

/* =========================================================================
 * 小伴 AI · 高级配色（结构不变，仅背景与组件色）
 * ========================================================================= */
.ai-page {
  background-color: #101418 !important;
  background-image:
    radial-gradient(ellipse 85% 55% at 12% 8%, rgba(143, 168, 154, 0.09), transparent 52%),
    radial-gradient(ellipse 70% 50% at 88% 20%, rgba(201, 168, 120, 0.07), transparent 48%),
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(18, 28, 38, 0.65), transparent 70%),
    linear-gradient(168deg, #0c0f14 0%, #121820 42%, #0e1218 100%) !important;
}

.ai-page .ai-layout-v2 {
  gap: 20px !important;
}

.ai-page .ai-left-panel {
  background: rgba(22, 26, 32, 0.78) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  border: 1px solid rgba(201, 184, 150, 0.1) !important;
  border-radius: 20px !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.ai-page .ai-left-title {
  color: rgba(220, 210, 195, 0.88) !important;
  border-bottom-color: rgba(201, 184, 150, 0.12) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

.ai-page .ai-gen-btn {
  background: rgba(32, 38, 46, 0.85) !important;
  border: 1px solid rgba(201, 184, 150, 0.18) !important;
  color: rgba(220, 205, 180, 0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.ai-page .ai-gen-btn:hover:not(:disabled) {
  background: rgba(42, 48, 56, 0.95) !important;
  border-color: rgba(201, 184, 150, 0.28) !important;
  color: rgba(235, 220, 195, 0.98) !important;
}

.ai-page .emotion-pattern-card {
  background: rgba(18, 22, 28, 0.55) !important;
  border: 1px solid rgba(143, 168, 154, 0.15) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.ai-page .pattern-card-header {
  color: rgba(190, 180, 165, 0.75) !important;
  border-bottom-color: rgba(201, 184, 150, 0.1) !important;
}

.ai-page .pattern-close {
  color: rgba(160, 150, 138, 0.5) !important;
}

.ai-page .pattern-close:hover {
  color: rgba(220, 180, 160, 0.85) !important;
}

.ai-page .pattern-body,
.ai-page .pattern-body p {
  color: rgba(200, 192, 178, 0.82) !important;
}

.ai-page .pattern-body h2 {
  color: rgba(210, 195, 170, 0.9) !important;
  border-bottom-color: rgba(201, 184, 150, 0.1) !important;
}

.ai-page .pattern-body h3 {
  color: rgba(175, 195, 185, 0.85) !important;
}

.ai-page .pattern-body strong {
  color: rgba(225, 210, 185, 0.92) !important;
}

.ai-page .pattern-body::-webkit-scrollbar-thumb {
  background: rgba(201, 184, 150, 0.25) !important;
}

.ai-page .ai-right-panel {
  background: rgba(20, 24, 30, 0.82) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  border: 1px solid rgba(201, 184, 150, 0.09) !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ai-page .ai-chat-header-v2 {
  background: rgba(16, 20, 26, 0.65) !important;
  border-bottom: 1px solid rgba(201, 184, 150, 0.08) !important;
  color: rgba(210, 200, 185, 0.88) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

.ai-page .ai-chat-dropdown-trigger {
  background: rgba(16, 20, 26, 0.72) !important;
  border-bottom: 1px solid rgba(201, 184, 150, 0.1) !important;
}

.ai-page .ai-chat-dropdown-trigger:hover {
  background: rgba(22, 28, 36, 0.88) !important;
}

.ai-page .ai-chat-dropdown-title {
  color: rgba(225, 215, 200, 0.95) !important;
}

.ai-page .ai-chat-dropdown-hint {
  color: rgba(150, 140, 128, 0.55) !important;
}

.ai-page .ai-chat-chevron {
  border-color: rgba(201, 184, 150, 0.65) !important;
}

.ai-page .typing-indicator {
  color: rgba(143, 168, 154, 0.7) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
}

.ai-page .chat-area {
  background: rgba(12, 16, 22, 0.45) !important;
  border: 1px solid rgba(201, 184, 150, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

.ai-page .chat-area::before,
.ai-page .chat-area::after {
  display: none !important;
}

.ai-page .chat-area::-webkit-scrollbar-thumb {
  background: rgba(201, 184, 150, 0.22) !important;
}

.ai-page .message.assistant {
  background: rgba(143, 168, 154, 0.1) !important;
  border: 1px solid rgba(143, 168, 154, 0.18) !important;
  color: rgba(210, 205, 195, 0.92) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.ai-page .message.user {
  background: linear-gradient(145deg, rgba(168, 140, 100, 0.35), rgba(140, 115, 80, 0.28)) !important;
  border: 1px solid rgba(201, 184, 150, 0.22) !important;
  color: rgba(248, 240, 228, 0.96) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important;
}

.ai-page .message.assistant::after,
.ai-page .message.user::after {
  display: none !important;
}

.ai-page .input-area {
  background: rgba(14, 18, 24, 0.7) !important;
  border: 1px solid rgba(201, 184, 150, 0.08) !important;
  border-radius: 16px !important;
  border-top: none !important;
}

.ai-page .input-area input {
  background: rgba(28, 32, 40, 0.6) !important;
  border: 1px solid rgba(201, 184, 150, 0.12) !important;
  color: rgba(230, 222, 210, 0.95) !important;
  border-radius: 12px !important;
}

.ai-page .input-area input::placeholder {
  color: rgba(150, 140, 128, 0.45) !important;
}

.ai-page .input-area input:focus {
  border-color: rgba(201, 184, 150, 0.28) !important;
  box-shadow: 0 0 0 3px rgba(201, 184, 150, 0.08) !important;
}

.ai-page .input-area button {
  background: linear-gradient(145deg, #9a8468, #b8a078) !important;
  color: rgba(28, 22, 16, 0.92) !important;
  border: 1px solid rgba(220, 200, 170, 0.25) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

.ai-page .input-area button:hover:not(:disabled) {
  background: linear-gradient(145deg, #a89070, #c9b896) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================================
 * 专业心理求助 · 浮动按钮 + 弹窗
 * ========================================================================= */
.counseling-float-btn {
  position: fixed !important;
  bottom: 28px !important;
  right: 24px !important;
  z-index: 900 !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 184, 150, 0.22) !important;
  background: rgba(22, 26, 32, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: rgba(220, 205, 180, 0.9) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28) !important;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  min-height: unset !important;
  min-width: unset !important;
}

.counseling-float-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(201, 184, 150, 0.38) !important;
  color: rgba(235, 220, 195, 0.98) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34) !important;
}

.counseling-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  background: rgba(8, 10, 14, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.counseling-modal-box {
  position: relative !important;
  width: min(100%, 400px) !important;
  max-width: 400px !important;
  padding: 28px 26px 24px !important;
  border-radius: 16px !important;
  background: rgba(22, 20, 18, 0.96) !important;
  border: 1px solid rgba(255, 238, 214, 0.1) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48) !important;
  color: rgba(210, 200, 185, 0.88) !important;
  overflow: visible !important;
}

.counseling-modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  z-index: 2;
}

.counseling-modal-head {
  padding-right: 48px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 238, 214, 0.06);
  padding-bottom: 18px;
}

.counseling-modal-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(150, 140, 128, 0.5);
  font-weight: 400;
}

.counseling-modal-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(228, 210, 175, 0.95) !important;
}

.counseling-modal-sub {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(160, 150, 138, 0.55) !important;
  letter-spacing: 0.03em;
}

.counseling-modal-body {
  text-align: center;
  padding: 20px 8px 24px;
}

.counseling-soon-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(200, 185, 165, 0.75);
}

.counseling-soon-sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(150, 140, 128, 0.45);
  letter-spacing: 0.04em;
}

.counseling-emergency {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 238, 214, 0.06);
  text-align: center;
}

.counseling-emergency-label {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: rgba(180, 150, 140, 0.55);
  letter-spacing: 0.06em;
}

.counseling-emergency-line {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(190, 170, 155, 0.7);
  letter-spacing: 0.04em;
}

.counseling-hotline-link {
  display: inline-block;
  margin-left: 6px;
  color: rgba(220, 180, 160, 0.9) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(220, 180, 160, 0.35);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.counseling-hotline-link:hover {
  color: rgba(240, 210, 185, 1) !important;
  border-bottom-color: rgba(240, 210, 185, 0.55);
}

.counseling-emergency-line strong {
  font-weight: 500;
  color: inherit;
}

/* 避免旧版紫渐变盖掉新弹窗 */
.counseling-modal .modal-box,
.counseling-modal .modal-header {
  all: unset;
  display: block;
}

@media (max-width: 480px) {
  .counseling-float-btn {
    right: 14px !important;
    bottom: 18px !important;
    padding: 10px 16px !important;
    font-size: 0.78rem !important;
  }

  .counseling-modal-box {
    padding: 24px 20px 20px !important;
  }
}

/* ==========================================================================
   个人主页 · 单栏仪表盘（可见性优先）
   ========================================================================== */
.profile-page {
  min-height: calc(100vh - 72px) !important;
  padding: 20px 16px 100px !important;
  overflow: visible !important;
}

.profile-page .profile-container {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}

.profile-page .user-profile {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  grid-template-columns: unset !important;
}

.profile-page .profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--w-bg-2, rgba(42, 33, 27, 0.85));
  border: 1px solid var(--w-line, rgba(255, 238, 214, 0.1));
  box-shadow: var(--w-sh-s, 0 4px 14px rgba(0, 0, 0, 0.22));
}

.profile-page .profile-header {
  grid-column: unset !important;
  margin: 0 !important;
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.profile-page .profile-logout-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--w-line-2, rgba(255, 238, 214, 0.16));
  background: rgba(255, 255, 255, 0.04);
  color: var(--w-ink-soft, #c3b2a2);
  font-size: 0.82rem;
  cursor: pointer;
}

.profile-page .profile-logout-btn:hover {
  border-color: var(--w-primary, #f2a65a);
  color: var(--w-ink, #f3e9dd);
}

.profile-page .avatar {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.5rem !important;
  font-weight: 600;
  color: #f5e6d0;
  flex-shrink: 0;
  border-width: 2px !important;
  box-shadow: none !important;
}

.profile-page .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-page .info h1 {
  font-size: 1.2rem !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
  filter: none !important;
  color: var(--w-ink, #f3e9dd) !important;
  -webkit-text-fill-color: var(--w-ink, #f3e9dd) !important;
}

.profile-page .profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-page .profile-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: #f0dcc0;
  background: rgba(255, 238, 214, 0.08);
  border: 1px solid rgba(244, 199, 123, 0.22);
}

.profile-page .meta--hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(240, 220, 192, 0.55);
}

.profile-page .stats-grid {
  grid-column: unset !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.profile-page .stat-card {
  min-height: 0 !important;
  padding: 14px 16px !important;
  text-align: left !important;
  display: block !important;
  border-radius: 16px !important;
  background: rgba(42, 33, 27, 0.62) !important;
  border: 1px solid rgba(255, 238, 214, 0.08) !important;
}

.profile-page .stat-card:hover {
  transform: none !important;
  border-color: rgba(244, 199, 123, 0.2) !important;
}

.profile-page .stat-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.profile-page .stat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(240, 220, 192, 0.75);
  letter-spacing: 0.04em;
}

.profile-page .stat-value {
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff8ef;
  line-height: 1;
}

.profile-page .stat-value em {
  font-size: 0.78rem;
  font-weight: 400;
  font-style: normal;
  color: rgba(240, 220, 192, 0.55);
  margin-left: 2px;
}

.profile-page .stat-foot {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(240, 220, 192, 0.45);
}

.profile-page .stat-foot {
  display: block;
}

.profile-page .profile-tests {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-page .test-section-header,
.profile-page .test-card,
.profile-page .ai-report-card {
  grid-column: unset !important;
  margin: 0 !important;
  width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
}

.profile-page .test-section-header {
  text-align: left !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: rgba(42, 33, 27, 0.62) !important;
  border: 1px solid rgba(255, 238, 214, 0.1) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

.profile-page .lab-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.profile-page .lab-icon {
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.9;
}

.profile-page .test-section-header h2 {
  margin: 0 0 4px !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--w-ink, #f3e9dd) !important;
  -webkit-text-fill-color: var(--w-ink, #f3e9dd) !important;
  text-shadow: none !important;
  filter: none !important;
}

.profile-page .section-subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(240, 220, 192, 0.55);
}

.profile-page .test-card {
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: rgba(42, 33, 27, 0.62) !important;
  border: 1px solid rgba(255, 238, 214, 0.1) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

.profile-page .card-header-toggle {
  padding: 16px 18px !important;
  cursor: pointer;
}

.profile-page .card-title h3 {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  color: var(--w-ink, #f3e9dd) !important;
}

.profile-page .card-title .icon {
  font-size: 1rem;
}

.profile-page .arrow-icon {
  font-size: 0.7rem;
  color: rgba(240, 220, 192, 0.5);
  transition: transform 0.2s;
}

.profile-page .arrow-icon.is-active {
  transform: rotate(180deg);
}

.profile-page .ai-report-card {
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: rgba(42, 33, 27, 0.62) !important;
  border: 1px solid rgba(255, 238, 214, 0.1) !important;
}

.profile-page .ai-report-card h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #f0dcc0;
}

@media (max-width: 560px) {
  .profile-page .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-page .profile-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-page .profile-header {
    flex-direction: column !important;
    text-align: center;
  }

  .profile-page .profile-tags {
    justify-content: center;
  }

  .profile-page .profile-logout-btn {
    width: 100%;
  }
}

/* 覆盖旧版双栏 grid 规则，避免内容被挤没 */
.profile-page .profile-header,
.profile-page .stats-grid,
.profile-page .test-section-header,
.profile-page .test-card,
.profile-page .ai-report-card,
.profile-page .profile-sidebar,
.profile-page .profile-main {
  grid-column: auto !important;
}

.profile-page .guest-welcome {
  color: var(--w-ink, #f3e9dd) !important;
}

/* 综合测评解读 */
.profile-page .profile-report-section {
  margin-top: 8px;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(38, 30, 24, 0.55);
  border: 1px solid rgba(255, 238, 214, 0.12);
}

.profile-page .profile-report-head h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 500;
  color: #f0dcc0;
}

.profile-page .profile-report-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(240, 220, 192, 0.65);
}

.profile-page .profile-report-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.profile-page .btn-generate-report {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #2a2118;
  background: linear-gradient(135deg, #f0dcc0 0%, #e8c4a0 100%);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(232, 196, 160, 0.25);
}

.profile-page .btn-generate-report:hover:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.95;
}

.profile-page .btn-generate-report:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.profile-page .report-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(42, 33, 27, 0.25);
  border-top-color: #2a2118;
  border-radius: 50%;
  animation: report-spin 0.7s linear infinite;
}

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

.profile-page .report-prereq-hint {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(240, 220, 192, 0.55);
}

.profile-page .report-summary-line {
  margin: 0;
  font-size: 0.85rem;
  color: #e8c4a0;
  font-style: italic;
}

.profile-page .report-data-source {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(240, 220, 192, 0.6);
}

.profile-page .profile-report-card {
  margin-top: 16px;
}

.profile-page .report-toggle-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.profile-page .report-details {
  width: 100%;
}

.profile-page .report-details > summary {
  list-style: none;
}

.profile-page .report-details > summary::-webkit-details-marker {
  display: none;
}

.profile-page .report-toggle-head h4 {
  margin: 0;
}

.profile-page .report-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(240, 220, 192, 0.65);
}

.profile-page .profile-report-card .report-content {
  margin-top: 10px;
  max-height: min(68vh, 780px);
  overflow-y: auto;
  padding-right: 4px;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}

.profile-page .profile-report-card .analysis-text h2 {
  font-size: 0.95rem;
  color: #f0dcc0;
  margin: 18px 0 8px;
}

.profile-page .profile-report-card .analysis-text h2:first-child {
  margin-top: 0;
}

.profile-page .profile-report-card .analysis-text h3 {
  font-size: 0.88rem;
  color: rgba(240, 220, 192, 0.9);
  margin: 12px 0 6px;
}

.profile-page .profile-report-card .analysis-text ul {
  margin: 8px 0;
  padding-left: 1.2em;
}

.profile-page .profile-report-card .analysis-text li {
  margin: 4px 0;
  line-height: 1.6;
}

/* ========== 主页招牌 · 正常字体 + 暖色（文件末尾最高优先级）========== */
.page-home .store-signboard {
  text-align: center !important;
  z-index: 5 !important;
  margin-bottom: 40px !important;
  padding: 8px 16px 0 !important;
}

.page-home .home-sign-open {
  margin: 0 0 16px !important;
  font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.35em !important;
  text-indent: 0.35em !important;
  color: rgba(255, 228, 180, 0.75) !important;
  text-shadow: none !important;
}

.page-home .home-store-title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
  font-family: 'Pacifico', cursive !important;
  font-size: clamp(2.8rem, 10vw, 4.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  color: #f5d078 !important;
  -webkit-text-fill-color: #f5d078 !important;
  background: none !important;
  filter: none !important;
  text-shadow: 0 2px 16px rgba(255, 200, 90, 0.35) !important;
}

.navigation .nav-brand h1 {
  font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  color: rgba(243, 233, 221, 0.95) !important;
}

.page-home .store-slogan {
  margin-top: 20px !important;
  font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', sans-serif !important;
  font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important;
  font-weight: 400 !important;
  color: rgba(235, 220, 195, 0.9) !important;
  letter-spacing: 0.08em !important;
  line-height: 1.65 !important;
  text-shadow: none !important;
}

.page-home .home-companion {
  margin-top: 24px !important;
  display: inline-flex !important;
  font-family: 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', sans-serif !important;
  color: rgba(255, 228, 185, 0.9) !important;
  animation: homeCompanionFloat 3.2s ease-in-out infinite !important;
  will-change: transform;
}

.page-home .home-companion-dot {
  background: #f5c85a !important;
  box-shadow: 0 0 14px rgba(255, 210, 100, 0.75) !important;
}

.page-home .home-companion em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
  color: #f5ddb8 !important;
  text-shadow: none !important;
}

/* 小伴聊天：消息可滚动，发送栏始终贴在底部 */
.ai-page .ai-right-panel .chat-area .message {
  flex-shrink: 0 !important;
  max-width: 88% !important;
}

.ai-page .ai-right-panel .ai-chat-panel-body {
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.ai-page .ai-right-panel .ai-chat-input-bar {
  display: flex !important;
}

.ai-page .ai-right-panel .ai-send-btn {
  display: inline-flex !important;
}

/* 心晴指南：输入框透明底 + 浅色字（最高优先级） */
.moodsun-page .tip-input,
.moodsun-page .warmword-input {
  background: transparent !important;
  background-color: transparent !important;
  color: #f8f0e4 !important;
  -webkit-text-fill-color: #f8f0e4 !important;
  caret-color: #f2a65a !important;
  border: 1.5px solid rgba(255, 238, 214, 0.22) !important;
  box-shadow: none !important;
}

.moodsun-page .tip-input:focus,
.moodsun-page .warmword-input:focus {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(242, 166, 90, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(242, 166, 90, 0.14) !important;
  color: #fffaf5 !important;
  -webkit-text-fill-color: #fffaf5 !important;
}

.moodsun-page .tip-input::placeholder,
.moodsun-page .warmword-input::placeholder {
  color: rgba(195, 178, 162, 0.58) !important;
  -webkit-text-fill-color: rgba(195, 178, 162, 0.58) !important;
  opacity: 1 !important;
}

.moodsun-page .new-tip-form,
.moodsun-page .new-warmword-form {
  background: rgba(36, 28, 22, 0.55) !important;
  border: 1px dashed rgba(255, 238, 214, 0.14) !important;
}

.moodsun-page .form-title,
.moodsun-page .community-section .section-title,
.moodsun-page .warm-words-wall .section-title {
  color: rgba(243, 233, 221, 0.95) !important;
}

.moodsun-page .community-section-lead,
.moodsun-page .warm-words-lead {
  color: rgba(195, 178, 162, 0.88) !important;
  margin-bottom: 25px !important;
  font-size: 1.05em !important;
  line-height: 1.65 !important;
}

.moodsun-page .char-count {
  color: rgba(180, 165, 148, 0.75) !important;
}