.mt-3 {
    margin-top: 1.5rem;
}
.mt-4 {
    margin-top: 2rem;
}
.hexagram-symbol {
    font-size: 2.5rem;
    text-align: center;
    color: #26332e;
}

.metaphysics-reading {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 2.25rem;
    color: #1c2421;
}

.metaphysics-reading-heading {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    color: #101816;
    margin: 0 0 0.75rem;
}

.metaphysics-reading-question {
    font-size: 1.05rem;
    color: #26332e;
    margin-bottom: 0.5rem;
}

.metaphysics-hexagram-title {
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #101816;
    margin: 0.5rem 0 0.75rem;
}

.metaphysics-divider {
    height: 1px;
    background: #e6ddd1;
    border: 0;
    margin: 1.75rem 0;
}

.metaphysics-line-text {
    white-space: pre-line;
    margin-left: 1rem;
    color: #26332e;
}

.metaphysics-interpretation {
    color: #26332e;
    line-height: 1.7;
}

.metaphysics-interpretation strong {
    color: #101816;
}

.metaphysics-timestamp {
    color: #6d7973;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 560px) {
    .metaphysics-reading {
        padding: 1.25rem 1.1rem;
    }
}

.table-container {
    overflow-x: auto;
}
.hexagram-main-title {
    text-align: center;
}
.alternative-titles-label,
.alternative-titles-list {
    display: inline;
}
.alternative-titles-container {
    margin-bottom: 1rem;
    text-align: center;
}

/* ── Divination History Cards ── */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.5rem;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.history-card:hover {
    border-color: #b5b5b5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: inherit;
}

.history-card-hexagrams {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.history-hex-arrow {
    color: #aaa;
    font-size: 1rem;
    margin-top: -0.8rem;
}

.history-card-hexagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    flex-shrink: 0;
}

.history-hex-symbol {
    font-size: 2.2rem;
    line-height: 1;
}

.history-hex-number {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.2rem;
    font-weight: 500;
}

.history-card-body {
    flex: 1;
    min-width: 0;
}

.history-card-question {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #363636;
    line-height: 1.4;
}

.history-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.history-tag-title {
    font-weight: 500;
}

.history-tag-arrow {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    color: #aaa;
    background: none !important;
}

.history-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 55px;
    color: #888;
}

.history-date-day {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}

.history-date-year {
    font-size: 0.7rem;
    color: #aaa;
}

.history-date-time {
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 0.15rem;
}

/* Mobile responsive */
@media screen and (max-width: 600px) {
    .history-card {
        padding: 0.9rem 1rem;
        gap: 0.9rem;
    }
    .history-hex-symbol {
        font-size: 1.8rem;
    }
    .history-card-hexagram {
        min-width: 45px;
    }
    .history-card-question {
        font-size: 0.9rem;
    }
    .history-card-date {
        min-width: 45px;
    }
}

/* BaZi calculator */
.bazi-app {
    width: 100%;
    min-height: calc(100vh - 52px);
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    background: #f7f7f5;
    color: #18221f;
}

.bazi-sidebar {
    background: #fff;
    border-right: 1px solid #e9e7e1;
    padding: 1.25rem 0.75rem;
}

.bazi-brand {
    font-family: Georgia, serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: #26332e;
    margin-bottom: 2rem;
}

.bazi-profile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 2.5rem;
    padding: 0 0.25rem;
}

.bazi-profile span,
.bazi-muted,
.bazi-pillar-card small,
.bazi-luck-card small,
.bazi-luck-card span {
    color: #7b837f;
}

.bazi-profile strong {
    display: block;
    font-family: Georgia, serif;
    line-height: 1.15;
}

.bazi-profile span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.bazi-avatar {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    background: #1f2a27;
    color: #e8dfd0;
    font-weight: 700;
}

.bazi-side-nav {
    display: grid;
    gap: 0.35rem;
}

.bazi-side-nav a,
.bazi-top-nav a {
    color: #52667c;
    text-decoration: none;
}

.bazi-side-nav a {
    padding: 0.75rem 0.85rem;
    border-left: 2px solid transparent;
    font-size: 0.9rem;
}

.bazi-side-nav a.is-active,
.bazi-side-nav a:hover {
    background: #f1f0ed;
    border-left-color: #1f2a27;
    color: #101816;
    font-weight: 700;
}

.bazi-main {
    min-width: 0;
}

.bazi-top-nav {
    height: 40px;
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #eceae6;
    font-size: 0.85rem;
}

.bazi-top-nav a.is-active {
    color: #17211e;
    border-bottom: 2px solid #17211e;
    font-weight: 700;
}

.bazi-content {
    width: min(1040px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 3rem 0;
}

.bazi-registration {
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(300px, 1fr);
    max-width: 760px;
    margin: 0 auto 3rem;
    background: #fff;
    border: 1px solid #e9e7e1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(28, 38, 35, 0.06);
}

.bazi-visual {
    min-height: 410px;
    background:
        linear-gradient(rgba(23, 32, 29, 0.35), rgba(23, 32, 29, 0.82)),
        url("../images/hero.80b4c033aae8.jpeg");
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bazi-visual p {
    font-family: Georgia, serif;
    font-size: 2.2rem;
    line-height: 0.95;
    margin: 0;
}

.bazi-visual span {
    display: block;
    max-width: 230px;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #e7e1d7;
}

.bazi-form {
    padding: 2.5rem;
}

.bazi-form h1,
.bazi-section h2,
.bazi-panel h2 {
    font-family: Georgia, serif;
    color: #0f1715;
}

.bazi-form h1 {
    font-size: 1.65rem;
    margin-bottom: 0.5rem;
}

.bazi-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #6d5540;
}

.bazi-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.bazi-submit {
    width: 100%;
    background: #1f2a27;
    border-color: #1f2a27;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.bazi-submit:hover {
    color: #fff;
    background: #31423d;
}

.bazi-section {
    margin-top: 2.5rem;
}

.bazi-section h2,
.bazi-panel h2 {
    font-size: 2rem;
    margin-bottom: 0.45rem;
}

.bazi-pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.bazi-pillar-card,
.bazi-panel,
.bazi-luck-card {
    background: #fff;
    border: 1px solid #e8e6df;
    border-radius: 6px;
}

.bazi-pillar-card {
    min-height: 280px;
    padding: 1.5rem 1rem;
    text-align: center;
}

.bazi-pillar-card.is-master {
    border-color: #d5d8d4;
    box-shadow: inset 0 0 0 1px #d5d8d4;
}

.bazi-pillar-card > span {
    display: block;
    min-height: 34px;
    color: #8793aa;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.bazi-character {
    font-family: Georgia, serif;
    font-size: 2.1rem;
    color: #8a4f35;
    margin: 0.65rem 0 0.1rem;
}

.bazi-pillar-card strong {
    display: block;
    min-height: 45px;
    color: #31583d;
    line-height: 1.25;
}

.bazi-pillar-card hr {
    width: 34px;
    margin: 1rem auto;
    background-color: #eceae6;
}

.bazi-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
}

.bazi-panel {
    padding: 1.5rem;
}

.bazi-balance {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bazi-balance span {
    font-family: Georgia, serif;
    font-size: 2.2rem;
    color: #8a4f35;
}

.bazi-facts div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #efede8;
}

.bazi-facts dt {
    color: #7b837f;
}

.bazi-facts dd {
    margin: 0;
    font-weight: 700;
}

.bazi-table {
    background: #fff;
    border: 1px solid #e8e6df;
}

.bazi-chip {
    display: inline-block;
    margin: 0.15rem;
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    background: #f0efeb;
    font-size: 0.8rem;
}

.bazi-luck-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.25rem;
}

.bazi-luck-card {
    min-height: 130px;
    padding: 1rem;
    text-align: center;
}

.bazi-luck-card div {
    font-family: Georgia, serif;
    font-size: 2rem;
    margin: 0.5rem 0;
    color: #1f2a27;
}

@media screen and (max-width: 900px) {
    .bazi-app {
        grid-template-columns: 1fr;
    }

    .bazi-sidebar {
        display: none;
    }

    .bazi-content {
        width: min(100% - 1rem, 720px);
        padding: 1rem 0 2rem;
    }

    .bazi-registration,
    .bazi-detail-grid {
        grid-template-columns: 1fr;
    }

    .bazi-visual {
        min-height: 220px;
    }

    .bazi-pillar-grid,
    .bazi-luck-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 560px) {
    .bazi-top-nav {
        gap: 0.8rem;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 0.75rem;
    }

    .bazi-form {
        padding: 1.2rem;
    }

    .bazi-form-grid,
    .bazi-pillar-grid,
    .bazi-luck-grid {
        grid-template-columns: 1fr;
    }

    .bazi-section h2,
    .bazi-panel h2 {
        font-size: 1.55rem;
    }
}

/* Unified metaphysics app theme */
.metaphysics-nav {
    background: #fffdf8;
    border-bottom: 1px solid #e8e1d6;
    box-shadow: 0 1px 0 rgba(37, 45, 40, 0.04);
}

.metaphysics-brand {
    font-family: Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #26332e;
}

.metaphysics-nav .navbar-item {
    color: #4f5f58;
}

.metaphysics-nav .navbar-item:hover {
    background: #f2eee6;
    color: #18221f;
}

.metaphysics-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 3rem 0;
}

.metaphysics-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.metaphysics-kicker {
    margin: 0 0 0.55rem;
    color: #8a4f35;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.metaphysics-hero h1,
.metaphysics-section-heading h2,
.metaphysics-card h2 {
    font-family: Georgia, serif;
    color: #101816;
    letter-spacing: 0;
}

.metaphysics-hero h1 {
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1;
    margin: 0 0 0.8rem;
}

.metaphysics-lede,
.metaphysics-section-heading p,
.metaphysics-context-card p,
.metaphysics-pillar-card small,
.metaphysics-luck-card small,
.metaphysics-luck-card span {
    color: #6d7973;
}

.metaphysics-lede {
    max-width: 620px;
    font-size: 1.04rem;
    line-height: 1.65;
}

.metaphysics-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid #d8cbbc;
    border-radius: 6px;
    color: #26332e;
    background: #fffdf8;
    font-weight: 700;
    text-decoration: none;
}

.metaphysics-switch:hover {
    border-color: #8a4f35;
    color: #8a4f35;
}

.metaphysics-tool-switcher {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    width: min(520px, 100%);
    padding: 0.35rem;
    border: 1px solid #d8cbbc;
    border-radius: 8px;
    background: #fffdf8;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.metaphysics-tool-link {
    flex: 1 0 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    color: #4f5f58;
    text-decoration: none;
}

.metaphysics-tool-link span {
    color: #26332e;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
}

.metaphysics-tool-link small {
    margin-top: 0.2rem;
    color: #7a847f;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
}

.metaphysics-tool-link:hover {
    background: #f2eee6;
}

.metaphysics-tool-link.is-active {
    background: #26332e;
}

.metaphysics-tool-link.is-active span,
.metaphysics-tool-link.is-active small {
    color: #fffdf8;
}

.metaphysics-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

.metaphysics-card,
.metaphysics-pillar-card,
.metaphysics-luck-card {
    background: #fffdf8;
    border: 1px solid #e6ddd1;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(37, 45, 40, 0.06);
}

.metaphysics-form-card,
.metaphysics-context-card,
.metaphysics-card {
    padding: 1.5rem;
}

.metaphysics-form-card .field {
    margin-bottom: 1.1rem;
}

.metaphysics-form-card .label {
    color: #26332e;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.metaphysics-form-card .input,
.metaphysics-form-card .select select {
    border-color: #d8cbbc;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.metaphysics-form-card .input:focus,
.metaphysics-form-card .select select:focus {
    border-color: #8a4f35;
    box-shadow: 0 0 0 0.125em rgba(138, 79, 53, 0.14);
}

.metaphysics-primary {
    width: 100%;
    min-height: 44px;
    border-color: #26332e;
    background: #26332e;
    color: #fff;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metaphysics-primary:hover {
    border-color: #3b4c45;
    background: #3b4c45;
    color: #fff;
}

.metaphysics-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.metaphysics-city-field {
    position: relative;
}

.metaphysics-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d8cbbc;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 12px 28px rgba(37, 45, 40, 0.12);
}

.metaphysics-suggestions[hidden] {
    display: none;
}

.metaphysics-suggestion {
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    color: #26332e;
    cursor: pointer;
    border-bottom: 1px solid #f1ead9;
}

.metaphysics-suggestion:last-child {
    border-bottom: none;
}

.metaphysics-suggestion:hover {
    background: #f7f3ec;
    color: #8a4f35;
}

.metaphysics-suggestion.is-status {
    color: #8b8578;
    font-style: italic;
    cursor: default;
}

.metaphysics-suggestion.is-status:hover {
    background: #fff;
    color: #8b8578;
}

.metaphysics-line-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.metaphysics-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.metaphysics-segmented label {
    cursor: pointer;
}

.metaphysics-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.metaphysics-segmented span {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid #d8cbbc;
    border-radius: 6px;
    background: #f7f3ec;
    color: #4f5f58;
    font-weight: 700;
}

.metaphysics-segmented input:checked + span {
    background: #26332e;
    border-color: #26332e;
    color: #fff;
}

.metaphysics-manual {
    margin: 1rem 0;
    padding-top: 1rem;
    border-top: 1px solid #eee5d8;
}

.metaphysics-context-card h2 {
    font-size: 2rem;
    margin-bottom: 0.65rem;
}

.metaphysics-mini-grid {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.metaphysics-mini-grid span {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    background: #f2eee6;
    color: #26332e;
    font-weight: 700;
}

.metaphysics-results {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
    scroll-margin-top: 1.25rem;
}

.metaphysics-section-heading {
    margin-bottom: 0.75rem;
}

.metaphysics-section-heading h2 {
    font-size: 2.2rem;
    margin: 0 0 0.35rem;
}

.metaphysics-pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.metaphysics-pillar-card {
    min-height: 282px;
    padding: 1.35rem 0.6rem;
    text-align: center;
    overflow: hidden;
}

.metaphysics-pillar-card.is-master {
    border-color: #8a4f35;
    box-shadow: inset 0 0 0 1px #8a4f35, 0 16px 40px rgba(37, 45, 40, 0.06);
}

.metaphysics-pillar-card > span {
    display: block;
    min-height: 34px;
    color: #8a4f35;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.metaphysics-pillar-half {
    padding: 0.7rem 0.6rem 0.85rem;
    border-radius: 6px;
    border: 1px solid transparent;
}

.metaphysics-pillar-half + .metaphysics-pillar-half {
    margin-top: 0.55rem;
}

.metaphysics-character {
    font-family: Georgia, serif;
    font-size: 2.25rem;
    color: #26332e;
    margin: 0.2rem 0 0.1rem;
}

.metaphysics-pillar-half strong {
    display: block;
    min-height: 45px;
    color: #31583d;
    line-height: 1.25;
}

.metaphysics-pillar-half small {
    display: block;
    color: #6d7973;
}

.metaphysics-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.metaphysics-balance {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metaphysics-balance span {
    color: #8a4f35;
    font-family: Georgia, serif;
    font-size: 2.2rem;
}

.metaphysics-facts div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #eee5d8;
}

.metaphysics-facts dt {
    color: #6d7973;
}

.metaphysics-facts dd {
    margin: 0;
    font-weight: 700;
}

.metaphysics-table {
    background: transparent;
}

.metaphysics-table th {
    color: #26332e;
}

.metaphysics-chip {
    display: inline-block;
    margin: 0.15rem;
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    background: #f2eee6;
    color: #26332e;
    font-size: 0.8rem;
}

.metaphysics-chip-auspicious {
    background: #e1eed8;
    color: #2c4d1f;
}

.metaphysics-chip-inauspicious {
    background: #f4d8cd;
    color: #6e2a18;
}

.metaphysics-chip-mixed {
    background: #ecdfc4;
    color: #5a4615;
}

.metaphysics-chip-present {
    background: #d3dde8;
    color: #244663;
    font-weight: 600;
}

.metaphysics-chip-warn {
    background: #f4d8cd;
    color: #6e2a18;
    font-weight: 600;
}

.metaphysics-chip-subject {
    background: #ded3ec;
    color: #43296b;
    font-weight: 600;
}

.metaphysics-chip-matter {
    background: #f3e2bd;
    color: #6b4a0f;
    font-weight: 600;
}

.metaphysics-note {
    margin-top: 0.85rem;
    color: #4f5f58;
    line-height: 1.55;
}

.metaphysics-details {
    margin-top: 1rem;
}

.metaphysics-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #26332e;
    margin-bottom: 0.5rem;
}

.metaphysics-luck-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.metaphysics-luck-card {
    min-height: 130px;
    padding: 1rem;
    text-align: center;
}

.metaphysics-luck-stars {
    margin-top: 0.45rem;
}

.metaphysics-luck-chars {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.metaphysics-luck-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 6px;
    border: 1px solid transparent;
    color: #26332e;
    font-family: Georgia, serif;
    font-size: 1.75rem;
    line-height: 1;
}

.metaphysics-element-wood {
    background: #e1eed8;
    border-color: #b9d2a4;
}

.metaphysics-element-fire {
    background: #f4d8cd;
    border-color: #d7a596;
}

.metaphysics-element-earth {
    background: #ecdfc4;
    border-color: #c9b281;
}

.metaphysics-element-metal {
    background: #e3e4e0;
    border-color: #b9bab4;
}

.metaphysics-element-water {
    background: #d3dde8;
    border-color: #97afc4;
}

@media screen and (max-width: 900px) {
    .metaphysics-page {
        width: min(100% - 1rem, 720px);
        padding: 1.5rem 0;
    }

    .metaphysics-hero,
    .metaphysics-workspace,
    .metaphysics-detail-grid {
        grid-template-columns: 1fr;
    }

    .metaphysics-hero {
        display: grid;
        align-items: start;
    }

    .metaphysics-switch {
        justify-self: start;
    }

    .metaphysics-tool-switcher {
        justify-self: start;
    }

    .metaphysics-pillar-grid,
    .metaphysics-luck-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 560px) {
    .metaphysics-form-grid,
    .metaphysics-line-grid,
    .metaphysics-pillar-grid,
    .metaphysics-luck-grid,
    .metaphysics-segmented {
        grid-template-columns: 1fr;
    }

    .metaphysics-form-card,
    .metaphysics-context-card,
    .metaphysics-card {
        padding: 1.1rem;
    }

    .metaphysics-section-heading h2 {
        font-size: 1.55rem;
    }

    .metaphysics-tool-switcher {
        width: 100%;
    }

    .metaphysics-facts div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* ----------------------------- Qi Men Dun Jia ----------------------------- */

/* Language toggle — English is the default; .is-zh on the results section flips to Chinese. */
.metaphysics-results .qmdj-zh { display: none; }
.metaphysics-results.is-zh .qmdj-zh { display: inline; }
.metaphysics-results.is-zh .qmdj-en { display: none; }

.qmdj-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.qmdj-lang-toggle {
    display: inline-flex;
    border: 1px solid rgba(80, 60, 40, 0.25);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.75);
}

.qmdj-lang-btn {
    border: 0;
    background: transparent;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #604530;
    transition: background 0.15s ease, color 0.15s ease;
}
.qmdj-lang-btn:hover { background: rgba(120, 90, 60, 0.08); }
.qmdj-lang-btn.is-active { background: #6a4f2a; color: #fdf9f0; }

.qmdj-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.qmdj-cell {
    border: 1px solid rgba(80, 60, 40, 0.18);
    border-radius: 10px;
    padding: 0.85rem 0.75rem 0.7rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 248, 240, 0.9));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 190px;
    position: relative;
}

.qmdj-cell.is-zhi-fu { border-color: #b07a3a; box-shadow: 0 0 0 2px rgba(176, 122, 58, 0.18); }
.qmdj-cell.is-zhi-shi { border-color: #4a7d4a; box-shadow: 0 0 0 2px rgba(74, 125, 74, 0.18); }
.qmdj-cell.is-subject { outline: 2px dashed #7a5cae; outline-offset: -5px; }
.qmdj-cell.is-matter { outline: 2px dashed #c29234; outline-offset: -5px; }
.qmdj-cell.is-subject.is-matter { outline: 3px double #8a5c2e; outline-offset: -5px; }
.qmdj-cell.is-center { background: linear-gradient(180deg, rgba(245, 235, 220, 0.95), rgba(235, 220, 200, 0.9)); }

/* Element accent along the top edge of each palace. */
.qmdj-cell { border-top-width: 3px; }
.qmdj-cell.qmdj-el-wood { border-top-color: #b9d2a4; }
.qmdj-cell.qmdj-el-fire { border-top-color: #d7a596; }
.qmdj-cell.qmdj-el-earth { border-top-color: #c9b281; }
.qmdj-cell.qmdj-el-metal { border-top-color: #b9bab4; }
.qmdj-cell.qmdj-el-water { border-top-color: #97afc4; }

.qmdj-emoji {
    font-size: 0.95em;
    margin-right: 0.28rem;
    font-style: normal;
    font-weight: 400;
}
.qmdj-stem .qmdj-emoji { font-size: 0.85em; margin-right: 0.18rem; }

.qmdj-cell-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dashed rgba(80, 60, 40, 0.15);
    padding-bottom: 0.3rem;
}

.qmdj-palace-num { font-weight: 600; font-size: 0.95rem; }
.qmdj-palace-dir { font-size: 0.72rem; color: rgba(80, 60, 40, 0.65); }

.qmdj-deity {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #8a6a3f;
    min-height: 1.2em;
}

/* Two-column body: star / door on the left, heaven stem above earth stem on the right. */
.qmdj-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.6rem;
    align-items: center;
    flex: 1;
}

.qmdj-slot { display: flex; align-items: center; min-height: 2.1rem; }

.qmdj-star {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(120, 90, 60, 0.07);
}
.qmdj-star small { font-size: 0.72em; font-weight: 500; opacity: 0.78; }

/* The door is the primary read of each palace — biggest element in the cell. */
.qmdj-door {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    background: rgba(120, 90, 60, 0.08);
    border: 1px solid rgba(120, 90, 60, 0.2);
}
.qmdj-door strong { font-size: 1.35rem; line-height: 1.1; font-weight: 700; }
.qmdj-door small { font-size: 0.72rem; opacity: 0.85; }

.qmdj-class-吉 { background: rgba(74, 125, 74, 0.14); color: #2d5a2d; }
.qmdj-class-凶 { background: rgba(176, 60, 60, 0.14); color: #813131; }
.qmdj-class-平, .qmdj-class-中平 { background: rgba(120, 90, 60, 0.1); color: #604530; }
.qmdj-door.qmdj-class-吉 { border-color: rgba(74, 125, 74, 0.45); }
.qmdj-door.qmdj-class-凶 { border-color: rgba(176, 60, 60, 0.45); }

.qmdj-stem-col {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
}

.qmdj-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.4rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(80, 60, 40, 0.12);
}
.qmdj-stem small {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(80, 60, 40, 0.55);
}
.qmdj-stem strong { font-size: 1.15rem; line-height: 1.15; margin: 0.1rem 0; }
.qmdj-stem em { font-size: 0.66rem; font-style: normal; color: rgba(80, 60, 40, 0.7); }

.qmdj-stem-heaven { border-top: 2px solid rgba(74, 125, 74, 0.4); }
.qmdj-stem-earth { border-bottom: 2px solid rgba(176, 122, 58, 0.45); }
.qmdj-stem-borrow { border-style: dashed; }

.qmdj-center-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    text-align: center;
}
.qmdj-center-note {
    font-size: 0.72rem;
    color: rgba(80, 60, 40, 0.6);
    margin: 0;
    max-width: 24ch;
}

.qmdj-cell-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: auto;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(80, 60, 40, 0.12);
    min-height: 1.1rem;
}
.qmdj-cell-footer .metaphysics-chip { font-size: 0.65rem; padding: 0.1rem 0.4rem; }

.qmdj-pillar-table th,
.qmdj-pillar-table td {
    text-align: center;
    vertical-align: middle;
}

.qmdj-pillar-table tbody strong { font-size: 1.1rem; }

.qmdj-pillar-table th.qmdj-pillar-day,
.qmdj-pillar-table td.qmdj-pillar-day { background: rgba(122, 92, 174, 0.10); }

.qmdj-pillar-table th.qmdj-pillar-hour,
.qmdj-pillar-table td.qmdj-pillar-hour { background: rgba(194, 146, 52, 0.12); }

@media screen and (max-width: 720px) {
    /* Palace positions carry meaning: preserve the 3-by-3 plate on phones. */
    .qmdj-grid { gap: 0.25rem; }
    .qmdj-cell {
        min-width: 0;
        min-height: auto;
        padding: 0.4rem 0.3rem;
        gap: 0.3rem;
        border-radius: 6px;
        overflow-wrap: anywhere;
    }
    .qmdj-cell-header { flex-wrap: wrap; gap: 0.1rem 0.25rem; }
    .qmdj-palace-num { font-size: 0.8rem; }
    .qmdj-palace-dir { font-size: 0.65rem; }
    .qmdj-deity { font-size: 0.75rem; letter-spacing: 0; }
    .qmdj-main { gap: 0.3rem; }
    .qmdj-slot, .qmdj-stem-col { min-width: 0; }
    .qmdj-star, .qmdj-door {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 0.15rem;
        padding: 0.2rem;
        font-size: 0.75rem;
    }
    .qmdj-door strong { font-size: 0.9rem; }
    .qmdj-stem-col { flex-wrap: wrap; gap: 0.15rem; }
    .qmdj-stem { min-width: 0; max-width: 100%; padding: 0.15rem; }
    .qmdj-stem strong { font-size: 0.9rem; }
    .qmdj-stem small { letter-spacing: 0; }
    /* Seasonal states remain available in the per-palace detail table. */
    .qmdj-grid .qmdj-emoji,
    .qmdj-star small,
    .qmdj-door small,
    .qmdj-stem em { display: none; }
    .qmdj-center-note { font-size: 0.65rem; }
    .qmdj-cell-footer .metaphysics-chip {
        max-width: 100%;
        white-space: normal;
        font-size: 0.625rem;
        padding: 0.1rem 0.2rem;
    }
}

@media screen and (max-width: 560px) {
    .qmdj-chart-card { padding: 0.5rem; }
    /* Give long English names the full palace width on narrow phones. */
    .qmdj-main { grid-template-columns: minmax(0, 1fr); }
    .qmdj-stem-col { justify-content: flex-start; }
}