/* 光觉研究所 · 内部观察工作台 · 主样式表
 * 视觉规范来源：光觉研究所内部品牌手册 V2.4
 * 调性：东方文人 · 米白金 · 双衬线 · 留白克制
 */

:root {
  /* === 光觉品牌色（来自手册 V2.4） === */
  --brand-cream: #F5F0E6;          /* 米白 · 主背景 */
  --brand-cream-warm: #EFE8D8;     /* 暖米白 · 次级背景 */
  --brand-cream-card: #FAF6EB;     /* 卡片暖底（长图文用） */
  --brand-gold: #B8A06E;           /* 灰金 · 万能色 */
  --brand-gold-deep: #8A7240;      /* 灰金深 · 重点装饰 */
  --brand-gold-soft: #D4C898;      /* 灰金浅 · 背景纹理 */
  --brand-ink: #1A1A1A;            /* 墨黑 · 主文字 */
  --brand-ink-soft: #2A2A2A;       /* 墨黑次 · 正文 */
  --brand-mute: #8A8276;           /* 暖灰 · 弱化文字 */
  --brand-blue: #14336E;           /* 觉察蓝 */
  --brand-yellow: #E8B923;         /* 觉知黄 */
  --brand-red: #BA2032;            /* 觉行红 */

  /* === 兼容旧变量名 → 桥接到光觉品牌色（让 358 个旧类自动换肤） === */
  --color-bg: var(--brand-cream);
  --color-surface: #ffffff;
  --color-surface-alt: var(--brand-cream-warm);
  --color-text: var(--brand-ink);
  --color-text-muted: #6A6A6A;
  --color-text-faint: var(--brand-mute);
  --color-border: rgba(184, 160, 110, 0.15);
  --color-border-strong: rgba(184, 160, 110, 0.30);
  --color-accent: var(--brand-gold-deep);
  --color-accent-soft: rgba(184, 160, 110, 0.10);
  --color-warn-soft: #faf3e3;
  --color-error: var(--brand-red);
  --color-success: #2D5F3F;
  --color-gift: #6b8a64;
  --color-challenge: #a07050;

  /* === 字体系统（双衬线） === */
  --font-cn: 'Noto Serif SC', 'Songti SC', 'STSong',
              'Source Han Serif SC', '思源宋体', 'SimSun', serif;
  --font-en: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-stack: var(--font-cn);

  /* === 尺寸 / 圆角 / 阴影 === */
  --touch-target-min: 44px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(184,160,110,0.08);
  --shadow-md: 0 8px 28px rgba(184,160,110,0.10);
  --shadow-gold: 0 12px 36px rgba(184,160,110,0.18);
}

body {
  font-family: var(--font-cn);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.3px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

::selection { background: var(--brand-gold); color: var(--brand-cream); }

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ===== 顶部头区 · 光觉品牌头 ===== */
.app-header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.brand-mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.brand-cn {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--brand-ink);
}
.brand-en {
  font-family: var(--font-en);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 2.5px;
  color: var(--brand-gold-deep);
  margin-top: 3px;
  text-transform: uppercase;
}
.brand-pill {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--brand-gold-deep);
  background: rgba(232, 185, 35, 0.12);
  border: 0.5px solid rgba(184, 160, 110, 0.4);
  padding: 3px 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* 旧 h1 兼容样式（避免遗留页面破样式） */
.app-header h1 {
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--brand-ink);
}

.app-header .today {
  margin-top: 22px;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--brand-gold-deep);
  text-transform: uppercase;
}

.app-header .motto {
  margin-top: 10px;
  color: var(--brand-mute);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-style: normal;
  line-height: 1.85;
}

@media (max-width: 600px) {
  .brand-cn { font-size: 14px; letter-spacing: 2px; }
  .brand-en { font-size: 9px; letter-spacing: 2px; }
  .brand-pill { display: none; }
  .app-header { padding-bottom: 24px; margin-bottom: 28px; }
  .app-header .today { font-size: 12px; }
}

/* ===== 主体 ===== */
.app-body { flex: 1; }
.placeholder, .loading {
  color: var(--color-text-muted);
  font-size: 15px;
  padding: 32px 0;
  line-height: 1.8;
  text-align: center;
}

/* ===== 通用按钮与链接 ===== */
.primary-btn,
button.primary-btn,
a.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 10px 22px;
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.primary-btn:hover { opacity: 0.92; }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.back-btn,
button.back-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 10px 18px;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
}
.back-btn:hover { background: var(--color-surface-alt); }

.back-link {
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
}
.back-link:hover { color: var(--color-accent); }

.text-link {
  color: var(--color-accent);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-color: var(--color-accent); }

.muted { color: var(--color-text-faint); font-size: 13px; }

.error-box {
  background: rgba(186,32,50,0.05);
  border: 1px solid rgba(186,32,50,0.20);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--color-error);
}
.error-box pre { white-space: pre-wrap; font-size: 13px; }

/* ===== 主页 ===== */
.home-page { display: flex; flex-direction: column; gap: 28px; }

.primary-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.18s ease;
  font-family: inherit;
}
.primary-entry:hover {
  box-shadow: var(--shadow-md);
}
.primary-entry .label {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent);
}
.primary-entry .hint {
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.secondary-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
}
.entry .label { font-size: 15px; font-weight: 500; }
.entry .hint  { font-size: 12px; color: var(--color-text-faint); margin-top: 4px; }
.entry.disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.utility-entries {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.reminder {
  font-size: 13px;
  color: var(--color-text-faint);
  padding: 10px 14px;
  background: var(--color-warn-soft);
  border-left: 3px solid #B8A06E;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ===== 步骤公共头区 ===== */
.step-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.step-header h2 {
  font-size: 22px;
  font-weight: 600;
}
.step-progress {
  display: flex;
  gap: 8px;
}
.step-dot {
  width: 28px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
}
.step-dot.current { background: var(--color-accent); }
.step-dot.done { background: var(--color-accent-soft); }

/* ===== 通用：取代 fieldset/legend 的 div 结构 =====
 * 阶段 11+：fieldset → div.form-section / div.lib-field 等
 *           legend → div.legend-text
 * 浏览器原生 fieldset+legend 会让 legend "骑"在边框上无法稳定控制；
 * 全部改为 div 结构后样式可控。
 */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-text {
  /* 段落小标题——颜色由各父类按需覆盖 */
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

/* ===== 表单 ===== */
.step-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.step-form .form-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  padding: 0;
}
.step-form  .legend-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label, .field > span {
  font-size: 13px;
  color: var(--color-text-muted);
}
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  min-height: var(--touch-target-min);
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.field textarea { resize: vertical; min-height: 80px; }

.form-lede {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.slot-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.step-actions .primary-btn { margin-left: auto; }

.step-context {
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.step-context .context-label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.step-context .context-text {
  font-size: 15px;
  margin-top: 4px;
  line-height: 1.7;
}

/* ===== Step 2 四瓶 ===== */
.bottle-slot {
  background: var(--color-surface-alt);
  padding: 14px 16px;
  border-radius: var(--radius-md);
}
.bottle-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bottle-input {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bottle-input span {
  font-size: 12px;
  color: var(--color-text-muted);
}
.bottle-input input {
  font-family: inherit;
  font-size: 18px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  width: 100%;
}
.bottle-preview {
  flex: 1 1 200px;
}
.preview-empty, .preview-missing {
  font-size: 13px;
  color: var(--color-text-faint);
  padding: 12px 0;
}
.preview-missing { color: var(--color-error); }

.bottle-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.bottle-preview-card .bottle-photo {
  width: 44px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
  /* 白底融入卡片背景 */
  mix-blend-mode: multiply;
}
.bottle-meta { flex: 1; min-width: 0; }
.bottle-name { font-size: 14px; font-weight: 500; }
.bottle-colors { font-size: 12px; color: var(--color-text-muted); }

/* ===== 色块组件 ===== */
.color-block {
  display: flex;
  flex-direction: column;
  width: 28px;
  height: 60px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}
.color-block .swatch { flex: 1; min-height: 24px; }
.color-block.size-small { width: 22px; height: 44px; }
.color-block.missing {
  font-size: 11px;
  color: var(--color-text-faint);
  background: var(--color-surface-alt);
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* ===== Step 4 数字三联输入 ===== */
.number-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.number-trio input {
  font-size: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Step 4 起卦方式 Tab */
.qigua-method-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.qigua-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  transition: border-color 0.15s ease;
}
.qigua-tab:hover { border-color: var(--color-accent-soft); }
.qigua-tab[data-active] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.qigua-tab .tab-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Step 4 时间起卦面板 */
.time-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface-alt);
  padding: 16px 20px;
  border-radius: var(--radius-md);
}
.time-display .td-label {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.time-display .td-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* Step 4 手动录入面板 */
.manual-yao .yao-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yao-row-input {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}
.yao-row-input span {
  font-size: 13px;
  color: var(--color-text-muted);
}
.yao-row-input select {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ===== 仪表盘 ===== */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dashboard-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-header h2 {
  font-size: 24px;
  font-weight: 600;
}
.dashboard-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--color-text-muted);
}

.block {
  background: var(--color-surface);
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.block h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.reference-note {
  margin-top: 14px;
  padding: 8px 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.scheme-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* 一、四瓶阵法 */
.bottles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.bottle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  text-align: center;
}
.bottle-card.missing { color: var(--color-error); }
.bottle-card .slot-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.bottle-card .bottle-photo {
  width: 80px;
  height: 130px;
  object-fit: contain;
  /* 让照片自带的白底融入卡片背景：白色与卡片的米色相乘 → 米色 */
  mix-blend-mode: multiply;
}
.bottle-card .bottle-name { font-size: 13px; font-weight: 500; }
.bottle-card .bottle-colors { font-size: 11px; }
.bottle-card.dual { background: linear-gradient(180deg, #EFE8D8 0%, #F5F0E6 100%); }

.dual-faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}
.dual-faces .face {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 11px;
}
.dual-faces .face.gift {
  background: rgba(107,138,100,0.12);
  border: 1px solid rgba(107,138,100,0.3);
  color: var(--color-gift);
}
.dual-faces .face.challenge {
  background: rgba(160,112,80,0.12);
  border: 1px solid rgba(160,112,80,0.3);
  color: var(--color-challenge);
}
.dual-faces .face-label { font-weight: 600; }
.dual-faces .face-hint { color: var(--color-text-faint); margin-top: 2px; }

/* 二、生命数字 */
.life-number-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.big-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  font-size: 56px;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.master-tag {
  position: absolute;
  bottom: -8px;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.life-number-row .meta {
  flex: 1;
  font-size: 14px;
}

/* 三、生命卦 */
.sheng-gua-row {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.big-symbol-block {
  text-align: center;
}
.big-symbol {
  font-size: 64px;
  line-height: 1;
  color: var(--color-accent);
}
.meta-name {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
}
.taiji-center {
  text-align: center;
}
.taiji-center .big-symbol { font-size: 48px; }

/* 四、事件卦 */
.event-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.event-guas {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.gua-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-alt);
  padding: 14px;
  border-radius: var(--radius-md);
  min-width: 130px;
}
.gua-card.hu { margin-left: 30px; opacity: 0.85; }
.gua-card .gua-role {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.gua-card .gua-name {
  font-size: 15px;
  font-weight: 500;
  margin-top: 4px;
}
.gua-card .gua-id { font-size: 11px; }
.event-guas .arrow {
  font-size: 20px;
  color: var(--color-text-muted);
}
.source-note { font-size: 12px; margin-top: 10px; }

/* 事件卦原典区 */
.event-classics {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cl-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}
.cl-row .cl-label {
  flex: 0 0 130px;
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cl-row .cl-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "PingFang SC", "STSong", serif;
}
.cl-row.highlight-moving {
  background: rgba(232,185,35,0.08);
  border-left: 3px solid #B8A06E;
}
.cl-row.highlight-moving .cl-label { color: #8A7240; }
.cl-fold {
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.cl-fold summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: 4px 0;
}
.cl-fold[open] summary { margin-bottom: 8px; }
.cl-fold .cl-row { background: transparent; padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.cl-fold .cl-row:last-child { border-bottom: 0; }

/* 六爻图 */
.yao-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.yao-diagram .yao-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.yao-diagram.trigram .yao-rows { gap: 6px; }
.yao-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 7px;
  gap: 6px;
}
.yao-row .line {
  background: var(--color-text);
  height: 6px;
  border-radius: 1px;
}
.yao-row.yang .line.solid { width: 100%; }
.yao-row.yin .line.broken-left,
.yao-row.yin .line.broken-right {
  width: calc(50% - 6px);
}
.yao-row.moving::after {
  content: '';
  position: absolute;
  right: -14px;
  width: 6px;
  height: 6px;
  background: var(--color-error);
  border-radius: 50%;
}
.yao-row .moving-dot { display: none; }

/* 五、咨询师现场观察 */
.observation-area {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #FAF6EB;
  resize: vertical;
}

/* 仪表盘空状态 */
.dashboard-empty {
  background: var(--color-surface);
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.dashboard-empty h2 { margin-bottom: 8px; font-size: 20px; }

.dashboard-footer-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

/* ===== 底部 ===== */
.app-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-size: 12px;
  text-align: right;
}

/* ===== 仪表盘 → 独立解读 CTA ===== */
.dashboard-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-accent-soft);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
}
.primary-btn.large {
  padding: 14px 28px;
  font-size: 16px;
}
.primary-btn.ghost {
  background: transparent;
  color: var(--color-accent);
}

/* ===== 五维独立解读 ===== */
.reading-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reading-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reading-header h2 {
  font-size: 20px;
  font-weight: 600;
}
.reading-progress {
  display: flex;
  gap: 8px;
}
.card-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.card-dot.current {
  background: var(--color-accent);
  color: #fff;
}
.card-dot.done {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.reading-isolation-note {
  background: rgba(232,185,35,0.10);
  border: 1px solid rgba(184,160,110,0.30);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: #8A7240;
  margin-top: 6px;
}

.reading-context {
  background: var(--color-surface-alt);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.reading-context h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.ctx-bottles-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.ctx-bottle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.ctx-bottle img {
  width: 56px;
  height: 90px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.ctx-label {
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 600;
}
.ctx-name { font-size: 12px; font-weight: 500; }
.ctx-colors { font-size: 11px; color: var(--color-text-muted); }
.ctx-note { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; font-style: italic; }
.ctx-scheme { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; font-style: italic; }
.big-symbol-inline { font-size: 22px; margin-right: 4px; color: var(--color-accent); }

/* 五维独立解读·启动问句提示卡 */
.starter-prompts {
  background: rgba(232,185,35,0.10);
  border: 1px solid rgba(184,160,110,0.30);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 6px;
}
.starter-prompts summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #8A7240;
  user-select: none;
}
.starter-prompts[open] summary { margin-bottom: 8px; }
.starter-prompts ol {
  margin: 0;
  padding-left: 22px;
  color: #6E5420;
  font-size: 14px;
  line-height: 1.85;
}
.starter-prompts li { margin: 4px 0; }

.reading-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.reading-form .form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  padding: 0;
}
.reading-form  .legend-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
}
.reading-form .form-prompt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.reading-form textarea, .reading-form input {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
}
.reading-form textarea:focus, .reading-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.dual-fieldset {
  background: linear-gradient(180deg, #EFE8D8 0%, #F5F0E6 100%);
  padding: 14px 16px;
  border-radius: var(--radius-md);
}
.dual-fieldset  .legend-text { color: var(--color-accent); }

.keyword-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.keyword-row input {
  text-align: center;
  font-size: 15px;
}

.reading-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ===== 交叉整合 ===== */
.cross-synthesis {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
}
.cs-keywords-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.cs-keywords-block h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.kw-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.kw-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kw-col-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.kw-cell {
  font-size: 13px;
  padding: 8px 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  text-align: center;
  word-break: break-all;
  white-space: normal;
  border: 1px solid transparent;
}
.cs-highlight-note {
  margin-top: 14px;
  padding: 8px 12px;
  background: var(--color-warn-soft);
  border-left: 3px solid #B8A06E;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.cs-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-zone {
  border: 1.5px solid;
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.cs-zone  .legend-text {
  font-size: 14px;
  font-weight: 700;
  padding: 0 8px;
}
.cs-zone .cs-prompt {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  line-height: 1.7;
}
.cs-zone textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.cs-zone.convergence   { border-color: #2D5F3F; background: rgba(45,95,63,0.05); }
.cs-zone.convergence  .legend-text { color: #2D5F3F; }
.cs-zone.complementary { border-color: #14336E; background: rgba(20,51,110,0.05); }
.cs-zone.complementary  .legend-text { color: #14336E; }
.cs-zone.divergence    { border-color: #BA2032; background: rgba(186,32,50,0.05); }
.cs-zone.divergence  .legend-text { color: #BA2032; }

.cs-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ===== 整合输出 ===== */
.integrated-output {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.io-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
}
.io-lede {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  background: var(--color-accent-soft);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}

.io-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.io-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.io-section  .legend-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  padding: 0;
}
.io-prompt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.io-section textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.io-section.homework { border-left: 4px solid #2D5F3F; }
.io-section.follow-up { border-left: 4px solid #B8A06E; background: #FAF6EB; }

.io-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.io-actions .back-btn { margin-right: auto; }
.io-end-note {
  font-size: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--color-warn-soft);
  border-left: 3px solid #B8A06E;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ===== 列表 / 详情公共 ===== */
.list-page, .detail-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.list-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
}
.list-subhead {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

/* 客户卡片 */
.client-cards { display: flex; flex-direction: column; gap: 10px; }
.client-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.client-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.client-card .client-name {
  font-size: 16px;
  font-weight: 500;
}
.client-card .client-meta {
  margin-top: 4px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-muted);
}

.client-detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* 时间线 */
.consult-timeline { display: flex; flex-direction: column; gap: 8px; }
.timeline-row {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.timeline-row:hover { border-color: var(--color-accent); }
.timeline-row .t-date {
  flex: 0 0 110px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.timeline-row .t-body { flex: 1; }
.timeline-row .t-topic { font-size: 14px; }
.timeline-row .t-meta {
  margin-top: 4px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 咨询列表行 */
.consult-cards { display: flex; flex-direction: column; gap: 8px; }
.consult-row {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
}
.consult-row:hover { border-color: var(--color-accent); }
.consult-row .cr-date {
  flex: 0 0 110px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.consult-row .cr-body { flex: 1; }
.consult-row .cr-title { font-size: 14px; font-weight: 500; }
.consult-row .cr-topic { font-weight: 400; color: var(--color-text-muted); }
.consult-row .cr-meta {
  margin-top: 4px;
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.link-danger {
  background: transparent;
  border: 0;
  color: var(--color-error);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
}
.link-danger:hover { background: rgba(177,66,47,0.08); }

/* Step 1 客户切换 */
.client-mode-toggle {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.client-mode-toggle .radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* 详情页 */
.detail-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.detail-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.detail-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--color-text);
}
.detail-section .preformatted {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.7;
  background: var(--color-surface-alt);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 4px 0;
}
.detail-section .kv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}
.detail-section .kv-list strong { color: var(--color-text-muted); margin-right: 6px; font-weight: 500; }
.reading-detail, .cs-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.reading-detail:first-of-type, .cs-detail:first-of-type { border-top: 0; }
.kw-line { font-size: 13px; margin-top: 6px; color: var(--color-text-muted); }

.detail-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* ===== 库视图（瓶库 / 卦象库）公共 ===== */
.library-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.search-input {
  flex: 1;
  min-width: 220px;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.search-input:focus { outline: none; border-color: var(--color-accent); }

/* 瓶库网格 */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.bottle-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.bottle-tile:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.bottle-tile .tile-photo {
  width: 60px;
  height: 100px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.bottle-tile .tile-num {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bottle-tile .tile-name { font-size: 13px; font-weight: 500; }
.bottle-tile .tile-colors { font-size: 11px; }

/* 瓶详情 */
.bottle-detail-page { display: flex; flex-direction: column; gap: 18px; }
.bottle-detail-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
}
.bottle-detail-top .detail-photo {
  width: 110px;
  height: 180px;
  object-fit: contain;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}
.bottle-detail-top .detail-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.swatch-mini {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--color-border-strong);
  vertical-align: middle;
  margin: 0 4px;
}

/* 卦象网格 */
.gua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.gua-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 14px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}
.gua-tile:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.gua-tile .gt-id {
  font-size: 18px;
  color: var(--color-accent);
  font-weight: 600;
}
.gua-tile .gt-name { font-size: 14px; font-weight: 500; }
.gua-tile .gt-pinyin { font-size: 11px; }
.gua-tile .gt-fill-mark {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 4px;
}
.gua-tile.filled .gt-fill-mark { color: var(--color-success); font-weight: 600; }
.gua-tile.filled { border-left: 3px solid var(--color-success); }

/* 库编辑表单 */
.library-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lib-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  /* 比之前更深一档的边框——避免和 textarea 内部边框混淆 */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.lib-field  .legend-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  padding: 0;
}
.lib-field .lib-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.lib-field input, .lib-field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  /* 内框比 .lib-field 外框淡一档，避免视觉竞争 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FAF6EB;
}
.lib-field input:focus, .lib-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #ffffff;
}
.lib-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.lib-actions .primary-btn { margin-left: auto; }

/* 仪表盘"参考卡"（生命数字 / 生命卦的现代意象）*/
.reference-card {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.reference-card .ref-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.reference-card .ref-core {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 6px;
  color: var(--color-text);
}
.reference-card .ref-modern {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}
.reference-card .reference-tip {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* 仪表盘上的现代意象区 */
.cl-row.modern-interp {
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
}
.cl-text-modern {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-text-modern .mi-core {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
.cl-text-modern .mi-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}
.cl-text-modern .reference-tip {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ===== 设置页 ===== */
.settings-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-page .radio-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-page .radio-row .radio {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.settings-page .danger-field {
  border-left: 3px solid var(--color-error);
  background: rgba(186,32,50,0.04);
}

/* ===== 客户回顾版 · 精美预览（可打印 / 可转图片）===== */
.cs-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}
.cs-export-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: 4px;
}

.cs-polished-wrapper {
  background: var(--color-surface-alt);
  padding: 24px;
  border-radius: var(--radius-md);
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

/* 这一块的样式必须自包含——会被原样抓取到 SVG foreignObject + 打印样式表里
   所以不依赖外部 :root 变量，也尽量用内联样式可解析的属性。*/
.cs-polished {
  width: 100%;
  max-width: 600px;
  background: #ffffff;
  padding: 36px 32px;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong',
               'Source Han Serif SC', '思源宋体', 'SimSun',
               -apple-system, BlinkMacSystemFont, serif;
  color: #1A1A1A;
  font-size: 15px;
  line-height: 1.85;
}
.cs-polished .cs-cover {
  border-bottom: 1px solid rgba(184,160,110,0.20);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.cs-polished .cs-greeting {
  font-size: 22px;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: 0.02em;
}
.cs-polished .cs-meta {
  font-size: 13px;
  color: #6A6A6A;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.cs-polished .cs-section {
  margin-bottom: 22px;
}
.cs-polished .cs-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: #8A7240;
  margin: 0 0 10px 0;
  letter-spacing: 0.02em;
  position: relative;
  padding-left: 12px;
}
.cs-polished .cs-section h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #8A7240;
  border-radius: 2px;
}
.cs-polished .cs-section p {
  margin: 0 0 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.cs-polished .cs-section p:last-child { margin-bottom: 0; }
.cs-polished .cs-empty {
  color: rgba(184,160,110,0.40);
  font-style: italic;
}
.cs-polished .cs-bottle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-polished .cs-bottle-li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  background: #EFE8D8;
  border-radius: 4px;
  font-size: 14px;
}
.cs-polished .cs-bottle-label {
  flex: 0 0 100px;
  font-weight: 600;
  color: #8A7240;
  font-size: 13px;
}
.cs-polished .cs-bottle-num {
  font-weight: 600;
  color: #1A1A1A;
}
.cs-polished .cs-bottle-name {
  color: #6A6A6A;
}
.cs-polished .cs-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(184,160,110,0.20);
  font-size: 12px;
  color: #8A8276;
  font-style: italic;
  line-height: 1.7;
}
.cs-polished .cs-footer p { margin: 2px 0; }

/* ===== 打印样式：仅显示客户版精美预览 ===== */
@media print {
  body { background: #ffffff !important; }
  body.printing-client-summary .app-header,
  body.printing-client-summary .app-footer,
  body.printing-client-summary .cs-header,
  body.printing-client-summary .cs-edit-form,
  body.printing-client-summary .cs-preview-fold:not([data-print-keep]),
  body.printing-client-summary details summary,
  body.printing-client-summary .back-link {
    display: none !important;
  }
  body.printing-client-summary .cs-polished-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.printing-client-summary .cs-polished {
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* 强制展开"客户实际看到的样子"区块 */
  body.printing-client-summary details.cs-preview-fold:first-of-type {
    display: block !important;
  }
  body.printing-client-summary details.cs-preview-fold:first-of-type > summary {
    display: none !important;
  }
  body.printing-client-summary details.cs-preview-fold:first-of-type > div {
    display: block !important;
  }
  @page {
    margin: 16mm 14mm;
    size: A4;
  }
}

/* ===== 加密备份页 ===== */
.backup-page { display: flex; flex-direction: column; gap: 18px; }
.backup-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
}
.backup-tabs .tab {
  background: transparent;
  border: 0;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.backup-tabs .tab.active {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}
.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.warn-box {
  background: rgba(186,32,50,0.05);
  border: 1px solid rgba(186,32,50,0.20);
  border-left: 3px solid var(--color-error);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: #7A0A1C;
}
.warn-box ul { margin: 6px 0 0 18px; padding: 0; }
.warn-box li { margin: 2px 0; }
.file-input {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 0;
}
.backup-status {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  padding: 10px 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}
.backup-status:empty { display: none; }

/* ===== 客户回顾版编辑 ===== */
.client-summary-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.client-summary-page .cs-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
}
.client-summary-page .cs-lede {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  background: var(--color-warn-soft);
  border-left: 3px solid #B8A06E;
  padding: 12px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cs-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-edit-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.cs-edit-section  .legend-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  padding: 0;
}
.cs-edit-section .cs-prompt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.cs-edit-section textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  resize: vertical;
}
.cs-edit-section textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.cs-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.cs-actions .back-btn { margin-right: auto; }

.cs-preview-fold {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.cs-preview-fold summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.cs-preview {
  margin-top: 12px;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 500px;
  overflow-y: auto;
}

.cs-preview-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.cs-preview-block strong {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-right: 6px;
  font-weight: 500;
}
.preformatted-inline {
  font-size: 14px;
  white-space: pre-wrap;
}

/* 保存反馈 */
.io-end-note.success {
  background: rgba(45,95,63,0.06);
  border-left-color: #2D5F3F;
  color: #1F4A2C;
}
.io-end-note.error {
  background: rgba(186,32,50,0.06);
  border-left-color: var(--color-error);
  color: #7A0A1C;
}

/* ===== 响应式 ===== */
@media (max-width: 600px) {
  .app { padding: 16px; }
  .app-header { padding-bottom: 16px; margin-bottom: 24px; }
  .app-header h1 { font-size: 20px; }

  .step-form { padding: 18px; }
  .number-trio { grid-template-columns: 1fr; }

  .bottle-row { flex-direction: column; }
  .bottle-input { flex: 1 1 auto; width: 100%; }

  .bottles-grid { grid-template-columns: repeat(2, 1fr); }
  .gua-card.hu { margin-left: 0; }
  .event-guas { gap: 12px; }

  .keyword-row { grid-template-columns: 1fr; }
  .kw-table { grid-template-columns: repeat(2, 1fr); }
  .ctx-bottles-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ */
/* 阶段 14-5 · 登录 / 注册 / 找回密码 · 光觉品牌登录卡          */
/* ============================================================ */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 320px);
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--color-surface);
  padding: 56px 48px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.auth-totem {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}
.auth-totem svg { width: 100%; height: 100%; display: block; }

.auth-brand-en {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--brand-gold-deep);
  margin-bottom: 24px;
  text-transform: uppercase;
}

.auth-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 6px;
  color: var(--brand-ink);
  margin-bottom: 36px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.auth-form label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 1.5px;
  margin-top: 4px;
}

.auth-form input {
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--brand-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(184, 160, 110, 0.15);
}

.auth-msg {
  font-size: 13px;
  line-height: 1.6;
  min-height: 18px;
  margin: 4px 0 0;
}
.auth-msg-ok  { color: var(--brand-gold-deep); }
.auth-msg-err { color: var(--brand-red); }

.auth-submit {
  margin-top: 16px;
  padding: 14px;
  background: var(--brand-gold-deep);
  color: var(--brand-cream);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.auth-submit:hover { opacity: 0.92; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.auth-switch {
  margin-top: 28px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.auth-switch a {
  color: var(--brand-gold-deep);
  text-decoration: none;
  letter-spacing: 0.5px;
}
.auth-switch a:hover { text-decoration: underline; text-decoration-color: var(--brand-gold); }
.auth-switch-sep {
  margin: 0 10px;
  color: var(--brand-gold);
  opacity: 0.5;
}

.auth-disclaimer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  line-height: 1.85;
  color: var(--brand-mute);
  font-style: italic;
  text-align: center;
}

/* 登录态下隐藏 motto / today，只留品牌头 */
body.app-mode-auth .app-header .motto { display: none; }
body.app-mode-auth .app-header .today { display: none; }

@media (max-width: 480px) {
  .auth-card { padding: 40px 28px 28px; }
  .auth-title { font-size: 18px; letter-spacing: 4px; margin-bottom: 28px; }
  .auth-totem { width: 64px; height: 64px; }
}

/* ===== 退出登录链接（页脚） ===== */
.app-footer .logout-link {
  display: inline-block;
  margin-left: 16px;
  color: var(--brand-mute);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-style: italic;
  font-family: var(--font-en);
}
.app-footer .logout-link:hover { color: var(--brand-gold-deep); }

/* ============================================================ */
/* 移动端调优 · 2026-05-10 （5 处用户反馈）                     */
/* ============================================================ */

/* ===== 1. Step3 出生日期 / 时间 · 三段下拉（替代日历弹窗） ===== */
.date-selects, .time-selects {
  display: flex;
  gap: 10px;
}
.date-selects select, .time-selects select {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--brand-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%238A7240' d='M0 0h12L6 8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 8px;
  padding-right: 30px;
}
.date-selects select:focus, .time-selects select:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(184,160,110,0.12);
}

/* ===== 2-5. ≤600px 移动端布局收紧 ===== */
@media (max-width: 600px) {
  .date-selects, .time-selects { gap: 6px; }
  .date-selects select, .time-selects select {
    padding: 10px 8px;
    padding-right: 24px;
    background-position: right 8px center;
  }

  /* —— 仪表盘 · 四瓶一排 —— */
  .bottles-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px;
  }
  .bottle-card {
    padding: 8px 4px 6px;
    gap: 4px;
    min-width: 0;
  }
  .bottle-card .slot-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .bottle-card .bottle-photo {
    width: 48px !important;
    max-width: 100%;
    height: auto !important;
  }
  .bottle-card .bottle-name {
    font-size: 10.5px;
    letter-spacing: 0;
    line-height: 1.3;
    word-break: break-all;
  }
  .bottle-card .bottle-colors { font-size: 9.5px; line-height: 1.4; }
  .bottle-card.dual .dual-faces {
    flex-direction: column;
    gap: 4px;
  }
  .bottle-card.dual .gift-face,
  .bottle-card.dual .challenge-face {
    padding: 4px 6px;
    font-size: 9.5px;
  }

  /* —— 仪表盘 · 三卦一排 —— */
  .event-guas {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px;
  }
  .event-guas .arrow { display: none; }
  .gua-card.hu { margin-left: 0 !important; opacity: 1 !important; }
  .gua-card {
    min-width: 0;
    padding: 8px 4px;
    gap: 3px;
  }
  .gua-card .gua-name {
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-top: 3px;
  }
  .gua-card .gua-role {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .gua-card .gua-id { font-size: 10px; }

  /* —— 瓶库 · 一排 5 瓶 —— */
  .library-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px;
    margin-top: 8px;
  }
  .bottle-tile {
    padding: 6px 2px 4px;
  }
  .bottle-tile .bottle-photo,
  .bottle-tile img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .bottle-tile .tile-num,
  .bottle-tile .bottle-num { font-size: 11px; }
  .bottle-tile .tile-name,
  .bottle-tile .bottle-name { font-size: 10px; line-height: 1.3; }
  .bottle-tile .tile-colors,
  .bottle-tile .bottle-colors { font-size: 9.5px; }
}

/* ============================================================ */
/* 第 2 轮移动端 / UI 反馈优化 · 2026-05-10 晚                  */
/* （瓶卡间距 / 数字输入 / 概念提示词 / 瓶预览底色）            */
/* ============================================================ */

/* 1. 瓶子预览卡：去掉碍眼的白底，融入米白父背景 */
.bottle-preview-card {
  background: transparent !important;
  border: 0.5px solid var(--color-border);
}

/* 2. 数字录入框：固定占满父列，避免溢出造成"白条延长" */
.number-trio input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.number-trio .field {
  min-width: 0;
}
.number-trio .field span {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* 3. 概念提示词标签（独立解读 5 张卡片用） */
.concept-tags-block {
  background: var(--brand-cream-warm);
  border-radius: var(--radius-md);
  padding: 12px 14px 14px;
  margin-bottom: 16px;
}
.concept-tags-label {
  font-size: 12px;
  color: var(--brand-gold-deep);
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 500;
}
.concept-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.concept-tag {
  display: inline-block;
  padding: 5px 11px;
  font-size: 12.5px;
  background: var(--color-surface);
  color: var(--brand-ink-soft);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.concept-tags-note {
  font-size: 11px;
  color: var(--brand-mute);
  font-style: italic;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

/* 4. 移动端 ≤600px：瓶 4 卡间距收紧 */
@media (max-width: 600px) {
  .step-form { gap: 12px !important; padding: 16px !important; }
  .bottle-slot { padding: 10px 12px; }
  .bottle-row { gap: 10px; }
  .bottle-input { flex: 0 0 110px; }
  .bottle-input input { font-size: 16px; padding: 8px 10px; }
  .bottle-preview-card { padding: 6px 10px; gap: 10px; }
  .bottle-preview-card .bottle-photo { width: 38px; height: 60px; }
  .bottle-name { font-size: 13px; }
  .bottle-colors { font-size: 11px; }

  /* Step3 数字三联：手机上行高 + 字号收紧 */
  .number-trio { gap: 8px; }
  .number-trio input { font-size: 18px; padding: 12px 8px; }
  .number-trio .field span { font-size: 11px; }

  /* 概念提示词在小屏更紧凑 */
  .concept-tags-block { padding: 10px 12px 12px; margin-bottom: 12px; }
  .concept-tag { padding: 4px 10px; font-size: 12px; }
}

/* ============================================================ */
/* 第 3 轮反馈：白话化 + 写作大纲多行显示                       */
/* ============================================================ */

/* 现代意象（仪表盘 reference-card 里）和独立解读 form-prompt
   都需要保留换行符 + 列点对齐，不能被默认 white-space 折叠 */
.ref-modern,
.ref-core,
.form-prompt {
  white-space: pre-line;
  line-height: 1.85;
}

/* form-prompt 视觉调整：让"写作大纲"看起来像可参考的提纲卡 */
.form-prompt {
  background: var(--brand-cream-warm);
  border-left: 3px solid var(--brand-gold);
  padding: 14px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--brand-ink-soft);
  margin-bottom: 12px;
}