/* Калькулятор юнит-экономики — стайл-скоуп #ue. Бренд-переменные из article.css,
   ключевые продублированы фолбэком. Mobile-first от 390px, своя десктоп-раскладка
   от 1024px (форма слева, липкая панель результата справа). */
#ue{
  --paper:#F4F3EE;--surface:#fff;--ink:#15181C;--ink-soft:#3A4048;--muted:#5f666e;
  --line:#E2E0D7;--line-strong:#CFCDC2;--lime:#C8F048;--lime-ink:#161a08;
  --danger:#B23B3B;--danger-bg:#FCEFEF;--warn:#9A6B12;--warn-bg:#FFF8E8;--good:#2F6B3C;--good-bg:#F0F7EF;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  max-width:1180px;margin:0 auto;padding:0 20px 72px;color:var(--ink);
}
#ue *{box-sizing:border-box}

/* ── Хиро ── */
.ue-hero{padding:clamp(24px,5vw,52px) 0 clamp(12px,3vw,24px)}
.ue-crumbs{font-size:13px;color:var(--muted);margin:0 0 16px}
.ue-crumbs a{color:var(--muted);text-decoration:none}
.ue-crumbs a:hover{color:var(--ink)}
.ue-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.ue-eyebrow b{color:var(--ink)}
.ue-hero h1{font-size:clamp(28px,5.4vw,56px);font-weight:800;letter-spacing:-.024em;line-height:1.06;margin:0 0 16px;text-wrap:balance;hyphens:manual}
.ue-lead{font-size:clamp(16px,2.2vw,19px);line-height:1.6;color:var(--ink-soft);margin:0;max-width:68ch;text-wrap:pretty}

/* ── Липкая мини-сводка (только мобила и планшет) ── */
.ue-mini{position:sticky;top:var(--ue-top,0px);z-index:15;display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;border-radius:14px;padding:10px 14px;margin:0 0 18px;
  box-shadow:0 10px 26px rgba(20,24,28,.18)}
.ue-mini-i{display:flex;flex-direction:column;gap:1px;min-width:0}
.ue-mini-l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.ue-mini-v{font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.ue-mini-v.is-neg{color:#FF9B9B}
.ue-mini-go{margin-left:auto;flex:none;font-size:12.5px;font-weight:700;color:var(--lime);text-decoration:none;white-space:nowrap}

/* ── Раскладка ── */
.ue-layout{display:grid;gap:18px}
.ue-form{min-width:0;display:grid;gap:16px}
.ue-side{min-width:0}

/* ── Карточки формы ── */
.ue-card{background:var(--surface);border:1.5px solid rgba(21,24,28,.10);border-radius:20px;
  padding:clamp(16px,2.6vw,24px);box-shadow:0 14px 40px rgba(20,24,28,.05)}
.ue-card-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.ue-card-sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin:-6px 0 14px;text-wrap:pretty}
.ue-opt{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;background:var(--paper);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:2px 8px;margin-left:6px}

/* ── Выбор ниши ── */
.ue-niche{display:grid;gap:10px}
.ue-niche-b{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;width:100%;
  border:1.5px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.ue-niche-b:hover{border-color:var(--line-strong)}
.ue-niche-b:focus-visible{outline:none;border-color:var(--ink)}
.ue-niche-b.is-on{border-color:var(--ink);background:var(--lime);box-shadow:0 8px 20px rgba(200,240,72,.35)}
.ue-niche-t{font-weight:700;font-size:16px;letter-spacing:-.01em;text-wrap:balance}
.ue-niche-d{font-size:13px;color:var(--muted);line-height:1.4;text-wrap:pretty}
.ue-niche-b.is-on .ue-niche-d{color:var(--lime-ink)}

/* ── Сегменты (режим расчёта, способ задать цену заявки) ── */
.ue-modes,.ue-seg{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.ue-seg-b{border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:11px 12px;
  cursor:pointer;font-weight:650;font-size:14px;color:var(--ink-soft);text-align:center;line-height:1.3;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.ue-seg-b:hover{border-color:var(--line-strong)}
.ue-seg-b:focus-visible{outline:none;border-color:var(--ink)}
.ue-seg-b.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.ue-seg-sm .ue-seg-b{font-size:13.5px;padding:9px 10px}

/* ── Поля ── */
.ue-field{margin:16px 0 0}
.ue-field:first-child{margin-top:0}
/* Поле под сегментами («от цели/от бюджета», «цена заявки») — с отбивкой,
   иначе подпись липнет к кнопкам. */
#ueMain>.ue-field,#ueMain>.ue-grid2,#ueLead>.ue-field,#ueLead>.ue-grid2,#ueRoyFields>.ue-field,#ueRoyFields>.ue-grid2{margin-top:16px}
.ue-field-l{display:block;font-weight:650;font-size:14.5px;margin:0 0 6px;text-wrap:balance}
.ue-field-h{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 8px;text-wrap:pretty}
.ue-input-wrap{position:relative;display:flex;align-items:center}
.ue-input{width:100%;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--paper);
  padding:12px 62px 12px 14px;font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);
  -moz-appearance:textfield;transition:border-color .15s ease,background .15s ease}
.ue-input:focus{outline:none;border-color:var(--ink);background:#fff}
.ue-input-u{position:absolute;right:14px;font-size:12.5px;color:var(--muted);pointer-events:none;white-space:nowrap}
.ue-field.is-hero .ue-input{font-size:21px;padding-top:15px;padding-bottom:15px}
.ue-grid2{display:grid;gap:14px;grid-template-columns:1fr}

/* ── Конверсии ── */
.ue-conv{display:grid;gap:14px}
.ue-conv-row{border-top:1px solid var(--line);padding-top:14px}
.ue-conv-row:first-child{border-top:0;padding-top:0}
.ue-conv-head{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.ue-conv-t{font-weight:650;font-size:14.5px;min-width:0;text-wrap:balance}
.ue-conv-v{margin-left:auto;flex:none;display:flex;align-items:center;gap:0}
.ue-conv-v .ue-num{width:74px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--paper);
  padding:7px 8px;font-family:var(--mono);font-size:15px;font-weight:700;text-align:right;color:var(--ink)}
.ue-conv-v .ue-num:focus{outline:none;border-color:var(--ink);background:#fff}
.ue-conv-v i{font-style:normal;font-size:13px;color:var(--muted);margin-left:5px}
.ue-conv-h{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 9px;text-wrap:pretty}
.ue-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:99px;background:var(--line);outline:none;margin:0}
.ue-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:3px solid var(--lime);cursor:pointer;box-shadow:0 2px 6px rgba(20,24,28,.25)}
.ue-range::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--ink);border:3px solid var(--lime);cursor:pointer}
.ue-conv-total{margin-top:16px;border-top:1.5px dashed var(--line-strong);padding-top:14px;font-size:14px;color:var(--ink-soft);line-height:1.5;text-wrap:pretty}
.ue-conv-total b{font-weight:800;font-size:16.5px;color:var(--ink);white-space:nowrap}

.ue-check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.4;cursor:pointer;color:var(--ink)}
.ue-check input{width:18px;height:18px;accent-color:var(--ink);flex:none;margin-top:1px;cursor:pointer}
.ue-reset-row{display:flex}

/* ── Панель результата ── */
.ue-panel{background:var(--ink);color:#fff;border-radius:20px;padding:clamp(18px,2.6vw,24px);box-shadow:0 18px 44px rgba(20,24,28,.16)}
.ue-panel-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 16px}
.ue-kpis{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.ue-kpi{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:12px 13px;min-width:0}
.ue-kpi.is-hero{grid-column:1/-1;background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.ue-kpi-l{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.58);margin:0 0 4px;line-height:1.3}
.ue-kpi.is-hero .ue-kpi-l{color:rgba(22,26,8,.62)}
.ue-kpi-v{font-weight:800;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.02em;line-height:1.12;overflow-wrap:anywhere}
.ue-kpi.is-hero .ue-kpi-v{font-size:clamp(24px,3.4vw,32px)}
.ue-kpi-d{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;line-height:1.35;text-wrap:pretty}
.ue-kpi.is-hero .ue-kpi-d{color:rgba(22,26,8,.6)}
.ue-kpi-v.is-neg{color:#FF9B9B}
.ue-kpi.is-hero .ue-kpi-v.is-neg{color:#8A1F1F}

.ue-warns{display:grid;gap:9px;margin-top:14px}
.ue-warn{border-radius:13px;padding:12px 14px;font-size:13.5px;line-height:1.45;text-wrap:pretty}
.ue-warn b{display:block;font-size:14px;margin:0 0 3px}
.ue-warn.is-ok{background:rgba(200,240,72,.14);border:1px solid rgba(200,240,72,.34);color:#EAF6C6}
.ue-warn.is-warn{background:rgba(255,196,84,.12);border:1px solid rgba(255,196,84,.3);color:#FFDFA6}
.ue-warn.is-bad{background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.32);color:#FFC5C5}

.ue-panel-funnel{margin-top:18px;border-top:1px solid rgba(255,255,255,.11);padding-top:16px;display:grid;gap:9px}
.ue-pf-h{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 2px}
.ue-pf-row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.ue-pf-t{color:rgba(255,255,255,.72);min-width:0;overflow-wrap:anywhere}
.ue-pf-bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;min-width:26px}
.ue-pf-bar i{display:block;height:100%;border-radius:99px;background:var(--lime)}
.ue-pf-n{font-family:var(--mono);font-weight:700;flex:none;min-width:52px;text-align:right}

/* ── Широкие блоки: декомпозиция ── */
.ue-wide{margin:34px 0 0;scroll-margin-top:90px}
.ue-h2{font-size:clamp(21px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:34px 0 10px;text-wrap:balance}
.ue-h2:first-child{margin-top:0}
.ue-note{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 14px;max-width:76ch;text-wrap:pretty}
.ue-two{display:grid;gap:16px}
.ue-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);
  border:1.5px solid rgba(21,24,28,.10);border-radius:18px;box-shadow:0 14px 40px rgba(20,24,28,.05)}
.ue-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ue-table th,.ue-table td{padding:12px 14px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
.ue-table th:first-child,.ue-table td:first-child{text-align:left;white-space:normal;min-width:170px}
.ue-table thead th{border-top:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--paper)}
.ue-table tbody tr:hover{background:#FBFBF8}
.ue-table .ue-td-strong{font-weight:750}
.ue-table .ue-td-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ue-table tr.is-total td{border-top:1.5px solid var(--ink);font-weight:800;background:#FBFBF8}
.ue-table tr.is-sub td{color:var(--muted)}
.ue-table .ue-neg{color:var(--danger)}
.ue-table .ue-pos{color:var(--good)}
.ue-step-h{font-size:12.5px;color:var(--muted);font-weight:400;display:block;margin-top:2px;white-space:normal;text-wrap:pretty}
.ue-table-pl{min-width:340px}

/* ── Кнопки ── */
.ue-exports{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.ue-btn{border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);
  padding:12px 18px;font-weight:700;font-size:14.5px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .12s ease}
.ue-btn:hover{border-color:var(--ink)}
.ue-btn:active{transform:translateY(1px)}
.ue-btn-lime{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.ue-btn-lime:hover{border-color:var(--ink)}
.ue-btn-ghost{border-style:dashed;color:var(--ink-soft);font-weight:600;font-size:13.5px;padding:10px 15px}
.ue-btn.is-done{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── SEO-проза ── */
.ue-block{max-width:74ch;margin:44px 0 0}
.ue-block h2{font-size:clamp(21px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 12px;text-wrap:balance}
.ue-block h3{font-size:clamp(17px,2.2vw,20px);font-weight:750;letter-spacing:-.012em;line-height:1.25;margin:24px 0 8px;text-wrap:balance}
.ue-block p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 12px;text-wrap:pretty}
.ue-block b{color:var(--ink);text-wrap:balance}
.ue-block code{font-family:var(--mono);font-size:.9em;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* ── Тост ── */
.ue-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
  background:var(--ink);color:#fff;border-radius:12px;padding:12px 20px;font-weight:600;font-size:14.5px;
  box-shadow:0 14px 34px rgba(20,24,28,.28);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100vw - 40px);text-align:center}
.ue-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ── Планшет ── */
@media (min-width:640px){
  .ue-grid2{grid-template-columns:1fr 1fr}
  .ue-kpis{grid-template-columns:1fr 1fr}
  .ue-two{grid-template-columns:1fr 1fr}
}

/* ── Десктоп: форма слева, липкая панель справа ── */
@media (min-width:1024px){
  .ue-mini{display:none}
  .ue-layout{grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:24px;align-items:start}
  .ue-side{position:sticky;top:92px;align-self:start}
  .ue-panel{max-height:calc(100vh - 112px);overflow-y:auto}
  .ue-wide{margin-top:46px}
  .ue-table{font-size:14.5px}
}
@media (min-width:1180px){
  .ue-layout{grid-template-columns:minmax(0,1fr) 400px}
}

/* ── Печать: только цифры ── */
@media print{
  .ue-mini,.ue-exports,.ue-reset-row,.ue-range,.ue-toast{display:none!important}
  #ue{max-width:none;padding:0}
  .ue-panel{background:#fff;color:#000;box-shadow:none;border:1px solid #ccc}
  .ue-panel-h,.ue-kpi-l,.ue-kpi-d{color:#555}
  .ue-kpi{border:1px solid #ddd;background:#fff}
  .ue-kpi.is-hero{background:#fff;color:#000}
  .ue-warn{color:#000!important;border:1px solid #ccc!important;background:#fff!important}
  .ue-pf-t,.ue-pf-n{color:#000}
  .ue-table-wrap{box-shadow:none;overflow:visible}
  .ue-layout{display:block}
  .ue-card{break-inside:avoid;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  #ue *{transition:none!important}
}