html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Picker for LUNAR dates: never use a native Gregorian date input to represent lunar days. */
.lunar-date-picker__panel { max-width: 410px; background: var(--bs-body-bg, #fff); }
.lunar-date-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .35rem;
}
.lunar-date-picker__days .btn { min-width: 0; padding: .35rem .1rem; }

/* Application landing and form presentation (no external asset dependencies). */
.home-shell { max-width: 1160px; margin: 0 auto; padding: 1.5rem 0 3rem; }
.home-hero { position: relative; display: flex; align-items: center; min-height: 270px;
    overflow: hidden; border-radius: 24px; padding: clamp(1.65rem, 5vw, 3.7rem);
    background: linear-gradient(117deg,#102f36 0%,#1c4850 55%,#255e60 100%); color: #fff; }
.home-hero:after { content: ""; position: absolute; right: -100px; top: -135px; width: 440px; height: 440px;
    border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,255,255,.035),0 0 0 112px rgba(255,255,255,.025); pointer-events:none; }
.home-hero__symbol { position: absolute; right: 12%; top: 24%; color: #a9d8c8; opacity: .22; font-size: 8rem; }
.home-hero__content { position: relative; z-index: 1; max-width: 680px; }
.home-eyebrow,.feature-heading__eyebrow,.home-topic__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.home-eyebrow { color: #abd5c6; }
.home-eyebrow--dark { color: #537c70; }
.home-hero h1 { font-weight: 740; font-size: clamp(2rem,4vw,3.5rem); line-height:1.15; margin: .8rem 0 1rem; }
.home-hero h1 span { color: #d5b98e; }
.home-hero p { max-width: 620px; margin: 0; color: #d0e5e4; line-height: 1.75; }
.home-section { margin-top: 2.8rem; }
.home-section__heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.home-section__heading h2 { font-size: clamp(1.3rem,2.3vw,1.85rem); font-weight:700; margin:.4rem 0 0; color:#1b3239; }
.home-section__count { color:#657d83; font-size:.85rem; }
.home-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem; }
.home-topic { display:flex; flex-direction:column; min-width:0; border:1px solid #dbe6e9; border-radius:20px;
    background:white; padding:clamp(1.25rem,2.4vw,2rem); box-shadow:0 12px 35px rgba(18,49,59,.055); }
.home-topic__top { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.65rem; }
.home-topic__monogram { display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
    background:#e1f0ed;color:#195c53;font-size:1.75rem;font-weight:600; }
.home-topic--bazi .home-topic__monogram { background:#f5ebd9;color:#93672e; }
.home-topic__state { font-size:.73rem; border-radius:50px; padding:.4rem .7rem; background:#edf5f2; color:#23725b; font-weight:600; }
.home-topic--bazi .home-topic__state { background:#fff4e5;color:#946b32; }
.home-topic__eyebrow { color:#688588; }
.home-topic h3 { margin:.5rem 0 .8rem; font-weight:750; font-size:1.65rem; color:#163a40; }
.home-topic p { color:#5f7580; line-height:1.75; flex:1; }
.home-topic__facts { display:flex; flex-wrap:wrap; gap:.5rem; margin: .5rem 0 1.7rem; }
.home-topic__facts span { padding:.3rem .6rem; border:1px solid #e3ebec; background:#f8faf9; border-radius:7px; font-size:.76rem; color:#4f6971; }
.home-topic__action { display:flex;justify-content:space-between;align-items:center;text-align:left;
    background:#19474c; color:#fff; border-radius:10px; padding:.78rem 1rem; font-weight:600; }
.home-topic__action:hover { background:#12373d; color:#fff; }
.home-topic--bazi .home-topic__action { background:#775a38; }
.home-topic--bazi .home-topic__action:hover { background:#60492d; }
.home-disclaimer { margin-top:1.5rem; color:#7c8a91; font-size:.83rem; }
.feature-shell { max-width:880px; margin: 0 auto 2rem; }
.feature-heading { margin: 1rem 0 1.75rem; }
.feature-back { display:inline-flex; align-items:center; margin-bottom:1.6rem; color:#587c83; text-decoration:none; font-size:.9rem; }
.feature-back:hover { color:#1c5558; text-decoration:underline; }
.feature-heading__eyebrow { color:#527b74; }
.feature-heading h1 { margin:.4rem 0 .7rem; color:#183b42;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:740; }
.feature-heading p { color:#647a83; line-height:1.7; max-width:720px; margin:0; }
.feature-form-card { border:1px solid #dce7e9; border-radius:20px; background:#fff;
    box-shadow:0 14px 44px rgba(13,51,64,.06); padding:clamp(1.25rem,3vw,2rem); }
.feature-form-card__heading { display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem;padding-bottom:1.25rem;border-bottom:1px solid #edf1f1; }
.feature-step { width:42px;height:42px; display:grid;place-items:center; border-radius:12px;
    color:#276357;background:#e8f2ef;font-weight:800;font-size:.9rem; }
.feature-form-card__heading h2 { font-size:1.1rem; font-weight:730; margin:0 0 .25rem; color:#193b41; }
.feature-form-card__heading p { margin:0;color:#70828a;font-size:.84rem; }
.feature-form-card .form-label { font-size:.9rem;font-weight:620;color:#35545d; }
.feature-form-card .form-control,.feature-form-card .form-select { border:1px solid #d2e0e5; border-radius:9px; min-height:46px; }
.feature-form-card .form-control:focus,.feature-form-card .form-select:focus { border-color:#428c85;box-shadow:0 0 0 .2rem rgba(66,140,133,.12); }
.feature-submit { min-height:44px; padding:.65rem 1.45rem; font-weight:650;border-radius:9px; background:#1c5658; border-color:#1c5658; }
.feature-submit:hover { background:#174347;border-color:#174347; }
.feature-note { margin-top:1.15rem;padding:.85rem 1rem;background:#f3f8f7;border-left:3px solid #8cadab;border-radius:8px;color:#59717a;font-size:.83rem;line-height:1.65; }
.birth-date-trigger { text-align:left; }
@media(max-width:800px) { .home-cards { grid-template-columns:1fr; }.home-hero {min-height:245px;}.home-section {margin-top:2rem;} }
@media(max-width:575px) { .home-shell {padding-top:.5rem;}.home-section__count {display:none;} .home-topic__top {margin-bottom:1.1rem;} .feature-form-card{border-radius:14px;} }

.bazi-jie-result { margin-top:1rem; padding:1rem; border-radius:10px; background:#f5f9f8; border:1px solid #d9e9e3; }
.bazi-jie-result h3 { color:#22534d; font-weight:750; }

/* Match the site's primary controls with the jade navigation. */
a, .btn-link { color: #1c6550; }
.btn-primary { background-color: #1c5650; border-color: #1c5650; }
.btn-primary:hover, .btn-primary:focus { background-color: #16453d; border-color: #16453d; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(37, 109, 77, .18); }

/* BaZi STEP 06: four resolved pillars only (no invented placeholders). */
.bazi-four-pillars { background: #f3f9f4; border: 1px solid #cfe2d5; border-radius: 14px; padding: 1.2rem; }
.bazi-four-pillars h3 { color: #1b4e3b; font-weight: 750; }
.bazi-four-pillars__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.bazi-four-pillars__item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; background: #fff; border: 1px solid #dce8df; border-radius: 12px; padding: 1rem .45rem; text-align: center; }
.bazi-four-pillars__item span { font-size: .8rem; color: #557466; font-weight: 650; min-height: 2.4rem; display: grid; place-items: center; }
.bazi-four-pillars__item strong { font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.4; color: #173e30; }
.bazi-four-pillars__item--day { background: #eaf5ed; border-color: #a9ccb4; }
@media(max-width: 575px) { .bazi-four-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* STEP 07: result panel and 4-column chart remain aligned with the birth form. */
.bazi-chart-result { margin-top: 1.8rem; margin-bottom: 3rem; width: 100%; }
.bazi-chart-result > h2 { text-align: center; font-weight: 750; color: #1c4d3c; margin-bottom: 1rem; }
.bazi-chart__status { text-align: center; color: #4b7561; background: #f0f7f1; border: 1px solid #d7e9d9; border-radius: 10px; padding: .8rem 1rem; }
.bazi-chart__summary { background: #fff; border: 1px solid #d8e8dd; border-radius: 14px; padding: clamp(1rem, 2.5vw, 1.5rem); }
.bazi-chart__summary h2 { color: #1e4e3e; font-weight: 730; }
.bazi-chart__facts, .bazi-chart__rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.25rem; margin-bottom: .75rem; }
.bazi-chart__facts > div, .bazi-chart__rule-list > div { min-width: 0; }
.bazi-chart__facts dt, .bazi-chart__rule-list dt { font-size: .8rem; color: #668273; font-weight: 600; }
.bazi-chart__facts dd, .bazi-chart__rule-list dd { margin: .2rem 0 .5rem; overflow-wrap: anywhere; color: #244b37; font-size: .93rem; }
.bazi-chart__master { font-weight: 650; color: #1f6145; margin-bottom: 0; }
.bazi-chart__rules { background: #f8fbf9; border: 1px solid #d7e8dd; border-radius: 12px; padding: 1rem; color: #315741; }
.bazi-chart__rules summary { cursor: pointer; font-weight: 650; }
.bazi-chart__rule-list { margin: 1rem 0 0; }
.bazi-pillar__pending { font-size: .85rem; color: #647f70; font-style: normal; margin-top: .35rem; }
.bazi-pillar__reason { color: #7b7464; font-size: .73rem; line-height: 1.4; overflow-wrap: anywhere; }
@media(max-width: 640px) { .bazi-chart__facts, .bazi-chart__rule-list { grid-template-columns: 1fr; } }

/* STEP 08: stable ordered hidden-stem display, intentionally without numeric weights. */
.bazi-pillar__element { font-size: .78rem !important; min-height: 0 !important; color: #49735d !important; line-height: 1.45; }
.bazi-hidden-stems { width: 100%; border-top: 1px solid #e0e9e1; margin-top: .65rem; padding-top: .65rem; }
.bazi-hidden-stems__title { font-size: .78rem; font-weight: 700; color: #355a45; margin-bottom: .45rem; }
.bazi-hidden-stems__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.bazi-hidden-stems__item { border-radius: 8px; background: #f1f7f2; padding: .4rem .45rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .5rem; font-size: .78rem; color: #355c44; }
.bazi-hidden-stems__role { font-size: .71rem; color: #627e6e; }
.bazi-hidden-stems__stem { font-weight: 730; }
.bazi-hidden-stems__element { font-size: .71rem; color: #597562; }
.bazi-hidden-stems__legend { margin-top: 1rem; color: #5b7866; font-size: .83rem; line-height: 1.6; }
@media(max-width:575px) { .bazi-hidden-stems__item { flex-direction: column; align-items: flex-start; text-align: left; } }

/* STEP 09: separate labels for exposed and hidden stems, never ratings or fortune scores. */
.bazi-ten-god__reference { font-size: .75rem !important; color: #35684f !important; font-weight: 650 !important; }
.bazi-ten-god__visible { font-size: .78rem !important; color: #386c55 !important; padding: .25rem .45rem; background: #e8f4ed; border-radius: 7px; }
.bazi-ten-god__visible strong { font-size: .8rem !important; }
.bazi-ten-god__hidden { font-size: .72rem; color: #356b52; width: 100%; }
.bazi-ten-god__hidden strong { font-size: .74rem !important; }
.bazi-ten-god__legend { border: 1px solid #d5e7d9; border-radius: 10px; padding: .75rem 1rem; background: #fbfdfb; color: #365f49; }
.bazi-ten-god__legend summary { font-weight: 650; cursor: pointer; }
.bazi-ten-god__legend ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .85rem; padding-left: 1.3rem; margin: .65rem 0; }
.bazi-ten-god__legend li { font-size: .86rem; }
.bazi-ten-god__legend p { margin: .6rem 0 0; font-size: .83rem; color: #557665; }
@media(max-width:575px) { .bazi-ten-god__legend ul { grid-template-columns: 1fr; } }

/* STEP 10: visually isolate civil-vs-solar comparisons. */
.bazi-time-comparison { border: 1px solid #cddfd7; background: #f8fbf8; padding: 1rem 1.2rem; border-radius: 12px; margin: 1rem 0; color: #2c5a45; }
.bazi-time-comparison h3 { font-weight: 700; color: #1c523b; }

/* STEP 11 — Da Yun is an optional module, visually separate from natal pillars. */
.bazi-dayun { margin-top: 1.5rem; border: 1px solid #d2e4d5; border-radius: 14px; background: #f8fbf8; padding: clamp(1rem, 2.4vw, 1.5rem); }
.bazi-dayun h3 { color: #22543d; font-weight: 750; }
.bazi-dayun__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.2rem; margin: .85rem 0 1.15rem; }
.bazi-dayun__facts dt { font-size: .79rem; color: #658373; }
.bazi-dayun__facts dd { margin: .1rem 0 .6rem; font-weight: 650; font-size: .91rem; color: #284e3a; overflow-wrap: anywhere; }
.bazi-dayun__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; }
.bazi-dayun__item { display: flex; flex-direction: column; gap: .38rem; min-width: 0; text-align: center; padding: .82rem .35rem; background: #fff; border: 1px solid #ddeae0; border-radius: 10px; color: #244c35; }
.bazi-dayun__item strong { font-size: clamp(.94rem,1.4vw,1.1rem); }
.bazi-dayun__item small { line-height: 1.45; font-size: .73rem; color: #52715b; }
.bazi-dayun__sequence { font-size: .76rem; font-weight: 700; color: #5c8068; }
.bazi-dayun__note { margin: 1rem 0 0; font-size: .81rem; line-height: 1.55; color: #587665; }
.bazi-dayun__pending { margin: .8rem 0; color: #735f34; }
@media(max-width:960px) { .bazi-dayun__grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:575px) { .bazi-dayun__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .bazi-dayun__facts { grid-template-columns: 1fr; } }

/* STEP 12B/C: four aligned vertical lanes and five contrasting phase colors. */
.bazi-chart-result { max-width: 1200px; }
.bazi-four-pillars { padding: clamp(.9rem,2vw,1.5rem); }
.bazi-four-pillars__grid { gap: .8rem; align-items: stretch; }
.bazi-four-pillars__item {
    display: grid;
    grid-template-rows: 2.6rem 6.5rem 5.4rem minmax(0, 1fr);
    align-items: start; gap: .35rem;
    padding: .8rem .55rem 1rem;
}
.bazi-pillar__title { font-size: .83rem; font-weight: 750; color: #335d49; display: grid; place-items: center; text-align: center; min-width: 0; height: 100%; }
.bazi-pillar__identity { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 0; }
.bazi-four-pillars__item .bazi-pillar__identity strong { font-size: clamp(1.18rem, 2.25vw, 1.65rem); min-height: 0; }
.bazi-pillar__properties { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; overflow-wrap: anywhere; text-align: center; }
.bazi-four-pillars__item .bazi-pillar__properties span { min-height: 0; display: block; }
.bazi-pillar__hidden-zone { width: 100%; align-self: stretch; min-width: 0; }
.bazi-four-pillars__item .bazi-pillar__pending { min-height: 0; }
.bazi-hidden-stems { margin-top: 0; }
.bazi-hidden-stems__item { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: .25rem .4rem; padding: .5rem .45rem; }
.bazi-hidden-stems__role { grid-column: 1; }
.bazi-hidden-stems__stem { grid-column: 2; text-align: right; }
.bazi-hidden-stems__element { grid-column: 1 / -1; }
.bazi-ten-god__hidden { grid-column: 1 / -1; }
.bazi-balance { margin-top: 1.5rem; padding: clamp(1rem,2.3vw,1.5rem); border-radius: 14px; background: white; border: 1px solid #d6e5dc; }
.bazi-balance__heading { display:flex; align-items: center; justify-content:space-between; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.bazi-balance__heading h3 { color:#1b533e; font-weight:750; margin:0; }
.bazi-balance__tag { padding:.3rem .7rem; border-radius:20px; background:#f1f5f1; color:#587461; font-size:.78rem; }
.bazi-balance__rows { display:flex; flex-direction:column; gap:.8rem; }
.bazi-balance__row { display:grid; grid-template-columns:2rem 3.4rem minmax(0,1fr) 3.9rem; align-items:center; gap:.5rem; color:var(--phase-color); }
.bazi-balance__symbol { text-align:center; font-size:1.35rem; }
.bazi-balance__row strong { font-size:.92rem; }
.bazi-balance__percent { text-align:right; font-variant-numeric:tabular-nums; }
.bazi-balance__track { height:.72rem; border-radius:12px; overflow:hidden; background:#edf2f0; }
.bazi-balance__fill { height:100%; min-width:0; background:var(--phase-color); border-radius:12px; }
.bazi-phase--wood { --phase-color:#299653; }
.bazi-phase--fire { --phase-color:#df534e; }
.bazi-phase--earth { --phase-color:#bc9131; }
.bazi-phase--metal { --phase-color:#6d7a90; }
.bazi-phase--water { --phase-color:#3589cb; }
.bazi-balance__facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1.5rem; }
.bazi-balance__facts > div { min-width:0; border:1px solid #e1eae5; background:#f8fbf8; padding:.8rem; border-radius:10px; display:flex; flex-direction:column; gap:.35rem; }
.bazi-balance__facts span { font-size:.78rem; color:#607a68; }
.bazi-balance__facts strong { color:#225d42; font-size:1.05rem; }
.bazi-balance__facts small { line-height:1.55; font-size:.76rem; color:#678170; }
.bazi-balance__note, .bazi-balance__pending { margin:1rem 0 0; color:#5c7868; font-size:.82rem; line-height:1.7; }
@media(max-width: 900px) { .bazi-balance__facts { grid-template-columns:1fr; } }
@media(max-width: 575px) {
 .bazi-four-pillars__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
 .bazi-four-pillars__item { padding:.65rem .35rem; grid-template-rows:2.8rem 6.5rem 6.2rem minmax(0,1fr); }
 .bazi-balance__row { grid-template-columns:1.6rem 2.6rem minmax(0,1fr) 3.2rem; gap:.3rem; }
 .bazi-balance__symbol { font-size:1.1rem; }
}

/* STEP 13 - annual/monthly review remains separate from natal pillars. */
.bazi-review-input__intro { display:flex; flex-direction:column; gap:.25rem; padding:.9rem 1rem; border-radius:10px; background:#f1f8f3; border:1px solid #d3e5d8; color:#2c6146; }
.bazi-review-input__intro span { font-size:.81rem; color:#587764; }
.bazi-review { margin-top:1.5rem; padding:clamp(1rem,2vw,1.4rem); border:1px solid #d7e5dc; border-radius:14px; background:#f9fcfa; }
.bazi-review__heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; color:#275c43; }
.bazi-review__heading h3 { margin:0; font-weight:750; }
.bazi-review__heading > span { font-weight:700; font-variant-numeric:tabular-nums; }
.bazi-review__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.bazi-review__card { min-width:0; padding:1rem; background:#fff; border:1px solid #dbe7de; border-radius:12px; }
.bazi-review__card h4 { font-weight:750; color:#335e47; }
.bazi-review__pillar strong { display:inline-block; font-size:1.3rem; color:#184c37; margin:.3rem 0 .8rem; }
.bazi-review__card p { color:#476854; line-height:1.55; font-size:.84rem; }
.bazi-review__hint { color:#71877b !important; font-size:.79rem !important; }
.bazi-review__jie { overflow-wrap:anywhere; }
.bazi-review__relations { border-top:1px solid #e0e9e2; padding-top:.7rem; margin-top:.8rem; }
.bazi-review__relations h5 { font-size:.86rem; font-weight:700; color:#2b6349; }
.bazi-review__relations ul { padding-left:1.2rem; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.bazi-review__relations li { font-size:.79rem; color:#547060; line-height:1.55; }
.bazi-review__relations li span { font-weight:750; color:#2c6a4b; }
.bazi-review__disclaimer { margin:1rem 0 0; font-size:.81rem; color:#667f70; line-height:1.65; }
.bazi-review__pending { color:#946f3e !important; }
@media(max-width:700px) { .bazi-review__grid { grid-template-columns:1fr; } }

/* STEP 14: yearly star transit overlays, selected lunar month and counts. */
.ziwei-viewing-intro { display:flex; flex-direction:column; gap:.25rem; background:#f0f8f5; border:1px solid #cee1d7; border-radius:10px; padding:.8rem 1rem; }
.ziwei-viewing-intro strong { color:#255c44; }
.ziwei-viewing-intro span { color:#5d786b; font-size:.82rem; }
.ziwei-transit-summary { display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding:.85rem 1rem; margin:1rem 0; background:#eaf5ef; color:#245942; border-radius:12px; border:1px solid #cce6d7; }
.ziwei-transit-summary span { font-size:.83rem; }
.palace-cell__transits { margin-top:.65rem; padding:.45rem 0; border-top:1px dotted #b8d8c8; display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; }
.palace-cell__transits h4 { width:100%; color:#275e44; font-weight:750; font-size:.7rem; }
.ziwei-transit-star,.ziwei-transit-transformation { display:inline-block; font-size:.68rem; line-height:1.4; padding:.18rem .3rem; border-radius:6px; border:1px solid #d0dcd5; }
.ziwei-transit-star--benefic { background:#e6f5e9; color:#216c46; }
.ziwei-transit-star--malefic { background:#fff0ed; color:#9b534a; }
.ziwei-transit-transformation { background:#f0eefa; color:#615195; }
.ziwei-influence { margin-top:.6rem; border:1px solid #dce7e0; border-radius:8px; background:#f8faf8; padding:.3rem .45rem; min-width:0; }
.ziwei-influence summary { cursor:pointer; font-size:.69rem; color:#365f48; font-weight:700; }
.ziwei-influence__lines { padding:.5rem 0 .15rem; }
.ziwei-influence__lines p { margin:.15rem 0; color:#536e5e; font-size:.68rem; line-height:1.5; overflow-wrap:anywhere; }
.ziwei-influence__names { color:#66796e !important; }

/* Bát Tự: one dd/MM/yyyy text field with a custom calendar overlay.
   No second native date input / browser MM/dd/yyyy field. */
.bazi-date-combined { position:relative; min-width:0; }
.bazi-date-combined__trigger { min-width:2.65rem; color:#315e4b; }
.bazi-calendar-popover {
  position:absolute; top:calc(100% + .35rem); left:0; z-index:110;
  width:min(22rem,calc(100vw - 3rem)); max-width:100%;
  border:1px solid #cedfd4; border-radius:13px; background:#fff;
  padding:.85rem; box-shadow:0 12px 32px rgba(25,70,51,.17);
  color:#28543c;
}
.bazi-calendar-popover__toolbar { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.bazi-calendar-popover__toolbar strong { font-size:.88rem; white-space:nowrap; }
.bazi-calendar-popover__arrow { border:1px solid #d7e6db; border-radius:7px; width:2rem; height:2rem; color:#285f43; background:#f5faf7; font-size:1.25rem; line-height:1; }
.bazi-calendar-popover__arrow:disabled { opacity:.35; cursor:not-allowed; }
.bazi-calendar-popover__selectors { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:.8rem; }
.bazi-calendar-popover__days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.2rem; text-align:center; }
.bazi-calendar-popover__weekday { font-weight:700; color:#648370; font-size:.7rem; line-height:2rem; }
.bazi-calendar-popover__empty { min-height:2.25rem; }
.bazi-calendar-popover__day {
  border:1px solid transparent; background:transparent; border-radius:7px;
  min-height:2.25rem; font-size:.85rem; color:#294d3a;
}
.bazi-calendar-popover__day:hover, .bazi-calendar-popover__day:focus-visible { border-color:#78a68b; background:#edf6ef; }
.bazi-calendar-popover__day.is-selected { color:#fff; font-weight:700; background:#236348; border-color:#236348; }
.bazi-calendar-popover p { font-size:.72rem; line-height:1.5; color:#6a7e70; margin:.65rem 0 0; }

/* Seasonal Qi, independent from the eight-unit descriptive share bars. */
.bazi-seasonal { margin-top:1.5rem; padding:clamp(1rem,2.3vw,1.5rem); background:#f8fbf8; border:1px solid #d5e5d9; border-radius:14px; }
.bazi-seasonal__header { display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.85rem; }
.bazi-seasonal__header h3 { font-weight:750; color:#21553c; margin:0; }
.bazi-seasonal__header > span { background:#e9f1eb; color:#5d7665; font-size:.75rem; padding:.3rem .65rem; border-radius:20px; }
.bazi-seasonal__command { color:#355d46; font-size:.93rem; line-height:1.6; }
.bazi-seasonal__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.55rem; margin:.9rem 0; }
.bazi-seasonal__item { min-width:0; border:1px solid #dce8df; border-radius:10px; background:#fff; padding:.7rem .55rem; color:#4c6655; }
.bazi-seasonal__item-heading { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; color:var(--phase-color); }
.bazi-seasonal__item-heading > span:first-child { font-size:1.1rem; }
.bazi-seasonal__item-heading strong { font-size:.88rem; }
.bazi-seasonal__rank { margin-left:auto; padding:.12rem .35rem; border-radius:6px; background:#eff3f0; font-size:.72rem; color:#52715e; font-weight:750; }
.bazi-seasonal__rank--wang { background:#e0f3e5; color:#1e7645; }
.bazi-seasonal__rank--xiang { background:#e8effa; color:#42678e; }
.bazi-seasonal__item p { font-size:.78rem; line-height:1.55; margin:.55rem 0 .3rem; color:#55705f; }
.bazi-seasonal__roots { list-style:none; padding:0; margin:0; }
.bazi-seasonal__roots li { color:#6b7d70; border-top:1px solid #eff2ef; padding:.3rem 0; font-size:.72rem; line-height:1.45; }
.bazi-seasonal__item small { font-size:.72rem; color:#7a8e7e; line-height:1.55; }
.bazi-seasonal__comparison { margin:1rem 0 .6rem; padding:.8rem .95rem; background:#ebf3ed; border-radius:10px; color:#2c6245; line-height:1.6; font-size:.88rem; }
.bazi-seasonal__note { font-size:.79rem; color:#667d6c; line-height:1.65; margin:.8rem 0 0; }
@media (max-width: 980px) { .bazi-seasonal__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 600px) {
 .bazi-seasonal__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bazi-calendar-popover { width:min(20rem,calc(100vw - 3rem)); padding:.65rem; }
}

/* Three equally weighted topics on the home page. */
.home-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-topic--yijing .home-topic__monogram{background:#e7e9f4;color:#4c5782}
.home-topic--yijing .home-topic__action{background:#394d68}
.home-topic--yijing .home-topic__action:hover{background:#2b3e57}
@media(max-width:1050px){.home-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.home-cards{grid-template-columns:1fr}}

/* Standalone authentication pages: no app navigation or application footer. */
.auth-layout { position: relative; isolation: isolate; display: grid; min-height: 100dvh; place-items: center; padding: 2rem 1rem; overflow: hidden; background: #f4f8f5; }
.auth-layout__background { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 15% 10%, rgba(205,225,214,.65),transparent 38%), radial-gradient(circle at 85% 85%, rgba(241,218,159,.35), transparent 38%); }
.auth-layout__content { width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.auth-layout__brand { display: flex; align-items: center; gap: .7rem; color: #164b3e; font-size: 1.12rem; font-weight: 750; }
.auth-layout__mark { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 12px; background: #f5cd5e; }
.auth-layout .auth-shell { width: 100%; min-height: auto; padding: 0; margin: 0; }
.auth-layout .auth-card { width: 100%; max-width: none; margin: 0; }
.auth-layout__footer { font-size: .76rem; color: #758a81; text-align: center; }