/* P2P-калькулятор чистой доходности BUYHOLD — P2P_CALC_2026_07_22
   Тёмная trader-terminal карточка, самодостаточна внутри светлой статьи.
   Визуальная система — канон bh-tokens (как deposit-calc). Сигнатура — «водопад доходности».
   Палитра не изобретается: зелёный = осталось/чистыми, красный = потеряно, нейтраль = база. */

.p2p-app{
  --p2p-bg:var(--bh-bg-dark,#131722);
  --p2p-line:#2b3340;
  --p2p-text:#e8ecf2;
  --p2p-muted:#9ca3af;
  --p2p-dim:#6b7382;
  --p2p-accent:var(--bh-accent,#95ce5a);
  --p2p-pos:var(--bh-chart-pos,#10b981);
  --p2p-neg:var(--bh-chart-neg,#f43f5e);
  --p2p-warn:#f5a623;
  --p2p-surface:linear-gradient(180deg,#232b39 0%,#191e28 100%);
  --p2p-hairline:rgba(255,255,255,.07);
  --p2p-hairline-hi:rgba(255,255,255,.16);
  --p2p-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);
  --p2p-ui:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-family:var(--p2p-ui);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--p2p-text);
  background:var(--p2p-bg);
  border:1px solid var(--p2p-line);
  border-radius:18px;
  padding:22px;
  max-width:1100px;
  margin:28px auto;
  box-sizing:border-box;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
.p2p-app *,.p2p-app *::before,.p2p-app *::after{box-sizing:border-box}
.p2p-app :where(div,span,label){min-width:0}

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

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

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

.p2p-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p2p-row2 .p2p-field{margin-bottom:16px;min-width:0}
@media (max-width:560px){.p2p-row2{grid-template-columns:1fr}}

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

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

/* ── info-тултип ── */
.p2p-info{width:16px;height:16px;line-height:14px;border-radius:50%;border:1px solid var(--p2p-dim);background:transparent;color:var(--p2p-dim);font-size:11px;font-style:italic;font-weight:700;cursor:help;margin-left:5px;padding:0;position:relative}
.p2p-info:hover::after,.p2p-info:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:150%;transform:translateX(-50%);width:250px;background:#0b0e13;color:var(--p2p-text);font-size:12px;font-weight:400;font-style:normal;line-height:1.5;padding:10px 12px;border-radius:8px;border:1px solid var(--p2p-hairline);z-index:6;box-shadow:0 8px 24px rgba(0,0,0,.45)}
@media (max-width:560px){.p2p-info:hover::after,.p2p-info:focus-visible::after{width:200px;left:auto;right:0;transform:none}}

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

/* ── Кнопки действий ── */
.p2p-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.p2p-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;font-family:var(--p2p-ui);font-size:13px;font-weight:700;padding:11px 14px;cursor:pointer;border:1px solid transparent;transition:.15s}
.p2p-btn--ghost{flex:1 1 0;background:rgba(255,255,255,.03);border-color:var(--p2p-hairline);color:var(--p2p-muted)}
.p2p-btn--ghost:hover{color:var(--p2p-text);border-color:var(--p2p-hairline-hi)}

/* ── Результат ── */
.p2p-result{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Hero: реальная чистая доходность + заявлено */
.p2p-hero{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:16px 18px;background:radial-gradient(130% 150% at 100% 0%,rgba(149,206,90,.09),transparent 55%),linear-gradient(180deg,#242c3a,#171c25);border:1px solid var(--p2p-hairline);border-radius:16px;padding:24px;box-shadow:var(--p2p-elev)}
.p2p-hero[data-p2p-tone="warn"]{background:radial-gradient(130% 150% at 100% 0%,rgba(245,166,35,.12),transparent 55%),linear-gradient(180deg,#242c3a,#171c25)}
.p2p-hero[data-p2p-tone="neg"]{background:radial-gradient(130% 150% at 100% 0%,rgba(244,63,94,.12),transparent 55%),linear-gradient(180deg,#242c3a,#171c25)}
.p2p-hero-main{flex:1;min-width:0}
.p2p-hero-label{font-size:11px;color:var(--p2p-dim);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:11px}
.p2p-hero-value{font-family:var(--p2p-ui);font-variant-numeric:tabular-nums;font-size:46px;font-weight:700;color:var(--p2p-pos);line-height:1;letter-spacing:-1.6px}
.p2p-hero[data-p2p-tone="warn"] .p2p-hero-value{color:var(--p2p-warn)}
.p2p-hero[data-p2p-tone="neg"] .p2p-hero-value{color:var(--p2p-neg)}
.p2p-hero-value .p2p-u{font-family:var(--p2p-ui);font-size:22px;color:var(--p2p-muted);margin-left:8px;font-weight:600;letter-spacing:0}
.p2p-hero-gain{margin-top:12px;font-size:16px;font-weight:700;color:var(--p2p-text)}
.p2p-hero-gain:empty{display:none}
.p2p-hero-meta{margin-top:5px;font-size:13px;color:var(--p2p-muted);line-height:1.45}
.p2p-hero-meta:empty{display:none}
.p2p-hero-stated{flex:0 0 auto;text-align:center;padding:12px 16px;background:rgba(0,0,0,.22);border:1px solid var(--p2p-hairline);border-radius:12px}
.p2p-hs-label{display:block;font-size:10px;color:var(--p2p-dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.p2p-hs-value{display:block;font-size:24px;font-weight:700;color:var(--p2p-muted);letter-spacing:-.5px}
@media (max-width:560px){.p2p-hero-value{font-size:34px;letter-spacing:-1px}.p2p-hero{padding:20px}.p2p-hero-stated{margin-top:2px}}

/* ── СИГНАТУРА: водопад доходности ── */
.p2p-waterfall{background:var(--p2p-surface);border:1px solid var(--p2p-hairline);border-radius:14px;padding:16px 18px;box-shadow:var(--p2p-elev)}
.p2p-wf-title{font-size:11px;color:var(--p2p-dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.p2p-wf-row{display:grid;grid-template-columns:132px 1fr auto;align-items:center;gap:12px;margin-bottom:11px}
.p2p-wf-row:last-child{margin-bottom:0}
.p2p-wf-label{font-size:12.5px;color:var(--p2p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p2p-wf-row.is-total .p2p-wf-label{color:var(--p2p-text);font-weight:700}
.p2p-wf-track{position:relative;height:22px;background:rgba(0,0,0,.25);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.p2p-wf-fill{position:absolute;left:0;top:3px;bottom:3px;border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.p2p-wf-fill.kept{background:#586173}
.p2p-wf-fill.total{background:linear-gradient(90deg,#86c047,var(--p2p-pos))}
.p2p-wf-fill.stated{background:linear-gradient(90deg,#5a95ce,#7daadb)}
.p2p-wf-lost{position:absolute;top:3px;bottom:3px;background:repeating-linear-gradient(135deg,rgba(244,63,94,.85),rgba(244,63,94,.85) 6px,rgba(244,63,94,.6) 6px,rgba(244,63,94,.6) 12px);border-radius:0 4px 4px 0;transition:.4s cubic-bezier(.4,0,.2,1)}
.p2p-wf-val{font-size:13px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.p2p-wf-val.pos{color:var(--p2p-pos)}
.p2p-wf-val.neg{color:var(--p2p-neg)}
.p2p-wf-val.base{color:var(--p2p-text)}
.p2p-wf-val.stated{color:#7daadb}
.p2p-wf-row.is-total{margin-top:12px;padding-top:12px;border-top:1px solid var(--p2p-hairline)}
.p2p-wf-row.is-total .p2p-wf-val{font-size:16px}
@media (max-width:520px){.p2p-wf-row{grid-template-columns:96px 1fr auto;gap:9px}.p2p-wf-label{font-size:11.5px;white-space:normal}}

/* ── Сравнение p2p vs вклад ── */
.p2p-compare{background:var(--p2p-surface);border:1px solid var(--p2p-hairline);border-radius:14px;padding:16px 18px;box-shadow:var(--p2p-elev)}
.p2p-compare[hidden]{display:none}
.p2p-cmp-title{font-size:11px;color:var(--p2p-dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.p2p-cmp-bar{margin-bottom:10px}
.p2p-cmp-bar:last-child{margin-bottom:0}
.p2p-cmp-seg{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:96px;height:34px;padding:0 13px;border-radius:8px;transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
.p2p-cmp-seg--p2p{background:linear-gradient(90deg,rgba(149,206,90,.32),rgba(149,206,90,.16));border:1px solid rgba(149,206,90,.4)}
.p2p-cmp-seg--dep{background:linear-gradient(90deg,rgba(90,149,206,.30),rgba(90,149,206,.15));border:1px solid rgba(90,149,206,.4)}
.p2p-cmp-seg--p2p.is-loss{background:linear-gradient(90deg,rgba(244,63,94,.32),rgba(244,63,94,.16));border-color:rgba(244,63,94,.4)}
.p2p-cmp-seg-lab{font-size:12px;font-weight:700;color:var(--p2p-text);white-space:nowrap}
.p2p-cmp-seg-val{font-size:13px;font-weight:700;color:var(--p2p-text);white-space:nowrap;font-variant-numeric:tabular-nums}

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

/* a11y focus */
.p2p-app button:focus-visible,.p2p-app input:focus-visible{outline:2px solid var(--p2p-accent);outline-offset:2px}
.p2p-range:focus-visible{outline:2px solid var(--p2p-accent);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .p2p-wf-fill,.p2p-wf-lost,.p2p-cmp-seg{transition:none}
}