@font-face {
  font-family: "Noto Serif TC";
  src: url("/assets/fonts/NotoSerifTC-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #1d1d1b;
  --muted: #686863;
  --paper: #ffffff;
  --card: #ffffff;
  --line: #d9d9d4;
  --soft: #eeeeea;
  --brand: #1f1f1d;
  --brand-hover: #000000;
  --danger: #a92e2e;
  --success: #247044;
  --wood: rgb(20% 57% 28%);
  --fire: rgb(83% 20% 16%);
  --earth: rgb(89% 76% 22%);
  --metal: rgb(29% 31% 34%);
  --water: rgb(16% 44% 80%);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}
button, input, select, textarea { font: inherit; }
button, input, select { min-height: 44px; }
button { touch-action: manipulation; }
a { color: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 10px clamp(16px, 4vw, 52px);
  color: #fff;
  background: #181817;
  border-bottom: 1px solid #000;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: #fff;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #777;
  border-radius: 50%;
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 1.35rem;
}
.brand strong { display: block; font-size: 1.02rem; letter-spacing: .05em; }
.brand small { display: block; color: #bdbdb8; font-size: .7rem; }
.topbar > div strong, .topbar > div small { display: block; }
.topbar > div small { color: #bdbdb8; font-size: .72rem; }
.topbar nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: thin;
}
.topbar nav button, .topbar nav a {
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #f2f2ef;
  text-decoration: none;
  white-space: nowrap;
  font-size: .84rem;
}
.topbar nav button:hover, .topbar nav a:hover, .topbar nav .active {
  background: #fff;
  color: #111;
}
.nav-toggle { display: none; }

main {
  width: min(1800px, calc(100% - clamp(24px, 4vw, 80px)));
  margin: 32px auto;
}
h1, h2, h3, legend { margin-top: 0; }
h1 { margin-bottom: .2em; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { line-height: 1.5; }
.eyebrow {
  margin: 0 0 5px;
  color: #555;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.wide { grid-column: 1 / -1; }

.login-shell {
  display: grid;
  place-content: center;
  width: min(390px, 100%);
  min-height: calc(100vh - 64px);
  margin: -32px auto 0;
}
.login-wordmark {
  margin-bottom: 34px;
  color: #000;
  font-size: clamp(3rem, 11vw, 5rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
  text-align: center;
}
.login-card {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 0;
}
.login-card label { margin: 0; }
.login-card button { width: 100%; margin-top: 4px; }
.login-card .error { margin: 0; }

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.page-heading p { margin: .35rem 0 0; }
.panel {
  margin-bottom: 18px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.compact { max-width: 560px; }
label {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  color: #575752;
  font-size: .84rem;
  font-weight: 650;
}
input, select, textarea {
  width: 100%;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #bdbdb7;
  border-radius: 6px;
  outline: none;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  border-color: #20201e;
  box-shadow: 0 0 0 3px #20201e1e;
}
textarea { min-height: 110px; resize: vertical; }
button {
  padding: 9px 15px;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 6px;
  font-weight: 750;
  cursor: pointer;
}
button:hover { background: var(--brand-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary { color: var(--brand); background: #fff; }
.secondary:hover, .secondary.selected { color: #000; background: #e8e8e4; }
.danger { background: var(--danger); border-color: var(--danger); }
.quiet { background: transparent; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.error { min-height: 1.3em; color: var(--danger); }
.notice {
  position: sticky;
  top: 74px;
  z-index: 18;
  margin-bottom: 16px;
  padding: 11px 14px;
  color: #1b5934;
  background: #e6f2ea;
  border: 1px solid #9fc8aa;
  border-radius: 7px;
}
.notice.error-notice, .notice-inline {
  color: #7c2723;
  background: #fae8e6;
  border: 1px solid #e0afaa;
}
.notice-inline { padding: 10px 12px; border-radius: 6px; }

.simple-input { position: relative; padding-top: 38px; }
.calendar-switch {
  position: absolute;
  top: -16px;
  left: 22px;
  display: flex;
  padding: 3px;
  background: #1d1d1b;
  border-radius: 7px;
  box-shadow: var(--shadow);
}
.calendar-switch button {
  min-height: 34px;
  padding: 5px 18px;
  border: 0;
  background: transparent;
  color: #d2d2ce;
}
.calendar-switch .active { background: #fff; color: #000; }
.input-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.input-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.input-group legend { margin-bottom: 6px; font-size: .95rem; font-weight: 800; }
.date-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.date-grid label { margin: 0; }
.date-grid input, .date-grid select { font-size: 1rem; }
.paired-date { margin: 14px 0 0; color: #333; font-weight: 750; }
.advanced summary, .panel > summary { cursor: pointer; font-weight: 750; }
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 20px;
}
.advanced fieldset { min-width: 0; padding: 0 16px; border: 0; border-left: 1px solid var(--line); }
.advanced fieldset:first-child { padding-left: 0; border-left: 0; }
.advanced fieldset:last-child { padding-right: 0; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; min-height: auto; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.primary-action {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 34px;
}
.primary-action span { color: var(--muted); font-size: .84rem; }
.search-results { display: grid; gap: 3px; }
.search-item { width: 100%; text-align: left; color: var(--ink); background: #f4f4f1; border-color: var(--line); }
.search-item:hover { background: #e8e8e4; }

.result-tabs, .filter-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  background: #e6e6e2;
  border-radius: 8px;
  overflow-x: auto;
}
.result-tabs button, .filter-tabs button {
  color: #454541;
  background: transparent;
  border: 0;
  white-space: nowrap;
}
.result-tabs button.active, .filter-tabs button.active { color: #fff; background: #1b1b19; }
.chart-panel { padding: 14px; overflow: hidden; }
.bazi-table-scroll { width: 100%; overflow-x: auto; }
.bazi-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
}
.bazi-table th, .bazi-table td { padding: 8px; text-align: center; vertical-align: top; }
.bazi-table td {
  background: #fafaf8;
  border: 1px solid #e4e4df;
  border-radius: 10px;
}
.bazi-table td.pillar-column {
  background: color-mix(in srgb, var(--element-color) 12%, #fff);
  border-color: color-mix(in srgb, var(--element-color) 52%, #fff);
}
.row-heading { width: 70px; color: #555; font-size: .78rem; text-align: left !important; vertical-align: middle !important; }
.pillar-heading {
  position: relative;
  padding: 8px !important;
  background: color-mix(in srgb, var(--element-color) 12%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--element-color) 52%, #fff);
  border-radius: 7px;
  font-size: .92rem;
  text-transform: capitalize;
}
.day-master-label {
  display: block;
  margin-top: 3px;
  color: #666;
  font-size: .66rem;
  font-weight: 650;
}
.pillar-cell { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.element-token {
  display: grid;
  place-items: center;
  width: min(90px, 100%);
  min-height: 74px;
  padding: 8px;
  color: #fff;
  border-radius: 12px;
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
}
.element-wood { --element-color: var(--wood); }
.element-fire { --element-color: var(--fire); }
.element-earth { --element-color: var(--earth); }
.element-metal { --element-color: var(--metal); }
.element-water { --element-color: var(--water); }
.element-neutral { --element-color: #74746f; }
.element-token { background: var(--element-color); }
.pillar-meta { display: grid; gap: 1px; color: #555; font-size: .72rem; line-height: 1.25; }
.role-chip {
  display: inline-flex;
  font-family: "Noto Serif TC", Inter, ui-sans-serif, system-ui, sans-serif;
  justify-content: center;
  padding: 3px 7px;
  color: #383834;
  background: #ededE9;
  border-radius: 999px;
  font-size: .68rem;
  line-height: 1.25;
}
.hidden-token-list { display: grid; gap: 6px; }
.hidden-token {
  display: grid;
  gap: 1px;
  padding: 5px 7px;
  color: #fff;
  background: color-mix(in srgb, var(--element-color) 86%, transparent);
  border-radius: 8px;
  line-height: 1.15;
}
.chinese-symbol { font-family: "Noto Serif TC", Georgia, serif; font-weight: 600; }
.hidden-token .chinese-symbol { font-size: 1rem; }
.hidden-token small { font-size: .62rem; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.strength-score { font-size: 2.5rem; font-weight: 850; }
.power-row {
  display: grid;
  grid-template-columns: 86px minmax(80px, 1fr) 52px;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
  font-size: .8rem;
}
.power-track { height: 10px; overflow: hidden; background: #e5e5e0; border-radius: 999px; }
.power-bar { display: block; height: 100%; background: var(--element-color); border-radius: inherit; }
.ten-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ten-card {
  display: grid;
  gap: 3px;
  padding: 12px;
  background: #f4f4f1;
  border: 1px solid #dfdfda;
  border-radius: 7px;
}
.ten-card small, .method { color: var(--muted); }
.ten-gods-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ten-gods-heading h2 { margin-bottom: 4px; }
.ten-gods-heading .muted { margin: 0; }
.ten-god-language { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ten-god-language button { min-height: 34px; padding: 6px 9px; color: #202020; background: #fff; border: 2px solid #555; font-size: .76rem; font-weight: 800; }
.ten-god-language button.selected { color: #fff; background: #111; border-color: #111; }
.rule-list { display: grid; gap: 8px; }
.rule { padding: 12px; background: #f6f6f3; border-left: 4px solid #aaa; border-radius: 4px; }
.rule.applied { border-left-color: var(--success); }
.rule-head { display: flex; justify-content: space-between; gap: 12px; }
.rule p { margin: 5px 0; }
.status { color: var(--muted); font-size: .75rem; text-transform: capitalize; }
.relationship-intro { margin: 0; color: #45484f; font-size: var(--font-small, .88rem); }
.relationship-bucket, .relationship-inactive-disclosure { scroll-margin-top: 88px; }
.relationship-bucket { display: grid; gap: 9px; }
.relationship-bucket h3 { margin: 0; font-size: clamp(1rem, 1.4vw, 1.18rem); }
.relationship-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.relationship-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: clamp(12px, 1.5vw, 17px); background: #fff; border: 1px solid #d7d9df; border-top: 4px solid #8a8d94; border-radius: 10px; box-shadow: 0 2px 8px rgba(32, 37, 46, .05); }
.relationship-card.relationship-active { border-top-color: #267a3d; }
.relationship-card.relationship-concern { border-top-color: #9a6400; }
.relationship-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.relationship-card-head > div { display: grid; min-width: 0; gap: 2px; }
.relationship-card-head strong { overflow-wrap: anywhere; font-size: clamp(.92rem, 1.1vw, 1.04rem); }
.relationship-rule-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; }
.relationship-rule-chinese { font-family: "Noto Serif TC", Georgia, serif; font-size: 1.08em; }
.relationship-rule-pinyin { font-weight: 800; }
.relationship-rule-separator { padding-inline: 4px; color: #6b6e74; }
.relationship-card-head small { color: #50535a; font-weight: 700; }
.relationship-status { flex: 0 0 auto; padding: 4px 8px; color: #41444b; background: #eceef1; border: 1px solid #c9ccd2; border-radius: 999px; font-size: .72rem; font-weight: 850; line-height: 1.2; }
.relationship-active .relationship-status { color: #124e25; background: #e6f4e9; border-color: #75ad82; }
.relationship-concern .relationship-status { color: #5d3a00; background: #fff3d4; border-color: #c99b3c; }
.rule-token-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; font-size: clamp(.66rem, 1.1vw, .8rem); }
.rule-token-table th { padding: 2px; color: #45484f; background: transparent; border: 0; text-align: center; }
.rule-token-table td { padding: 0; border: 0; }
.rule-token-axis { width: 30px; font-weight: 900; }
.rule-map-token { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 5px 3px; color: #6a6d73; background: #f0f1f3; border: 2px solid #d1d3d8; border-radius: 7px; font-family: "Noto Serif TC", Georgia, serif; font-size: clamp(1.08rem, 2.3vw, 1.45rem); font-weight: 600; line-height: 1; }
.rule-map-token.is-participant { color: #111; background: color-mix(in srgb, var(--element-color) 24%, #fff); border-color: var(--element-color); }
.rule-token-check { position: absolute; top: 2px; right: 2px; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .64rem; line-height: 1; }
.rule-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 9px; background: #f7f8fa; border: 1px solid #d8dbe1; border-radius: 8px; font-size: clamp(.9rem, 1.3vw, 1.05rem); font-weight: 850; }
.rule-operand, .rule-result { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 8px; border-radius: 7px; font-family: "Noto Serif TC", ui-sans-serif, system-ui, sans-serif; }
.rule-operand.is-present { color: #15171a; background: #fff; border: 1px solid #8e929a; }
.rule-operand.is-missing { color: #666a71; background: #eceef1; border: 1px dashed #9a9da4; }
.rule-result { border: 2px solid #a6a9b0; }
.rule-result.is-applied { color: #111; background: color-mix(in srgb, var(--element-color) 24%, #fff); border-color: var(--element-color); }
.rule-result.is-inactive { color: #696c72; background: #e7e8eb; }
.rule-operator { color: #555960; font-size: 1.05rem; }
.relationship-details { display: grid; gap: 4px; padding-left: 20px; margin: 0; color: #3e4147; font-size: var(--font-small, .84rem); }
.relationship-rule-debug { align-self: end; padding-top: 6px; color: #73767d; border-top: 1px dotted #c8cbd1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(.62rem, .9vw, .72rem); overflow-wrap: anywhere; }
.relationship-inactive-disclosure { padding: 0; background: #fff; border: 1px solid #d4d7dd; border-radius: 10px; }
.relationship-inactive-disclosure > summary { min-height: 48px; padding: 13px 15px; color: #272a30; font-weight: 850; cursor: pointer; }
.relationship-inactive-disclosure[open] > summary { border-bottom: 1px solid #d4d7dd; }
.relationship-inactive-disclosure > .relationship-card-grid { padding: 12px; }
.relationship-legacy p { margin: 0; }

@media (max-width: 520px) {
  .relationship-card { padding: 11px; }
  .relationship-card-head { align-items: stretch; flex-direction: column; }
  .relationship-status { align-self: flex-start; }
  .rule-token-table { border-spacing: 2px; }
  .rule-token-axis { width: 24px; }
  .rule-map-token { min-height: 42px; font-size: clamp(1rem, 5.2vw, 1.28rem); }
  .rule-token-check { font-size: .56rem; }
  .rule-equation { gap: 5px; padding: 7px; }
  .rule-operand, .rule-result { padding-inline: 6px; }
}
.audit-json { max-height: 460px; overflow: auto; padding: 12px; background: #1d1d1b; color: #efefe9; border-radius: 6px; font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-line { font-size: .8rem; }

.dayun-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.dayun-heading h2 { margin-bottom: 0; }
.dayun-heading label { width: 180px; margin: 0; }
.dayun-summary { margin-top: 0; color: var(--muted); font-size: .8rem; }
.dayun-focus {
  padding: 18px;
  margin-bottom: 16px;
  background: #f7f7f4;
  border: 1px solid #d8d8d2;
  border-radius: 10px;
}
.dayun-focus-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.dayun-focus-head h3 { margin-bottom: 8px; font-family: "Noto Serif TC", Georgia, serif; font-size: 1.8rem; }
.present-badge, .present-dot {
  display: inline-flex;
  padding: 4px 8px;
  color: #fff;
  background: #1b1b19;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
}
.dayun-token-grid { display: grid; grid-template-columns: repeat(2, minmax(120px, 180px)); gap: 12px; margin: 8px 0 16px; }
.dayun-token-block { display: grid; justify-items: center; gap: 6px; }
.dayun-hidden { display: grid; gap: 8px; margin: 12px 0; }
.dayun-hidden .hidden-token-list { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dayun-facts { display: grid; grid-template-columns: 70px 1fr; gap: 5px 10px; margin: 14px 0 0; font-size: .8rem; }
.dayun-facts dt { color: var(--muted); }
.dayun-facts dd { margin: 0; }
.dayun-slots {
  display: flex;
  gap: 8px;
  padding: 4px 0 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.dayun-card {
  display: grid;
  flex: 0 0 118px;
  gap: 4px;
  min-height: 116px;
  padding: 10px;
  color: var(--ink);
  text-align: center;
  background: #fff;
  border: 1px solid #cfcfc9;
  scroll-snap-align: center;
}
.dayun-card:hover { background: #f2f2ee; }
.dayun-card.selected { border: 2px solid #111; }
.dayun-card.present { box-shadow: inset 0 -4px #111; }
.dayun-card strong { font-size: 1.4rem; }
.dayun-card small, .dayun-card span { font-size: .7rem; }
.dayun-card .present-dot { justify-self: center; color: #fff; }

.filter-bar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.filter-bar label { margin: 0; }
.tag-picker, .tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-option { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.tag-option input { width: auto; min-height: auto; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: #fff;
  background: var(--tag-color, #5a5a55);
  border-radius: 999px;
  font-size: .72rem;
}
.tag-chip.retired { opacity: .55; }
.tag-remove { min-height: auto; padding: 0 2px; border: 0; background: transparent; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.record-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
}
.record-cover { width: 100%; height: 170px; object-fit: cover; background: #eee; }
.record-body { display: grid; gap: 8px; padding: 16px; }
.record-body h2, .record-body p { margin: 0; }
.record-date { font-weight: 750; }
.record-note-count { color: #222; font-size: .82rem; font-weight: 850; }
.result-provenance {
  display: inline-block;
  margin: 6px 0 0;
  padding: 5px 8px;
  color: #111;
  background: #fff4bf;
  border: 2px solid #111;
  border-radius: 4px;
  font-size: .84rem;
  font-weight: 800;
}
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 22px 0; }
.inline-form { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; gap: 10px; align-items: end; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.list { display: grid; gap: 10px; }
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.list-item p { margin: 4px 0 0; }
.user-admin-row { flex-wrap: wrap; }
.admin-password-reset {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding-top: 14px;
  border-top: 2px solid #111;
}
.admin-password-reset[hidden] { display: none; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.compare-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
}
.compare-card h1, .compare-card h2 { margin-top: 0; }
.mini-pillars { display: flex; gap: 6px; }
.mini-pillars strong { padding: 8px; background: #eee; border-radius: 5px; font-family: "Noto Serif TC", Georgia, serif; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.photo-gallery figure { margin: 0; padding: 7px; border: 1px solid var(--line); border-radius: 8px; }
.photo-gallery figure.cover { border: 2px solid #111; }
.photo-gallery img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 5px; }
.photo-controls { display: flex; gap: 6px; margin-top: 7px; }
.photo-controls button { flex: 1; padding: 6px; font-size: .7rem; }
.upload-label { margin-top: 14px; }

@media (max-width: 1024px) {
  main { width: min(100% - 32px, 980px); }
  .topbar { align-items: flex-start; flex-direction: column; gap: 7px; }
  .topbar nav { width: 100%; justify-content: flex-start; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .input-groups { grid-template-columns: 1fr; }
  .advanced-grid { grid-template-columns: 1fr; gap: 18px; }
  .advanced fieldset, .advanced fieldset:first-child, .advanced fieldset:last-child {
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .advanced fieldset:last-child { padding-bottom: 0; border-bottom: 0; }
}

@media (max-width: 720px) {
  main { width: min(100% - 24px, 680px); margin: 22px auto; }
  .login-shell { min-height: calc(100vh - 44px); margin-top: -22px; }
  .page-heading, .dayun-heading, .ten-gods-heading { align-items: stretch; flex-direction: column; }
  .dayun-heading label { width: 100%; }
  .ten-god-language { justify-content: flex-start; }
  .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .date-input-group .year-field, .time-input-group .gender-field { grid-column: 1 / -1; }
  .analysis-grid, .settings-grid { grid-template-columns: 1fr; }
  .filter-bar, .inline-form { grid-template-columns: 1fr; }
  .filter-bar .wide { grid-column: auto; }
  .primary-action { align-items: stretch; flex-direction: column; }
  .primary-action button { width: 100%; }
  .list-item { align-items: stretch; flex-direction: column; }
  .admin-password-reset { grid-template-columns: 1fr; }
  .chart-panel { padding: 6px; }
}

@media (max-width: 420px) {
  main { width: min(100% - 20px, 400px); }
  .panel { padding: 16px; }
  .date-grid, .split { grid-template-columns: 1fr; }
  .date-input-group .year-field, .time-input-group .gender-field { grid-column: auto; }
  .calendar-switch { left: 16px; }
  .actions { align-items: stretch; }
  .actions button { flex: 1; }
  .dayun-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .element-token { min-height: 64px; font-size: 2rem; }
  .record-grid { grid-template-columns: 1fr; }
}

/* Senior-friendly result and input system */
:root {
  --muted: #4f4f4a;
  --line: #b8b8b1;
  --tile-ivory: #fffdf0;
  --tile-edge: #4c4839;
  --male-bg: #b9dcff;
  --male-border: #075aa8;
  --female-bg: #ffd0df;
  --female-border: #a92558;
}
body { font-size: 16px; }
label { color: #292926; font-size: .95rem; }
input, select, textarea { min-height: 48px; border: 2px solid #8b8b84; font-size: 1rem; }
input:focus, select:focus, textarea:focus, button:focus-visible { border-color: #000; box-shadow: 0 0 0 4px rgba(0,0,0,.2); }
.panel { padding: 18px; border-color: #a9a9a2; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.panel > summary, .advanced > summary {
  min-height: 48px;
  padding: 11px 4px;
  color: #111;
  font-size: 1rem;
  line-height: 1.4;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.gender-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.gender-choice > legend { margin-bottom: 6px; color: #292926; font-size: .95rem; font-weight: 700; }
.gender-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.gender-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  margin: 0;
  padding: 7px 9px;
  color: #111;
  border: 2px solid;
  border-radius: 7px;
  cursor: pointer;
}
.gender-option.male { background: var(--male-bg); border-color: var(--male-border); }
.gender-option.female { background: var(--female-bg); border-color: var(--female-border); }
.gender-option input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.gender-option:focus-within { outline: 4px solid rgba(0,0,0,.25); outline-offset: 2px; }
.gender-option:has(input:checked) { border-width: 4px; padding: 5px 7px; box-shadow: inset 0 0 0 2px #fff,0 2px 5px rgba(0,0,0,.18); }
.gender-icon { font-size: 1.65rem; line-height: 1; }
.selected-check { visibility: hidden; font-size: 1.25rem; font-weight: 900; }
.gender-option input:checked ~ .selected-check { visibility: visible; }
.legacy-gender {
  grid-column: 1 / -1;
  margin: 7px 0 0;
  padding: 8px;
  color: #671e1e;
  background: #fff1ef;
  border: 2px solid #b8483e;
  border-radius: 5px;
  font-weight: 750;
}

.settings-form { display: grid; gap: 18px; }
.settings-guide {
  margin: 0;
  padding: 12px;
  color: #17202a;
  background: #eef4f8;
  border-left: 5px solid #245b7c;
  font-weight: 700;
}
.settings-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settings-groups fieldset {
  min-width: 0;
  margin: 0;
  padding: 15px;
  border: 2px solid #b0b0aa;
  border-radius: 7px;
}
.settings-groups legend { padding: 0 6px; font-size: 1rem; font-weight: 850; }
.settings-form > button { justify-self: start; min-width: 220px; }

.variable-panel { padding-top: 8px; padding-bottom: 8px; }
.variable-grid {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr);
  gap: 8px 16px;
  margin: 14px 0;
}
.variable-grid dt { color: #333; font-weight: 800; }
.variable-grid dd { margin: 0; overflow-wrap: anywhere; }
.variable-rules { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
.variable-rules h3 { flex: 0 0 100%; margin-bottom: 2px; }
.variable-rule { padding: 6px 8px; color: #222; background: #ecece7; border: 1px solid #b9b9b2; border-radius: 4px; font-size: .88rem; }
.resolved-variables { width: 100%; margin-top: 12px; }

.chart-guide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
}
.chart-guide h2 { margin-bottom: 0; font-size: 1.05rem; }
.role-focus-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 40px;
  color: #252522;
  font-size: .88rem;
  font-weight: 700;
  text-align: right;
}
.role-focus-status button { min-height: 36px; padding: 5px 9px; }
.bazi-table { min-width: 0; border-spacing: 4px; }
.bazi-table th, .bazi-table td { padding: 3px; }
.bazi-table td { background: transparent; border: 0; border-radius: 0; }
.pillar-heading {
  padding: 5px !important;
  color: #111;
  background: #e8e8e3;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: .94rem;
}
.row-heading { width: 62px; color: #151513; font-size: .86rem; font-weight: 850; }
.pillar-cell { gap: 3px; }

.mahjong-tile {
  --element-color: #555;
  display: grid;
  justify-items: stretch;
  align-content: start;
  gap: 4px;
  min-height: 92px;
  padding: 6px;
  color: #171714;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,240,208,.92)),
    var(--tile-ivory);
  border: 2px solid var(--tile-edge);
  border-top-color: #817b65;
  border-left-color: #817b65;
  border-radius: 7px;
  box-shadow: inset 2px 2px 0 #fff,inset -2px -2px 0 #d8cfaa,0 2px 3px rgba(0,0,0,.2);
}
.mahjong-tile.element-wood { --element-color: var(--wood); }
.mahjong-tile.element-fire { --element-color: var(--fire); }
.mahjong-tile.element-earth { --element-color: var(--earth); }
.mahjong-tile.element-metal { --element-color: var(--metal); }
.mahjong-tile.element-water { --element-color: var(--water); }
.mahjong-tile.element-neutral { --element-color: #555; }
.tile-symbol {
  display: block;
  color: var(--element-color);
  font-family: "Noto Serif TC", Georgia, serif;
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.pillar-meta { color: #2d2d29; font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center; }
.tile-roles { display: grid; gap: 3px; }
.role-chip {
  width: 100%;
  min-height: 30px;
  padding: 4px 5px;
  color: #111;
  background: #eeeae0;
  border: 1px solid #777268;
  border-radius: 4px;
  font-family: "Noto Serif TC", ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.25;
  white-space: normal;
}
button.role-chip:hover, button.role-chip:focus-visible { color: #000; background: #fff; border-color: #000; }
.hidden-token-list { display: grid; gap: 5px; }
.hidden-tile { min-height: 0; grid-template-columns: 38px minmax(0,1fr); align-items: center; }
.hidden-tile .tile-symbol { grid-row: 1 / span 2; font-size: 1.65rem; }
.hidden-tile .pillar-meta { text-align: left; }
.hidden-tile .tile-roles { grid-column: 1 / -1; width: 100%; }
.hidden-power-lines, .visible-hs-power-lines { display: grid; grid-column: 1 / -1; gap: 3px; width: 100%; padding-top: 3px; border-top: 1px solid #aaa58f; }
.hidden-power, .visible-hs-power { display: block; font-size: .76rem; font-weight: 850; text-align: center; white-space: nowrap; }
.visible-hs-power-base { color: #252525; }
.visible-hs-transform { color: #111; background: color-mix(in srgb, var(--element-color) 18%, #fff); border: 1px solid var(--element-color); border-radius: 4px; padding: 2px 3px; }
.role-focus-active [data-role-ids] { opacity: .32; }
.role-focus-active [data-role-ids].role-match { opacity: 1; }
.mahjong-tile.role-match, .ten-role.role-match { outline: 5px solid #111; outline-offset: 2px; box-shadow: none; }
.role-trigger.role-match { color: #000; background: #fff; border-color: #111; outline: 3px solid #111; outline-offset: -3px; opacity: 1; }
.role-trigger[aria-pressed="true"]::before { content: "✓ "; font-weight: 900; }

.element-pie-layout { display: grid; grid-template-columns: minmax(150px,210px) minmax(170px,1fr); align-items: center; gap: 18px; }
.element-pie { margin: 0; }
.element-pie svg { display: block; width: 100%; max-width: 210px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.element-pie path, .element-pie circle { stroke: #fff; stroke-width: 2; }
.element-legend { display: grid; grid-template-columns: minmax(100px,1fr) auto; gap: 7px 12px; margin: 0; }
.element-legend dt { display: flex; align-items: center; gap: 7px; font-weight: 750; }
.element-legend dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 850; text-align: right; }
.legend-swatch { width: 18px; height: 18px; flex: 0 0 auto; background: var(--element-color); border: 2px solid #333; border-radius: 3px; }

.ten-groups { display: grid; grid-template-columns: repeat(5,minmax(190px,1fr)); gap: 10px; overflow-x: auto; padding: 5px 3px 14px; }
.ten-group { display: grid; align-content: start; gap: 9px; }
.ten-group > h3 { min-height: 42px; margin: 0; padding: 8px; color: #fff; background: #242421; border-radius: 4px; font-size: .96rem; }
.ten-role { display: grid; gap: 6px; padding: 9px; background: #f7f7f3; border: 2px solid #aaa; border-radius: 6px; }
.ten-role-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; }
.ten-role-button {
  min-height: 42px;
  padding: 5px 7px;
  color: #111;
  background: #fff;
  border: 2px solid #555;
  text-align: left;
  line-height: 1.25;
}
.ten-power-value { min-width: 36px; font-size: 1rem; text-align: right; }
.ten-power-track { height: 14px; overflow: hidden; background: #ddd; border: 1px solid #777; border-radius: 2px; }
.ten-power-bar { display: block; height: 100%; min-width: 0; background: #242421; }
.ten-contributions { display: grid; gap: 4px; margin: 0; padding-left: 19px; color: #333; font-size: .82rem; line-height: 1.35; }
.method { color: #3d3d39; font-size: .9rem; }

.dayun-panel > summary { font-size: 1.05rem; font-weight: 850; }
.dayun-panel[open] > summary { margin-bottom: 14px; border-bottom: 2px solid #bbb; }
.dayun-token-block { display: grid; gap: 5px; }
.dayun-token-block > small { color: #222; font-weight: 850; }
.dayun-token-block .mahjong-tile { max-width: 230px; }
.dayun-hidden .hidden-token-list { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }

@media (max-width: 1024px) {
  .settings-groups { grid-template-columns: 1fr; }
  .chart-guide { align-items: stretch; flex-direction: column; }
  .role-focus-status { justify-content: flex-start; text-align: left; }
}
@media (max-width: 720px) {
  .panel { padding: 14px; border-radius: 6px; }
  .element-pie-layout { grid-template-columns: 1fr; }
  .element-pie svg { margin: auto; }
  .variable-grid { grid-template-columns: 1fr; gap: 2px; }
  .variable-grid dd { margin-bottom: 8px; }
  .gender-field { grid-column: 1 / -1; }
  .gender-options { grid-template-columns: 1fr 1fr; }
  .bazi-table { min-width: 0; }
  .ten-groups { grid-template-columns: repeat(5,minmax(210px,1fr)); }
}
@media (max-width: 420px) {
  .gender-options { grid-template-columns: 1fr; }
  .settings-form > button { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Compact responsive Natal and Present Da Yun */
body { font-size: clamp(16px, calc(.14vw + 14.5px), 17px); }
.result-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.result-primary-grid > .panel { min-width: 0; }
.chart-panel { padding: clamp(6px, 1vw, 12px); overflow: visible; }
.bazi-table-scroll { width: 100%; overflow-x: visible; }
.bazi-table {
  width: 100%;
  min-width: 0;
  border-spacing: clamp(1px, .35vw, 4px);
  table-layout: fixed;
}
.bazi-table th, .bazi-table td { min-width: 0; padding: clamp(1px, .25vw, 3px); }
.row-heading {
  width: clamp(30px, 4vw, 52px);
  padding-inline: 1px !important;
  font-size: clamp(.68rem, 1.2vw, .84rem);
  overflow-wrap: anywhere;
}
.pillar-heading {
  padding: clamp(3px, .45vw, 5px) 1px !important;
  font-size: clamp(.68rem, 1.5vw, .92rem);
}
.day-master-label { font-size: clamp(.54rem, 1.1vw, .66rem); }
.mahjong-tile {
  min-width: 0;
  min-height: 0;
  gap: clamp(2px, .3vw, 4px);
  padding: clamp(2px, .4vw, 5px);
  border-width: 2px;
  border-top: 4px solid var(--element-color);
  border-radius: 6px;
}
.tile-symbol {
  min-width: 0;
  font-size: clamp(1.55rem, 6vw, 2.35rem);
  overflow: hidden;
}
.pillar-meta {
  display: block;
  min-width: 0;
  color: #222;
  font-size: clamp(.58rem, 1.35vw, .7rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.tile-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 2px;
  min-width: 0;
}
.role-chip {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 2px 3px;
  font-size: clamp(.58rem, 1.25vw, .68rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.hidden-token-list { gap: clamp(2px, .35vw, 5px); }
.hidden-tile {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hidden-tile .tile-symbol {
  grid-row: auto;
  font-size: clamp(1.35rem, 4.8vw, 1.65rem);
}
.hidden-tile .pillar-meta { text-align: center; }
.hidden-tile .tile-roles { grid-column: 1; }
.hidden-power-lines, .visible-hs-power-lines {
  grid-column: 1;
  gap: 2px;
}
.hidden-power, .visible-hs-power {
  font-size: clamp(.62rem, 1.25vw, .74rem);
  line-height: 1.1;
}
.mahjong-tile.role-match, .ten-role.role-match {
  outline-width: 3px;
  outline-offset: 1px;
  box-shadow: none;
}
.chart-guide { gap: 8px; }
.role-focus-status { min-height: 32px; font-size: clamp(.72rem, 1.2vw, .86rem); }
.dayun-focus { padding: clamp(10px, 1.2vw, 16px); }
.dayun-token-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 12px);
}
.dayun-token-block .mahjong-tile { width: 100%; max-width: 230px; }
.dayun-card {
  flex-basis: 100px;
  min-height: 98px;
  padding: 7px;
}
.dayun-card strong { font-size: 1.25rem; }

/* Shared analysis notes remain non-modal so the result behind can still scroll. */
.notes-dock {
  position: fixed;
  right: clamp(10px, 2vw, 28px);
  bottom: clamp(10px, 2vw, 24px);
  z-index: 60;
  pointer-events: none;
}
.notes-toggle,
.notes-drawer { pointer-events: auto; }
.notes-toggle {
  display: block;
  min-width: 126px;
  min-height: 52px;
  margin-left: auto;
  padding: 10px 18px;
  color: #fff;
  background: #111;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  font-size: 1rem;
  font-weight: 900;
}
.notes-drawer {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  width: min(430px, calc(100vw - 24px));
  max-height: min(72dvh, 720px);
  padding: 14px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 3px solid #111;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}
.notes-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid #aaa;
}
.notes-heading h2,
.notes-heading p { margin: 0; }
.notes-heading .actions { flex-wrap: nowrap; }
.notes-heading button { min-height: 40px; padding: 6px 9px; }
#notes-status { min-height: 1.35em; margin: 8px 0; font-size: .82rem; }
#notes-older { justify-self: center; min-height: 40px; margin-bottom: 7px; }
.notes-list {
  min-height: 110px;
  max-height: min(40dvh, 390px);
  padding: 2px 4px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 2px solid #aaa;
}
.note-entry {
  display: grid;
  gap: 7px;
  margin-bottom: 9px;
  padding: 10px;
  background: #f7f7f3;
  border: 2px solid #999;
  border-radius: 7px;
}
.note-entry.redacted { color: #454541; background: #ecece7; border-style: dashed; }
.note-entry-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.note-entry-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.note-entry-heading time { color: var(--muted); font-size: .78rem; text-align: right; }
.note-revision {
  padding: 2px 6px;
  color: #fff;
  background: #333;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.note-content { margin: 0; overflow-wrap: anywhere; line-height: 1.45; white-space: pre-wrap; }
.note-redacted { margin: 0; font-size: .9rem; font-style: italic; line-height: 1.4; }
.note-redact { justify-self: end; min-height: 36px; padding: 5px 9px; color: #7c1818; }
.note-redaction-form { display: grid; gap: 7px; padding-top: 8px; border-top: 1px solid #aaa; }
.note-redaction-form label { margin: 0; font-size: .78rem; }
.note-redaction-form input { min-height: 42px; }
.note-redaction-form .actions { justify-content: flex-end; }
.note-redaction-form button { min-height: 38px; padding: 6px 9px; }
.note-form { display: grid; gap: 7px; padding-top: 10px; }
.note-form label { margin: 0; font-weight: 850; }
.note-form textarea { min-height: 92px; max-height: 170px; resize: vertical; }
.note-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.note-form-footer button { min-width: 120px; }

@media (max-width: 720px) {
  .chart-panel { padding: 6px; }
  .chart-guide { align-items: stretch; flex-direction: column; }
  .role-focus-status { justify-content: flex-start; text-align: left; }
  .dayun-hidden .hidden-token-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .bazi-table { border-spacing: 1px; }
  .bazi-table th, .bazi-table td { padding: 1px; }
  .mahjong-tile { padding: 2px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; }
  .tile-roles { grid-template-columns: minmax(0, 1fr); }
  .notes-dock { right: 8px; bottom: 8px; }
  .notes-drawer { width: calc(100vw - 16px); max-height: 70dvh; padding: 10px; }
  .notes-heading { align-items: stretch; flex-direction: column; }
  .notes-heading .actions button { flex: 1; }
  .notes-list { max-height: 32dvh; }
}

/* v0.5 result tables and Change Palace */
#result-page .panel {
  border-color: #a7a7a0;
  border-radius: 2px;
  box-shadow: none;
}
#result-page .chart-panel,
#result-page .dayun-panel,
#result-page .ten-gods-panel { padding: clamp(8px, 1.2vw, 16px); }
.bazi-table {
  border-spacing: 0;
  border-collapse: collapse;
}
.bazi-table th,
.bazi-table td { border: 1px solid #777770; }
.bazi-table thead th { color: #fff; background: #292927; }
.bazi-table .row-heading { color: #111; background: #e9e9e4; }
.mahjong-tile {
  padding: clamp(3px, .5vw, 6px);
  background: #fff;
  border: 0;
  border-top: 3px solid var(--element-color);
  border-radius: 0;
  box-shadow: none;
}
.palace-trigger {
  width: 100%;
  min-height: 34px;
  padding: 0;
  color: var(--element-color);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-touch-callout: none;
}
.palace-trigger:hover,
.palace-trigger:focus-visible { color: var(--element-color); background: transparent; outline: 3px solid #111; outline-offset: -3px; }
.palace-trigger.palace-pressing { background: transparent; outline: 3px dashed #111; outline-offset: -3px; }
.palace-trigger.palace-selected { background: transparent; box-shadow: inset 0 0 0 3px #111; }
.palace-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 9px 10px;
  color: #111;
  background: #fff;
  border: 2px solid #111;
}
.palace-status > div { display: grid; gap: 2px; }
.palace-status span { color: #3e3e39; font-size: .78rem; }
.palace-status button { flex: 0 0 auto; min-height: 38px; }
.analysis-table-scroll { width: 100%; overflow-x: auto; border: 1px solid #666; }
.analysis-table { width: 100%; min-width: 600px; border-spacing: 0; border-collapse: collapse; font-size: clamp(.76rem, 1.25vw, .92rem); }
.analysis-table th,
.analysis-table td { padding: clamp(6px, .75vw, 10px); border: 1px solid #888; text-align: left; vertical-align: middle; }
.analysis-table thead th { color: #fff; background: #292927; }
.analysis-table tbody tr:nth-child(even) { background: #fff; }
.analysis-table tbody tr.role-match { color: #000; background: #fff; outline: 3px solid #111; outline-offset: -3px; }
.ten-group-cell { width: 13%; color: #111; background: #fff; font-weight: 900; }
.ten-role-button { width: 100%; min-height: 38px; padding: 5px 7px; color: #111; background: #fff; border: 2px solid #555; text-align: left; }
.ten-power-cell { width: 18%; }
.ten-power-value { display: block; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.ten-power-cell meter { width: 100%; height: 13px; accent-color: #222; }
.ten-evidence { display: flex; flex-wrap: wrap; gap: 5px; }
.ten-evidence-item { display: inline-grid; grid-template-columns: 32px auto; align-items: center; gap: 4px; min-height: 34px; padding-right: 6px; border: 1px solid #92928b; background: #fff; }
.ten-evidence-stem { min-height: 32px; font-family: "Noto Serif TC", Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1; }
.ten-evidence-item > span { font-size: .7rem; font-weight: 800; white-space: nowrap; }
.dayun-focus { padding: 8px; background: #fff; border: 1px solid #777; border-radius: 0; }
.dayun-table { width: 100%; table-layout: fixed; }
.dayun-table .row-heading { width: 46px; }
.dayun-card { flex-basis: 88px; min-height: 82px; padding: 5px; border-radius: 0; box-shadow: none; }
.dayun-card.selected { border-width: 3px; }

@media (max-width: 720px) {
  .palace-status { align-items: stretch; flex-direction: column; }
  .palace-status button { width: 100%; }
  .analysis-table { font-size: .76rem; }
}

/* v0.5.1 white responsive application shell */
:root {
  --font-body: clamp(1rem, calc(.22vw + .95rem), 1.1rem);
  --font-small: clamp(.75rem, calc(.18vw + .7rem), .88rem);
  --font-label: clamp(.92rem, calc(.16vw + .88rem), 1rem);
  --font-heading: clamp(1.15rem, calc(.7vw + 1rem), 1.5rem);
}
html { font-size: 16px; background: #fff; }
body { background: #fff; font-size: var(--font-body); }
h1 { font-size: clamp(1.75rem, calc(2vw + 1.15rem), 2.9rem); }
h2 { font-size: var(--font-heading); }
h3 { font-size: clamp(1.05rem, calc(.4vw + .96rem), 1.28rem); }
label, legend { font-size: var(--font-label); }
input, select, textarea, button { font-size: max(1rem, var(--font-label)); }
.topbar { min-height: 64px; }
.topbar nav { flex-wrap: wrap; overflow: visible; }
.topbar nav button, .topbar nav a { min-height: 44px; font-size: clamp(.82rem, calc(.2vw + .78rem), .96rem); }
main { margin-block: clamp(16px, 2.3vw, 32px); }

#app .panel,
#app .simple-input,
#app .advanced,
#app .list-item,
#app .compare-card,
#app .record-card,
#app .rule,
#app .ten-role,
#app .dayun-focus,
#app .search-item { background: #fff; }
.bazi-table .row-heading { background: #fff; }
.analysis-table tbody tr:nth-child(even) { background: #fff; }
.ten-group-cell { background: #fff; }
.role-trigger.role-match { color: #000; background: #fff; border-color: #111; outline: 3px solid #111; outline-offset: -3px; opacity: 1; }
.analysis-table tbody tr.role-match { background: #fff; }
.dayun-card:hover { background: #fff; }
.dayun-table .dayun-hidden-columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(2px, .45vw, 6px); }
.dayun-table .dayun-hidden-columns .hidden-tile { min-width: 0; }
.pillar-heading { font-size: clamp(.72rem, 1.2vw, .9rem); }
.tile-symbol { font-size: clamp(1.45rem, 4.6vw, 2.25rem); }
.hidden-tile .tile-symbol { font-size: clamp(1.15rem, 3.4vw, 1.6rem); }
.pillar-meta { font-size: clamp(.62rem, 1.05vw, .76rem); }
.palace-status span { font-size: var(--font-small); }
.ten-evidence-item > span { font-size: var(--font-small); }

@media (min-width: 720px) and (orientation: landscape) {
  main { width: calc(100% - clamp(16px, 2.2vw, 40px)); }
  .result-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
  .result-primary-grid > .panel { min-width: 0; margin-bottom: 14px; }
}

@media (min-width: 720px) and (max-width: 1024px) {
  .topbar nav { width: 100%; justify-content: flex-start; gap: 4px; }
  .topbar nav button, .topbar nav a { flex: 1 1 auto; }
}

@media (max-width: 719px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; }
  .brand { min-width: 0; }
  .nav-toggle { display: block; justify-self: end; min-width: 88px; min-height: 44px; padding: 8px 14px; color: #fff; background: #111; border: 2px solid #fff; }
  .nav-toggle:hover, .nav-toggle:focus-visible { color: #111; background: #fff; }
  .topbar nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 4px; }
  .topbar nav button, .topbar nav a { width: 100%; min-height: 48px; padding: 9px 6px; text-align: center; }
  .topbar nav a { display: grid; place-items: center; }
  main { width: calc(100% - 16px); margin-block: 14px; }
  .palace-status { align-items: stretch; flex-direction: column; }
  .analysis-table { font-size: clamp(.75rem, 2.8vw, .86rem); }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 8px; }
  .brand small { display: none; }
  .tile-symbol { font-size: clamp(1.35rem, 7vw, 1.85rem); }
  .hidden-tile .tile-symbol { font-size: clamp(1.05rem, 5vw, 1.35rem); }
}

/* Saved-chart calculation draft: no persistence until explicit save. */
.draft-status {
  margin: 0 0 14px;
  padding: 10px 12px;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  font-weight: 750;
}

/* v0.6 reference-led dashboard rhythm: compact cards, clear hierarchy, responsive rails. */
:root {
  --analysis-accent: #d94b52;
  --analysis-canvas: #f4f5f7;
  --analysis-line: #d8dbe2;
  --analysis-soft: #f0f1f4;
}

main:has(#app:not([hidden])) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(14px, 2vw, 30px);
  background: var(--analysis-canvas);
}
#app > .page { width: min(1760px, 100%); margin-inline: auto; }
.topbar nav .active { box-shadow: inset 0 -3px 0 var(--analysis-accent); }

.page[data-page="plot"] { max-width: 1080px; }
.page[data-page="plot"] > .page-heading { justify-content: center; margin-bottom: 24px; text-align: center; }
.page[data-page="plot"] > .page-heading h1,
#result-page #result-title { position: relative; display: inline-block; padding-bottom: 10px; }
.page[data-page="plot"] > .page-heading h1::after,
#result-page #result-title::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 44px;
  height: 3px;
  background: var(--analysis-accent);
  border-radius: 3px;
  content: "";
  transform: translateX(-50%);
}
#plot-form .simple-input,
#plot-form .advanced {
  border-color: var(--analysis-line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(32, 37, 46, .07);
}
#plot-form .simple-input { padding: clamp(22px, 3vw, 34px); padding-top: 42px; }
#plot-form .input-group { padding: clamp(10px, 1.4vw, 16px); background: #fafbfc; border: 1px solid #e1e3e8; border-radius: 10px; }
#plot-form .calendar-switch { background: #24262b; box-shadow: 0 3px 10px rgba(32, 37, 46, .15); }
#plot-form .calendar-switch .active { color: #fff; background: var(--analysis-accent); }
#plot-form .primary-action {
  justify-content: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--analysis-line);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(32, 37, 46, .05);
}
#plot-form .primary-action button[type="submit"] { min-width: 190px; background: var(--analysis-accent); border-color: var(--analysis-accent); }
#plot-form .primary-action button[type="submit"]:hover { background: #b9363e; }

#result-page > .page-heading {
  position: relative;
  align-items: center;
  min-height: 110px;
  padding: 18px clamp(16px, 2.2vw, 30px);
  background: #fff;
  border: 1px solid var(--analysis-line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(32, 37, 46, .07);
}
#result-page > .page-heading > div:first-child { flex: 1 1 auto; min-width: 0; text-align: center; }
#result-page > .page-heading .eyebrow { color: var(--analysis-accent); }
#result-page #result-title { margin-bottom: 4px; font-size: clamp(1.7rem, 2.3vw, 2.5rem); }
#result-page #result-context { color: #3d4149; font-weight: 700; }
#result-page > .page-heading .actions { justify-content: flex-end; }
#result-page .panel {
  border: 1px solid var(--analysis-line);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(32, 37, 46, .06);
}
#result-page .variable-panel { background: #fff; }
#result-page .variable-panel > summary { color: #282b31; }
#result-page .result-primary-grid,
#result-page .analysis-grid { gap: 14px; }
#result-page .result-primary-grid > .panel,
#result-page .analysis-grid > .panel { margin-bottom: 0; }
#result-page .analysis-grid { align-content: start; }
#result-page .analysis-grid > article { min-width: 0; padding: 16px; text-align: center; }
#result-page .analysis-grid > article h2 { padding-bottom: 9px; border-bottom: 1px solid var(--analysis-line); }
#result-page .chart-guide { padding: 4px 6px 10px; border-bottom: 1px solid var(--analysis-line); }
#result-page .dayun-heading { padding: 6px 4px 10px; border-bottom: 1px solid var(--analysis-line); }
#result-page .bazi-table-scroll { overflow: hidden; border: 1px solid var(--analysis-line); border-radius: 8px; }
#result-page .bazi-table th,
#result-page .bazi-table td { border-color: #d3d6dd; }
#result-page .bazi-table thead th { color: #23262c; background: var(--analysis-soft); }
#result-page .bazi-table .row-heading { color: #292c32; background: #f7f8fa; }
#result-page .role-chip { background: #f6f3ec; border-color: #aaa69b; }
#result-page .dayun-focus { border-color: var(--analysis-line); border-radius: 9px; }
#result-page .dayun-card { border-color: #cfd2d9; border-radius: 7px; }
#result-page .dayun-card.selected { border-color: var(--analysis-accent); }
#result-page .present-badge,
#result-page .present-dot { background: var(--analysis-accent); }
#result-page .palace-status { background: #fff; border: 1px solid var(--analysis-line); border-left: 4px solid var(--analysis-accent); border-radius: 8px; }
#result-page .ten-god-language button.selected { background: var(--analysis-accent); border-color: var(--analysis-accent); }
#result-page .analysis-table-scroll { border-color: var(--analysis-line); border-radius: 8px; }
#result-page .analysis-table thead th { background: #34373e; }
#result-page .rule { border: 1px solid var(--analysis-line); border-left: 4px solid #969ba5; border-radius: 8px; }
#result-page .rule.applied { border-left-color: var(--analysis-accent); }

@media (min-width: 1280px) {
  #result-page {
    display: grid;
    grid-template-columns: minmax(250px, .62fr) minmax(0, 2.38fr);
    column-gap: 16px;
    align-items: start;
  }
  #result-page > .page-heading,
  #result-page > #calculation-variables { grid-column: 1 / -1; }
  #result-page > .analysis-grid {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
  }
  #result-page > .result-primary-grid { grid-column: 2; grid-row: 3; }
  #result-page > .result-primary-grid ~ * { grid-column: 1 / -1; }
  #result-page > .analysis-grid { grid-column: 1; }
}

@media (min-width: 720px) and (orientation: landscape) {
  #result-page .result-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
  #result-page > .page-heading { align-items: flex-start; }
  #result-page .analysis-grid { margin-top: 0; }
}

@media (max-width: 719px) {
  main:has(#app:not([hidden])) { padding: 8px; }
  #app > .page { width: 100%; }
  #result-page > .page-heading { align-items: stretch; min-height: 0; padding: 15px; text-align: left; }
  #result-page > .page-heading > div:first-child { text-align: left; }
  #result-page #result-title::after { left: 0; transform: none; }
  #result-page > .page-heading .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #result-page > .page-heading .actions button { width: 100%; min-width: 0; }
  #result-page .panel { border-radius: 10px; }
  #plot-form .simple-input { padding: 34px 12px 14px; }
  #plot-form .input-group { padding: 10px; }
  #plot-form .primary-action { align-items: stretch; padding: 12px; }
  #plot-form .primary-action span { text-align: center; }
}

@media (min-width: 1280px) {
  #result-page > .analysis-grid .element-pie-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 12px;
  }
  #result-page > .analysis-grid .element-pie svg { max-width: 170px; }
  #result-page > .analysis-grid .element-legend {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    gap: 6px 8px;
    text-align: left;
  }
  #result-page > .analysis-grid .element-legend dt { min-width: 0; }
}
/* v0.6 polar-area and Present Day 12-time power analysis */
.power-chart { display: block; width: 100%; aspect-ratio: 1; }
.element-polar-layout { grid-template-columns: minmax(150px, 210px) minmax(170px, 1fr); }
.element-polar-canvas { max-width: 210px; margin: auto; }
.ten-power-disclosure {
  margin: 14px 0 20px;
  padding: 0;
  border: 2px solid #777770;
  background: #fff;
}
.ten-power-disclosure > summary {
  padding: 12px 14px;
  color: #fff;
  background: #292927;
  font-weight: 850;
  cursor: pointer;
}
#ten-power-comparison { padding: clamp(10px, 2vw, 18px); }
.power-comparison-heading,
.time-radar-heading,
.time-radar-card-heading,
.time-radar-footer,
.power-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.power-comparison-heading > div { display: grid; gap: 3px; }
.power-comparison-heading button { flex: 0 0 auto; }
.power-method { margin: 12px 0; color: #333; }
.power-loading { min-height: 120px; display: grid; place-items: center; font-weight: 800; }
.power-overview { display: grid; grid-template-columns: minmax(260px, 460px); margin-bottom: 18px; }
.natal-power-card {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(150px, 1fr);
  gap: 10px 16px;
  padding: 12px;
  border: 2px solid #333;
}
.natal-power-card .power-card-heading { grid-column: 1 / -1; }
.power-focus-stem,
.time-pillar,
.power-pillar {
  font-family: "Noto Serif TC", Georgia, serif;
  color: #111;
}
.power-focus-stem { font-size: 2rem; }
.natal-power-canvas { max-width: 240px; }
.power-axis-list {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  align-content: center;
  gap: 7px 10px;
  margin: 0;
}
.power-axis-list dt { display: flex; align-items: center; gap: 7px; font-weight: 800; }
.power-axis-list dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.power-axis-value { display: grid; justify-items: end; line-height: 1.1; }
.power-axis-number { font-size: 1rem; font-weight: 850; }
.power-axis-percent { margin-top: 2px; color: #555; font-size: .72rem; font-weight: 400; }
.power-axis-swatch { width: 16px; height: 16px; background: var(--power-color); border: 1px solid #111; }
.time-radar-section { border-top: 2px solid #777770; padding-top: 14px; }
.time-radar-heading { margin-bottom: 12px; }
.time-radar-heading h3 { margin: 0; }
.power-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.power-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 800; }
.power-legend-item i { display: inline-block; width: 30px; height: 0; border-top: 3px solid #111; }
.power-legend-item .present-line { border-top-color: #b52f35; border-top-style: dashed; }
.time-radar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 12px; }
.time-radar-card { min-width: 0; padding: 10px; border: 2px solid #9b9b94; background: #fff; }
.time-radar-card.current-period { border: 4px solid #111; padding: 8px; }
.time-radar-card-heading { align-items: flex-start; flex-wrap: wrap; }
.time-radar-card-heading > div { display: grid; }
.time-pillar { font-size: 1.7rem; }
.time-range { font-weight: 800; }
.current-badge { width: 100%; padding: 4px 7px; color: #fff; background: #111; text-align: center; font-size: .8rem; font-weight: 850; }
.time-radar-canvas { max-width: 330px; margin: 4px auto; }
.time-radar-footer { justify-content: flex-end; gap: 4px 8px; flex-wrap: wrap; padding-top: 7px; border-top: 1px solid #aaa; font-size: .8rem; font-weight: 800; }
.radar-scale-max { color: #9f1f25; }
.power-time-control { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px 14px; align-items: end; margin-top: 16px; padding: 14px; border: 2px solid #777770; background: #fff; }
.power-time-control label { display: grid; gap: 6px; font-weight: 850; }
.power-time-control input { min-height: 44px; font: inherit; }
.power-time-control small { grid-column: 1; }
.power-time-control button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; }
.power-data-details { margin-top: 16px; border-top: 2px solid #777770; }
.power-data-details > summary { padding: 12px 2px; font-weight: 850; }
.power-data-table { min-width: 980px; }
.power-data-table th,
.power-data-table td { text-align: center; }
.power-data-value { min-width: 92px; }
.power-data-value strong,
.power-data-value span { display: block; }
.power-data-value span { color: #555; font-size: .78rem; }
.current-period-row > * { background: #fff4bf !important; }

@media (min-width: 720px) and (max-width: 1024px) {
  .time-radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .element-polar-layout,
  .natal-power-card,
  .time-radar-grid { grid-template-columns: 1fr; }
  .power-time-control { grid-template-columns: 1fr; }
  .power-time-control small,
  .power-time-control button { grid-column: 1; grid-row: auto; }
  .element-polar-canvas,
  .natal-power-canvas { max-width: 280px; }
  .power-comparison-heading,
  .time-radar-heading { align-items: stretch; flex-direction: column; }
  .power-comparison-heading button { width: 100%; }
}
.date-selection-controls { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)) auto; align-items:end; gap:12px; position:relative; }
.date-selection-controls .calendar-switch { position:static; width:max-content; }
.date-selection-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid #aeb3bc; background:#aeb3bc; gap:1px; }
.date-selection-weekday { background:#25282e; color:#fff; padding:8px 4px; text-align:center; font-weight:800; font-size:.8rem; }
.date-selection-blank { min-height:100px; background:#f4f5f6; }
.date-selection-tile { min-height:112px; background:#fff; color:#17191d; border:0; border-radius:0; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center; padding:8px 3px; }
.date-selection-tile:hover,.date-selection-tile:focus-visible { outline:3px solid #111; outline-offset:-3px; z-index:1; }
.date-selection-tile.filtered-out { visibility:hidden; pointer-events:none; }
.date-selection-tile strong { justify-self:start; font-size:1rem; }
.date-officer { font-family:"Noto Serif TC",serif; font-weight:800; font-size:clamp(.85rem,1.8vw,1.15rem); text-align:center; }
.date-affinity { font-size:1.55rem; font-weight:900; line-height:1; }
.date-selection-tile.state-preferred .date-affinity { color:#137333; }.date-selection-tile.state-accepted .date-affinity { color:#155fa0; }.date-selection-tile.state-conditional .date-affinity { color:#9b6500; }.date-selection-tile.state-rejected .date-affinity { color:#a32020; }
@media (max-width: 720px) { .date-selection-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }.date-selection-controls button[type=submit] { grid-column:1 / -1; }.date-selection-tile,.date-selection-blank { min-height:80px; }.date-selection-weekday { font-size:.68rem; }.date-officer { font-size:.68rem; }.date-affinity { font-size:1.2rem; } }
.date-selection-tile.solar-term-transition { border:2px solid #21242a; padding:6px 1px; }
.date-transition-marker { color:#b42318; font-size:1.05rem; font-weight:900; margin-left:2px; }
.date-selection-tile.solar-term-transition .date-officer { font-size:clamp(.7rem,1.45vw,.95rem); line-height:1.25; }
.date-selection-tile.solar-term-transition .date-affinity { font-size:1.15rem; letter-spacing:.05em; }
.date-selection-weekday.sunday { background:#a32020; }
.date-selection-tile.sunday { background:#fff1f1; }
.date-selection-tile.sunday:hover,.date-selection-tile.sunday:focus-visible { background:#ffe1e1; }
.date-selection-month-nav { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px; align-items:end; }
.date-selection-month-nav button { min-width:38px; padding-inline:8px; }
.date-selection-tile.today { outline:3px solid #111; outline-offset:-4px; background:#fff8c7; z-index:1; }
.date-selection-tile.today.sunday { background:#ffe1e1; }
.date-today-label { display:block; margin-top:2px; color:#111; font-size:.58rem; font-weight:900; letter-spacing:.03em; text-transform:uppercase; }
.date-selection-tile { grid-template-rows:auto 1fr auto auto; }
.date-mansion { font-family:"Noto Serif TC",serif; font-size:clamp(.68rem,1.25vw,.85rem); font-weight:800; color:#3b3e44; text-align:center; }
.date-selection-tile.solar-term-transition .date-mansion { font-size:clamp(.6rem,1.1vw,.76rem); }
@media (max-width: 720px) { .date-selection-tile,.date-selection-blank { min-height:90px; }.date-mansion { font-size:.58rem; } }
.date-selection-layer-title { margin:.2rem 0; color:#31343a; font-family:"Noto Serif TC",serif; font-weight:800; }
.date-selection-dialog { width:min(720px,calc(100vw - 28px)); max-height:min(82vh,760px); border:2px solid #17191d; padding:0; color:#17191d; background:#fff; }
.date-selection-dialog::backdrop { background:rgba(0,0,0,.52); }
.date-selection-dialog-bar { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #c8cbd1; background:#fff; }
.date-selection-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.date-detail-mansion-title { color:#a32020; }
#date-selection-detail-use { border:2px solid #111; font-weight:850; }
#date-selection-detail-content { padding:16px; overflow-wrap:anywhere; }
#date-selection-detail-content h2 { margin-top:0; } #date-selection-detail-content h3 { margin:18px 0 4px; }
@media (max-width:720px) { .date-selection-dialog { width:calc(100vw - 16px); max-height:88vh; }.date-selection-dialog-bar,#date-selection-detail-content { padding:12px; } }
/* Keep the two calendar reference layers equally readable; Mansion is red by design. */
.date-selection-tile .date-officer,
.date-selection-tile .date-mansion,
.date-selection-tile.solar-term-transition .date-officer,
.date-selection-tile.solar-term-transition .date-mansion {
  font-size:clamp(.85rem,1.8vw,1.15rem);
  line-height:1.15;
}
.date-selection-tile .date-mansion { color:#b42318; }
@media (max-width:720px) {
  .date-selection-tile .date-officer,
  .date-selection-tile .date-mansion,
  .date-selection-tile.solar-term-transition .date-officer,
  .date-selection-tile.solar-term-transition .date-mansion { font-size:.68rem; }
}

/* Natal Hour Grading V1 */
.ten-gods-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; }
#select-natal-hour-date { min-height:42px; border:2px solid #111; font-weight:850; }
.natal-hour-date-dialog { width:min(1180px,calc(100vw - 24px)); max-height:92vh; }
.natal-hour-date-controls { margin:0; border:0; border-bottom:1px solid #c8cbd1; border-radius:0; grid-template-columns:auto minmax(280px,1.4fr) minmax(130px,.7fr) minmax(150px,.8fr) auto auto; }
#natal-hour-calendar-context { margin:10px 14px; }
#natal-hour-date-calendar { margin:0 14px 16px; }
.date-selection-tile.selected-date { outline:4px solid #155fa0; outline-offset:-5px; }
.natal-hour-summary { display:grid; gap:10px; margin:14px 0; padding:12px; border:2px solid #111; background:#f7f7f4; }
.natal-hour-summary-heading { font-weight:900; }
.natal-hour-calendar-selection { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid #777; background:#fff; }
.natal-hour-calendar-labels { display:grid; gap:4px; min-width:0; }
.natal-hour-officer-context,.natal-hour-mansion-context { font-family:"Noto Serif TC",serif; font-weight:850; line-height:1.3; }
.natal-hour-mansion-context { color:#a32020; }
.natal-hour-date-info { flex:0 0 36px; }
.natal-hour-context-retry { min-height:36px; padding:6px 12px; }
.natal-hour-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #777; background:#777; gap:1px; }
.natal-hour-metric { display:grid; gap:3px; padding:9px; background:#fff; }
.natal-hour-metric span { color:#444; font-size:.76rem; font-weight:750; }
.natal-hour-metric strong { font-size:1.08rem; font-variant-numeric:tabular-nums; }
.natal-hour-ranking { margin:0; font-size:.82rem; line-height:1.45; }
.natal-hour-grade { display:grid; grid-template-columns:auto minmax(0,1fr) 38px; align-items:center; gap:9px; margin-top:9px; padding:9px; border-top:2px solid #111; background:#eef6ee; }
.natal-hour-grade.critical { color:#7b1117; background:#fff0f0; border-color:#a32020; }
.natal-hour-score { display:grid; min-width:64px; }
.natal-hour-score span { font-size:.68rem; font-weight:750; }
.natal-hour-score strong { font-size:1.45rem; line-height:1; font-variant-numeric:tabular-nums; }
.natal-hour-grade-meta { display:grid; gap:2px; min-width:0; }
.natal-hour-grade-meta strong { font-size:.84rem; }
.natal-hour-grade-meta span { color:#444; font-size:.74rem; }
.natal-hour-info { width:36px; min-width:36px; height:36px; padding:0; border-radius:50%; color:#fff; background:#111; font-family:Georgia,serif; font-size:1rem; font-weight:900; }
.natal-hour-debug-dialog { width:min(1100px,calc(100vw - 24px)); max-height:90vh; }
#natal-hour-debug-content { padding:16px; }
#natal-hour-debug-content > h2 { margin-top:0; }
.natal-dimension-table { width:min(520px,100%); }
.natal-dimension-table th { text-align:left; }
.natal-dimension-table td { text-align:right; font-weight:900; font-variant-numeric:tabular-nums; }
.natal-debug-section { margin-top:18px; }
.natal-debug-table { min-width:1050px; font-size:.78rem; }
.natal-debug-table th,.natal-debug-table td { vertical-align:top; }
.natal-debug-table .debug-critical > * { background:#ffe2e2; }
.natal-debug-table .debug-suppressed > * { color:#555; background:#eee; }
@media (max-width:719px) {
  .ten-gods-actions { width:100%; justify-content:stretch; }
  #select-natal-hour-date { width:100%; }
  .natal-hour-date-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .natal-hour-date-controls .calendar-switch,.natal-hour-date-controls .date-selection-month-nav { grid-column:1 / -1; }
  .natal-hour-metrics { grid-template-columns:1fr; }
  .natal-hour-calendar-selection { align-items:flex-start; }
  .date-selection-dialog-actions { width:100%; }.date-selection-dialog-actions button { flex:1; }
  .natal-hour-date-dialog,.natal-hour-debug-dialog { width:calc(100vw - 12px); max-height:94vh; }
  #natal-hour-date-calendar { margin-inline:6px; }
  #natal-hour-debug-content { padding:10px; }
}

/* Compare V2 — shared high-contrast matrix and routed relationships. */
.compare-controls {
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(320px,1fr) auto;
  align-items:end;
  gap:14px;
  margin-bottom:10px;
}
.compare-controls p { margin:.25rem 0 0; }
.compare-control-actions { display:flex; align-items:end; justify-content:flex-end; gap:8px; }
.compare-control-actions button { min-height:46px; white-space:nowrap; }
.compare-legend { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.compare-legend span { padding:5px 9px; border:2px solid currentColor; border-radius:4px; background:#fff; font-weight:850; }
.compare-legend .supportive { color:#155fa0; }
.compare-legend .adverse { color:#a32020; }
.compare-legend .incomplete { color:#666; }
.compare-board-shell { position:relative; overflow:auto; border:2px solid #111; background:#fff; overscroll-behavior:contain; }
.compare-lines { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; }
.compare-line { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.86; }
.compare-line.supportive { stroke:#155fa0; }
.compare-line.adverse { stroke:#b42318; }
.compare-line.incomplete { stroke:#666; stroke-dasharray:7 5; }
#compare-result.compare-grid {
  --compare-rail-space:0px;
  position:relative;
  display:block;
  min-width:100%;
  padding-right:var(--compare-rail-space);
  background:#fff;
}
.compare-context-bar {
  position:sticky;
  left:0;
  z-index:8;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  box-sizing:border-box;
  width:max(100%,1120px);
  min-width:1120px;
  padding:9px 11px;
  border-bottom:2px solid #111;
  background:#f3f4f6;
}
.compare-matrix {
  position:relative;
  width:max(100%,1120px);
  min-width:1120px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  color:#111;
  background:#fff;
}
.compare-col-person { width:245px; }
.compare-col-pillar,.compare-col-shared { width:125px; }
.compare-matrix thead th {
  position:sticky;
  top:0;
  z-index:7;
  padding:8px 5px;
  border-right:1px solid #777;
  border-bottom:2px solid #111;
  background:#f3f4f6;
  font-size:.78rem;
  font-weight:900;
  text-align:center;
}
.compare-matrix thead th:first-child { left:0; z-index:9; text-align:left; }
.compare-matrix thead th:last-child,.compare-person-row > :last-child { border-right:0; }
.compare-person-row { --compare-route-space:0px; }
.compare-person-row > th,.compare-person-row > td {
  box-sizing:border-box;
  vertical-align:top;
  border-right:1px solid #999;
  border-bottom:2px solid #111;
  background:#fff;
}
.compare-person-row:last-child > th,.compare-person-row:last-child > td { border-bottom:0; }
.compare-person-cell {
  position:sticky;
  left:0;
  z-index:6;
  padding:9px 9px calc(9px + var(--compare-route-space));
  text-align:left;
}
.compare-person-identity { display:grid; grid-template-columns:1fr auto; align-items:start; gap:4px 8px; min-width:0; }
.compare-person-identity h2 { grid-column:1; margin:0; font-size:1.05rem; line-height:1.2; overflow-wrap:anywhere; }
.compare-person-identity > span { grid-column:1; color:#333; font-size:.72rem; font-weight:650; line-height:1.25; }
.compare-person-identity .compare-person-age { color:#111; font-weight:900; }
.compare-person-info {
  grid-column:2;
  grid-row:1 / span 4;
  min-width:34px;
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-family:Georgia,serif;
  font-weight:900;
}
.compare-pillar-cell { padding:5px 5px calc(5px + var(--compare-route-space)); }
.compare-pillar-cell.shared { background:#fffbea; }
.compare-pillar {
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:start;
  gap:4px;
  min-height:148px;
  padding:0;
  border:0;
  border-radius:0;
  color:#111;
  background:transparent;
  text-align:center;
}
.compare-pillar:hover,.compare-pillar:focus-visible { outline:2px solid #111; outline-offset:1px; }
.compare-pillar.selected { outline:4px solid #111; outline-offset:1px; }
.compare-pillar.empty { place-content:center; color:#666; background:#f6f6f6; }
.compare-token {
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
  min-height:45px;
  padding:2px;
  border:3px solid transparent;
  border-radius:2px;
  color:#111;
  background:var(--token-bg,#fff);
  font-family:"Noto Serif TC",serif;
  cursor:pointer;
}
.compare-token .symbol { color:var(--token-color,#111); font-size:clamp(1.5rem,1.7vw,1.95rem); font-weight:900; line-height:1; }
.compare-token .pinyin { color:#222; font-family:system-ui,sans-serif; font-size:.62rem; font-weight:800; }
.compare-token.element-wood { --token-color:var(--wood); --token-bg:#eef8ef; }
.compare-token.element-fire { --token-color:var(--fire); --token-bg:#fff0ee; }
.compare-token.element-earth { --token-color:var(--earth); --token-bg:#fff8d8; }
.compare-token.element-metal { --token-color:var(--metal); --token-bg:#f0f1f2; }
.compare-token.element-water { --token-color:var(--water); --token-bg:#edf5ff; }
.compare-token.source { outline:4px solid #111; outline-offset:1px; }
.compare-token.destination-supportive { border-color:#155fa0; }
.compare-token.destination-adverse { border-color:#b42318; }
.compare-token.destination-incomplete { border-color:#666; border-style:dashed; }
.compare-destination-info {
  position:absolute;
  top:-6px;
  right:-6px;
  z-index:6;
  min-width:28px;
  width:28px;
  height:28px;
  padding:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-family:Georgia,serif;
  font-size:.76rem;
  font-weight:900;
}
.compare-hidden { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; min-height:40px; }
.compare-hidden .compare-token { min-height:40px; }
.compare-hidden .symbol { font-size:1.18rem; }
.compare-hidden .pinyin { display:none; }
.compare-debug-list { display:grid; gap:10px; }
.compare-debug-card { padding:10px; border:2px solid #777; background:#fff; }
.compare-debug-card.supportive { border-color:#155fa0; background:#f1f7ff; }
.compare-debug-card.adverse { border-color:#b42318; background:#fff1f0; }
.compare-debug-card.incomplete { border-style:dashed; }
.compare-debug-card.suppressed { opacity:.7; background:#eee; }
.compare-debug-card h3 { margin:0 0 4px; }
.compare-debug-card p { margin:.25rem 0; }
.compare-debug-symbols { font-family:"Noto Serif TC",serif; font-size:1.35rem; font-weight:900; }
.compare-dialog { width:min(1000px,calc(100vw - 24px)); max-height:90vh; }
#compare-debug-content,#compare-person-content { padding:16px; }
.compare-person-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:14px; border:1px solid #777; background:#777; }
.compare-person-summary > div { padding:9px; background:#fff; }
.compare-person-summary span { display:block; color:#444; font-size:.72rem; }
.compare-person-result-table { width:100%; table-layout:fixed; }
.compare-person-result-table th,.compare-person-result-table td { text-align:center; }
.compare-person-result-table .chinese-symbol { font-size:1.7rem; }
.compare-token-main {
  display:grid;
  place-items:center;
  width:100%;
  min-height:40px;
  padding:0;
  border:0;
  color:inherit;
  background:transparent;
  box-shadow:none;
}
.compare-token-main:hover,.compare-token-main:focus-visible { color:inherit; background:rgba(255,255,255,.7); outline:2px solid #111; }

@media (max-width:1023px) {
  .compare-controls { grid-template-columns:minmax(240px,320px) minmax(280px,1fr); }
  .compare-control-actions { grid-column:1 / -1; }
  .compare-context-bar,.compare-matrix { width:max(100%,1000px); min-width:1000px; }
  .compare-col-person { width:210px; }
  .compare-col-pillar,.compare-col-shared { width:112px; }
}
@media (max-width:719px) {
  .compare-controls { grid-template-columns:1fr; align-items:stretch; }
  .compare-control-actions { grid-column:auto; display:grid; grid-template-columns:1fr 1fr; }
  .compare-control-actions button { width:100%; }
  .compare-context-bar,.compare-matrix { width:890px; min-width:890px; }
  .compare-col-person { width:169px; }
  .compare-col-pillar,.compare-col-shared { width:103px; }
  .compare-person-cell { padding-inline:6px; }
  .compare-person-identity h2 { font-size:.95rem; }
  .compare-pillar-cell { padding-inline:3px; }
  .compare-pillar { min-height:138px; }
  .compare-token .symbol { font-size:1.45rem; }
  .compare-person-summary { grid-template-columns:1fr; }
  .compare-dialog { width:calc(100vw - 12px); max-height:94vh; }
}