:root {
    color-scheme: light;

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --color-bg-page: #fffdf9;
    --color-surface: #ffffff;
    --color-surface-muted: #faf7ff;
    --color-text: #241b35;
    --color-text-subtle: #51475c;
    --color-text-muted: #655d70;
    --color-border: #ded7e8;
    --color-border-strong: #9c92a8;
    --color-accent: #6c2bd9;
    --color-accent-hover: #5720b6;
    --color-accent-soft: #f1e9ff;
    --color-accent-text: #4d2589;
    --color-error: #a11231;
    --color-danger-hover: #7d0d27;
    --color-danger-soft: #fff5f7;
    --color-focus: #ffb000;

    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-result: clamp(2.25rem, 8vw, 4rem);

    --weight-medium: 600;
    --weight-semibold: 700;
    --weight-bold: 800;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    --control-block-size: 3rem;
    --control-padding-inline: .75rem;
    --radius-control: .75rem;
    --radius-button: .8rem;
    --radius-card: 1rem;
    --shadow-card: 0 10px 30px rgba(44, 24, 72, .06);
    --content-wide: 72rem;
    --content-calculator: 48rem;

    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg-page);
}

* { box-sizing: border-box; }
html { background: var(--color-bg-page); }
body { margin: 0; color: var(--color-text); background: var(--color-bg-page); }
a { color: #5d2acb; }
button, input, select { font: inherit; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
    z-index: 10;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
}

.site-header, .site-footer, .page-shell {
    width: min(var(--content-wide), calc(100% - 2rem));
    margin-inline: auto;
}
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
}
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.brand { font-size: 1.25rem; font-weight: var(--weight-bold); text-decoration: none; }
.page-shell { padding-block: var(--space-12); }
.site-footer { padding-block: var(--space-8); color: var(--color-text-muted); }

.hero { max-width: var(--content-calculator); padding-block: 4rem; }
.eyebrow { font-weight: var(--weight-bold); color: #7a35e8; }
h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.02; margin: 0 0 var(--space-4); }
h2 { line-height: 1.15; }
.hero-copy { font-size: 1.25rem; color: var(--color-text-subtle); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-block-size);
    padding: .7rem var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-weight: 750;
    cursor: pointer;
}
.button-primary { color: white; background: var(--color-accent); text-decoration: none; }
.button-primary:hover { background: var(--color-accent-hover); }
.button-secondary { color: var(--color-accent-text); background: var(--color-accent-soft); }
.button-danger { color: white; background: var(--color-error); }
.button-danger:hover { background: var(--color-danger-hover); }
.button:focus-visible,
.control:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
.result-card:focus-visible,
.form-error:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}
.button:disabled { cursor: not-allowed; opacity: .65; }

.breadcrumbs { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); font-size: .925rem; }
.calculator-page { max-width: var(--content-calculator); }
.calculator-page > header p { font-size: 1.1rem; color: var(--color-text-subtle); }

.calculator-card,
.form-card,
.result-card,
.feedback-prompt {
    margin-block: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.field-grid,
.form-row,
.discount-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
}

.field,
.form-field {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}

.field label,
.form-field__label {
    min-height: 1.5rem;
    font-weight: 750;
}

.control,
.field input,
.field select,
.money-currency-select {
    width: 100%;
    min-width: 0;
    min-height: var(--control-block-size);
    padding: .65rem var(--control-padding-inline);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    color: var(--color-text);
    background: var(--color-surface);
}

.control:hover,
.field input:hover,
.field select:hover,
.money-currency-select:hover {
    border-color: #756a82;
}

.control[aria-invalid="true"],
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.money-currency-select[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px rgba(161, 18, 49, .18);
}

.form-field__support,
.form-field__errors {
    display: grid;
    align-content: start;
    gap: var(--space-1);
}
.form-field__support { min-height: 2.75rem; }
.form-field__errors { min-height: 1.5rem; }

.field-help,
.form-field__help {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.field-error,
.form-field__error,
.form-error {
    color: var(--color-error);
    font-weight: 650;
}
.field-error,
.form-field__error { min-height: 1.5rem; margin: 0; }
.form-error { margin: 0 0 var(--space-4); }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.calculator-card > .button { margin-top: var(--space-5); }
.form-actions > .button { margin-top: 0; }

.money-input-labels,
.money-input-group,
.control-group {
    display: grid;
    grid-template-columns: minmax(7.25rem, 9.5rem) minmax(0, 1fr);
}
.money-input-labels { align-items: end; gap: 0; }
.money-currency-label { padding-left: var(--control-padding-inline); white-space: nowrap; }
.money-input-group .money-currency-select,
.control-group > :first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); text-overflow: ellipsis; }
.money-input-group input,
.control-group > :last-child { border-left: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.money-input-group > :focus-visible,
.control-group > :focus-visible { position: relative; z-index: 1; outline-offset: 0; }
.currency-help { max-width: 44rem; }

.result-card { min-height: 14rem; }
.result-label,
.result-card__label { margin: 0; color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.result-primary,
.result-card__primary { margin: var(--space-1) 0; font-size: var(--text-result); line-height: 1.05; font-weight: 850; }
.result-summary,
.result-card__summary { max-width: 40rem; font-size: 1.2rem; }
.result-details,
.result-card__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3);
}
.result-details div,
.result-card__metrics > div { padding: var(--space-3); border-radius: .7rem; background: var(--color-surface-muted); }
.result-details dt,
.result-card__metrics dt { color: var(--color-text-muted); }
.result-details dd,
.result-card__metrics dd { margin: .2rem 0 0; font-weight: 750; }
.result-placeholder { max-width: 32rem; color: var(--color-text-muted); }
.discount-result { min-height: 16rem; }
.result-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(var(--space-8) * -0.5) 0 var(--space-8);
}
.result-actions p { margin: 0; color: var(--color-text-subtle); }

.content-section { margin-block: var(--space-12); }
.formula-display { padding: .8rem var(--space-4); border-left: .25rem solid #7a35e8; background: var(--color-surface-muted); }
.home-problem-card { max-width: var(--content-calculator); margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.calculator-scenario-link { max-width: var(--content-calculator); }

.auth-page { max-width: 36rem; }
.auth-card { display: grid; gap: var(--space-4); }
.auth-card .form-actions { margin-top: var(--space-2); }
.auth-alternative { margin-top: calc(var(--space-8) * -0.5); color: var(--color-text-subtle); }
.flash-message {
    margin-block: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-weight: var(--weight-semibold);
}
.account-empty-state {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.account-empty-state .button { margin-top: var(--space-3); }
.saved-calculation-list { display: grid; gap: var(--space-4); }
.saved-calculation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.saved-calculation-card h3 { margin: var(--space-1) 0; }
.saved-calculation-card p { margin-block: var(--space-2); }
.saved-calculation-card__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.saved-calculation-card__primary { font-size: 1.5rem; font-weight: var(--weight-bold); }
.saved-calculation-context dl { display: grid; gap: var(--space-3); }
.saved-calculation-context dl > div { padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-muted); }
.saved-calculation-context dt { color: var(--color-text-muted); }
.saved-calculation-context dd { margin: var(--space-1) 0 0; font-weight: var(--weight-semibold); }
.danger-zone {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}
.danger-card {
    border-color: #d9a7b2;
    background: var(--color-danger-soft);
}

@media (max-width: 40rem) {
    .page-shell { padding-block: var(--space-8); }
    .site-header { align-items: flex-start; }
    .field-grid,
    .form-row,
    .discount-primary-grid { grid-template-columns: 1fr; }
    .form-field__support,
    .form-field__errors { min-height: 0; }
    .field-error:empty,
    .form-field__error:empty { min-height: 0; }
    .form-actions .button-primary,
    .form-actions .button-danger,
    .result-actions .button { width: 100%; }
    .result-actions,
    .saved-calculation-card { align-items: stretch; flex-direction: column; }
    .saved-calculation-card .button { width: 100%; }
    .calculator-card,
    .form-card,
    .result-card,
    .feedback-prompt { padding: var(--space-5); }
    h1 { font-size: 2.5rem; }
}

@media (max-width: 22rem) {
    .site-header, .site-footer, .page-shell { width: min(var(--content-wide), calc(100% - 1rem)); }
    .calculator-card,
    .form-card,
    .result-card,
    .feedback-prompt { padding: var(--space-4); }
    .money-input-labels,
    .money-input-group,
    .control-group { grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0, 1fr); }
}