/* ============================================================
   Trace 页（本周回顾 / 长期可视化）
   data-page="trace" 是程序标识，不动；展示文案统一叫「回顾」。
   ============================================================ */

.trace-page {
  display: flex;
  flex-direction: column;
}
.trace-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 18px calc(var(--nav-h) + var(--safe-bottom) + 28px);
}
.trace-header {
  margin-bottom: 16px;
}
.trace-kicker {
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}
.trace-title {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.28;
}
.trace-body {
  margin: 8px 0 18px;
}

.trace-cta-row {
  margin-top: 6px;
}
.trace-cta-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--material-field) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 36%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .12s var(--ease-standard), background .18s var(--ease-standard);
}
.trace-cta-card:active {
  transform: scale(.985);
  background: color-mix(in srgb, var(--accent) 8%, var(--material-field));
}
.trace-cta-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.trace-cta-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trace-cta-text {
  flex: 1;
  min-width: 0;
}
.trace-cta-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.trace-cta-hint {
  margin-top: 2px;
  color: var(--text3);
  font-size: var(--font-caption-2);
  line-height: 1.4;
}
.trace-cta-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============================================================
   Insights body sections (shared by trace page renderer)
   ============================================================ */

.insights-section {
  margin: 0 0 22px;
}
.insights-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.insights-section-hint {
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.insights-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.insights-metric {
  padding: 14px 16px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--material-field) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 36%, transparent);
}
.insights-metric-label {
  color: var(--text3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.insights-metric-value {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.insights-metric-hint {
  margin: 4px 0 0;
  color: var(--text3);
  font-size: 12px;
}

.insights-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--separator-soft);
}
.insights-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.insights-bar-fill {
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  position: relative;
  min-height: 4px;
  transition: height .42s var(--ease-slide, cubic-bezier(.32,.72,0,1));
}
.insights-bar-fill[data-state="high"] { background: color-mix(in srgb, #16a34a 32%, transparent); }
.insights-bar-fill[data-state="normal"] { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.insights-bar-fill[data-state="low"] { background: color-mix(in srgb, #f59e0b 32%, transparent); }
.insights-bar-fill[data-state="stuck"] { background: color-mix(in srgb, #dc2626 30%, transparent); }
.insights-bar-label {
  color: var(--text3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

.insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-list-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--separator-soft) 64%, transparent);
  font-size: var(--font-footnote);
  color: var(--text);
}
.insights-list-row:first-child { border-top: 0; }
.insights-list-row span:last-child {
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-caption);
}

.insights-empty {
  text-align: center;
  padding: 36px 20px 40px;
  color: var(--text3);
  line-height: 1.6;
  font-size: 13px;
}
.insights-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.insights-empty p {
  margin: 0;
  color: var(--text2);
}

/* ── Heatmap (single-tone, 5-step accent gradient) ─────────────── */
.heatmap-summary {
  margin: 6px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.heatmap-summary-line {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.55;
}
.heatmap-summary-line b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.heatmap-summary-streak {
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Horizontal week rows. Each row = one week, Mon → Sun. Calendar-native for
   Chinese users; the GitHub column grid was confusing nobody asked for it. */
.weekrows {
  padding: 4px 0 2px;
}
.weekrows-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.weekrows-head-label {
  width: 78px;
  flex-shrink: 0;
}
.weekrows-head-days {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  text-align: center;
  color: var(--text3);
  font-size: 11px;
  letter-spacing: .04em;
}
.weekrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  position: relative;
}
.weekrow.is-current::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.weekrow-label {
  width: 78px;
  flex-shrink: 0;
  color: var(--text3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}
.weekrow.is-current .weekrow-label {
  color: var(--accent);
  font-weight: 700;
}
.weekrow-days {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

/* Cells: bigger and more breathing room. */
.heatmap-cell {
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--material-field) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 22%, transparent);
  transition: transform .14s var(--ease-standard), filter .18s;
  cursor: default;
}
.heatmap-cell[data-payload]:active {
  transform: scale(1.08);
  filter: brightness(1.08);
}
.heatmap-cell[data-future="1"] {
  background: transparent;
  border-color: color-mix(in srgb, var(--separator) 14%, transparent);
  opacity: .3;
}
/* Softer 5-step gradient — drops the harsh accent saturation on low levels
   so a quiet week doesn't feel like a graded report card. */
.heatmap-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: transparent; }
.heatmap-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 38%, transparent); border-color: transparent; }
.heatmap-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 60%, var(--bg)); border-color: transparent; }
.heatmap-cell[data-level="4"] {
  background: color-mix(in srgb, var(--accent) 88%, var(--bg));
  border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.heatmap-soft-hint {
  margin: 12px 0 0;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.55;
}

.heatmap-tooltip {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--material-field) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 30%, transparent);
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  box-shadow: 0 4px 18px -10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.heatmap-tooltip[hidden] { display: none; }
.heatmap-tooltip-date {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--text);
}
.heatmap-tooltip-story {
  color: var(--text2);
  font-size: 13px;
}

/* ── Completion ring ───────────────────────────────────────────── */
.trace-completion {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--material-field) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 36%, transparent);
}
.trace-completion-ring {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
}
.trace-completion-ring .ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--separator) 60%, transparent);
  stroke-width: 7;
}
.trace-completion-ring .ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dasharray .55s var(--ease-slide, cubic-bezier(.32,.72,0,1));
}
.trace-completion-ring .ring-text {
  fill: var(--text);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}
.trace-completion-text {
  flex: 1;
  min-width: 0;
}
.trace-completion-label {
  color: var(--text3);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}
.trace-completion-num {
  color: var(--text);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.trace-completion-total {
  color: var(--text3);
  font-size: 18px;
  font-weight: 500;
  margin-left: 4px;
}
.trace-completion-onschedule {
  margin-top: 8px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}
.trace-completion-onschedule b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.trace-completion-delta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.trace-completion-delta[data-dir="up"] { color: #16a34a; }
.trace-completion-delta[data-dir="up"]::before { content: '↑ '; }
.trace-completion-delta[data-dir="down"] { color: #dc2626; }
.trace-completion-delta[data-dir="down"]::before { content: '↓ '; }
.trace-completion-delta[data-dir="flat"] { color: var(--text3); }
.trace-completion-delta[data-dir="flat"]::before { content: '— '; }

.trace-diary-card {
  /* full-width single metric, slightly less prominent than completion ring */
  padding: 14px 16px;
}

/* ── 24-hour activity strip ────────────────────────────────────── */
.hourmap {
  padding: 12px 12px 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--material-field) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 36%, transparent);
}
.hourmap-row {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.hourmap-cell {
  height: 22px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--separator-soft) 65%, transparent);
  transition: background .18s, transform .12s;
}
.hourmap-cell.is-tick {
  position: relative;
}
.hourmap-cell.is-tick::after {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 1px;
  height: 3px;
  background: color-mix(in srgb, var(--separator) 60%, transparent);
}
.hourmap-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.hourmap-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.hourmap-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 72%, var(--bg)); }
.hourmap-cell[data-level="4"] { background: color-mix(in srgb, var(--accent) 92%, var(--bg)); }

.hourmap-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 0 6px;
  color: var(--text3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.hourmap-caption {
  margin: 4px 0 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}
.hourmap-caption b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Section divider for "本周 / 长期" rhythm ─────────────────── */
.trace-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 16px;
  color: var(--text3);
}
.trace-divider::before,
.trace-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--separator) 36%, transparent);
}
.trace-divider span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}

/* ── Energy bars empty fallback ────────────────────────────────── */
.insights-energy-empty {
  padding: 16px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--material-field) 50%, transparent);
  border: 1px dashed color-mix(in srgb, var(--separator) 50%, transparent);
  color: var(--text3);
  font-size: var(--font-footnote);
  line-height: 1.55;
}

/* ── Trace onboard / fully empty card ──────────────────────────── */
.trace-onboard {
  margin-top: 12px;
}
.trace-onboard-cta {
  margin-top: 14px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 92%, var(--text));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 0;
}
.trace-onboard-cta:active { opacity: .88; transform: scale(.97); }

/* ============================================================
   Wrapped / 月报卡
   ============================================================ */
.wrapped-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 14, 20, .58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wrapped-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.wrapped-sheet {
  width: min(420px, 100%);
  max-height: 92dvh;
  background: var(--surface);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10,12,20,.32);
  transform: scale(.96);
  transition: transform var(--duration-slide, .28s) var(--ease-slide, cubic-bezier(.32,.72,0,1));
}
.wrapped-overlay.show .wrapped-sheet { transform: scale(1); }

.wrapped-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}
.wrapped-kicker {
  color: var(--text2);
  font-size: var(--font-caption-2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wrapped-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
}
.wrapped-body canvas {
  max-width: 100%;
  max-height: 70dvh;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  object-fit: contain;
  background: #0b1020;
}
.wrapped-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(var(--safe-bottom) + 14px);
  border-top: 1px solid var(--separator-soft);
}
.wrapped-save {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 92%, var(--text));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 0;
}
.wrapped-save:active { opacity: .9; transform: scale(.97); }
.wrapped-hint {
  color: var(--text3);
  font-size: var(--font-caption-2);
}

/* ============================================================
   邀请卡
   ============================================================ */
.invite-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 270;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 14, 20, .56);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.invite-card-overlay.show { opacity: 1; pointer-events: auto; }
.invite-card-sheet {
  width: min(420px, 100%);
  max-height: 92dvh;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(10,12,20,.32);
  transform: scale(.96);
  transition: transform .28s var(--ease-slide, cubic-bezier(.32,.72,0,1));
}
.invite-card-overlay.show .invite-card-sheet { transform: scale(1); }
.invite-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}
.invite-card-kicker {
  color: var(--text2);
  font-size: var(--font-caption-2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.invite-card-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 8px 12px;
}
.invite-card-body canvas {
  max-width: 100%;
  max-height: 70dvh;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  object-fit: contain;
}
.invite-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px calc(var(--safe-bottom) + 14px);
  border-top: 1px solid var(--separator-soft);
}
.invite-card-save,
.invite-card-copy {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
}
.invite-card-save {
  background: color-mix(in srgb, var(--accent) 92%, var(--text));
  color: #fff;
}
.invite-card-copy {
  background: var(--material-field);
  color: var(--text);
}
.invite-card-save:active,
.invite-card-copy:active { opacity: .85; transform: scale(.97); }

/* ============================================================
   Welcome Demo（首次完成 onboarding 后弹出）
   ============================================================ */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 14, 20, .56);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.welcome-overlay.show { opacity: 1; pointer-events: auto; }
.welcome-sheet {
  width: min(420px, 100%);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(10,12,20,.36);
  transform: translateY(16px) scale(.96);
  opacity: 0;
  transition: transform .42s var(--ease-slide, cubic-bezier(.32,.72,0,1)), opacity .3s ease;
}
.welcome-overlay.show .welcome-sheet { transform: translateY(0) scale(1); opacity: 1; }

.welcome-art {
  position: relative;
  height: 200px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 60%, var(--material-base) 40%);
  border-bottom: 1px solid var(--separator-soft);
  padding: 16px 20px;
  overflow: hidden;
}
.welcome-day-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 100%;
}
.welcome-day-col {
  position: relative;
  background: color-mix(in srgb, var(--material-base) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--separator) 40%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.welcome-day-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  z-index: 2;
}
.welcome-block {
  position: absolute;
  left: 6px;
  right: 6px;
  padding: 2px 6px;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
  border-radius: 5px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.welcome-block-me {
  background: color-mix(in srgb, #fb923c 22%, transparent);
  border-left: 2px solid #fb923c;
  color: color-mix(in srgb, #b45309 80%, var(--text));
}
.welcome-block-ta {
  background: color-mix(in srgb, #60a5fa 22%, transparent);
  border-left: 2px solid #60a5fa;
  color: color-mix(in srgb, #1d4ed8 80%, var(--text));
}
.welcome-day-shared {
  position: absolute;
  left: 20px;
  right: 20px;
  background: color-mix(in srgb, #34d399 30%, transparent);
  border: 1px dashed #34d399;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #065f46;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
  z-index: 1;
}

.welcome-content {
  padding: 22px 22px 22px;
  flex: 1;
  overflow-y: auto;
}
.welcome-kicker {
  color: var(--text3);
  font-size: var(--font-caption-2);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.welcome-title {
  margin: 6px 0 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.32;
}
.welcome-msg {
  margin: 0 0 14px;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.55;
}
.welcome-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.welcome-list li {
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--separator-soft) 70%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.welcome-list li:first-child { border-top: 0; }
.welcome-list b {
  display: inline-block;
  min-width: 72px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .01em;
}
.welcome-cta {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 92%, var(--text));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 0;
}
.welcome-cta:active { opacity: .9; transform: scale(.98); }

/* ============================================================
   心事盒 v2 · 情绪空间
   ============================================================ */

/* ============================================================
   心事盒 v2 · 情绪空间 — Apple HIG layout (v8 → v9)
   Layout 三层结构（避免互相重叠）:
   - .mood-stage   占据顶部到 .mood-dock 之上的区域，纯物理画布
   - .mood-dock    底部固定一块容器，包含 palette + actions
   - .mood-palette horizontal chip strip
   - .mood-actions main + secondary 按钮 + 心事盒入口
   ============================================================ */

.mood-page {
  display: block;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 25%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 75%),
    var(--bg);
}

/* Stage = canvas区。dock 一上、安全区一下都不算。 */
.mood-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* dock 现在只剩 palette = 60 chip + 16 padding ≈ 76px
     再加 dock bottom offset 8 → 84px 距 nav。 */
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 84px);
  overflow: hidden;
}
.mood-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.mood-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding: 24px;
  transition: opacity .55s var(--ease-standard, ease);
}
.mood-empty-hint[data-faded="1"] { opacity: 0; }
.mood-empty-title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.mood-empty-sub {
  margin: 0;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.7;
}

/* Dock = palette + actions 容器 */
.mood-dock {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Horizontal emotion strip ────────────────────────────── */
.mood-palette {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--material-field) 70%, transparent);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 0.5px solid color-mix(in srgb, var(--separator) 26%, transparent);
  box-shadow:
    0 4px 28px -10px rgba(0,0,0,.16),
    inset 0 0.5px 0 0 rgba(255,255,255,.06);
}
.mood-chip {
  position: relative;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform .18s cubic-bezier(.32, 1.42, .56, 1),
    background .22s;
}
.mood-chip:active {
  transform: scale(.88);
  transition-duration: .08s;
}
.mood-chip[data-active="1"] {
  background: color-mix(in srgb, var(--mood-color, var(--accent)) 14%, transparent);
}
.mood-chip-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      color-mix(in srgb, var(--mood-color, var(--accent)) 100%, white 38%),
      var(--mood-color, var(--accent)) 58%,
      color-mix(in srgb, var(--mood-color, var(--accent)) 70%, black 14%) 100%);
  box-shadow:
    inset 0 -1px 2px 0 rgba(0,0,0,.18),
    0 2px 6px -2px color-mix(in srgb, var(--mood-color, var(--accent)) 60%, transparent);
}
.mood-chip[data-active="1"] .mood-chip-dot {
  box-shadow:
    inset 0 -1px 2px 0 rgba(0,0,0,.2),
    0 0 0 2px color-mix(in srgb, var(--mood-color, var(--accent)) 30%, transparent),
    0 4px 12px -2px color-mix(in srgb, var(--mood-color, var(--accent)) 80%, transparent);
}
.mood-chip-label {
  color: var(--text2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1;
}
.mood-chip[data-active="1"] .mood-chip-label {
  color: var(--text);
  font-weight: 600;
}
.mood-chip-count {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--mood-color, var(--accent));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Header tools (trace page only) ─────────────────────────
   trace 页面下，header 默认的 search/cal/settings 隐藏，
   换成 [心事盒] [垃圾桶=就这样] [铅笔=想说点什么]。
*/
.header-right .trace-only { display: none; }
body.trace-page-active .header-right .page-default { display: none; }
body.trace-page-active .header-right .trace-only { display: inline-flex; }
.header-right .trace-only[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
/* 写信按钮在已激活时给个微妙的 accent 提示，但不抢戏 */
.header-right .trace-only-write:not([disabled]) {
  color: var(--accent);
}

/* ── 心事盒 · 写信 sheet（iOS Mail/Notes-style modal sheet）── */
.mood-letter-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mood-letter-sheet[hidden] { display: none; }
.mood-letter-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: mood-fade-in .26s ease;
}
.mood-letter-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  background: var(--bg);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 4px 20px calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  animation: mood-sheet-up .36s var(--ease-slide, cubic-bezier(.32, .72, 0, 1));
  overflow: hidden;
  box-shadow: 0 -8px 40px -12px rgba(0, 0, 0, .22);
}

/* Nav bar — Cancel · Send (no title, no grabber) */
.mood-letter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}
.mood-letter-text-btn {
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  transition: opacity .18s;
  font-family: inherit;
}
.mood-letter-text-btn:active { opacity: .55; }
.mood-letter-send { font-weight: 600; }
.mood-letter-send[disabled] {
  color: color-mix(in srgb, var(--text3) 70%, transparent);
  cursor: not-allowed;
  opacity: 1;
}
.mood-letter-send[hidden] { display: none; }

/* Emotion chips — single inline strip, no labels */
.mood-letter-emotions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 14px;
}
.mood-letter-emotions:empty { display: none; }
.mood-letter-emotion-tag {
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mood-color, var(--accent)) 12%, transparent);
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .005em;
  display: inline-flex;
  align-items: center;
}
.mood-letter-emotion-tag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mood-color, var(--accent));
  margin-right: 6px;
}

/* Body — clean borderless textarea */
.mood-letter-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mood-letter-input {
  width: 100%;
  min-height: 180px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.005em;
  font-family: inherit;
  resize: none;
  outline: none;
}
.mood-letter-input::placeholder {
  color: var(--text3);
  opacity: .7;
}

/* Reply — no card chrome, just typography on a thin separator */
.mood-letter-reply {
  margin: 16px 0 4px;
  padding: 14px 0 4px;
  border-top: 0.5px solid color-mix(in srgb, var(--separator) 35%, transparent);
  animation: mood-fade-in .35s ease;
}
.mood-letter-reply-text {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.78;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.mood-letter-reply-text::after {
  content: '|';
  color: var(--accent);
  margin-left: 2px;
  animation: mood-cursor-blink 1s steps(1) infinite;
  display: inline-block;
}
.mood-letter-reply[data-streaming="0"] .mood-letter-reply-text::after { display: none; }

/* Decide footer — destructive (text) | seal (filled) */
.mood-letter-foot-decide {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.mood-letter-destroy,
.mood-letter-seal {
  flex: 1;
  height: 50px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .14s cubic-bezier(.32, 1.42, .56, 1), background .2s, opacity .2s;
  font-family: inherit;
}
.mood-letter-destroy {
  border: 0;
  background: color-mix(in srgb, #ff3b30 12%, var(--material-field) 70%);
  color: #ff3b30;
}
.mood-letter-destroy:active { transform: scale(.96); background: color-mix(in srgb, #ff3b30 18%, var(--material-field) 70%); }
.mood-letter-seal {
  border: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 100%, white 6%),
    var(--accent) 100%);
  color: #fff;
  box-shadow:
    0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent),
    inset 0 0.5px 0 0 rgba(255, 255, 255, .18);
}
.mood-letter-seal:active { transform: scale(.96); }

/* ── 心事盒 · 列表 ──────────────────────────────────────────── */
.mood-vault-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: mood-fade-in .25s ease;
}
.mood-vault-overlay[hidden] { display: none; }
.mood-vault-sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px calc(var(--safe-bottom) + 24px);
  overflow-y: auto;
}
.mood-vault-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  margin-bottom: 12px;
  padding-top: var(--safe-top, 0);
}
.mood-vault-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
}
.mood-back {
  width: 36px;
  height: 36px;
  margin-left: -6px;
}
.mood-back svg { width: 22px; height: 22px; }
.mood-head-spacer { display: block; }
/* ── History heatmap card (vault top) ─────────────────── */
.mood-history-card {
  margin: 4px 0 18px;
  padding: 16px 16px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--material-field) 50%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--separator) 22%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.mood-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mood-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}
.mood-history-hint {
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.mood-history-grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 3px;
  align-items: center;
  height: 32px;
  padding: 0 1px;
}
.mood-history-cell {
  width: var(--cell-size, 5px);
  height: var(--cell-size, 5px);
  background: var(--cell-color, color-mix(in srgb, var(--separator) 22%, transparent));
  border-radius: 50%;
  margin: 0 auto;
  transition: transform .2s, box-shadow .2s;
}
.mood-history-cell.is-empty {
  background: color-mix(in srgb, var(--separator) 18%, transparent);
}
.mood-history-cell.is-today {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--bg) 90%, transparent);
}
.mood-history-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .02em;
}
.mood-history-card.is-empty .mood-history-axis,
.mood-history-card.is-empty .mood-history-hint {
  opacity: .55;
}

.mood-vault-summary {
  margin: 0 0 16px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.55;
}
.mood-vault-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mood-vault-item {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--separator) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--material-field) 60%, transparent);
  cursor: pointer;
  transition: transform .12s, border-color .2s;
}
.mood-vault-item:active { transform: scale(.99); }
.mood-vault-item-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.mood-vault-item-emotions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.mood-vault-item-emotions span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mood-color, var(--accent));
  display: inline-block;
}
.mood-vault-item-preview {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mood-vault-empty {
  margin-top: 32px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text3);
  font-size: 14px;
  line-height: 1.6;
}

/* ── 心事盒 · 信件详情 ─────────────────────────────────────── */
.mood-letter-detail {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: mood-fade-in .25s ease;
}
.mood-letter-detail[hidden] { display: none; }
.mood-letter-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px;
  padding-top: calc(12px + var(--safe-top, 0));
}
.mood-letter-detail-date {
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
}
.mood-letter-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px calc(28px + var(--safe-bottom));
}
.mood-letter-detail-section { margin: 18px 0; }
.mood-letter-detail-label {
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.mood-letter-detail-content,
.mood-letter-detail-reply {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.mood-letter-detail-reply {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
  color: color-mix(in srgb, var(--text) 90%, var(--accent) 10%);
}
.mood-letter-detail-divider {
  height: 1px;
  background: color-mix(in srgb, var(--separator) 28%, transparent);
  margin: 24px 0;
}
.mood-letter-detail-note {
  margin: 32px 0 0;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* ── animations ────────────────────────────────────────────── */
@keyframes mood-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mood-sheet-up {
  from { transform: translateY(20%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes mood-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* Bubble-out for destroy: scale to 0 with a soft fade. Placeholder
   until we choose between black-hole / smoke / burst. */
@keyframes mood-destroy-fade {
  to { transform: scale(0); opacity: 0; }
}
@keyframes mood-seal-fold {
  to { transform: translateY(60vh) scale(.4); opacity: 0; }
}
.mood-letter-card.is-destroying {
  animation: mood-destroy-fade .55s ease forwards;
}
.mood-letter-card.is-sealing {
  animation: mood-seal-fold .65s var(--ease-slide, cubic-bezier(.32,.72,0,1)) forwards;
}