:root {
  --bg: #ffffff;
  --grid-line: #b9c7c9;
  --ink: #222;
  --soul-bg: #f0f0f0;
  --panel-bg: #fffef7;
  --hi-bg: #fff9d6;          /* highlighted (horoscope) palace */
  --teal: #2aa5a0;
  --major: #9c2b3f;          /* 主星 */
  --soft: #0f8a7e;           /* 辅星 左右昌曲魁钺 */
  --tough: #d23b1a;          /* 煞星 羊陀火铃空劫 */
  --lucun: #c98a00;          /* 禄存 */
  --tianma: #1f8a4c;         /* 天马 */
  --flower: #c2188f;         /* 桃花/红鸾天喜 */
  --adj: #9a9a9a;            /* 杂曜 */
  --mut-lu: #16a34a;         /* 化禄 */
  --mut-quan: #2563eb;       /* 化权 */
  --mut-ke: #9333ea;         /* 化科 */
  --mut-ji: #dc2626;         /* 化忌 */
  --god: #8a8a8a;
  --horo: #b8860b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC", sans-serif;
  color: var(--ink);
  background: #f4f6f6;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 1160px;
  max-width: 100%;
  margin: 12px auto;
  background: var(--bg);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.brand { font-weight: 700; color: var(--major); margin-right: 14px; }
.tag {
  font-size: 12px;
  padding: 3px 10px;
  background: #e7eded;
  color: #555;
  border-radius: 3px;
  cursor: pointer;
}
.tag-on { background: var(--teal); color: #fff; }
.spacer { flex: 1; }
.icon-btn {
  border: none; background: var(--teal); color: #fff;
  padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
}

/* ---------- 4x4 board ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(176px, 1fr));
  border: 1px solid var(--grid-line);
  border-right: none;
  border-bottom: none;
}

.palace {
  position: relative;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  padding: 4px 5px 2px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  overflow: hidden;
}
.palace.soul { background: var(--soul-bg); }
.palace.hi { background: var(--hi-bg); }

/* star area at top */
.p-stars { display: flex; flex-direction: row; gap: 6px; min-height: 86px; }
.star-col {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.05;
}
.star-col .sname {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 15px;
}
.star-col.minor .sname { font-weight: 600; font-size: 14px; }
.star-col .bright { font-size: 11px; color: #555; margin-top: 1px; }
.star-col .muts { display: flex; flex-direction: column; align-items: center; margin-top: 1px; }
.mut { font-size: 11px; font-weight: 700; line-height: 1.1; }
/* 运限四化: 单字色块, 底色=运限层颜色 */
.mut.lbox {
  color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
  padding: 1px 1px; margin-top: 1px; border-radius: 2px;
  min-width: 12px; text-align: center;
}

.major  .sname { color: var(--major); }
.soft   .sname { color: var(--soft); }
.tough  .sname { color: var(--tough); }
.lucun  .sname { color: var(--lucun); }
.tianma .sname { color: var(--tianma); }
.flower .sname { color: var(--flower); }
.adj    .sname { color: var(--adj); }
.horo-star .sname { color: var(--horo); }

/* ---------- 运限主题色 (大限粉/流年蓝/流月绿/流日橙/流时金, 同原站) ---------- */
.s-decadal  { --c: #fc46a9; }
.s-yearly   { --c: #0090ff; }
.s-xiaoxian { --c: #0090ff; }
.s-monthly  { --c: #4fa019; }
.s-daily    { --c: #f07e3f; }
.s-hourly   { --c: #9a801b; }
/* 运曜流曜 星名按所属运限层着色 */
.horo-star.s-decadal .sname,
.horo-star.s-yearly .sname,
.horo-star.s-xiaoxian .sname,
.horo-star.s-monthly .sname,
.horo-star.s-daily .sname,
.horo-star.s-hourly .sname { color: var(--c, var(--horo)); }
.horo-star .sname { color: var(--horo); }
/* 运限四化色块底色 */
.mut.lbox { background: var(--c, var(--horo)); }
/* 运限宫名单字色块 */
.scope-boxes { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.sbox {
  display: inline-block; color: #fff; font-size: 10px; font-weight: 700;
  line-height: 1.25; min-width: 14px; text-align: center; border-radius: 2px;
  background: var(--c, var(--horo)); padding: 0 1px;
}
/* 当前(最深)运限命宫: 以该层颜色描边 */
[data-scope="decadal"]  .palace.hi { --hl: #fc46a9; }
[data-scope="yearly"]   .palace.hi,
[data-scope="xiaoxian"] .palace.hi { --hl: #0090ff; }
[data-scope="monthly"]  .palace.hi { --hl: #4fa019; }
[data-scope="daily"]    .palace.hi { --hl: #f07e3f; }
[data-scope="hourly"]   .palace.hi { --hl: #9a801b; }
.board[data-scope] .palace.hi {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--hl, var(--horo));
}

/* 杂曜: 左侧小字 */
.star-col.adj .sname { font-size: 11px; font-weight: 400; letter-spacing: 0; }

.mut-lu   { color: var(--mut-lu); }
.mut-quan { color: var(--mut-quan); }
.mut-ke   { color: var(--mut-ke); }
.mut-ji   { color: var(--mut-ji); }

/* 小限 ages numbers row */
.p-ages {
  margin-top: auto;
  font-size: 10px; color: #b0784a;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
}

/* bottom info row */
.p-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 2px;
  border-top: 1px dashed #e0e6e6;
  padding-top: 2px;
}
.gods { display: flex; gap: 3px; }
.gods .g {
  writing-mode: vertical-rl;
  font-size: 10px; color: var(--god); line-height: 1.05;
}
/* 运限神煞 (流年将前/岁前…) 以运限色显示 */
.gods .g.scope-g { color: var(--c, var(--horo)); font-weight: 600; }
.b-center { text-align: center; flex: 1; }
.decadal { font-size: 11px; color: #444; }
.pname {
  font-size: 15px; font-weight: 700; color: #1f6f6b;
  margin-top: 1px;
}
.pname .scope-name { display: block; font-size: 11px; color: var(--horo); font-weight: 600; }
.body-mark { color: var(--major); font-size: 12px; }
.ganzhi {
  writing-mode: vertical-rl; text-align: center;
  font-size: 12px; color: #777; letter-spacing: 1px;
}

/* ---------- center info panel ---------- */
.center-cell {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
}
.center-panel {
  height: 100%;
  background: var(--panel-bg);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px;
}
.center-panel .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.center-panel .k { color: #888; min-width: 30px; }
.center-panel .v { color: #333; }
.center-panel .v.lunar { color: var(--major); }
.center-panel .v.strong { color: #1f6f6b; font-weight: 600; }
.summary { color: #555; margin-left: 4px; }
.ipt { border: 1px solid #cfd8d8; border-radius: 3px; padding: 2px 4px; font-size: 13px; }
.ipt.yr { width: 56px; } .ipt.mo, .ipt.dy { width: 40px; }
.ipt.time { width: 120px; } .ipt.time2 { width: 96px; }
.ipt.xx { width: 60px; padding: 1px 2px; } .ipt.dx { width: 84px; }
.chk { font-size: 12px; color: #555; }
.run-btn {
  background: var(--teal); color: #fff; border: none;
  padding: 6px 22px; border-radius: 4px; cursor: pointer; font-size: 14px;
  letter-spacing: 2px;
}
.scope-row label, .gender-row label, .plate-row label { font-size: 13px; }
.mini-btn {
  background: #eef3f3; border: 1px solid #cfd8d8; color: #555;
  padding: 3px 8px; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.horo-row, .step-row { gap: 4px; }
.hinfo { font-size: 12px; color: var(--major); }

@media (max-width: 1180px) {
  #app { width: 100%; }
  .board { grid-template-rows: repeat(4, minmax(150px, auto)); }
  .star-col .sname { font-size: 13px; }
}