/* ============================================================
   style.css - 六爻排盘解盘网页样式
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0f0e17;
  --bg2:       #1a1828;
  --bg3:       #242236;
  --border:    #3a3660;
  --gold:      #c9a84c;
  --gold2:     #e8c97a;
  --red:       #e05c5c;
  --green:     #5cb85c;
  --blue:      #5b9bd5;
  --text:      #e8e4d8;
  --text2:     #a09880;
  --yang:      #e8c97a;
  --yin:       #8899bb;
  --dong:      #ff6b6b;
  --radius:    8px;
  --shadow:    0 4px 24px rgba(0,0,0,0.5);
}

body {
  font-family: 'Noto Serif SC', 'SimSun', serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
}

/* ---- 顶部标题 ---- */
header {
  text-align: center;
  padding: 32px 16px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #1a1828 0%, transparent 100%);
}
header h1 {
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
}
header p {
  color: var(--text2);
  font-size: 0.9rem;
  margin-top: 6px;
  letter-spacing: 0.1em;
}

/* ---- 主布局 ---- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
aside {
  width: 100%;
  display: flex;
  justify-content: center;
}
aside .cast-panel {
  width: 100%;
  max-width: 880px;
}
main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
main .empty-state {
  order: 0;
}
@media (max-width: 960px) {
  .container {
    padding: 24px 12px 36px;
  }
}

.library-section,
.data-source-section {
  width: 100%;
}
.reference-section {
  width: 100%;
}
.reference-card {
  margin-top: 8px;
}
.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.reference-block h4 {
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 6px;
  letter-spacing: 0.08em;
}
.reference-block p {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 10px;
}
.library-section details,
.data-source-section details {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  overflow: hidden;
}
.library-section summary,
.data-source-section summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 0.92rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.library-section summary::-webkit-details-marker,
.data-source-section summary::-webkit-details-marker {
  display: none;
}
.library-section summary::after,
.data-source-section summary::after {
  content: '⌄';
  font-size: 1rem;
  transition: transform 0.2s ease;
  color: inherit;
}
.library-section details[open] summary,
.data-source-section details[open] summary {
  color: var(--gold);
}
.library-section details[open] summary::after,
.data-source-section details[open] summary::after {
  transform: rotate(180deg);
}
.library-section .summary-hint {
  font-size: 0.78rem;
  color: var(--text2);
}
.library-section details .card,
.data-source-section details .card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 20px 20px;
}
.library-section details .card-title {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

/* ---- 卡片 ---- */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ---- 起卦面板 ---- */
.cast-panel { display: flex; flex-direction: column; gap: 16px; }
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.card-title-row .card-title {
  flex: 1;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.cast-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cast-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text2);
  padding: 4px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.cast-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.cast-panel.is-collapsed .cast-panel-body {
  display: none;
}
.cast-panel.is-collapsed .cast-toggle {
  color: var(--gold);
  border-color: var(--gold);
}

.tab-bar {
  display: flex;
  gap: 4px;
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 4px;
}
.tab-btn {
  flex: 1;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.tab-btn.active {
  background: var(--gold);
  color: var(--bg);
  font-weight: bold;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---- 表单元素 ---- */
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text2);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--gold); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 摇钱法 */
.coin-throws { display: flex; flex-direction: column; gap: 8px; }
.coin-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coin-row label {
  width: 48px;
  font-size: 0.82rem;
  color: var(--text2);
  flex-shrink: 0;
}
.coin-btns { display: flex; gap: 6px; flex: 1; }
.coin-btn {
  flex: 1;
  padding: 6px 2px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
  transition: all 0.2s;
  text-align: center;
}
.coin-btn:hover { border-color: var(--gold); color: var(--gold); }
.coin-btn.selected { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: bold; }
.coin-btn.yang { border-color: var(--yang); }
.coin-btn.yin  { border-color: var(--yin); }
.coin-btn.yang.selected { background: var(--yang); }
.coin-btn.yin.selected  { background: var(--yin); }

/* 事项选择 */
.matter-select { margin-top: 4px; }

/* 按钮 */
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.2em;
  transition: all 0.2s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, #a07830 100%);
  color: var(--bg);
  font-weight: bold;
}
.btn-primary:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  padding: 8px;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

/* 数据源 */
.data-source-card {
  margin-top: 18px;
}
.data-status {
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88rem;
}
.data-status.is-ready {
  border-color: rgba(92,184,92,0.45);
  color: #b5de95;
}
.data-status.is-error {
  border-color: rgba(224,92,92,0.55);
  color: #ffb0b0;
}
.data-hint {
  color: var(--text2);
  font-size: 0.8rem;
  line-height: 1.8;
  margin-top: 12px;
}
.data-hint code {
  color: var(--gold2);
  background: rgba(201,168,76,0.08);
  padding: 1px 4px;
  border-radius: 4px;
}
.data-actions {
  margin-top: 14px;
}

/* ---- 排盘展示区 ---- */
.result-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.result-panel > .overview-card,
.result-panel > .plate-card {
  grid-column: 1 / -1;
}
.analysis-ai-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
  align-items: stretch;
}
.analysis-ai-grid .card {
  height: 100%;
}

.overview-card {
  background:
    radial-gradient(circle at top right, rgba(232,201,122,0.08), transparent 30%),
    linear-gradient(180deg, rgba(36,34,54,0.72), rgba(26,24,40,0.96));
  padding: 16px 18px;
}
.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.meta-pill,
.meta-note {
  border: 1px solid rgba(58,54,96,0.72);
  background: rgba(15,14,23,0.42);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.meta-pill span {
  color: var(--text2);
}
.meta-pill strong {
  color: var(--gold2);
  font-weight: 700;
}
.meta-note {
  border-radius: 12px;
  color: var(--text2);
  line-height: 1.6;
  flex: 1 1 100%;
  margin-top: 2px;
}
.overview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.overview-grid > * {
  flex: 1 1 280px;
  min-width: 0;
}
.overview-time-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-mini-title {
  color: var(--gold2);
  font-size: 0.84rem;
  letter-spacing: 0.18em;
}
.time-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.time-item-card {
  background: rgba(15,14,23,0.5);
  border: 1px solid rgba(58,54,96,0.8);
  border-radius: 12px;
  padding: 10px 12px;
}
.time-item-label {
  color: var(--text2);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}
.time-item-value {
  color: var(--text);
  font-size: 0.98rem;
  margin-top: 4px;
}
.time-jieqi-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(58,54,96,0.8);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(15,14,23,0.5);
}
.time-jieqi-value {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--text);
  margin-top: 0;
}
.season-board {
  background: rgba(15,14,23,0.4);
  border: 1px solid rgba(58,54,96,0.7);
  border-radius: 14px;
  padding: 12px;
}
.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.season-item {
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid rgba(58,54,96,0.7);
  background: rgba(36,34,54,0.9);
}
.season-item span {
  display: block;
  font-size: 0.72rem;
  color: var(--text2);
  margin-bottom: 4px;
}
.season-item strong {
  font-size: 0.95rem;
}
.season-旺 strong { color: var(--green); }
.season-相 strong { color: #95d152; }
.season-休 strong { color: var(--gold2); }
.season-囚 strong { color: #f4af64; }
.season-死 strong { color: var(--red); }

.plate-card {
  background:
    linear-gradient(180deg, rgba(26,24,40,0.96), rgba(15,14,23,0.98)),
    radial-gradient(circle at top center, rgba(91,155,213,0.06), transparent 42%);
}
.yao-board-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.plate-note-title {
  color: var(--gold2);
  align-self: center;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  margin-right: 6px;
}
.plate-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plate-head,
.plate-row {
  display: grid;
  grid-template-columns: 88px 132px minmax(0, 1fr) 66px minmax(0, 1fr);
  gap: 10px;
}
.plate-head {
  color: var(--text2);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: none;
}
.plate-head-cell {
  padding: 0 6px 4px;
}
.plate-row {
  align-items: stretch;
}
.plate-row.is-yongshen .plate-hex:not(.plate-hex-bian) {
  border-color: rgba(201,168,76,0.55);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.22);
}
.plate-row.is-dong .plate-change {
  color: var(--dong);
  border-color: rgba(255,107,107,0.35);
}
.plate-cell {
  min-width: 0;
}
.plate-shen,
.plate-fushen,
.plate-change,
.plate-hex {
  border-radius: 14px;
  border: 1px solid rgba(58,54,96,0.72);
  background: rgba(36,34,54,0.78);
}
.plate-shen,
.plate-change {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.plate-shen {
  font-size: 1rem;
  padding: 12px 8px;
}
.plate-fushen {
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.plate-empty,
.plate-empty-panel {
  color: var(--text2);
  font-size: 0.82rem;
}
.plate-empty-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
.plate-hex {
  padding: 12px 14px;
}
.plate-hex-bian {
  background: rgba(26,24,40,0.92);
}
.plate-line-main {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.plate-line-symbol {
  display: flex;
  justify-content: center;
}
.plate-line-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plate-line-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.plate-entity {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.plate-qin {
  font-weight: bold;
  font-size: 0.98rem;
}
.plate-zhi {
  color: var(--text);
  font-size: 0.92rem;
}
.plate-wuxing {
  font-size: 0.84rem;
  font-weight: bold;
}
.plate-marker {
  display: inline-flex;
  align-items: center;
}
.plate-line-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.plate-change {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--text2);
}
.plate-change.is-active {
  background: rgba(224,92,92,0.12);
}

/* 世应标记 */
.shi-mark {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(201,168,76,0.2);
  border: 1px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.75rem;
}
.ying-mark {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(91,155,213,0.2);
  border: 1px solid var(--blue);
  border-radius: 4px;
  color: var(--blue);
  font-size: 0.75rem;
}

/* 爻象符号 */
.yx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 68px;
}
.yx .bar {
  display: inline-block;
  height: 7px;
  border-radius: 3px;
  background: var(--yang);
  flex-shrink: 0;
}
.yx.yang .bar        { width: 54px; }
.yx.yin  .bar        { width: 21px; }
.yx.dong .bar        { background: var(--dong); }
.yx.dong > span      { color: var(--dong); font-size: 0.95rem; font-weight: bold; line-height: 1; }

/* 五行颜色 */
.wx-木 { color: #6dbf6d; }
.wx-火 { color: #e05c5c; }
.wx-土 { color: #c9a84c; }
.wx-金 { color: #c0c8d0; }
.wx-水 { color: #5b9bd5; }

/* 变爻单元格 */
.bian-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
}
.bian-inline {
  align-items: flex-start;
}
.bian-cell .bian-zhi { color: var(--dong); font-size: 0.88rem; }
.bian-cell .bian-wx  { font-size: 0.72rem; }

/* 六亲颜色 */
.qin-父母 { color: #a0c4ff; }
.qin-兄弟 { color: #ffd6a5; }
.qin-子孙 { color: #caffbf; }
.qin-妻财 { color: #fdffb6; }
.qin-官鬼 { color: #ffadad; }

/* 六神颜色 */
.shen-青龙 { color: #5cb85c; }
.shen-朱雀 { color: #e05c5c; }
.shen-勾陈 { color: #c9a84c; }
.shen-螣蛇 { color: #9b59b6; }
.shen-白虎 { color: #bdc3c7; }
.shen-玄武 { color: #3498db; }

/* 状态标签 */
.tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  margin: 1px;
}
.tag-kong  { background: rgba(160,152,128,0.3); color: var(--text2); }
.tag-po    { background: rgba(224,92,92,0.2);   color: var(--red); }
.tag-mu    { background: rgba(91,155,213,0.2);  color: var(--blue); }
.tag-dong  { background: rgba(255,107,107,0.2); color: var(--dong); }
.tag-pos   { background: rgba(91,155,213,0.14); color: #9cc9f2; }
.tag-yong  { background: rgba(201,168,76,0.2);  color: var(--gold2); }
.tag-wang  { background: rgba(92,184,92,0.2);   color: var(--green); }
.tag-xiang { background: rgba(92,184,92,0.1);   color: #8bc34a; }
.tag-xiu   { background: rgba(160,152,128,0.2); color: var(--text2); }
.tag-qiu   { background: rgba(224,92,92,0.1);   color: #e08c5c; }
.tag-si    { background: rgba(224,92,92,0.2);   color: var(--red); }

/* ---- 分析结果 ---- */
.analysis-section { margin-bottom: 16px; }
.analysis-title {
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.analysis-title span:first-child { flex: 1; }
.analysis-body {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.8;
  padding-left: 12px;
}
.analysis-body p { margin-bottom: 4px; }

.section-score {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text2);
}
.section-score-positive {
  color: var(--green);
  border-color: rgba(92,184,92,0.5);
  background: rgba(92,184,92,0.1);
}
.section-score-negative {
  color: var(--red);
  border-color: rgba(224,92,92,0.5);
  background: rgba(224,92,92,0.08);
}
.section-score-neutral {
  color: var(--text2);
  border-color: rgba(58,54,96,0.7);
}

.analysis-score-summary {
  border: 1px solid rgba(58,54,96,0.7);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  background: rgba(15,14,23,0.45);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.score-summary-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.score-total {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.score-total.positive { color: var(--green); }
.score-total.negative { color: var(--red); }
.score-total.neutral  { color: var(--text2); }
.score-verdict {
  font-size: 1rem;
  color: var(--gold2);
  letter-spacing: 0.2em;
  font-weight: 600;
}
.score-reasons {
  flex: 1 1 220px;
  color: var(--text2);
  line-height: 1.7;
}
.score-reasons p {
  margin: 0;
}

.score-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(58,54,96,0.4);
}
.score-row:last-child {
  border-bottom: none;
}
.score-chip {
  min-width: 48px;
  text-align: center;
  border: 1px solid rgba(58,54,96,0.7);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
  font-family: 'Noto Serif SC', 'SimSun', serif;
}
.score-row.score-positive .score-chip {
  color: var(--green);
  border-color: rgba(92,184,92,0.5);
  background: rgba(92,184,92,0.12);
}
.score-row.score-negative .score-chip {
  color: var(--red);
  border-color: rgba(224,92,92,0.5);
  background: rgba(224,92,92,0.12);
}
.score-row.score-neutral .score-chip {
  color: var(--text2);
}
.score-row p {
  margin: 0;
  flex: 1;
}
.score-empty {
  color: var(--text2);
  margin: 0;
}

/* 吉凶判断 */
.verdict {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.verdict-大吉 { background: rgba(92,184,92,0.2);  color: var(--green); border: 1px solid var(--green); }
.verdict-吉   { background: rgba(92,184,92,0.1);  color: #8bc34a;      border: 1px solid #8bc34a; }
.verdict-平   { background: rgba(201,168,76,0.1); color: var(--gold);  border: 1px solid var(--gold); }
.verdict-凶   { background: rgba(224,92,92,0.1);  color: var(--red);   border: 1px solid var(--red); }
.verdict-大凶 { background: rgba(224,92,92,0.2);  color: var(--red);   border: 1px solid var(--red); }

/* ---- AI 解读区 ---- */
.ai-section { display: flex; flex-direction: column; gap: 12px; }
.ai-config {
  background: rgba(36,34,54,0.65);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px 14px;
}
.ai-config summary {
  color: var(--gold);
  cursor: pointer;
  user-select: none;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
.ai-config[open] summary {
  margin-bottom: 12px;
}
.ai-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.ai-config-wide {
  grid-column: 1 / -1;
}
.ai-config-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.ai-config-actions .btn {
  width: auto;
  min-width: 110px;
}
.ai-config-tip {
  margin-top: 12px;
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.7;
}
.ai-output {
  min-height: 200px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 0.9rem;
  line-height: 1.9;
  white-space: pre-wrap;
  color: var(--text);
}
.ai-output.loading { color: var(--text2); font-style: italic; }
.ai-output .cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--gold);
  animation: blink 0.8s infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* 追问区 */
.followup-row {
  display: flex;
  gap: 8px;
}
.followup-row input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
}
.followup-row input:focus { border-color: var(--gold); }
.followup-row button {
  padding: 8px 16px;
  background: var(--bg3);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.followup-row button:hover { background: var(--gold); color: var(--bg); }

/* 历史追问 */
.qa-history { display: flex; flex-direction: column; gap: 10px; }
.qa-item { background: var(--bg3); border-radius: 6px; padding: 10px 14px; }
.qa-q { color: var(--gold2); font-size: 0.85rem; margin-bottom: 6px; }
.qa-a { font-size: 0.88rem; line-height: 1.8; white-space: pre-wrap; }

/* ---- 卦象资料库 ---- */
.library-card {
  margin-top: 0;
}
.library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  margin-bottom: 12px;
}
.library-toolbar input,
.library-toolbar select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
}
.library-toolbar input:focus,
.library-toolbar select:focus {
  border-color: var(--gold);
}
.library-meta {
  color: var(--text2);
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.library-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}
.gua-list {
  max-height: 720px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  padding-right: 4px;
}
.gua-list-empty {
  color: var(--text2);
  font-size: 0.85rem;
}
.gua-chip {
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}
.gua-chip:hover {
  border-color: var(--gold);
  color: var(--gold2);
  transform: translateY(-1px);
}
.gua-chip.active {
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(160,120,48,0.18));
  border-color: var(--gold);
  color: var(--gold2);
}
.gua-detail {
  min-height: 320px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.gua-detail-empty {
  color: var(--text2);
  font-size: 0.88rem;
  line-height: 1.8;
}
.gua-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.gua-detail-title {
  font-size: 1.1rem;
  color: var(--gold2);
  letter-spacing: 0.08em;
}
.gua-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gua-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--gold2);
  font-size: 0.76rem;
}
.gua-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.gua-line-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: center;
}
.gua-line-label {
  color: var(--text2);
  font-size: 0.8rem;
}
.gua-line-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gua-line-text {
  color: var(--text);
  font-size: 0.85rem;
}
.gua-detail-section {
  margin-top: 14px;
}
.gua-detail-section h4 {
  color: var(--gold);
  font-size: 0.88rem;
  margin-bottom: 8px;
  letter-spacing: 0.08em;
}
.gua-detail-section p {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.85;
  white-space: pre-wrap;
}

/* ---- 空状态 ---- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text2);
}
.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.4;
}
.empty-state p { font-size: 0.9rem; letter-spacing: 0.1em; }

/* ---- 错误提示 ---- */
.error-msg {
  padding: 10px 14px;
  background: rgba(224,92,92,0.1);
  border: 1px solid var(--red);
  border-radius: 6px;
  color: var(--red);
  font-size: 0.85rem;
}

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---- 分隔线 ---- */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

@media (max-width: 900px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .plate-head,
  .plate-row {
    grid-template-columns: 72px 100px minmax(0, 1fr) 56px minmax(0, 1fr);
  }
  .analysis-ai-grid {
    grid-template-columns: 1fr;
  }
  .library-layout {
    grid-template-columns: 1fr;
  }
  .gua-list {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .library-toolbar,
  .ai-config-grid,
  .form-row {
    grid-template-columns: 1fr;
  }
  .followup-row,
  .ai-config-actions {
    flex-direction: column;
  }
  .ai-config-actions .btn {
    width: 100%;
  }
  .season-grid,
  .time-bar {
    grid-template-columns: 1fr;
  }
  .plate-head {
    display: none;
  }
  .plate-row {
    grid-template-columns: 1fr;
  }
  .plate-shen,
  .plate-fushen,
  .plate-change {
    min-height: 48px;
  }
  .plate-line-main {
    grid-template-columns: 1fr;
  }
  .plate-line-symbol {
    justify-content: flex-start;
  }
}

/* 六冲标签 */
.tag-liuchong { background: rgba(155,89,182,0.2); color: #9b59b6; border: 1px solid #9b59b6; }

/* ---- 响应式 ---- */
@media (max-width: 600px) {
  header h1 { font-size: 1.4rem; }
  .container { padding: 12px 8px; gap: 12px; }
  .card { padding: 14px; }
  .yao-table { font-size: 0.78rem; }
}