/* ============================================
   Zendaily 花笺皮肤适配层（Z-20260911-04 改动C/D）
   职责：
   1) 花笺 class → 现有 class 映射（短文区/单词卡片/分类浏览器/评测区/页头）
   2) 节气标题区：竖体放左上角（主理人明确要求），覆盖 floral-theme.css 的居中默认
   3) 暗色模式保护：html[data-theme="dark"] 下维持原暗色配色，花笺只作用于亮色模式
   4) 移动端适配（改动D）
   加载顺序：必须在 template 内联 <style> 与 floral-theme.css 之后加载，确保覆盖生效
   ============================================ */

/* ---------- 节气标题区：竖体 · 左上角 ---------- */
.solar-term-header {
  position: fixed;
  top: 18px;
  left: 18px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: left;
  padding: 0;
  z-index: 20;              /* 高于 body::before(-1) 与常规内容，低于弹窗(9999)/主题按钮(999) */
  pointer-events: none;     /* 纯装饰，绝不拦截点击 */
}
.solar-term-title {
  font-size: 30px;          /* floral 默认 56px 为居中大标题，左上角竖排缩小 */
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--term-color, #3c4b5f);
}
.solar-term-keyword {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-secondary, #6a7585);
  opacity: 0.85;
}
.solar-term-keyword-en {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted, #8a9aaa);
  opacity: 0.7;
}

/* ---------- 以下映射仅作用于亮色模式；暗色模式保持原配色零影响 ---------- */
html:not([data-theme="dark"]) .header h1,
html:not([data-theme="dark"]) .header .date {
  color: var(--term-color, #3c4b5f);
  text-shadow: none;
}
html:not([data-theme="dark"]) .header .theme {
  background: var(--accent-light, rgba(180,220,210,0.5));
  color: var(--accent, #3c6b55);
  border: 1px solid var(--border, rgba(140,155,170,0.25));
}
html:not([data-theme="dark"]) .streak-badge {
  background: rgba(255,255,255,0.45);
  color: var(--term-color, #3c4b5f);
}
html:not([data-theme="dark"]) .streak-badge .streak-num { color: var(--accent, #3c6b55); }
html:not([data-theme="dark"]) .share-card-btn {
  background: rgba(255,255,255,0.55);
  border-color: var(--border, rgba(140,155,170,0.25));
  color: var(--term-color, #3c4b5f);
}
html:not([data-theme="dark"]) .date-picker-bar .dp-label { color: var(--term-color, #3c4b5f); }
html:not([data-theme="dark"]) .dp-select {
  background: rgba(255,255,255,0.75);
  border-color: var(--border, rgba(140,155,170,0.25));
  color: var(--text-primary, #2d3748);
}
html:not([data-theme="dark"]) .dp-btn {
  background: rgba(255,255,255,0.6);
  border-color: var(--border, rgba(140,155,170,0.25));
  color: var(--accent, #3c6b55);
}
html:not([data-theme="dark"]) .dp-btn.dp-back { background: var(--accent-light, rgba(180,220,210,0.5)); }

/* 内容卡片：宣纸质感 */
html:not([data-theme="dark"]) .section {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border, rgba(140,155,170,0.25));
  box-shadow: 0 6px 24px rgba(60,75,95,0.08);
}
html:not([data-theme="dark"]) .section-title {
  font-size: 1.3rem;
  color: var(--term-color, #3c4b5f);
  border-bottom: 1px solid var(--border, rgba(140,155,170,0.25));
}
html:not([data-theme="dark"]) .footer { color: var(--text-secondary, #6a7585); }
html:not([data-theme="dark"]) .footer p { color: var(--text-secondary, #6a7585); }

/* 单词卡片：花笺 word-item 左侧色条样式 */
html:not([data-theme="dark"]) .word-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border, rgba(140,155,170,0.25));
  border-left: 3px solid var(--accent, #3c6b55);
}
html:not([data-theme="dark"]) .word-card .word {
  font-family: 'Noto Serif', Georgia, 'Noto Serif SC', serif;
  color: var(--text-primary, #2d3748);
}
html:not([data-theme="dark"]) .word-card .phonetic { color: var(--accent, #3c6b55); }
html:not([data-theme="dark"]) .word-card .meaning { color: var(--text-secondary, #6a7585); }
html:not([data-theme="dark"]) .word-card .example {
  background: rgba(255,255,255,0.7);
  border-left-color: var(--accent, #3c6b55);
}
html:not([data-theme="dark"]) .card-action-btn {
  border-color: var(--border, rgba(140,155,170,0.25));
  color: var(--text-secondary, #6a7585);
}
html:not([data-theme="dark"]) .card-action-btn:hover { background: var(--accent-light, rgba(180,220,210,0.5)); }

/* 短文区：衬线正文 + 花笺高亮 */
html:not([data-theme="dark"]) .story-box {
  font-family: 'Noto Serif', Georgia, 'Noto Serif SC', serif;
  background: rgba(255,255,255,0.72);
  color: var(--text-primary, #2d3748);
}
html:not([data-theme="dark"]) .story-box .highlight {
  background: var(--accent-light, rgba(180,220,210,0.5));
  color: var(--accent, #3c6b55);
  font-weight: 600;
}
html:not([data-theme="dark"]) .story-box .translation {
  color: var(--text-secondary, #6a7585);
  border-top-color: var(--border, rgba(140,155,170,0.25));
}

/* 分类浏览器（Z-20260911-03）：配色协调，交互零改动 */
html:not([data-theme="dark"]) .hc-card {
  background: rgba(255,255,255,0.55);
  border-color: var(--border, rgba(140,155,170,0.25));
  color: var(--text-primary, #2d3748);
}
html:not([data-theme="dark"]) .hc-card:hover {
  background: var(--accent-light, rgba(180,220,210,0.5));
  border-color: var(--accent, #3c6b55);
}
html:not([data-theme="dark"]) .hc-card.active {
  background: var(--accent, #3c6b55);
  border-color: var(--accent, #3c6b55);
  color: #fff;
  box-shadow: 0 4px 12px rgba(60,107,85,0.25);
}
html:not([data-theme="dark"]) .hc-item { background: rgba(255,255,255,0.55); }
html:not([data-theme="dark"]) .hc-item:hover { background: var(--accent-light, rgba(180,220,210,0.5)); }
html:not([data-theme="dark"]) .hc-item .hc-theme { color: var(--text-primary, #2d3748); }
html:not([data-theme="dark"]) .hc-item .hc-date { color: var(--text-muted, #8a9aaa); }

/* 评测区：按钮/评分卡配色协调（M0 限流逻辑零触碰） */
html:not([data-theme="dark"]) .record-btn.start {
  background: var(--accent-light, rgba(180,220,210,0.5));
  color: var(--accent, #3c6b55);
  border: 1px solid var(--border, rgba(140,155,170,0.25));
}
html:not([data-theme="dark"]) .record-btn.play {
  background: rgba(255,255,255,0.7);
  color: var(--accent, #3c6b55);
  border: 1px solid var(--border, rgba(140,155,170,0.25));
}
html:not([data-theme="dark"]) .record-btn.stop {
  background: var(--accent, #3c6b55);
  color: #fff;
}
html:not([data-theme="dark"]) .record-btn.recording { background: linear-gradient(135deg,#e74c3c 0%,#c0392b 100%); color:#fff; }
html:not([data-theme="dark"]) .status-text { color: var(--text-secondary, #6a7585); }
html:not([data-theme="dark"]) .score-card {
  background: linear-gradient(135deg, var(--accent, #3c6b55) 0%, var(--term-color, #3c4b5f) 100%);
}
html:not([data-theme="dark"]) .word-detail-box { background: rgba(255,255,255,0.7); }
html:not([data-theme="dark"]) .word-detail-box .wd-label { color: var(--text-primary, #2d3748); }

/* 里程碑弹窗：花笺主色 */
html:not([data-theme="dark"]) .milestone-card {
  background: linear-gradient(135deg, var(--accent, #3c6b55), var(--term-color, #3c4b5f));
  box-shadow: 0 20px 60px rgba(60,107,85,0.35);
}
html:not([data-theme="dark"]) .milestone-btn.share { color: var(--accent, #3c6b55); }

/* ---------- 暗色模式保护：花笺背景/遮罩不得侵入暗色 ---------- */
html[data-theme="dark"] body {
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
}
html[data-theme="dark"] body::before { content: none; }
html[data-theme="dark"] .solar-term-header {
  background: rgba(10,16,28,0.45);
  border-radius: 10px;
  padding: 10px 6px;
}
html[data-theme="dark"] .solar-term-title { color: #e6edf3; }
html[data-theme="dark"] .solar-term-keyword { color: #aebccb; }
html[data-theme="dark"] .solar-term-keyword-en { color: #8fa0b2; }

/* ---------- 移动端适配（改动D） ---------- */
@media (max-width: 768px) {
  body { background-attachment: scroll; }   /* 移动端 fixed 有性能问题，改 scroll */
  .solar-term-header { top: 10px; left: 10px; }
  .solar-term-title { font-size: 20px; letter-spacing: 4px; }
  .solar-term-keyword { font-size: 10px; letter-spacing: 2px; }
  .solar-term-keyword-en { font-size: 9px; }
}