/* ========================================================================== WB Unit Economics Calculator — в стиле сайта (см. /currency/) Токены и список dark-theme селекторов взяты с той же страницы, чтобы калькулятор одинаково реагировал на переключение темы. Шрифт нигде не переопределяется — используется тот, что уже подключён шаблоном сайта (font-family: inherit везде). v2: подсказки, auto/custom-переключатели, компактная колонка результата с донат-диаграммой структуры затрат. ========================================================================== */ .wbc-layout { --wbc-accent: #2c7be5; --wbc-accent-soft: rgba(44,123,229,.1); --wbc-radius: 14px; --wbc-radius-sm: 8px; --wbc-green: #2db37e; --wbc-red: #e05252; --wbc-bg: #fdfeff; --wbc-bg-subtle: #f1f5fb; --wbc-border: #e1e7f0; --wbc-text: #1a1a2e; --wbc-text-muted: #7a7f8a; --wbc-hover: rgba(44,123,229,.04); --wbc-shadow: 0 1px 4px rgba(0,0,0,.06); } /* Тёмная тема — тот же набор селекторов, что и на /currency/, чтобы переключение темы на сайте подхватывалось одинаково всюду. Раньше висело на .wbc — из-за этого всё, что лежит вне .wbc (сайдбар с баннером, а теперь и с блоком результата), не получало переменные вовсе: var(--wbc-bg) резолвился в ничто, background становился невалидным и элемент оказывался прозрачным (тот же баг, что был у подсказок). .wbc-layout — общий предок и для основной колонки, и для сайдбара, поэтому переменные должны висеть именно на нём. */ html[data-theme="dark"] .wbc-layout, html.theme-dark .wbc-layout, body.theme-dark .wbc-layout, body.dark-theme .wbc-layout, body[data-bg="dark"] .wbc-layout, body.dark_mode_true .wbc-layout, .dark-theme-target .wbc-layout { --wbc-bg: #252836; --wbc-bg-subtle: #2a3148; --wbc-border: #3c4560; --wbc-text: #f0f0f8; --wbc-text-muted: #9098b0; --wbc-hover: rgba(44,123,229,.1); --wbc-shadow: 0 1px 6px rgba(0,0,0,.4); --wbc-slider-thumb-goodlow: #ffffff; } @media (prefers-color-scheme: dark) { .theme-default .wbc-layout { --wbc-bg: #252836; --wbc-bg-subtle: #2a3148; --wbc-border: #3c4560; --wbc-text: #f0f0f8; --wbc-text-muted: #9098b0; --wbc-hover: rgba(44,123,229,.1); --wbc-shadow: 0 1px 6px rgba(0,0,0,.4); --wbc-slider-thumb-goodlow: #ffffff; } } .wbc-layout, .wbc-layout *, .wbc-layout *::before, .wbc-layout *::after { box-sizing: border-box; font-family: inherit; } .wbc-layout [hidden] { display: none !important; }
.wbc { color: var(--wbc-text); max-width: 1080px; margin: 0 auto; } /* ---------- Заголовок ---------- */ .wbc-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; max-width: 760px; } .wbc-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: var(--wbc-text); } .wbc-title span { color: var(--wbc-accent); } .wbc-lead { font-size: 13px; line-height: 1.6; color: var(--wbc-text-muted); margin: 0; } .wbc-lead time { font-weight: 600; color: var(--wbc-text); margin-left: 7px; } .wbc-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--wbc-accent-soft); color: var(--wbc-accent); white-space: nowrap; } /* ---------- Карточки формы ---------- */ .wbc-cards-grid { display: flex; flex-direction: column; gap: 16px; } .wbc-card { background: var(--wbc-bg); border: 1px solid var(--wbc-border); border-radius: var(--wbc-radius); box-shadow: var(--wbc-shadow); padding: 16px 18px; } .wbc-group-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--wbc-text); margin: 0 0 12px; }
.wbc-step-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wbc-accent); color: #fff; font-size: 12px; font-weight: 700; } .wbc-group-icon { flex: none; width: 22px; height: 22px; color: var(--wbc-accent); } /* Сетка полей ВНУТРИ одной карточки — 2 подколонки на ПК (в карточке "Товар и цена" — 3, см. .wbc-fields-grid--3col). Большинство полей занимают одну ячейку; то, что плохо смотрится сжатым в половину ширины (пилюли-переключатели, размеры, футер-подсказка) — растягиваем на всю ширину через .wbc-field--full (см. также правила ниже). */ .wbc-fields-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; align-items: start; } .wbc-fields-grid--3col { grid-template-columns: 1fr 1fr 1fr; } .wbc-fields-grid .wbc-field--full, .wbc-fields-grid .wbc-dims, .wbc-fields-grid .wbc-hint { grid-column: 1 / -1; } .wbc-field { display: flex; flex-direction: column; gap: 4px; } .wbc-field-label { font-size: 12px; font-weight: 700; color: var(--wbc-text-muted); display: inline-flex; align-items: center; gap: 5px; } .wbc-field input, .wbc-field select { padding: 8px 9px; font-size: 13.5px; font-weight: 600; border: 1.5px solid var(--wbc-border); border-radius: var(--wbc-radius-sm); background: var(--wbc-bg-subtle); color: var(--wbc-text); outline: none; width: 100%; transition: border-color .15s, background-color .15s; } .wbc-field input:focus, .wbc-field select:focus { border-color: var(--wbc-accent); box-shadow: 0 0 0 3px var(--wbc-accent-soft); background: var(--wbc-bg); } .wbc-field input[readonly] { color: var(--wbc-text-muted); cursor: default; } /* Убираем нативные стрелки-степпер у number-полей — ввод только руками/клавиатурой. */ .wbc-layout input[type="number"]::-webkit-outer-spin-button, .wbc-layout input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wbc-layout input[type="number"] { -moz-appearance: textfield; } .wbc-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wbc-dims--3col { grid-template-columns: repeat(3, 1fr); }
.wbc-inline-subfield { display: flex; flex-direction: column; gap: 4px; max-width: 160px; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--wbc-border); } /* ---------- Подсказки к полям (?) ---------- */ .wbc-tip { flex: none; width: 15px; height: 15px; line-height: 13px; border-radius: 50%; border: 1px solid var(--wbc-border); background: var(--wbc-bg-subtle); color: var(--wbc-text-muted); font-size: 10px; font-weight: 700; text-align: center; padding: 0; cursor: help; text-transform: none; letter-spacing: 0; } .wbc-tip:hover, .wbc-tip:focus-visible { border-color: var(--wbc-accent); color: var(--wbc-accent); } .wbc-tip:disabled { opacity: .4; cursor: not-allowed; } .wbc-tooltip { position: fixed; z-index: 9999; max-width: 300px; min-width: 180px; width: max-content; background: var(--wbc-bg, #ffffff); color: var(--wbc-text, #1a1a2e); border: 1px solid var(--wbc-border, #e8eaed); border-radius: var(--wbc-radius-sm, 8px); box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 10px 12px; font-size: 12px; font-weight: 500; line-height: 1.55; white-space: normal; text-transform: none; letter-spacing: 0; } .wbc-tooltip[hidden] { display: none; } /* ---------- Переключатель "Авто / Свои" ---------- */ .wbc-auto-row { display: flex; align-items: center; gap: 8px; } .wbc-auto-row input { flex: 1 1 auto; min-width: 0; } .wbc-auto-row .wbc-pill--sm { flex: none; width: 68%; } .wbc-pill--sm .wbc-pill-btn { padding: 6px 9px; font-size: 11.5px; } /* ---------- Поле "число + ползунок" ---------- */ /* Обёртка выглядит как ОДИН инпут (граница и фон висят на ней, не на ): цифры и "%" внутри — просто два элемента без своих рамок, поэтому "%" не выглядит "оторванным" довеском сбоку. */ .wbc-slider-value-wrap { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border: 1.5px solid var(--wbc-border); border-radius: var(--wbc-radius-sm); background: var(--wbc-bg-subtle); transition: border-color .15s, background-color .15s; } .wbc-slider-value-wrap:focus-within { border-color: var(--wbc-accent); box-shadow: 0 0 0 3px var(--wbc-accent-soft); background: var(--wbc-bg); } .wbc-slider-value-wrap input { flex: 1 1 auto; min-width: 0; width: auto; padding: 0; border: none; background: transparent; font-size: 13.5px; font-weight: 700; color: var(--wbc-text); outline: none; } .wbc-slider-unit { flex: none; font-size: 13px; font-weight: 700; color: var(--wbc-text-muted); } .wbc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: transparent; outline: none; cursor: pointer; margin: 2px 0; } /* Заливка трека — на псевдоэлементах -webkit-slider-runnable-track / -moz-range-track, а НЕ на background самого (как было раньше).
Причина: JS обновляет заливку только через CSS-переменную
--wbc-slider-pct (см. wb-calc.js), и когда background висел прямо на
инпуте, часть браузеров не перерисовывала его синхронно во время клика
по ползунку/перетаскивания — линия "седела" и возвращала цвет только
после клика в другое место страницы (что запускало общий репейнт).
Трек-псевдоэлементы браузер перерисовывает вместе с самим ползунком
всегда, поэтому заливка больше не пропадает во время драга. */
.wbc-slider::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
border-radius: 3px;
background: linear-gradient(to right, var(--wbc-accent) 0%, var(--wbc-accent) var(--wbc-slider-pct, 50%), var(--wbc-border) var(--wbc-slider-pct, 50%), var(--wbc-border) 100%);
}
.wbc-slider::-moz-range-track {
width: 100%;
height: 6px;
border-radius: 3px;
background: linear-gradient(to right, var(--wbc-accent) 0%, var(--wbc-accent) var(--wbc-slider-pct, 50%), var(--wbc-border) var(--wbc-slider-pct, 50%), var(--wbc-border) 100%);
}
/* Смысловые градиенты для конкретных полей — статичный фон (не зависит от
положения ползунка, в отличие от --wbc-slider-pct выше), сразу показывает,
где хорошая зона, а где плохая. --good-high: чем больше, тем лучше (%
выкупа) — красный слева, зелёный справа. --good-low: чем меньше, тем
лучше (% брака) — зелёный слева, красный справа. У поля без этих
классов (Реклама/ДРР) градиента "хорошо/плохо" нет — остаётся базовая
заливка выше: синим закрашена пройденная часть, серым — остаток, чтобы
визуально показывать заполнение. */
.wbc-slider.wbc-slider--good-high::-webkit-slider-runnable-track { background: linear-gradient(to right, #e05252, #f2b705 50%, #2db37e); }
.wbc-slider.wbc-slider--good-low::-webkit-slider-runnable-track { background: linear-gradient(to right, #2db37e, #f2b705 50%, #e05252); }
.wbc-slider.wbc-slider--good-high::-moz-range-track { background: linear-gradient(to right, #e05252, #f2b705 50%, #2db37e); }
.wbc-slider.wbc-slider--good-low::-moz-range-track { background: linear-gradient(to right, #2db37e, #f2b705 50%, #e05252); }
.wbc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
margin-top: -5px; /* центрирование по высоте относительно 6px runnable-track */
border-radius: 50%;
background: var(--wbc-accent);
border: 2px solid var(--wbc-bg);
box-shadow: 0 0 0 1px var(--wbc-accent);
cursor: pointer;
}
.wbc-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--wbc-accent);
border: 2px solid var(--wbc-bg);
box-shadow: 0 0 0 1px var(--wbc-accent);
cursor: pointer;
}
/* Отдельный цвет ползунка для "% брака" (good-low) в тёмной теме — синий
акцент плохо читается поверх зелёно-жёлто-красной линии на тёмном фоне,
поэтому в dark-theme ползунок белый (переменная переопределяется в
блоках тёмной темы вверху файла; в светлой теме падает обратно на
var(--wbc-accent), как и у остальных ползунков). */
.wbc-slider.wbc-slider--good-low::-webkit-slider-thumb { background: var(--wbc-slider-thumb-goodlow, var(--wbc-accent)); }
.wbc-slider.wbc-slider--good-low::-moz-range-thumb { background: var(--wbc-slider-thumb-goodlow, var(--wbc-accent)); }
.wbc-slider-hint { font-size: 11px; color: var(--wbc-text-muted); line-height: 1.4; margin: 0; }
.wbc-preset-note { font-size: 11px; color: var(--wbc-text-muted); line-height: 1.5; margin: 2px 0 0; }
/* ---------- Pill-переключатели (как режим Купить/Продать на /currency/) ---------- */
.wbc-pill { display: inline-flex; background: var(--wbc-bg-subtle); border: 1px solid var(--wbc-border); border-radius: 10px; padding: 3px; gap: 2px; width: 100%; }
.wbc-pill-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--wbc-text-muted);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: all .18s;
white-space: nowrap;
}
.wbc-pill-btn.active { background: var(--wbc-accent); color: #fff; box-shadow: 0 2px 6px rgba(44,123,229,.3); }
.wbc-pill-btn:disabled { cursor: not-allowed; opacity: .4; }
/* Иконка страны в пилюле "Страна регистрации" — flex-выравнивание на
.wbc-pill-btn (см. выше) центрирует её по вертикали без magic-margin. */
.wbc-pill-flag { flex: none; width: 16px; height: 16px; border-radius: 2px; }
.wbc-pill.is-locked { opacity: .65; }
.wbc-pill.is-locked .wbc-pill-btn { cursor: default; }
.wbc-hint { font-size: 11px; color: var(--wbc-text-muted); margin: 0; line-height: 1.5; }
/* ==========================================================================
Широкий блок результата — той же ширины, что и форма, под ней, ДО FAQ.
Сверху — плоский ряд из 4 показателей (без тяжёлых боксов, разделены
тонкими линиями — компактнее и вмещает больше в одну строку), у обоих
"прибыльных" — общая цветовая подсветка (текст) и общее по смыслу
пояснение снизу (выручка / количество штук). Снизу — донат покрупнее
с интерактивной подсветкой сегмента при наведении, разбор затрат
текстом с полосками, и компактные ключевые показатели.
========================================================================== */
.wbc-result-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--wbc-text); margin: 0 0 18px; }
/* ---- Верхний ряд: плоские колонки с разделителями, без боксов ---- */
.wbc-result-top { display: flex; align-items: stretch; gap: 0; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--wbc-border); }
.wbc-top-item {
flex: 1;
padding: 2px 20px;
display: flex;
flex-direction: column; gap: 4px;
border-left: 1px solid var(--wbc-border);
}
.wbc-top-item:first-child { padding-left: 0; border-left: none; }
.wbc-top-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--wbc-text-muted); }
.wbc-top-value { font-size: 23px; font-weight: 800; color: var(--wbc-text); line-height: 1.2; }
.wbc-top-sub { font-size: 11px; color: var(--wbc-text-muted); }
.wbc-calc-indicator { font-size: 10px; font-weight: 600; color: var(--wbc-text-muted); }
.wbc-calc-indicator[hidden] { display: none; }
/* Оба "прибыльных" блока — за единицу и за партию — получают одинаковую
цветовую подсветку текста: это равноценная по важности информация. */
.wbc-top-item--hero .wbc-top-label { color: var(--wbc-red); }
.wbc-top-item--hero.is-good .wbc-top-label { color: var(--wbc-green); }
.wbc-top-item--hero .wbc-top-value { color: var(--wbc-red); }
.wbc-top-item--hero.is-good .wbc-top-value { color: var(--wbc-green); }
#wbcalc-result.is-calculating { opacity: .6; transition: opacity .15s ease; }
/* ---- Нижний ряд: донат (побольше) / разбор затрат — 2 колонки ---- */
.wbc-result-bottom { display: grid; grid-template-columns: 325px 1fr; align-items: start; }
.wbc-result-panel { padding: 0 14px; display: flex; flex-direction: column; }
.wbc-result-panel--donut { padding-left: 0; align-items: center; justify-content: flex-start; }
.wbc-result-panel--costs { border-left: 1px solid var(--wbc-border); gap: 10px; }
/* Ключевые показатели — отдельной строкой на всю ширину под донатом и
разбором затрат, сами разбиты на 2 колонки бок о бок (не друг под другом). */
.wbc-keyfacts-mini { display: flex; gap: 0; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--wbc-border); }
.wbc-keyfact-mini { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 20px; border-left: 1px solid var(--wbc-border); }
.wbc-keyfact-mini:first-child { padding-left: 0; border-left: none; }
.wbc-keyfact-mini-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--wbc-text-muted); white-space: nowrap; }
.wbc-keyfact-mini-value { font-size: 16px; font-weight: 800; color: var(--wbc-text); white-space: nowrap; }
.wbc-donut-title { font-size: 12px; font-weight: 700; color: var(--wbc-text-muted); margin: 0 0 4px; }
.wbc-donut-chart { position: relative; width: 290px; height: 290px; margin: 0 auto; }
.wbc-donut-svg { width: 100%; height: 100%; }
.wbc-donut-seg { cursor: pointer; transition: stroke-width .15s ease, opacity .15s ease; }
.wbc-donut-seg:hover, .wbc-donut-seg:focus-visible, .wbc-donut-seg.is-active { stroke-width: 20px; outline: none; }
.wbc-donut-chart.is-hovering .wbc-donut-seg:not(.is-active) { opacity: .3; }
.wbc-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
padding: 0 20px;
}
.wbc-donut-center-label { font-size: 12.5px; font-weight: 700; color: var(--wbc-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wbc-donut-center-value { font-size: 20px; font-weight: 800; color: var(--wbc-text); line-height: 1.25; margin-top: 2px; }
.wbc-donut-center-sub { font-size: 11.5px; color: var(--wbc-text-muted); margin-top: 1px; min-height: 1em; }
/* Список статей расходов — короткая строка + полоска-пропорция под ней,
вместо голых цифр это "объясняет" структуру затрат на глаз. Акцент на
процент (крупнее, ярче) — сумма в рублях вторична, идёт мельче и тише. */
.wbc-legend { display: flex; flex-direction: column; }
.wbc-legend-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px; border-radius: 6px; transition: background-color .15s; }
.wbc-legend-row.is-active { background: var(--wbc-bg-subtle); }
.wbc-legend-row-top { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; }
.wbc-legend-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.wbc-legend-label { flex: 1 1 auto; min-width: 0; color: var(--wbc-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbc-legend-value { flex: none; display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 7px; white-space: nowrap; }
.wbc-legend-percent { font-size: 14px; font-weight: 800; color: var(--wbc-text); white-space: nowrap; }
.wbc-legend-amount { font-size: 11.5px; font-weight: 500; color: var(--wbc-text-muted); white-space: nowrap; }
.wbc-legend-bar-track { height: 5px; border-radius: 3px; background: var(--wbc-bg-subtle); overflow: hidden; margin-left: 14px; }
.wbc-legend-bar-fill { height: 100%; border-radius: 3px; }
.wbc-result-note {
display: inline-flex;
align-items: flex-start;
gap: 7px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
color: var(--wbc-red);
background: rgba(224,82,82,.08);
border: 1px solid rgba(224,82,82,.25);
border-radius: var(--wbc-radius-sm);
padding: 8px 11px;
}
.wbc-result-note[hidden] { display: none; }
/* ---------- FAQ ---------- */
.wbc-faq { grid-area: faq; max-width: 800px; margin-top: 40px; }
.wbc-faq h2 { font-size: 16px; font-weight: 700; color: var(--wbc-text); margin: 0 0 8px; }
.wbc-faq details { border-bottom: 1px solid var(--wbc-border); padding: 12px 0; }
.wbc-faq summary {
cursor: pointer;
font-weight: 600;
font-size: 13.5px;
color: var(--wbc-text);
list-style: none;
position: relative;
padding-right: 26px;
}
.wbc-faq summary::-webkit-details-marker { display: none; }
.wbc-faq summary::after {
content: '';
position: absolute;
top: 50%;
right: 4px;
width: 8px;
height: 8px;
border-right: 2px solid var(--wbc-text-muted);
border-bottom: 2px solid var(--wbc-text-muted);
transform: translateY(-65%) rotate(45deg);
transition: transform .2s ease;
}
.wbc-faq details[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.wbc-faq p { color: var(--wbc-text-muted); font-size: 13px; line-height: 1.7; margin: 8px 0 2px; }
/* ---------- Layout: форма + сайдбар в ряд; широкий блок результата —
строго той же ширины, что и форма (лежит в той же колонке "main", а не
растягивается на всю ширину грида) — сайдбар с баннером тянется рядом
на всю высоту обеих строк. FAQ — ещё одной строкой на всю ширину под
результатом. Именно grid, а не flex — иначе пришлось бы городить
отдельную обёртку вокруг форма+результат, чтобы сайдбар мог встать
рядом с ними обоими сразу. ---------- */
.wbc-layout {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-areas: "main sidebar" "result sidebar" "faq faq";
column-gap: 50px;
max-width: 1160px;
margin: 0 auto;
align-items: start;
}
.wbc-main { grid-area: main; min-width: 0; }
.wbc-sidebar { grid-area: sidebar; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.wbc-banner { border-radius: var(--wbc-radius); overflow: hidden; border: 1px solid var(--wbc-border); box-shadow: var(--wbc-shadow); display: block; }
.wbc-banner img { width: 100%; height: auto; display: block; }
.wbc-result-wide { grid-area: result; }
@media (max-width: 1360px) {
.wbc-layout { grid-template-columns: 1fr; grid-template-areas: "main" "sidebar" "result" "faq"; }
.wbc-sidebar { width: 100%; max-width: 420px; margin: 0 auto; }
}
/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
/* 2x2: прибыль/шт и прибыль/партия — верхняя пара, маржинальность и ROI —
нижняя. В DOM порядок другой (шт, маржа, ROI, партия), поэтому пары
собираем через order, а не переставляем разметку. */
.wbc-result-top { display: flex; flex-wrap: wrap; gap: 0; }
.wbc-top-item { flex: 0 0 50%; width: 50%; box-sizing: border-box; border: none; }
.wbc-top-item:nth-child(1) { order: 1; padding: 0 14px 14px 0; border-right: 1px solid var(--wbc-border); border-bottom: 1px solid var(--wbc-border); }
.wbc-top-item:nth-child(4) { order: 2; padding: 0 0 14px 14px; border-bottom: 1px solid var(--wbc-border); }
.wbc-top-item:nth-child(2) { order: 3; padding: 14px 14px 0 0; border-right: 1px solid var(--wbc-border); }
.wbc-top-item:nth-child(3) { order: 4; padding: 14px 0 0 14px; }
.wbc-result-bottom { grid-template-columns: 1fr; }
.wbc-result-panel { padding: 20px 0 0; }
.wbc-result-panel--donut { padding-top: 0; }
.wbc-result-panel--costs { border-left: none; border-top: 1px solid var(--wbc-border); }
.wbc-keyfacts-mini { flex-direction: column; gap: 10px; }
.wbc-keyfact-mini { border-left: none; border-top: 1px solid var(--wbc-border); padding: 10px 0 0; }
.wbc-keyfact-mini:first-child { border-top: none; padding-top: 0; }
}
@media (max-width: 1280px) {
.wbc-sidebar { display: none; }
}
@media (max-width: 640px) {
.wbc-fields-grid { grid-template-columns: 1fr; }
.wbc-fields-grid--3col { grid-template-columns: 1fr; }
.wbc-dims { grid-template-columns: repeat(2, 1fr); }
.wbc-sidebar { display: none; }
}
@media (max-width: 480px) {
.wbc-dims { grid-template-columns: 1fr; }
}
/* ---------- Нормализация