*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#22366c;
  --green:rgb(5,147,69);--green-bg:rgba(5,147,69,0.08);--green-dk:rgb(3,110,52);
  --blue-lt:#dbe4ff;--bg:#f7f8fa;--white:#fff;--text:#1d1d1d;
  --muted:#878c9f;--border:#e8eaf0;--radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 12px rgba(0,0,0,0.04);
  --font:'Tenor Sans',serif;--mono:'DM Mono',monospace;
  --red:#e03131;--red-bg:#fff5f5;--red-border:#ffc9c9;
}
body{font-family:var(--font);background:var(--bg);color:var(--text)}
.page{margin:0 auto}
h1{font-size:24px;font-weight:700;margin-bottom:24px;letter-spacing:-.3px}
.lang-switcher{display:flex;gap:6px;margin-bottom:20px;justify-content:flex-end}
.lang-btn{padding:6px 14px;border:1.5px solid var(--border);border-radius:20px;background:var(--white);font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s}
.lang-btn.active{background:var(--green-bg);padding: 10px 20px;border-color:var(--green);color:var(--green-dk);font-weight:600}
.main-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:28px 32px;box-shadow:var(--shadow)}
.calc-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;align-items:start}



.field{margin-bottom:26px}
.field:last-child{margin-bottom:0}
.field-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.field-label{font-size:18px;color:var(--text)}
.vbox{display:flex;align-items:center;gap:5px;min-width:130px;width:auto;max-width:110px;background:var(--green-bg);border-radius:6px;padding:5px 10px;border:1px solid transparent;transition:all .2s}
.vbox.err{background:var(--red-bg);border-color:var(--red-border)}
.vbox .suf{font-size:16px;text-align:left;color:var(--green-dk);font-weight:600;white-space:nowrap}
.vbox.err .suf{color:var(--red)}
.vbox input[type="number"]{background:transparent;border:none;outline:none;font-family:'Tenor Sans',serif;font-size:16px;font-weight:600;color:var(--green-dk);text-align:right;flex:1;min-width:25px;width:auto}
.vbox.err input[type="number"]{color:var(--red)}
.vbox input[type="text"]{background:transparent;border:none;outline:none;font-family:'Tenor Sans',serif;font-size:16px;font-weight:600;color:var(--green-dk);text-align:right;flex:1;min-width:25px;width:auto}
.vbox.err input[type="text"]{color:var(--red)}
.field-error{display:none;font-size:12px;color:var(--red);margin-top:6px;padding:7px 11px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:6px;animation:fadeIn .15s ease}
.field-error.show{display:block}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
input[type="range"]{-webkit-appearance:none;width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white);border:2px solid var(--green);border-radius:50%;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.15)}
.range-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2%}
input[type="date"]{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-family:'Tenor Sans',serif;font-size:14px;color:var(--text);background:var(--white);outline:none}
input[type="date"]:focus{border-color:var(--green)}
.bonus-badge{display:inline-flex;align-items:center;padding:6px 14px;border-radius:20px;font-size:14px;font-weight:600;font-family:var(--font)}
.bonus-yes{background:var(--green-bg);border:1.5px solid var(--green);color:var(--green-dk)}
.bonus-no{background:#fff5f5;border:1.5px solid #ffc9c9;color:var(--red)}
.chart-side{display:flex; padding: 0 !important;flex-direction:column;gap:18px;transition:all .3s}
.chart-side.blocked{opacity:.3;pointer-events:none;filter:blur(2px)}
.legend-row{display:flex;gap:20px;font-size:13px;color:var(--muted)}
.leg{display:flex;align-items:center;gap:6px}
.leg-dot{width:28px;height:8px;border-radius:20px}
.donut-wrap{position:relative;width:200px;height:200px}
.donut-wrap svg{width:200px;height:200px;transform:rotate(-90deg)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center .dc-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.donut-center .dc-val{font-size:16px;font-weight:700;font-family:'Tenor Sans',serif;color:var(--text);margin-top:2px;transition:all 0.3s ease}
#arc_fresh,#arc_ofs{transition:stroke-dasharray 0.55s cubic-bezier(0.4,0,0.2,1),stroke-dashoffset 0.55s cubic-bezier(0.4,0,0.2,1);}
.pv-highlight{width:100%;background:var(--green-bg);border:1px solid #b2e8d8;border-radius:8px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.pv-highlight .pvl{font-size:18px;line-height: 1.4 !important;color:var(--green-dk);font-weight:500}
.pvln{font-size: 11px !important;text-align: left !important; line-height: 1.4 !important;
    color: var(--muted) !important; padding-left: 0 !important;}
.pv-highlight .pvv{font-size:20px;font-weight:700;color:var(--green-dk);font-family:'Tenor Sans',serif;transition:all 0.3s ease}
.note-card{width:100%;border-radius:8px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;animation:fadeIn .3s ease}
.note-red{background:#fff5f5;border:1.5px solid #ffc9c9}
.note-green{background:var(--green-bg);border:1.5px solid #b2e8d8}
.note-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.note-title{font-size:13px;font-weight:700;margin-bottom:4px}
.note-red .note-title{color:var(--red)}
.note-green .note-title{color:var(--green-dk)}
.note-body{font-size:13px;line-height:1.5}
.note-red .note-body{color:#c92a2a}
.note-green .note-body{color:var(--green-dk)}
.sources-section{margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.sources-note{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px;padding:12px 14px;background:#f7f8fa;border-radius:8px;border-left:3px solid var(--green)}
.sources-star{color:var(--red);font-weight:700;margin-right:2px}
.sources-links{display:flex;flex-direction:column;gap:8px}
.source-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--white);text-decoration:none;color:var(--navy);font-size:13px;transition:all .2s}
.source-link:hover{border-color:var(--green);background:var(--green-bg);color:var(--green-dk)}
.source-icon{font-size:15px;flex-shrink:0}
.source-text{flex:1;font-weight:500}
.source-arrow{font-size:14px;color:var(--muted);flex-shrink:0;transition:all .2s}
.source-link:hover .source-arrow{color:var(--green);transform:translate(2px,-2px)}
#inp_ipo::-webkit-outer-spin-button,#inp_ipo::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#inp_ipo[type=number]{-moz-appearance:textfield}
.vbox input[type="number"]::-webkit-inner-spin-button{display:none}
.stepper-arrows{display:none;flex-direction:column;gap:0;margin-left:1px}
.vbox:hover .stepper-arrows{display:flex}
.stepper-arrows button{background:#f8f8f8;border:none;cursor:pointer;font-size:10px;color:#555;padding:0;line-height:1;width:16px;text-align:center;transition:opacity .15s}
.vbox.err .stepper-arrows button{color:var(--red)}
.optional-label{font-weight:400;color:#878c9f;font-size:12px;margin-left:4px;}
@media(max-width:580px){
.calc-inner{
    grid-template-columns:1fr !important;
    
}
.bonus-badge{
    font-size: 12px !important;
  }
  .pv-highlight .pvl {
    font-family: 14px !important;
  }
  .vbox .suf{
  font-size: 14px !important;
}
  .pv-highlight .pvv{
    font-size: 16px !important;
  }
.vbox .suf{
  font-size: 16px !important;
}
.field-label{ font-size: 14px; !important }
}

@media(min-width:581px) and (max-width:900px){
  .calc-inner{
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
  }
  .field-label{ font-size: 14px; !important}
  .vbox{ min-width: 100px; }
  .pv-highlight .pvl{ font-size: 14px; !important }
  .pv-highlight .pvv{ font-size: 16px; !important }
  .card{ padding: 20px 20px; }
  .donut-wrap{ width: 160px; height: 160px; }
  .donut-wrap svg{ width: 160px; height: 160px; }
  .pv-highlight .pvl {
    font-family: 14px !important;
  }
  .vbox .suf{
  font-size: 16px !important;
}
  .bonus-badge{
    font-size: 12px !important;
  }
  .pv-highlight .pvv{
    font-size: 16px !important;
  }
}
@media (min-width: 1250px) and (max-width: 1600px) {
  .pvln {
    font-size: 11px !important;
  }
}