:root{
  /* Cores da marca MTZ (extraídas do logo) */
  --mtz-amarelo:#FACA2B; --mtz-amarelo-esc:#E3B312; --mtz-grafite:#606062;
  --bg:#f1f1ef; --panel:#ffffff; --ink:#26262a; --muted:#6b6b6f; --line:#dcdcd8; --soft:#ececea;
  --accent:var(--mtz-amarelo); --accent-ink:#1d1d20; --accent-txt:#9a7400;
  --topo:#232326; --topo-ink:#d4d4d8;
  --ok:#1d8a4e; --err:#c0322b; --warn:#b07a00;
  --console:#141416; --console-ink:#d0d3d6;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#111113; --panel:#1b1b1e; --ink:#e9e9ec; --muted:#9a9aa1; --line:#2c2c31; --soft:#242428;
         --topo:#0b0b0c; --accent-txt:var(--mtz-amarelo); --console:#0a0a0b; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none !important}

/* topo grafite com o logo MTZ */
header{display:flex;align-items:center;gap:18px;padding:10px 22px;background:linear-gradient(rgba(22,22,24,.72),rgba(22,22,24,.72)),url("fundo-carbono.jpg") center 70%/cover,var(--topo);
  border-bottom:3px solid var(--mtz-amarelo);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo-img{height:30px;width:auto;display:block}
/* logo no cinza original da marca; leve relevo para destacar no fundo escuro, como na arte em carbono */
.logo-img,.login-logo{filter:drop-shadow(0 -1px 0 rgba(255,255,255,.28)) drop-shadow(0 2px 2px rgba(0,0,0,.8))}
.produto-tag{font-weight:800;font-size:13px;letter-spacing:2px;color:var(--accent-ink);background:var(--mtz-amarelo);
  border-radius:4px;padding:2px 7px}
nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
nav button{background:transparent;color:var(--topo-ink);border:0;padding:9px 13px;border-radius:6px;font:inherit;font-weight:600;cursor:pointer}
nav button:hover{color:#fff;background:rgba(255,255,255,.06)}
nav button.ativo{color:var(--mtz-amarelo);box-shadow:inset 0 -2px 0 var(--mtz-amarelo);border-radius:0}
.usuario{font-size:13px;color:var(--topo-ink);white-space:nowrap}
.papel{font-size:11px;text-transform:uppercase;letter-spacing:.6px;border:1px solid #4a4a50;border-radius:999px;padding:1px 8px;margin-left:6px;color:var(--mtz-amarelo)}
header button.mini{color:var(--topo-ink);border-color:#4a4a50}
header button.mini:hover{border-color:var(--mtz-amarelo);color:#fff}

@media (max-width:760px){
  header{flex-wrap:wrap;padding:10px 16px}
  header .usuario{margin-left:auto}
  nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}
}
main{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:16px}
.card h2{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:4px;height:14px;background:var(--mtz-amarelo);border-radius:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}

label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--mtz-amarelo);outline-offset:0;border-color:transparent}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
textarea{min-height:64px;resize:vertical}
input[type=file]{width:100%;font:inherit;color:var(--muted)}
.linha{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.linha > *{flex:1;min-width:140px}
.linha > .fixo{flex:0 0 auto;min-width:0}

button.btn{font:inherit;font-weight:800;letter-spacing:.3px;border:0;border-radius:8px;padding:11px 20px;cursor:pointer;background:var(--accent);color:var(--accent-ink)}
button.btn:hover{background:var(--mtz-amarelo-esc)}
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.sec{font:inherit;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:500}
button.mini{font:inherit;font-size:13px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer}
button.mini:hover,button.sec:hover{border-color:var(--muted)}

.msg{margin-top:10px;font-weight:600;min-height:1.3em;font-size:14px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)} .msg.warn{color:var(--warn)}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:8px 8px}
td{border-bottom:1px solid var(--line);padding:8px;vertical-align:middle}
.tabela{overflow-x:auto}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.selo{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--soft);color:var(--muted)}
.selo.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.selo.err{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
.selo.lar{background:var(--mtz-amarelo);color:var(--accent-ink)}
.vazio{color:var(--muted);text-align:center;padding:20px}

/* login: fundo carbono como a arte da marca */
.fundo-carbono{min-height:100vh;background:#0d0d0f url("fundo-carbono.jpg") center/cover fixed;
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 24px}
.login{width:100%;max-width:380px}
.login-logo{display:block;width:230px;max-width:70%;margin:0 auto 26px}
.login-card{border:0;border-top:4px solid var(--mtz-amarelo);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.produto{text-align:center;font-weight:800;font-size:32px;letter-spacing:.5px;color:var(--mtz-grafite);line-height:1.1}
.produto b{color:var(--mtz-amarelo);text-shadow:0 1px 0 #b8901a,0 2px 3px rgba(0,0,0,.25)}
@media (prefers-color-scheme: dark){ .produto{text-shadow:0 -1px 0 rgba(255,255,255,.22)} }
.login .sub{text-align:center;color:var(--muted);margin:2px 0 14px;font-size:14px}
.login-rodape{text-align:center;color:#8a8a90;font-size:12px;margin-top:18px}

/* produção */
.prod-status{border-radius:10px;padding:22px;text-align:center;font-size:22px;font-weight:800;margin-top:16px;border:2px solid var(--line);background:var(--soft)}
.prod-status.ok{background:color-mix(in srgb,var(--ok) 14%,var(--panel));border-color:var(--ok);color:var(--ok)}
.prod-status.err{background:color-mix(in srgb,var(--err) 12%,var(--panel));border-color:var(--err);color:var(--err)}
.prod-status.trab{border-color:var(--mtz-amarelo);color:var(--ink);background:color-mix(in srgb,var(--mtz-amarelo) 14%,var(--panel))}
.prod-status small{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-top:6px}
.serial-in{font-size:24px !important;font-family:ui-monospace,Consolas,monospace;letter-spacing:1px;text-transform:uppercase}
.btn-gravar{width:100%;font-size:20px !important;padding:18px !important;margin-top:16px}
.bar{height:12px;background:var(--bg);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:14px}
.bar > div{height:100%;width:0;background:var(--accent);transition:width .15s}
.contador{display:flex;gap:18px;font-size:14px;color:var(--muted);margin-top:10px}
.contador b{color:var(--ink);font-size:18px}
pre.log{margin:0;background:var(--console);color:var(--console-ink);border-radius:8px;padding:12px;height:200px;overflow:auto;font:12.5px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap}
details summary{cursor:pointer;color:var(--muted);font-size:13px;margin-top:14px}
.aviso{background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid var(--warn);padding:10px 12px;border-radius:8px;font-size:14px;margin-bottom:16px}

/* marca */
footer{text-align:center;font-size:12px;color:var(--muted);padding:18px 16px 28px}

/* aviso de erro bem visível */
.prod-aviso{margin-top:12px;padding:12px 14px;border-radius:8px;font-weight:700;font-size:16px;
  background:color-mix(in srgb,var(--err) 14%,var(--panel));border:2px solid var(--err);color:var(--err)}
@keyframes tremer{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes piscar{0%,100%{opacity:1}50%{opacity:.35}}
.tremer{animation:tremer .45s ease 1}
.prod-status.err{animation:piscar .5s ease 3}

/* modo produção / teste */
.modo{display:flex;background:var(--soft);border-radius:8px;padding:3px;gap:3px;margin-bottom:6px}
.modo button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;padding:9px 8px;border-radius:6px;cursor:pointer}
.modo button.ativo{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.modo button[data-modo="teste"].ativo{background:#3a6fb0;color:#fff}
.btn-teste{background:#3a6fb0 !important;color:#fff !important}
.btn-teste:hover{background:#2f5d96 !important}
.selo.teste{background:color-mix(in srgb,#3a6fb0 18%,transparent);color:#3a6fb0}
@media (prefers-color-scheme: dark){ .selo.teste{color:#8db6ea} }