:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #172a2b;
  background: #f5f8f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 60px;
  padding: 0 max(20px, calc((100vw - 1040px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #10b9ad;
  color: white;
}
.brand { border: 0; background: none; color: inherit; font-weight: 700; font-size: 18px; }
.topbar-note { font-size: 13px; opacity: .9; }
.main { width: min(1040px, calc(100% - 32px)); margin: 28px auto 56px; }
.page-heading { margin: 0 0 6px; font-size: 24px; font-weight: 650; }
.page-subtitle { margin: 0 0 22px; color: #657576; font-size: 14px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.module-button {
  min-height: 122px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 10px;
  text-align: left;
  background: white;
  border: 1px solid #e0e9e8;
  border-radius: 8px;
  color: #172a2b;
  transition: border-color .15s, background .15s, transform .15s;
}
.module-button:hover { border-color: #10b9ad; background: #f1fbfa; transform: translateY(-1px); }
.module-icon { color: #0baca3; font-size: 23px; line-height: 1; }
.module-name { font-size: 16px; font-weight: 600; }
.module-state { color: #718181; font-size: 12px; }
.module-state.ready { color: #078d73; }
.module-state.pending { color: #a57417; }

.back-button, .secondary-button, .primary-button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 600;
}
.back-button, .secondary-button { background: white; border: 1px solid #d6e1e0; color: #274142; }
.primary-button { background: #10b9ad; border: 1px solid #10b9ad; color: white; }
.primary-button:disabled { cursor: not-allowed; opacity: .55; }
.page-actions { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.form-panel, .result-panel, .history-panel, .pending-panel {
  margin-top: 16px;
  padding: 20px;
  background: white;
  border: 1px solid #e0e9e8;
  border-radius: 8px;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; color: #526465; font-weight: 600; }
.field input, .field select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #ccd9d8; border-radius: 5px; background: white; color: #172a2b; }
.field input:focus, .field select:focus { outline: 2px solid #a9e7e2; border-color: #10b9ad; }
.section-heading { margin: 0 0 14px; font-size: 17px; }
.result-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.7 Consolas, "Microsoft YaHei", monospace; }
.history-list { display: grid; gap: 8px; }
.history-item { width: 100%; text-align: left; padding: 12px; border: 1px solid #e4ebea; border-radius: 6px; background: #fbfdfd; color: inherit; }
.history-item:hover { border-color: #10b9ad; }
.muted { color: #718181; font-size: 13px; }
.status-message { min-height: 20px; margin: 10px 0 0; color: #a23e37; font-size: 13px; }
.chart-caption { max-width: 720px; margin: 8px auto 14px; text-align: center; color: #506364; font-size: 14px; font-weight: 600; }
.feixing-grid-container { max-width: 720px; margin: 0 auto; }
.nine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #aebbb9; background: #aebbb9; }
.palace-button { position: relative; aspect-ratio: 1; min-width: 0; padding: 10px; display: grid; grid-template-rows: 1fr auto; align-items: center; border: 0; border-radius: 0; background: #fff; color: #1c3636; transition: background .15s, box-shadow .15s; }
.palace-button:hover { background: #f3fbf9; }
.palace-button[aria-pressed="true"] { position: relative; z-index: 1; background: #f7e9df; box-shadow: inset 0 0 0 2px #c67b56; }
.star-number { position: absolute; top: 10px; font-size: 23px; line-height: 1; font-weight: 700; }
.mountain-star { left: 11px; color: #16833c; }
.facing-star { right: 11px; color: #d4332e; }
.palace-center { display: grid; justify-items: center; align-self: center; gap: 3px; color: #12b9ad; }
.palace-center strong { font-size: 38px; line-height: 1; font-weight: 700; }
.palace-center span { color: #607372; font-size: 12px; }
.palace-footer { display: flex; justify-content: space-between; gap: 5px; color: #748182; font-size: 11px; white-space: nowrap; }
.detail-panel { margin-top: 12px; padding: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; border-left: 3px solid #10b9ad; background: #f7fbfb; color: #596a6b; font-size: 13px; }
.detail-panel strong { flex-basis: 100%; color: #1c3636; }
.detail-panel b { color: #16833c; }
.detail-panel .palace-role { color: #0baca3; font-weight: 600; }
.chart-notes { margin-top: 14px; color: #536364; font-size: 13px; }
.chart-notes summary { cursor: pointer; font-weight: 600; }
.qimen-summary { max-width: 720px; margin: 0 auto 18px; display: grid; gap: 12px; color: #344849; }
.qimen-event { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #e1e9e7; }
.qimen-event small, .qimen-pillars small { color: #738181; }
.qimen-meta, .qimen-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.qimen-facts b { color: #13877e; }
.qimen-pillars { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #d9e2df; }
.qimen-pillars span { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 10px 5px; border-right: 1px solid #e0e7e5; }
.qimen-pillars span:last-child { border-right: 0; }
.qimen-pillars strong { font-size: 20px; color: #b34f36; }
.qimen-grid { max-width: 720px; margin: 0 auto; }
.qimen-palace { aspect-ratio: 1.1; grid-template-rows: auto 1fr auto auto; align-content: stretch; padding: 8px; }
.qimen-palace[aria-pressed="true"] { background: #f7e9df; box-shadow: inset 0 0 0 2px #c67b56; }
.qimen-palace-heading, .qimen-plates { display: flex; justify-content: space-between; align-items: center; gap: 3px; width: 100%; font-size: 11px; color: #677675; }
.qimen-deity { justify-self: start; align-self: start; color: #8b672c; font-size: 11px; }
.qimen-star { align-self: center; color: #176f83; font-size: 15px; font-weight: 700; }
.qimen-plates { justify-content: space-around; font-size: 16px; font-weight: 700; }
.qimen-sky { color: #b34f36; }
.qimen-door { color: #16833c; font-size: 13px; }
.qimen-earth { color: #285e99; }
.qimen-center-mark { align-self: center; color: #a76532; font-size: 13px; font-weight: 700; }
.qimen-palace .qimen-palace-heading { position: absolute; top: 7px; left: 8px; right: 8px; width: auto; }
.qimen-palace .qimen-deity { position: absolute; top: 27px; left: 9px; }
.qimen-palace .qimen-star { margin-top: 18px; }
.qimen-palace .qimen-plates { padding-bottom: 5px; }
.bazhai-board { max-width: 600px; margin: 0 auto; border: 1px solid #d9d9d9; padding: 0 30px 6px; }
.bazhai-info { margin: 0 -30px 30px; }
.bazhai-info-row { min-height: 36px; display: grid; grid-template-columns: 120px minmax(0, 1fr) 100px minmax(0, 1fr); border-bottom: 1px solid #dedede; }
.bazhai-info-row:first-child { grid-template-columns: 120px 1fr; }
.bazhai-info-row > * { min-width: 0; padding: 8px 6px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 400; }
.bazhai-info-row > * + * { border-left: 1px solid #dedede; }
.bazhai-info-row > span { color: #c68b50; }
.bazhai-grid { max-width: 540px; margin: 0 auto; border-color: #777; background: #777; }
.bazhai-palace { aspect-ratio: 1; min-width: 0; padding: 10px 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 0; border-radius: 0; background: white; color: #161616; }
.bazhai-palace.auspicious { background: #faf8d4; }
.bazhai-palace[aria-pressed="true"] { position: relative; z-index: 1; box-shadow: inset 0 0 0 3px #c88952; }
.bazhai-palace > span { font-size: 17px; }
.bazhai-palace small { color: #999; font-size: 15px; }
.bazhai-palace .bazhai-auspice { color: #1451e8; font-size: 16px; font-weight: 500; }
.bazhai-palace.auspicious .bazhai-auspice { color: #f02d25; }
.bazhai-detail { min-height: 28px; padding-top: 8px; color: #718181; text-align: center; font-size: 13px; }
.zeri-tester { margin: 0 0 8px; padding: 8px 12px; color: #596a6b; background: #f5f6f6; font-size: 13px; }
.result-owner { margin: -4px 0 14px; color: #697879; font-size: 13px; }
.zeri-summary { margin: 0 0 10px; padding: 4px 0 12px; border-bottom: 1px solid #e6e6e6; }
.zeri-summary h3 { margin: 0 0 12px; color: #d29a57; font-size: 18px; }
.zeri-owner { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 12px; background: #fff1e8; color: #e4784c; font-size: 12px; font-weight: 500; }
.zeri-range, .zeri-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; color: #46585a; font-size: 13px; }
.zeri-tester-inline { margin-left: auto; color: #728080; }
.zeri-filters span { min-width: 100px; flex: 1; padding: 7px 12px; border-radius: 18px; background: #f1f2f2; text-align: center; }
.zeri-filters span:first-child { background: #10b9ad; color: #fff; }
.zeri-days { display: grid; gap: 8px; }
.zeri-day { position: relative; min-height: 126px; display: grid; grid-template-columns: minmax(125px, 28%) 1fr; align-items: center; background: #fff; border: 1px solid #ececec; border-radius: 5px; }
.zeri-day-tag { position: absolute; top: 0; left: 0; padding: 3px 11px; color: #fff; font-size: 11px; border-radius: 0 0 8px 0; }
.zeri-day-tag.top { background: #f2aa00; }
.zeri-day-tag.middle { background: #db4855; }
.zeri-day-tag.normal { background: #d4a653; }
.zeri-date { min-height: 100%; display: grid; align-content: center; justify-items: center; gap: 3px; border-right: 1px solid #e5e5e5; color: #243c53; }
.zeri-date strong { font-size: 32px; line-height: 1.2; }
.zeri-date span { font-size: 14px; }
.zeri-day-info { min-width: 0; padding: 19px 16px 12px; display: grid; gap: 6px; color: #23384c; }
.zeri-day-info > strong { font-size: 14px; }
.zeri-day-info > span { font-size: 13px; }
.zeri-day-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; color: #9aa3ae; font-size: 12px; }
.zeri-day-info small { color: #7c898f; line-height: 1.5; }
.zeri-empty { padding: 28px 12px; color: #738181; text-align: center; }

@media (max-width: 700px) {
  .main { width: min(100% - 24px, 520px); margin-top: 20px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .module-button { min-height: 104px; padding: 13px; }
  .form-panel, .result-panel, .history-panel, .pending-panel { padding: 15px; }
  .form-grid { grid-template-columns: 1fr; }
  .palace-button { padding: 7px 5px; }
  .star-number { top: 7px; font-size: 18px; }
  .mountain-star { left: 7px; }
  .facing-star { right: 7px; }
  .palace-center strong { font-size: 30px; }
  .palace-footer { gap: 2px; font-size: 9px; }
  .qimen-palace { padding: 6px 3px; }
  .qimen-palace-heading { font-size: 9px; }
  .qimen-deity { font-size: 9px; }
  .qimen-star { font-size: 12px; }
  .qimen-plates { font-size: 14px; }
  .qimen-center-mark { font-size: 10px; }
  .bazhai-board { padding: 0 12px 6px; }
  .bazhai-info { margin: 0 -12px 20px; }
  .bazhai-info-row { grid-template-columns: 82px minmax(0, 1fr) 68px minmax(0, 1fr); }
  .bazhai-info-row:first-child { grid-template-columns: 82px 1fr; }
  .bazhai-info-row > * { padding: 7px 3px; font-size: 11px; }
  .bazhai-palace { gap: 4px; }
  .bazhai-palace .bazhai-auspice { font-size: 12px; }
  .bazhai-palace > span, .bazhai-palace small { font-size: 11px; }
  .zeri-day { grid-template-columns: 82px minmax(0, 1fr); min-height: 116px; }
  .zeri-date strong { font-size: 26px; }
  .zeri-date span { font-size: 10px; }
  .zeri-day-info { padding: 19px 9px 10px; }
  .zeri-day-facts { grid-template-columns: 1fr; font-size: 11px; }
  .zeri-tester-inline { flex-basis: 100%; margin-left: 0; }
  .zeri-filters span { min-width: calc(50% - 8px); }
}

@media (max-width: 360px) {
  .topbar { padding: 0 12px; }
  .module-grid { grid-template-columns: 1fr; }
}