*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--purple-500: #a855f7;--purple-600: #9333ea;--pink-500: #ec4899;--slate-900: #0f172a;--slate-800: #1e293b;--slate-700: #334155;--slate-600: #475569;--slate-500: #64748b;--slate-400: #94a3b8;--slate-300: #cbd5e1;--indigo-900: #312e81;--purple-900: #581c87;--red-400: #f87171;--red-500: #ef4444;--green-400: #4ade80;--green-500: #22c55e;--blue-400: #60a5fa;--blue-500: #3b82f6}html,body,#root{height:100%;width:100%;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#f1f5f9}body{background:linear-gradient(135deg,#0f172a,#581c87,#312e81)}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.w-full{width:100%}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.m-0{margin:0}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-white{color:#fff}.text-slate-300{color:var(--slate-300)}.text-slate-400{color:var(--slate-400)}.text-slate-500{color:var(--slate-500)}.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.text-purple-400{color:#c084fc}.text-red-400{color:var(--red-400)}.text-green-400{color:var(--green-400)}.text-blue-400{color:var(--blue-400)}.bg-slate-800{background-color:var(--slate-800)}.bg-slate-900{background-color:var(--slate-900)}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-slate-700{border-color:var(--slate-700)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shrink-0{flex-shrink:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}.z-40{z-index:40}.z-50{z-index:50}.transition-all{transition:all .3s ease}.transition-colors{transition:color .15s ease,background-color .15s ease}.transition-transform{transition:transform .3s ease}.cursor-pointer{cursor:pointer}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-6>*+*{margin-top:1.5rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s ease-in-out infinite}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#1e293b80;border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#64748b80;border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#64748bcc}*{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.5) rgba(30,41,59,.5)}.app-container{height:100vh;width:100%;overflow:hidden;background:linear-gradient(135deg,#0f172a,#581c87,#312e81)}.sidebar{width:256px;height:100vh;background:#0f172af2;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid rgba(255,255,255,.05);padding:1.5rem;position:fixed;left:0;top:0;z-index:50;display:flex;flex-direction:column;transition:transform .3s ease;box-shadow:0 25px 50px -12px #00000080}.sidebar.closed{transform:translate(-100%)}@media(min-width:768px){.sidebar{transform:translate(0)!important}}.sidebar-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}.sidebar-logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--purple-500) 0%,var(--pink-500) 100%);border-radius:12px;display:flex;align-items:center;justify-content:center}.sidebar-logo-text h1{font-size:1.25rem;font-weight:700;background:linear-gradient(90deg,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-logo-text p{font-size:.75rem;color:var(--slate-400)}.sidebar-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.sidebar-nav-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:12px;border:none;background:transparent;color:var(--slate-300);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left}.sidebar-nav-item:hover{background:#ffffff1a;color:#fff}.sidebar-nav-item.active{background:linear-gradient(135deg,var(--purple-500) 0%,var(--pink-500) 100%);color:#fff;box-shadow:0 10px 15px -3px #a855f74d}.sidebar-divider{height:1px;background:#ffffff1a;margin:1rem 0}.sidebar-user{padding:.75rem}.sidebar-user-name{font-size:.875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-email{font-size:.75rem;color:var(--slate-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:12px;border:none;background:transparent;color:var(--red-400);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left}.sidebar-logout:hover{background:#ef44441a;color:#fca5a5}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:#0f172ae6;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.05);z-index:50;align-items:center;justify-content:space-between;padding:0 1rem;box-shadow:0 4px 15px #0000004d}@media(max-width:767px){.mobile-header{display:flex}}.mobile-header-btn{padding:.5rem;border-radius:8px;border:none;background:transparent;color:#fff;cursor:pointer;transition:background-color .2s ease}.mobile-header-btn:hover{background:#ffffff1a}.mobile-header-btn.logout{color:var(--red-400)}.mobile-header-btn.logout:hover{background:#ef44441a}.mobile-header-logo{display:flex;align-items:center;gap:.5rem}.mobile-header-logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--purple-500) 0%,var(--pink-500) 100%);border-radius:8px;display:flex;align-items:center;justify-content:center}.mobile-header-logo span{font-weight:600;color:#fff}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40}@media(max-width:767px){.mobile-overlay.open{display:block}}.main-content{height:100vh;display:flex;flex-direction:column;margin-left:0;padding-top:56px;overflow:hidden}@media(min-width:768px){.main-content{margin-left:256px;padding-top:0}}.main-inner{flex:1;padding:1rem;overflow-y:auto;max-width:1920px;margin:0 auto;width:100%}@media(min-width:768px){.main-inner{padding:2rem}}.page-header{margin-bottom:1.5rem}.page-header h1{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.25rem}.page-header p{color:var(--slate-400);font-size:.875rem}.card{background:#1e293b80;border:1px solid var(--slate-700);border-radius:16px;padding:1.5rem;transition:background-color .2s ease}.card:hover{background:#1e293bb3}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(min-width:640px){.stats-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(6,1fr)}}.stat-card{background:#1e293b80;border:1px solid var(--slate-700);border-radius:16px;padding:1rem;transition:background-color .2s ease}.stat-card:hover{background:#1e293bb3}.stat-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}.stat-icon.purple{background:#a855f733;color:#c084fc}.stat-icon.green{background:#22c55e33;color:#4ade80}.stat-icon.blue{background:#3b82f633;color:#60a5fa}.stat-icon.pink{background:#ec489933;color:#f472b6}.stat-icon.orange{background:#f9731633;color:#fb923c}.stat-icon.cyan{background:#06b6d433;color:#22d3ee}.stat-value{font-size:1.5rem;font-weight:700;color:#fff}.stat-label{font-size:.875rem;color:var(--slate-400)}.stat-desc{font-size:.75rem;color:var(--slate-500);margin-top:.25rem}.two-col-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}@media(min-width:1024px){.two-col-grid{grid-template-columns:repeat(2,1fr)}}.table-container{background:#1e293b80;border:1px solid var(--slate-700);border-radius:16px;overflow:hidden}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}thead{background:#0f172a80}th{text-align:left;padding:1rem 1.5rem;font-size:.875rem;font-weight:500;color:var(--slate-400);white-space:nowrap}td{padding:1rem 1.5rem;border-top:1px solid var(--slate-700);white-space:nowrap}tbody tr{transition:background-color .15s ease}tbody tr:hover{background:#1e293b80}.search-container{position:relative;margin-bottom:1.5rem}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--slate-400)}.search-input{width:100%;padding:.875rem 1rem .875rem 2.75rem;background:#1e293b80;border:1px solid var(--slate-700);border-radius:12px;color:#fff;font-size:.9375rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input::-moz-placeholder{color:var(--slate-500)}.search-input::placeholder{color:var(--slate-500)}.search-input:focus{border-color:var(--purple-500);box-shadow:0 0 0 3px #a855f71a}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:none}.btn-primary{background:linear-gradient(135deg,var(--purple-500) 0%,var(--pink-500) 100%);color:#fff}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{background:var(--slate-800);border:1px solid var(--slate-700);color:var(--slate-300)}.btn-secondary:hover{background:var(--slate-700);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:6px;font-size:.75rem;font-weight:500}.badge-blue{background:#3b82f633;color:var(--blue-400)}.badge-green{background:#22c55e33;color:var(--green-400)}.badge-red{background:#ef444433;color:var(--red-400)}.online-dot{width:8px;height:8px;border-radius:50%;background:var(--green-400);animation:pulse 2s ease-in-out infinite}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px}.spinner{width:48px;height:48px;color:var(--purple-500);animation:spin 1s linear infinite}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#0f172a,#581c87,#312e81)}.login-card{width:100%;max-width:400px;background:#1e293b80;border:1px solid var(--slate-700);border-radius:24px;padding:2rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.login-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}.login-logo-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--purple-500) 0%,var(--pink-500) 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.login-logo h1{font-size:1.5rem;font-weight:700;color:#fff}.login-logo p{color:var(--purple-400);font-size:.875rem}.login-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{font-size:.875rem;font-weight:500;color:var(--slate-300)}.form-input{width:100%;padding:.875rem 1rem;background:#0f172a80;border:1px solid var(--slate-700);border-radius:12px;color:#fff;font-size:1rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.form-input::-moz-placeholder{color:var(--slate-500)}.form-input::placeholder{color:var(--slate-500)}.form-input:focus{border-color:var(--purple-500);box-shadow:0 0 0 3px #a855f71a}.login-btn{width:100%;padding:.875rem;margin-top:.5rem;background:linear-gradient(135deg,var(--purple-500) 0%,var(--pink-500) 100%);border:none;border-radius:12px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.login-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-footer{text-align:center;margin-top:1.5rem;color:var(--slate-500);font-size:.75rem}.login-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--red-400);padding:.75rem 1rem;border-radius:8px;font-size:.875rem}.recharts-tooltip-wrapper{outline:none}.recharts-default-tooltip{background:var(--slate-800)!important;border:1px solid var(--slate-700)!important;border-radius:8px!important}.recharts-legend-item-text{color:var(--slate-400)!important}