/* Strict folio layout: visual structure only; chart data and interactions stay unchanged. */

.folio-ui.folio-result-mode .result-section {
  --folio-rule: rgba(103, 79, 52, .25);
  --folio-rule-strong: rgba(103, 79, 52, .38);
  --folio-muted: #6d7773;
  --folio-text: #314640;
  --folio-cinnabar: var(--folio-red, #a84536);
  --folio-display: var(--display, "Noto Serif SC", serif);
}

/* Compact mobile fortune ledger -------------------------------------------
   Keep all ten periods visible at once, mirroring a traditional vertical
   almanac table while retaining the existing selectable buttons. */
.fortune-mobile-summary,
.fortune-mobile-axis {
  display: none;
}

@media (max-width: 767px) {
  .folio-ui #fortuneTrackHint,
  .folio-ui .fortune-scroll-region > .mobile-scroll-hint {
    display: none !important;
  }

  .folio-ui .fortune-scroll-region,
  .folio-ui .liunian-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }

  .folio-ui .fortune-track,
  .folio-ui.folio-result-mode .fortune-track,
  .folio-ui .liunian-grid,
  .folio-ui.folio-result-mode .liunian-grid {
    display: grid !important;
    grid-template-columns: 38px repeat(var(--fortune-count), minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 1px solid var(--folio-rule-strong);
    border-bottom: 1px solid var(--folio-rule-strong);
    background: rgba(250, 247, 239, .52);
    scroll-snap-type: none !important;
  }

  .folio-ui .liunian-grid,
  .folio-ui.folio-result-mode .liunian-grid {
    margin-top: 0 !important;
  }

  .folio-ui .fortune-mobile-axis {
    display: flex !important;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 7px 2px;
    border-right: 1px solid var(--folio-rule-strong);
    color: var(--folio-muted);
    background: rgba(103, 79, 52, .035);
  }

  .folio-ui .fortune-mobile-axis b {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .08em;
  }

  .folio-ui .fortune-mobile-axis small {
    font-size: 8px;
    line-height: 1.25;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .folio-ui .fortune-mobile-axis i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cinnabar);
  }

  .folio-ui .dayun-card,
  .folio-ui.folio-result-mode .dayun-card,
  .folio-ui .liunian,
  .folio-ui.folio-result-mode .liunian {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 1px 8px !important;
    border: 0 !important;
    border-right: 1px solid var(--folio-rule) !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
    scroll-snap-align: none !important;
    overflow: hidden;
  }

  .folio-ui .dayun-card:last-child,
  .folio-ui .liunian:last-child {
    border-right: 0 !important;
  }

  .folio-ui .dayun-card > :not(.fortune-mobile-summary),
  .folio-ui .liunian > :not(.fortune-mobile-summary) {
    display: none !important;
  }

  .folio-ui .fortune-mobile-summary {
    display: flex !important;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    color: var(--folio-ink);
  }

  .folio-ui .fortune-mobile-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 3px;
    line-height: 1.15;
  }

  .folio-ui .fortune-mobile-meta b {
    max-width: 100%;
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
  }

  .folio-ui .fortune-mobile-meta small {
    font-size: 8px;
    font-weight: 400;
    white-space: nowrap;
  }

  .folio-ui .fortune-mobile-pillar {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 1px;
  }

  .folio-ui .fortune-mobile-pillar > span {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    white-space: nowrap;
  }

  .folio-ui .fortune-mobile-pillar b,
  .folio-ui .fortune-mobile-xiaoyun b {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.18;
  }

  .folio-ui .fortune-mobile-pillar i {
    color: var(--cinnabar) !important;
    font-size: 8px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
  }

  .folio-ui .fortune-mobile-xiaoyun {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid rgba(103, 79, 52, .12);
  }

  .folio-ui .fortune-mobile-xiaoyun b {
    font-size: 13px;
    line-height: 1.2;
  }

  .folio-ui .dayun-card[aria-selected="true"] {
    background: rgba(18, 63, 56, .10) !important;
    box-shadow: inset 0 -3px 0 var(--folio-ink) !important;
  }

  .folio-ui .liunian[aria-selected="true"] {
    color: var(--folio-ink) !important;
    background: rgba(174, 68, 52, .08) !important;
    box-shadow: inset 0 -3px 0 var(--cinnabar) !important;
  }

  .folio-ui .liunian[aria-selected="true"] .element-木 { color: var(--wood) !important; }
  .folio-ui .liunian[aria-selected="true"] .element-火 { color: var(--fire) !important; }
  .folio-ui .liunian[aria-selected="true"] .element-土 { color: var(--earth) !important; }
  .folio-ui .liunian[aria-selected="true"] .element-金 { color: var(--metal) !important; }
  .folio-ui .liunian[aria-selected="true"] .element-水 { color: var(--water) !important; }

  .folio-ui .liunian.current .fortune-mobile-summary::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--cinnabar);
  }

  .folio-ui .liunian-panel-heading {
    padding: 9px 2px !important;
  }
}

@media (min-width: 701px) {
  /* Continue the table and fortune rules cleanly into the tool-rail divider. */
  .folio-ui.folio-result-mode #standardChartView,
  .folio-ui.folio-result-mode .fortune-scroll-region,
  .folio-ui.folio-result-mode .liunian-panel,
  .folio-ui.folio-result-mode #baziRelationsSection {
    padding-right: 0;
  }

  /* Keep both view controls inside the narrow desktop tool rail. */
  .folio-ui.folio-result-mode .bazi-heading-actions {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    overflow: hidden;
  }

  .folio-ui.folio-result-mode .chart-view-switch {
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 6px;
    overflow: hidden;
  }

  .folio-ui.folio-result-mode .chart-view-switch button {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 4px;
    padding-left: 4px;
    white-space: nowrap;
  }

  .folio-ui.folio-result-mode #baziChartSection > .panel-heading > div:first-child {
    writing-mode: horizontal-tb;
    justify-content: flex-start;
    min-height: 0;
    padding: 25px 8px 18px;
  }

  .folio-ui.folio-result-mode #baziChartSection > .panel-heading > div:first-child h3 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.22;
    letter-spacing: .12em;
  }

  .folio-ui.folio-result-mode #baziChartSection > .panel-heading > div:first-child span {
    writing-mode: horizontal-tb;
  }

  .folio-ui.folio-result-mode .professional-chart thead th {
    height: 52px;
    padding: 6px 8px;
  }

  .folio-ui.folio-result-mode .professional-chart thead th b { font-size: 16px; }
  .folio-ui.folio-result-mode .professional-row > th { padding: 7px 6px; }
  .folio-ui.folio-result-mode .professional-row > th b { font-size: 14px; }
  .folio-ui.folio-result-mode .professional-row > th small { font-size: 8px; }
  .folio-ui.folio-result-mode .professional-row td { padding: 6px 6px; }
  .folio-ui.folio-result-mode .row-main-star td { height: 44px; }
  .folio-ui.folio-result-mode .row-symbol td { height: 66px; }
  .folio-ui.folio-result-mode .detail-character { width: 48px; height: 48px; font-size: 33px; }
  .folio-ui.folio-result-mode .professional-stack { min-height: 70px; gap: 3px; }
  .folio-ui.folio-result-mode .professional-stack > span { min-height: 18px; }
  .folio-ui.folio-result-mode .professional-value,
  .folio-ui.folio-result-mode .professional-nayin,
  .folio-ui.folio-result-mode .professional-vault { font-size: 12px; }

  .folio-ui.folio-result-mode .fortune-scroll-region { padding-top: 9px; }
  .folio-ui.folio-result-mode .fortune-track { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .folio-ui.folio-result-mode .dayun-card {
    min-height: 66px;
    padding: 7px 3px 6px;
  }
  .folio-ui.folio-result-mode .dayun-card .fortune-ten-gods,
  .folio-ui.folio-result-mode .dayun-card .dayun-rating { display: none !important; }
  .folio-ui.folio-result-mode .dayun-card .ganzhi-colored { gap: 2px; }
  .folio-ui.folio-result-mode .dayun-card .ganzhi-colored b { font-size: 16px; }
  .folio-ui.folio-result-mode .dayun-card .fortune-years,
  .folio-ui.folio-result-mode .dayun-card > small { font-size: 8px; }

  .folio-ui.folio-result-mode .liunian-panel { padding-bottom: 11px; }
  .folio-ui.folio-result-mode .liunian-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .folio-ui.folio-result-mode .liunian {
    min-width: 0;
    min-height: 58px;
    padding: 6px 3px;
    border: 0;
    border-right: 1px solid var(--folio-rule);
    background: transparent;
  }
  .folio-ui.folio-result-mode .liunian:last-child { border-right: 0; }
  .folio-ui.folio-result-mode .liunian .fortune-ten-gods { display: none !important; }
  .folio-ui.folio-result-mode .liunian .ganzhi-colored { gap: 2px; }
  .folio-ui.folio-result-mode .liunian .ganzhi-colored b { font-size: 16px; }
  .folio-ui.folio-result-mode .liunian .fortune-year,
  .folio-ui.folio-result-mode .liunian > small { font-size: 8px; }
  .folio-ui.folio-result-mode .liunian[aria-selected="true"] {
    color: #fff;
    background: var(--cinnabar);
    box-shadow: none;
  }
  .folio-ui.folio-result-mode .liunian[aria-selected="true"] * { color: inherit !important; }

  .folio-ui.folio-result-mode #baziRelationsSection {
    padding-top: 10px;
    padding-bottom: 14px;
  }
  .folio-ui.folio-result-mode #baziRelationsSection .relation-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border: 0;
    background: transparent;
  }
  .folio-ui.folio-result-mode #baziRelationsSection .relation-summary > * {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .folio-ui.folio-result-mode .relation-primary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--folio-rule-strong);
    background: rgba(250, 247, 239, .32);
  }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row {
    display: block;
    min-width: 0;
    min-height: 92px;
    padding: 13px 15px 12px;
    border-right: 1px solid var(--folio-rule);
  }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row:last-child { border-right: 0; }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row dt {
    margin-bottom: 8px;
    color: var(--folio-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row dd {
    font-size: 12px;
    line-height: 1.72;
  }
  .folio-ui.folio-result-mode .relation-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--folio-rule);
    border-top: 0;
    background: rgba(103, 79, 52, .025);
  }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 8px 11px;
    border-right: 1px solid var(--folio-rule);
  }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row:last-child { border-right: 0; }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row dt { font-size: 9px; }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row dd { color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
  .folio-ui.folio-result-mode .flow-relations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 8px !important;
    border: 1px solid var(--folio-rule);
  }
  .folio-ui.folio-result-mode .flow-relations .relation-row {
    display: block;
    min-width: 0;
    padding: 9px 11px;
    border-right: 1px solid var(--folio-rule);
  }
  .folio-ui.folio-result-mode .flow-relations .relation-row:last-child { border-right: 0; }
  .folio-ui.folio-result-mode .flow-relations .relation-row dt { margin-bottom: 5px; font-size: 9px; }
  .folio-ui.folio-result-mode .flow-relations .relation-row dd { font-size: 10px; line-height: 1.55; }

  .folio-ui.folio-result-mode .folio-tool-rail button { min-height: 90px; }
}

@media (max-width: 700px) {
  .folio-ui.folio-result-mode .site-header {
    position: sticky;
    top: 0;
    background: rgba(250, 247, 239, .98);
  }

  .folio-ui.folio-result-mode #baziResultShell { padding-inline: 8px; }
  .folio-ui.folio-result-mode #baziChartSection > .panel-heading { padding-inline: 10px; }
  .folio-ui.folio-result-mode .professional-chart-scroll { border-color: var(--folio-rule-strong); }
  .folio-ui.folio-result-mode .professional-chart thead th { height: 47px; padding: 5px 1px; }
  .folio-ui.folio-result-mode .professional-chart thead th b { font-size: 12px; }
  .folio-ui.folio-result-mode .professional-chart thead th small { font-size: 7px; }
  .folio-ui.folio-result-mode .professional-row > th { width: 45px !important; padding: 5px 1px; }
  .folio-ui.folio-result-mode .professional-row > th b { font-size: 10px; }
  .folio-ui.folio-result-mode .professional-row > th small { font-size: 6px; }
  .folio-ui.folio-result-mode .professional-row td { padding: 5px 1px; }
  .folio-ui.folio-result-mode .row-symbol td { height: 49px; }
  .folio-ui.folio-result-mode .detail-character { width: 35px; height: 35px; font-size: 25px; }
  .folio-ui.folio-result-mode .professional-stack { min-height: 55px; gap: 2px; }
  .folio-ui.folio-result-mode .hidden-stem-stack b { font-size: 12px; }
  .folio-ui.folio-result-mode .professional-hidden-god { font-size: 8px; }
  .folio-ui.folio-result-mode .professional-value { font-size: 9px; }
  .folio-ui.folio-result-mode .professional-nayin { font-size: 8px; }

  .folio-ui.folio-result-mode #baziFortuneSection { background: rgba(250, 247, 239, .55); }
  .folio-ui.folio-result-mode .fortune-track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .folio-ui.folio-result-mode .dayun-card {
    min-height: 65px;
    padding: 6px 1px;
  }
  .folio-ui.folio-result-mode .dayun-card .fortune-ten-gods,
  .folio-ui.folio-result-mode .dayun-card .dayun-rating { display: none !important; }
  .folio-ui.folio-result-mode .dayun-card .ganzhi-colored { gap: 1px; }
  .folio-ui.folio-result-mode .dayun-card .ganzhi-colored b { font-size: 15px; }
  .folio-ui.folio-result-mode .dayun-card .fortune-years,
  .folio-ui.folio-result-mode .dayun-card > small { font-size: 7px; }

  .folio-ui.folio-result-mode .liunian-panel { padding-top: 8px; }
  .folio-ui.folio-result-mode .liunian-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .folio-ui.folio-result-mode .liunian {
    min-width: 0;
    min-height: 62px;
    padding: 6px 1px;
    border: 0;
    border-right: 1px solid var(--folio-rule);
    border-bottom: 1px solid var(--folio-rule);
    background: transparent;
  }
  .folio-ui.folio-result-mode .liunian:nth-child(5n) { border-right: 0; }
  .folio-ui.folio-result-mode .liunian .fortune-ten-gods { display: none !important; }
  .folio-ui.folio-result-mode .liunian .ganzhi-colored { gap: 1px; }
  .folio-ui.folio-result-mode .liunian .ganzhi-colored b { font-size: 15px; }
  .folio-ui.folio-result-mode .liunian .fortune-year,
  .folio-ui.folio-result-mode .liunian > small { font-size: 7px; }
  .folio-ui.folio-result-mode .liunian[aria-selected="true"] {
    color: #fff;
    background: var(--cinnabar);
  }
  .folio-ui.folio-result-mode .liunian[aria-selected="true"] * { color: inherit !important; }

  .folio-ui.folio-result-mode #baziRelationsSection .relation-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border: 0;
  }
  .folio-ui.folio-result-mode #baziRelationsSection .relation-summary > * {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .folio-ui.folio-result-mode .relation-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--folio-rule-strong);
  }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row {
    display: block;
    min-height: 82px;
    padding: 9px 10px;
    border-right: 1px solid rgba(103, 79, 52, .14);
    border-bottom: 1px solid rgba(103, 79, 52, .14);
  }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row:nth-child(2n) { border-right: 0; }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row:nth-last-child(-n+2) { border-bottom: 0; }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row dt { margin-bottom: 5px; color: var(--folio-gold); font-size: 10px; }
  .folio-ui.folio-result-mode .relation-primary-grid .relation-row dd { font-size: 11px; line-height: 1.6; }
  .folio-ui.folio-result-mode .relation-meta-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    border: 1px solid var(--folio-rule);
    border-top: 0;
  }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row,
  .folio-ui.folio-result-mode .flow-relations .relation-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(103, 79, 52, .14);
  }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row:last-child,
  .folio-ui.folio-result-mode .flow-relations .relation-row:last-child { border-bottom: 0; }
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row dt,
  .folio-ui.folio-result-mode .relation-meta-strip .relation-row dd,
  .folio-ui.folio-result-mode .flow-relations .relation-row dt,
  .folio-ui.folio-result-mode .flow-relations .relation-row dd { font-size: 10px; }
  .folio-ui.folio-result-mode .flow-relations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 8px 0 0 !important;
    border: 1px solid var(--folio-rule);
  }
}

/* ========================================================================== */
/* Folio refinement 8 — unified rice-paper system and compact result layout   */
/* ========================================================================== */

.folio-ui {
  --paper-page: #f5f0e6;
  --paper-card: #faf7ef;
  --paper-soft: #f8f3e9;
  --ink-green: #123f38;
  --ink-green-soft: #315d54;
  --cinnabar-refined: #a84638;
  --gold-brown: #9a7a42;
  --paper-rule: rgba(112, 88, 53, .24);
  background: var(--paper-page);
}

.folio-ui .site-header,
.folio-ui .chart-card,
.folio-ui .panel,
.folio-ui .result-banner,
.folio-ui dialog,
.folio-ui .history-dialog,
.folio-ui .membership-dialog,
.folio-ui .admin-dialog,
.folio-ui .compatibility-card,
.folio-ui .ziwei-palace,
.folio-ui .ziwei-center {
  border-color: var(--paper-rule);
  background-color: var(--paper-card);
}

.folio-ui .site-header {
  border-bottom-color: rgba(112, 88, 53, .28);
  background: rgba(250, 247, 239, .97);
  box-shadow: 0 4px 18px rgba(69, 54, 35, .025);
}

.folio-ui .hero {
  background: var(--paper-card);
}

.folio-ui .hero-copy {
  border-right-color: var(--paper-rule);
  background: linear-gradient(180deg, rgba(250,247,239,.94), rgba(250,247,239,.72));
}

.folio-ui .hero-landscape {
  opacity: .72;
  filter: sepia(.08) saturate(.8) contrast(.92);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}

.folio-ui .chart-card {
  box-shadow: none;
}

.folio-ui .entry-mode-switch,
.folio-ui .segmented,
.folio-ui .field input,
.folio-ui .field select,
.folio-ui .solar-time-setting,
.folio-ui .precision-options {
  border-color: var(--paper-rule);
  background-color: rgba(255, 253, 247, .42);
}

.folio-ui .entry-mode-switch button[aria-pressed="true"],
.folio-ui .segmented input:checked + span,
.folio-ui .primary-button {
  background: linear-gradient(90deg, #0f4a42, #123f38);
}

.folio-ui .primary-button {
  border-color: #0d4039;
  box-shadow: inset 0 0 0 1px rgba(230, 210, 165, .16);
}

.folio-ui .classic-sources,
.folio-ui .analysis-evidence {
  display: none !important;
}

.folio-ui.folio-result-mode #baziResultShell > .result-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.folio-ui.folio-result-mode #baziResultShell > .result-columns > .panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex-direction: column;
  align-self: start;
  background: var(--paper-card);
}

.folio-ui.folio-result-mode #baziResultShell > .result-columns > .panel > :last-child {
  margin-bottom: 0;
}

.folio-ui.folio-result-mode #baziYongSection #yongSummary,
.folio-ui.folio-result-mode #baziYongSection #yongEvidence,
.folio-ui.folio-result-mode .balance-panel #elementBars,
.folio-ui.folio-result-mode .balance-panel #yinYangPanel {
  min-width: 0;
}

.folio-ui.folio-result-mode #baziYongSection .evidence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--paper-rule);
  border-left: 1px solid var(--paper-rule);
}

.folio-ui.folio-result-mode #baziYongSection .evidence-item {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  background: rgba(112, 88, 53, .025);
}

.folio-ui.folio-result-mode #baziYongSection .evidence-item b {
  color: var(--ink-green);
  font-size: 12px;
  letter-spacing: .08em;
}

.folio-ui.folio-result-mode #baziYongSection .evidence-item p {
  margin: 6px 0 0;
  color: #66736e;
  font-size: 10px;
  line-height: 1.65;
}

.folio-ui.folio-result-mode #baziYongSection .evidence-list.yong-natural-summary {
  display: block;
  margin-top: 18px;
  padding: 0;
  border: 1px solid var(--paper-rule);
  background: rgba(112, 88, 53, .025);
}

.folio-ui.folio-result-mode #baziYongSection .yong-natural-summary p {
  margin: 0;
  padding: 14px 16px;
  color: #56655f;
  font-size: 12px;
  line-height: 1.85;
}

.folio-ui.folio-result-mode #baziYongSection .yong-natural-summary p + p {
  border-top: 1px solid var(--paper-rule);
}

.folio-ui.folio-result-mode .hidden-stem-stack {
  align-content: center;
  justify-items: center;
}

.folio-ui.folio-result-mode .hidden-stem-stack > .hidden-stem-pair {
  display: inline-grid;
  grid-template-columns: minmax(1em, auto) minmax(2.7em, auto);
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  min-width: 84px;
  min-height: 20px;
  line-height: 1.25;
}

.folio-ui.folio-result-mode .hidden-stem-pair > b {
  justify-self: end;
  font-size: 15px;
  font-weight: 600;
}

.folio-ui.folio-result-mode .hidden-stem-pair .professional-hidden-god {
  justify-self: start;
  padding: 0;
  color: #53635e;
  font-size: 11px;
  line-height: inherit;
  text-align: left;
}

@media (min-width: 1180px) {
  .folio-ui .hero {
    grid-template-columns: minmax(380px, 38%) minmax(0, 62%);
  }

  .folio-ui .hero-copy {
    padding-left: clamp(70px, 7vw, 118px);
  }

  .folio-ui .chart-card {
    padding-right: clamp(54px, 5.5vw, 92px);
    padding-left: clamp(54px, 5.5vw, 92px);
  }
}

@media (max-width: 700px) {
  .folio-ui .hero {
    background: var(--paper-page);
  }

  .folio-ui .hero-copy {
    border-right: 0;
    background: transparent;
  }

  .folio-ui .hero-landscape {
    opacity: .28;
  }

  .folio-ui.folio-result-mode #baziResultShell > .result-columns {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .folio-ui.folio-result-mode #baziResultShell > .result-columns > .panel {
    display: block;
    min-height: 0;
    height: auto;
  }

  .folio-ui.folio-result-mode #baziYongSection .evidence-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
  }

  .folio-ui.folio-result-mode #baziYongSection .evidence-item {
    padding: 9px 8px;
  }

  .folio-ui.folio-result-mode #baziYongSection .evidence-item b { font-size: 10px; }
  .folio-ui.folio-result-mode #baziYongSection .evidence-item p { font-size: 8px; line-height: 1.55; }

  .folio-ui.folio-result-mode #baziYongSection .yong-natural-summary p {
    padding: 11px 12px;
    font-size: 10px;
    line-height: 1.75;
  }

  .folio-ui.folio-result-mode .professional-chart-scroll {
    overflow-x: hidden;
  }

  .folio-ui.folio-result-mode .professional-chart {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .folio-ui.folio-result-mode .professional-chart thead th:first-child,
  .folio-ui.folio-result-mode .professional-row > th {
    position: static;
    width: 44px !important;
    box-shadow: none;
  }

  .folio-ui.folio-result-mode .professional-chart thead th:not(:first-child) {
    width: calc((100% - 44px) / 4);
  }

  .folio-ui.folio-result-mode .professional-stack {
    min-height: 52px;
  }

  .folio-ui.folio-result-mode .hidden-stem-stack > .hidden-stem-pair {
    grid-template-columns: minmax(.8em, auto) minmax(2.3em, auto);
    gap: 3px;
    min-width: 0;
    min-height: 17px;
  }

  .folio-ui.folio-result-mode .hidden-stem-pair > b { font-size: 11px; }
  .folio-ui.folio-result-mode .hidden-stem-pair .professional-hidden-god { font-size: 7px; white-space: nowrap; }
}

@media print {
  .folio-ui .folio-mobile-tools,
  .folio-ui .folio-tool-rail { display: none !important; }
}

/* ========================================================================== */
/* Folio refinement 7 — restore complete chart data and remove false whitespace */
/* ========================================================================== */

@media (min-width: 701px) {
  .folio-ui.folio-result-mode #baziChartSection > .panel-heading > div:first-child {
    min-height: 0;
  }

  .folio-ui.folio-result-mode .professional-chart .row-shensha {
    display: table-row !important;
  }

  .folio-ui.folio-result-mode .row-shensha td {
    padding: 10px 7px 12px;
  }

  .folio-ui.folio-result-mode .professional-shensha {
    gap: 4px;
  }

  .folio-ui.folio-result-mode .professional-shensha-item b {
    font-size: 10px;
  }

  .folio-ui.folio-result-mode .professional-shensha-item small {
    font-size: 8px;
  }

  .folio-ui.folio-result-mode .auxiliary-pillars {
    display: grid !important;
    margin: -1px 14px 0;
    border-color: var(--folio-rule);
  }

  .folio-ui.folio-result-mode .auxiliary-pillars article {
    padding: 9px 13px;
  }

  .folio-ui.folio-result-mode #baziResultShell > .result-columns {
    align-items: stretch;
  }

  .folio-ui.folio-result-mode #baziResultShell > .result-columns > .panel {
    align-self: stretch;
    min-height: 100%;
    height: 100%;
  }
}

@media (min-width: 1101px) {
  .folio-ui.folio-result-mode #baziYongSection .evidence-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--folio-rule);
    border-left: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode #baziYongSection .evidence-item {
    min-width: 0;
    padding: 10px 12px;
    border-right: 1px solid var(--folio-rule);
    border-bottom: 1px solid var(--folio-rule);
    background: rgba(103, 79, 52, .035);
  }

  .folio-ui.folio-result-mode #baziYongSection .evidence-item.avoid {
    border-left: 0;
    box-shadow: inset 2px 0 0 rgba(165, 70, 56, .58);
  }
}

@media (max-width: 700px) {
  .folio-ui.folio-result-mode .professional-chart .row-main-star,
  .folio-ui.folio-result-mode .professional-chart .row-shensha {
    display: table-row !important;
  }

  .folio-ui.folio-result-mode .row-main-star td {
    height: 38px;
  }

  .folio-ui.folio-result-mode .professional-main-star {
    gap: 2px;
  }

  .folio-ui.folio-result-mode .professional-main-star .professional-ten-god {
    font-size: 9px;
  }

  .folio-ui.folio-result-mode .row-shensha td {
    padding: 7px 2px 8px;
    vertical-align: top;
  }

  .folio-ui.folio-result-mode .professional-shensha {
    gap: 3px;
    justify-items: stretch;
  }

  .folio-ui.folio-result-mode .professional-shensha-item {
    min-width: 0;
    min-height: 24px;
    justify-content: center;
    padding: 2px 1px;
    line-height: 1.25;
  }

  .folio-ui.folio-result-mode .professional-shensha-item b {
    overflow-wrap: anywhere;
    font-size: 8px;
  }

  .folio-ui.folio-result-mode .professional-shensha-item small {
    display: none;
  }

  .folio-ui.folio-result-mode .professional-shensha-toggle {
    min-height: 28px;
    margin-top: 1px;
    padding: 3px 1px;
    font-size: 8px;
  }

  .folio-ui.folio-result-mode .auxiliary-pillars {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -1px 0 0;
    border-color: var(--folio-rule-strong);
  }

  .folio-ui.folio-result-mode .auxiliary-pillars article {
    display: block;
    min-width: 0;
    padding: 7px 2px;
  }

  .folio-ui.folio-result-mode .auxiliary-trigger {
    width: 100%;
    min-width: 0;
    gap: 3px;
    padding: 0;
  }

  .folio-ui.folio-result-mode .auxiliary-pillars article > span,
  .folio-ui.folio-result-mode .auxiliary-trigger > span {
    font-size: 8px;
  }

  .folio-ui.folio-result-mode .auxiliary-pillars strong {
    justify-self: center;
    font-size: 14px;
  }

  .folio-ui.folio-result-mode .auxiliary-pillars small {
    font-size: 7px;
  }

  .folio-ui.folio-result-mode #baziResultShell > .result-columns {
    align-items: start;
  }

  .folio-ui.folio-result-mode #baziResultShell > .result-columns > .panel {
    min-height: 0;
    height: auto;
  }

}

/* ========================================================================== */
/* Final responsive result layer · canonical breakpoints                       */
/* ========================================================================== */

.folio-ui .result-section,
.folio-ui .result-shell,
.folio-ui .result-banner,
.folio-ui .panel,
.folio-ui .bazi-panel,
.folio-ui .compatibility-result-shell,
.folio-ui .ziwei-result-shell,
.folio-ui .result-columns,
.folio-ui .compatibility-people,
.folio-ui .compatibility-purpose-panel,
.folio-ui .compatibility-score-distribution { min-width: 0; max-width: 100%; }

.folio-ui .mobile-wide-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.folio-ui .mobile-wide-scroll > * { max-width: none; }

@media (min-width: 768px) and (max-width: 1024px) {
  .folio-ui.folio-result-mode .result-section { overflow-x: clip; }

  .folio-ui.folio-result-mode .result-banner {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin: 12px auto;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  .folio-ui.folio-result-mode .folio-record-grid {
    width: 100%;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 15px 18px !important;
  }

  .folio-ui.folio-result-mode .folio-record-grid dt { white-space: normal; }

  .folio-ui.folio-result-mode .result-actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .result-shell {
    width: 100%;
    max-width: 100%;
    padding-inline: 14px;
  }

  .folio-ui.folio-result-mode #baziChartSection {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .folio-ui.folio-result-mode #baziChartSection > .panel-heading > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .folio-ui.folio-result-mode .bazi-heading-actions {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .bazi-heading-actions .chart-view-switch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .folio-ui.folio-result-mode #baziProfessionalDisclosure {
    grid-column: 2;
    grid-row: 2;
    border-right: 0;
  }

  .folio-ui.folio-result-mode .folio-tool-rail {
    grid-column: 1 / -1;
    grid-row: 3 !important;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    box-sizing: border-box;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .folio-tool-rail button {
    min-width: 0;
    min-height: 56px;
    border-top: 0 !important;
    border-left: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .folio-tool-rail button:first-child { border-left: 0; }

  .folio-ui .compatibility-smart-diagram { min-width: 920px; }
  .folio-ui .ziwei-chart { min-width: 980px; }
}

@media (max-width: 767px) {
  .folio-ui .result-section { overflow-x: clip; }

  .folio-ui .result-shell {
    width: 100%;
    max-width: 100%;
    padding: 0 12px 78px !important;
  }

  .folio-ui.folio-result-mode #baziFolioTabs {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 8px auto 10px;
    box-sizing: border-box;
  }

  .folio-ui.folio-result-mode #baziFolioTabs button {
    min-width: 0;
    min-height: 44px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 0 8px;
    text-align: center;
  }

  .folio-ui .result-shell > *,
  .folio-ui .panel,
  .folio-ui .bazi-subsection,
  .folio-ui .liunian-panel,
  .folio-ui .flow-panel,
  .folio-ui .compatibility-purpose-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .folio-ui.folio-result-mode .result-banner {
    display: grid !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px !important;
    padding: 13px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .folio-ui.folio-result-mode .folio-record-grid {
    width: 100%;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 !important;
  }

  .folio-ui.folio-result-mode #baziChartSection {
    display: block !important;
    width: 100%;
  }

  .folio-ui.folio-result-mode #baziChartSection > .panel-heading,
  .folio-ui.folio-result-mode #baziProfessionalDisclosure,
  .folio-ui.folio-result-mode #standardChartView,
  .folio-ui.folio-result-mode #smartChartView,
  .folio-ui.folio-result-mode #smartShenshaStrip,
  .folio-ui.folio-result-mode #baziRelationsSection,
  .folio-ui.folio-result-mode #baziFortuneSection {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .folio-ui.folio-result-mode .folio-tool-rail { display: none !important; }

  /* Preserve the complete professional table and readable type. Only this
     region scrolls; the page itself never becomes wider than the viewport. */
  .folio-ui .professional-chart-scroll,
  .folio-ui.folio-result-mode .professional-chart-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    border: 1px solid var(--folio-rule-strong);
  }

  .folio-ui .professional-chart,
  .folio-ui.folio-result-mode .professional-chart {
    width: 720px !important;
    min-width: 720px !important;
    table-layout: fixed;
  }

  .folio-ui .professional-chart thead th { height: 54px; padding: 6px 3px; }
  .folio-ui .professional-chart thead th:first-child,
  .folio-ui .professional-row > th { width: 86px; min-width: 86px; }
  .folio-ui .professional-chart thead th b { font-size: 13px !important; }
  .folio-ui .professional-chart thead th small { font-size: 9px !important; }
  .folio-ui .professional-row > th b { font-size: 11px !important; }
  .folio-ui .professional-row > th small { font-size: 8px !important; }
  .folio-ui .professional-glyph { font-size: 31px !important; }
  .folio-ui .professional-hidden-pair b { font-size: 13px !important; }
  .folio-ui .professional-hidden-pair small { font-size: 11px !important; }
  .folio-ui .professional-text,
  .folio-ui .professional-nayin,
  .folio-ui .professional-vault { font-size: 11px !important; }

  .folio-ui .smart-chart-scroll,
  .folio-ui .ziwei-chart-scroll,
  .folio-ui .compatibility-smart-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
  }

  .folio-ui .smart-chart { width: 760px; min-width: 760px !important; }
  .folio-ui .ziwei-chart { width: 980px; min-width: 980px !important; }
  .folio-ui .compatibility-smart-diagram { width: 920px; min-width: 920px !important; }
  .folio-ui .compatibility-smart-diagram svg { width: 920px; min-width: 920px; max-width: none; }

  .folio-ui .mobile-scroll-hint {
    display: block;
    margin: 0 0 7px;
    color: var(--folio-muted);
    font-size: 11px !important;
    line-height: 1.55;
    text-align: right;
  }

  .folio-ui .mobile-scroll-region {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .folio-ui .mobile-scroll-region::after {
    content: "";
    position: absolute;
    top: 27px;
    right: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(250, 247, 239, .86));
    opacity: .8;
  }

  .folio-ui .mobile-scroll-region.is-at-end::after { opacity: 0; }

  /* Dayun is a readable snap track instead of five squeezed columns. */
  .folio-ui .fortune-scroll-region {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .folio-ui .fortune-track,
  .folio-ui.folio-result-mode .fortune-track {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(118px, 38vw);
    grid-template-columns: none !important;
    gap: 8px;
    padding: 2px 2px 12px;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }

  .folio-ui .dayun-card,
  .folio-ui.folio-result-mode .dayun-card {
    width: auto;
    min-width: 0;
    min-height: 174px;
    padding: 13px 8px 10px;
    scroll-snap-align: start;
    border: 1px solid var(--folio-rule);
  }

  .folio-ui .dayun-card .ganzhi-colored b { font-size: 20px; }
  .folio-ui .fortune-ten-gods { font-size: 10px; }
  .folio-ui .fortune-hidden-pair b { font-size: 13px; }
  .folio-ui .fortune-hidden-pair small { font-size: 10px; }
  .folio-ui .fortune-years,
  .folio-ui .dayun-card > small { font-size: 10px; }

  .folio-ui .liunian-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .folio-ui .liunian {
    width: 100%;
    min-width: 0;
    min-height: 158px;
    padding: 11px 7px 9px;
    border: 1px solid var(--folio-rule);
  }

  .folio-ui .liunian .ganzhi-colored b { font-size: 20px; }
  .folio-ui .liunian .fortune-ten-gods { font-size: 10px; }
  .folio-ui .liunian > span,
  .folio-ui .liunian > small { font-size: 10px; }

  .folio-ui .flow-months { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .folio-ui .flow-days { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .folio-ui .relation-lines,
  .folio-ui .relation-lines.fortune-relations,
  .folio-ui .compatibility-relation-groups,
  .folio-ui .compatibility-factor-grid,
  .folio-ui .compatibility-dimension-grid,
  .folio-ui .compatibility-deep-grid,
  .folio-ui .result-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .folio-ui .relation-row { grid-template-columns: 82px minmax(0, 1fr); }
  .folio-ui .relation-row dt { font-size: 11px; }
  .folio-ui .relation-row dd { font-size: 12px; overflow-wrap: anywhere; }

  .folio-ui .compatibility-score-distribution {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .folio-ui .compatibility-score-distribution ol {
    width: 100%;
    min-width: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }

  .folio-ui .compatibility-score-distribution li { padding: 7px 4px; }
  .folio-ui .compatibility-score-distribution li b { font-size: 10px; }
  .folio-ui .compatibility-score-distribution li small { font-size: 8px; overflow-wrap: anywhere; }

  .folio-ui .compatibility-score-bars > div {
    grid-template-columns: minmax(92px, 1fr) minmax(86px, 1.25fr) 28px;
  }
}

@media (min-width: 1025px) {
  .folio-ui .mobile-wide-scroll { overflow-x: visible; }
  .folio-ui .mobile-scroll-hint { display: none; }
}

/* Mobile one-glance charts -------------------------------------------------
   The four-pillar, Ziwei and compatibility charts are deliberately fitted to
   the viewport. Fortune tracks remain horizontally browsable by design. */
@media (max-width: 767px) {
  .folio-ui .solar-time-setting {
    min-height: 0 !important;
    padding: 9px 10px !important;
  }

  .folio-ui .solar-time-setting .check-field {
    min-height: 30px !important;
    gap: 8px !important;
  }

  .folio-ui #trueSolarTime,
  .folio-ui .solar-time-setting input[type="checkbox"] {
    appearance: auto !important;
    inline-size: 18px !important;
    block-size: 18px !important;
    min-inline-size: 18px !important;
    min-block-size: 18px !important;
    max-inline-size: 18px !important;
    max-block-size: 18px !important;
    flex: 0 0 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    accent-color: var(--folio-ink);
  }

  .folio-ui .solar-time-setting .check-field b {
    font-size: 13px !important;
    letter-spacing: .06em !important;
  }

  /* The long desktop record ledger duplicates the concise result heading on
     phones. Removing it makes the result entry calm and immediately useful. */
  .folio-ui.folio-result-mode .folio-record-grid {
    display: none !important;
  }

  .folio-ui.folio-result-mode .result-banner {
    gap: 8px !important;
    padding: 12px !important;
  }

  .folio-ui.folio-result-mode .result-banner > div:nth-child(2) {
    min-width: 0;
  }

  .folio-ui.folio-result-mode #resultMeta,
  .folio-ui.folio-result-mode #resultDaylightSaving {
    font-size: 10px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
  }

  .folio-ui .chart-fit-region::before,
  .folio-ui .chart-fit-region::after {
    display: none !important;
  }

  .folio-ui .chart-fit-region .mobile-scroll-hint {
    display: none !important;
  }

  .folio-ui .professional-chart-scroll,
  .folio-ui.folio-result-mode .professional-chart-scroll,
  .folio-ui .smart-chart-scroll,
  .folio-ui .ziwei-chart-scroll,
  .folio-ui .compatibility-smart-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    scrollbar-width: none;
  }

  /* Four pillars: 52px row label + four equal pillar columns. */
  .folio-ui .professional-chart,
  .folio-ui.folio-result-mode .professional-chart {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .folio-ui .professional-chart thead th:first-child,
  .folio-ui .professional-row > th {
    position: static !important;
    width: 52px !important;
    min-width: 52px !important;
    padding: 5px 2px !important;
    box-shadow: none !important;
  }

  .folio-ui .professional-chart thead th {
    height: 45px !important;
    padding: 4px 2px !important;
  }

  .folio-ui .professional-chart thead th b { font-size: 11px !important; }
  .folio-ui .professional-chart thead th small { font-size: 7px !important; }
  .folio-ui .professional-row > th b { font-size: 10px !important; letter-spacing: .04em !important; }
  .folio-ui .professional-row > th small { font-size: 7px !important; letter-spacing: 0 !important; }
  .folio-ui .professional-row td { padding: 6px 2px !important; }
  .folio-ui .row-symbol td { height: 58px !important; padding-block: 4px !important; }
  .folio-ui .detail-character {
    width: 38px !important;
    height: 38px !important;
    font-size: 27px !important;
  }
  .folio-ui .professional-main-star,
  .folio-ui .hidden-stem-pair { gap: 3px !important; }
  .folio-ui .professional-ten-god { font-size: 10px !important; }
  .folio-ui .professional-main-star small { font-size: 7px !important; }
  .folio-ui .professional-stack {
    min-height: 62px !important;
    gap: 3px !important;
  }
  .folio-ui .professional-stack > span { min-height: 16px !important; }
  .folio-ui .hidden-stem-stack b,
  .folio-ui .professional-hidden-pair b { font-size: 12px !important; }
  .folio-ui .professional-hidden-god,
  .folio-ui .professional-hidden-pair small { font-size: 9px !important; }
  .folio-ui .professional-value,
  .folio-ui .professional-nayin,
  .folio-ui .professional-vault { font-size: 9px !important; }
  .folio-ui .row-shensha td { padding: 7px 2px 9px !important; }
  .folio-ui .professional-shensha { gap: 3px !important; }
  .folio-ui .professional-shensha-item b { font-size: 9px !important; }
  .folio-ui .professional-shensha-item small { display: none; }
  .folio-ui .professional-shensha-toggle {
    min-height: 28px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  /* Smart four-pillar view keeps the same seven-lane relationship structure,
     but each lane is proportional to the phone width. */
  .folio-ui .smart-chart {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(44px, 1fr) minmax(24px, .55fr) minmax(44px, 1fr) minmax(24px, .55fr) minmax(44px, 1fr) minmax(24px, .55fr) minmax(44px, 1fr) !important;
    grid-template-rows: 40px 58px 68px 58px auto !important;
    padding: 12px 5px 10px !important;
  }
  .folio-ui .smart-column-meta > span { font-size: 8px !important; letter-spacing: .08em !important; }
  .folio-ui .smart-ten-god { font-size: 9px !important; }
  .folio-ui .smart-character { width: 42px !important; height: 42px !important; font-size: 30px !important; }
  .folio-ui .smart-link { height: 34px !important; }
  .folio-ui .smart-link > b { min-width: 22px !important; height: 22px !important; padding: 0 3px !important; font-size: 8px !important; }
  .folio-ui .smart-link.vertical { width: 30px !important; }
  .folio-ui .smart-hidden { gap: 3px !important; padding-top: 4px !important; font-size: 8px !important; }
  .folio-ui .smart-hidden > span { gap: 2px !important; }
  .folio-ui .smart-hidden b { font-size: 11px !important; }
  .folio-ui .smart-hidden-god,
  .folio-ui .smart-hidden small,
  .folio-ui .smart-hidden .smart-chang-sheng { font-size: 8px !important; }

  /* Ziwei: preserve the complete 4×4 palace square inside the viewport. */
  .folio-ui .ziwei-chart {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(150px, auto)) !important;
  }
  .folio-ui #ziweiResultShell .ziwei-panel,
  .folio-ui #compatibilityResultShell .compatibility-panel {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }
  .folio-ui #ziweiProfessionalContent,
  .folio-ui #compatibilityProfessionalContent {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .folio-ui #ziweiResultShell .ziwei-panel-heading,
  .folio-ui #compatibilityResultShell .compatibility-panel-heading,
  .folio-ui #compatibilityResultShell .compatibility-smart-toolbar,
  .folio-ui #compatibilityResultShell .compatibility-relations {
    margin-right: 6px;
    margin-left: 6px;
  }
  .folio-ui .ziwei-palace {
    min-width: 0 !important;
    min-height: 150px !important;
    padding: 5px 4px !important;
  }
  .folio-ui .ziwei-palace header {
    min-height: 22px !important;
    gap: 2px !important;
    margin-bottom: 3px !important;
  }
  .folio-ui .ziwei-palace-title { min-height: 28px !important; font-size: 11px !important; }
  .folio-ui .ziwei-palace header > span { font-size: 9px !important; }
  .folio-ui .ziwei-palace header > i { padding: 1px 2px !important; font-size: 7px !important; }
  .folio-ui .ziwei-star-columns {
    min-height: 84px !important;
    display: block !important;
    padding: 1px 0 3px !important;
  }
  .folio-ui .ziwei-major-stars,
  .folio-ui .ziwei-minor-stars,
  .folio-ui .ziwei-adjective-stars,
  .folio-ui .ziwei-dynamic-stars {
    width: 100%;
    gap: 1px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }
  .folio-ui .ziwei-star {
    max-width: 100%;
    min-height: 18px !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .folio-ui .ziwei-star-major { font-size: 11px !important; }
  .folio-ui .ziwei-star small { font-size: 7px !important; }
  .folio-ui .ziwei-mutagen { width: 14px !important; height: 14px !important; font-size: 8px !important; }
  .folio-ui .ziwei-palace-foot {
    display: block !important;
    padding-top: 3px !important;
    font-size: 8px !important;
  }
  .folio-ui .ziwei-palace-foot small {
    display: block;
    margin-top: 2px;
    text-align: left !important;
    font-size: 7px !important;
    line-height: 1.3 !important;
  }
  .folio-ui .ziwei-center { padding: 8px 7px !important; }
  .folio-ui .ziwei-center-mark { font-size: 7px !important; letter-spacing: .08em !important; }
  .folio-ui .ziwei-center h3 { margin: 3px 0 2px !important; font-size: 16px !important; }
  .folio-ui .ziwei-center > p { margin-bottom: 5px !important; font-size: 8px !important; }
  .folio-ui .ziwei-center dl { grid-template-columns: 1fr !important; }
  .folio-ui .ziwei-center dl div {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 2px 1px !important;
  }
  .folio-ui .ziwei-center dt,
  .folio-ui .ziwei-center dd { font-size: 7px !important; overflow-wrap: anywhere; }
  .folio-ui .ziwei-center-horizon {
    gap: 3px !important;
    margin-top: 4px !important;
    flex-wrap: wrap;
  }
  .folio-ui .ziwei-center-horizon strong { font-size: 10px !important; }
  .folio-ui .ziwei-center-horizon span,
  .folio-ui .ziwei-center-horizon small { font-size: 7px !important; }

  /* Compatibility SVG already has a viewBox, so a fluid width preserves every
     node and line without a separate sideways canvas. */
  .folio-ui .compatibility-smart-diagram {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .folio-ui .compatibility-smart-diagram svg {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Final mobile fortune override: this intentionally comes after the legacy
   snap-track rules so the ten-column ledger is the rendered mobile layout. */
@media (max-width: 767px) {
  .folio-ui .fortune-track,
  .folio-ui.folio-result-mode .fortune-track,
  .folio-ui .liunian-grid,
  .folio-ui.folio-result-mode .liunian-grid {
    display: grid !important;
    grid-template-columns: 38px repeat(var(--fortune-count), minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
  }

  .folio-ui .dayun-card,
  .folio-ui.folio-result-mode .dayun-card,
  .folio-ui .liunian,
  .folio-ui.folio-result-mode .liunian {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 1px 8px !important;
    border: 0 !important;
    border-right: 1px solid var(--folio-rule) !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
    scroll-snap-align: none !important;
  }

  .folio-ui .liunian-grid { gap: 0 !important; }
  .folio-ui .dayun-card > :not(.fortune-mobile-summary),
  .folio-ui .liunian > :not(.fortune-mobile-summary) { display: none !important; }
  .folio-ui .fortune-mobile-summary { display: flex !important; }
  .folio-ui .fortune-mobile-axis { display: flex !important; }

  .folio-ui .dayun-card[aria-selected="true"] {
    color: var(--folio-ink) !important;
    background: rgba(18, 63, 56, .10) !important;
    box-shadow: inset 0 -3px 0 var(--folio-ink) !important;
  }

  .folio-ui .liunian[aria-selected="true"] {
    color: var(--folio-ink) !important;
    background: rgba(174, 68, 52, .08) !important;
    box-shadow: inset 0 -3px 0 var(--cinnabar) !important;
  }

  .folio-ui .dayun-card[aria-selected="true"] .element-木,
  .folio-ui .liunian[aria-selected="true"] .element-木 { color: var(--wood) !important; }
  .folio-ui .dayun-card[aria-selected="true"] .element-火,
  .folio-ui .liunian[aria-selected="true"] .element-火 { color: var(--fire) !important; }
  .folio-ui .dayun-card[aria-selected="true"] .element-土,
  .folio-ui .liunian[aria-selected="true"] .element-土 { color: var(--earth) !important; }
  .folio-ui .dayun-card[aria-selected="true"] .element-金,
  .folio-ui .liunian[aria-selected="true"] .element-金 { color: var(--metal) !important; }
  .folio-ui .dayun-card[aria-selected="true"] .element-水,
  .folio-ui .liunian[aria-selected="true"] .element-水 { color: var(--water) !important; }
  .folio-ui .dayun-card[aria-selected="true"] .fortune-mobile-pillar i,
  .folio-ui .liunian[aria-selected="true"] .fortune-mobile-pillar i { color: var(--cinnabar) !important; }
}

/* The compact folio hides the score breakdown until the dedicated tool is
   used. Keep the existing member filtering and rating content intact. */
.folio-ui.folio-result-mode .dayun-rating-detail.is-visible {
  display: grid !important;
  margin: 10px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--folio-rule-strong);
  background: rgba(250, 247, 239, .72);
  scroll-margin-top: 96px;
}

.folio-ui.folio-result-mode [data-folio-tool="dayun-rating"][aria-pressed="true"] {
  color: var(--cinnabar);
  background: rgba(174, 68, 52, .06);
}

@media (max-width: 767px) {
  .folio-ui.folio-result-mode .dayun-rating-detail.is-visible {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 12px;
  }

  .folio-ui.folio-result-mode .dayun-rating-detail.is-visible .rating-evidence[open] {
    grid-column: 1;
  }
}

/* Mobile form controls: the global 44px rule belongs to text fields and
   buttons, not native checkbox/radio glyphs. Keep the row tappable while the
   selection mark stays compact. */
@media (max-width: 767px) {
  .folio-ui .segmented input[type="radio"] {
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    clip-path: inset(50%) !important;
  }

  .folio-ui .precision-content input[type="radio"],
  .folio-ui .compat-time-unknown input[type="checkbox"],
  .folio-ui .solar-time-setting .check-field input[type="checkbox"] {
    appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
    accent-color: var(--folio-ink);
  }

  .folio-ui .precision-content label,
  .folio-ui .compat-time-unknown,
  .folio-ui .check-field {
    min-height: 44px;
  }

  .folio-ui .precision-content label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 2px;
  }

  .folio-ui .precision-content label span,
  .folio-ui .compat-time-unknown span,
  .folio-ui .check-field span {
    min-width: 0;
  }

  .folio-ui .compat-time-unknown {
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
  }
}

/* Tall desktop screens should follow the actual entry content instead of
   stretching both hero columns to the full viewport and leaving a large
   empty lower half. Longer compatibility forms can still grow naturally. */
@media (min-width: 1180px) and (min-height: 901px) {
  .folio-ui .hero,
  .folio-ui .hero-copy,
  .folio-ui .chart-card {
    min-height: clamp(760px, calc(100dvh - 78px), 860px) !important;
  }

  .folio-ui .hero { align-items: stretch; }
  .folio-ui .chart-card { align-self: stretch; }
}

/* Fortune ledger v2 --------------------------------------------------------
   The calculation payload stays unchanged; these rules only reorganize the
   selectable periods into a compact almanac-style reading surface. */
.folio-ui .professional-chart-frame {
  width: 100%;
  min-width: 0;
}

.folio-ui.folio-result-mode #standardChartView {
  padding-left: 0 !important;
}

.folio-ui.folio-result-mode .result-section {
  padding-top: 0 !important;
}

.folio-ui.folio-result-mode #baziProfessionalContent {
  padding-top: 0 !important;
}

.folio-ui.folio-result-mode .result-banner {
  margin-bottom: 0 !important;
}

.folio-ui .ziwei-heading-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.folio-ui .ziwei-heading-actions > p {
  max-width: 440px;
  margin: 0;
  color: var(--folio-muted);
  font-size: 11px;
  text-align: right;
  overflow-wrap: anywhere;
}

.folio-ui .ziwei-switch-bazi {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--folio-rule-strong);
  color: var(--folio-ink);
  background: rgba(250, 247, 239, .72);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.folio-ui .ziwei-switch-bazi:hover,
.folio-ui .ziwei-switch-bazi:focus-visible {
  color: #fff;
  border-color: var(--folio-ink);
  background: var(--folio-ink);
}

.folio-ui .ziwei-switch-bazi img {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .folio-ui .ziwei-panel-heading {
    flex-direction: column;
  }

  .folio-ui .ziwei-heading-actions {
    width: 100%;
  }

  .folio-ui .ziwei-heading-actions > p {
    display: none;
  }

  .folio-ui .ziwei-switch-bazi {
    width: 100%;
    min-height: 44px;
  }
}

.folio-ui.folio-result-mode .professional-chart-frame .auxiliary-pillars {
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  border-top: 0 !important;
}

.folio-ui .professional-chart .row-auxiliary > th {
  vertical-align: middle;
}

.folio-ui .professional-chart .professional-auxiliary-cell {
  padding: 0 !important;
}

.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-pillars {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  border: 0 !important;
}

.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-pillars article {
  min-width: 0;
  margin: 0;
  border-top: 0;
  border-left: 1px solid var(--folio-rule);
}

.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-pillars article:first-child {
  border-left: 0;
}

.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-trigger {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  gap: 3px 10px;
  padding: 8px 10px;
}

.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-trigger > span,
.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-trigger > strong {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-trigger > small {
  display: block;
  flex: 0 0 100%;
  margin: 0;
  text-align: center;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .folio-ui.folio-result-mode .professional-chart .row-auxiliary .auxiliary-trigger {
    min-height: 50px;
    gap: 2px 4px;
    padding: 6px 2px;
  }
}

.folio-ui .fortune-ledger-meta {
  min-width: 0;
}

.folio-ui .fortune-flow-row[hidden] {
  display: none !important;
}

.folio-ui .flow-toggle-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.folio-ui .flow-toggle-buttons button {
  min-width: 76px;
  min-height: 44px;
  padding: 8px 16px;
}

.folio-ui .flow-toggle-buttons button[aria-expanded="true"] {
  color: #fff;
  border-color: var(--folio-ink);
  background: var(--folio-ink);
}

.folio-ui .flow-toggle-buttons button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.folio-ui .fortune-flow-axis {
  display: none;
}

.folio-ui .flow-month .fortune-mobile-summary,
.folio-ui .flow-day .fortune-mobile-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  gap: 3px;
}

.folio-ui .flow-month .fortune-mobile-meta,
.folio-ui .flow-day .fortune-mobile-meta {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1px;
}

.folio-ui .flow-month .fortune-mobile-meta b,
.folio-ui .flow-day .fortune-mobile-meta b {
  font-size: 10px;
  font-weight: 500;
}

.folio-ui .flow-month .fortune-mobile-meta small,
.folio-ui .flow-day .fortune-mobile-meta small {
  color: var(--folio-muted);
  font-size: 8px;
}

.folio-ui .flow-month .fortune-mobile-pillar,
.folio-ui .flow-day .fortune-mobile-pillar {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.folio-ui .flow-month .fortune-mobile-pillar > span,
.folio-ui .flow-day .fortune-mobile-pillar > span {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.folio-ui .flow-month .fortune-mobile-pillar b,
.folio-ui .flow-day .fortune-mobile-pillar b {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.1;
}

.folio-ui .flow-month .fortune-mobile-pillar i,
.folio-ui .flow-day .fortune-mobile-pillar i {
  color: var(--folio-red);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.folio-ui #baziRelationsSection .relation-summary {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}

.folio-ui #baziRelationsSection .relation-compact-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--folio-rule-strong);
  background: rgba(250, 247, 239, .42);
}

.folio-ui #baziRelationsSection .relation-compact-list .relation-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 12px;
  align-items: start;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--folio-rule);
}

.folio-ui #baziRelationsSection .relation-compact-list .relation-row:last-child {
  border-bottom: 0;
}

.folio-ui #baziRelationsSection .relation-compact-list dt {
  color: var(--folio-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.folio-ui #baziRelationsSection .relation-compact-list dd {
  min-width: 0;
  margin: 0;
  color: var(--folio-ink);
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.folio-ui #baziRelationsSection .relation-compact-list dd i {
  margin: 0 7px;
  color: var(--folio-red);
  font-style: normal;
  opacity: .45;
}

.folio-ui .rating-natural-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.folio-ui .rating-natural-body h5 {
  margin: 0 0 6px;
  color: var(--folio-ink);
  font-size: 12px;
  font-weight: 700;
}

.folio-ui .rating-natural-body p,
.folio-ui .rating-natural-body li {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.75;
}

.folio-ui .rating-natural-body p {
  margin: 0;
}

.folio-ui .rating-natural-body ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 1.25em;
}

.folio-ui .rating-natural-lead,
.folio-ui .rating-natural-relations {
  padding: 12px 14px;
  border: 1px solid var(--folio-rule);
  background: rgba(250, 247, 239, .48);
}

.folio-ui .rating-natural-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--folio-rule);
}

.folio-ui .rating-natural-grid > section {
  min-width: 0;
  padding: 12px 14px;
}

.folio-ui .rating-natural-grid > section + section {
  border-left: 1px solid var(--folio-rule);
}

.folio-ui .rating-natural-grid .support {
  box-shadow: inset 2px 0 0 rgba(31, 78, 65, .52);
}

.folio-ui .rating-natural-grid .constraint {
  box-shadow: inset 2px 0 0 rgba(174, 68, 52, .48);
}

@media (min-width: 1025px) {
  .folio-ui.folio-result-mode #baziFortuneSection {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--folio-rule-strong);
    background: rgba(250, 247, 239, .5);
  }

  .folio-ui.folio-result-mode #baziFortuneSection > .subsection-heading {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 18px;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--folio-rule);
    writing-mode: horizontal-tb;
  }

  .folio-ui.folio-result-mode #baziFortuneSection > .subsection-heading > div {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .folio-ui.folio-result-mode #baziFortuneSection > .subsection-heading span {
    color: var(--folio-red);
    font-size: 10px;
  }

  .folio-ui.folio-result-mode #baziFortuneSection > .subsection-heading h4 {
    margin: 0;
    font-size: 16px;
    letter-spacing: .08em;
  }

  .folio-ui.folio-result-mode #baziFortuneSection > .subsection-heading p {
    display: block;
    margin: 0;
    color: var(--folio-muted);
    font-size: 11px;
  }

  .folio-ui.folio-result-mode .fortune-ledger-meta {
    display: grid;
    grid-template-columns: .55fr 1.35fr 1.25fr 1fr;
    border-bottom: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .fortune-ledger-meta > span {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border-right: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .fortune-ledger-meta > span:last-child {
    border-right: 0;
  }

  .folio-ui.folio-result-mode .fortune-ledger-meta small {
    flex: 0 0 auto;
    color: var(--folio-gold);
    font-size: 9px;
  }

  .folio-ui.folio-result-mode .fortune-ledger-meta b {
    min-width: 0;
    color: var(--folio-ink);
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .folio-ui.folio-result-mode .fortune-scroll-region {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .folio-ui.folio-result-mode .fortune-scroll-region .mobile-scroll-hint {
    display: none;
  }

  .folio-ui.folio-result-mode .fortune-track,
  .folio-ui.folio-result-mode .liunian-grid {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--folio-rule-strong);
    background: rgba(250, 247, 239, .34);
  }

  .folio-ui.folio-result-mode .fortune-track {
    grid-template-columns: 58px repeat(var(--fortune-count), minmax(0, 1fr));
  }

  .folio-ui.folio-result-mode .liunian-grid {
    grid-template-columns: 58px repeat(var(--fortune-count), minmax(0, 1fr));
  }

  .folio-ui.folio-result-mode .fortune-mobile-axis,
  .folio-ui.folio-result-mode .fortune-flow-axis {
    display: flex !important;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 8px 3px;
    border-right: 1px solid var(--folio-rule-strong);
    color: var(--folio-ink);
    background: rgba(103, 79, 52, .035);
  }

  .folio-ui.folio-result-mode .fortune-mobile-axis b,
  .folio-ui.folio-result-mode .fortune-flow-axis b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .08em;
  }

  .folio-ui.folio-result-mode .fortune-mobile-axis small,
  .folio-ui.folio-result-mode .fortune-flow-axis small {
    color: var(--folio-muted);
    font-size: 8px;
  }

  .folio-ui.folio-result-mode .fortune-mobile-axis i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--folio-red);
  }

  .folio-ui.folio-result-mode .dayun-card,
  .folio-ui.folio-result-mode .liunian {
    width: 100%;
    min-width: 0;
    min-height: 94px;
    margin: 0;
    padding: 8px 2px;
    border: 0 !important;
    border-right: 1px solid var(--folio-rule) !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    overflow: hidden;
  }

  .folio-ui.folio-result-mode .dayun-card:last-child,
  .folio-ui.folio-result-mode .liunian:last-child {
    border-right: 0 !important;
  }

  .folio-ui.folio-result-mode .dayun-card > :not(.fortune-mobile-summary),
  .folio-ui.folio-result-mode .liunian > :not(.fortune-mobile-summary) {
    display: none !important;
  }

  .folio-ui.folio-result-mode .fortune-mobile-summary {
    display: flex !important;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 3px;
  }

  .folio-ui.folio-result-mode .fortune-mobile-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
  }

  .folio-ui.folio-result-mode .fortune-mobile-meta b {
    max-width: 100%;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
  }

  .folio-ui.folio-result-mode .fortune-mobile-meta small {
    color: var(--folio-muted);
    font-size: 8px;
    white-space: nowrap;
  }

  .folio-ui.folio-result-mode .fortune-mobile-pillar,
  .folio-ui.folio-result-mode .fortune-mobile-xiaoyun {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .folio-ui.folio-result-mode .fortune-mobile-pillar > span {
    display: flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
  }

  .folio-ui.folio-result-mode .fortune-mobile-pillar b,
  .folio-ui.folio-result-mode .fortune-mobile-xiaoyun b {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.08;
  }

  .folio-ui.folio-result-mode .fortune-mobile-pillar i {
    color: var(--folio-red) !important;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
  }

  .folio-ui.folio-result-mode .fortune-mobile-xiaoyun {
    flex-direction: row;
    gap: 2px;
    padding-top: 3px;
    border-top: 1px solid var(--folio-rule);
  }

  .folio-ui.folio-result-mode .fortune-mobile-xiaoyun b {
    font-size: 12px;
  }

  .folio-ui.folio-result-mode .dayun-card[aria-selected="true"] {
    color: #fff;
    background: var(--folio-ink);
    box-shadow: inset 0 -3px 0 var(--folio-red);
  }

  .folio-ui.folio-result-mode .dayun-card[aria-selected="true"] .fortune-mobile-meta small,
  .folio-ui.folio-result-mode .dayun-card[aria-selected="true"] .fortune-mobile-pillar i {
    color: rgba(255, 255, 255, .78) !important;
  }

  .folio-ui.folio-result-mode .liunian[aria-selected="true"],
  .folio-ui.folio-result-mode .flow-month[aria-selected="true"],
  .folio-ui.folio-result-mode .flow-day[aria-selected="true"] {
    color: var(--folio-ink);
    background: rgba(174, 68, 52, .085);
    box-shadow: inset 0 -3px 0 var(--folio-red);
  }

  .folio-ui.folio-result-mode .liunian-panel {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .folio-ui.folio-result-mode .liunian-heading {
    display: none;
  }

  .folio-ui.folio-result-mode .flow-controls {
    display: flex !important;
    min-height: 54px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--folio-rule);
    background: rgba(103, 79, 52, .025);
  }

  .folio-ui.folio-result-mode .flow-controls > span {
    min-width: 0;
    color: var(--folio-muted);
    font-size: 10px;
    text-align: right;
  }

  .folio-ui.folio-result-mode .flow-toggle-buttons button {
    min-width: 72px;
    min-height: 38px;
    padding: 6px 13px;
    border-color: var(--folio-rule-strong);
    font-size: 12px;
  }

  .folio-ui.folio-result-mode .fortune-flow-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid var(--folio-rule-strong);
    background: rgba(250, 247, 239, .34);
  }

  .folio-ui.folio-result-mode .flow-months,
  .folio-ui.folio-result-mode .flow-days {
    min-width: 0;
    margin: 0;
    gap: 0;
  }

  .folio-ui.folio-result-mode .flow-months {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  .folio-ui.folio-result-mode .flow-days {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(66px, 1fr);
    grid-template-columns: none !important;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .folio-ui.folio-result-mode .flow-month,
  .folio-ui.folio-result-mode .flow-day {
    min-width: 0;
    min-height: 92px;
    margin: 0;
    padding: 7px 1px;
    border: 0;
    border-right: 1px solid var(--folio-rule);
    border-radius: 0;
    background: transparent;
  }

  .folio-ui.folio-result-mode .flow-month:last-child,
  .folio-ui.folio-result-mode .flow-day:last-child {
    border-right: 0;
  }

  .folio-ui.folio-result-mode .flow-month .fortune-mobile-meta b,
  .folio-ui.folio-result-mode .flow-day .fortune-mobile-meta b {
    font-size: 9px;
  }

  .folio-ui.folio-result-mode .flow-month .fortune-mobile-pillar b,
  .folio-ui.folio-result-mode .flow-day .fortune-mobile-pillar b {
    font-size: 16px;
  }

  .folio-ui.folio-result-mode .dayun-rating-detail {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin: 10px;
    padding: 12px 14px;
    border: 1px solid var(--folio-rule);
    background: rgba(255, 255, 255, .24);
  }

  .folio-ui.folio-result-mode .rating-evidence[open] {
    grid-column: 2;
  }
}

@media (max-width: 1024px) {
  .folio-ui .fortune-ledger-meta {
    display: none;
  }

  .folio-ui.folio-result-mode .flow-controls {
    display: flex !important;
  }

  .folio-ui .fortune-flow-row {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
  }

  .folio-ui .fortune-flow-axis {
    display: none !important;
  }

  .folio-ui .flow-months,
  .folio-ui .flow-days {
    display: grid !important;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .folio-ui .flow-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .folio-ui .flow-toggle-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .folio-ui .flow-toggle-buttons button {
    width: 100%;
    min-width: 0;
  }

  .folio-ui .fortune-flow-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    overflow: hidden;
    border-top: 1px solid var(--folio-rule-strong);
    border-bottom: 1px solid var(--folio-rule-strong);
    background: rgba(250, 247, 239, .42);
  }

  .folio-ui .fortune-flow-axis {
    display: flex !important;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 5px 2px;
    border-right: 1px solid var(--folio-rule-strong);
    color: var(--folio-ink);
    background: rgba(103, 79, 52, .035);
  }

  .folio-ui .fortune-flow-axis b {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
  }

  .folio-ui .fortune-flow-axis small {
    display: none;
  }

  .folio-ui .flow-months,
  .folio-ui .flow-days {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 58px;
    width: 100%;
    min-width: 0;
    max-height: none;
    gap: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .folio-ui .flow-month,
  .folio-ui .flow-day {
    width: 58px;
    min-width: 58px;
    min-height: 94px;
    margin: 0;
    padding: 7px 1px 8px;
    border: 0;
    border-right: 1px solid var(--folio-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-snap-align: start;
  }

  .folio-ui .flow-month:last-child,
  .folio-ui .flow-day:last-child {
    border-right: 0;
  }

  .folio-ui .flow-month .fortune-mobile-summary,
  .folio-ui .flow-day .fortune-mobile-summary {
    gap: 3px;
  }

  .folio-ui .flow-month .fortune-mobile-meta b,
  .folio-ui .flow-day .fortune-mobile-meta b {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .folio-ui .flow-month .fortune-mobile-meta small,
  .folio-ui .flow-day .fortune-mobile-meta small {
    font-size: 8px;
    white-space: nowrap;
  }

  .folio-ui .flow-month .fortune-mobile-pillar b,
  .folio-ui .flow-day .fortune-mobile-pillar b {
    font-size: 17px;
  }

  .folio-ui .flow-month .fortune-mobile-pillar i,
  .folio-ui .flow-day .fortune-mobile-pillar i {
    font-size: 8px;
  }

  .folio-ui #baziRelationsSection .relation-compact-list .relation-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 10px;
  }

  .folio-ui #baziRelationsSection .relation-compact-list dt {
    font-size: 10px;
  }

  .folio-ui #baziRelationsSection .relation-compact-list dd {
    font-size: 11px;
  }

  .folio-ui .rating-natural-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .folio-ui .rating-natural-grid > section + section {
    border-top: 1px solid var(--folio-rule);
    border-left: 0;
  }
}

/* Four-pillar palace reading. This view is intentionally fluid so all four
   pillars remain visible without creating page-level horizontal scrolling. */
.folio-ui .chart-view-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.folio-ui #palaceChartView,
.folio-ui .palace-chart,
.folio-ui .palace-pillar { min-width: 0; max-width: 100%; }
.folio-ui #palaceChartView[hidden] { display: none !important; }

.folio-ui .palace-chart {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(94, 105, 84, .42);
  border-top: 3px solid var(--folio-ink);
  background: rgba(250, 247, 239, .76);
  box-shadow: inset 0 0 0 3px rgba(160, 132, 70, .045);
}

.folio-ui .palace-pillar {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(84px, 1fr) auto;
  align-content: start;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(94, 105, 84, .28);
  border-radius: 0;
  color: var(--folio-ink);
  background: transparent;
}

.folio-ui .palace-pillar:last-child { border-right: 0; }

.folio-ui .palace-pillar.is-day-master {
  border-color: rgba(164, 69, 54, .32);
  background: rgba(164, 69, 54, .035);
}

.folio-ui .palace-day-master {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  min-width: 38px;
  padding: 5px 7px;
  border-radius: 0;
  color: #fffaf0;
  background: var(--cinnabar);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.folio-ui .palace-pillar > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(94, 105, 84, .3);
  background: rgba(20, 66, 57, .065);
}

.folio-ui .palace-pillar.is-day-master > header {
  padding-right: 50px;
  box-shadow: inset 0 3px 0 var(--cinnabar);
}

.folio-ui .palace-pillar > header h4 {
  margin: 0;
  color: var(--folio-ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}

.folio-ui .palace-pillar > header p {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  margin: 2px 0 0;
  color: var(--folio-muted);
  line-height: 1.45;
}

.folio-ui .palace-pillar > header b { font-size: 12px; font-weight: 500; }
.folio-ui .palace-pillar > header small { font-size: 10px; }

.folio-ui .palace-symbols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 20px 15px 16px;
  border-bottom: 1px solid rgba(94, 105, 84, .2);
}

.folio-ui .palace-symbols > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
}

.folio-ui .palace-character {
  width: 54px;
  min-width: 44px;
  height: 54px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}

.folio-ui .palace-ten-god {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 4px 2px;
  border: 0;
  color: var(--folio-muted);
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.folio-ui .palace-roles,
.folio-ui .palace-notes {
  min-width: 0;
  margin: 0;
  padding: 13px 16px;
  border-top: 0;
  border-bottom: 1px solid rgba(94, 105, 84, .2);
  list-style: none;
}

.folio-ui .palace-roles { display: grid; gap: 7px; }
.folio-ui .palace-roles li,
.folio-ui .palace-notes li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.folio-ui .palace-roles li + li,
.folio-ui .palace-notes li + li { margin-top: 3px; }
.folio-ui .palace-roles li::before {
  position: absolute;
  top: .28em;
  bottom: .28em;
  left: 0;
  width: 2px;
  background: #b08b25;
  content: "";
}

.folio-ui .palace-cycle-section {
  min-width: 0;
  padding: 12px 16px 14px;
  border-top: 0;
  border-bottom: 1px solid rgba(94, 105, 84, .2);
  background: rgba(20, 66, 57, .025);
}
.folio-ui .palace-cycle-section > span {
  display: block;
  margin-bottom: 8px;
  color: #9b7430;
  font-size: 10px;
  font-weight: 600;
}
.folio-ui .palace-cycle-section > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}
.folio-ui .palace-cycle {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 5px 0 4px 7px;
  border-bottom: 1px dotted rgba(94, 105, 84, .22);
  border-radius: 0;
  background: transparent;
  line-height: 1.3;
}
.folio-ui .palace-cycle::before {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  margin-left: -7px;
  background: var(--cinnabar);
  content: "";
}
.folio-ui .palace-cycle b { font-size: 11px; font-weight: 600; }
.folio-ui .palace-cycle small { margin-left: 3px; color: var(--folio-muted); font-size: 9px; white-space: nowrap; }
.folio-ui .palace-empty { color: var(--folio-muted); font-size: 10px; }

.folio-ui .palace-notes {
  align-self: stretch;
  counter-reset: palace-note;
  padding-block: 15px;
}
.folio-ui .palace-notes li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
  padding-left: 0;
  color: #51645e;
}
.folio-ui .palace-notes li::before {
  position: static;
  color: var(--cinnabar);
  background: transparent;
  content: "0" counter(palace-note);
  counter-increment: palace-note;
  font-size: 9px;
  line-height: 2.2;
}
.folio-ui .palace-nayin {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  margin: 0;
  padding: 10px 16px;
  border-top: 0;
  background: rgba(20, 66, 57, .08);
}
.folio-ui .palace-nayin span { color: var(--folio-muted); font-size: 10px; }
.folio-ui .palace-nayin b { color: var(--folio-ink); font-size: 11px; font-weight: 500; text-align: right; }

.folio-ui [data-folio-tool="palace"][aria-pressed="true"] {
  color: var(--cinnabar);
  background: rgba(163, 137, 79, .09);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .folio-ui .palace-chart { gap: 0; }
  .folio-ui .palace-pillar { padding: 0; }
  .folio-ui .palace-pillar > header { gap: 7px; padding-inline: 10px; }
  .folio-ui .palace-pillar > header h4 { font-size: 16px; }
  .folio-ui .palace-character { width: 48px; height: 50px; font-size: 34px; }
  .folio-ui .palace-symbols { padding-inline: 8px; }
  .folio-ui .palace-roles,
  .folio-ui .palace-notes,
  .folio-ui .palace-cycle-section { padding-inline: 10px; }
  .folio-ui .palace-cycle-section > div { grid-template-columns: minmax(0, 1fr); }
  .folio-ui .palace-nayin { padding-inline: 10px; }
}

@media (max-width: 767px) {
  .folio-ui .palace-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-top: 0;
    overflow-x: visible;
  }

  .folio-ui .palace-pillar {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    padding: 0;
    border-radius: 0;
  }

  .folio-ui .palace-day-master {
    top: 0;
    min-width: 30px;
    padding: 3px 4px;
    font-size: 8px;
  }

  .folio-ui .palace-pillar > header {
    display: block;
    min-height: 70px;
    padding: 10px 3px 8px;
    text-align: center;
  }
  .folio-ui .palace-pillar.is-day-master > header { padding-right: 3px; padding-top: 24px; }
  .folio-ui .palace-pillar > header h4 { font-size: 13px; }
  .folio-ui .palace-pillar > header p { display: grid; justify-items: center; gap: 0; margin-top: 3px; }
  .folio-ui .palace-pillar > header b { font-size: 10px; }
  .folio-ui .palace-pillar > header small { font-size: 9px; }

  .folio-ui .palace-symbols { gap: 0; margin: 0; padding: 9px 2px 8px; }
  .folio-ui .palace-character { width: 100%; min-width: 0; height: 46px; font-size: 30px; }
  .folio-ui .palace-ten-god { min-height: 32px; padding-inline: 0; font-size: 10px; }

  .folio-ui .palace-roles,
  .folio-ui .palace-notes,
  .folio-ui .palace-cycle-section { padding: 8px 4px; }
  .folio-ui .palace-roles { padding-block: 8px; }
  .folio-ui .palace-roles li,
  .folio-ui .palace-notes li {
    font-size: 11px;
    line-height: 1.55;
  }
  .folio-ui .palace-roles li { padding-left: 8px; }
  .folio-ui .palace-roles li::before { left: 0; }

  .folio-ui .palace-cycle-section > span { margin-bottom: 5px; font-size: 9px; }
  .folio-ui .palace-cycle-section > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .folio-ui .palace-cycle { justify-content: flex-start; gap: 0; padding: 4px 0 3px 5px; }
  .folio-ui .palace-cycle::before { margin-left: -5px; }
  .folio-ui .palace-cycle b { font-size: 10px; }
  .folio-ui .palace-cycle small { margin-left: 2px; font-size: 8px; }
  .folio-ui .palace-empty { font-size: 9px; }

  .folio-ui .palace-notes { padding-block: 10px; }
  .folio-ui .palace-notes li { grid-template-columns: 15px minmax(0, 1fr); gap: 2px; padding-left: 0; }
  .folio-ui .palace-notes li::before { font-size: 8px; }
  .folio-ui .palace-nayin { display: grid; justify-items: center; gap: 2px; padding: 8px 3px; text-align: center; }
  .folio-ui .palace-nayin span { font-size: 9px; }
  .folio-ui .palace-nayin b { font-size: 9px; line-height: 1.45; text-align: center; overflow-wrap: anywhere; }
}

/* Member almanac: continuous calendar grid with a separate reading column. */
.folio-ui #almanacChartView,
.folio-ui .almanac-app,
.folio-ui .almanac-layout,
.folio-ui .almanac-calendar,
.folio-ui .almanac-detail { min-width: 0; max-width: 100%; }
.folio-ui #almanacChartView[hidden],
.folio-ui .almanac-app[hidden],
.folio-ui .almanac-lock[hidden] { display: none !important; }

.folio-ui .almanac-lock {
  min-height: 320px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 34px 28px;
  border: 1px solid var(--folio-rule-strong);
  background: rgba(250, 247, 239, .72);
}
.folio-ui .almanac-lock h4 { margin: 4px 0 8px; font-family: var(--display); font-size: 23px; font-weight: 500; letter-spacing: 0; }
.folio-ui .almanac-lock p { max-width: 680px; margin: 0; color: var(--folio-muted); font-size: 13px; line-height: 1.8; }
.folio-ui .almanac-lock > div > small { color: #9b7430; font-size: 9px; }
.folio-ui .almanac-lock > button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  color: #fff;
  background: var(--folio-ink);
  font-family: inherit;
  cursor: pointer;
}
.folio-ui .almanac-lock > button img { width: 17px; height: 17px; filter: brightness(0) invert(1); }

.folio-ui .almanac-app {
  border: 1px solid var(--folio-rule-strong);
  border-top: 3px solid var(--folio-ink);
  background: rgba(250, 247, 239, .74);
}
.folio-ui .almanac-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(220px, auto) auto 44px minmax(180px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--folio-rule);
  background: rgba(20, 66, 57, .055);
}
.folio-ui .almanac-toolbar > button {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid rgba(21, 61, 55, .28);
  color: var(--folio-ink);
  background: rgba(250, 247, 239, .8);
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
}
.folio-ui .almanac-toolbar > button#almanacToday { min-width: 58px; font-size: 12px; }
.folio-ui .almanac-toolbar > button:disabled { opacity: .36; cursor: not-allowed; }
.folio-ui .almanac-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.folio-ui .almanac-selectors label { min-width: 0; display: grid; gap: 3px; }
.folio-ui .almanac-selectors span { color: var(--folio-muted); font-size: 9px; }
.folio-ui .almanac-selectors select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 28px 7px 10px;
  border: 1px solid rgba(21, 61, 55, .28);
  color: var(--folio-ink);
  background-color: rgba(250, 247, 239, .86);
  font-family: inherit;
  font-size: 12px;
}
.folio-ui .almanac-toolbar > p { justify-self: end; margin: 0 0 11px; color: var(--folio-muted); font-size: 10px; text-align: right; }

.folio-ui .almanac-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--folio-rule);
}
.folio-ui .almanac-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--folio-muted); font-size: 10px; }
.folio-ui .almanac-legend i { width: 10px; height: 10px; border: 1px solid currentColor; }
.folio-ui .almanac-legend .tone-supportive i { background: #e4eee8; }
.folio-ui .almanac-legend .tone-favorable i { background: #edf0dc; }
.folio-ui .almanac-legend .tone-balanced i { background: #f2ecd9; }
.folio-ui .almanac-legend .tone-cautious i { background: #f4e4da; }
.folio-ui .almanac-legend .tone-pressured i { background: #f2d9d6; }
.folio-ui .almanac-legend b { font-weight: 500; }

.folio-ui .almanac-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); }
.folio-ui .almanac-calendar { padding: 14px; }
.folio-ui .almanac-weekdays,
.folio-ui .almanac-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.folio-ui .almanac-weekdays { border-top: 1px solid var(--folio-rule); border-left: 1px solid var(--folio-rule); }
.folio-ui .almanac-weekdays span {
  min-width: 0;
  padding: 7px 2px;
  border-right: 1px solid var(--folio-rule);
  color: var(--folio-muted);
  background: rgba(20, 66, 57, .04);
  font-size: 10px;
  text-align: center;
}
.folio-ui .almanac-grid { border-top: 1px solid var(--folio-rule); border-left: 1px solid var(--folio-rule); }
.folio-ui .almanac-day,
.folio-ui .almanac-placeholder {
  min-width: 0;
  min-height: 88px;
  border: 0;
  border-right: 1px solid var(--folio-rule);
  border-bottom: 1px solid var(--folio-rule);
}
.folio-ui .almanac-placeholder { display: block; background: rgba(107, 113, 102, .025); }
.folio-ui .almanac-day {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 3px;
  padding: 8px 7px 7px;
  color: var(--folio-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.folio-ui .almanac-day time { font-family: var(--display); font-size: 19px; line-height: 1; }
.folio-ui .almanac-day > small { grid-column: 1 / -1; min-width: 0; color: var(--folio-muted); font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }
.folio-ui .almanac-day > b { align-self: end; font-size: 12px; font-weight: 500; }
.folio-ui .almanac-day > span { align-self: end; color: currentColor; font-size: 9px; }
.folio-ui .almanac-day:hover { filter: brightness(.98); }
.folio-ui .almanac-day.is-selected { z-index: 2; box-shadow: inset 0 0 0 2px var(--folio-ink); }
.folio-ui .almanac-day.is-today::after {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--cinnabar);
  font-size: 8px;
  content: "今";
}
.folio-ui .almanac-day.is-unavailable { color: #a1a49f; background: rgba(107, 113, 102, .045); cursor: not-allowed; }
.folio-ui .almanac-day.is-unavailable small { color: #a1a49f; }

.folio-ui .tone-supportive { color: #275f4e; }
.folio-ui .tone-favorable { color: #6f7f3e; }
.folio-ui .tone-balanced { color: #8d7134; }
.folio-ui .tone-cautious { color: #aa6846; }
.folio-ui .tone-pressured { color: #a84536; }
.folio-ui .almanac-day.tone-supportive { background: #e4eee8; }
.folio-ui .almanac-day.tone-favorable { background: #edf0dc; }
.folio-ui .almanac-day.tone-balanced { background: #f2ecd9; }
.folio-ui .almanac-day.tone-cautious { background: #f4e4da; }
.folio-ui .almanac-day.tone-pressured { background: #f2d9d6; }

.folio-ui .almanac-detail {
  padding: 22px 20px;
  border-left: 1px solid var(--folio-rule-strong);
  background: rgba(250, 247, 239, .66);
}
.folio-ui .almanac-detail > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--folio-rule); }
.folio-ui .almanac-detail > header small { color: var(--folio-muted); font-size: 10px; }
.folio-ui .almanac-detail > header h4 { margin: 4px 0 0; font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: 0; }
.folio-ui .almanac-score { flex: 0 0 auto; min-width: 58px; display: grid; justify-items: center; padding: 6px; border: 1px solid currentColor; }
.folio-ui .almanac-score b { font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1; }
.folio-ui .almanac-score small { color: inherit !important; font-size: 9px !important; }
.folio-ui .almanac-personal-summary { margin: 14px 0; color: #51645e; font-size: 12px; line-height: 1.75; }
.folio-ui .almanac-advice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--folio-rule); border-left: 1px solid var(--folio-rule); }
.folio-ui .almanac-advice-grid + .almanac-advice-grid { margin-top: 12px; }
.folio-ui .almanac-advice-grid section { min-width: 0; padding: 11px; border-right: 1px solid var(--folio-rule); border-bottom: 1px solid var(--folio-rule); }
.folio-ui .almanac-advice-grid h5 { margin: 0 0 8px; color: var(--folio-ink); font-size: 11px; }
.folio-ui .almanac-advice-grid ul { margin: 0; padding: 0; list-style: none; }
.folio-ui .almanac-advice-grid li { position: relative; padding-left: 10px; color: #596a65; font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; }
.folio-ui .almanac-advice-grid li::before { position: absolute; left: 0; color: var(--cinnabar); content: "·"; }
.folio-ui .almanac-basis { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--folio-rule); }
.folio-ui .almanac-basis > span { color: #9b7430; font-size: 9px; }
.folio-ui .almanac-basis > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.folio-ui .almanac-basis small { padding: 3px 5px; border: 1px solid rgba(21, 61, 55, .16); color: var(--folio-muted); font-size: 8px; }
.folio-ui .almanac-disclaimer { margin: 13px 0 0; color: var(--folio-muted); font-size: 9px; line-height: 1.65; }
.folio-ui .almanac-detail-empty { min-height: 260px; display: grid; place-content: center; text-align: center; }
.folio-ui .almanac-detail-empty h4 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 500; }
.folio-ui .almanac-detail-empty p { max-width: 280px; color: var(--folio-muted); font-size: 11px; line-height: 1.7; }
.folio-ui .almanac-status { min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--folio-muted); font-size: 11px; }
.folio-ui .almanac-status:not(:empty) { min-height: 48px; padding: 8px 14px; border-top: 1px solid var(--folio-rule); }
.folio-ui .almanac-status button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--folio-ink); color: var(--folio-ink); background: transparent; font-family: inherit; }
.folio-ui .almanac-loading::before { display: inline-block; margin-right: 7px; color: var(--cinnabar); content: "◌"; }

@media (max-width: 1024px) {
  .folio-ui .almanac-toolbar { grid-template-columns: 44px minmax(0, 1fr) auto 44px; }
  .folio-ui .almanac-toolbar > p { grid-column: 1 / -1; justify-self: start; margin: 2px 0 0; text-align: left; }
  .folio-ui .almanac-layout { grid-template-columns: minmax(0, 1fr); }
  .folio-ui .almanac-detail { border-top: 1px solid var(--folio-rule-strong); border-left: 0; }
}

@media (min-width: 1025px) {
  .folio-ui .almanac-calendar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
  }

  .folio-ui .almanac-weekdays { border-top: 0; }
  .folio-ui .almanac-grid { grid-auto-rows: minmax(88px, 1fr); }
}

@media (max-width: 767px) {
  .folio-ui.folio-result-mode .bazi-heading-actions .chart-view-switch {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 2px;
  }
  .folio-ui.folio-result-mode .bazi-heading-actions .chart-view-switch button { min-width: 0; min-height: 44px; padding: 5px 2px; font-size: 9px; }
  .folio-ui.folio-result-mode #almanacChartView { order: 1; }

  .folio-ui .almanac-lock { min-height: 260px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 22px 12px; }
  .folio-ui .almanac-lock > button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .folio-ui .almanac-lock h4 { font-size: 19px; }
  .folio-ui .almanac-lock p { font-size: 12px; }

  .folio-ui .almanac-toolbar { grid-template-columns: 40px minmax(0, 1fr) 50px 40px; gap: 4px; padding: 9px 7px; }
  .folio-ui .almanac-toolbar > button { min-width: 40px; min-height: 44px; padding-inline: 4px; }
  .folio-ui .almanac-selectors { gap: 4px; }
  .folio-ui .almanac-selectors select { min-height: 44px; padding-inline: 5px 18px; font-size: 10px; }
  .folio-ui .almanac-selectors span { display: none; }
  .folio-ui .almanac-toolbar > p { font-size: 8px; }
  .folio-ui .almanac-legend { justify-content: space-between; gap: 3px; padding: 7px 5px; }
  .folio-ui .almanac-legend span { gap: 3px; font-size: 8px; }
  .folio-ui .almanac-legend i { width: 8px; height: 8px; }

  .folio-ui .almanac-calendar { padding: 7px 0 0; }
  .folio-ui .almanac-weekdays span { padding-block: 6px; font-size: 9px; }
  .folio-ui .almanac-day,
  .folio-ui .almanac-placeholder { min-height: 76px; }
  .folio-ui .almanac-day { gap: 2px; padding: 6px 3px 5px; }
  .folio-ui .almanac-day time { font-size: 16px; }
  .folio-ui .almanac-day > small { font-size: 8px; line-height: 1.2; }
  .folio-ui .almanac-day > b { font-size: 10px; }
  .folio-ui .almanac-day > span { font-size: 8px; }
  .folio-ui .almanac-day.is-today::after { top: 2px; right: 2px; width: 13px; height: 13px; font-size: 7px; }

  .folio-ui .almanac-detail { padding: 17px 10px 20px; }
  .folio-ui .almanac-detail > header h4 { font-size: 19px; }
  .folio-ui .almanac-personal-summary { font-size: 12px; }
  .folio-ui .almanac-advice-grid section { padding: 9px 7px; }
  .folio-ui .almanac-advice-grid li { font-size: 10px; }
}

/* Family dashboard */
.folio-ui .history-family-entry {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--folio-rule-strong);
  color: var(--folio-ink);
  background: rgba(21, 61, 55, .035);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.folio-ui .history-family-entry img { width: 25px; height: 25px; justify-self: center; }
.folio-ui .history-family-entry span { min-width: 0; }
.folio-ui .history-family-entry b,
.folio-ui .history-family-entry small { display: block; overflow-wrap: anywhere; }
.folio-ui .history-family-entry b { font-size: 13px; font-weight: 600; }
.folio-ui .history-family-entry small { margin-top: 3px; color: var(--folio-muted); font-size: 10px; }
.folio-ui .history-family-entry i { color: var(--folio-cinnabar); font-size: 11px; font-style: normal; }

.folio-ui dialog.family-modal {
  width: min(1400px, calc(100vw - 32px));
  max-width: min(1400px, calc(100vw - 32px));
  height: min(880px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px 30px 30px;
  overflow: hidden;
  border: 1px solid rgba(142, 112, 62, .35);
  background: #f7f2e7;
}

/* Original-chart and active-fortune relations stay visible as separate scopes. */
.folio-ui #baziRelationsSection .relation-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.folio-ui #baziRelationsSection .relation-scope-card {
  min-width: 0;
  border: 1px solid var(--folio-rule-strong);
  background: rgba(250, 247, 239, .42);
}

.folio-ui #baziRelationsSection .relation-scope-card > header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--folio-rule);
  background: rgba(112, 88, 53, .035);
}

.folio-ui #baziRelationsSection .relation-scope-card > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.folio-ui #baziRelationsSection .relation-scope-card > header span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  color: var(--folio-red);
  font-family: var(--serif);
  font-size: 13px;
}

.folio-ui #baziRelationsSection .relation-scope-card--fortune > header span { color: var(--ink-green); }

.folio-ui #baziRelationsSection .relation-scope-card > header h5 {
  margin: 0;
  color: var(--folio-ink);
  font-size: 13px;
  letter-spacing: 0;
}

.folio-ui #baziRelationsSection .relation-scope-card > header p {
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.folio-ui #baziRelationsSection .relation-scope-card .relation-compact-list {
  border: 0;
  background: transparent;
}

/* Public comprehensive-use notice and manual role editor. */
.folio-ui .yong-panel-heading { align-items: center; }

.folio-ui .yong-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folio-ui .yong-heading-actions > span {
  padding: 5px 8px;
  border: 1px solid var(--folio-rule-strong);
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1;
}

.folio-ui .yong-heading-actions > span.is-manual {
  border-color: rgba(168, 70, 56, .38);
  color: var(--folio-red);
  background: rgba(168, 70, 56, .055);
}

.folio-ui .yong-heading-actions button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--ink-green);
  border-radius: 3px;
  color: var(--ink-green);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.folio-ui .yong-heading-actions button:hover,
.folio-ui .yong-heading-actions button:focus-visible {
  color: #fff;
  background: var(--ink-green);
  outline: 0;
}

.folio-ui .yong-reference-note {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 2px solid var(--folio-gold);
  color: #68736f;
  background: rgba(154, 122, 66, .055);
  font-size: 10px;
  line-height: 1.75;
}

.folio-ui dialog.use-preference-modal {
  width: min(760px, calc(100vw - 32px));
  padding: 28px;
}

.folio-ui .use-preference-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 42px;
}

.folio-ui .use-preference-seal {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--folio-red);
  color: var(--folio-red);
  font-family: var(--serif);
  font-size: 22px;
}

.folio-ui .use-preference-heading h2 { margin: 3px 0 4px; font-size: 25px; letter-spacing: 0; }
.folio-ui .use-preference-heading p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }

.folio-ui .use-system-recommendation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 20px 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--folio-rule);
  background: rgba(112, 88, 53, .035);
}

.folio-ui .use-system-recommendation span,
.folio-ui .use-system-recommendation small { color: var(--ink-soft); font-size: 10px; }
.folio-ui .use-system-recommendation b { color: var(--folio-ink); font-size: 12px; font-weight: 600; }

.folio-ui .use-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.folio-ui .use-role-grid fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--folio-rule-strong);
}

.folio-ui .use-role-grid legend {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 5px;
}

.folio-ui .use-role-grid legend b { color: var(--folio-ink); font-size: 12px; }
.folio-ui .use-role-grid legend span { color: var(--ink-soft); font-size: 9px; }

.folio-ui .use-element-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.folio-ui .use-element-option { min-width: 0; cursor: pointer; }
.folio-ui .use-element-option input { position: absolute; opacity: 0; pointer-events: none; }

.folio-ui .use-element-option span {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  place-items: center;
  gap: 4px;
  padding: 6px 5px;
  border: 1px solid var(--folio-rule);
  color: var(--folio-ink);
  background: rgba(255, 253, 247, .42);
  font-size: 13px;
}

.folio-ui .use-element-option i { width: 5px; height: 22px; background: currentColor; }
.folio-ui .use-element-option.wood i { color: var(--wood); }
.folio-ui .use-element-option.fire i { color: var(--fire); }
.folio-ui .use-element-option.earth i { color: var(--earth); }
.folio-ui .use-element-option.metal i { color: var(--metal); }
.folio-ui .use-element-option.water i { color: var(--water); }

.folio-ui .use-element-option input:checked + span {
  border-color: var(--ink-green);
  color: #fff;
  background: var(--ink-green);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.folio-ui .use-element-option input:focus-visible + span { outline: 2px solid var(--folio-red); outline-offset: 2px; }
.folio-ui .use-preference-error { min-height: 20px; margin: 10px 0 0; color: var(--folio-red); font-size: 11px; }

.folio-ui .use-preference-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.folio-ui .use-preference-actions button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--folio-rule-strong);
  border-radius: 3px;
  color: var(--ink-green);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

.folio-ui .use-preference-actions .use-preference-submit {
  border-color: var(--ink-green);
  color: #fff;
  background: var(--ink-green);
}

.folio-ui .use-preference-actions button:disabled { cursor: wait; opacity: .55; }
.folio-ui .use-preference-footnote { margin: 12px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.6; text-align: right; }

@media (max-width: 767px) {
  .folio-ui #baziRelationsSection .relation-scope-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .folio-ui #baziRelationsSection .relation-scope-card > header { min-height: 44px; padding: 7px 9px; }
  .folio-ui #baziRelationsSection .relation-scope-card > header p { max-width: 58%; font-size: 8px; }
  .folio-ui #baziRelationsSection .relation-scope-card > header h5 { font-size: 12px; }

  .folio-ui .yong-panel-heading { align-items: flex-start; gap: 8px; }
  .folio-ui .yong-heading-actions { flex-direction: column; align-items: stretch; gap: 5px; }
  .folio-ui .yong-heading-actions > span { text-align: center; }
  .folio-ui .yong-heading-actions button { min-height: 44px; }
  .folio-ui .yong-reference-note { font-size: 10px; }

  .folio-ui dialog.use-preference-modal { width: calc(100vw - 12px); padding: 56px 14px calc(18px + env(safe-area-inset-bottom)); }
  .folio-ui .use-preference-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding-right: 0; }
  .folio-ui .use-preference-seal { width: 40px; height: 40px; font-size: 18px; }
  .folio-ui .use-preference-heading h2 { font-size: 21px; }
  .folio-ui .use-system-recommendation { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .folio-ui .use-role-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .folio-ui .use-role-grid fieldset { padding: 10px 8px; }
  .folio-ui .use-preference-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-ui .use-preference-actions button { min-width: 0; padding-inline: 8px; }
  .folio-ui .use-preference-footnote { text-align: left; }
}
.folio-ui .family-modal *,
.folio-ui .family-layout > * { min-width: 0; }
.folio-ui .family-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 0 52px 18px 0;
  border-bottom: 1px solid var(--folio-rule-strong);
}
.folio-ui .family-seal {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--folio-cinnabar);
  font-family: var(--folio-display);
  font-size: 25px;
}
.folio-ui .family-heading h2 { margin: 2px 0 3px; font-family: var(--folio-display); font-size: 27px; font-weight: 500; }
.folio-ui .family-heading p { margin: 0; color: var(--folio-muted); font-size: 11px; }

.folio-ui .family-lock {
  min-height: 420px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  place-content: center;
  align-items: center;
  gap: 20px;
  padding: 40px max(20px, 10%);
}
.folio-ui .family-lock h3 { margin: 0 0 6px; font-family: var(--folio-display); font-size: 23px; font-weight: 500; }
.folio-ui .family-lock p { max-width: 620px; margin: 0; color: var(--folio-muted); font-size: 12px; line-height: 1.8; }
.folio-ui .family-lock button,
.folio-ui .family-status button {
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--folio-cinnabar);
  color: var(--folio-cinnabar);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.folio-ui .family-lock button { display: inline-flex; align-items: center; gap: 8px; }
.folio-ui .family-lock button img { width: 16px; height: 16px; }

.folio-ui .family-app {
  height: calc(100% - 86px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.folio-ui .family-app[hidden],
.folio-ui .family-lock[hidden] { display: none !important; }
.folio-ui .family-profile-form {
  display: grid;
  grid-template-columns: minmax(190px, 320px) auto minmax(0, 1fr);
  align-items: end;
  gap: 9px;
  padding: 12px 0;
  border-bottom: 1px solid var(--folio-rule);
}
.folio-ui .family-profile-form label span,
.folio-ui .family-add-form label span,
.folio-ui .family-member-settings label > span { display: block; margin-bottom: 5px; color: var(--folio-muted); font-size: 9px; }
.folio-ui .family-profile-form input,
.folio-ui .family-profile-form button,
.folio-ui .family-add-form select,
.folio-ui .family-add-form button,
.folio-ui .family-member-settings select,
.folio-ui .family-member-settings button {
  min-height: 40px;
  border: 1px solid var(--folio-rule-strong);
  color: var(--folio-ink);
  background: rgba(255, 255, 255, .25);
  font-family: inherit;
}
.folio-ui .family-profile-form input,
.folio-ui .family-add-form select,
.folio-ui .family-member-settings select { width: 100%; padding: 7px 10px; }
.folio-ui .family-profile-form button,
.folio-ui .family-add-form button,
.folio-ui .family-member-settings button { padding: 7px 13px; cursor: pointer; }
.folio-ui .family-profile-form button:disabled,
.folio-ui .family-add-form button:disabled { opacity: .42; cursor: default; }
.folio-ui .family-profile-form p { justify-self: end; align-self: center; margin: 16px 0 0; color: var(--folio-muted); font-size: 10px; }
.folio-ui .family-tabs { display: none; }

.folio-ui .family-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  overflow: hidden;
  border-bottom: 1px solid var(--folio-rule-strong);
}
.folio-ui .family-members-pane,
.folio-ui .family-detail-pane,
.folio-ui .family-reminders-pane {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.folio-ui .family-members-pane { border-right: 1px solid var(--folio-rule-strong); }
.folio-ui .family-reminders-pane { border-left: 1px solid var(--folio-rule-strong); }
.folio-ui .family-members-pane > header,
.folio-ui .family-reminders-pane > header { padding: 16px 14px 12px; border-bottom: 1px solid var(--folio-rule); }
.folio-ui .family-members-pane > header > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.folio-ui .family-members-pane > header span,
.folio-ui .family-reminders-pane > header > span { color: var(--folio-cinnabar); font-size: 10px; }
.folio-ui .family-members-pane > header strong { color: var(--folio-gold); font-size: 10px; }
.folio-ui .family-members-pane > header p { margin: 5px 0 0; color: var(--folio-muted); font-size: 9px; line-height: 1.6; }
.folio-ui .family-reminders-pane h3 { margin: 4px 0 0; font-family: var(--folio-display); font-size: 19px; font-weight: 500; }

.folio-ui .family-member-list > button {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--folio-rule);
  color: var(--folio-ink);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.folio-ui .family-member-list > button[aria-selected="true"] { box-shadow: inset 3px 0 var(--folio-cinnabar); background: rgba(165, 70, 56, .055); }
.folio-ui .family-member-list > button > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--folio-rule-strong); color: var(--folio-cinnabar); font-family: var(--folio-display); font-size: 16px; }
.folio-ui .family-member-list b,
.folio-ui .family-member-list small { display: block; overflow-wrap: anywhere; }
.folio-ui .family-member-list b { font-size: 12px; font-weight: 600; }
.folio-ui .family-member-list small { margin-top: 3px; color: var(--folio-muted); font-size: 9px; }
.folio-ui .family-member-list i { padding: 2px 4px; color: var(--folio-cinnabar); font-size: 8px; font-style: normal; }
.folio-ui .family-empty-list,
.folio-ui .family-empty-reminders { padding: 24px 14px; color: var(--folio-muted); font-size: 11px; line-height: 1.7; text-align: center; }
.folio-ui .family-empty-reminders b { display: block; color: var(--folio-ink); }
.folio-ui .family-empty-reminders p { margin: 6px 0 0; }
.folio-ui .family-empty-reminders button { margin-top: 12px; }

.folio-ui .family-add-form { display: grid; gap: 9px; padding: 16px 12px 20px; border-top: 1px solid var(--folio-rule-strong); }
.folio-ui .family-add-form h3 { margin: 0 0 2px; font-family: var(--folio-display); font-size: 17px; font-weight: 500; }
.folio-ui .family-add-form button { min-height: 44px; border-color: var(--folio-cinnabar); color: var(--folio-cinnabar); }

.folio-ui .family-detail-pane { padding: 20px 22px 28px; }
.folio-ui .family-empty-detail { min-height: 360px; display: grid; place-content: center; justify-items: center; text-align: center; }
.folio-ui .family-empty-detail img { width: 34px; height: 34px; opacity: .7; }
.folio-ui .family-empty-detail h3 { margin: 12px 0 4px; font-family: var(--folio-display); font-size: 21px; font-weight: 500; }
.folio-ui .family-empty-detail p { max-width: 340px; margin: 0; color: var(--folio-muted); font-size: 11px; line-height: 1.75; }
.folio-ui .family-detail-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--folio-rule-strong); }
.folio-ui .family-detail-header > div > span { color: var(--folio-cinnabar); font-size: 9px; }
.folio-ui .family-detail-header h3 { margin: 4px 0; font-family: var(--folio-display); font-size: 25px; font-weight: 500; }
.folio-ui .family-detail-header p { margin: 0; color: var(--folio-muted); font-size: 10px; line-height: 1.65; }
.folio-ui .family-chart-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.folio-ui .family-chart-badges b,
.folio-ui .family-chart-badges span { padding: 4px 6px; border: 1px solid var(--folio-rule); color: var(--folio-muted); font-size: 8px; font-weight: 500; }
.folio-ui .family-chart-badges b { color: var(--folio-ink); border-color: var(--folio-rule-strong); }
.folio-ui .family-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--folio-rule); }
.folio-ui .family-detail-actions button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--folio-rule-strong); color: var(--folio-ink); background: transparent; font-family: inherit; cursor: pointer; }
.folio-ui .family-detail-actions button:nth-child(2) { color: var(--folio-cinnabar); border-color: rgba(165, 70, 56, .45); }
.folio-ui .family-member-settings { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)) auto auto; align-items: end; gap: 8px; padding: 13px 0 16px; border-bottom: 1px solid var(--folio-rule-strong); }
.folio-ui .family-member-settings button:last-child { color: var(--folio-cinnabar); }
.folio-ui .family-reminder-toggle { min-height: 40px; display: flex; align-items: center; gap: 8px; }
.folio-ui .family-reminder-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--folio-ink); }
.folio-ui .family-reminder-toggle span { margin: 0 !important; font-size: 10px !important; }

.folio-ui .family-relationship,
.folio-ui .family-member-windows { padding: 19px 0 3px; }
.folio-ui .family-relationship > header,
.folio-ui .family-member-windows > header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.folio-ui .family-relationship > header span,
.folio-ui .family-member-windows > header span { color: var(--folio-cinnabar); font-size: 9px; }
.folio-ui .family-relationship h4,
.folio-ui .family-member-windows h4 { margin: 0; font-family: var(--folio-display); font-size: 18px; font-weight: 500; }
.folio-ui .family-relation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--folio-rule); border-bottom: 1px solid var(--folio-rule); }
.folio-ui .family-relation-grid article { padding: 13px 14px 13px 0; }
.folio-ui .family-relation-grid article + article { padding-left: 14px; border-left: 1px solid var(--folio-rule); }
.folio-ui .family-relation-grid span { color: var(--folio-muted); font-size: 9px; }
.folio-ui .family-relation-grid b { display: block; margin-top: 4px; font-size: 12px; }
.folio-ui .family-relation-grid p { margin: 5px 0 0; color: var(--folio-text); font-size: 10px; line-height: 1.7; }
.folio-ui .family-relationship ul { margin: 12px 0 8px; padding-left: 1.2em; color: var(--folio-text); font-size: 11px; line-height: 1.75; }
.folio-ui .family-relationship > small { color: var(--folio-muted); font-size: 9px; }
.folio-ui .family-neutral,
.folio-ui .family-empty-line { margin: 0; color: var(--folio-muted); font-size: 10px; line-height: 1.7; }
.folio-ui .family-window-list { border-top: 1px solid var(--folio-rule); }
.folio-ui .family-window { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--folio-rule); }
.folio-ui .family-window time { color: var(--folio-cinnabar); font-size: 10px; }
.folio-ui .family-window b { display: block; font-size: 11px; }
.folio-ui .family-window p { margin: 3px 0; color: var(--folio-text); font-size: 9px; line-height: 1.6; }
.folio-ui .family-window small { color: var(--folio-muted); font-size: 8px; overflow-wrap: anywhere; }
.folio-ui .family-window > strong { justify-self: end; color: var(--folio-gold); font-size: 16px; font-weight: 500; }
.folio-ui .family-window-caution > strong { color: var(--folio-cinnabar); }
.folio-ui .family-loading { min-height: 64px; display: grid; place-items: center; color: var(--folio-muted); font-size: 10px; }

.folio-ui #familyReminderList > button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--folio-rule);
  color: var(--folio-ink);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.folio-ui #familyReminderList > button:hover { background: rgba(21, 61, 55, .035); }
.folio-ui #familyReminderList time { color: var(--folio-cinnabar); font-size: 11px; }
.folio-ui #familyReminderList b,
.folio-ui #familyReminderList small { display: block; overflow-wrap: anywhere; }
.folio-ui #familyReminderList b { font-size: 10px; }
.folio-ui #familyReminderList small { margin-top: 4px; color: var(--folio-muted); font-size: 9px; }
.folio-ui .family-status { min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--folio-muted); font-size: 10px; }
.folio-ui .family-status:not(:empty) { min-height: 46px; padding: 7px; }

@media (min-width: 768px) and (max-width: 1024px) {
  .folio-ui dialog.family-modal { width: calc(100vw - 20px); max-width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); padding: 24px 22px; }
  .folio-ui .family-layout { grid-template-columns: 220px minmax(0, 1fr); overflow-y: auto; }
  .folio-ui .family-members-pane { grid-column: 1; grid-row: 1; overflow: visible; }
  .folio-ui .family-detail-pane { grid-column: 2; grid-row: 1; overflow: visible; }
  .folio-ui .family-reminders-pane { grid-column: 1 / -1; grid-row: 2; overflow: visible; border-top: 1px solid var(--folio-rule-strong); border-left: 0; }
  .folio-ui #familyReminderList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-ui #familyReminderList > button:nth-child(odd) { border-right: 1px solid var(--folio-rule); }
  .folio-ui .family-member-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .folio-ui dialog.family-modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px) !important;
    padding: 50px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .folio-ui .family-heading { min-height: 58px; gap: 10px; padding: 0 0 12px; }
  .folio-ui .family-seal { flex-basis: 38px; width: 38px; height: 38px; font-size: 20px; }
  .folio-ui .family-heading h2 { font-size: 21px; }
  .folio-ui .family-heading p { font-size: 9px; }
  .folio-ui .family-lock { min-height: 350px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 24px 4px; }
  .folio-ui .family-lock button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .folio-ui .family-lock h3 { font-size: 19px; }
  .folio-ui .family-app { height: calc(100% - 70px); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .folio-ui .family-profile-form { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
  .folio-ui .family-profile-form input,
  .folio-ui .family-profile-form button { min-height: 44px; }
  .folio-ui .family-profile-form p { grid-column: 1 / -1; justify-self: start; margin: 0; font-size: 8px; }
  .folio-ui .family-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--folio-rule-strong); }
  .folio-ui .family-tabs button { min-height: 44px; border: 0; border-right: 1px solid var(--folio-rule); color: var(--folio-muted); background: transparent; font-family: inherit; cursor: pointer; }
  .folio-ui .family-tabs button:last-child { border-right: 0; }
  .folio-ui .family-tabs button[aria-selected="true"] { color: var(--folio-cinnabar); box-shadow: inset 0 -2px var(--folio-cinnabar); }
  .folio-ui .family-layout { display: block; overflow: hidden auto; }
  .folio-ui [data-family-pane] { display: none; width: 100%; min-height: 0; overflow: visible; border: 0; }
  .folio-ui [data-family-pane].is-mobile-active { display: block; }
  .folio-ui .family-detail-pane { padding: 15px 6px 24px; }
  .folio-ui .family-member-list > button { min-height: 64px; padding-inline: 8px; }
  .folio-ui .family-add-form { padding-inline: 6px; }
  .folio-ui .family-add-form select,
  .folio-ui .family-add-form button,
  .folio-ui .family-member-settings select,
  .folio-ui .family-member-settings button { min-height: 44px; font-size: 16px; }
  .folio-ui .family-detail-header { gap: 9px; }
  .folio-ui .family-detail-header h3 { font-size: 21px; }
  .folio-ui .family-chart-badges { max-width: 90px; }
  .folio-ui .family-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-ui .family-detail-actions button { min-height: 44px; padding-inline: 6px; font-size: 10px; }
  .folio-ui .family-member-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 6px; }
  .folio-ui .family-reminder-toggle { min-height: 44px; }
  .folio-ui .family-relation-grid { grid-template-columns: minmax(0, 1fr); }
  .folio-ui .family-relation-grid article { padding: 12px 0; }
  .folio-ui .family-relation-grid article + article { padding-left: 0; border-top: 1px solid var(--folio-rule); border-left: 0; }
  .folio-ui .family-window { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 7px; }
  .folio-ui .family-reminders-pane > header { padding-inline: 8px; }
  .folio-ui #familyReminderList > button { min-height: 64px; padding-inline: 8px; }
  .folio-ui .family-status:not(:empty) { min-height: 44px; }
}

/* Family dashboard visual refinement */
.folio-ui dialog.family-modal {
  --family-green: #17453d;
  --family-green-soft: #e7eeea;
  --family-red: #a84536;
  --family-red-soft: #f5e8e3;
  --family-gold: #9a7434;
  --family-line: rgba(69, 86, 73, .22);
  --family-line-strong: rgba(69, 86, 73, .38);
  --family-paper: #fbfaf6;
  padding: 24px 26px 26px;
  border: 1px solid rgba(117, 91, 49, .46);
  border-radius: 6px;
  background: #f6f3ea;
  box-shadow: 0 26px 80px rgba(7, 30, 26, .3), inset 0 0 0 3px rgba(255, 255, 255, .45);
}

.folio-ui .family-modal .modal-close {
  top: 14px;
  right: 16px;
  border: 1px solid var(--family-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .62);
  transition: border-color .16s ease, background .16s ease;
}
.folio-ui .family-modal .modal-close:hover,
.folio-ui .family-modal .modal-close:focus-visible { border-color: var(--family-red); background: #fff; }

.folio-ui .family-heading {
  min-height: 74px;
  gap: 15px;
  padding: 2px 58px 16px 2px;
  border-bottom: 2px solid var(--family-green);
}
.folio-ui .family-seal {
  border: 1px solid rgba(121, 47, 36, .65);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(154, 116, 52, .22);
}
.folio-ui .family-heading .modal-eyebrow { color: var(--family-gold); font-size: 10px; }
.folio-ui .family-heading h2 { margin-top: 3px; color: var(--family-green); font-size: 29px; }
.folio-ui .family-heading p { color: #64716c; font-size: 12px; line-height: 1.55; }

.folio-ui .family-profile-form {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--family-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .58);
}
.folio-ui .family-profile-form label span,
.folio-ui .family-add-form label span,
.folio-ui .family-member-settings label > span {
  margin-bottom: 6px;
  color: #6b746f;
  font-size: 10px;
  font-weight: 600;
}
.folio-ui .family-profile-form input,
.folio-ui .family-add-form select,
.folio-ui .family-member-settings select {
  min-height: 42px;
  border-color: var(--family-line-strong);
  border-radius: 4px;
  color: #173f38;
  background: #fffdf8;
  font-size: 13px;
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.folio-ui .family-profile-form input:focus,
.folio-ui .family-add-form select:focus,
.folio-ui .family-member-settings select:focus {
  border-color: var(--family-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 69, 61, .1);
}
.folio-ui .family-profile-form p {
  color: #68756f;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.folio-ui .family-primary-button,
.folio-ui .family-save-button,
.folio-ui .family-danger-button,
.folio-ui .family-detail-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 4px;
  font-weight: 600;
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.folio-ui .family-primary-button {
  border-color: var(--family-green) !important;
  color: #fff !important;
  background: var(--family-green) !important;
  box-shadow: 0 2px 7px rgba(23, 69, 61, .16);
}
.folio-ui .family-primary-button img,
.folio-ui .family-save-button img,
.folio-ui .family-detail-actions button:first-child img { filter: invert(1); }
.folio-ui .family-primary-button img,
.folio-ui .family-save-button img,
.folio-ui .family-danger-button img,
.folio-ui .family-detail-actions img { width: 16px; height: 16px; flex: 0 0 16px; }
.folio-ui .family-primary-button:hover:not(:disabled),
.folio-ui .family-save-button:hover:not(:disabled) { background: #0f3831 !important; transform: translateY(-1px); }
.folio-ui .family-primary-button:disabled { color: rgba(255, 255, 255, .75) !important; }

.folio-ui .family-layout {
  margin-top: 12px;
  border: 1px solid var(--family-line-strong);
  border-radius: 4px;
  background: var(--family-paper);
  box-shadow: 0 7px 20px rgba(31, 46, 38, .055);
}
.folio-ui .family-members-pane { border-right-color: var(--family-line-strong); background: #edf2ee; }
.folio-ui .family-detail-pane { background: rgba(255, 255, 255, .64); }
.folio-ui .family-reminders-pane { border-left-color: var(--family-line-strong); background: #f4f1e8; }
.folio-ui .family-members-pane > header,
.folio-ui .family-reminders-pane > header {
  padding: 16px 15px 13px;
  border-bottom-color: var(--family-line-strong);
  background: rgba(255, 255, 255, .48);
}
.folio-ui .family-members-pane > header span,
.folio-ui .family-reminders-pane > header > span { font-size: 11px; font-weight: 600; }
.folio-ui .family-members-pane > header strong {
  min-width: 42px;
  padding: 3px 7px;
  border: 1px solid rgba(154, 116, 52, .35);
  border-radius: 3px;
  color: #735a29;
  background: rgba(255, 255, 255, .7);
  font-size: 10px;
  text-align: center;
}
.folio-ui .family-members-pane > header p { margin-top: 6px; color: #69766f; font-size: 10px; }
.folio-ui .family-reminders-pane h3 { color: var(--family-green); font-size: 21px; }

.folio-ui .family-member-list { padding: 7px 0; }
.folio-ui .family-member-list > button {
  width: calc(100% - 14px);
  min-height: 68px;
  margin: 0 7px 6px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, .42);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.folio-ui .family-member-list > button:hover { border-color: var(--family-line-strong); background: rgba(255, 255, 255, .78); }
.folio-ui .family-member-list > button[aria-selected="true"] {
  border-color: rgba(23, 69, 61, .48);
  background: #fffdf8;
  box-shadow: inset 3px 0 var(--family-red), 0 3px 9px rgba(31, 54, 45, .08);
}
.folio-ui .family-member-list > button > span {
  width: 38px;
  height: 38px;
  border-color: rgba(23, 69, 61, .4);
  border-radius: 4px;
  color: #fff;
  background: var(--family-green);
  font-size: 18px;
}
.folio-ui .family-member-list b { color: #193f38; font-size: 13px; }
.folio-ui .family-member-list small { margin-top: 4px; color: #69766f; font-size: 10px; }
.folio-ui .family-member-list i {
  padding: 3px 6px;
  border: 1px solid rgba(168, 69, 54, .32);
  border-radius: 3px;
  color: var(--family-red);
  background: var(--family-red-soft);
  font-size: 9px;
}

.folio-ui .family-add-form {
  gap: 11px;
  margin-top: 5px;
  padding: 17px 14px 20px;
  border-top: 1px solid var(--family-line-strong);
  background: rgba(255, 255, 255, .52);
}
.folio-ui .family-add-form h3 { color: var(--family-green); font-size: 19px; }
.folio-ui .family-add-form button { min-height: 44px; }

.folio-ui .family-detail-pane { padding: 22px 24px 32px; }
.folio-ui .family-detail-header {
  padding: 2px 2px 17px;
  border-bottom: 1px solid var(--family-line-strong);
}
.folio-ui .family-detail-header > div > span {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid rgba(168, 69, 54, .3);
  border-radius: 3px;
  color: var(--family-red);
  background: var(--family-red-soft);
  font-size: 10px;
  font-weight: 600;
}
.folio-ui .family-detail-header h3 { margin: 7px 0 4px; color: var(--family-green); font-size: 29px; }
.folio-ui .family-detail-header p { color: #65736d; font-size: 12px; }
.folio-ui .family-chart-badges { gap: 6px; }
.folio-ui .family-chart-badges b,
.folio-ui .family-chart-badges span {
  min-width: 40px;
  padding: 5px 7px;
  border-radius: 3px;
  font-size: 9px;
  text-align: center;
}
.folio-ui .family-chart-badges b { border-color: rgba(23, 69, 61, .34); color: var(--family-green); background: var(--family-green-soft); }

.folio-ui .family-detail-actions { gap: 8px; padding: 13px 0; border-bottom-color: var(--family-line); }
.folio-ui .family-detail-actions button {
  min-height: 42px;
  padding: 8px 13px;
  border-color: var(--family-line-strong);
  color: var(--family-green);
  background: #fffdf8;
  font-size: 11px;
}
.folio-ui .family-detail-actions button:first-child {
  border-color: var(--family-green);
  color: #fff;
  background: var(--family-green);
}
.folio-ui .family-detail-actions button:nth-child(2) { border-color: rgba(168, 69, 54, .5); color: var(--family-red); background: #fffaf7; }
.folio-ui .family-detail-actions button:nth-child(3) { border-color: rgba(154, 116, 52, .5); color: #765c2a; }
.folio-ui .family-detail-actions button:hover { box-shadow: 0 3px 9px rgba(24, 53, 45, .1); transform: translateY(-1px); }

.folio-ui .family-member-settings {
  grid-template-columns: repeat(2, minmax(130px, 1fr)) minmax(130px, .8fr) auto auto;
  gap: 10px;
  margin-top: 3px;
  padding: 14px;
  border: 1px solid var(--family-line);
  border-radius: 4px;
  background: var(--family-green-soft);
}
.folio-ui .family-reminder-toggle { min-height: 42px; padding: 0 8px; border: 1px solid rgba(23, 69, 61, .2); border-radius: 4px; background: rgba(255, 255, 255, .58); }
.folio-ui .family-reminder-toggle input { width: 18px; height: 18px; }
.folio-ui .family-reminder-toggle span { color: #274f47 !important; font-size: 11px !important; font-weight: 600; }
.folio-ui .family-save-button,
.folio-ui .family-danger-button { min-height: 42px; padding: 8px 12px !important; }
.folio-ui .family-save-button { border-color: var(--family-green) !important; color: #fff !important; background: var(--family-green) !important; }
.folio-ui .family-danger-button { border-color: rgba(168, 69, 54, .44) !important; color: var(--family-red) !important; background: #fffaf8 !important; }
.folio-ui .family-danger-button:hover { border-color: var(--family-red) !important; background: var(--family-red-soft) !important; }

.folio-ui .family-relationship,
.folio-ui .family-member-windows { padding: 23px 0 4px; }
.folio-ui .family-relationship > header,
.folio-ui .family-member-windows > header { gap: 11px; margin-bottom: 14px; }
.folio-ui .family-relationship > header span,
.folio-ui .family-member-windows > header span { font-size: 10px; font-weight: 600; }
.folio-ui .family-relationship h4,
.folio-ui .family-member-windows h4 { color: var(--family-green); font-size: 21px; }
.folio-ui .family-relation-grid { gap: 10px; border: 0; }
.folio-ui .family-relation-grid article {
  padding: 14px 15px;
  border: 1px solid var(--family-line);
  border-top: 3px solid var(--family-green);
  border-radius: 4px;
  background: #f8faf7;
}
.folio-ui .family-relation-grid article + article { padding-left: 15px; border-left: 1px solid var(--family-line); border-top-color: var(--family-red); background: #fcf8f5; }
.folio-ui .family-relation-grid span { font-size: 10px; font-weight: 600; }
.folio-ui .family-relation-grid b { margin-top: 6px; color: #1c443c; font-size: 13px; }
.folio-ui .family-relation-grid p { margin-top: 7px; color: #4e625c; font-size: 11px; line-height: 1.75; }
.folio-ui .family-relationship ul { margin: 14px 0 9px; color: #425b54; font-size: 12px; line-height: 1.8; }
.folio-ui .family-relationship > small { color: #75807b; font-size: 10px; }
.folio-ui .family-neutral,
.folio-ui .family-empty-line {
  padding: 13px 14px;
  border: 1px dashed var(--family-line-strong);
  border-radius: 4px;
  color: #68756f;
  background: rgba(255, 255, 255, .5);
  font-size: 11px;
}

.folio-ui .family-window-list { display: grid; gap: 8px; border: 0; }
.folio-ui .family-window {
  grid-template-columns: 50px minmax(0, 1fr) 45px;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--family-line);
  border-left: 3px solid var(--family-green);
  border-radius: 4px;
  background: #f8faf7;
}
.folio-ui .family-window-caution { border-left-color: var(--family-red); background: #fcf8f5; }
.folio-ui .family-window time,
.folio-ui #familyReminderList time {
  width: 44px;
  height: 48px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(23, 69, 61, .3);
  border-radius: 4px;
  color: var(--family-green);
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.folio-ui .family-window time b,
.folio-ui #familyReminderList time b { font-family: var(--folio-display); font-size: 18px; font-weight: 600; line-height: 1; }
.folio-ui .family-window time small,
.folio-ui #familyReminderList time small { margin-top: 3px; color: #79847e; font-size: 8px; }
.folio-ui .family-window > div > b { color: #1d443d; font-size: 12px; }
.folio-ui .family-window p { margin: 5px 0; color: #53665f; font-size: 11px; line-height: 1.7; }
.folio-ui .family-window > div > small { color: #6f7d77; font-size: 9px; }
.folio-ui .family-window > strong { display: grid; justify-items: center; color: var(--family-gold); }
.folio-ui .family-window > strong > b { font-family: var(--folio-display); font-size: 21px; font-weight: 600; line-height: 1; }
.folio-ui .family-window > strong > small { margin-top: 4px; color: #7c817c; font-size: 8px; white-space: nowrap; }
.folio-ui .family-window-caution > strong > b { color: var(--family-red); }

.folio-ui #familyReminderList { padding: 8px; }
.folio-ui #familyReminderList > button {
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  gap: 10px;
  min-height: 70px;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid var(--family-line);
  border-left: 3px solid var(--family-green);
  border-radius: 4px;
  background: rgba(255, 255, 255, .66);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.folio-ui #familyReminderList > button.family-reminder-caution { border-left-color: var(--family-red); }
.folio-ui #familyReminderList > button.family-reminder-birthday { border-left-color: var(--family-gold); }
.folio-ui #familyReminderList > button:hover { border-color: var(--family-green); background: #fff; box-shadow: 0 3px 9px rgba(29, 55, 47, .08); }
.folio-ui #familyReminderList > button > img { width: 15px; height: 15px; opacity: .58; }
.folio-ui #familyReminderList b { color: #1e443d; font-size: 11px; }
.folio-ui #familyReminderList span { display: inline-block; margin-top: 4px; color: var(--family-red); font-size: 9px; }
.folio-ui #familyReminderList small { margin-top: 3px; color: #6d7973; font-size: 9px; }
.folio-ui .family-status:not(:empty) { margin-top: 6px; border: 1px solid var(--family-line); border-radius: 4px; background: rgba(255, 255, 255, .54); }

.folio-ui .history-family-entry {
  min-height: 70px;
  border-color: rgba(23, 69, 61, .34);
  border-left: 4px solid var(--family-green, #17453d);
  border-radius: 4px;
  background: rgba(231, 238, 234, .72);
  box-shadow: 0 3px 10px rgba(26, 57, 48, .06);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.folio-ui .history-family-entry:hover { border-color: #17453d; background: #f8faf7; transform: translateY(-1px); }

@media (min-width: 768px) and (max-width: 1024px) {
  .folio-ui dialog.family-modal { padding: 20px 18px; }
  .folio-ui .family-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .folio-ui .family-detail-pane { padding: 20px; }
  .folio-ui .family-member-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-ui .family-reminder-toggle { min-height: 44px; }
  .folio-ui #familyReminderList { gap: 8px; padding: 10px; }
  .folio-ui #familyReminderList > button { margin-bottom: 0; }
}

@media (max-width: 767px) {
  .folio-ui dialog.family-modal {
    padding: 48px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius: 6px 6px 0 0;
  }
  .folio-ui .family-modal .modal-close { top: 5px; right: 6px; }
  .folio-ui .family-heading { min-height: 67px; gap: 10px; padding: 0 44px 13px 2px; }
  .folio-ui .family-seal { flex-basis: 40px; width: 40px; height: 40px; }
  .folio-ui .family-heading .modal-eyebrow { font-size: 8px; }
  .folio-ui .family-heading h2 { font-size: 23px; }
  .folio-ui .family-heading p { font-size: 10px; }
  .folio-ui .family-app { height: calc(100% - 79px); }
  .folio-ui .family-profile-form { margin-top: 8px; padding: 9px; }
  .folio-ui .family-profile-form label span { font-size: 9px; }
  .folio-ui .family-profile-form p { margin-top: 1px; font-size: 9px; }
  .folio-ui .family-profile-form button { padding-inline: 10px; font-size: 11px; }
  .folio-ui .family-primary-button img { width: 15px; height: 15px; }
  .folio-ui .family-tabs { margin-top: 8px; overflow: hidden; border: 1px solid var(--family-line-strong); border-radius: 4px; background: #eef2ee; }
  .folio-ui .family-tabs button { color: #52665f; font-size: 12px; font-weight: 600; }
  .folio-ui .family-tabs button[aria-selected="true"] { color: #fff; background: var(--family-green); box-shadow: none; }
  .folio-ui .family-layout { margin-top: 8px; border-color: var(--family-line-strong); }
  .folio-ui .family-member-list { padding: 8px 0 2px; }
  .folio-ui .family-member-list > button { width: calc(100% - 12px); margin-inline: 6px; padding-inline: 10px; }
  .folio-ui .family-member-list b { font-size: 14px; }
  .folio-ui .family-member-list small { font-size: 11px; }
  .folio-ui .family-add-form { padding: 17px 10px 20px; }
  .folio-ui .family-add-form h3 { font-size: 20px; }
  .folio-ui .family-add-form label span,
  .folio-ui .family-member-settings label > span { font-size: 10px; }
  .folio-ui .family-detail-pane { padding: 17px 10px 28px; }
  .folio-ui .family-detail-header { gap: 10px; padding-bottom: 15px; }
  .folio-ui .family-detail-header h3 { font-size: 25px; }
  .folio-ui .family-detail-header p { font-size: 11px; }
  .folio-ui .family-chart-badges { max-width: 105px; }
  .folio-ui .family-detail-actions { gap: 7px; }
  .folio-ui .family-detail-actions button { min-height: 46px; padding-inline: 8px; font-size: 11px; }
  .folio-ui .family-detail-actions button:nth-child(3) { grid-column: 1 / -1; }
  .folio-ui .family-member-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 7px; padding: 11px 9px; }
  .folio-ui .family-reminder-toggle { grid-column: 1 / -1; }
  .folio-ui .family-save-button,
  .folio-ui .family-danger-button { min-height: 46px !important; font-size: 11px !important; }
  .folio-ui .family-relationship,
  .folio-ui .family-member-windows { padding-top: 22px; }
  .folio-ui .family-relationship h4,
  .folio-ui .family-member-windows h4 { font-size: 21px; }
  .folio-ui .family-relation-grid { gap: 8px; }
  .folio-ui .family-relation-grid article,
  .folio-ui .family-relation-grid article + article { padding: 13px 12px; }
  .folio-ui .family-relation-grid b { font-size: 13px; }
  .folio-ui .family-relation-grid p { font-size: 12px; }
  .folio-ui .family-relationship ul { font-size: 12px; }
  .folio-ui .family-window { grid-template-columns: 46px minmax(0, 1fr) 40px; gap: 9px; padding: 10px 8px; }
  .folio-ui .family-window time,
  .folio-ui #familyReminderList time { width: 42px; height: 46px; }
  .folio-ui .family-window p { font-size: 11px; }
  .folio-ui .family-window > div > small { font-size: 9px; }
  .folio-ui #familyReminderList { padding: 8px 6px; }
  .folio-ui #familyReminderList > button { min-height: 70px; padding: 9px 8px; }
  .folio-ui #familyReminderList b { font-size: 12px; }
  .folio-ui #familyReminderList span,
  .folio-ui #familyReminderList small { font-size: 10px; }
}

/* Readable compact typography ------------------------------------------ */
.folio-ui {
  --folio-small-font: var(--ui-small-font, "Noto Serif SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif);
}

.folio-ui small,
.folio-ui .professional-hidden-god,
.folio-ui .professional-value,
.folio-ui .professional-nayin,
.folio-ui .professional-vault,
.folio-ui .professional-shensha-item b,
.folio-ui .professional-shensha-toggle,
.folio-ui .fortune-ten-gods,
.folio-ui .fortune-hidden-empty,
.folio-ui .fortune-vault-list,
.folio-ui .bazi-heading-actions > p,
.folio-ui .subsection-heading p,
.folio-ui .mobile-scroll-hint,
.folio-ui .smart-column-meta > span,
.folio-ui .smart-ten-god,
.folio-ui .smart-link > b,
.folio-ui .smart-hidden,
.folio-ui .ziwei-palace-title,
.folio-ui .ziwei-palace header > span,
.folio-ui .ziwei-palace header > i,
.folio-ui .ziwei-star,
.folio-ui .ziwei-mutagen,
.folio-ui .ziwei-center-mark,
.folio-ui .ziwei-center > p,
.folio-ui .ziwei-center dd,
.folio-ui .almanac-selectors span,
.folio-ui .almanac-toolbar > p,
.folio-ui .almanac-legend span,
.folio-ui .almanac-weekdays span,
.folio-ui .almanac-day > span,
.folio-ui .almanac-basis > span,
.folio-ui .almanac-basis small,
.folio-ui .almanac-disclaimer,
.folio-ui .family-member-settings label > span,
.folio-ui .family-members-pane > header p,
.folio-ui .family-member-list small,
.folio-ui .family-chart-badges span,
.folio-ui .family-detail-header p,
.folio-ui .family-relation-grid span,
.folio-ui .family-relation-grid p,
.folio-ui .family-relationship > small,
.folio-ui .family-window p,
.folio-ui .family-window small,
.folio-ui #familyReminderList span,
.folio-ui #familyReminderList small,
.folio-ui .family-status {
  font-family: var(--folio-small-font);
  font-weight: 500;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}

.folio-ui.folio-result-mode .result-section {
  --folio-muted: #596963;
}

@media (min-width: 1025px) {
  .folio-ui small { font-size: 10px !important; }

  .folio-ui .professional-hidden-god,
  .folio-ui .professional-value,
  .folio-ui .professional-nayin,
  .folio-ui .professional-vault,
  .folio-ui .professional-shensha-item b,
  .folio-ui .professional-shensha-toggle,
  .folio-ui .fortune-ten-gods,
  .folio-ui .fortune-hidden-empty,
  .folio-ui .fortune-vault-list,
  .folio-ui .bazi-heading-actions > p,
  .folio-ui .subsection-heading p,
  .folio-ui .mobile-scroll-hint,
  .folio-ui .smart-column-meta > span,
  .folio-ui .smart-ten-god,
  .folio-ui .smart-link > b,
  .folio-ui .smart-hidden,
  .folio-ui .ziwei-palace header > span,
  .folio-ui .ziwei-palace header > i,
  .folio-ui .ziwei-star,
  .folio-ui .ziwei-mutagen,
  .folio-ui .ziwei-center-mark,
  .folio-ui .ziwei-center > p,
  .folio-ui .ziwei-center dd { font-size: 10px !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .folio-ui small,
  .folio-ui .professional-hidden-god,
  .folio-ui .professional-value,
  .folio-ui .professional-nayin,
  .folio-ui .professional-vault,
  .folio-ui .professional-shensha-item b,
  .folio-ui .professional-shensha-toggle,
  .folio-ui .fortune-ten-gods,
  .folio-ui .fortune-hidden-empty,
  .folio-ui .fortune-vault-list,
  .folio-ui .bazi-heading-actions > p,
  .folio-ui .subsection-heading p,
  .folio-ui .mobile-scroll-hint,
  .folio-ui .smart-column-meta > span,
  .folio-ui .smart-ten-god,
  .folio-ui .smart-link > b,
  .folio-ui .smart-hidden,
  .folio-ui .ziwei-palace header > span,
  .folio-ui .ziwei-palace header > i,
  .folio-ui .ziwei-star,
  .folio-ui .ziwei-mutagen,
  .folio-ui .ziwei-center-mark,
  .folio-ui .ziwei-center > p,
  .folio-ui .ziwei-center dd { font-size: 9px !important; }
}

@media (max-width: 767px) {
  .folio-ui small,
  .folio-ui .professional-chart thead th small,
  .folio-ui .professional-row > th small,
  .folio-ui .professional-main-star small,
  .folio-ui .professional-hidden-god,
  .folio-ui .professional-value,
  .folio-ui .professional-nayin,
  .folio-ui .professional-vault,
  .folio-ui .professional-shensha-item b,
  .folio-ui .professional-shensha-toggle,
  .folio-ui .fortune-ten-gods,
  .folio-ui .fortune-hidden-empty,
  .folio-ui .fortune-vault-list,
  .folio-ui .bazi-heading-actions > p,
  .folio-ui .subsection-heading p,
  .folio-ui .mobile-scroll-hint,
  .folio-ui .smart-column-meta > span,
  .folio-ui .smart-ten-god,
  .folio-ui .smart-link > b,
  .folio-ui .smart-hidden,
  .folio-ui .ziwei-palace header > span,
  .folio-ui .ziwei-palace header > i,
  .folio-ui .ziwei-star small,
  .folio-ui .ziwei-mutagen,
  .folio-ui .ziwei-center-mark,
  .folio-ui .ziwei-center > p,
  .folio-ui .ziwei-center dd,
  .folio-ui .almanac-toolbar > p,
  .folio-ui .almanac-legend span,
  .folio-ui .almanac-weekdays span,
  .folio-ui .almanac-day > small,
  .folio-ui .almanac-day > span,
  .folio-ui .almanac-basis small { font-size: 9px !important; }

  .folio-ui .family-heading p,
  .folio-ui .family-profile-form label span,
  .folio-ui .family-profile-form p,
  .folio-ui .family-member-settings label > span,
  .folio-ui .family-detail-header p,
  .folio-ui .family-chart-badges span,
  .folio-ui .family-relation-grid span,
  .folio-ui .family-relationship > small,
  .folio-ui .family-window > div > small,
  .folio-ui #familyReminderList span,
  .folio-ui #familyReminderList small { font-size: 10px !important; }
}

/* Relations read as inline ledger text, without nested cards or table framing. */
.folio-ui.folio-result-mode #baziRelationsSection {
  padding-top: 7px;
  padding-bottom: 8px;
}

.folio-ui.folio-result-mode #baziRelationsSection .subsection-heading {
  margin-bottom: 5px;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-scope-grid {
  gap: 14px;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-scope-card {
  min-width: 0;
  border: 0;
  background: transparent;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-scope-card > header {
  min-height: 0;
  padding: 2px 0 4px;
  border: 0;
  background: transparent;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-scope-card > header span {
  width: auto;
  height: auto;
  border: 0;
  font-size: 10px;
  font-weight: 700;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-scope-card > header h5 {
  font-size: 12px;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-scope-card > header p {
  font-size: 8px;
  white-space: nowrap;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-summary,
.folio-ui.folio-result-mode #baziRelationsSection .relation-compact-list {
  border: 0 !important;
  background: transparent !important;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-compact-list .relation-row {
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 6px;
  padding: 2px 0;
  border: 0;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-compact-list dt {
  font-size: 10px;
}

.folio-ui.folio-result-mode #baziRelationsSection .relation-compact-list dd {
  font-size: 11px;
  line-height: 1.45;
}

@media (min-width: 1100px) {
  .folio-ui.folio-result-mode #baziRelationsSection {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding-right: 10px;
    padding-left: 14px;
  }

  .folio-ui.folio-result-mode #baziRelationsSection .subsection-heading {
    align-items: flex-start;
    margin: 0;
    padding-top: 2px;
  }

  .folio-ui.folio-result-mode #baziRelationsSection .relation-scope-grid {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}