:root{--bg: #0D1017;--surface: #141820;--surface-2: #1B2030;--border: #252C40;--border-2: #313A54;--text: #E2E6F7;--text-muted: #7E88B0;--text-dim: #404866;--accent: #F5FF52;--accent-dim: rgba(245, 255, 82, .09);--accent-glow: rgba(245, 255, 82, .18);--success: #3EE88B;--success-dim: rgba(62, 232, 139, .12);--warning: #FFB547;--warning-dim: rgba(255, 181, 71, .12);--danger: #FF4566;--danger-dim: rgba(255, 69, 102, .12);--font-display: "Bebas Neue", sans-serif;--font-ui: "Syne", sans-serif;--font-mono: "JetBrains Mono", monospace;--sidebar-w: 220px;--topbar-h: 52px;--radius: 4px;--radius-lg: 8px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-ui)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:2px}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;height:100vh;overflow:hidden}.sidebar{grid-row:1 / -1;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(-8px);opacity:0}to{transform:translate(0);opacity:1}}.sidebar-logo{height:var(--topbar-h);display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--border);gap:10px;flex-shrink:0}.sidebar-logo-mark{width:26px;height:26px;background:var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-logo-mark svg{color:#0a0b0f}.sidebar-logo-text{font-family:var(--font-display);font-size:20px;letter-spacing:.05em;color:var(--text)}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}.nav-group{margin-bottom:4px}.nav-group-label{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--text-dim);padding:8px 20px 4px;text-transform:uppercase}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 20px;color:#9aa3c8;font-size:13px;font-weight:500;border-left:2px solid transparent;transition:all .15s ease;position:relative}.nav-item:hover{color:var(--text);background:var(--accent-dim)}.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim)}.nav-item svg{flex-shrink:0;opacity:.7}.nav-item.active svg{opacity:1}.sidebar-footer{border-top:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:10px}.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;color:var(--accent);flex-shrink:0}.user-info{flex:1;overflow:hidden}.user-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--border);background:var(--bg);animation:fadeDown .3s ease}@keyframes fadeDown{0%{transform:translateY(-4px);opacity:0}to{transform:translateY(0);opacity:1}}.topbar-title{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.05em}.topbar-title span{color:var(--text)}.topbar-right{display:flex;align-items:center;gap:12px}.topbar-time{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.main-content{overflow-y:auto;padding:28px;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}.page-title{font-family:var(--font-display);font-size:32px;letter-spacing:.03em;color:var(--text);line-height:1}.page-subtitle{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:6px}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}.metric-card:hover{border-color:var(--border-2);box-shadow:0 2px 12px #0000004d}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--border-2),transparent)}.metric-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}.metric-value{font-family:var(--font-display);font-size:40px;line-height:1;letter-spacing:.02em;color:var(--text)}.metric-value.accent{color:var(--accent)}.metric-value.danger{color:var(--danger)}.metric-value.warning{color:var(--warning)}.metric-value.success{color:var(--success)}.metric-footer{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:8px}.table-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.table-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.table-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#9aa3c8;text-transform:uppercase}.table-controls{display:flex;align-items:center;gap:8px}.search-input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;color:var(--text);font-family:var(--font-mono);font-size:12px;width:200px;outline:none;transition:border-color .2s}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--accent)}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius);font-size:12px;font-weight:600;font-family:var(--font-ui);border:none;transition:all .15s ease}.btn-primary{background:var(--accent);color:#0a0b0f}.btn-primary:hover{background:#fffb7a;box-shadow:0 0 16px var(--accent-glow)}.btn-secondary{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-3)}.btn-ghost{background:transparent;color:#9aa3c8;border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}.data-table{width:100%;border-collapse:collapse}.data-table th{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;text-align:left;padding:10px 16px;border-bottom:2px solid var(--border);background:var(--surface-2);white-space:nowrap}.data-table td{padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr{transition:background .1s ease}.data-table tbody tr:nth-child(2n) td{background:#ffffff04}.data-table tbody tr:hover td{background:var(--accent-dim)!important}.col-mono{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}.col-name{font-weight:500;color:var(--text);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-stock{font-family:var(--font-display);font-size:20px;letter-spacing:.02em}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.badge-success{background:var(--success-dim);color:var(--success);border:1px solid rgba(62,232,139,.2)}.badge-warning{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(255,181,71,.2)}.badge-danger{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(255,69,102,.2)}.badge-info{background:#648cff1f;color:#7a9fff;border:1px solid rgba(100,140,255,.2)}.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden}.login-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;opacity:.4;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent)}.login-card{position:relative;width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;animation:fadeIn .5s ease}.login-card:before{content:"";position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px}.login-logo-mark{width:36px;height:36px;background:var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}.login-logo-mark svg{color:#0a0b0f}.login-logo-text{font-family:var(--font-display);font-size:26px;letter-spacing:.05em}.login-heading{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}.login-sub{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-bottom:28px}.form-group{margin-bottom:16px}.form-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}.form-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;color:var(--text);font-family:var(--font-mono);font-size:13px;outline:none;transition:border-color .2s}.form-input::placeholder{color:var(--text-dim)}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.btn-login{width:100%;padding:12px;background:var(--accent);color:#0a0b0f;border:none;border-radius:var(--radius);font-size:13px;font-weight:700;font-family:var(--font-ui);letter-spacing:.05em;margin-top:8px;transition:all .2s ease}.btn-login:hover{background:#fffb7a;box-shadow:0 4px 24px var(--accent-glow);transform:translateY(-1px)}.btn-login:active{transform:translateY(0)}.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}