.esr-calculator {
    --esr-bg: #062b60;
    --esr-text: #ffffff;
    --esr-muted: rgba(255,255,255,.78);
    --esr-line: rgba(255,255,255,.88);
    --esr-accent: #958a6b;
    --esr-border: rgba(255,255,255,.42);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 54px);
    color: var(--esr-text);
    background: radial-gradient(circle at 84% 5%, rgba(255,255,255,.12), transparent 22rem), linear-gradient(180deg, #062f68 0%, var(--esr-bg) 100%);
    font-family: inherit;
    border-radius: 0;
}
.esr-calculator *, .esr-calculator *::before, .esr-calculator *::after { box-sizing: border-box; }
.esr-bg-mark {
    position: absolute;
    right: -2.5rem;
    top: -4rem;
    width: 23rem;
    height: 23rem;
    border-radius: 50%;
    border: 2rem solid rgba(255,255,255,.045);
    color: rgba(255,255,255,.05);
    font-size: 2.2rem;
    display: grid;
    place-items: center;
    transform: rotate(7deg);
    pointer-events: none;
}
.esr-metals {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem 2.6rem;
    padding: 0;
    margin: 0 0 2.2rem;
    border: 0;
}
.esr-metal-option {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: clamp(1.15rem, 2.6vw, 2rem);
    cursor: pointer;
}
.esr-metal-option input { position: absolute; opacity: 0; pointer-events: none; }
.esr-radio {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}
.esr-metal-option input:checked + .esr-radio::after {
    content: "✓";
    color: var(--esr-accent);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1;
}
.esr-field {
    position: relative;
    border: 2px solid var(--esr-border);
    border-radius: 7px;
    min-height: 3rem;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.04);
}
.esr-amount-field { margin-left: 0; }
.esr-prefix {
    position: absolute;
    left: calc(-1 * clamp(5rem, 13vw, 7.5rem));
    color: var(--esr-text);
    font-size: clamp(1.35rem, 3vw, 2.1rem);
}
.esr-field input[type="number"] {
    width: 100%;
    padding: .65rem 1rem;
    color: var(--esr-text);
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: clamp(1.5rem, 4vw, 2.15rem);
    text-align: left;
}
.esr-years-field { width: min(100%, 520px); }
.esr-years-field input[type="number"] { text-align: center; }
.esr-slider-block, .esr-sliderblock { margin: 1.5rem 0; }
.esr-calculator input[type="range"] {
    width: 100%;
    height: 2rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.esr-calculator input[type="range"]::-webkit-slider-runnable-track {
    height: .42rem;
    background: linear-gradient(90deg, var(--esr-accent) var(--esr-progress, 0%), #fff var(--esr-progress, 0%));
}
.esr-calculator input[type="range"]::-moz-range-track {
    height: .42rem;
    background: #fff;
}
.esr-calculator input[type="range"]::-moz-range-progress {
    height: .42rem;
    background: var(--esr-accent);
}
.esr-calculator input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1.67rem;
    height: 1.67rem;
    margin-top: -0.625rem;
    border: 2px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.esr-calculator input[type="range"]::-moz-range-thumb {
    width: 1.67rem;
    height: 1.67rem;
    border: 2px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
}
.esr-range-labels {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .9rem;
    color: var(--esr-text);
    font-size: clamp(1.15rem, 3vw, 2rem);
}
.esr-years-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
    margin-top: 1.2rem;
}
.esr-section-label, .esr-date-range {
    font-size: clamp(1.15rem, 3.5vw, 2.1rem);
    line-height: 1.35;
}
.esr-date-range { text-align: left; }
.esr-divider {
    border: 0;
    border-top: 2px solid var(--esr-line);
    margin: 3.2rem 0 2.8rem;
}
.esr-results {
    display: grid;
    gap: 1rem;
    font-size: clamp(1.2rem, 3.6vw, 2rem);
    line-height: 1.35;
}
.esr-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: end;
}
.esr-result-row strong {
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}
.esr-result-row.esr-small {
    color: var(--esr-muted);
    font-size: clamp(.95rem, 2.2vw, 1.2rem);
}
.esr-note {
    margin: .8rem 0 0;
    color: var(--esr-muted);
    font-size: clamp(.85rem, 2vw, 1rem);
}
.esr-calculator.is-loading { opacity: .86; }
@media (max-width: 680px) {
    .esr-calculator { padding: 1.8rem 1.35rem; }
    .esr-metals { gap: .9rem 1.3rem; }
    .esr-radio { width: 1.5rem; height: 1.5rem; }
    .esr-amount-field { margin-left: 0; }
    .esr-years-header { align-items: start; }
    .esr-field { min-height: 3rem; }
    .esr-result-row { grid-template-columns: 1fr; gap: .4rem; }
    .esr-result-row strong { text-align: left; white-space: normal; }
}
.esr-input-label {
    margin: 0 0 .6rem;
    color: var(--esr-text);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
}
.esr-result-row.esr-highlight strong {
    font-size: clamp(1.35rem, 4vw, 2.25rem);
}

/* Version 1.3.3: compact typography - all visible text in the calculator stays at 12px or below. */
.esr-calculator,
.esr-calculator label,
.esr-calculator span,
.esr-calculator div,
.esr-calculator input,
.esr-calculator strong,
.esr-calculator p,
.esr-calculator .esr-metal-option,
.esr-calculator .esr-prefix,
.esr-calculator .esr-range-labels,
.esr-calculator .esr-section-label,
.esr-calculator .esr-date-range,
.esr-calculator .esr-results,
.esr-calculator .esr-result-row,
.esr-calculator .esr-result-row.esr-small,
.esr-calculator .esr-input-caption,
.esr-calculator .esr-note {
    font-size: 12px !important;
}
.esr-calculator .esr-note,
.esr-calculator .esr-result-row.esr-small,
.esr-calculator .esr-input-caption {
    font-size: 11px !important;
}
.esr-metal-option input:checked + .esr-radio::after {
    font-size: 12px !important;
}


/* Version 1.3.3: result labels only wrap when their column is actually too narrow. */
.esr-result-row > div:first-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}
.esr-result-row > div:first-child strong {
    display: inline;
}