@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--p50:#f5f3ff;--p100:#ede9fe;--p200:#ddd6fe;--p300:#c4b5fd;--p400:#a78bfa;--p500:#8b5cf6;--p600:#7c3aed;--p700:#6d28d9;--p800:#5b21b6;--p900:#4c1d95;--p950:#2e1065;--bg:#f8f7ff;--surface:#fff;--surface2:#f5f3ff;--border:#e8e5f0;--border2:#d4d0e8;--text:#1e1b2e;--text2:#6b6890;--text3:#a09ec0;--sidebar:#1e1b4b;--sidebar2:#2d2a6b;--sidebar-text:#ffffffb3;--sidebar-active:#8b5cf640;--shadow:0 1px 3px #6d28d90f, 0 4px 12px #6d28d90a;--shadow-md:0 4px 16px #6d28d91f, 0 1px 4px #6d28d90f;--shadow-lg:0 8px 32px #6d28d929, 0 2px 8px #6d28d914;--radius:14px;--radius-sm:8px;--radius-lg:20px;--transition:.2s cubic-bezier(.4,0,.2,1);--green:#10b981;--green-bg:#d1fae5;--green-text:#065f46;--red:#ef4444;--red-bg:#fee2e2;--red-text:#991b1b;--yellow:#f59e0b;--yellow-bg:#fef3c7;--yellow-text:#92400e;--blue:#3b82f6;--blue-bg:#dbeafe;--blue-text:#1e40af}[data-theme=dark]{--bg:#0f0e1a;--surface:#1a1830;--surface2:#221f3a;--border:#2d2a4a;--border2:#3d3a5a;--text:#f0eeff;--text2:#9d99c0;--text3:#6d6a90;--sidebar:#0d0c1d;--sidebar2:#1a1830;--sidebar-text:#fff9;--sidebar-active:#8b5cf64d;--shadow:0 1px 3px #0000004d, 0 4px 12px #0003;--shadow-md:0 4px 16px #0006, 0 1px 4px #0003;--shadow-lg:0 8px 32px #00000080, 0 2px 8px #0000004d;--green-bg:#064e3b;--green-text:#6ee7b7;--red-bg:#7f1d1d;--red-text:#fca5a5;--yellow-bg:#78350f;--yellow-text:#fcd34d;--blue-bg:#1e3a5f;--blue-text:#93c5fd}html,body{width:100%;height:100%;font-family:Inter,Segoe UI,sans-serif;overflow:hidden}#root{background:var(--bg);width:100vw;height:100vh;display:flex}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--p300);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--p400)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes countUp{0%{opacity:0}to{opacity:1}}@keyframes barGrow{0%{height:0}to{height:var(--bar-h)}}@keyframes glowPulse{0%,to{box-shadow:0 0 #8b5cf666}50%{box-shadow:0 0 0 6px #8b5cf600}}@keyframes slideInRight{0%{opacity:0;transform:translate(110%)}to{opacity:1;transform:translate(0)}}@keyframes toastProgress{0%{width:100%}to{width:0%}}.animate-fadeIn{animation:.35s both fadeIn}.animate-slideIn{animation:.35s both slideIn}.animate-scaleIn{animation:.25s both scaleIn}.animate-slideDown{animation:.25s both slideDown}.animate-slideInRight{animation:.3s cubic-bezier(.16,1,.3,1) both slideInRight}.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);transition:box-shadow var(--transition), transform var(--transition)}.card:hover{box-shadow:var(--shadow-md)}.badge{border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.badge-purple{background:var(--p100);color:var(--p700)}.badge-green{background:var(--green-bg);color:var(--green-text)}.badge-red{background:var(--red-bg);color:var(--red-text)}.badge-yellow{background:var(--yellow-bg);color:var(--yellow-text)}.badge-blue{background:var(--blue-bg);color:var(--blue-text)}.badge-gray{background:var(--surface2);color:var(--text2)}.btn{cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--p600), var(--p500));color:#fff;box-shadow:0 2px 8px #7c3aed4d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px #7c3aed66}.btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--p50);color:var(--p600);border-color:var(--p200)}.btn-danger{background:var(--red-bg);color:var(--red-text);border:1px solid #fca5a5}.btn-success{background:var(--green-bg);color:var(--green-text);border:1px solid #6ee7b7}.btn-sm{border-radius:8px;padding:6px 12px;font-size:12px}.btn-icon{border-radius:10px;padding:8px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.input{background:var(--surface2);border:1.5px solid var(--border);width:100%;color:var(--text);transition:border-color var(--transition), box-shadow var(--transition);border-radius:10px;outline:none;padding:10px 14px;font-family:inherit;font-size:14px}.input:focus{border-color:var(--p400);box-shadow:0 0 0 3px #8b5cf61f}.input::placeholder{color:var(--text3)}.table{border-collapse:collapse;width:100%}.table th{text-align:left;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;background:var(--surface2);padding:11px 18px;font-size:11px;font-weight:700}.table td{color:var(--text2);border-top:1px solid var(--border);padding:13px 18px;font-size:13px}.table tr:hover td{background:var(--surface2)}.toggle{cursor:pointer;width:38px;height:20px;transition:background var(--transition);border-radius:10px;flex-shrink:0;position:relative}.toggle-thumb{width:14px;height:14px;transition:left var(--transition);background:#fff;border-radius:50%;position:absolute;top:3px;box-shadow:0 1px 3px #0003}.skeleton{background:linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);background-size:200px 100%;border-radius:8px;animation:1.5s infinite shimmer}.stat-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);transition:all var(--transition);padding:20px}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.nav-item{cursor:pointer;text-align:left;width:100%;transition:all var(--transition);color:var(--sidebar-text);background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:10px 14px;font-family:inherit;font-size:13.5px;font-weight:500;display:flex}.nav-item:hover{color:#fff;background:#ffffff14}.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600}.nav-item .nav-icon{text-align:center;flex-shrink:0;width:20px;font-size:16px}.progress-bar{background:var(--surface2);border-radius:10px;overflow:hidden}.progress-fill{border-radius:10px;height:100%;transition:width .6s}.tooltip{position:relative}.tooltip:after{content:attr(data-tip);background:var(--text);color:var(--surface);white-space:nowrap;opacity:0;pointer-events:none;z-index:100;border-radius:6px;padding:4px 8px;font-size:11px;transition:opacity .2s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.tooltip:hover:after{opacity:1}.page{width:100%;height:100%;padding:28px;animation:.3s fadeIn;overflow-y:auto}.page-header{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.page-title{color:var(--text);letter-spacing:-.3px;font-size:22px;font-weight:800}.page-sub{color:var(--text3);margin-top:3px;font-size:13px}.page-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.chart-container{position:relative}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-state-icon{opacity:.6;margin-bottom:16px;font-size:48px}.empty-state-title{color:var(--text);margin-bottom:6px;font-size:16px;font-weight:700}.empty-state-sub{color:var(--text3);font-size:13px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:90vh;padding:28px;animation:.2s scaleIn;overflow-y:auto}.tag{background:var(--p100);color:var(--p700);border-radius:20px;align-items:center;gap:4px;padding:3px 9px;font-size:11px;font-weight:600;display:inline-flex}.divider{background:var(--border);height:1px;margin:16px 0}.avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex;overflow:hidden}.notif-dot{background:var(--p500);border-radius:50%;flex-shrink:0;width:8px;height:8px}.timeline{padding-left:28px;position:relative}.timeline:before{content:"";background:var(--border);width:2px;position:absolute;top:0;bottom:0;left:10px}.timeline-item{padding-bottom:20px;position:relative}.timeline-item:before{content:"";background:var(--border);border:2px solid var(--surface);border-radius:50%;width:12px;height:12px;position:absolute;top:4px;left:-22px}.timeline-item.done:before{background:var(--p500)}.timeline-item.active:before{background:var(--p600);animation:2s infinite glowPulse}.hover-lift{transition:transform var(--transition), box-shadow var(--transition)}.hover-lift:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.status-processing{background:var(--blue-bg);color:var(--blue-text)}.status-shipped{background:var(--yellow-bg);color:var(--yellow-text)}.status-delivered{background:var(--green-bg);color:var(--green-text)}.status-cancelled{background:var(--red-bg);color:var(--red-text)}.chart-bar{border-radius:6px 6px 0 0;transition:height .5s}@media (width<=767px){.page{padding:16px}.page-header{flex-direction:column;gap:12px}.page-actions{justify-content:flex-start;width:100%}.grid-4,.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}.modal{width:calc(100vw - 32px)!important;max-width:100%!important;padding:20px!important}.modal-overlay{align-items:flex-end;padding-bottom:0}.modal{border-radius:20px 20px 0 0!important}}