/* Consistent spacing between home cards, matching the daily cards. */
html body [data-page="home"]>.content{display:flex;flex-direction:column;gap:8px}
html body [data-page="home"]>.content>*{margin-top:0!important;margin-bottom:0!important;flex-shrink:0}
html body [data-page="home"] .mar-entry,
html body [data-page="home"] .daily-sign,
html body [data-page="home"] .tool-card,
html body [data-page="home"] .feature-card,
html body [data-page="home"] .jiugong-module,
html body [data-page="home"] .note-card,
html body [data-page="home"] .term-history-entry{box-shadow:0 6px 0 rgba(202,162,77,.12)!important}

html body #profileContent{display:flex;flex-direction:column;gap:8px;padding-top:8px}
html body #profileContent>*{margin-top:0!important;margin-bottom:0!important}
html body #profileContent .profile-section{display:flex;flex-direction:column;gap:8px}
html body #profileContent .profile-section>*{margin-top:0!important;margin-bottom:0!important}
html body #profileContent [hidden]{display:none!important}
html body [data-page="consult"] .promise{border-radius:12px;overflow:hidden}

html body .consult-head .teacher-mark{background:transparent!important;box-shadow:none!important;border:0!important}
html body .consult-head .teacher-mark img{mix-blend-mode:multiply;background:transparent!important}

/* Shared card rhythm on primary pages, result pages and modal subpages. */
:root{--xby-card-gap:8px}
html body #wealthPeriods,html body #annualWealth{display:flex!important;flex-direction:column;gap:var(--xby-card-gap)!important;min-height:0!important}
html body #wealthPeriods>section,html body #annualWealth>section{margin-top:0!important;margin-bottom:0!important}
html body .page :is(.analysis-card,.profile-section,.service,.promise,.mar-board,.mar-candidate,.date-choice,.saved-item,.academy-card,.note-card,.menu-list){margin-top:8px!important;margin-bottom:0!important}
html body .page :is(.tool-grid,.date-purpose-grid,.mar-scores,.academy-grid,.course-grid){gap:8px!important}
html body .page :is(.mar-results,.consult-body,.daily-archive-list,.audio-archive-list){row-gap:8px!important}
html body #wealthPeriods{margin-top:8px!important}
html body .page :is(.analysis-card,.profile-section,.service,.promise,.mar-board,.mar-candidate,.date-choice,.saved-item,.academy-card,.note-card,.menu-list):first-child{margin-top:0!important}
/* Flex/grid parents already supply the gap. */
html body #profileContent>.profile-section,html body [data-page="home"]>.content>*{margin-top:0!important}

html body .birth-date-fields>label{text-align:center}

html body .time-helper-date-fields>label{text-align:center;display:flex;flex-direction:column;gap:12px}html body .time-helper-date-fields .birth-time-trigger{height:48px;width:100%;border:1px solid #dbc9ae;border-radius:10px;background:#fffdf8;color:#102e48}

/* The result page has its own stack, separate from home/chart forms. */
html body [data-page="result"]>.result-body{display:flex;flex-direction:column;gap:8px;padding-top:8px!important}
html body [data-page="result"]>.result-body>*{margin-top:0!important;margin-bottom:0!important;flex-shrink:0}
html body [data-page="result"]>.result-body>[hidden]{display:none!important}

html body .result-body>.result-tabs{margin-bottom:0!important}html body .result-body>.result-panel{padding-top:8px!important}

html body #annualWealth>h4{color:#a30712!important;font-size:24px!important}

/* One report-card contract for all six result tabs. */
html body .result-panel{padding-top:0!important}
html body .result-panel>article{box-sizing:border-box;border-radius:12px!important;margin:0!important}
html body .result-panel.active{display:flex;flex-direction:column;gap:8px}
html body .result-panel #kinshipSummary,
html body .result-panel #wealthPeriods,
html body .result-panel #annualWealth{display:flex;flex-direction:column;gap:8px!important}
html body .result-panel :is(#kinshipSummary,#wealthPeriods,#annualWealth)>section{border-radius:12px!important;margin:0!important}
html body .result-body>.result-tabs{padding-bottom:8px}

/* Home brand: 13px above the logo and 8px before the date text. */
html body [data-page="home"] .home-hero{min-height:0!important;padding-top:13px!important}
html body [data-page="home"] .hero-brand{margin:0 0 8px!important;padding:0!important}
html body [data-page="home"] .logo-frame{height:auto;display:flex;align-items:center;justify-content:center}
html body [data-page="home"] .logo-frame img{display:block;width:84%!important;height:auto!important;margin:0!important}
html body [data-page="home"] .home-hero>.date{margin-top:0!important}

html body .page[data-page="consult"],html body .page[data-page="profile"]{padding-bottom:8px!important}
html body [data-page="consult"] .consult-body,html body #profileContent{padding-bottom:0!important}
html body [data-page="consult"] .promise+.red-btn{margin-top:8px!important;margin-bottom:0!important}

html body [data-page="consult"] .consult-body{padding-top:8px!important}
html body [data-page="consult"] .consult-body>.section-title{margin:0!important;padding:0!important}
html body [data-page="consult"] .consult-body>.section-title small{display:none!important}
html body [data-page="consult"] .consult-body>.section-title h3{margin:0!important;line-height:1!important}

html body [data-page="consult"] .consult-head h2{margin:13px 0!important;line-height:1!important}
html body [data-page="consult"] .consult-head h2+p{margin-top:0!important}
html body [data-page="consult"] .consult-head .teacher-mark{margin-bottom:0!important}
