@font-face {
    font-family: "JF Jinxuan Latte Medium";
    src: url("fonts/jf-jinxuanlatte-medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/* Feng shui system and checklist */
.system-feng_shui {
    --bg: #f3f1e8;
    --surface: #fffdf7;
    --surface-strong: #ffffff;
    --ink: #25302a;
    --muted: #69736d;
    --line: #d9d5c5;
    --primary: #526b45;
    --primary-strong: #394f31;
    --accent: #a45f2a;
    --gold: #9a7a36;
    --nav-active: #71845b;
    --nav-active-soft: #e7ecdc;
    --nav-active-text: #405337;
    background: linear-gradient(180deg, #f8f6ef 0, #f1eee5 100%);
}

.system-feng_shui .topbar {
    border-bottom-color: rgba(82, 107, 69, .22);
    background: rgba(255, 253, 247, .96);
}

.nav-system-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 172px;
    min-width: 172px;
}

.nav .nav-system-switch a.system-switch-feng-shui:not(.is-active) {
    color: #526b45;
}

.nav .nav-system-switch a.system-switch-feng-shui:not(.is-active):hover {
    background: #e7ecdc;
    color: #394f31;
}

.feng-shui-hero {
    align-items: center;
}

.feng-shui-hero p:not(.eyebrow) {
    max-width: 720px;
}

.feng-shui-hero-actions {
    max-width: 470px;
}

.feng-shui-type-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(440px, 100%);
    margin: 0 auto 22px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #eef0e8;
}

.feng-shui-type-switch a {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--muted);
    font-family: var(--font-heavy);
    font-weight: 900;
}

.feng-shui-type-switch a.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(57, 79, 49, .16);
}

.feng-shui-annual,
.feng-shui-assessment-head,
.feng-shui-check-group,
.feng-shui-notes-panel,
.feng-shui-history {
    margin-bottom: 20px;
}

.feng-shui-source-note,
.feng-shui-page-source {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.feng-shui-direction-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.feng-shui-direction-grid article {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8f6ef;
}

.feng-shui-direction-grid article > span,
.daily-feng-shui-grid article > span {
    display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}

.feng-shui-direction-grid article > strong {
    display: block;
    color: var(--primary-strong);
    font-size: 18px;
}

.feng-shui-direction-grid p {
    margin: 8px 0 0;
    line-height: 1.7;
}

.feng-shui-assessment-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 28px;
    align-items: center;
    border-top: 5px solid var(--primary);
}

.feng-shui-assessment-head h2 {
    margin: 4px 0 8px;
    font-size: clamp(26px, 3vw, 38px);
}

.feng-shui-assessment-head p {
    margin-bottom: 0;
}

.feng-shui-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 8px;
}

.feng-shui-summary div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8f6ef;
    text-align: center;
}

.feng-shui-summary strong,
.feng-shui-summary span {
    display: block;
}

.feng-shui-summary strong {
    color: var(--primary-strong);
    font-size: 25px;
}

.feng-shui-summary span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.feng-shui-assessment-meta {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .36fr);
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.feng-shui-assessment-meta label,
.feng-shui-item-note,
.feng-shui-notes-panel label {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-weight: 800;
}

.feng-shui-check-group {
    padding: 0;
    overflow: hidden;
}

.feng-shui-check-group > header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    background: #f2f2e9;
}

.feng-shui-check-group > header span {
    color: var(--gold);
    font-family: var(--font-heavy);
    font-size: 15px;
    font-weight: 900;
}

.feng-shui-check-group > header h2 {
    margin: 0;
    font-size: 22px;
}

.feng-shui-check-list {
    display: grid;
}

.feng-shui-check-item {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr);
    gap: 18px 28px;
    padding: 22px 24px;
    border-left: 4px solid transparent;
    border-bottom: 1px solid var(--line);
    transition: background .18s ease, border-color .18s ease;
}

.feng-shui-check-item:last-child {
    border-bottom: 0;
}

.feng-shui-check-item.is-improve {
    border-left-color: #b85b4b;
    background: #fff9f5;
}

.feng-shui-check-item.is-conform {
    border-left-color: #66805c;
    background: #fbfdf8;
}

.feng-shui-check-copy h3 {
    margin: 0 0 7px;
    font-size: 19px;
    line-height: 1.5;
}

.feng-shui-check-copy p,
.feng-shui-fix {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.feng-shui-fix {
    margin-top: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f3f0e7;
    color: var(--ink);
}

.feng-shui-result-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    align-content: start;
    margin: 0;
    padding: 0;
    border: 0;
}

.feng-shui-result-options legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.feng-shui-result-options label {
    cursor: pointer;
}

.feng-shui-result-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.feng-shui-result-options span {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--muted);
    font-weight: 800;
}

.feng-shui-result-options input:focus-visible + span {
    outline: 3px solid rgba(82, 107, 69, .24);
    outline-offset: 2px;
}

.feng-shui-result-options input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.feng-shui-item-note {
    grid-column: 1 / -1;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    font-size: 14px;
}

.feng-shui-item-note input {
    min-width: 0;
}

.feng-shui-notes-panel textarea {
    resize: vertical;
}

.feng-shui-notes-panel > p {
    color: var(--muted);
    line-height: 1.75;
}

.feng-shui-form-actions,
.feng-shui-history-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.feng-shui-history-list {
    display: grid;
    gap: 10px;
}

.feng-shui-history-list > article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #faf8f2;
}

.feng-shui-history-list article > div:first-child {
    display: grid;
    gap: 3px;
}

.feng-shui-history-list span,
.feng-shui-history-list small {
    color: var(--muted);
}

.feng-shui-history-actions form {
    margin: 0;
}

.feng-shui-page-source {
    max-width: 980px;
    margin: 10px auto 4px;
    text-align: center;
}

.daily-feng-shui-card {
    margin-top: 18px;
    border-top: 4px solid #71845b;
}

.daily-feng-shui-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.daily-feng-shui-grid article {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8f7f0;
}

.daily-feng-shui-grid article > strong {
    display: block;
    font-size: 18px;
    line-height: 1.5;
}

.daily-feng-shui-grid article > p,
.daily-feng-shui-grid article > ul {
    margin: 8px 0 0;
    line-height: 1.75;
}

.daily-feng-shui-grid article > ul {
    padding-left: 20px;
}

.daily-feng-shui-annual {
    grid-column: 1 / -1;
}

.daily-feng-shui-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.daily-feng-shui-footer small {
    max-width: 880px;
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 920px) {
    .feng-shui-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .feng-shui-hero-actions {
        display: grid;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feng-shui-direction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feng-shui-assessment-head,
    .feng-shui-check-item {
        grid-template-columns: 1fr;
    }

    .feng-shui-summary {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .nav-system-switch {
        width: 100%;
        min-width: 0;
    }

    .nav .nav-system-switch a {
        padding-right: 3px;
        padding-left: 3px;
        font-size: 11px;
    }

    .feng-shui-hero {
        align-items: center;
        padding: 22px 16px;
        text-align: center;
    }

    .feng-shui-hero-actions,
    .feng-shui-direction-grid,
    .feng-shui-assessment-meta,
    .daily-feng-shui-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .feng-shui-hero-actions .button {
        width: 100%;
    }

    .feng-shui-type-switch {
        margin-bottom: 16px;
    }

    .feng-shui-annual,
    .feng-shui-assessment-head,
    .feng-shui-notes-panel,
    .feng-shui-history,
    .daily-feng-shui-card {
        padding: 17px 15px;
    }

    .feng-shui-direction-grid article {
        padding: 14px;
    }

    .feng-shui-assessment-head {
        text-align: center;
    }

    .feng-shui-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .feng-shui-summary div {
        padding: 10px 5px;
    }

    .feng-shui-summary strong {
        font-size: 21px;
    }

    .feng-shui-check-group > header {
        justify-content: center;
        padding: 17px 15px;
    }

    .feng-shui-check-item {
        gap: 15px;
        padding: 18px 15px;
    }

    .feng-shui-check-copy h3 {
        font-size: 17px;
    }

    .feng-shui-result-options {
        gap: 5px;
    }

    .feng-shui-result-options span {
        min-height: 44px;
        padding: 7px 3px;
        font-size: 14px;
    }

    .feng-shui-item-note {
        grid-template-columns: 1fr;
    }

    .feng-shui-history-list > article,
    .daily-feng-shui-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .feng-shui-history-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feng-shui-history-actions .button {
        width: 100%;
    }

    .daily-feng-shui-annual {
        grid-column: auto;
    }

    .daily-feng-shui-footer .button {
        width: 100%;
    }
}

@media print {
    .system-feng_shui {
        background: #fff;
    }

    .system-feng_shui .topbar,
    .system-feng_shui .app-legal-footer,
    .system-feng_shui .back-to-top,
    .system-feng_shui .feng-shui-hero-actions,
    .system-feng_shui .feng-shui-type-switch,
    .system-feng_shui .feng-shui-history,
    .system-feng_shui .feng-shui-form-actions,
    .system-feng_shui .flash {
        display: none !important;
    }

    .system-feng_shui .shell {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .system-feng_shui .hero,
    .system-feng_shui .panel {
        box-shadow: none;
        break-inside: avoid;
    }

    .system-feng_shui .feng-shui-check-item {
        grid-template-columns: minmax(0, 1.45fr) minmax(230px, .75fr);
        break-inside: avoid;
    }

    .system-feng_shui input,
    .system-feng_shui textarea {
        border-color: #999;
        background: transparent;
    }
}

/* Lenormand AI credit history */
.ai-credit-history-hero {
    align-items: center;
    gap: 28px;
}

.ai-credit-history-total {
    min-width: 220px;
    padding: 20px 24px;
    border: 1px solid rgba(112, 69, 111, .22);
    border-radius: 16px;
    background: #f7f0f7;
    display: grid;
    gap: 4px;
    text-align: right;
}

.ai-credit-history-total span,
.ai-credit-history-summary span,
.ai-credit-history-summary small {
    color: var(--muted);
}

.ai-credit-history-total strong {
    color: var(--primary);
    font-family: var(--font-heavy);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.ai-credit-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ai-credit-history-summary article {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 20px 22px;
}

.ai-credit-history-summary strong {
    color: var(--primary-strong);
    font-family: var(--font-heavy);
    font-size: 1.35rem;
}

.ai-credit-history-panel {
    padding: 0;
    overflow: hidden;
}

.ai-credit-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-bottom: 1px solid var(--line);
}

.ai-credit-history-toolbar h2,
.ai-credit-history-toolbar p {
    margin: 0;
}

.ai-credit-history-toolbar h2 {
    font-size: 1.4rem;
}

.ai-credit-history-toolbar p {
    margin-top: 5px;
    color: var(--muted);
}

.ai-credit-history-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.ai-credit-history-filters a {
    min-width: 62px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
}

.ai-credit-history-filters a:hover,
.ai-credit-history-filters a.is-current {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.ai-credit-ledger-head,
.ai-credit-ledger-row {
    display: grid;
    grid-template-columns: 165px minmax(190px, .85fr) 88px minmax(280px, 1.65fr) 160px;
    align-items: stretch;
}

.ai-credit-ledger-head {
    background: #f5f1eb;
    color: var(--muted);
    font-size: .88rem;
}

.ai-credit-ledger-head > span,
.ai-credit-ledger-row > * {
    min-width: 0;
    padding: 16px 18px;
}

.ai-credit-ledger-head > span:not(:last-child),
.ai-credit-ledger-row > *:not(:last-child) {
    border-right: 1px solid var(--line);
}

.ai-credit-ledger-row {
    border-top: 1px solid var(--line);
}

.ai-credit-ledger-head + .ai-credit-ledger-row {
    border-top: 0;
}

.ai-credit-ledger-row > * {
    display: grid;
    align-content: center;
    gap: 5px;
    line-height: 1.55;
}

.ai-credit-ledger-row > * > span {
    display: none;
}

.ai-credit-ledger-row time,
.ai-credit-ledger-row small {
    color: var(--muted);
    font-size: .9rem;
}

.ai-credit-ledger-reason strong {
    font-family: var(--font-medium);
    font-weight: 500;
}

.ai-credit-event-badge {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .9rem;
}

.ai-credit-event-badge.is-income {
    background: #e6f2ed;
    color: #245e50;
}

.ai-credit-event-badge.is-usage {
    background: #f6e9e6;
    color: #9a493e;
}

.ai-credit-event-badge.is-refund {
    background: #eee8f3;
    color: #70456f;
}

.ai-credit-event-badge.is-system {
    background: #eeeae3;
    color: #5d5850;
}

.ai-credit-delta {
    font-family: var(--font-heavy);
    font-size: 1.1rem;
    white-space: nowrap;
}

.ai-credit-delta.is-positive {
    color: #24705d;
}

.ai-credit-delta.is-negative {
    color: #b04f42;
}

.ai-credit-delta.is-neutral {
    color: var(--muted);
}

.ai-credit-history-empty {
    min-height: 220px;
    padding: 40px 24px;
    display: grid;
    place-content: center;
    gap: 7px;
    color: var(--muted);
    text-align: center;
}

.ai-credit-history-empty strong {
    color: var(--ink);
    font-size: 1.25rem;
}

.ai-credit-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    border-top: 1px solid var(--line);
}

.ai-credit-history-pagination a {
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--primary);
    text-decoration: none;
}

@media (max-width: 1000px) {
    .ai-credit-ledger-head,
    .ai-credit-ledger-row {
        grid-template-columns: 145px minmax(165px, .8fr) 80px minmax(240px, 1.5fr) 135px;
    }
}

@media (max-width: 760px) {
    .ai-credit-history-hero {
        align-items: stretch;
    }

    .ai-credit-history-total {
        min-width: 0;
        text-align: left;
    }

    .ai-credit-history-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ai-credit-history-summary article {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 16px 18px;
    }

    .ai-credit-history-summary article small {
        grid-column: 1 / -1;
    }

    .ai-credit-history-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 20px 16px;
    }

    .ai-credit-history-filters {
        justify-content: flex-start;
    }

    .ai-credit-history-filters a {
        flex: 1 1 58px;
    }

    .ai-credit-ledger-head {
        display: none;
    }

    .ai-credit-ledger {
        display: grid;
        gap: 12px;
        padding: 14px;
        background: #f6f2ed;
    }

    .ai-credit-ledger-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fffdf9;
        overflow: hidden;
    }

    .ai-credit-ledger-row > * {
        padding: 13px 14px;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line);
    }

    .ai-credit-ledger-row > *:nth-child(odd) {
        border-right: 1px solid var(--line) !important;
    }

    .ai-credit-ledger-row > * > span {
        display: block;
        color: var(--muted);
        font-size: .78rem;
    }

    .ai-credit-ledger-row > .ai-credit-ledger-reason {
        grid-column: 1 / -1;
        border-right: 0 !important;
    }

    .ai-credit-ledger-row > *:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
        border-right: 0 !important;
    }
}

/* Membership, subscription management and AI credit store */
.membership-hero {
    align-items: center;
    gap: 2rem;
}

.membership-balance-card {
    min-width: 250px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(37, 92, 82, .2);
    border-radius: 16px;
    background: #edf5f2;
    display: grid;
    gap: .25rem;
    text-align: right;
}

.membership-balance-card span,
.membership-balance-card small,
.membership-summary-grid article span,
.membership-summary-grid article small {
    color: var(--muted);
}

.membership-balance-card strong {
    color: var(--primary);
    font-family: var(--font-heavy);
    font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.membership-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.membership-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    text-align: center;
    overflow: hidden;
}

.membership-product-card.is-featured {
    border-color: rgba(37, 92, 82, .5);
    box-shadow: 0 16px 36px rgba(37, 92, 82, .12);
}

.membership-product-card h2 {
    margin: 0;
    width: 100%;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    line-height: 1.4;
    text-wrap: balance;
}

.membership-product-price {
    color: var(--primary);
    font-family: var(--font-heavy);
    font-size: 1.65rem;
}

.membership-product-limit-note {
    color: var(--muted);
    line-height: 1.55;
}

.membership-product-card ul {
    width: min(100%, 430px);
    margin: 0;
    padding-left: 1.3rem;
    text-align: left;
    color: var(--muted);
    line-height: 1.85;
}

.membership-product-card form,
.membership-product-card form .button {
    width: min(100%, 340px);
}

.membership-product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .82rem;
}

.membership-payment-note,
.membership-action-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.membership-coupon-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: .75rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.membership-coupon-form label {
    display: grid;
    gap: .35rem;
}

.membership-payment-note h2,
.membership-action-panel h2 {
    margin: .25rem 0 .5rem;
}

.membership-payment-note-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.membership-order-panel,
.membership-plan-table-panel,
.membership-admin-orders {
    margin-bottom: 1.25rem;
}

.membership-order-list,
.membership-admin-orders {
    display: grid;
    gap: .75rem;
}

.membership-order-list article,
.membership-admin-orders article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .55);
}

.membership-order-list article > div,
.membership-admin-orders article > div {
    display: grid;
    gap: .2rem;
}

.membership-order-list article span,
.membership-admin-orders article span {
    color: var(--muted);
    font-size: .9rem;
}

.order-status {
    display: inline-flex;
    width: fit-content;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: #eee9df;
}

.order-status.is-fulfilled {
    background: #dcece6;
    color: var(--primary);
}

.order-status.is-cancelled,
.order-status.is-payment_failed {
    background: #f1dfda;
    color: #944b3a;
}

.membership-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.membership-summary-grid article {
    display: grid;
    align-content: start;
    gap: .45rem;
    min-height: 155px;
}

.membership-summary-grid article strong {
    color: var(--primary);
    font-family: var(--font-heavy);
    font-size: 1.35rem;
}

.membership-summary-grid article small {
    line-height: 1.6;
}

.membership-store-usage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.membership-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.membership-ai-store-callout {
    border-top: 4px solid var(--primary);
}

.membership-action-buttons,
.membership-action-buttons form {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.membership-pending-subscription {
    display: grid;
    gap: .2rem;
    min-width: 230px;
    padding: .65rem .85rem;
    border: 1px solid rgba(185, 126, 37, .25);
    border-radius: 10px;
    background: #fff6e7;
}

.membership-pending-subscription small {
    color: var(--muted);
}

.membership-plan-table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.membership-plan-table > div {
    display: grid;
    align-content: start;
    gap: .55rem;
    min-height: 145px;
    padding: 1.1rem;
    border-right: 1px solid var(--line);
}

.membership-plan-table > div:last-child {
    border-right: 0;
    background: #edf5f2;
}

.membership-plan-table span {
    color: var(--muted);
    line-height: 1.65;
}

.membership-admin-orders article form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.membership-admin-orders article input {
    min-width: 210px;
}

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

.membership-admin-ai-audit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.membership-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.membership-timeline li {
    display: grid;
    gap: .25rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
}

.membership-timeline li:last-child {
    border-bottom: 0;
}

.membership-timeline span {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .membership-admin-ai-audit-grid {
        grid-template-columns: 1fr;
    }

    .membership-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .membership-summary-grid,
    .membership-plan-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .membership-plan-table > div:nth-child(2) {
        border-right: 0;
    }

    .membership-plan-table > div {
        border-bottom: 1px solid var(--line);
    }

    .membership-plan-table > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

@media (max-width: 680px) {
    .membership-hero,
    .membership-payment-note,
    .membership-action-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .membership-balance-card {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .membership-product-grid,
    .membership-summary-grid,
    .membership-plan-table,
    .membership-record-grid {
        grid-template-columns: 1fr;
    }

    .membership-plan-table > div,
    .membership-plan-table > div:nth-child(2),
    .membership-plan-table > div:nth-last-child(-n + 2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .membership-plan-table > div:last-child {
        border-bottom: 0;
    }

    .membership-order-list article,
    .membership-admin-orders article {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .membership-action-buttons,
    .membership-action-buttons form,
    .membership-admin-orders article form {
        justify-content: stretch;
    }

    .membership-action-buttons .button,
    .membership-action-buttons form,
    .membership-coupon-form,
    .membership-admin-orders article form .button,
    .membership-admin-orders article input {
        width: 100%;
    }

    .membership-coupon-form {
        grid-template-columns: 1fr;
    }
}

/* Life events journal */
.life-events-hero {
    align-items: flex-end;
    margin-bottom: 22px;
}

.life-events-hero > div:first-child {
    display: grid;
    gap: 7px;
}

.life-events-hero h1,
.life-events-hero p {
    margin: 0;
}

.life-events-hero > div:first-child > p:last-child {
    max-width: 760px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.life-forecast-panel {
    display: grid;
    gap: 22px;
    min-width: 0;
    margin-bottom: 38px;
    padding: 28px;
    border: 1px solid var(--line);
    border-top: 5px solid var(--primary);
    border-radius: 14px;
    background: rgba(255, 253, 248, .94);
    box-shadow: 0 16px 38px rgba(47, 42, 32, .08);
}

.life-forecast-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.life-forecast-heading > div {
    display: grid;
    gap: 7px;
    max-width: 850px;
}

.life-forecast-heading h2,
.life-forecast-heading p,
.life-records-intro h2,
.life-records-intro p {
    margin: 0;
}

.life-forecast-heading h2 {
    font-size: clamp(25px, 2.4vw, 34px);
}

.life-forecast-heading p,
.life-records-intro p {
    color: var(--muted);
    line-height: 1.7;
}

.life-forecast-kicker,
.life-records-intro span {
    color: #9a641c;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}

.life-forecast-formula-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #bfd3ce;
    border-radius: 999px;
    background: #edf5f2;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 900;
}

.life-forecast-controls {
    display: grid;
    grid-template-columns: minmax(360px, 1.35fr) minmax(240px, 1fr) auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f6f3ec;
}

.life-forecast-controls label {
    min-width: 0;
}

.life-forecast-controls button {
    white-space: nowrap;
}

.life-forecast-stage-picker {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.life-forecast-stage-picker label {
    min-width: 0;
}

.life-forecast-stage-nav {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    align-self: end;
    border: 1px solid #b7ccc7;
    border-radius: 50%;
    background: #f7fbfa;
    color: var(--primary-strong);
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(26, 74, 65, .08);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.life-forecast-stage-nav::before {
    content: "";
    width: 9px;
    height: 9px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.life-forecast-stage-nav.is-previous::before {
    margin-left: 4px;
    transform: rotate(45deg);
}

.life-forecast-stage-nav.is-next::before {
    margin-right: 4px;
    transform: rotate(225deg);
}

.life-forecast-stage-nav:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(26, 74, 65, .2);
    transform: translateY(-1px);
}

.life-forecast-stage-nav.is-disabled {
    border-color: var(--line);
    background: #f5f2ec;
    color: #bbb4a9;
    box-shadow: none;
    cursor: not-allowed;
}

.life-forecast-stage-nav.is-disabled:hover {
    border-color: var(--line);
    background: #f5f2ec;
    color: #bbb4a9;
    box-shadow: none;
    transform: none;
}

.life-forecast-event-context {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border: 1px solid #ccd9d5;
    border-radius: 11px;
    background: #f1f7f5;
}

.life-forecast-event-context.is-empty {
    border-color: var(--line);
    background: #faf7f0;
}

.life-forecast-event-context-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.life-forecast-event-context.is-empty .life-forecast-event-context-icon {
    background: #e6ded0;
    color: #76501a;
}

.life-forecast-event-context > div:nth-child(2) {
    display: grid;
    gap: 4px;
}

.life-forecast-event-context strong,
.life-forecast-event-context p {
    margin: 0;
}

.life-forecast-event-context p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.life-forecast-event-context small {
    color: #71807b;
    font-size: 12px;
    line-height: 1.5;
}

.life-forecast-event-context > a {
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.life-forecast-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.life-forecast-summary article {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
    min-height: 126px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fffdf8;
}

.life-forecast-summary article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
}

.life-forecast-summary article.relationship::before {
    background: #b2675a;
}

.life-forecast-summary article.progress::before {
    background: #a77a2f;
}

.life-forecast-summary article.pressure::before {
    background: #a34e3d;
}

.life-forecast-summary span,
.life-forecast-summary small {
    color: var(--muted);
}

.life-forecast-summary span {
    font-size: 13px;
    font-weight: 900;
}

.life-forecast-summary strong {
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 1.45;
}

.life-forecast-summary small {
    line-height: 1.5;
}

.life-forecast-summary article.is-subscriber-locked strong,
.life-forecast-summary article.is-subscriber-locked small {
    filter: blur(6px);
    user-select: none;
}

.life-forecast-reading-note {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding: 17px 18px;
    border: 1px solid #e5d6b8;
    border-radius: 10px;
    background: #fff8e9;
}

.life-forecast-reading-note strong {
    color: #76501a;
    white-space: nowrap;
}

.life-forecast-reading-note p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.life-forecast-timeline-panel {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8f5ee;
}

.life-forecast-timeline {
    display: grid;
    gap: 24px;
}

.life-forecast-cycle {
    display: grid;
    grid-template-columns: minmax(155px, 190px) minmax(0, 1fr);
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fffdf8;
}

.life-forecast-cycle > header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 3px 18px 3px 0;
    border-right: 1px solid var(--line);
}

.life-forecast-cycle > header > div {
    display: grid;
    gap: 4px;
}

.life-forecast-cycle > header span {
    color: #9a641c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.life-forecast-cycle > header h3,
.life-forecast-cycle > header p {
    margin: 0;
}

.life-forecast-cycle > header h3 {
    font-size: 23px;
}

.life-forecast-cycle > header p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.life-forecast-years {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding-left: 22px;
}

.life-forecast-years::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 5px;
    width: 2px;
    background: #d9d1c4;
}

.life-forecast-year {
    position: relative;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.life-forecast-year.is-subscriber-locked > * {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
}

.life-forecast-year::before {
    content: "";
    position: absolute;
    top: 26px;
    left: -22px;
    width: 12px;
    height: 12px;
    border: 3px solid #f8f5ee;
    border-radius: 50%;
    background: #7f918c;
    box-shadow: 0 0 0 1px #7f918c;
}

.life-forecast-year.tone-good::before {
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.life-forecast-year.tone-caution::before {
    background: #aa5a45;
    box-shadow: 0 0 0 1px #aa5a45;
}

.life-forecast-year.is-current {
    border-color: #5b8a80;
    box-shadow: 0 0 0 2px rgba(49, 93, 88, .11);
}

.life-forecast-year-marker {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 20px 14px;
    border-right: 1px solid var(--line);
    background: #f3f0e9;
}

.life-forecast-year-marker strong {
    color: var(--primary-strong);
    font-size: 22px;
}

.life-forecast-year-marker span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.life-forecast-year-body {
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 19px;
}

.life-forecast-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.life-forecast-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #efede7;
    color: #65706c;
    font-size: 12px;
    font-weight: 900;
}

.life-forecast-badges span.good,
.life-forecast-badges span.current,
.life-forecast-badges span.recorded {
    background: #e1efeb;
    color: var(--primary-strong);
}

.life-forecast-badges span.recorded {
    background: #e8e8f4;
    color: #4c4f79;
}

.life-forecast-badges span.watch {
    background: #f4ead5;
    color: #76501a;
}

.life-forecast-badges span.caution {
    background: #f5e5e1;
    color: #934b3c;
}

.life-forecast-badges span.strength {
    margin-left: auto;
    background: transparent;
    color: var(--muted);
}

.life-forecast-year-body h4,
.life-forecast-year-body p {
    margin: 0;
}

.life-forecast-year-body h4 {
    font-size: 19px;
    line-height: 1.5;
}

.life-forecast-year-body > p,
.life-forecast-advice p,
.life-forecast-year-body details p {
    color: var(--ink);
    line-height: 1.72;
}

.life-forecast-advice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 13px;
    border-left: 3px solid #c69b52;
    background: #fff9ee;
}

.life-forecast-personal-advice {
    display: grid;
    gap: 7px;
    padding: 13px 15px;
    border: 1px solid #c8d9d4;
    border-radius: 9px;
    background: #eef6f3;
}

.life-forecast-personal-advice strong {
    color: var(--primary-strong);
}

.life-forecast-personal-advice p {
    margin: 0;
    color: var(--ink);
    line-height: 1.72;
}

.life-forecast-recorded-events {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #d8d8e7;
    border-radius: 9px;
    background: #f5f4fa;
}

.life-forecast-recorded-events > strong {
    color: #4c4f79;
    white-space: nowrap;
}

.life-forecast-recorded-events > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.life-forecast-recorded-events a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #d8d8e7;
    border-radius: 999px;
    background: #fff;
    color: #3e425f;
    font-size: 13px;
    font-weight: 850;
}

.life-forecast-recorded-events small {
    color: var(--muted);
    font-size: 11px;
}

.life-forecast-advice strong {
    color: #76501a;
}

.life-forecast-year-body details {
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.life-forecast-year-body summary {
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.life-forecast-year-body details p {
    margin-top: 9px;
    color: var(--muted);
    font-size: 13px;
}

.life-forecast-empty {
    display: grid;
    gap: 7px;
    justify-items: center;
    min-height: 190px;
    padding: 24px;
    text-align: center;
}

.life-forecast-empty span {
    max-width: 650px;
    color: var(--muted);
    line-height: 1.7;
}

.life-records-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 18px;
    padding-top: 8px;
}

.life-records-intro > div {
    display: grid;
    gap: 6px;
}

.life-records-intro h2 {
    font-size: 28px;
}

.life-records-standalone-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 4px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    background: #f8f5ee;
}

.life-records-standalone-cta > div {
    display: grid;
    gap: 5px;
}

.life-records-standalone-cta span {
    color: #9a641c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.life-records-standalone-cta h2,
.life-records-standalone-cta p {
    margin: 0;
}

.life-records-standalone-cta h2 {
    font-size: 23px;
}

.life-records-standalone-cta p {
    color: var(--muted);
    line-height: 1.65;
}

.life-records-standalone-cta .button {
    flex: 0 0 auto;
}

.life-event-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.life-event-stats article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 16px;
    min-height: 104px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--surface-strong), #f7f3ea);
    box-shadow: 0 10px 26px rgba(47, 42, 32, .06);
}

.life-event-stats span,
.life-event-stats small {
    color: var(--muted);
}

.life-event-stats span {
    font-weight: 850;
}

.life-event-stats strong {
    grid-row: 1 / 3;
    grid-column: 2;
    color: var(--primary-strong);
    font-size: 34px;
    line-height: 1;
}

.life-event-stats small {
    font-size: 13px;
}

.life-events-layout {
    display: grid;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    align-items: start;
    gap: 26px;
}

.life-event-form {
    position: sticky;
    top: 84px;
    display: grid;
    gap: 18px;
    border-top: 4px solid var(--primary);
}

@media (min-width: 1051px) {
    .life-event-form {
        max-height: calc(100vh - 104px);
        overflow-y: auto;
        outline: none;
        overscroll-behavior: contain;
        scrollbar-color: var(--primary) #ece6dc;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }

    .life-event-form:focus,
    .life-event-form:focus-visible {
        outline: none;
    }

    .life-event-form::-webkit-scrollbar {
        width: 9px;
    }

    .life-event-form::-webkit-scrollbar-track {
        border-radius: 999px;
        background: #ece6dc;
    }

    .life-event-form::-webkit-scrollbar-thumb {
        border: 2px solid #ece6dc;
        border-radius: 999px;
        background: var(--primary);
    }
}

.life-event-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.life-event-form-grid .full {
    grid-column: 1 / -1;
}

.life-event-form-grid label {
    min-width: 0;
}

.life-event-important-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    min-height: 54px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
}

.life-event-follow-up-field input {
    min-height: 54px;
}

.life-event-important-field {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 7px;
}

.life-event-subject-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.life-event-subject-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 9px 12px;
    border: 1px solid #c9ded8;
    border-radius: 8px;
    background: #eef7f4;
}

.life-event-subject-value strong {
    color: var(--primary-strong);
}

.life-event-subject-value small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.life-event-related-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.life-event-related-field > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.life-event-related-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 178px;
    padding: 9px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbf9f4;
}

.life-event-related-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 9px;
    border: 1px solid #ded8cd;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.life-event-related-option:has(input:checked) {
    border-color: #8bb1a8;
    background: #eef7f4;
    box-shadow: inset 0 0 0 1px rgba(49, 93, 88, .12);
}

.life-event-related-option.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.life-event-related-option input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
}

.life-event-related-option input[type="text"] {
    width: 100%;
    min-height: 30px;
    margin-top: 5px;
    padding: 5px 7px;
    font-size: 12px;
}

.life-event-related-option span {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.life-event-related-option strong,
.life-event-related-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.life-event-related-option small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.life-event-control-label {
    color: #374151;
    font-size: 14px;
    font-weight: 800;
}

.life-event-important-toggle input,
.life-event-important-filter input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.life-event-important-toggle span {
    display: grid;
    gap: 2px;
}

.life-event-important-toggle small {
    color: var(--muted);
    font-size: 12px;
}

.life-event-form-grid label > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.life-event-form-note {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    background: #fff8e9;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.life-event-perspective-note {
    margin: -4px 0 0;
    padding: 11px 13px;
    border: 1px solid #c9ded8;
    border-radius: 9px;
    background: #eef7f4;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

div.life-event-perspective-note {
    display: grid;
    gap: 10px;
}

div.life-event-perspective-note p {
    margin: 0;
}

div.life-event-perspective-note .button {
    justify-self: start;
}

.life-forecast-pro-gate {
    margin-top: 14px;
}

.life-event-form > .form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.life-event-timeline-panel {
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 253, 248, .88);
    box-shadow: 0 14px 34px rgba(47, 42, 32, .07);
}

.life-event-load-more {
    display: flex;
    justify-content: center;
    padding-top: 22px;
}

.life-event-filter {
    display: grid;
    grid-template-columns: minmax(165px, 1fr) minmax(190px, 1.2fr) minmax(145px, .8fr) minmax(120px, .65fr);
    gap: 11px;
    align-items: end;
    margin-bottom: 26px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8f5ee;
}

.life-event-important-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    font-weight: 800;
}

.life-event-filter .button,
.life-event-filter button {
    width: 100%;
}

.life-event-empty {
    display: grid;
    gap: 5px;
    justify-items: center;
    min-height: 180px;
    align-content: center;
}

.life-event-empty span {
    color: var(--muted);
}

.life-event-timeline {
    --life-event-rail-left: 10px;
    --life-event-content-offset: 34px;
    position: relative;
    display: grid;
    gap: 16px;
    padding-left: var(--life-event-content-offset);
}

.life-event-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: var(--life-event-rail-left);
    width: 2px;
    background: linear-gradient(var(--accent), rgba(49, 93, 88, .14));
}

.life-event-year {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 6px 0 0;
    color: var(--primary-strong);
}

.life-event-year::before {
    content: "";
    position: absolute;
    left: calc(var(--life-event-rail-left) - var(--life-event-content-offset) + 1px);
    top: 50%;
    width: 16px;
    height: 16px;
    border: 4px solid #edf5f2;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    transform: translate(-50%, -50%);
}

.life-event-year strong {
    font-size: 24px;
}

.life-event-year span {
    font-size: 13px;
    font-weight: 850;
}

.life-event-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-strong);
    box-shadow: 0 8px 22px rgba(47, 42, 32, .06);
}

.life-event-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #8aa39c;
}

.life-event-card.is-important::before {
    background: var(--accent);
}

.life-event-card.is-turning::before {
    background: #b26b35;
}

.life-event-date {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 3px;
    padding: 20px 10px;
    border-right: 1px solid var(--line);
    background: #f4f1ea;
}

.life-event-date strong {
    color: var(--primary-strong);
    font-size: 19px;
}

.life-event-date span {
    color: var(--muted);
    font-size: 12px;
}

.life-event-card-body {
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: 20px;
}

.life-event-card-body header {
    display: grid;
    gap: 8px;
}

.life-event-card-body h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.4;
}

.life-event-badges,
.life-event-people,
.life-event-snapshot,
.life-event-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.life-event-badges span,
.life-event-people span,
.life-event-snapshot span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f0ede6;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.life-event-badges .life-event-category {
    background: #e6f1ee;
    color: var(--primary-strong);
}

.life-event-badges .life-event-view-badge {
    background: #e9f0fb;
    color: #365a87;
}

.life-event-badges .life-event-shared-badge {
    background: #f2e9f7;
    color: #734c82;
}

.category-finance .life-event-category,
.category-career .life-event-category,
.category-contract .life-event-category {
    background: #f4ead5;
    color: #76501a;
}

.category-relationship .life-event-category,
.category-marriage .life-event-category,
.category-family .life-event-category,
.category-birth .life-event-category {
    background: #f7e8e4;
    color: #8b4538;
}

.category-health .life-event-category,
.category-study .life-event-category {
    background: #e8eef5;
    color: #355477;
}

.life-event-details {
    margin: 0;
    color: var(--ink);
    line-height: 1.75;
}

.life-event-snapshot {
    padding-top: 11px;
    border-top: 1px dashed var(--line);
}

.life-event-snapshot span {
    background: #edf5f2;
    color: var(--primary-strong);
}

.life-event-follow-up {
    margin: 0;
    color: #76501a;
    font-size: 13px;
    font-weight: 850;
}

.life-event-actions {
    justify-content: flex-end;
    padding-top: 4px;
}

.life-event-actions form {
    margin: 0;
}

.life-event-actions .button,
.life-event-actions button {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 13px;
}

@media (max-width: 1050px) {
    .life-forecast-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .life-forecast-stage-picker {
        grid-column: 1 / -1;
    }

    .life-forecast-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .life-forecast-cycle {
        grid-template-columns: 1fr;
    }

    .life-forecast-cycle > header {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .life-events-layout {
        grid-template-columns: 1fr;
    }

    .life-event-form {
        position: static;
    }
}

@media (max-width: 760px) {
    .life-forecast-heading,
    .life-records-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .life-records-standalone-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .life-records-standalone-cta .button {
        width: 100%;
    }

    .life-forecast-reading-note {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .life-forecast-event-context {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .life-forecast-event-context > a {
        grid-column: 2;
        justify-self: start;
    }

    .life-event-stats {
        grid-template-columns: 1fr;
    }

    .life-event-filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .life-forecast-panel {
        gap: 18px;
        padding: 20px 14px;
    }

    .life-forecast-formula-badge {
        align-self: flex-start;
    }

    .life-forecast-controls,
    .life-forecast-summary {
        grid-template-columns: 1fr;
    }

    .life-forecast-controls button,
    .life-records-intro .button {
        width: 100%;
    }

    .life-forecast-stage-picker {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 8px;
    }

    .life-forecast-stage-nav {
        width: 42px;
        height: 42px;
    }

    .life-forecast-timeline-panel {
        padding: 18px 10px;
    }

    .life-forecast-cycle {
        gap: 16px;
        padding: 14px 10px;
    }

    .life-forecast-cycle > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .life-forecast-years {
        padding-left: 15px;
    }

    .life-forecast-years::before {
        left: 2px;
    }

    .life-forecast-year {
        grid-template-columns: 1fr;
    }

    .life-forecast-year::before {
        left: -17px;
    }

    .life-forecast-year-marker {
        grid-template-columns: auto auto;
        align-items: baseline;
        justify-content: start;
        padding: 12px 15px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .life-forecast-year-body {
        padding: 16px 14px;
    }

    .life-forecast-badges span.strength {
        margin-left: 0;
    }

    .life-forecast-advice {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .life-forecast-recorded-events {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .life-events-hero {
        align-items: stretch;
    }

    .life-events-hero .hero-actions,
    .life-events-hero .button {
        width: 100%;
    }

    .life-event-form-grid,
    .life-event-filter {
        grid-template-columns: 1fr;
    }

    .life-event-related-options {
        grid-template-columns: 1fr;
    }

    .life-event-subject-value {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .life-event-subject-value small {
        text-align: left;
    }

    .life-event-timeline-panel {
        padding: 18px 14px;
    }

    .life-event-timeline {
        --life-event-rail-left: 6px;
        --life-event-content-offset: 24px;
    }

    .life-event-card {
        grid-template-columns: 1fr;
    }

    .life-event-date {
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: baseline;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .life-event-card-body {
        padding: 17px;
    }
}

/* Bazi plans, locked profiles, and coupon management */
.bazi-plan-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.pro-trial-notice {
    width: min(calc(100% - 32px), 640px);
    max-width: 640px;
    padding: 0;
    overflow: visible;
    border: 1px solid #c7b99f;
    border-radius: 18px;
    background: #fffdf8;
    color: var(--ink);
    box-shadow: 0 28px 80px rgba(32, 47, 43, .28);
}

.pro-trial-notice:not([open]) {
    display: none;
}

.pro-trial-notice[open] {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    padding: 30px;
}

.pro-trial-notice::backdrop {
    background: rgba(24, 36, 33, .48);
    backdrop-filter: blur(4px);
}

.pro-trial-notice-close {
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #ddd4c5;
    border-radius: 50%;
    background: #fff;
    color: #65706c;
    font-size: 25px;
    line-height: 1;
}

.pro-trial-notice-close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pro-trial-notice-badge {
    display: grid;
    width: 138px;
    height: 138px;
    place-items: center;
    align-content: center;
    border: 1px solid #d4b473;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff8df 0%, #f2dfb1 58%, #d8b56d 100%);
    color: #244d46;
    box-shadow: inset 0 0 0 7px rgba(255, 253, 248, .56), 0 12px 28px rgba(82, 64, 32, .16);
}

.pro-trial-notice-badge strong {
    font-size: 58px;
    line-height: .9;
}

.pro-trial-notice-badge span {
    margin-top: 7px;
    color: #855d22;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .16em;
}

.pro-trial-notice-content {
    min-width: 0;
}

.pro-trial-notice-content h2 {
    margin: 5px 0 10px;
    font-size: 27px;
    line-height: 1.35;
}

.pro-trial-notice-content p {
    margin: 0;
    color: #58635f;
    font-size: 17px;
    line-height: 1.75;
}

.pro-trial-notice-content p strong {
    color: #9a651d;
}

.pro-trial-notice-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.bazi-plan-panel > div {
    display: grid;
    gap: 5px;
}

.bazi-plan-panel > div > strong {
    color: var(--primary-strong);
    font-size: 1.35rem;
}

.bazi-plan-panel > div > span,
.bazi-profile-retention-panel > p,
.profile-card-locked > p {
    color: var(--muted);
    line-height: 1.65;
}

.bazi-plan-summary small {
    max-width: 680px;
    color: var(--muted);
    line-height: 1.6;
}

.bazi-plan-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    gap: 12px;
    width: min(100%, 520px);
    min-width: min(100%, 520px);
}

.bazi-plan-controls > form:not(.bazi-coupon-redeem-form) {
    width: 100%;
    margin: 0;
}

.bazi-plan-controls .button {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    text-align: center;
}

.bazi-plan-controls > :only-child {
    grid-column: 1 / -1;
}

.bazi-coupon-redeem-form {
    display: flex;
    align-items: end;
    gap: 10px;
    width: min(100%, 520px);
}

.bazi-coupon-redeem-form label {
    flex: 1;
}

.bazi-profile-retention-panel {
    margin-bottom: 24px;
    border-top: 4px solid var(--accent);
}

.bazi-profile-retention-form {
    display: grid;
    gap: 18px;
}

.bazi-profile-retention-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.bazi-profile-retention-options label {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 92%, var(--line) 8%);
    cursor: pointer;
}

.bazi-profile-retention-options label:has(input:checked) {
    border-color: var(--primary);
    background: #edf5f2;
}

.bazi-profile-retention-options input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.bazi-profile-retention-options span {
    display: grid;
    gap: 3px;
}

.bazi-profile-retention-options small {
    color: var(--muted);
}

.profile-card-locked {
    filter: grayscale(.8);
    opacity: .68;
    cursor: not-allowed;
    background: #efede8;
}

.profile-card-locked .tag {
    color: #68645d;
    background: #dedbd4;
}

.locked-profile-placeholder {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 14px;
}

.locked-profile-placeholder span {
    display: block;
    height: 68px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d8d5ce, #ece9e3);
}

.coupon-admin-hero {
    align-items: center;
}

.coupon-admin-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.coupon-admin-stats span {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
}

.coupon-admin-stats strong {
    color: var(--primary-strong);
    font-size: 1.2rem;
}

.coupon-admin-layout {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
    gap: 22px;
    align-items: start;
}

.coupon-editor {
    position: sticky;
    top: 88px;
}

.coupon-editor select,
.coupon-editor select option {
    text-align: center;
}

.coupon-editor select {
    text-align-last: center;
}

.coupon-editor label > small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}

.coupon-form-grid > label {
    min-width: 0;
    align-self: start;
    align-content: start;
}

.coupon-form-grid > label > input:not([type="checkbox"]),
.coupon-form-grid > label > select,
.coupon-code-control input,
.coupon-code-control .button {
    height: 52px;
    min-height: 52px;
}

.coupon-code-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.coupon-code-control .button {
    display: grid;
    width: 52px;
    min-width: 52px;
    padding: 0;
    place-items: center;
    white-space: nowrap;
}

.coupon-code-control .button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coupon-discount-value-field {
    padding: 0;
}

.coupon-discount-value-field > span:first-child {
    display: block;
    color: var(--primary-strong);
    font-weight: 800;
}

.coupon-discount-value-field > input {
    border-color: #d9bd8d;
    background: #fcf5e8;
}

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

.coupon-form-grid .full,
.coupon-active-field {
    grid-column: 1 / -1;
}

.coupon-active-field {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface) 92%, var(--line) 8%);
}

.coupon-editor .form-actions {
    justify-content: center;
}

.coupon-editor .form-actions .button {
    min-width: 150px;
    text-align: center;
}

.coupon-admin-list {
    display: grid;
    gap: 12px;
}

.coupon-admin-card {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, var(--line) 8%);
}

.coupon-admin-card.is-inactive {
    border-color: #d8d2c8;
    background: #f5f3ef;
}

.coupon-admin-card header,
.coupon-admin-actions,
.coupon-admin-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.coupon-admin-card header {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    padding-inline: 120px;
    text-align: center;
}

.coupon-admin-identity {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.coupon-admin-identity h3 {
    margin: 0;
    font-family: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.45;
}

.coupon-copy-code {
    display: grid;
    width: min(100%, 360px);
    min-height: 54px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    color: var(--primary-strong);
    cursor: copy;
    text-align: center;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.coupon-copy-code code {
    overflow: hidden;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-copy-label {
    font-size: .78rem;
    white-space: nowrap;
}

.coupon-copy-label {
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    font-weight: 700;
}

.coupon-copy-code:hover,
.coupon-copy-code:focus-visible {
    transform: translateY(-1px);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
}

.coupon-copy-code:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
    outline-offset: 4px;
    border-radius: 8px;
}

.coupon-copy-code.is-copied {
    grid-template-columns: 1fr;
    border-color: #a16b27;
    background: #fff4df;
    color: #7b4b16;
    text-align: center;
}

.coupon-copy-code.is-copied code {
    text-align: center;
}

.coupon-copy-code.is-copied .coupon-copy-label {
    display: none;
}

.coupon-status,
.coupon-admin-meta span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #e8eee9;
    color: var(--primary-strong);
    font-size: .88rem;
}

.coupon-admin-card header > .coupon-status {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
}

.coupon-status {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-weight: 800;
}

.coupon-status.is-expired,
.coupon-status.is-exhausted {
    background: #f4e2dc;
    color: #9b4638;
}

.coupon-status.is-disabled {
    background: #ece8e1;
    color: #6f6a63;
}

.coupon-admin-facts {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.coupon-admin-facts > div {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 88px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.coupon-admin-facts > div > span:first-child {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.coupon-admin-facts strong {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.coupon-usage-meter {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e0d6;
}

.coupon-usage-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.coupon-admin-actions form {
    margin: 0;
}

.coupon-admin-actions {
    justify-content: center;
    gap: 10px;
    padding-top: 2px;
}

.coupon-admin-actions .button {
    min-width: 116px;
}

.coupon-redemption-panel {
    margin-top: 22px;
}

.coupon-redemption-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.coupon-redemption-row {
    display: grid;
    grid-template-columns: 1.1fr 1.35fr .8fr .65fr;
    align-items: center;
    min-width: 0;
    border-top: 1px solid var(--line);
}

.coupon-redemption-row:first-child {
    border-top: 0;
}

.coupon-redemption-row > span {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 13px 15px;
    overflow-wrap: anywhere;
}

.coupon-redemption-row > span + span {
    border-left: 1px solid var(--line);
}

.coupon-redemption-row small {
    color: var(--muted);
    line-height: 1.45;
}

.coupon-redemption-row.is-header {
    background: #f1ede5;
    color: var(--muted);
    font-weight: 800;
}

@media (max-width: 900px) {
    .bazi-plan-panel,
    .bazi-coupon-redeem-form {
        align-items: stretch;
        flex-direction: column;
    }

    .bazi-plan-controls {
        grid-template-columns: 1fr;
        justify-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .bazi-plan-controls .button,
    .bazi-plan-controls > form:not(.bazi-coupon-redeem-form) {
        width: 100%;
    }

    .bazi-profile-retention-options,
    .coupon-admin-layout,
    .coupon-form-grid {
        grid-template-columns: 1fr;
    }

    .coupon-editor {
        position: static;
    }

    .coupon-code-control {
        grid-template-columns: minmax(0, 1fr) 52px;
    }

    .coupon-code-control .button {
        width: 52px;
    }

    .coupon-redemption-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coupon-redemption-row > span:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .coupon-redemption-row > span:nth-child(4) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 620px) {
    .coupon-admin-card {
        gap: 15px;
        padding: 16px;
    }

    .coupon-admin-card header {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 42px 0 0;
        text-align: center;
    }

    .coupon-status {
        justify-self: auto;
    }

    .coupon-admin-card header > .coupon-status {
        top: 16px;
        right: 16px;
    }

    .coupon-admin-facts {
        grid-template-columns: 1fr;
    }

    .coupon-admin-facts > div {
        min-height: 76px;
        text-align: center;
    }

    .coupon-admin-actions,
    .coupon-admin-actions form,
    .coupon-admin-actions .button {
        width: 100%;
    }

    .coupon-copy-code {
        justify-content: center;
        justify-self: center;
        width: min(100%, 300px);
    }

    .coupon-admin-identity {
        display: grid;
        justify-items: center;
    }

    .coupon-admin-identity h3 {
        text-align: center;
    }

    .pro-trial-notice[open] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 17px;
        padding: 26px 20px 22px;
        text-align: center;
    }

    .pro-trial-notice-badge {
        width: 104px;
        height: 104px;
    }

    .pro-trial-notice-badge strong {
        font-size: 44px;
    }

    .pro-trial-notice-content h2 {
        padding: 0 22px;
        font-size: 23px;
    }

    .pro-trial-notice-content p {
        font-size: 16px;
    }

    .pro-trial-notice-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .pro-trial-notice-actions .button {
        width: 100%;
    }
}

@font-face {
    font-family: "JF Jinxuan Latte Heavy";
    src: url("fonts/jf-jinxuanlatte-heavy.otf") format("opentype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "JF Kamabit";
    src: url("fonts/jf-kamabit-1.0.otf") format("opentype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

:root {
    --font-main: "JF Jinxuan Latte Medium", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    --font-heavy: "JF Jinxuan Latte Heavy", "JF Jinxuan Latte Medium", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    --font-guidance-label: "JF Kamabit", "JF Jinxuan Latte Heavy", "Microsoft JhengHei", sans-serif;
    color-scheme: light;
    --bg: #f4f1eb;
    --surface: #fffdf8;
    --surface-strong: #ffffff;
    --ink: #1f2933;
    --muted: #6b7280;
    --line: #ded7cb;
    --primary: #315d58;
    --primary-strong: #234844;
    --accent: #b4532a;
    --gold: #a2782b;
    --nav-active: #c55732;
    --nav-active-soft: #f7e2d5;
    --nav-active-text: #9e3f22;
    --danger: #b42318;
    --shadow: 0 16px 35px rgba(38, 31, 20, .08);
    --shadow-hover: 0 22px 42px rgba(38, 31, 20, .14);
}

/* Bazi formula and OpenAI comparison */
.bazi-ai-panel {
    margin: 22px 0;
    overflow: hidden;
}

.bazi-ai-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.bazi-ai-heading h2 {
    margin: 4px 0 8px;
}

.bazi-ai-heading p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
}

.bazi-ai-generate-form {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: 0 0 min(320px, 100%);
}

.bazi-ai-generate-form small {
    color: var(--muted);
    text-align: right;
    line-height: 1.5;
}

.bazi-analysis-mode-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.bazi-analysis-mode-switch > div:first-child {
    display: grid;
    gap: 2px;
}

.bazi-analysis-mode-switch small {
    color: var(--muted);
}

.bazi-analysis-mode-switch.compact {
    margin: 0 0 14px;
    padding: 9px 11px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}

.bazi-analysis-mode-switch.compact strong {
    font-size: 14px;
}

.bazi-analysis-mode-switch.compact .bazi-analysis-mode-buttons button {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 13px;
}

.bazi-analysis-mode-buttons {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 74%, var(--line) 26%);
}

.bazi-analysis-mode-buttons button {
    min-height: 36px;
    padding: 7px 15px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-weight: 700;
}

.bazi-analysis-mode-buttons button.active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(35, 72, 68, .2);
}

.bazi-ai-inline-grid {
    grid-template-columns: minmax(0, 1fr);
}

.bazi-analysis-stage {
    display: grid;
    align-items: start;
    width: 100%;
}

.bazi-analysis-view {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity .16s ease;
}

.bazi-analysis-view.inactive {
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bazi-analysis-view.active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

.bazi-ai-enhancement {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 55%, var(--primary) 45%);
}

.bazi-ai-enhancement-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.bazi-ai-enhancement-heading small {
    color: var(--muted);
}

.bazi-ai-fact-grid {
    margin-top: 0;
}

.bazi-ai-fact-grid .bazi-ai-visual-card {
    min-height: 100%;
    border-color: color-mix(in srgb, var(--line) 72%, var(--primary) 28%);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}

.bazi-ai-fact-grid .bazi-ai-visual-card p {
    white-space: normal;
    line-height: 1.7;
}

.bazi-ai-fact-grid .bazi-ai-visual-card small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.bazi-ai-fact-grid .bazi-ai-confidence-card p {
    color: var(--primary);
    font-size: 22px;
    font-weight: 800;
}

.bazi-ai-today-flow {
    margin-top: 0;
}

.bazi-ai-today-flow > div {
    border-color: color-mix(in srgb, var(--line) 72%, var(--primary) 28%);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}

.bazi-ai-today-flow strong {
    line-height: 1.65;
}

.bazi-ai-chart-fields div {
    min-height: 150px;
}

.bazi-ai-chart-fields strong {
    font-size: 16px;
    line-height: 1.5;
}

.bazi-ai-chart-fields small {
    line-height: 1.45;
}

.bazi-ai-element-bars .element-row {
    grid-template-rows: auto auto;
}

.bazi-ai-element-bars .element-row > small {
    grid-column: 2 / 4;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
}

.bazi-ai-luck-board .luck-flow-card strong {
    font-size: 13px;
    line-height: 1.45;
}

.bazi-ai-luck-board .luck-flow-card em {
    color: var(--primary);
    font-size: 12px;
}

.bazi-ai-major-row {
    grid-template-columns: minmax(180px, 1fr);
}

.bazi-parent-child-guides {
    display: grid;
    gap: 16px;
}

.bazi-parent-child-guide {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fffaf1;
}

.bazi-parent-child-guide > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    color: #fff;
    background: var(--primary);
}

.bazi-parent-child-guide > header span {
    font-size: 12px;
    opacity: .85;
}

.bazi-parent-child-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bazi-parent-child-table > div {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 15px;
    border-top: 1px solid var(--line);
}

.bazi-parent-child-table > div:nth-child(even) {
    border-left: 1px solid var(--line);
}

.bazi-parent-child-table > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.bazi-parent-child-table span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
}

.bazi-parent-child-table p,
.bazi-parent-child-table small,
.bazi-parent-child-table em {
    margin: 0;
    overflow-wrap: anywhere;
    font-style: normal;
    line-height: 1.65;
}

.bazi-parent-child-table p {
    color: var(--ink);
    font-weight: 750;
}

.bazi-parent-child-table small {
    color: var(--muted);
}

.bazi-parent-child-table em {
    padding: 8px 10px;
    border-radius: 8px;
    color: #315d58;
    background: #edf6f3;
    font-size: 13px;
}

.bazi-ai-table-wrap {
    margin-top: 0;
}

.bazi-ai-interpretation-table th {
    width: 180px;
    color: var(--primary);
    background: color-mix(in srgb, var(--surface) 86%, var(--primary) 14%);
}

.bazi-ai-interpretation-table td {
    line-height: 1.75;
    text-align: left;
    white-space: normal;
}

.bazi-ai-trend-detail {
    margin-top: 0;
    border-color: color-mix(in srgb, var(--line) 65%, var(--primary) 35%);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}

.bazi-ai-inline-card {
    border-color: color-mix(in srgb, var(--line) 55%, var(--primary) 45%);
}

.bazi-ai-source-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--surface) 78%, var(--primary) 22%);
    font-size: 12px;
    font-weight: 700;
}

.bazi-ai-saved-comparison {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.bazi-ai-saved-comparison > summary {
    cursor: pointer;
    font-weight: 700;
}

.bazi-ai-version-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
    font-size: 13px;
}

.bazi-ai-version-bar strong {
    color: var(--accent);
}

.bazi-ai-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.bazi-ai-overview > div,
.bazi-ai-error,
.bazi-ai-empty {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.bazi-ai-overview span,
.bazi-ai-columns span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.bazi-ai-overview p,
.bazi-ai-error p,
.bazi-ai-empty p {
    margin: 6px 0 0;
    line-height: 1.7;
}

.bazi-ai-error {
    margin-top: 16px;
    border-color: #d99a91;
    background: #fff7f5;
}

.bazi-ai-comparison-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.bazi-ai-comparison-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.bazi-ai-comparison-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}

.bazi-ai-comparison-card h3 {
    margin: 0;
    font-size: 17px;
}

.bazi-ai-comparison-card > header span {
    color: var(--muted);
    font-size: 12px;
}

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

.bazi-ai-columns > section {
    min-width: 0;
    padding: 16px;
}

.bazi-ai-columns .formula-result {
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, #c9a96b 8%);
}

.bazi-ai-columns .ai-result {
    background: color-mix(in srgb, var(--surface) 92%, #6b8fc9 8%);
}

.bazi-ai-columns p,
.bazi-ai-comparison-card footer p {
    margin: 0;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.bazi-ai-comparison-card footer {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, var(--line) 12%);
}

.bazi-ai-disclaimer {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.bazi-ai-empty {
    margin-top: 18px;
    border-style: dashed;
}

.bazi-ai-history {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.bazi-ai-history summary {
    cursor: pointer;
    font-weight: 700;
}

.bazi-ai-history > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.bazi-ai-history a {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.bazi-ai-history a.active,
.bazi-ai-history a:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
}

.bazi-ai-history a span {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 760px) {
    .bazi-ai-heading {
        display: grid;
    }

    .bazi-ai-generate-form {
        justify-items: stretch;
        width: 100%;
    }

    .bazi-ai-generate-form small {
        text-align: left;
    }

    .bazi-analysis-mode-switch {
        display: grid;
    }

    .bazi-analysis-mode-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .bazi-ai-enhancement-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .bazi-ai-interpretation-table th {
        width: 110px;
    }

    .bazi-parent-child-table {
        grid-template-columns: 1fr;
    }

    .bazi-parent-child-table > div:nth-child(even) {
        border-left: 0;
    }

    .bazi-parent-child-table > div:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .bazi-ai-overview,
    .bazi-ai-columns {
        grid-template-columns: 1fr;
    }

    .bazi-ai-columns .formula-result {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

.system-lenormand {
    --bg: #f5f0f5;
    --surface: #fffafd;
    --surface-strong: #ffffff;
    --ink: #302633;
    --muted: #756b79;
    --line: #ded1dc;
    --primary: #70456f;
    --primary-strong: #513150;
    --accent: #b47c25;
    --gold: #c99c43;
    --nav-active: #b47c25;
    --nav-active-soft: #f5e8cd;
    --nav-active-text: #795115;
    background:
        linear-gradient(180deg, rgba(250, 246, 250, .96), rgba(245, 240, 245, 1)),
        repeating-linear-gradient(90deg, rgba(112, 69, 111, .04) 0, rgba(112, 69, 111, .04) 1px, transparent 1px, transparent 38px);
}

.system-lenormand .topbar {
    border-bottom-color: rgba(112, 69, 111, .22);
    background: rgba(255, 250, 253, .95);
}

.system-lenormand .nav a:hover {
    background: #f0e5ef;
}

.system-admin {
    --bg: #eef2f1;
    --surface: #fbfdfc;
    --surface-strong: #ffffff;
    --ink: #22302f;
    --muted: #667472;
    --line: #cfdad7;
    --primary: #285d58;
    --primary-strong: #1d4541;
    --accent: #a8672f;
    --gold: #a67c35;
    --nav-active: #a8672f;
    --nav-active-soft: #f3e8d9;
    --nav-active-text: #78471f;
    background:
        linear-gradient(180deg, rgba(243, 247, 246, .96), rgba(234, 240, 238, 1)),
        repeating-linear-gradient(90deg, rgba(40, 93, 88, .035) 0, rgba(40, 93, 88, .035) 1px, transparent 1px, transparent 42px);
}

.system-admin .admin-topbar {
    border-bottom-color: rgba(40, 93, 88, .24);
    background: rgba(248, 251, 250, .97);
    box-shadow: 0 8px 24px rgba(29, 69, 65, .07);
}

.system-admin .admin-topbar .brand::after {
    content: "ADMIN";
    padding: 3px 7px;
    border-radius: 999px;
    background: #e4eeeb;
    color: var(--primary-strong);
    font-family: var(--font-heavy);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.system-admin .shell {
    width: min(1500px, calc(100% - 40px));
}

.payment-admin-panel + .payment-admin-panel {
    margin-top: 18px;
}

.payment-admin-panel {
    padding: 28px;
}

.payment-admin-section-title {
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 22px;
}

.payment-admin-section-title > div {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.payment-admin-section-title > div > span {
    font-size: 21px;
}

.payment-admin-section-title > div > small {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}

.payment-admin-section-title > strong {
    min-width: 66px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf4f2;
    color: var(--primary-strong);
    font-size: 14px;
    text-align: center;
}

.payment-admin-empty {
    margin: 0;
    padding: 28px 18px;
    border: 1px dashed #d8d0c4;
    border-radius: 10px;
    background: #fbfaf6;
    color: var(--muted);
    text-align: center;
}

.payment-admin-transaction-list {
    display: grid;
    gap: 14px;
}

.payment-admin-transaction {
    overflow: hidden;
    scroll-margin-top: 96px;
    border: 1px solid #d8d0c4;
    border-radius: 11px;
    background: #fff;
}

.payment-admin-transaction summary {
    position: relative;
    display: grid;
    grid-template-columns: 1.12fr .72fr 1.35fr .62fr .72fr;
    align-items: center;
    gap: 18px;
    min-height: 86px;
    padding: 17px 78px 17px 20px;
    cursor: pointer;
    list-style: none;
    text-align: center;
}

.payment-admin-transaction summary::-webkit-details-marker {
    display: none;
}

.payment-admin-transaction summary::after {
    content: "展開";
    position: absolute;
    top: 50%;
    right: 18px;
    min-width: 44px;
    padding: 5px 8px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #f1ede5;
    color: #695f53;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.payment-admin-transaction[open] summary::after {
    content: "收合";
}

.payment-admin-transaction summary:hover {
    background: #fbfaf6;
}

.payment-admin-transaction summary > span {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.payment-admin-transaction summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.payment-admin-transaction summary strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.45;
}

.payment-admin-status {
    justify-self: center;
    min-width: 88px;
    padding: 7px 10px;
    border-radius: 999px;
}

.payment-admin-status.is-success {
    background: #e4f1eb;
    color: #276044;
}

.payment-admin-status.is-error {
    background: #f8e8e5;
    color: #9a4039;
}

.payment-admin-status.is-pending {
    background: #f4eddb;
    color: #8a671d;
}

.payment-admin-query-result {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
    border-top: 1px solid #e3ddd3;
    border-left: 4px solid #b8afa3;
    background: #fbfaf6;
}

.payment-admin-query-result.is-success {
    border-left-color: #39705f;
    background: #f2f8f5;
}

.payment-admin-query-result.is-error {
    border-left-color: #b45449;
    background: #fff7f5;
}

.payment-admin-query-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.payment-admin-query-result-heading > div {
    display: grid;
    gap: 4px;
}

.payment-admin-query-result-heading span,
.payment-admin-action-step span {
    color: #a66717;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.payment-admin-query-result-heading strong,
.payment-admin-action-step strong {
    color: var(--ink);
    font-size: 17px;
}

.payment-admin-query-result-heading time {
    color: var(--muted);
    font-size: 12px;
}

.payment-admin-query-result > p,
.payment-admin-action-step p {
    margin: 0;
    color: #625e58;
    font-size: 14px;
    line-height: 1.65;
}

.payment-admin-query-form {
    flex: 0 0 auto;
}

.payment-admin-query-form .button {
    min-width: 168px;
    min-height: 44px;
}

.payment-admin-query-statuses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.payment-admin-query-statuses > span {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid #d5e3dc;
    border-radius: 8px;
    background: rgba(255, 255, 255, .75);
    text-align: center;
}

.payment-admin-query-statuses small {
    color: var(--muted);
    font-size: 12px;
}

.payment-admin-query-statuses strong {
    overflow-wrap: anywhere;
    color: #214f42;
    font-size: 15px;
}

.payment-admin-transaction-reference strong,
.payment-admin-confirm-transaction strong {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: .04em;
}

.payment-admin-confirm-transaction {
    overflow-wrap: anywhere;
    color: #5f5548;
}

.payment-admin-action-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    border-top: 1px solid #e3ddd3;
    background: #f8f6f1;
}

.payment-admin-step-query-form {
    margin: 0;
}

.payment-admin-action-step > div {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 10px 14px;
}

.payment-admin-action-step.is-locked {
    color: var(--muted);
}

.payment-admin-action-step.is-locked strong {
    color: #777168;
}

.payment-admin-action-result {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 12px 20px;
    padding: 14px 20px;
    border-top: 1px solid #d8e4de;
}

.payment-admin-action-result.is-success {
    background: #eef8f3;
    color: #235f4d;
}

.payment-admin-action-result.is-error {
    background: #fff1ee;
    color: #98432f;
}

.payment-admin-action-result > div {
    display: grid;
    gap: 3px;
}

.payment-admin-action-result span,
.payment-admin-action-result time {
    font-size: 12px;
}

.payment-admin-action-result strong {
    color: inherit;
    font-size: 15px;
}

.payment-admin-action-result p {
    margin: 0;
    font-weight: 800;
}

.payment-admin-operation-form {
    display: grid;
    grid-template-columns: minmax(300px, 1.2fr) minmax(220px, .65fr) minmax(300px, 1fr);
    align-items: start;
    gap: 16px;
    padding: 20px;
    border-top: 1px solid #e3ddd3;
    background: #f8faf9;
}

.payment-admin-operation-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #4f4a43;
    font-size: 13px;
    font-weight: 800;
}

.payment-admin-operation-main,
.payment-admin-amount-fields,
.payment-admin-submit-area {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.payment-admin-submit-area {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    align-items: end;
    gap: 12px 16px;
    padding-top: 4px;
}

.payment-admin-submit-area .payment-admin-risk-note {
    grid-column: 1 / -1;
}

.payment-admin-submit-area .payment-admin-safety-check {
    grid-column: 1;
}

.payment-admin-submit-area > .button {
    grid-column: 2;
}

.payment-admin-operation-help,
.payment-admin-risk-note {
    margin: 0;
    color: #6d6963;
    font-size: 13px;
    line-height: 1.55;
}

.payment-admin-risk-note {
    color: #9a4c35;
    font-weight: 700;
}

.payment-admin-safety-check {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dfc59e;
    border-radius: 8px;
    background: #fff8eb;
}

.payment-admin-safety-check label > span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.payment-admin-safety-check label > span strong {
    color: #8d5416;
    letter-spacing: .12em;
}

.payment-admin-acknowledge {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    font-weight: 700 !important;
}

.payment-admin-acknowledge input {
    width: 18px !important;
    min-height: 18px !important;
    margin: 0;
}

.payment-admin-partial-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    min-height: 24px;
    font-weight: 600 !important;
}

.payment-admin-partial-toggle input {
    width: 18px !important;
    min-height: 18px !important;
    margin: 0;
}

.payment-admin-advanced-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    min-height: 26px;
    color: #726b62 !important;
    font-weight: 650 !important;
}

.payment-admin-advanced-toggle input {
    width: 18px !important;
    min-height: 18px !important;
    margin: 0;
}

.payment-admin-operation-form input[readonly] {
    background: #f1eee8;
    color: #57524b;
    cursor: not-allowed;
}

.payment-admin-operation-form [hidden] {
    display: none !important;
}

.payment-admin-submit-area .button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.payment-admin-operation-form select,
.payment-admin-operation-form input,
.payment-admin-operation-form .button {
    width: 100%;
    min-height: 46px;
}

.payment-admin-operation-form select,
.payment-admin-operation-form input {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #d4ccc0;
    border-radius: 7px;
    background: #fff;
}

.payment-admin-invoice-table {
    min-width: 1040px;
}

.payment-admin-invoice-table th,
.payment-admin-invoice-table td,
.admin-pending-orders table th,
.admin-pending-orders table td {
    padding: 14px 12px;
    vertical-align: middle;
    text-align: center;
}

.payment-admin-invoice-actions {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-width: 280px;
}

.payment-admin-invoice-actions > a {
    color: var(--primary-strong);
    font-weight: 750;
}

.payment-admin-invoice-actions form {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(160px, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.payment-admin-invoice-actions select,
.payment-admin-invoice-actions input,
.payment-admin-invoice-actions button {
    min-height: 40px;
    min-width: 0;
}

@media (max-width: 760px) {
    .system-admin .admin-topbar .brand::after {
        display: none;
    }

    .payment-admin-panel {
        padding: 19px;
    }

    .payment-admin-panel + .payment-admin-panel {
        margin-top: 14px;
    }

    .payment-admin-section-title {
        align-items: center;
        flex-direction: column;
        gap: 13px;
        text-align: center;
    }

    .payment-admin-transaction summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 18px 18px 58px;
    }

    .payment-admin-transaction summary > span:nth-child(1),
    .payment-admin-transaction summary > span:nth-child(3) {
        grid-column: 1 / -1;
    }

    .payment-admin-transaction summary::after {
        top: auto;
        right: 50%;
        bottom: 13px;
        transform: translateX(50%);
    }

    .payment-admin-operation-form {
        grid-template-columns: 1fr;
        padding: 17px;
    }

    .payment-admin-submit-area {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .payment-admin-submit-area .payment-admin-risk-note,
    .payment-admin-submit-area .payment-admin-safety-check,
    .payment-admin-submit-area > .button {
        grid-column: 1;
    }

    .payment-admin-safety-check {
        grid-template-columns: 1fr;
    }

    .payment-admin-query-result-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-admin-query-form .button {
        width: 100%;
    }

    .payment-admin-action-step > div {
        grid-template-columns: 1fr;
        gap: 5px;
        text-align: center;
    }

    .payment-admin-action-step {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-admin-action-result {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .payment-admin-invoice-actions form {
        grid-template-columns: 1fr;
    }
}

.brand-mark-pair {
    display: inline-flex;
    align-items: center;
}

.brand-mark-pair .brand-logo + .brand-logo {
    margin-left: -7px;
}

/* Lenormand */
.lenormand-hero {
    align-items: center;
}

.lenormand-hero h1 {
    font-size: 46px;
}

.lenormand-hero-logo {
    display: grid;
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    place-items: center;
}

.lenormand-hero-logo img {
    display: block;
    width: 132px;
    height: 132px;
    object-fit: contain;
}

.lenormand-sigil {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.lenormand-sigil span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #c9b28a;
    border-radius: 50%;
    background: #fffdf8;
    box-shadow: 0 8px 18px rgba(55, 42, 23, .08);
    color: #8b3434;
    font-family: Georgia, serif;
    font-size: 23px;
}

.lenormand-sigil span:nth-child(2) {
    color: #70456f;
}

.lenormand-sigil span:nth-child(3) {
    color: #a52f38;
}

.lenormand-sigil span:nth-child(4) {
    color: #a2782b;
}

.lenormand-daily {
    margin-bottom: 24px;
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lenormand-daily.is-locked {
    background: #faf8f3;
}

.lenormand-daily-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.lenormand-daily-heading .eyebrow {
    margin-bottom: 5px;
}

.lenormand-daily-heading h2 {
    margin: 0;
    font-size: 24px;
}

.lenormand-daily-heading time {
    flex: 0 0 auto;
    padding-top: 5px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.lenormand-daily-question {
    max-width: 900px;
    margin: 20px auto 16px;
    color: var(--ink);
    text-align: center;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.7;
}

.lenormand-daily-positions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 920px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.lenormand-daily-positions li {
    display: flex;
    min-width: 0;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbf8f2;
    text-align: center;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.lenormand-daily-position-index {
    flex: 0 0 auto;
    color: var(--primary-strong);
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

.lenormand-daily-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    margin-top: 20px;
    text-align: center;
}

.lenormand-daily-actions small,
.lenormand-daily-lock {
    color: var(--muted);
    line-height: 1.6;
}

.lenormand-daily-action-buttons {
    display: grid;
    width: min(100%, 600px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lenormand-daily-action {
    width: 100%;
    min-height: 52px;
    justify-content: center;
}

.lenormand-daily-action-buttons .lenormand-daily-action-physical {
    border-color: rgba(39, 93, 86, .42);
    background: #f7fbf9;
    color: var(--primary-strong);
}

.lenormand-daily-action-buttons .lenormand-daily-action-physical:hover {
    border-color: var(--primary);
    background: #eaf2ef;
}

.lenormand-daily-lock {
    margin: 20px 0 0;
    text-align: center;
}

.lenormand-workbench {
    display: block;
    overflow: hidden;
    margin-bottom: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lenormand-control-pane {
    min-width: 0;
    padding: 28px;
}

.lenormand-workbench-head {
    min-width: 0;
}

.lenormand-workbench-head .section-title {
    min-width: 0;
}

.lenormand-deck-overview {
    display: grid;
    margin: 18px 0 26px;
    place-items: center;
    gap: 9px;
}

.lenormand-deck-overview .lenormand-deck-stage {
    width: min(100%, 360px);
}

.lenormand-deck-overview > p {
    margin: 0;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
}

.lenormand-draw-zone {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 450px));
    align-items: center;
    justify-content: center;
    gap: clamp(36px, 5vw, 76px);
    margin-top: 26px;
    padding: 26px 32px;
    border: 1px solid #ddd5c8;
    border-radius: 9px;
    background: #faf8f3;
}

.lenormand-draw-zone .lenormand-deck-overview {
    width: 100%;
    margin: 0;
}

.lenormand-draw-zone .lenormand-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    justify-self: center;
    width: min(100%, 440px);
    margin-top: 0;
}

.lenormand-draw-zone .lenormand-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
}

.lenormand-workbench .lenormand-draw-zone #lenormand-draw-button:disabled {
    border-color: #d7d2c9;
    background: #d9d8d3;
    color: #777b78;
    cursor: not-allowed;
    box-shadow: none;
}

.lenormand-workbench .lenormand-form-grid-four {
    margin-top: 0;
}

.lenormand-question-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    align-items: stretch;
    gap: 18px;
    margin-top: 16px;
}

.lenormand-question-compose .lenormand-form-grid {
    margin-top: 0;
}

.lenormand-question-compose.is-ai-hidden {
    grid-template-columns: 1fr;
}

.lenormand-form-grid {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr);
    gap: 16px;
    margin-top: 22px;
}

.lenormand-form-grid-three {
    grid-template-columns: minmax(180px, .85fr) minmax(150px, .65fr) minmax(280px, 1.5fr);
}

.lenormand-form-grid-four {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.lenormand-form-grid-four label:last-child {
    grid-column: 1 / -1;
}

.lenormand-form-grid label,
.lenormand-library-tools label {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
}

.lenormand-form-grid input,
.lenormand-form-grid select,
.lenormand-form-grid textarea,
.lenormand-library-tools input,
.lenormand-library-tools select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #d6cec0;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}

.lenormand-form-grid textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.65;
}

.lenormand-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.required-mark {
    padding: 2px 7px;
    border-radius: 999px;
    background: #f3e4da;
    color: #a74f32;
    font-size: 11px;
    line-height: 1.35;
}

.lenormand-question-field > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.lenormand-form-grid textarea.is-invalid {
    border-color: #b84d3c;
    box-shadow: 0 0 0 3px rgba(184, 77, 60, .1);
}

.lenormand-topic-locked select:disabled {
    border-color: #d6d2ca;
    background: #ecebe7;
    color: #70736f;
    cursor: not-allowed;
    opacity: 1;
}

.lenormand-topic-locked.is-determined select:disabled {
    border-color: #c4ccc7;
    background: #e8ece9;
    color: #48534f;
}

.lenormand-workbench.is-ai-plan-locked #lenormand-question-template:disabled,
.lenormand-workbench.is-ai-plan-locked #lenormand-question[readonly] {
    border-color: #d6d2ca;
    background: #ecebe7;
    color: #656b68;
    cursor: not-allowed;
    opacity: 1;
}

.lenormand-workbench.is-ai-plan-locked .lenormand-mode-control label,
.lenormand-workbench.is-ai-plan-locked .lenormand-spread-control label {
    cursor: not-allowed;
}

.lenormand-workbench.is-ai-plan-locked .lenormand-mode-control input:disabled + span {
    opacity: 0.66;
}

.lenormand-form-grid input:focus,
.lenormand-form-grid select:focus,
.lenormand-form-grid textarea:focus,
.lenormand-library-tools input:focus,
.lenormand-library-tools select:focus {
    outline: 2px solid rgba(49, 93, 88, .18);
    border-color: var(--primary);
}

.lenormand-ai-planner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #cddcd7;
    border-radius: 7px;
    background: #f4f8f6;
}

.lenormand-ai-planner[hidden] {
    display: none;
}

.lenormand-ai-planner-featured {
    width: 100%;
    margin: 0;
    padding: 18px;
    border-color: #bfcfc9;
    box-shadow: 0 6px 18px rgba(37, 61, 56, 0.06);
    grid-template-columns: 1fr;
    align-content: center;
    align-items: start;
    gap: 14px;
}

.lenormand-ai-planner-featured h3 {
    font-size: 17px;
    line-height: 1.45;
}

.lenormand-pro-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    vertical-align: 2px;
}

.lenormand-ai-planner-featured .button {
    width: 100%;
    min-height: 44px;
}

.lenormand-ai-planner-featured .eyebrow {
    font-size: 11px;
}

.lenormand-ai-planner h3,
.lenormand-ai-planner p {
    margin: 3px 0 0;
}

.lenormand-ai-planner p,
.lenormand-ai-planner small {
    color: var(--muted);
    line-height: 1.6;
}

.lenormand-ai-planner.is-locked {
    background: #faf8f3;
    border-color: var(--line);
}

.lenormand-ai-planner.is-pro-locked {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    border-style: solid;
    background: #f7f5f0;
    text-align: center;
}

.lenormand-ai-planner.is-pro-locked .eyebrow {
    display: none;
}

.lenormand-ai-planner.is-pro-locked #lenormand-ai-pro-lock-message strong {
    display: block;
    margin-bottom: 2px;
    color: #7b3f2d;
}

.lenormand-pro-upgrade-link {
    display: inline-flex;
    margin-top: 8px;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lenormand-ai-locked-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.lenormand-ai-locked-actions form {
    margin: 0;
}

.lenormand-ai-planner-featured.is-pro-locked .button {
    width: auto;
    min-width: 160px;
}

.lenormand-ai-planner .button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    border-color: #d8d1c5;
    background: #e9e5dd;
    color: #777168;
    box-shadow: none;
    opacity: 1;
}

.membership-product-card .button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    border-color: #d8d1c5;
    background: #e9e5dd;
    color: #777168;
    box-shadow: none;
    opacity: 1;
}

.lenormand-request-section,
.lenormand-admin-section,
.lenormand-physical-daily,
.lenormand-manual-entry,
.lenormand-history {
    margin: 34px 0;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lenormand-physical-daily {
    scroll-margin-top: 88px;
}

.lenormand-physical-question {
    max-width: 940px;
    margin: 18px auto 16px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.7;
}

.lenormand-physical-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.lenormand-physical-form label {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.lenormand-physical-form label > span {
    min-height: 44px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.55;
}

.lenormand-physical-form select {
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid #d6cec0;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}

.lenormand-physical-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 4px;
}

.lenormand-physical-actions .button {
    min-width: 210px;
}

.lenormand-physical-note {
    max-width: 980px;
    margin: 16px auto 0;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    line-height: 1.75;
}

.lenormand-physical-status {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: 680px;
    margin: 20px auto 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fbf8f2;
    color: var(--muted);
    text-align: center;
}

.lenormand-physical-status.is-complete {
    border-color: #c7dbd5;
    background: #eef5f2;
}

.lenormand-physical-status strong {
    color: var(--primary-strong);
}

@media (max-width: 620px) {
    .lenormand-physical-daily,
    .lenormand-manual-entry,
    .lenormand-history {
        padding: 18px 15px;
    }

    .lenormand-physical-form {
        grid-template-columns: 1fr;
    }

    .lenormand-physical-form label > span {
        min-height: 0;
    }

    .lenormand-physical-actions {
        grid-column: auto;
    }

    .lenormand-physical-actions .button,
    .lenormand-daily-action-buttons,
    .lenormand-daily-action-buttons .button {
        width: 100%;
    }

    .lenormand-daily-action-buttons {
        grid-template-columns: 1fr;
    }

    .lenormand-daily-positions {
        grid-template-columns: 1fr;
    }
}

.lenormand-records-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 28px 0 -8px;
    padding: 15px 18px;
    border-left: 4px solid var(--primary);
    background: #f4f8f6;
    color: var(--muted);
}

.lenormand-records-intro > div {
    min-width: 0;
}

.lenormand-records-intro .button {
    flex: 0 0 auto;
}

.lenormand-records-intro strong {
    flex: 0 0 auto;
    color: var(--primary-strong);
}

.lenormand-records-intro p {
    margin: 0;
}

.lenormand-manual-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.lenormand-manual-form > label {
    display: grid;
    min-width: 0;
    gap: 7px;
    font-size: 14px;
    font-weight: 750;
}

.lenormand-manual-form .full-span {
    grid-column: 1 / -1;
}

.lenormand-manual-form input,
.lenormand-manual-form select,
.lenormand-manual-form textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #d6cec0;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    line-height: 1.5;
}

.lenormand-manual-form textarea {
    resize: vertical;
}

.lenormand-manual-cards {
    margin: 4px 0 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fbf8f2;
}

.lenormand-manual-cards legend {
    padding: 0 7px;
    font-weight: 850;
}

.lenormand-manual-cards > p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
}

#lenormand-manual-card-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

#lenormand-manual-card-fields label {
    display: grid;
    min-width: 0;
    gap: 6px;
}

#lenormand-manual-card-fields label > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

#lenormand-manual-card-fields[data-card-count="7"],
#lenormand-manual-card-fields[data-card-count="9"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
}

#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(2),
#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(3),
#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(4) {
    grid-row: 1;
}

#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(5),
#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(6),
#lenormand-manual-card-fields[data-card-count="7"] label:nth-child(7) {
    grid-row: 3;
}

.lenormand-manual-actions {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.lenormand-manual-actions .button {
    min-width: 190px;
}

.lenormand-history-list {
    display: grid;
    gap: 17px;
    margin-top: 20px;
}

.lenormand-history-card {
    scroll-margin-top: 88px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdf8;
}

.lenormand-history-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--line);
}

.lenormand-history-card > header span {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
}

.lenormand-history-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.55;
}

.lenormand-history-card header p,
.lenormand-history-meta small {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.lenormand-history-meta {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 5px;
    text-align: right;
}

.lenormand-history-meta time {
    font-weight: 800;
}

.lenormand-history-card-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
    padding: 18px 21px;
    background: #faf7f1;
}

/* Nine-card readings always keep the A-I cards in a fixed 3 x 3 box. */
.lenormand-history-card-strip[data-card-count="9"] {
    grid-template-columns: repeat(3, minmax(128px, 240px));
    justify-content: center;
}

.lenormand-history-card-strip[data-card-count="9"] > div:nth-child(5) {
    border-color: #82a69b;
    background: #f0f6f3;
    box-shadow: 0 0 0 2px rgba(49, 93, 88, .1);
}

.lenormand-history-card-strip > div {
    display: grid;
    min-width: 0;
    min-height: 104px;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 10px;
    border: 1px solid #ddd2c0;
    border-radius: 7px;
    background: #fff;
    text-align: center;
}

.lenormand-history-card-strip small {
    color: var(--muted);
    font-size: 11px;
}

.lenormand-history-card-strip i {
    color: #635038;
    font-size: 25px;
    font-style: normal;
}

.lenormand-history-card-visual {
    display: grid;
    width: 50px;
    height: 68px;
    place-items: center;
    overflow: hidden;
}

.lenormand-history-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lenormand-history-card-strip strong {
    overflow-wrap: anywhere;
    font-size: 13px;
}

.lenormand-history-details {
    border-top: 1px solid var(--line);
}

.lenormand-history-details summary {
    padding: 14px 21px;
    cursor: pointer;
    color: var(--primary-strong);
    font-weight: 850;
    text-align: center;
}

.lenormand-history-conclusion {
    margin: 2px 21px 0;
    padding: 16px;
    border-left: 4px solid var(--accent);
    background: #f6efe3;
}

.lenormand-history-conclusion p {
    margin: 6px 0 0;
}

.lenormand-history-meanings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 18px 21px 22px;
    gap: 12px;
}

.lenormand-history-meanings section {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
}

.lenormand-history-meanings h4 {
    margin: 0 0 9px;
}

.lenormand-history-meanings p {
    margin: 6px 0 0;
    color: #525955;
    line-height: 1.7;
}

.lenormand-history-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.lenormand-history-pagination a {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

.lenormand-history-pagination a.is-current {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.lenormand-archive-note {
    margin: 20px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.lenormand-history-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 1fr) minmax(150px, .8fr) auto auto auto;
    align-items: end;
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #faf8f3;
}

.lenormand-history-filters label { display: grid; gap: 6px; font-size: 13px; font-weight: 750; }
.lenormand-history-filters input,
.lenormand-history-filters select { min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid #d6cec0; border-radius: 6px; background: #fff; }
.lenormand-history-filters .lenormand-favorite-filter { display: flex; align-items: center; min-height: 42px; white-space: nowrap; }
.lenormand-history-filters .lenormand-favorite-filter input { width: 18px; min-height: 18px; }
.lenormand-history-report-link { margin: -6px 0 18px; text-align: right; }
.lenormand-subscriber-feature-note { padding: 13px 16px; border: 1px dashed #cdbfAA; border-radius: 7px; background: #faf8f3; color: var(--muted); text-align: center; }

.lenormand-favorite-form button { padding: 6px 10px; border: 1px solid #cdbfAA; border-radius: 999px; background: #fffaf0; color: #8c641f; cursor: pointer; font-weight: 800; }

.lenormand-event-tracker { margin: 0 21px 22px; padding: 18px; border: 1px solid #cddcd7; border-radius: 8px; background: #f6faf8; }
.lenormand-event-tracker > h4 { margin: 0 0 14px; font-size: 17px; }
.lenormand-event-tracker ol { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.lenormand-event-tracker li { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; gap: 5px 12px; padding: 11px 13px; border-left: 3px solid var(--primary); background: #fff; }
.lenormand-event-tracker li p { grid-column: 2 / -1; margin: 0; color: var(--muted); }
.lenormand-event-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.lenormand-event-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 750; }
.lenormand-event-form .wide { grid-column: 1 / -1; }
.lenormand-event-form input,
.lenormand-event-form select,
.lenormand-event-form textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #d6cec0; border-radius: 6px; background: #fff; }
.lenormand-event-form .button { align-self: end; }

.lenormand-monthly-report,
.lenormand-template-library { margin: 28px 0 34px; padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.lenormand-monthly-report {
    display: grid;
    gap: 24px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
}
.lenormand-monthly-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.78fr);
    align-items: center;
    gap: 34px;
    padding: 28px 30px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 8% 15%, rgba(193, 151, 75, 0.09), transparent 24%),
        #fbfaf6;
}
.lenormand-monthly-toolbar-copy {
    min-width: 0;
}
.lenormand-monthly-kicker {
    display: block;
    margin-bottom: 7px;
    color: #a46413;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.13em;
}
.lenormand-monthly-toolbar h2,
.lenormand-monthly-membership h2,
.lenormand-monthly-empty h2 {
    margin: 0;
    color: var(--ink);
}
.lenormand-monthly-toolbar h2 {
    font-size: clamp(23px, 2vw, 30px);
}
.lenormand-monthly-toolbar p,
.lenormand-monthly-membership p,
.lenormand-monthly-empty p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.75;
}
.lenormand-month-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: end;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px;
    border: 1px solid #ddd4c6;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
}
.lenormand-month-picker label {
    display: grid;
    gap: 7px;
    color: #4f4a43;
    font-size: 13px;
    font-weight: 800;
}
.lenormand-month-picker input,
.lenormand-month-picker .button {
    width: 100%;
    min-height: 48px;
}
.lenormand-month-picker input {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d6cec0;
    border-radius: 7px;
    background: #fff;
}
.lenormand-monthly-membership,
.lenormand-monthly-empty {
    display: grid;
    align-items: center;
    gap: 26px;
    margin: 0 30px 30px;
    padding: 30px;
    border: 1px solid #cadbd6;
    border-radius: 12px;
    background: linear-gradient(135deg, #f3f8f6 0%, #fbfaf6 74%);
}
.lenormand-monthly-membership {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.lenormand-monthly-membership-mark,
.lenormand-monthly-empty-mark {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 1px solid #b9d0ca;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px rgba(28, 74, 65, 0.09);
}
.lenormand-monthly-membership-mark span {
    color: var(--primary-strong);
    font-family: var(--font-heavy);
    font-size: 32px;
}
.lenormand-monthly-membership h2 {
    font-size: clamp(22px, 2.15vw, 31px);
    line-height: 1.35;
}
.lenormand-monthly-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.lenormand-monthly-benefits span {
    padding: 7px 11px;
    border: 1px solid #c9dbd6;
    border-radius: 999px;
    background: #fff;
    color: #345f56;
    font-size: 13px;
    font-weight: 750;
}
.lenormand-monthly-membership-actions {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-width: 170px;
}
.lenormand-monthly-membership-actions .button {
    width: 100%;
    min-height: 48px;
}
.lenormand-monthly-membership-actions > a:not(.button) {
    color: var(--primary-strong);
    font-size: 13px;
    text-decoration: none;
}
.lenormand-monthly-membership-actions > a:not(.button):hover {
    text-decoration: underline;
}
.lenormand-monthly-empty {
    grid-template-columns: auto minmax(0, 1fr) auto;
    background: #fbfaf6;
}
.lenormand-monthly-empty-mark {
    width: 70px;
    height: 70px;
    border-color: #ddd4c6;
    box-shadow: none;
}
.lenormand-monthly-empty-mark span {
    color: #9b8f80;
    font-size: 25px;
    font-weight: 800;
}
.lenormand-monthly-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin: 0 30px;
}
.lenormand-monthly-stats article { display: grid; place-items: center; padding: 18px; border: 1px solid #cddcd7; border-radius: 8px; background: #f4f8f6; }
.lenormand-monthly-stats strong { font-size: 28px; color: var(--primary-strong); }
.lenormand-monthly-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0 30px 30px; }
.lenormand-monthly-grid section { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lenormand-monthly-grid section.wide { grid-column: 1 / -1; }
.lenormand-monthly-grid h2 { margin: 0 0 13px; font-size: 18px; }
.lenormand-monthly-grid p,
.lenormand-monthly-grid a { display: flex; justify-content: space-between; gap: 15px; margin: 0; padding: 9px 0; border-top: 1px solid #eee8de; color: var(--ink); text-decoration: none; }
.lenormand-monthly-grid p:first-of-type,
.lenormand-monthly-grid a:first-of-type { border-top: 0; }

.lenormand-template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.lenormand-template-grid article {
    display: flex;
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid #d8d0c4;
    border-radius: 8px;
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.lenormand-template-grid article > span {
    width: 100%;
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.lenormand-template-grid h3 {
    width: 100%;
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
}

.lenormand-template-grid p {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    text-align: center;
    flex: 1;
}

.lenormand-template-grid small {
    display: block;
    width: 100%;
    margin: 2px 0 0;
    text-align: center;
}

.lenormand-template-grid .button {
    align-self: center;
    min-width: 156px;
    margin-top: 2px;
}

.lenormand-personal-note-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.lenormand-personal-note-form label { display: grid; gap: 7px; font-weight: 800; }
.lenormand-personal-note-form textarea { width: 100%; padding: 11px; border: 1px solid #d6cec0; border-radius: 6px; resize: vertical; }

.lenormand-subpage-hero {
    align-items: center;
}

.lenormand-subpage-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.lenormand-subpage-actions .button {
    min-width: 168px;
    text-align: center;
}

.lenormand-request-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 22px;
    margin-top: 20px;
}

.lenormand-request-form,
.lenormand-deck-import form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.lenormand-request-form label,
.lenormand-deck-import label {
    display: grid;
    min-width: 0;
    gap: 7px;
    font-size: 14px;
    font-weight: 750;
}

.lenormand-request-form input,
.lenormand-request-form textarea,
.lenormand-deck-import input,
.lenormand-deck-import select,
.lenormand-deck-import textarea,
.lenormand-review-form input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d6cec0;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    line-height: 1.55;
}

.lenormand-request-form textarea,
.lenormand-deck-import textarea {
    resize: vertical;
}

.lenormand-request-form .full-span,
.lenormand-deck-import .full-span {
    grid-column: 1 / -1;
}

.lenormand-request-actions {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.lenormand-request-history,
.lenormand-admin-applications {
    display: grid;
    align-content: start;
    gap: 12px;
}

.lenormand-request-history h3 {
    margin: 0;
}

.lenormand-request-history article,
.lenormand-admin-applications article {
    display: grid;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fbf8f2;
}

.lenormand-request-history article > div,
.lenormand-admin-application-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lenormand-request-history small,
.lenormand-request-history time,
.lenormand-admin-application-head small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.status-badge {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e6eeeb;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 750;
}

.status-rejected {
    background: #fae9e6;
    color: #9f3028;
}

.account-subscription-panel {
    display: grid;
    gap: 12px;
    margin: 4px 0 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #faf8f3;
}

.account-subscription-panel legend {
    padding: 0 6px;
    font-weight: 800;
}

.account-subscription-panel .checkbox-line {
    display: flex;
    align-items: center;
    gap: 9px;
}

.account-subscription-panel .checkbox-line input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.account-subscription-panel small {
    color: var(--muted);
    line-height: 1.55;
}

.lenormand-review-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.lenormand-deck-import {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.lenormand-deck-import summary {
    cursor: pointer;
    font-weight: 800;
}

.lenormand-deck-import form {
    margin-top: 16px;
}

.lenormand-card-editor {
    display: grid;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fbf8f2;
}

.lenormand-card-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.lenormand-card-editor-heading > div {
    display: grid;
    gap: 4px;
}

.lenormand-card-editor-heading strong {
    font-size: 18px;
}

.lenormand-card-editor-heading small,
.lenormand-card-editor-fields small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.55;
}

.lenormand-card-editor-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed #c9d7d2;
    border-radius: 7px;
    background: #f2f7f5;
    color: var(--primary-strong);
    line-height: 1.7;
    text-align: center;
}

#lenormand-card-editor-progress {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e6eeeb;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 800;
}

.lenormand-card-editor-layout {
    display: grid;
    grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
}

.lenormand-card-editor-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 7px;
    max-height: 610px;
    padding: 2px 6px 2px 2px;
    overflow-y: auto;
}

.lenormand-card-editor-nav-item {
    min-width: 0;
    min-height: 52px;
    padding: 7px;
    border: 1px solid #d6cec0;
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 750;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.lenormand-card-editor-nav-item:hover {
    border-color: #9db4ad;
    box-shadow: 0 4px 10px rgba(37, 61, 56, .08);
}

.lenormand-card-editor-nav-item.is-complete {
    border-color: #b9cec7;
    background: #eff5f2;
    color: var(--primary-strong);
}

.lenormand-card-editor-nav-item.is-current {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 5px 12px rgba(37, 61, 56, .16);
}

.lenormand-card-editor-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid #ded6ca;
    border-radius: 7px;
    background: #fff;
}

.lenormand-card-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.lenormand-card-editor-toolbar .icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
}

.lenormand-card-editor-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.lenormand-card-editor-fields .full-span {
    grid-column: 1 / -1;
}

.lenormand-card-editor-advanced {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.lenormand-card-editor-advanced summary {
    cursor: pointer;
    color: var(--primary-strong);
    font-weight: 800;
}

.lenormand-card-editor-advanced[open] summary {
    margin-bottom: 15px;
}

.lenormand-mode-picker,
.lenormand-spread-picker {
    padding: 0;
    margin: 22px 0 0;
    border: 0;
}

.lenormand-mode-picker legend,
.lenormand-spread-picker legend {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 750;
}

.segmented-control.lenormand-mode-control {
    display: grid;
    width: min(100%, 320px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lenormand-spread-control {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(7, minmax(112px, 1fr));
    gap: 9px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.lenormand-spread-control label,
.lenormand-spread-control label + label {
    overflow: hidden;
    border: 1px solid #d6cec0;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(37, 61, 56, .04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lenormand-spread-control label:hover {
    border-color: #9db4ad;
    box-shadow: 0 7px 16px rgba(37, 61, 56, .1);
    transform: translateY(-2px);
}

.lenormand-spread-control span {
    position: relative;
    min-height: 76px;
    padding: 12px 14px 11px 38px;
    gap: 4px;
    align-content: center;
    justify-items: center;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.lenormand-spread-control span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 13px;
    height: 13px;
    border: 2px solid #9aa5a1;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff;
}

.lenormand-spread-control input:checked + span {
    background: var(--primary);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--primary-strong);
}

.lenormand-spread-control input:checked + span::before {
    border-color: #fff;
    background: #fff;
    box-shadow: inset 0 0 0 4px var(--primary);
}

.lenormand-spread-control label.is-ai-recommended {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(37, 61, 56, .18);
}

.lenormand-spread-control label.is-ai-recommended::after {
    content: "AI 推薦";
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--primary-strong);
    background: #e8f2ee;
    font-size: 10px;
    font-weight: 850;
}

.lenormand-spread-control label.is-ai-recommended input:disabled + span {
    opacity: 1;
}

.lenormand-spread-control b,
.lenormand-spread-control small {
    display: block;
    letter-spacing: 0;
}

.lenormand-spread-control small {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.segmented-control {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(86px, 1fr));
    overflow: hidden;
    border: 1px solid #d6cec0;
    border-radius: 6px;
    background: #fff;
}

.segmented-control label {
    position: relative;
    cursor: pointer;
}

.segmented-control label + label {
    border-left: 1px solid #d6cec0;
}

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

.segmented-control span {
    display: grid;
    min-height: 42px;
    padding: 8px 13px;
    place-items: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 750;
}

.segmented-control input:checked + span {
    background: var(--primary);
    color: #fff;
}

.segmented-control input:focus-visible + span {
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--primary);
}

.segmented-control input:disabled + span {
    cursor: not-allowed;
    opacity: .48;
}

.lenormand-spread-preview {
    display: grid;
    gap: 13px;
    min-height: 108px;
    padding: 17px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: linear-gradient(180deg, #fbf8f2 0%, #f7f3eb 100%);
}

.lenormand-spread-preview-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.lenormand-spread-preview-heading strong {
    flex: 0 0 auto;
}

.lenormand-spread-preview-heading span {
    min-width: 0;
    color: var(--muted);
    text-align: right;
    font-size: 13px;
    line-height: 1.65;
}

.lenormand-spread-layout {
    display: grid;
    grid-template-columns: repeat(var(--spread-columns), minmax(72px, 1fr));
    gap: 8px;
}

.lenormand-spread-layout[data-card-count="9"] {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
}

.lenormand-spread-layout[data-card-count="9"] .lenormand-spread-slot:nth-child(5) {
    border-color: #82a69b;
    background: #edf5f1;
    box-shadow: 0 0 0 2px rgba(49, 93, 88, .1);
}

.lenormand-spread-slot {
    display: grid;
    min-height: 58px;
    padding: 7px 8px;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid #d1c6b5;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(37, 61, 56, .05);
    text-align: center;
}

.lenormand-spread-slot b {
    color: var(--primary);
}

.lenormand-spread-slot small {
    color: var(--muted);
    line-height: 1.35;
}

.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
}

.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(2),
.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(3),
.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(4) {
    grid-row: 1;
}

.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(5),
.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(6),
.lenormand-spread-layout[data-card-count="7"] .lenormand-spread-slot:nth-child(7) {
    grid-row: 3;
}

.lenormand-recommendation-note {
    min-height: 22px;
    margin: 9px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.lenormand-ai-recommendation-result {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #9bb8ae;
    border-radius: 9px;
    background: linear-gradient(135deg, #edf6f2 0%, #f8f4e9 100%);
}

.lenormand-ai-recommendation-result[hidden] {
    display: none;
}

.lenormand-ai-recommendation-result > span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 850;
}

.lenormand-ai-recommendation-result > strong {
    color: var(--ink);
    font-size: 19px;
}

.lenormand-ai-recommendation-result > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.lenormand-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}

.lenormand-actions .button {
    min-width: 132px;
}

.lenormand-draw-progress {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(calc(100vw - 32px), 470px);
    padding: 14px 18px;
    border: 1px solid rgba(92, 70, 36, 0.25);
    border-radius: 14px;
    background: rgba(255, 252, 245, 0.98);
    box-shadow: 0 14px 42px rgba(40, 34, 25, 0.2);
    color: var(--ink);
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
}

.lenormand-draw-progress[hidden] {
    display: none;
}

.lenormand-draw-progress > div:last-child {
    min-width: 0;
}

.lenormand-draw-progress strong,
.lenormand-draw-progress small {
    display: block;
}

.lenormand-draw-progress strong {
    margin-bottom: 3px;
    font-size: 16px;
    line-height: 1.35;
}

.lenormand-draw-progress small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.lenormand-draw-spinner {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 42px;
}

.lenormand-draw-spinner span {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 27px;
    height: 37px;
    border: 1px solid #b79865;
    border-radius: 4px;
    background: #f7f0df;
    box-shadow: 0 3px 8px rgba(59, 43, 23, 0.14);
    transform-origin: 50% 100%;
    animation: lenormand-progress-shuffle 1.05s ease-in-out infinite;
}

.lenormand-draw-spinner span:nth-child(2) {
    animation-delay: -0.35s;
}

.lenormand-draw-spinner span:nth-child(3) {
    animation-delay: -0.7s;
}

.lenormand-draw-progress.is-complete {
    border-color: rgba(54, 108, 74, 0.36);
    background: rgba(244, 251, 245, 0.98);
}

.lenormand-draw-progress.is-complete .lenormand-draw-spinner::after {
    position: absolute;
    inset: 3px 6px 1px;
    display: grid;
    border-radius: 50%;
    background: #3f7652;
    color: #fff;
    content: '✓';
    font-size: 22px;
    font-weight: 800;
    place-items: center;
}

.lenormand-draw-progress.is-complete .lenormand-draw-spinner span,
.lenormand-draw-progress.is-error .lenormand-draw-spinner span {
    display: none;
}

.lenormand-draw-progress.is-error {
    border-color: rgba(164, 63, 54, 0.35);
    background: rgba(255, 247, 246, 0.98);
}

.lenormand-draw-progress.is-error .lenormand-draw-spinner::after {
    position: absolute;
    inset: 3px 6px 1px;
    display: grid;
    border-radius: 50%;
    background: #a7463d;
    color: #fff;
    content: '!';
    font-size: 22px;
    font-weight: 800;
    place-items: center;
}

#lenormand-draw-button.is-loading {
    cursor: wait;
    opacity: 0.82;
}

@keyframes lenormand-progress-shuffle {
    0%, 100% {
        transform: translateX(-8px) rotate(-8deg);
    }
    50% {
        transform: translateX(8px) rotate(8deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lenormand-draw-spinner span {
        animation: none;
    }
}

.lenormand-deck-stage {
    display: grid;
    min-width: 300px;
    min-height: 126px;
    padding: 14px 22px 14px 18px;
    align-items: center;
    grid-template-columns: 94px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    border: 1px solid #4e605a;
    border-radius: 7px;
    background: #253d38;
    color: #fff;
}

.lenormand-deck-stage > strong {
    align-self: end;
    margin: 0;
    font-size: 17px;
}

.lenormand-deck-stage > span {
    align-self: start;
    margin: 3px 0 0;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
}

.lenormand-deck {
    position: relative;
    width: 86px;
    height: 108px;
    grid-row: 1 / 3;
}

.lenormand-card-back {
    position: absolute;
    inset: 0;
    display: grid;
    width: 72px;
    height: 100px;
    place-items: center;
    border: 3px solid #f5ead5;
    border-radius: 5px;
    background:
        radial-gradient(circle at center, transparent 0 11px, #c39b52 12px 13px, transparent 14px),
        repeating-linear-gradient(45deg, #763640 0 5px, #6a2f39 5px 10px);
    box-shadow: 0 8px 14px rgba(0, 0, 0, .25);
}

.lenormand-card-back::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 240, 205, .75);
    border-radius: 3px;
}

.lenormand-card-back i {
    position: relative;
    z-index: 1;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid #e3c98f;
    border-radius: 50%;
    background: #f8edd8;
    color: #763640;
    font-family: Georgia, serif;
    font-size: 14px;
    font-style: normal;
}

.lenormand-card-back.back-two {
    transform: translate(5px, 5px) rotate(2deg);
}

.lenormand-card-back.back-three {
    transform: translate(9px, 8px) rotate(4deg);
}

.lenormand-deck.is-shuffling .back-one {
    animation: lenormand-shuffle-one .65s ease-in-out;
}

.lenormand-deck.is-shuffling .back-two {
    animation: lenormand-shuffle-two .65s ease-in-out;
}

@keyframes lenormand-shuffle-one {
    0%, 100% { transform: translateX(0) rotate(0); }
    45% { transform: translateX(-46px) rotate(-7deg); }
}

@keyframes lenormand-shuffle-two {
    0%, 100% { transform: translate(5px, 5px) rotate(2deg); }
    45% { transform: translate(48px, 5px) rotate(8deg); }
}

.lenormand-reading {
    scroll-margin-top: 84px;
    margin: 0 0 44px;
}

.lenormand-reading-title {
    margin-bottom: 18px;
}

.lenormand-drawn-scroll {
    overflow-x: auto;
    padding: 4px 2px 18px;
    scrollbar-color: #b7aa96 transparent;
}

.lenormand-drawn-grid {
    display: grid;
    grid-template-columns: repeat(var(--draw-count), 198px);
    width: max-content;
    min-width: 100%;
    justify-content: center;
    gap: 15px;
}

.lenormand-drawn-grid[data-card-count="9"] {
    grid-template-columns: repeat(3, minmax(0, 180px));
    width: min(100%, 570px);
    min-width: 0;
    margin-inline: auto;
}

.lenormand-drawn-grid[data-card-count="9"] .lenormand-drawn-card {
    width: 100%;
    min-width: 0;
}

.lenormand-drawn-grid[data-card-count="9"] .lenormand-drawn-card:nth-child(5) {
    border-color: #467455;
    box-shadow: 0 0 0 3px rgba(49, 93, 88, .16), 0 12px 25px rgba(47, 37, 22, .12);
}

.lenormand-drawn-card {
    position: relative;
    display: flex;
    width: 198px;
    min-width: 198px;
    aspect-ratio: 2 / 3;
    padding: 13px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cdbd9d;
    border-radius: 7px;
    background:
        linear-gradient(rgba(255, 253, 248, .96), rgba(255, 253, 248, .96)),
        repeating-linear-gradient(45deg, #f1e7d6 0 3px, transparent 3px 8px);
    box-shadow: 0 12px 25px rgba(47, 37, 22, .12);
    opacity: 0;
    transform: translateY(12px) rotateY(9deg);
    animation: lenormand-reveal .48s ease forwards;
    animation-delay: calc(var(--reveal-order) * 95ms);
}

.lenormand-drawn-card::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(162, 120, 43, .4);
    border-radius: 3px;
    pointer-events: none;
}

.lenormand-drawn-card.tone-positive {
    border-top: 4px solid #467455;
}

.lenormand-drawn-card.tone-neutral {
    border-top: 4px solid #b88737;
}

.lenormand-drawn-card.tone-warning {
    border-top: 4px solid #9d4343;
}

@keyframes lenormand-reveal {
    to { opacity: 1; transform: translateY(0) rotateY(0); }
}

.lenormand-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    color: #5e5143;
    font-family: Georgia, serif;
    font-size: 13px;
}

.lenormand-card-number {
    font-weight: 800;
}

.lenormand-card-playing {
    color: #8b3434;
}

.lenormand-card-symbol {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 104px;
    place-items: center;
    color: #263f39;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    line-height: 1;
}

.lenormand-card-visual {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 114px;
    place-items: center;
    overflow: hidden;
}

.lenormand-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lenormand-card-visual.has-image .lenormand-card-symbol {
    display: none;
}

.lenormand-card-identity {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}

.lenormand-card-identity strong {
    font-size: 25px;
}

.lenormand-card-identity small {
    color: var(--muted);
    font-family: Georgia, serif;
    font-size: 12px;
}

.lenormand-position {
    position: relative;
    z-index: 1;
    margin-top: 13px;
    padding-top: 10px;
    width: 100%;
    border-top: 1px solid #ddd2c0;
    color: #6a5a47;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.lenormand-card-keywords {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.lenormand-analysis {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lenormand-conclusion {
    padding: 26px 28px;
    border-bottom: 1px solid #d2c6b1;
    background: #efe6d6;
}

.lenormand-conclusion > span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
}

.lenormand-conclusion h2 {
    margin: 5px 0 7px;
    color: #243630;
    font-size: 25px;
    line-height: 1.35;
}

.lenormand-conclusion p {
    margin: 0;
    color: #5f5b55;
}

.lenormand-analysis-warning {
    margin-top: 15px;
    padding: 11px 13px;
    border: 1px solid #d79a8f;
    border-radius: 8px;
    color: #7a2e24;
    background: #fff4f1;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.6;
}

.lenormand-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 28px;
}

.lenormand-analysis-grid > section {
    min-width: 0;
    padding: 25px 0;
}

.lenormand-analysis-grid > section:nth-child(odd) {
    padding-right: 28px;
}

.lenormand-analysis-grid > section:nth-child(even) {
    padding-left: 28px;
    border-left: 1px solid var(--line);
}

.lenormand-analysis-grid > section:nth-child(n+3) {
    border-top: 1px solid var(--line);
}

.lenormand-analysis-grid h3,
.lenormand-dialog-grid h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.lenormand-analysis-grid ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 20px;
}

.lenormand-analysis-grid li,
.lenormand-analysis-grid p {
    color: #4e5653;
}

.lenormand-flow-item + .lenormand-flow-item {
    margin-top: 15px;
}

.lenormand-flow-role {
    margin: 0 0 7px !important;
    color: var(--accent) !important;
    font-size: 13px;
    font-weight: 800;
}

.lenormand-flow-relevance {
    margin-top: 8px !important;
    padding: 9px 11px;
    border-left: 3px solid var(--primary);
    border-radius: 0 7px 7px 0;
    background: #edf4f1;
    font-weight: 700;
}

.lenormand-flow-item h4 {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 5px;
}

.lenormand-flow-item h4 span {
    color: var(--muted);
    font-size: 12px;
}

.lenormand-flow-item h4 strong {
    font-size: 15px;
}

.lenormand-flow-item p,
.lenormand-pair-list p {
    margin: 0;
}

.lenormand-pair-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px dashed #cec4b4;
}

.lenormand-reading-methods {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px dashed #cec4b4;
}

.lenormand-reading-methods strong {
    display: block;
    margin-bottom: 8px;
}

.lenormand-reading-methods ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 22px;
}

.lenormand-emotional-core {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid #dec9ab;
    border-radius: 9px;
    background: #f8efe1;
}

.lenormand-emotional-core strong {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 13px;
}

.lenormand-emotional-core p {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.7;
}

#lenormand-key-issue,
#lenormand-development {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.75;
}

.lenormand-tone-meter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    margin-top: 16px;
    border: 1px solid #d7d0c3;
    border-radius: 5px;
}

.lenormand-tone-meter span {
    padding: 7px 6px;
    color: #8b8b86;
    background: #f4f1eb;
    text-align: center;
    font-size: 12px;
}

.lenormand-tone-meter span + span {
    border-left: 1px solid #d7d0c3;
}

.lenormand-tone-meter .tone-warning.active {
    background: #f5dddd;
    color: #7f2f2f;
    font-weight: 800;
}

.lenormand-tone-meter .tone-neutral.active {
    background: #f1e6c9;
    color: #795b20;
    font-weight: 800;
}

.lenormand-tone-meter .tone-positive.active {
    background: #dce9df;
    color: #2f6840;
    font-weight: 800;
}

.lenormand-basis {
    border-top: 1px solid var(--line);
}

.lenormand-basis summary {
    padding: 17px 28px;
    cursor: pointer;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    list-style-position: inside;
}

#lenormand-basis-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0;
    padding: 0 28px 22px;
}

.lenormand-basis-row {
    display: grid;
    min-width: 0;
    padding: 14px;
    border-top: 1px solid #e3ddd3;
}

.lenormand-basis-row span,
.lenormand-basis-row p {
    color: var(--muted);
    font-size: 12px;
}

.lenormand-basis-row p {
    margin: 4px 0 0;
}

.lenormand-library {
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.lenormand-library-tools {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px);
    gap: 14px;
    margin: 20px 0;
}

.lenormand-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
}

.lenormand-library-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 218px;
    padding: 15px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6cbb9;
    border-radius: 7px;
    background: #fffdf8;
    color: var(--ink);
    box-shadow: 0 7px 16px rgba(48, 37, 23, .05);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lenormand-library-card:hover {
    border-color: #b59a6e;
    box-shadow: 0 13px 24px rgba(48, 37, 23, .11);
    transform: translateY(-3px);
}

.lenormand-library-card:focus-visible {
    outline: 3px solid rgba(49, 93, 88, .2);
    border-color: var(--primary);
}

.lenormand-library-card[hidden] {
    display: none;
}

.lenormand-library-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #b88737;
}

.lenormand-library-card.tone-positive::before {
    background: #467455;
}

.lenormand-library-card.tone-warning::before {
    background: #9d4343;
}

.lenormand-library-number {
    position: absolute;
    top: 10px;
    left: 11px;
    color: #7c6e5c;
    font-family: Georgia, serif;
    font-size: 11px;
}

.lenormand-personal-note-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0e5ef;
    color: var(--primary-strong);
    font-size: 10px;
    font-weight: 850;
}

.lenormand-library-symbol {
    display: grid;
    min-height: 70px;
    place-items: center;
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
}

.lenormand-library-visual {
    display: grid;
    width: 74px;
    height: 96px;
    margin: 4px 0 7px;
    place-items: center;
    overflow: hidden;
}

.lenormand-library-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lenormand-library-card strong {
    font-size: 18px;
}

.lenormand-library-card small {
    margin-top: 2px;
    color: var(--muted);
    font-family: Georgia, serif;
    font-size: 11px;
}

.lenormand-library-card em {
    margin-top: 10px;
    color: #756b5d;
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.lenormand-library-note {
    max-width: 920px;
    margin: 22px auto 0;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.lenormand-dialog {
    position: relative;
    width: min(860px, calc(100% - 28px));
    max-height: min(760px, calc(100vh - 32px));
    padding: 28px;
    overflow: auto;
    border: 1px solid #cfc1aa;
    border-top: 5px solid #b88737;
    border-radius: 8px;
    background: #fffdf8;
    color: var(--ink);
    box-shadow: 0 28px 70px rgba(19, 28, 25, .28);
}

.lenormand-dialog.tone-positive {
    border-top-color: #467455;
}

.lenormand-dialog.tone-warning {
    border-top-color: #9d4343;
}

.lenormand-dialog::backdrop {
    background: rgba(21, 31, 28, .55);
    backdrop-filter: blur(3px);
}

.lenormand-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid #d8d0c4;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 23px;
    line-height: 1;
}

.lenormand-dialog-heading {
    display: grid;
    grid-template-columns: 44px 78px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding-right: 30px;
}

.lenormand-dialog-heading > span:first-child {
    color: #8b7250;
    font-family: Georgia, serif;
    font-size: 18px;
}

.lenormand-dialog-visual {
    display: grid;
    width: 78px;
    height: 112px;
    place-items: center;
    overflow: hidden;
}

.lenormand-dialog-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lenormand-dialog-visual > i {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-style: normal;
    text-align: center;
}

.lenormand-dialog-visual.has-image > i {
    display: none;
}

.lenormand-dialog-heading h2 {
    margin: 0;
    font-size: 27px;
}

.lenormand-dialog-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.lenormand-dialog-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0 8px;
}

.lenormand-dialog-keywords span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #e6eeeb;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 750;
}

.lenormand-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
}

.lenormand-dialog-grid section {
    min-width: 0;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.lenormand-dialog-grid section:nth-child(odd) {
    padding-right: 22px;
}

.lenormand-dialog-grid section:nth-child(even) {
    padding-left: 22px;
    border-left: 1px solid var(--line);
}

.lenormand-dialog-grid p {
    margin: 0;
    color: #4f5754;
}

@media (max-width: 1100px) {
    .lenormand-question-compose {
        grid-template-columns: 1fr;
    }

    .lenormand-question-compose .lenormand-ai-planner-featured {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .lenormand-question-compose .lenormand-ai-planner-featured .button {
        width: auto;
    }
}

@media (max-width: 920px) {
    .lenormand-monthly-toolbar {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lenormand-monthly-membership {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lenormand-monthly-membership-actions {
        grid-column: 1 / -1;
        grid-template-columns: minmax(170px, 240px) auto;
        justify-content: start;
        align-items: center;
    }

    .lenormand-analysis-grid {
        grid-template-columns: 1fr;
    }

    .lenormand-draw-zone {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .lenormand-draw-zone .lenormand-actions {
        justify-content: center;
    }

    .lenormand-history-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .lenormand-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

    .lenormand-form-grid-three {
        grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
    }

    .lenormand-form-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lenormand-form-grid-four label:last-child {
        grid-column: 1 / -1;
    }

    .lenormand-request-layout {
        grid-template-columns: 1fr;
    }

    .lenormand-card-editor-layout {
        grid-template-columns: 1fr;
    }

    .lenormand-card-editor-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-height: none;
        padding: 0;
        overflow: visible;
    }

    .lenormand-history-meanings {
        grid-template-columns: 1fr;
    }

    .lenormand-form-grid-three label:last-child {
        grid-column: 1 / -1;
    }

    .lenormand-spread-control {
        grid-template-columns: repeat(4, minmax(88px, 1fr));
    }

    .lenormand-analysis-grid > section:nth-child(odd),
    .lenormand-analysis-grid > section:nth-child(even) {
        padding-right: 0;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .lenormand-analysis-grid > section:first-child {
        border-top: 0;
    }
}

@media (max-width: 620px) {
    .lenormand-monthly-report {
        gap: 18px;
        margin-top: 20px;
        border-radius: 11px;
    }

    .lenormand-monthly-toolbar {
        gap: 17px;
        padding: 21px 17px;
    }

    .lenormand-monthly-toolbar h2 {
        font-size: 23px;
    }

    .lenormand-ai-planner-featured {
        margin: 0;
        padding: 16px;
    }

    .lenormand-question-compose .lenormand-ai-planner-featured {
        grid-template-columns: 1fr;
    }

    .lenormand-question-compose .lenormand-ai-planner-featured .button {
        width: 100%;
    }

    .lenormand-draw-zone {
        padding: 16px;
    }

    .lenormand-draw-zone .lenormand-actions,
    .lenormand-draw-zone .lenormand-actions .button {
        width: 100%;
    }

    .lenormand-history-filters,
    .lenormand-event-form,
    .lenormand-monthly-stats,
    .lenormand-monthly-grid,
    .lenormand-template-grid,
    .lenormand-personal-note-form { grid-template-columns: 1fr; }
    .lenormand-event-form .wide,
    .lenormand-monthly-grid section.wide { grid-column: auto; }
    .lenormand-event-tracker { margin: 0 12px 16px; padding: 14px; }
    .lenormand-event-tracker li { grid-template-columns: 1fr; }
    .lenormand-event-tracker li p { grid-column: auto; }
    .lenormand-month-picker {
        grid-template-columns: 1fr;
        align-items: stretch;
        width: 100%;
        padding: 12px;
    }

    .lenormand-monthly-membership,
    .lenormand-monthly-empty {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        margin: 0 17px 18px;
        padding: 24px 19px;
        text-align: center;
    }

    .lenormand-monthly-membership-mark {
        width: 72px;
        height: 72px;
    }

    .lenormand-monthly-membership h2,
    .lenormand-monthly-empty h2 {
        font-size: 22px;
    }

    .lenormand-monthly-benefits {
        justify-content: center;
    }

    .lenormand-monthly-membership-actions {
        grid-column: auto;
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
    }

    .lenormand-monthly-stats,
    .lenormand-monthly-grid {
        margin-right: 17px;
        margin-left: 17px;
    }

    .lenormand-monthly-grid {
        margin-bottom: 18px;
    }

    .lenormand-daily {
        padding: 20px 17px;
    }

    .lenormand-daily-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .lenormand-daily-question {
        text-align: left;
        font-size: 17px;
    }

    .lenormand-daily-positions {
        grid-template-columns: 1fr;
    }

    .lenormand-hero {
        align-items: flex-start;
    }

    .lenormand-hero h1 {
        font-size: 34px;
    }

    .lenormand-sigil {
        gap: 6px;
    }

    .lenormand-sigil span {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .lenormand-control-pane,
    .lenormand-conclusion {
        padding: 21px 18px;
    }

    .lenormand-workbench-head {
        display: block;
    }

    .lenormand-deck-overview {
        margin: 16px 0 22px;
    }

    .lenormand-deck-stage {
        width: 100%;
        min-width: 0;
    }

    .lenormand-form-grid,
    .lenormand-library-tools,
    .lenormand-dialog-grid {
        grid-template-columns: 1fr;
    }

    .lenormand-form-grid-four label:last-child {
        grid-column: auto;
    }

    .lenormand-ai-planner,
    .lenormand-request-form,
    .lenormand-deck-import form,
    .lenormand-review-form {
        grid-template-columns: 1fr;
    }

    .lenormand-card-editor {
        padding: 14px;
    }

    .lenormand-card-editor-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    #lenormand-card-editor-progress {
        align-self: flex-start;
    }

    .lenormand-card-editor-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lenormand-card-editor-panel {
        padding: 15px;
    }

    .lenormand-card-editor-fields {
        grid-template-columns: 1fr;
    }

    .lenormand-card-editor-fields .full-span {
        grid-column: auto;
    }

    .lenormand-ai-planner .button,
    .lenormand-request-actions .button {
        width: 100%;
    }

    .lenormand-request-form .full-span,
    .lenormand-deck-import .full-span {
        grid-column: auto;
    }

    .lenormand-request-section,
    .lenormand-admin-section,
    .lenormand-manual-entry,
    .lenormand-history {
        padding: 20px 16px;
    }

    .lenormand-records-intro,
    .lenormand-history-card > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .lenormand-manual-form {
        grid-template-columns: 1fr;
    }

    .lenormand-manual-form .full-span {
        grid-column: auto;
    }

    .lenormand-manual-actions .button {
        width: 100%;
    }

    .lenormand-history-meta {
        justify-items: start;
        text-align: left;
    }

    .lenormand-history-card-strip {
        grid-template-columns: repeat(var(--mobile-spread-columns, 2), minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 0;
        padding: 10px;
        overflow: visible;
    }

    .lenormand-history-card-strip[data-card-count="1"] {
        --mobile-spread-columns: 1;
    }

    .lenormand-history-card-strip[data-card-count="2"] {
        --mobile-spread-columns: 2;
    }

    .lenormand-history-card-strip[data-card-count="3"],
    .lenormand-history-card-strip[data-card-count="6"],
    .lenormand-history-card-strip[data-card-count="7"],
    .lenormand-history-card-strip[data-card-count="9"] {
        --mobile-spread-columns: 3;
    }

    .lenormand-history-card-strip[data-card-count="9"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lenormand-history-card-strip[data-card-count="5"] {
        --mobile-spread-columns: 5;
    }

    .lenormand-history-card-strip > div {
        min-width: 0;
        min-height: 0;
        gap: 3px;
        padding: 5px 3px;
    }

    .lenormand-history-card-visual {
        width: min(100%, 64px);
        height: auto;
        aspect-ratio: 50 / 68;
    }

    .lenormand-history-card-strip small {
        width: 100%;
        font-size: 9px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .lenormand-history-card-strip strong {
        font-size: 10px;
        line-height: 1.25;
    }

    .lenormand-history-card-strip[data-card-count="5"] {
        gap: 3px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .lenormand-history-card-strip[data-card-count="5"] > div {
        padding-right: 2px;
        padding-left: 2px;
    }

    .lenormand-history-card-strip[data-card-count="5"] small,
    .lenormand-history-card-strip[data-card-count="5"] strong {
        font-size: 8px;
    }

    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(1) {
        grid-column: 2;
        grid-row: 2;
    }

    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(2),
    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(3),
    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(4) {
        grid-row: 1;
    }

    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(5),
    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(6),
    .lenormand-history-card-strip[data-spread-code="choice_seven"] > div:nth-child(7) {
        grid-row: 3;
    }

    .lenormand-history-meanings {
        padding: 14px;
    }

    .lenormand-form-grid-three label:last-child {
        grid-column: auto;
    }

    .segmented-control {
        display: grid;
        width: 100%;
    }

    .lenormand-mode-control {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lenormand-spread-control {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        border: 0;
        gap: 8px;
        background: transparent;
    }

    .lenormand-spread-control label,
    .lenormand-spread-control label + label,
    .lenormand-spread-control label:nth-child(5) {
        overflow: hidden;
        border: 1px solid #d6cec0;
        border-radius: 6px;
        background: #fff;
    }

    .lenormand-spread-preview-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .lenormand-spread-preview-heading span {
        text-align: left;
    }

    .lenormand-spread-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lenormand-spread-layout[data-card-count="7"],
    .lenormand-spread-layout[data-card-count="9"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #lenormand-manual-card-fields[data-card-count="7"],
    #lenormand-manual-card-fields[data-card-count="9"] {
        gap: 8px;
    }

    #lenormand-manual-card-fields[data-card-count="7"] label > span,
    #lenormand-manual-card-fields[data-card-count="9"] label > span {
        font-size: 11px;
    }

    #lenormand-manual-card-fields[data-card-count="7"] select,
    #lenormand-manual-card-fields[data-card-count="9"] select {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 12px;
    }

    .lenormand-drawn-scroll {
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
        overflow-x: visible;
    }

    .lenormand-drawn-grid {
        grid-template-columns: repeat(var(--mobile-spread-columns, 2), minmax(0, 1fr));
        width: 100%;
        min-width: 0;
        justify-content: center;
        gap: 7px;
    }

    .lenormand-drawn-grid[data-card-count="1"] {
        --mobile-spread-columns: 1;
        max-width: 198px;
        margin: 0 auto;
    }

    .lenormand-drawn-grid[data-card-count="2"] {
        --mobile-spread-columns: 2;
    }

    .lenormand-drawn-grid[data-card-count="3"],
    .lenormand-drawn-grid[data-card-count="6"],
    .lenormand-drawn-grid[data-card-count="7"],
    .lenormand-drawn-grid[data-card-count="9"] {
        --mobile-spread-columns: 3;
    }

    .lenormand-drawn-grid[data-card-count="9"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lenormand-drawn-grid[data-card-count="5"] {
        --mobile-spread-columns: 5;
        gap: 3px;
    }

    .lenormand-drawn-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: auto;
        padding: 7px 5px;
        box-shadow: 0 5px 12px rgba(47, 37, 22, .1);
    }

    .lenormand-drawn-card::before {
        inset: 3px;
    }

    .lenormand-card-top {
        font-size: 10px;
    }

    .lenormand-card-visual {
        width: 100%;
        height: auto;
        aspect-ratio: 50 / 68;
    }

    .lenormand-card-symbol {
        min-height: 0;
        font-size: clamp(26px, 10vw, 48px);
    }

    .lenormand-card-identity strong {
        font-size: 15px;
        line-height: 1.2;
    }

    .lenormand-card-identity small,
    .lenormand-card-keywords {
        display: none;
    }

    .lenormand-position {
        margin-top: 5px;
        padding-top: 5px;
        font-size: 9px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .lenormand-drawn-grid[data-card-count="5"] .lenormand-drawn-card {
        padding-right: 3px;
        padding-left: 3px;
    }

    .lenormand-drawn-grid[data-card-count="5"] .lenormand-card-top,
    .lenormand-drawn-grid[data-card-count="5"] .lenormand-position {
        font-size: 7px;
    }

    .lenormand-drawn-grid[data-card-count="5"] .lenormand-card-identity strong {
        font-size: 10px;
    }

    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(1) {
        grid-column: 2;
        grid-row: 2;
    }

    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(2),
    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(3),
    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(4) {
        grid-row: 1;
    }

    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(5),
    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(6),
    .lenormand-drawn-grid[data-spread-code="choice_seven"] .lenormand-drawn-card:nth-child(7) {
        grid-row: 3;
    }

    .lenormand-analysis-grid {
        padding: 0 18px;
    }

    .lenormand-conclusion h2 {
        font-size: 21px;
    }

    .lenormand-basis summary {
        padding-right: 18px;
        padding-left: 18px;
    }

    #lenormand-basis-content {
        grid-template-columns: 1fr;
        padding-right: 18px;
        padding-left: 18px;
    }

    .lenormand-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .lenormand-library-card {
        min-height: 205px;
    }

    .lenormand-dialog {
        padding: 22px 18px;
    }

    .lenormand-dialog-heading {
        grid-template-columns: 34px 56px minmax(0, 1fr);
        gap: 10px;
    }

    .lenormand-dialog-visual {
        width: 56px;
        height: 82px;
    }

    .lenormand-dialog-visual > i {
        font-size: 43px;
    }

    .lenormand-dialog-heading h2 {
        font-size: 22px;
    }

    .lenormand-dialog-grid section:nth-child(odd),
    .lenormand-dialog-grid section:nth-child(even) {
        padding-right: 0;
        padding-left: 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lenormand-deck.is-shuffling .lenormand-card-back,
    .lenormand-drawn-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(244, 241, 235, .92), rgba(244, 241, 235, 1)),
        repeating-linear-gradient(90deg, rgba(49, 93, 88, .05) 0, rgba(49, 93, 88, .05) 1px, transparent 1px, transparent 34px);
    color: var(--ink);
    font-family: var(--font-main);
    font-synthesis: none;
    line-height: 1.55;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--accent);
}

button,
input,
select,
textarea {
    font: inherit;
}

strong,
b,
th,
.button,
button.primary,
button.secondary,
button.danger,
input[type="submit"],
.eyebrow,
.day-today-marker,
.relationship-kind,
.lenormand-personal-note-badge,
.lenormand-draw-progress strong,
.bazi-analysis-mode-buttons button.active {
    font-family: var(--font-heavy);
    font-weight: 900;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 66px;
    padding: 14px clamp(18px, 5vw, 56px);
    background: rgba(255, 253, 248, .92);
    border-bottom: 1px solid rgba(222, 215, 203, .8);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0;
}

.brand-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: contain;
}

.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 14px;
}

.nav a:hover {
    background: #ebe5d9;
}

.nav > a.is-current,
.nav > a.is-current:hover {
    background: var(--nav-active-soft);
    color: var(--nav-active-text);
    box-shadow: inset 0 -3px 0 var(--nav-active);
    font-weight: 900;
}

.nav-system-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 172px;
    min-width: 172px;
    min-height: 36px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f0eee8;
}

.nav .nav-system-switch a {
    justify-content: center;
    min-width: 0;
    min-height: 30px;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.nav .nav-system-switch a:hover {
    background: rgba(49, 93, 88, .09);
    color: var(--primary);
}

.nav .nav-system-switch a.system-switch-bazi:not(.is-active) {
    color: #315d58;
}

.nav .nav-system-switch a.system-switch-lenormand:not(.is-active) {
    color: #70456f;
}

.nav .nav-system-switch a.system-switch-bazi:not(.is-active):hover {
    background: #e4efec;
    color: #234844;
}

.nav .nav-system-switch a.system-switch-lenormand:not(.is-active):hover {
    background: #f0e5ef;
    color: #513150;
}

.nav .nav-system-switch a.is-active,
.nav .nav-system-switch a.is-active:hover {
    background: var(--primary);
    color: #fff;
}

.mobile-nav-toggle {
    display: none;
    place-items: center;
    align-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary);
    background: rgba(255, 253, 248, .92);
    box-shadow: none;
    cursor: pointer;
}

.mobile-nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}

.topbar.menu-open .mobile-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.topbar.menu-open .mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
}

.topbar.menu-open .mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.shell {
    width: min(1380px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.app-legal-footer {
    display: flex;
    width: min(1380px, calc(100% - 40px));
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 auto 28px;
    padding: 22px 16px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.app-legal-footer a {
    color: var(--muted);
    transition: color .2s;
}

.app-legal-footer a:hover,
.app-legal-footer a:focus-visible {
    color: var(--primary);
}

.app-legal-footer span {
    padding-left: 18px;
    border-left: 1px solid var(--line);
    font-size: 11px;
}

@media (max-width: 620px) {
    .app-legal-footer {
        width: min(100% - 28px, 1380px);
        gap: 10px 16px;
        margin-bottom: 22px;
    }

    .app-legal-footer span {
        flex-basis: 100%;
        padding-top: 4px;
        padding-left: 0;
        border-left: 0;
    }
}

.hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
}

.compact-hero {
    align-items: center;
}

.hero.match-hero {
    text-align: left;
}

.match-hero h1 {
    max-width: 780px;
}

.hero h1 {
    margin: 0;
    max-width: 780px;
    color: #18231f;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: 0;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

.meta-line {
    margin: 12px 0 0;
    color: var(--muted);
}

.hero-actions,
.form-actions,
.card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
}

.primary {
    background: var(--primary);
    color: #fff;
}

.primary:hover {
    background: var(--primary-strong);
    color: #fff;
}

.secondary {
    background: #ead9c7;
    color: #422a18;
}

.secondary:hover {
    background: #dec6ad;
    color: #2c1a0f;
}

.ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.block {
    width: 100%;
}

.button-disabled {
    cursor: not-allowed;
    color: var(--muted);
    background: #ece8df;
    border-color: var(--line);
    box-shadow: none;
    pointer-events: none;
}

.panel,
.profile-card,
.day-item {
    background: var(--surface);
    border: 1px solid rgba(222, 215, 203, .92);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel {
    max-width: 100%;
    padding: 22px;
}

.dashboard-grid,
.profile-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.dashboard-grid.dashboard-grid-single {
    display: block;
}

.dashboard-grid-single > .wide {
    width: 100%;
    max-width: none;
}

.dashboard-grid-single .profile-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.classic-left {
    display: grid;
    gap: 18px;
}

.profile-detail-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.profile-detail-hero h1 {
    margin: 0;
    color: #18231f;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 16px;
}

.profile-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 16px;
}

.profile-summary-grid > .panel {
    min-width: 0;
    height: 100%;
}

.profile-lower-grid > .panel {
    min-width: 0;
}

.profile-lower-grid > .panel:not(.full-span) {
    height: 100%;
}

.chart-panel {
    margin-bottom: 16px;
    overflow: hidden;
}

.full-span {
    grid-column: 1 / -1;
}

.profile-footnote {
    max-width: 960px;
    margin: -2px auto 18px;
    color: var(--danger);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.wide {
    min-width: 0;
}

.element-panel {
    display: flex;
    flex-direction: column;
}

.element-health-note {
    margin: 18px auto 0;
    max-width: 720px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.7;
    text-align: center;
}

.element-health-guidance {
    width: min(100%, 920px);
    margin: 14px auto 0;
    padding-top: 12px;
    border-top: 1px dashed #d9d0c2;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.element-health-guidance summary {
    width: fit-content;
    margin: 0 auto;
    color: var(--primary);
    cursor: pointer;
    font-weight: 800;
}

.element-health-guidance p {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: 9px;
    background: #f4f7f4;
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.section-title span {
    font-size: 18px;
    font-weight: 850;
}

.section-title small,
.muted {
    color: var(--muted);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.profile-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    transform: translateY(-3px);
    border-color: rgba(49, 93, 88, .36);
    box-shadow: var(--shadow-hover);
}

.clickable-card:focus-visible {
    outline: 3px solid rgba(49, 93, 88, .22);
    outline-offset: 3px;
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-top strong {
    display: block;
    font-size: 19px;
}

.card-top span:not(.tag) {
    color: var(--muted);
    font-size: 13px;
}

.tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e3efec;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
}

.pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pillars.compact {
    gap: 8px;
}

.pillar-chip {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 104px;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    text-align: center;
}

.compact .pillar-chip {
    min-height: 82px;
    padding: 10px 6px;
}

.pillar-chip span,
.pillar-chip small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.pillar-chip strong {
    display: block;
    margin: 6px 0 4px;
    font-size: 27px;
    line-height: 1;
}

.compact .pillar-chip strong {
    font-size: 20px;
}

.muted-chip {
    background: #f1eee7;
}

.card-actions {
    justify-content: center;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.card-actions a {
    font-size: 14px;
    font-weight: 800;
}

.card-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(49, 93, 88, .18);
    border-radius: 6px;
    background: #e3efec;
    color: var(--primary-strong);
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.card-action-button:hover {
    transform: translateY(-1px);
    background: var(--primary);
    color: #fff;
}

.stat-list,
.fact-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.stat-list div,
.fact-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.stat-list span,
.fact-list span {
    color: var(--muted);
}

.stat-list strong,
.fact-list strong {
    font-size: 18px;
}

.auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.auth-page {
    margin: 32px auto 0;
}

.auth-logo-button {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    margin: 0 auto 28px;
    padding: 12px;
    border: 1px solid rgba(222, 215, 203, .92);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.auth-logo-button:hover {
    transform: translateY(-2px);
    border-color: rgba(49, 93, 88, .38);
    box-shadow: var(--shadow-hover);
}

.auth-logo-button img {
    display: block;
    width: 104px;
    height: 104px;
    object-fit: contain;
}

.auth-grid.auth-grid-single {
    grid-template-columns: minmax(0, 540px);
    justify-content: center;
}

.auth-panel {
    width: 100%;
    padding: 28px;
}

.auth-panel .section-title {
    margin-bottom: 22px;
}

.auth-panel label {
    margin-bottom: 16px;
}

.auth-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
}

.auth-branding {
    max-width: 640px;
    margin: 0 auto 30px;
    text-align: center;
}

.auth-brand-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 96px;
}

.auth-brand-marks img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.auth-brand-marks span {
    width: 1px;
    height: 54px;
    background: var(--line);
}

.auth-branding h1 {
    margin: 12px 0 4px;
    color: #18231f;
    font-size: 30px;
}

.auth-branding p {
    margin: 0;
    color: var(--muted);
}

.line-auth-page {
    max-width: 980px;
}

.auth-entry-card {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 30px;
}

.auth-entry-title {
    margin-bottom: 24px;
}

.auth-entry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
}

.auth-login-method,
.auth-line-method {
    min-width: 0;
    padding: 4px 30px;
}

.auth-login-method {
    padding-left: 0;
    border-right: 1px solid var(--line);
}

.auth-line-method {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    padding-right: 0;
    text-align: center;
}

.auth-login-method .section-title {
    margin-bottom: 20px;
}

.auth-login-method label {
    margin-bottom: 16px;
}

.auth-password-help {
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 14px;
}

.auth-password-help a {
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}

.auth-password-help a:hover {
    color: var(--primary-strong);
    text-decoration: underline;
}

.auth-line-method h2 {
    margin: 0 0 6px;
    font-size: 21px;
}

.auth-line-method p,
.line-auth-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.line-login-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #06c755;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(6, 199, 85, .18);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.line-login-mark:hover,
.line-login-mark:focus-visible {
    transform: translateY(-2px) scale(1.04);
    background: #05b94f;
    color: #fff;
    box-shadow: 0 12px 24px rgba(6, 199, 85, .28);
}

.line-login-mark:focus-visible {
    outline: 3px solid rgba(6, 199, 85, .28);
    outline-offset: 4px;
}

.line-login-icon-action {
    display: grid;
    justify-items: center;
    gap: 7px;
}

.line-login-icon-action > small {
    display: none;
    color: #258a4e;
    font-size: 12px;
    font-weight: 800;
}

.line-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    min-height: 52px;
    margin: 0 auto;
    padding: 12px 24px;
    border: 1px solid #05ad49;
    border-radius: 6px;
    background: #06c755;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.line-login-button:hover {
    transform: translateY(-2px);
    background: #05b94f;
    box-shadow: var(--shadow-hover);
    color: #fff;
}

.line-auth-note {
    text-align: center;
    font-size: 13px;
}

.auth-register-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    font-weight: 750;
}

.auth-register-prompt .secondary {
    min-width: 112px;
}

.auth-register-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    padding: 18px;
    overflow-y: auto;
}

.auth-register-dialog .section-title {
    margin-bottom: 4px;
}

.auth-register-dialog small {
    color: var(--muted);
    line-height: 1.55;
}

.auth-register-dialog .dialog-actions {
    justify-content: center;
    margin-top: 4px;
}

.auth-register-dialog .dialog-actions button {
    min-width: 120px;
}

.line-account-onboarding {
    display: grid;
    justify-items: start;
    gap: 16px;
}

.line-account-onboarding .section-title,
.line-account-onboarding p {
    width: 100%;
    margin: 0;
}

@media (max-width: 600px) {
    .auth-entry-card {
        padding: 24px 20px;
    }

    .auth-entry-grid {
        grid-template-columns: 1fr;
    }

    .auth-login-method,
    .auth-line-method {
        padding: 0;
    }

    .auth-login-method {
        padding-bottom: 26px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .auth-line-method {
        padding-top: 26px;
    }

    .auth-line-method .line-login-mark {
        width: 82px;
        height: 82px;
        font-size: 17px;
        box-shadow: 0 10px 24px rgba(6, 199, 85, .25);
    }

    .auth-line-method .line-login-icon-action > small {
        display: block;
    }

    .auth-line-method h2 {
        margin-top: 2px;
    }

    .auth-register-prompt {
        flex-wrap: wrap;
    }

    .auth-register-dialog {
        padding: 14px;
    }

    .auth-register-dialog .dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-register-dialog .dialog-actions button {
        min-width: 0;
    }
}

.system-portal .shell {
    width: min(1180px, calc(100% - 40px));
}

.portal-intro {
    max-width: 760px;
    margin: 18px auto 30px;
    text-align: center;
}

.portal-intro h1 {
    margin: 0;
    color: #18231f;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.15;
}

.portal-intro > p:last-child {
    margin: 12px 0 0;
    color: var(--muted);
}

.system-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.system-choice {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 310px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.system-choice:hover {
    transform: translateY(-4px);
    border-color: rgba(49, 93, 88, .38);
    box-shadow: var(--shadow-hover);
    color: var(--ink);
}

.system-choice-logo {
    display: grid;
    place-items: center;
}

.system-choice-logo img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.system-choice-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.system-choice-content .eyebrow {
    margin: 0;
}

.system-choice-content > strong {
    font-size: 29px;
    line-height: 1.2;
}

.system-choice-content > span:not(.eyebrow) {
    color: var(--muted);
}

.system-choice-content b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--primary);
}

.system-choice-lenormand {
    border-color: rgba(194, 148, 75, .55);
    background: #513150;
    color: #fffaf0;
}

.system-choice-lenormand:hover {
    border-color: #c2944b;
    color: #fffaf0;
}

.system-choice-lenormand .eyebrow,
.system-choice-lenormand .system-choice-content b {
    color: #e0b86b;
}

.system-choice-lenormand .system-choice-content > span:not(.eyebrow) {
    color: #dbe7df;
}

@media (max-width: 920px) {
    .system-choice-grid {
        grid-template-columns: 1fr;
    }

    .system-choice {
        min-height: 250px;
    }
}

@media (max-width: 620px) {
    .brand-mark-pair .brand-logo {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .auth-brand-marks {
        gap: 14px;
    }

    .auth-brand-marks img {
        width: 74px;
        height: 74px;
    }

    .system-choice {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 0;
        padding: 28px 22px;
        text-align: center;
    }

    .system-choice-logo img {
        width: 122px;
        height: 122px;
    }

    .system-choice-content {
        align-items: center;
    }

    .lenormand-hero-logo,
    .lenormand-hero-logo img {
        width: 104px;
        height: 104px;
    }
}

.form-xl {
    max-width: 980px;
}

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

label {
    display: grid;
    gap: 7px;
    color: #374151;
    font-size: 14px;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #cfc7ba;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 10px 11px;
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(49, 93, 88, .15);
}

.full {
    grid-column: 1 / -1;
}

.form-actions {
    margin-top: 18px;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    font-weight: 500;
}

.checkbox-line input {
    width: auto;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 22px;
    padding: 16px;
    background: rgba(255, 253, 248, .76);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.period-switchers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: -6px 0 22px;
}

.period-switch {
    display: inline-grid;
    grid-template-columns: 42px minmax(96px, auto) 42px;
    align-items: center;
    min-height: 44px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(38, 31, 20, .06);
}

.period-switch a,
.period-switch strong {
    display: inline-grid;
    place-items: center;
    min-height: 44px;
}

.period-switch a {
    color: var(--primary);
    font-weight: 900;
}

.period-switch a:hover {
    background: #e3efec;
    color: var(--primary-strong);
}

.period-switch strong {
    padding: 0 14px;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    color: var(--ink);
    font-size: 17px;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.analysis-panel:last-child {
    grid-column: 1 / -1;
}

.day-list {
    display: grid;
    gap: 12px;
    max-height: 760px;
    overflow: auto;
    padding-right: 4px;
}

.day-item {
    padding: 15px;
    box-shadow: none;
}

.day-item.is-today {
    border-color: rgba(49, 93, 88, .32);
    background: rgba(227, 239, 236, .28);
    box-shadow: inset 3px 0 0 var(--primary);
}

.day-today-marker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e3efec;
    color: var(--primary-strong);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}

.day-item.is-past {
    order: 2;
    border-color: #d9d5cc;
    background: #efede8;
    box-shadow: none;
    opacity: .62;
    filter: grayscale(.28);
}

.day-item.is-past .day-head span,
.day-item.is-past .body-focus {
    color: var(--muted);
}

.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.day-head strong {
    font-size: 15px;
}

.day-head span {
    color: var(--gold);
    font-weight: 850;
    white-space: nowrap;
}

.day-item p {
    margin: 9px 0 0;
    color: #334155;
}

.day-summary {
    padding: 11px 13px;
    border-left: 3px solid var(--primary);
    border-radius: 0 6px 6px 0;
    background: #f2f7f5;
    line-height: 1.6;
}

.day-guidance {
    display: grid;
    gap: 7px;
    margin-top: 11px;
}

.day-guidance p {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin: 0;
    line-height: 1.55;
}

.day-guidance span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 28px;
    padding: 4px 8px 3px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-guidance-label);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
}

.day-guidance p:nth-child(1) span {
    border-color: #bfd3cc;
    background: #e9f2ef;
    color: #315d58;
}

.day-guidance p:nth-child(2) span {
    border-color: #e1c5c1;
    background: #f8ecea;
    color: #93483f;
}

.day-guidance p:nth-child(3) span {
    border-color: #ddcfaa;
    background: #f7f0df;
    color: #8c641f;
}

.day-formula-details {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px dashed #d8d0c4;
}

.day-formula-details summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.day-formula-details[open] summary {
    margin-bottom: 10px;
    color: var(--primary-strong);
}

.day-formula-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.day-formula-facts span {
    display: grid;
    gap: 3px;
    padding: 8px;
    border-radius: 5px;
    background: #f2efe9;
    color: var(--muted);
    font-size: 10px;
}

.day-formula-facts strong {
    color: var(--ink);
    font-size: 12px;
}

.day-formula-details p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 620px) {
    .day-formula-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.day-item small {
    display: block;
    margin-top: 10px;
    color: var(--muted);
}

.body-focus {
    color: var(--danger);
    font-weight: 850;
}

.advice {
    color: #334155;
}

.element-bars {
    display: grid;
    gap: 11px;
    width: 100%;
}

.element-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
}

.bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #ebe5d9;
}

.bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.element-木 .bar i {
    background: #477a51;
}

.element-火 .bar i {
    background: #b94435;
}

.element-土 .bar i {
    background: #b08a3c;
}

.element-金 .bar i {
    background: #7d8790;
}

.element-水 .bar i {
    background: #2f6f9f;
}

.bazi-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bazi-chart-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fffaf1;
    border: 2px solid #d5a839;
}

.bazi-chart-table th,
.bazi-chart-table td {
    border: 1px solid #e2bf5f;
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
}

.bazi-chart-table th {
    width: 86px;
    background: #faedc9;
    color: #3f3320;
    font-weight: 850;
}

.bazi-chart-table thead th {
    background: #f6df9b;
    color: #2d2417;
}

.full-chart td small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.ganzhi-stack {
    display: grid;
    gap: 2px;
    justify-items: center;
    line-height: 1;
}

.ganzhi-stack.small .large {
    font-size: 25px;
}

.stem-badge,
.branch-badge,
.sub-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    font-weight: 900;
    line-height: 1;
}

.stem-badge.large,
.branch-badge.large {
    min-width: 42px;
    min-height: 42px;
    font-size: 34px;
}

.wood {
    color: #236c3f;
}

.fire {
    color: #c43d25;
}

.earth {
    color: #9a6b12;
}

.metal {
    color: #2454a6;
}

.water {
    color: #156f8f;
}

.hidden-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.sub-star {
    min-width: auto;
    color: #2454a6;
    font-size: 15px;
}

.luck-table {
    min-width: 860px;
}

.luck-age {
    color: #8b2fb0;
    font-size: 22px;
    font-weight: 900;
}

.field-note {
    margin: 12px 0 0;
    color: var(--danger);
    font-weight: 800;
}

.match-relationship-note {
    margin: -4px 0 16px;
    color: var(--primary-strong);
    font-size: 14px;
    font-weight: 850;
}

.relation-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ebe5d9;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
}

.relation-pill.good,
.match-card.good,
.interaction-item.good {
    background: #e9f5ef;
    color: #23543e;
}

.relation-pill.risk,
.match-card.risk,
.interaction-item.risk {
    background: #fff0ec;
    color: #8f2418;
}

.relation-pill.support,
.match-card.support {
    background: #edf4ff;
    color: #234c88;
}

.relation-pill.pressure,
.match-card.pressure {
    background: #fff6df;
    color: #7a4e0b;
}

.match-filter {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 160px auto;
}

.free-match-pair-panel,
.free-match-unavailable-panel {
    display: grid;
    gap: 22px;
    border-top: 4px solid var(--primary);
}

.free-match-pair-panel .form-actions {
    justify-content: center;
    width: 100%;
}

.free-match-pair-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 16px;
}

.free-match-pair-fields label,
.match-filter.is-free-fixed label {
    min-width: 0;
}

.free-match-pair-symbol {
    align-self: end;
    display: grid;
    place-items: center;
    min-height: 46px;
    color: var(--primary-strong);
    font-size: 26px;
    font-weight: 900;
}

.free-match-fixed-person {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    margin-top: 7px;
    padding: 10px 13px;
    border: 1px solid #bfd5cf;
    border-radius: 8px;
    background: #edf5f2;
    color: var(--primary-strong);
    font-weight: 850;
    line-height: 1.35;
}

.free-match-lock-note,
.free-match-inline-note {
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: #fff8e9;
}

.free-match-lock-note strong,
.free-match-inline-note strong {
    color: #6e4a13;
}

.free-match-lock-note p,
.free-match-inline-note {
    line-height: 1.7;
}

.free-match-lock-note p {
    margin: 5px 0 0;
}

.free-match-inline-note {
    margin: -6px 0 20px;
}

.free-match-content-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 24px;
    border: 1px dashed #b8c9c4;
    border-radius: 10px;
    background: linear-gradient(135deg, #f2f7f5, #fffaf1);
}

.free-match-content-gate > div {
    display: grid;
    gap: 6px;
}

.free-match-content-gate span {
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.free-match-content-gate h2,
.free-match-unavailable-panel h2 {
    margin: 0;
    font-size: 21px;
}

.free-match-content-gate p,
.free-match-unavailable-panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.free-match-content-gate .button,
.free-match-unavailable-panel .button {
    flex: 0 0 auto;
}

.match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.wide-match {
    grid-column: 1 / -1;
}

.compact-chart {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.compact-chart div {
    min-height: 92px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
    text-align: center;
}

.compact-chart span,
.compact-chart small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.compact-chart strong {
    display: block;
    margin: 6px 0 4px;
    font-size: 23px;
}

.match-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.match-card,
.interaction-item {
    border: 1px solid rgba(222, 215, 203, .9);
    border-radius: 8px;
    padding: 14px;
    background: #fffaf1;
}

.match-card span,
.interaction-item span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.match-card strong,
.interaction-item strong {
    display: block;
    margin: 4px 0 8px;
    font-size: 20px;
}

.match-card p,
.interaction-item p {
    margin: 0;
}

.today-match-advice {
    grid-column: 1 / -1;
}

.today-match-advice p {
    line-height: 1.9;
    white-space: normal;
}

.interaction-list {
    display: grid;
    gap: 10px;
}

.explore-head {
    text-align: center;
    margin: 8px auto 22px;
}

.explore-head h1 {
    margin: 0 0 12px;
    color: #2b2138;
    font-size: 38px;
    letter-spacing: 0;
}

.explore-head p {
    margin: 10px 0 0;
    color: #2f2940;
    font-size: 18px;
}

.element-orbit {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.element-orbit span {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 8px 18px rgba(31, 41, 51, .16);
}

.element-orbit .metal {
    background: #b37407;
}

.element-orbit .wood {
    background: #246f4d;
}

.element-orbit .water {
    background: #0b6380;
}

.element-orbit .fire {
    background: #9d0712;
}

.element-orbit .earth {
    background: #5b3a13;
}

.paipan-form {
    max-width: 1120px;
    margin: 0 auto;
}

.profile-entry-form {
    padding: clamp(22px, 3vw, 32px);
}

.profile-entry-form .form-grid {
    gap: 16px;
}

.profile-entry-form .form-row-label,
.profile-entry-form .radio-row,
.profile-entry-form .entry-note {
    min-width: 0;
    padding: 14px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
}

.profile-entry-form .form-row-label {
    align-content: start;
    padding: 0;
    border: 0;
    background: transparent;
}

.relationship-entry-field,
.gender-entry-field {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 7px;
}

.relationship-entry-field {
    gap: 12px;
}

.relationship-custom-field[hidden] {
    display: none;
}

.gender-entry-title {
    color: #374151;
    font-size: 14px;
    font-weight: 800;
}

.profile-entry-form input,
.profile-entry-form select {
    min-height: 46px;
    background: var(--surface-strong);
}

.profile-entry-form .radio-row {
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 76px;
    background: rgba(255, 255, 255, .44);
}

.profile-entry-form .entry-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.profile-entry-form .profile-entry-option {
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .44);
    color: var(--muted);
    text-align: center;
}

.profile-entry-form .form-actions {
    justify-content: center;
    padding-top: 4px;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 44px;
    font-weight: 800;
}

.radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 850;
}

.radio-row input {
    width: auto;
}

.form-row-label small {
    color: var(--muted);
    font-weight: 500;
}

.advanced-fields {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 253, 248, .7);
}

.advanced-fields summary {
    cursor: pointer;
    font-weight: 850;
}

.advanced-fields .inner {
    margin-top: 14px;
}

.wide-button {
    min-width: 220px;
}

.basic-info-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fffdf8;
}

.basic-info-card-grid article {
    display: grid;
    grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 48px;
    min-width: 0;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #e7e0d6;
    border-radius: 0;
    background: transparent;
}

.basic-info-card-grid article:nth-child(even) {
    background: rgba(247, 243, 235, .62);
}

.basic-info-card-grid article:last-child {
    border-bottom: 0;
}

.basic-info-card-grid span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
}

.basic-info-card-grid p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .basic-info-card-grid article {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
        padding: 10px 12px;
    }

    .basic-info-card-grid p {
        font-size: 15px;
    }
}

.paipan-table-wrap,
.luck-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: #9ca3af #f1eee7;
    scrollbar-width: thin;
}

.chart-panel .paipan-table-wrap {
    display: grid;
    justify-items: center;
    padding: 4px 2px 8px;
}

.classic-paipan-table {
    display: grid;
    width: 100%;
    min-width: 900px;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    overflow: hidden;
}

.paipan-four-row,
.paipan-nine-row,
.paipan-start-row {
    display: grid;
    border-bottom: 1px solid #d7d7d7;
}

.paipan-four-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 54px;
}

.paipan-nine-row {
    grid-template-columns: repeat(9, minmax(0, 1fr)) 54px;
}

.paipan-start-row {
    grid-template-columns: minmax(0, 1fr) 54px;
    border-bottom: 0;
}

.paipan-four-row > *,
.paipan-nine-row > *,
.paipan-start-row > * {
    display: grid;
    place-items: center;
    min-width: 0;
    border-right: 1px solid #d7d7d7;
    text-align: center;
}

.paipan-four-row > *:last-child,
.paipan-nine-row > *:last-child,
.paipan-start-row > *:last-child {
    border-right: 0;
}

.paipan-side-label {
    background: #f7f7f7;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    writing-mode: vertical-rl;
    letter-spacing: 0;
}

.vertical-text {
    display: inline-grid;
    justify-items: center;
    gap: 3px;
    line-height: 1;
}

.vertical-text i {
    display: block;
    font-style: normal;
}

.paipan-main-star {
    height: 54px;
    color: #2b2138;
    font-size: 21px;
    font-weight: 850;
}

.paipan-pillar-cell {
    min-height: 206px;
    gap: 16px;
    padding: 16px 8px;
}

.paipan-pillar-cell div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.paipan-pillar-cell .large {
    min-width: 58px;
    min-height: 58px;
    color: #222;
    font-size: 56px;
}

.paipan-pillar-cell em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8f96a3;
    font-style: normal;
    font-size: 18px;
    font-weight: 800;
}

.paipan-hidden-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    align-items: center;
    justify-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 8px;
    font-weight: 850;
}

.paipan-hidden-row span {
    display: inline-grid;
    justify-items: center;
    gap: 4px;
}

.paipan-hidden-row small {
    color: var(--muted);
    font-size: 12px;
}

.paipan-sub-stars {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 76px;
    padding: 8px;
    font-weight: 850;
}

.paipan-luck-cell {
    min-height: 54px;
    padding: 8px;
    color: #111827;
    font-size: 18px;
    font-weight: 850;
}

.paipan-start-note {
    min-height: 54px;
    padding: 12px;
    color: #2b2138;
    font-weight: 850;
}

.luck-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: #9ca3af #f1eee7;
    scrollbar-width: thin;
}

.luck-timeline-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.luck-timeline-table th,
.luck-timeline-table td {
    border: 1px solid #d7d7d7;
    height: 54px;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    color: var(--ink);
    font-size: 16px;
    font-weight: 850;
}

.luck-timeline-table th {
    width: 54px;
    background: #f6f3ed;
    color: var(--muted);
    writing-mode: vertical-rl;
}

.current-cell {
    background: #fff1e6;
    color: #111827;
    font-weight: 950;
}

.base-pan-bazi {
    --bazi-label-width: 70px;
    --bazi-min-column: 164px;
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 1160px;
    min-width: 780px;
    margin: 0 auto;
    padding: 14px;
    overflow: visible;
    border: 1px solid rgba(222, 215, 203, .92);
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 12px 26px rgba(38, 31, 20, .06);
}

.base-pan-bazi .bazi-row,
.base-pan-bazi .bazi-pillar-labels {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(var(--bazi-min-column), 1fr)) var(--bazi-label-width);
    gap: 10px;
    align-items: stretch;
    direction: ltr;
}

.base-pan-bazi .bazi-row > *,
.base-pan-bazi .bazi-pillar-labels > * {
    min-width: 0;
    max-width: 100%;
}

.base-pan-bazi .labelTxt,
.base-pan-bazi .bazi-column-title,
.base-pan-bazi .bazi-MainStar-content,
.base-pan-bazi .bazi-FourPillars-GanZhi,
.base-pan-bazi .bazi-mini-list {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 8px 18px rgba(38, 31, 20, .045);
    text-align: center;
}

.base-pan-bazi .labelTxt {
    display: grid;
    place-items: center;
    width: var(--bazi-label-width);
    max-width: var(--bazi-label-width);
    padding: 8px;
    background: #f6f3ed;
    color: var(--muted);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    min-height: 100%;
}

.base-pan-bazi .bazi-column-title {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 8px;
    background: #fffaf1;
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
}

.base-pan-bazi .is-day-master {
    background: #f7fbf8;
}

.bazi-MainStar-content {
    display: grid;
    place-items: center;
    min-height: 86px;
    padding: 10px;
}

.bazi-vertical-word {
    display: inline-grid;
    justify-items: center;
    gap: 2px;
    color: #2b2138;
    font-weight: 950;
    line-height: 1;
}

.bazi-vertical-word ins,
.bazi-glyph {
    text-decoration: none;
}

.bazi-vertical-word ins {
    display: block;
    font-size: 26px;
}

.bazi-FourPillars-GanZhi {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    min-height: 172px;
    padding: 16px 8px;
}

.bazi-FourPillars-GanZhi span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.bazi-FourPillars-GanZhi small {
    color: #8f96a3;
    font-size: 17px;
    font-weight: 850;
}

.bazi-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    font-weight: 950;
    line-height: 1;
}

.bazi-glyph.large {
    min-width: 58px;
    min-height: 58px;
    font-size: 56px;
}

.bazi-mini-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 8px;
    min-height: 66px;
    padding: 10px 14px;
}

.bazi-SecondaryStars .bazi-mini-list {
    min-height: 86px;
}

.text-writing-mode-vertical {
    min-width: 22px;
    min-height: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.bazi-Hidden .text-writing-mode-vertical {
    font-size: 19px;
}

.bazi-SecondaryStars .text-writing-mode-vertical {
    font-size: 15px;
}

.bazi-empty-slot {
    opacity: 0;
}

.bazi-missing {
    color: var(--muted);
    font-size: 15px;
    font-weight: 850;
}

.base-pan-bazi .is-current-age {
    background: #fff1e6;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 42, .16);
}

.paipan-card-board {
    display: grid;
    gap: 14px;
    min-width: 900px;
}

.paipan-pillar-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.paipan-pillar-card {
    display: grid;
    grid-template-rows: auto auto minmax(74px, auto) minmax(88px, auto);
    overflow: hidden;
    min-width: 0;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #fffaf1;
}

.paipan-pillar-card.day-master-card {
    border-color: rgba(49, 93, 88, .32);
    box-shadow: inset 0 0 0 2px rgba(49, 93, 88, .06);
}

.paipan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border-bottom: 1px solid #e4ded5;
    background: rgba(246, 243, 237, .8);
}

.paipan-card-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.paipan-card-head strong {
    color: #2b2138;
    font-size: 18px;
}

.paipan-big-pillar {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 18px 10px;
    border-bottom: 1px solid #e4ded5;
}

.paipan-big-pillar div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.paipan-big-pillar .large {
    min-width: 58px;
    min-height: 58px;
    color: #222;
    font-size: 56px;
}

.paipan-big-pillar em {
    color: #8f96a3;
    font-style: normal;
    font-size: 18px;
    font-weight: 800;
}

.paipan-card-section {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e4ded5;
}

.paipan-card-section:last-child {
    border-bottom: 0;
}

.paipan-card-section > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.paipan-card-section .paipan-hidden-row,
.paipan-card-section .paipan-sub-stars {
    min-height: 0;
    padding: 0;
}

.paipan-sub-stars b {
    font-size: 14px;
}

.paipan-empty-card {
    display: grid;
    place-items: center;
    min-height: 260px;
    color: var(--muted);
}

.paipan-cycle-card-row {
    display: grid;
    grid-template-columns: repeat(9, minmax(92px, 1fr));
    gap: 10px;
}

.paipan-cycle-card,
.luck-flow-card {
    display: grid;
    gap: 4px;
    align-content: center;
    justify-items: center;
    min-height: 104px;
    padding: 10px 8px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #fffaf1;
    text-align: center;
}

.paipan-cycle-card span,
.luck-flow-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.paipan-cycle-card strong,
.luck-flow-card strong,
.luck-flow-card b {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.2;
}

.paipan-cycle-card em,
.luck-flow-card em {
    color: #2b2138;
    font-style: normal;
    font-size: 19px;
    font-weight: 900;
}

.paipan-cycle-card.current-cell,
.luck-flow-card.current-cell {
    border-color: #efcfb7;
    background: #fff1e6;
}

.luck-card-board {
    display: grid;
    gap: 16px;
    min-width: 980px;
}

.luck-card-section {
    display: grid;
    gap: 10px;
}

.luck-card-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.luck-card-heading strong {
    font-size: 16px;
}

.luck-card-heading span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.luck-card-row {
    display: grid;
    grid-template-columns: repeat(9, minmax(96px, 1fr));
    gap: 10px;
}

.today-flow {
    display: grid;
    gap: 10px;
}

.today-flow div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.today-flow strong {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.today-flow .today-focus {
    align-items: flex-start;
}

.today-flow .today-focus strong {
    max-width: 68%;
    text-align: left;
}

.today-flow span {
    color: var(--muted);
    font-weight: 800;
}

.today-alerts {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    max-height: 260px;
    overflow: auto;
}

.today-alerts article {
    border: 1px solid #ead7bd;
    border-radius: 8px;
    padding: 10px;
    background: #fffaf1;
}

.today-alerts p {
    margin: 0;
    color: #374151;
}

.today-alerts p + p {
    margin-top: 6px;
}

.today-advice-line {
    color: var(--primary-strong);
    font-weight: 800;
}

.compact-facts {
    margin-bottom: 0;
}

.focus-grid,
.focus-result-grid,
.focus-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.focus-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.focus-detail-grid {
    margin: 12px 0 0;
}

.focus-detail-panel .focus-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.focus-grid article,
.focus-result-grid article,
.focus-detail-grid article {
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
}

.focus-grid article {
    min-height: 126px;
}

.focus-result-grid article {
    place-items: center;
    min-height: 78px;
    text-align: center;
}

.focus-detail-grid article {
    min-height: 132px;
    padding: 18px;
}

.focus-grid span,
.focus-result-grid span,
.focus-detail-grid span {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.focus-grid p,
.focus-detail-grid p {
    margin: 0;
    color: #334155;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.focus-result-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.45;
}

.focus-detail-toggle {
    margin-top: 2px;
    text-align: center;
}

.focus-detail-panel {
    margin-top: 0;
    text-align: center;
}

.focus-detail-toggle summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(49, 93, 88, .22);
    border-radius: 6px;
    background: #e3efec;
    color: var(--primary-strong);
    cursor: pointer;
    font-size: 14px;
    font-weight: 850;
    list-style: none;
}

.focus-detail-panel .focus-detail-grid {
    text-align: left;
}

.focus-detail-toggle summary::-webkit-details-marker {
    display: none;
}

.focus-detail-toggle summary:hover {
    background: var(--primary);
    color: #fff;
}

.focus-detail-toggle[open] summary {
    background: var(--primary);
    color: #fff;
}

.focus-toggle-collapse,
.focus-detail-toggle[open] .focus-toggle-expand {
    display: none;
}

.focus-detail-toggle[open] .focus-toggle-collapse {
    display: inline;
}

.profile-key-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.profile-key-grid div {
    display: grid;
    gap: 4px;
    align-content: center;
    min-height: 72px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    text-align: center;
}

.profile-key-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.profile-key-grid strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 16px;
}

.strength-explain-panel {
    margin-bottom: 16px;
}

.strength-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.strength-trigger-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.strength-summary-grid article,
.strength-trigger-grid article,
.strength-condition-grid article {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
}

.strength-summary-grid article {
    display: grid;
    gap: 6px;
    align-content: center;
    min-height: 82px;
    padding: 12px;
    text-align: center;
}

.strength-summary-grid span,
.strength-trigger-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.strength-summary-grid strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 19px;
    font-weight: 950;
}

.strength-rule-card {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
}

.strength-rule-card p {
    margin: 0;
    color: #334155;
    line-height: 1.7;
}

.strength-rule-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.strength-rule-list span,
.strength-current-rule {
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 850;
    text-align: center;
}

.strength-rule-list span.is-current {
    background: #fff1e6;
    border-color: #ead7bd;
    color: #8a3b16;
}

.strength-current-rule {
    display: block;
    background: #fffaf1;
}

.strength-score-board,
.strength-section {
    margin-top: 14px;
}

.strength-score-board {
    max-width: 100%;
    overflow-x: auto;
}

.strength-board-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.strength-board-title strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
}

.strength-board-title span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.strength-score-grid {
    display: grid;
    grid-template-columns: 82px repeat(4, minmax(140px, 1fr));
    gap: 8px;
    min-width: 760px;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #151515, #070707);
    color: #fff;
}

.strength-column-title,
.strength-row-label,
.strength-score-cell {
    border: 1px solid #343434;
    border-radius: 8px;
    background: linear-gradient(180deg, #242424, #1d1d1d);
}

.strength-column-title,
.strength-row-label {
    display: grid;
    place-items: center;
    color: var(--ink);
    font-weight: 950;
}

.strength-row-label {
    min-height: 112px;
    background: linear-gradient(180deg, #262626, #1b1b1b);
    color: #f8fafc;
}

.strength-score-cell {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 112px;
    padding: 10px;
    text-align: center;
}

.strength-score-cell.is-scored {
    background: linear-gradient(180deg, #242424, #1d1d1d);
    box-shadow: inset 0 0 0 2px rgba(230, 57, 70, .78);
}

.strength-score-cell strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 950;
}

.strength-score-cell small {
    color: #d1d5db;
    font-size: 13px;
    font-weight: 850;
}

.strength-score-cell em {
    color: #f8fafc;
    font-style: normal;
    font-weight: 950;
}

.strength-score-cell.is-scored em {
    color: #ff3b49;
}

.strength-score-cell span {
    color: #d1d5db;
    font-size: 12px;
    font-weight: 750;
}

.strength-column-title {
    color: #f8fafc;
}

.strength-condition-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.strength-condition-grid article {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.strength-condition-grid header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.strength-condition-grid header strong {
    color: var(--ink);
    font-weight: 950;
}

.strength-condition-grid p {
    margin: 0;
    color: #334155;
    font-weight: 800;
}

.strength-case-visual {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.strength-case-checks {
    display: grid;
    gap: 8px;
}

.strength-case-checks div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.strength-case-checks div span,
.strength-case-checks div strong {
    overflow-wrap: anywhere;
}

.strength-case-image {
    display: block;
    width: min(100%, 280px);
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 22px rgba(38, 31, 20, .1);
}

.status-ok {
    color: #28724f;
    font-weight: 950;
}

.status-no {
    color: #b4432f;
    font-weight: 950;
}

.strength-trigger-grid article {
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 96px;
    padding: 12px;
}

.strength-trigger-grid article.is-active {
    background: #fff1e6;
    border-color: #ead7bd;
}

.strength-adjustment-wrap {
    margin-top: 14px;
    max-width: 100%;
    overflow-x: auto;
}

.strength-adjustment-table,
.strength-detail-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.strength-adjustment-table th,
.strength-adjustment-table td,
.strength-detail-table th,
.strength-detail-table td {
    padding: 12px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-align: left;
    vertical-align: top;
}

.strength-adjustment-table th,
.strength-detail-table th {
    background: #f6f3ed;
    color: var(--muted);
    font-size: 13px;
    font-weight: 950;
}

.strength-adjustment-table tr:last-child td,
.strength-detail-table tr:last-child td {
    border-bottom: 0;
}

.strength-adjustment-table th:last-child,
.strength-adjustment-table td:last-child,
.strength-detail-table th:last-child,
.strength-detail-table td:last-child {
    border-right: 0;
}

.strength-detail-wrap {
    margin-top: 14px;
    max-width: 100%;
    overflow-x: auto;
}

.strength-trigger-grid strong {
    color: var(--ink);
    font-size: 17px;
    font-weight: 950;
}

.strength-trigger-grid p,
.strength-conclusion {
    margin: 0;
    color: #334155;
    line-height: 1.75;
}

.strength-conclusion {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
    font-weight: 850;
}

.rules-layout,
.notes-layout,
.users-layout {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.users-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.user-create-panel,
.user-list-panel {
    width: 100%;
    min-width: 0;
}

.user-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    width: 100%;
}

.user-create-grid {
    display: grid;
    grid-template-columns: minmax(140px, .85fr) minmax(220px, 1.25fr) minmax(180px, 1fr) minmax(150px, .8fr);
    gap: 14px;
}

.user-create-grid label {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.user-create-grid label small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.user-create-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 27px;
}

.user-create-actions .primary {
    min-width: 146px;
    min-height: 43px;
}

.user-create-panel {
    padding: 18px 22px 16px;
}

.user-create-panel .section-title {
    margin-bottom: 12px;
}

.user-list-panel > .section-title {
    margin-bottom: 12px;
}

.user-list-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(244, 241, 235, .48);
}

.user-list-toolbar label {
    gap: 5px;
}

.user-list-toolbar input,
.user-list-toolbar select,
.user-list-toolbar button,
.user-list-toolbar .button {
    min-height: 42px;
}

.user-list-toolbar button,
.user-list-toolbar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.user-list-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 0 2px;
    color: var(--muted);
    font-size: 13px;
}

.user-list-result-bar small {
    color: inherit;
}

.table-wrap {
    overflow-x: auto;
}

.user-plan-heading,
.user-plan-cell {
    min-width: 150px;
}

.user-plan-summary {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.user-plan-summary strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #edf5f2;
    color: var(--primary-strong);
    line-height: 1.2;
    white-space: nowrap;
}

.user-plan-summary span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
}

.user-plan-summary .user-plan-status {
    color: var(--primary-strong);
    font-weight: 800;
}

.user-account-list {
    display: grid;
    gap: 8px;
}

.user-account-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.user-account-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(244, 241, 235, .46);
    cursor: pointer;
    list-style: none;
}

.user-account-card-head::-webkit-details-marker {
    display: none;
}

.user-account-card[open] > .user-account-card-head {
    border-bottom: 1px solid var(--line);
    background: rgba(238, 245, 241, .58);
}

.user-account-identity {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.user-account-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.user-account-name-line > strong {
    color: var(--ink);
    font-size: 16px;
}

.user-account-identity > a,
.user-account-identity > span {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 13px;
}

.user-account-overview {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.user-account-summary-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f0ede7;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.user-account-summary-chip.is-lenormand {
    background: #eaf4f0;
    color: var(--primary-strong);
}

.user-account-summary-chip.is-bazi {
    background: #f6eddf;
    color: #745129;
}

.user-account-summary-chip.is-account-status.is-active {
    background: #e7f4ec;
    color: #236143;
}

.user-account-summary-chip.is-account-status.is-disabled {
    background: #fae9e5;
    color: #a33c2d;
}

.user-account-card.is-disabled {
    border-color: #e4c3bc;
}

.user-account-card.is-disabled > .user-account-card-head,
.user-account-card.is-disabled[open] > .user-account-card-head {
    background: #fff5f2;
}

.user-account-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 78px;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 850;
}

.user-account-toggle-label::before {
    content: '▸';
    transition: transform .18s ease;
}

.user-account-toggle-label .when-open,
.user-account-card[open] .user-account-toggle-label .when-closed {
    display: none;
}

.user-account-card[open] .user-account-toggle-label::before {
    transform: rotate(90deg);
}

.user-account-card[open] .user-account-toggle-label .when-open {
    display: inline;
}

.user-account-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 253, 248, .72);
}

.user-account-detail-toolbar > small {
    color: var(--muted);
}

.current-user-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #edf5f2;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
}

.user-account-meta {
    display: grid;
    grid-template-columns: 140px 140px 150px 150px minmax(190px, 1fr);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 253, 248, .72);
}

.user-account-meta-item {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 14px 20px;
    border-right: 1px solid var(--line);
}

.user-account-meta-item:last-child {
    border-right: 0;
}

.user-account-meta-item span,
.user-service-fact span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
}

.user-account-meta-item strong,
.user-service-fact strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

.user-account-status-text.is-active {
    color: #236143;
}

.user-account-status-text.is-disabled {
    color: #a33c2d;
}

.user-account-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
}

.user-service-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fffdf8;
}

.user-service-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-height: 92px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--line);
}

.user-service-card.is-lenormand .user-service-card-head {
    background: rgba(238, 245, 241, .74);
}

.user-service-card.is-bazi .user-service-card-head {
    background: rgba(248, 241, 229, .72);
}

.user-service-card-head > div:first-child > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
}

.user-service-card-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
}

.user-service-card-head .user-plan-summary {
    max-width: 58%;
    justify-items: end;
    text-align: right;
}

.user-service-card .user-plan-summary strong,
.user-service-card .user-plan-summary span {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.user-service-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-service-fact {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    min-height: 92px;
    padding: 15px 17px;
}

.user-service-fact:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.user-service-fact:nth-child(n+3) {
    border-top: 1px solid var(--line);
}

.user-service-fact small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-service-diagnostics {
    padding: 14px 17px 16px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .58);
}

.user-service-diagnostics summary {
    cursor: pointer;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 850;
}

.user-service-diagnostics p {
    margin: 12px 0 8px;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.65;
}

.user-service-diagnostics a,
.user-service-diagnostics small {
    display: block;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.user-service-diagnostics a {
    color: var(--primary-strong);
    font-weight: 800;
}

.user-account-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 9px;
}

.user-list-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px 18px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.user-list-empty p {
    margin: 0 0 5px;
}

.user-list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.user-list-pagination .button {
    min-width: 92px;
    text-align: center;
}

.user-list-pagination .is-disabled {
    cursor: not-allowed;
    opacity: .45;
}

.user-list-page-status {
    min-width: 90px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.row-actions.user-account-actions .inline-action {
    margin: 0;
}

.row-actions.user-account-actions form {
    display: inline-flex;
    align-items: center;
}

.row-actions.user-account-actions form button {
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid rgba(180, 35, 24, .16);
    border-radius: 6px;
    background: #fff7f4;
}

@media (max-width: 1100px) {
    .user-list-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-list-toolbar .user-list-search {
        grid-column: 1 / -1;
    }

    .user-create-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-create-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-create-actions {
        margin-top: 0;
    }

    .user-account-services {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .user-list-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-list-toolbar button,
    .user-list-toolbar .button {
        width: 100%;
    }

    .user-list-result-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .user-create-grid {
        gap: 14px;
    }

    .user-create-actions {
        margin-top: 0;
    }

    .user-create-actions .primary {
        width: 100%;
    }

    .user-account-card-head {
        align-items: stretch;
        flex-direction: column;
        padding: 13px 14px;
    }

    .user-account-overview {
        justify-content: flex-start;
    }

    .user-account-detail-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .user-account-actions {
        justify-content: flex-start;
    }

    .user-list-pagination {
        gap: 7px;
    }

    .user-list-pagination .button {
        min-width: 76px;
        padding-inline: 10px;
    }

    .user-account-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-account-meta-item {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .user-account-meta-item:last-child {
        border-bottom: 0;
    }

    .user-account-services {
        gap: 14px;
        padding: 14px;
    }

    .user-service-card-head {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
    }

    .user-service-card-head .user-plan-summary {
        max-width: none;
        justify-items: start;
        text-align: left;
    }

    .user-service-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-service-fact,
    .user-service-fact:nth-child(odd) {
        min-height: 0;
        border-right: 0;
        border-top: 1px solid var(--line);
    }

    .user-service-fact:first-child {
        border-top: 0;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

th {
    color: var(--muted);
    font-size: 12px;
}

.row-actions {
    white-space: nowrap;
}

.user-list-panel td.row-actions {
    vertical-align: middle;
    text-align: center;
}

.user-list-panel .row-actions form {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.user-list-panel .row-actions .inline-action {
    vertical-align: middle;
}

.row-actions form {
    display: inline;
}

.row-actions button,
.danger-link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger);
    font-weight: 800;
}

.row-actions .inline-action {
    min-height: 32px;
    margin-right: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(49, 93, 88, .22);
    border-radius: 6px;
    background: #e3efec;
    color: var(--primary-strong);
    font-weight: 850;
}

.row-actions .inline-action:hover {
    background: var(--primary);
    color: #fff;
}

.danger-button {
    min-height: 42px;
    padding: 9px 15px;
    border-color: rgba(180, 35, 24, .18);
    background: #fff0ec;
    color: var(--danger);
    font-weight: 850;
}

.danger-button:hover {
    background: var(--danger);
    color: #fff;
}

.delete-zone {
    display: flex;
    justify-content: center;
    margin-top: 42px;
    padding-top: 10px;
}

.confirm-dialog {
    width: min(420px, calc(100vw - 32px));
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-hover);
}

.confirm-dialog::backdrop {
    background: rgba(31, 41, 51, .38);
}

.confirm-dialog form {
    display: grid;
    gap: 14px;
    padding: 8px;
}

.confirm-dialog strong {
    font-size: 18px;
}

.confirm-dialog p {
    margin: 0;
    color: var(--muted);
}

.account-dialog {
    width: min(560px, calc(100vw - 32px));
}

.account-dialog form {
    gap: 13px;
}

.account-dialog .section-title {
    margin-bottom: 0;
}

.account-dialog .dialog-actions {
    justify-content: center;
    padding-top: 4px;
}

.account-password-reset-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;
}

.account-password-reset-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.account-password-reset-toggle span {
    display: grid;
    gap: 3px;
}

.account-password-reset-toggle strong {
    font-size: 16px;
}

.account-password-reset-field[hidden] {
    display: none;
}

.account-security-page {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 54px 0 72px;
}

.account-security-hero {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.account-security-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.15;
}

.account-security-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.account-login-overview {
    display: grid;
    gap: 18px;
    margin: 0 0 22px;
    padding: 22px 26px;
}

.account-login-overview-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.account-login-overview-head h2 {
    margin: 4px 0 0;
    font-size: 25px;
}

.account-login-overview-hint {
    color: var(--muted);
    font-size: 14px;
    text-align: right;
}

.account-login-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-login-method-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 14px;
    align-items: center;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
}

.account-login-method-state > span {
    color: var(--muted);
    font-size: 14px;
}

.account-login-method-state > strong {
    justify-self: end;
    color: var(--primary);
    font-size: 16px;
}

.account-login-method-state > small {
    grid-column: 1 / -1;
    color: var(--muted);
    line-height: 1.5;
}

.account-login-method-state.is-line.is-ready {
    border-color: rgba(6, 199, 85, .28);
    background: rgba(6, 199, 85, .06);
}

.account-login-method-state.is-line.is-ready > strong {
    color: #168a43;
}

.account-login-method-state.is-pending {
    border-style: dashed;
}

.account-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.account-security-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 30px;
}

.account-security-card > p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

.account-security-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.account-security-card-head h2 {
    margin: 4px 0 0;
    font-size: 27px;
}

.account-security-icon {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

.account-security-icon.is-line {
    background: #06c755;
    font-size: 14px;
    letter-spacing: .04em;
}

.account-security-form {
    display: grid;
    gap: 18px;
    width: 100%;
}

.account-security-passwords {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-security-passwords > label {
    align-content: start;
}

.account-security-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.account-security-form-actions .primary,
.account-security-form-actions .button {
    min-width: 220px;
    justify-content: center;
}

.account-security-status {
    display: grid;
    gap: 5px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    text-align: center;
}

.account-security-status.is-linked {
    border-color: rgba(6, 199, 85, .28);
    background: rgba(6, 199, 85, .07);
}

.account-security-status.is-local-ready {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
    background: color-mix(in srgb, var(--surface) 86%, #dcece8 14%);
}

.account-security-status strong {
    font-size: 19px;
}

.account-security-status span {
    color: var(--muted);
    line-height: 1.6;
}

.account-security-line .line-login-button {
    width: 100%;
    box-sizing: border-box;
}

.account-security-local-actions {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.account-security-local-actions .button {
    min-width: 220px;
    justify-content: center;
}

.account-security-backlinks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
}

.account-security-backlinks .button {
    justify-content: center;
    text-align: center;
}

.password-change-page {
    width: min(880px, calc(100% - 48px));
    margin: 0 auto;
    padding: 54px 0 72px;
}

.password-change-hero {
    max-width: 720px;
    margin: 0 auto 28px;
    text-align: center;
}

.password-change-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
}

.password-change-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
}

.password-change-card {
    display: grid;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
}

.password-change-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
}

.password-change-card-head h2 {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-size: 25px;
}

.password-change-form {
    display: grid;
    gap: 20px;
}

.password-change-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.password-change-fields > label {
    align-content: start;
}

.password-change-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.password-change-actions .button,
.password-change-actions button {
    min-width: 210px;
    justify-content: center;
}

.password-change-actions.is-centered button {
    min-width: 240px;
}

.password-change-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.password-change-empty h2,
.password-change-empty p {
    margin: 0;
}

.password-change-empty p {
    max-width: 560px;
    color: var(--muted);
    line-height: 1.7;
}

.password-reset-expired-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: #f5e5dd;
    color: var(--danger);
    font-size: 28px;
    font-weight: 800;
}

.password-reset-expiry {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--muted);
    line-height: 1.65;
    text-align: center;
}

.forgot-password-note {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
}

.user-reset-email-unavailable {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 760px) {
    .account-security-page {
        width: min(100% - 28px, 620px);
        padding: 34px 0 48px;
    }

    .account-security-hero {
        margin-bottom: 22px;
    }

    .account-security-hero h1 {
        font-size: 34px;
    }

    .account-security-hero p {
        font-size: 16px;
        line-height: 1.65;
    }

    .account-security-grid,
    .account-login-overview-grid,
    .account-security-passwords,
    .password-change-fields {
        grid-template-columns: 1fr;
    }

    .account-security-card {
        padding: 22px 18px;
    }

    .account-login-overview {
        padding: 20px 18px;
    }

    .account-login-overview-head {
        display: grid;
        align-items: start;
    }

    .account-login-overview-hint {
        text-align: left;
    }

    .account-security-card-head h2 {
        font-size: 23px;
    }

    .account-security-backlinks {
        grid-template-columns: 1fr;
    }

    .account-security-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-security-form-actions .primary,
    .account-security-form-actions .button {
        width: 100%;
        min-width: 0;
    }

    .password-change-page {
        width: min(100% - 28px, 620px);
        padding: 34px 0 48px;
    }

    .password-change-hero h1 {
        font-size: 34px;
    }

    .password-change-hero p {
        font-size: 16px;
        line-height: 1.65;
    }

    .password-change-card {
        padding: 22px 18px;
    }

    .password-change-card-head {
        align-items: flex-start;
    }

    .password-change-card-head h2 {
        font-size: 21px;
    }

    .password-change-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .password-change-actions .button,
    .password-change-actions button {
        width: 100%;
        min-width: 0;
    }
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.relationships-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.relationship-form-panel {
    width: 100%;
}

.relationship-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.relationship-form-grid label {
    min-width: 0;
}

.relationship-form-panel .form-actions {
    justify-content: center;
    margin-top: 18px;
}

.relationship-limit-note {
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid #c8d8d3;
    border-radius: 8px;
    background: #edf5f2;
    color: var(--primary-strong);
    font-weight: 800;
    line-height: 1.6;
}

.relationship-limit-note.is-full {
    border-color: #e2c9a1;
    background: #fff7e7;
    color: #76501a;
}

.relationship-auto-note {
    margin: 18px 0 0;
    padding: 11px 14px;
    border-left: 3px solid rgba(49, 93, 88, .42);
    background: rgba(227, 239, 236, .55);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
    text-align: center;
}

.relationship-list-section {
    min-width: 0;
}

.relationship-filter {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 190px auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 253, 248, .76);
}

.relationship-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.relationship-item {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-width: 0;
    min-height: 154px;
    padding: 18px;
    border: 1px solid rgba(222, 215, 203, .92);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.relationship-item:hover {
    transform: translateY(-2px);
    border-color: rgba(49, 93, 88, .28);
    box-shadow: var(--shadow-hover);
}

.relationship-item strong,
.relationship-item span {
    display: block;
}

.relationship-card-copy {
    min-width: 0;
    text-align: left;
}

.relationship-card-copy strong {
    min-height: 28px;
    padding-right: 74px;
    overflow-wrap: anywhere;
    font-size: 18px;
}

.relationship-card-copy .relationship-kind {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e3efec;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 850;
}

.relationship-card-copy p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.relationship-item .row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

.relationship-item .row-actions form {
    display: inline-flex;
}

.relationship-item .row-actions button {
    min-width: 74px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #e3efec;
    color: var(--primary-strong);
}

.relationship-item .row-actions button:hover {
    border-color: rgba(49, 93, 88, .24);
    background: #e3efec;
    color: var(--primary-strong);
}

.relationship-item .row-actions .relationship-delete-button {
    border-color: #dfc8c3;
    background: transparent;
    color: #8b4a42;
}

.relationship-item .row-actions .relationship-delete-button:hover {
    border-color: #c99d96;
    background: #f8ece9;
    color: #7d332b;
}

.notes-stack {
    display: grid;
    gap: 14px;
}

.note-card p,
.notes {
    margin: 0;
    white-space: normal;
}

.empty {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 20px;
    border: 1px dashed #c8bfb1;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 253, 248, .55);
    text-align: center;
}

.empty.small {
    min-height: 96px;
}

.empty p {
    margin: 2px 0;
}

.match-empty-state,
.relationship-empty-state {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding-bottom: 40px;
}

.match-empty-state .empty,
.relationship-empty-state .empty {
    width: 100%;
    box-sizing: border-box;
}

.match-empty-state .button,
.relationship-empty-state .button {
    min-width: 132px;
}

.flash {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 800;
}

.flash.success {
    background: #e9f5ef;
    border-color: #b9ddcc;
    color: #23543e;
}

.flash.error {
    background: #fff0ec;
    border-color: #f2c2b5;
    color: #8f2418;
}

.delete-form {
    margin-top: 18px;
}

.focus-insight-panel,
.ma-hua-ku-panel,
.trend-panel,
.match-analysis-panel {
    overflow: hidden;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.insight-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
}

.insight-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(222, 215, 203, .86);
}

.insight-card h3 {
    margin: 0;
    font-size: 18px;
}

.time-sensitive-badge {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff1e6;
    color: #8a3f20;
    font-size: 11px;
    font-weight: 800;
}

.insight-card section {
    margin-top: 12px;
}

.insight-card section > span,
.match-dimension-card div > span,
.match-baseline-card > span,
.match-current-card > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.insight-card p,
.match-dimension-card p,
.match-baseline-card p,
.match-current-card p {
    margin: 0;
    overflow-wrap: anywhere;
}

.insight-lead strong {
    display: block;
    color: #18231f;
    font-size: 17px;
    line-height: 1.75;
}

.insight-caution {
    padding: 10px 12px;
    border-left: 3px solid rgba(180, 83, 42, .46);
    background: rgba(255, 241, 230, .58);
}

.insight-basis {
    margin-top: auto;
    padding-top: 14px;
}

.insight-basis summary {
    width: fit-content;
    cursor: pointer;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
}

.insight-basis p {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f1eee8;
    color: #59616d;
    font-size: 13px;
    line-height: 1.7;
}

.ma-hua-ku-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-widget {
    display: grid;
    gap: 14px;
}

.trend-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trend-tab {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f3eee6;
    color: #4b3a2f;
    cursor: pointer;
    font-weight: 850;
}

.trend-tab:hover,
.trend-tab.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.trend-chart-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.trend-chart {
    position: relative;
    min-width: 720px;
    height: 270px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffcf7;
}

.trend-svg,
.trend-point-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.trend-grid-line {
    stroke: #e7e0d6;
    stroke-width: 1;
    stroke-dasharray: 5 7;
}

.trend-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.bazi-trend-preview-chart {
    min-width: 760px;
}

.trend-point {
    position: absolute;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d87545;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    transform: translate(-50%, -50%);
    box-shadow: 0 3px 8px rgba(38, 31, 20, .18);
}

.trend-point small {
    position: absolute;
    top: 36px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.trend-point.current {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(49, 93, 88, .14), 0 4px 10px rgba(38, 31, 20, .18);
}

.trend-point.selected {
    outline: 3px solid rgba(180, 83, 42, .24);
    outline-offset: 3px;
}

.trend-detail {
    min-height: 126px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
}

.trend-detail-title {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.trend-detail > p {
    margin: 6px 0;
}

.trend-detail > p span {
    display: inline-block;
    margin-right: 8px;
    color: var(--primary);
    font-weight: 900;
}

.trend-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.match-layer + .match-layer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.match-layer-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.match-layer-heading span,
.match-layer-heading small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.match-layer-heading h2 {
    margin: 2px 0 0;
    font-size: 20px;
}

.match-baseline-grid,
.match-current-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.match-baseline-card,
.match-current-card,
.match-dimension-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffaf1;
}

.match-baseline-card.good,
.match-baseline-card.support {
    border-top: 3px solid rgba(49, 93, 88, .62);
}

.match-baseline-card.risk,
.match-baseline-card.pressure {
    border-top: 3px solid rgba(180, 83, 42, .58);
}

.match-baseline-card > strong,
.match-current-card > strong,
.match-dimension-card > strong {
    display: block;
    margin-bottom: 8px;
    color: #18231f;
    font-size: 17px;
    line-height: 1.7;
}

.relationship-indicators {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.relationship-indicators div {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(49, 93, 88, .16);
    border-radius: 8px;
    background: #edf5f2;
    text-align: center;
}

.relationship-indicators span,
.relationship-indicators strong {
    display: block;
}

.relationship-indicators span {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.relationship-indicators strong {
    overflow-wrap: anywhere;
    color: var(--primary-strong);
    font-size: 14px;
}

.match-dimension-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.match-dimension-card {
    display: flex;
    flex-direction: column;
}

.match-dimension-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.match-dimension-card > div {
    margin-top: 12px;
}

@media (max-width: 920px) {
    .lenormand-subpage-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 10px;
        min-height: 68px;
        padding: 10px 14px;
    }

    .brand {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        max-width: 100%;
        text-align: center;
    }

    .brand > span:last-child {
        min-width: 0;
        overflow: hidden;
        font-family: var(--font-heavy);
        font-size: 17px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .mobile-nav-toggle {
        display: grid;
        grid-column: 3;
        justify-self: end;
    }

    .nav {
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-top: 2px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(255, 253, 248, .98);
        box-shadow: 0 12px 28px rgba(38, 31, 20, .12);
    }

    .topbar.menu-open .nav {
        display: grid;
    }

    .nav a {
        justify-content: center;
        min-height: 44px;
        padding: 9px 10px;
        border: 1px solid rgba(222, 215, 203, .72);
        background: rgba(244, 241, 235, .62);
        text-align: center;
    }

    .nav .nav-system-switch {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 3px;
        border-radius: 9px;
    }

    .nav .nav-system-switch a {
        min-height: 36px;
        padding: 7px 10px;
        border: 0;
        border-radius: 6px;
        background: transparent;
    }

    .nav .nav-system-switch a.is-active,
    .nav .nav-system-switch a.is-active:hover {
        background: var(--primary);
        color: #fff;
    }

    .profile-detail-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 18px;
    }

    .profile-detail-hero > div:first-child,
    .profile-detail-hero .hero-actions {
        width: 100%;
        min-width: 0;
    }

    .profile-detail-hero .hero-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .profile-detail-hero .hero-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    .dashboard-grid,
    .profile-detail-grid,
    .profile-summary-grid,
    .profile-lower-grid,
    .auth-grid,
    .rules-layout,
    .notes-layout,
    .users-layout,
    .relationships-layout,
    .match-grid,
    .analysis-grid {
        grid-template-columns: 1fr;
    }

    .analysis-panel:last-child {
        grid-column: auto;
    }

    .wide-match {
        grid-column: auto;
    }

    .full-span {
        grid-column: auto;
    }

    .match-summary {
        grid-template-columns: 1fr;
    }

    .ma-hua-ku-grid,
    .relationship-indicators {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .match-filter {
        grid-template-columns: 1fr 1fr;
    }

    .free-match-pair-fields {
        grid-template-columns: 1fr;
    }

    .free-match-pair-symbol {
        min-height: auto;
    }

    .free-match-content-gate {
        align-items: stretch;
        flex-direction: column;
    }

    .free-match-content-gate .button,
    .free-match-unavailable-panel .button {
        width: 100%;
    }

    .focus-result-grid,
    .focus-detail-panel .focus-detail-grid,
    .profile-key-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strength-summary-grid,
    .strength-trigger-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strength-rule-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strength-condition-grid {
        grid-template-columns: 1fr;
    }

    .strength-case-visual {
        grid-template-columns: 1fr;
    }

    .relationship-filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .shell {
        width: min(100% - 22px, 1380px);
        padding-top: 22px;
    }

    .dashboard-grid-single .profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero h1 {
        font-size: 32px;
    }

    .profile-detail-hero {
        gap: 14px;
        margin-bottom: 18px;
        padding: 10px 0 18px;
    }

    .profile-detail-hero > div:first-child {
        text-align: center;
    }

    .profile-detail-hero .eyebrow {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .profile-detail-hero h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    .profile-detail-hero .meta-line {
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.6;
    }

    .profile-detail-hero .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
    }

    .profile-detail-hero .hero-actions > .button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .profile-detail-hero .hero-actions .button {
        min-height: 48px;
        padding: 10px 8px;
        font-size: 15px;
    }

    .form-grid,
    .filter-bar,
    .relationship-filter,
    .relationship-form-grid,
    .user-create-grid {
        grid-template-columns: 1fr;
    }

    .insight-grid,
    .ma-hua-ku-grid,
    .match-baseline-grid,
    .match-current-grid,
    .relationship-indicators,
    .match-dimension-grid {
        grid-template-columns: 1fr;
    }

    .insight-card,
    .match-baseline-card,
    .match-current-card,
    .match-dimension-card {
        padding: 14px;
    }

    .insight-card header,
    .match-layer-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .compact-chart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-switch {
        grid-template-columns: 38px minmax(86px, 1fr) 38px;
        width: 100%;
    }

    .basic-info-card-grid,
    .focus-grid,
    .focus-result-grid,
    .focus-detail-grid,
    .focus-detail-panel .focus-detail-grid,
    .profile-key-grid,
    .strength-summary-grid,
    .strength-trigger-grid {
        grid-template-columns: 1fr;
    }

    .strength-rule-list {
        grid-template-columns: 1fr;
    }

    .strength-case-image {
        width: 260px;
    }

    .strength-case-visual {
        justify-items: center;
    }

    .strength-board-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .base-pan-bazi {
        --bazi-label-width: 36px;
        --bazi-min-column: 0px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 6px;
        gap: 4px;
    }

    .base-pan-bazi .bazi-row,
    .base-pan-bazi .bazi-pillar-labels {
        grid-template-columns: repeat(4, minmax(var(--bazi-min-column), 1fr)) var(--bazi-label-width);
        gap: 4px;
    }

    .chart-panel {
        padding: 16px 8px;
    }

    .chart-panel .paipan-table-wrap {
        padding: 0;
        overflow-x: visible;
    }

    .base-pan-bazi .labelTxt {
        width: var(--bazi-label-width);
        max-width: var(--bazi-label-width);
        padding: 4px 2px;
        font-size: 11px;
        line-height: 1.15;
        writing-mode: vertical-rl;
        text-orientation: upright;
    }

    .base-pan-bazi .bazi-column-title {
        min-height: 34px;
        padding: 5px 2px;
        font-size: 13px;
    }

    .base-pan-bazi .bazi-MainStar-content {
        min-height: 66px;
        padding: 6px 2px;
    }

    .bazi-vertical-word ins {
        font-size: 19px;
    }

    .bazi-FourPillars-GanZhi {
        min-height: 112px;
        gap: 8px;
        padding: 8px 2px;
    }

    .bazi-FourPillars-GanZhi span {
        gap: 2px;
    }

    .bazi-glyph.large {
        min-width: 32px;
        min-height: 32px;
        font-size: 32px;
    }

    .bazi-FourPillars-GanZhi small {
        font-size: 11px;
    }

    .bazi-mini-list {
        min-height: 54px;
        gap: 1px;
        padding: 6px 2px;
    }

    .bazi-SecondaryStars .bazi-mini-list {
        min-height: 70px;
    }

    .text-writing-mode-vertical {
        min-width: 14px;
        min-height: 20px;
    }

    .bazi-Hidden .text-writing-mode-vertical {
        font-size: 15px;
    }

    .bazi-SecondaryStars .text-writing-mode-vertical {
        font-size: 12px;
    }

    .paipan-card-board {
        min-width: 780px;
    }

    .paipan-main-star {
        font-size: 20px;
    }

    .paipan-pillar-cell .large {
        min-width: 46px;
        min-height: 46px;
        font-size: 42px;
    }

    .luck-card-board {
        min-width: 820px;
    }

    .explore-head h1 {
        font-size: 30px;
    }

    .explore-head p {
        font-size: 15px;
    }

    .element-orbit span {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .radio-row {
        flex-wrap: wrap;
    }

    .today-flow div,
    .relationship-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .today-flow strong,
    .today-flow .today-focus strong {
        max-width: 100%;
        text-align: left;
    }

    .relationship-item .row-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .day-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.daily-hero .meta-line {
    margin-top: 8px;
}

.daily-filter-bar {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.daily-date-switch {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: -6px 0 22px;
}

.daily-date-switch .button {
    min-width: 48px;
}

.daily-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 18px;
    align-items: stretch;
}

.daily-conclusion-card,
.daily-style-card {
    min-width: 0;
    height: 100%;
}

.daily-overview-grid .section-title span,
.daily-relationship-panel > .section-title span {
    font-family: var(--font-heavy);
    font-size: 20px;
    line-height: 1.35;
}

.daily-overview-grid .section-title small,
.daily-relationship-panel > .section-title small {
    font-size: 14px;
    line-height: 1.55;
}

.daily-conclusion-card {
    position: relative;
    overflow: hidden;
}

.daily-conclusion-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
    content: "";
}

.daily-conclusion-card.tone-risk::before {
    background: #b85b4b;
}

.daily-conclusion-card.tone-neutral::before {
    background: #9a9489;
}

.daily-conclusion-card h2 {
    margin: 12px 0 14px;
    font-family: var(--font-heavy);
    font-size: 25px;
    line-height: 1.5;
}

.daily-conclusion-card p,
.daily-style-card p {
    font-size: 17px;
    line-height: 1.8;
}

.daily-style-card p {
    margin: 0 0 12px;
}

.daily-score-line {
    display: inline-flex;
    margin-top: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #edf4f2;
    color: var(--primary-strong);
    font-family: var(--font-heavy);
    font-weight: 850;
}

.daily-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 16px;
}

.daily-swatches span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heavy);
    font-size: 17px;
    font-weight: 800;
}

.daily-swatches i {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid rgba(38, 31, 20, .16);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .42);
}

.daily-style-card > small,
.daily-style-card .muted {
    color: var(--muted);
}

.daily-style-card > small {
    display: block;
    font-size: 14px;
    line-height: 1.7;
}

.daily-facts-panel {
    margin-top: 18px;
}

.daily-guidance-panel {
    margin-top: 18px;
}

.daily-relationship-panel {
    margin-top: 18px;
}

.daily-relationship-panel .bazi-parent-child-guide > header {
    padding: 15px 18px;
}

.daily-relationship-panel .bazi-parent-child-guide > header strong {
    font-family: var(--font-heavy);
    font-size: 18px;
    line-height: 1.4;
}

.daily-relationship-panel .bazi-parent-child-guide > header span {
    font-size: 14px;
}

.daily-relationship-panel .bazi-parent-child-table > div {
    gap: 9px;
    padding: 18px 20px;
}

.daily-relationship-panel .bazi-parent-child-table span {
    font-family: var(--font-heavy);
    font-size: 14px;
    line-height: 1.45;
}

.daily-relationship-panel .bazi-parent-child-table p {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
}

.daily-relationship-panel .bazi-parent-child-table small,
.daily-relationship-panel .bazi-parent-child-table em {
    font-size: 15px;
    line-height: 1.75;
}

.daily-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.daily-guidance-grid article {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.daily-guidance-grid .daily-guidance-steps {
    grid-column: 1 / -1;
    padding: 20px;
}

.daily-guidance-grid h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.daily-guidance-grid p,
.daily-guidance-grid li,
.daily-task-copy strong,
.daily-task-copy small {
    line-height: 1.75;
}

.daily-guidance-grid p,
.daily-guidance-grid ol {
    margin: 0;
}

.daily-guidance-grid ol {
    padding-left: 22px;
}

.daily-guidance-grid li + li {
    margin-top: 8px;
}

.daily-task-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.daily-task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    cursor: default;
}

.daily-task.is-checkable {
    cursor: pointer;
}

.daily-task:has(input:checked) {
    border-color: rgba(47, 101, 92, .42);
    background: rgba(227, 240, 237, .62);
}

.daily-task input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--primary);
}

.daily-task-marker {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(49, 93, 88, .1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.daily-task-copy,
.daily-task-copy strong,
.daily-task-copy small {
    display: block;
    min-width: 0;
}

.daily-task-time {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.daily-task-copy small {
    margin-top: 8px;
    color: var(--muted);
}

.daily-task:has(input:checked) .daily-task-copy strong {
    color: var(--muted);
    text-decoration: line-through;
}

.daily-guidance-completion ul {
    margin: 0;
    padding-left: 20px;
}

.calendar-dialog-task-list {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.calendar-dialog-task-list > div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.calendar-dialog-task-list strong {
    color: var(--primary);
    font-size: 12px;
}

.calendar-dialog-task-list small {
    color: var(--muted);
}

.daily-facts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.daily-fact {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 253, 248, .72);
}

.daily-fact span,
.daily-fact strong {
    display: block;
}

.daily-fact span {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.daily-fact strong {
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.daily-signal-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.daily-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.daily-signal-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f5f2eb;
    color: #4f5862;
}

.daily-signal-card.is-qualified {
    background: #fffdf8;
    color: var(--ink);
    box-shadow: inset 3px 0 0 var(--primary);
}

.daily-signal-card.is-qualified.tone-risk {
    box-shadow: inset 3px 0 0 #b85b4b;
}

.daily-signal-card header,
.calendar-dialog-signal-grid article header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.daily-signal-card h3 {
    margin: 0;
    font-size: 17px;
}

.daily-signal-card header span,
.calendar-dialog-signal-grid article header span {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 850;
}

.daily-signal-card p {
    margin: 10px 0 0;
    line-height: 1.7;
}

.daily-signal-card details,
.calendar-dialog-signal-grid details {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.daily-signal-card summary,
.calendar-dialog-signal-grid summary {
    cursor: pointer;
    color: var(--primary-strong);
    font-weight: 850;
}

.calendar-panel {
    padding: 18px;
}

.calendar-legend {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9a9489;
}

.calendar-legend i.good {
    background: var(--primary);
}

.calendar-legend i.risk {
    background: #b85b4b;
}

.calendar-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    gap: 8px;
    min-width: 760px;
}

.calendar-weekday {
    padding: 8px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    font-weight: 850;
}

.calendar-blank,
.calendar-day {
    min-height: 116px;
}

.calendar-day {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.calendar-day::after {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9a9489;
    content: "";
}

.calendar-day.tone-good::after {
    background: var(--primary);
}

.calendar-day.tone-risk::after {
    background: #b85b4b;
}

.calendar-day:hover {
    z-index: 1;
    border-color: rgba(49, 93, 88, .45);
    box-shadow: 0 10px 22px rgba(38, 31, 20, .1);
    transform: translateY(-2px);
}

.calendar-day:focus-visible {
    outline: 3px solid rgba(49, 93, 88, .2);
    outline-offset: 2px;
}

.calendar-day.is-today {
    border-color: var(--primary);
    background: #edf4f2;
    box-shadow: inset 0 0 0 1px var(--primary);
}

.calendar-day.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(49, 93, 88, .18);
}

body.dialog-open {
    overflow: hidden;
}

.calendar-day-number {
    font-size: 14px;
    font-weight: 850;
}

.calendar-day em {
    position: absolute;
    top: 8px;
    right: 26px;
    color: var(--primary-strong);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.calendar-day strong {
    margin-top: auto;
    font-size: 20px;
}

.calendar-day small {
    color: var(--muted);
    line-height: 1.35;
}

.daily-calendar-dialog {
    position: fixed;
    inset: 16px;
    width: min(920px, calc(100vw - 32px));
    max-width: 920px;
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(20, 24, 23, .22);
}

.daily-calendar-dialog.is-open {
    z-index: 1000;
    box-shadow: 0 0 0 100vmax rgba(20, 24, 23, .42), 0 24px 70px rgba(20, 24, 23, .22);
}

.daily-calendar-dialog::backdrop {
    background: rgba(20, 24, 23, .42);
}

.calendar-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.calendar-dialog-head h2 {
    margin: 2px 0 0;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

#calendar-dialog-content {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
}

.calendar-dialog-conclusion,
.calendar-dialog-guidance,
.calendar-dialog-style,
.calendar-dialog-signals {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.calendar-dialog-conclusion {
    box-shadow: inset 3px 0 0 var(--primary);
}

.calendar-dialog-conclusion.tone-risk {
    box-shadow: inset 3px 0 0 #b85b4b;
}

.calendar-dialog-conclusion.tone-neutral {
    box-shadow: inset 3px 0 0 #9a9489;
}

.calendar-dialog-conclusion h3,
.calendar-dialog-style h3,
.calendar-dialog-signals h3 {
    margin: 0 0 10px;
}

.calendar-dialog-conclusion p,
.calendar-dialog-guidance p,
.calendar-dialog-style p {
    margin: 8px 0 0;
    line-height: 1.7;
}

.calendar-dialog-guidance h3 {
    margin: 0 0 10px;
}

.calendar-dialog-guidance ol {
    margin: 0;
    padding-left: 22px;
}

.calendar-dialog-guidance li {
    line-height: 1.7;
}

.calendar-dialog-guidance li + li {
    margin-top: 6px;
}

.calendar-dialog-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.calendar-dialog-guidance-grid p {
    min-width: 0;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f5f2eb;
    overflow-wrap: anywhere;
}

.calendar-dialog-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.calendar-dialog-facts div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f5f2eb;
}

.calendar-dialog-facts span,
.calendar-dialog-facts strong {
    display: block;
}

.calendar-dialog-facts span {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.calendar-dialog-facts strong {
    overflow-wrap: anywhere;
}

.calendar-dialog-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.calendar-dialog-signal-grid article {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f5f2eb;
}

.calendar-dialog-signal-grid article.is-qualified {
    background: #fff;
    box-shadow: inset 3px 0 0 var(--primary);
}

.calendar-dialog-signal-grid article.is-qualified.tone-risk {
    box-shadow: inset 3px 0 0 #b85b4b;
}

.calendar-dialog-signal-grid p {
    margin: 8px 0 0;
    line-height: 1.6;
}

.calendar-dialog-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 22px 22px;
}

.bazi-subscriber-gate {
    display: grid;
    justify-items: center;
    width: min(720px, 100%);
    margin: clamp(28px, 7vh, 88px) auto;
    padding: clamp(30px, 6vw, 64px);
    text-align: center;
}

.bazi-locked-feature-preview {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: 10px;
}

.bazi-locked-feature-preview::after {
    content: none;
}

.bazi-locked-preview-content,
.calendar-dialog-locked-preview {
    filter: blur(4px);
    opacity: .72;
    pointer-events: none;
    user-select: none;
}

.bazi-locked-preview-content {
    display: grid;
    gap: 22px;
    padding: 4px;
    transform: scale(.995);
    transform-origin: top center;
}

.bazi-daily-locked-preview .bazi-locked-preview-content {
    filter: none;
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
    transform: none;
}

.bazi-daily-locked-preview .bazi-daily-pro-only {
    filter: blur(4px);
    opacity: .68;
    pointer-events: none;
    user-select: none;
}

.bazi-daily-locked-preview .bazi-locked-feature-overlay {
    padding-top: clamp(500px, 54vw, 760px);
}

.bazi-trend-locked-preview .bazi-locked-preview-content {
    gap: 14px;
}

.bazi-trend-locked-preview .bazi-locked-feature-overlay {
    padding-top: clamp(76px, 9vw, 118px);
}

.bazi-trend-locked-preview .bazi-subscriber-gate {
    width: min(560px, 100%);
    padding: clamp(24px, 4vw, 36px);
}

.bazi-locked-feature-overlay {
    position: absolute;
    z-index: 3;
    inset: 0;
    padding: clamp(90px, 13vw, 180px) 24px 24px;
    pointer-events: none;
}

.bazi-locked-feature-overlay .bazi-subscriber-gate {
    position: sticky;
    top: clamp(20px, 10vh, 90px);
    width: min(620px, 100%);
    margin: 0;
    margin-inline: auto;
    padding: clamp(28px, 5vw, 48px);
    border-color: rgba(197, 178, 140, .72);
    background: rgba(255, 253, 248, .94);
    box-shadow: 0 22px 60px rgba(34, 41, 38, .18);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.bazi-subscriber-gate-icon,
.calendar-dialog-subscription-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 1px solid #c9b07b;
    border-radius: 50%;
    background: #f6ecda;
    color: #7f5a1d;
}

.bazi-subscriber-gate-icon::before,
.calendar-dialog-subscription-icon::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 50%;
    width: 25px;
    height: 20px;
    border: 3px solid currentColor;
    border-radius: 4px;
    background:
        radial-gradient(circle at 50% 42%, currentColor 0 2.5px, transparent 3px),
        linear-gradient(currentColor, currentColor) center 70% / 3px 7px no-repeat;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.bazi-subscriber-gate-icon::after,
.calendar-dialog-subscription-icon::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 17px;
    height: 17px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 11px 11px 0 0;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.bazi-subscriber-gate .eyebrow {
    margin: 20px 0 6px;
}

.bazi-subscriber-gate h1,
.bazi-subscriber-gate h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
}

.bazi-subscriber-gate > p:not(.eyebrow) {
    max-width: 570px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.bazi-subscriber-gate-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.calendar-dialog-locked-wrap {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdf8;
}

.calendar-dialog-locked-preview {
    display: grid;
    gap: 14px;
    padding: 18px;
    transform: scale(.995);
    transform-origin: top center;
}

.calendar-dialog-subscription-gate {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    width: min(600px, calc(100% - 48px));
    align-content: center;
    padding: clamp(28px, 5vw, 48px);
    border: 1px solid rgba(197, 178, 140, .72);
    border-radius: 8px;
    background: rgba(255, 253, 248, .94);
    box-shadow: 0 20px 54px rgba(34, 41, 38, .2);
    backdrop-filter: blur(10px);
    text-align: center;
    transform: translate(-50%, -50%);
}

.calendar-dialog-subscription-gate h3 {
    margin: 20px 0 8px;
    font-size: clamp(22px, 3vw, 30px);
}

.calendar-dialog-subscription-gate p {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
}

.bazi-subscription-dialog {
    position: fixed;
    inset: 18px;
    width: min(960px, calc(100vw - 36px));
    max-width: 960px;
    max-height: calc(100vh - 36px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 26px 80px rgba(20, 24, 23, .26);
}

.bazi-subscription-dialog.is-open {
    z-index: 1100;
    box-shadow: 0 0 0 100vmax rgba(20, 24, 23, .46), 0 26px 80px rgba(20, 24, 23, .26);
}

.bazi-subscription-dialog::backdrop {
    background: rgba(20, 24, 23, .46);
    backdrop-filter: blur(2px);
}

.bazi-subscription-dialog-head {
    position: sticky;
    z-index: 3;
    top: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 253, 248, .97);
    backdrop-filter: blur(10px);
}

.bazi-subscription-dialog-head > div {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.bazi-subscription-dialog-head > .icon-button {
    grid-column: 3;
    justify-self: end;
}

.bazi-subscription-dialog-head h2 {
    margin: 4px 0 8px;
    font-size: clamp(27px, 4vw, 40px);
}

.bazi-subscription-dialog-head > div > p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.bazi-plan-offer-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 28px 0;
}

.bazi-plan-offer-summary > span {
    display: grid;
    gap: 5px;
    padding: 15px 16px;
    border: 1px solid #d9c7a5;
    border-radius: 8px;
    background: #fff8e9;
    color: var(--muted);
    text-align: center;
    line-height: 1.45;
}

.bazi-plan-offer-summary strong {
    color: var(--primary-strong);
}

.bazi-plan-comparison {
    margin: 24px 28px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdf8;
}

.bazi-plan-comparison-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(150px, .8fr) minmax(210px, 1fr);
    align-items: stretch;
}

.bazi-plan-comparison-row + .bazi-plan-comparison-row {
    border-top: 1px solid var(--line);
}

.bazi-plan-comparison-row > * {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 15px 17px;
    line-height: 1.5;
}

.bazi-plan-comparison-row > * + * {
    border-left: 1px solid var(--line);
}

.bazi-plan-comparison-row > :nth-child(2) {
    color: var(--muted);
}

.bazi-plan-comparison-row > :nth-child(3) {
    background: #edf4f1;
    color: var(--primary-strong);
    font-family: var(--font-heavy, inherit);
}

.bazi-plan-status-cell {
    justify-content: center;
    text-align: center;
}

.bazi-plan-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 28px;
    min-height: 28px;
}

.bazi-plan-status > i {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: currentColor;
}

.bazi-plan-status.is-included > i {
    border: 2px solid currentColor;
    border-radius: 50%;
}

.bazi-plan-status.is-unavailable {
    color: #9b5b50;
}

.bazi-plan-status.is-unavailable > i::before,
.bazi-plan-status.is-unavailable > i::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 1px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.bazi-plan-status.is-unavailable > i::before {
    transform: rotate(45deg);
}

.bazi-plan-status.is-unavailable > i::after {
    transform: rotate(-45deg);
}

.bazi-plan-status.is-partial {
    color: #a8751c;
}

.bazi-plan-status.is-partial > i {
    width: 0;
    height: 0;
    flex-basis: 0;
    border-right: 10px solid transparent;
    border-bottom: 18px solid currentColor;
    border-left: 10px solid transparent;
}

.bazi-plan-status[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 9px);
    left: 50%;
    width: max-content;
    max-width: 150px;
    padding: 6px 9px;
    border-radius: 5px;
    background: #283d38;
    color: #fff;
    font-family: var(--font-medium, inherit);
    font-size: 12px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease;
}

.bazi-plan-status[data-tooltip]:hover::after,
.bazi-plan-status[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bazi-plan-comparison-header {
    background: #f3eee5;
}

.bazi-plan-comparison-header > * {
    min-height: 74px;
    font-size: 20px;
    justify-content: center;
    text-align: center;
}

.bazi-plan-comparison-header .is-subscriber {
    display: flex;
    gap: 8px;
    background: var(--primary);
    color: #fff;
}

.bazi-plan-comparison-header .is-subscriber span {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f0dfbf;
    color: #5e4422;
    font-size: 12px;
}

.bazi-subscription-dialog-actions {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 20px 34px;
    border-top: 1px solid var(--line);
    background: rgba(255, 253, 248, .97);
    backdrop-filter: blur(10px);
}

.bazi-subscription-dialog-actions > div {
    display: grid;
    gap: 2px;
    margin: 0;
}

.bazi-subscription-dialog-actions > div span {
    color: var(--muted);
    font-size: 14px;
}

.bazi-subscription-dialog-actions .bazi-subscription-dialog-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

@media (max-width: 620px) {
    .bazi-subscriber-gate {
        margin: 18px auto;
        padding: 30px 20px;
    }

    .bazi-subscriber-gate > p:not(.eyebrow),
    .calendar-dialog-subscription-gate p {
        font-size: 16px;
    }

    .bazi-subscriber-gate-actions,
    .bazi-subscriber-gate-actions .button {
        width: 100%;
    }

    .bazi-locked-feature-overlay {
        padding: 76px 14px 14px;
    }

    .bazi-locked-feature-overlay .bazi-subscriber-gate {
        top: 72px;
        margin: 0;
        margin-inline: auto;
        padding: 28px 18px;
    }

    .calendar-dialog-locked-wrap {
        min-height: 720px;
    }

    .calendar-dialog-locked-preview {
        padding: 12px;
    }

    .calendar-dialog-subscription-gate {
        top: 44%;
        width: calc(100% - 24px);
        padding: 28px 18px;
    }

    .bazi-subscription-dialog {
        inset: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .bazi-subscription-dialog-head {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 8px;
        padding: 20px 18px;
    }

    .bazi-subscription-dialog-head h2 {
        font-size: 28px;
    }

    .bazi-subscription-dialog-head > div > p:last-child {
        font-size: 15px;
    }

    .bazi-plan-comparison {
        margin: 16px;
    }

    .bazi-plan-offer-summary {
        grid-template-columns: 1fr;
        margin: 16px 16px 0;
    }

    .bazi-plan-comparison-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bazi-plan-comparison-row > :first-child {
        grid-column: 1 / -1;
        padding-bottom: 9px;
        border-bottom: 1px dashed var(--line);
        background: #f7f3ec;
        font-family: var(--font-heavy, inherit);
    }

    .bazi-plan-comparison-row > :nth-child(2),
    .bazi-plan-comparison-row > :nth-child(3) {
        min-height: 74px;
        padding-top: 30px;
        border-left: 0;
        position: relative;
    }

    .bazi-plan-status-cell {
        justify-content: center;
    }

    .bazi-plan-comparison-row > :nth-child(3) {
        border-left: 1px solid var(--line);
    }

    .bazi-plan-comparison-row:not(.bazi-plan-comparison-header) > :nth-child(2)::before,
    .bazi-plan-comparison-row:not(.bazi-plan-comparison-header) > :nth-child(3)::before {
        position: absolute;
        top: 9px;
        left: 17px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
    }

    .bazi-plan-comparison-row:not(.bazi-plan-comparison-header) > :nth-child(2)::before {
        content: "免費版";
    }

    .bazi-plan-comparison-row:not(.bazi-plan-comparison-header) > :nth-child(3)::before {
        content: "PRO 訂閱版";
        color: var(--primary-strong);
    }

    .bazi-plan-comparison-header > :first-child {
        display: none;
    }

    .bazi-plan-comparison-header > :nth-child(2),
    .bazi-plan-comparison-header > :nth-child(3) {
        min-height: 64px;
        padding: 13px;
        justify-content: center;
        border-bottom: 0;
    }

    .bazi-subscription-dialog-actions {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .bazi-subscription-dialog-actions > div {
        margin: 0;
        text-align: left;
    }

    .bazi-subscription-dialog-actions .bazi-subscription-dialog-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .bazi-subscription-dialog-actions .button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 1080px) {
    .daily-hero {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .daily-hero > div:first-child,
    .daily-hero .hero-actions {
        width: 100%;
    }

    .daily-hero .hero-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .daily-hero .hero-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        white-space: nowrap;
    }
}

@media (max-width: 920px) {
    .daily-filter-bar,
    .daily-overview-grid {
        grid-template-columns: 1fr;
    }

    .daily-filter-bar button {
        justify-self: center;
    }

    .daily-facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-guidance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-task-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .daily-hero {
        gap: 16px;
        margin-bottom: 18px;
        padding: 18px 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .daily-hero .eyebrow {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .daily-hero h1 {
        max-width: none;
        font-size: clamp(29px, 9vw, 36px);
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .daily-hero .meta-line {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.65;
    }

    .daily-hero .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
    }

    .daily-hero .hero-actions .button:first-child {
        grid-column: 1 / -1;
    }

    .daily-hero .hero-actions .button {
        min-height: 48px;
        padding: 10px 8px;
        font-size: 15px;
    }

    .daily-facts-grid,
    .daily-signal-grid,
    .calendar-dialog-facts,
    .calendar-dialog-signal-grid {
        grid-template-columns: 1fr;
    }

    .daily-guidance-grid,
    .calendar-dialog-guidance-grid {
        grid-template-columns: 1fr;
    }

    .daily-task-list {
        grid-template-columns: 1fr;
    }

    .daily-guidance-grid .daily-guidance-steps {
        grid-row: auto;
    }

    .daily-signal-section,
    .calendar-panel {
        padding: 15px;
    }

    .daily-conclusion-card h2 {
        font-size: 22px;
    }

    .daily-overview-grid .section-title span,
    .daily-relationship-panel > .section-title span {
        font-size: 18px;
    }

    .daily-conclusion-card p,
    .daily-style-card p,
    .daily-relationship-panel .bazi-parent-child-table p {
        font-size: 16px;
    }

    .daily-relationship-panel .bazi-parent-child-table > div {
        padding: 16px;
    }

    .daily-relationship-panel .bazi-parent-child-table span {
        font-size: 13px;
    }

    .daily-date-switch {
        flex-wrap: wrap;
    }

    .calendar-dialog-head,
    #calendar-dialog-content {
        padding: 16px;
    }

    .daily-calendar-dialog {
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        overscroll-behavior: contain;
    }

    .calendar-dialog-head h2 {
        font-size: 20px;
    }

    .calendar-dialog-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 12px 16px max(16px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: var(--surface);
    }

    .calendar-dialog-actions .button {
        flex: 1 1 150px;
    }
}

/* Lenormand result: clearer reading hierarchy and balanced columns */
.lenormand-reading-title span {
    font-family: var(--font-heavy);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.35;
}

.lenormand-reading-title small {
    font-size: 16px;
    line-height: 1.65;
}

.lenormand-analysis {
    border-color: #d8cfc1;
    border-radius: 12px;
    color: #26332f;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.82;
}

.lenormand-conclusion {
    padding: 32px clamp(26px, 3vw, 42px);
    background: linear-gradient(135deg, #f1e8d8 0%, #eee4d2 100%);
}

.lenormand-conclusion > span {
    font-family: var(--font-guidance-label);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.4;
}

.lenormand-conclusion h2 {
    max-width: 1420px;
    margin: 8px 0 10px;
    font-family: var(--font-heavy);
    font-size: clamp(27px, 2vw, 32px);
    font-weight: 900;
    line-height: 1.48;
}

.lenormand-conclusion p {
    max-width: 1480px;
    color: #3f4945;
    font-size: 18px;
    line-height: 1.85;
}

.lenormand-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 24px 28px 30px;
    background: #faf8f3;
}

.lenormand-analysis-grid > section,
.lenormand-analysis-grid > section:nth-child(odd),
.lenormand-analysis-grid > section:nth-child(even),
.lenormand-analysis-grid > section:nth-child(n+3) {
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid #dfd7ca;
    border-radius: 11px;
    background: #fffdf9;
    box-shadow: 0 5px 16px rgba(50, 42, 30, .035);
}

.lenormand-analysis-grid > .lenormand-analysis-panel--wide {
    grid-column: 1 / -1;
}

.lenormand-analysis-grid h3 {
    margin: 0 0 16px;
    color: #21312d;
    font-family: var(--font-heavy);
    font-size: 21px;
    font-weight: 900;
    line-height: 1.4;
}

.lenormand-analysis-grid p,
.lenormand-analysis-grid li {
    color: #303d38;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.82;
}

.lenormand-analysis-grid ul {
    gap: 12px;
    padding-left: 25px;
}

.lenormand-analysis-grid li::marker {
    color: var(--primary);
}

.lenormand-cautions-panel li::marker {
    color: var(--accent);
}

#lenormand-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.lenormand-flow-item,
.lenormand-flow-item + .lenormand-flow-item {
    min-width: 0;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid #e1d9cc;
    border-radius: 9px;
    background: #fcfaf5;
}

.lenormand-flow-item h4 {
    flex-wrap: wrap;
    gap: 8px 11px;
    margin-bottom: 9px;
}

.lenormand-flow-item h4 span {
    color: #66716d;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.lenormand-flow-item h4 strong {
    color: #1f2e2a;
    font-family: var(--font-heavy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
}

.lenormand-flow-role {
    margin-bottom: 9px !important;
    color: #9d542c !important;
    font-family: var(--font-guidance-label) !important;
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1.5 !important;
}

.lenormand-flow-relevance {
    margin-top: 12px !important;
    padding: 12px 14px;
    color: #2f403b !important;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.78 !important;
}

#lenormand-flow > .lenormand-pair-list,
#lenormand-flow > .lenormand-reading-methods {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 18px 20px;
    border: 1px dashed #d2c7b6;
    border-radius: 9px;
    background: #f8f3e9;
}

@media (min-width: 761px) {
    .lenormand-flow-panel[data-card-count="3"] > h3,
    #lenormand-flow[data-card-count="3"] {
        width: min(100%, 1160px);
        margin-right: auto;
        margin-left: auto;
    }

    .lenormand-flow-panel[data-card-count="3"] > h3 {
        margin-bottom: 16px;
    }

    #lenormand-flow[data-card-count="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    #lenormand-flow[data-card-count="3"] > .lenormand-flow-item {
        width: 100%;
        height: 100%;
    }
}

.lenormand-pair-list strong,
.lenormand-reading-methods strong {
    font-family: var(--font-heavy);
    font-size: 18px;
    font-weight: 900;
}

.lenormand-pair-list p,
.lenormand-reading-methods li {
    font-size: 17px;
    line-height: 1.78;
}

.lenormand-readable-text {
    white-space: pre-line;
}

.lenormand-emotional-core {
    margin-top: 18px;
    padding: 17px 18px;
}

.lenormand-emotional-core strong {
    margin-bottom: 8px;
    font-family: var(--font-guidance-label);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .025em;
}

.lenormand-emotional-core p,
#lenormand-key-issue,
#lenormand-development,
#lenormand-timing {
    color: #26332f;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.82;
}

.lenormand-key-issue-panel {
    border-top: 4px solid #b88737 !important;
}

.lenormand-development-panel {
    border-top: 4px solid #63817a !important;
}

.lenormand-actions-panel {
    border-top: 4px solid var(--primary) !important;
}

.lenormand-cautions-panel {
    border-top: 4px solid #b85b4b !important;
}

.lenormand-timing-panel {
    border-top: 4px solid #8a7b64 !important;
}

.lenormand-tone-meter {
    max-width: 760px;
    margin: 19px auto 0;
}

.lenormand-tone-meter span {
    padding: 9px 8px;
    font-size: 14px;
}

.lenormand-basis summary {
    padding: 19px 28px;
    font-family: var(--font-heavy);
    font-size: 16px;
    font-weight: 900;
}

.lenormand-basis-row span,
.lenormand-basis-row p {
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 920px) {
    .lenormand-analysis-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }

    .lenormand-analysis-grid > section,
    .lenormand-analysis-grid > section:first-child,
    .lenormand-analysis-grid > section:nth-child(odd),
    .lenormand-analysis-grid > section:nth-child(even) {
        grid-column: 1;
        padding: 21px;
        border: 1px solid #dfd7ca;
    }

    .lenormand-key-issue-panel,
    .lenormand-development-panel,
    .lenormand-actions-panel,
    .lenormand-cautions-panel,
    .lenormand-timing-panel {
        border-top-width: 4px !important;
    }
}

@media (max-width: 620px) {
    .lenormand-reading-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .lenormand-reading-title span {
        font-size: 21px;
    }

    .lenormand-reading-title small {
        font-size: 14px;
    }

    .lenormand-analysis {
        border-radius: 9px;
        font-size: 17px;
        line-height: 1.78;
    }

    .lenormand-conclusion {
        padding: 24px 19px;
    }

    .lenormand-conclusion > span {
        font-size: 13px;
    }

    .lenormand-conclusion h2 {
        font-size: 24px;
        line-height: 1.45;
    }

    .lenormand-conclusion p {
        font-size: 17px;
        line-height: 1.8;
    }

    .lenormand-analysis-grid {
        gap: 11px;
        padding: 12px;
    }

    .lenormand-analysis-grid > section,
    .lenormand-analysis-grid > section:first-child,
    .lenormand-analysis-grid > section:nth-child(odd),
    .lenormand-analysis-grid > section:nth-child(even) {
        padding: 18px 16px;
        border-radius: 9px;
    }

    .lenormand-analysis-grid h3 {
        margin-bottom: 12px;
        font-size: 19px;
    }

    .lenormand-analysis-grid p,
    .lenormand-analysis-grid li,
    .lenormand-emotional-core p,
    #lenormand-key-issue,
    #lenormand-development,
    #lenormand-timing {
        font-size: 17px;
        line-height: 1.78;
    }

    #lenormand-flow {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .lenormand-flow-item,
    .lenormand-flow-item + .lenormand-flow-item {
        padding: 16px;
    }

    .lenormand-flow-item h4 strong {
        font-size: 19px;
    }

    .lenormand-flow-role {
        font-size: 14px !important;
    }

    .lenormand-flow-relevance,
    .lenormand-pair-list p,
    .lenormand-reading-methods li {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    #lenormand-flow > .lenormand-pair-list,
    #lenormand-flow > .lenormand-reading-methods {
        padding: 16px;
    }

    .lenormand-emotional-core {
        padding: 15px;
    }

    .lenormand-basis summary {
        padding: 17px 18px;
        font-size: 15px;
    }

    /* Keep the daily three-card spread compact and visually centered on phones. */
    .lenormand-drawn-grid[data-card-count="3"] {
        gap: 8px;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-drawn-card {
        display: grid;
        grid-template-rows: auto 88px auto minmax(34px, auto);
        align-content: start;
        align-items: center;
        aspect-ratio: auto;
        padding: 8px 6px 7px;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-card-top {
        min-height: 16px;
        font-size: 11px;
        line-height: 1;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-card-visual {
        width: 100%;
        height: 88px;
        margin: 1px 0 0;
        aspect-ratio: auto;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-card-symbol {
        font-size: clamp(50px, 14vw, 60px);
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-card-visual img {
        width: 96%;
        height: 96%;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-card-identity {
        align-self: center;
        margin: 0;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-card-identity strong {
        font-size: 18px;
        line-height: 1.25;
    }

    .lenormand-drawn-grid[data-card-count="3"] .lenormand-position {
        display: flex;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        padding: 5px 1px 0;
        font-size: 10px;
        line-height: 1.35;
        text-wrap: balance;
    }

    /* Phone navigation: fill the last empty menu cell before the system switch. */
    .nav > .nav-logout {
        order: 1;
    }

    .nav > .nav-system-switch {
        order: 2;
    }

    .nav.mobile-switch-fills-gap > .nav-system-switch {
        grid-column: auto;
        width: 100%;
        min-width: 0;
    }

    .nav.mobile-switch-fills-gap > .nav-system-switch a {
        padding-right: 2px;
        padding-left: 2px;
        font-size: 12px;
    }

    /* iOS Safari needs explicit row heights for the right-side paipan labels. */
    .base-pan-bazi .bazi-row > .labelTxt {
        align-self: stretch;
        height: 100%;
        box-sizing: border-box;
    }

    .base-pan-bazi .bazi-MainStar > .labelTxt {
        min-height: 66px;
    }

    .base-pan-bazi .bazi-FourPillars > .labelTxt {
        min-height: 112px;
    }

    .base-pan-bazi .bazi-Hidden > .labelTxt {
        min-height: 54px;
    }

    .base-pan-bazi .bazi-SecondaryStars > .labelTxt {
        min-height: 70px;
    }
}

/* Life timeline: balanced, centered phone layout. */
@media (max-width: 700px) {
    .life-events-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 18px;
        margin-bottom: 20px;
        padding: 10px 0 22px;
        text-align: center;
    }

    .life-events-hero > div:first-child {
        justify-items: center;
        width: 100%;
        gap: 8px;
    }

    .life-events-hero .eyebrow {
        margin-bottom: 2px;
    }

    .life-events-hero h1 {
        max-width: 100%;
        font-size: clamp(34px, 10vw, 42px);
        line-height: 1.16;
        text-wrap: balance;
    }

    .life-events-hero > div:first-child > p:last-child {
        max-width: 31rem;
        font-size: 15px;
        line-height: 1.7;
        text-align: center;
        text-wrap: balance;
    }

    .life-events-hero .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        width: 100%;
        max-width: 430px;
        margin-inline: auto;
    }

    .life-events-hero .hero-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 9px 7px;
        font-size: 14px;
        text-align: center;
    }

    .life-forecast-panel {
        gap: 17px;
        margin-bottom: 26px;
        padding: 20px 12px;
        border-top-width: 4px;
        border-radius: 12px;
    }

    .life-forecast-heading {
        display: grid;
        justify-items: center;
        gap: 0;
        text-align: center;
    }

    .life-forecast-heading > div {
        justify-items: center;
        width: 100%;
        max-width: 34rem;
        gap: 7px;
    }

    .life-forecast-heading h2 {
        font-size: clamp(26px, 8vw, 32px);
        line-height: 1.35;
        text-wrap: balance;
    }

    .life-forecast-heading p {
        font-size: 15px;
        line-height: 1.72;
        text-align: center;
        text-wrap: balance;
    }

    .life-forecast-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 15px 12px;
        border-radius: 10px;
    }

    .life-forecast-controls > label,
    .life-forecast-stage-picker label {
        display: grid;
        gap: 7px;
        width: 100%;
        text-align: left;
    }

    .life-forecast-controls select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        font-size: 15px;
    }

    .life-forecast-stage-picker {
        grid-column: auto;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: end;
        gap: 8px;
        width: 100%;
    }

    .life-forecast-stage-nav {
        width: 44px;
        height: 44px;
    }

    .life-forecast-controls button {
        width: 100%;
        min-height: 46px;
        justify-self: center;
        font-size: 15px;
    }

    .life-forecast-event-context {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 9px;
        padding: 17px 14px;
        text-align: center;
    }

    .life-forecast-event-context > div:nth-child(2) {
        justify-items: center;
        gap: 5px;
        width: 100%;
    }

    .life-forecast-event-context strong {
        line-height: 1.55;
        text-wrap: balance;
    }

    .life-forecast-event-context p,
    .life-forecast-event-context small {
        max-width: 31rem;
        line-height: 1.65;
        text-align: center;
    }

    .life-forecast-event-context > a {
        display: inline-flex;
        grid-column: auto;
        align-items: center;
        justify-content: center;
        justify-self: center;
        width: min(100%, 220px);
        min-height: 40px;
        padding: 8px 14px;
        border: 1px solid #bdd2cc;
        border-radius: 8px;
        background: #fffdf8;
        text-decoration: none;
    }

    .life-forecast-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .life-forecast-summary article {
        place-content: center;
        justify-items: center;
        min-height: 112px;
        padding: 18px 16px 16px;
        text-align: center;
    }

    .life-forecast-summary article::before {
        inset: 0 0 auto;
        width: auto;
        height: 4px;
    }

    .life-forecast-summary strong {
        font-size: 19px;
        text-wrap: balance;
    }

    .life-forecast-summary small {
        max-width: 28rem;
        line-height: 1.6;
        text-wrap: balance;
    }

    .life-forecast-reading-note {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px 15px;
    }

    .life-forecast-reading-note strong {
        white-space: normal;
        text-align: center;
    }

    .life-forecast-reading-note p {
        text-align: left;
    }

    .life-forecast-timeline-panel {
        padding: 16px 9px;
        border-radius: 10px;
    }

    .life-forecast-timeline-panel > .section-title {
        display: grid;
        width: 100%;
        align-items: center;
        justify-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 14px;
        text-align: center;
    }

    .life-forecast-timeline-panel > .section-title > span,
    .life-forecast-timeline-panel > .section-title > small {
        display: block;
        width: 100%;
        text-align: center;
    }

    .life-forecast-timeline-panel > .section-title small {
        line-height: 1.55;
    }

    .life-forecast-timeline {
        gap: 16px;
    }

    .life-forecast-cycle {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 14px 9px;
        border-radius: 11px;
    }

    .life-forecast-cycle > header {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        padding: 0 4px 13px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        text-align: center;
    }

    .life-forecast-cycle > header > div {
        justify-items: center;
    }

    .life-forecast-cycle > header h3 {
        font-size: 22px;
        line-height: 1.4;
        text-wrap: balance;
    }

    .life-forecast-cycle > header p {
        text-align: center;
    }

    .life-forecast-years {
        gap: 12px;
        padding-left: 0;
    }

    .life-forecast-years::before,
    .life-forecast-year::before {
        display: none;
    }

    .life-forecast-year {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 10px;
    }

    .life-forecast-year-marker {
        grid-template-columns: max-content max-content;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        text-align: center;
    }

    .life-forecast-year-marker strong {
        font-size: 21px;
    }

    .life-forecast-year-body {
        gap: 12px;
        padding: 16px 14px;
    }

    .life-forecast-badges {
        justify-content: center;
    }

    .life-forecast-badges span.strength {
        margin-left: 0;
    }

    .life-forecast-year-body h4 {
        font-size: 18px;
        line-height: 1.55;
        text-align: center;
        text-wrap: balance;
    }

    .life-forecast-year-body > p,
    .life-forecast-personal-advice p,
    .life-forecast-year-body details p {
        line-height: 1.75;
        text-align: left;
    }

    .life-forecast-advice,
    .life-forecast-recorded-events {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .life-forecast-advice > strong,
    .life-forecast-personal-advice > strong,
    .life-forecast-recorded-events > strong,
    .life-forecast-year-body details summary {
        text-align: center;
    }

    .life-forecast-recorded-events > div {
        justify-content: center;
    }

    .life-records-standalone-cta {
        align-items: center;
        gap: 16px;
        padding: 21px 17px;
        border-left-width: 1px;
        border-top: 4px solid var(--primary);
        text-align: center;
    }

    .life-records-standalone-cta > div {
        justify-items: center;
    }

    .life-records-standalone-cta h2 {
        font-size: 21px;
        line-height: 1.5;
        text-wrap: balance;
    }

    .life-records-standalone-cta p {
        font-size: 15px;
        line-height: 1.7;
    }

    .life-records-standalone-cta .button {
        width: min(100%, 260px);
        min-height: 44px;
    }
}

/* Clear, system-specific membership management. */
.membership-hero-v2 {
    align-items: center;
}

.membership-system-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid #c9d9d5;
    border-radius: 12px;
    background: #edf4f2;
}

.membership-system-tabs a {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    color: #5f6e69;
    font-weight: 850;
    text-decoration: none;
}

.membership-system-tabs a.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 5px 13px rgba(31, 77, 69, .18);
}

.membership-system-tabs a.is-lenormand:not(.is-active) {
    background: #f0e5ef;
    color: #70456f;
}

.membership-system-tabs a.is-bazi:not(.is-active) {
    background: #e7f0ee;
    color: #315d58;
}

.membership-system-tabs a.is-lenormand.is-active {
    background: #70456f;
    color: #fff;
    box-shadow: 0 5px 13px rgba(81, 49, 80, .2);
}

.membership-system-tabs a.is-bazi.is-active {
    background: #315d58;
    color: #fff;
    box-shadow: 0 5px 13px rgba(31, 77, 69, .18);
}

.membership-current-overview {
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(0, 1.35fr);
    gap: 14px;
    margin-bottom: 20px;
}

.membership-current-plan,
.membership-current-facts article,
.membership-pending-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 10px 26px rgba(47, 42, 32, .055);
}

.membership-current-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding: 22px 24px;
    border-top: 4px solid var(--primary);
}

.membership-current-plan > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.membership-current-plan span,
.membership-current-plan small,
.membership-current-facts span,
.membership-current-facts small {
    color: var(--muted);
}

.membership-current-plan strong {
    color: var(--primary-strong);
    font-size: 25px;
    line-height: 1.35;
}

.membership-status-pill {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: #e7efed;
    color: var(--primary-strong) !important;
    font-size: 13px;
    font-weight: 900;
}

.membership-status-pill.is-free {
    background: #eee9df;
    color: #746b5e !important;
}

.membership-current-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.membership-current-facts article {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    padding: 20px;
}

.membership-current-facts strong {
    font-size: 19px;
}

.membership-current-facts small {
    font-size: 12px;
    line-height: 1.55;
}

.membership-pending-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 18px 22px;
    border-color: #e2cfae;
    background: #fff8ea;
}

.membership-pending-card > div {
    display: grid;
    gap: 5px;
}

.membership-pending-card > div > span {
    color: #9a641c;
    font-size: 13px;
    font-weight: 900;
}

.membership-pending-card small {
    color: var(--muted);
}

.membership-active-control,
.membership-plan-picker,
.membership-coupon-panel,
.membership-simple-comparison,
.membership-records-disclosure {
    margin-bottom: 20px;
    padding: 24px;
}

.membership-active-control,
.membership-plan-picker > header,
.membership-coupon-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.membership-active-control > div,
.membership-plan-picker > header > div,
.membership-coupon-panel > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.membership-active-control h2,
.membership-active-control p,
.membership-plan-picker h2,
.membership-plan-picker p,
.membership-coupon-panel h2,
.membership-coupon-panel p,
.membership-simple-comparison h2,
.membership-simple-comparison p {
    margin: 0;
}

.membership-active-control > div > p:last-child,
.membership-plan-picker > header > div > p:last-child,
.membership-coupon-panel > div > p:last-child {
    color: var(--muted);
    line-height: 1.65;
}

.membership-plan-picker > header {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.membership-billing-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.membership-billing-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 11px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdf8;
}

.membership-billing-card.is-recommended {
    border-color: #9bbeb6;
    background: #f3f8f6;
    box-shadow: 0 10px 24px rgba(37, 83, 74, .08);
}

.membership-billing-card.is-current {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.membership-billing-badge {
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eee9df;
    color: #796b58;
    font-size: 12px;
    font-weight: 900;
}

.membership-billing-card.is-recommended .membership-billing-badge,
.membership-billing-card.is-current .membership-billing-badge {
    background: var(--primary);
    color: #fff;
}

.membership-billing-card h3 {
    margin: 0;
    font-size: 23px;
}

.membership-billing-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.membership-billing-price strong {
    color: var(--primary-strong);
    font-size: 32px;
}

.membership-billing-price del,
.membership-product-price del {
    color: var(--muted);
    font-size: .6em;
    font-weight: 500;
    text-decoration-thickness: 1px;
}

.membership-billing-price span,
.membership-billing-card > small {
    color: var(--muted);
}

.membership-billing-card ul {
    display: grid;
    gap: 8px;
    margin: 4px 0 6px;
    padding: 0;
    list-style: none;
}

.membership-billing-card li {
    position: relative;
    padding-left: 22px;
    line-height: 1.55;
}

.membership-billing-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 900;
}

.membership-billing-card form,
.membership-billing-card form .button,
.membership-billing-card > .button {
    width: 100%;
}

.membership-coupon-panel .membership-coupon-form {
    flex: 1 1 560px;
    max-width: 760px;
    margin: 0;
    padding: 0;
    border-top: 0;
}

.membership-simple-comparison > header {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.membership-simple-comparison > header > p:last-child,
.membership-admin-pricing-note {
    color: var(--muted);
    line-height: 1.65;
}

.membership-admin-pricing-note {
    margin: 18px 0 0;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f7f3eb;
}

.membership-comparison-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.membership-comparison-row {
    display: grid;
    grid-template-columns: minmax(170px, .72fr) minmax(0, 1fr) minmax(0, 1.15fr);
}

.membership-comparison-row + .membership-comparison-row {
    border-top: 1px solid var(--line);
}

.membership-comparison-row > * {
    display: flex;
    min-width: 0;
    min-height: 58px;
    align-items: center;
    padding: 13px 17px;
    line-height: 1.55;
}

.membership-comparison-row > * + * {
    border-left: 1px solid var(--line);
}

.membership-comparison-row > strong {
    background: #f7f3eb;
    color: var(--ink);
    font-size: 14px;
}

.membership-comparison-row > span {
    color: var(--muted);
}

.membership-comparison-row > .is-pro {
    background: #eef6f3;
    color: var(--primary-strong);
    font-weight: 800;
}

.system-lenormand .membership-comparison-row > .is-pro {
    background: #f6f0f6;
    color: #513150;
}

.membership-comparison-header > * {
    min-height: 52px;
    justify-content: center;
    background: #eee7dc;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.membership-comparison-header > .is-pro {
    background: var(--primary);
    color: #fff;
}

.system-lenormand .membership-comparison-header > strong {
    background: #eee8df;
}

.system-lenormand .membership-comparison-header > span:not(.is-pro) {
    background: #e9e2e8;
    color: #513150;
}

.system-lenormand .membership-comparison-header > .is-pro {
    background: #70456f;
    color: #fff;
}

.membership-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.membership-comparison-grid article {
    display: grid;
    gap: 8px;
    padding: 21px;
    background: #fbf8f2;
}

.membership-comparison-grid article + article {
    border-left: 1px solid var(--line);
}

.membership-comparison-grid article.is-pro {
    background: #eef6f3;
}

.membership-comparison-grid span {
    color: #9a641c;
    font-size: 13px;
    font-weight: 900;
}

.membership-comparison-grid strong {
    font-size: 20px;
}

.membership-comparison-grid p {
    color: var(--muted);
    line-height: 1.65;
}

.membership-records-disclosure > summary {
    cursor: pointer;
    color: var(--primary-strong);
    font-size: 16px;
    font-weight: 900;
}

.membership-records-disclosure[open] > summary {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.membership-records-disclosure .membership-record-grid {
    margin: 0;
}

@media (max-width: 900px) {
    .membership-current-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .membership-current-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .membership-active-control,
    .membership-plan-picker > header,
    .membership-coupon-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .membership-coupon-panel .membership-coupon-form {
        flex-basis: auto;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 620px) {
    .membership-hero-v2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        justify-items: center;
        justify-content: center;
        gap: 18px;
        text-align: center;
    }

    .membership-hero-v2 > div:first-child {
        display: grid;
        justify-items: center;
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    .membership-hero-v2 .eyebrow,
    .membership-hero-v2 h1,
    .membership-hero-v2 .meta-line {
        width: 100%;
        text-align: center;
    }

    .membership-system-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: center;
        width: min(100%, 420px);
        margin-inline: auto;
    }

    .membership-system-tabs a {
        min-width: 0;
        padding-inline: 7px;
        font-size: 14px;
    }

    .membership-current-plan {
        align-items: center;
        flex-direction: column;
        padding: 20px 16px;
        text-align: center;
    }

    .membership-current-plan > div {
        justify-items: center;
    }

    .membership-current-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .membership-current-facts article {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 15px 17px;
    }

    .membership-current-facts strong {
        text-align: right;
    }

    .membership-pending-card {
        align-items: stretch;
        flex-direction: column;
        padding: 17px;
        text-align: center;
    }

    .membership-pending-card .button,
    .membership-active-control .button,
    .membership-plan-picker > header .button {
        width: 100%;
    }

    .membership-active-control,
    .membership-plan-picker,
    .membership-coupon-panel,
    .membership-simple-comparison,
    .membership-records-disclosure {
        padding: 19px 15px;
    }

    .membership-active-control,
    .membership-plan-picker > header,
    .membership-coupon-panel,
    .membership-simple-comparison > header {
        text-align: center;
    }

    .membership-billing-options,
    .membership-comparison-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .membership-billing-card {
        justify-items: center;
        padding: 21px 17px;
        text-align: center;
    }

    .membership-billing-card ul {
        justify-self: stretch;
        text-align: left;
    }

    .membership-comparison-grid article {
        justify-items: center;
        padding: 19px 16px;
        text-align: center;
    }

    .membership-comparison-grid article + article {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .membership-comparison-header {
        display: none;
    }

    .membership-comparison-row:not(.membership-comparison-header) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .membership-comparison-row:not(.membership-comparison-header) > strong {
        grid-column: 1 / -1;
        min-height: 46px;
        justify-content: center;
        border-bottom: 1px solid var(--line);
        text-align: center;
    }

    .membership-comparison-row:not(.membership-comparison-header) > span {
        display: grid;
        min-height: 88px;
        align-content: start;
        justify-items: center;
        gap: 7px;
        padding: 14px 11px;
        text-align: center;
    }

    .membership-comparison-row:not(.membership-comparison-header) > span::before {
        color: #9a641c;
        content: attr(data-plan);
        font-size: 11px;
        font-weight: 900;
    }

    .membership-comparison-row:not(.membership-comparison-header) > .is-pro::before {
        color: var(--primary);
    }

    .membership-records-disclosure > summary {
        text-align: center;
    }
}

/* Keep the AI history layout above later shared panel/hero rules. */
.hero.ai-credit-history-hero {
    align-items: center;
    gap: 28px;
}

.panel.ai-credit-history-panel {
    padding: 0;
    overflow: hidden;
}

@media (max-width: 760px) {
    .hero.ai-credit-history-hero {
        align-items: stretch;
    }

    .ai-credit-history-toolbar {
        gap: 16px;
        padding: 18px 15px;
    }

    .ai-credit-history-toolbar h2 {
        font-size: 1.35rem;
        line-height: 1.35;
    }

    .ai-credit-history-toolbar p {
        font-size: .9rem;
        line-height: 1.5;
    }

    .ai-credit-history-filters {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
    }

    .ai-credit-history-filters a {
        min-width: 0;
        padding: 9px 4px;
        font-size: .92rem;
        white-space: nowrap;
    }

    .ai-credit-ledger {
        gap: 12px;
        padding: 12px;
    }

    .ai-credit-ledger-row {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
        grid-template-rows: auto auto auto;
        border-radius: 15px;
        box-shadow: 0 5px 16px rgba(46, 35, 43, .045);
    }

    .ai-credit-ledger-row > * {
        min-height: 78px;
        padding: 12px 13px;
        border: 0 !important;
    }

    .ai-credit-ledger-row > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        border-right: 1px solid var(--line) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .ai-credit-ledger-row > :nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        border-bottom: 1px solid var(--line) !important;
    }

    .ai-credit-ledger-row > :nth-child(3) {
        grid-column: 1;
        grid-row: 2;
        border-right: 1px solid var(--line) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .ai-credit-ledger-row > :nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .ai-credit-ledger-row > .ai-credit-ledger-reason {
        grid-column: 1 / -1;
        grid-row: 3;
        min-height: 0;
        padding: 14px 13px 16px;
    }

    .ai-credit-ledger-row > * > span {
        margin-bottom: 2px;
        font-size: .75rem;
        letter-spacing: .04em;
    }

    .ai-credit-ledger-row time,
    .ai-credit-ledger-row small {
        font-size: .86rem;
        line-height: 1.5;
    }

    .ai-credit-event-badge {
        max-width: 100%;
        padding: 6px 9px;
        font-size: .86rem;
        line-height: 1.4;
        white-space: normal;
    }

    .ai-credit-delta {
        font-size: 1.08rem;
    }

    .ai-credit-ledger-reason strong {
        font-size: .98rem;
        line-height: 1.65;
    }
}
/* Administrator user-view mode */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .65rem 1rem;
    color: #fff;
    background: #8b2f42;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.impersonation-banner form { margin: 0; }
.impersonation-banner button {
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    padding: .35rem .8rem;
    color: #fff;
    background: transparent;
}

.payment-checkout-form {
    gap: 1.25rem;
}
.payment-pending-card {
    padding: 1.15rem;
    border: 1px solid var(--line, #ded5c8);
    border-radius: 14px;
    background: rgba(255,255,255,.4);
}
.payment-pending-card + .payment-pending-card {
    margin-top: 1.25rem;
}
.payment-coupon-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid #dfcfb8;
    border-radius: 12px;
    background: #fbf5ea;
}
.payment-coupon-box > div {
    display: grid;
    gap: .25rem;
}
.payment-coupon-box > div > span {
    color: #ad6427;
    font-size: .9rem;
}
.payment-coupon-box small {
    color: var(--muted, #687080);
}
.payment-coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .65rem;
    margin: 0;
}
.payment-coupon-form label {
    margin: 0;
}
.payment-coupon-form input {
    width: 100%;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.payment-order-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--line, #ded5c8);
}
.payment-order-summary span {
    color: var(--muted, #687080);
}
.payment-filter-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.payment-filter-group legend {
    margin-bottom: .55rem;
    font-weight: 700;
}
.payment-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}
.payment-filter-options label {
    cursor: pointer;
}
.payment-filter-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payment-filter-options span {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 1px solid var(--line, #d8cec0);
    border-radius: 10px;
    background: rgba(255,255,255,.58);
    text-align: center;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.payment-filter-options input:checked + span {
    border-color: #326b64;
    color: #24534e;
    background: #e8f2ef;
    box-shadow: 0 0 0 2px rgba(50,107,100,.13);
}
.payment-filter-options input:focus-visible + span {
    outline: 2px solid #326b64;
    outline-offset: 2px;
}
.payment-conditional-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.payment-conditional-section > .payment-filter-group {
    grid-column: 1 / -1;
}
.payment-conditional-field small {
    display: block;
    margin-top: .35rem;
    color: var(--muted, #687080);
}
.payment-submit-actions {
    justify-content: center;
    margin-top: .25rem;
}
.payment-submit-actions .button {
    min-width: 180px;
}
[hidden] {
    display: none !important;
}

/* Shared administrator control center */
.admin-hub-hero {
    margin-bottom: 1.25rem;
}
.admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.admin-hub-grid + .admin-pending-orders {
    margin-top: 1.75rem;
}
.admin-pending-orders > .section-title {
    margin-bottom: 1.35rem;
}
.admin-pending-orders .table-wrap td,
.admin-pending-orders .table-wrap th {
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.admin-hub-card {
    position: relative;
    display: flex;
    min-height: 270px;
    flex-direction: column;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.admin-hub-card:hover,
.admin-hub-card:focus-visible {
    transform: translateY(-3px);
    border-color: #326b64;
    box-shadow: 0 14px 34px rgba(47, 55, 62, .13);
}
.admin-hub-card-kicker {
    color: #326b64;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.admin-hub-card h2 {
    margin: 0;
}
.admin-hub-card > p {
    margin: 0;
    color: var(--muted, #687080);
    line-height: 1.7;
}
.admin-hub-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: auto;
}
.admin-hub-card-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(50, 107, 100, .09);
    color: #315c57;
}
.admin-hub-card-stats strong {
    font-size: 1.1rem;
}
.admin-hub-card-stats .needs-attention {
    color: #8b2f42;
    background: rgba(139, 47, 66, .1);
}
.admin-hub-card-action {
    margin-top: .25rem;
    color: #326b64;
    font-weight: 800;
}
.admin-hub-card-action::after {
    content: " →";
}

.lenormand-trial-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: min(100%, 1120px);
    margin: 0 auto 30px;
    padding: clamp(28px, 4vw, 44px) clamp(22px, 5vw, 58px);
    overflow: hidden;
    border: 1px solid rgba(50, 107, 100, .24);
    border-top: 5px solid #c89437;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 244, 214, .88), transparent 48%),
        linear-gradient(145deg, rgba(249, 253, 251, .98), rgba(255, 251, 242, .98)),
        var(--surface);
    box-shadow: 0 16px 38px rgba(42, 62, 57, .1);
    text-align: center;
}
.lenormand-trial-banner::after {
    position: absolute;
    right: -52px;
    bottom: -62px;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(200, 148, 55, .16);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.lenormand-trial-banner.is-active {
    border-top-color: var(--primary);
    background:
        radial-gradient(circle at 50% 0, rgba(215, 237, 229, .82), transparent 50%),
        linear-gradient(145deg, #f5fbf8, #fffdf7);
}
.lenormand-trial-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 18px;
    border: 1px solid rgba(200, 148, 55, .5);
    border-radius: 999px;
    background: #fffaf0;
    color: #8c5d14;
    line-height: 1;
    box-shadow: 0 7px 18px rgba(140, 93, 20, .08);
}
.lenormand-trial-badge strong {
    font-size: 26px;
}
.lenormand-trial-badge span {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}
.lenormand-trial-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    min-width: 0;
}
.lenormand-trial-copy .eyebrow,
.lenormand-trial-copy h2,
.lenormand-trial-copy > p:last-child {
    margin: 0;
}
.lenormand-trial-copy h2 {
    margin-top: 8px;
    font-size: clamp(25px, 3vw, 35px);
    line-height: 1.35;
}
.lenormand-trial-copy > p:last-child {
    margin-top: 12px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
}
.lenormand-trial-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    justify-content: center;
    gap: 12px;
    width: min(100%, 470px);
    margin-top: 2px;
}
.lenormand-trial-actions form {
    display: contents;
    margin: 0;
}
.lenormand-trial-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    text-align: center;
}
.lenormand-trial-actions > .button:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 230px;
}

.lenormand-free-guide {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.lenormand-free-guide h2 {
    margin: .35rem 0 .8rem;
}
.lenormand-free-guide ul {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding-left: 1.25rem;
}
.lenormand-free-guide-pro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    align-self: stretch;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(50, 107, 100, .2);
    border-radius: 12px;
    background: rgba(50, 107, 100, .06);
    text-align: center;
}
.lenormand-free-guide-pro strong {
    font-size: 1.08rem;
}
.lenormand-free-guide-pro p {
    margin: 0 0 .25rem;
    color: var(--muted);
    line-height: 1.7;
}
.lenormand-free-guide-pro form {
    display: flex;
    justify-content: center;
    margin: 0;
}
.lenormand-spread-control label,
.lenormand-spread-control label + label {
    border: 0 !important;
    background: rgba(244, 241, 246, .88);
    box-shadow: none;
}
.lenormand-spread-control input + span {
    border: 0 !important;
    outline: 0;
}
.lenormand-spread-control input:disabled + span {
    cursor: not-allowed;
    opacity: .62;
    border: 0;
    background: rgba(244, 241, 246, .72);
}

.lenormand-spread-control input:checked + span,
.lenormand-spread-control input:checked:disabled + span {
    opacity: 1;
    background: var(--primary);
    color: #fff;
    box-shadow: none;
}

.lenormand-spread-control label:hover,
.lenormand-spread-control label.is-ai-recommended {
    border: 0 !important;
    box-shadow: 0 6px 14px rgba(37, 61, 56, .09);
}

.lenormand-recommendation-note {
    width: 100%;
    text-align: center;
}
.lenormand-spread-free-note {
    display: block;
    margin-top: .75rem;
    color: var(--muted);
}
@media (max-width: 760px) {
    .admin-hub-grid {
        grid-template-columns: 1fr;
    }
    .admin-hub-grid + .admin-pending-orders {
        margin-top: 1.25rem;
    }
    .admin-hub-card {
        min-height: 230px;
    }
    .lenormand-free-guide {
        grid-template-columns: 1fr;
    }
    .lenormand-trial-banner {
        gap: 15px;
        margin-bottom: 22px;
        padding: 26px 18px 28px;
        border-radius: 16px;
    }
    .lenormand-trial-badge {
        min-height: 42px;
        padding: 7px 15px;
    }
    .lenormand-trial-badge strong {
        font-size: 23px;
    }
    .lenormand-trial-copy h2 {
        font-size: clamp(23px, 7vw, 29px);
    }
    .lenormand-trial-copy > p:last-child {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.75;
    }
    .lenormand-trial-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }
    .lenormand-trial-actions .button {
        width: 100%;
    }
}
@media (max-width: 680px) {
    .payment-pending-card {
        padding: .8rem;
    }
    .payment-coupon-box {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: .85rem;
    }
    .payment-coupon-form {
        grid-template-columns: 1fr;
    }
    .payment-coupon-form .button {
        width: 100%;
    }
    .payment-filter-options,
    .payment-conditional-section {
        grid-template-columns: 1fr;
    }
}
.account-section-nav {
    display: flex;
    gap: .65rem;
    margin: 0 0 1.25rem;
    padding: .55rem;
    overflow-x: auto;
    border: 1px solid var(--line, #ddd3c4);
    border-radius: 14px;
    background: rgba(255, 253, 248, .9);
}

.account-section-nav a {
    flex: 0 0 auto;
    padding: .7rem 1rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.account-section-nav a:hover,
.account-section-nav a.is-current {
    background: var(--green, #315f58);
    color: #fff;
}

.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.account-plan-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-plan-card-heading,
.account-order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.account-plan-card h2,
.account-order-summary h2 {
    margin: .25rem 0 0;
}

.account-plan-card .button {
    align-self: center;
    margin-top: auto;
}

.account-plan-highlights {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
}

.account-plan-highlight {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .5rem .75rem;
    border: 1px solid #cddbd7;
    border-radius: 999px;
    background: #f2f7f5;
    color: #315f58;
    line-height: 1;
}

.account-plan-highlight small {
    color: #62716d;
    font-size: .78rem;
    font-weight: 750;
}

.account-plan-highlight strong {
    color: inherit;
    font-size: .95rem;
}

.account-plan-savings .account-plan-highlight {
    border-color: #dfcfb5;
    background: #fbf5e9;
    color: #8a5c1f;
}

.account-order-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.account-order-summary > div {
    width: 100%;
}

.payment-digital-consent {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--line, #ddd3c4);
    border-radius: 12px;
    background: #fffaf1;
    line-height: 1.7;
}

.payment-digital-consent input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .25rem;
}

.payment-digital-consent a {
    margin: 0 .15rem;
    color: var(--green, #315f58);
    text-decoration: underline;
}

@media (max-width: 1120px) {
    .account-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-plan-card-dual {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .account-hub-grid {
        grid-template-columns: 1fr;
    }

    .account-plan-card-dual {
        grid-column: auto;
    }

    .account-order-summary {
        align-items: center;
    }
}

.dual-membership-current-plan {
    border-top-color: #a77928;
    background: linear-gradient(135deg, #fffdf8 0%, #f9f4e8 100%);
}

.dual-membership-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
    padding: 24px;
    border-color: #dfc58f;
    background: #fff9eb;
}

.dual-membership-value > div:first-child {
    display: grid;
    gap: 7px;
}

.dual-membership-value h2,
.dual-membership-value p {
    margin: 0;
}

.dual-membership-value p:last-child {
    color: var(--muted);
    line-height: 1.65;
}

.dual-membership-price-note {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 5px;
}

.dual-membership-price-note > span {
    color: #9a641c;
    font-size: 12px;
    font-weight: 900;
}

.dual-membership-price-note > strong {
    color: var(--primary-strong);
    font-size: 32px;
}

.dual-membership-price-note small {
    color: var(--muted);
    font-size: 15px;
}

.dual-membership-picker .membership-billing-card.is-recommended,
.dual-membership-comparison .membership-comparison-row > .is-pro {
    background: #f9f3e5;
}

.dual-membership-comparison .membership-comparison-header > .is-pro {
    background: #8c6a2d;
    color: #fff;
}

.dual-upgrade-card {
    border-top: 4px solid #b9862e;
    background: linear-gradient(135deg, #fffdf8 0%, #f7f1e5 100%);
}

.dual-upgrade-heading,
.dual-upgrade-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dual-upgrade-heading h2,
.dual-upgrade-heading p,
.dual-upgrade-actions p {
    margin: 0;
}

.dual-upgrade-heading h2 {
    margin-bottom: 8px;
}

.dual-upgrade-total {
    min-width: 190px;
    padding: 18px 22px;
    border: 1px solid #d8c39c;
    border-radius: 14px;
    background: rgba(255, 255, 255, .8);
    text-align: center;
}

.dual-upgrade-total span,
.dual-upgrade-total strong {
    display: block;
}

.dual-upgrade-total strong {
    margin-top: 4px;
    color: #9a6415;
    font-size: 2rem;
}

.dual-upgrade-formula {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr) auto
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 22px 0;
}

.dual-upgrade-value,
.dual-upgrade-result {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 10px 14px;
    border: 1px solid #ded4c2;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.dual-upgrade-operator {
    color: #78531e;
    font-family: var(--font-heavy);
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

.dual-upgrade-result {
    border-color: #c89438;
    background: #f3e5c9;
    color: #724a13;
}

@media (max-width: 620px) {
    .dual-membership-value {
        align-items: stretch;
        flex-direction: column;
        padding: 20px 16px;
        text-align: center;
    }

    .dual-membership-price-note {
        justify-items: center;
    }

    .dual-upgrade-heading,
    .dual-upgrade-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dual-upgrade-total {
        min-width: 0;
    }

    .dual-upgrade-formula {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .dual-upgrade-operator {
        justify-self: center;
    }

    .dual-upgrade-actions form,
    .dual-upgrade-actions .button {
        width: 100%;
    }
}
.auth-policy-consent {
    display: flex !important;
    align-items: flex-start;
    gap: 10px !important;
}

.auth-policy-consent input {
    width: 18px !important;
    min-width: 18px;
    min-height: 18px !important;
    margin-top: 2px;
}

.auth-policy-consent span {
    line-height: 1.65;
}

.email-verification-card > p {
    line-height: 1.75;
}

.user-account-summary-chip.is-account-status.is-pending,
.user-account-status-text.is-pending {
    color: #8b5a16;
    background: #fff1d8;
}