@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
/* ---- tokens -------------------------------------------------------------
   tipo: escala 1.25 sobre 15px  -> 12 13 15 17 19 24 30 38
   espaco: 4 8 12 16 24 32 48     raio: 6 12
   cor: fundo / superficie / tinta / tinta-2 / mudo / linha / acao / bom / aviso / ruim */
:root{
  --f-ui:Manrope,"Segoe UI",system-ui,sans-serif; --f-num:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --t-micro:12px;--t-small:13px;--t-body:15px;--t-lead:17px;--t-title:19px;--t-h2:24px;--t-h1:30px;--t-display:38px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--r1:6px;--r2:12px;
  --bg:#EEF1F4;--sf:#FFFFFF;--ink:#16202A;--ink2:#4B5865;--mut:#66727F;--ln:#D5DCE3;
  --ac:#1F4FD8;--acs:#E3E9FB;--bom:#157A4A;--boms:#DDF2E6;--aviso:#8F5A0C;--avisos:#F7EBD3;--ruim:#B23A2F;--ruims:#F8E1DE;--sel:#EEF2FC;
  --foco:#1F4FD8}
@media(prefers-color-scheme:dark){:root{--bg:#0C1118;--sf:#151C26;--ink:#ECF0F5;--ink2:#B3BEC9;--mut:#8D99A7;--ln:#25303D;
  --ac:#8FB0FF;--acs:#20305A;--bom:#5FD99A;--boms:#163A2B;--aviso:#E8B25A;--avisos:#3F311A;--ruim:#F4948A;--ruims:#42221E;--sel:#1B2A45;--foco:#8FB0FF}}
/* ---- base ---------------------------------------------------------------- */
*{box-sizing:border-box}html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-body)/1.5 var(--f-ui)}
a{color:var(--ac)}.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:.93em}
h1{font-size:var(--t-h1);margin:0 0 var(--s1);font-weight:800;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
h1+p{margin:0 0 var(--s5);color:var(--ink2);font-size:var(--t-lead);max-width:64ch}
h2{font-size:var(--t-title);margin:var(--s6) 0 var(--s3);font-weight:700;letter-spacing:-.01em}
p{max-width:70ch}.sub{color:var(--mut);font-size:var(--t-small)}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:var(--r1)}
.pular{position:absolute;left:-999px;top:8px;background:var(--sf);color:var(--ink);padding:var(--s2) var(--s3);border-radius:var(--r1);z-index:10}
.pular:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---- estrutura: menu lateral + conteudo ------------------------------------ */
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
nav.lado{background:var(--sf);border-right:1px solid var(--ln);padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s1);position:sticky;top:0;height:100vh}
nav.lado .marca{font-weight:800;font-size:var(--t-title);letter-spacing:-.01em;margin:0 var(--s2) var(--s5);display:flex;align-items:center;gap:10px}
nav.lado .marca i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--ac);transform:rotate(45deg)}
nav.lado a{display:block;padding:10px var(--s3);border-radius:var(--r1);color:var(--ink2);text-decoration:none;font-weight:600;min-height:40px}
nav.lado a:hover{background:var(--bg);color:var(--ink)}nav.lado a.ativo,nav.lado a[aria-current=page]{background:var(--acs);color:var(--ac)}
nav.lado .fim{margin-top:auto;padding:var(--s3) var(--s3) 0;font-size:var(--t-small);color:var(--mut);border-top:1px solid var(--ln)}
nav.lado .fim b{display:block;color:var(--ink);font-weight:700}nav.lado .fim a{display:inline;padding:0;min-height:0;font-weight:500;color:var(--mut)}
main{padding:var(--s6) var(--s6) 64px;max-width:1340px;min-width:0}
/* ---- componentes ----------------------------------------------------------- */
.pill{display:inline-block;padding:3px 9px;border-radius:var(--s1);font-size:var(--t-micro);font-weight:700;white-space:nowrap;line-height:1.5}
.on{background:var(--boms);color:var(--bom)}.off{background:var(--avisos);color:var(--aviso)}.no{background:var(--ruims);color:var(--ruim)}
.neu{background:var(--ln);color:var(--ink2)}.ac{background:var(--acs);color:var(--ac)}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r2);padding:var(--s4) var(--s5)}
.tw{overflow-x:auto;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r2)}
table{width:100%;border-collapse:collapse;font-size:14px}caption{text-align:left}
th{text-align:left;font-size:var(--t-small);color:var(--mut);padding:10px var(--s3);border-bottom:1px solid var(--ln);font-weight:600;white-space:nowrap}
td{padding:10px var(--s3);border-bottom:1px solid var(--ln);vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:0}tr.sel td{background:var(--sel)}td .sub{white-space:nowrap}
.bom{color:var(--bom)}.ruim{color:var(--ruim)}.aviso{color:var(--aviso)}.mut{color:var(--mut)}
label{display:block;font-size:var(--t-small);color:var(--ink2);margin:var(--s3) 0 var(--s1);font-weight:600}
input[type=text],input[type=password],input[type=number]{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--ln);border-radius:var(--r1);
  background:var(--bg);color:var(--ink);font:14px var(--f-num)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px var(--s4);border:0;border-radius:var(--r1);
  background:var(--ac);color:#fff;font:700 14px var(--f-ui);cursor:pointer;text-decoration:none}
button.sec,.btn.sec{background:transparent;color:var(--ac);border:1px solid var(--ac)}
button.perigo{background:transparent;color:var(--ruim);border:1px solid var(--ruim)}
button.mini{min-height:36px;padding:6px var(--s3);font-size:var(--t-small)}button:disabled{opacity:.45;cursor:default}
form button{margin-top:var(--s4)}form.inline{display:inline}form.inline button{margin:0}
.msg{padding:10px 14px;border-radius:var(--r1);margin:0 0 var(--s4);font-size:14px}
.msg.ok{background:var(--boms);color:var(--bom)}.msg.erro{background:var(--ruims);color:var(--ruim)}.msg.aviso{background:var(--avisos);color:var(--aviso)}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tile{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.tile .k{font-size:var(--t-small);color:var(--mut)}.tile .v{font-size:var(--t-h2);margin-top:2px;font-weight:700}.tile .s{font-size:var(--t-small);color:var(--mut);margin-top:2px}
.cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3)}.cfg label{margin-top:0}.cfg .s{font-size:var(--t-micro);color:var(--mut);margin-top:3px}
.sw{display:flex;align-items:center;gap:var(--s2);font-size:14px;margin-top:var(--s2);color:var(--ink);font-weight:500;min-height:40px}.sw input{width:20px;height:20px;accent-color:var(--ac)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.log{max-height:320px;overflow:auto;font-size:var(--t-small);line-height:1.6}.log div{padding:1px 0}.log .t{color:var(--mut);margin-right:var(--s2)}
details{margin-top:var(--s5);color:var(--ink2);font-size:14px}summary{cursor:pointer;color:var(--mut);font-size:var(--t-small);min-height:32px;display:flex;align-items:center}
/* barra de margem: custo e venda na mesma regua, verde quando sobra, vermelho quando falta */
.mg{display:inline-flex;align-items:center;gap:var(--s2)}.mg .bar{position:relative;width:110px;height:8px;border-radius:4px;background:var(--ln);overflow:hidden}
.mg .bar i{position:absolute;top:0;height:100%}.mg .bar .c{background:var(--mut)}.mg .bar .l{background:var(--bom)}.mg .bar .p{background:var(--ruim)}
/* ---- responsivo ------------------------------------------------------------ */
@media(max-width:820px){.app{grid-template-columns:1fr}
  nav.lado{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--ln);padding:10px var(--s3);gap:2px}
  nav.lado .marca{margin:0 10px 6px var(--s1);width:100%}nav.lado a{padding:8px 10px}
  nav.lado .fim{margin:0 0 0 auto;border:0;padding:0 4px;width:auto;display:flex;gap:10px;align-items:center}nav.lado .fim b{display:inline}
  nav.lado .fim a{display:inline-flex;align-items:center;min-height:40px;padding:0 8px}
  main{padding:var(--s5) var(--s4) 56px}.two{grid-template-columns:1fr}h1{font-size:var(--t-h2)}h1+p{font-size:var(--t-body)}}