:root {
  --blue: #4058D6;
  --blue-hover: #3449B8;
  --soft-blue: #EEF1FF;
  --bg: #F3F5F8;
  --card: #FFFFFF;
  --border: #DCE2EA;
  --text: #253044;
  --muted: #718096;
  --scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  font-size: 16px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hidden {
  display: none !important;
}

.viewport-stage {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.app-shell {
  width: 560px;
  min-height: 700px;
  transform: scale(var(--scale));
  transform-origin: top center;
}

.view {
  width: 560px;
  padding: 20px 0;
}

#panView {
  background: #F0F2F5;
  padding-top: 15px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.announcement-card {
  margin: 0 20px 8px;
  padding: 0 18px 14px;
}

.announcement-head {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement-head .card-title {
  height: auto;
}

.announcement-refresh {
  width: 82px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: var(--soft-blue);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.announcement-refresh:hover {
  background: #DCEAFF;
}

.announcement-refresh:disabled {
  opacity: .62;
  cursor: wait;
}

.announcement-status {
  min-height: 22px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.announcement-body {
  height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 6px;
  background: #F7F9FC;
  color: var(--text);
  padding: 12px;
  font-size: 13px;
  line-height: 1.65;
  scrollbar-color: #CBD3DF transparent;
}

.main-card {
  margin: 0 20px;
  padding: 0 18px 18px;
}

.card-title {
  height: 54px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: 74px 1fr 1fr 70px;
  column-gap: 8px;
  row-gap: 12px;
  align-items: center;
}

.form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.field-span {
  grid-column: 2 / 5;
}

.date-field {
  grid-column: 2 / 4;
}

.input {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #FFFFFF;
  color: var(--text);
  padding: 0 11px;
  outline: none;
}

.input:focus {
  border-color: #AAB6FF;
  box-shadow: 0 0 0 2px rgba(64, 88, 214, .10);
}

.button-input {
  text-align: left;
}

.button {
  border-radius: 5px;
  border: 0;
  font-weight: 700;
}

.soft-button {
  height: 34px;
  background: var(--soft-blue);
  color: var(--blue);
}

.soft-button:hover {
  background: #DCEAFF;
}

.segment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.segment-button {
  height: 32px;
  border-radius: 5px;
  border: 1px solid #D8DEE8;
  background: #FFFFFF;
  color: #465166;
  font-size: 13px;
  font-weight: 700;
}

.segment-button:hover {
  background: #F2F5FA;
}

.segment-button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #FFFFFF;
}

.chou-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--blue);
  font-size: 12px;
}

.outline-small {
  height: 30px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #526078;
  border: 1px solid var(--border);
}

.error-line {
  min-height: 22px;
  color: #EF4444;
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
}

.main-actions {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 8px;
  margin-top: 2px;
}

.outline-button {
  height: 44px;
  background: #FFFFFF;
  color: #526078;
  border: 1px solid var(--border);
  font-size: 14px;
}

.primary-button {
  height: 44px;
  background: var(--blue);
  color: #FFFFFF;
  font-size: 15px;
}

.primary-button:hover,
.primary-small:hover {
  background: var(--blue-hover);
}

.primary-button:disabled {
  opacity: .62;
  cursor: wait;
}

.header-card {
  margin: 0 15px 5px;
  padding: 12px;
}

.header-table {
  background: #E2E8F0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
}

.table-label,
.table-cell,
.table-input,
.table-button {
  min-height: 34px;
  border: 0;
  background: #FFFFFF;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px 4px;
  font-size: 13px;
  white-space: pre-line;
}

.table-label {
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
}

.table-input {
  width: 100%;
  outline: none;
}

.table-button {
  cursor: pointer;
}

.span-4 {
  grid-column: span 4;
}

.multiline {
  font-size: 14px;
  line-height: 1.05;
  font-weight: 600;
}

.control-row {
  margin: 2px 15px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.control-button {
  height: 32px;
  min-width: 50px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.control-button.wide {
  min-width: 60px;
}

.control-button.longer {
  min-width: 78px;
}

.slate {
  background: #64748B;
}

.slate:hover {
  background: #475569;
}

.green {
  background: #10B981;
}

.green:hover {
  background: #059669;
}

.blue {
  background: #3B82F6;
}

.blue:hover {
  background: #2563EB;
}

.purple {
  background: #8B5CF6;
}

.purple:hover {
  background: #7C3AED;
}

.ju-label {
  margin-left: auto;
  color: #475569;
  font-size: 14px;
  white-space: nowrap;
}

.time-editor {
  margin: 4px 15px;
  min-height: 70px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-field {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}

.number-stepper {
  width: 68px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 18px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  background: #FFFFFF;
}

.number-stepper.year-stepper {
  width: 82px;
}

.number-stepper input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  border-radius: 0;
  outline: none;
  text-align: center;
  font-weight: 700;
  background: transparent;
  color: var(--text);
  padding: 0 2px;
}

.stepper-buttons {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid #E2E8F0;
}

.stepper-button {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #F8FAFC;
  color: #526078;
  font-size: 8px;
  line-height: 1;
  touch-action: manipulation;
}

.stepper-button:first-child {
  border-bottom: 1px solid #E2E8F0;
}

.stepper-button:active {
  background: #E8EDF4;
}

.time-actions {
  display: grid;
  gap: 3px;
  margin-left: 4px;
}

.mini-button {
  width: 64px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.time-error {
  color: #EF4444;
  font-size: 11px;
}

.pan-card {
  margin: 2px 8px 5px;
  padding: 12px 11px;
}

/* 九宫矩形 */
.palace-grid {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: #CFD5DC;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.palace {
  position: relative;
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  background: #FFFFFF;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.palace:hover {
  background: #FCFCFD;
}

.palace-wang {
  position: absolute;
  left: 3%;
  top: 3%;
  color: #9E9E9E;
  font-size: 5.2cqw;
}

.palace-tags {
  position: absolute;
  right: 5%;
  top: 3%;
  color: #9E9E9E;
  font-size: 5.2cqw;
  white-space: pre-line;
  text-align: right;
}

/* 宫内五列 */
.palace-center {
  position: absolute;
  left: 50%;
  top: 56%;
  display: grid;
  grid-template-columns: .5em 1em 1em 2em .5em;
  grid-template-rows: repeat(4, 1.30em);
  column-gap: 0;
  row-gap: .04em;
  width: 5em;
  transform: translate(-50%, -50%);
  align-items: center;
  color: #111111;
  font-size: 11.2cqw;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.palace.mingfa .palace-center {
  grid-template-rows: repeat(3, 1.52em);
  row-gap: .08em;
}

.palace-cell {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  color: #111111;
  font: inherit;
  line-height: 1;
  white-space: nowrap;
}

.palace-cell.col0 {
  justify-content: flex-end;
  overflow: visible;
}

.palace-cell.col1 {
  justify-content: flex-start;
}

.palace-cell.col2 {
  justify-content: flex-start;
}

.palace-cell.col3 {
  justify-content: flex-start;
}

.palace-cell.col4 {
  justify-content: flex-start;
  overflow: visible;
}

.status-wang-stem {
  color: #009688;
}

.status-wang-other {
  color: #4CAF50;
}

.status-constraint {
  color: #FF9500;
}

.status-tomb {
  color: #B8860B;
}

.status-punish {
  color: #FF5252;
}

.status-both {
  color: #BA68C8;
}

.legend-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.legend {
  border-radius: 4px;
  color: #FFFFFF;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
}

.teal {
  background: #009688;
}

.green-bg {
  background: #4CAF50;
}

.orange {
  background: #FF9500;
}

.ochre {
  background: #B8860B;
}

.red {
  background: #FF5252;
}

.violet {
  background: #BA68C8;
}

.analysis-card {
  margin: 5px 15px 15px;
  padding: 12px 15px 15px;
}

.analysis-title {
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 7px;
}

.analysis-content {
  margin: 0;
  color: #333333;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .28);
  z-index: 900;
}

dialog.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  z-index: 1000;
}

dialog.modal::backdrop {
  background: rgba(15, 23, 42, .28);
}

.modal-card {
  width: 480px;
  max-height: 88vh;
  overflow: auto;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  color: var(--text);
}

.modal-card h2 {
  margin: 0 0 15px;
  text-align: center;
  font-size: 17px;
}

.date-modal-card {
  width: 500px;
}

.datetime-fields {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.datetime-fields label {
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.datetime-fields .number-stepper {
  width: 76px;
  height: 44px;
}

.datetime-fields .number-stepper.year-stepper {
  width: 90px;
}

.datetime-fields .number-stepper input {
  height: 42px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.cancel-button {
  height: 34px;
  min-width: 90px;
  padding: 0 16px;
  background: #64748B;
  color: #FFFFFF;
}

.primary-small {
  height: 34px;
  min-width: 90px;
  background: var(--blue);
  color: #FFFFFF;
}

.picker-card {
  width: 360px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 15px;
}

.picker-option {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #FFFFFF;
  color: var(--text);
  font-weight: 700;
}

.picker-option:hover {
  background: var(--soft-blue);
  color: var(--blue);
}

.chou-card {
  width: 480px;
}

.chou-card p {
  margin: -8px 0 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.chou-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-bottom: 15px;
}

.chou-button {
  height: 40px;
  border: 0;
  border-radius: 5px;
  background: #64748B;
  color: #FFFFFF;
  font-weight: 700;
}

.chou-button:hover {
  background: #475569;
}

.records-card {
  width: 440px;
  min-height: 300px;
}

.records-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.records-head h2 {
  margin-left: auto;
}

.icon-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  font-size: 24px;
  color: var(--muted);
}

.records-list {
  display: grid;
  gap: 8px;
}

.record-item {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px;
  display: grid;
  gap: 7px;
}

.record-title {
  font-size: 13px;
  font-weight: 700;
}

.record-meta {
  font-size: 12px;
  color: var(--muted);
}

.record-actions {
  display: flex;
  gap: 7px;
}

.record-actions button {
  height: 28px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.record-load {
  background: #3B82F6;
}

.record-delete {
  background: #EF4444;
}

.records-empty {
  padding: 50px 0;
  text-align: center;
  color: var(--muted);
}

.records-note {
  margin-top: 12px;
  color: #94A3B8;
  font-size: 11px;
  text-align: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, .88);
  color: #FFFFFF;
  border-radius: 7px;
  padding: 9px 16px;
  font-size: 13px;
  z-index: 1200;
}

@media (max-width: 600px) {
  dialog.modal {
    width: 100%;
  }

  .modal-card {
    width: calc(100vw - 24px);
    max-width: 500px;
    transform: none;
  }
}

/* 十二长生 */
.palace-cell.stem-cell {
  position: relative;
  overflow: visible;
}

.palace-cell.stem-cell > .changsheng {
  position: absolute;
  left: .58em;
  top: -.62em;
  z-index: 3;
  width: max-content;
  color: #64748B;
  font-size: .46em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* changsheng-position-start */

/* ?????? */
.palace-cell.stem-cell {
  position: relative !important;
  overflow: visible !important;
}

.palace-cell.stem-cell > .changsheng {
  position: absolute !important;
  left: auto !important;
  right: calc(100% + .12em) !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: 3 !important;
  width: max-content !important;
  color: #64748B !important;
  font-size: .62em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

/* ??????????? */
.palace-cell.col0 {
  position: relative;
  z-index: 4;
}

/* changsheng-position-end */

@media (max-width: 600px) {
  .date-modal-card {
    padding: 16px 10px;
  }

  .datetime-fields {
    gap: 4px;
  }

  .datetime-fields .number-stepper {
    width: 64px;
  }

  .datetime-fields .number-stepper.year-stepper {
    width: 80px;
  }
}