:root{
  --bg:#eef3f9;--panel:#ffffff;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;
  --blue:#2563eb;--blue2:#1d4ed8;--dark:#0f172a;--red:#dc2626;--green:#16a34a;
  --shadow:0 18px 50px rgba(15,23,42,.08);--soft:0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(135deg,#eef3f9,#f8fafc);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
.hidden{display:none!important}
button,input{font:inherit}
button{border:0;border-radius:14px;padding:11px 15px;font-weight:800;background:#e8edf5;color:var(--ink);cursor:pointer;transition:.16s ease}
button:hover{transform:translateY(-1px);filter:brightness(.99)}
button:active{transform:scale(.98)}
.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.danger{background:var(--red);color:#fff}
input{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 13px;outline:none;font-size:15px}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.muted{color:var(--muted)}
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:2000;background:#0f172a;color:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:none}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginShell{width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.loginPanel,.loginVisual{background:rgba(255,255,255,.78);border:1px solid rgba(226,232,240,.9);backdrop-filter:blur(16px);border-radius:34px;padding:34px;box-shadow:var(--shadow)}
.brandMark{width:74px;height:74px;border-radius:24px;background:linear-gradient(135deg,#0f172a,#2563eb);color:white;display:grid;place-items:center;font-weight:950;letter-spacing:.04em;margin-bottom:18px}
.login h1{margin:0;font-size:42px;letter-spacing:-.04em}
.login p{color:var(--muted);font-size:16px;line-height:1.6}
.loginInput{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:20px}
.loginVisual{min-height:360px;position:relative;overflow:hidden;background:radial-gradient(circle at top left,#dbeafe,#fff 58%)}
.labelCard{position:absolute;left:50px;top:54px;width:270px;background:white;border:1px solid #dbe3ef;border-radius:24px;padding:18px;box-shadow:0 24px 60px rgba(37,99,235,.18)}
.labelCard b{display:block;font-size:17px}.labelCard span{display:block;font-size:26px;font-weight:950;margin:8px 0}
.fakeBarcode{height:42px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 9px);border-radius:4px;margin:8px 0}
.metricCard{position:absolute;right:34px;bottom:42px;background:#0f172a;color:white;border-radius:20px;padding:18px;font-weight:900;box-shadow:0 24px 60px rgba(15,23,42,.24)}
.floating{animation:float 4s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Layout */
.app{min-height:100vh;display:grid;grid-template-columns:264px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#0f172a;color:#fff;padding:18px;display:flex;flex-direction:column;gap:8px}
.sideBrand{display:flex;align-items:center;gap:12px;padding:8px 8px 18px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.brandIcon{width:42px;height:42px;border-radius:14px;background:#2563eb;display:grid;place-items:center;font-weight:950}
.sideBrand span{display:block;color:#94a3b8;font-size:12px}
.nav{text-align:left;background:transparent;color:#cbd5e1;border-radius:14px;padding:12px 14px}
.nav:hover,.nav.active{background:rgba(255,255,255,.10);color:#fff}
.sideFooter{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sideFooter span{font-size:12px;color:#cbd5e1}.sideFooter button{padding:8px 12px}
.content{min-width:0}.topbar{position:sticky;top:0;z-index:50;background:rgba(238,243,249,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,232,240,.85);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px}
.topbar h2{margin:0;font-size:24px;letter-spacing:-.03em}.topbar p{margin:4px 0 0;color:var(--muted)}
.topActions{display:flex;gap:8px}

/* Panels */
.panel{padding:22px}
.statsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.statCard,.panelCard,.workspaceCard{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:26px;box-shadow:var(--soft)}
.statCard{padding:20px}.statCard span{color:var(--muted);font-size:13px}.statCard b{display:block;margin-top:8px;font-size:34px;letter-spacing:-.04em}
.dashboardGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.workspaceCard,.panelCard{padding:18px}.workspaceCard h3,.panelCard h3{margin:0 0 8px;font-size:20px}
.actionGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.actionGrid button{min-height:72px;background:#f8fafc;border:1px solid var(--line)}
.toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.toolbar h3{margin:0}.toolbar p{margin:4px 0 0;color:var(--muted)}
.searchBar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}

/* Table */
.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:22px;background:#fff}
.productTable{width:100%;border-collapse:separate;border-spacing:0;min-width:980px}
.productTable th{position:sticky;top:0;background:#f8fafc;color:#475569;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;z-index:1}
.productTable th,.productTable td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.productTable tr:hover td{background:#f8fafc}.productTable tr:last-child td{border-bottom:0}
.productName{font-weight:900}.smallMeta{display:block;color:var(--muted);font-size:12px;margin-top:2px}.priceCell{font-weight:950;white-space:nowrap}
.actionBtns{display:flex;gap:6px;flex-wrap:wrap}.actionBtns button{padding:8px 10px;border-radius:11px;font-size:12px}
.pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px}

/* Cards */
.twoCol{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.buttonRow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
#reader{width:100%;max-width:480px;margin:14px auto;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.manualSku{display:grid;grid-template-columns:1fr auto;gap:8px}
.rules{margin:10px 0 0;padding-left:20px;color:var(--muted);line-height:1.8}
.basketGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.basketItem{background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:var(--soft)}
.basketTop{display:flex;justify-content:space-between;gap:10px}.basketNo{background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:950}
.editGrid{display:grid;grid-template-columns:1fr 2fr .8fr;gap:8px;margin:12px 0 0}

/* Designer */
.designerGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.settingsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.settingsGrid label{background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:11px;font-weight:850;font-size:12px;color:#334155}.settingsGrid label input{margin-top:7px}
.toggleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.toggleGrid label{background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px;font-weight:800;font-size:13px}.toggleGrid input{width:auto;margin-right:8px}
.previewPanel{position:sticky;top:96px;height:max-content}
#labelPreview,#miniPreview{min-height:220px;display:grid;place-items:center;background:linear-gradient(135deg,#f8fafc,#eef2ff);border-radius:22px;border:1px dashed #cbd5e1;padding:18px}
.labelMock{background:#fff;border:1px solid #111;border-radius:9px;width:290px;padding:14px;box-shadow:0 18px 50px rgba(15,23,42,.10)}
.labelMock .mockName{font-size:16px}.labelMock .mockPrice{font-size:26px;margin:6px 0}.labelMock .mockSku{font-size:12px;color:#334155}.labelMock .mockBarcode{height:38px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 9px);border-radius:4px;margin:9px 0}

/* Upload/Admin */
.uploadGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:16px}.dropZone{border:2px dashed #cbd5e1;border-radius:24px;background:#f8fafc;padding:28px;text-align:center;margin:12px 0;cursor:pointer}
.dropZone b{display:block;font-size:17px}.dropZone span{color:var(--muted);font-size:13px}.columnChips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.columnChips span{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;padding:8px 10px;border-radius:999px;font-weight:850;font-size:12px}
.previewTable{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden}.previewTable th,.previewTable td{border:1px solid var(--line);padding:9px;text-align:left;font-size:13px}
.dangerZone{border-color:#fecaca;background:#fff7f7}.mobileBar{display:none}

/* Mobile */
@media(max-width:980px){
  .app{grid-template-columns:1fr}.sidebar{display:none}.topbar{padding:14px 14px}.panel{padding:12px}.topActions{display:none}
  .statsGrid{grid-template-columns:repeat(2,1fr)}.dashboardGrid,.twoCol,.designerGrid,.uploadGrid{grid-template-columns:1fr}
  .previewPanel{position:static}.basketGrid{grid-template-columns:1fr}.settingsGrid,.toggleGrid,.editGrid{grid-template-columns:1fr}
  .mobileBar{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px}.mobileBar button{padding:10px 7px;font-size:12px}
}
@media(max-width:720px){
  .loginShell{grid-template-columns:1fr}.loginVisual{display:none}.loginPanel{padding:26px}.loginInput{grid-template-columns:1fr}.login h1{font-size:34px}
  .statsGrid{grid-template-columns:1fr 1fr;gap:10px}.statCard{padding:16px}.statCard b{font-size:28px}
  .toolbar{flex-direction:column}.searchBar,.manualSku{grid-template-columns:1fr}.tableWrap{border-radius:18px}.panelCard{padding:14px}.productTable th,.productTable td{padding:10px;font-size:13px}
  .topbar h2{font-size:20px}.topbar p{font-size:12px}.labelMock{width:250px}
}
@media print{body{background:white}.sidebar,.topbar,main,.mobileBar{display:none}}