/* 紫微斗數 — minimal, mobile-first. No build step, no external requests. */

:root {
  --bg: #fcfcfb;
  --surface: #ffffff;
  --ink: #1c1b19;
  --ink-2: #57554f;
  --ink-3: #949089;
  --line: #e6e4df;
  --line-strong: #d3d0c9;
  --accent: #a13d2d;
  --life-tint: #fdf6f4;
  --star-good: #2c7a52;
  --star-bad: #b3392b;
  --pal-self: #a13d2d;
  --pal-kin: #2b5f9e;
  --pal-fortune: #8a6516;
  --pal-outer: #2b7d78;
  --tint-good: #eef6f1;
  --tint-bad: #fbeeec;
  --tint-row: #f7f6f3;
  --lu: #2f7a4f;
  --quan: #2b5f9e;
  --ke: #6a4a9c;
  --ji: #a13d2d;
  --wx-mu: #2f7a4f;
  --wx-huo: #b3392b;
  --wx-tu: #8a6516;
  --wx-jin: #5b6b74;
  --wx-shui: #2b5f9e;
  --radius: 10px;
  --pad: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --surface: #1b1a18;
    --ink: #eceae5;
    --ink-2: #aaa79f;
    --ink-3: #77746d;
    --line: #2c2a26;
    --line-strong: #3b3833;
    --accent: #d98b6f;
    --life-tint: #221d1a;
    --star-good: #6bbd8c;
    --star-bad: #e28073;
    --pal-self: #d98b6f;
    --pal-kin: #7aa9dd;
    --pal-fortune: #d0a44f;
    --pal-outer: #63bdb6;
    --tint-good: #16241c;
    --tint-bad: #2a1a17;
    --tint-row: #201f1c;
    --lu: #6bbd8c;
    --quan: #7aa9dd;
    --ke: #ab95da;
    --ji: #e08573;
    --wx-mu: #6bbd8c;
    --wx-huo: #e28073;
    --wx-tu: #d0a44f;
    --wx-jin: #9fb0ba;
    --wx-shui: #7aa9dd;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
    "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px var(--pad) 72px;
}

/* ---------- type ---------- */

.masthead { text-align: center; margin-bottom: 32px; }

.masthead .brand {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 30px;
  letter-spacing: 0.22em;
  font-weight: 500;
  margin: 0 0 6px;
}

.masthead h1 {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

h2 {
  font-size: 14px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-2);
  margin: 40px 0 14px;
  text-indent: 0.14em;
}

.hint { color: var(--ink-3); font-size: 13px; line-height: 1.7; }

/* ---------- form ---------- */

.field { margin-bottom: 22px; }

.field > label,
.field > .label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.seg { display: flex; gap: 8px; }

.seg input { position: absolute; opacity: 0; pointer-events: none; }

.seg label {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.seg input:checked + label {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }

select, input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* keeps iOS from zooming on focus */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="text"] { background-image: none; }

select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.check { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.check input { width: 20px; height: 20px; accent-color: var(--accent); }

.check label { font-size: 14px; color: var(--ink-2); }

button.primary {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  cursor: pointer;
  margin-top: 8px;
}

button.primary:active { opacity: .85; }

.errors {
  border: 1px solid var(--ji);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 22px;
  color: var(--ji);
  font-size: 14px;
}

.errors ul { margin: 0; padding-left: 18px; }

/* ---------- summary ---------- */

.summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  margin-bottom: 22px;
}

.summary .who { font-size: 17px; margin-bottom: 12px; letter-spacing: .05em; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }

.facts div { font-size: 13px; line-height: 1.5; }

.facts dt { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; }

.facts dd { margin: 2px 0 0; color: var(--ink); }

.note {
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 12px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---------- chart grid ---------- */

.chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(108px, auto);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cell {
  background: var(--surface);
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.cell.is-life {
  background: var(--life-tint); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.cell .stars { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1px 5px; }

.cell .s { font-size: 12px; line-height: 1.45; white-space: nowrap; }

/* Two independent signals: weight/size says 主星 or 輔星, colour says 吉凶. */
.cell .s.main { font-weight: 600; }

.cell .s.lucky, .cell .s.malefic { font-size: 11px; }

.p-good { color: var(--star-good); }
.p-bad { color: var(--star-bad); }
.p-neutral { color: var(--ink); }
.cell .s.lucky.p-neutral, .cell .s.malefic.p-neutral { color: var(--ink-2); }

.hua {
  font-size: 9px;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 700;
}

.hua-祿 { color: var(--lu); }
.hua-權 { color: var(--quan); }
.hua-科 { color: var(--ke); }
.hua-忌 { color: var(--ji); }

/* Two stacked rows: a 86px-wide phone cell cannot hold 大限, 宮名 and 干支
   side by side without clipping. */
.cell .foot {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dotted var(--line-strong);
  font-size: 10px;
  color: var(--ink-3);
}

.cell .foot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.cell .daxian { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.cell .pname { font-size: 11px; letter-spacing: .04em; }

.cat-self { color: var(--pal-self); }
.cat-kin { color: var(--pal-kin); }
.cat-fortune { color: var(--pal-fortune); }
.cat-outer { color: var(--pal-outer); }

.cell.is-life .pname, .cell .pname.body { font-weight: 700; }

.center {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.center .big {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 17px;
  letter-spacing: .12em;
  text-indent: .12em;
}

.center .kv { font-size: 11px; color: var(--ink-3); line-height: 1.7; }

/* ---------- readings ---------- */

details.reading {
  border-bottom: 1px solid var(--line);
}

details.reading[open] { padding-bottom: 8px; }

details.reading summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
}

details.reading summary::-webkit-details-marker { display: none; }

details.reading summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--ink-3);
  font-size: 13px;
}

details.reading[open] summary::after { content: "－"; }

.r-name { font-size: 15px; letter-spacing: .08em; min-width: 4.6em; }

.r-stars { font-size: 13px; color: var(--ink-2); }

.r-branch { font-size: 11px; color: var(--ink-3); }

.r-body { padding: 0 0 8px; }

.r-star-head {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--accent);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.r-body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  text-align: justify;
}

.r-empty { font-size: 14px; color: var(--ink-3); padding: 0 0 12px; }

/* ---------- misc ---------- */

.actions { display: flex; gap: 10px; margin-top: 32px; }

.actions a {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
}

/* Two destinations side by side read as one repeated button unless they are
   told apart. These take the hue the nav already gives each one — accent for
   排盤, kin blue for 合婚 — so a member learns one colour per destination
   rather than a different one on every page. --nv is set per item below. */
.actions a.nv-cast,
.actions a.nv-match {
  border-color: var(--nv);
  color: var(--nv);
  background: var(--surface); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--nv) 8%, var(--surface));
  transition: background-color .15s, color .15s;
}

.actions a.nv-cast:hover,
.actions a.nv-cast:focus-visible,
.actions a.nv-match:hover,
.actions a.nv-match:focus-visible {
  background: var(--nv);
  color: var(--surface);
}

.actions a.nv-cast { --nv: var(--pal-self); }
.actions a.nv-match { --nv: var(--pal-kin); }

footer.src {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-3);
}

/* ---------- larger screens ---------- */

@media (min-width: 600px) {
  .wrap { padding-top: 44px; }
  .masthead .brand { font-size: 34px; }
  .chart { grid-auto-rows: minmax(132px, auto); }
  .cell { padding: 9px; }
  .cell .s { font-size: 13px; }
  .cell .s.lucky, .cell .s.malefic { font-size: 12px; }
  .cell .foot { font-size: 11px; }
  .cell .pname { font-size: 12px; }
  .center .big { font-size: 20px; }
  .center .kv { font-size: 12px; }
  .facts { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- scores ---------- */

.scores {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

details.score + details.score { border-top: 1px solid var(--line); }

details.score > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 4.2em 1fr 2.1em 2.6em;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  min-height: 52px;
}

details.score > summary::-webkit-details-marker { display: none; }

.sc-label { font-size: 15px; letter-spacing: .06em; }

.sc-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.sc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink-2); }

.sc-num {
  font-size: 17px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sc-grade { font-size: 11px; text-align: right; letter-spacing: .04em; }

i.g-強, i.g-偏強 { background: var(--lu); }
i.g-偏弱, i.g-弱 { background: var(--accent); }
.sc-grade.g-強, .sc-grade.g-偏強 { color: var(--lu); }
.sc-grade.g-平 { color: var(--ink-3); }
.sc-grade.g-偏弱, .sc-grade.g-弱 { color: var(--accent); }

.sc-body { padding: 0 14px 16px; }

.sc-basis, .sc-slots {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 10px;
}

.sc-slots { color: var(--ink-3); }

.sc-role { font-size: 11px; }

.sc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }

.sc-head {
  font-size: 11px;
  letter-spacing: .1em;
  padding-bottom: 5px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.sc-plus { color: var(--lu); }
.sc-minus { color: var(--accent); }

.sc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  line-height: 1.9;
  white-space: nowrap;
}

.sc-where { font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }

.sc-val { font-variant-numeric: tabular-nums; font-size: 11px; }

.sc-none { font-size: 12px; color: var(--ink-3); }

@media (min-width: 600px) {
  details.score > summary { grid-template-columns: 5em 1fr 2.4em 3em; padding: 16px 18px; }
  .sc-body { padding: 0 18px 20px; }
  .sc-item { font-size: 13px; }
}

/* ---------- nav & content pages ---------- */

.masthead .brand a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* The mark is the accent colour while the name stays ink, so the two read as
   a lockup rather than as one long coloured word. */
.brand-mark {
  color: var(--accent);
  flex: none;
  /* Optical alignment: the glyphs sit a shade high against a square mark. */
  margin-top: -2px;
}

.brand-name { text-indent: 0.22em; }

@media (max-width: 420px) {
  .masthead .brand a { gap: 9px; }
  .brand-mark { width: 28px; height: 28px; }
}

.nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Each destination carries its own hue, drawn from the palette already used
   for palaces and stars, so the nav reads as a set rather than five identical
   pills. --nv is set per item below. */
.nav a {
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--nv);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .06em;
  background: transparent;
  transition: background-color .15s, color .15s;
}

.nav a:hover,
.nav a:focus-visible {
  background: var(--nv);
  color: var(--surface);
}

/* The page you are on. Filled like hover so the two read as the same state,
   with a little weight so it still stands out while another item is hovered. */
.nav a.is-current {
  background: var(--nv);
  color: var(--surface);
  font-weight: 500;
}

.nav .nv-cast { --nv: var(--pal-self); }
.nav .nv-match { --nv: var(--pal-kin); }
.nav .nv-stars { --nv: var(--ke); }
.nav .nv-rank { --nv: var(--pal-fortune); }
.nav .nv-fortune { --nv: var(--pal-fortune); }
.nav .nv-aux { --nv: var(--star-good); }
.nav .nv-hua { --nv: var(--quan); }
.nav .nv-palaces { --nv: var(--pal-outer); }

.lede {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 8px;
  text-align: justify;
}

.prose p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 14px;
  text-align: justify;
}

.cards { list-style: none; margin: 0; padding: 0; }

.cards li + li { margin-top: 8px; }

.cards a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.cards a:hover { border-color: var(--line-strong); }

.c-name {
  display: block;
  font-size: 16px;
  letter-spacing: .1em;
  margin-bottom: 3px;
}

.c-desc { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.65; }

.deflist { margin: 0; }

.deflist > div {
  display: grid;
  grid-template-columns: 5.4em 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.deflist dt { font-size: 14px; letter-spacing: .06em; color: var(--ink); }

.deflist dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}

@media (max-width: 420px) {
  .deflist > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- legend ---------- */

.legend {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-3);
}

.legend b { font-weight: 600; color: var(--ink-2); font-size: 11px; letter-spacing: .1em; }

.legend .swatches { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 8px; }

.legend .swatches:last-child { margin-bottom: 0; }

.legend .sw { white-space: nowrap; }

.legend .sw::before {
  content: "●";
  margin-right: 4px;
  font-size: 9px;
  vertical-align: 1px;
}

.sw-good::before { color: var(--star-good); }
.sw-bad::before { color: var(--star-bad); }
.sw-neutral::before { color: var(--ink-2); }
.sw-self::before { color: var(--pal-self); }
.sw-kin::before { color: var(--pal-kin); }
.sw-fortune::before { color: var(--pal-fortune); }
.sw-outer::before { color: var(--pal-outer); }

/* ---------- rank table ---------- */

.rank-tier {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .08em;
}

.rank-note { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; line-height: 1.7; }

.rank {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
  font-size: 13px;
}

.rank th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.rank td {
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
  line-height: 1.7;
}

.rank td:first-child { white-space: nowrap; font-weight: 600; }

.rank .w {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 0;
}

.rank .grade { white-space: nowrap; font-size: 12px; }

@media (max-width: 480px) {
  .rank { font-size: 12px; }
  .rank .hide-sm { display: none; }
}

/* ---------- shared emphasis devices ---------- */

/* A pill carrying the grade or category. Colour comes from a p-*/cat-* class
   on the same element, so one rule covers every palette. */
.badge {
  display: inline-block;
  font-size: 11px;
  line-height: 1.7;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .04em;
  vertical-align: 1px;
}

/* Left colour bar — the fastest thing to scan down a long list. */
.bar { border-left: 3px solid var(--line-strong); padding-left: 11px; }
.bar.p-good { border-left-color: var(--star-good); }
.bar.p-bad { border-left-color: var(--star-bad); }
.bar.p-neutral { border-left-color: var(--ink-3); }
.bar.cat-self { border-left-color: var(--pal-self); }
.bar.cat-kin { border-left-color: var(--pal-kin); }
.bar.cat-fortune { border-left-color: var(--pal-fortune); }
.bar.cat-outer { border-left-color: var(--pal-outer); }

/* ---------- rank table emphasis ---------- */

.rank td:first-child {
  border-left: 3px solid var(--line-strong);
  padding-left: 11px;
}

.rank tr.t-good td:first-child { border-left-color: var(--star-good); }
.rank tr.t-bad td:first-child { border-left-color: var(--star-bad); }
.rank tr.t-neutral td:first-child { border-left-color: var(--ink-3); }

/* Only the extremes get a wash, so they read as the headline rows. */
.rank tr.t-peak td { background: var(--tint-good); }
.rank tr.t-trough td { background: var(--tint-bad); }

.rank .w { font-weight: 600; }
.rank tr.t-good .w { color: var(--star-good); }
.rank tr.t-bad .w { color: var(--star-bad); }
.rank tr.t-neutral .w { color: var(--ink-3); }

.rank td:first-child a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- star index cards ---------- */

.cards a { border-left-width: 3px; }
.cards a.p-good { border-left-color: var(--star-good); }
.cards a.p-bad { border-left-color: var(--star-bad); }
.cards a.p-neutral { border-left-color: var(--ink-3); }

.c-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }

.c-head .c-name { margin: 0; font-weight: 600; }

.c-meta { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ---------- definition lists with a category bar ---------- */

.deflist.keyed > div {
  border-left: 3px solid var(--line-strong);
  padding-left: 11px;
  border-bottom: 1px solid var(--line);
}

.deflist.keyed > div.cat-self { border-left-color: var(--pal-self); }
.deflist.keyed > div.cat-kin { border-left-color: var(--pal-kin); }
.deflist.keyed > div.cat-fortune { border-left-color: var(--pal-fortune); }
.deflist.keyed > div.cat-outer { border-left-color: var(--pal-outer); }

.deflist.keyed dt { font-weight: 600; }

.axis-pair { font-size: 14px; }

.axis-pair .sep { color: var(--ink-3); margin: 0 6px; }

/* ---------- cast counter ---------- */

.counter {
  text-align: center;
  padding: 18px 16px 20px;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.counter .count {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.counter .count-label {
  font-size: 13px;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--ink-2);
  margin-top: 4px;
}

.counter .count-sub {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-top: 6px;
}

@media (min-width: 600px) {
  .counter .count { font-size: 46px; }
}

/* ---- 全站配色 --------------------------------------------------------
   The site used to be one ink on paper, which reads well for a single essay
   and badly for everything else: twelve months, twelve 生肖, fourteen 主星,
   十二宮, 十干四化 — page after page of structurally identical lists that are
   impossible to tell apart at a glance.

   So these pages carry colour, but it is doctrinal rather than decorative.
   四化 keep the 祿權科忌 colours the cast chart already uses; every card takes
   the 五行 of its own 地支 or 星曜; 太歲 relationships each get one hue and
   keep it on every page. Nothing is coloured that does not mean something,
   which is also why the palette stops at eleven hues and does not grow.

   --tone is the carrier: a class sets it, and headings, cards, table rows and
   list bars all read from it. */
.tone-mu { --tone: var(--wx-mu); }
.tone-huo { --tone: var(--wx-huo); }
.tone-tu { --tone: var(--wx-tu); }
.tone-jin { --tone: var(--wx-jin); }
.tone-shui { --tone: var(--wx-shui); }
.tone-kin, .tone-cat-kin { --tone: var(--pal-kin); }
.tone-lu, .tone-祿 { --tone: var(--lu); }
.tone-quan, .tone-權 { --tone: var(--quan); }
.tone-ke, .tone-科 { --tone: var(--ke); }
.tone-ji, .tone-忌 { --tone: var(--ji); }
.tone-self, .tone-cat-self { --tone: var(--pal-self); }
.tone-outer, .tone-cat-outer { --tone: var(--pal-outer); }
.tone-fortune, .tone-cat-fortune { --tone: var(--pal-fortune); }

/* 太歲關係. One hue per relationship, kept identical across the 生肖 pages,
   the 犯太歲 table and the 安太歲 page, so the reader learns them once. */
.rel-值 { color: var(--wx-huo); }
.rel-沖 { color: var(--pal-self); }
.rel-刑 { color: var(--pal-fortune); }
.rel-破 { color: var(--wx-jin); }
.rel-害 { color: var(--ke); }
.rel-合 { color: var(--lu); }

/* Headings get the tone as a bar rather than as body colour: a coloured rule
   marks the section without turning the page into a list of coloured words. */
h2 {
  border-left: 4px solid var(--tone, var(--line-strong));
  padding-left: 11px;
  color: var(--tone, var(--ink-2));
  text-indent: 0;
}

.lede {
  border-left: 3px solid var(--accent);
  padding-left: 13px;
  background: var(--life-tint);
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Cards inherit the tone on the left bar, and the name takes it too — the bar
   alone is too thin to read as a category on a phone. */
.cards a[class*="tone-"] { border-left-color: var(--tone); }
.cards a[class*="tone-"] .c-name { color: var(--tone); }

.cards a:hover { border-color: var(--tone, var(--line-strong)); }

/* 四化 in a table cell: the same four colours the chart uses. */
.hua-cell { font-weight: 600; }
.hua-cell.hua-祿 { color: var(--lu); }
.hua-cell.hua-權 { color: var(--quan); }
.hua-cell.hua-科 { color: var(--ke); }
.hua-cell.hua-忌 { color: var(--ji); }

.rank td.gan { color: var(--ink); }
.rank td.gan[class*="tone-"] { color: var(--tone); }

/* A definition row that names its own tone takes a bar in that colour —
   事業 / 財運 / 感情 / 健康, 五種犯太歲, whatever the page is listing. */
.deflist > div[class*="tone-"] {
  border-left: 3px solid var(--tone);
  padding-left: 11px;
}

.deflist > div[class*="tone-"] dt { color: var(--tone); }

/* A row or an accordion that carries a 太歲 relationship colours itself from
   that relationship, so 沖 looks the same wherever it appears. */
.deflist > div.rel-row { border-left-color: currentColor; }
.deflist > div.rel-row dt { color: inherit; }
.deflist > div.rel-row dd { color: var(--ink-2); }

.reading[class*="rel-"] > summary .r-name { color: inherit; }
.reading[class*="rel-"] .r-body,
.reading[class*="rel-"] > summary .r-stars { color: var(--ink-2); }

/* An accordion that names a tone takes it on its title only — the reading
   itself stays in body ink, or a long answer becomes hard work. */
.reading[class*="tone-"] > summary .r-name { color: var(--tone); }

/* Panels that stand for one number or one record take the tone too — those
   pages have no headings at all, and a page of grey boxes was the worst of
   the lot to look at. */
.rec[class*="tone-"] {
  border-left: 3px solid var(--tone);
}

.rec[class*="tone-"]:hover { border-color: var(--tone); }

.wallet-card {
  border-left: 3px solid var(--lu);
  background: var(--surface);
  background: color-mix(in srgb, var(--lu) 5%, var(--surface));
}

.wc-amount { color: var(--lu); }

.wc-label, .counter .count-label { color: var(--ink-2); }

.counter {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.counter .count { color: var(--accent); }

/* 個人資料 的帳號列與餘額卡並排，兩者用同一種處理才不會一個有顏色一個沒有。 */
.account {
  border-left: 3px solid var(--pal-self);
  background: var(--surface);
  background: color-mix(in srgb, var(--pal-self) 5%, var(--surface));
}

/* 宜 / 忌 as two tinted panels rather than two bare lists. */
.yiji-cols .yc {
  padding: 12px 14px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-row);
}

.yiji-cols .yc-do { border-color: var(--star-good); background: var(--tint-good); }
.yiji-cols .yc-avoid { border-color: var(--star-bad); background: var(--tint-bad); }

.yiji-cols .steps { margin-bottom: 8px; }

/* The tone also drives the 上一月／下一月 buttons at the foot of a month. */
.actions a[class*="tone-"] {
  border-color: var(--tone);
  color: var(--tone);
  background: var(--surface);
  background: color-mix(in srgb, var(--tone) 8%, var(--surface));
}

.actions a[class*="tone-"]:hover,
.actions a[class*="tone-"]:focus-visible {
  background: var(--tone);
  color: var(--surface);
}

/* The 流年 subnav is a set of destinations, not a tab strip — give each its
   own hue so the four pages stop looking like the same page. */
.fortune-nav a:nth-child(1) { --tone: var(--pal-self); }
.fortune-nav a:nth-child(2) { --tone: var(--quan); }
.fortune-nav a:nth-child(3) { --tone: var(--wx-huo); }
.fortune-nav a:nth-child(4) { --tone: var(--lu); }

/* The fallback matters: plenty of .subnav strips carry no tone at all, and
   the ones that do carry it per item rather than per position. */
.subnav a {
  color: var(--tone, var(--ink-2));
  border-color: var(--tone, var(--line-strong));
}

.subnav a:hover,
.subnav a.is-current {
  color: var(--surface);
  background: var(--tone, var(--accent));
  border-color: var(--tone, var(--accent));
}

/* ---- 流年運勢 --------------------------------------------------------
   宜／忌 side by side. Two columns on anything wider than a phone, stacked
   below that — the two lists are read against each other, so they have to be
   seen together wherever there is room. */
.yiji-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  margin-bottom: 6px;
}

.yc-head {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .18em;
}

@media (max-width: 460px) {
  .yiji-cols { grid-template-columns: 1fr; gap: 0; }
}

/* The twelve months, as a strip. Small enough to sit at the foot of a month
   page without competing with 上一月／下一月. */
.pager-months {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
}

.pager-months a {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.pager-months a { color: var(--tone, var(--ink-2)); border-color: var(--tone, var(--line)); }

.pager-months a:hover,
.pager-months a.is-current {
  border-color: var(--tone, var(--accent));
  background: var(--tone, var(--accent));
  color: var(--surface);
}

/* A row of 四化 badges inside a table cell needs a little air. */
.rank .badge + .badge { margin-left: 4px; }

/* ---------- transit period ---------- */

.transit-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 16px 18px;
  margin-bottom: 22px;
}

.transit-form .field:last-of-type { margin-bottom: 14px; }

.transit-head {
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--tint-row);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 14px;
}

.th-title { font-size: 16px; letter-spacing: .06em; }

.th-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.8; }

.layers { margin-bottom: 16px; }

.layer {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.ly-name { font-size: 13px; letter-spacing: .06em; color: var(--ink); }

.ly-cap { color: var(--ink-2); }

.ly-w { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.layer-table { margin-bottom: 16px; font-size: 12px; }

.layer-table td { padding: 6px 8px 6px 0; }

.layer-table td:first-child { padding-left: 9px; }

@media (max-width: 420px) {
  .layer { grid-template-columns: 3.2em 1fr; }
  .ly-w { grid-column: 2; color: var(--ink-3); }
}

/* ---------- dimension groups ---------- */

.group-head {
  font-size: 12px;
  letter-spacing: .14em;
  text-indent: .14em;
  font-weight: 600;
  margin: 22px 0 8px;
  padding-left: 11px;
  border-left: 3px solid var(--line-strong);
}

.group-head.cat-self { border-left-color: var(--pal-self); }
.group-head.cat-kin { border-left-color: var(--pal-kin); }
.group-head.cat-fortune { border-left-color: var(--pal-fortune); }
.group-head.cat-outer { border-left-color: var(--pal-outer); }

h2 + .group-head { margin-top: 10px; }

/* Land clear of the sticky-free top edge when jumped to via #transit. */
[id="transit"] { scroll-margin-top: 12px; }

/* ---------- FAQ accordion ---------- */

.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

details.faq-item + details.faq-item { border-top: 1px solid var(--line); }

details.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 16px;
  min-height: 52px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

details.faq-item > summary::-webkit-details-marker { display: none; }

details.faq-item > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--ink-3);
  font-size: 13px;
  flex: none;
}

details.faq-item[open] > summary { color: var(--accent); }

details.faq-item[open] > summary::after { content: "－"; color: var(--accent); }

details.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq-answer { padding: 0 16px 16px; }

.faq-answer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
  text-align: justify;
}

/* ---------- footer copyright ---------- */

footer.src p { margin: 0 0 10px; }

footer.src p:last-child { margin-bottom: 0; }

footer.src .copyright {
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: .06em;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

footer.src .contact {
  color: var(--ink-2);
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

footer.src .contact a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

footer.src .contact a:hover { color: var(--ink); }

/* ---------- pairing ---------- */

.pair-form { display: grid; gap: 0; }

fieldset.person {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px 16px 4px;
  margin: 0 0 18px;
  min-width: 0;
}

/* Side by side once two columns still leave each field usable. */
@media (min-width: 640px) {
  .pair-form { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .pair-form .row { grid-template-columns: 1.4fr 1fr 1fr; gap: 5px; }
  .pair-form select,
  .pair-form input[type="text"] { padding: 0 8px; }
}

fieldset.person legend {
  padding: 0 8px;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--accent);
}

.verdict {
  text-align: center;
  padding: 24px 16px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 18px;
}

.vd-pair { font-size: 15px; letter-spacing: .08em; color: var(--ink-2); }

.vd-score {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 52px;
  line-height: 1.1;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}

.vd-grade { font-size: 17px; letter-spacing: .2em; text-indent: .2em; color: var(--accent); }

.vd-sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; letter-spacing: .06em; }

.pair-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.pc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
}

.pc-name { font-size: 15px; letter-spacing: .06em; margin-bottom: 5px; }

.pc-meta { font-size: 11px; line-height: 1.8; color: var(--ink-3); }

.checks {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.check-row {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 13px 14px;
  border-left: 3px solid var(--line-strong);
}

.check-row + .check-row { border-top: 1px solid var(--line); }

.check-row.hit { border-left-color: var(--star-good); }
.check-row.miss { border-left-color: var(--line-strong); }

.ck-mark { font-size: 13px; color: var(--ink-3); text-align: center; line-height: 1.6; }

.check-row.hit .ck-mark { color: var(--star-good); }

.ck-label { font-size: 14px; line-height: 1.7; }

.check-row.miss .ck-label { color: var(--ink-2); }

.ck-detail { font-size: 12px; line-height: 1.8; color: var(--ink-3); margin-top: 3px; }

.ck-val {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
  line-height: 1.7;
}

.check-row.hit .ck-val { color: var(--star-good); font-weight: 600; }
.check-row.miss .ck-val { color: var(--ink-3); }

[id="verdict"], [id="form"] { scroll-margin-top: 12px; }

@media (max-width: 420px) {
  .pair-charts { grid-template-columns: 1fr; }
  .check-row { grid-template-columns: 1.8em 1fr auto; padding: 12px 10px; }
}

/* ---------- breadcrumbs ---------- */

/* 麵包屑. Deliberately quiet: it is a position indicator and a path back, not
   a heading — it should be findable when looked for and ignorable otherwise.
   Left-aligned with the text it sits above, rather than centred like the
   masthead, so it reads as part of the page body. */
.crumbs {
  margin: -18px 0 22px;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--ink-3);
}

.crumbs a { color: var(--ink-3); text-decoration: none; }

.crumbs a:hover,
.crumbs a:focus-visible { color: var(--accent); text-decoration: underline; }

.crumbs [aria-current] { color: var(--ink-2); }

.crumbs .sep { margin: 0 5px; color: var(--line-strong); }

/* ---------- match statistics ---------- */

.stat-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.stat-summary div {
  text-align: center;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.stat-summary b {
  display: block;
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-summary span { font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }

.stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stat-table th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-strong);
}

.stat-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.stat-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.stat-table .band-range { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

/* The row this pair landed in. */
.stat-table tr.here td { background: var(--life-tint); color: var(--ink); font-weight: 500; }

.stat-table .bar-cell { width: 34%; min-width: 80px; }

.stat-table .bar {
  display: block;
  height: 8px;
  min-width: 1px;
  border-radius: 4px;
  background: var(--accent);
  opacity: .55;
}

.stat-table tr.here .bar { opacity: 1; }

/* ---------- yearly fortune curve ---------- */

.curve {
  margin: 0 0 16px;
  padding: 10px 8px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.curve svg { display: block; width: 100%; height: auto; }

.curve figcaption {
  margin-top: 6px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3);
}

.cv-band { fill: var(--tint-row); }

.cv-grid { stroke: var(--line); stroke-width: 1; }

.cv-grid.is-mid { stroke: var(--line-strong); stroke-dasharray: 3 3; }

.cv-axis { fill: var(--ink-3); font-size: 10px; text-anchor: end; }

.cv-decade { fill: var(--ink-3); font-size: 9px; letter-spacing: .04em; }

.cv-area { fill: var(--accent); opacity: .12; }

.cv-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cv-dot.is-best { fill: var(--star-good); }

.cv-dot.is-worst { fill: var(--star-bad); }

h3.curve-sub {
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--ink-2);
  margin: 22px 0 10px;
}

/* ---------- per-dimension detail blocks ---------- */

.sc-extra { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

.sc-note { margin-bottom: 8px; font-size: 12px; line-height: 1.7; color: var(--ink-2); }

.sc-note:last-child { margin-bottom: 0; }

.sc-note b { font-weight: 600; color: var(--ink); }

.sc-note .sc-where { margin-left: 6px; color: var(--ink-3); font-size: 11px; }

.sc-note .sc-val { margin-left: 6px; font-variant-numeric: tabular-nums; }

.sc-detail { color: var(--ink-3); font-size: 11.5px; line-height: 1.75; margin-top: 2px; }

/* ---------- pricing ---------- */

.price-hero {
  text-align: center;
  padding: 22px 16px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.price-hero .ph-num {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 52px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.price-hero .ph-unit {
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--ink);
  margin-top: 2px;
}

.price-hero .ph-note {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-top: 8px;
}

.price-table td.w,
.price-table th.w { font-variant-numeric: tabular-nums; }

figure.pay {
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

figure.pay img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

figure.pay figcaption {
  margin-top: 8px;
  padding: 0 4px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-3);
}

.steps {
  margin: 0 0 14px;
  padding-left: 1.4em;
}

.steps li {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.steps li strong { color: var(--ink); }

.fee-line {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
}

.fee-line a { color: var(--accent); text-decoration: none; white-space: nowrap; }

.fee-line a:hover { text-decoration: underline; }

.pdf-form { margin-top: 26px; }

.pdf-form .hint { text-align: center; margin-top: 8px; }

/* ---------- payment notice ---------- */

.row-5 { grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr; gap: 5px; }

.row-5 select { padding: 0 6px; }

@media (max-width: 460px) {
  .row-5 { grid-template-columns: 1fr 1fr 1fr; }
}

.notice-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 16px;
  margin-bottom: 16px;
}

.notice-form > summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--accent);
  list-style: none;
}

.notice-form > summary::-webkit-details-marker { display: none; }

.notice-form > summary::before { content: '＋　'; }

.notice-form[open] > summary::before { content: '－　'; }

.notice-form[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }

.notice-form form { padding-bottom: 16px; }

.notice-ok {
  border: 1px solid var(--star-good);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--tint-good);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.notice-ok p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }

.notice-ok p:last-child { margin-bottom: 0; }

/* ---------- match depth ---------- */

.area-table .cmp-cell { position: relative; width: 32%; min-width: 96px; padding-top: 10px; padding-bottom: 10px; }

.area-table .cmp { display: block; height: 5px; border-radius: 3px; min-width: 1px; margin-bottom: 3px; }

.area-table .cmp-a { background: var(--pal-self); opacity: .75; }

.area-table .cmp-b { background: var(--pal-kin); opacity: .75; }

.area-table .cmp-lead { font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }

.cv-line.pair-a { stroke: var(--pal-self); }

.cv-line.pair-b { stroke: var(--pal-kin); stroke-dasharray: 5 3; }

.cv-run.is-high { fill: var(--tint-good); }

.cv-run.is-low { fill: var(--tint-bad); }

.curve figcaption .key { margin-right: 14px; white-space: nowrap; }

.curve figcaption .key::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 2px;
}

.curve figcaption .key-a::before { background: var(--pal-self); }

.curve figcaption .key-b::before { background: var(--pal-kin); }

.curve figcaption .key-high::before { background: var(--tint-good); height: 10px; border: 1px solid var(--line); }

.curve figcaption .key-low::before { background: var(--tint-bad); height: 10px; border: 1px solid var(--line); }

/* ---------- account ---------- */

.account {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.account .ac-who { min-width: 0; }

.account .ac-name { font-size: 15px; color: var(--ink); }

.account .ac-mail { font-size: 12px; color: var(--ink-3); word-break: break-all; }

/* ---- 儲值 ------------------------------------------------------------ */

/* The notice on 合婚 when the visitor cannot pay for one. Amber rather than
   red: nothing has gone wrong, there is simply a step first. */
.wallet-note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--pal-fortune);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

.wallet-note p { margin: 0 0 6px; }
.wallet-note p:last-child { margin-bottom: 0; }

.wallet-note .wn-head {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: .05em;
}

.wallet-note .wn-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.wallet-note .wn-links a {
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}

.wallet-note .wn-links a:hover { border-color: var(--accent); background: var(--tint-row); }

.wallet-ok {
  margin: 0 0 18px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-align: center;
}

.wallet-ok b { color: var(--ink-2); font-weight: 600; }

/* The balance, on 個人資料. */
.wallet-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.wc-main { display: grid; gap: 2px; }

.wc-label { font-size: 12px; letter-spacing: .16em; color: var(--ink-3); }

.wc-amount {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wc-unit { font-size: 14px; margin-left: 4px; color: var(--ink-3); }

.wc-sub { font-size: 12px; color: var(--ink-3); }

.wc-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.wc-links a {
  padding: 6px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}

.wc-links a:hover { border-color: var(--accent); background: var(--tint-row); }

/* 排盤紀錄. Each row is a whole link — the target is the reading, and there is
   nothing else on the row to click. */
.rec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 13px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}

.rec:hover {
  border-color: var(--accent);
  background: var(--tint-row);
  text-decoration: none;
}

.rec-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }

.rec-title {
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .04em;
}

.rec-meta { font-size: 12px; color: var(--ink-3); }

.rec-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
}

.rec-score b {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.rec-grade { font-size: 12px; color: var(--ink-2); }

.rec-when {
  display: grid;
  gap: 2px;
  justify-items: end;
  flex: none;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: right;
}

.rec-times, .rec-paid { color: var(--ink-3); }
.rec-paid { color: var(--star-good); }

.rec-empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 13.5px;
}

@media (max-width: 480px) {
  .rec-when { justify-items: start; text-align: left; }
}

/* 交易紀錄. */
.wallet-sums {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 18px;
  padding: 0 2px;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.wallet-sums b {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 17px;
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

table.ledger td, table.ledger th { vertical-align: top; }
table.ledger .lg-when { white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
table.ledger .lg-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

table.ledger .lg-kind {
  display: inline-block;
  min-width: 3.4em;
  margin-right: 8px;
  font-size: 12px;
  letter-spacing: .08em;
}

table.ledger .lg-why { color: var(--ink-2); }
table.ledger .lg-empty { padding: 28px 12px; text-align: center; color: var(--ink-3); }

.ledger-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.ledger-pager a { color: var(--accent); text-decoration: none; }
.ledger-pager a:hover { text-decoration: underline; }
.ledger-pager .lp-count { margin-left: auto; }

.wallet-log { margin: 0 0 18px; font-size: 13px; }

.wallet-log summary {
  cursor: pointer;
  padding: 8px 0;
  color: var(--ink-2);
  font-size: 12.5px;
  letter-spacing: .06em;
}

/* 大頭照 on 個人資料. Large enough to actually judge the picture by — a 56px
   thumbnail tells you a photo exists, not whether it is the right one. */
.ac-photo,
.pf-current {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--tint-row);
}

.ac-photo.is-initial,
.pf-current.is-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface);
  font-size: 32px;
  letter-spacing: 0;
  text-indent: 0;
}

.pf-current { width: 104px; height: 104px; }
.pf-current.is-initial { font-size: 44px; }

/* The picture and its ✕ travel together. */
.pf-photo { position: relative; display: inline-block; line-height: 0; flex: none; }

/* The checkbox is the no-JS mechanism and is never seen; the ✕ label drives it. */
.pf-remove-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.pf-remove-x {
  position: absolute;
  top: -2px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
  transition: color .15s, border-color .15s, background-color .15s;
}

.pf-remove-x:hover {
  color: var(--surface);
  background: var(--star-bad);
  border-color: var(--star-bad);
}

.pf-remove-input:focus-visible + .pf-current + .pf-remove-x,
.pf-remove-input:focus + .pf-current + .pf-remove-x {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Nothing to remove when there is no photo. */
.pf-photo.is-empty .pf-remove-x { display: none; }

/* Ticked, but not yet saved — only reachable with JavaScript off. */
.pf-pending {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.6;
  color: var(--star-bad);
}

.pf-remove-input:checked ~ .pf-current { opacity: .3; filter: grayscale(1); }
.pf-remove-input:checked ~ .pf-pending { display: block; }
.pf-remove-input:checked ~ .pf-remove-x { color: var(--star-bad); border-color: var(--star-bad); }

.photo-field { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pf-controls { flex: 1 1 260px; display: grid; gap: 8px; justify-items: start; }

/* The drop zone is a <label> wrapping the file input, so clicking anywhere in
   it opens the picker with no script at all; the script only adds the drag
   handling. Everything the reader needs to know sits inside the target, where
   they are already looking. */
.pf-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 168px;
  padding: 26px 22px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--tint-row);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}

.pf-drop:hover { border-color: var(--accent); }

.pf-drop:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pf-drop.is-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--life-tint);
}

.pf-drop-icon { color: var(--ink-3); flex: none; }
.pf-drop:hover .pf-drop-icon,
.pf-drop.is-over .pf-drop-icon { color: var(--accent); }

.pf-drop-hint {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: .06em;
}

.pf-drop-meta {
  display: block;
  max-width: 28em;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-3);
}

/* The native control stays — it is the whole no-JavaScript path, and it is
   what shows the chosen filename. */
.pf-drop input[type=file] {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
}

.pf-status { margin: 0; font-size: 12.5px; min-height: 1.2em; color: var(--ink-3); }
.pf-status.is-ok { color: var(--star-good); }
.pf-status.is-bad { color: var(--star-bad); }

.pf-remove {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.pf-remove:hover { border-color: var(--star-bad); color: var(--star-bad); }

/* ---- 大頭照對話框 -----------------------------------------------------
   The picture control is tall and is used once in a while; the fields under
   it are used every visit. So it lives behind the face at the top of 個人資
   料 — click the picture, the dialog opens — and the form stays a short list
   of plain fields. With no script the same markup renders inline instead. */
.ac-photo-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.ac-photo-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ac-photo-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  transition: color .15s, border-color .15s;
}

.ac-photo-btn:hover .ac-photo { filter: brightness(.93); }
.ac-photo-btn:hover .ac-photo-badge { color: var(--accent); border-color: var(--accent); }

.photo-dialog {
  width: min(400px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.photo-dialog::backdrop { background: rgba(16, 15, 13, .5); }

.photo-dialog[open] { animation: pd-in .16s ease-out; }

@keyframes pd-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-dialog[open] { animation: none; }
}

.pd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px 11px 16px;
  border-bottom: 1px solid var(--line);
}

.pd-title { font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }

.pd-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.pd-close:hover { color: var(--ink); border-color: var(--line-strong); }

/* Inside the dialog the picture sits above its drop zone, not beside it —
   one narrow column reads better on a phone. */
.photo-dialog .photo-field {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 18px;
}

.photo-dialog .pf-controls { width: 100%; justify-items: stretch; }
.photo-dialog .pf-drop { min-height: 138px; padding: 18px 16px; }
.photo-dialog .pf-drop-meta { max-width: none; }
.photo-dialog .pf-status { text-align: center; }

/* ---- 功能列 ----------------------------------------------------------
   The account controls, pinned to the top-left above the masthead. A strip
   rather than a floating pill: it spans the column so the eye finds it in the
   same place on every page, and its bottom rule separates it from the branding
   without adding another box to the layout. */

.userbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 24px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  min-height: 40px;
}

.userbar form { display: inline-flex; margin: 0; }

/* Who is signed in. Not a link — the name is a label, and the thing it would
   link to is already one button to its right. */
.ub-me {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 4px;
  color: var(--ink-2);
}

.ub-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  flex: none;
}

/* A photo fills the circle; the initial keeps the accent ground behind it. */
img.ub-avatar { background: var(--tint-row); }

.ub-name {
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .04em;
}

.ub-sep {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
  margin: 0 2px;
}

/* Link and button share one class so the two sit on the same baseline and
   answer to the same hover — a form button and an anchor otherwise never
   quite line up. */
.ub-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}

.ub-item:hover,
.ub-item:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--accent);
  text-decoration: none;
}

.ub-item.is-current {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

/* 餘額. Tabular figures so the number does not jitter as it changes, and an
   amber cast when it will not buy a pairing — enough to notice, not enough to
   look like an error. */
.ub-balance { font-variant-numeric: tabular-nums; }

.ub-balance.is-low {
  border-color: var(--pal-fortune);
  color: var(--pal-fortune);
}

.ub-balance.is-low:hover,
.ub-balance.is-low:focus-visible {
  background: var(--surface);
  border-color: var(--pal-fortune);
  color: var(--pal-fortune);
}

.ub-item svg { flex: none; opacity: .75; }
.ub-item:hover svg { opacity: 1; }

@media (max-width: 420px) {
  /* On a narrow screen the name is the first thing worth dropping: the avatar
     already says whose session this is. */
  .ub-name { display: none; }
}

.prefill {
  margin: 0 0 16px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--star-good);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.prefill a { color: var(--accent); text-decoration: none; }

.prefill a:hover { text-decoration: underline; }

/* ---- 輔曜頁 ----------------------------------------------------------
   六吉星、六煞星、祿存天馬、生年四化 share one shape: a tab strip between the
   four, a summary table, then the per-star essays. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
}

.subnav a {
  padding: 5px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink-2);
  text-decoration: none;
}



/* 喜／忌 — the two lines a reader applies straight to their own chart, so they
   sit apart from the prose rather than inside it. */
.yiji {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-size: 13.5px;
}

.yiji dt {
  color: var(--ink-3);
  letter-spacing: .1em;
  white-space: nowrap;
}

.yiji dd { margin: 0; color: var(--ink-2); }

/* A wide table on a narrow phone scrolls inside its own box; the page itself
   must never scroll sideways. */
.table-scroll { overflow-x: auto; margin-bottom: 10px; }

table.sihua td.gan {
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, serif;
  font-size: 17px;
  letter-spacing: .1em;
}

table.sihua td.hua-cell { white-space: nowrap; }

/* ---- 分享 ------------------------------------------------------------
   Each service's own colour is used as published, in both colour schemes: a
   brand mark is an identifier, and a re-tinted one reads as a different
   service. Threads is the exception that proves it — its mark is defined as
   black-on-white or white-on-black, so it is the one button that flips. */

.share {
  text-align: center;
  margin: 30px 0 34px;
}

.share-label {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin: 0 0 12px;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .06em;
  text-decoration: none;
  border: 1px solid transparent;
}

.share-btn:hover,
.share-btn:focus-visible { text-decoration: none; filter: brightness(1.08); }

.share-btn svg { flex: none; }

.share-btn.is-line { background: #06c755; border-color: #06c755; color: #fff; }
.share-btn.is-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-btn.is-threads { background: #000; border-color: #000; color: #fff; }

.share-btn.is-line:hover, .share-btn.is-line:focus-visible,
.share-btn.is-facebook:hover, .share-btn.is-facebook:focus-visible { color: #fff; }

@media (prefers-color-scheme: dark) {
  /* Threads' mark inverts on a dark ground — that is how the brand defines it,
     and a black pill on a near-black page would simply vanish. */
  .share-btn.is-threads { background: #fff; border-color: #fff; color: #000; }
  .share-btn.is-threads:hover, .share-btn.is-threads:focus-visible { color: #000; }
}

/* ---------- 報告的兩個出口 ----------
   Side by side and equally weighted: neither is the fallback, they are two ways
   to receive the same thing. Each carries its own colour so the pair is told
   apart at a glance rather than by reading — the site's accent for the file you
   take now, the kin blue for the one that travels to you. */

.pdf-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.rpt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #fff;
  cursor: pointer;
  transition: filter .15s;
}

.rpt-btn svg { flex: none; }
.rpt-btn:hover { filter: brightness(1.1); }
.rpt-btn:active { opacity: .85; }

.rpt-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.rpt-btn.is-pdf { background: var(--accent); }
.rpt-btn.is-mail { background: var(--pal-kin); }

@media (prefers-color-scheme: dark) {
  /* Both accents lighten in dark mode, so the label goes dark to keep the
     contrast the other way up. */
  .rpt-btn { color: var(--bg); }
}

@media (max-width: 520px) {
  .pdf-actions { grid-template-columns: 1fr; }
  .rpt-btn { font-size: 14.5px; }
}

/* ---------- 錯誤頁 ---------- */

.e404 { margin: 8px 0 22px; }

.e404-links { list-style: none; margin: 0; padding: 0; }

.e404-links li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.9;
}

.e404-links li:last-child { border-bottom: 0; }

.e404-links a {
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  margin-right: 6px;
}

.e404-links a:hover { text-decoration: underline; }