/* ========== CSS Variables ========== */
:root {
  --bg: #FAF6F1;
  --card: #FFFFFF;
  --accent: #D4956A;
  --accent-light: #F0D5C0;
  --accent-dark: #B87A52;
  --text-primary: #2C2C2C;
  --text-secondary: #8A8A8A;
  --text-muted: #B5B5B5;
  --border: #F0EBE4;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --nav-height: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

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

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

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
}

#page-container {
  padding: 0 20px calc(var(--nav-height) + var(--safe-bottom) + 16px) 20px;
  min-height: 100dvh;
}

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

/* ========== Typography ========== */
.heading-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--text-primary);
}

.heading-section {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* ========== Bottom Navigation ========== */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  color: var(--text-muted);
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.nav-item svg {
  width: 22px;
  height: 22px;
}

.nav-item span {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

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

/* ========== Cards ========== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.card-flat {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--border);
}

/* ========== Home Page (1:1 Replica) ========== */
.home-page { padding-top: 12px; }

/* Welcome label */
.hp-welcome {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #AAAAAA;
  margin-bottom: 6px;
}

/* Names */
.hp-names {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.3;
}
.hp-amp {
  color: var(--accent);
  font-style: italic;
}

/* Days counter */
.hp-days-wrap {
  text-align: center;
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.hp-days-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 600;
  color: #D4956A;
  line-height: 1;
}
.hp-days-label {
  font-size: 0.8rem;
  color: #AAAAAA;
  font-weight: 400;
}
.hp-since {
  text-align: center;
  font-size: 0.75rem;
  color: #AAAAAA;
  margin-top: 2px;
}

/* Quote card */
.hp-quote-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px 24px;
  margin: 20px 0 0;
  box-shadow: var(--shadow);
  text-align: center;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-quote-text {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* Quote dots */
.hp-quote-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 20px;
}
.hp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #DDD;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
}
.hp-dot.active {
  background: var(--accent);
}

/* Info grid: weather left, checkin+clock right */
.hp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

/* Weather card */
.hp-weather-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hp-weather-city {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #AAAAAA;
  margin-bottom: 6px;
}
.hp-weather-temp {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.hp-weather-cond {
  font-size: 0.75rem;
  color: #AAAAAA;
  margin-bottom: 10px;
}
.hp-weather-tip {
  font-size: 0.75rem;
  color: #999;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  line-height: 1.4;
}

/* Right column */
.hp-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Check-in card */
.hp-checkin-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 12px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
  cursor: pointer;
}
.hp-checkin-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hp-checkin-label {
  font-size: 0.75rem;
  color: #999;
  font-weight: 400;
}
.hp-checkin-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clock card */
.hp-clock-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 12px;
  box-shadow: var(--shadow);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hp-clock-time {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: 1px;
}
.hp-clock-date {
  font-size: 0.72rem;
  color: #AAAAAA;
  margin-top: 4px;
}

/* Milestones card */
.hp-milestones-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.hp-milestones-title {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #AAAAAA;
  margin-bottom: 16px;
}
.hp-milestone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.hp-milestone-row + .hp-milestone-row {
  border-top: 1px solid var(--border);
}
.hp-milestone-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}
.hp-milestone-val {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 500;
}

/* Explore entry */
.hp-explore {
  text-align: center;
  padding: 14px 0 10px;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.hp-explore:active { opacity: 0.6; }

/* ========== Homepage Module Grid ========== */
.hp-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 20px;
}

.hp-module-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

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

.hp-module-card.full {
  grid-column: 1 / -1;
}

.hp-module-card.disabled {
  opacity: 0.45;
}

.hp-module-card-icon {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.hp-module-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.hp-module-card-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.3;
}

.hp-module-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ========== Feature Navigation Page ========== */
.feature-nav-page { padding-top: 12px; }

.feature-nav-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--text-primary);
  transition: all 0.2s ease;
}

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

.back-btn svg {
  width: 18px;
  height: 18px;
}

.feature-nav-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0 20px;
}

.module-card {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 18px 10px 14px;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.module-card:active {
  transform: scale(0.95);
}

.module-card.disabled {
  opacity: 0.5;
}

.module-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.module-icon svg {
  width: 22px;
  height: 22px;
}

.module-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.module-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* ========== Placeholder Pages ========== */
.placeholder-page {
  padding-top: 20px;
  text-align: center;
}

.placeholder-page .page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.placeholder-icon {
  font-size: 3rem;
  margin: 60px 0 16px;
}

.placeholder-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Sub-page header */
.sub-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 12px;
}

.sub-page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}

/* ========== Toast ========== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: rgba(44, 44, 44, 0.88);
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 0.85rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  text-align: center;
  max-width: 260px;
  backdrop-filter: blur(10px);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ========== Page Transitions ========== */
.page-enter {
  animation: pageIn 0.3s ease forwards;
}

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

.page-slide-in {
  animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ========== Scrollbar ========== */
#page-container::-webkit-scrollbar { display: none; }
#page-container { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 照片（Memory / Moments）===== */
.btn-photo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 14px;
  background: var(--accent-light); color: var(--accent-dark);
  border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500;
  transition: all 0.2s;
}
.btn-photo:active { transform: scale(0.96); }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-thumb { position: relative; width: 64px; height: 64px; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.photo-thumb-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 14px; line-height: 20px; text-align: center; padding: 0;
}
.photo-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.photo-gallery img {
  width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-sm);
  cursor: pointer; display: block;
}
.photo-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.photo-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ========== Utility ========== */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* ================================================================
   PHASE 2 STYLES
   ================================================================ */

/* ========== Shared Form Elements ========== */
.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--text-primary);
  margin-top: 8px;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); }

.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--text-primary);
  margin-top: 8px;
  resize: vertical;
  line-height: 1.6;
  font-family: var(--font-body);
}
.form-textarea:focus { border-color: var(--accent); outline: none; }

.form-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.form-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Buttons */
.btn-primary {
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  padding: 11px 20px;
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sm {
  padding: 6px 14px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.btn-delete {
  padding: 6px 12px;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 10px;
  cursor: pointer;
}
.btn-delete:hover { color: #e74c3c; }

.btn-claude {
  padding: 10px 16px;
  background: linear-gradient(135deg, #F0D5C0, #E8C4A8);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-claude:active { transform: scale(0.97); }

.btn-claude-sm {
  padding: 4px 10px;
  background: #F0D5C0;
  color: var(--accent-dark);
  border-radius: 6px;
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
}

.header-action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 300;
  margin-left: auto;
  cursor: pointer;
  border: none;
}

.add-fab {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  font-size: 1.6rem;
  font-weight: 300;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page headers */
.page-header-center {
  text-align: center;
  padding: 20px 0 16px;
}
.page-header-center .page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
}
.page-header-center .page-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Module page */
.module-page { padding-top: 4px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 20px;
}
.empty-icon { font-size: 2.8rem; margin-bottom: 12px; }
.empty-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

/* Mood picker */
.mood-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 0;
}
.mood-option {
  font-size: 1.3rem;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.mood-option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  border-radius: 10px;
}

/* Claude interaction */
.claude-interact { margin-top: 12px; }
.claude-response {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: #FFF8F3;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  border: 1px solid var(--accent-light);
}
.claude-avatar { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.claude-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; }

/* Text helpers */
.text-accent { color: var(--accent); font-size: 0.78rem; font-weight: 500; }
.text-muted { color: var(--text-muted); }
.text-xs { font-size: 0.7rem; }
.text-sm { font-size: 0.78rem; color: var(--text-secondary); }

/* ========== Chat Page ========== */
.chat-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--nav-height) - var(--safe-bottom));
  padding-top: 8px;
}
.chat-header {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.chat-header-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}
.chat-header-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.bubble-left {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.bubble-right {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent-light), #F9E8DA);
  border-bottom-right-radius: 4px;
}
.bubble-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 2px;
}
.bubble-text { word-break: break-word; }
.bubble-time {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}
.chat-input-bar {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.chat-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  font-size: 0.85rem;
  background: var(--card);
}
.chat-input:focus { border-color: var(--accent); }
.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}
.chat-send-btn svg { width: 18px; height: 18px; }

/* ========== Calendar Page ========== */
.calendar-page { padding-top: 8px; }
.date-list { display: flex; flex-direction: column; gap: 10px; }
.date-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.date-card-emoji { font-size: 1.5rem; }
.date-card-info { flex: 1; min-width: 0; }
.date-card-title { font-size: 0.85rem; font-weight: 500; }
.date-card-date { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.date-card-countdown { text-align: right; flex-shrink: 0; }
.days-highlight {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  display: block;
  line-height: 1;
}

.add-form-wrap { padding-top: 8px; }

/* ========== Love Page ========== */
.love-page { padding-top: 8px; }
.love-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.love-action-card {
  text-align: center;
  padding: 20px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.love-action-card:active { transform: scale(0.96); }
.love-action-icon { font-size: 2rem; margin-bottom: 6px; }
.love-action-name { font-size: 0.85rem; font-weight: 500; }
.love-action-count { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }

.dice-result {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: all 0.1s;
}

/* ========== Journal Tab ========== */
.journal-page { padding-top: 8px; }
.journal-grid { display: flex; flex-direction: column; gap: 10px; }
.journal-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.journal-link-card:active { transform: scale(0.98); }
.journal-link-icon { font-size: 1.5rem; }
.journal-link-info { flex: 1; }
.journal-link-name { font-size: 0.9rem; font-weight: 500; }
.journal-link-count { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.journal-link-arrow { color: var(--text-muted); }
.journal-link-arrow svg { width: 16px; height: 16px; }

/* ========== Memory Module ========== */
.memory-list { display: flex; flex-direction: column; gap: 12px; }
.memory-card { padding: 16px; }
.memory-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.memory-mood { font-size: 1.2rem; }
.memory-title { font-weight: 500; font-size: 0.9rem; flex: 1; }
.memory-date { font-size: 0.7rem; color: var(--text-muted); }
.memory-content {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ========== Diary Module ========== */
.diary-list { display: flex; flex-direction: column; gap: 12px; }
.diary-entry { padding: 16px; }
.diary-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.diary-mood { font-size: 1.2rem; }
.diary-date { font-size: 0.72rem; color: var(--text-muted); }
.diary-content {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* ========== Moments Module ========== */
.moment-card { padding: 16px; }
.moment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.moment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.moment-meta { flex: 1; }
.moment-author { font-size: 0.85rem; font-weight: 600; }
.moment-time { font-size: 0.68rem; color: var(--text-muted); }
.moment-body {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 12px;
}
.moment-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.moment-action-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.2s;
}
.moment-action-btn.liked { color: #e74c3c; }
.moment-comments {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.moment-comment {
  font-size: 0.8rem;
  padding: 4px 0;
  line-height: 1.5;
}
.comment-user {
  font-weight: 600;
  color: var(--accent-dark);
  margin-right: 6px;
}
.comment-text { color: var(--text-primary); }
.moment-comment-input {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.moment-comment-input .form-input { margin-top: 0; flex: 1; }

.claude-moment-comment { margin-top: 10px; }

.moments-compose textarea { margin-top: 0; }

/* ========== Piggy Bank Module ========== */
.piggy-goal-card {
  text-align: center;
  padding: 24px 18px;
  margin-bottom: 16px;
}
.piggy-goal-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.piggy-amounts { margin-bottom: 14px; }
.piggy-current {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.piggy-divider { color: var(--text-muted); margin: 0 6px; }
.piggy-target {
  font-size: 1rem;
  color: var(--text-secondary);
}
.piggy-progress-bar {
  width: 100%;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.piggy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius: 5px;
  transition: width 0.5s ease;
}
.piggy-pct {
  font-size: 0.78rem;
  color: var(--accent-dark);
  margin-top: 8px;
  font-weight: 500;
}
.piggy-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.transaction-list { display: flex; flex-direction: column; gap: 8px; }
.transaction-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.transaction-icon { font-size: 1.2rem; }
.transaction-info { flex: 1; }
.transaction-note { font-size: 0.82rem; font-weight: 500; }
.transaction-date { font-size: 0.68rem; color: var(--text-muted); }
.transaction-amount {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}
.transaction-amount.deposit { color: #27ae60; }
.transaction-amount.withdraw { color: #e74c3c; }

/* ========== Health Module ========== */
.health-card { padding: 16px; }
.health-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.health-icon { font-size: 1.2rem; }
.health-label { font-size: 0.85rem; font-weight: 500; flex: 1; }
.health-value { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
.health-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.health-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.health-btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.health-history { display: flex; flex-direction: column; gap: 6px; }
.health-history-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.78rem;
}

/* ========== Reading Module ========== */
.book-list { display: flex; flex-direction: column; gap: 12px; }
.book-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.book-card:active { transform: scale(0.98); }
.book-cover {
  font-size: 2rem;
  width: 50px;
  height: 64px;
  background: var(--bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-info { flex: 1; min-width: 0; }
.book-title { font-size: 0.9rem; font-weight: 600; }
.book-author { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.book-progress-bar {
  width: 100%;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.book-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.book-progress-text { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
.book-arrow { color: var(--text-muted); }
.book-arrow svg { width: 16px; height: 16px; }

/* Chapter list */
.chapter-list { display: flex; flex-direction: column; gap: 8px; }
.chapter-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.chapter-card:active { transform: scale(0.98); }
.chapter-status {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.chapter-status.read {
  background: var(--accent);
  color: white;
}
.chapter-title { flex: 1; font-size: 0.85rem; }
.chapter-arrow { color: var(--text-muted); }
.chapter-arrow svg { width: 14px; height: 14px; }

/* Reading view */
.reading-content { padding: 20px; margin-bottom: 8px; }
.reading-body {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-primary);
}

/* ========== Crosstalk Module (Redesign) ========== */
.ct-page {
  padding-top: 4px;
  padding-bottom: 20px;
}

.ct-top-header {
  display: flex;
  align-items: center;
  padding: 12px 0 0;
}

.ct-back {
  position: absolute;
  left: 20px;
  top: 16px;
}

.ct-icon {
  text-align: center;
  color: var(--accent);
  margin-top: 8px;
}

.ct-title {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 6px 0 20px;
}

.ct-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}

.ct-btn-library {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border-radius: 24px;
  font-size: 0.82rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.ct-btn-library:active { transform: scale(0.97); }

.ct-btn-exchange {
  padding: 12px 32px;
  background: var(--card);            /* 白底，对齐刷新按钮 */
  color: var(--text-primary);
  border: 1px solid var(--border);    /* 弱描边 */
  border-radius: 24px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow);          /* 加和刷新按钮一致的轻阴影 */
}
.ct-btn-exchange:active { transform: scale(0.97); }

.ct-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.ct-refresh:active { transform: rotate(180deg); }

.ct-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ct-filter-bar::-webkit-scrollbar { display: none; }

.ct-filter-label {
  font-size: 0.88rem;          /* ×1.3 放大 */
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ct-filter-scroll {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ct-filter-tag {
  padding: 6px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.ct-filter-tag:active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.ct-user-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ct-user-name-sm {
  font-size: 0.98rem;          /* ×1.3 放大 */
  color: var(--text-secondary);
  font-weight: 500;
}

.ct-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ct-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #DDD;
}

.ct-dot-active {
  background: var(--accent);
  width: 8px;
  height: 8px;
}

.ct-user-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ct-user-left,
.ct-user-right {
  flex: 1;
  text-align: center;
}

.ct-user-label {
  font-size: 1.07rem;          /* ×1.3 放大 */
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-primary);
}

.ct-play-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ct-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.ct-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}

.ct-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.ct-card-empty-text {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ct-card-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  position: relative;
  overflow: hidden;
}

.ct-card-album-label {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.ct-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.ct-card-artist {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 10px;
}

.ct-card-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  transition: all 0.2s;
  margin-bottom: 8px;
}
.ct-card-open:active {
  background: var(--accent-light);
  border-color: var(--accent);
}

.ct-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.ct-tag {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.65rem;
  color: var(--accent-dark);
}

.ct-bottom-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ct-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 20px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.ct-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

.ct-stat-heart {
  color: #E07A5F;
  font-size: 0.9rem;
}

.ct-stat svg {
  flex-shrink: 0;
}

.ct-compose-overlay {
  margin-top: 12px;
}

/* ========== Reflection Module ========== */
.reflection-list { display: flex; flex-direction: column; gap: 12px; }

/* ================================================================
   PHASE 3 STYLES —— API 集成、设置页、阅读批注、Crosstalk 增强
   ================================================================ */

/* ---------- Settings 入口（Home 右上角齿轮） ---------- */
.home-settings-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  z-index: 10;
  transition: all 0.2s;
}
.home-settings-btn:active { transform: rotate(30deg) scale(0.95); }

/* ---------- Settings 页 ---------- */
.settings-mode-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.settings-radio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg);
}
.settings-radio.active {
  border-color: var(--accent);
  background: var(--accent-light);
}
.settings-radio input[type="radio"] {
  display: none;
}
.settings-radio-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.settings-radio-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.settings-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.6;
}
.settings-hint a {
  color: var(--accent-dark);
  text-decoration: underline;
}
.settings-hint code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--accent-dark);
}
.settings-storage-row {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---------- 阅读批注：选中文字工具栏 ---------- */
.reading-toolbar {
  position: absolute;
  z-index: 9999;
  display: flex;
  animation: tb-pop 0.18s ease;
}
@keyframes tb-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reading-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #2C2C2C;
  color: white;
  border-radius: 22px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.reading-toolbar-btn .rt-spark {
  color: #F0D5C0;
  font-size: 0.9rem;
}

/* ---------- 阅读批注：ALDEN 浮卡（参考图1） ---------- */
.alden-card {
  position: fixed;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 380px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 18px 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  z-index: 10000;
  animation: card-pop 0.22s ease;
}
@keyframes card-pop {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.alden-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.alden-card-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #5B92E5;
  letter-spacing: 0.18em;
}
.alden-card-close {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.alden-card-close:hover { background: var(--bg); }
.alden-card-body {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow-y: auto;
}

/* ================================================================
   PHASE 3 V2 —— 句号入口、Calendar 头部加号、Crosstalk 详情态
   ================================================================ */

/* ---------- Home 名字末尾的小圆点 = Settings 入口 ---------- */
.hp-name-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: 0.18em;
  padding: 0;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.85;
}
.hp-name-dot:hover { opacity: 1; transform: scale(1.25); }
.hp-name-dot:active { transform: scale(0.9); }

/* 旧齿轮按钮样式废弃（保留类名以防其他地方引用） */
.home-settings-btn { display: none !important; }

/* ---------- Calendar 头部加号 ---------- */
.page-header-add-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  font-size: 1.4rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.page-header-add-btn:active { transform: translateY(-50%) scale(0.92); }

/* ================================================================
   Crosstalk 默认态：心形/爪印图标 & 彩色标签
   ================================================================ */
.ct-icon-heart {
  color: #2C2C2C;          /* 黑色实心心 */
  display: inline-flex;
  align-items: center;
}
.ct-icon-paw {
  color: #5B7DB8;          /* 蓝色爪印 */
  display: inline-flex;
  align-items: center;
}

/* 让用户行的心形/爪印居中对齐文字 */
.ct-user-left, .ct-user-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ct-user-indicator .ct-user-name-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 卡片彩色标签：内联颜色由 JS 注入，这里只控制 padding/字号 */
.ct-card-tags .ct-tag {
  padding: 3px 10px;
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
  font-size: 0.65rem;
  background: transparent;
}

/* ================================================================
   Crosstalk 详情态
   ================================================================ */
.ct-detail-page {
  position: relative;
  min-height: 100dvh;
  padding-top: 70px;        /* 留出空间给小卡 */
}

/* 返回按钮 */
.ct-detail-back {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--text-primary);
  cursor: pointer;
  z-index: 100;
}
.ct-detail-back svg { width: 16px; height: 16px; }
.ct-detail-back:active { transform: scale(0.92); }

/* —— 小卡（左上） —— */
.ct-minicard {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  background: var(--card);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.15s;
}
.ct-minicard:active { transform: scale(0.97); }
.ct-minicard-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  margin-bottom: 8px;
}
.ct-minicard-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-minicard-artist {
  font-size: 0.62rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-minicard .ct-card-open {
  font-size: 0.62rem;
  padding: 4px 8px;
  margin-bottom: 0;
}

/* —— 大卡（主区域） —— */
.ct-bigcard {
  margin-left: 124px;        /* 给小卡腾位置 */
  background: transparent;
}

/* 大封面：背景渐变 + 专辑标签 + 艺人名水印 */
.ct-bigcard-art {
  width: 100%;
  aspect-ratio: 1.08 / 1;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.ct-bigcard-album-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.55);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6rem;
  color: var(--text-secondary);
  backdrop-filter: blur(4px);
}
.ct-bigcard-artist-overlay {
  position: absolute;
  bottom: 12px;
  left: 14px;
  color: rgba(255,255,255,0.92);
  font-size: 0.78rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ct-bigcard-title-overlay {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 600;
  margin-left: 4px;
}

/* 大卡正文 */
.ct-bigcard-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.ct-bigcard-artist {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 10px;
}

/* 大卡彩色标签 */
.ct-bigcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.ct-bigcard-tag {
  padding: 4px 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;          /* 直角更接近原图 */
  font-size: 0.72rem;
  background: transparent;
}

/* note 描述框 */
.ct-bigcard-note-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

/* 编辑按钮 */
.ct-bigcard-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  cursor: pointer;
  margin: 8px 0 18px;
}
.ct-bigcard-edit-btn:active { transform: scale(0.97); }

/* 评论区 */
.ct-comments-header {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 16px 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ct-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.ct-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ct-comment-row.me { justify-content: flex-end; }
.ct-comment-row.other { justify-content: flex-start; }
.ct-comment-avatar {
  width: 26px;
  height: 26px;
  background: var(--bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-comment-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  word-break: break-word;
}
.ct-comment-bubble.other {
  background: #E8E1D8;        /* 米色：对方 */
  color: var(--text-primary);
}
.ct-comment-bubble.me {
  background: var(--accent-light);  /* 暖橘色：我自己 */
  color: var(--text-primary);
}

/* 留言输入框 */
.ct-comment-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ct-comment-input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  font-size: 0.82rem;
}
.ct-comment-input:focus { border-color: var(--accent); }
.ct-comment-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ct-comment-send:active { transform: scale(0.92); }

/* ================================================================
   LETTERS —— 时间胶囊式情书
   ================================================================ */

/* ---------- 列表页 ---------- */
.lt-page {
  padding-bottom: 60px;
}
.lt-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.8;
}
.lt-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0;
}
.lt-cover {
  cursor: pointer;
  transition: transform 0.2s;
}
.lt-cover:active { transform: scale(0.985); }

/* ---------- 卷轴（未拆封）---------- */
.lt-scroll {
  position: relative;
  background: linear-gradient(180deg,
    #F5E9D3 0%,
    #EDDDBE 50%,
    #F5E9D3 100%);
  border-radius: 6px;
  padding: 0;
  box-shadow: 0 6px 18px rgba(160, 130, 90, 0.18),
              inset 0 0 0 1px rgba(180, 145, 100, 0.15);
  overflow: hidden;
}
/* 卷轴上下两端的"杆"-暗色硬边 */
.lt-scroll-rod {
  height: 14px;
  background: linear-gradient(180deg, #8B6A47, #5A4530 50%, #8B6A47);
  position: relative;
}
.lt-scroll-rod::before,
.lt-scroll-rod::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: #5A4530;
  border-radius: 50%;
  border: 2px solid #8B6A47;
  transform: translateY(-50%);
}
.lt-scroll-rod::before { left: -6px; }
.lt-scroll-rod::after  { right: -6px; }

/* 中间内容区 */
.lt-scroll-body {
  position: relative;
  padding: 28px 24px 28px 90px;     /* 左侧留给羽毛 */
  min-height: 110px;
}
.lt-scroll-feather {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  width: 50px;
  height: auto;
  color: var(--accent);
}
.lt-feather-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(160, 110, 60, 0.2));
}
.lt-scroll-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  color: #6B4F32;
  margin-bottom: 6px;
  line-height: 1.3;
}
.lt-scroll-meta {
  font-size: 0.7rem;
  color: #8B6A47;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.lt-scroll-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: #8B6A47;
  background: rgba(255,255,255,0.4);
  padding: 4px 9px;
  border-radius: 10px;
}

/* ---------- 信封（已拆封）---------- */
.lt-envelope {
  position: relative;
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow-soft, 0 4px 14px rgba(0,0,0,0.06));
  overflow: hidden;
  border: 1px solid var(--border);
}
/* 信封顶部封口三角：纯白底，淡淡的封口线条提示 */
.lt-envelope-flap {
  height: 18px;
  background: var(--card);
  position: relative;
  border-bottom: 1px solid var(--border);
}
.lt-envelope-flap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 60%;
  height: 100%;
  background: transparent;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: 0.5;
}
.lt-envelope-body {
  position: relative;
  padding: 22px 22px 18px;
  min-height: 90px;
}
.lt-envelope-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.25;
  padding-right: 36px;          /* 给中间心留位置 */
}
.lt-envelope-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.lt-envelope-heart {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-envelope-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 8px;
}
.lt-envelope-date {
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ================================================================
   详情页 —— 严格按参考图布局
   ================================================================ */
.lt-detail-page {
  background: var(--bg);
  min-height: 100dvh;
  padding: 0 16px 80px;
  position: relative;
}

/* 信纸框：比主色调略浅的米色，圆角，无黑色描边 */
.lt-paper {
  background: #FBF7EF;
  border-radius: 14px;
  padding: 36px 28px 32px;
  margin-top: 16px;
  box-shadow: 0 2px 14px rgba(160, 130, 90, 0.06);
}
.lt-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 8px;
  margin: 0 -28px;
  padding-left: 28px;
  padding-right: 28px;
}
.lt-detail-header .back-btn {
  background: var(--card);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.lt-detail-header-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
  margin: 0 8px;
}
.lt-detail-more svg circle { fill: var(--text-primary); }

/* 顶部大标题区 */
.lt-detail-cover {
  text-align: center;
  margin: 32px 0 18px;
}
.lt-detail-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;                 /* 缩小：1.85 → 1.4 */
  color: var(--accent);
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-bottom: 14px;
}
.lt-detail-subtitle {
  font-size: 0.62rem;                /* 略缩 */
  color: var(--text-secondary);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.lt-detail-divider-short {
  width: 1.2px;
  height: 36px;
  background: var(--text-muted);
  margin: 0 auto;
  opacity: 0.5;
}

/* 词条 */
.lt-entries {
  margin: 28px 0 36px;
}
.lt-entry { margin: 0; }
.lt-entry-original {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;                /* 缩小：1.4 → 1.15 */
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.3;
}
.lt-entry-translation {
  font-family: var(--font-body);     /* 用 body 字体，避免黑体感 */
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 400;                  /* 500 → 400 普通字重 */
  margin-bottom: 12px;
}
.lt-entry-story {
  font-family: var(--font-body);     /* 改 body 字体：消除中文 serif 颗粒感 */
  font-style: italic;                /* 英文部分会斜，中文保持正体 */
  font-size: 0.85rem;
  color: var(--text-muted);          /* 更浅一些 */
  opacity: 0.85;
  line-height: 1.8;
  letter-spacing: 0.01em;
}
.lt-entry-sep {
  width: 36px;
  height: 1px;
  background: var(--text-muted);
  opacity: 0.4;
  margin: 32px 0;
}

/* 末尾签名段 */
.lt-detail-divider-long {
  width: 100%;
  height: 1px;
  background: var(--text-primary);
  opacity: 0.7;
  margin: 36px 0 28px;
}
.lt-detail-closing {
  text-align: center;
  margin-bottom: 30px;
}
.lt-closing-quote {
  font-size: 1.05rem;
  color: var(--text-secondary);        /* 中文：比第三行深一点 */
  opacity: 0.85;
  margin-bottom: 10px;
}
.lt-closing-original {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-muted);            /* 英文：和故事段第三行同色（最浅） */
  opacity: 0.85;
  margin-bottom: 24px;
}
.lt-closing-from {
  font-size: 0.78rem;
  color: var(--text-primary);
  letter-spacing: 0.35em;
  margin-bottom: 16px;
}
.lt-closing-heart {
  color: var(--accent);
  opacity: 0.45;
  display: flex;
  justify-content: center;
}

/* ================================================================
   封存提示页（未到日期点开时显示）
   ================================================================ */
.lt-sealed-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 40px 24px;
  margin: 30px 8px;
  box-shadow: var(--shadow);
  text-align: center;
}
.lt-sealed-feather {
  width: 60px;
  margin: 0 auto 24px;
  color: var(--accent);
}
.lt-sealed-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.lt-sealed-date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 14px;
}
.lt-sealed-countdown {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 20px;
}
.lt-sealed-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ================================================================
   写信表单（弹出在列表上方）
   ================================================================ */
.lt-compose-overlay {
  margin-top: 12px;
}
.lt-entry-input-row {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 0;
}
.lt-entry-input-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.lt-entry-remove {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.lt-entry-remove:hover { color: #c0392b; }


/* ================================================================
   MOOD 模块
   ================================================================ */
.mood-page { padding-bottom: 60px; }

.mood-today-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin: 16px 0;
  text-align: center;
  box-shadow: var(--shadow);
}
.mood-today-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}
.mood-today-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mood-today-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--text-primary);
}
.mood-today-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 10px;
  font-style: italic;
  line-height: 1.6;
}
.mood-today-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 0.1em;
}
.mood-today-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 20px;
}
.mood-cell {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 12px 6px 8px;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}
.mood-cell:active { transform: scale(0.95); }
.mood-cell.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.mood-cell svg { display: block; margin: 0 auto; }
.mood-cell-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.mood-note-section { margin: 16px 0; }

/* 热力图 */
.mood-heatmap-section { margin: 24px 0; }
.mood-hm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--card);
  border-radius: var(--radius-sm);
}
.mood-hm-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
  letter-spacing: 0.05em;
}
.mood-hm-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.15s;
}
.mood-hm-cell.empty {
  border: none;
  cursor: default;
}
.mood-hm-cell.today {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.mood-hm-cell.filled {
  color: rgba(0,0,0,0.7);
  font-weight: 600;
}
.mood-hm-cell:not(.empty):active { transform: scale(0.92); }

/* 历史 */
.mood-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mood-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: var(--radius-sm);
}
.mood-history-face { flex-shrink: 0; }
.mood-history-body { flex: 1; min-width: 0; }
.mood-history-line1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mood-history-mood {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}
.mood-history-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.mood-history-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.5;
}

/* ================================================================
   HER CYCLE 模块
   ================================================================ */
.cycle-page { padding-bottom: 60px; }

.cycle-overview-card {
  background: linear-gradient(135deg, #FFF0F3, #FCE5EB);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin: 16px 0;
  text-align: center;
  box-shadow: var(--shadow);
}
.cycle-overview-day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: #B85075;
  font-weight: 500;
}
.cycle-overview-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.cycle-overview-next {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 14px;
}
.cycle-overview-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 月历 */
.cyc-calendar-wrap {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
.cyc-calendar-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 12px;
}
.cyc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cyc-label {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 4px 0;
  letter-spacing: 0.05em;
}
.cyc-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  background: transparent;
  transition: transform 0.15s;
}
.cyc-cell.empty { cursor: default; }
.cyc-cell:not(.empty):active { transform: scale(0.92); }
.cyc-cell.period {
  background: #F2A8C2;
  color: white;
  font-weight: 600;
}
.cyc-cell.predicted {
  background: transparent;
  border: 1.5px dashed #E8A0BF;
  color: #B85075;
}
.cyc-cell.today {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cyc-cell .cyc-dot {
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cyc-cell.period .cyc-dot { background: white; }
.cyc-num { line-height: 1; }

.cyc-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.cyc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cyc-dot-legend {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.cyc-dot-legend.period { background: #F2A8C2; }
.cyc-dot-legend.predicted { border: 1.5px dashed #E8A0BF; }
.cyc-dot-legend.logged { background: var(--accent); border-radius: 50%; width: 6px; height: 6px; }

/* 快速操作 */
.cycle-quick-actions {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}
.cycle-quick-actions button { flex: 1; }

/* 今日日志显示 */
.cycle-log-display {
  display: flex;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--text-primary);
  flex-wrap: wrap;
}
.cycle-log-pain, .cycle-log-mood { color: var(--text-secondary); }
.cycle-log-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 8px;
  line-height: 1.6;
}

/* 历史 */
.cyc-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cyc-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.cyc-history-date { color: var(--text-primary); flex: 1; }
.cyc-history-len { color: var(--text-muted); }
.cyc-history-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 4px;
}

/* 日志弹窗 */
.cycle-log-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cycle-log-modal-inner {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.cycle-log-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
}
.cycle-log-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
}
.cycle-pain-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.cycle-pain-btn {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.cycle-pain-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* 伴侣视图 */
.cycle-partner-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cycle-partner-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.cycle-partner-day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 14px;
}
.cycle-partner-status {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.8;
}
.cycle-partner-note {
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 0.82rem;
}
.cycle-partner-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 12px 0;
}
.cycle-partner-next {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 18px;
}
.cycle-partner-reminder {
  background: #FFF0F3;
  color: #B85075;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ================================================================
   VOICE CALL 模块
   ================================================================ */
.vc-page { padding-bottom: 60px; }

.vc-status-bar {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.vc-status-user strong { color: var(--text-primary); }
.vc-status-unread {
  color: var(--accent-dark);
  font-weight: 500;
}

.vc-record-area {
  text-align: center;
  padding: 28px 20px 22px;
}
.vc-record-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.vc-timer {
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.vc-record-btn {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #E55D5D, #C84444);
  color: white;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(200, 68, 68, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.vc-record-btn:active { transform: scale(0.92); }
.vc-record-btn.recording {
  background: linear-gradient(135deg, #FF3030, #C00000);
  animation: vc-pulse 1.2s infinite;
}
@keyframes vc-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(255, 30, 30, 0.5); transform: scale(1); }
  50%      { box-shadow: 0 6px 30px rgba(255, 30, 30, 0.7); transform: scale(1.04); }
}
.vc-record-tip {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: 0.1em;
}

.vc-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 30px 20px;
  font-size: 0.85rem;
}

.vc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vc-item {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 12px 38px 12px 14px;
  box-shadow: var(--shadow);
}
.vc-item.unread { border-left: 3px solid var(--accent); }
.vc-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  margin-bottom: 8px;
}
.vc-item-from {
  font-weight: 600;
  color: var(--text-primary);
}
.vc-item-time {
  color: var(--text-muted);
  font-size: 0.72rem;
}
.vc-item-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.vc-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 6px 14px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
}
.vc-play-btn:active { transform: scale(0.95); }
.vc-play-dur {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}
.vc-transcript {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
}
.vc-transcribe-btn {
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 0.72rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
}
.vc-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
}
.vc-delete-btn:hover { color: #c0392b; }


/* ================================================================
   STATS —— 之最榜单
   ================================================================ */
.stats-page { padding-bottom: 60px; }

.stats-intro {
  text-align: center;
  margin: 14px 0 22px;
}
.stats-intro-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 4px;
}
.stats-intro-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.15em;
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stats-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
}
.stats-item-body { flex: 1; min-width: 0; }
.stats-item-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.stats-item-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.3;
}
.stats-item-detail {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}
.stats-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.8;
}

/* ================================================================
   WEEKLY —— 关系周报
   ================================================================ */
.wk-page { padding-bottom: 60px; }

.wk-this-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
.wk-this-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 4px;
}
.wk-this-range {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.wk-this-content {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.9;
  white-space: pre-wrap;
  font-style: italic;
  letter-spacing: 0.01em;
}
.wk-this-empty {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 0;
  font-style: italic;
}
.wk-this-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 14px;
  letter-spacing: 0.05em;
}

.wk-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wk-history-item {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.wk-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wk-history-range {
  font-size: 0.82rem;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.wk-history-arrow {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.wk-history-content {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.8;
  font-style: italic;
  white-space: pre-wrap;
}