:root{--primary:#4f46e5;--primary-light:#6366f1;--primary-dark:#312e81;--primary-soft:#eef0fe;--accent:#7c3aed;--accent-soft:#6366f129;--cyan:#06b6d4;--grad-brand:linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 120%);--grad-btn:linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);--success:#16a34a;--success-soft:#e7f6ec;--warning:#d97706;--warning-soft:#fdf3e3;--danger:#dc2626;--danger-soft:#fdecec;--info:#0284c7;--info-soft:#e6f4fb;--bg:#f2f3fa;--card-bg:#ffffffc7;--text:#1c2033;--text-secondary:#5b6172;--text-muted:#9298a8;--border:#e3e5f0;--border-light:#ebedf5;--sidebar-w:248px;--sidebar-w-collapsed:72px;--topbar-h:60px;--radius:16px;--radius-sm:10px;--shadow:0 1px 2px #1c20460a, 0 6px 24px #1c20460f;--shadow-lg:0 12px 40px #1c204624;--glow:0 0 24px #6366f159;--font:"Inter", "Segoe UI Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font);color:var(--text);background:radial-gradient(1000px 620px at 88% -12%, #6366f129, transparent 60%), radial-gradient(760px 540px at -8% 28%, #06b6d41c, transparent 60%), radial-gradient(900px 640px at 55% 115%, #a855f71f, transparent 60%), var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background-attachment:fixed;font-size:15px;line-height:1.5}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--primary-dark);letter-spacing:-.01em;font-weight:650;line-height:1.3}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}::selection{background:var(--accent-soft)}input,select,textarea,button{font-family:inherit}input,select,textarea{accent-color:var(--primary)}input:not([type=checkbox]):not([type=radio]),select,textarea{transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--accent-soft), 0 0 18px #6366f126;outline:none;border-color:var(--primary-light)!important}::placeholder{color:var(--text-muted)}.input-dark::placeholder{color:#ebedff6b}button{transition:opacity .2s,transform .1s,box-shadow .2s,filter .15s,background .15s}button:not(:disabled):hover{filter:brightness(1.05)}button:active{transform:scale(.97)}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);white-space:nowrap;background:#f6f7fcd9;padding:12px 14px;font-size:11.5px;font-weight:650}td{color:var(--text);border-bottom:1px solid var(--border-light);padding:12px 14px;font-size:14px}tbody tr{transition:background .12s}tr:hover td{background:#6366f10d}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#c3c7d9 padding-box padding-box;border:2px solid #0000;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a3a9c4 padding-box padding-box;border:2px solid #0000}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes floatSlow{0%,to{transform:translate(0)}50%{transform:translate(18px,-22px)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulseGlow{0%,to{box-shadow:0 6px 20px #6366f173}50%{box-shadow:0 6px 32px #a855f799}}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #ffffffa6;padding:24px;transition:box-shadow .2s,border-color .2s}.card:hover{box-shadow:0 2px 4px #1c20460d,0 10px 32px #4f46e51a}.btn-primary{background:var(--grad-btn);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex;box-shadow:0 2px 10px #6366f159,inset 0 1px #ffffff2e}.btn-primary:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 4px 20px #7c3aed73}.btn-secondary{color:var(--primary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:#ffffffd9;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;display:inline-flex;box-shadow:0 1px 2px #1c20460d}.btn-secondary:not(:disabled):hover{border-color:var(--primary-light);background:var(--primary-soft);box-shadow:0 0 14px #6366f133}.badge{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;line-height:1.4;display:inline-block}.badge-success{background:var(--success-soft);color:#15803d}.badge-danger{background:var(--danger-soft);color:#b91c1c}.badge-warning{background:var(--warning-soft);color:#b45309}.text-gradient{background:var(--grad-brand);color:#0000;-webkit-background-clip:text;background-clip:text}main>div{animation:.3s fadeIn}.app-shell{min-height:100vh;display:flex}.app-sidebar{width:var(--sidebar-w);color:#eef0ff;z-index:100;background:radial-gradient(420px 320px at 15% -5%,#6366f166,#0000 65%),radial-gradient(360px 320px at 90% 105%,#a855f747,#0000 65%),radial-gradient(280px 240px at 100% 40%,#06b6d41a,#0000 65%),linear-gradient(#0e1130 0%,#090b20 100%);border-right:1px solid #ffffff0f;flex-direction:column;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden;box-shadow:4px 0 32px #06081c73}.app-sidebar.collapsed{width:var(--sidebar-w-collapsed)}.sidebar-brand{border-bottom:1px solid #ffffff12;align-items:center;gap:11px;min-height:64px;padding:14px;display:flex}.sidebar-brand-logo{background:var(--grad-brand);color:#fff;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;animation:5s ease-in-out infinite pulseGlow;display:flex;box-shadow:0 4px 18px #8b5cf68c}.sidebar-brand-text{white-space:nowrap;flex:1;min-width:0}.sidebar-brand-title{letter-spacing:-.01em;color:#fff;font-size:15px;font-weight:700}.sidebar-brand-sub{background:linear-gradient(90deg,#a5b4fc,#67e8f9);color:#0000;text-transform:uppercase;letter-spacing:.09em;-webkit-background-clip:text;background-clip:text;font-size:10.5px;font-weight:650}.sidebar-collapse-btn{color:#eef0ffcc;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.sidebar-collapse-btn:hover{color:#fff;background:#ffffff24;box-shadow:0 0 12px #6366f166}.sidebar-nav{flex:1;padding:10px 10px 16px;overflow:hidden auto}.sidebar-nav::-webkit-scrollbar-thumb{background:#ffffff29 padding-box padding-box;border:2px solid #0000}.nav-section-title{text-transform:uppercase;letter-spacing:.13em;color:#eef0ff66;white-space:nowrap;padding:16px 10px 6px;font-size:10px;font-weight:700}.app-sidebar.collapsed .nav-section-title{text-align:center;padding:10px 0 4px}.app-sidebar.collapsed .nav-section-title span{display:none}.app-sidebar.collapsed .nav-section-title:after{content:"";background:#ffffff1f;width:24px;height:1px;margin:0 auto;display:block}.nav-item{cursor:pointer;color:#eef0ffad;white-space:nowrap;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:11px;width:100%;margin:1px 0;padding:9px 10px;font-size:13.5px;font-weight:500;transition:background .15s,color .15s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.nav-item:hover{color:#fff;filter:none;background:#ffffff0f}.nav-item.active{color:#fff;background:linear-gradient(90deg,#6366f16b,#a855f729);font-weight:600;box-shadow:0 0 20px #6366f140,inset 0 1px #ffffff14}.nav-item.active:before{content:"";background:linear-gradient(#67e8f9,#8b5cf6);border-radius:3px;width:3px;position:absolute;top:18%;bottom:18%;left:0;box-shadow:0 0 10px #67e8f9b3}.nav-item.active svg{color:#b0c0ff}.app-sidebar.collapsed .nav-item{justify-content:center;padding:10px 0}.app-sidebar.collapsed .nav-item .nav-label{display:none}.sidebar-user{background:#ffffff08;border-top:1px solid #ffffff12;align-items:center;gap:10px;padding:12px;display:flex}.app-sidebar.collapsed .sidebar-user{flex-direction:column;gap:8px}.sidebar-avatar{background:var(--grad-brand);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:15px;font-weight:700;display:flex;box-shadow:0 0 14px #8b5cf680}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.sidebar-user-role{color:#eef0ff80;text-transform:capitalize;white-space:nowrap;font-size:11px}.sidebar-logout{color:#eef0ffbf;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff14;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.sidebar-logout:hover{color:#fff;filter:none;background:#dc262666;border-color:#f8717166;box-shadow:0 0 12px #dc262659}.app-main{margin-left:var(--sidebar-w);flex-direction:column;flex:1;min-width:0;min-height:100vh;transition:margin-left .25s cubic-bezier(.4,0,.2,1);display:flex}.app-main.collapsed{margin-left:var(--sidebar-w-collapsed)}.app-topbar{height:var(--topbar-h);-webkit-backdrop-filter:blur(18px)saturate(1.5);z-index:50;background:#ffffff9e;border-bottom:1px solid #ffffffb3;justify-content:space-between;align-items:center;gap:16px;padding:0 24px;display:flex;position:sticky;top:0;box-shadow:0 1px #1c20460d}.app-topbar:after{content:"";background:linear-gradient(90deg,#0000,#6366f173,#06b6d459,#0000);height:1px;position:absolute;bottom:-1px;left:0;right:0}.topbar-title{color:var(--text);letter-spacing:-.01em;font-size:17px;font-weight:680}.topbar-right{align-items:center;gap:12px;display:flex}.topbar-date{color:var(--text-secondary);white-space:nowrap;background:#ffffffbf;border:1px solid #ffffffe6;border-radius:999px;align-items:center;gap:7px;padding:5px 14px;font-size:12.5px;display:flex;box-shadow:0 1px 3px #1c20460f}.topbar-clock{font-variant-numeric:tabular-nums;color:var(--primary);font-weight:650}.topbar-role{color:#fff;background:var(--grad-btn);text-transform:capitalize;white-space:nowrap;border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:650;box-shadow:0 2px 10px #6366f159}.app-content{flex:1;padding:24px}@media (width<=900px){.app-content{padding:16px}}