:root{
--bg:#0b0820;--panel:#17112e;--panel2:#20163d;--purple:#9b35ff;--violet:#c96cff;--cyan:#20d9ff;
--green:#35e56d;--red:#ff426d;--orange:#ffab2e;--text:#f7f4ff;--muted:#aaa4bf;--line:#4a2d78;
}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 65% 20%,#241044 0,#0b0820 48%,#070513 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input,select{font:inherit}button{cursor:pointer}.topbar{height:52px;background:#09071b;border-bottom:1px solid #2f1e52;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-size:15px}.brand b{font-size:19px}.brand span{color:#bdb6ce}.gridicon{font-size:25px;color:#ddd}.topright{display:flex;align-items:center;gap:22px;color:#d7d0e8}.avatar{width:30px;height:30px;border-radius:50%;background:#eee;color:#4b3860;display:grid;place-items:center;font-weight:800}
.layout{display:flex;min-height:calc(100vh - 52px)}.sidebar{width:274px;background:rgba(7,6,22,.92);border-right:1px solid #302052;padding:14px 14px 0;display:flex;flex-direction:column}.logo{display:flex;align-items:center;gap:12px;padding:7px 8px 16px}.logo strong{font-size:23px}.logo small{display:block;color:#aaa4bf;margin-top:2px}.shirt{font-size:38px;color:#e68bff}.sidebar nav{display:flex;flex-direction:column;gap:3px}.sidebar button{border:0;background:transparent;color:#eee8fa;text-align:left;padding:11px 12px;border-radius:10px;font-size:15px;display:flex;align-items:center;gap:14px}.sidebar button:hover{background:#21153c}.sidebar button.active{background:linear-gradient(90deg,#a71dff,#8e20ee);box-shadow:0 0 22px #8b1cf066}.sidebar button em{font-style:normal;margin-left:auto;background:#aa27ff;border-radius:12px;padding:2px 7px;font-size:11px}.sidebar hr{width:90%;border:0;border-top:1px solid #33244e;margin:10px auto}.machine-art{margin-top:auto;height:175px;border-top:1px solid #2d1e4b;display:grid;place-items:center;position:relative;overflow:hidden}.machine-glow{position:absolute;width:190px;height:110px;background:#9b35ff66;filter:blur(35px);bottom:10px}.machine{font-size:95px;color:#b84fff;transform:perspective(200px) rotateY(-12deg)}.machine-art small{position:absolute;bottom:8px;color:#aaa4bf}
.main{flex:1;padding:18px 18px 36px;min-width:0}.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}.pagehead h1{font-size:31px;margin:0 0 3px}.pagehead p{margin:0;color:#aaa4bf}.actions{display:flex;gap:8px;align-items:center}.actions input{width:360px}.actions input,.formgrid input,.formgrid select,.filters select{background:#15102a;border:1px solid #62429a;color:#eee;padding:10px 12px;border-radius:10px;outline:none}.btn{border:1px solid #7146a7;background:linear-gradient(180deg,#3b225e,#24143d);color:white;border-radius:9px;padding:10px 14px}.btn.primary{background:linear-gradient(90deg,#a72bff,#6e21df);border-color:#c15cff;box-shadow:0 0 18px #9b35ff44}.page{display:none}.activePage{display:block}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi{min-height:78px;background:linear-gradient(135deg,#20163e,#151029);border:1px solid #69449a;border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px #0003}.kpi i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#7429a944;color:#d77cff;font-style:normal;font-size:23px}.kpi div{display:flex;flex-direction:column}.kpi b{font-size:25px}.kpi span{font-size:12px;color:#aaa4bf}.kpi strong{margin-left:auto;color:var(--green);font-size:12px}.kpi.danger{border-color:#9c3152}.kpi.danger i{background:#ff426d22;color:#ff6f90}.grid2{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;margin-top:14px}.grid3{display:grid;grid-template-columns:1.1fr 1.15fr 1fr;gap:14px;margin-top:14px}.panel{background:linear-gradient(145deg,rgba(31,22,58,.96),rgba(17,13,34,.98));border:1px solid #5c3b8c;border-radius:14px;padding:14px;box-shadow:0 12px 35px #0004;margin-top:14px}.panel h2{font-size:18px;margin:0 0 12px}.panel h2 a{float:right;color:#d780ff;font-size:12px;cursor:pointer}.categoryChart{width:160px;height:160px;border-radius:50%;margin:4px auto 12px;background:conic-gradient(var(--purple) 0 51%,var(--cyan) 51% 80%,var(--orange) 80% 100%);position:relative;box-shadow:0 0 25px #9b35ff33}.categoryChart:after{content:"248\\A Artikel";white-space:pre;text-align:center;position:absolute;inset:34px;border-radius:50%;background:#17112e;display:grid;place-items:center;font-weight:800}.legend{display:flex;justify-content:center;gap:18px;font-size:12px;color:#ccc}.legend span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--c)}.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.quick button{background:#261943;border:1px solid #69449a;color:#fff;border-radius:11px;padding:13px 5px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:22px}.quick button span{font-size:11px;color:#d4cbe4}.item{padding:9px 0;border-bottom:1px solid #35234f;display:flex;align-items:center;gap:9px;font-size:12px}.item:last-child{border:0}.pill{padding:3px 8px;border-radius:10px;font-size:11px;background:#1e6a3a;color:#67f68e}.pill.red{background:#7c1835;color:#ff7996}.item .grow{flex:1}.item .amount{font-weight:800}.tableHead{display:flex;justify-content:space-between;align-items:center}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{color:#bfb6d0;text-align:left;font-weight:600;padding:10px;border-bottom:1px solid #513473;white-space:nowrap}td{padding:10px;border-bottom:1px solid #302044;white-space:nowrap}tr:hover td{background:#24173d}.stockGood{color:#fff;background:#118b43;padding:4px 9px;border-radius:12px}.stockLow{color:#fff;background:#a51d3e;padding:4px 9px;border-radius:12px}.tag{display:inline-block;padding:4px 9px;border-radius:12px;background:#7225c5}.tag.dtf{background:#117fb0}.tag.laser{background:#bd7715}.formPanel{max-width:1000px}.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.formgrid label{display:flex;flex-direction:column;gap:6px;color:#cfc7dc;font-size:12px}.formgrid button{grid-column:1/-1;justify-self:start}.filters{margin-bottom:10px}.muted{color:#aaa4bf}.status{padding:12px;margin:8px 0;border-radius:10px;background:#13291e}.status.ok{color:#70f89a}.infoBox{padding:16px;background:#120d27;border:1px solid #5b3a8c;border-radius:10px}.bigNumber{font-size:38px;font-weight:800;margin:25px 0}.bars{display:flex;align-items:end;gap:10px;height:170px}.bar{flex:1;background:linear-gradient(#b84cff,#6d22c8);border-radius:7px 7px 0 0;min-height:15px;position:relative}.bar span{position:absolute;bottom:-20px;width:100%;text-align:center;font-size:10px;color:#aaa4bf}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:20}.modal.hidden{display:none}.modalbox{width:min(620px,94vw);background:#17112e;border:1px solid #7b4db4;border-radius:16px;padding:20px;position:relative;box-shadow:0 0 70px #000}.close{position:absolute;right:12px;top:10px;border:0;background:none;color:#ddd;font-size:28px}.modalbox h2{margin-top:0}.modalbox .formgrid{grid-template-columns:1fr 1fr}.modalbox .formgrid button{grid-column:1/-1}
@media(max-width:1100px){.sidebar{width:220px}.kpis{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}.actions input{width:250px}}
@media(max-width:800px){.sidebar{display:none}.main{padding:12px}.grid2,.formgrid{grid-template-columns:1fr}.actions{display:none}}

.barcodeMini{font-family:"Courier New",monospace;background:#fff;color:#111;padding:3px 6px;border-radius:4px}.barcodePreview{background:#fff;border-radius:6px;padding:3px;width:max-content}.barcodeSvg{max-width:100%;height:auto;display:block}.scanbox{display:flex;gap:8px}.scanInput{flex:1;background:#15102a;border:1px solid #8b4fd0;color:#fff;padding:13px;border-radius:10px;outline:none;font-size:18px}.scanInput:focus{box-shadow:0 0 18px #9b35ff55;border-color:#c96cff}.scanResult{margin-top:14px}.scanCard{display:grid;grid-template-columns:280px 1fr auto;align-items:center;gap:16px;background:#120d27;border:1px solid #5b3a8c;border-radius:12px;padding:12px}.labelPrintControls{display:grid;grid-template-columns:1fr 90px auto;gap:8px}.labelPrintControls select,.labelPrintControls input{background:#15102a;border:1px solid #62429a;color:#eee;padding:10px 12px;border-radius:10px}.status.bad{background:#451427;color:#ff8da6}.printLabel{background:#fff;color:#000}.
@media(max-width:900px){.scanCard{grid-template-columns:1fr}.labelPrintControls{grid-template-columns:1fr}}

.topright{position:relative}
.topIcon{position:relative;border:0;background:transparent;color:#d7d0e8;width:30px;height:30px;border-radius:8px;font-size:19px;display:grid;place-items:center}
.topIcon:hover{background:#21153c;color:#fff}
.topIcon.notif{font-size:18px}
.topBadge{position:absolute;right:-2px;top:-2px;min-width:15px;height:15px;padding:0 4px;border-radius:10px;background:#ff426d;color:#fff;font-size:9px;line-height:15px;text-align:center;font-weight:800}
.adminMenuBtn{border:0;background:transparent;color:#eee8fa;display:flex;align-items:center;gap:8px;padding:4px 7px;border-radius:10px}
.adminMenuBtn:hover{background:#21153c}
.adminMenuBtn .avatar{width:30px;height:30px}
.adminMenu{position:absolute;right:0;top:42px;width:245px;background:#17112e;border:1px solid #69449a;border-radius:12px;padding:8px;box-shadow:0 18px 45px #0009;z-index:20}
.adminMenu.hidden{display:none}
.adminMenuTitle,.adminTitle{padding:9px 10px 11px;border-bottom:1px solid #3c285c;margin-bottom:5px}
.adminTitle b{display:block;font-size:14px}
.adminTitle small{display:block;color:#aaa4bf;margin-top:2px}
.adminMenu button{display:block;width:100%;border:0;background:transparent;color:#eee8fa;text-align:left;padding:10px;border-radius:8px}
.adminMenu button:hover{background:#261943}
.popupList{display:flex;flex-direction:column;gap:8px}
.popupItem{padding:11px 12px;border:1px solid #4b3272;border-radius:10px;background:#20163d}
.popupItem b{display:block;margin-bottom:3px}
.popupItem small{color:#aaa4bf}

.cameraScanner{margin-top:12px;border:1px solid #5b3a83;border-radius:14px;padding:10px;background:#100b20;position:relative}
.cameraScanner.hidden{display:none}
.cameraScanner video{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:10px;background:#000}
.cameraHint{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-weight:700;text-shadow:0 1px 5px #000}
.mobileNav{display:none}
@media (max-width: 800px){
  body{padding-bottom:70px}
  .topbar{height:54px}
  .brand span{display:none}
  .topright{gap:3px}
  .adminMenuBtn b,.adminMenuBtn>span:last-child{display:none}
  .layout{display:block}
  .sidebar{display:none}
  .main{padding:14px}
  .pagehead{display:block}
  .pagehead .actions{margin-top:10px;display:grid;grid-template-columns:1fr auto auto}
  .pagehead .actions input{min-width:0}
  .kpis{grid-template-columns:1fr 1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  .panel{padding:14px}
  .tablewrap{overflow:auto}
  .formgrid{grid-template-columns:1fr}
  .mobileNav{position:fixed;left:0;right:0;bottom:0;height:62px;background:#120c25;border-top:1px solid #513477;display:grid;grid-template-columns:repeat(5,1fr);z-index:30;box-shadow:0 -10px 25px #0007}
  .mobileNav button{border:0;background:transparent;color:#d7d0e8;font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .mobileNav button span{font-size:9px}
  .scanbox{display:grid;grid-template-columns:1fr auto;gap:8px}
  .scanbox .btn:last-child{grid-column:1/-1}
  .topIcon:first-child{display:grid}
}

.authScreen{position:fixed;inset:0;z-index:9999;background:rgba(7,8,22,.97);display:flex;align-items:center;justify-content:center;padding:20px}
.authCard{width:min(420px,100%);background:#17152d;border:1px solid #45316b;border-radius:18px;padding:28px;box-shadow:0 20px 70px #0009}
.authCard .logo{margin-bottom:28px}.authCard form{display:grid;gap:16px}.authCard label{display:grid;gap:7px;color:#ddd}
.authCard input{width:100%;box-sizing:border-box;background:#0d1022;border:1px solid #45405e;border-radius:9px;padding:12px;color:#fff}
.authCard .btn{width:100%;padding:12px}.authScreen.hidden{display:none}
#usersNav.hidden{display:none}

.textilwerkLogo{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
}

.authCard .textilwerkLogo{
  width:82px;
  height:82px;
}

@media(max-width:800px){
  .textilwerkLogo{
    width:48px;
    height:48px;
  }

  .authCard .textilwerkLogo{
    width:70px;
    height:70px;
  }
}