/* 模式切换按钮 */
.btn-mode-toggle {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-mode-toggle:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-tertiary);
  background-color: rgba(0, 0, 0, 0.02);
}

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

/* 主题切换按钮 */
.btn-theme-toggle {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-theme-toggle:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-tertiary);
  background-color: rgba(0, 0, 0, 0.02);
}

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

.theme-text {
  display: block;
  line-height: 1;
  font-size: 12px;
  font-weight: 400;
  transition: opacity var(--transition-normal);
}

/* 主题切换动画 */
.btn-theme-toggle:active .theme-text {
  opacity: 0.6;
}

/* 新建按钮 */
.btn-new {
  width: 32px;
  height: 32px;
  font-size: 24px;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.btn-new:hover {
  color: var(--color-text-primary);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

.empty-hint {
  font-size: var(--font-size-date);
  color: var(--color-text-tertiary);
}

/* ========================================
   年份分隔符（时间章节留白）- 最强的节奏停顿
   ======================================== */

.year-divider {
  position: relative;
  height: 200px;  /* 更大留白，营造时间断层 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-5xl) 0;  /* 160px - 与生日同级的停顿 */
}

.year-divider-number {
  font-size: 100px;  /* 从 80px 提升到 100px */
  font-weight: 100;  /* 极细字体，降低存在感 */
  color: var(--color-text-primary);
  opacity: 0.08;  /* 从 0.1 调整到 0.08，更克制 */
  letter-spacing: 8px;
  user-select: none;
  pointer-events: none;

  /* 等宽数字，保持对齐 */
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 微妙的浮现动画 */
  animation: yearFadeIn 1200ms ease-out;
}

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

/* 可选：hover 时微微浮现 */
.year-divider:hover .year-divider-number {
  opacity: 0.15;
  transition: opacity 600ms ease;
}

/* 移动端优化 */
@media (max-width: 767px) {
  .year-divider {
    height: 140px;
    margin: 60px 0;
  }

  .year-divider-number {
    font-size: 72px;  /* 从 60px 提升到 72px */
    letter-spacing: 4px;
  }
}

/* 日期分组容器 */
.date-group {
  position: relative;
  transition: background-color 400ms ease;
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
}

/* 🆕 日期分组高亮（鼠标悬停联动）*/
.date-group--active {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 🆕 生日分组：最大留白（系统级）*/
.date-group--birthday {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 🆕 生日侧边标记（左侧粗竖线）*/
.birthday-mark {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--color-birthday) 0%,
    rgba(47, 79, 108, 0.5) 50%,
    var(--color-birthday) 100%
  );
  border-radius: 0 1.5px 1.5px 0;
}

/* 🆕 纪念日分组：增加上下留白 */
.date-group--anniversary {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* 🆕 纪念日侧边标记（左侧细竖线）*/
.anniversary-mark {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-anniversary) 0%,
    rgba(139, 99, 56, 0.4) 50%,
    var(--color-anniversary) 100%
  );
  border-radius: 0 1px 1px 0;
}

/* 日期分割线 - 普通日子的节奏 */
.date-divider {
  margin: var(--spacing-2xl) 0 var(--spacing-lg);  /* 64px / 28px */
  border-top: 1px dashed var(--color-divider);
  padding-top: var(--spacing-lg);
}

/* 生日的日期分割线：最大留白 + 双线（系统级）*/
.date-group--birthday .date-divider {
  border-top: 2px solid var(--color-birthday);
  margin: var(--spacing-5xl) 0 var(--spacing-3xl);  /* 160px / 80px - 最郑重的停顿 */
  padding-top: var(--spacing-3xl);
  position: relative;
}

/* 生日分割线下方的微妙装饰线（靛青色）*/
.date-group--birthday .date-divider::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(47, 79, 108, 0.15) 20%,
    rgba(47, 79, 108, 0.15) 80%,
    transparent 100%
  );
}

/* 纪念日的日期分割线：实线 + 暖棕色 + 明显留白 */
.date-group--anniversary .date-divider {
  border-top: 1.5px solid var(--color-anniversary);
  margin: var(--spacing-4xl) 0 var(--spacing-2xl);  /* 120px / 64px - 重要的停顿 */
  padding-top: var(--spacing-2xl);
}

/* 第一个日期分组：减少上方留白 */
.date-group:first-child .date-divider {
  margin-top: 0;
}

/* 日期头部 - 重新设计为"章节标题"而非"标签" */
.date-header {
  display: flex;
  align-items: baseline;  /* 改为 baseline 对齐 */
  gap: 12px;
  margin-bottom: var(--spacing-lg);  /* 增加底部间距 */
  padding-left: 0;  /* 与时间轴对齐 */
}

/* 日期容器 */
.date-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: var(--date-opacity-default);
  line-height: 1;
}

/* 年份 - 前缀，极弱（进一步弱化）*/
.date-year {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.25;  /* 从 0.4 降到 0.25，几乎隐形 */
  letter-spacing: 0.5px;
}

/* 月/日 - 主视觉（增强）*/
.date-month-day {
  font-size: var(--font-size-date-number);  /* 22px */
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  opacity: 1;  /* 完全显示 */
}

/* 分隔符（月、日字）*/
.date-separator {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.5;
  margin: 0 1px;
}

/* "日"字后面需要更多间距 */
.date-separator--day {
  margin-right: 6px;
}

/* 星期 - 辅助信息（略强于年份）*/
.date-weekday {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.50;
  letter-spacing: 0.5px;
  margin-left: 2px;
}

/* 🆕 生日标签：最大 + 靛青色（系统级）*/
.date-label--birthday {
  font-size: 12px;  /* 最大 */
  font-weight: 600;  /* 最粗 */
  color: var(--color-birthday);
  opacity: 1;
  letter-spacing: 2px;  /* 最宽字间距 */
}

/* 🆕 纪念日标签：稍大 + 暖棕色 */
.date-label--anniversary {
  font-size: 11px;  /* 从 10px 增加到 11px */
  font-weight: 500;
  color: var(--color-anniversary);
  opacity: 1;
  letter-spacing: 1.5px;
}

/* ========================================
   天气选择器 - 增强对比度
   ======================================== */

.weather-selector {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;  /* 从 0.25 提升到 0.35 */
  transition: opacity var(--transition-normal),
              transform var(--transition-fast);
  flex-shrink: 0;
}

.weather-selector:hover {
  opacity: 0.65;  /* 从 0.5 提升到 0.65 */
  transform: scale(1.1);
}

/* 有天气时增强存在感 */
.weather-selector[data-weather]:not([data-weather=""]) {
  opacity: 0.50;  /* 从 0.35 提升到 0.50 */
}

.weather-selector[data-weather]:not([data-weather=""]):hover {
  opacity: 0.75;  /* 从 0.6 提升到 0.75 */
}

/* 天气图标 */
.weather-icon {
  width: 100%;
  height: 100%;
  color: var(--color-text-secondary);  /* 使用次要文字色，提升对比度 */
}

/* 空状态：显示一个圆点（暗示可点击）*/
.weather-selector[data-weather=""]::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
  display: block;
}

.weather-selector[data-weather=""]:hover::before {
  width: 6px;
  height: 6px;
}

/* 确保按钮在移动端有足够的点击区域 */
@media (max-width: 767px) {
  .weather-selector {
    width: 20px;
    height: 20px;
    margin-right: -4px;  /* 视觉上更紧凑 */
  }
}

/* 单条记录 - 强化时间线叙事 */
.entry-item {
  display: flex;
  margin-bottom: var(--entry-spacing-medium);  /* 默认中等间距 */
  cursor: pointer;
  position: relative;

  /* 统一的卡片布局 */
  padding: 12px 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-radius: 10px;
  box-sizing: border-box;

  /* glass-weak 玻璃质感（雾面，不抢戏）*/
  background-color: var(--glass-weak-bg);
  backdrop-filter: blur(var(--glass-weak-blur));
  -webkit-backdrop-filter: blur(var(--glass-weak-blur));
  border: 1px solid var(--glass-weak-border);
  box-shadow: var(--glass-weak-shadow);

  /* 过渡：仅改变颜色/透明度/阴影，不改变尺寸 */
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.entry-item:hover {
  background-color: var(--glass-weak-bg-hover);
  border-color: var(--glass-weak-border-hover);
  box-shadow: var(--glass-weak-shadow-hover);
}

/* 垂直时间线 - 贯穿整个记录 */
.entry-item::before {
  content: '';
  position: absolute;
  left: var(--timeline-offset);      /* 64px，在时间戳右侧 */
  top: 0;
  bottom: 0;
  width: var(--timeline-width);      /* 1px */
  background: var(--timeline-color);  /* 极淡灰线 */
  pointer-events: none;
}

/* 时间节点圆点 - 增强存在感 */
.entry-item::after {
  content: '';
  position: absolute;
  left: calc(var(--timeline-offset) - 2.5px);  /* 居中对齐时间线 */
  top: 20px;                         /* 对齐时间戳位置 */
  width: 6px;                        /* 从 5px 增加到 6px */
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  opacity: 0.35;                     /* 从 0.25 增加到 0.35 */
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.entry-item:hover::after {
  opacity: 0.6;
  /* 不使用 scale，保持尺寸稳定 */
}

/* 首条记录：额外上方间距 */
.date-group .entry-item:first-of-type {
  margin-top: 12px;
}

/* 末条记录：减少下方间距 */
.date-group:last-child .entry-item:last-of-type {
  margin-bottom: 16px;
}

/* 时间戳容器 */
.entry-meta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 60px;
  flex-shrink: 0;
}

/* 时间戳 */
.entry-time {
  font-size: var(--font-size-time);  /* 12px，已在变量中增强 */
  font-weight: 500;                  /* 增加字重 */
  color: var(--color-text-secondary);
  text-align: right;
  padding-top: 3px;                  /* 微调对齐 */
  opacity: var(--time-opacity-old);
  transition: opacity var(--transition-slow);
  position: relative;
  letter-spacing: 0.3px;             /* 增加字间距 */
  font-variant-numeric: tabular-nums; /* 等宽数字 */
}

/* 条目天气文字 */
.entry-weather {
  font-size: 11px;
  opacity: 0.4;
  padding-top: 3px;
  transition: opacity var(--transition-fast);
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.entry-item:hover .entry-weather {
  opacity: 0.8;
}

.entry-item:hover .entry-time {
  opacity: var(--time-opacity-hover);
}

/* 正文内容 - 收窄间距 */
.entry-content {
  flex: 1;
  margin-left: 20px;                 /* 从 24px 收窄到 20px */
  padding-left: 28px;                /* 从 32px 收窄到 28px */
  font-size: var(--font-size-content);  /* 16px，已降低 */
  line-height: var(--line-height-normal);
  color: var(--content-color-normal);
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative;
}

/* 短句样式（通过 JS 动态添加 class）*/
.entry-item--short .entry-content {
  color: var(--content-color-short);
  line-height: var(--line-height-short);
}

.entry-item--short {
  margin-bottom: var(--entry-spacing-short);
}

/* 长文样式（通过 JS 动态添加 class）*/
.entry-item--long {
  margin-bottom: var(--entry-spacing-long);
}

/* 编辑器遮罩层 */
.editor-overlay {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-overlay);
  z-index: 200;
  animation: fadeIn var(--transition-normal);
}

.editor-overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 编辑器容器 */
.editor-container {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;  /* 优化：80vh → 85vh */
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  animation: slideUp var(--transition-normal);
  overflow: hidden;  /* 确保内容不溢出 */
}

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

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-divider);
}

.btn-close {
  font-size: 28px;
  color: var(--color-text-secondary);
  line-height: 1;
}

.editor-time {
  font-size: var(--font-size-time);
  color: var(--color-text-secondary);
}

.editor-textarea {
  /* 不使用 flex: 1，改为自适应高度 */
  min-height: 80px;                 /* 最小高度（约 2-3 行）*/
  max-height: 480px;                /* 最大高度（约 16 行）*/
  padding: var(--spacing-md);
  font-size: var(--font-size-content);
  line-height: var(--line-height-content);
  overflow-y: hidden;               /* 默认隐藏滚动条 */
  transition: none;                 /* 不使用动画，保持安静 */
  resize: none;                     /* 禁止手动拖拽调整大小 */
}

/* 编辑器 focus：克制的反馈 */
.editor-textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.editor-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--color-divider);
}

.btn-delete {
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.btn-delete:hover {
  color: #d32f2f;
}

.btn-save {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 500;
}

.btn-save:hover {
  opacity: 0.7;
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline-container {
    padding: 0 var(--container-padding-tablet);
  }

  .header-container {
    padding: 0 var(--container-padding-tablet);
  }
}

/* 移动端优化 */
@media (max-width: 767px) {
  .editor-container {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;  /* 移动端增加到 90% */
    border-radius: 0;
  }

  .editor-textarea {
    max-height: calc(90vh - 120px); /* 减去 header 和 footer 高度 */
  }

  .entry-content {
    font-size: 15px;
  }

  /* 移动端：增加点击热区 */
  .entry-item {
    padding: 12px 8px;
    margin-left: -8px;
    margin-right: -8px;
  }
}

/* ========================================
   时间锚点（顶部日期展示）
   ======================================== */
.time-anchor {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 64px;
  background-color: rgba(250, 250, 250, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 232, 232, 0.4);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-normal);
}

.time-anchor-container {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* 年份：极弱存在感 */
.time-anchor-year {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.4;
  letter-spacing: 0.5px;
  transition: opacity 300ms ease;  /* 年份变化时的过渡 */
}

/* 年份变化时的微妙强调 */
.time-anchor-year--highlight {
  opacity: 1 !important;
}

/* 月 / 日：视觉核心 */
.time-anchor-primary {
  display: flex;
  align-items: baseline;
  font-size: 28px;
  font-weight: 300;
  color: var(--color-text-primary);
  letter-spacing: 0;
  line-height: 1;
}

.time-anchor-month,
.time-anchor-day {
  font-variant-numeric: tabular-nums;
}

.time-anchor-separator {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.4;
  margin: 0 2px;
}

/* 星期：辅助信息 */
.time-anchor-weekday {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: 0.6;
  letter-spacing: 0.5px;
  margin-left: 8px;
}

/* 移动端优化 */
@media (max-width: 767px) {
  .time-anchor {
    height: 56px;
  }

  .time-anchor-container {
    gap: 8px;
  }

  .time-anchor-year {
    font-size: 10px;
  }

  .time-anchor-primary {
    font-size: 24px;
  }

  .time-anchor-separator {
    font-size: 18px;
  }

  .time-anchor-weekday {
    font-size: 10px;
  }
}

/* ========================================
   底部浮动添加按钮 - 隐藏（改为时间轴末尾自然延续）
   ======================================== */
.btn-add-float {
  display: none;  /* 隐藏悬浮按钮 */
}

/* ========================================
   时间轴末尾"继续书写"区域 - 融入叙事的自然入口
   ======================================== */

.timeline-continue-writing {
  margin-top: var(--spacing-3xl);    /* 80px 留白 */
  padding: var(--spacing-2xl) 0;     /* 64px 上下内边距 */
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-slow);
}

/* 时间线延续（虚线向下延伸）*/
.timeline-continue-writing::before {
  content: '';
  position: absolute;
  left: var(--timeline-offset);      /* 68px，与记录的时间线对齐 */
  top: 0;
  height: 60px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--timeline-color) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* "继续书写"文字 */
.continue-writing-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.25;
  letter-spacing: 1px;
  transition: opacity var(--transition-slow);
}

.timeline-continue-writing:hover .continue-writing-text {
  opacity: 0.55;
}

/* 克制的 + 号标记 */
.continue-writing-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 12px;
  opacity: 0.2;
  transition: all var(--transition-normal);
}

.timeline-continue-writing:hover .continue-writing-icon {
  opacity: 0.4;
  transform: scale(1.1);
}

/* 移动端优化 */
@media (max-width: 767px) {
  .btn-add-float {
    bottom: 24px;
    bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* 扩大点击区域 */
  .btn-add-float::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-width: 767px) {
  .btn-add-float {
    bottom: 16px;
  }
}

/* ========================================
   生命日历（左侧）- 强化"人生刻度尺"隐喻
   ======================================== */

.life-calendar {
  width: 300px;  /* 增加宽度，强化存在感 */
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + 64px + var(--spacing-3xl));
  align-self: flex-start;

  padding: 0 var(--spacing-lg);  /* 增加内边距 */
  max-height: calc(100vh - var(--header-height) - 64px - var(--spacing-3xl) - 40px);
  overflow-y: auto;

  /* 隐藏滚动条但保留滚动功能 */
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}

.life-calendar::-webkit-scrollbar {
  display: none;  /* Chrome/Safari */
}

/* 总标题 */
.life-calendar-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.calendar-title {
  font-size: 10px;
  font-weight: 500;  /* 增加字重 */
  color: var(--color-text-tertiary);
  opacity: 0.4;  /* 略微增强 */
  letter-spacing: 1.5px;  /* 拉宽字距 */
  text-transform: uppercase;
}

/* 展示范围按钮 */
.calendar-range-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.35;
  transition: all var(--transition-fast);
}

.calendar-range-btn:hover {
  opacity: 0.7;
  background-color: rgba(0, 0, 0, 0.04);
}

.calendar-range-text {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.calendar-range-icon {
  width: 12px;
  height: 12px;
  color: var(--color-text-tertiary);
}

/* 底部跳转入口 */
.calendar-jump-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.calendar-jump-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.4;
  transition: all var(--transition-fast);
}

.calendar-jump-btn:hover {
  opacity: 0.8;
  border-color: rgba(0, 0, 0, 0.15);
  background-color: rgba(0, 0, 0, 0.02);
}

.calendar-jump-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}

.calendar-jump-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* 写作入口日期指示器 */
.writing-entry-date-hint {
  display: none;  /* 默认隐藏 */
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  margin-bottom: -4px;
  background-color: rgba(47, 79, 108, 0.08);
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(47, 79, 108, 0.12);
  border-bottom: none;
}

.writing-entry-date-hint.active,
.writing-entry-date-hint.visible {
  display: flex;
}

.date-hint-text {
  font-size: 12px;
  color: var(--color-birthday);
  font-weight: 500;
}

.date-hint-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  transition: all var(--transition-fast);
}

.date-hint-clear:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08);
}

/* 日期指示器激活时调整输入框圆角 */
.writing-entry:has(.writing-entry-date-hint.active) .writing-entry-input,
.writing-entry:has(.writing-entry-date-hint.visible) .writing-entry-input {
  border-radius: 0 0 12px 12px;
  border-top-color: rgba(47, 79, 108, 0.12);
}

/* ========================================
   年龄块
   ======================================== */
.age-section {
  margin-bottom: var(--spacing-lg);
}

.age-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  padding-left: 4px;
}

/* 年龄（主信息）- 强化刻度标签 */
.age-primary {
  font-size: 15px;  /* 从 13px 增加到 15px */
  font-weight: 600;  /* 从 500 增加到 600 */
  color: var(--color-text-primary);
  opacity: 0.85;  /* 略微增强 */
  letter-spacing: 0.5px;
  transition: opacity var(--transition-normal);
}

/* 当前年龄高亮 */
.age-primary--current {
  opacity: 1;
  color: var(--color-text-primary);
  position: relative;
}

.age-primary--current::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 12px;
  background: var(--color-text-primary);
  border-radius: 2px;
  opacity: 0.3;
}

/* 年份（次级信息）*/
.age-secondary {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.35;  /* 略微增强 */
  letter-spacing: 0.5px;
}

.age-calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   星期头部
   ======================================== */
.calendar-weekday-header {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);  /* 左侧周数占位 + 7天 */
  gap: 2px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);

  /* 🆕 常驻顶部 */
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-bg-primary);
  padding-top: 4px;  /* 顶部留些空间 */
}

.week-number-cell {
  width: 28px;  /* 与周数标签同宽 */
}

.weekday-cell {
  font-size: 9px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.3;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ========================================
   日历网格（改为行式布局）
   ======================================== */
.life-calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--spacing-xl);
}

/* ========================================
   周行（每行 = 周数 + 7天）
   ======================================== */
.calendar-week-row {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);  /* 左侧周数 + 7天 */
  gap: 2px;
  align-items: center;
}

/* 当前周所在行 - 极轻的亮度提升 */
.calendar-week-row--current {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
  margin: 0 -4px;
  padding: 0 4px;
}

/* 浅色模式下当前行高亮 */
:root:not([data-theme="dark"]) .calendar-week-row--current {
  background-color: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .calendar-week-row--current,
  :root[data-theme="auto"] .calendar-week-row--current {
    background-color: rgba(0, 0, 0, 0.02);
  }
}

[data-theme="light"] .calendar-week-row--current {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* 周数标签 */
.week-number {
  width: 28px;
  font-size: 9px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.2;
  text-align: right;
  padding-right: 6px;
  letter-spacing: 0.5px;
}

/* ========================================
   日期方块（保持原有样式）
   ======================================== */
.calendar-day {
  width: 100%;
  aspect-ratio: 1;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  transition: background-color var(--transition-normal),
              transform var(--transition-fast),
              opacity var(--transition-slow);
  cursor: default;
  position: relative;
  opacity: 0.85;  /* 过去月份略微褪色 */
}

/* 空白方块（用于对齐星期或未来日期）*/
.calendar-day--empty {
  background-color: transparent;
  cursor: default;
  pointer-events: none;
  opacity: 0.3;
}

/* 当前月的方块 */
.calendar-day--current-month {
  opacity: 1;
}

/* 有记录的日子 */
.calendar-day--recorded {
  background-color: rgba(0, 0, 0, 0.15);
}

/* 今天 - 柔和的标识，不抢夺注意力 */
.calendar-day--today {
  background-color: rgba(0, 0, 0, 0.25);  /* 半透明深色，比 recorded 稍深 */
  border: 1px solid rgba(0, 0, 0, 0.3);   /* 细边框强化轮廓 */
  box-sizing: border-box;
  opacity: 1 !important;  /* 今天始终全亮 */
}

/* 今天 + 有记录 */
.calendar-day--today.calendar-day--recorded {
  background-color: rgba(0, 0, 0, 0.30);  /* 稍微加深 */
}

/* Hover 效果：微微放大 */
.calendar-day:hover:not(.calendar-day--empty) {
  transform: scale(1.15);
  background-color: rgba(0, 0, 0, 0.25);
}

/* 当前阅读的日期：轻微高亮（心理联动）*/
.calendar-day--active {
  background-color: rgba(0, 0, 0, 0.30);
  transition: background-color 600ms ease;  /* 极慢过渡，营造呼吸感 */
  position: relative;
}

/* active 非 today：添加外发光增强焦点感 */
.calendar-day--active:not(.calendar-day--today) {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.calendar-day--active.calendar-day--recorded {
  background-color: rgba(0, 0, 0, 0.35);
}

.calendar-day--active.calendar-day--recorded:not(.calendar-day--today) {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.calendar-day--today.calendar-day--active {
  background-color: rgba(0, 0, 0, 0.35);  /* 稍微加深，表示同时是今天和当前浏览 */
}

/* 🆕 联动时的微妙脉动（仅在激活瞬间）*/
@keyframes calendarPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.calendar-day--active {
  animation: calendarPulse 800ms ease-out;
}


/* ========================================
   年份分隔符（调整为全宽）
   ======================================== */
.calendar-year-divider {
  height: 32px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.calendar-year-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 32px;  /* 跳过周数列 */
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.04);
}

/* ========================================
   月份第一天标记（隐性节奏）- 增强标识
   ======================================== */
.calendar-day--month-start::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 2.5px;  /* 从 2px 增加到 2.5px */
  background-color: rgba(0, 0, 0, 0.20);  /* 从 0.15 增加到 0.20 */
  border-radius: 0 1px 1px 0;
}

/* ========================================
   特殊日期标记（三个层级 + 系统级生日）
   ======================================== */

/* 系统级：生日（Birthday）- 时间原点，最高优先级 */
.calendar-day--birthday {
  /* 边框：靛青色（深蓝），2px */
  border: 2px solid var(--color-birthday);
  box-sizing: border-box;

  /* 背景：淡靛青色点缀 */
  background-color: var(--color-birthday-bg) !important;

  /* 过渡 */
  transition: all var(--transition-normal);
}

/* 生日 hover：边框加深，背景略深 */
.calendar-day--birthday:hover {
  border-color: rgba(47, 79, 108, 0.9);
  background-color: rgba(47, 79, 108, 0.18) !important;
  box-shadow: 0 0 0 1px rgba(47, 79, 108, 0.15);  /* 微妙外晕 */
}

/* 生日 + 有记录：背景加深 */
.calendar-day--birthday.calendar-day--recorded {
  background-color: rgba(47, 79, 108, 0.20) !important;
}

/* 生日 + 今天：特殊组合 - 保持生日的特殊感，稍微加深 */
.calendar-day--birthday.calendar-day--today {
  background-color: rgba(47, 79, 108, 0.25) !important;  /* 生日色调的半透明 */
  border-color: var(--color-birthday);
  border-width: 2px;  /* 加粗边框突出 */
}

/* 层级 1：纪念日（Anniversary）- 人生重要节点 */
.calendar-day--anniversary {
  /* 边框：暖棕色（琥珀），1.5px */
  border: 1.5px solid var(--color-anniversary);
  box-sizing: border-box;

  /* 背景：淡暖棕色点缀 */
  background-color: var(--color-anniversary-bg) !important;

  /* 过渡 */
  transition: all var(--transition-normal);
}

/* 纪念日 hover：边框加深，背景略深 */
.calendar-day--anniversary:hover {
  border-color: rgba(139, 99, 56, 0.85);
  background-color: rgba(139, 99, 56, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(139, 99, 56, 0.12);  /* 微妙外晕 */
}

/* 纪念日 + 有记录：背景加深 */
.calendar-day--anniversary.calendar-day--recorded {
  background-color: rgba(139, 99, 56, 0.16) !important;
}

/* 纪念日 + 今天：特殊组合 - 保持纪念日的特殊感，稍微加深 */
.calendar-day--anniversary.calendar-day--today {
  background-color: rgba(139, 99, 56, 0.22) !important;  /* 纪念日色调的半透明 */
  border-color: var(--color-anniversary);
  border-width: 2px;  /* 加粗边框突出 */
}

/* 层级 2：普通特殊日期（Special）- 值得标记但非节点 */
.calendar-day--special::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 2px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transition: all var(--transition-normal);
}

/* hover 时圆点略微增大 */
.calendar-day--special:hover::after {
  width: 3px;
  height: 3px;
  top: 1.5px;
  right: 1.5px;
  background-color: rgba(0, 0, 0, 0.6);
}

/* ========================================
   响应式：平板端
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .life-calendar {
    width: 220px;
  }

  .calendar-weekday-header,
  .calendar-week-row {
    grid-template-columns: 24px repeat(7, 1fr);
  }

  .week-number-cell,
  .week-number {
    width: 24px;
    font-size: 8px;
    padding-right: 4px;
  }

  .weekday-cell {
    font-size: 8px;
  }
}

/* ========================================
   响应式：移动端（隐藏左侧日历）
   ======================================== */
@media (max-width: 767px) {
  .life-calendar {
    display: none;
  }
}

/* ========================================
   空日期提示（时间穿梭后的轻量级反馈）
   ======================================== */
.empty-date-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 250;

  padding: 16px 24px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;

  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;

  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.empty-date-hint--fade-out {
  opacity: 0;
}

/* ========================================
   右键上下文菜单（特殊日期标记）
   ======================================== */

/* 菜单容器 */
.context-menu {
  position: fixed;
  z-index: 300;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  min-width: 240px;
  max-width: 320px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast);
}

.context-menu.active {
  opacity: 1;
  transform: scale(1);
}

/* 菜单头部（显示日期）*/
.context-menu-header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 4px;
}

.context-menu-date {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  opacity: 0.6;
  letter-spacing: 0.5px;
}

/* 菜单项 */
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.context-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.context-menu-item:active {
  background-color: rgba(0, 0, 0, 0.06);
}

/* 菜单项图标 */
.context-menu-icon {
  width: 20px;
  height: 20px;
  font-size: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 菜单项文本区域 */
.context-menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.context-menu-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.context-menu-description {
  font-size: 11px;
  color: var(--color-text-tertiary);
  opacity: 0.7;
  line-height: 1.3;
}

/* 分隔线 */
.context-menu-divider {
  height: 1px;
  background-color: var(--color-divider);
  margin: 4px 0;
}

/* 返回按钮 */
.context-menu-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 4px;
  transition: background-color var(--transition-fast);
}

.context-menu-back:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 危险操作（删除）*/
.context-menu-item--danger .context-menu-label {
  color: #d32f2f;
}

.context-menu-item--danger:hover {
  background-color: rgba(211, 47, 47, 0.04);
}

/* 模板选项右侧箭头 */
.context-menu-arrow {
  font-size: 12px;
  color: var(--color-text-tertiary);
  opacity: 0.4;
}

/* ========================================
   人生节点回顾模式
   ======================================== */

/* 时间轴容器（回顾模式）*/
.timeline-container--review-mode {
  max-width: 560px !important;
  margin: 0 auto;
  padding-top: 120px !important;
  padding-bottom: 120px !important;
  opacity: 0;
  transition: opacity 300ms ease;
}

.timeline-container--review-mode.active {
  opacity: 1;
}

/* 节点间的时间留白（表达"未标记的时间流"）*/
.review-node-spacer {
  height: 160px;
  position: relative;
}

/* 时间流动的隐喻：垂直虚线 */
.review-node-spacer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 20%,
    rgba(0, 0, 0, 0.06) 80%,
    transparent 100%
  );
}

/* 节点容器 */
.review-node {
  position: relative;
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-bottom: 0;
}

.review-node:hover {
  transform: scale(1.02);
}

/* 节点内容区 */
.review-node-content {
  text-align: center;
  padding: 40px 24px;
  position: relative;
  transition: all var(--transition-normal);
}

/* 年份/年龄（弱信息，极淡）*/
.review-node-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.25;
  letter-spacing: 1px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* 节点标题（核心信息）*/
.review-node-title {
  font-size: 20px;
  font-weight: 300;
  color: var(--color-text-primary);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.review-node-icon {
  font-size: 24px;
}

.review-node-label {
  /* 核心标签 */
}

/* 有日记标记（右侧小圆点）*/
.review-node-entry-indicator {
  font-size: 8px;
  color: var(--color-text-primary);
  opacity: 0.3;
  margin-left: 4px;
}

/* 日期 */
.review-node-date {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: 0.5;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

/* 可选描述 */
.review-node-description {
  font-size: 12px;
  color: var(--color-text-tertiary);
  opacity: 0.6;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* ========================================
   节点边框（层级表达）
   ======================================== */

/* 系统级：生日（最高优先级）*/
.review-node--birthday .review-node-content {
  border: 2px solid var(--color-birthday);
  border-radius: 4px;
  background-color: var(--color-birthday-bg);
}

.review-node--birthday .review-node-title {
  font-size: 22px;
  font-weight: 400;
}

/* 层级 1：重大里程碑 */
.review-node--major .review-node-content {
  border: 1.5px solid var(--color-anniversary);
  border-radius: 4px;
  background-color: var(--color-anniversary-bg);
}

/* 层级 2：纪念日 */
.review-node--milestone .review-node-content {
  border: 1px solid rgba(139, 99, 56, 0.4);
  border-radius: 4px;
  background-color: rgba(139, 99, 56, 0.03);
}

/* Hover 效果 */
.review-node:hover .review-node-content {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
}

/* 激活状态（点击后高亮）*/
.review-node--active .review-node-content {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  transform: scale(1.02);
}

/* ========================================
   左侧日历在回顾模式的变化
   ======================================== */

/* 回顾模式：淡化未标记日期 */
.life-calendar--review-mode .calendar-day:not(.calendar-day--birthday):not(.calendar-day--anniversary) {
  opacity: 0.05 !important;
  pointer-events: none;
}

/* 回顾模式：标记日期保持正常 */
.life-calendar--review-mode .calendar-day--birthday,
.life-calendar--review-mode .calendar-day--anniversary {
  opacity: 1 !important;
  pointer-events: all;
}

/* 回顾模式：隐藏周数和星期头 */
.life-calendar--review-mode .week-number {
  opacity: 0.1;
}

.life-calendar--review-mode .calendar-weekday-header {
  opacity: 0.3;
}

/* ========================================
   模式切换淡入淡出动画
   ======================================== */

.timeline-container--fade-out {
  opacity: 0 !important;
  transition: opacity 300ms ease;
}

.timeline-container--fade-in {
  opacity: 1 !important;
  transition: opacity 800ms ease;
}

/* ========================================
   深色模式特殊样式调整
   支持两种触发方式：
   1. 系统自动：@media (prefers-color-scheme: dark)
   2. 手动切换：[data-theme="dark"]
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* ========== 顶部导航栏 ========== */
  .app-header {
    background-color: rgba(15, 18, 20, 0.9);  /* 使用深色主背景 */
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  /* ========== 时间锚点 ========== */
  .time-anchor {
    background-color: rgba(15, 18, 20, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  /* 年份变化高亮时的调整 */
  .time-anchor-year--highlight {
    opacity: 0.9 !important;  /* 深色模式下不需要完全不透明 */
  }

  /* ========== 年份分隔符（水印需要更透明但可感知）========== */
  .year-divider-number {
    opacity: 0.06;  /* 从 0.04 提升到 0.06，恢复时间节奏感 */
    filter: blur(0.3px);  /* 微妙模糊，增强"时间模糊感" */
  }

  .year-divider:hover .year-divider-number {
    opacity: 0.10;  /* hover 时也保持克制 */
  }

  @keyframes yearFadeIn {
    to {
      opacity: 0.06;
    }
  }

  /* ========== 按钮样式调整 ========== */
  .btn-mode-toggle {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .btn-mode-toggle:hover {
    border-color: rgba(255, 255, 255, 0.20);
    background-color: rgba(255, 255, 255, 0.04);
  }

  /* ========== 编辑器 ========== */
  .editor-container {
    background-color: var(--color-bg-elevated-2);  /* 使用二级抬升背景 */
  }

  .editor-header,
  .editor-footer {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .editor-textarea {
    background-color: var(--color-bg-elevated-2);
    color: var(--color-text-primary);
  }

  .editor-textarea::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.5;
  }

  .editor-textarea:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  /* ========== 日期分组高亮背景 ========== */
  .date-group--active {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* ========== 天气选择器深色模式增强 ========== */
  .weather-selector {
    opacity: 0.45;  /* 深色模式下进一步提升 */
  }

  .weather-selector:hover {
    opacity: 0.75;
  }

  .weather-selector[data-weather]:not([data-weather=""]) {
    opacity: 0.60;
  }

  .weather-selector[data-weather]:not([data-weather=""]):hover {
    opacity: 0.85;
  }

  .weather-icon {
    color: var(--color-text-primary);  /* 深色模式使用主文字色 */
  }

  /* ========== 日期分割线（深色模式下虚线需要调整）========== */
  .date-divider {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  /* ========== 上下文菜单 ========== */
  .context-menu {
    background-color: var(--color-bg-elevated-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .context-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .context-menu-item:active {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-divider {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-back {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-back:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* 危险操作的深色适配 */
  .context-menu-item--danger:hover {
    background-color: rgba(211, 47, 47, 0.12);
  }

  /* ========== 空状态提示 ========== */
  .empty-date-hint {
    background-color: rgba(232, 224, 213, 0.15);  /* 使用暖色半透明 */
    color: var(--color-text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  /* ========== 回顾模式节点 ========== */
  .review-node-spacer::before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 20%,
      rgba(255, 255, 255, 0.04) 80%,
      transparent 100%
    );
  }

  /* 回顾模式节点 hover 效果 */
  .review-node:hover .review-node-content {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
  }

  .review-node--active .review-node-content {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
  }

  /* ========================================
     生命日历深色模式优化
     ======================================== */

  /* 日历方块基础样式 - 使用亮色系统 */
  .calendar-day {
    background-color: rgba(255, 255, 255, 0.06);  /* 空白日子：微妙的亮方块 */
  }

  .calendar-day--empty {
    background-color: transparent;
    opacity: 0.4;
  }

  /* 有记录的日子 - 更亮 */
  .calendar-day--recorded {
    background-color: rgba(255, 255, 255, 0.20);
  }

  /* 今天 - 柔和的标识 */
  .calendar-day--today {
    background-color: rgba(255, 255, 255, 0.30);  /* 半透明亮色，比 recorded 稍亮 */
    border: 1px solid rgba(255, 255, 255, 0.35);  /* 细边框强化轮廓 */
  }

  .calendar-day--today.calendar-day--recorded {
    background-color: rgba(255, 255, 255, 0.35);  /* 稍微加亮 */
  }

  /* Hover 效果 */
  .calendar-day:hover:not(.calendar-day--empty) {
    background-color: rgba(255, 255, 255, 0.30);
  }

  /* 当前阅读的日期高亮 */
  .calendar-day--active {
    background-color: rgba(255, 255, 255, 0.35);
  }

  /* active 非 today：添加外发光增强焦点感 */
  .calendar-day--active:not(.calendar-day--today) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  }

  .calendar-day--active.calendar-day--recorded {
    background-color: rgba(255, 255, 255, 0.40);
  }

  .calendar-day--active.calendar-day--recorded:not(.calendar-day--today) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  .calendar-day--today.calendar-day--active {
    background-color: rgba(255, 255, 255, 0.40);  /* 稍微加亮 */
  }

  /* 脉动动画调整 */
  @keyframes calendarPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
    50% {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }

  /* 年份分隔线 */
  .calendar-year-divider::before {
    background: rgba(255, 255, 255, 0.06);
  }

  /* 月份第一天标记 */
  .calendar-day--month-start::before {
    background-color: rgba(255, 255, 255, 0.25);
  }

  /* 特殊日期 - 生日（靛青边框在深色下需要调整）*/
  .calendar-day--birthday {
    border-color: var(--color-birthday);
    background-color: var(--color-birthday-bg) !important;
  }

  .calendar-day--birthday:hover {
    border-color: #8db0d0;  /* hover 时更亮的靛青 */
    background-color: rgba(122, 155, 184, 0.20) !important;
    box-shadow: 0 0 0 1px rgba(122, 155, 184, 0.20);
  }

  .calendar-day--birthday.calendar-day--recorded {
    background-color: rgba(122, 155, 184, 0.22) !important;
  }

  .calendar-day--birthday.calendar-day--today {
    background-color: rgba(122, 155, 184, 0.30) !important;  /* 深色模式下的生日+今天 */
    border-color: var(--color-birthday);
    border-width: 2px;
  }

  /* 特殊日期 - 纪念日（暖棕边框）*/
  .calendar-day--anniversary {
    border-color: var(--color-anniversary);
    background-color: var(--color-anniversary-bg) !important;
  }

  .calendar-day--anniversary:hover {
    border-color: #cca97d;  /* hover 时更亮的暖棕 */
    background-color: rgba(184, 148, 107, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(184, 148, 107, 0.15);
  }

  .calendar-day--anniversary.calendar-day--recorded {
    background-color: rgba(184, 148, 107, 0.20) !important;
  }

  .calendar-day--anniversary.calendar-day--today {
    background-color: rgba(184, 148, 107, 0.28) !important;  /* 深色模式下的纪念日+今天 */
    border-color: var(--color-anniversary);
    border-width: 2px;
  }

  /* 普通特殊日期圆点 */
  .calendar-day--special::after {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .calendar-day--special:hover::after {
    background-color: rgba(255, 255, 255, 0.7);
  }

  /* 星期头部和周数标签 */
  .calendar-weekday-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background-color: var(--color-bg-primary);  /* 🆕 确保深色模式下背景色正确 */
  }

  /* 回顾模式下的日历调整 */
  .life-calendar--review-mode .calendar-day:not(.calendar-day--birthday):not(.calendar-day--anniversary) {
    opacity: 0.08 !important;  /* 深色模式下稍微提高一点，避免完全消失 */
  }

  /* ========== 时间线圆点深色模式增强 ========== */
  .entry-item::after {
    opacity: 0.40;  /* 从 0.35 提升到 0.40 */
  }

  .entry-item:hover::after {
    opacity: 0.60;
  }
}

/* ========================================
   手动切换到深色模式 [data-theme="dark"]
   与上面媒体查询的样式完全一致
   ======================================== */

[data-theme="dark"] {
  /* ========== 顶部导航栏 ========== */
  .app-header {
    background-color: rgba(15, 18, 20, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  /* ========== 时间锚点 ========== */
  .time-anchor {
    background-color: rgba(15, 18, 20, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  .time-anchor-year--highlight {
    opacity: 0.9 !important;
  }

  /* ========== 年份分隔符 ========== */
  .year-divider-number {
    opacity: 0.06;  /* 从 0.04 提升到 0.06 */
    filter: blur(0.3px);
  }

  .year-divider:hover .year-divider-number {
    opacity: 0.10;
  }

  @keyframes yearFadeIn {
    to {
      opacity: 0.06;
    }
  }

  /* ========== 按钮样式调整 ========== */
  .btn-mode-toggle,
  .btn-theme-toggle {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .btn-mode-toggle:hover,
  .btn-theme-toggle:hover {
    border-color: rgba(255, 255, 255, 0.20);
    background-color: rgba(255, 255, 255, 0.04);
  }

  /* ========== 编辑器 ========== */
  .editor-container {
    background-color: var(--color-bg-elevated-2);
  }

  .editor-header,
  .editor-footer {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .editor-textarea {
    background-color: var(--color-bg-elevated-2);
    color: var(--color-text-primary);
  }

  .editor-textarea::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.5;
  }

  .editor-textarea:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  /* ========== 日期分组 ========== */
  .date-group--active {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* ========== 天气选择器深色模式增强 ========== */
  .weather-selector {
    opacity: 0.45;
  }

  .weather-selector:hover {
    opacity: 0.75;
  }

  .weather-selector[data-weather]:not([data-weather=""]) {
    opacity: 0.60;
  }

  .weather-selector[data-weather]:not([data-weather=""]):hover {
    opacity: 0.85;
  }

  .weather-icon {
    color: var(--color-text-primary);
  }

  .date-divider {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  /* ========== 上下文菜单 ========== */
  .context-menu {
    background-color: var(--color-bg-elevated-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .context-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .context-menu-item:active {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-divider {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-back {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .context-menu-back:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }

  .context-menu-item--danger:hover {
    background-color: rgba(211, 47, 47, 0.12);
  }

  /* ========== 空状态提示 ========== */
  .empty-date-hint {
    background-color: rgba(232, 224, 213, 0.15);
    color: var(--color-text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  /* ========== 回顾模式 ========== */
  .review-node-spacer::before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 20%,
      rgba(255, 255, 255, 0.04) 80%,
      transparent 100%
    );
  }

  .review-node:hover .review-node-content {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
  }

  .review-node--active .review-node-content {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
  }

  /* ========== 生命日历 ========== */
  .calendar-day {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .calendar-day--empty {
    background-color: transparent;
    opacity: 0.4;
  }

  .calendar-day--recorded {
    background-color: rgba(255, 255, 255, 0.20);
  }

  .calendar-day--today {
    background-color: rgba(255, 255, 255, 0.30);  /* 半透明亮色 */
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  .calendar-day--today.calendar-day--recorded {
    background-color: rgba(255, 255, 255, 0.35);
  }

  .calendar-day:hover:not(.calendar-day--empty) {
    background-color: rgba(255, 255, 255, 0.30);
  }

  .calendar-day--active {
    background-color: rgba(255, 255, 255, 0.35);
  }

  /* active 非 today：添加外发光增强焦点感 */
  .calendar-day--active:not(.calendar-day--today) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  }

  .calendar-day--active.calendar-day--recorded {
    background-color: rgba(255, 255, 255, 0.40);
  }

  .calendar-day--active.calendar-day--recorded:not(.calendar-day--today) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  .calendar-day--today.calendar-day--active {
    background-color: rgba(255, 255, 255, 0.40);
  }

  @keyframes calendarPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
    50% {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }

  .calendar-year-divider::before {
    background: rgba(255, 255, 255, 0.06);
  }

  .calendar-day--month-start::before {
    background-color: rgba(255, 255, 255, 0.25);
  }

  .calendar-day--birthday {
    border-color: var(--color-birthday);
    background-color: var(--color-birthday-bg) !important;
  }

  .calendar-day--birthday:hover {
    border-color: #8db0d0;
    background-color: rgba(122, 155, 184, 0.20) !important;
    box-shadow: 0 0 0 1px rgba(122, 155, 184, 0.20);
  }

  .calendar-day--birthday.calendar-day--recorded {
    background-color: rgba(122, 155, 184, 0.22) !important;
  }

  .calendar-day--birthday.calendar-day--today {
    background-color: rgba(122, 155, 184, 0.30) !important;
    border-color: var(--color-birthday);
    border-width: 2px;
  }

  .calendar-day--anniversary {
    border-color: var(--color-anniversary);
    background-color: var(--color-anniversary-bg) !important;
  }

  .calendar-day--anniversary:hover {
    border-color: #cca97d;
    background-color: rgba(184, 148, 107, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(184, 148, 107, 0.15);
  }

  .calendar-day--anniversary.calendar-day--recorded {
    background-color: rgba(184, 148, 107, 0.20) !important;
  }

  .calendar-day--anniversary.calendar-day--today {
    background-color: rgba(184, 148, 107, 0.28) !important;
    border-color: var(--color-anniversary);
    border-width: 2px;
  }

  .calendar-day--special::after {
    background-color: rgba(255, 255, 255, 0.5);
  }

  .calendar-day--special:hover::after {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .calendar-weekday-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background-color: var(--color-bg-primary);  /* 🆕 确保深色模式下背景色正确 */
  }

  .life-calendar--review-mode .calendar-day:not(.calendar-day--birthday):not(.calendar-day--anniversary) {
    opacity: 0.08 !important;
  }

  /* ========== 时间线圆点深色模式增强 ========== */
  .entry-item::after {
    opacity: 0.40;
  }

  .entry-item:hover::after {
    opacity: 0.60;
  }
}

/* ========================================
   手动切换到浅色模式 [data-theme="light"]
   显式定义浅色样式，确保从深色切换回来时正确显示
   ======================================== */

[data-theme="light"] {
  /* ========== 顶部导航栏 ========== */
  .app-header {
    background-color: rgba(250, 250, 250, 0.9);
    border-bottom-color: var(--color-divider);
  }

  /* ========== 时间锚点 ========== */
  .time-anchor {
    background-color: rgba(250, 250, 250, 0.85);
    border-bottom-color: rgba(232, 232, 232, 0.4);
  }

  /* ========== 按钮样式 ========== */
  .btn-mode-toggle,
  .btn-theme-toggle {
    border-color: var(--color-divider) !important;
  }

  .btn-mode-toggle:hover,
  .btn-theme-toggle:hover {
    border-color: var(--color-text-tertiary) !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
  }

  /* ========== 编辑器 ========== */
  .editor-container {
    background-color: #ffffff !important;
  }

  .editor-header,
  .editor-footer {
    border-color: var(--color-divider) !important;
  }

  .editor-textarea {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
  }

  /* ========== 确保年份水印使用浅色模式的透明度 ========== */
  .year-divider-number {
    opacity: 0.08 !important;
    filter: none !important;
  }

  .year-divider:hover .year-divider-number {
    opacity: 0.15 !important;
  }

  /* ========== 生命日历浅色模式 ========== */
  .calendar-day {
    background-color: rgba(0, 0, 0, 0.04) !important;
    opacity: 0.85 !important;
  }

  .calendar-day--empty {
    background-color: transparent !important;
    opacity: 0.3 !important;
  }

  .calendar-day--current-month {
    opacity: 1 !important;
  }

  .calendar-day--recorded {
    background-color: rgba(0, 0, 0, 0.15) !important;
  }

  .calendar-day--today {
    background-color: rgba(0, 0, 0, 0.25) !important;  /* 半透明深色 */
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
  }

  .calendar-day--today.calendar-day--recorded {
    background-color: rgba(0, 0, 0, 0.30) !important;
  }

  .calendar-day:hover:not(.calendar-day--empty) {
    background-color: rgba(0, 0, 0, 0.25) !important;
  }

  .calendar-day--active {
    background-color: rgba(0, 0, 0, 0.30) !important;
  }

  /* active 非 today：添加外发光增强焦点感 */
  .calendar-day--active:not(.calendar-day--today) {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  }

  .calendar-day--active.calendar-day--recorded {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }

  .calendar-day--active.calendar-day--recorded:not(.calendar-day--today) {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
  }

  .calendar-day--today.calendar-day--active {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }

  .calendar-day--month-start::before {
    background-color: rgba(0, 0, 0, 0.20) !important;
  }

  .calendar-day--birthday {
    border-color: var(--color-birthday) !important;
    background-color: var(--color-birthday-bg) !important;
  }

  .calendar-day--birthday:hover {
    border-color: rgba(47, 79, 108, 0.9) !important;
    background-color: rgba(47, 79, 108, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(47, 79, 108, 0.15) !important;
  }

  .calendar-day--birthday.calendar-day--recorded {
    background-color: rgba(47, 79, 108, 0.20) !important;
  }

  .calendar-day--birthday.calendar-day--today {
    background-color: rgba(47, 79, 108, 0.25) !important;
    border-color: var(--color-birthday) !important;
    border-width: 2px !important;
  }

  .calendar-day--anniversary {
    border-color: var(--color-anniversary) !important;
    background-color: var(--color-anniversary-bg) !important;
  }

  .calendar-day--anniversary:hover {
    border-color: rgba(139, 99, 56, 0.85) !important;
    background-color: rgba(139, 99, 56, 0.14) !important;
    box-shadow: 0 0 0 1px rgba(139, 99, 56, 0.12) !important;
  }

  .calendar-day--anniversary.calendar-day--recorded {
    background-color: rgba(139, 99, 56, 0.16) !important;
  }

  .calendar-day--anniversary.calendar-day--today {
    background-color: rgba(139, 99, 56, 0.22) !important;
    border-color: var(--color-anniversary) !important;
    border-width: 2px !important;
  }

  .calendar-day--special::after {
    background-color: rgba(0, 0, 0, 0.4) !important;
  }

  .calendar-day--special:hover::after {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }

  .calendar-year-divider::before {
    background: rgba(0, 0, 0, 0.04) !important;
  }

  .calendar-weekday-header {
    border-bottom-color: rgba(0, 0, 0, 0.04) !important;
  }

  .life-calendar--review-mode .calendar-day:not(.calendar-day--birthday):not(.calendar-day--anniversary) {
    opacity: 0.05 !important;
  }
}

/* ========================================
   写作入口 - 简洁的书写空间
   设计理念：
   - 三行初始高度，安静的书写邀请
   - 底部显示当前时间和保存按钮
   - 支持自定义保存图标
   ======================================== */

.writing-entry {
  position: relative;
  width: 100%;
  margin: 0 0 var(--spacing-3xl);

  /* 提交时的淡出效果 */
  transition: opacity 200ms ease;
}

.writing-entry.submitting {
  opacity: 0.5;
  pointer-events: none;
}

/* 输入区域 - glass-strong 玻璃质感书写空间 */
.writing-entry-input {
  width: 100%;
  min-height: 96px;  /* 约三行高度 */
  max-height: 400px;
  padding: 16px 20px;
  padding-bottom: 56px;  /* 增加底部空间，为底部栏留出更多距离 */

  /* glass-strong 玻璃质感（更"正在发生"）*/
  background-color: var(--glass-strong-bg);
  backdrop-filter: blur(var(--glass-strong-blur));
  -webkit-backdrop-filter: blur(var(--glass-strong-blur));
  border: 1px solid var(--glass-strong-border);
  box-shadow: var(--glass-strong-shadow), var(--glass-strong-inset);
  color: var(--color-text-primary);

  /* 统一圆角（与记录卡片一致） */
  border-radius: 10px;

  /* 字体 */
  font-size: var(--font-size-content);
  line-height: var(--line-height-content);
  font-family: inherit;
  font-weight: 400;

  /* 去除默认样式 */
  resize: none;
  outline: none;
  box-sizing: border-box;
  overflow-y: hidden;

  /* 过渡：仅改变颜色/透明度/阴影，不改变尺寸 */
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    height 150ms ease;
}

/* Placeholder 样式 - 更淡，暗示可书写 */
.writing-entry-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.4;
  font-weight: 300;
}

/* 聚焦状态 - 玻璃质感增强 */
.writing-entry-input:focus {
  background-color: var(--glass-strong-bg-hover);
  border-color: var(--glass-strong-border-hover);
  box-shadow: var(--glass-strong-shadow-hover), var(--glass-strong-inset);
}

/* 底部栏：时间 + 保存按钮 */
.writing-entry-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;  /* 与下边框保持 8px 距离 */
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  pointer-events: none;  /* 让点击穿透到 textarea */
}

/* 时间按钮 */
.writing-entry-time-btn {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  margin: -4px -8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
  transition: all var(--transition-fast);
}

.writing-entry-time-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* 底部时间显示 - 清晰可感知的时间锚点 */
.writing-entry-time {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: 0.7;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--transition-normal);
}

/* 自定义时间时的样式 */
.writing-entry-time.time--custom {
  color: var(--color-birthday);
  opacity: 0.9;
}

/* 聚焦时时间更清晰 */
.writing-entry:focus-within .writing-entry-time {
  opacity: 0.9;
}

/* 天气按钮 */
.writing-entry-weather-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 6px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.5;
  transition: all var(--transition-fast);
}

.writing-entry-weather-btn:hover {
  opacity: 0.8;
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.04);
}

.weather-icon-mini {
  font-size: 12px;
  line-height: 1;
  color: var(--color-text-secondary);
}

.weather-icon-mini:not(.has-weather)::before {
  content: '·';
  font-size: 14px;
  color: var(--color-text-tertiary);
  opacity: 0.5;
}

.weather-icon-mini.has-weather {
  opacity: 0.8;
}

/* 保存按钮推到最右边 */
.writing-entry-submit {
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;

  cursor: pointer;
  pointer-events: auto;

  /* 默认隐藏 */
  opacity: 0;
  transform: scale(0.9);

  /* 过渡 */
  transition: opacity var(--transition-normal),
              transform var(--transition-normal),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

/* 聚焦时显示按钮 */
.writing-entry:focus-within .writing-entry-submit,
.writing-entry.submitting .writing-entry-submit {
  opacity: 0.5;
  transform: scale(1);
}

/* 保存按钮 hover - 仅改变透明度，保持整体风格 */
.writing-entry-submit:hover {
  opacity: 0.85 !important;
}

/* 保存按钮 active */
.writing-entry-submit:active {
  transform: scale(0.95);
  opacity: 1 !important;
}

/* 自定义图标样式 */
.submit-icon-custom {
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.writing-entry-submit:hover .submit-icon-custom {
  opacity: 0.9;
}

/* 备用图标样式 */
.submit-icon-fallback {
  width: 70%;
  height: 70%;
  color: var(--color-text-secondary);
  transition: opacity var(--transition-fast);
}

.writing-entry-submit:hover .submit-icon-fallback {
  opacity: 0.9;
}

/* ========================================
   新记录的入场动画
   ======================================== */

.entry-fade-in {
  animation: entrySlideIn 300ms ease-out;
}

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

/* ========================================
   写作入口 - 深色模式适配（玻璃质感）
   ======================================== */

@media (prefers-color-scheme: dark) {
  .writing-entry-input {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .writing-entry-input:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .writing-entry-input::placeholder {
    opacity: 0.35;
  }

  .writing-entry-time {
    color: var(--color-text-secondary);
  }

  .writing-entry-submit {
    border-color: rgba(255, 255, 255, 0.10);
  }

  .submit-icon-custom {
    filter: brightness(0) invert(0.7);  /* 深色模式下图标变亮 */
  }

  .submit-icon-fallback {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .writing-entry-input {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .writing-entry-input:focus {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .writing-entry-input::placeholder {
  opacity: 0.35;
}

[data-theme="dark"] .writing-entry-time {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .writing-entry-submit {
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .submit-icon-custom {
  filter: brightness(0) invert(0.7);
}

[data-theme="dark"] .submit-icon-fallback {
  color: var(--color-text-secondary);
}

/* 浅色模式显式定义（玻璃质感）*/
[data-theme="light"] .writing-entry-input {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .writing-entry-input:focus {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .writing-entry-submit {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .submit-icon-custom {
  filter: none !important;
}

/* ========================================
   写作入口 - 响应式调整
   ======================================== */

@media (min-width: 768px) {
  .writing-entry-input {
    padding: 20px 24px;
    padding-bottom: 60px;  /* 桌面端更宽松 */
    min-height: 108px;
  }

  .writing-entry-footer {
    height: 44px;
    padding: 0 20px;
    bottom: 10px;  /* 桌面端距离稍大 */
  }

  .writing-entry-submit {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 767px) {
  .writing-entry {
    margin-bottom: var(--spacing-2xl);
  }

  .writing-entry-input {
    font-size: 15px;
    padding: 14px 16px;
    padding-bottom: 52px;
    min-height: 88px;
  }

  .writing-entry-footer {
    height: 36px;
    padding: 0 12px;
    bottom: 6px;
  }

  .writing-entry-time {
    font-size: 11px;
  }

  .writing-entry-submit {
    width: 26px;
    height: 26px;
  }
}

/* ========================================
   通用 Popover 样式
   设计理念：极简、低对比度、玻璃质感
   ======================================== */

.popover {
  position: fixed;
  z-index: 350;
  padding: 12px;
  min-width: 240px;
  max-width: 320px;

  /* glass 玻璃质感（标准等级）*/
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--glass-shadow), var(--glass-inset);

  /* 入场动画：仅 opacity + translateY，不使用 scale */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.popover.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Popover 标题 */
.popover-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* 日期选择器 */
.date-picker-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  outline: none;
  transition: all var(--transition-fast);
}

.date-picker-input:focus {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.date-picker-input::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
}

/* Popover 操作按钮 */
.popover-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.popover-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.popover-btn-primary {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.popover-btn-primary:hover {
  opacity: 0.85;
}

.popover-btn-secondary {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}

.popover-btn-secondary:hover {
  background-color: rgba(0, 0, 0, 0.10);
}

/* 范围设置 Popover */
.range-setting-section {
  margin-bottom: 16px;
}

.range-setting-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
  display: block;
}

.range-setting-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.range-setting-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  outline: none;
  min-width: 0;
}

.range-setting-input:focus {
  border-color: rgba(0, 0, 0, 0.15);
}

.range-setting-unit {
  font-size: 12px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* 快捷选项 */
.quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.quick-option-btn {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--color-text-secondary);
  background-color: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-option-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--color-text-primary);
}

.quick-option-btn.active {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

/* ========================================
   Popover 补充样式（日期跳转 & 范围设置）
   ======================================== */

.popover-content {
  display: flex;
  flex-direction: column;
}

.popover-section {
  margin-bottom: 8px;
}

.popover-section:last-child {
  margin-bottom: 0;
}

.popover-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.popover-date-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  outline: none;
  transition: all var(--transition-fast);
}

.popover-date-input:focus {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.popover-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
}

/* Popover 按钮（BEM 命名） */
.popover-btn--primary {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.popover-btn--primary:hover {
  opacity: 0.85;
}

.popover-btn--secondary {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}

.popover-btn--secondary:hover {
  background-color: rgba(0, 0, 0, 0.10);
}

/* Popover 选项列表 */
.popover-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popover-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.popover-option:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.popover-option--active {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.10);
}

/* ========================================
   深色日期跳转日历 Popover
   设计理念：深色、低对比、克制、叙事感
   ======================================== */

.date-jump-popover {
  position: fixed;
  z-index: 400;
  background-color: var(--color-bg-elevated-2, #1a1d21);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
              0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px;
  min-width: 240px;
  max-width: 300px;

  /* 入场动画 */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.date-jump-popover.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 日历头部 */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.cal-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary, #9ba5a8);
  letter-spacing: 0.5px;
}

.cal-nav {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-tertiary, #6e6860);
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}

.cal-nav:hover:not(:disabled) {
  color: var(--color-text-secondary, #9ba5a8);
  background-color: rgba(255, 255, 255, 0.06);
}

.cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 星期头 */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}

.cal-weekday {
  font-size: 10px;
  color: var(--color-text-tertiary, #6e6860);
  text-align: center;
  padding: 4px 0;
  letter-spacing: 0.5px;
}

/* 日期网格 */
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-secondary, #9ba5a8);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}

.cal-day:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary, #e8e0d5);
}

.cal-day:active:not(:disabled) {
  transform: scale(0.95);
}

/* 非当月日期 */
.cal-day--other {
  color: var(--color-text-tertiary, #6e6860);
  opacity: 0.5;
}

.cal-day--other:hover:not(:disabled) {
  opacity: 0.8;
}

/* 今天 */
.cal-day--today {
  color: var(--color-text-primary, #e8e0d5);
  border-color: rgba(255, 255, 255, 0.15);
  font-weight: 500;
}

/* 未来日期（禁用） */
.cal-day--future {
  color: var(--color-text-tertiary, #6e6860);
  opacity: 0.25;
  cursor: not-allowed;
}

/* 底部"今天"按钮 */
.cal-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: center;
}

.cal-today-btn {
  font-size: 11px;
  color: var(--color-text-tertiary, #6e6860);
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: 0.5px;
}

.cal-today-btn:hover {
  color: var(--color-text-secondary, #9ba5a8);
  background-color: rgba(255, 255, 255, 0.04);
}

/* 浅色模式覆盖 */
:root:not([data-theme="dark"]) .date-jump-popover {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
              0 4px 12px rgba(0, 0, 0, 0.08);
}

:root:not([data-theme="dark"]) .cal-title {
  color: var(--color-text-secondary);
}

:root:not([data-theme="dark"]) .cal-nav {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .cal-nav:hover:not(:disabled) {
  color: var(--color-text-secondary);
  background-color: rgba(0, 0, 0, 0.04);
}

:root:not([data-theme="dark"]) .cal-weekday {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .cal-day {
  color: var(--color-text-secondary);
}

:root:not([data-theme="dark"]) .cal-day:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-text-primary);
}

:root:not([data-theme="dark"]) .cal-day--other {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .cal-day--today {
  color: var(--color-text-primary);
  border-color: rgba(0, 0, 0, 0.15);
}

:root:not([data-theme="dark"]) .cal-day--future {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .cal-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

:root:not([data-theme="dark"]) .cal-today-btn {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .cal-today-btn:hover {
  color: var(--color-text-secondary);
  background-color: rgba(0, 0, 0, 0.04);
}

/* 深色模式媒体查询 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .date-jump-popover {
    background-color: var(--color-bg-elevated-2, #1a1d21);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* ========================================
   时间编辑 Popover
   ======================================== */

.time-edit-popover {
  position: fixed;
  z-index: 400;
  background-color: var(--color-bg-elevated-2, #1a1d21);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px;

  /* 入场动画 */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.time-edit-popover.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.time-edit-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-edit-input {
  width: 90px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary, #e8e0d5);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  outline: none;
  transition: all var(--transition-fast);
}

.time-edit-input:focus {
  border-color: rgba(255, 255, 255, 0.20);
  background-color: rgba(255, 255, 255, 0.08);
}

.time-edit-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0.5;
  cursor: pointer;
}

.time-edit-now {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--color-text-tertiary, #6e6860);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.time-edit-now:hover {
  color: var(--color-text-secondary, #9ba5a8);
  background-color: rgba(255, 255, 255, 0.06);
}

/* 浅色模式 */
:root:not([data-theme="dark"]) .time-edit-popover {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.06);
}

:root:not([data-theme="dark"]) .time-edit-input {
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}

:root:not([data-theme="dark"]) .time-edit-input:focus {
  border-color: rgba(0, 0, 0, 0.20);
  background-color: rgba(0, 0, 0, 0.02);
}

:root:not([data-theme="dark"]) .time-edit-input::-webkit-calendar-picker-indicator {
  filter: none;
}

:root:not([data-theme="dark"]) .time-edit-now:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

:root:not([data-theme="dark"]) .writing-entry-time-btn:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

:root:not([data-theme="dark"]) .writing-entry-weather-btn:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background-color: rgba(0, 0, 0, 0.04);
}

/* ========================================
   天气选择 Popover
   ======================================== */

.weather-select-popover {
  position: fixed;
  z-index: 400;
  padding: 8px;

  /* glass 玻璃质感（标准等级）*/
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--glass-shadow), var(--glass-inset);

  /* 入场动画：仅 opacity + translateY，不使用 scale */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.weather-select-popover.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.weather-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.weather-option {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}

.weather-option:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
}

.weather-option--active {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.15);
}

.weather-option-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-secondary);
}

/* 浅色模式 */
:root:not([data-theme="dark"]) .weather-select-popover {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.06);
}

:root:not([data-theme="dark"]) .weather-option:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

:root:not([data-theme="dark"]) .weather-option--active {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.10);
}

.popover-option-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.popover-option-desc {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

/* ========================================
   深色模式：新增元素适配
   ======================================== */

[data-theme="dark"] .calendar-range-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .calendar-jump-section {
  border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .calendar-jump-btn {
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .calendar-jump-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .writing-entry-date-hint {
  background-color: rgba(122, 155, 184, 0.12);
  border-color: rgba(122, 155, 184, 0.18);
}

[data-theme="dark"] .date-hint-text {
  color: #8db0d0;
}

[data-theme="dark"] .date-hint-clear:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .popover {
  background-color: rgba(30, 35, 40, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
              0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .popover-title {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .date-picker-input {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-primary);
}

[data-theme="dark"] .date-picker-input:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .date-picker-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

[data-theme="dark"] .popover-btn-primary {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

[data-theme="dark"] .popover-btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .popover-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .range-setting-input {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .range-setting-input:focus {
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .quick-options {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .quick-option-btn {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .quick-option-btn:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .quick-option-btn.active {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

/* 深色模式 Popover 补充样式 */
[data-theme="dark"] .popover-date-input {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-primary);
}

[data-theme="dark"] .popover-date-input:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .popover-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

[data-theme="dark"] .popover-btn--primary {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

[data-theme="dark"] .popover-btn--secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .popover-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .popover-option:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .popover-option--active {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* prefers-color-scheme 媒体查询适配 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .calendar-range-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme="light"]) .calendar-jump-section {
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme="light"]) .calendar-jump-btn {
    border-color: rgba(255, 255, 255, 0.10);
  }

  :root:not([data-theme="light"]) .calendar-jump-btn:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.04);
  }

  :root:not([data-theme="light"]) .writing-entry-date-hint {
    background-color: rgba(122, 155, 184, 0.12);
    border-color: rgba(122, 155, 184, 0.18);
  }

  :root:not([data-theme="light"]) .date-hint-text {
    color: #8db0d0;
  }

  :root:not([data-theme="light"]) .popover {
    background-color: rgba(30, 35, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
                0 2px 8px rgba(0, 0, 0, 0.25);
  }

  :root:not([data-theme="light"]) .popover-title {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .date-picker-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
  }

  :root:not([data-theme="light"]) .date-picker-input:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme="light"]) .date-picker-input::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }

  :root:not([data-theme="light"]) .popover-btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .popover-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  :root:not([data-theme="light"]) .range-setting-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
  }

  :root:not([data-theme="light"]) .quick-options {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .quick-option-btn {
    background-color: rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme="light"]) .quick-option-btn:hover {
    background-color: rgba(255, 255, 255, 0.10);
  }

  /* prefers-color-scheme Popover 补充样式 */
  :root:not([data-theme="light"]) .popover-date-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--color-text-primary);
  }

  :root:not([data-theme="light"]) .popover-date-input:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme="light"]) .popover-date-input::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }

  :root:not([data-theme="light"]) .popover-btn--primary {
    background-color: var(--color-text-primary);
    color: var(--color-bg-primary);
  }

  :root:not([data-theme="light"]) .popover-btn--secondary {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
  }

  :root:not([data-theme="light"]) .popover-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  :root:not([data-theme="light"]) .popover-option:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme="light"]) .popover-option--active {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

/* ========================================
   Wheel Picker - 统一滚轮选择器
   ======================================== */

/* Picker 卡片容器 - glass 标准等级 */
.picker-card {
  position: fixed;
  z-index: 500;
  overflow: hidden;
  min-width: 200px;

  /* glass 玻璃质感（标准等级）*/
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--glass-shadow), var(--glass-inset);

  /* 入场动画：仅 opacity + translateY，不使用 scale */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.picker-card--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.picker-card--date {
  min-width: 260px;
}

.picker-card--time {
  min-width: 180px;
}

/* Picker 头部 */
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-border);
}

.picker-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary, #9ba5a8);
  font-variant-numeric: tabular-nums;
}

.picker-close {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-tertiary, #6e6860);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}

.picker-close:hover {
  color: var(--color-text-secondary);
  background-color: rgba(255, 255, 255, 0.08);
}

/* 滚轮区域 */
.picker-wheels {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  gap: 4px;
}

/* 时间模式分隔符 */
.picker-separator {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-tertiary, #6e6860);
  padding: 0 4px;
  user-select: none;
}

/* 单列滚轮 */
.wheel-column {
  position: relative;
  display: flex;
  align-items: center;
}

.wheel-viewport {
  position: relative;
  height: 108px; /* 36px * 3 行 */
  width: 56px;
  overflow: hidden;
  cursor: grab;
}

.wheel-viewport:active {
  cursor: grabbing;
}

.wheel-content {
  position: absolute;
  top: 36px; /* 偏移一行，让选中项在中间 */
  left: 0;
  right: 0;
  will-change: transform;
}

.wheel-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary, #6e6860);
  transition: color 150ms ease, opacity 150ms ease;
  cursor: pointer;
  user-select: none;
}

.wheel-item:hover {
  color: var(--color-text-secondary);
}

.wheel-item--selected {
  color: var(--color-text-primary, #e8e0d5);
  font-weight: 500;
}

/* 选中带（中线高亮） */
.wheel-highlight {
  position: absolute;
  top: 36px;
  left: 2px;
  right: 2px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  pointer-events: none;
}

/* 渐隐遮罩 */
.wheel-mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  pointer-events: none;
}

.wheel-mask--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg-elevated-2, #1a1d21) 0%,
    rgba(26, 29, 33, 0.6) 60%,
    transparent 100%
  );
}

.wheel-mask--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--color-bg-elevated-2, #1a1d21) 0%,
    rgba(26, 29, 33, 0.6) 60%,
    transparent 100%
  );
}

/* 列标签（年/月/日） */
.wheel-label {
  font-size: 12px;
  color: var(--color-text-tertiary, #6e6860);
  margin-left: 2px;
  user-select: none;
}

/* Picker 底部 */
.picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--glass-border);
}

/* 快捷按钮（今天/现在） */
.picker-quick {
  font-size: 12px;
  color: var(--color-text-tertiary, #6e6860);
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.picker-quick:hover {
  color: var(--color-text-secondary);
  background-color: rgba(255, 255, 255, 0.06);
}

/* 确认按钮 */
.picker-confirm {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.picker-confirm svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary, #9ba5a8);
  transition: color var(--transition-fast);
}

.picker-confirm:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

.picker-confirm:hover svg {
  color: var(--color-text-primary);
}

.picker-confirm:active {
  transform: scale(0.95);
}

/* ========================================
   Wheel Picker - 浅色模式
   ======================================== */

:root:not([data-theme="dark"]) .picker-card {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

:root:not([data-theme="dark"]) .picker-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root:not([data-theme="dark"]) .picker-title {
  color: var(--color-text-secondary);
}

:root:not([data-theme="dark"]) .picker-close:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

:root:not([data-theme="dark"]) .picker-separator {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .wheel-item {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .wheel-item:hover {
  color: var(--color-text-secondary);
}

:root:not([data-theme="dark"]) .wheel-item--selected {
  color: var(--color-text-primary);
}

:root:not([data-theme="dark"]) .wheel-highlight {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

:root:not([data-theme="dark"]) .wheel-mask--top {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.6) 60%,
    transparent 100%
  );
}

:root:not([data-theme="dark"]) .wheel-mask--bottom {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.6) 60%,
    transparent 100%
  );
}

:root:not([data-theme="dark"]) .wheel-label {
  color: var(--color-text-tertiary);
}

:root:not([data-theme="dark"]) .picker-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}

:root:not([data-theme="dark"]) .picker-quick:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

:root:not([data-theme="dark"]) .picker-confirm {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}

:root:not([data-theme="dark"]) .picker-confirm:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

:root:not([data-theme="dark"]) .picker-confirm svg {
  color: var(--color-text-secondary);
}

:root:not([data-theme="dark"]) .picker-confirm:hover svg {
  color: var(--color-text-primary);
}

/* 深色模式媒体查询内的样式 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wheel-mask--top {
    background: linear-gradient(
      to bottom,
      var(--color-bg-elevated-2, #1a1d21) 0%,
      rgba(26, 29, 33, 0.6) 60%,
      transparent 100%
    );
  }

  :root:not([data-theme="light"]) .wheel-mask--bottom {
    background: linear-gradient(
      to top,
      var(--color-bg-elevated-2, #1a1d21) 0%,
      rgba(26, 29, 33, 0.6) 60%,
      transparent 100%
    );
  }
}


/* ========================================
   Continuous Timeline Flow
   连续时间流布局系统
   ======================================== */

/* 时间轴脊柱位置变量 */
:root {
  --spine-left: 32px;           /* 脊柱距离左边距 */
  --spine-width: 1px;           /* 脊柱线宽 */
  --content-left: 48px;         /* 内容区距离左边距 */
  --dot-size-year: 10px;        /* 年份圆点尺寸 */
  --dot-size-month: 7px;        /* 月份圆点尺寸 */
  --dot-size-day: 5px;          /* 日期圆点尺寸 */
  --dot-size-entry: 4px;        /* 记录圆点尺寸 */
}

/* ----------------------------------------
   TimelineRow 基础布局
   所有行共享同一布局结构
   ---------------------------------------- */
.timeline-row {
  display: flex;
  align-items: flex-start;
  position: relative;
  min-height: 24px;
}

/* 时间轴脊柱容器 */
.timeline-spine {
  position: absolute;
  left: var(--spine-left);
  top: 0;
  bottom: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 脊柱竖线（通过伪元素实现连续线） */
.timeline-row::before {
  content: '';
  position: absolute;
  left: var(--spine-left);
  top: 0;
  bottom: 0;
  width: var(--spine-width);
  background: var(--timeline-color);
  transform: translateX(-50%);
  pointer-events: none;
}

/* 首行：脊柱从圆点开始 */
.timeline-row:first-child::before {
  top: 12px;
}

/* 末行：脊柱到圆点结束 */
.timeline-row:last-child::before {
  bottom: auto;
  height: 12px;
}

/* 时间轴圆点（基础样式） */
.timeline-dot {
  position: relative;
  top: 8px;  /* 垂直居中偏移 */
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  opacity: 0.35;
  z-index: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 内容区域 */
.timeline-content {
  margin-left: var(--content-left);
  flex: 1;
  min-width: 0;  /* 防止溢出 */
}

/* ----------------------------------------
   Year Marker - 年份标记
   双环圆点，最大留白
   ---------------------------------------- */
.timeline-row--year {
  margin-top: 56px;
  margin-bottom: 16px;
  padding: 8px 0;
}

/* 首个年份不需要上方留白 */
.timeline-row--year:first-child {
  margin-top: 0;
}

/* 年份圆点：双环效果 */
.timeline-dot--year {
  width: var(--dot-size-year);
  height: var(--dot-size-year);
  background: transparent;
  border: 2px solid var(--color-text-tertiary);
  opacity: 0.4;
  top: 4px;
}

/* 年份文字 */
.marker-year {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  opacity: 0.6;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------
   Month Marker - 月份标记
   中等圆点，中等留白
   ---------------------------------------- */
.timeline-row--month {
  margin-top: 32px;
  margin-bottom: 12px;
  padding: 4px 0;
}

/* 如果月份紧跟年份，减少上方留白 */
.timeline-row--year + .timeline-row--month {
  margin-top: 8px;
}

/* 月份圆点 */
.timeline-dot--month {
  width: var(--dot-size-month);
  height: var(--dot-size-month);
  background: var(--color-text-tertiary);
  opacity: 0.35;
  top: 6px;
}

/* 月份文字 */
.marker-month {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: 0.7;
  letter-spacing: 1px;
}

/* 月份后的年份（辅助信息） */
.marker-month-year {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.4;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

/* ----------------------------------------
   Day Marker - 日期标记
   小圆点，适度留白
   ---------------------------------------- */
.timeline-row--day {
  margin-top: 18px;
  margin-bottom: 8px;
  padding: 2px 0;
}

/* 如果日期紧跟月份，减少上方留白 */
.timeline-row--month + .timeline-row--day {
  margin-top: 10px;
}

/* 同月内跨天：适度留白 */
.timeline-row--entry + .timeline-row--day {
  margin-top: 18px;
}

/* 日期圆点 */
.timeline-dot--day {
  width: var(--dot-size-day);
  height: var(--dot-size-day);
  background: var(--color-text-secondary);
  opacity: 0.4;
  top: 8px;
}

/* 今日圆点：高亮 */
.timeline-dot--today {
  background: var(--color-accent, #6366f1);
  opacity: 0.8;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
}

/* 日期数字 */
.marker-day {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: 0.8;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* 星期 */
.marker-weekday {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  opacity: 0.5;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

/* 特殊日期徽章（生日、纪念日） */
.marker-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  letter-spacing: 0.5px;
}

.marker-badge--birthday {
  background: var(--glass-weak-bg);
  border: 1px solid var(--color-birthday);
  color: var(--color-birthday);
  opacity: 0.8;
}

.marker-badge--anniversary {
  background: var(--glass-weak-bg);
  border: 1px solid var(--color-anniversary);
  color: var(--color-anniversary);
  opacity: 0.8;
}

/* 今日行高亮 */
.timeline-row--today .marker-day {
  color: var(--color-accent, #6366f1);
  opacity: 1;
  font-weight: 500;
}

.timeline-row--today .marker-weekday {
  color: var(--color-accent, #6366f1);
  opacity: 0.7;
}

/* 生日行 */
.timeline-row--birthday {
  margin-top: 40px;
  margin-bottom: 12px;
}

.timeline-row--birthday .timeline-dot--day {
  background: var(--color-birthday);
  opacity: 0.8;
  width: 6px;
  height: 6px;
}

.timeline-row--birthday .marker-day {
  color: var(--color-birthday);
  opacity: 1;
  font-weight: 500;
}

/* 纪念日行 */
.timeline-row--anniversary {
  margin-top: 24px;
  margin-bottom: 10px;
}

.timeline-row--anniversary .timeline-dot--day {
  background: var(--color-anniversary);
  opacity: 0.7;
}

.timeline-row--anniversary .marker-day {
  color: var(--color-anniversary);
  opacity: 0.9;
}

/* ----------------------------------------
   Entry Row - 记录行
   最小圆点，紧凑间距
   ---------------------------------------- */
.timeline-row--entry {
  margin-top: 0;
  margin-bottom: 12px;
}

/* DayMarker 到第一条 Entry */
.timeline-row--day + .timeline-row--entry {
  margin-top: 10px;
}

/* Entry 之间 */
.timeline-row--entry + .timeline-row--entry {
  margin-top: 0;
}

/* 记录圆点 */
.timeline-dot--entry {
  width: var(--dot-size-entry);
  height: var(--dot-size-entry);
  background: var(--color-text-tertiary);
  opacity: 0.25;
  top: 20px;  /* 对齐卡片内时间戳 */
}

/* 悬停时圆点增强 */
.timeline-row--entry:hover .timeline-dot--entry {
  opacity: 0.5;
}

/* ----------------------------------------
   Entry Card - 记录卡片
   玻璃质感，替代原 .entry-item
   ---------------------------------------- */
.entry-card {
  display: flex;
  cursor: pointer;
  position: relative;

  /* 卡片布局 */
  padding: 12px 16px;
  border-radius: 10px;
  box-sizing: border-box;

  /* glass-weak 玻璃质感 */
  background-color: var(--glass-weak-bg);
  backdrop-filter: blur(var(--glass-weak-blur));
  -webkit-backdrop-filter: blur(var(--glass-weak-blur));
  border: 1px solid var(--glass-weak-border);
  box-shadow: var(--glass-weak-shadow);

  /* 过渡 */
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.entry-card:hover {
  background-color: var(--glass-weak-bg-hover);
  border-color: var(--glass-weak-border-hover);
  box-shadow: var(--glass-weak-shadow-hover);
}

/* 短句卡片 */
.entry-card--short {
  /* 可以稍微减少 padding */
}

.entry-card--short .entry-content {
  color: var(--content-color-short);
  line-height: var(--line-height-short);
}

/* 长文卡片 */
.entry-card--long {
  /* 长文可以增加底部间距 */
}

.timeline-row--entry:has(.entry-card--long) {
  margin-bottom: 16px;
}

.timeline-row--entry:has(.entry-card--short) {
  margin-bottom: 10px;
}

/* 记录时间戳 */
.entry-card .entry-meta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 50px;
  flex-shrink: 0;
}

.entry-card .entry-time {
  font-size: var(--font-size-time);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: right;
  padding-top: 2px;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--transition-slow);
}

.entry-card:hover .entry-time {
  opacity: var(--time-opacity-hover) !important;
}

/* 记录天气 */
.entry-card .entry-weather {
  font-size: 10px;
  opacity: 0.35;
  padding-top: 3px;
  transition: opacity var(--transition-fast);
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.entry-card:hover .entry-weather {
  opacity: 0.7;
}

/* 记录正文 */
.entry-card .entry-content {
  flex: 1;
  margin-left: 16px;
  font-size: var(--font-size-content);
  line-height: var(--line-height-normal);
  color: var(--content-color-normal);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ----------------------------------------
   Ghost Day Marker - 幽灵日期标记
   跳转到无记录日期时显示
   ---------------------------------------- */
.timeline-row--ghost {
  opacity: 0.5;
}

.timeline-dot--ghost {
  border: 1px dashed var(--color-text-tertiary);
  background: transparent !important;
  opacity: 0.4;
}

.marker-ghost-hint {
  font-size: 10px;
  color: var(--color-text-tertiary);
  opacity: 0.5;
  margin-left: 8px;
  font-style: italic;
}

/* ----------------------------------------
   Continue Writing - 继续书写
   ---------------------------------------- */
.timeline-row--continue {
  margin-top: 24px;
  margin-bottom: 40px;
  padding: 8px 0;
}

.timeline-dot--continue {
  width: 6px;
  height: 6px;
  background: transparent;
  border: 1.5px dashed var(--color-text-tertiary);
  opacity: 0.3;
  top: 10px;
}

.continue-writing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color var(--transition-normal),
    opacity var(--transition-normal);
  opacity: 0.4;
}

.continue-writing:hover {
  background-color: var(--glass-weak-bg-hover);
  opacity: 0.7;
}

.continue-writing-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-tertiary);
  opacity: 0.6;
}

.continue-writing-text {
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.5px;
}

/* ----------------------------------------
   Highlight Animation - 跳转高亮
   ---------------------------------------- */
.timeline-row--highlight {
  animation: timeline-highlight 2s ease-out;
}

@keyframes timeline-highlight {
  0% {
    background-color: rgba(99, 102, 241, 0.15);
  }
  100% {
    background-color: transparent;
  }
}

/* Active 高亮（联动悬停）*/
.timeline-row--active {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

:root:not([data-theme="dark"]) .timeline-row--active {
  background-color: rgba(0, 0, 0, 0.02);
}

/* ----------------------------------------
   响应式调整
   ---------------------------------------- */
@media (max-width: 767px) {
  :root {
    --spine-left: 24px;
    --content-left: 40px;
  }

  .timeline-row--year {
    margin-top: 40px;
  }

  .timeline-row--month {
    margin-top: 24px;
  }

  .entry-card {
    padding: 10px 12px;
  }

  .entry-card .entry-meta {
    width: 42px;
  }

  .entry-card .entry-content {
    margin-left: 12px;
  }
}

/* ----------------------------------------
   浅色模式适配
   ---------------------------------------- */
:root:not([data-theme="dark"]) .timeline-dot--year {
  border-color: var(--color-text-secondary);
  opacity: 0.3;
}

:root:not([data-theme="dark"]) .timeline-dot--month {
  background: var(--color-text-secondary);
  opacity: 0.25;
}

:root:not([data-theme="dark"]) .timeline-dot--day {
  background: var(--color-text-secondary);
  opacity: 0.3;
}

:root:not([data-theme="dark"]) .timeline-dot--entry {
  opacity: 0.2;
}

:root:not([data-theme="dark"]) .marker-year {
  opacity: 0.5;
}

:root:not([data-theme="dark"]) .marker-month {
  opacity: 0.6;
}

:root:not([data-theme="dark"]) .marker-day {
  opacity: 0.7;
}