/* ===== Калькулятор юнит-экономики (факт ⇄ план) ===== */
#ue-root{
  --ue-bg:#131316;--ue-surface:#1C1C1F;--ue-surface-2:#242427;--ue-surface-3:#2B2B30;
  --ue-line:rgba(243,243,246,.10);--ue-line-2:rgba(243,243,246,.20);
  --ue-text:#F3F3F6;--ue-muted:#A6A6B0;--ue-dim:#6E6E78;
  --ue-gold:#F5C518;--ue-orange:#F79445;--ue-good:#4ADE80;--ue-warn:#F79445;--ue-bad:#F2545B;
  --ue-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-family:'Manrope',Arial,sans-serif;font-size:16px;line-height:1.5;
  color:var(--ue-text);background:var(--ue-bg);
  border:1px solid var(--ue-line);border-radius:16px;
  padding:clamp(12px,2.2vw,18px);width:100%;margin:0 auto;box-sizing:border-box;
}
#ue-root *,#ue-root *::before,#ue-root *::after{box-sizing:border-box}
#ue-root [hidden]{display:none !important}

/* --- шапка: заголовок + переключатель режима --- */
#ue-root .ue-top{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 10px}
#ue-root h2.ue-title{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,2.4vw,19px);line-height:1.2;margin:0;letter-spacing:.01em}
#ue-root .ue-modes{display:inline-flex;background:var(--ue-surface);border:1px solid var(--ue-line);border-radius:999px;padding:3px;gap:2px}
#ue-root .ue-mode{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--ue-muted);
  font:inherit;font-size:12.5px;font-weight:700;line-height:1.2;padding:8px 15px;border-radius:999px;cursor:pointer;
  white-space:nowrap;transition:background .18s ease,color .18s ease}
#ue-root .ue-mode:hover{color:var(--ue-text)}
#ue-root .ue-mode.is-active{background:var(--ue-gold);color:#0A0A0A}
#ue-root .ue-hint{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--ue-muted)}
#ue-root .ue-hint b{color:var(--ue-text);font-weight:700}
#ue-root .ue-modes-sm{display:flex;width:100%;margin-bottom:9px}
#ue-root .ue-modes-sm .ue-mode{flex:1 1 0;justify-content:center;text-align:center;font-size:11.5px;padding:6px 8px}

/* --- сетка: ввод слева, результат справа --- */
#ue-root .ue-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;align-items:start}
#ue-root .ue-box{background:var(--ue-surface);border:1px solid var(--ue-line);border-radius:12px;padding:12px}
#ue-root .ue-box+.ue-box{margin-top:10px}
#ue-root .ue-box-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px;min-height:26px}
#ue-root .ue-box-head.ue-mt{margin-top:13px}
#ue-root .ue-box-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ue-muted)}

/* --- поля ввода --- */
#ue-root .ue-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
#ue-root .ue-pair.is-one{grid-template-columns:1fr;margin-bottom:0}
#ue-root .ue-stages+.ue-pair,#ue-root .ue-pair:last-child{margin-bottom:0}
#ue-root .ue-field{display:block;background:var(--ue-surface-2);border:1px solid var(--ue-line);border-radius:10px;
  padding:7px 11px 8px;transition:border-color .15s ease,background .15s ease}
#ue-root .ue-field:focus-within{border-color:var(--ue-gold);background:var(--ue-surface-3)}
#ue-root .ue-lab{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ue-muted);margin-bottom:2px}
#ue-root .ue-lab i{font-style:normal;color:var(--ue-dim);letter-spacing:0}
#ue-root .ue-in{display:block;width:100%;background:transparent;border:0;padding:0;margin:0;color:var(--ue-text);
  font-family:var(--ue-mono);font-size:18px;font-weight:700;letter-spacing:-.01em;min-width:0}
#ue-root .ue-in:focus{outline:none}
#ue-root .ue-in::placeholder{color:#55555E;font-weight:600}
#ue-root .ue-in::-webkit-outer-spin-button,#ue-root .ue-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* --- цепочка этапов воронки --- */
#ue-root .ue-stages{display:grid;gap:5px}
#ue-root .ue-step{position:relative;display:flex;align-items:center;gap:7px;min-height:20px;padding-left:25px;font-size:11px;color:var(--ue-muted)}
#ue-root .ue-step::before{content:"";position:absolute;left:11px;top:-5px;bottom:-5px;width:1px;background:var(--ue-line-2)}
#ue-root .ue-step-val{font-family:var(--ue-mono);font-size:12px;font-weight:700;color:var(--ue-gold)}

/* --- ползунки конверсий --- */
#ue-root .ue-slide{background:var(--ue-surface-2);border:1px solid var(--ue-line);border-radius:10px;padding:8px 11px 10px}
#ue-root .ue-slide+.ue-slide{margin-top:7px}
#ue-root .ue-slide-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--ue-muted)}
#ue-root .ue-slide-num{display:inline-flex;align-items:baseline;gap:1px;color:var(--ue-gold);font-family:var(--ue-mono);font-weight:700;font-size:14px}
#ue-root .ue-in-pct{width:3.2em;background:transparent;border:0;padding:0;margin:0;color:var(--ue-gold);
  font-family:var(--ue-mono);font-size:14px;font-weight:700;text-align:right}
#ue-root .ue-in-pct:focus{outline:none}
#ue-root .ue-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:4px;margin:9px 0 0;padding:0;
  border-radius:999px;cursor:pointer;background:linear-gradient(90deg,var(--ue-gold) var(--p,50%),rgba(243,243,246,.14) var(--p,50%))}
#ue-root .ue-range:focus{outline:none}
#ue-root .ue-range:focus-visible{outline:2px solid var(--ue-gold);outline-offset:4px}
#ue-root .ue-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--ue-gold);border:3px solid var(--ue-bg);box-shadow:0 0 0 1px var(--ue-gold);cursor:pointer}
#ue-root .ue-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--ue-gold);
  border:3px solid var(--ue-bg);box-shadow:0 0 0 1px var(--ue-gold);cursor:pointer}

/* --- главные цифры --- */
#ue-root .ue-hero{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#ue-root .ue-hero-card{position:relative;overflow:hidden;background:var(--ue-surface-2);border:1px solid var(--ue-line-2);
  border-radius:12px;padding:10px 13px 11px}
#ue-root .ue-hero-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(245,197,24,.10),rgba(245,197,24,0) 62%)}
#ue-root .ue-hero-lab{position:relative;z-index:1;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ue-muted);margin-bottom:3px}
#ue-root .ue-hero-val{position:relative;z-index:1;font-family:var(--ue-mono);font-size:clamp(19px,3vw,27px);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;word-break:break-word}
#ue-root .ue-hero-sub{position:relative;z-index:1;font-size:11px;color:var(--ue-muted);margin-top:3px}

/* --- бары воронки --- */
#ue-root .ue-bars{display:grid;gap:6px}
#ue-root .ue-bar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ue-surface-2);border:1px solid var(--ue-line);border-radius:9px;padding:7px 11px}
#ue-root .ue-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(245,197,24,.30),rgba(247,148,69,.14));transition:width .4s cubic-bezier(.4,0,.2,1)}
#ue-root .ue-bar-name{position:relative;z-index:1;font-size:12px;color:var(--ue-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ue-root .ue-bar-meta{position:relative;z-index:1;display:flex;align-items:baseline;gap:9px;white-space:nowrap}
#ue-root .ue-bar-pct{font-size:11px;color:var(--ue-muted);font-family:var(--ue-mono)}
#ue-root .ue-bar-num{font-family:var(--ue-mono);font-size:14px;font-weight:700}

/* --- карточки метрик --- */
#ue-root .ue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
#ue-root .ue-card{background:var(--ue-surface-2);border:1px solid var(--ue-line);border-radius:10px;padding:8px 11px 9px;min-width:0}
#ue-root .ue-card-label{font-size:10.5px;line-height:1.3;color:var(--ue-muted);margin-bottom:3px}
#ue-root .ue-card-value{font-family:var(--ue-mono);font-size:clamp(14px,2vw,17px);font-weight:700;word-break:break-word}
#ue-root .ue-good{color:var(--ue-good)}#ue-root .ue-bad{color:var(--ue-bad)}#ue-root .ue-warn{color:var(--ue-warn)}
#ue-root .ue-muted{color:var(--ue-muted)}

/* --- комментарии --- */
#ue-root .ue-notes{display:grid;gap:6px;margin-top:10px}
#ue-root .ue-note{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;
  background:var(--ue-surface);border:1px solid var(--ue-line);border-left:2px solid var(--ue-muted);border-radius:9px;padding:8px 12px}
#ue-root .ue-note b{font-weight:700}
#ue-root .ue-note-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px;background:var(--ue-muted)}
#ue-root .ue-note.is-good{border-left-color:var(--ue-good)}#ue-root .ue-note.is-good .ue-note-dot{background:var(--ue-good)}
#ue-root .ue-note.is-warn{border-left-color:var(--ue-warn)}#ue-root .ue-note.is-warn .ue-note-dot{background:var(--ue-warn)}
#ue-root .ue-note.is-bad{border-left-color:var(--ue-bad)}#ue-root .ue-note.is-bad .ue-note-dot{background:var(--ue-bad)}

/* --- кнопки --- */
#ue-root .ue-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
#ue-root .ue-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--ue-line-2);border-radius:999px;color:var(--ue-muted);
  font:inherit;font-size:12px;font-weight:600;line-height:1.2;padding:7px 13px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
#ue-root .ue-btn:hover:not(:disabled){color:var(--ue-text);border-color:var(--ue-gold)}
#ue-root .ue-btn:disabled{opacity:.4;cursor:not-allowed}
#ue-root .ue-btn-sync{padding:5px 10px;font-size:11px}
#ue-root .ue-btn-wa{background:#25D366;border-color:#25D366;color:#0A2E17;font-weight:700;text-decoration:none}
#ue-root .ue-btn-wa:hover:not(.is-off){background:#31E070;border-color:#31E070;color:#0A2E17}
#ue-root .ue-btn-wa.is-off{opacity:.4;cursor:not-allowed}
#ue-root .ue-btn-wa svg{flex:0 0 auto;margin-left:-2px}
#ue-root .ue-foot{margin:9px 0 0;font-size:11.5px;line-height:1.45;color:var(--ue-dim)}

@media (max-width:900px){
  #ue-root .ue-cols{grid-template-columns:1fr}
}
@media (max-width:520px){
  #ue-root{padding:12px;border-radius:14px}
  #ue-root .ue-top{gap:9px}
  #ue-root .ue-modes{width:100%}
  #ue-root .ue-mode{flex:1 1 0;justify-content:center;padding:8px 6px;text-align:center}
  #ue-root .ue-pair{grid-template-columns:1fr}
  #ue-root .ue-hero{grid-template-columns:1fr}
  #ue-root .ue-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  #ue-root *{transition:none !important}
}