:root{--cyan:#0891b2;--violet:#7c3aed;--deep:#172554}
/* ── интерактивная модель первого экрана ── */
.hero-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:7px 0 6px}
.hero-head h1{font-size:clamp(19px,1.9vw,23px);font-weight:800;letter-spacing:-.03em}
.hero-head .sub{font-size:13px;color:var(--muted)}
.hero-head .spacer{flex:1}
.hero-badge{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:#eff6ff;border:1px solid #dbeafe;padding:5px 11px;border-radius:999px;white-space:nowrap}
.hero-badge .live-dot{width:6px;height:6px}
/* панель модели */
.lab{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);
  padding:12px 14px;margin-bottom:4px}
.lab-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.lab-title{font-size:12.5px;font-weight:700}
.lab-own{margin-left:auto;border:1px dashed #93b6f5;background:#fff;border-radius:999px;
  padding:5px 13px;font:inherit;font-size:12px;font-weight:700;color:var(--brand);
  cursor:pointer;transition:border-color .2s,background .2s}
.lab-own:hover{background:#eff6ff}
.lab-own.on{background:var(--brand);border-color:var(--brand);border-style:solid;color:#fff}
.lab-reset{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 12px;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s}
.lab-reset:hover{border-color:#bfdbfe;color:var(--brand)}

/* панель «Мои цифры» — отправная точка собственника */
.own-box{background:#eff6ff;border:1px dashed #93b6f5;border-radius:12px;
  padding:9px 12px 10px;margin-bottom:6px}
.own-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand);margin-bottom:6px}
.own-f{display:block;margin-bottom:6px}
.own-f span{display:block;font-size:11.5px;color:#334155;font-weight:600;margin-bottom:3px}
.own-f input{width:100%;font:inherit;font-size:15px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;background:#fff;border:1.5px solid #bfdbfe;border-radius:9px;
  padding:7px 10px;outline:none;transition:border-color .15s}
.own-f input:focus{border-color:var(--brand)}
.own-note{font-size:10px;color:#64748b;line-height:1.35;margin:5px 0 7px}
.own-cta{display:block;text-align:center;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--brand);border-radius:9px;padding:8px 10px;text-decoration:none;
  transition:background .18s}
.own-cta:hover{background:#1c3a9e}
.segs{display:flex;gap:4px;background:var(--cloud);border:1px solid #eef2f7;border-radius:12px;
  padding:4px;overflow-x:auto;scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.seg{border:none;background:transparent;border-radius:9px;padding:5px 11px;font-size:13px;
  font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;transition:all .2s;white-space:nowrap}
.seg svg{width:14px;height:14px;flex:none}
.seg.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgb(15 23 42/.12)}
.seg:hover:not(.on){color:var(--ink)}

.lab-grid{display:grid;grid-template-columns:290px 1fr;gap:16px}
.cta-left{width:100%;margin-top:7px;padding:9px 14px}

/* ── ползунки: узкие карточки, живой отклик ── */
.sliders{display:grid;gap:6px;align-content:start}
.srow{position:relative;background:var(--cloud);border:1px solid #eef2f7;border-radius:12px;
  padding:6px 11px 7px;transition:border-color .2s, box-shadow .2s}
.srow:focus-within,.srow.drag{border-color:#bfdbfe;box-shadow:0 2px 10px rgb(29 78 216/.10);background:#fff}
.srow-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;gap:8px}
.srow-name{font-size:12px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow-val{border:1px dashed #c7d7f5;background:#eff6ff;border-radius:7px;padding:1px 8px;min-height:22px;
  font:inherit;font-size:12.5px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;
  white-space:nowrap;cursor:text;transition:background .18s,color .18s,border-color .18s}
.srow-val:hover{border-color:var(--accent)}
/* значение введено за пределами шкалы — считаем по нему, помечаем янтарным */
.srow-val.out{border-style:solid;border-color:#f59e0b;background:#fffbeb;color:#b45309}
.srow.drag .srow-val{background:var(--brand);border-color:var(--brand);color:#fff}
/* дорожка 7px + ручка 20px: на таче больше не промахиваются */
.srow-track{position:relative;padding:2px 0 0}
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:20px;
  background:transparent;outline:none;touch-action:none;cursor:pointer}
.rng::-webkit-slider-runnable-track{height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--cyan) var(--p,50%),#e4eaf2 var(--p,50%))}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6.5px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);box-shadow:0 1px 5px rgb(15 23 42/.24);
  cursor:grab;transition:transform .15s,box-shadow .15s}
.rng:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.14);box-shadow:0 3px 12px rgb(30 64 175/.34)}
.rng::-moz-range-track{height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--cyan) var(--p,50%),#e4eaf2 var(--p,50%))}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid var(--brand);box-shadow:0 1px 5px rgb(15 23 42/.24);cursor:grab}
.rng:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* метка базового значения профиля */
.srow-base{position:absolute;top:6.5px;width:2px;height:7px;border-radius:2px;
  background:#c3d0e3;transform:translateX(-1px);pointer-events:none}
/* пузырь значения при перетаскивании */
.srow-bubble{position:absolute;top:-20px;transform:translateX(-50%) scale(.82);
  background:var(--brand);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;z-index:2}
.srow.drag .srow-bubble{opacity:1;transform:translateX(-50%) scale(1)}
.srow-scale{display:flex;justify-content:space-between;font-size:10px;color:#71829a;margin-top:-1px;
  font-variant-numeric:tabular-nums}

/* вложение и кредит: тумблер + мини-ползунок суммы */
.fx{background:var(--cloud);border:1px solid #eef2f7;border-radius:12px;padding:7px 11px 8px;
  margin-top:6px;transition:all .2s}
.fx.on{background:#fff;border-color:#bfdbfe}
.fx-head{display:flex;align-items:center;gap:8px}
.fx-name{font-size:12px;font-weight:600;color:#334155;flex:1}
.fx-sum{font-size:12.5px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.fx:not(.on) .fx-sum{color:#c3cdd9}
.sw{position:relative;width:34px;height:20px;border-radius:99px;background:#dbe3ec;flex:none;
  transition:background .2s;border:none;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgb(15 23 42/.3);transition:transform .2s}
.fx.on .sw{background:var(--brand)}
.fx.on .sw::after{transform:translateX(14px)}
.fx-slide{height:0;overflow:hidden;transition:height .25s ease}
.fx.on .fx-slide{height:24px}
.fx-slide .rng{margin-top:2px;height:18px}
.fx-slide .rng::-webkit-slider-runnable-track{height:5px}
.fx-slide .rng::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px;border-width:2.5px}
.fx-slide .rng::-moz-range-track{height:5px}
.fx-slide .rng::-moz-range-thumb{width:16px;height:16px;border-width:2.5px}

/* правая часть */
.out{display:grid;grid-template-rows:auto auto auto;gap:9px;min-width:0}
.krow{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.krow.six{grid-template-columns:repeat(6,1fr);gap:8px}
.kpi{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:7px 8px 8px 11px;overflow:hidden;display:flex;flex-direction:column;gap:1px;min-width:0}
.kpi.kanim{animation:kIn .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes kIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kpi-viz{margin-top:auto;padding-top:5px}
.kpi-viz svg{display:block;width:100%;height:22px}
.kpi-viz .draw path{stroke-dasharray:220;stroke-dashoffset:220;animation:dash .9s .25s forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.meter{height:6px;border-radius:99px;background:#eef2f7;overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3.5px;background:var(--kc,#1d4ed8)}
.kpi.hero-kpi{background:linear-gradient(135deg,#eff6ff,#fff 55%)}
/* подписи переносятся на 2 строки, а не обрезаются многоточием */
.kpi-l{font-size:9.5px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--faint);
  line-height:1.2;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi-v{white-space:nowrap;font-size:clamp(15px,1.35vw,19px);font-weight:800;letter-spacing:-.025em;
  line-height:1.2;font-variant-numeric:tabular-nums;margin-top:1px;transition:color .3s}
.kpi.hero-kpi .kpi-v{font-size:clamp(16px,1.5vw,21px)}
.kpi-s{font-size:9.5px;color:var(--muted);line-height:1.25;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.good{color:var(--teal)} .bad{color:#e11d48} .watch{color:#b45309}

/* график: траектория 5 лет */
.chart-card{background:var(--cloud);border:1px solid #eef2f7;border-radius:14px;
  padding:10px 14px 8px;min-width:0}
.chart-note{font-size:10.5px;color:var(--faint);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px}
.chart-title{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.legend{display:flex;gap:14px;font-size:10.5px;color:var(--muted);align-items:center}
.lg-line{display:inline-block;width:14px;height:3px;border-radius:99px;margin-right:5px;vertical-align:2px}
.viz{display:grid;grid-template-columns:1fr 290px;gap:9px;align-items:stretch}
.chart-box{position:relative;min-width:0}
.chart{width:100%;height:196px;display:block;cursor:crosshair}
/* подсказка у курсора: значения года без строки-подписи */
.chart-tip{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%);
  background:var(--ink);color:#fff;border-radius:9px;padding:7px 10px;
  font-size:11.5px;line-height:1.5;white-space:nowrap;box-shadow:0 10px 24px rgb(15 23 42/.22)}
.chart-tip b{font-variant-numeric:tabular-nums}
.chart-tip .tt-h{font-weight:700;margin-bottom:2px}
.chart-tip i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px}
.donut{width:172px;height:172px;flex:none}
.donut .seg-arc{transition:stroke-dasharray .45s,stroke-dashoffset .45s,opacity .2s,stroke-width .2s;cursor:pointer}
.donut.dim .seg-arc{opacity:.28}
.donut.dim .seg-arc.hot{opacity:1;stroke-width:18}
.dtxt{font-weight:800;fill:var(--ink)}
.dsub{fill:var(--faint)}
.dlegend{list-style:none;display:grid;grid-template-columns:1fr;gap:2px;font-size:10.5px;color:var(--muted);min-width:0;width:100%}
.dlegend li{display:flex;align-items:center;gap:5px;padding:2px 3px;border-radius:6px;min-width:0;transition:background .18s}
.dlegend li:hover{background:#eef3fa}
.dlegend i{width:8px;height:8px;border-radius:3px;flex:none}
.dlegend .dn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlegend b{font-variant-numeric:tabular-nums;color:var(--ink)}


/* кнопка «Все показатели» и липкий итог — живут только на мобильной раскладке */
.kpi-more{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 16px;min-height:40px;font:inherit;font-size:12.5px;color:var(--muted);
  cursor:pointer;margin:2px auto 0;transition:border-color .2s,color .2s}
.kpi-more:active{border-color:#bfdbfe;color:var(--brand)}
.lab-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:none;
  align-items:center;justify-content:space-between;gap:12px;border:none;
  background:var(--deep);color:#fff;border-radius:13px;padding:11px 16px;min-height:48px;
  font:inherit;box-shadow:0 12px 30px rgb(15 23 42/.3);
  transform:translateY(150%);transition:transform .3s ease}
.lab-sticky.on{transform:none}
.lab-sticky .ls-l{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:rgb(255 255 255/.65)}
.lab-sticky .ls-v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}

@media (max-width:1020px){
  .hero-head .sub{display:none}
  .lab-grid{grid-template-columns:1fr;gap:12px}
  /* результат раньше рычагов: сначала видно, ЧТО меняется, потом — чем двигать */
  .lab-grid > div:first-child{order:2}
  .krow.six{grid-template-columns:1fr 1fr}
  .krow.six .kpi:first-child{grid-column:span 2}
  /* по умолчанию — три главных показателя, остальные за кнопкой */
  .krow.six:not(.open) .kpi:nth-child(2),
  .krow.six:not(.open) .kpi:nth-child(3),
  .krow.six:not(.open) .kpi:nth-child(6){display:none}
  .kpi-more{display:block}
  .lab-sticky{display:flex}
  .viz{grid-template-columns:1fr}
  .chart{height:170px}
  .donut{width:150px;height:150px}
  .dlegend{grid-template-columns:1fr 1fr;gap:2px 10px}
  /* тач-цели */
  .seg{min-height:44px;padding:8px 13px}
  .srow-val{min-height:34px;padding:4px 10px}
  .rng{height:26px}
  .sw{width:46px;height:26px}
  .sw::after{width:20px;height:20px;top:3px;left:3px}
  .fx.on .sw::after{transform:translateX(19px)}
  .fx.on .fx-slide{height:30px}
  .fx-slide .rng{height:24px}
}

.srow-edit{width:74px;font:inherit;font-size:12.5px;font-weight:800;color:var(--brand);
  background:#fff;border:1.5px solid var(--brand);border-radius:7px;padding:1px 7px;min-height:22px;
  outline:none;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .kpi.kanim,.kpi-viz .draw path{animation:none;stroke-dashoffset:0}
  .meter i,.donut .seg-arc,.srow-bubble{transition:none}
}