:root{--navy:#0b1b30;--navy2:#132944;--green:#16a34a;--blue:#2876ee;--orange:#f59e0b;--red:#ef4444;--text:#101828;--muted:#667085;--line:#e4e9f0;--bg:#f8fafc}*{box-sizing:border-box}body{margin:0;font:14px Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,#eaf8ef,#f6f9fc 48%,#dfe9f6)}.login-card{width:min(420px,92vw);padding:38px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px #16385a20}.login-card h1{margin:30px 0 6px}.login-card p{color:var(--muted)}label{display:grid;gap:8px;margin:18px 0;font-weight:600}input,select,textarea{width:100%;border:1px solid #d7dee8;border-radius:9px;padding:13px 14px;background:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:#35b765;box-shadow:0 0 0 3px #22c55e18}button{cursor:pointer;border:0;background:none}.primary{background:linear-gradient(135deg,#18ae50,#07963e);color:#fff;padding:13px 20px;border-radius:8px;font-weight:700}.login-card .primary{width:100%}.error{color:var(--red);margin-top:12px}.brand{height:84px;display:flex;align-items:center;gap:12px;color:#fff;font-size:22px;font-weight:800;padding:0 20px;border-bottom:1px solid #ffffff12}.brand span{width:36px;height:36px;display:grid;place-items:center;background:#1db954;border-radius:8px}.brand small,.user small{display:block;font-size:12px;font-weight:400;color:#c9d3df;margin-top:4px}.brand.big{color:var(--navy);border:0;padding:0}.brand.big small{color:var(--muted)}#app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{background:linear-gradient(180deg,#0a1a2e,#0c2239);color:#d8e1eb;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}nav{padding:14px 9px;display:grid;gap:4px}nav button{color:inherit;text-align:left;padding:14px;border-radius:8px;font-weight:600}nav button:hover,nav button.active{background:#ffffff12;color:#35db72}.scan-card{margin:auto 12px 16px;padding:18px 14px;display:grid;gap:13px;text-align:center;border:1px solid #ffffff20;border-radius:10px;background:#ffffff08}.scan-card small{line-height:1.6}.user{border-top:1px solid #ffffff12;padding:16px;display:flex;gap:10px;align-items:center}.user div{flex:1}.user button{color:#fff}.content{min-width:0;padding:0 28px 30px}header{height:94px;display:flex;align-items:center;gap:18px}header h1{margin:0;font-size:26px}header p{margin:5px 0 0;color:var(--muted)}header .date{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;padding:13px 18px}#menu{display:none}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:20px;box-shadow:0 2px 4px #16263a08}.stat{min-height:148px;display:grid;grid-template-columns:52px 1fr;align-items:start;background:linear-gradient(135deg,#fff,#eef4ff)}.stat.green{background:linear-gradient(135deg,#fff,#eefbf1)}.stat.orange{background:linear-gradient(135deg,#fff,#fff8eb)}.icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:#e6efff;color:var(--blue)}.green .icon{background:#dcf7e5;color:var(--green)}.orange .icon{background:#fff0d4;color:var(--orange)}.stat h3{font-size:13px;margin:6px 0}.stat strong{font-size:23px}.stat p{color:var(--muted);margin:7px 0}.stat .trend{grid-column:1/-1;padding:9px;text-align:center;border-radius:7px;background:#e5edff;color:var(--blue)}.green .trend{background:#def5e5;color:var(--green)}.orange .trend{background:#fff0d7;color:var(--orange)}.dashboard-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;margin-top:18px}.panel h2{font-size:16px;margin:0 0 18px}.low-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #edf0f4}.low-item:first-of-type{border-top:0}.low-item .prod{flex:1}.low-item small{display:block;color:var(--red);margin-top:4px}.badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#ffeded;color:var(--red);font-size:11px}.badge.low{background:#fff4dd;color:#d97706}.chart{width:190px;height:190px;border-radius:50%;margin:25px auto;background:conic-gradient(var(--blue) 0 60%,var(--orange) 60% 96%,var(--green) 96%);position:relative}.chart:after{content:'';position:absolute;inset:45px;background:#fff;border-radius:50%}.searchbox{display:grid;gap:14px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);padding:9px 12px;border-radius:7px}.chip.active{background:var(--green);color:white}.table-panel{margin-top:18px;padding:0;overflow:hidden}.panel-head{padding:18px;display:flex;align-items:center;justify-content:space-between}.panel-head h2{margin:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{padding:14px 16px;text-align:left;border-top:1px solid var(--line);font-size:13px}th{background:#fbfcfd;color:#4b5563}.stock-low{color:var(--red);font-weight:700}.stock-ok{color:var(--green);font-weight:700}.actions button{padding:7px 9px;border-radius:6px;margin-right:5px}.edit{background:#eaf7ef;color:var(--green)}.del{background:#fff0f0;color:var(--red)}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.toolbar input{flex:1;min-width:240px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.form-grid .full{grid-column:1/-1}.form-actions{display:flex;gap:10px;margin-top:20px}.barcode-box{min-height:330px;background:linear-gradient(#0d1b2bdd,#0d1b2bdd),url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="120"%3E%3Crect width="200" height="120" fill="%2364748b"/%3E%3C/svg%3E');border-radius:10px;color:#fff;display:grid;place-items:center;text-align:center;padding:25px}.two-col{display:grid;grid-template-columns:.8fr 1.4fr;gap:18px}.count-layout{display:grid;grid-template-columns:1.5fr .7fr;gap:18px}.progress{height:12px;background:#e8eef3;border-radius:10px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green)}#toast{position:fixed;right:25px;bottom:25px;background:#101828;color:#fff;padding:14px 18px;border-radius:9px;opacity:0;transform:translateY(10px);transition:.2s;z-index:10}#toast.show{opacity:1;transform:none}@media(max-width:1050px){.cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-grid>.panel:last-child{grid-column:1/-1}.two-col{grid-template-columns:1fr}}@media(max-width:720px){#app{display:block}aside{position:fixed;left:-240px;width:220px;z-index:20;transition:.25s}aside.open{left:0}.content{padding:0 14px}header{height:auto;padding:15px 0;flex-wrap:wrap}header .date{display:none}header>div:nth-child(2){flex:1}#menu{display:block;font-size:24px}.cards,.dashboard-grid,.count-layout{grid-template-columns:1fr}.dashboard-grid>.panel:last-child{grid-column:auto}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.stat{min-height:125px}.panel{padding:15px}header .primary{padding:10px}.panel-head{align-items:flex-start;gap:10px}.table-panel{margin-left:-14px;margin-right:-14px;border-radius:0}}