/* 紫微斗数测算 · 网页端
   美学方向：蓝鸟哥星图。藏青夜空底、宣纸内容区、朱砂点缀、鎏金描边。
   刻意避开 AI 指纹：无 emoji、无紫渐变、无统一大圆角柔阴影卡片；
   标题用衬线、图标为手绘线性 SVG、命盘为传统方形十二宫排盘。 */

:root {
  --night: #14202e;        /* 藏青夜空 */
  --night-2: #1c2c3e;      /* 稍亮藏青 */
  --paper: #f3ecde;        /* 宣纸米 */
  --paper-2: #faf6ec;      /* 浅纸 */
  --ink: #2a2a26;          /* 墨 */
  --ink-soft: #5b574c;     /* 浅墨 */
  --gold: #b08a3e;         /* 鎏金 */
  --gold-soft: #c9a85f;
  --cinnabar: #9e3b30;     /* 朱砂 */
  --cinnabar-soft: #b5564a;
  --line: #d8cdb6;         /* 纸面细边 */
  --line-night: #2e425a;   /* 夜空细边 */
  --muted: #8b8472;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "Songti SC", "STSong", "Source Han Serif SC", "PingFang SC", "Microsoft YaHei", serif;
  /* 藏青夜空，叠极淡星点纹理（纯 CSS，不用图片） */
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(201,168,95,.5), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(201,168,95,.35), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(201,168,95,.4), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(201,168,95,.3), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(201,168,95,.25), transparent),
    var(--night);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 40px;
}

/* ===== 顶部品牌 ===== */
.masthead { text-align: center; color: var(--paper); margin-bottom: 22px; }
.masthead .seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 10px;
}
.masthead h1 {
  font-size: 26px; letter-spacing: 8px; font-weight: 700;
  color: var(--gold-soft); text-indent: 8px;
}
.masthead .tagline {
  font-size: 12.5px; letter-spacing: 3px; color: #a9b6c4; margin-top: 6px;
}
.masthead .rule {
  width: 120px; height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ===== 主容器（宣纸） ===== */
.sheet {
  width: 100%; max-width: 920px;
  background: var(--paper);
  border: 1px solid var(--gold);
  box-shadow: 0 2px 0 var(--night-2), 0 18px 50px rgba(0,0,0,.45);
  padding: 26px 24px 30px;
  position: relative;
}
/* 宣纸四角鎏金小角标 */
.sheet::before, .sheet::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--gold);
}
.sheet::before { top: 7px; left: 7px; border-right: none; border-bottom: none; }
.sheet::after  { bottom: 7px; right: 7px; border-left: none; border-top: none; }

.section-title {
  font-size: 17px; color: var(--cinnabar); letter-spacing: 2px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.section-title .ico { color: var(--gold); flex: none; }
.section-desc { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-bottom: 18px; }

/* ===== 生辰表单 ===== */
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.field label {
  display: block; font-size: 12px; color: var(--ink-soft);
  letter-spacing: 1px; margin-bottom: 5px;
}
.field select, .field input {
  width: 100%; padding: 9px 10px; font-size: 13.5px; font-family: inherit;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 2px;
  appearance: none;
}
.field select:focus, .field input:focus { outline: none; border-color: var(--gold); }

.gender-row { display: flex; gap: 10px; }
.gender-opt, .cal-opt {
  flex: 1; text-align: center; padding: 9px 0; cursor: pointer;
  font-size: 13.5px; font-family: inherit; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px;
}
.gender-opt.sel, .cal-opt.sel { color: var(--cinnabar); border-color: var(--cinnabar); background: #f7ebe9; }

.leap-row {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12.5px; color: var(--ink-soft); cursor: pointer; user-select: none;
}
.leap-row input { width: 15px; height: 15px; accent-color: var(--cinnabar); cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 20px; padding: 13px;
  background: var(--night); color: var(--gold-soft);
  border: 1px solid var(--gold); border-radius: 2px;
  font-size: 15px; letter-spacing: 4px; font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--night-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn .ico { flex: none; }

/* ===== 命盘（传统方形十二宫，4x4 外圈 + 中宫） ===== */
.chart-wrap { margin-top: 6px; }
.chart-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--ink-soft);
}
.chart-meta b { color: var(--cinnabar); font-weight: 700; }

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--gold);
  background: var(--gold);                 /* 缝隙显金线 */
  aspect-ratio: 1 / 1;
}
.cell {
  background: var(--paper-2);
  padding: 7px 7px 5px;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  cursor: pointer;
  transition: background .12s;
}
.cell:hover { background: #fff; }
.cell.ming { background: #f7ece9; }       /* 命宫淡朱砂 */
.cell.center {
  grid-column: 2 / 4; grid-row: 2 / 4;
  background: var(--night);
  cursor: default;
  align-items: center; justify-content: center; text-align: center;
  color: var(--paper);
}
.cell.center:hover { background: var(--night); }

.cell .stars {
  display: flex; flex-wrap: wrap; gap: 2px 5px; align-content: flex-start; flex: 1;
}
.cell .star {
  font-size: 12.5px; color: var(--ink); line-height: 1.35;
}
.cell .star.major { color: var(--cinnabar); font-weight: 700; }
.cell .hua {
  font-size: 9px; color: #fff; background: var(--gold);
  border-radius: 2px; padding: 0 3px; margin-left: 1px; vertical-align: top;
}
.cell .hua.ji { background: var(--cinnabar); }
.cell .palace-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto; padding-top: 4px; border-top: 1px dashed var(--line);
}
.cell .pname { font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.cell .pname.special { color: var(--cinnabar); font-weight: 700; }
.cell .gz { font-size: 11px; color: var(--muted); }

/* 中宫信息 */
.center .c-name { font-size: 20px; letter-spacing: 6px; color: var(--gold-soft); }
.center .c-line { font-size: 12px; color: #b9c4d0; margin-top: 8px; line-height: 1.9; }
.center .c-line b { color: var(--paper); }

/* ===== AI 解读区 ===== */
.reading {
  margin-top: 22px; padding: 18px 18px 16px;
  background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--cinnabar);
}
.reading .r-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 14.5px; color: var(--cinnabar); letter-spacing: 1px;
}
.reading .badge {
  margin-left: auto; font-size: 10.5px; letter-spacing: 1px; padding: 2px 8px;
  border-radius: 2px; border: 1px solid var(--line); color: var(--muted);
}
.reading .badge.live { color: var(--gold); border-color: var(--gold); }
.reading .r-body { font-size: 13.5px; line-height: 2; color: var(--ink); white-space: pre-wrap; }
.reading .r-body h4 {
  font-size: 14px; color: var(--cinnabar); margin: 14px 0 2px; letter-spacing: 1px;
}
.reading .r-body h4:first-child { margin-top: 0; }

.loading { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.spinner {
  width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 七问 · 深度解读（手风琴） ===== */
.qa-list { display: flex; flex-direction: column; gap: 8px; }
.qa-item { border: 1px solid var(--line); background: var(--paper-2); }
.qa-q {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; font-size: 13.5px; color: var(--ink); user-select: none;
}
.qa-q .qnum {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--gold); border: 1px solid var(--gold);
}
.qa-q .qtext { flex: 1; }
.qa-q .qarrow {
  flex: none; color: var(--muted); transition: transform .2s; font-size: 12px;
}
.qa-item.open .qa-q { color: var(--cinnabar); }
.qa-item.open .qa-q .qnum { color: var(--cinnabar); border-color: var(--cinnabar); }
.qa-item.open .qa-q .qarrow { transform: rotate(90deg); }
.qa-a {
  display: none; padding: 0 14px 14px 46px;
  font-size: 13px; line-height: 2; color: var(--ink-soft); white-space: pre-wrap;
  border-top: 1px dashed var(--line);
}
.qa-item.open .qa-a { display: block; padding-top: 12px; }

.disclaimer {
  margin-top: 22px; text-align: center; font-size: 11.5px;
  color: #8a97a4; letter-spacing: 1px; line-height: 1.8;
}

/* 单宫弹层 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(10,16,24,.6);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-mask.show { display: flex; }
.modal {
  width: 100%; max-width: 460px; background: var(--paper);
  border: 1px solid var(--gold); padding: 22px 22px 20px; position: relative;
}
.modal .m-title { font-size: 16px; color: var(--cinnabar); letter-spacing: 2px; margin-bottom: 4px; }
.modal .m-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.modal .m-body { font-size: 13.5px; line-height: 2; color: var(--ink); white-space: pre-wrap; min-height: 60px; }
.modal .m-close {
  position: absolute; top: 14px; right: 16px; cursor: pointer; color: var(--muted);
  background: none; border: none; font-size: 18px; line-height: 1; font-family: inherit;
}

@media (max-width: 560px) {
  .masthead h1 { font-size: 22px; letter-spacing: 5px; }
  .sheet { padding: 20px 14px 24px; }
  .cell .star { font-size: 11px; }
  .center .c-name { font-size: 16px; }
}