/*
 * Compatibility layout hotfix for the currently deployed legacy bundle.
 * Keep this deliberately small: it only protects the home dashboard from
 * squeezing the calendar panel and feature cards into the same visual area.
 */
.oracle-home-dashboard,
.oracle-home-dashboard > *,
.today-panel,
.today-panel > *,
.oracle-feature-deck,
.oracle-feature-deck > * {
  min-width: 0;
}

.today-panel-title strong,
.oracle-feature-card strong,
.oracle-feature-card small,
.oracle-feature-card em {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* A two-column dashboard needs considerably more room than the old bundle
 * allowed. Stack it earlier so intermediate desktop widths and browser zoom
 * levels cannot make the date panel run beneath the feature cards. */
@media (max-width: 1360px) {
  .oracle-home-dashboard {
    grid-template-columns: minmax(0, 1fr);
    width: min(100% - 48px, 980px);
    gap: 24px;
  }

  .today-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 24px;
  }

  .today-panel .frame-label,
  .today-panel .today-panel-title,
  .today-panel dl {
    grid-column: 1;
  }

  .today-panel-query {
    grid-area: 1 / 2 / span 3;
    align-content: center;
  }
}

@media (max-width: 720px) {
  .oracle-home-dashboard {
    width: calc(100% - 28px);
    gap: 18px;
  }

  .today-panel {
    display: block;
    padding: 24px 16px;
  }

  .today-panel-title strong {
    font-size: clamp(30px, 10vw, 42px);
    line-height: 1.1;
  }

  .today-panel-query {
    display: grid;
    width: 100%;
  }

  .oracle-feature-deck {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* -----------------------------------------------------------------------
 * Simplified five-step chart entry (2026-07-31)
 *
 * The cover illustration was competing with the actual charting task and
 * could collapse at intermediate widths.  Keep the existing stepper and
 * its behaviour intact, but turn its entry state into one quiet, focused
 * action surface.  The mascot and book-spine remain available elsewhere in
 * the brand system instead of being pasted into this functional workflow.
 * ----------------------------------------------------------------------- */
.oracle-home .chart-entry.oracle-chart-entry {
  background: #f7f1e7 !important;
  border: 1px solid #e3d7c7 !important;
  border-radius: 22px !important;
  padding: clamp(20px, 3vw, 42px) !important;
}

.oracle-home .chart-entry .hero-section,
.oracle-home .chart-entry .hero-section.oracle-frame {
  width: min(100%, 860px) !important;
  max-width: 860px !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.oracle-home .chart-entry .hero-section::before {
  display: none !important;
  content: none !important;
}

.oracle-home .chart-entry .oracle-card {
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Initial state: no book spine, inner guide card or pasted character image. */
.oracle-home .oracle-book-cover {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-height: 365px !important;
  padding: clamp(36px, 6vw, 66px) clamp(24px, 8vw, 86px) !important;
  background: linear-gradient(145deg, #fffdf8 0%, #fbf5ea 100%) !important;
  border: 1px solid #ded2bf !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 35px rgba(75, 58, 34, .08) !important;
}

.oracle-home .oracle-book-cover > div:first-child,
.oracle-home .oracle-book-cover .oracle-book-guide {
  display: none !important;
}

.oracle-home .oracle-book-cover .oracle-action {
  width: min(100%, 510px) !important;
  margin: auto !important;
  text-align: center !important;
  justify-self: center !important;
  display: grid !important;
  justify-items: center !important;
}

.oracle-home .oracle-book-cover .oracle-action::before {
  content: "五步生成基础命盘" !important;
  margin: 0 !important;
  color: #24253a !important;
  font-family: var(--oracle-display), "Noto Serif SC", serif !important;
  font-size: clamp(31px, 4.3vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  line-height: 1.2 !important;
}

.oracle-home .oracle-book-cover .oracle-action > p {
  display: none !important;
}

.oracle-home .oracle-book-cover .oracle-action::after {
  content: "选择历法、出生日期、时辰与性别，确认后即可生成四柱命盘。";
  display: block;
  max-width: 390px;
  margin: 14px auto 26px;
  color: #5e5d68;
  font-size: 15px;
  line-height: 1.75;
}

.oracle-home .oracle-book-cover .oracle-action .ai-hint {
  display: none !important;
}

.oracle-home .oracle-book-cover .oracle-action button {
  min-width: 168px !important;
  min-height: 52px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #fffdf8 !important;
  background: #d66b3d !important;
  box-shadow: 0 7px 0 #ad4e2b, 0 12px 22px rgba(172, 78, 43, .18) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.oracle-home .oracle-book-cover .oracle-action button:hover {
  background: #c85d35 !important;
  transform: translateY(-1px) !important;
}

.oracle-home .oracle-book-cover .oracle-action button:active {
  box-shadow: 0 3px 0 #ad4e2b !important;
  transform: translateY(4px) !important;
}

/* The actual five-step UI remains the only detailed element in this area. */
.oracle-home .oracle-step-form {
  min-height: 0 !important;
  padding: clamp(26px, 5vw, 54px) !important;
  background: linear-gradient(145deg, #fffdf8, #f8f1e6) !important;
  border: 1px solid #ded2bf !important;
  border-radius: 18px !important;
}

.oracle-home .chart-step-stage {
  min-height: 330px !important;
}

@media (max-width: 720px) {
  .oracle-home .chart-entry.oracle-chart-entry {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .oracle-home .oracle-book-cover {
    min-height: 330px !important;
    padding: 42px 20px !important;
    border-radius: 14px !important;
  }

  .oracle-home .oracle-book-cover .oracle-action::before {
    font-size: 31px !important;
  }

  .oracle-home .oracle-book-cover .oracle-action::after {
    font-size: 14px;
  }

  .oracle-home .oracle-step-form {
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }

  .oracle-home .chart-step-stage {
    min-height: 310px !important;
    padding-inline: 0 !important;
  }
}

/* 2026-07-31 visual balance pass: keep the entry scene warm and readable. */
.oracle-home .chart-entry.oracle-chart-entry {
  background: #f7f1e7 !important;
  border-color: #e3d7c7 !important;
  color: #25263a !important;
  overflow: visible !important;
}

.oracle-home .chart-entry .hero-section,
.oracle-home .chart-entry .hero-section.oracle-frame {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  background: #fffdf8 !important;
  border-color: #dfd2c0 !important;
  overflow: visible !important;
}

.oracle-home .oracle-book-cover,
.oracle-home .oracle-book-cover > * {
  min-width: 0 !important;
}

.oracle-home .oracle-book-cover {
  grid-template-columns: minmax(190px, .82fr) minmax(0, 1.18fr) minmax(180px, .72fr) !important;
  align-items: center !important;
  overflow: visible !important;
}

.oracle-home .oracle-book-guide,
.oracle-home .oracle-book-guide img {
  max-width: 100% !important;
}

.oracle-home .oracle-book-guide img {
  object-fit: contain !important;
}

.oracle-home .oracle-book-cover h2,
.oracle-home .oracle-book-cover p,
.oracle-home .oracle-book-cover figcaption,
.oracle-home .oracle-book-cover .ai-hint {
  color: #25263a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.oracle-home .oracle-home-dashboard .today-panel {
  background: #3d3c4d !important;
  border-color: #605d73 !important;
  color: #f5efe5 !important;
}

.oracle-home .today-panel * { opacity: 1 !important; }
.oracle-home .today-panel-title strong,
.oracle-home .today-panel-title h2 { color: #f6d28b !important; text-shadow: none !important; }
.oracle-home .today-panel-title small,
.oracle-home .today-panel-title p,
.oracle-home .today-panel dl,
.oracle-home .today-panel dt { color: #d8d2cf !important; }
.oracle-home .today-panel dd,
.oracle-home .today-panel .fortune-day-name { color: #f5efe5 !important; }
.oracle-home .today-panel-query label { color: #ddd5cc !important; }
.oracle-home .today-panel .frame-label,
.oracle-home .today-panel .today-panel-label { color: #171820 !important; }

/* Normal four-pillar mode fits the available desktop width without a
 * second horizontal canvas. Expert mode keeps its intentional detail view. */
@media (min-width: 721px) {
  .bazi-table-wrap:has(.bazi-table:not(.expert-table)) { overflow-x: hidden !important; }
  .bazi-table-wrap .bazi-table:not(.expert-table),
  .bazi-table-wrap .combined-table:not(.expert-table) {
    min-width: 0 !important;
    width: 100% !important;
  }
  .bazi-table-wrap .bazi-table:not(.expert-table) th,
  .bazi-table-wrap .bazi-table:not(.expert-table) td { padding-inline: 4px !important; }
}

@media (max-width: 720px) {
  .oracle-home .chart-entry.oracle-chart-entry { padding-inline: 12px !important; }
  .oracle-home .chart-entry .hero-section { width: 100% !important; }
  .oracle-home .oracle-book-cover { grid-template-columns: 1fr !important; gap: 18px !important; }
  .oracle-home .oracle-book-cover .oracle-book-guide { order: -1; justify-self: center; }
  .oracle-home .oracle-book-cover .oracle-action { justify-self: start; }
  .bazi-table-wrap .bazi-table:not(.expert-table) { min-width: 0 !important; width: 100% !important; }
  .bazi-table-wrap .bazi-table:not(.expert-table) th,
  .bazi-table-wrap .bazi-table:not(.expert-table) td { padding: 6px 2px !important; font-size: 11px !important; }
  .bazi-table-wrap .bazi-table:not(.expert-table) .gan-cell strong,
  .bazi-table-wrap .bazi-table:not(.expert-table) .zhi-cell strong { font-size: 20px !important; }
}

/* -----------------------------------------------------------------------
 * Readability and report-list recovery (2026-07-31)
 *
 * The visual theme is loaded after the legacy app bundle and contains a few
 * broad overrides.  On pale surfaces those overrides made key copy nearly
 * disappear, while report rows could collapse into coloured one-pixel lines.
 * Keep this scoped to the affected components: it is deliberately not a
 * global colour reset.
 * ----------------------------------------------------------------------- */

/* Home / "命之书" entry: light background always receives dark copy. */
.oracle-home .compact-intro h2,
.oracle-home .compact-intro > p,
.oracle-home .oracle-action > p,
.oracle-home .oracle-action .ai-hint,
.oracle-home .oracle-book-guide figcaption,
.oracle-home .oracle-book-guide figcaption b,
.oracle-home .oracle-book-guide figcaption span {
  opacity: 1 !important;
}

.oracle-home .compact-intro h2,
.oracle-home .oracle-action > p,
.oracle-home .oracle-book-guide figcaption b {
  color: #25263a !important;
  text-shadow: none !important;
}

.oracle-home .compact-intro > p,
.oracle-home .oracle-action .ai-hint,
.oracle-home .oracle-book-guide figcaption span {
  color: #575a70 !important;
  text-shadow: none !important;
}

.oracle-home .oracle-action:before {
  color: #5f5ab0 !important;
  opacity: 1 !important;
}

/* A report must always be a readable, tappable record rather than a
 * decorative stripe.  Explicit min-heights also protect old saved reports
 * whose text is longer than newer report titles. */
.archive-layer .report-drawer {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}

.archive-layer .report-list {
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 18px 4px 24px 0 !important;
  overflow-y: auto !important;
}

.archive-layer .report-list article {
  display: block !important;
  min-height: 104px !important;
  overflow: hidden !important;
  background: #fffdf7 !important;
}

.archive-layer .report-list article::before,
.archive-layer .report-list article::after {
  display: none !important;
  content: none !important;
}

.archive-layer .report-list article > button {
  display: grid !important;
  grid-template-rows: auto minmax(24px, auto) auto !important;
  align-content: center !important;
  min-height: 104px !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.archive-layer .report-list .report-type,
.archive-layer .report-list strong,
.archive-layer .report-list small,
.archive-layer .report-list time,
.archive-layer .report-list i {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.archive-layer .report-list strong {
  color: #2b2c40 !important;
  line-height: 1.5 !important;
}

.archive-layer .report-list small,
.archive-layer .report-list time {
  color: #696b7a !important;
}

@media (max-width: 720px) {
  .archive-layer .report-drawer {
    padding: 24px 16px 18px !important;
  }

  .archive-layer .report-list article,
  .archive-layer .report-list article > button {
    min-height: 112px !important;
  }

  .archive-layer .report-list article > button {
    padding: 16px 42px 16px 15px !important;
  }

  .archive-layer .report-list time {
    position: static !important;
    margin-top: 3px !important;
  }
}

/* Final cascade: keep the chart-entry simplification above earlier visual
 * experiments which also style this exact scene. */
.oracle-home .chart-entry.oracle-chart-entry { background:#f7f1e7!important; border:1px solid #e3d7c7!important; border-radius:22px!important; padding:clamp(20px,3vw,42px)!important; }
.oracle-home .chart-entry .hero-section,.oracle-home .chart-entry .hero-section.oracle-frame { width:min(100%,860px)!important; max-width:860px!important; min-height:0!important; margin-inline:auto!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; }
.oracle-home .chart-entry .hero-section::before { display:none!important; content:none!important; }
.oracle-home .chart-entry .oracle-card { min-height:0!important; overflow:visible!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.oracle-home .oracle-book-cover { display:grid!important; grid-template-columns:1fr!important; min-height:365px!important; padding:clamp(36px,6vw,66px) clamp(24px,8vw,86px)!important; background:linear-gradient(145deg,#fffdf8 0%,#fbf5ea 100%)!important; border:1px solid #ded2bf!important; border-radius:18px!important; box-shadow:0 18px 35px rgba(75,58,34,.08)!important; }
.oracle-home .oracle-book-cover>div:first-child,.oracle-home .oracle-book-cover .oracle-book-guide { display:none!important; }
.oracle-home .oracle-book-cover .oracle-action { width:min(100%,510px)!important; margin:auto!important; text-align:center!important; justify-self:center!important; display:grid!important; justify-items:center!important; }
.oracle-home .oracle-book-cover .oracle-action::before { content:"五步生成基础命盘"!important; margin:0!important; color:#24253a!important; font-family:var(--oracle-display),"Noto Serif SC",serif!important; font-size:clamp(31px,4.3vw,48px)!important; font-weight:700!important; letter-spacing:.03em!important; line-height:1.2!important; }
.oracle-home .oracle-book-cover .oracle-action>p,.oracle-home .oracle-book-cover .oracle-action .ai-hint { display:none!important; }
.oracle-home .oracle-book-cover .oracle-action::after { content:"选择历法、出生日期、时辰与性别，确认后即可生成四柱命盘。"; display:block; max-width:390px; margin:14px auto 26px; color:#5e5d68; font-size:15px; line-height:1.75; }
.oracle-home .oracle-book-cover .oracle-action button { min-width:168px!important; min-height:52px!important; margin:0!important; border:0!important; border-radius:13px!important; color:#fffdf8!important; background:#d66b3d!important; box-shadow:0 7px 0 #ad4e2b,0 12px 22px rgba(172,78,43,.18)!important; font-size:16px!important; font-weight:800!important; }
.oracle-home .oracle-book-cover .oracle-action button:hover { background:#c85d35!important; transform:translateY(-1px)!important; }
.oracle-home .oracle-book-cover .oracle-action button:active { box-shadow:0 3px 0 #ad4e2b!important; transform:translateY(4px)!important; }
.oracle-home .oracle-step-form { min-height:0!important; padding:clamp(26px,5vw,54px)!important; background:linear-gradient(145deg,#fffdf8,#f8f1e6)!important; border:1px solid #ded2bf!important; border-radius:18px!important; }
.oracle-home .chart-step-stage { min-height:330px!important; }
@media (max-width:720px) { .oracle-home .chart-entry.oracle-chart-entry{border-radius:16px!important;padding:14px!important}.oracle-home .oracle-book-cover{min-height:330px!important;padding:42px 20px!important;border-radius:14px!important}.oracle-home .oracle-book-cover .oracle-action::before{font-size:31px!important}.oracle-home .oracle-book-cover .oracle-action::after{font-size:14px}.oracle-home .oracle-step-form{padding:24px 16px!important;border-radius:14px!important}.oracle-home .chart-step-stage{min-height:310px!important;padding-inline:0!important} }

/* Phone chart repair: a previous compact-mode override shrank the table to
 * the viewport, collapsing every pillar into a one-character strip. Keep one
 * intentional horizontal scroll surface instead, with useful column widths. */
@media (max-width: 720px) {
  .bazi-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .bazi-table-wrap .bazi-table:not(.expert-table),
  .bazi-table-wrap .combined-table:not(.expert-table) {
    width: 640px !important;
    min-width: 640px !important;
    table-layout: fixed !important;
  }

  .bazi-table-wrap .expert-table,
  .bazi-table-wrap .expert-table.combined-table {
    width: 880px !important;
    min-width: 880px !important;
    table-layout: fixed !important;
  }

  .bazi-table-wrap .bazi-table tbody th {
    width: 72px !important;
    min-width: 72px !important;
    white-space: nowrap !important;
  }

  .bazi-table-wrap .bazi-table th,
  .bazi-table-wrap .bazi-table td {
    min-width: 0 !important;
    padding: 7px 5px !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .bazi-table-wrap .expert-table .gan-cell,
  .bazi-table-wrap .expert-table .zhi-cell {
    padding: 11px 5px !important;
  }

  .bazi-table-wrap .expert-table .gan-cell strong,
  .bazi-table-wrap .expert-table .zhi-cell strong {
    font-size: 27px !important;
  }

  .bazi-table-wrap .expert-foundation {
    max-width: 118px !important;
    word-break: break-word !important;
  }
}

/* Mobile table repair, final authority (2026-07-31)
 *
 * The component bundle contains an old "compact" rule that turns table
 * sections into block/grid elements on phones.  That looks acceptable at a
 * desktop width but makes a real phone render each pillar as a thin vertical
 * strip.  Restore native table layout first, then give normal and expert
 * views their own deliberately readable mobile strategy.
 */
@media (max-width: 720px) {
  .oracle-result-page .bazi-table-wrap,
  .oracle-result-page .bazi-table-stage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .oracle-result-page .bazi-table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .oracle-result-page .bazi-table,
  .oracle-result-page .bazi-table thead,
  .oracle-result-page .bazi-table tbody,
  .oracle-result-page .bazi-table tr,
  .oracle-result-page .bazi-table th,
  .oracle-result-page .bazi-table td {
    box-sizing: border-box !important;
  }

  .oracle-result-page .bazi-table,
  .oracle-result-page .bazi-table:not(.combined-table),
  .oracle-result-page .bazi-table.expert-table:not(.combined-table) {
    display: table !important;
    table-layout: fixed !important;
    max-width: none !important;
  }

  .oracle-result-page .bazi-table thead {
    display: table-header-group !important;
  }

  .oracle-result-page .bazi-table tbody {
    display: table-row-group !important;
  }

  .oracle-result-page .bazi-table tr,
  .oracle-result-page .bazi-table:not(.combined-table) tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
  }

  .oracle-result-page .bazi-table th,
  .oracle-result-page .bazi-table td,
  .oracle-result-page .bazi-table:not(.combined-table) tr > * {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 3px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow: hidden !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* Regular mode is the quick "one-screen" view: label + four pillars. */
  .oracle-result-page .bazi-table:not(.expert-table),
  .oracle-result-page .combined-table:not(.expert-table) {
    width: 100% !important;
    min-width: 0 !important;
  }

  .oracle-result-page .bazi-table:not(.expert-table) col.row-label-column {
    width: 54px !important;
  }

  .oracle-result-page .bazi-table:not(.expert-table) col.pillar-column {
    width: auto !important;
  }

  .oracle-result-page .bazi-table:not(.expert-table) tbody th {
    width: 54px !important;
    min-width: 54px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .oracle-result-page .bazi-table:not(.expert-table) th,
  .oracle-result-page .bazi-table:not(.expert-table) td {
    font-size: 11px !important;
  }

  .oracle-result-page .bazi-table:not(.expert-table) .gan-cell strong,
  .oracle-result-page .bazi-table:not(.expert-table) .zhi-cell strong {
    font-size: clamp(21px, 6.6vw, 27px) !important;
    line-height: 1.08 !important;
  }

  .oracle-result-page .bazi-table:not(.expert-table) .stacked-cell span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
    white-space: nowrap !important;
  }

  /* Expert mode retains its extra relationship information.  It scrolls as
   * one intentional, readable table rather than compressing text vertically. */
  .oracle-result-page .bazi-table.expert-table,
  .oracle-result-page .bazi-table.expert-table.combined-table {
    width: 760px !important;
    min-width: 760px !important;
  }

  .oracle-result-page .bazi-table.expert-table th,
  .oracle-result-page .bazi-table.expert-table td {
    padding: 8px 5px !important;
    font-size: 11px !important;
  }

  .oracle-result-page .bazi-table.expert-table .gan-cell strong,
  .oracle-result-page .bazi-table.expert-table .zhi-cell strong,
  .oracle-result-page .bazi-table.expert-table .expert-glyph strong {
    font-size: 27px !important;
  }

  .oracle-result-page .bazi-table.expert-table .expert-foundation {
    display: block !important;
    max-width: none !important;
    min-height: 28px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .oracle-result-page .bazi-table.expert-table .expert-group-row > * {
    white-space: nowrap !important;
  }
}