.heaven-page {
  position: relative;
  min-height: 100%;
  font-family: var(--font-sans);
}

:root[data-theme="dark"] .heaven-page::before {
  position: fixed;
  inset: var(--shell-topbar-height) 0 var(--shell-status-height) var(--shell-sidebar-width);
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.12;
  background-image: radial-gradient(circle, var(--color-heaven-star) var(--s-1), transparent var(--s-1));
  background-size: var(--s-32) var(--s-32);
}

.heaven-page > * {
  position: relative;
  z-index: 1;
}

.heaven-page-header h1,
.heaven-mode-tabs strong,
.heaven-panel h2,
.heaven-panel h3 {
  font-family: var(--font-serif);
}

.heaven-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
  margin-bottom: var(--layout-gap);
  padding: var(--s-4);
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}

.heaven-mode-tabs button {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--control-radius);
  color: var(--color-text-secondary);
  background: var(--c-transparent);
  text-align: left;
}

.heaven-mode-tabs button:hover,
.heaven-mode-tabs button.active {
  color: var(--color-heaven);
  background: var(--color-heaven-soft);
}

.heaven-mode-tabs strong {
  font-size: var(--font-17);
}

.heaven-mode-tabs span {
  font-size: var(--font-11-5);
}

.heaven-panel {
  display: grid;
  gap: var(--layout-gap);
  padding-bottom: var(--s-20);
}

.heaven-trend-input {
  display: flex;
  align-items: end;
  gap: var(--s-24);
  padding: var(--s-12) var(--s-16);
}

.heaven-stock-field {
  width: min(100%, var(--s-480));
}

.heaven-inline-control,
.heaven-dual-input {
  display: flex;
  gap: var(--s-8);
}

.heaven-inline-control .input,
.heaven-dual-input .input {
  min-width: 0;
}

.heaven-current-target {
  align-self: center;
  color: var(--color-text-secondary);
  font-size: var(--font-13);
}

.heaven-current-target strong {
  color: var(--color-heaven);
  font-size: inherit;
}

.heaven-awaiting {
  min-height: var(--s-240);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-8);
  color: var(--color-text-secondary);
  text-align: center;
}

.heaven-bagua {
  width: var(--s-80);
  height: var(--s-80);
  display: grid;
  place-items: center;
  border: var(--s-1) solid var(--color-heaven);
  border-radius: var(--radius-round);
  color: var(--color-heaven);
  font-family: var(--font-serif);
  font-size: var(--font-32);
  animation: heaven-turn 12s linear infinite;
}

.heaven-trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(var(--s-320), 0.75fr);
  gap: var(--layout-gap);
}

.heaven-lines-card,
.heaven-outcome-card {
  min-height: var(--s-320);
}

.heaven-lines-card .card-header,
.heaven-qi-layers .card-header {
  justify-content: space-between;
}

.heaven-line-list {
  display: grid;
  padding: var(--s-8) var(--s-14) var(--s-14);
}

.heaven-line-row {
  min-height: var(--s-40);
  display: grid;
  grid-template-columns: var(--s-44) var(--s-56) var(--s-80) minmax(0, 1fr) var(--s-44);
  align-items: center;
  gap: var(--s-8);
  border-bottom: var(--s-1) solid var(--color-divider);
  color: var(--color-text-secondary);
}

.heaven-line-row strong {
  color: var(--color-text);
}

.heaven-line-row small {
  text-align: right;
}

.heaven-line-mini,
.heaven-yao {
  display: flex;
  justify-content: center;
  gap: 0;
}

.heaven-line-mini i,
.heaven-yao i {
  width: 50%;
  height: var(--s-6);
  background: var(--color-heaven);
}

.heaven-line-mini:not(.yin) i + i,
.heaven-yao:not(.yin) i + i {
  margin-left: calc(var(--s-1) * -1);
}

.heaven-line-mini.yin,
.heaven-yao.yin {
  gap: var(--s-8);
}

.heaven-outcome-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: var(--s-8);
  padding: var(--s-16);
}

.heaven-momentum {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  justify-self: stretch;
  color: var(--color-text-secondary);
}

.heaven-momentum strong {
  color: var(--color-heaven);
  font-size: var(--font-32);
}

.heaven-momentum small {
  margin-left: auto;
}

.heaven-hex-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-24);
}

.heaven-hex-symbol {
  width: var(--s-96);
  display: grid;
  justify-items: center;
  gap: var(--s-6);
}

.heaven-hex-symbol > strong {
  color: var(--color-heaven);
  font-family: var(--font-serif);
  font-size: var(--font-18);
}

.heaven-hex-lines {
  width: var(--s-64);
  display: grid;
  gap: var(--s-6);
}

.heaven-change-arrow {
  color: var(--color-heaven);
  font-size: var(--font-24);
}

.heaven-hex-text {
  color: var(--color-text-secondary);
  line-height: var(--s-20);
  text-align: center;
}

.heaven-not-ready {
  padding: var(--s-24);
  color: var(--color-text-secondary);
  text-align: center;
}

.heaven-not-ready strong {
  color: var(--color-heaven);
  font-family: var(--font-serif);
  font-size: var(--font-18);
}

.heaven-section-toggle {
  width: 100%;
  min-height: var(--s-40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-8) var(--s-14);
  color: var(--color-text);
  background: var(--c-transparent);
}

.heaven-check-list {
  display: grid;
  gap: var(--s-8);
  padding: 0 var(--s-14) var(--s-14);
}

.heaven-check {
  display: grid;
  grid-template-columns: var(--s-160) minmax(0, 1fr) var(--s-80);
  gap: var(--s-12);
  padding: var(--s-8) var(--s-10);
  border-left: var(--s-2) solid var(--color-up);
  color: var(--color-text-secondary);
  background: var(--color-up-soft);
}

.heaven-check.is-pass {
  border-color: var(--color-down);
  background: var(--color-down-soft);
}

.heaven-check small {
  text-align: right;
}

.heaven-manual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-12);
  padding-top: var(--s-8);
  border-top: var(--s-1) solid var(--color-divider);
}

.heaven-manual-grid .form-actions {
  grid-column: 1 / -1;
}

.heaven-dialog-tabs {
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-12);
  border-bottom: var(--s-1) solid var(--color-divider);
}

.heaven-dialog-tabs button {
  padding: var(--s-8) var(--s-12);
  border-bottom: var(--s-2) solid var(--c-transparent);
  color: var(--color-text-secondary);
  background: var(--c-transparent);
}

.heaven-dialog-tabs button.active {
  color: var(--color-heaven);
  border-color: var(--color-heaven);
}

.heaven-loading-stage {
  min-height: var(--s-480);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--s-8);
  text-align: center;
}

.heaven-loading-stage canvas {
  width: 100%;
  height: 100%;
  min-height: var(--s-400);
  border-radius: var(--control-radius);
}

.heaven-loading-stage p {
  color: var(--color-text-secondary);
  font-family: var(--font-serif);
}

.heaven-answer {
  min-height: var(--s-240);
  color: var(--color-text);
  line-height: var(--s-24);
  white-space: pre-wrap;
}

.heaven-history-list {
  display: grid;
  gap: var(--s-8);
}

.heaven-history-list button {
  display: flex;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-10) var(--s-12);
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text);
  background: var(--color-surface);
  text-align: left;
}

@keyframes heaven-turn { to { transform: rotate(360deg); } }
@keyframes heaven-coin { 50% { transform: rotateY(180deg) translateY(calc(var(--s-8) * -1)); } }

@media (max-width: 1023px) {
  :root[data-theme="dark"] .heaven-page::before { left: 0; bottom: var(--shell-mobile-nav-height); }
  .heaven-mode-tabs button { text-align: center; }
  .heaven-mode-tabs span { display: none; }
  .heaven-trend-input { display: grid; gap: var(--s-8); }
  .heaven-trend-grid,
  .heaven-fortune-grid,
  .heaven-qi-layout,
  .heart-casting-layout,
  .heart-result { grid-template-columns: minmax(0, 1fr); }
  .heaven-manual-grid { grid-template-columns: minmax(0, 1fr); }
  .heaven-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heaven-check { grid-template-columns: minmax(0, 1fr); }
  .heaven-check small { text-align: left; }
  .heart-result { justify-items: center; text-align: center; }
  .heaven-loading-stage { min-height: var(--s-360); }
  .heaven-loading-stage canvas { min-height: var(--s-320); }
}

@media (max-width: 430px) {
  .heaven-mode-tabs { gap: var(--s-2); }
  .heaven-mode-tabs button { padding-inline: var(--s-4); }
  .heaven-inline-control { display: grid; }
  .heaven-line-row { grid-template-columns: var(--s-40) var(--s-44) minmax(var(--s-64), 1fr) var(--s-44); }
  .heaven-line-row strong { display: none; }
  .heaven-hex-pair { gap: var(--s-8); }
  .heaven-industry-grid { grid-template-columns: minmax(0, 1fr); }
  .heart-coins { gap: var(--s-8); }
  .heart-coin { width: var(--s-64); height: var(--s-64); }
}
