/* 夜观星图: the chart as an old star map on a night sky. Purple is 紫微 itself;
   gold marks stars and genuine classic quotes; cinnabar is reserved for seals
   (the current year, the 断 marker, 忌). Text is never positioned over text:
   every block flows and grows with its content. */
:root {
  --night: #141a2e;        /* page */
  --night-2: #1b2340;      /* sheets */
  --night-3: #222b4c;      /* raised */
  --line: #2c365a;
  --line-strong: #3d4970;
  --ink: #e6eef2;          /* moon-white text */
  --ink-2: #a9b8ca;
  --ink-3: #8290a6;
  --ink-placeholder: #93a0b5; /* 4.5:1 on the raised field colour */
  --zi: #8e5a9e;           /* 紫微 purple */
  --zi-text: #e3c4ee;
  --zi-wash: rgb(142 90 158 / 0.26);
  --gold: #d9b36c;         /* stars, real quotes */
  --cinnabar: #c8442f;     /* seals only */
  --cinnabar-text: #ec9a86;
  --yi: #4f7a5a;           /* 宜 */
  --serif: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --kai: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif; /* bundled, see server/index.ts */
  --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --radius: 8px;
  color-scheme: dark;
}
/* 昼 (light): used when chosen, or when following a light system setting. */
:root[data-theme="light"] {
  --night: #eef2f3; --night-2: #f8fafb; --night-3: #ffffff;
  --line: #d5dce2; --line-strong: #b9c3cc;
  --ink: #1e2433; --ink-2: #485364; --ink-3: #616c7c; --ink-placeholder: #616c7c;
  --zi: #6e3f7e; --zi-text: #5a2f69; --zi-wash: rgb(110 63 126 / 0.13);
  --gold: #87611a; --cinnabar: #b33a26; --cinnabar-text: #a3321f; --yi: #3f6b48;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --night: #eef2f3; --night-2: #f8fafb; --night-3: #ffffff;
    --line: #d5dce2; --line-strong: #b9c3cc;
    --ink: #1e2433; --ink-2: #485364; --ink-3: #616c7c; --ink-placeholder: #616c7c;
    --zi: #6e3f7e; --zi-text: #5a2f69; --zi-wash: rgb(110 63 126 / 0.13);
    --gold: #87611a; --cinnabar: #b33a26; --cinnabar-text: #a3321f; --yi: #3f6b48;
    color-scheme: light;
  }
}
.theme-switch { display: inline-flex; border: 0.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.theme-switch button { background: none; border: 0; padding: 4px 10px; cursor: pointer; color: var(--ink-2); font: 500 13px var(--serif); white-space: nowrap; }
.theme-switch button + button { border-left: 0.5px solid var(--line-strong); }
.theme-switch button[aria-pressed="true"] { background: var(--zi-wash); color: var(--zi-text); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--night); color: var(--ink); font: 15px/1.75 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Top bar */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 20px; border-bottom: 0.5px solid var(--line); background: var(--night); position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 500 18px var(--serif); color: var(--ink); text-decoration: none; white-space: nowrap; }
.seal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: var(--cinnabar); color: #fff; font: 500 15px var(--serif); }
.charts-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.charts-nav select { width: auto; max-width: 220px; }
.charts-nav button { white-space: nowrap; }

/* Controls */
.primary { background: var(--zi); color: #fff; border: 0; border-radius: var(--radius); padding: 9px 20px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.primary:hover { filter: brightness(1.1); }
.primary:disabled { opacity: 0.55; cursor: default; }
.ghost { background: transparent; border: 0.5px solid var(--line-strong); border-radius: var(--radius); padding: 7px 14px; cursor: pointer; color: var(--ink); }
.ghost:hover { border-color: var(--zi); color: var(--zi-text); }
input, select, textarea { background: var(--night-3); border: 0.5px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px; width: 100%; min-width: 0; }
::placeholder { color: var(--ink-placeholder); opacity: 1; }
p { text-wrap: pretty; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); min-width: 0; }

/* Form */
.form-view { max-width: 640px; margin: 48px auto; padding: 0 16px; display: grid; gap: 20px; }
.form-intro h1 { font: 500 34px/1.3 var(--serif); margin: 0 0 6px; letter-spacing: 0.08em; color: var(--zi-text); }
.form-intro p { margin: 0; color: var(--ink-2); max-width: 34em; }
.sheet { background: var(--night-2); border: 0.5px solid var(--line); border-radius: 12px; padding: 22px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
fieldset.gender { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: end; min-width: 0; }
fieldset.gender legend { font-size: 13px; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
fieldset.gender label { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
fieldset.gender input { width: auto; }
.hint { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.error { color: var(--cinnabar-text); font-size: 13px; min-height: 1em; margin: 0 0 8px; }
.boundary-card h2 { font: 500 20px var(--serif); margin: 0 0 8px; }
.boundary-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Layout */
.chart-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding: 20px; max-width: 1440px; margin: 0 auto; align-items: start; }
.board-col, .side-col { min-width: 0; }
.board-col { position: sticky; top: 64px; }

/* The board: a star map. Cells grow with their stars; nothing is absolutely placed. */
/* The 三方四正 lines sit beneath the cells (cells are transparent), so they
   never cross over a character. */
.board-wrap { position: relative; isolation: isolate; background: var(--night-2); border-radius: var(--radius); }
.board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); border: 0.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.links { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.links line, .links polyline { stroke: var(--zi); stroke-width: 1.4; fill: none; opacity: 0.85; }
.links .opp { stroke-dasharray: 4 4; }
.palace { display: flex; flex-direction: column; gap: 2px; border: 0.5px solid var(--line); padding: 7px 8px 6px; font-size: 12px; line-height: 1.45; cursor: pointer; min-width: 0; background: transparent; text-align: left; color: inherit; transition: background-color 0.2s; }
.palace:hover { background: color-mix(in srgb, var(--zi-wash) 50%, transparent); }
.palace.hl { background: var(--zi-wash); }
.majors { display: flex; flex-wrap: wrap; gap: 0 8px; font: 500 16px/1.35 var(--serif); }
.majors .borrowed { font: 400 12px var(--sans); color: var(--ink-3); }
.palace.hl .majors { color: var(--zi-text); }
.star { white-space: nowrap; }
.star .b { font: 400 10px var(--sans); color: var(--ink-3); margin-left: 1px; }
.sihua { display: inline-block; font: 500 10px/14px var(--sans); color: #fff; border-radius: 2px; padding: 0 3px; margin-left: 2px; vertical-align: 1px; }
.sihua.禄 { background: var(--yi); } .sihua.权 { background: #8a6a2a; } .sihua.科 { background: #3c6283; } .sihua.忌 { background: var(--cinnabar); }
.minors { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--ink-2); font-size: 11px; }
.minors .sha { color: var(--cinnabar-text); }
.pfoot { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; color: var(--ink-3); font-size: 11px; }
.pname { font: 500 13px var(--serif); color: var(--ink); white-space: nowrap; }
.palace.ming .pname { color: var(--gold); }
.tag { display: inline-block; font-size: 10px; line-height: 14px; border: 0.5px solid currentColor; border-radius: 2px; padding: 0 3px; margin-left: 4px; color: var(--ink-2); }
.center { grid-row: 2 / 4; grid-column: 2 / 4; border: 0.5px solid var(--line); padding: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.center .who { font: 500 20px var(--serif); }
.center .pillars { font: 500 18px var(--serif); letter-spacing: 0.14em; color: var(--gold); }
.center small { color: var(--ink-2); font-size: 12px; }

/* Notes (眉批): explanations in red ink, always in the flow */
.note-panel, .meipi { border-left: 2px solid var(--cinnabar); border-radius: 0; padding: 6px 12px; margin: 10px 0; font-family: var(--kai); color: var(--ink); background: color-mix(in srgb, var(--cinnabar) 7%, transparent); }
.meipi h4, .note-panel h4 { margin: 0 0 2px; font: 500 15px var(--kai); color: var(--cinnabar-text); }
.meipi p, .note-panel p { margin: 0 0 4px; font-size: 14px; line-height: 1.7; }
.meipi .in-chart, .note-panel .in-chart { color: var(--zi-text); }
.note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-family: var(--sans); }
.note-actions button { font-size: 13px; padding: 4px 10px; }

/* Timeline: a scroll of years */
.timeline { display: flex; gap: 0; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; scrollbar-width: thin; }
.yr { flex: 0 0 auto; min-width: 84px; border: 0; border-top: 2px solid var(--line-strong); background: none; padding: 6px 8px 4px; font-size: 12px; line-height: 1.5; cursor: pointer; text-align: left; color: var(--ink-2); }
.yr strong { display: block; font: 500 15px var(--serif); color: var(--ink); }
.yr.now { border-top-color: var(--cinnabar); }
.yr.now strong::after { content: "今"; display: inline-block; margin-left: 6px; font: 500 11px/16px var(--serif); color: #fff; background: var(--cinnabar); border-radius: 2px; padding: 0 3px; vertical-align: 2px; }
.yr .flag { display: block; color: var(--cinnabar-text); font-size: 11px; max-width: 12em; }
.yr:hover strong { color: var(--zi-text); }
.notice { color: var(--ink-3); font-size: 12px; margin: 8px 0 0; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 0.5px solid var(--line); margin-bottom: 12px; }
.tabs button { background: none; border: 0; padding: 8px 14px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; font: 500 15px var(--serif); }
.tabs button[aria-selected="true"] { color: var(--zi-text); border-color: var(--zi); }

/* Chat */
.chat-panel { display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 520px; }
.messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 12px; }
.msg { max-width: 100%; word-break: break-word; }
.msg.user { align-self: flex-end; max-width: 85%; background: var(--night-3); border: 0.5px solid var(--line); border-radius: 12px 12px 3px 12px; padding: 8px 14px; white-space: pre-wrap; }
.msg.assistant { align-self: stretch; background: var(--night-2); border: 0.5px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.msg.assistant p { margin: 0 0 8px; }
.duan { font: 500 18px/1.7 var(--serif); color: var(--zi-text); border-left: 3px solid var(--cinnabar); padding: 2px 0 2px 12px; margin: 0 0 12px; }
.sec-label { display: block; font: 500 13px var(--serif); color: var(--ink-3); margin: 10px 0 2px; letter-spacing: 0.1em; }
.quote { color: var(--gold); }
.yiji { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 10px 0 4px; }
.yiji > div { border: 0.5px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px; min-width: 0; }
.yiji h5 { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0 0 4px; border-radius: 3px; font: 500 14px var(--serif); color: #fff; }
.yiji .yi h5 { background: var(--yi); } .yiji .ji h5 { background: var(--cinnabar); }
.yiji ul { margin: 0; padding-left: 1.1em; font-size: 14px; }
.yiji li { margin-bottom: 4px; }
.msg details { margin-top: 10px; color: var(--ink-2); font-size: 13px; border-top: 0.5px solid var(--line); padding-top: 6px; }
.msg details summary { cursor: pointer; color: var(--ink-3); }
.check-in { margin-top: 12px; border: 0.5px dashed var(--zi); border-radius: var(--radius); padding: 8px 12px; }
.check-in .sec-label { margin-top: 0; color: var(--zi-text); }
.status { color: var(--ink-3); font-size: 13px; }
.msg.error { border-color: var(--cinnabar); color: var(--cinnabar-text); }
.term { border-bottom: 1px dashed var(--cinnabar); cursor: help; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.suggestions button { font-size: 13px; padding: 5px 12px; }
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { resize: none; }
.footnote { font-size: 11px; color: var(--ink-3); margin: 6px 0 0; }

/* Report */
.topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.topic { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--night-2); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; min-width: 0; }
.topic:hover { border-color: var(--zi); }
.topic strong { font: 500 16px var(--serif); color: var(--ink); }
.topic span { color: var(--ink-2); font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reading { background: var(--night-2); border: 0.5px solid var(--line); border-radius: 12px; padding: 16px 18px; max-width: 72ch; }
.reading h3 { font: 500 17px var(--serif); margin: 18px 0 6px; color: var(--zi-text); }
.reading .body { white-space: pre-wrap; }
.reading .back { margin-bottom: 4px; }
/* Daily practice (日常调养): a few habits after the Health and Spirit readings */
.practice { margin-top: 22px; padding-top: 14px; border-top: 0.5px solid var(--line); }
.practice h3 { margin-top: 0; }
.practice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.practice li { position: relative; padding-left: 18px; }
.practice li::before { content: ""; position: absolute; left: 3px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--yi); }
[data-lang="en"] .practice li { font: 17px/1.6 var(--serif); }

/* Tablet and phone: board first, reading below; cells keep growing with content */
@media (max-width: 980px) {
  .chart-view { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 18px; }
  .board-col { position: static; }
  .chat-panel { height: auto; min-height: 0; }
  .messages { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: 8px 16px; }
  .form-view { margin: 28px auto; }
  .board { grid-auto-rows: minmax(92px, auto); }
  .palace { padding: 5px 5px 4px; }
  .majors { font-size: 13px; gap: 0 4px; }
  .star .b { display: none; }
  .minors { display: none; }
  .pfoot { font-size: 10px; }
  .pfoot .gz { display: none; }
  .center { padding: 8px; }
  .center .who { font-size: 15px; }
  .center .pillars { font-size: 13px; letter-spacing: 0.06em; }
  .center small { font-size: 10px; }
  .yiji { grid-template-columns: minmax(0, 1fr); }
  .duan { font-size: 16px; }
}

/* ── Preparation steps (参详): the real lookups behind an answer ───────────── */
.msg details.steps { margin: 0 0 10px; padding: 0 0 8px; border-top: 0; border-bottom: 0.5px solid var(--line); font: 13px/1.7 var(--kai); }
.msg details.steps:not([open]) { padding-bottom: 6px; }
.msg details.steps summary { color: var(--ink-3); font-family: var(--kai); list-style: none; }
.msg details.steps summary::-webkit-details-marker { display: none; }
.msg details.steps summary::before { content: "▸ "; color: var(--zi-text); }
.msg details.steps[open] summary::before { content: "▾ "; }
.steps ol { list-style: none; margin: 4px 0 0; padding: 0; }
.steps li { position: relative; padding-left: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.steps li::before { content: ""; position: absolute; left: 3px; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; }
.steps li.active { color: var(--ink); }
.steps li.active::before { background: var(--zi-text); opacity: 1; animation: steps-pulse 1.2s ease-in-out infinite; }
.steps li.active::after { content: "…"; display: inline-block; animation: steps-pulse 1.2s ease-in-out infinite; }
@keyframes steps-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .steps li.active::before, .steps li.active::after { animation: none; } }
.msg .answer:empty { display: none; }
/* A sentence of an answer as it appears (see fadeNewText in app.js) */
.fresh { animation: fresh-in 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fresh-in { from { opacity: 0; } }

/* ── Share links ──────────────────────────────────────────────────────────── */
.share-row { margin-top: 12px; }
.share-box { margin-top: 8px; padding: 12px 14px; font-size: 13px; color: var(--ink-2); }
.share-box p { margin: 0 0 10px; }
.share-link { display: flex; gap: 8px; min-width: 0; }
.share-link input { flex: 1; min-width: 0; padding: 6px 10px; border: 0.5px solid var(--line-strong); border-radius: var(--radius); background: var(--night); color: var(--ink); font: 13px var(--sans); }
.share-link button { white-space: nowrap; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.share-actions button { white-space: nowrap; }
.shared-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 12px 14px; border: 0.5px solid var(--zi); border-radius: var(--radius); background: var(--zi-wash); font-size: 13px; color: var(--ink); }
.shared-banner p { margin: 0; flex: 1 1 220px; }
.shared-banner button { white-space: nowrap; }

/* ── Language ─────────────────────────────────────────────────────────────── */
[data-lang="en"] .zh-only, [data-lang="zh"] .en-only, :root:not([data-lang]) .en-only { display: none !important; }
.lang-switch { background: none; border: 0.5px solid var(--line-strong); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; color: var(--ink-2); font: 500 13px var(--serif); white-space: nowrap; }
.lang-switch:hover { border-color: var(--zi); color: var(--zi-text); }

/* English: Alegreya (bundled, SIL OFL) for headings and long reading; Chinese names in
   the text stay in the Chinese faces, a step quieter. */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/alegreya/files/alegreya-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/alegreya/files/alegreya-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/alegreya/files/alegreya-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/alegreya/files/alegreya-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/alegreya/files/alegreya-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
:root[data-lang="en"] {
  --serif: "Alegreya", Georgia, "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", "Noto Sans SC", sans-serif;
  --kai: "Alegreya", Georgia, "LXGW WenKai", "Kaiti SC", serif;
}
[data-lang="en"] .form-intro h1 { letter-spacing: 0; }
[data-lang="en"] .reading .body, [data-lang="en"] .msg.assistant .answer, [data-lang="en"] .msg.assistant > .plain { font: 17px/1.65 var(--serif); }
[data-lang="en"] .meipi, [data-lang="en"] .note-panel, [data-lang="en"] .msg details.steps { font-family: var(--serif); }
[data-lang="en"] .meipi p, [data-lang="en"] .note-panel p { font-size: 15px; }
[data-lang="en"] .zh { font: 0.85em var(--serif); font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif; color: var(--ink-3); }
[data-lang="en"] .meipi h4 .zh, [data-lang="en"] .note-panel h4 .zh { font-family: "LXGW WenKai", "Kaiti SC", serif; }
[data-lang="en"] .majors { font-size: 15px; gap: 0 6px; }
[data-lang="en"] .majors .star, [data-lang="en"] .minors .star { white-space: normal; }
[data-lang="en"] .pname { font-size: 14px; }
[data-lang="en"] .yr { min-width: 104px; }
[data-lang="en"] .yr.now strong::after { content: "Now"; font-family: var(--sans); }
[data-lang="en"] .yr .flag { max-width: 14em; }
[data-lang="en"] .yiji h5 { width: auto; padding: 0 8px; font-family: var(--sans); font-size: 13px; }
[data-lang="en"] .sec-label { letter-spacing: 0.02em; }
[data-lang="en"] .topic span { -webkit-line-clamp: 4; font-size: 13px; }
[data-lang="en"] .reading h3 { font-size: 19px; }

/* Birthplace search (English form) */
.place-row { position: relative; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.place-list { position: absolute; z-index: 6; top: 64px; left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; background: var(--night-3); border: 0.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); max-height: 280px; overflow-y: auto; }
.place-list li { padding: 8px 12px; cursor: pointer; line-height: 1.4; }
.place-list li span { color: var(--ink-3); font-size: 13px; }
.place-list li[aria-selected="true"], .place-list li:hover { background: var(--zi-wash); }
.place-row .hint { margin: 2px 0 0; }

/* About page and footer */
.about-view { max-width: 720px; margin: 40px auto; padding: 0 16px; }
.about h1 { font: 500 24px var(--serif); margin: 0 0 10px; color: var(--zi-text); }
.about h1 + p { margin-top: 0; }
.about p { max-width: 68ch; margin: 0 0 14px; }
.about p + h1 { margin-top: 28px; }
.about a { color: var(--zi-text); }
.site-foot { padding: 24px 20px 32px; text-align: center; font-size: 12px; }
.site-foot a { color: var(--ink-3); text-decoration: none; }
.site-foot a:hover { color: var(--zi-text); text-decoration: underline; }

/* iPhone Safari zooms into fields under 16px */
@media (max-width: 560px) {
  input, select, textarea { font-size: 16px; }
  [data-lang="en"] .majors { font-size: 12.5px; }
  [data-lang="en"] .pname { font-size: 12px; }
  [data-lang="en"] .reading .body, [data-lang="en"] .msg.assistant .answer { font-size: 16.5px; }
}

/* ── Compatibility (合盘) ─────────────────────────────────────────────────── */
.share-row #matchBtn { margin-left: 8px; }
.match-join { margin: 4px 0 14px; padding: 12px 14px; border: 0.5px solid var(--zi); border-radius: var(--radius); background: var(--zi-wash); }
.match-join p { margin: 0 0 10px; font-size: 14px; }
fieldset.open-to { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; min-width: 0; }
fieldset.open-to legend { font-size: 13px; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
fieldset.open-to label, label.consent { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
fieldset.open-to input, label.consent input { width: auto; }
label.consent { align-items: flex-start; line-height: 1.5; }
label.consent input { margin-top: 4px; }
.match-make { margin: 10px 0 4px; }
#matchLink:not(:empty) { margin-top: 10px; }
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.match-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-bottom: 0.5px solid var(--line); }
.match-actions { display: inline-flex; gap: 12px; }
.match-actions a, button.link { color: var(--zi-text); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
#matchListBox h4 { margin: 14px 0 6px; font: 500 14px var(--serif); color: var(--ink-2); }
.match-view .about h2 { font: 500 16px var(--serif); margin: 16px 0 6px; color: var(--ink-2); }
.match-reading p { margin: 0 0 12px; }
[data-lang="en"] .match-reading p { font: 17px/1.65 var(--serif); }
.match-facts { margin: 18px 0 14px; border-top: 0.5px solid var(--line); padding-top: 8px; }
.match-facts summary { cursor: pointer; color: var(--ink-2); }
.findings { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.findings.supportive li::marker { color: var(--yi); }
.findings.care li::marker { color: var(--cinnabar-text); }

/* ── Celebrity charts ─────────────────────────────────────────────────────── */
.famous-view .tabs { margin: 16px 0 12px; }
.famous-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.famous-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0.5px solid var(--line); border-radius: var(--radius); background: var(--night-3); color: var(--ink); text-decoration: none; }
.famous-list a:hover { border-color: var(--zi); }
.famous-list strong { font: 500 17px var(--serif); }
.famous-list span { color: var(--ink-2); font-size: 13px; }
.famous-note { margin: 0 0 12px; }
.famous-palaces { margin: 0 0 4px; font: 500 15px var(--serif); color: var(--zi-text); }
/* Public face / private side: the Life Palace and Spirit Palace openings side by side */
.persona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 10px 0; }
.persona section { padding: 10px 12px; border: 0.5px solid var(--line); border-radius: var(--radius); background: var(--night-2); }
.persona h4 { margin: 0 0 4px; font: 500 15px var(--serif); color: var(--zi-text); }
.persona p { margin: 0; font-size: 14px; line-height: 1.7; }
[data-lang="en"] .persona p { font: 16px/1.6 var(--serif); }
@media (max-width: 560px) { .persona { grid-template-columns: minmax(0, 1fr); } }

/* Top-bar and start-page links to celebrity charts */
.nav-link { color: var(--ink-2); text-decoration: none; font: 500 14px var(--serif); padding: 4px 6px; white-space: nowrap; }
.nav-link:hover { color: var(--zi-text); text-decoration: underline; text-underline-offset: 3px; }
.form-intro .form-links { margin: 10px 0 0; }
.form-links a { color: var(--zi-text); text-underline-offset: 3px; }

/* ── Account ──────────────────────────────────────────────────────────────── */
.sign-in { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0 4px; }
.sign-in label { flex: 1 1 220px; }
.account-view h2 { font: 500 17px var(--serif); margin: 22px 0 8px; color: var(--ink-2); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.history > li { border: 0.5px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--night-3); }
.history-chart { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.history ul li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.history ul a { color: var(--ink); text-underline-offset: 2px; }
.history .status { font-size: 12px; }

/* The paid personal reading */
.offer { margin-top: 22px; padding: 14px 16px; border: 0.5px solid var(--zi); border-radius: var(--radius); background: var(--zi-wash); }
.offer h3 { margin-top: 0; }
.offer p { margin: 0 0 10px; }
.offer .notice { margin: 8px 0 0; }
#chatOffer:not(:empty) { margin-top: 10px; }