:root {
      --bg-paper: #F8F5F0;
      --text-primary: #333333;
      --text-secondary: #6B5D52;
      --accent-brown: #D4A574;
      --accent-dark: #8B4513;
      --accent-warm: #C4A77D;
      --shadow-soft: rgba(139, 69, 19, 0.08);
      --shadow-medium: rgba(139, 69, 19, 0.15);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Noto Serif SC', serif;
      background: var(--bg-paper);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.8;
    }

    /* 纸张纹理背景 */
    .paper-texture {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.03;
    }

    /* 顶部导航 */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      background: linear-gradient(180deg, var(--bg-paper) 0%, rgba(248,245,240,0.95) 100%);
      backdrop-filter: blur(10px);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
      border-bottom: 1px solid rgba(212, 165, 116, 0.2);
    }

    .header.hidden {
      transform: translateY(-100%);
    }

    .header-content {
      text-align: center;
    }

    .header-date {
      font-size: 12px;
      color: var(--text-secondary);
      letter-spacing: 2px;
    }

    .header-theme {
      font-size: 14px;
      color: var(--accent-dark);
      font-weight: 600;
      margin-top: 2px;
    }

    /* 主内容区 */
    .main-container {
      position: relative;
      z-index: 1;
      padding: 70px 16px 80px;
      max-width: 500px;
      margin: 0 auto;
    }

    /* 页面容器 */
    .page {
      display: none;
      animation: fadeIn 0.4s ease;
    }

    .page.active {
      display: block;
    }

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

    /* 今日寄语卡片 */
    .daily-card {
      background: linear-gradient(145deg, #FFFDF8 0%, #F5EFE0 100%);
      border-radius: 16px;
      padding: 28px 24px;
      margin-bottom: 24px;
      box-shadow: 
        0 4px 20px var(--shadow-soft),
        0 1px 3px var(--shadow-medium),
        inset 0 1px 0 rgba(255,255,255,0.8);
      position: relative;
      overflow: hidden;
    }

    .daily-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent-brown), var(--accent-dark), var(--accent-brown));
    }

    .daily-card::after {
      content: '';
      position: absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4A574'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z'/%3E%3C/svg%3E") center/contain no-repeat;
      opacity: 0.3;
    }

    .card-label {
      font-size: 11px;
      color: var(--accent-dark);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-label::before {
      content: '';
      width: 16px;
      height: 1px;
      background: var(--accent-brown);
    }

    .daily-text {
      font-size: 17px;
      color: var(--text-primary);
      text-align: center;
      line-height: 2;
      margin-bottom: 20px;
      font-weight: 400;
    }

    .daily-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 24px;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.25s ease;
      border: none;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      color: #fff;
      box-shadow: 0 4px 12px rgba(139, 69, 19, 0.25);
    }

    .action-btn.primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(139, 69, 19, 0.35);
    }

    .action-btn.secondary {
      background: rgba(212, 165, 116, 0.15);
      color: var(--accent-dark);
      border: 1px solid rgba(212, 165, 116, 0.3);
    }

    .action-btn.secondary:hover {
      background: rgba(212, 165, 116, 0.25);
    }

    /* 书单卡片 */
    .section-title {
      font-size: 14px;
      color: var(--accent-dark);
      letter-spacing: 2px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--accent-brown), transparent);
    }

    .book-carousel {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 8px 0 16px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .book-carousel::-webkit-scrollbar {
      display: none;
    }

    .book-card {
      flex: 0 0 140px;
      scroll-snap-align: start;
      background: #FFFDF8;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 16px var(--shadow-soft);
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .book-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px var(--shadow-medium);
    }

    .book-cover {
      width: 100%;
      height: 180px;
      background: linear-gradient(145deg, #E8DDD0 0%, #D4C4B0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

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

    .book-cover-placeholder {
      font-size: 48px;
      color: var(--accent-brown);
      opacity: 0.4;
    }

    .book-info {
      padding: 12px;
    }

    .book-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .book-author {
      font-size: 11px;
      color: var(--text-secondary);
    }

    /* 歌单卡片 */
    .song-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }

    .song-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: linear-gradient(135deg, #FFFDF8 0%, #F8F3E8 100%);
      border-radius: 12px;
      box-shadow: 0 2px 8px var(--shadow-soft);
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .song-card:hover {
      background: linear-gradient(135deg, #FFFBF0 0%, #F5EFE0 100%);
      transform: translateX(4px);
    }

    .song-card.playing {
      background: linear-gradient(135deg, rgba(212,165,116,0.15) 0%, rgba(196,167,125,0.1) 100%);
      border-left: 3px solid var(--accent-dark);
    }

    .song-cover {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: linear-gradient(145deg, #D4A574 0%, #8B4513 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .song-cover svg {
      color: #fff;
      opacity: 0.9;
    }

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

    .song-name {
      font-size: 14px;
      color: var(--text-primary);
      font-weight: 500;
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .song-artist {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .song-play {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-brown);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: all 0.2s ease;
    }

    .song-card:hover .song-play {
      background: var(--accent-dark);
      transform: scale(1.1);
    }

    /* 话题卡片 */
    .topic-card {
      background: linear-gradient(135deg, #2C2416 0%, #3D3120 100%);
      border-radius: 16px;
      padding: 24px;
      color: #F8F5F0;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .topic-card:hover {
      transform: scale(1.02);
    }

    .topic-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(212,165,116,0.1) 0%, transparent 70%);
    }

    .topic-label {
      font-size: 11px;
      color: var(--accent-brown);
      letter-spacing: 2px;
      margin-bottom: 12px;
    }

    .topic-text {
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .topic-action {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--accent-brown);
    }

    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 64px;
      background: linear-gradient(180deg, rgba(248,245,240,0.98) 0%, var(--bg-paper) 100%);
      backdrop-filter: blur(10px);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-top: 1px solid rgba(212, 165, 116, 0.2);
      transition: transform 0.3s ease;
    }

    .bottom-nav.hidden {
      transform: translateY(100%);
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 16px;
      cursor: pointer;
      transition: all 0.25s ease;
      color: var(--text-secondary);
    }

    .nav-item:hover, .nav-item.active {
      color: var(--accent-dark);
    }

    .nav-item.active .nav-icon {
      transform: scale(1.1);
    }

    .nav-icon {
      width: 24px;
      height: 24px;
      transition: transform 0.25s ease;
    }

    .nav-label {
      font-size: 10px;
      letter-spacing: 1px;
    }

    /* 时光邮差页面 */
    .chat-container {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 140px);
    }

    .chat-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(139, 69, 19, 0.3);
    }

    .chat-avatar svg {
      color: #fff;
    }

  .chat-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
  }

  .avatar-container {
    margin-right: 12px;
  }

  .avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .avatar-text {
    color: white;
    font-size: 18px;
    font-weight: bold;
  }

    .chat-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .chat-status {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 4px;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .message {
      max-width: 80%;
      animation: messageIn 0.3s ease;
    }

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

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

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

    .message-bubble {
      padding: 14px 18px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.7;
    }

    .message.ai .message-bubble {
      background: #FFFDF8;
      border-bottom-left-radius: 4px;
      box-shadow: 0 2px 8px var(--shadow-soft);
    }

    .message.user .message-bubble {
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      color: #fff;
      border-bottom-right-radius: 4px;
    }

    .message-time {
      font-size: 10px;
      color: var(--text-secondary);
      margin-top: 6px;
      padding: 0 4px;
    }

    .message.user .message-time {
      text-align: right;
    }

    .chat-input-area {
      padding: 12px 16px;
      background: rgba(255,253,248,0.95);
      border-top: 1px solid rgba(212, 165, 116, 0.15);
    }

    .input-wrapper {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    .chat-input {
      flex: 1;
      border: 1px solid rgba(212, 165, 116, 0.3);
      border-radius: 20px;
      padding: 12px 18px;
      font-size: 14px;
      font-family: inherit;
      background: #FFF;
      resize: none;
      outline: none;
      transition: border-color 0.2s ease;
    }

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

    .send-btn, .voice-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .send-btn {
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      color: #fff;
    }

    .send-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
    }

    .voice-btn {
      background: rgba(212, 165, 116, 0.15);
      color: var(--accent-dark);
    }

    .voice-btn:hover {
      background: rgba(212, 165, 116, 0.25);
    }

    /* 日历页面 */
    .calendar-header {
      text-align: center;
      padding: 20px;
    }

    .calendar-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .calendar-nav {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 16px;
    }

    .calendar-nav-btn {
      background: rgba(212, 165, 116, 0.15);
      border: none;
      padding: 8px 20px;
      border-radius: 20px;
      font-family: inherit;
      font-size: 13px;
      color: var(--accent-dark);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .calendar-nav-btn:hover {
      background: rgba(212, 165, 116, 0.25);
    }

    .calendar-container {
      background: #FFFDF8;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 16px var(--shadow-soft);
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-top: 12px;
    }

    .calendar-weekday {
      text-align: center;
      font-size: 11px;
      color: var(--text-secondary);
      padding: 8px 0;
      letter-spacing: 1px;
    }

    .calendar-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .calendar-day:hover {
      background: rgba(212, 165, 116, 0.15);
    }

    .calendar-day.other-month {
      color: var(--text-secondary);
      opacity: 0.4;
    }

    .calendar-day.today {
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      color: #fff;
      font-weight: 600;
    }

    .calendar-day.has-letter::after {
      content: '';
      position: absolute;
      bottom: 4px;
      width: 6px;
      height: 6px;
      background: var(--accent-brown);
      border-radius: 50%;
    }

    .calendar-day.today.has-letter::after {
      background: #fff;
    }

    .calendar-day.liked::before {
      content: '';
      position: absolute;
      top: 4px;
      right: 4px;
      width: 6px;
      height: 6px;
      background: #C75050;
      border-radius: 50%;
    }

    /* 收藏页面 */
    .collection-tabs {
      display: flex;
      gap: 8px;
      padding: 0 0 16px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .collection-tabs::-webkit-scrollbar {
      display: none;
    }

    .collection-tab {
      padding: 10px 20px;
      border-radius: 20px;
      font-size: 13px;
      font-family: inherit;
      background: rgba(212, 165, 116, 0.1);
      border: 1px solid rgba(212, 165, 116, 0.2);
      color: var(--text-secondary);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .collection-tab.active {
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      color: #fff;
      border-color: transparent;
    }

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

    .collection-item {
      background: #FFFDF8;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px var(--shadow-soft);
      display: flex;
      gap: 14px;
      align-items: flex-start;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .collection-item:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px var(--shadow-medium);
    }

    .collection-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-warm) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }

    .collection-content {
      flex: 1;
      min-width: 0;
    }

    .collection-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .collection-desc {
      font-size: 12px;
      color: var(--text-secondary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .collection-date {
      font-size: 10px;
      color: var(--text-secondary);
      margin-top: 6px;
    }

    /* 设置页面 */
    .settings-section {
      margin-bottom: 24px;
    }

    .settings-title {
      font-size: 12px;
      color: var(--text-secondary);
      letter-spacing: 2px;
      margin-bottom: 12px;
      padding-left: 4px;
    }

    .settings-card {
      background: #FFFDF8;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px var(--shadow-soft);
    }

    .settings-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(212, 165, 116, 0.1);
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .settings-item:last-child {
      border-bottom: none;
    }

    .settings-item:hover {
      background: rgba(248, 243, 232, 0.5);
    }

    .settings-item-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .settings-item-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(212, 165, 116, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-dark);
    }

    .settings-item-label {
      font-size: 14px;
      color: var(--text-primary);
    }

    .settings-item-value {
      font-size: 13px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 开关样式 */
    .toggle-switch {
      position: relative;
      width: 48px;
      height: 28px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(212, 165, 116, 0.3);
      transition: 0.3s;
      border-radius: 28px;
    }

    .toggle-slider::before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 3px;
      bottom: 3px;
      background: white;
      transition: 0.3s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .toggle-switch input:checked + .toggle-slider {
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
    }

    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(20px);
    }

    /* 散文弹窗 */
    .essay-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .essay-modal.show {
      display: flex;
    }

    .essay-content {
      background: #FFFDF8;
      border-radius: 20px;
      max-width: 400px;
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
      animation: modalIn 0.3s ease;
    }

    @keyframes modalIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    .essay-header {
      position: sticky;
      top: 0;
      background: linear-gradient(180deg, #FFFDF8 0%, rgba(255,253,248,0.95) 100%);
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(212, 165, 116, 0.15);
    }

    .essay-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(212, 165, 116, 0.15);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      transition: all 0.2s ease;
    }

    .essay-close:hover {
      background: rgba(212, 165, 116, 0.25);
      color: var(--accent-dark);
    }

    .essay-body {
      padding: 24px;
    }

    .essay-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 20px;
      text-align: center;
    }

    .essay-text {
      font-size: 15px;
      line-height: 2;
      color: var(--text-primary);
      text-align: justify;
    }

    .essay-text p {
      margin-bottom: 16px;
      text-indent: 2em;
    }

    /* 书籍详情弹窗 */
    .book-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-paper);
      z-index: 200;
      overflow-y: auto;
    }

    .book-modal.show {
      display: block;
      animation: slideIn 0.35s ease;
    }

    @keyframes slideIn {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }

    .book-modal-header {
      position: sticky;
      top: 0;
      background: linear-gradient(180deg, var(--bg-paper) 0%, rgba(248,245,240,0.98) 100%);
      backdrop-filter: blur(10px);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 10;
    }

    .book-modal-back {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(212, 165, 116, 0.15);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-dark);
    }

    .book-modal-title {
      font-size: 16px;
      font-weight: 600;
    }

    .book-detail-cover {
      width: 100%;
      height: 280px;
      background: linear-gradient(145deg, #E8DDD0 0%, #D4C4B0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .book-detail-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .book-detail-info {
      padding: 24px 20px;
    }

    .book-detail-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .book-detail-author {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 16px;
    }

    .book-detail-quote {
      font-size: 14px;
      color: var(--accent-dark);
      font-style: italic;
      padding-left: 16px;
      border-left: 3px solid var(--accent-brown);
      line-height: 1.8;
    }

    .book-section {
      padding: 0 20px 20px;
    }

    .book-section-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--accent-dark);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .book-section-title::before {
      content: '';
      width: 4px;
      height: 16px;
      background: var(--accent-brown);
      border-radius: 2px;
    }

    .book-review {
      background: #FFFDF8;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px var(--shadow-soft);
    }

    .book-review-text {
      font-size: 14px;
      line-height: 1.8;
      color: var(--text-primary);
    }

    .book-review-author {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 10px;
      text-align: right;
    }

    .book-author-bio {
      background: #FFFDF8;
      border-radius: 12px;
      padding: 16px;
      font-size: 14px;
      line-height: 1.8;
      color: var(--text-primary);
    }

    .book-quotes {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .book-quote-item {
      background: #FFFDF8;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .book-quote-item:hover {
      background: #FFF9F0;
      transform: translateX(4px);
    }

    .book-quote-icon {
      color: var(--accent-brown);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .book-quote-text {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-primary);
    }

    .book-download-btn {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      max-width: 460px;
      margin: 0 auto;
      background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      color: #fff;
      border: none;
      padding: 16px;
      border-radius: 12px;
      font-size: 15px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(139, 69, 19, 0.3);
      transition: all 0.25s ease;
    }

    .book-download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
    }

    /* 播放器 */
    .player-bar {
      position: fixed;
      bottom: 78px;
      left: 16px;
      right: 16px;
      max-width: 468px;
      margin: 0 auto;
      background: linear-gradient(135deg, #2C2416 0%, #3D3120 100%);
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      z-index: 99;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s ease;
    }

    .player-bar.show {
      transform: translateY(0);
      opacity: 1;
    }

    .player-cover {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      background: linear-gradient(145deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      animation: rotate 8s linear infinite;
      animation-play-state: paused;
    }

    .player-bar.playing .player-cover {
      animation-play-state: running;
    }

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

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

    .player-song {
      font-size: 14px;
      color: #F8F5F0;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .player-artist {
      font-size: 11px;
      color: rgba(248,245,240,0.6);
    }

    .player-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .player-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(248,245,240,0.15);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #F8F5F0;
      transition: all 0.2s ease;
    }

    .player-btn:hover {
      background: rgba(248,245,240,0.25);
    }

    .player-btn.play {
      background: var(--accent-brown);
    }

    /* 响应式 */
    @media (min-width: 768px) {
      .main-container {
        max-width: 480px;
      }
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
      width: 4px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(212, 165, 116, 0.3);
      border-radius: 2px;
    }

    /* 加载动画 */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-paper);
      z-index: 300;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.5s ease;
    }

    .loading-overlay.hide {
      opacity: 0;
      pointer-events: none;
    }

    .loading-logo {
      font-family: 'ZCOOL XiaoWei', serif;
      font-size: 36px;
      color: var(--accent-dark);
      margin-bottom: 24px;
      animation: pulse 2s ease-in-out infinite;
    }

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

    .loading-dots {
      display: flex;
      gap: 8px;
    }

    .loading-dot {
      width: 8px;
      height: 8px;
      background: var(--accent-brown);
      border-radius: 50%;
      animation: bounce 1.4s ease-in-out infinite both;
    }

    .loading-dot:nth-child(1) { animation-delay: -0.32s; }
    .loading-dot:nth-child(2) { animation-delay: -0.16s; }

    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0); }
      40% { transform: scale(1); }
    }

    /* 空状态 */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
    }

    .empty-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      background: rgba(212, 165, 116, 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-brown);
    }

    .empty-text {
      font-size: 14px;
      color: var(--text-secondary);
    }

/*******************************************************************/

/* 浮动按钮样式 */
    .float-back-btn {
      position: fixed;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      /* 半透明背景 */
      background: rgba(245, 230, 163, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
      z-index: 9999;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
      /* 初始位置：右下角，大拇指舒适区域 */
      right: 20px;
      bottom: 100px;
    }

    .float-back-btn:active {
      transform: scale(0.92);
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .float-back-btn.dragging {
      transform: scale(1.08);
      box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
      transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .float-back-btn svg {
      width: 24px;
      height: 24px;
      stroke: #3d3520;
      stroke-width: 2.5;
      fill: none;
      pointer-events: none;
    }

    /* 拖拽时的视觉反馈 */
    .float-back-btn::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%);
      pointer-events: none;
    }

    /* 边缘吸附指示 */
    .float-back-btn.snap-hint {
      opacity: 0.7;
    }

    /* 按钮位置记忆提示 */
    .position-toast {
      position: fixed;
      bottom: 180px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 9998;
    }

    .position-toast.show {
      opacity: 1;
    }


/* ============================================
   夜间模式 & 字体大小设置
   ============================================ */

/* 夜间模式变量覆盖 */
[data-theme="dark"] {
  --bg-paper: #1C1917;
  --text-primary: #E8E4DF;
  --text-secondary: #A8A29E;
  --accent-brown: #C4A574;
  --accent-dark: #D4A574;
  --accent-warm: #B8956A;
  --shadow-soft: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.4);
}

/* 夜间模式特殊样式调整 */
[data-theme="dark"] .paper-texture {
  opacity: 0.02;
}

[data-theme="dark"] .header {
  background: linear-gradient(180deg, var(--bg-paper) 0%, rgba(28, 25, 23, 0.95) 100%);
  border-bottom-color: rgba(196, 165, 116, 0.15);
}

[data-theme="dark"] .bottom-nav {
  background: linear-gradient(180deg, rgba(28, 25, 23, 0.98) 0%, var(--bg-paper) 100%);
  border-top-color: rgba(196, 165, 116, 0.15);
}

[data-theme="dark"] .daily-card {
  background: linear-gradient(145deg, #252220 0%, #1E1B18 100%);
}

[data-theme="dark"] .book-card {
  background: #252220;
}

[data-theme="dark"] .book-cover {
  background: linear-gradient(145deg, #3D3830 0%, #2A2520 100%);
}

[data-theme="dark"] .song-card {
  background: linear-gradient(135deg, #252220 0%, #1E1B18 100%);
}

[data-theme="dark"] .song-card.playing {
  background: linear-gradient(135deg, rgba(196, 165, 116, 0.2) 0%, rgba(184, 149, 106, 0.15) 100%);
}

[data-theme="dark"] .collection-item {
  background: #252220;
}

[data-theme="dark"] .settings-card {
  background: #252220;
}

[data-theme="dark"] .calendar-container {
  background: #252220;
}

[data-theme="dark"] .calendar-day:hover {
  background: rgba(196, 165, 116, 0.2);
}

[data-theme="dark"] .book-review,
[data-theme="dark"] .book-author-bio {
  background: #252220;
}

[data-theme="dark"] .book-quote-item {
  background: #252220;
}

[data-theme="dark"] .book-quote-item:hover {
  background: #2A2520;
}

[data-theme="dark"] .chat-input {
  background: #252220;
  border-color: rgba(196, 165, 116, 0.2);
  color: var(--text-primary);
}

[data-theme="dark"] .message.ai .message-bubble {
  background: #252220;
}

[data-theme="dark"] .essay-content {
  background: #252220;
}

[data-theme="dark"] .essay-header {
  background: linear-gradient(180deg, #252220 0%, rgba(37, 34, 32, 0.95) 100%);
}

[data-theme="dark"] .book-modal {
  background: var(--bg-paper);
}

[data-theme="dark"] .book-modal-header {
  background: linear-gradient(180deg, var(--bg-paper) 0%, rgba(28, 25, 23, 0.98) 100%);
}

/* ============================================
   字体大小设置
   ============================================ */

/* 字体大小变量 */
:root {
  --font-size-base: 15px;
  --font-size-small: 13px;
  --font-size-large: 17px;
  --line-height: 1.8;
}

[data-font-size="small"] {
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --line-height: 1.7;
}

[data-font-size="large"] {
  --font-size-base: 17px;
  --font-size-small: 14px;
  --font-size-large: 19px;
  --line-height: 1.9;
}

/* 应用字体大小 */
[data-font-size] .daily-text,
[data-font-size] .essay-text,
[data-font-size] .book-review-text,
[data-font-size] .book-quote-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

[data-font-size] .message-bubble {
  font-size: var(--font-size-base);
}

[data-font-size] .song-name,
[data-font-size] .collection-title {
  font-size: var(--font-size-base);
}

[data-font-size] .book-title {
  font-size: calc(var(--font-size-small) + 1px);
}

[data-font-size] .song-artist,
[data-font-size] .collection-desc {
  font-size: var(--font-size-small);
}

/* ============================================
   新增功能样式
   ============================================ */

/* 下载按钮 */
.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--accent-dark);
}

.download-btn:hover {
  background: rgba(212, 165, 116, 0.25);
  transform: scale(1.1);
}

.download-btn svg {
  width: 16px;
  height: 16px;
}

/* 收藏按钮 */
.collect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--accent-dark);
}

.collect-btn:hover {
  background: rgba(212, 165, 116, 0.25);
  transform: scale(1.1);
}

.collect-btn.collected {
  background: var(--accent-brown);
  color: #fff;
}

.collect-btn svg {
  width: 16px;
  height: 16px;
}

/* 收藏按钮容器 */
.collect-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

/* 录音弹窗 */
.record-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.record-modal.show {
  display: flex;
}

.record-panel {
  background: var(--bg-paper);
  border-radius: 24px;
  padding: 32px 24px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  animation: modalIn 0.3s ease;
}

.record-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.record-icon.recording::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent-brown);
  animation: recordPulse 1s ease-in-out infinite;
}

@keyframes recordPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.record-icon svg {
  color: #fff;
  position: relative;
  z-index: 1;
}

.record-timer {
  font-size: 48px;
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.record-timer.recording {
  color: #C75050;
}

.record-status {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

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

.record-btn {
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
}

.record-btn.cancel {
  background: rgba(212, 165, 116, 0.15);
  color: var(--accent-dark);
}

.record-btn.cancel:hover {
  background: rgba(212, 165, 116, 0.25);
}

.record-btn.send {
  background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.25);
}

.record-btn.send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 69, 19, 0.35);
}

.record-btn.send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 日历聊天记录弹窗 */
.day-chat-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.day-chat-modal.show {
  display: flex;
}

.day-chat-panel {
  background: var(--bg-paper);
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.3s ease;
}

.day-chat-header {
  padding: 20px;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.day-chat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.day-chat-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.day-chat-close:hover {
  background: rgba(212, 165, 116, 0.25);
}

.day-chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.day-chat-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* 语音消息气泡 */
.message-bubble.voice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  cursor: pointer;
}

.message-bubble.voice .voice-icon {
  flex-shrink: 0;
}

.message-bubble.voice .voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}

.message-bubble.voice .voice-bar {
  width: 3px;
  background: currentColor;
  border-radius: 2px;
  animation: voiceWave 0.5s ease-in-out infinite alternate;
}

.message-bubble.voice .voice-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.message-bubble.voice .voice-bar:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.message-bubble.voice .voice-bar:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.message-bubble.voice .voice-bar:nth-child(4) { height: 16px; animation-delay: 0.3s; }
.message-bubble.voice .voice-bar:nth-child(5) { height: 8px; animation-delay: 0.4s; }

@keyframes voiceWave {
  0% { transform: scaleY(0.5); }
  100% { transform: scaleY(1); }
}

.message-bubble.voice .voice-duration {
  font-size: 12px;
  opacity: 0.8;
}

/* 夜间模式补充 */
[data-theme="dark"] .record-panel,
[data-theme="dark"] .day-chat-panel {
  background: #252220;
}

[data-theme="dark"] .day-chat-header {
  border-bottom-color: rgba(196, 165, 116, 0.15);
}

/* 收藏按钮样式优化 */
.collect-btn {
    transition: all 0.3s ease;
}

.collect-btn:hover {
    transform: scale(1.1);
}

.collect-btn:active {
    transform: scale(0.95);
}

/* 禁用状态样式 */
.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 聊天输入框禁用状态 */
#chatInput:disabled {
    background: rgba(0,0,0,0.1);
    cursor: not-allowed;
}

/* 剩余次数提示样式 */
#remainingCount {
    animation: fadeIn 0.3s ease;
}



/* ============================================
   德妹的朋友圈样式
   ============================================ */

/* 朋友圈容器 */
.moments-container {
    /*min-height: calc(100vh - 140px);*/
    height: calc(100vh);
    background: var(--bg-paper);
}

/* 朋友圈头部 */
.moments-header {
    position: relative;
    margin-bottom: 50px;
    top: -140px;
}

.moments-cover {
    width: 100%;
    height: 240px;
    background: linear-gradient(145deg, #E8DDD0 0%, #D4C4B0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.moments-cover-placeholder {
    color: var(--accent-brown);
    opacity: 0.4;
}

.moments-profile {
    position: absolute;
    bottom: -30px;
    right: 16px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.moments-avatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 3px solid var(--bg-paper);
    box-shadow: 0 2px 8px var(--shadow-medium);
    overflow: hidden;
}

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

.moments-nickname {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* 动态流 */
.moments-feed {
    padding: 16px;
}

/* 单条动态 */
.moment-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(139, 69, 19, 0.08);
}

.moment-item:last-child {
    border-bottom: none;
}

.moment-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.moment-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    margin-right: 12px;
    overflow: hidden;
}

.moment-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moment-user-info {
    flex: 1;
}

.moment-user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-dark);
}

.moment-time {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-family: 'Georgia', serif;
}

/* 动态内容 */
.moment-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 12px;
    word-break: break-word;
}

/* 图片网格 */
.moment-images {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.moment-images.single {
    grid-template-columns: 1fr;
    max-width: 200px;
}

.moment-images.double {
    grid-template-columns: repeat(2, 1fr);
}

.moment-images.triple {
    grid-template-columns: repeat(3, 1fr);
}

.moment-images.quad {
    grid-template-columns: repeat(2, 1fr);
}

.moment-image {
    aspect-ratio: 1;
    background: linear-gradient(145deg, #E8DDD0 0%, #D4C4B0 100%);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.moment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.moment-image:hover img {
    transform: scale(1.02);
}

/* 视频样式 */
.moment-video {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #000;
}

.moment-video video {
    width: 100%;
    display: block;
    max-height: 300px;
    object-fit: contain;
}

.moment-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.moment-video-play:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

.moment-video-play svg {
    color: #fff;
    margin-left: 4px;
}

.moment-video-play.hidden {
    display: none;
}

/* 互动区域 */
.moment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 8px;
}

.moment-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.moment-action-btn:hover {
    background: rgba(212, 165, 116, 0.1);
}

.moment-action-btn.liked {
    color: var(--accent-brown);
}

.moment-action-btn.liked svg {
    fill: var(--accent-brown);
}

.moment-action-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.moment-action-btn:active svg {
    transform: scale(1.2);
}

/* 评论区 */
.moment-comments {
    margin-top: 12px;
    background: rgba(212, 165, 116, 0.06);
    border-radius: 8px;
    padding: 12px;
}

.moment-comment {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 8px;
    word-break: break-word;
}

.moment-comment:last-child {
    margin-bottom: 0;
}

.moment-comment-author {
    color: var(--accent-dark);
    font-weight: 500;
}

.moment-comment-text {
    color: var(--text-primary);
}

.moment-comments-more {
    font-size: 13px;
    color: var(--accent-dark);
    cursor: pointer;
    padding: 8px 0 0;
    display: inline-block;
}

.moment-comments-more:hover {
    text-decoration: underline;
}

/* 加载状态 */
.moments-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.moments-loading.show {
    display: flex;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(212, 165, 116, 0.3);
    border-top-color: var(--accent-brown);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.moments-end {
    display: none;
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

.moments-end.show {
    display: block;
}

/* ============================================
   图片预览样式
   ============================================ */

.image-preview {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 400;
    align-items: center;
    justify-content: center;
}

.image-preview.show {
    display: flex;
}

.image-preview-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.image-preview-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.image-preview-container {
    display: flex;
    width: 100%;
    height: calc(100% - 80px);
    align-items: center;
    transition: transform 0.3s ease;
}

.image-preview-item {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.image-preview-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.image-preview-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.image-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.image-preview-dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* ============================================
   评论输入框样式
   ============================================ */

.comment-input-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-paper);
    border-top: 1px solid rgba(212, 165, 116, 0.2);
    z-index: 300;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    animation: slideUp 0.25s ease;
}

.comment-input-bar.show {
    display: block;
}

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

.comment-input-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.comment-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 120px;
    padding: 12px;
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    background: #FFFDF8;
    color: var(--text-primary);
    resize: none;
    outline: none;
    transition: border-color 0.2s ease;
}

.comment-textarea:focus {
    border-color: var(--accent-brown);
}

.comment-textarea::placeholder {
    color: var(--text-secondary);
}

.comment-input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.comment-char-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.comment-char-count.warning {
    color: #C75050;
}

.comment-send-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--accent-brown) 0%, var(--accent-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}

.comment-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   收藏页面日历样式调整
   ============================================ */

.collection-container {
    display: flex;
    flex-direction: column;
}

.collection-calendar {
    flex-shrink: 0;
}

.collection-detail {
    flex: 1;
    min-height: 200px;
}

.collection-date-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding: 16px;
    border-bottom: 1px solid rgba(212, 165, 116, 0.1);
}

.collection-tabs-wrapper {
    padding: 12px 16px;
    background: rgba(255, 253, 248, 0.5);
    position: sticky;
    top: 0;
    z-index: 5;
}

.collection-tabs-wrapper .collection-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.collection-tabs-wrapper .collection-tab {
    padding: 8px 16px;
    font-size: 13px;
}

/* 夜间模式补充 */
[data-theme="dark"] .moment-comments {
    background: rgba(196, 165, 116, 0.08);
}

[data-theme="dark"] .moment-action-btn:hover {
    background: rgba(196, 165, 116, 0.15);
}

[data-theme="dark"] .comment-textarea {
    background: #252220;
}

[data-theme="dark"] .moments-cover {
    background: linear-gradient(145deg, #3D3830 0%, #2A2520 100%);
}

[data-theme="dark"] .moment-image {
    background: linear-gradient(145deg, #3D3830 0%, #2A2520 100%);
}

/* 下拉刷新提示 */
.moments-refresh-tip {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* 收藏项时间标记 */
.collection-item-date-tag {
    font-size: 10px;
    color: var(--accent-brown);
    background: rgba(212, 165, 116, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* 日历选中状态样式 */
.calendar-day.selected {
    background: var(--accent-brown);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(139, 69, 19, 0.25);
}

.calendar-day.selected.has-letter::after {
    background: #fff;
}

/* ============================================
   收藏详情弹窗样式
   ============================================ */

.collection-detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.collection-detail-modal.show {
    display: flex;
    opacity: 1;
}

.collection-detail-panel {
    background: var(--bg-paper);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUpModal 0.3s ease;
    overflow: hidden;
}

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

.collection-detail-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(212, 165, 116, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.collection-detail-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.collection-detail-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(212, 165, 116, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.collection-detail-close:hover {
    background: rgba(212, 165, 116, 0.2);
    color: var(--accent-dark);
}

.collection-detail-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 底部提示样式 */
.collection-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    gap: 12px;
    text-align: center;
}

.collection-hint svg {
    opacity: 0.4;
}

.collection-hint span {
    font-size: 14px;
    opacity: 0.8;
}

/* 夜间模式适配 */
[data-theme="dark"] .collection-detail-panel {
    background: #252220;
}

[data-theme="dark"] .collection-detail-header {
    border-bottom-color: rgba(196, 165, 116, 0.1);
}

/* mescroll 朋友圈容器 */
#mescrollMoments {
    position: absolute; 
    top: 40px; /* 或根据头部高度调整 */
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* mescroll 会自己管理滚动，但这里写上保险 */
}

/* 夜间模式适配 */
[data-theme="dark"] #mescrollMoments {
    background: var(--bg-paper);
}

.lock-x-scroll {
  overflow-x: hidden !important;
  /* 可选：防止滚动条占位导致布局偏移 */
  scrollbar-width: none; /* 火狐 */
  -ms-overflow-style: none; /* IE/Edge */
}
/* 隐藏webkit内核滚动条（可选） */
.lock-x-scroll::-webkit-scrollbar {
  display: none;
}

/* 夜间模式适配 */
[data-theme="dark"] .chat-header {
  background: #252220;
}

[data-theme="dark"] .chat-input-area {
  background: #252220;
}

[data-theme="dark"] .layui-layer-content{
  background: #252220;
}

/* PC端样式（屏幕宽度 ≥ 768px） */
@media (min-width: 768px) {
    
  /* 悬浮窗口样式 */
  .float-window {
    position: fixed; /* 固定定位，不随滚动移动 */
    top: 100px;
    right: 20px;
    z-index: 9999; /* 确保在最上层 */
    background: var(--bg-paper);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* 二维码样式 */
  .qrcode-img {
    width: 120px;
    height: 120px;
    border: 1px solid #eee;
  }

  /* 菜单 */
  .menu-button {
    padding: 8px 15px;
    background: var(--accent-brown);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .menu-button:hover {
    background: var(--accent-dark);
    color: #fff;
  }

  .menu-button.active {
     color: #fff;
  }

  /* 回到顶部按钮 */
  .back-to-top {
    padding: 8px 15px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .back-to-top:hover {
    background: #0056b3; 
  }

 
}

/* 移动端隐藏悬浮窗口 */
@media (max-width: 767px) {
  .float-window {
    display: none !important;
  }
}

/* 微博文章卡片样式 */
.weibo-article-card {
  width: 100%;
  max-width: 500px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
  margin: 10px 0;
}
.weibo-article-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.weibo-article-card .card-cover {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}
.weibo-article-card .card-content {
  padding: 15px;
}
.weibo-article-card .card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}
.weibo-article-card .card-summary {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.weibo-article-card .card-link {
  font-size: 12px;
  color: #999;
}

[data-theme="dark"] .card-content{
  color:#ffffff
}

[data-theme="dark"] .card-title{
  color:gold
}