/* калькуляторы портфелей */
#app{margin-top:26px}
.cform,.cout{margin-bottom:8px}
.cform h2{margin-top:30px}
.hint{color:var(--dim);font-size:14px;margin:6px 0 14px;max-width:860px}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:minmax(220px,2.3fr) minmax(120px,2fr) 74px 18px 34px;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.row select,.fld select,.fld input[type=number],.pn{width:100%;background:#12151b;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;font-size:14px}
.row input[type=range],.rng input[type=range]{width:100%;accent-color:var(--acc)}
.pn{text-align:right;padding:7px 8px}.pc{color:var(--dim)}
.x{background:none;border:1px solid var(--line);color:var(--dim);border-radius:50%;width:30px;height:30px;font-size:18px;cursor:pointer;line-height:1}.x:hover{color:var(--down);border-color:var(--down)}
.rowbtn{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn2,.btn3,.btn4{font:600 14px Onest,sans-serif;border-radius:99px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 18px}
.btn2:hover,.btn4:hover{border-color:var(--acc);color:var(--acc)}
.btn3{background:var(--acc);color:var(--bg);border-color:var(--acc);padding:13px 30px;font-family:var(--head);font-size:14px}.btn3:hover{filter:brightness(1.1)}
.btn4{display:inline-block;padding:6px 14px;font-size:13px;white-space:nowrap}
.total{margin-left:auto;font-size:14px;color:var(--dim)}.total.ok{color:var(--up)}.total.warn{color:#ffb454}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 18px;align-items:end}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)}.fld small{font-size:12px;color:var(--dim);opacity:.8}
.chk{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--text);cursor:pointer;grid-column:span 2}.chk input{width:18px;height:18px;accent-color:var(--acc)}
.rng{display:flex;gap:10px;align-items:center}
.warnbox{border:1px solid #ffb454;background:rgba(255,180,84,.08);padding:14px 18px;border-radius:14px;color:#ffd9a0;font-size:15px}
.cout .stats{grid-template-columns:repeat(4,1fr)}.stat small{display:block;margin-top:4px;font-size:12px}
.comp .using{margin:0 0 10px;font-size:15px}.comp .classes{margin:12px 0 0;color:var(--dim);font-size:14px;line-height:1.8}
.cbar{display:flex;height:34px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}.cbar span{display:flex;align-items:center;justify-content:center;color:#0a0a0a;font:600 11px Onest,sans-serif;white-space:nowrap;overflow:hidden}
.chead{display:flex;justify-content:space-between;align-items:center;gap:14px}.chead h2{margin:0 0 6px}
.cchart{position:relative}.cchart svg{display:block;width:100%;height:auto}
.cchart .tip{position:absolute;top:8px;background:rgba(13,15,19,.95);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12px;pointer-events:none;line-height:1.5;white-space:nowrap}
.sm{font-size:12px}
.prog{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:10px 0 24px}.prog div{height:100%;width:0;background:var(--acc);transition:width .1s}
details summary{cursor:pointer;color:var(--dim);margin:10px 0}details summary:hover{color:var(--acc)}
h3{font:600 15px/1.2 var(--head);margin:22px 0 8px}
ul{padding-left:20px;color:#d9dce1}li{margin:6px 0}
@media(max-width:900px){.row{grid-template-columns:1fr 70px 16px 30px}.row input[type=range]{grid-column:1/-1;order:5}.cout .stats{grid-template-columns:repeat(2,1fr)}.chk{grid-column:auto}}

.stats.five{grid-template-columns:repeat(5,1fr)}@media(max-width:900px){.stats.five{grid-template-columns:repeat(2,1fr)}}