/* Loan Calculator — стили (подтип [форма], Amortized loan по макетам calculator.net).
   Современный fintech-вид: карточки с мягкой тенью, цветные значки результатов, чипы, area-график.
   Все цвета — токенами ниже, не магией по месту. Вёрстка — Bootstrap + кастом поверх. */

.lcalc {
    /* Токены инструмента — цвета сняты пипеткой с макета (точные значения). */
    --lc-principal:  #2563eb;   /* UI-синий: кнопки, активная вкладка, ссылки, фокус */
    --lc-data-blue:  #3b82f6;   /* data-синий: бар principal, график, синий бейдж, точка */
    --lc-interest:   #72bd35;   /* зелёный (лайм) — бейдж/бар/график/точка */
    --lc-purple:     #8b6fdc;   /* total payments (фиолетовый бейдж) */
    --lc-ink:        #0f172a;   /* заголовки, значения, текст инпутов */
    --lc-label:      #475569;   /* подписи полей и результатов */
    --lc-muted:      #64748b;   /* подзаголовок, подсказки, второстепенный текст */
    --lc-save-color: #545454;   /* кнопка «Link to calculation» */
    --lc-stage-bg:   linear-gradient(180deg, #f7faff 0%, #ffffff 55%); /* подложка функц. блоков */
    --lc-blue-soft:  #e8f0fe;
    --lc-card-bg:    #ffffff;
    --lc-card-br:    #e6eaf0;
    --lc-radius:     16px;
    --lc-radius-sm:  10px;
    --lc-soft:       #f1f5fb;   /* мягкий фон плашек */
    --lc-shadow:     0 1px 2px rgba(16,38,73,.04), 0 4px 16px rgba(16,38,73,.05);

    max-width: 1040px;
    margin: 0 auto;
    /* Чистый современный sans для самого инструмента (как в макете) — аккуратнее тяжёлого Droid Sans.
       Сайтовая типографика (шапка/меню) не затрагивается. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--lc-ink);
}

/* ---- Вкладки ---- */
.lcalc__tabs { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--lc-card-br); margin-bottom: .35rem; }
.lcalc__tab {
    display: inline-flex; align-items: center; gap: .45rem; padding: .65rem 1rem; font-size: .95rem; font-weight: 600;
    white-space: nowrap; color: var(--lc-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lcalc__tab i { font-size: 1rem; opacity: .8; }
.lcalc__tab:hover { color: var(--lc-principal); }
.lcalc__tab.is-active { color: var(--lc-ink); border-bottom-color: var(--lc-ink); }
.lcalc__tab-short { display: none; } /* короткая подпись — только мобайл */

/* Ряд со ссылкой на гайд (подводка страницы печатается движком над инструментом) */
.lcalc__guide-row { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin: .5rem 0 1rem; }
.lcalc__guide { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius-sm); background: #fff; color: var(--lc-ink); padding: .4rem .8rem; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lcalc__guide:hover { background: var(--lc-soft); color: var(--lc-principal); }

/* ---- Надстройка share (только shared-открытие) ---- */
.lcalc__above { margin-bottom: .75rem; }
.lcalc__above.is-hidden { display: none; }
.lcalc__above-shared { display: inline-block; margin-bottom: .25rem; padding: 3px 8px; font-size: .75rem; color: #fff; background: var(--tls-salmon); border-radius: 6px; }
.lcalc__above-expr { display: block; border: 0; background: none; padding: 0; font: inherit; font-size: .85rem; color: var(--lc-muted); text-align: left; cursor: pointer; }
.lcalc__above-expr:hover { color: var(--lc-principal); text-decoration: underline; }

/* ---- Карточки ---- */
/* Подложка функциональных блоков — мягкий вертикальный градиент */
.lcalc__stage { background: var(--lc-stage-bg); border-radius: 16px; padding: 1.1rem 1.1rem 1.4rem; }
@media (max-width: 800px) { .lcalc__stage { padding: .75rem; border-radius: 12px; } }

/* Карточки — натуральная высота по содержимому: контент прижат вверх, без растяжки и пустот.
   При раскрытии Advanced растёт только левая карточка, элементы справа стоят на месте. */
.lcalc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: stretch; }
/* Нижний ряд — равная высота: график заполняет лишнее, кнопки расписания прижаты к низу. */
.lcalc__grid--bottom { margin-top: 1.1rem; align-items: stretch; }
.lcalc__grid--bottom .lcalc__card { display: flex; flex-direction: column; }
.lcalc__card { background: var(--lc-card-bg); border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow); padding: 1.25rem 1.35rem; }
.lcalc__card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }
.lcalc__muted { color: var(--lc-muted); font-size: .85rem; margin: -.5rem 0 .85rem; }

/* ---- Поля ---- */
/* Карточка ввода — flex-колонка: поля равномерно заполняют высоту (для равной высоты с Results). */
.lcalc__inputs { display: flex; flex-direction: column; }
.lcalc__fields { display: flex; flex-direction: column; flex: 1 1 auto; }
.lcalc__fields .lcalc__field { flex: 1 1 auto; }

/* Поле в строку: подпись слева, контрол справа, разделители между строками (компактно). */
.lcalc__field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: .75rem; margin-bottom: 0; padding: .5rem 0; border-bottom: 1px solid var(--lc-card-br); }
.lcalc__field:first-of-type { padding-top: 0; }
.lcalc__label { font-size: .85rem; color: var(--lc-label); margin-bottom: 0; }
.lcalc__control { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius-sm); background: #fff; padding: .15rem .75rem; transition: border-color .12s, box-shadow .12s; }
.lcalc__control:focus-within { border-color: var(--lc-principal); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.lcalc__control--money .lcalc__money-sign { color: var(--lc-muted); font-size: 1.2rem; }
.lcalc__input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; color: var(--lc-ink); font-size: 1.3rem; font-weight: 600; line-height: 1.2; padding: .4rem 0; font-family: inherit; }
.lcalc__suffix { flex: 0 0 auto; color: var(--lc-muted); font-size: .9rem; white-space: nowrap; }
.lcalc__term { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.lcalc__select { width: 100%; border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius-sm); background: #fff; color: var(--lc-ink); font-size: 1rem; font-weight: 600; padding: .6rem .7rem; font-family: inherit; }
.lcalc__select:focus { outline: none; border-color: var(--lc-principal); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }

/* ---- Advanced ---- */
.lcalc__advanced { margin: .25rem 0 0; }
.lcalc__advanced-summary { cursor: pointer; color: var(--lc-principal); font-size: .9rem; font-weight: 600; padding: .25rem 0; list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.lcalc__advanced-summary::-webkit-details-marker { display: none; }
.lcalc__adv-chevron { transition: transform .15s; font-size: .8rem; }
.lcalc__advanced[open] .lcalc__adv-chevron { transform: rotate(180deg); }
.lcalc__field--advanced { margin-top: 0; }

/* ---- Прелоадер авто-расчёта + ошибка ---- */
.lcalc__preloader { position: relative; margin-top: 1rem; height: 3px; border-radius: 2px; background: var(--lc-soft); overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.lcalc__preloader.is-on { opacity: 1; }
.lcalc__preloader span { position: absolute; top: 0; height: 100%; width: 40%; background: var(--lc-principal); animation: lcalc-load .9s ease-in-out infinite; }
@keyframes lcalc-load { 0% { left: -40%; } 100% { left: 100%; } }

/* ---- Прелоадеры пересчёта: круглый спиннер поверх содержимого блока ---- */
.lcalc__busy { position: relative; }
.lcalc__overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, .94); border-radius: inherit; z-index: 3; container-type: size; }
.lcalc.is-loading .lcalc__overlay { display: flex; }
/* Спиннер ~70% от меньшей стороны блока (cqmin) — крупный и заметный. */
.lcalc__spinner { width: 70cqmin; height: 70cqmin; max-width: 260px; max-height: 260px; min-width: 44px; min-height: 44px; border-radius: 50%; border: clamp(4px, 5cqmin, 12px) solid var(--lc-blue-soft); border-top-color: var(--lc-principal); animation: lcalc-spin .8s linear infinite; }
@keyframes lcalc-spin { to { transform: rotate(360deg); } }
/* Ошибка не резервирует место (без пустоты под формой); занимает высоту только когда показана. */
.lcalc__error { min-height: 0; height: 0; overflow: hidden; margin: 0; font-size: .9rem; color: var(--tls-danger); visibility: hidden; }
.lcalc__error.is-on { height: auto; margin-top: .5rem; visibility: visible; }

/* Кнопки Calculate / Clear — скрыты на десктопе (авто-пересчёт), видны на мобайле (как в mortgage) */
.lcalc__actions { display: none; gap: .6rem; margin-top: .9rem; }
.lcalc__calc { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: var(--lc-radius-sm); background: linear-gradient(150deg, #5e9a28 0%, #487e1a 100%); color: #fff; font-size: 1.1rem; font-weight: 700; padding: .9rem 1rem; cursor: pointer; box-shadow: 0 6px 16px rgba(79,154,44,.3); }
.lcalc__calc:active { transform: translateY(1px); }
.lcalc__clear { flex: 0 0 auto; border: 0; border-radius: var(--lc-radius-sm); background: #e9eef4; color: var(--lc-label); font-size: 1.05rem; font-weight: 600; padding: .9rem 1.4rem; cursor: pointer; }
.lcalc__clear:hover { background: #dde4ed; }

/* ---- Результаты ---- */
.lcalc__results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.lcalc__results-head .lcalc__card-title { margin: 0; }
.lcalc__save { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius-sm); background: #fff; color: var(--lc-save-color); padding: .35rem .7rem; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.lcalc__save:hover { background: var(--lc-blue-soft); }
.lcalc__save.is-done { background: var(--lc-principal); border-color: var(--lc-principal); color: #fff; }

.lcalc__results { display: flex; flex-direction: column; }
.lcalc__res-list { display: flex; flex-direction: column; }
.lcalc__res { display: flex; align-items: center; gap: .85rem; }
/* Monthly payment — на всю ширину, разделитель снизу; Total interest/payments — в два столбца. */
.lcalc__res--full { padding: .15rem 0 .9rem; border-bottom: 1px solid var(--lc-card-br); }
.lcalc__res-pair { display: grid; grid-template-columns: 1fr 1fr; padding-top: .9rem; }
.lcalc__res-pair .lcalc__res { gap: .6rem; }
.lcalc__res-pair .lcalc__res:first-child { padding-right: .9rem; }
.lcalc__res-pair .lcalc__res:last-child { padding-left: .9rem; border-left: 1px solid var(--lc-card-br); }
.lcalc__res-pair .lcalc__res-badge { width: 38px; height: 38px; font-size: 1rem; }
.lcalc__res-pair .lcalc__res-value { font-size: 1.2rem; white-space: nowrap; }
.lcalc__res-badge { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; }
.lcalc__res-badge--blue { background: var(--lc-data-blue); }
.lcalc__res-badge--green { background: var(--lc-interest); }
.lcalc__res-badge--purple { background: var(--lc-purple); }
.lcalc__res-body { min-width: 0; }
.lcalc__res-label { font-size: .85rem; color: var(--lc-label); font-weight: 400; margin-bottom: .1rem; }
/* Инфо-иконка: hit-зона через padding, не через flex-размер (иначе глиф bi схлопывается). */
.lcalc__info { font-size: .85rem; opacity: .5; cursor: help; padding: .1em .2em; }
.lcalc__info:hover, .lcalc__info:focus { opacity: .9; outline: none; }
/* Подсказка — отдельный элемент, позиционируется JS относительно окна (fixed) и прижимается к
   видимой области, поэтому никогда не обрезается контейнерами и не вылезает за край. */
.lcalc-tooltip {
    position: fixed; z-index: 9999; max-width: 240px;
    background: var(--lc-ink); color: #fff; padding: .5rem .65rem; border-radius: 8px;
    font-size: .72rem; font-weight: 400; font-style: normal; line-height: 1.4; text-align: left;
    box-shadow: 0 6px 18px rgba(16, 38, 73, .22);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
}
.lcalc-tooltip.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.lcalc__res-value { font-size: 1.5rem; font-weight: 600; color: var(--lc-ink); word-break: break-word; letter-spacing: -.01em; }
.lcalc__res-value--big { font-size: 1.9rem; font-weight: 700; }

/* Строка-сценарий (человеческое резюме расчёта) */
.lcalc__narrative { margin: 1rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--lc-muted); }
.lcalc__narrative:empty { display: none; }
.lcalc__narrative b { color: var(--lc-ink); font-weight: 700; }

/* ---- Breakdown — сразу под результатами (без авто-отступа) ---- */
.lcalc__breakdown { margin-top: 0; padding-top: 1.25rem; }
.lcalc__bd-title { font-size: .85rem; color: var(--lc-muted); margin-bottom: .45rem; }
.lcalc__bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: var(--lc-soft); }
.lcalc__bar-principal, .lcalc__bar-interest { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; transition: width .3s ease; }
.lcalc__bar-principal { background: var(--lc-data-blue); }
.lcalc__bar-interest { background: var(--lc-interest); }
.lcalc__legend { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .6rem; font-size: .85rem; color: var(--lc-muted); }
.lcalc__legend--center { justify-content: center; }
.lcalc__legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.lcalc__legend-item b { color: var(--lc-ink); }
/* Двухстрочная легенда breakdown: метка над приглушённой суммой (как в макете) */
.lcalc__bd-legend { display: flex; gap: 2.5rem; margin-top: .7rem; }
.lcalc__bd-leg { display: flex; flex-direction: column; gap: .15rem; }
.lcalc__bd-leg-top { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--lc-ink); }
.lcalc__bd-leg-amt { padding-left: 1.05rem; font-size: .82rem; color: var(--lc-muted); }
.lcalc__dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lcalc__dot--principal { background: var(--lc-data-blue); }
.lcalc__dot--interest { background: var(--lc-interest); }

/* ---- Сводка-полоска: один контейнер с вертикальными разделителями (как в макете) ---- */
.lcalc__summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.1rem; background: var(--lc-card-bg); border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow); overflow: hidden; }
.lcalc__summary[hidden] { display: none; }
.lcalc__sum-tile { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; }
.lcalc__sum-tile + .lcalc__sum-tile { border-left: 1px solid var(--lc-card-br); }
.lcalc__sum-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--lc-principal); }
.lcalc__sum-label { display: block; font-size: .72rem; color: var(--lc-muted); }
.lcalc__sum-val { display: block; font-size: .95rem; font-weight: 700; }

/* ---- График ---- */
.lcalc__chart-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.lcalc__chart-head .lcalc__card-title { margin: 0; }
.lcalc__chart-head .lcalc__legend { margin-top: 0; }
.lcalc__chart { width: 100%; flex: 1 1 auto; display: flex; align-items: center; }
.lcalc__chart svg { width: 100%; height: auto; display: block; }
.lcalc__chart-x { text-align: center; font-size: .78rem; color: var(--lc-muted); margin-top: .1rem; }

/* ---- Amortization facts ---- */
.lcalc__view-full { margin: .25rem 0 1rem; border-color: var(--lc-principal); font-weight: 700; }
.lcalc__view-full:hover { background: var(--lc-blue-soft); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.lcalc__vf-arrow { transition: transform .15s; }
.lcalc__view-full:hover .lcalc__vf-arrow { transform: translateX(3px); }
.lcalc__facts { list-style: none; padding: 0; margin: .5rem 0 1rem; font-size: .9rem; }
.lcalc__facts li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--lc-ink); }
.lcalc__facts li i { color: var(--lc-interest); }
.lcalc__sched-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }
.lcalc__btn-fill, .lcalc__btn-outline { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--lc-radius-sm); font-size: .9rem; font-weight: 600; padding: .5rem 1rem; cursor: pointer; white-space: nowrap; }
.lcalc__btn-fill { background: var(--lc-principal); border: 1px solid var(--lc-principal); color: #fff; }
.lcalc__btn-fill:hover { background: #2a63d6; }
.lcalc__btn-outline { background: #fff; border: 1px solid var(--lc-card-br); color: var(--lc-principal); }
.lcalc__btn-outline:hover { background: var(--lc-blue-soft); }

/* ---- Таблица графика ---- */
.lcalc__table-wrap { overflow-x: auto; margin-top: 1.1rem; border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius); }
.lcalc__table-wrap.is-hidden { display: none; }
.lcalc__table { width: 100%; border-collapse: collapse; text-align: right; font-size: .88rem; }
.lcalc__table th, .lcalc__table td { padding: .5rem .7rem; border-bottom: 1px solid var(--lc-card-br); white-space: nowrap; }
.lcalc__table thead th { background: var(--lc-principal); color: #fff; font-weight: 600; position: sticky; top: 0; }
.lcalc__table th:first-child, .lcalc__table td:first-child, .lcalc__table th:nth-child(2), .lcalc__table td:nth-child(2) { text-align: left; }
.lcalc__table tbody tr:nth-child(even) { background: var(--lc-soft); }
.lcalc__table tfoot td { font-weight: 700; border-top: 2px solid var(--lc-principal); }

/* ---- Explore other loan types ---- */
.lcalc__explore { margin-top: 2rem; }
.lcalc__explore-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; }
.lcalc__explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lcalc__explore-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; border: 1px solid var(--lc-card-br); border-radius: var(--lc-radius); background: #fff; text-decoration: none; color: var(--lc-ink); transition: box-shadow .15s, transform .15s; }
.lcalc__explore-card:hover { box-shadow: var(--lc-shadow); transform: translateY(-2px); }
.lcalc__explore-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--lc-blue-soft); color: var(--lc-principal); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.lcalc__explore-name { font-weight: 700; font-size: 1rem; }
.lcalc__explore-desc { font-size: .85rem; color: var(--lc-muted); flex: 1 1 auto; }
.lcalc__explore-link { font-size: .85rem; font-weight: 600; color: var(--lc-principal); }

/* ---- How it works + FAQ ---- */
/* В сетке остался один FAQ: «How it works» переехал в общий блок движка (templates/partials/tool_explain.php). */
.lcalc__info-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lc-card-br); }
.lcalc__info-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .85rem; }
.lcalc__info-text { font-size: .9rem; color: var(--lc-muted); line-height: 1.55; }
.lcalc__faq-item { border-bottom: 1px solid var(--lc-card-br); padding: .15rem 0; }
.lcalc__faq-item summary { cursor: pointer; padding: .65rem 0; font-weight: 600; font-size: .92rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lcalc__faq-item summary::-webkit-details-marker { display: none; }
.lcalc__faq-item summary::after { content: '\203A'; transform: rotate(90deg); color: var(--lc-muted); transition: transform .15s; }
.lcalc__faq-item[open] summary::after { transform: rotate(-90deg); }
.lcalc__faq-item p { font-size: .88rem; color: var(--lc-muted); line-height: 1.55; margin: 0 0 .75rem; }

.lcalc__disclaimer { margin-top: 1.5rem; text-align: center; font-size: .78rem; color: var(--lc-muted); }

/* ---- Адаптив (мобайл) ---- */
@media (max-width: 800px) {
    /* Мобайл: пересчёт по кнопке (см. .tool_conventions/calculators.md) — кнопки появляются. */
    .lcalc__actions { display: flex; }
    /* Верхний ряд (Loan details/Results), Explore, How/FAQ — в столбик; нижний ряд (графики) — 2 колонки. */
    .lcalc__grid:not(.lcalc__grid--bottom), .lcalc__info-grid, .lcalc__explore-grid { grid-template-columns: 1fr; gap: 1rem; }
    .lcalc__grid--bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
    .lcalc__grid--bottom .lcalc__card { padding: .85rem; }
    .lcalc__card-title { font-size: 1rem; }
    .lcalc__chart-head { flex-wrap: wrap; gap: .25rem .75rem; }
    /* Amortization в узкой колонке: ничего не обрезается — кнопки на всю ширину, переносы разрешены. */
    .lcalc__grid--bottom .lcalc__btn-outline, .lcalc__grid--bottom .lcalc__btn-fill { width: 100%; justify-content: center; white-space: normal; text-align: center; font-size: .82rem; padding: .5rem .45rem; line-height: 1.25; }
    .lcalc__sched-actions { flex-direction: column; gap: .45rem; }
    .lcalc__facts { font-size: .82rem; }
    .lcalc__facts li { flex-wrap: wrap; gap: .2rem .4rem; }

    /* Вкладки: иконка сверху + короткая подпись под ней, три в ряд (без скролла).
       white-space:normal обязателен — базовое правило ставит nowrap, из-за чего длинные
       подписи не переносились и НАЛЕЗАЛИ на соседние колонки. */
    .lcalc__tabs { flex-wrap: nowrap; gap: 0; }
    .lcalc__tab { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-end; gap: .25rem; text-align: center; padding: .45rem .15rem .35rem; font-size: .72rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
    .lcalc__tab i { font-size: 1.15rem; opacity: .85; }
    .lcalc__tab-full { display: none; }
    /* Подпись прижата к низу и резервирует 2 строки: короткий «Monthly Payment» не оставляет
       пустоту между текстом и подчёркиванием активного таба, иконки остаются на одной линии. */
    .lcalc__tab-short { display: flex; align-items: flex-end; justify-content: center; min-height: 2.3em; }

    /* Поля — компактно: подпись слева, контрол справа, мелкий шрифт и плотные капсулы,
       чтобы term (два поля) и rate влезали даже на 360 без обрезания. */
    .lcalc__field { grid-template-columns: 82px 1fr; align-items: center; gap: .4rem; padding: .45rem 0; }
    .lcalc__label { font-size: .8rem; line-height: 1.15; }
    .lcalc__control { padding: .1rem .5rem; gap: .25rem; }
    .lcalc__input { font-size: 1rem; padding: .3rem 0; }
    .lcalc__control--money .lcalc__money-sign { font-size: 1rem; }
    .lcalc__suffix { font-size: .76rem; }
    .lcalc__term { gap: .35rem; }
    .lcalc__select { font-size: .9rem; padding: .45rem .5rem; }

    /* Results: пара остаётся в два столбца (компактнее) */
    .lcalc__res-value--big { font-size: 1.7rem; }
    .lcalc__res-pair .lcalc__res { gap: .5rem; }
    .lcalc__res-pair .lcalc__res:first-child { padding-right: .6rem; }
    .lcalc__res-pair .lcalc__res:last-child { padding-left: .6rem; }
    .lcalc__res-pair .lcalc__res-badge { width: 34px; height: 34px; font-size: .95rem; }
    .lcalc__res-pair .lcalc__res-value { font-size: 1.05rem; }

    /* Summary: три плашки в ряд, компактно */
    .lcalc__summary { grid-template-columns: repeat(3, 1fr); }
    .lcalc__sum-tile { gap: .45rem; padding: .6rem .55rem; }
    .lcalc__sum-icon { width: 28px; height: 28px; flex-basis: 28px; }
    .lcalc__sum-label { font-size: .66rem; }
    .lcalc__sum-val { font-size: .85rem; }
}
@media (max-width: 360px) {
    /* Совсем узкие экраны — аккуратный перенос в столбик, чтобы не ломалось */
    .lcalc__calc { font-size: 1rem; padding: .85rem .8rem; }
    .lcalc__clear { font-size: 1rem; padding: .85rem 1.1rem; }
    .lcalc__grid--bottom { grid-template-columns: 1fr; }
    .lcalc__res-pair { grid-template-columns: 1fr; }
    .lcalc__res-pair .lcalc__res:first-child { padding: 0 0 .7rem; }
    .lcalc__res-pair .lcalc__res:last-child { padding: .7rem 0 0; border-left: 0; border-top: 1px solid var(--lc-card-br); }
    .lcalc__res-pair .lcalc__res-value { font-size: 1.3rem; }
    .lcalc__summary { grid-template-columns: 1fr; }
    .lcalc__sum-tile + .lcalc__sum-tile { border-left: 0; border-top: 1px solid var(--lc-card-br); }
}

/* ---- Печать ---- */
@media print {
    .lcalc__tabs, .lcalc__guide-row, .lcalc__above, .lcalc__advanced,
    .lcalc__sched-actions, .lcalc__save, .lcalc__explore, .lcalc__faq, .lcalc__error { display: none !important; }
    .lcalc__table-wrap.is-hidden { display: block !important; }
}