/* Калькулятор вклада BUYHOLD — DEPOSIT_CALC_2026_06_18
   Тёмная trader-terminal карточка. Работает и как шорткод в светлой статье
   (самодостаточная карточка), и на странице-инструменте (тёмный фон).
   Премиум-слой: нейтральные hairline-рамки + блик сверху, акцент точечно. */

.dep-app{
  --dep-bg:var(--bh-bg-dark,#131722);
  --dep-card:#1b212c;
  --dep-card2:#232b38;
  --dep-line:#2b3340;
  --dep-text:#e8ecf2;
  --dep-muted:#9ca3af;
  --dep-dim:#6b7382;
  --dep-accent:var(--bh-accent,#95ce5a);
  --dep-pos:var(--bh-chart-pos,#10b981);
  --dep-neg:var(--bh-chart-neg,#f43f5e);
  /* премиум-поверхность: свет сверху + нейтральные грани, дисциплина акцента */
  --dep-surface:linear-gradient(180deg,#232b39 0%,#191e28 100%);
  --dep-hairline:rgba(255,255,255,.07);
  --dep-hairline-hi:rgba(255,255,255,.16);
  --dep-elev:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.25),0 12px 30px -10px rgba(0,0,0,.45);
  --dep-mono:var(--dep-ui); /* канон инструментов: DM Sans + tabular-nums, НЕ Fira Code (моно) */
  --dep-ui:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-family:var(--dep-ui);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--dep-text);
  background:var(--dep-bg);
  border:1px solid var(--dep-line);
  border-radius:18px;
  padding:22px;
  max-width:1100px;
  margin:28px auto;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
}
.dep-app *,.dep-app *::before,.dep-app *::after{box-sizing:border-box}

.dep-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px}
@media (max-width:840px){.dep-grid{grid-template-columns:1fr}}

.dep-card{background:var(--dep-surface);border:1px solid var(--dep-hairline);border-radius:16px;padding:20px;box-shadow:var(--dep-elev)}

/* Поля ввода */
.dep-field{margin-bottom:16px}
.dep-field:last-child{margin-bottom:0}
.dep-label,.dep-field>label{display:block;font-size:13px;font-weight:600;color:var(--dep-text);margin-bottom:8px}
.dep-hint{font-weight:500;color:var(--dep-dim);font-size:12px}
.dep-input-grp{display:flex;align-items:center;background:rgba(0,0,0,.22);border:1px solid var(--dep-hairline);border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.dep-input-grp:focus-within{border-color:var(--dep-accent);box-shadow:0 0 0 3px rgba(149,206,90,.12)}
.dep-input-grp input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--dep-text);font-family:var(--dep-mono);font-size:18px;font-weight:600;padding:11px 12px}
.dep-suffix{padding:0 13px;color:var(--dep-muted);font-size:14px;font-weight:600;white-space:nowrap;border-left:1px solid var(--dep-hairline);align-self:stretch;display:flex;align-items:center}

/* Ползунки */
.dep-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:var(--dep-line);margin-top:13px;cursor:pointer}
.dep-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--dep-accent);border:3px solid var(--dep-bg);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 8px rgba(149,206,90,.45);cursor:pointer;transition:box-shadow .15s}
.dep-range::-webkit-slider-thumb:hover{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 12px rgba(149,206,90,.65)}
.dep-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--dep-accent);border:3px solid var(--dep-bg);box-shadow:0 2px 8px rgba(149,206,90,.45);cursor:pointer}

/* Сегменты */
.dep-seg{display:flex;gap:6px;background:rgba(0,0,0,.22);border:1px solid var(--dep-hairline);border-radius:11px;padding:4px}
.dep-seg button{flex:1;background:transparent;border:0;color:var(--dep-muted);font-family:var(--dep-ui);font-size:13px;font-weight:600;padding:9px 6px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
.dep-seg button:hover{color:var(--dep-text)}
.dep-seg button.active{background:linear-gradient(180deg,#a4d869,#86c047);color:#10160c;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}

/* Чипы-пресеты */
.dep-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.dep-chips button{background:rgba(255,255,255,.03);border:1px solid var(--dep-hairline);color:var(--dep-muted);font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;cursor:pointer;transition:.15s}
.dep-chips button:hover{border-color:rgba(149,206,90,.5);color:var(--dep-text)}

/* info-кнопка / тултип */
.dep-info{width:16px;height:16px;line-height:14px;border-radius:50%;border:1px solid var(--dep-dim);background:transparent;color:var(--dep-dim);font-size:11px;font-style:italic;font-weight:700;cursor:help;margin-left:5px;padding:0;position:relative}
.dep-info:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:140%;transform:translateX(-50%);width:230px;background:#0b0e13;color:var(--dep-text);font-size:12px;font-weight:400;font-style:normal;line-height:1.45;padding:9px 11px;border-radius:8px;border:1px solid var(--dep-hairline);z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* Дополнительно */
.dep-adv{margin-top:18px;border-top:1px solid var(--dep-hairline);padding-top:14px}
.dep-adv-opt{margin-bottom:12px}
.dep-adv-opt[hidden]{display:none}
.dep-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--dep-text);user-select:none}
.dep-check input{position:absolute;opacity:0;width:0;height:0}
.dep-switch{position:relative;width:38px;height:21px;border-radius:21px;background:var(--dep-line);transition:.2s;flex:0 0 auto}
.dep-switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s}
.dep-check input:checked + .dep-switch{background:var(--dep-accent)}
.dep-check input:checked + .dep-switch::after{transform:translateX(17px)}
.dep-check input:focus-visible + .dep-switch{box-shadow:0 0 0 2px var(--dep-bg),0 0 0 4px var(--dep-accent)}
.dep-adv-sub{margin-top:10px;padding-left:48px;max-width:220px}
.dep-adv-sub[hidden]{display:none}

/* Кнопки действий */
.dep-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dep-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;font-family:var(--dep-ui);font-size:13px;font-weight:700;padding:11px 14px;cursor:pointer;border:1px solid transparent;transition:.15s}
.dep-btn svg{width:15px;height:15px}
.dep-btn--primary{background:linear-gradient(180deg,#a4d869,#86c047);color:#10160c;flex:1 1 100%;box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.dep-btn--primary:hover{filter:brightness(1.05)}
.dep-btn--ghost{flex:1 1 0;background:rgba(255,255,255,.03);border-color:var(--dep-hairline);color:var(--dep-muted)}
.dep-btn--ghost:hover{color:var(--dep-text);border-color:var(--dep-hairline-hi)}

/* Результат */
.dep-result{display:flex;flex-direction:column;gap:16px;min-width:0}
.dep-hero{position:relative;display:flex;align-items:center;gap:20px;background:radial-gradient(130% 150% at 100% 0%,rgba(149,206,90,.09),transparent 55%),linear-gradient(180deg,#242c3a,#171c25);border:1px solid var(--dep-hairline);border-radius:16px;padding:24px;box-shadow:var(--dep-elev)}
.dep-hero-main{flex:1;min-width:0}
.dep-hero-label{font-size:11px;color:var(--dep-dim);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:11px}
.dep-hero-value{font-family:var(--dep-mono);font-size:46px;font-weight:700;color:#fff;line-height:1;letter-spacing:-1.6px}
.dep-hero-value .dep-cur{font-family:var(--dep-ui);font-size:23px;color:var(--dep-muted);margin-left:9px;font-weight:600;letter-spacing:0}
.dep-hero-gain{margin-top:13px;font-size:16px;font-weight:700;color:var(--dep-pos)}
.dep-hero-gain:empty{display:none}
.dep-hg-rate{color:var(--dep-muted);font-weight:600;font-size:.9em}
.dep-hero-meta{margin-top:5px;font-size:13px;color:var(--dep-muted)}
@media (max-width:480px){.dep-hero-value{font-size:34px;letter-spacing:-1px}}

/* Налоговый бейдж */
.dep-badge{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:12px;padding:13px 16px;font-size:14px;font-weight:700}
.dep-badge::before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dep-badge--free{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.30);color:var(--dep-pos)}
.dep-badge--free::before{background:var(--dep-pos);box-shadow:0 0 8px rgba(16,185,129,.7)}
.dep-badge--tax{background:rgba(244,63,94,.10);border:1px solid rgba(244,63,94,.28);color:#fca5b5}
.dep-badge--tax::before{background:var(--dep-neg);box-shadow:0 0 8px rgba(244,63,94,.7)}
.dep-badge-note{font-weight:500;font-size:12.5px;color:var(--dep-muted)}

/* Метрики */
.dep-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.dep-metrics{grid-template-columns:1fr}}
.dep-metric{background:var(--dep-surface);border:1px solid var(--dep-hairline);border-radius:14px;padding:16px 17px;box-shadow:var(--dep-elev);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dep-metric:hover{transform:translateY(-2px);border-color:var(--dep-hairline-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.3),0 18px 40px -12px rgba(0,0,0,.55)}
.dep-metric[hidden]{display:none}
.dep-metric-label{font-size:11px;color:var(--dep-dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.dep-metric-value{font-family:var(--dep-mono);font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.3px}
.dep-metric-value.pos{color:var(--dep-pos)}
.dep-metric-value.neg{color:var(--dep-neg)}
.dep-metric-value.neutral{color:var(--dep-text)}
.dep-metric-sub{font-size:11px;color:var(--dep-dim);margin-top:4px;font-weight:500}
/* единицы и слова внутри числовых значений — обычным шрифтом, чуть тише */
.dep-u{font-family:var(--dep-ui);font-weight:600;font-size:.84em;letter-spacing:0;color:var(--dep-muted)}

/* Композиционная полоса */
.dep-compbar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.dep-compbar span{display:block;height:100%;transition:width .3s}
.dep-compbar .seg-p{background:#586173}
.dep-compbar .seg-i{background:var(--dep-pos)}
.dep-compbar .seg-t{background:var(--dep-neg)}
.dep-comp-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--dep-muted);font-weight:500}
.dep-comp-legend span{display:inline-flex;align-items:center;gap:6px}
.dep-comp-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.dep-comp-legend .l-p{background:#586173}
.dep-comp-legend .l-i{background:var(--dep-pos)}
.dep-comp-legend .l-t{background:var(--dep-neg)}

/* Диаграмма «что остаётся от ставки» */
.dep-erosion{background:var(--dep-surface);border:1px solid var(--dep-hairline);border-radius:14px;padding:16px 18px;box-shadow:var(--dep-elev)}
.dep-er-title{font-size:11px;color:var(--dep-dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.dep-er-row{display:grid;grid-template-columns:108px 1fr 58px;align-items:center;gap:10px;margin-bottom:10px}
.dep-er-row:last-child{margin-bottom:0}
.dep-er-row[hidden]{display:none}
.dep-er-label{font-size:12.5px;color:var(--dep-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep-er-track{position:relative;height:20px;background:rgba(0,0,0,.25);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.dep-er-bar{position:absolute;left:0;top:3px;bottom:3px;border-radius:4px;transition:width .35s ease}
.dep-er-bar.nom{background:#586173}
.dep-er-bar.pos{background:var(--dep-pos)}
.dep-er-bar.neg{background:var(--dep-neg)}
.dep-er-val{font-size:13px;font-weight:700;text-align:right}
.dep-er-val.nom{color:var(--dep-text)}
.dep-er-val.pos{color:var(--dep-pos)}
.dep-er-val.neg{color:var(--dep-neg)}

/* Вердикт + примечание */
.dep-verdict{font-size:14px;line-height:1.55;color:var(--dep-text);background:var(--dep-surface);border:1px solid var(--dep-hairline);border-left:3px solid var(--dep-accent);border-radius:10px;padding:14px 16px;margin:0;box-shadow:var(--dep-elev)}
.dep-verdict:empty{display:none}
.dep-note{font-size:11.5px;line-height:1.5;color:var(--dep-dim);margin:0}
.dep-note a{color:var(--dep-muted)}
.dep-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* На странице-инструменте: карточка вписана в тёмный фон без двойной рамки */
.dep-onpage .dep-app{max-width:1320px;border:0;border-radius:0;background:transparent;padding:8px 24px 28px;margin:0 auto}
@media (max-width:720px){.dep-onpage .dep-app{padding:8px 14px 22px}}

/* ===== Доп. слой: спарклайн, разделитель, сравнение, фокус, sticky-мобайл ===== */
/* Спарклайн роста баланса в hero */
/* спарклайн — справа от текста (не растит высоту карточки) */
.dep-spark{flex:0 0 40%;max-width:340px;opacity:.85}
.dep-spark svg{width:100%;height:66px;display:block}
.dep-spark:empty{display:none}
@media (max-width:560px){
  .dep-hero{flex-direction:column;align-items:stretch;gap:8px}
  .dep-spark{flex-basis:auto;max-width:none}
  .dep-spark svg{height:42px}
}

/* Тонкий разделитель «деньги» / «анализ доходности» */
.dep-divider{height:1px;background:linear-gradient(90deg,transparent,var(--dep-hairline) 18%,var(--dep-hairline) 82%,transparent)}

/* Режим сравнения сценариев */
.dep-compare{background:var(--dep-surface);border:1px solid var(--dep-hairline);border-radius:14px;padding:16px 18px;box-shadow:var(--dep-elev)}
.dep-compare[hidden]{display:none}
.dep-cmp-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dep-dim);margin-bottom:14px}
.dep-cmp-close{background:transparent;border:0;color:var(--dep-muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;border-radius:6px}
.dep-cmp-close:hover{color:var(--dep-text)}
.dep-cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.dep-cmp-grid{grid-template-columns:1fr}}
.dep-cmp-col{background:rgba(0,0,0,.18);border:1px solid var(--dep-hairline);border-radius:11px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.dep-cmp-col.is-best{border-color:rgba(16,185,129,.45);box-shadow:0 0 0 1px rgba(16,185,129,.22),inset 0 1px 0 rgba(255,255,255,.04)}
.dep-cmp-tag{font-size:12px;font-weight:700;color:var(--dep-text);margin-bottom:11px}
.dep-cmp-tag span{color:var(--dep-muted);font-weight:600}
.dep-cmp-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--dep-muted);margin-bottom:7px}
.dep-cmp-row:last-child{margin-bottom:0}
.dep-cmp-row b{color:var(--dep-text);font-weight:700;white-space:nowrap}
.dep-cmp-delta{font-size:13px;color:var(--dep-muted);margin:14px 0 0;line-height:1.5}
.dep-cmp-delta:empty{display:none}

/* Фокус-видимость (a11y) */
.dep-app button:focus-visible,.dep-app input:focus-visible{outline:2px solid var(--dep-accent);outline-offset:2px}
.dep-range:focus-visible{outline:2px solid var(--dep-accent);outline-offset:4px}

/* Sticky-результат на мобиле — итог остаётся виден при прокрутке */
@media (max-width:840px){
  .dep-hero{position:sticky;top:8px;z-index:5}
}

/* Контент-бэнд — КАНОН DESIGN-DNA-TOOLS (как /instrumenty/ipo-calendar/): H2 по центру; ссылки #2867db/550 без подчёркивания, hover — смена цвета на зелёный #7bb347 (без подчёркивания и черты). FAQ-ссылки остаются зелёными (.bh-tool-faq__answer a !important), подчёркивание снимается этим же правилом */
.bh-tool-content-band .bh-tool-content-title{text-align:center;margin:38px 0 15px}
.bh-tool-content-band .bh-tool-article:first-child .bh-tool-content-title{margin-top:2px}
.bh-tool-content-band .bh-tool-content-inner a{color:#2867db;font-weight:550;text-decoration:none;border-bottom:none;transition:color .2s ease}
.bh-tool-content-band .bh-tool-content-inner a:hover,.bh-tool-content-band .bh-tool-content-inner a:focus{color:#7bb347;font-weight:550;text-decoration:none}