/* Simulações tab: Monte Carlo monthly contribution simulator. */
#tab-simulacoes{grid-template-columns:minmax(0,1fr) 300px}

#app .ig{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:10px 0 6px}
#app .fl{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mut-d);font-weight:600}
#app .fl output{font-family:'JetBrains Mono',monospace;color:var(--white);font-weight:700}
#app .fl input{width:100%;accent-color:var(--teal)}
#app .sk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line-d);margin:8px 0}
#app .sk>div{padding:10px 12px;border-right:1px solid var(--line-d)}
#app .sk>div:last-child{border-right:0}
#app .sk span{display:block;font-size:12px;color:var(--mut-d)}
#app .sk b{display:block;margin-top:4px;color:var(--white);font-size:18px;font-family:'JetBrains Mono',monospace}
#app .fan .band-p{fill:color-mix(in srgb,var(--teal) 25%,transparent)}
#app .fan .p50{fill:none;stroke:var(--teal-l);stroke-width:2.6;stroke-linecap:round}
#app .fan .inv{fill:none;stroke:var(--mut-d);stroke-width:2;stroke-dasharray:7 6}
#app .fan .hv{fill:transparent;cursor:crosshair}
#app .fan .hv:hover,#app .fan .hv:focus{fill:color-mix(in srgb,var(--teal) 12%,transparent);outline:none}
#app .fan .lbl2{font-weight:700;fill:var(--white)!important}
#app .lg-band{width:18px;height:10px;background:color-mix(in srgb,var(--teal) 40%,transparent)}
#app .lg-inv{width:18px;height:0;border-top:2px dashed var(--mut-d)}

#app .guide dl{margin:0}
#app .guide dt{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--teal-l);margin-top:14px}
#app .guide dt:first-child{margin-top:0}
#app .guide dd{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--tx-d1)}

@media (max-width:1180px){
  #tab-simulacoes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  #app .ig{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  #app .fl input{height:28px}
  #app .sk b{font-size:16px}
  #app .ah .ctl{width:100%}
  #app .ah .ctl .btn{width:100%}
  #app .sk{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .sk>div:nth-child(2){border-right:0}
  #app .sk>div:nth-child(-n+2){border-bottom:1px solid var(--line-d)}
}
@media (max-width:380px){
  #app .ig{grid-template-columns:minmax(0,1fr)}
}
#app .fl select{width:100%;height:38px;padding:0 8px;border:1px solid var(--line-d);border-radius:2px;background:transparent;color:var(--white);font:inherit;font-size:13.5px;font-weight:600}
#app .fl select option{color:var(--white);background:var(--ink2)}
#app .fl select option:checked{background:var(--ink3)}
#app .fl .btn{width:100%}
#app .gs-status{margin:14px 0;font-size:14px;color:var(--mut-d)}
#app .gs-error{color:var(--dn)}