:root{--bg-primary: #0a0e1a;--bg-secondary: #111827;--bg-card: #1a1f35;--bg-card-hover: #222845;--bg-input: #151b30;--border-color: rgba(255, 255, 255, .06);--border-active: rgba(99, 102, 241, .5);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-blue: #6366f1;--accent-blue-hover: #818cf8;--accent-green: #10b981;--accent-green-bg: rgba(16, 185, 129, .12);--accent-red: #ef4444;--accent-red-bg: rgba(239, 68, 68, .12);--accent-yellow: #f59e0b;--accent-yellow-bg: rgba(245, 158, 11, .12);--accent-purple: #8b5cf6;--accent-cyan: #06b6d4;--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);--gradient-green: linear-gradient(135deg, #10b981, #06b6d4);--gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(99, 102, 241, .15);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition-fast: .15s ease;--transition-normal: .25s ease;--sidebar-width: 260px;--sidebar-collapsed: 72px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button:not(.btn){background:transparent!important;border:none!important;padding:0!important;cursor:pointer!important;font-family:inherit!important;color:inherit!important;outline:none!important;box-shadow:none!important}input::-ms-reveal,input::-ms-clear{display:none}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}a{color:var(--accent-blue);text-decoration:none}.app-layout{display:flex;min-height:100vh}.main-content{flex:1;margin-left:var(--sidebar-width);padding:32px;transition:margin-left .35s cubic-bezier(.4,0,.2,1);position:relative;min-width:0;overflow-x:hidden}.main-content.sidebar-collapsed{margin-left:var(--sidebar-collapsed)}.main-content.no-sidebar{margin-left:0;max-width:1200px;margin-inline:auto;padding-top:80px}@media (max-width: 768px){.main-content{margin-left:0;padding:72px 16px 16px}}.page-header{margin-bottom:32px}.page-header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{color:var(--text-secondary);margin-top:4px;font-size:.9rem}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;transition:all var(--transition-normal)}.card:hover{border-color:var(--border-active);box-shadow:var(--shadow-glow)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;position:relative;overflow:hidden;transition:all var(--transition-normal)}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--stat-gradient, var(--gradient-primary))}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-card .stat-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.25rem}.stat-card .stat-value{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1}.stat-card .stat-label{color:var(--text-secondary);font-size:.85rem;margin-top:4px}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-weight:600;font-size:.875rem;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family)}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 2px 10px #6366f14d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #6366f180}.btn-success{background:var(--accent-green);color:#fff}.btn-success:hover{background:#059669}.btn-danger{background:var(--accent-red);color:#fff}.btn-danger:hover{background:#dc2626}.btn-warning{background:var(--accent-yellow);color:#1a1a2e}.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-primary)}.btn-outline:hover{background:var(--bg-card-hover);border-color:var(--border-active)}.btn-lg{padding:14px 28px;font-size:1rem;border-radius:var(--radius-md)}.btn-sm{padding:6px 12px;font-size:.8rem}.btn-schedule{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:100px;padding:6px 16px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-fast);cursor:pointer;display:inline-flex;align-items:center;gap:8px}.btn-schedule:hover{background:var(--bg-card-hover);border-color:var(--border-active);color:var(--text-primary)}.btn-scheduled{background:#f59e0b1f;border-color:#f59e0b4d;color:var(--accent-yellow);animation:schedulePulse 2s infinite}.btn-scheduled:hover{background:#f59e0b33;border-color:var(--accent-yellow)}.status-step-btn{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;border:2px solid var(--border-color);background:var(--bg-input);color:var(--text-muted);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:2}.status-step-btn:hover{border-color:var(--step-color, var(--accent-blue));transform:translateY(-2px)}.status-step-btn.completed{background:var(--step-color, var(--accent-blue));border-color:var(--step-color, var(--accent-blue));color:#fff;box-shadow:0 0 15px var(--step-color, var(--accent-blue-hover))}.status-step-btn.active{background:var(--bg-card);border-color:var(--step-color, var(--accent-blue));color:var(--step-color, var(--accent-blue));animation:stepFocus 2s infinite}@keyframes stepFocus{0%,to{box-shadow:0 0 5px var(--step-color)}50%{box-shadow:0 0 20px var(--step-color)}}.status-step-line{flex:1;height:3px;background:var(--border-color);margin-top:-30px;z-index:1;transition:background .5s ease}.status-step-line.completed{background:var(--gradient-primary)}@keyframes schedulePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.98)}}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.action-buttons{display:flex;gap:12px;margin-top:16px}.action-btn{flex:1;padding:16px;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.95rem;font-weight:700;cursor:pointer;border:2px solid transparent;transition:all var(--transition-fast);font-family:var(--font-family)}.action-btn.action-in{background:var(--accent-green-bg);color:var(--accent-green);border-color:#10b9814d}.action-btn.action-in:hover{background:#10b98133;border-color:var(--accent-green);transform:scale(1.03)}.action-btn.action-out{background:var(--accent-red-bg);color:var(--accent-red);border-color:#ef44444d}.action-btn.action-out:hover{background:#ef444433;border-color:var(--accent-red);transform:scale(1.03)}.action-btn.action-return{background:var(--accent-yellow-bg);color:var(--accent-yellow);border-color:#f59e0b4d}.action-btn.action-return:hover{background:#f59e0b33;border-color:var(--accent-yellow);transform:scale(1.03)}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.form-input{width:100%;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:.95rem;transition:border-color var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px #6366f126}.form-input::placeholder{color:var(--text-muted)}.table-container{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-color)}.data-table{width:100%;border-collapse:collapse}.data-table thead{background:var(--bg-card)}.data-table th{padding:14px 16px;text-align:left;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.data-table td{padding:14px 16px;font-size:.9rem;border-bottom:1px solid var(--border-color)}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:var(--bg-card-hover)}.data-table tbody tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:100px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.badge-green{background:var(--accent-green-bg);color:var(--accent-green)}.badge-red{background:var(--accent-red-bg);color:var(--accent-red)}.badge-yellow{background:var(--accent-yellow-bg);color:var(--accent-yellow)}.badge-blue{background:#6366f11f;color:var(--accent-blue)}.badge-purple{background:#8b5cf61f;color:var(--accent-purple)}.badge-cyan{background:#06b6d41f;color:var(--accent-cyan)}.scanner-container{max-width:600px;margin:0 auto}.scanner-viewport{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:#000;border:2px solid var(--border-color);position:relative}.scanner-viewport video{width:100%;height:100%;object-fit:cover}.scanner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.scan-line{position:absolute;width:70%;height:2px;background:var(--accent-green);box-shadow:0 0 10px var(--accent-green);animation:scanLine 2s ease-in-out infinite}@keyframes scanLine{0%,to{top:30%}50%{top:70%}}.scanner-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 768px){.scanner-grid{grid-template-columns:2fr 1fr}}.scanner-main{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 4px 6px -1px #0000000d;display:flex;flex-direction:column;gap:1rem}.scanner-actions{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 4px 6px -1px #0000000d}.scanner-actions h3{margin-top:0;margin-bottom:1rem;font-size:1.1rem;font-weight:600}.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.actions-grid .full-width{grid-column:1 / -1}.rapid-action-btn{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;font-size:.85rem;font-weight:500;color:var(--text-base);cursor:pointer;transition:all .2s ease}.rapid-action-btn:hover{border-color:var(--primary);background:var(--bg-card);transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.rapid-action-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}.scanner-input-large{width:100%;padding:1.5rem;font-size:1.5rem;text-align:center;border:2px solid var(--border);border-radius:var(--radius-lg);transition:all .2s ease}.scanner-input-large:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-light)}.scanner-input-large.active-scan{border-color:#22c55e;box-shadow:0 0 0 3px #22c55e33}.scanner-input-bar{display:flex;gap:12px;margin-top:20px}.scanner-input-bar .form-input{flex:1;font-size:1.1rem;padding:14px 20px}.product-result{display:flex;gap:20px;padding:20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-top:20px;animation:slideUp .3s ease}.product-result img{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-sm);background:var(--bg-input)}.product-result .product-info{flex:1}.product-result .product-name{font-size:1.1rem;font-weight:700}.product-result .product-sku{color:var(--text-secondary);font-size:.85rem;margin-top:2px}.product-result .product-stock{font-size:1.5rem;font-weight:800;margin-top:8px}.qty-selector{display:flex;align-items:center;gap:12px;margin-top:12px}.qty-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.qty-btn:hover{border-color:var(--accent-blue);background:var(--bg-card-hover)}.qty-value{font-size:1.3rem;font-weight:700;min-width:40px;text-align:center}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:20px}.login-card{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg)}.login-card .logo{text-align:center;margin-bottom:32px}.login-card .logo h1{font-size:1.75rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-card .logo p{color:var(--text-secondary);font-size:.9rem;margin-top:4px}.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:100;transition:width .35s cubic-bezier(.4,0,.2,1),transform .3s ease;overflow-x:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-logo{padding:24px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0}.sidebar-logo h2{font-size:1.25rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-logo span{font-size:.75rem;color:var(--text-muted)}.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}.nav-section{display:flex;flex-direction:column;gap:4px;border-radius:var(--radius-md);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-section.is-open{background:#ffffff05;padding-bottom:8px}.nav-section-title{background:none;border:none;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding:12px 16px;cursor:pointer;transition:all .2s;text-align:left;display:flex;align-items:center;justify-content:space-between}.nav-section-title:hover{color:var(--text-primary);background:#ffffff08}.nav-section-content{display:flex;flex-direction:column;gap:2px;padding:0 8px;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden}.nav-section-content.hide{max-height:0;opacity:0;pointer-events:none}.nav-section-content.show{max-height:800px;opacity:1}.sidebar.collapsed .nav-section-title{padding:12px 0;opacity:.5}.sidebar.collapsed .nav-section{background:transparent}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:500;font-size:.85rem;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.nav-item:hover{color:var(--text-primary);background:var(--bg-card-hover)}.nav-item.active{color:#fff;background:var(--gradient-primary);box-shadow:0 2px 10px #6366f14d}.nav-item .nav-icon{width:20px;height:20px;flex-shrink:0}.sidebar-footer{padding:16px;border-top:1px solid var(--border-color)}.user-info{display:flex;align-items:center;gap:12px;padding:8px}.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff}.user-details .user-name{font-size:.85rem;font-weight:600}.user-details .user-role{font-size:.75rem;color:var(--text-muted);text-transform:capitalize}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:60px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);align-items:center;padding:0 16px;z-index:101}.menu-toggle{background:none;border:none;color:var(--text-primary);cursor:pointer;padding:8px}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:99}@media (max-width: 768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.mobile-header{display:flex}.sidebar-overlay.show{display:block}}.offline-banner{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--accent-yellow);color:#1a1a2e;padding:10px 24px;border-radius:100px;font-weight:600;font-size:.85rem;z-index:1000;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-lg);animation:slideUp .3s ease}.offline-banner .pending-count{background:#0003;padding:2px 8px;border-radius:100px;font-size:.8rem}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:slideUp .3s ease}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state .empty-icon{font-size:3rem;margin-bottom:16px;opacity:.5}.empty-state h3{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.loader{display:flex;justify-content:center;padding:40px}.spinner{width:36px;height:36px;border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.flex{display:flex}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:flex-end}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-green{color:var(--accent-green)}.text-red{color:var(--accent-red)}.text-yellow{color:var(--accent-yellow)}.text-sm{font-size:.85rem}.text-muted{color:var(--text-secondary)}.notification-bell{position:relative;padding:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.05);border-radius:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.notification-bell:hover{background:#ffffff1a;color:var(--text-primary)}.notification-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background:var(--accent-red);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;border:2px solid #0f172a;box-shadow:0 4px 10px #dc262666}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,0,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.text-accent-blue{color:var(--accent-blue)}.notification-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:320px;background:#1a1f35;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:0 10px 40px #000c;z-index:1000;overflow:hidden;animation:slideUp .3s ease}.notification-header{padding:16px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}.notification-header h3{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0}.notification-list{max-height:400px;overflow-y:auto;scrollbar-width:thin}.notification-item{padding:16px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .2s}.notification-item:hover{background:#ffffff0d}.notification-item:last-child{border-bottom:none}.notif-order-num{font-weight:700;font-size:.9rem;color:var(--text-primary)}.notif-time{font-size:.7rem;font-weight:600;color:var(--text-muted)}.notif-customer{font-size:.8rem;color:var(--text-secondary);margin:4px 0 8px}.notification-footer{padding:14px;background:#6366f10d;border-top:1px solid rgba(255,255,255,.06);text-align:center;font-size:.75rem;font-weight:800;text-transform:uppercase;color:var(--accent-blue);cursor:pointer;transition:all .2s}.notification-footer:hover{background:var(--accent-blue);color:#fff}.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 0;flex-wrap:wrap;gap:12px}.pagination-buttons{display:flex;align-items:center;gap:4px}.pagination-btn{min-width:36px;height:36px;padding:0 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-family);font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.pagination-btn:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-active);color:var(--text-primary)}.pagination-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff;box-shadow:0 2px 8px #6366f14d}.pagination-btn:disabled{opacity:.3;cursor:not-allowed}.pagination-dots{padding:0 6px;color:var(--text-muted);font-weight:600}@media (max-width: 480px){.pagination{justify-content:center}.pagination-btn{min-width:32px;height:32px;font-size:.8rem}}.workflow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:32px}.workflow-card{position:relative;background:linear-gradient(145deg,var(--bg-card),rgba(26,31,53,.6));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:32px;overflow:hidden;transition:all var(--transition-normal);cursor:pointer;display:flex;flex-direction:column;gap:24px}.workflow-card:after{content:"";position:absolute;top:0;right:0;width:150px;height:150px;background:var(--workflow-glow, var(--gradient-primary));filter:blur(80px);opacity:.1;transition:opacity var(--transition-normal);pointer-events:none}.workflow-card:hover{transform:translateY(-8px);border-color:var(--workflow-border, var(--accent-blue));box-shadow:0 20px 40px #0006,0 0 20px #6366f11a}.workflow-card:hover:after{opacity:.25}.workflow-header{display:flex;align-items:center;gap:20px}.workflow-icon{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--workflow-bg, rgba(99, 102, 241, .1));color:var(--workflow-color, var(--accent-blue));box-shadow:inset 0 0 12px #ffffff0d}.workflow-info h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}.workflow-info p{color:var(--text-secondary);font-size:.95rem;line-height:1.4}.workflow-stats{display:flex;gap:20px;padding:16px;background:#0003;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.03)}.workflow-stat-item{flex:1}.workflow-stat-item .label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:2px}.workflow-stat-item .value{font-size:1.25rem;font-weight:700}.workflow-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.workflow-link{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:8px;color:var(--workflow-color, var(--accent-blue))}.workflow-link svg{transition:transform var(--transition-fast)}.workflow-card:hover .workflow-link svg{transform:translate(4px)}.glass-primary{--workflow-bg: rgba(99, 102, 241, .15);--workflow-color: var(--accent-blue);--workflow-border: var(--accent-blue);--workflow-glow: var(--gradient-primary)}.glass-success{--workflow-bg: rgba(16, 185, 129, .15);--workflow-color: var(--accent-green);--workflow-border: var(--accent-green);--workflow-glow: var(--gradient-green)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:9999;animation:fadeIn .2s ease}.modal-content{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);width:100%;max-width:500px;box-shadow:0 20px 50px #0009;position:relative;overflow:hidden;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.col-resizer{position:absolute;top:0;right:0;height:100%;width:10px;cursor:col-resize;border-right:1px solid rgba(255,255,255,.05);transition:all .2s;z-index:10}.col-resizer:hover{background:#6366f14d}.modal-header{padding:20px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;background:#ffffff05}.modal-body{padding:24px}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.top-progress-bar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);z-index:99999;transform-origin:left;animation:progressMove 2s ease-in-out infinite;box-shadow:0 0 10px var(--accent-blue)}@keyframes progressMove{0%{transform:scaleX(0);opacity:0}25%{transform:scaleX(.5);opacity:1}50%{transform:scaleX(.8);opacity:1}to{transform:scaleX(1);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.glass-panel{background:#1a1f3573;-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.search-field-modern{background:var(--bg-input);border:1px solid var(--border-color);border-radius:14px;height:56px;padding:0 60px;font-size:1.1rem;transition:all var(--transition-normal);color:var(--text-primary);width:100%}.search-icon-pos{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:10;pointer-events:none}.clear-btn-pos{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:10;background:transparent;border:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:color .2s}.clear-btn-pos:hover{color:#fff}.search-field-modern:focus{border-color:var(--accent-blue);box-shadow:0 0 0 4px #6366f126;background:#151b30cc}.filter-chip{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 16px;transition:all var(--transition-fast);cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:150px}.filter-chip label{font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:var(--text-muted)}.filter-chip select{background:transparent;border:none;font-size:14px;color:var(--text-primary);font-weight:600;outline:none;cursor:pointer;width:100%}.filter-chip:hover{background:#ffffff0f;border-color:#ffffff26}.filter-chip:focus-within{border-color:var(--accent-blue);background:#6366f10d}.stock-input-modern{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;text-align:center;font-weight:800;font-size:1.1rem;padding:8px;transition:all var(--transition-fast);width:80px;color:var(--text-primary)}.stock-input-modern:focus{background:var(--bg-card-hover);color:#fff;border-color:var(--accent-blue);box-shadow:0 0 0 4px #6366f133;outline:none}.table-row-hover{transition:all var(--transition-fast)}.table-row-hover:hover{background:#ffffff05!important;transform:scale(1.002)}.empty-state-modern{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;gap:20px}.w-full{width:100%}.h-full{height:100%}.w-10{width:40px}.h-10{height:40px}.w-14{width:56px}.h-14{height:56px}.w-44{width:176px}.w-20{width:80px}img{max-width:100%;display:block}.flex-1{flex:1}.flex-col{display:flex;flex-direction:column}.items-center{display:flex;align-items:center}.justify-between{display:flex;justify-content:space-between}.gap-2{gap:8px}.mb-8{margin-bottom:32px}.font-bold{font-weight:700}.text-lg{font-size:1.125rem}.text-3xl{font-size:1.875rem}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.bg-slate-900{background-color:#0f172a}.bg-slate-800\/50{background-color:#1e293b80}.bg-slate-800\/30{background-color:#1e293b4d}.bg-slate-700{background-color:#334155}.bg-slate-950{background-color:#020617}.border-2{border-width:2px}.border-white\/5{border-color:#ffffff0d}.border-white\/10{border-color:#ffffff1a}.pl-12{padding-left:3rem}.pr-4{padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.text-2xl{font-size:1.5rem}.text-emerald-400{color:#34d399}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}.text-slate-600{color:#475569}.max-w-2xl{max-width:42rem}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:32px;width:100%;max-width:1600px;margin:0 auto}.product-card-modern{background:var(--bg-card);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal);display:flex;flex-direction:column;position:relative;animation:fadeIn .4s ease forwards}.product-card-modern:hover{transform:translateY(-8px);border-color:#6366f14d;box-shadow:0 12px 40px #00000080,0 0 20px #6366f11a}.card-image-wrapper{position:relative;aspect-ratio:16 / 9;max-height:480px;overflow:hidden;background:var(--bg-input)}.card-image-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.product-card-modern:hover .card-image-wrapper img{transform:scale(1.08)}.card-badge{position:absolute;top:12px;left:12px;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;padding:4px 10px;font-size:10px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.05em;z-index:10}.card-content{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}.card-header-info{display:flex;flex-direction:column;gap:4px}.card-title{font-size:1.1rem;font-weight:700;line-height:1.3;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6rem}.card-sku{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted)}.card-footer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.05)}.card-stock-badge{display:flex;align-items:center;gap:10px;background:#ffffff08;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.card-sync-bubble{position:absolute;top:12px;right:12px;width:36px;height:36px;background:var(--accent-blue);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;transform:scale(0);transition:transform .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 12px #6366f166;z-index:10;cursor:pointer}.product-card-modern:hover .card-sync-bubble{transform:scale(1)}.card-sync-bubble:hover{background:var(--accent-blue-hover);transform:scale(1.1)!important}.view-toggle{display:flex;background:var(--bg-input);padding:4px;border-radius:12px;border:1px solid var(--border-color)}.view-toggle-btn{padding:8px 16px;border:none;background:transparent;color:var(--text-muted);border-radius:8px;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}.view-toggle-btn.active{background:var(--bg-card);color:var(--accent-blue);box-shadow:var(--shadow-sm)}.variation-matrix{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}.variation-pill{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:8px;display:flex;flex-direction:column;align-items:center;overflow:hidden;transition:all var(--transition-fast);flex:0 0 56px;max-width:56px}.variation-pill:hover,.variation-pill:focus-within{border-color:var(--accent-blue);background:#6366f114;box-shadow:0 4px 12px #0006}.variation-pill-label{font-size:11px;font-weight:800;color:var(--text-muted);background:#ffffff0a;width:100%;text-align:center;padding:4px 6px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}.variation-stock-input{background:transparent;border:none;width:100%;text-align:center;font-weight:900;font-size:1.1rem;padding:8px 0;color:var(--text-primary);outline:none}.variation-stock-input[value="0"]{color:var(--accent-red);opacity:.6}:root{--stock-col-product: 300px;--stock-col-woo: 80px;--stock-col-action: 100px}.stock-td-product{width:var(--stock-col-product);max-width:var(--stock-col-product)}.stock-td-woo{width:var(--stock-col-woo);text-align:center}.stock-td-action{width:var(--stock-col-action);text-align:right}.column-resizer{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:10;transition:background .2s}.column-resizer:hover,.column-resizer.is-resizing{background:var(--accent-blue);width:2px}.data-table th{position:relative;overflow:hidden!important}.product-img-thumb{width:60px;height:80px;object-fit:cover;border-radius:8px;box-shadow:var(--shadow-sm);background:var(--bg-input);transition:all var(--transition-fast)}.product-name-txt{font-size:.85rem;font-weight:600;color:var(--text-primary);line-height:1.3;width:calc(var(--stock-col-product) - 100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-category-badge{font-size:.65rem;font-weight:800;text-transform:uppercase;background:#6366f11a;color:#818cf8;padding:1px 6px;border-radius:100px;letter-spacing:.02em}.product-sku-txt{font-size:.65rem;color:var(--text-muted);font-family:monospace}.switch-io{position:relative;display:inline-flex;align-items:center;height:20px;width:36px;border-radius:100px;background:var(--bg-input);cursor:pointer;transition:all .3s;border:1px solid var(--border-color)}.switch-io.active{background:var(--accent-green-bg);border-color:var(--accent-green)}.switch-io-dot{height:14px;width:14px;background:#cbd5e1;border-radius:50%;margin:0 2px;transition:all .3s}.switch-io.active .switch-io-dot{transform:translate(16px);background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.btn-action-sm{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#ffffff08;color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer}.btn-action-sm:hover{background:var(--bg-card-hover);color:#fff}.btn-sync-active{background:#6366f11a;color:var(--accent-blue)}.btn-sync-active:hover{background:var(--accent-blue);color:#fff}.table-container{overflow-x:hidden!important;overflow-y:auto;max-width:100%}.table-container *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.form-group-modern{display:flex;flex-direction:column;gap:8px}.label-modern{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:2px}.input-modern{width:100%;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;color:var(--text-primary);font-family:var(--font-family);font-size:.95rem;transition:all var(--transition-fast);display:block}.input-modern:focus{outline:none;border-color:var(--accent-blue)!important;background:#151b30!important;box-shadow:0 0 0 4px #6366f126!important;color:#fff!important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #151b30 inset!important;-webkit-text-fill-color:#f1f5f9!important;transition:background-color 5000s ease-in-out 0s}.input-modern::placeholder{color:var(--text-muted);opacity:.5}.input-icon-left{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:color var(--transition-fast);display:flex!important;align-items:center;justify-content:center;z-index:5}.input-modern:focus+.input-icon-left,.relative:focus-within .input-icon-left{color:var(--accent-blue)}.relative{position:relative}.pl-10{padding-left:40px!important}.pr-10{padding-right:40px!important}.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-2{grid-column:span 2 / span 2}.divide-y>*+*{border-top-width:1px}.divide-white\/5>*+*{border-color:#ffffff0d}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.gap-5{gap:20px}.gap-10{gap:40px}.absolute{position:absolute}.top-1\/2{top:50%!important}.-translate-y-1\/2{transform:translateY(-50%)!important}.right-3{right:12px!important}
