.savings-section { scroll-margin-top: 120px; }
.savings-calculator { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: rgba(8, 17, 36, .58); }
.savings-form, .savings-result-panel { min-width: 0; padding: clamp(1.2rem, 3vw, 2rem); }
.savings-form { display: grid; gap: 1rem; }
.savings-field { display: grid; gap: .45rem; }
.savings-field label { font-size: .95rem; font-weight: 700; }
.savings-field label span { color: var(--muted); font-weight: 400; font-size: .85rem; }
.savings-field input, .savings-field select { width: 100%; min-width: 0; min-height: 48px; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #0f1d3a; font: inherit; font-size: 1rem; }
.savings-field input::placeholder { color: #8098bc; opacity: 1; }
.savings-field input:focus-visible, .savings-field select:focus-visible { outline: 2px solid #8ee9de; outline-offset: 2px; }
.savings-field input[aria-invalid="true"] { border-color: #ffb3ad; }
.savings-help { font-size: .8rem; line-height: 1.5; }
.savings-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.savings-actions button { font: inherit; cursor: pointer; }
.savings-actions button:disabled { opacity: .6; cursor: default; }
.savings-reset { border: 0; padding: .75rem .2rem; color: var(--muted); background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.savings-reset:focus-visible { outline: 2px solid #8ee9de; outline-offset: 4px; }
.savings-local { font-size: .75rem; }
.savings-result-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; border-left: 1px solid var(--line); background: radial-gradient(ellipse at 100% 0, rgba(45, 183, 163, .15), transparent 65%), rgba(19, 40, 74, .4); }
.savings-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: 14px; color: #8ee9de; background: rgba(45, 183, 163, .12); font-size: 1.8rem; }
.savings-placeholder h3 { max-width: 20ch; font-size: 1.5rem; line-height: 1.2; }
.savings-formula { margin-top: 1.25rem; font-size: .88rem; }
.savings-result-label { margin-bottom: .75rem; color: var(--muted); font-size: .95rem; line-height: 1.4; font-weight: 500; }
[data-savings-result] { scroll-margin-top: 120px; }
.savings-amount { margin-bottom: .6rem; color: #8ee9de; font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.savings-result-panel[data-status="deficit"] .savings-amount { color: #ffb3ad; }
.savings-rate { color: var(--text); font-size: .95rem; }
.savings-result-message { margin-top: .9rem; font-size: .92rem; }
.savings-annual { display: grid; gap: .45rem; margin: 1.4rem 0 .9rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; }
.savings-annual span { color: var(--muted); font-size: .85rem; }
.savings-annual strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.savings-app-bridge { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.savings-app-bridge h3 { font-size: 1.12rem; line-height: 1.3; }
.savings-app-bridge p { margin-bottom: 1rem; font-size: .9rem; }
.savings-app-bridge .btn { width: 100%; text-align: center; font-size: .88rem; }
.savings-projection-fields { display: grid; gap: 1rem; min-width: 0; margin: .25rem 0 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--line); }
.savings-projection-fields legend { padding: 0 .75rem 0 0; font-weight: 700; }
.savings-assumptions-controls { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }
.savings-assumptions-controls summary { cursor: pointer; color: #8ee9de; font-size: .9rem; }
.savings-assumptions-controls .savings-field { margin-top: 1rem; }
.savings-assumptions-controls summary:focus-visible { outline: 2px solid #8ee9de; outline-offset: 4px; }
.savings-projection-result { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.savings-projection-result h3 { font-size: 1.12rem; line-height: 1.4; }
.savings-projection-total { color: #8ee9de; font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.25; margin-bottom: .6rem; overflow-wrap: anywhere; }
.savings-chart { margin: 1rem 0 .5rem; }
.savings-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.savings-chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-size: .73rem; }
.savings-chart-legend span { display: inline-flex; gap: .4rem; align-items: center; }
.savings-chart-legend span[hidden] { display: none; }
.savings-chart-legend i { display: inline-block; width: 15px; border-top: 3px solid; }
.savings-legend-nominal { border-color: #8ee9de !important; }
.savings-legend-contributed { border-color: #a9bddb !important; border-top-style: dashed !important; }
.savings-legend-real { border-color: #ffc988 !important; border-top-style: dotted !important; }
.savings-projection-breakdown { display: grid; gap: .7rem; margin: 1.25rem 0; font-size: .85rem; }
.savings-projection-breakdown div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; }
.savings-projection-breakdown div[hidden] { display: none; }
.savings-projection-breakdown dt { color: var(--muted); }
.savings-projection-breakdown dd { margin: 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.savings-goal-result { padding: .9rem; margin: 1rem 0; border: 1px solid rgba(142, 233, 222, .3); border-radius: 12px; color: var(--text); font-size: .9rem; }
@media (max-width: 760px) {
    .savings-section, [data-savings-result] { scroll-margin-top: 150px; }
    .savings-calculator { grid-template-columns: 1fr; }
    .savings-result-panel { border-left: 0; border-top: 1px solid var(--line); }
    .savings-amount { font-size: clamp(1.6rem, 7.5vw, 2.7rem); }
}