/* ============================================================
   HexaLoom 样式表 — Sentri 风（DESIGN.md）
   深紫午夜 #1f1633 + 电光柠檬 #c2ef4e + Rubik 字体
   ------------------------------------------------------------
   设计令牌严格来自 DESIGN.md：
   - 主 CTA：primary #150f23 底 + on-primary 白字 + button-cap(14/700/大写/0.2px)
   - lime 严格稀缺：仅结论关键词 chip + 顶部分隔线，禁按钮/正文
   - 圆角阶梯 4/6/8/10/12/18，间距 8px 基准
   - 字体≥13px，触控目标≥44px，hover 自上而下
   ------------------------------------------------------------
   AI 面板别名变量（供 ai-analysis.js 注入的 CSS 套用）：
   --gold-2/--line/--panel/--bg/--muted/--text 在 :root 声明，
   ai-analysis.js 的 var(--gold-2, fallback) 将自动解析到本主题。
   ============================================================ */

/* Rubik 字体（Google Fonts） */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");

:root {
  /* —— 颜色（DESIGN.md colors）—— */
  --primary: #0b1c28;              /* 主 CTA 底 → 深蓝面板（OmniLoom 金蓝） */
  --ink-deep: #06131b;             /* 深色画布 → 深蓝黑 */
  --on-primary: #edf6f7;           /* 深底文字 → 近白 */
  --accent-lime: #e8b55b;          /* 强调 → 金色（原柠檬绿改金，变量名保留） */
  --accent-pink: #ef6249;          /* 次要点缀 → 红 */
  --accent-violet: #4f9de8;        /* 行内链接强调 → 蓝 */
  --accent-violet-deep: #102635;   /* 下拉/select 底 → 深蓝 */
  --accent-violet-mid: #1a3a4a;    /* 标签 chip 底 → 蓝灰 */
  --surface-canvas-dark: #06131b;  /* 主背景 → 深蓝黑 */
  --surface-canvas-light: #ffffff; /* 浅色页背景 */
  --surface-night: #0b1c28;        /* 深色卡片 → 深蓝面板 */
  --surface-press-light: #f0f0f0;  /* 按压态 */
  --surface-press-stronger: #efefef;
  --hairline-violet: rgba(218,177,95,.26);  /* 深色 1px 边框 → 金线 */
  --hairline-cool: #cfcfdb;        /* 输入框边框 */
  --hairline-cloud: #e5e7eb;       /* 浅色边框 */
  --ink: #06131b;                  /* 浅底正文（深色模式不用） */
  --ink-press: #1a1a1a;            /* 按压态文字 */
  --on-dark-muted: #8fa5b4;        /* 深底次要文字 → 蓝灰 */
  --on-dark-faint: rgba(232,181,91,.18);  /* 深底幽灵按钮底 → 金淡 */
  --ring-focus: rgba(79,157,232,0.5);     /* 焦点环 → 蓝 */

  /* —— 字体 —— */
  --font-ui: "Rubik", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-code: "Monaco", Menlo, "Ubuntu Mono", monospace;

  /* —— 圆角阶梯（DESIGN.md rounded）—— */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-xxl: 18px; --r-full: 9999px;

  /* —— 间距（8px 基准，DESIGN.md spacing）—— */
  --s-xxs: 2px; --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px; --s-section: 96px;

  /* —— AI 面板别名变量（OmniLoom ai-analysis.js 嫁接映射）—— */
  /* OmniLoom 用 --gold-2/--line/--panel/--bg/--muted/--text，此处映射到 DESIGN.md token */
  --gold-2: #ffd28a;               /* AI 面板按钮文字/强调 → 亮金（OmniLoom） */
  --line: var(--hairline-violet);  /* AI 面板边框 */
  --panel: var(--ink-deep);        /* AI 面板底 */
  --bg: var(--surface-night);      /* AI 输入框底 */
  --muted: var(--on-dark-muted);   /* AI 次要文字 */
  --text: var(--on-primary);       /* AI 正文 */
  --gold: var(--accent-lime);        /* OmniLoom --gold 别名 → 金色（changelog 复用） */

  /* —— 阴影（DESIGN.md elevation）—— */
  --shadow-1: 0 2px 8px 0 rgba(0,0,0,0.08);
  --shadow-2: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 8px 6px rgb(21,15,35);
}

/* —— 浅色主题覆盖 —— */
[data-theme="light"] {
  --primary: #c9910f;              /* 主 CTA 底 → 深金 */
  --ink-deep: #1a1a1a;             /* 深黑 */
  --on-primary: #1a1a1a;           /* 浅底正文 → 深黑 */
  --accent-lime: #b8860b;          /* 强调 → 深金 */
  --accent-pink: #d44a3a;          /* 红 */
  --accent-violet: #3a85d0;        /* 蓝链接 */
  --accent-violet-deep: #eef1f4;   /* select 底 */
  --accent-violet-mid: #e8e0d0;    /* 标签 chip 底 → 金棕淡 */
  --surface-canvas-dark: #f5f7f9;  /* 主背景 → 浅灰 */
  --surface-canvas-light: #ffffff;
  --surface-night: #ffffff;        /* 深表面 → 白 */
  --surface-press-light: #f0f0f0;
  --surface-press-stronger: #efefef;
  --hairline-violet: rgba(180,140,80,.35);  /* 金棕边框 */
  --hairline-cool: #cfcfdb;
  --hairline-cloud: #e5e7eb;
  --ink: #1a1a1a;
  --ink-press: #1a1a1a;
  --on-dark-muted: #6b7b8a;        /* 蓝灰次要文字 */
  --on-dark-faint: rgba(180,140,80,.10);
  --ring-focus: rgba(79,157,232,0.5);
  --gold-2: #c9910f;               /* AI 强调 → 深金 */
  --line: var(--hairline-cloud);
  --panel: #ffffff;
  --bg: #f0f2f5;
  --muted: #6b7b8a;
  --text: #1a1a1a;
  --gold: var(--accent-lime);        /* 浅色 --gold → 深金 #b8860b（自动跟随） */
}
/* 浅色模式 body 渐变背景（OmniLoom 风格） */
[data-theme="light"] body {
  background: radial-gradient(circle at 14% 6%, rgba(232,181,91,.08), transparent 24rem),
              linear-gradient(135deg, #f5f7f9 0%, #eef1f4 48%, #f5f7f9 100%);
}

/* ============================================================
   基础 reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--on-primary);
  background:
    radial-gradient(circle at 14% 6%, rgba(232,181,91,.13), transparent 24rem),
    linear-gradient(135deg, #040b11 0%, #092033 48%, #06131b 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
a { color: var(--accent-violet); }

/* ============================================================
   布局容器
   ============================================================ */
.container {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--s-xl) var(--s-xl) var(--s-xxl);
}

/* ============================================================
   顶栏 .topbar
   ============================================================ */
.topbar {
  background: var(--surface-night);
  border-bottom: 1px solid var(--hairline-violet);
  padding: var(--s-lg) var(--s-xl);
}
.topbar-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
}
.topbar-logo {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--gold-2);
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
/* lime 仅用于 logo 分隔线（稀缺原则） */
.topbar-logo::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  background: var(--accent-lime);
  border-radius: var(--r-full);
  margin-left: var(--s-xs);
}
.theme-toggle {
  background: var(--on-dark-faint);
  color: var(--on-primary);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-sm) var(--s-lg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  min-height: 36px;
  transition: background 0.2s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   主区块通用
   ============================================================ */
section {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  margin-bottom: var(--s-xl);
}
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-2);
  margin-bottom: var(--s-lg);
  letter-spacing: 0.2px;
}
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: var(--s-xs);
}

/* ============================================================
   起卦区 #qigua-section
   ============================================================ */
.qigua-form { display: grid; gap: var(--s-lg); }
.form-row { display: grid; gap: var(--s-sm); }
.form-row.two-col { grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-2);
  margin-bottom: var(--s-sm);
}
.form-input,
.form-select {
  width: 100%;
  padding: var(--s-sm) var(--s-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-primary);
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-sm);
  min-height: 44px;          /* 触控目标≥44px */
  box-sizing: border-box;
}
.form-input::placeholder { color: var(--on-dark-muted); }
.form-input:focus,
.form-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring-focus);
}
.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-muted) 50%),
                    linear-gradient(135deg, var(--on-dark-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* 分类标签 */
.category-tags {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
/* 分类组标签（大类标题） */
.category-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: var(--s-xs);
}
/* 组内标签流（横向排列） */
.category-tags-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}
.category-tag {
  background: transparent;
  color: var(--on-dark-muted);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-full);
  padding: var(--s-xs) var(--s-md);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  min-height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.category-tag:hover {
  background: var(--on-dark-faint);
  color: var(--gold-2);
  border-color: var(--gold);
}
.category-tag.active {
  background: var(--on-dark-faint);
  color: var(--gold-2);
  border-color: var(--gold);
  font-weight: 600;
}

/* 模式切换 tabs */
.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  border-bottom: 1px solid var(--hairline-violet);
  padding-bottom: var(--s-xs);
}
.mode-tab {
  background: transparent;
  color: var(--on-dark-muted);
  border: none;
  padding: var(--s-sm) var(--s-md);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  min-height: 40px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mode-tab:hover { color: var(--on-primary); }
.mode-tab.active {
  color: var(--on-primary);
  border-bottom-color: var(--accent-lime);
  font-weight: 700;
}

/* 手动/背数爻输入 */
.yao-input-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-sm);
}
.yao-cell {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-md);
  padding: var(--s-sm);
  text-align: center;
}
.yao-cell-label {
  font-size: 13px;
  color: var(--on-dark-muted);
  margin-bottom: var(--s-xs);
}
.yao-cell-btns {
  display: flex;
  flex-direction: column;
  gap: var(--s-xxs);
}

/* 按钮组 */
.btn-row { display: flex; gap: var(--s-md); flex-wrap: wrap; }
.btn-primary {
  background: linear-gradient(180deg, #ffd990, #d89b42);  /* 金色渐变（OmniLoom 主按钮） */
  color: #1a1208;              /* 深棕字，金底高对比 */
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-md) var(--s-lg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;      /* button-cap 大写 */
  min-height: 44px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover { background: linear-gradient(180deg, #ffe0a0, #e8b55b); transform: translateY(1px); }
.btn-primary:disabled { background: var(--hairline-cloud); color: var(--on-dark-muted); cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--on-primary);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-md);
  padding: var(--s-md) var(--s-lg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  min-height: 44px;
  transition: border-color 0.2s ease;
}
.btn-ghost:hover { border-color: var(--accent-lime); }

/* ============================================================
   排盘结果区 #paipan-section
   ============================================================ */
.pan-meta {
  display: grid;
  gap: var(--s-sm);
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
}
.pan-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
  font-size: 14px;
}
.pan-meta-item { color: var(--on-dark-muted); }
.pan-meta-item strong { color: var(--on-primary); font-weight: 600; }

/* 干支大字 + 旬空 */
.ganzi-block {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
  text-align: center;
}
.ganzi-row {
  display: flex;
  justify-content: center;
  gap: var(--s-xl);
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 600;
  color: var(--on-primary);
}
.ganzi-item { display: flex; flex-direction: column; gap: var(--s-xs); }
.ganzi-label { font-size: 13px; color: var(--on-dark-muted); font-weight: 500; }
.ganzi-char {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  display: inline-block;
  min-width: 1em;
}
/* 天干地支五行色（参考 OmniLoom） */
.ganzi-char.wx-木 { color: #4caf50; }
.ganzi-char.wx-火 { color: #ef5350; }
.ganzi-char.wx-土 { color: #e8b55b; }
.ganzi-char.wx-金 { color: #9e9e9e; }
.ganzi-char.wx-水 { color: #4f9de8; }
.xunkong-line {
  margin-top: var(--s-md);
  font-size: 13px;
  color: var(--on-dark-muted);
  font-weight: 500;
}
.xunkong-line .kong-item {
  color: var(--on-primary);
  font-weight: 600;
}
.xunkong-line .kong-item.ri-kong {
  color: #ef5350;
  font-weight: 800;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 摘要双栏（十二长生 + 神煞） */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-lg);
  margin-bottom: var(--s-lg);
}
.summary-card {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
}
.summary-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-primary);
  margin-bottom: var(--s-sm);
  padding-bottom: var(--s-xs);
  border-bottom: 1px solid var(--hairline-violet);
}
.summary-card ul { display: grid; gap: var(--s-xs); }
.summary-card li { font-size: 13px; color: var(--on-dark-muted); }
/* 神煞摘要：四列紧凑网格 */
#shenShaList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-xs) var(--s-sm);
}
#shenShaList .shensha-item {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  white-space: nowrap;
}
#shenShaList .shensha-name {
  color: var(--on-primary);
  font-weight: 500;
}
#shenShaList .shensha-zhi {
  color: #ef5350;
  font-weight: 600;
}

/* 爻板（本卦/变卦） */
.yao-board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-lg);
  margin-bottom: var(--s-lg);
}
.yao-board {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: 0;
}
.yao-board-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--on-primary);
  margin-bottom: var(--s-md);
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
.yao-board-title small { font-size: 13px; color: var(--on-dark-muted); font-weight: 500; }
.yao-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.yao-table th,
.yao-table td {
  padding: var(--s-sm) var(--s-xs);
  text-align: center;
  font-size: 13px;
  border-bottom: 1px solid var(--hairline-violet);
}
.yao-table th {
  color: var(--on-dark-muted);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.yao-table td { color: var(--on-primary); }
.yao-table tr:last-child td { border-bottom: none; }
/* 固定列宽：保证本卦/变卦两表各列纵向对齐（爻位/六神/六亲/地支/五行/阴阳/标记） */
.yao-table th:nth-child(1), .yao-table td:nth-child(1) { width: 10%; }
.yao-table th:nth-child(2), .yao-table td:nth-child(2) { width: 12%; }
.yao-table th:nth-child(3), .yao-table td:nth-child(3) { width: 12%; }
.yao-table th:nth-child(4), .yao-table td:nth-child(4) { width: 10%; }
.yao-table th:nth-child(5), .yao-table td:nth-child(5) { width: 10%; }
.yao-table th:nth-child(6), .yao-table td:nth-child(6) { width: 18%; }
.yao-table th:nth-child(7), .yao-table td:nth-child(7) { width: 28%; }
/* 标记列允许多 tag 换行排列，避免撑宽破坏对齐 */
.yao-table td:last-child { white-space: normal; line-height: 1.8; }
/* 条状爻线（替代字符符号：阳爻实心条 / 阴爻双段条） */
.yao-line {
  display: inline-block;
  width: 64px;
  height: 7px;
  position: relative;
  vertical-align: middle;
}
.yao-line.yang { background: var(--on-primary); border-radius: 2px; }
.yao-line.yin { background: transparent; }
.yao-line.yin::before,
.yao-line.yin::after {
  content: "";
  position: absolute;
  top: 0;
  width: 44%;
  height: 100%;
  background: var(--on-primary);
  border-radius: 2px;
}
.yao-line.yin::before { left: 0; }
.yao-line.yin::after { right: 0; }
/* 动爻 lime 高亮（稀缺原则：动爻为重点标记） */
.yao-line.yang.dong { background: #ff9800; }
.yao-line.yin.dong::before,
.yao-line.yin.dong::after { background: #ff9800; }
/* 小尺寸（手动按钮 / 小卦图） */
.yao-line.sm { width: 36px; height: 5px; }
.yao-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  letter-spacing: 0.25px;
  margin: 1px 2px;
}
.yao-tag.shi { background: var(--accent-violet-deep); color: var(--on-primary); }
.yao-tag.ying { background: var(--accent-violet-mid); color: var(--on-primary); }
.yao-tag.kong { background: #616161; color: #fff; }          /* 空=灰色 */
.yao-tag.po { background: #c0392b; color: #fff; }            /* 破/冲/绝=红色 */
.yao-tag.he { background: #1565C0; color: #fff; }            /* 合=蓝色 */
.yao-tag.mu { background: #5D4037; color: #fff; }            /* 墓=棕色 */
.yao-tag.dong-tag { background: #ff9800; color: #1a1208; }   /* 动=橙色 */

/* ============================================================
   卦象分析表（本卦+变卦左右对照，一行统管本变）
   ============================================================ */
.gua-panel {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gua-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--on-primary);
  margin-bottom: var(--s-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-sm);
}
.gua-panel-title .gua-name { color: var(--gold-2); font-weight: 700; }
.gua-panel-title small { font-size: 13px; color: var(--on-dark-muted); font-weight: 500; }

/* 行：grid 布局，默认4列（六神 | 本卦组 | 世应 | 变卦组），有伏神时5列 */
.gua-row {
  display: grid;
  grid-template-columns: 52px 1fr 48px 1fr;
  align-items: center;
  padding: var(--s-sm) var(--s-xs);
  border-bottom: 1px solid var(--hairline-violet);
  text-align: center;
  gap: 8px;
  min-width: max-content;
}
.gua-panel.has-fu .gua-row {
  grid-template-columns: 52px 90px 1fr 48px 1fr;
}
.gua-row:last-child { border-bottom: none; }

/* 分组表头：六神 | 伏飞 | 本卦 | 世应 | 变卦 */
.gua-group-header {
  border-bottom: 2px solid var(--hairline-violet);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gua-group-header .gua-group {
  grid-column: span 1;
}
.gua-group-header .col-shi-ying {
  grid-column: span 1;
  color: var(--gold-2);
}
.gua-group-header .ben-group { text-align: center; }
.gua-group-header .fu-group { text-align: center; }
.gua-group-header .bian-group { text-align: center; }

/* 列基础样式 */
.gua-col { font-size: 14px; color: var(--on-primary); }
.gua-col.gua-empty { color: var(--on-dark-muted); opacity: 0.3; }
.gua-text { font-weight: 500; }

/* 天干/六亲/地支之间的统一空隙 */
.yao-sep {
  display: inline-block;
  width: 4px;
}

/* 本卦/变卦组：内部子列紧密排列 */
.col-ben-group, .col-bian-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--r-md);
  min-height: 48px;
  white-space: nowrap;
  min-width: max-content;
}
/* 本卦组：左侧 */
.col-ben-group {
  background: rgba(79, 157, 232, 0.04);
  border: 1px solid rgba(79, 157, 232, 0.10);
}
/* 变卦组：右侧 */
.col-bian-group {
  background: rgba(232, 181, 91, 0.04);
  border: 1px solid rgba(232, 181, 91, 0.10);
}
.col-ben-group .sub-col,
.col-bian-group .sub-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  white-space: nowrap;
}
.col-ben-group .sub-col.info,
.col-bian-group .sub-col.info {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  min-width: 110px;
}
.col-ben-group .sub-col.tag,
.col-bian-group .sub-col.tag {
  min-width: 34px;
}

/* 伏飞列：固定宽度，不影响本卦/变卦主排盘 */
.col-fu-shen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 48px;
  font-size: 11px;
  white-space: nowrap;
}
.col-fu-shen .fu-shen,
.col-fu-shen .fei-shen {
  white-space: nowrap;
}
.col-fu-shen.empty {
  visibility: hidden;
}

/* 地支显示为“卯木”形式 */
.zhi-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: background 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.zhi-wrap:hover {
  background: rgba(255,255,255,0.08);
}
.zhi-wrap.active {
  background: rgba(232, 181, 91, 0.22);
  outline: 1px solid rgba(232, 181, 91, 0.45);
}
[data-theme="light"] .zhi-wrap.active {
  background: rgba(180, 140, 80, 0.18);
  outline: 1px solid rgba(180, 140, 80, 0.40);
}
.zhi-char {
  font-weight: 500;
}
.zhi-wx {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}

/* 旺衰状态上标（旺/相/休/囚/死） */
.ws-sup {
  font-size: 10px;
  font-weight: 700;
  color: var(--on-dark-muted);
  vertical-align: super;
  margin-left: 1px;
  white-space: nowrap;
  display: inline;
}
.ws-sup:empty { display: none; }

/* 世应列 */
.col-shi-ying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* 伏神飞神小字 */
.fu-shen, .fei-shen {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
}
.fu-shen { color: #4caf50; }
.fei-shen { color: var(--on-dark-muted); }

/* 神煞摘要项高亮（点击地支触发） */
.shensha-item.active {
  background: rgba(232, 181, 91, 0.18);
  border-radius: var(--r-xs);
  transition: background 0.2s ease;
}

/* 五行文字色（通用，复用OmniLoom配色） */
.wx-text-木 { color: #4caf50; }
.wx-text-火 { color: #ef5350; }
.wx-text-土 { color: #e8b55b; }
.wx-text-金 { color: #9e9e9e; }
.wx-text-水 { color: #4f9de8; }
[data-theme="light"] .wx-text-金 { color: #757575; }

/* 六神颜色（深色模式） */
.liu-shen.shen-qing { color: #4CAF50; }
.liu-shen.shen-zhu { color: #F44336; }
.liu-shen.shen-gou { color: #a17862; }
.liu-shen.shen-teng { color: #b0b0b0; }
.liu-shen.shen-bai { color: #f0f0f0; }
.liu-shen.shen-xuan { color: #4f9de8; }
/* 六神颜色（浅色模式） */
[data-theme="light"] .liu-shen.shen-qing { color: #2E7D32; }
[data-theme="light"] .liu-shen.shen-zhu { color: #C62828; }
[data-theme="light"] .liu-shen.shen-gou { color: #795548; }
[data-theme="light"] .liu-shen.shen-teng { color: #757575; }
[data-theme="light"] .liu-shen.shen-bai { color: #424242; }
[data-theme="light"] .liu-shen.shen-xuan { color: #1565C0; }

/* 六神文字加粗，强化视觉引导 */
.liu-shen { font-weight: 700; font-size: 14px; }

/* 动爻行微弱高亮背景 */
.gua-row.row-dong {
  background: rgba(255, 152, 0, 0.06);
}

/* 小卦图（本/互/变/错/综） */
.subgua-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-md);
  margin-bottom: var(--s-lg);
}
.subgua-card {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  text-align: center;
}
.subgua-name { font-size: 13px; color: var(--on-dark-muted); margin-bottom: var(--s-xs); }
.subgua-symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}
.subgua-title { font-size: 14px; font-weight: 600; color: var(--on-primary); margin-top: var(--s-xs); }

/* ============================================================
   断卦分析区 #duangua-section
   ============================================================ */
/* 结论卡（三档次 grade + lime chip 关键词） */
.verdict-card {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
}
.verdict-grade {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  padding: 3px var(--s-sm);
  border-radius: var(--r-xs);
  margin-bottom: var(--s-sm);
}
.verdict-grade.first { background: var(--accent-lime); color: var(--ink-deep); }
.verdict-grade.second { background: var(--accent-violet-deep); color: var(--on-primary); }
.verdict-grade.third { background: var(--accent-violet-mid); color: var(--on-primary); }
.verdict-grade.none { background: var(--on-dark-faint); color: var(--on-dark-muted); }
/* lime chip 仅包结论关键词（吉/凶/待定），符合稀缺原则 */
.verdict-conclusion {
  font-size: 18px;
  font-weight: 700;
  color: var(--on-primary);
  margin-bottom: var(--s-sm);
}
.verdict-chip {
  display: inline-block;
  background: var(--accent-lime);
  color: var(--ink-deep);
  border-radius: var(--r-xs);
  padding: 0 var(--s-md);
  font-size: 18px;
  font-weight: 700;
  margin-right: var(--s-sm);
}
.verdict-reason { font-size: 14px; color: var(--on-dark-muted); line-height: 1.6; }

/* 旺衰评分条 */
.score-bar-wrap { margin-bottom: var(--s-lg); }
.score-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--on-dark-muted);
  margin-bottom: var(--s-xs);
}
.score-bar-track {
  height: 10px;
  background: var(--on-dark-faint);
  border-radius: var(--r-full);
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c0392b 0%, var(--accent-pink) 40%, var(--accent-lime) 70%, var(--accent-lime) 100%);
  border-radius: var(--r-full);
  transition: width 0.4s ease;
}

/* 各分析段落 */
.section-block {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-md);
}
.section-block h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-primary);
  margin-bottom: var(--s-sm);
  padding-bottom: var(--s-xs);
  border-bottom: 1px solid var(--hairline-violet);
}
.section-block .section-content {
  font-size: 14px;
  color: var(--on-dark-muted);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   AI 辅助分析面板容器（细节由 ai-analysis.js 注入）
   ============================================================ */
#viewLiuyao {
  margin: var(--s-xl) 0;
}
/* ai-analysis.js 会注入 .ai-panel 等 class，套用上方别名变量 */

/* ============================================================
   工具类
   ============================================================ */
.hidden { display: none !important; }
.text-muted { color: var(--on-dark-muted); }
.text-lime { color: var(--accent-lime); }

/* ============================================================
   响应式 — 移动端（断点 768/480）
   ============================================================ */
@media (max-width: 768px) {
  .container { padding: 0 var(--s-lg); }
  section { padding: var(--s-lg); }   /* 卡片内边距收紧 */
  .topbar { padding: var(--s-md) var(--s-lg); }
  .topbar-logo { font-size: 28px; }
  .form-row.two-col { grid-template-columns: 1fr; }  /* 单列 */
  .summary-grid { grid-template-columns: 1fr; }       /* 摘要单列 */
  .yao-input-grid { grid-template-columns: repeat(3, 1fr); }  /* 爻输入 3 列 */
  .subgua-grid { grid-template-columns: repeat(2, 1fr); }     /* 小卦图 2 列 */
  .ganzi-row { gap: var(--s-md); font-size: 16px; }
  .section-title { font-size: 18px; }
  .verdict-conclusion { font-size: 16px; }
  .verdict-chip { font-size: 16px; }
  /* 卦象表窄屏适配：缩小列宽和字号 */
  .gua-row {
    grid-template-columns: 40px 1fr 40px 1fr;
    gap: 6px;
  }
  .gua-panel.has-fu .gua-row {
    grid-template-columns: 40px 76px 1fr 40px 1fr;
  }
  .gua-col { font-size: 13px; }
  .liu-shen { font-size: 13px; }
  .yao-line { width: 48px; height: 6px; }
  .col-ben-group, .col-bian-group { gap: 4px; padding: 3px 4px; }
  .col-ben-group .sub-col.info, .col-bian-group .sub-col.info { min-width: 96px; }
  .col-ben-group .sub-col.tag, .col-bian-group .sub-col.tag { min-width: 30px; }
  .col-fu-shen { font-size: 10px; }
  .yao-sep { width: 3px; }
  .gua-panel-title { font-size: 14px; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .container { padding: 0 var(--s-md); }
  .topbar-inner { gap: var(--s-sm); }
  .yao-input-grid { grid-template-columns: repeat(2, 1fr); }
  .subgua-grid { grid-template-columns: 1fr; }
  .mode-tabs { gap: 0; }
  .mode-tab { padding: var(--s-sm); font-size: 13px; min-height: 44px; }
  .btn-primary, .btn-ghost { width: 100%; min-height: 44px; }
  .btn-row { flex-direction: column; }
  .ganzi-row { gap: var(--s-sm); font-size: 15px; }
  .yao-table th, .yao-table td { padding: var(--s-xs); font-size: 12px; }
  .verdict-card, .section-block, .pan-meta, .ganzi-block, .summary-card, .yao-board, .gua-panel { padding: var(--s-md); }
  .gua-panel > .gua-row { min-width: 440px; }
  .gua-panel.has-fu > .gua-row { min-width: 520px; }
}

/* ============================================================
   页脚 + 版本更新说明弹窗（changelog）
   ============================================================ */
.page-footer {
  max-width: 1152px;
  margin: 0 auto;
  padding: var(--s-lg) var(--s-xl) var(--s-xxl);
  text-align: center;
}

/* 版本更新说明按钮 */
.changelog-btn {
  padding: var(--s-xs) var(--s-md);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  background: var(--on-dark-faint);
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.changelog-btn:hover {
  background: rgba(232,181,91,.18);
  border-color: var(--gold);
}

/* —— .modal 基础样式（参照 OmniLoom 体系，HexaLoom 原无）—— */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal.open { display: flex; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}
.modal-content {
  position: relative;
  background: var(--ink-deep);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--s-lg);
  box-shadow: var(--shadow-2);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-lg);
  gap: var(--s-md);
}
.modal-title {
  margin: 0;
  color: var(--gold-2);
  font-size: 18px;
  font-weight: 800;
}
.modal-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-full);
  background: var(--on-dark-faint);
  color: var(--on-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.modal-close-btn:hover { background: rgba(255,255,255,.12); }

/* changelog 弹窗内容区加宽 */
#changelogModal .modal-content {
  width: 760px;
  max-width: calc(100vw - 32px);
}

/* changelog 正文渲染 */
.changelog-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-dark-muted);
}
.changelog-body h3 {
  color: var(--gold-2);
  font-size: 15px;
  font-weight: 800;
  margin: var(--s-lg) 0 var(--s-sm);
  padding-bottom: var(--s-xs);
  border-bottom: 1px solid var(--hairline-violet);
}
.changelog-body h3:first-child { margin-top: 0; }
.changelog-body h4 {
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  margin: var(--s-sm) 0 var(--s-xs);
}
.changelog-body ul {
  margin: var(--s-xs) 0 var(--s-sm);
  padding-left: 20px;
  list-style: disc;
}
.changelog-body li { margin: 2px 0; }
.changelog-body blockquote {
  margin: var(--s-sm) 0;
  padding: var(--s-xs) var(--s-md);
  border-left: 3px solid var(--gold);
  background: var(--on-dark-faint);
  color: var(--muted);
  font-size: 12px;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.changelog-body p { margin: var(--s-xs) 0; }
.changelog-body hr {
  border: none;
  border-top: 1px solid var(--hairline-violet);
  margin: var(--s-md) 0;
}
.changelog-body strong { color: var(--gold); font-weight: 700; }
.changelog-body code {
  background: rgba(255,255,255,.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--gold-2);
  font-family: var(--font-code);
}
.changelog-body pre {
  background: rgba(0,0,0,.3);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-sm);
  overflow-x: auto;
  margin: var(--s-sm) 0;
  font-size: 12px;
  line-height: 1.5;
}
.changelog-body pre code { background: transparent; padding: 0; }

/* 浅色主题适配 */
[data-theme="light"] .changelog-body { color: #4a5568; }
[data-theme="light"] .changelog-body h3 { border-bottom-color: rgba(202,138,4,.25); }
[data-theme="light"] #changelogModal .modal-content { background: var(--surface-canvas-light); }
[data-theme="light"] .changelog-body blockquote { background: rgba(202,138,4,.06); color: #6b7280; }
[data-theme="light"] .changelog-body code { background: rgba(0,0,0,.06); }
[data-theme="light"] .changelog-body pre { background: rgba(0,0,0,.05); }

/* ============================================================
   用神板块 .taiji-panel（动态判断/手动指定）
   画风与 .mode-tab/.category-tag 一致，金色主题，自动适配深/浅色
   ============================================================ */
.taiji-panel {
  background: var(--surface-night);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
}
.taiji-header {
  display: flex;
  flex-direction: column;   /* 标题在上，按钮组在下 */
  align-items: flex-start;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}
.taiji-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-primary);
  letter-spacing: 0.2px;
}
/* 模式切换按钮组（胶囊式 toggle） */
.taiji-mode-toggle {
  display: inline-flex;
  gap: var(--s-xxs);
  background: var(--on-dark-faint);
  border-radius: var(--r-full);
  padding: var(--s-xxs);
}
.taiji-mode-btn {
  background: transparent;
  color: var(--on-dark-muted);
  border: none;
  border-radius: var(--r-full);
  padding: var(--s-xs) var(--s-md);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  min-height: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.taiji-mode-btn:hover { color: var(--on-primary); }
.taiji-mode-btn.active {
  background: var(--accent-lime);
  color: #1a1208;
  font-weight: 600;
}
.taiji-content {
  font-size: 14px;
  color: var(--on-primary);
}
.taiji-info {
  font-size: 14px;
  color: var(--on-dark-muted);
  margin-bottom: var(--s-sm);
  line-height: 1.6;
}
/* 手动指定时的6爻选择按钮（逆序，上爻在顶） */
.taiji-yao-select {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}
.taiji-yao-btn {
  background: transparent;
  color: var(--on-dark-muted);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--r-full);
  padding: var(--s-xs) var(--s-md);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  min-height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.taiji-yao-btn:hover {
  background: var(--on-dark-faint);
  color: var(--gold-2);
  border-color: var(--gold);
}
.taiji-yao-btn.selected {
  background: var(--on-dark-faint);
  color: var(--gold-2);
  border-color: var(--gold);
  font-weight: 600;
}

/* ============================================================
   六爻评分规则附表（前缀 score-rule-，参考 OmniLoom 纯CSS折叠）
   数据源：数字量化表20260116.xlsx"整理"sheet
   ============================================================ */
.score-rule-section {
  margin-top: var(--s-lg);
  margin-bottom: var(--s-lg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
}
.score-rule-section-header {
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--on-dark-faint), rgba(232,181,91,.06));
  border-bottom: 1px solid var(--line);
}
.score-rule-section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-2);
}
.score-rule-collapsible-desc {
  padding: 10px 14px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.score-rule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.score-rule-table th,
.score-rule-table td {
  border: 1px solid var(--line);
  padding: 7px 8px;
  text-align: center;
  line-height: 1.5;
}
.score-rule-table th {
  background: var(--ink-deep);
  color: var(--gold-2);
  font-weight: 700;
  white-space: nowrap;
}
.score-rule-table tr:nth-child(even) td {
  background: var(--on-dark-faint);
}
.score-rule-table .score-pos {
  color: #00cc44;
  font-weight: 600;
}
.score-rule-table .score-neg {
  color: #ff4400;
  font-weight: 600;
}
.score-rule-table .score-fatal {
  color: #ff0000;
  font-weight: 700;
  font-size: 11px;
}
/* 评分项副标题（如"小分×10"） */
.score-rule-table .muted-small {
  font-size: 11px;
  color: var(--on-dark-muted);
  font-weight: 400;
}
.score-rule-note {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  line-height: 1.8;
}
.score-rule-note p {
  margin: 0 0 4px 0;
}
/* 折叠交互（纯CSS，details/summary，默认收起） */
.score-rule-collapsible > summary.score-rule-section-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-rule-collapsible > summary.score-rule-section-header::-webkit-details-marker {
  display: none;
}
.score-rule-collapsible > summary.score-rule-section-header::before {
  content: "▶";
  font-size: 11px;
  transition: transform 0.2s;
  color: var(--gold-2);
}
.score-rule-collapsible[open] > summary.score-rule-section-header::before {
  transform: rotate(90deg);
}
.score-rule-collapsible[open] > summary.score-rule-section-header {
  border-bottom: 1px solid var(--line);
}
/* 12×12 大表横向滚动 */
.score-rule-table-wrap {
  overflow-x: auto;
  padding: 6px 14px;
}
.score-rule-matrix th,
.score-rule-matrix td {
  white-space: nowrap;
  min-width: 48px;
}
.score-rule-matrix td:first-child {
  background: var(--ink-deep);
  color: var(--gold-2);
  font-weight: 700;
}