:root{
  --bg:#f4f8fc; --surface:#fff; --surface-2:#eef5fb; --line:#d7e5f1;
  --text:#17324d; --muted:#61758a;
  --primary:#078fe5; --primary-d:#0577c1; --accent:#ff7410; --danger:#e84c68; --warn:#f2a900;
  --radius:14px; --font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;
  background-image:radial-gradient(circle at 90% 0,rgba(7,143,229,.13),transparent 35%),radial-gradient(circle at 0 100%,rgba(255,116,16,.08),transparent 35%)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}

/* Botões */
.btn{border:0;border-radius:999px;padding:.65rem 1.1rem;font-weight:700;cursor:pointer;background:var(--primary);color:#fff;transition:background .15s,transform .1s}
.btn:hover{background:var(--primary-d)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.good{background:#68c63c;color:#fff} .btn.good:hover{background:#55ae2d}
.btn.bad{background:var(--danger);color:#fff} .btn.bad:hover{background:#d53b57}
.btn.sm{padding:.4rem .75rem;font-size:.85rem}

/* Campos */
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.3rem}
input,select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.65rem .8rem}
input[type="file"]{padding:.5rem;background:var(--surface-2);font-size:.85rem}
input:focus,select:focus{border-color:var(--primary)}
.field{margin-bottom:1rem}
.field-help{display:block;color:var(--muted);font-size:.76rem;margin-top:.3rem}
.item-preview{display:block;width:100%;height:130px;object-fit:contain;object-position:center;background:#f7fafc;border-radius:10px;margin-top:.55rem;padding:.35rem}
.row{display:grid;gap:.75rem;grid-template-columns:1fr}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:1.25rem}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2rem;box-shadow:0 18px 45px rgba(16,74,116,.14)}
.login-image{display:block;width:calc(100% + 4rem);height:150px;object-fit:cover;margin:-2rem -2rem 1.5rem;border-radius:20px 20px 0 0;filter:saturate(.9)}
.logo{font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.logo b{color:var(--accent)}
.login-card p{color:var(--muted);margin:.5rem 0 1.5rem}
.err{color:var(--danger);font-size:.9rem;min-height:1.3rem;margin-bottom:.5rem}

/* Layout */
header{position:sticky;top:0;z-index:20;background:var(--primary);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.2)}
.bar{max-width:1100px;margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
header::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--accent),#ffb300,var(--accent))}
nav{display:flex;gap:.4rem;order:3;width:100%;flex-wrap:wrap;min-width:0}
.bar .logo{color:#fff}.bar .logo b{color:#fff}
.nav-link{background:transparent;border:1px solid transparent;border-radius:999px;padding:.5rem .9rem;cursor:pointer;color:rgba(255,255,255,.82);font-weight:500;text-decoration:none}
.nav-link.active,.nav-link:hover{background:#fff;color:var(--primary);border-color:#fff}
.account{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.account .sub{margin:0;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1100px;margin:0 auto;padding:1.25rem 1rem 4rem}
h1{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:.25rem}
.sub{color:var(--muted);margin-bottom:1.25rem}

/* Métricas */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:0 5px 16px rgba(16,74,116,.05)}
.stat span{display:block;font-size:.8rem;color:var(--muted)}
.stat strong{font-size:1.6rem}
.item-meta{display:flex;justify-content:space-between;gap:.5rem;color:var(--muted);font-size:.78rem}.item-code{font-weight:700;color:var(--primary)}
.tools{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.tools input{flex:1 1 200px}
.tools .btn{flex:0 0 auto}
.inventory-visual{position:relative;overflow:hidden;min-height:180px;margin:0 0 1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.inventory-visual img{display:block;width:100%;height:180px;object-fit:cover;opacity:.72}
.inventory-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,105,0,.82),rgba(255,105,0,.08) 78%)}
.inventory-visual div{position:absolute;z-index:1;left:1.1rem;bottom:1rem;display:grid;gap:.15rem;max-width:22rem}
.inventory-visual strong{font-size:1.2rem}.inventory-visual span{color:#fff;font-size:.9rem}

/* Cards de itens */
.grid{display:grid;gap:.9rem;grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.material-thumb{display:block;width:100%;height:130px;aspect-ratio:16/9;object-fit:contain;object-position:center;border-radius:10px;background:#f7fafc;padding:.35rem}
.card h3{font-size:1.05rem;overflow-wrap:anywhere}
.qty{display:flex;align-items:baseline;gap:.4rem}
.qty strong{font-size:2rem;line-height:1}
.qty small{color:var(--muted)}
.tag{display:inline-block;font-size:.75rem;border-radius:99px;padding:.15rem .6rem;background:var(--surface-2);color:var(--muted);width:fit-content}
.tag.low{background:rgba(255,184,77,.15);color:var(--warn)}
.tag.zero{background:rgba(255,93,143,.15);color:var(--danger)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.tag.ok{background:rgba(34,224,196,.14);color:var(--accent)}
.actions{display:flex;gap:.5rem;margin-top:auto}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:2rem 1rem;text-align:center;color:var(--muted)}

/* Requisições */
.split{display:grid;gap:1.25rem;grid-template-columns:1fr}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem}
.panel h2{font-size:1.1rem;margin-bottom:.9rem}
.line{display:grid;grid-template-columns:1fr 90px auto;gap:.5rem;margin-bottom:.5rem;align-items:center}
.req{border:1px solid var(--line);border-radius:12px;padding:.9rem;margin-bottom:.75rem;background:var(--surface-2)}
.req.done{opacity:.65}
.req header{all:unset;display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;margin-bottom:.4rem}
.req ul{list-style:none;padding:0;margin:.4rem 0 .7rem;color:var(--muted);font-size:.92rem}
.req small{color:var(--muted)}
.settings-panel{max-width:680px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:0 5px 16px rgba(16,74,116,.05)}
.settings-panel h2{margin-bottom:1rem}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);color:var(--text);margin:0}.setting-row span{display:grid;gap:.2rem}.setting-row small{color:var(--muted);font-weight:400}.setting-row input{width:1.25rem;height:1.25rem;accent-color:var(--primary)}

/* Modal */
dialog{margin:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);padding:1.4rem;width:min(440px,92vw)}
dialog::backdrop{background:rgba(5,2,15,.7)}
dialog h2{margin-bottom:1rem;font-size:1.2rem}
.catalog-dialog{width:min(900px,94vw);max-height:88vh}
.catalog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.catalog-head .sub{margin:0;font-size:.9rem}
.catalog-count{display:block;color:var(--muted);margin:.7rem 0}
.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;max-height:58vh;overflow:auto;padding:.1rem}
.catalog-item{display:flex;flex-direction:column;gap:.3rem;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.5rem;cursor:pointer;color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s}
.catalog-item:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 6px 15px rgba(7,143,229,.15)}
.catalog-item img{display:block;width:100%;height:90px;aspect-ratio:4/3;object-fit:contain;object-position:center;border-radius:8px;background:#fff;padding:.25rem}.catalog-item span{font-weight:700;font-size:.85rem;line-height:1.2}.catalog-item small{color:var(--primary);font-size:.72rem}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem;flex-wrap:wrap}
.sep{border:0;border-top:1px solid var(--line);margin:1rem 0}

/* Toast */
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:#68c63c;color:#fff;font-weight:700;padding:.65rem 1.1rem;border-radius:999px;z-index:50;max-width:90vw}
#toast.bad{background:var(--danger);color:#fff}

@media(min-width:600px){
  nav{order:initial;width:auto}
  .stats{grid-template-columns:repeat(4,1fr)} .grid{grid-template-columns:repeat(2,1fr)} .row{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)} .split{grid-template-columns:380px 1fr;align-items:start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.large-text{font-size:112.5%}.large-text h1{font-size:1.8rem}.large-text .btn,.large-text input,.large-text select{min-height:44px}.high-contrast{--bg:#fff;--surface:#fff;--surface-2:#e8f0f7;--text:#071a2b;--muted:#30485d;--line:#58758b}.high-contrast .tag{border:1px solid currentColor}.reduced-motion *{transition:none!important;animation:none!important}

@media(max-width:420px){
  .bar{padding:.7rem .75rem;gap:.6rem}
  .logo{font-size:1.25rem}
  nav{gap:.15rem;flex:1 1 100%}
  .nav-link{padding:.45rem .55rem;font-size:.88rem}
  .account .sub{display:none}
  main{padding:1rem .75rem 3rem}
  h1{font-size:1.4rem}
  .tools .btn{width:100%}
  .line{grid-template-columns:minmax(0,1fr) 68px auto}
  .panel{padding:.9rem}
  .login-image{height:125px}
  .inventory-visual{min-height:155px}.inventory-visual img{height:155px}.inventory-visual div{left:.85rem;bottom:.8rem}.inventory-visual strong{font-size:1.05rem}
  .catalog-dialog{padding:1rem}.catalog-head{align-items:flex-start}.catalog-grid{grid-template-columns:repeat(2,1fr);gap:.55rem}.catalog-item img{height:78px}
}