/* ══════════════════════════════════════════════════════════════
   夜间模式（html.dark 时生效，18:00 ~ 06:00 自动切换）
   作用范围：页面全局，#diary-steps 卡片内部已隔离
   ══════════════════════════════════════════════════════════════ */

/* ── 银河层（Canvas，位于星星之下） ────────────────────────── */
#milky-way {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease;
}
html.dark #milky-way { opacity: 1; }

/* ── 夜间星空层 ────────────────────────────────────────────── */
#night-stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
html.dark #night-stars {
  opacity: 1;
}

.night-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: nightStarTwinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes nightStarTwinkle {
  0%, 100% { opacity: var(--lo, 0.1); transform: scale(1); }
  50%       { opacity: var(--hi, 0.7); transform: scale(1.35); }
}

/* ── 流星 ──────────────────────────────────────────────────── */
.shooting-star {
  position: absolute;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(180, 210, 255, 0.15) 40%,
    rgba(220, 235, 255, 0.75) 75%,
    rgba(255, 255, 255, 0.95) 100%
  );
  transform: rotate(var(--angle, -35deg));
  transform-origin: right center;
  animation: shootingStarFly var(--dur, 0.7s) ease-out forwards;
}
@keyframes shootingStarFly {
  0%   { opacity: 0;   transform: rotate(var(--angle, -35deg)) translateX(0); }
  8%   { opacity: 1; }
  100% { opacity: 0;   transform: rotate(var(--angle, -35deg)) translateX(-420px); }
}

/* ── 全局暗色变量 ──────────────────────────────────────────── */
html.dark {
  --bg:        #1a1510;
  --surface:   #231d15;
  --text:      #e8ddd0;
  --muted:     #7a6e62;
  --border:    #3a2e22;
  --accent-bg: #2a1e12;
}

/* ── 日记卡片内变量隔离：完整恢复亮色值，period 主题不受影响 ── */
html.dark #diary-steps {
  --bg:        #f5efe4;
  --surface:   #fdf8f1;
  --text:      #2d2420;
  --muted:     #8b7d72;
  --border:    #e4ddd6;
  --accent-bg: #f5ede3;
  color: var(--text); /* 显式继承重置后的深色，防止从 body 继承暗色文字 */
}

/* 卡片本身在暗色页面上显示为暖白色纸张 */
html.dark #diary-steps {
  background: rgba(253, 248, 241, 0.94);
  border-color: rgba(195, 172, 140, 0.40);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 1px 4px  rgba(0, 0, 0, 0.25);
}

/* ── 导航栏 ──────────────────────────────────────────────────── */
html.dark #app-nav {
  border-bottom-color: var(--border);
}
html.dark .nav-tab        { color: var(--muted); }
html.dark .nav-tab.active { color: var(--text); }

/* ── 通用按钮 ────────────────────────────────────────────────── */
html.dark .btn-skip {
  color: var(--muted);
  border-color: var(--border);
}

/* ── 通用卡片：暗色模式下背景透明，透出星空 ────────────────── */
html.dark .done-card,
html.dark .done-encounter,
html.dark .skip-placeholder,
html.dark .history-item,
html.dark .story-entry-card,
html.dark #social-panel,
html.dark #todo-panel,
html.dark #inspiration-panel,
html.dark .social-diary-card {
  background: rgba(255, 248, 235, 0.05) !important;
  border-color: rgba(255, 235, 200, 0.12) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 待办/灵感子项略深一点，和面板区分层次 */
html.dark .todo-item,
html.dark .insp-item {
  background: rgba(255, 248, 235, 0.06) !important;
  border-color: rgba(255, 235, 200, 0.10) !important;
}

/* ── 日历容器 ────────────────────────────────────────────────── */
html.dark #history-calendar-sidebar {
  background: rgba(255, 248, 235, 0.05);
  border-color: rgba(255, 235, 200, 0.12);
  box-shadow: 0 2px 14px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.dark .cal-weekday,
html.dark .cal-lunar {
  color: var(--muted);
}

/* 有记录的日期圆点背景：暗色版 */
html.dark .cal-cell.cal-has-entry.cal-score-1 .cal-day-num::after { background: #3a2020; }
html.dark .cal-cell.cal-has-entry.cal-score-2 .cal-day-num::after { background: #3a2a18; }
html.dark .cal-cell.cal-has-entry.cal-score-3 .cal-day-num::after { background: #383618; }
html.dark .cal-cell.cal-has-entry.cal-score-4 .cal-day-num::after { background: #1e3020; }
html.dark .cal-cell.cal-has-entry.cal-score-5 .cal-day-num::after { background: #1a2c30; }

/* hover 遮罩 */
html.dark .cal-cell.cal-has-entry:hover .cal-day-num::after { background: rgba(255,255,255,.06) !important; }

/* ── 重要日期侧栏 ────────────────────────────────────────────── */
html.dark #imp-sidebar,
html.dark #imp-date-form {
  background: rgba(255, 248, 235, 0.05);
  border-color: rgba(255, 235, 200, 0.12);
  box-shadow: 0 2px 14px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── 回顾卡片封面区（硬编码浅色背景） ──────────────────────── */
html.dark .score-card-1 { background: var(--surface); border-color: rgba(217, 88, 88, 0.25); }
html.dark .score-card-2 { background: var(--surface); border-color: rgba(224,132, 74, 0.25); }
html.dark .score-card-3 { background: var(--surface); border-color: rgba(201,160, 32, 0.25); }
html.dark .score-card-4 { background: var(--surface); border-color: rgba( 78,168, 78, 0.25); }
html.dark .score-card-5 { background: var(--surface); border-color: rgba( 58,157,181, 0.25); }
html.dark .score-card-1 .hi-cover { background: #3a2020; }
html.dark .score-card-2 .hi-cover { background: #3a2a18; }
html.dark .score-card-3 .hi-cover { background: #383618; }
html.dark .score-card-4 .hi-cover { background: #1e3020; }
html.dark .score-card-5 .hi-cover { background: #1a2c30; }

/* ── 故事 ────────────────────────────────────────────────────── */
html.dark .story-today-hint.done {
  background: #1a2c30;
  color: #6abcd4;
}
html.dark .sidebar-item {
  background: var(--surface);
  border-color: var(--border);
}

/* ── 亲密度徽章 ──────────────────────────────────────────────── */
html.dark .fav-badge[data-level="1"] { background: #2a2422; border-color: #4a4240; }
html.dark .fav-badge[data-level="2"] { background: #1e2e20; border-color: #3a5c3a; }
html.dark .fav-badge[data-level="3"] { background: #2e1e10; border-color: #6a4020; }
html.dark .fav-badge[data-level="4"] { background: #261a2e; border-color: #5a3a6a; }

/* ── 分隔线 ──────────────────────────────────────────────────── */
html.dark hr,
html.dark .divider {
  border-color: var(--border);
}

/* ── 输入框（日记卡片外） ────────────────────────────────────── */
html.dark textarea:not(#diary-steps textarea),
html.dark input[type="text"]:not(#diary-steps input),
html.dark input[type="number"]:not(#diary-steps input),
html.dark select:not(#diary-steps select) {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── 滚动条 ──────────────────────────────────────────────────── */
html.dark ::-webkit-scrollbar-track { background: var(--bg); }
html.dark ::-webkit-scrollbar-thumb { background: var(--border); }