:root{
  --bg:#F5F5F7; --surface:#FFFFFF; --surface2:#FBFBFD;
  --ink:#1D1D1F; --ink2:#6E6E73; --ink3:#AEAEB2;
  --hair:#E5E5EA; --hair2:#D2D2D7;
  --accent:#0071E3; --accent-tint:rgba(0,113,227,.10);
  --pos:#1D8A3E; --pos-bg:rgba(52,199,89,.14);
  --warn:#B25000; --warn-bg:rgba(255,159,10,.15);
  --neg:#C22B22; --neg-bg:rgba(255,59,48,.13);
  --seg:#E9E9EB; --seg-active:#FFFFFF;
  --input-focus:rgba(0,113,227,.08);
  --mat:rgba(245,245,247,.78);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --c1:#8A5BA8; --c2:#C4622D; --c3:#3A72AB; --c4:#35845C; --c5:#5F63AE; --c6:#B3872E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:#1C1C1E; --surface2:#161618;
    --ink:#F5F5F7; --ink2:#98989D; --ink3:#636366;
    --hair:#2C2C2E; --hair2:#3A3A3C;
    --accent:#0A84FF; --accent-tint:rgba(10,132,255,.16);
    --pos:#30D158; --pos-bg:rgba(48,209,88,.16);
    --warn:#FFB340; --warn-bg:rgba(255,159,10,.16);
    --neg:#FF6961; --neg-bg:rgba(255,69,58,.16);
    --seg:#2C2C2E; --seg-active:#636366;
    --input-focus:rgba(10,132,255,.14);
    --mat:rgba(0,0,0,.72);
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --c1:#9A6FB5; --c2:#C97A3F; --c3:#4E90D1; --c4:#4BA470; --c5:#7D80CC; --c6:#B3842D;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1C1C1E; --surface2:#161618;
  --ink:#F5F5F7; --ink2:#98989D; --ink3:#636366;
  --hair:#2C2C2E; --hair2:#3A3A3C;
  --accent:#0A84FF; --accent-tint:rgba(10,132,255,.16);
  --pos:#30D158; --pos-bg:rgba(48,209,88,.16);
  --warn:#FFB340; --warn-bg:rgba(255,159,10,.16);
  --neg:#FF6961; --neg-bg:rgba(255,69,58,.16);
  --seg:#2C2C2E; --seg-active:#636366;
  --input-focus:rgba(10,132,255,.14);
  --mat:rgba(0,0,0,.72);
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --c1:#9A6FB5; --c2:#C97A3F; --c3:#4E90D1; --c4:#4BA470; --c5:#7D80CC; --c6:#B3842D;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1280px; margin:0 auto; padding:0 16px 72px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--mat); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.topbar .inner{max-width:1280px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px}
.topbar h1{font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar h1 small{font-weight:400; color:var(--ink2); font-size:13px; margin-left:8px}
.savestat{font-size:12px; color:var(--ink2); white-space:nowrap}
.btn{
  appearance:none; border:0; cursor:pointer; font:inherit;
  background:var(--accent); color:#fff; font-size:14px; font-weight:600;
  padding:7px 16px; border-radius:980px;
  transition:transform .1s ease-out, opacity .15s;
}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.45; cursor:default}
.scroll-edge{height:1px; background:linear-gradient(to bottom, rgba(0,0,0,.08), transparent)}

/* ---------- banner rascunho ---------- */
.banner{
  display:flex; align-items:center; gap:10px; margin:12px 0 0;
  background:var(--warn-bg); color:var(--ink);
  border-radius:12px; padding:10px 14px; font-size:13px;
}
.banner b{color:var(--warn)}
.banner .sp{flex:1}
.banner button{appearance:none;border:0;background:none;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;padding:4px 6px}

/* ---------- HERO: linha de P&L ---------- */
.hero{
  display:grid; grid-template-columns:1.25fr 1fr 1.05fr 1fr .8fr;
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow);
  margin:16px 0 8px; overflow:hidden;
}
.hb{padding:14px 16px; border-left:1px solid var(--hair)}
.hb:first-child{border-left:0}
.hb .l{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.hb .v{font-size:21px; font-weight:600; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums}
.hb .v small{font-size:12px; font-weight:500; color:var(--ink2)}
.hb.big .v{font-size:32px; line-height:1.05; letter-spacing:-.025em}
.hb .s{font-size:12px; color:var(--ink2); margin-top:3px; font-variant-numeric:tabular-nums}
.meter{position:relative; height:4px; border-radius:2px; background:var(--hair); margin-top:9px; overflow:hidden}
.meter i{position:absolute; inset:0 auto 0 0; border-radius:2px; background:var(--accent); transition:width .35s cubic-bezier(.3,.9,.4,1)}
.meter.warn i{background:var(--warn)} .meter.bad i{background:var(--neg)} .meter.ok i{background:var(--pos)}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 9px; border-radius:980px; white-space:nowrap}
.chip.ok{background:var(--pos-bg); color:var(--pos)}
.chip.warn{background:var(--warn-bg); color:var(--warn)}
.chip.bad{background:var(--neg-bg); color:var(--neg)}
.chip.mut{background:var(--seg); color:var(--ink2)}
.pos-t{color:var(--pos)} .neg-t{color:var(--neg)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr 1fr}
  .hb{border-top:1px solid var(--hair)}
  .hb:nth-child(1), .hb:nth-child(2){border-top:0}
  .hb:nth-child(odd){border-left:0}
}

/* ---------- segmented ---------- */
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--seg); border-radius:10px; padding:2px; margin:14px 0 16px; position:sticky; top:53px; z-index:15}
.seg button{
  appearance:none; border:0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:500;
  color:var(--ink); background:transparent; padding:7px 4px; border-radius:8px;
  transition:transform .1s ease-out;
}
.seg button:active{transform:scale(.97)}
.seg button[aria-selected="true"]{background:var(--seg-active); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ---------- composição do custo ---------- */
.comp{padding:13px 16px 14px}
.compbar{display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; margin:0 0 12px}
.compbar i{display:block; min-width:3px}
.leg{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:7px 24px; font-size:12.5px}
.leg span{display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; min-width:0}
.leg i{width:9px; height:9px; border-radius:3px; flex:none}
.leg em{font-style:normal; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.leg b{color:var(--ink); font-weight:600}
.leg u{text-decoration:none; color:var(--ink3); width:34px; text-align:right; flex:none}

/* ---------- cards / tabelas ---------- */
.card{background:var(--surface); border-radius:14px; box-shadow:var(--shadow); margin:0 0 14px; overflow:hidden}
.card .hd{display:flex; align-items:center; gap:11px; padding:12px 16px 11px; border-bottom:1px solid var(--hair)}
.icon-sq{width:27px; height:27px; border-radius:7px; flex:none; display:grid; place-items:center; color:#fff; font-size:13.5px; font-weight:700}
.card .hd .ht{flex:1; min-width:0}
.card .hd h2{font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0; line-height:1.25}
.card .hd .hs{font-size:11.5px; color:var(--ink2); margin-top:0}
.card .hd .tot{text-align:right; white-space:nowrap}
.card .hd .tot b{display:block; font-size:17px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.card .hd .tot small{font-size:11px; color:var(--ink2); font-variant-numeric:tabular-nums}
/* card de conta: veste a cor da seção */
.card.sec{box-shadow:var(--shadow), inset 3px 0 0 var(--sc)}
.card.sec .hd{background:color-mix(in srgb, var(--sc) 6%, var(--surface))}
.card.sec .hd .tot b{color:var(--sc)}
/* ---- grade única: todo texto encosta no eixo de 16px ---- */
.tblw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:560px}
th{font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); text-align:left; padding:8px 6px 6px; border-bottom:1px solid var(--hair); white-space:nowrap}
td{padding:9px 6px; border-bottom:1px solid var(--hair); vertical-align:middle}
th:first-child{padding-left:16px}
td:first-child{padding-left:8px} /* + 8px de padding do input = eixo 16px */
td:first-child.noinp{padding-left:16px}
/* coluna Item congelada (estilo planilha): nome sempre visível, números rolam por baixo */
.tblw th:first-child, .tblw td:first-child{position:sticky; left:0; z-index:2; background:var(--surface); box-shadow:inset -1px 0 0 var(--hair); min-width:170px}
.tblw thead th:first-child{z-index:3}
.tblw tfoot td:first-child{background:var(--surface2)}
th:last-child, td:last-child{padding-right:16px}
tr:last-child td{border-bottom:none}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
th.n{padding-right:14px; width:104px}
td.n{padding-right:14px}
td.n.has-in{padding-right:6px} /* + 8px do input = eixo 14px, igual ao header */
th.w-ck{width:48px} th.w-x{width:36px} th.w-q{width:72px}
th.ti{padding-left:14px} /* header de coluna de texto interna alinha com o texto do input (6+8) */
input[type=number].w-sm{width:60px}
input.sm{font-size:12.5px; color:var(--ink2)}
input.sm:focus{color:var(--ink)}
td.val{font-weight:700; font-size:14px}
td.val .was{display:block; font-size:10.5px; font-weight:400; color:var(--ink3); text-decoration:line-through}
/* item desligado (Total = 0): esmaece pra mostrar que não conta na soma */
tr.off td, tr.off input, tr.off td.val{color:var(--ink3)}
tr.off input[type=checkbox], tr.off .rowdel{opacity:.4}
tr.off input:focus{color:var(--ink)}
.sub{display:block; font-size:11.5px; color:var(--ink3); line-height:1.35; margin:1px 0 1px 8px; max-width:340px}
tfoot td{font-weight:600; background:var(--surface2)}
.rowdel{appearance:none;border:0;background:none;color:var(--ink3);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:6px;line-height:1}
.rowdel:hover{color:var(--neg)}
.addrow{display:block; width:100%; text-align:left; appearance:none; border:0; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--accent); padding:10px 16px}
.addrow:active{opacity:.6}

/* progresso de lote */
.prog{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.prog .bar{width:54px; height:4px; border-radius:2px; background:var(--hair); overflow:hidden}
.prog .bar i{display:block; height:100%; border-radius:2px; background:var(--accent)}
.prog.full .bar i{background:var(--pos)}

/* inputs planilha — sem spinner, texto alinhado à grade */
input[type=text], input[type=number]{
  appearance:none; border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:13.5px; padding:5px 8px; border-radius:7px; width:100%;
  font-variant-numeric:tabular-nums;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
input[type=number]{-moz-appearance:textfield; text-align:right; width:88px}
input.nm{font-weight:500; font-size:14px}
input.mut{color:var(--ink2)}
input::placeholder{color:var(--ink3)}
input:hover{background:var(--surface2)}
input:focus{outline:none; background:var(--input-focus); color:var(--ink)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
td.pill-td{width:1%}

.note{font-size:12.5px; color:var(--ink2); padding:10px 16px 13px; border-top:1px solid var(--hair)}
.note b{color:var(--ink)}
.foot{font-size:12px; color:var(--ink3); margin:20px 2px 0; line-height:1.6}
.foot b{color:var(--ink2)}

/* gates */
.gate{display:flex; gap:12px; align-items:flex-start; padding:11px 16px; border-bottom:1px solid var(--hair)}
.gate:last-child{border-bottom:none}
.gate input{margin-top:2px; flex:none}
.gate .g-when{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--accent); text-transform:uppercase; min-width:64px; padding-top:2px}
.gate p{margin:0; font-size:13.5px}
.gate p small{display:block; color:var(--ink2); font-size:12px; margin-top:1px}
.gate.done p{color:var(--ink3); text-decoration:line-through}
.gate.done p small{text-decoration:line-through}

.meta-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 14px; padding:4px 16px 10px}
.meta-grid label{display:block; padding:7px 0; border-bottom:1px solid var(--hair)}
.meta-grid label:last-child{border-bottom:none}
.meta-grid .ml{font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink2)}
.meta-grid input{padding-left:0; font-size:14px; font-weight:500}
.meta-grid input[type=number]{text-align:left; width:100%}

@media (prefers-reduced-motion: reduce){
  *, .meter i, .btn, .seg button{transition:none !important}
}
@media (prefers-reduced-transparency: reduce){
  .topbar{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (max-width:640px){
  .hb.big .v{font-size:26px}
  .sub{max-width:220px}
  th.n{width:84px}
  input[type=number]{width:74px}
  .tblw th:first-child, .tblw td:first-child{min-width:132px}
}
/* ============================================================
   AUMMA Financeiro — telas do app hospedado (login, lista,
   modal de versões) + utilitários que substituem style inline
   (CSP style-src 'self': nenhum style="" em lugar nenhum).
   ============================================================ */

/* utilitários (antes eram style inline no HTML gerado) */
.mt6{margin-top:6px}
.c2{color:var(--ink2)}
th.mw110{min-width:110px} th.mw120{min-width:120px} th.mw150{min-width:150px}
th.mw170{min-width:170px} th.mw180{min-width:180px} th.mw200{min-width:200px}
th.mw240{min-width:240px}
th.w120{width:120px} th.w130{width:130px}
table.tmin720{min-width:720px} table.tmin760{min-width:760px} table.tmin820{min-width:820px}

/* topbar: link de volta */
.topbar .back{font-size:13px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap}
.btn.ghost{background:transparent; color:var(--accent)}

/* login */
.login-page{background:var(--bg)}
.login{min-height:100dvh; display:grid; place-items:center; padding:24px}
.login-card{background:var(--surface); border-radius:16px; box-shadow:var(--shadow); padding:28px 26px 24px; width:min(360px, 92vw)}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); margin:0}
.login-h1{font-size:22px; font-weight:700; letter-spacing:-.02em; margin:2px 0 16px}
.field{margin:0 0 12px}
.field label{display:block; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink2); margin-bottom:4px}
.field input[type=text], .field input[type=password], .field select{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface2); border:1px solid var(--hair2); border-radius:10px; padding:9px 12px;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.login-btn{width:100%; margin-top:4px}
.msg--err{background:var(--neg-bg); color:var(--neg); font-size:13px; border-radius:10px; padding:9px 12px; margin:0 0 12px}

/* lista de planilhas */
.lista-page .wrap{padding-top:16px}
.lnk{color:var(--accent); font-weight:600; text-decoration:none}
.lnk:hover{text-decoration:underline}
.lista-tb td.noinp{padding-top:11px; padding-bottom:11px}
.nova-form{display:grid; grid-template-columns:1fr 260px auto; gap:14px; align-items:end; padding:14px 16px 16px}
@media (max-width:680px){ .nova-form{grid-template-columns:1fr} }

/* modal de versões */
.modal{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.38); display:grid; place-items:center; padding:20px}
.modal-card{background:var(--surface); border-radius:16px; box-shadow:var(--shadow); width:min(440px, 94vw); max-height:80dvh; display:flex; flex-direction:column; overflow:hidden}
.modal-hd{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--hair)}
.modal-hd h2{font-size:15px; font-weight:600; margin:0}
.modal-bd{overflow-y:auto; padding:4px 0}
.ver-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px; border-bottom:1px solid var(--hair); font-size:13.5px; font-variant-numeric:tabular-nums}
.ver-row:last-child{border-bottom:none}
.sm-btn{font-size:12.5px; padding:4px 10px}