.chart-result {
    margin-block: 2rem;
}

.chart-scroll {
    max-width: 1200px;
    overflow-x: auto;
    border: 1px solid #b4cede;
    border-radius: 12px;
    background: #b4cede;
}

.chart-scroll:focus-visible {
    outline: 3px solid #087eaf;
    outline-offset: 3px;
}

.chart-scroll-hint {
    color: #486575;
    font-size: .9rem;
}

.ziwei-chart {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(155px, auto));
    gap: 0;
    min-width: 760px;
    color: #193b50;
}

.palace-cell {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    padding: 1rem;
    background: #fff;
    border-right: 1px solid #b4cede;
    border-bottom: 1px solid #b4cede;
    box-shadow: inset 0 3px transparent;
}

.palace-cell--menh {
    box-shadow: inset 0 3px #087eaf;
    background: #eaf6fd;
}

.palace-cell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 1.8rem;
}

.palace-cell__voids {
    /* Tuần/Triệt may be absent, but the row is always reserved for alignment. */
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .2rem;
    min-height: 2rem;
    margin-top: .15rem;
}

.palace-cell__branch {
    color: #486575;
    font-weight: 600;
    font-size: .9rem;
}

.palace-cell__body {
    background: #d9effb;
    color: #075879;
    padding: .15rem .6rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: .8rem;
}

.palace-cell__name {
    margin: .35rem 0 .75rem;
    min-height: 1.7rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
}

.palace-cell__pending {
    color: #587080;
    font-size: .8rem;
    margin: 0;
}

.palace-cell__stars {
    padding: 0;
    margin: 0 0 .6rem;
    list-style: none;
}

.star-item {
    display: inline-block;
    color: #075e89;
    background: #e0f2fc;
    border-radius: .35rem;
    padding: .2rem .6rem;
    font-size: .95rem;
    font-weight: 700;
}

.chart-center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    min-width: 0;
    padding: 1.25rem 1.5rem;
    background: #f1f9fe;
    border-right: 1px solid #b4cede;
    border-bottom: 1px solid #b4cede;
}

.chart-center__eyebrow {
    color: #486575;
    font-size: .7rem;
    letter-spacing: .15em;
    margin: 0 0 .4rem;
}

.chart-center__title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.chart-center__year {
    color: #08719c;
    font-size: 1.1rem;
    margin: .3rem 0 1rem;
}

.chart-center__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: .3rem;
    font-size: .9rem;
    margin-bottom: .8rem;
}

.chart-center__details dt {
    color: #486575;
    font-weight: 400;
}

.chart-center__details dd {
    margin: 0;
    font-weight: 600;
}

.chart-center__body {
    color: #075879;
    font-weight: 700;
    margin-bottom: .8rem;
}

.chart-center__status {
    padding-top: .7rem;
    border-top: 1px solid #c6deeb;
    color: #486575;
    font-size: .85rem;
    margin: 0;
}

.chart-rules {
    margin-top: 1rem;
    font-size: .85rem;
    color: #486575;
}

.chart-rules ul {
    margin-top: .5rem;
}

/* Group color identifies a star system; it does not encode brightness. */
.star-item--thai-tue { background: #e9f2f4; color: #24535e; font-size: .85rem; }

.star-item--loc-ton { background: #f7eddb; color: #715018; font-size: .85rem; }

.palace-cell__truong-sinh { border-top: 1px solid #c6deeb; padding-top: .4rem; margin: .5rem 0; font-size: .8rem; color: #3f5e70; }

.star-item--auxiliary { background: #eaf3f9; color: #365a73; font-size: .85rem; }

.star-transformation { display: inline-block; margin: .1rem .2rem; padding: .1rem .3rem; border: 1px solid #ad8f56; border-radius: .3rem; color: #64481b; font-size: .75rem; }
.palace-cell__void { display: inline-block; margin: 0; padding: .15rem .4rem; border-radius: .3rem; background: #36566c; color: #fff; font-size: .75rem; }

.star-brightness { display: inline-block; font-size: .75rem; font-weight: 600; color: #3f5e70; padding: .1rem .25rem; }
.palace-cell__fortunes { border-top: 1px solid #ddd; padding-top: .4rem; font-size: .75rem; }
.palace-cell__fortunes p { margin: .25rem 0; }
.fortune--selected { background: #eef3e8; border-left: 3px solid #587343; padding-left: .3rem; font-weight: 600; }
.chart-legend { font-size: .85rem; color: #3f5e70; margin-top: .75rem; max-width: 1200px; }
.viewing-year-form { margin-top: 1.5rem; max-width: 32rem; }
.viewing-year-form p { font-size: .85rem; margin-top: .5rem; }

.chart-error { color: #8b2020; border-left: 3px solid #8b2020; padding: .7rem; background: #fff2f2; }
.chart-empty { margin-top: 1.5rem; padding: 1rem; background: #edf7fd; border-radius: .5rem; }

/* Fixed left/right order also applies in the horizontally scrollable mobile chart. */
.palace-cell__auxiliary-stars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.palace-cell__auxiliary-stars > div { min-width: 0; }
.palace-cell__malefics { text-align: right; }
.palace-cell__group-title {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-weight: 600;
    color: #587080;
}
.palace-cell__auxiliary-stars .star-item {
    max-width: 100%;
    padding: .15rem .2rem;
    font-size: .78rem;
    overflow-wrap: anywhere;
}
.palace-cell__stars > li { margin-bottom: .2rem; }

.palace-cell__main-stars {
    /* Reserve space for up to two principal stars even in palaces without them. */
    flex: 0 0 auto;
    min-height: 5.5rem;
    margin-bottom: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-align: center;
}

.palace-cell__main-stars > li {
    margin-bottom: 0;
    max-width: 100%;
}

/* The auxiliary section expands to the tallest palace in each chart row.
   Consequently the Tràng Sinh / fortune information shares one baseline. */
.palace-cell__auxiliary-stars {
    flex: 1 0 auto;
    align-content: start;
}

.palace-cell__truong-sinh {
    flex: 0 0 auto;
    margin-top: 0;
}

.palace-cell__fortunes,
.palace-cell__pending {
    flex: 0 0 auto;
}

.palace-cell__fortunes p {
    min-height: 1.2rem;
}

/* Consistent jade palette and centered results, preserving the fixed 12-palace grid. */
.chart-output-shell { max-width: 1240px; width: 100%; margin: 2rem auto 3.5rem; }
.chart-result { width: 100%; max-width: 1240px; margin: 2rem auto; }
.chart-result > h2 { text-align: center; color: #193e35; font-weight: 750; }
.chart-result > p:not(.chart-legend) { text-align: center; color: #58746a; }
.chart-scroll { width: 100%; max-width: none; margin-inline: auto; border-color: #c5d9cc; background: #c5d9cc; box-shadow: 0 14px 36px rgba(22,63,47,.08); }
.chart-scroll:focus-visible { outline-color: #266f58; }
.ziwei-chart { width: 100%; min-width: 880px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(190px, auto)); color: #203c34; }
.palace-cell { border-color: #c5d9cc; padding: clamp(.6rem, 1.2vw, 1rem); }
.palace-cell--menh { box-shadow: inset 0 3px #277257; background: #eff8f1; }
.palace-cell__branch, .palace-cell__pending, .palace-cell__group-title, .chart-center__details dt, .chart-center__status { color: #527062; }
.palace-cell__body { background: #dff1e6; color: #205a45; }
.chart-center { background: #f0f8f3; border-color: #c5d9cc; }
.chart-center__title { color: #153f30; }
.chart-center__year, .chart-center__body { color: #216a4d; }
.chart-center__status, .palace-cell__truong-sinh { border-color: #d0e0d5; }
.chart-legend, .chart-rules, .chart-scroll-hint { max-width: 1200px; margin-inline: auto; color: #557366; }
.chart-rules { margin-top: 1rem; }
.chart-empty, .chart-error { max-width: 880px; margin-inline: auto; }
.chart-empty { background: #eff7f0; color: #365d49; }
.star-item { background: #e4f3ea; color: #215c46; }
.star-item--auxiliary { background: #edf4f0; color: #456b59; }
.palace-cell__main-stars { min-height: 5.5rem; }
.viewing-year-form {
    box-sizing: border-box; width: min(100%, 560px); max-width: none;
    margin: 1rem auto 2rem; padding: 1.2rem 1.4rem;
    background: #fff; border: 1px solid #d8e6de; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(17,52,38,.045);
}
.viewing-year-form label { display: block; color: #315848; font-weight: 650; margin-bottom: .5rem; }
.viewing-year-form .form-control { max-width: 100%; border-color: #cbdfd1; }
.viewing-year-form .btn-outline-primary { border-color: #28684e; color: #28684e; }
.viewing-year-form .btn-outline-primary:hover { background: #28684e; color: white; }
.viewing-year-form p { color: #688074; line-height: 1.6; }
@media (max-width: 640px) {
    .chart-output-shell { margin-top: 1.1rem; }
    .chart-result { margin-block: 1.5rem; }
    .chart-result > h2 { font-size: 1.4rem; }
    .ziwei-chart { min-width: 880px; }
    .viewing-year-form { padding: 1rem; }
}