@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.wrap{
  --bg:#101720; --card:#18202B; --card2:#1E2733; --line:#2B3644; --line2:#3A4757;
  --tx:#E4EAF2; --mut:#8C9AAC; --acc:#6C8CFF;
  --pos:#E2705A; --neg:#F0B26B; --lucro:#4FD1A5; --prej:#FF6B6B; --custo:#5A78A8;
  background:var(--bg); color:var(--tx); min-height:100vh; padding:28px 24px 60px;
  font-family:'Inter Tight',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.wrap *{box-sizing:border-box}
.wrap input,.wrap select,.wrap button{font-family:inherit;color:inherit}
.wrap .num,.wrap .val,.wrap code,.wrap .preco,.wrap strong,.wrap b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;max-width:1240px;margin:0 auto 22px}
.top .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.top h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:4px 0 0}
.top .dot{color:var(--acc)}
.ghost{background:transparent;border:1px solid var(--line2);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--mut);cursor:pointer}
.ghost:hover{color:var(--tx);border-color:var(--acc)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;max-width:1240px;margin:0 auto;align-items:start}
.col-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.sticky{display:flex;flex-direction:column;gap:12px}

.etapa{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0}
.etapa-h{display:flex;gap:12px;padding:16px 18px 12px;align-items:flex-start}
.etapa-n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--acc);border:1px solid var(--line2);border-radius:6px;padding:3px 7px;margin-top:2px}
.etapa-h h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em}
.etapa-h p{font-size:12px;color:var(--mut);margin:4px 0 0;line-height:1.5;max-width:62ch}
.etapa-b{padding:0 18px 14px}
.etapa-f{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:var(--card2);font-size:13px}
.etapa-f strong{font-size:17px;font-weight:600}
.etapa-f.tone-cost strong{color:var(--tx)}

.compra-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--card2);border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
.compra-top label{font-size:13px;color:var(--mut)}

.rows{display:flex;flex-direction:column}
.rows-h{display:grid;grid-template-columns:1.5fr 92px 96px 1.15fr 92px 74px;gap:8px;padding:0 4px 6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.rows-h .r{text-align:right}
.row{display:grid;grid-template-columns:1.5fr 92px 96px 1.15fr 92px 74px;gap:8px;align-items:center;padding:5px 4px;border-top:1px solid var(--line)}
.row-adic{grid-template-columns:1.5fr 92px 96px 1.15fr 92px 74px}
.row-venda{grid-template-columns:1.5fr 128px 1.15fr 92px 74px}
.row-venda + .row-venda,.row:first-child{border-top:1px solid var(--line)}

.wrap .nome{background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 7px;font-size:13px;width:100%;min-width:0}
.wrap .nome:hover{border-color:var(--line2)}
.wrap .nome:focus{outline:none;border-color:var(--acc);background:var(--bg)}
.wrap select{background:var(--card2);border:1px solid var(--line2);border-radius:6px;padding:6px 6px;font-size:12px;width:100%;cursor:pointer}
.wrap select:focus{outline:none;border-color:var(--acc)}
.tipo{display:flex;gap:5px}
.tipo select{width:auto;flex:1}
.op{width:26px;border:1px solid var(--line2);background:var(--card2);border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:0}
.op-\-{color:var(--neg)}
.op-\+{color:var(--pos)}

.numwrap{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:5px 8px;width:100%}
.numwrap:focus-within{border-color:var(--acc)}
.wrap .num{background:transparent;border:none;text-align:right;font-size:13px;width:100%;min-width:0;padding:0}
.wrap .num:focus{outline:none}
.affix{font-size:11px;color:var(--mut);font-family:'IBM Plex Mono',monospace}
.numwrap.big{padding:8px 10px;width:auto;min-width:150px}
.numwrap.big .num{font-size:19px;font-weight:600}
.numwrap.full{width:100%;margin-top:6px}
.entrada{min-width:0}
.st{display:flex;gap:4px}
.st .numwrap{padding:4px 5px}
.st .num{font-size:11px}
.st .affix{font-size:9px}

.val{text-align:right;font-size:13px}
.val.pos{color:var(--pos)}
.val.neg{color:var(--neg)}
.acts{display:flex;gap:3px;justify-content:flex-end}
.acts button{width:21px;height:21px;border:1px solid transparent;background:transparent;color:var(--mut);border-radius:5px;cursor:pointer;font-size:12px;line-height:1;padding:0}
.acts button:hover{border-color:var(--line2);color:var(--tx)}
.add{margin-top:10px;background:transparent;border:1px dashed var(--line2);color:var(--mut);border-radius:8px;padding:8px 12px;font-size:12px;cursor:pointer;width:100%}
.add:hover{border-color:var(--acc);color:var(--acc)}
.soma-venda{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.soma-venda strong{color:var(--neg);font-size:13px}

.lucro{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:none;padding:9px 13px;font-size:12px;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--acc);color:#0B0F16;font-weight:600}
.formula{margin-top:14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.flabel{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.formula code{display:block;margin:7px 0 0;font-size:12px;color:var(--acc);line-height:1.6;word-break:break-word}
.formula p{font-size:12px;color:var(--mut);margin:9px 0 0;line-height:1.55}
.alerta{margin-top:12px;border:1px solid var(--prej);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--prej);line-height:1.5}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.card .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.destaque{border-color:var(--acc)}
.preco{font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:600;letter-spacing:-.02em;margin:6px 0 8px}
.mini{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--mut);font-family:'IBM Plex Mono',monospace}
.usar{margin-top:12px;width:100%;background:var(--acc);border:none;border-radius:8px;padding:9px;font-size:12px;font-weight:600;color:#0B0F16;cursor:pointer}
.usar:disabled{background:var(--line2);color:var(--mut);cursor:not-allowed}

.regua{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:14px 0 10px;background:var(--card2)}
.seg-custo{background:var(--custo)}
.seg-imp{background:var(--neg)}
.seg-lucro{background:var(--lucro)}
.seg-prej{background:var(--prej)}
.legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.legenda li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.legenda b{margin-left:auto;color:var(--tx);font-size:12px}
.legenda i{width:9px;height:9px;border-radius:3px;flex:none}
.k-custo{background:var(--custo)}.k-imp{background:var(--neg)}.k-lucro{background:var(--lucro)}.k-prej{background:var(--prej)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.kpis span{display:block;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.kpis strong{font-size:15px;font-weight:600;color:var(--lucro)}
.kpis strong.bad{color:var(--prej)}

.linha-eq{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);margin-top:9px}
.linha-eq strong{color:var(--tx);font-size:13px}
.linha-eq strong.bad{color:var(--prej)}
.slider-l{display:block;font-size:11px;color:var(--mut);margin:14px 0 6px}
.slider-l b{color:var(--tx)}
.slider{width:100%;accent-color:var(--acc)}
.sim{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sim span{display:block;font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.sim strong{font-size:13px}
.sim strong.bad{color:var(--prej)}
.nota{font-size:11px;color:var(--mut);line-height:1.5;margin:12px 0 0}

.wrap :focus-visible{outline:2px solid var(--acc);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.wrap *{transition:none!important}}
@media (max-width:1080px){
  .cols{grid-template-columns:1fr}
  .sticky{position:static}
}
@media (max-width:720px){
  .wrap{padding:18px 12px 40px}
  .top{align-items:center}
  .rows-h{display:none}
  .row,.row-adic,.row-venda{grid-template-columns:1fr 1fr;gap:8px;padding:12px 4px}
  .row .nome{grid-column:1/-1;font-size:14px;padding:8px 7px}
  .row select{padding:9px 6px;font-size:13px}
  .row .val{grid-column:1/2;text-align:left;font-size:14px}
  .row .acts{grid-column:2/3}
  .row .entrada{grid-column:1/-1}
  .st{flex-wrap:wrap}
  .numwrap{padding:8px 10px}
  .wrap .num{font-size:14px}
  .tipo .op{width:34px;height:34px}
  .acts{gap:6px}
  .acts button{width:32px;height:32px;font-size:15px;border-color:var(--line2)}
  .mc-whats-flutuante{width:50px;height:50px;right:14px;bottom:14px}
  .mc-whats-flutuante svg{width:24px;height:24px}
}