:root {
  color-scheme: dark;
  --bg: #15100b;
  --panel: rgba(47, 35, 23, 0.86);
  --panel-2: rgba(31, 25, 20, 0.92);
  --line: #745a32;
  --gold: #d8ad62;
  --text: #f5ead8;
  --muted: #b9a98f;
  --red: #d74343;
  --jade: #6aa98e;
}

* { box-sizing: border-box; }
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 0%, rgba(216, 173, 98, .18), transparent 28rem),
    linear-gradient(135deg, #120d08 0%, #21180f 48%, #100d0a 100%);
}

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 24px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 600;
}
h2 { font-size: 24px; font-weight: 600; }
h3 { color: var(--gold); font-size: 18px; }

.tabs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(21, 16, 11, .65);
}
.tab {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.tab.active { color: #fff; background: rgba(216, 173, 98, .18); }

.view { display: none; }
.view.active { display: block; }

.panel, .result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .32);
}
.panel {
  padding: 28px;
  margin-bottom: 28px;
}
.panel.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.bazi-intro {
  text-align: center;
  padding: 18px 0 34px;
}
.bazi-intro h2 {
  margin-bottom: 18px;
  color: var(--gold);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 500;
}
.bazi-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}
.bazi-panel {
  box-shadow: 0 0 18px rgba(245, 234, 216, .32), 0 22px 64px rgba(0, 0, 0, .32);
}
.bazi-consent {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1px solid rgba(116, 90, 50, .72);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(21, 16, 11, .28);
  line-height: 1.8;
  text-align: center;
}
.bazi-consent span {
  display: block;
}
.bazi-submit {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 180px;
}
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bazi-history h3,
.liuren-history h3 {
  margin: 0;
}
.history-toggle {
  min-width: 62px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(216, 173, 98, .48);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(61, 48, 34, .56);
  font: inherit;
  cursor: pointer;
}
.history-list {
  display: grid;
  gap: 10px;
}
.history-list[hidden] {
  display: none;
}
.history-item {
  display: grid;
  grid-template-columns: 1fr 38px;
  align-items: stretch;
  border: 1px solid rgba(116, 90, 50, .72);
  border-radius: 8px;
  background: rgba(61, 48, 34, .56);
  overflow: hidden;
}
.history-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  color: var(--gold);
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-question {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-time {
  justify-self: end;
  color: rgba(232, 206, 158, .86);
  font-size: .92em;
  white-space: nowrap;
}
.history-delete {
  width: 38px;
  border: 0;
  border-left: 1px solid rgba(116, 90, 50, .58);
  color: #ffaaa2;
  background: rgba(150, 43, 38, .12);
  font: 700 24px/1 system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.history-item:hover .history-delete,
.history-item:focus-within .history-delete {
  opacity: 1;
  transform: translateX(0);
}
.history-delete:hover {
  background: rgba(215, 67, 67, .28);
}
.luck-axis-card {
  overflow: hidden;
}
.luck-axis {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  overflow-x: auto;
  padding: 76px 16px 76px 58px;
}
.luck-axis-line {
  position: absolute;
  inset: 52px 16px 52px 18px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 10px;
  align-items: center;
  color: rgba(232, 206, 158, .78);
  font-size: 13px;
}
.luck-axis-line span {
  width: 28px;
  text-align: center;
}
.luck-axis-line span:first-child {
  grid-column: 1;
  grid-row: 1;
}
.luck-axis-line span:last-child {
  grid-column: 1;
  grid-row: 3;
}
.luck-axis-line i {
  grid-column: 2;
  grid-row: 2;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 173, 98, .08), rgba(216, 173, 98, .72), rgba(216, 173, 98, .08));
}
.luck-axis-items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(58px, 1fr));
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  min-width: 680px;
}
.luck-axis-item {
  display: grid;
  gap: 3px;
  justify-self: center;
  width: 82px;
  min-height: 46px;
  padding: 6px 7px;
  border: 1px solid rgba(116, 90, 50, .76);
  border-radius: 8px;
  background: rgba(61, 48, 34, .74);
  align-self: center;
}
.luck-axis-item.is-good {
  transform: translateY(-70px);
  border-color: rgba(106, 184, 129, .72);
}
.luck-axis-item.is-bad {
  transform: translateY(70px);
  border-color: rgba(215, 88, 79, .7);
}
.luck-axis-item.is-current {
  position: relative;
  z-index: 2;
  border-color: rgba(255, 196, 93, .95);
  background: linear-gradient(180deg, rgba(216, 173, 98, .26), rgba(61, 48, 34, .86));
  box-shadow: 0 0 0 1px rgba(255, 211, 124, .28), 0 0 24px rgba(255, 190, 70, .32);
  animation: currentLuckPulse 2.4s ease-in-out infinite;
}
.luck-axis-item.is-current::after {
  content: "当前";
  position: absolute;
  top: -10px;
  right: -8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 196, 93, .95);
  color: #2b1b0d;
  font-size: 10px;
  font-weight: 700;
}
.luck-axis-item b {
  color: var(--accent);
  font-size: 13px;
}
.luck-axis-item small,
.luck-axis-item em {
  color: var(--muted);
  font-style: normal;
  font-size: 9.5px;
  line-height: 1.35;
}
button:disabled {
  cursor: not-allowed;
  opacity: .62;
}
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 7, 5, .68);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.loading-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.loading-overlay[hidden] {
  display: none;
}
.loading-dialog {
  width: min(520px, 92vw);
  max-height: min(680px, 86vh);
  overflow: hidden;
  border: 1px solid rgba(216, 173, 98, .58);
  border-radius: 8px;
  background: rgba(18, 13, 9, .96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58), 0 0 34px rgba(216, 173, 98, .18);
}
.loading-dialog .bazi-loading {
  min-height: 360px;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.is-loading-modal-open {
  overflow: hidden;
}
.bazi-loading {
  display: grid;
  justify-items: center;
  gap: 18px;
  min-height: 360px;
  align-content: center;
}
.bagua-loader {
  position: relative;
  width: 220px;
  height: 220px;
}
.trigram-ring {
  position: absolute;
  inset: 0;
  animation: spin 10s linear infinite;
}
.trigram-ring span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  transform-origin: 50% 50%;
}
.trigram-ring span:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg) translateY(-96px) rotate(180deg); }
.trigram-ring span:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg) translateY(-96px) rotate(180deg); }
.taiji {
  position: absolute;
  inset: 42px;
  overflow: hidden;
  border: 2px solid rgba(216, 173, 98, .86);
  border-radius: 50%;
  background: linear-gradient(90deg, #d8ad62 0 50%, #100d0a 50% 100%);
  box-shadow: 0 0 30px rgba(216, 173, 98, .42);
  animation: spin 4s linear infinite reverse;
}
.taiji::before,
.taiji::after {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 50%;
  content: "";
  border-radius: 50%;
}
.taiji::before {
  top: 0;
  background:
    radial-gradient(circle, #d8ad62 0 10%, #100d0a 11% 100%);
}
.taiji::after {
  bottom: 0;
  background:
    radial-gradient(circle, #100d0a 0 10%, #d8ad62 11% 100%);
}
.taiji i {
  display: none;
}
.loading-dots {
  display: flex;
  gap: 8px;
}
.loading-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .35;
  animation: pulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }
.loading-dots span:nth-child(4) { animation-delay: .45s; }
.bazi-chart-card {
  text-align: center;
}
.bazi-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: min(420px, 100%);
  margin: 22px auto 14px;
}
.bazi-pillar {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(116, 90, 50, .8);
  border-radius: 8px;
  background: rgba(61, 48, 34, .78);
}
.bazi-pillar.day-master {
  background: rgba(215, 67, 67, .82);
}
.bazi-pillar small,
.bazi-pillar span,
.bazi-pillar em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.bazi-pillar strong {
  color: var(--text);
  font-size: 28px;
  font-weight: 500;
}
.bazi-tags {
  justify-content: center;
}
.element-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
}
.element-radar svg {
  width: 170px;
  height: 170px;
}
.element-radar text {
  fill: var(--gold);
  font-size: 12px;
}
.element-bars {
  display: grid;
  gap: 10px;
}
.element-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid rgba(116, 90, 50, .72);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(61, 48, 34, .54);
}
.element-bar i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold);
}
.element-bar b,
.element-bar strong {
  color: var(--text);
}
.element-bar span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.bazi-summary {
  margin: 16px 0 0;
  color: var(--muted);
}
.luck-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.luck-list span {
  display: grid;
  min-width: 92px;
  padding: 10px;
  border: 1px solid rgba(216, 173, 98, .42);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(216, 173, 98, .08);
}
.luck-list small {
  margin-top: 4px;
  color: var(--muted);
}

.liuren-intro {
  text-align: center;
  padding: 18px 0 34px;
}
.liuren-intro h2 {
  margin-bottom: 18px;
  color: var(--gold);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 500;
}
.liuren-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}
.liuren-query-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(76, 111, 176, .18), transparent 28rem),
    linear-gradient(180deg, rgba(30, 26, 38, .9), rgba(24, 18, 15, .9));
  box-shadow: 0 0 18px rgba(116, 139, 202, .28), 0 22px 64px rgba(0, 0, 0, .36);
}
.liuren-query-form {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.cosmic-liuren-disc {
  --hour-angle: 120deg;
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  isolation: isolate;
  border: 1px solid rgba(126, 145, 204, .36);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(95, 116, 171, .38) 0 14%, rgba(20, 18, 32, .78) 36%, rgba(10, 10, 18, .42) 72%, transparent 100%),
    conic-gradient(from 40deg, rgba(64, 91, 151, .2), rgba(113, 72, 138, .18), rgba(40, 116, 132, .16), rgba(64, 91, 151, .2));
  box-shadow: inset 0 0 60px rgba(97, 128, 194, .22), 0 0 42px rgba(70, 101, 168, .22);
  mask-image: radial-gradient(circle, #000 0 74%, rgba(0, 0, 0, .78) 84%, transparent 100%);
}
.star-field,
.star-field::before,
.star-field::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 22%, rgba(196, 219, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 16%, rgba(125, 214, 226, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 72%, rgba(202, 177, 255, .78) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 80%, rgba(196, 219, 255, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 58%, rgba(125, 214, 226, .62) 0 1px, transparent 2px);
  animation: starPulse 3.2s ease-in-out infinite;
}
.star-field::before {
  transform: rotate(34deg) scale(.72);
  opacity: .72;
  animation-delay: .7s;
}
.star-field::after {
  transform: rotate(-18deg) scale(1.18);
  opacity: .45;
  animation-delay: 1.4s;
}
.liuren-square,
.liuren-orbit,
.dipper {
  position: absolute;
  z-index: 1;
}
.liuren-square {
  inset: 8%;
  border: 1px solid rgba(126, 145, 204, .18);
  box-shadow: inset 0 0 42px rgba(126, 145, 204, .1), 0 0 20px rgba(126, 145, 204, .08);
}
.liuren-square::before,
.liuren-square::after {
  position: absolute;
  inset: 14%;
  content: "";
  border: 1px solid rgba(126, 145, 204, .14);
  transform: rotate(45deg);
}
.liuren-square::after {
  inset: 30%;
  border-color: rgba(126, 145, 204, .16);
  transform: none;
}
.liuren-square span,
.liuren-orbit span {
  position: absolute;
  color: rgba(205, 223, 255, .82);
  text-shadow: 0 0 10px rgba(126, 201, 226, .45);
  font-size: 15px;
}
.liuren-square span.active-hour {
  color: #f4fbff;
  text-shadow: 0 0 8px rgba(196, 231, 255, .95), 0 0 18px rgba(91, 194, 234, .85), 0 0 30px rgba(138, 116, 255, .55);
  animation: hourGlow 2.4s ease-in-out infinite;
}
.liuren-square span:nth-child(1) { left: 48%; bottom: 2%; }
.liuren-square span:nth-child(2) { left: 24%; bottom: 6%; }
.liuren-square span:nth-child(3) { left: 4%; bottom: 25%; }
.liuren-square span:nth-child(4) { left: 2%; top: 48%; }
.liuren-square span:nth-child(5) { left: 5%; top: 24%; }
.liuren-square span:nth-child(6) { left: 24%; top: 5%; }
.liuren-square span:nth-child(7) { left: 48%; top: 2%; }
.liuren-square span:nth-child(8) { right: 24%; top: 5%; }
.liuren-square span:nth-child(9) { right: 5%; top: 24%; }
.liuren-square span:nth-child(10) { right: 2%; top: 48%; }
.liuren-square span:nth-child(11) { right: 4%; bottom: 25%; }
.liuren-square span:nth-child(12) { right: 24%; bottom: 6%; }
.liuren-orbit {
  inset: 15%;
  border: 1px solid rgba(126, 201, 226, .42);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(70, 178, 205, .16), inset 0 0 28px rgba(97, 128, 194, .16);
  animation: slowDrift 96s linear infinite;
}
.liuren-orbit::before,
.liuren-orbit::after {
  position: absolute;
  inset: 20%;
  content: "";
  border: 1px solid rgba(126, 201, 226, .18);
  border-radius: 50%;
}
.liuren-orbit::after {
  inset: 34%;
  border-style: dashed;
}
.liuren-orbit span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transform: translate(-50%, -50%) rotate(var(--yuejiang-angle, 0deg));
  transform-origin: 50% 50%;
  line-height: 1;
  font-family: "LiSu", "隶书", "SimLi", "FZLiShu-S01", "方正隶书简体", "STLiti", "华文隶书", "KaiTi", serif;
  font-size: 16px;
  letter-spacing: 0;
}
.liuren-orbit span b {
  display: block;
  font: inherit;
  font-weight: 400;
}
.liuren-orbit span.active-yuejiang {
  color: #f5fbff;
  padding: 5px 3px;
  border-radius: 999px;
  background: rgba(88, 151, 224, .2);
  box-shadow: 0 0 16px rgba(111, 204, 238, .36), inset 0 0 12px rgba(218, 240, 255, .12);
  font-weight: 700;
  text-shadow: 0 0 9px rgba(230, 244, 255, .98), 0 0 22px rgba(105, 205, 239, .9), 0 0 38px rgba(135, 118, 255, .6);
  filter: brightness(1.18);
  animation: hourGlow 2.8s ease-in-out infinite;
}
.liuren-orbit span:nth-child(1) { --yuejiang-angle: 0deg; left: 50%; top: 88%; }
.liuren-orbit span:nth-child(2) { --yuejiang-angle: 30deg; left: 31%; top: 84%; }
.liuren-orbit span:nth-child(3) { --yuejiang-angle: 60deg; left: 16%; top: 69%; }
.liuren-orbit span:nth-child(4) { --yuejiang-angle: 90deg; left: 12%; top: 50%; }
.liuren-orbit span:nth-child(5) { --yuejiang-angle: 120deg; left: 16%; top: 31%; }
.liuren-orbit span:nth-child(6) { --yuejiang-angle: 150deg; left: 31%; top: 16%; }
.liuren-orbit span:nth-child(7) { --yuejiang-angle: 180deg; left: 50%; top: 12%; }
.liuren-orbit span:nth-child(8) { --yuejiang-angle: -150deg; left: 69%; top: 16%; }
.liuren-orbit span:nth-child(9) { --yuejiang-angle: -120deg; left: 84%; top: 31%; }
.liuren-orbit span:nth-child(10) { --yuejiang-angle: -90deg; left: 88%; top: 50%; }
.liuren-orbit span:nth-child(11) { --yuejiang-angle: -60deg; left: 84%; top: 69%; }
.liuren-orbit span:nth-child(12) { --yuejiang-angle: -30deg; left: 69%; top: 84%; }
.dipper {
  left: 50%;
  top: 50%;
  width: 128px;
  height: 198px;
  transform: translate(-50%, -50%) rotate(var(--hour-angle));
  transform-origin: 50% 50%;
  transition: transform .8s ease;
}
.dipper::before {
  display: none;
}
.dipper i {
  position: absolute;
  width: var(--star-core, 5px);
  height: var(--star-core, 5px);
  margin-left: calc(var(--star-core, 5px) / -2);
  margin-top: calc(var(--star-core, 5px) / -2);
  border-radius: 53% 47% 58% 42%;
  background:
    radial-gradient(circle at 42% 38%, #fff 0 18%, #dbeaff 30%, rgba(122, 177, 255, .72) 52%, rgba(122, 177, 255, .08) 78%, transparent 100%);
  opacity: var(--star-opacity, .9);
  box-shadow:
    0 0 calc(var(--star-glow, 12px) * .45) rgba(245, 250, 255, .82),
    0 0 var(--star-glow, 12px) rgba(126, 178, 255, var(--star-glow-alpha, .62)),
    1px -1px 2px rgba(255, 255, 255, .42);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dipper i::before,
.dipper i::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  pointer-events: none;
}
.dipper i::before {
  width: var(--star-halo, 22px);
  height: var(--star-halo, 22px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 235, 255, .35) 0 8%, rgba(117, 174, 255, .18) 28%, transparent 68%);
  opacity: .7;
}
.dipper i::after {
  width: var(--star-flare, 34px);
  height: var(--star-flare, 22px);
  transform: translate(-50%, -50%) rotate(var(--ray-rotate, -12deg)) scale(.72);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(248, 252, 255, .62) 0 7%, rgba(157, 203, 255, .34) 22%, rgba(92, 153, 255, .12) 46%, transparent 74%);
  opacity: 0;
  filter: blur(.65px);
  transition: opacity .2s ease, transform .24s ease;
}
.dipper i.is-twinkling {
  filter: brightness(1.85);
  transform: scale(1.14);
  box-shadow:
    0 0 8px rgba(250, 253, 255, .94),
    0 0 22px rgba(132, 187, 255, .86),
    0 0 34px rgba(100, 149, 255, .34);
}
.dipper i.is-twinkling::before {
  opacity: 1;
}
.dipper i.is-twinkling::after {
  opacity: .95;
  transform: translate(-50%, -50%) rotate(var(--ray-rotate, -12deg)) scale(1);
}
.dipper i:nth-child(1) { --star-core: 3px; --star-halo: 18px; --star-flare: 30px; --star-glow: 10px; --ray-rotate: 8deg; left: 37px; top: 9px; opacity: .82; }
.dipper i:nth-child(2) { --star-core: 4px; --star-halo: 20px; --star-flare: 32px; --star-glow: 12px; --ray-rotate: -8deg; left: 86px; top: 9px; opacity: .9; }
.dipper i:nth-child(3) { --star-core: 4px; --star-halo: 22px; --star-flare: 34px; --star-glow: 14px; --ray-rotate: 16deg; left: 93px; top: 71px; opacity: .95; }
.dipper i:nth-child(4) { --star-core: 2.5px; --star-halo: 14px; --star-flare: 26px; --star-glow: 8px; --ray-rotate: -18deg; left: 60px; top: 90px; opacity: .78; }
.dipper i:nth-child(5) { --star-core: 3px; --star-halo: 18px; --star-flare: 30px; --star-glow: 10px; --ray-rotate: 10deg; left: 47px; top: 123px; opacity: .85; }
.dipper i:nth-child(6) { --star-core: 3px; --star-halo: 18px; --star-flare: 30px; --star-glow: 10px; --ray-rotate: -12deg; left: 35px; top: 157px; opacity: .86; }
.dipper i:nth-child(7) { --star-core: 6px; --star-halo: 36px; --star-flare: 42px; --star-glow: 24px; --star-glow-alpha: .9; --ray-rotate: -8deg; left: 32px; top: 183px; opacity: 1; }
.liuren-question {
  width: min(720px, 100%);
  color: var(--gold);
  font-size: 18px;
}
textarea {
  width: 100%;
  min-height: 112px;
  margin-top: 10px;
  padding: 16px 18px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(31, 25, 20, .82);
  font: inherit;
  line-height: 1.7;
}
.liuren-submit {
  min-width: 180px;
}
.liuren-star-loader {
  position: relative;
  width: min(420px, 86vw);
  height: 300px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(91, 111, 166, .36) 0 24%, rgba(18, 20, 35, .62) 52%, rgba(18, 20, 35, .18) 70%, transparent 86%),
    radial-gradient(circle at 22% 28%, rgba(126, 201, 226, .26) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 24%, rgba(196, 219, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 82%, rgba(202, 177, 255, .62) 0 1px, transparent 2px);
  box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 58%, rgba(0, 0, 0, .7) 70%, transparent 94%);
  mask-image: radial-gradient(ellipse at center, #000 0 58%, rgba(0, 0, 0, .7) 70%, transparent 94%);
}
.liuren-loading.result-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.loading-dipper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  height: 198px;
  transform: translate(-50%, -50%) rotate(var(--hour-angle, 0deg)) scale(1.05);
  filter: drop-shadow(0 0 22px rgba(126, 178, 255, .28));
}
.loading-dipper::before {
  display: none;
}
.loading-dipper i {
  position: absolute;
  width: var(--star-core, 5px);
  height: var(--star-core, 5px);
  margin-left: calc(var(--star-core, 5px) / -2);
  margin-top: calc(var(--star-core, 5px) / -2);
  border-radius: 53% 47% 58% 42%;
  background: radial-gradient(circle at 42% 38%, #fff 0 18%, #dbeaff 30%, rgba(122, 177, 255, .72) 52%, rgba(122, 177, 255, .08) 78%, transparent 100%);
  box-shadow: 0 0 calc(var(--star-glow, 12px) * .45) rgba(245, 250, 255, .82), 0 0 var(--star-glow, 12px) rgba(126, 178, 255, var(--star-glow-alpha, .62));
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.loading-dipper i::before,
.loading-dipper i::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  pointer-events: none;
}
.loading-dipper i::before {
  width: var(--star-halo, 22px);
  height: var(--star-halo, 22px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 235, 255, .35) 0 8%, rgba(117, 174, 255, .18) 28%, transparent 68%);
  opacity: .7;
}
.loading-dipper i::after {
  width: var(--star-flare, 34px);
  height: var(--star-flare, 22px);
  transform: translate(-50%, -50%) rotate(var(--ray-rotate, -12deg)) scale(.72);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(248, 252, 255, .62) 0 7%, rgba(157, 203, 255, .34) 22%, rgba(92, 153, 255, .12) 46%, transparent 74%);
  opacity: 0;
  filter: blur(.65px);
  transition: opacity .2s ease, transform .24s ease;
}
.loading-dipper i.is-twinkling {
  filter: brightness(1.85);
  transform: scale(1.14);
  box-shadow: 0 0 8px rgba(250, 253, 255, .94), 0 0 22px rgba(132, 187, 255, .86), 0 0 34px rgba(100, 149, 255, .34);
}
.loading-dipper i.is-twinkling::before { opacity: 1; }
.loading-dipper i.is-twinkling::after {
  opacity: .95;
  transform: translate(-50%, -50%) rotate(var(--ray-rotate, -12deg)) scale(1);
}
.loading-dipper i:nth-child(1) { --star-core: 3px; --star-halo: 18px; --star-flare: 30px; --star-glow: 10px; --ray-rotate: 8deg; left: 37px; top: 9px; opacity: .82; }
.loading-dipper i:nth-child(2) { --star-core: 4px; --star-halo: 20px; --star-flare: 32px; --star-glow: 12px; --ray-rotate: -8deg; left: 86px; top: 9px; opacity: .9; }
.loading-dipper i:nth-child(3) { --star-core: 4px; --star-halo: 22px; --star-flare: 34px; --star-glow: 14px; --ray-rotate: 16deg; left: 93px; top: 71px; opacity: .95; }
.loading-dipper i:nth-child(4) { --star-core: 2.5px; --star-halo: 14px; --star-flare: 26px; --star-glow: 8px; --ray-rotate: -18deg; left: 60px; top: 90px; opacity: .78; }
.loading-dipper i:nth-child(5) { --star-core: 3px; --star-halo: 18px; --star-flare: 30px; --star-glow: 10px; --ray-rotate: 10deg; left: 47px; top: 123px; opacity: .85; }
.loading-dipper i:nth-child(6) { --star-core: 3px; --star-halo: 18px; --star-flare: 30px; --star-glow: 10px; --ray-rotate: -12deg; left: 35px; top: 157px; opacity: .86; }
.loading-dipper i:nth-child(7) { --star-core: 6px; --star-halo: 36px; --star-flare: 42px; --star-glow: 24px; --star-glow-alpha: .9; --ray-rotate: -8deg; left: 32px; top: 183px; opacity: 1; }
.liuren-loading p {
  color: #bddfff;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@keyframes starPulse {
  0%, 100% { opacity: .45; filter: brightness(.85); }
  50% { opacity: 1; filter: brightness(1.4); }
}
@keyframes hourGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}
@keyframes slowDrift {
  to { transform: rotate(360deg); }
}

.birth-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 22px 14px;
  align-items: end;
}
.date-form {
  display: flex;
  gap: 14px;
  align-items: end;
}
label, legend {
  color: var(--muted);
  font-size: 15px;
}
select, input {
  width: 100%;
  height: 54px;
  margin-top: 8px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(61, 48, 34, .86);
  font: inherit;
}
.wide { grid-column: span 2; }

.segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 72px;
  margin: 0;
  padding: 20px 0 0;
  border: 0;
}
.segmented legend { position: absolute; transform: translateY(-20px); }
.segmented label {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(61, 48, 34, .65);
}
.segmented label:first-of-type { border-radius: 8px 0 0 8px; }
.segmented label:last-of-type { border-left: 0; border-radius: 0 8px 8px 0; }
.segmented input { display: none; }
.segmented label:has(input:checked) {
  color: var(--gold);
  background: rgba(216, 173, 98, .16);
}

button[type="submit"] {
  min-height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: var(--red);
  font: 700 18px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(215, 67, 67, .28);
}

.result {
  min-height: 80px;
}
.result-card {
  padding: 24px;
  margin-bottom: 22px;
}
.muted { color: var(--muted); }
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.liuren-summary-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.liuren-summary-grid .stat:nth-child(1),
.liuren-summary-grid .stat:nth-child(2) {
  grid-column: span 3;
}
.liuren-summary-grid .stat:nth-child(n+3) {
  grid-column: span 2;
}
.stat {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(116, 90, 50, .72);
  border-radius: 8px;
  background: rgba(21, 16, 11, .44);
}
.stat b { display: block; margin-bottom: 8px; color: var(--gold); font-size: 13px; font-weight: 500; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 7px 10px;
  border: 1px solid rgba(216, 173, 98, .45);
  border-radius: 999px;
  color: var(--text);
  background: rgba(216, 173, 98, .10);
}

.huangli-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}
.daybox {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(120, 42, 42, .18);
}
.daybox strong { color: var(--gold); font-size: 56px; }
.yi-ji {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.yi, .ji { border-left: 4px solid var(--jade); padding-left: 14px; }
.ji { border-color: var(--red); }

.almanac-hero {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  min-height: 250px;
  text-align: center;
}
.round-nav {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(216, 173, 98, .48);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(21, 16, 11, .28);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.hero-date {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.calendar-label {
  color: var(--gold);
  font-weight: 700;
}
.hero-date strong {
  color: var(--gold);
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 400;
}
.hero-date p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}
.hero-lunar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jianchu-badge {
  min-width: 34px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.jianchu-badge.good {
  color: #bff6dc;
  border: 1px solid rgba(35, 189, 130, .72);
  background: rgba(0, 125, 81, .22);
}
.jianchu-badge.bad {
  color: #ffaaa2;
  border: 1px solid rgba(215, 67, 67, .76);
  background: rgba(150, 43, 38, .24);
}
.today-mark {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  padding: 13px 18px;
  border: 2px solid rgba(215, 67, 67, .58);
  border-radius: 999px;
  color: #f3d4c6;
  background: rgba(117, 35, 31, .35);
}
.today-mark b {
  color: #ff9d90;
  font-size: 18px;
}
.today-mark em {
  padding: 5px 12px;
  border: 1px solid rgba(216, 173, 98, .42);
  border-radius: 999px;
  color: var(--gold);
  font-style: normal;
  font-size: 13px;
  background: rgba(216, 173, 98, .1);
}
.almanac-picker {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 48px;
}
.almanac-picker > div {
  flex: 0 1 auto;
}
.week-strip {
  display: grid;
  grid-template-columns: repeat(6, 112px);
  gap: 8px;
}
.day-chip {
  min-height: 76px;
  padding: 8px;
  border: 1px solid rgba(116, 90, 50, .8);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(61, 48, 34, .65);
  cursor: pointer;
  font: inherit;
}
.day-chip.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(216, 173, 98, .32);
}
.day-chip span,
.day-chip b,
.day-chip em {
  display: block;
}
.day-chip b {
  margin: 4px 0;
  color: var(--gold);
  font-weight: 500;
}
.day-chip em {
  color: #dc6565;
  font-style: normal;
  font-size: 13px;
}
.inline-date-form {
  display: grid;
  grid-template-columns: 216px 140px;
  flex: 0 0 auto;
  gap: 14px;
  align-items: end;
}
.inline-date-form button {
  min-height: 54px;
}
.almanac-yi-ji {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.good-box,
.bad-box {
  min-height: 166px;
  padding: 28px;
  border: 1px solid rgba(116, 90, 50, .78);
  border-radius: 8px;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .28);
}
.good-box {
  background: rgba(12, 38, 24, .76);
}
.bad-box {
  background: rgba(62, 22, 18, .78);
  box-shadow: 0 0 18px rgba(255, 184, 170, .28), 0 12px 38px rgba(0, 0, 0, .32);
}
.good-box h3,
.bad-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.good-box h3 span,
.bad-box h3 span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 146, 95, .55);
}
.bad-box h3 span {
  background: rgba(171, 48, 41, .58);
}
.pill.good {
  border-color: rgba(35, 189, 130, .72);
  color: #bff6dc;
  background: rgba(0, 125, 81, .18);
}
.pill.bad {
  border-color: rgba(215, 67, 67, .76);
  color: #ffaaa2;
  background: rgba(150, 43, 38, .24);
}
.hour-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hour-card {
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(116, 90, 50, .68);
  border-radius: 8px;
  background: rgba(61, 48, 34, .66);
}
.hour-card header {
  display: flex;
  justify-content: space-between;
  color: var(--gold);
}
.hour-card header span {
  padding: 2px 8px;
  border-radius: 999px;
  color: white;
  font-size: 12px;
}
.hour-card.lucky header span {
  background: rgba(0, 146, 95, .72);
}
.hour-card.unlucky header span {
  background: rgba(215, 67, 67, .72);
}
.hour-card strong {
  display: block;
  margin: 8px 0 5px;
}
.hour-card p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1080px) {
  .almanac-picker {
    flex-wrap: wrap;
  }
  .week-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .inline-date-form {
    width: min(100%, 370px);
  }
  .liuren-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .liuren-summary-grid .stat:nth-child(n) {
    grid-column: span 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .history-delete {
    opacity: 1;
    transform: translateX(0);
  }
}

.liuren-wrap {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) 1fr;
  gap: 24px;
}
.liuren-board {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "p5 p6 p7 p8"
    "p4 empty empty p9"
    "p3 empty empty p10"
    "p2 p1 p0 p11";
  gap: 0;
  border: 2px solid #9a7040;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 25%, rgba(216, 173, 98, .42) 25% calc(25% + 1px), transparent calc(25% + 1px) 75%, rgba(216, 173, 98, .42) 75% calc(75% + 1px), transparent calc(75% + 1px)),
    linear-gradient(0deg, transparent 25%, rgba(216, 173, 98, .42) 25% calc(25% + 1px), transparent calc(25% + 1px) 75%, rgba(216, 173, 98, .42) 75% calc(75% + 1px), transparent calc(75% + 1px)),
    linear-gradient(135deg, rgba(216, 173, 98, .08), rgba(21, 16, 11, .74) 42%, rgba(21, 16, 11, .78) 58%, rgba(216, 173, 98, .06));
  box-shadow: inset 0 0 32px rgba(216, 173, 98, .24), 0 0 28px rgba(216, 173, 98, .18);
}
.liuren-cell {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: 10px 8px;
  border: 1px solid rgba(216, 173, 98, .45);
  text-align: center;
  background: rgba(21, 16, 11, .58);
}
.liuren-cell.p0 { grid-area: p0; }
.liuren-cell.p1 { grid-area: p1; }
.liuren-cell.p2 { grid-area: p2; }
.liuren-cell.p3 { grid-area: p3; }
.liuren-cell.p4 { grid-area: p4; }
.liuren-cell.p5 { grid-area: p5; }
.liuren-cell.p6 { grid-area: p6; }
.liuren-cell.p7 { grid-area: p7; }
.liuren-cell.p8 { grid-area: p8; }
.liuren-cell.p9 { grid-area: p9; }
.liuren-cell.p10 { grid-area: p10; }
.liuren-cell.p11 { grid-area: p11; }
.liuren-cell.is-kong-cell {
  background: linear-gradient(135deg, rgba(110, 110, 110, .42), rgba(42, 42, 42, .78));
  box-shadow: inset 0 0 24px rgba(210, 210, 210, .12);
}
.liuren-cell .branch {
  color: var(--gold);
  font-size: 26px;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .12em;
}
.liuren-cell .branch-mark,
.liuren-pass-main .branch-mark,
.liuren-course-main .branch-mark {
  color: #ff4f5f;
}
.liuren-cell .kong-marker {
  color: #f1d08b;
  font-size: .88em;
  letter-spacing: 0;
}
.liuren-general {
  margin-top: 4px;
  color: #f4dfae;
  font-size: 14px;
  line-height: 1.25;
}
.liuren-shensha {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px 6px;
  margin-top: 8px;
  max-width: 100%;
  width: 78%;
  color: #d7c08d;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
}
.liuren-shensha-item {
  white-space: nowrap;
}
.liuren-cell small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }
.liuren-cell .xun-label {
  color: #e7c786;
  font-size: 13px;
}
.liuren-cell .xun-label.is-kong {
  color: #c8c8c8;
}
.liuren-cell .earth-branch {
  display: inline-block;
  min-width: 1.35em;
  border-radius: 4px;
}
.liuren-cell .earth-branch.is-kong {
  color: #dadada;
  background: rgba(170, 170, 170, .24);
}
.ske-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.liuren-side {
  min-width: 0;
}
.liuren-side h3 {
  text-align: center;
}
.liuren-section-title {
  margin-top: 100px;
  margin-bottom: 22px;
}
.liuren-pass-grid,
.liuren-course-grid {
  display: grid;
  gap: 10px;
}
.liuren-pass-grid {
  justify-content: center;
  margin-top: 50px;
  gap: 8px;
}
.liuren-course-grid {
  grid-template-columns: repeat(4, minmax(34px, max-content));
  justify-content: center;
  align-items: start;
  gap: 50px;
  direction: rtl;
}
.liuren-pass-row,
.liuren-course-cell {
  direction: ltr;
  min-width: 0;
  color: #f6e8c4;
  text-align: center;
}
.liuren-pass-row {
  display: grid;
  grid-template-columns: 48px minmax(58px, 1fr) 28px;
  align-items: center;
  justify-items: center;
  width: 178px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(216, 173, 98, .45);
  border-radius: 8px;
  background: rgba(21, 16, 11, .58);
}
.liuren-course-cell {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 0;
  padding: 0;
  gap: 7px;
  direction: ltr;
}
.liuren-course-cell b {
  color: #02a3a8;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.05;
}
.liuren-pass-main {
  color: #f1d08b;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.liuren-pass-relation,
.liuren-pass-general {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}
.liuren-pass-relation {
  color: #f6e8c4;
}
.liuren-pass-general {
  color: #02a3a8;
}
.liuren-pass-main .kong-marker {
  color: #f1d08b;
  font-size: .88em;
}
.liuren-course-main {
  display: grid;
  justify-items: center;
  color: #f6e8c4;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.08;
}
.liuren-course-main span {
  min-width: 1em;
}
.liuren-course-main .course-mark {
  color: #ff4f5f;
}
.ziwei-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(164px, auto));
  grid-template-areas:
    "p5 p6 p7 p8"
    "p4 center center p9"
    "p3 center center p10"
    "p2 p1 p0 p11";
  border: 2px solid #9a7040;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(216, 173, 98, .08), rgba(21, 16, 11, .82) 42%, rgba(21, 16, 11, .86) 58%, rgba(216, 173, 98, .06));
  box-shadow: inset 0 0 32px rgba(216, 173, 98, .2), 0 0 28px rgba(216, 173, 98, .14);
  color: var(--text);
  overflow: hidden;
}
.ziwei-chart-card > h3 {
  text-align: center;
}
.ziwei-sihua-summary {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 173, 98, .42);
  border-radius: 8px;
  background: rgba(21, 16, 11, .42);
  color: #f6e8c4;
}
.ziwei-sihua-summary b {
  color: var(--gold);
  white-space: nowrap;
}
.ziwei-sihua-summary span {
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ziwei-palace,
.ziwei-center {
  min-width: 0;
  border: 1px solid rgba(216, 173, 98, .42);
  background: rgba(21, 16, 11, .58);
}
.ziwei-palace {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 164px;
  padding: 12px 10px;
  overflow: hidden;
}
.ziwei-palace-tags {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 4px;
}
.ziwei-palace-tags em {
  min-width: 24px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 79, 95, .72);
  border-radius: 4px;
  color: #ff4f5f;
  background: rgba(21, 16, 11, .78);
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.ziwei-palace-tags .ziwei-origin-tag {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  padding: 5px 3px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0;
}
.ziwei-center {
  grid-area: center;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 22px;
  text-align: center;
  background:
    linear-gradient(30deg, transparent 49.7%, rgba(216, 173, 98, .24) 50%, transparent 50.3%),
    linear-gradient(150deg, transparent 49.7%, rgba(216, 173, 98, .24) 50%, transparent 50.3%),
    linear-gradient(105deg, transparent 49.7%, rgba(216, 173, 98, .18) 50%, transparent 50.3%),
    rgba(21, 16, 11, .44);
}
.ziwei-center strong {
  color: #ffdf9d;
  font-size: 20px;
}
.ziwei-center span,
.ziwei-center small {
  color: #f6e8c4;
}
.palace-stars {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 86px;
  padding-right: 34px;
}
.star {
  color: #f1d08b;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.ziwei-star-name {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  color: #f6e8c4;
  line-height: 1.08;
}
.ziwei-star-text {
  display: grid;
  justify-items: center;
  gap: 0;
}
.ziwei-star-major {
  color: #f1d08b;
  font-size: 18px;
  font-weight: 800;
}
.ziwei-star-minor {
  color: #f6e8c4;
  font-size: 13px;
  font-weight: 700;
}
.ziwei-star-name small {
  color: #f6e8c4;
  font-size: .84em;
  font-weight: 800;
  line-height: 1.05;
}
.ziwei-mutagen {
  display: inline-grid;
  place-items: center;
  min-width: 1.45em;
  padding: 1px 3px;
  border: 1px solid rgba(255, 79, 95, .7);
  border-radius: 4px;
  color: #ff4f5f;
  background: rgba(255, 79, 95, .1);
  font-style: normal;
  font-size: .78em;
  font-weight: 900;
  line-height: 1.15;
}
.ziwei-mutagen-禄 {
  border-color: rgba(98, 211, 147, .68);
  color: #62d393;
  background: rgba(98, 211, 147, .1);
}
.ziwei-mutagen-权 {
  border-color: rgba(241, 208, 139, .72);
  color: #f1d08b;
  background: rgba(241, 208, 139, .1);
}
.ziwei-mutagen-科 {
  border-color: rgba(64, 188, 202, .7);
  color: #40bcca;
  background: rgba(64, 188, 202, .1);
}
.minor {
  color: #f6e8c4;
  font-size: 13px;
  line-height: 1.45;
}
.ziwei-palace footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: end;
  color: #f6e8c4;
  border-top: 1px solid rgba(216, 173, 98, .34);
  padding-top: 7px;
}
.ziwei-palace footer strong {
  color: #fff1cc;
  font-size: 18px;
}
.ziwei-palace footer span {
  color: #d7c08d;
  font-size: 13px;
}
.ziwei-palace footer .stem {
  font-size: 16px;
  color: #f1d08b;
}

.error {
  padding: 18px;
  border: 1px solid rgba(215, 67, 67, .55);
  border-radius: 8px;
  color: #ffd6d6;
  background: rgba(215, 67, 67, .12);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 5, 3, .72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .15s ease;
}
.modal-backdrop[hidden] {
  display: none;
}
.modal-backdrop.show {
  opacity: 1;
}
.confirm-modal {
  width: min(420px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(47, 35, 23, .98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .55), 0 0 22px rgba(216, 173, 98, .18);
}
.confirm-modal h3 {
  margin-bottom: 12px;
}
.confirm-modal p {
  margin-bottom: 24px;
  color: var(--muted);
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.ghost-btn,
.danger-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.ghost-btn {
  border: 1px solid rgba(116, 90, 50, .78);
  color: var(--text);
  background: rgba(21, 16, 11, .35);
}
.danger-btn {
  border: 0;
  color: #fff;
  background: var(--red);
}

.bazi-ai-loading .loading-dots {
  margin-top: 14px;
}

.bazi-ai-card p {
  color: var(--text);
  line-height: 1.8;
}

.ai-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-card-head h3 {
  margin: 0;
}

.ai-card-head strong {
  color: var(--accent);
  font-size: 20px;
}

.ai-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.lucky-config-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-card-grid section,
.ai-year-table section,
.ai-trend-grid section {
  border: 1px solid rgba(216, 173, 98, .36);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, .12);
}

.ai-card-grid b,
.ai-year-table b,
.ai-trend-grid b {
  display: block;
  color: var(--accent);
  margin-bottom: 8px;
}

.ai-card-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}
.ai-card-grid em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.7;
}
.year-range-list p {
  margin: 10px 0 0;
  color: var(--text);
}
.year-range-list strong {
  color: var(--accent);
  margin-right: 8px;
}

.ai-year-table,
.ai-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.ai-year-table span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.ai-year-table p,
.ai-trend-grid p {
  margin: 0 0 8px;
}

.ai-year-table em,
.ai-trend-grid em {
  display: block;
  color: var(--accent-2);
  font-style: normal;
  line-height: 1.7;
}

.ai-luck-list span {
  width: 100%;
  align-items: flex-start;
  min-width: 0;
}
.ai-luck-list {
  display: grid;
  grid-template-columns: 1fr;
}
.ai-luck-list em {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-style: normal;
  font-size: 13px;
  line-height: 1.55;
  white-space: normal;
}

@keyframes currentLuckPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 211, 124, .24), 0 0 18px rgba(255, 190, 70, .24);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 211, 124, .5), 0 0 30px rgba(255, 190, 70, .42);
  }
}

.liuren-followup-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
}

.liuren-followup-form textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid rgba(216, 173, 98, .42);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(0, 0, 0, .2);
  font: inherit;
  line-height: 1.6;
}

.liuren-followup-form button {
  min-width: 120px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  color: #20140b;
  background: linear-gradient(135deg, #f1c36f, #c78a35);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 820px) {
  .topbar, .panel.compact, .date-form { display: block; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
  .tab { padding: 0 10px; }
  .birth-form, .grid, .huangli-head, .liuren-wrap, .ske-grid, .yi-ji, .almanac-yi-ji {
    grid-template-columns: 1fr;
  }
  .lucky-config-grid {
    grid-template-columns: 1fr;
  }
  .bazi-intro {
    padding-top: 8px;
  }
  .bazi-intro p {
    font-size: 15px;
  }
  .bazi-consent,
  .bazi-submit {
    grid-column: auto;
  }
  .luck-axis {
    overflow-x: auto;
    padding: 56px 0;
  }
  .liuren-followup-form {
    grid-template-columns: 1fr;
  }
  .liuren-followup-form button {
    min-height: 44px;
  }
  .cosmic-liuren-disc {
    width: min(100%, 560px);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 54px rgba(97, 128, 194, .2);
    mask-image: none;
  }
  .cosmic-liuren-disc::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(21, 16, 11, .48), transparent 14%, transparent 86%, rgba(21, 16, 11, .48)),
      linear-gradient(180deg, rgba(21, 16, 11, .48), transparent 14%, transparent 86%, rgba(21, 16, 11, .48)),
      radial-gradient(circle at 0 0, rgba(21, 16, 11, .78) 0 11%, rgba(21, 16, 11, .38) 18%, transparent 34%),
      radial-gradient(circle at 100% 0, rgba(21, 16, 11, .78) 0 11%, rgba(21, 16, 11, .38) 18%, transparent 34%),
      radial-gradient(circle at 0 100%, rgba(21, 16, 11, .78) 0 11%, rgba(21, 16, 11, .38) 18%, transparent 34%),
      radial-gradient(circle at 100% 100%, rgba(21, 16, 11, .78) 0 11%, rgba(21, 16, 11, .38) 18%, transparent 34%);
  }
  .liuren-square {
    inset: 0;
    border-color: rgba(126, 145, 204, .12);
    box-shadow: inset 0 0 42px rgba(126, 145, 204, .08);
  }
  .liuren-square::before {
    inset: 9%;
  }
  .liuren-square::after {
    inset: 25%;
  }
  .liuren-orbit {
    inset: 10%;
  }
  .liuren-orbit::before {
    inset: 18%;
  }
  .liuren-orbit::after {
    inset: 32%;
  }
  .liuren-square span {
    font-size: 19px;
  }
  .liuren-orbit span {
    font-family: inherit;
    font-size: 19px;
  }
  .bazi-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .bazi-pillar {
    gap: 5px;
    padding: 8px 5px;
  }
  .bazi-pillar strong {
    font-size: 24px;
  }
  .bazi-pillar span,
  .bazi-pillar em {
    font-size: 10px;
  }
  .element-layout {
    grid-template-columns: 1fr;
  }
  .element-radar {
    justify-self: center;
  }
  .bagua-loader {
    width: 180px;
    height: 180px;
  }
  .taiji {
    inset: 34px;
  }
  .almanac-picker {
    display: grid;
    grid-template-columns: 1fr;
  }
  .liuren-board {
    width: min(100%, 360px);
    justify-self: center;
  }
  .liuren-cell {
    padding: 4px 3px;
  }
  .liuren-cell .branch {
    font-size: 20px;
    line-height: 1;
  }
  .liuren-pass-row {
    width: min(100%, 178px);
  }
  .liuren-pass-grid {
    margin-top: 32px;
  }
  .liuren-section-title {
    margin-top: 64px;
  }
  .liuren-pass-main,
  .liuren-course-main {
    font-size: 20px;
  }
  .liuren-pass-relation,
  .liuren-pass-general {
    font-size: 13px;
  }
  .liuren-course-grid {
    gap: 22px;
  }
  .liuren-course-cell {
    gap: 5px;
  }
  .liuren-course-cell b {
    font-size: 19px;
  }
  .liuren-general {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.1;
  }
  .liuren-shensha {
    display: none;
  }
  .almanac-hero {
    grid-template-columns: 42px 1fr 42px;
    min-height: 230px;
    padding: 18px 10px;
  }
  .round-nav {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
  .hero-date strong {
    font-size: 30px;
  }
  .hero-date p {
    font-size: 13px;
  }
  .today-mark {
    border-radius: 8px;
  }
  .week-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inline-date-form {
    grid-template-columns: 1fr;
  }
  .good-box,
  .bad-box {
    padding: 20px;
  }
  .hour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ziwei-board {
    grid-template-rows: repeat(4, minmax(124px, auto));
    font-size: 12px;
  }
  .ziwei-sihua-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  .ziwei-sihua-summary b {
    grid-column: 1 / -1;
  }
  .ziwei-sihua-summary span {
    font-size: 11px;
  }
  .ziwei-palace {
    min-height: 124px;
    padding: 5px;
  }
  .ziwei-palace-tags {
    top: 4px;
    right: 4px;
    gap: 2px;
  }
  .ziwei-palace-tags em {
    min-width: 20px;
    padding: 1px 3px;
    font-size: 10px;
  }
  .ziwei-center {
    padding: 10px;
    gap: 5px;
  }
  .star { font-size: 14px; }
  .minor { font-size: 11px; line-height: 1.35; }
  .palace-stars {
    gap: 5px;
    min-height: 68px;
    padding-right: 24px;
  }
  .ziwei-star-major {
    font-size: 14px;
  }
  .ziwei-star-minor {
    font-size: 10px;
  }
  .ziwei-star-name {
    gap: 2px;
  }
  .ziwei-palace footer {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .ziwei-palace footer strong,
  .ziwei-palace footer .stem {
    font-size: 13px;
  }
  .ziwei-palace footer span {
    font-size: 10px;
  }
  .wide { grid-column: auto; }
  button[type="submit"] { width: 100%; margin-top: 8px; }
  .panel { padding: 18px; }
  .panel.liuren-query-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
}