/* ============================================================
   BUYHOLD — Калькулятор погашения долгов (снежный ком vs лавина)
   Префикс .dc- · изоляция под #dc-app.tool-app · токены bh-tokens.css
   Маркер: DEBT_CALC_2026_07_11
   ============================================================ */

#dc-app{
  --dc-aval:#5a95ce; --dc-aval-soft:rgba(90,149,206,.14);
  --dc-snow:#f59e0b; --dc-snow-soft:rgba(245,158,11,.14);
  --dc-card-a:#1e2433; --dc-card-b:#191e28;
  --dc-deep:#0d1117; --dc-border:rgba(255,255,255,.07); --dc-border-s:#2a2e39;
  --dc-txt:#fff; --dc-soft:#d1d4dc; --dc-muted:#9ca3af; --dc-faint:#6b7280;
  background:var(--bh-bg-dark,#131722);
  color:var(--dc-soft);
  font-family:var(--bh-font-body,'DM Sans',system-ui,sans-serif);
  font-size:15px; line-height:1.5;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  padding:26px 0 8px;
}
#dc-app *{box-sizing:border-box}
#dc-app .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.dc-inner{max-width:1320px; margin:0 auto; padding:0 24px}

.dc-grid{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:22px; align-items:start}
@media (max-width:920px){ .dc-grid{grid-template-columns:1fr} }

.dc-card{
  background:linear-gradient(180deg,var(--dc-card-a),var(--dc-card-b));
  border:1px solid var(--dc-border); border-radius:var(--bh-radius-md,14px);
  padding:20px;
}
.dc-card + .dc-card{margin-top:18px}
.dc-panel{position:sticky; top:16px}
@media (max-width:920px){ .dc-panel{position:static} }

/* ---- method toggle ---- */
.dc-seg{display:flex; gap:4px; background:var(--dc-deep); border:1px solid var(--dc-border-s); border-radius:var(--bh-radius-sm,10px); padding:4px; margin-bottom:20px}
.dc-seg button{flex:1; appearance:none; border:0; background:transparent; color:var(--dc-muted); font:inherit; font-weight:600; font-size:13.5px; padding:9px 6px; border-radius:7px; cursor:pointer; transition:.15s}
.dc-seg button:hover{color:var(--dc-soft)}
.dc-seg button.on{background:var(--bh-accent,#95ce5a); color:#0f1613}
.dc-seg button:focus-visible{outline:2px solid var(--bh-accent,#95ce5a); outline-offset:2px}

/* ---- section label ---- */
.dc-lbl{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--dc-muted); font-weight:600; margin:0 0 10px; display:flex; justify-content:space-between; align-items:center}

/* ---- debt list ---- */
.dc-head,.dc-row{display:grid; grid-template-columns:1.35fr 84px 54px 76px 24px; gap:7px; align-items:center}
.dc-head{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--dc-faint); margin-bottom:7px; padding:0 2px}
.dc-head span:nth-child(n+2){text-align:right}
.dc-row{margin-bottom:8px}
.dc-in{width:100%; background:var(--dc-deep); border:1px solid var(--dc-border-s); border-radius:8px; color:var(--dc-txt); font:inherit; font-size:13.5px; padding:9px; transition:.15s; min-width:0}
.dc-in:focus{outline:0; border-color:var(--bh-accent,#95ce5a); box-shadow:0 0 0 3px rgba(149,206,90,.12)}
.dc-in.r{text-align:right}
.dc-in::placeholder{color:var(--dc-faint)}
.dc-x{appearance:none; border:0; background:transparent; color:var(--dc-faint); cursor:pointer; font-size:17px; line-height:1; padding:4px; border-radius:6px; transition:.15s}
.dc-x:hover{color:var(--bh-chart-neg,#f43f5e); background:rgba(244,63,94,.1)}
.dc-add{width:100%; margin-top:4px; appearance:none; background:transparent; border:1px dashed var(--dc-border-s); color:var(--bh-accent,#95ce5a); font:inherit; font-weight:600; font-size:13.5px; padding:10px; border-radius:9px; cursor:pointer; transition:.15s}
.dc-add:hover{border-color:var(--bh-accent,#95ce5a); background:rgba(149,206,90,.06)}

/* ---- budget ---- */
.dc-budget{margin-top:22px; padding-top:20px; border-top:1px solid var(--dc-border)}
.dc-budget-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dc-budget-in{position:relative; width:170px}
.dc-budget-in input{padding-right:26px; text-align:right; font-size:16px; font-weight:600}
.dc-budget-in .dc-cur{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--dc-muted); font-size:14px}
.dc-range{width:100%; margin-top:14px; accent-color:var(--bh-accent,#95ce5a); height:4px}
.dc-hint{font-size:12.5px; color:var(--dc-muted); margin-top:12px; line-height:1.5}
.dc-hint b{color:var(--dc-soft); font-weight:600}
.dc-warn{margin-top:12px; padding:10px 12px; background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.3); border-radius:9px; color:#ffb4bf; font-size:12.5px; display:none}
.dc-warn.show{display:block}

/* ---- result hero ---- */
.dc-rhero{padding-bottom:18px; border-bottom:1px solid var(--dc-border); margin-bottom:18px}
.dc-rhero-lbl{font-size:13px; color:var(--dc-muted); margin-bottom:8px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.dc-tag{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.02em}
.dc-tag.aval{background:var(--dc-aval-soft); color:#a9cdf0}
.dc-tag.snow{background:var(--dc-snow-soft); color:#fbd38d}
.dc-rhero-val{font-size:clamp(32px,5vw,46px); font-weight:700; color:var(--dc-txt); line-height:1.04; letter-spacing:-.015em}
.dc-rhero-sub{color:var(--dc-muted); font-size:14px; margin-top:8px}
.dc-metrics{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
.dc-metric{background:var(--dc-deep); border:1px solid var(--dc-border); border-radius:var(--bh-radius-sm,10px); padding:13px 15px}
.dc-metric .m-lbl{font-size:11px; color:var(--dc-muted); text-transform:uppercase; letter-spacing:.04em}
.dc-metric .m-val{font-size:19px; font-weight:600; color:var(--dc-txt); margin-top:5px}
.dc-metric .m-val.neg{color:var(--bh-chart-neg,#f43f5e)}

/* ---- comparison ---- */
.dc-cmp{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.dc-cmp-col{border:1px solid var(--dc-border); border-radius:var(--bh-radius-sm,10px); padding:15px; background:var(--dc-deep); position:relative; overflow:hidden}
.dc-cmp-col::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
.dc-cmp-col.aval::before{background:var(--dc-aval)}
.dc-cmp-col.snow::before{background:var(--dc-snow)}
.dc-cmp-name{font-size:14px; font-weight:700; color:var(--dc-txt); display:flex; align-items:center; gap:8px; margin-bottom:12px}
.dc-dot{width:9px; height:9px; border-radius:3px; flex:none}
.dc-cmp-col.aval .dc-dot{background:var(--dc-aval)}
.dc-cmp-col.snow .dc-dot{background:var(--dc-snow)}
.dc-cmp-line{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:6px 0; font-size:13px; border-top:1px solid var(--dc-border)}
.dc-cmp-line:first-of-type{border-top:0}
.dc-cmp-line span{color:var(--dc-muted)}
.dc-cmp-line b{color:var(--dc-txt); font-weight:600; font-size:14px; text-align:right}
.dc-insights{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.dc-insight{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45; padding:11px 13px; border-radius:var(--bh-radius-sm,10px)}
.dc-insight .ic{flex:none; width:18px; height:18px; margin-top:1px}
.dc-insight.save{background:rgba(16,185,129,.09); border:1px solid rgba(16,185,129,.22); color:#8ff0cf}
.dc-insight.save b{color:var(--bh-chart-pos,#10b981)}
.dc-insight.motiv{background:var(--dc-snow-soft); border:1px solid rgba(245,158,11,.24); color:#fbd8a0}
.dc-insight.motiv b{color:var(--dc-snow)}

/* ---- chart ---- */
.dc-chart-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px}
.dc-chart-title{font-size:14.5px; font-weight:600; color:var(--dc-txt)}
.dc-legend{display:flex; gap:16px; font-size:12.5px; color:var(--dc-muted)}
.dc-legend i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle}
.dc-chart{width:100%; height:auto; display:block; overflow:visible}
.dc-ax{fill:var(--dc-faint); font-size:11px}
.dc-gl{stroke:var(--dc-border); stroke-width:1}

/* ---- schedule ---- */
.dc-sched-title{font-size:14.5px; font-weight:600; color:var(--dc-txt); margin-bottom:14px}
.dc-step{display:flex; align-items:center; gap:13px; padding:11px 0; border-top:1px solid var(--dc-border)}
.dc-step:first-child{border-top:0}
.dc-step-n{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff}
.dc-step-body{flex:1; min-width:0}
.dc-step-name{font-size:14px; color:var(--dc-txt); font-weight:600}
.dc-step-meta{font-size:12.5px; color:var(--dc-muted); margin-top:2px}
.dc-step-when{font-size:13px; color:var(--dc-soft); font-weight:600; text-align:right; white-space:nowrap}
.dc-step-when small{display:block; color:var(--dc-faint); font-weight:400; font-size:11px}

.dc-note{font-size:12px; color:var(--dc-faint); line-height:1.55; margin-top:20px; padding-top:16px; border-top:1px solid var(--dc-border)}
.dc-hidden{display:none !important}
@media (prefers-reduced-motion:reduce){ #dc-app *{transition:none !important} }