:root{
  --bg:#0b0f14; --card:#131a22; --card2:#1a232d; --linha:#243040;
  --texto:#eef2f6; --mut:#a9b6c4; --acento:#5eead4; --acento-txt:#06201c;
  --neg:#fb7185; --pos:#5eead4; --raio:22px; --toque:44px;
  --fonte:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texto);font:400 16px/1.45 var(--fonte);padding-bottom:calc(84px + env(safe-area-inset-bottom))}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(22px,5.5vw,30px);font-weight:700}
h3{font-size:17px;font-weight:650;margin-bottom:14px}
b{font-weight:650}
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:rgba(11,15,20,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
@media (prefers-reduced-transparency:reduce){.topo{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.marca{font-weight:800;font-size:18px;letter-spacing:-.02em}
.marca span{color:var(--acento)}
.planos{display:flex;gap:4px;background:var(--card);border-radius:999px;padding:3px}
.plano{min-height:44px;min-width:64px;border:0;border-radius:999px;background:transparent;color:var(--mut);font:600 13px var(--fonte);cursor:pointer;padding:0 12px}
.plano[aria-pressed="true"]{background:var(--acento);color:var(--acento-txt)}
main{width:min(760px,100%);margin:0 auto;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.card{min-width:0;background:var(--card);border-radius:var(--raio);padding:20px;box-shadow:0 18px 44px -26px rgba(0,0,0,.7)}
.hero{background:linear-gradient(160deg,#16222c,#131a22)}
.kicker{margin:0 0 6px;font-size:13px;color:var(--acento);font-weight:650;text-transform:uppercase;letter-spacing:.06em}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.kpis div{background:var(--card2);border-radius:16px;padding:12px}
.kpis span{display:block;font-size:12.5px;color:var(--mut);line-height:1.25}
.kpis b{display:block;font-size:19px;margin-top:4px}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.alertas{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--mut)}
.alertas li{padding:10px 12px;border-radius:14px;background:var(--card2)}
.alertas li.ok{color:var(--texto);border-left:3px solid var(--acento)}
.nota{font-size:13px;color:var(--mut);margin:10px 0 0}
.vazio{color:var(--mut);font-size:14px}
svg{width:100%;height:auto;display:block}
.t-mut{fill:var(--mut)}.t-forte{fill:var(--texto)}
.eixo{stroke:var(--linha);stroke-width:1}
.pizza{display:grid;gap:14px;grid-template-columns:minmax(0,170px) 1fr;align-items:center}
@media (max-width:420px){.pizza{grid-template-columns:1fr}.pizza svg{max-width:200px;margin:auto}}
.legenda{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.legenda li{display:flex;align-items:center;gap:8px}
.legenda li span{flex:1;color:var(--mut)}
.legenda i{width:12px;height:12px;border-radius:4px;flex:none}
.legenda.inline{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.linha-titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.linha-titulo h3{margin:0}
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linha)}
.item small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.acoes{display:flex;align-items:center;gap:8px;flex:none}
.acoes-linha{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.selo{display:inline-block;margin-top:6px;font-size:12px;font-weight:650;color:var(--acento-txt);background:var(--acento);border-radius:999px;padding:3px 10px}
.btn{min-height:var(--toque);min-width:var(--toque);padding:0 18px;border:0;border-radius:999px;background:var(--acento);color:var(--acento-txt);font:650 15px var(--fonte);cursor:pointer;transition:transform .12s ease,filter .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn-sec{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--linha)}
.btn-ico{background:var(--card2);color:var(--mut);padding:0}
:is(.btn,.chip,.tab,.plano,input,select,a):focus-visible{outline:3px solid #fff;outline-offset:2px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:thin}
.chip{flex:none;min-height:var(--toque);padding:0 16px;border:0;border-radius:999px;background:var(--card2);color:var(--texto);font:600 14px var(--fonte);cursor:pointer}
.chip[aria-selected="true"]{background:var(--acento);color:var(--acento-txt)}
.chip-add{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linha);color:var(--mut)}
.qtd{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
input,select{min-height:var(--toque);background:var(--card2);color:var(--texto);border:1.5px solid var(--linha);border-radius:12px;padding:0 12px;font:500 16px var(--fonte);width:100%}
.qtd input{width:90px}
.tabela-rolagem{overflow-x:auto;border-radius:14px;border:1px solid var(--linha)}
table{border-collapse:collapse;width:max-content;min-width:100%;font-size:13.5px}
th,td{padding:6px 8px;text-align:left;white-space:nowrap}
thead th{color:var(--mut);font-weight:600;font-size:12.5px;background:var(--card2)}
tbody th{position:sticky;left:0;background:var(--card);z-index:1;font-weight:650;box-shadow:1px 0 0 var(--linha)}
thead th:first-child{position:sticky;left:0;z-index:2}
tbody td{border-top:1px solid var(--linha)}
td input{width:86px;min-height:44px;padding:0 8px;font-size:15px;text-align:right}
td.min input{border-color:var(--acento);background:rgba(94,234,212,.14);font-weight:700}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(11,15,20,.88);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-top:1px solid var(--linha)}
@media (prefers-reduced-transparency:reduce){.tabs{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.tab{min-height:50px;border:0;border-radius:16px;background:transparent;color:var(--mut);font:650 15px var(--fonte);cursor:pointer}
.tab[aria-selected="true"]{background:var(--card2);color:var(--acento)}
#limite-aviso{margin:12px 16px 0;padding:10px 14px;border-radius:14px;background:var(--card2);color:var(--mut);font-size:13.5px;text-align:center}
dialog{width:min(440px,calc(100% - 24px));border:0;border-radius:24px;padding:22px;background:var(--card);color:var(--texto);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog label{display:grid;gap:6px;margin-bottom:12px;font-size:14px;color:var(--mut)}
.rodape{text-align:center;color:var(--mut);font-size:12.5px;padding:8px 16px}
.rodape button{background:none;border:0;color:var(--mut);text-decoration:underline;font:inherit;cursor:pointer;min-height:44px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}html{scroll-behavior:auto}}
@media (prefers-contrast:more){:root{--mut:#d6dee7;--linha:#5b6b7d}.card{outline:1px solid var(--linha)}}