:root{--color-primary:#667eea;--color-primary-dark:#764ba2;--color-primary-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--color-success:#10b981;--color-success-light:#d1fae5;--color-error:#ef4444;--color-error-light:#fee2e2;--color-warning:#f59e0b;--color-warning-light:#fef3c7;--color-info:#3b82f6;--color-info-light:#dbeafe;--color-bg:#f5f7fa;--color-bg-white:#fff;--color-text:#333;--color-text-secondary:#666;--color-text-muted:#999;--color-border:#e0e0e0;--color-border-light:#f0f0f0;--sidebar-width:240px;--sidebar-collapsed-width:60px;--sidebar-bg:var(--color-primary-gradient);--topbar-height:60px;--mobile-nav-height:64px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 10px 15px #0000001a;--shadow-xl:0 20px 25px #00000026;--font-xs:11px;--font-sm:13px;--font-base:14px;--font-md:16px;--font-lg:20px;--font-xl:24px;--font-2xl:28px;--font-3xl:32px;--transition-fast:.15s ease;--transition-normal:.2s ease;--transition-slow:.3s ease;--z-sidebar:1000;--z-topbar:900;--z-mobile-nav:1000;--z-modal:2000;--z-toast:3000}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;background:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{font-family:inherit}a{color:inherit;text-decoration:none}input,textarea,select{font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:0 20px}.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.p-1{padding:8px}.p-2{padding:16px}.p-3{padding:24px}.p-4{padding:32px}.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.card-header{color:#333;margin-bottom:16px;font-size:18px;font-weight:600}.btn{cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.btn-primary:hover:not(:disabled){box-shadow:0 4px 12px #667eea66}.btn-secondary{color:#333;background:#f5f7fa;border:1px solid #e0e0e0}.btn-secondary:hover:not(:disabled){background:#e8ecf0}.btn-success{color:#fff;background:#10b981}.btn-success:hover:not(:disabled){background:#059669}.btn-danger{color:#fff;background:#ef4444}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-sm{padding:6px 12px;font-size:13px}.btn-lg{padding:14px 28px;font-size:16px}.table{border-collapse:collapse;background:#fff;border-radius:8px;width:100%;overflow:hidden}.table thead{background:#f5f7fa}.table th{text-align:left;color:#666;text-transform:uppercase;letter-spacing:.5px;padding:12px 16px;font-size:13px;font-weight:600}.table td{border-top:1px solid #e0e0e0;padding:12px 16px;font-size:14px}.table tbody tr:hover{background:#f9fafb}.spinner{border:3px solid #f3f3f3;border-top-color:#667eea;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.alert{border-radius:8px;margin-bottom:16px;padding:12px 16px;font-size:14px}.alert-success{color:#065f46;background:#d1fae5;border:1px solid #6ee7b7}.alert-error{color:#991b1b;background:#fee2e2;border:1px solid #fca5a5}.alert-warning{color:#92400e;background:#fef3c7;border:1px solid #fcd34d}.alert-info{color:#1e3a8a;background:#dbeafe;border:1px solid #93c5fd}.toast-container{z-index:10000;flex-direction:column;gap:12px;max-width:400px;display:flex;position:fixed;top:20px;right:20px}.toast{background:#fff;border-left:4px solid;border-radius:8px;align-items:center;gap:12px;padding:16px;animation:.3s ease-out toast-slide-in;display:flex;box-shadow:0 4px 12px #00000026}.toast-success{border-left-color:#10b981}.toast-error{border-left-color:#ef4444}.toast-warning{border-left-color:#f59e0b}.toast-info{border-left-color:#667eea}.toast-icon{border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;font-weight:700;display:flex}.toast-success .toast-icon{color:#065f46;background:#d1fae5}.toast-error .toast-icon{color:#991b1b;background:#fee2e2}.toast-warning .toast-icon{color:#92400e;background:#fef3c7}.toast-info .toast-icon{color:#3730a3;background:#eef2ff}.toast-message{color:#333;flex:1;font-size:14px;line-height:1.5}.toast-close{color:#999;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:24px;line-height:1;transition:color .2s;display:flex}.toast-close:hover{color:#333}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=768px){.toast-container{max-width:none;inset:auto 20px 20px}}.sidebar{width:var(--sidebar-width);background:var(--color-primary-gradient);color:#fff;height:100vh;z-index:var(--z-sidebar);transition:width var(--transition-slow);flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar-header{border-bottom:1px solid #ffffff1a;flex-shrink:0;padding:20px}.sidebar-logo{color:#fff;margin:0;font-size:24px;font-weight:700}.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}.nav-group{margin-bottom:4px}.nav-group-header{color:#ffffff80;cursor:pointer;letter-spacing:1.2px;text-transform:uppercase;width:100%;transition:color var(--transition-fast);background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 20px;font-size:10px;font-weight:700;display:flex}.nav-group-header:hover{color:#fffc}.nav-group-label{text-align:left;flex:1}.nav-group-items{padding:2px 0}.sidebar-item{color:#ffffffbf;transition:all var(--transition-fast);align-items:center;gap:12px;padding:10px 20px;font-size:14px;text-decoration:none;display:flex;position:relative}.sidebar-item:hover{color:#fff;background:#ffffff1a}.sidebar-item.active{color:#fff;background:#ffffff26;border-left:3px solid #fff;padding-left:17px}.sidebar-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;display:flex}.sidebar-label{white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:500;overflow:hidden}.sidebar-badge{color:#fff;text-align:center;background:#ff4757;border-radius:12px;flex-shrink:0;min-width:20px;padding:2px 8px;font-size:11px;font-weight:600}.sidebar::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#ffffff0d}.sidebar-nav::-webkit-scrollbar-track{background:#ffffff0d}.sidebar::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.sidebar-nav::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (width>=768px) and (width<=1024px){.sidebar{width:var(--sidebar-collapsed-width)}.sidebar-logo{text-align:center;font-size:16px}.sidebar-header{padding:16px 8px}.nav-group-header{justify-content:center;padding:6px 8px}.nav-group-label,.nav-group-header svg{display:none}.sidebar-item{justify-content:center;gap:0;padding:12px}.sidebar-item.active{padding-left:9px}.sidebar-label,.sidebar-badge{display:none}.sidebar-icon{width:auto}}@media (width<=767px){.sidebar{display:none}}.topbar{z-index:999;background:#fff;border-bottom:1px solid #e0e0e0;height:60px;position:sticky;top:0}.topbar-content{justify-content:space-between;align-items:center;height:100%;padding:0 30px;display:flex}.topbar-left{flex:1}.topbar-org-name{color:#333;margin:0;font-size:20px;font-weight:600}.topbar-right{align-items:center;gap:20px;display:flex}.user-menu-container{position:relative}.user-menu-trigger{cursor:pointer;background:#f5f7fa;border:1px solid #e0e0e0;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;transition:all .2s;display:flex}.user-menu-trigger:hover{background:#e8ecf0}.user-avatar{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:600;display:flex}.user-name{color:#333;font-size:14px;font-weight:500}.user-arrow{color:#666;font-size:10px}.user-menu-dropdown{background:#fff;border:1px solid #e0e0e0;border-radius:8px;min-width:220px;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 4px 12px #0000001a}.user-menu-header{background:#f5f7fa;padding:16px}.user-menu-name{color:#333;margin-bottom:4px;font-size:16px;font-weight:600}.user-menu-email{color:#666;margin-bottom:4px;font-size:13px}.user-menu-role{color:#999;text-transform:capitalize;font-size:12px}.user-menu-divider{background:#e0e0e0;height:1px}.user-menu-item{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:14px;transition:background .2s;display:flex}.user-menu-item:hover{background:#f5f7fa}.user-menu-item span{font-size:16px}.mobile-nav{height:var(--mobile-nav-height);background:var(--color-bg-white);border-top:1px solid var(--color-border);z-index:var(--z-mobile-nav);padding:0 8px;padding-bottom:env(safe-area-inset-bottom,0);display:none;position:fixed;bottom:0;left:0;right:0}@media (width<=767px){.mobile-nav{justify-content:space-around;align-items:center;display:flex}}.mobile-nav-item{color:var(--color-text-muted);cursor:pointer;transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;font-size:10px;font-weight:500;text-decoration:none;display:flex}.mobile-nav-item.active{color:var(--color-primary)}.mobile-nav-item:active{transform:scale(.95)}.mobile-drawer-overlay{z-index:calc(var(--z-mobile-nav) + 1);background:#0006;display:none;position:fixed;inset:0}.mobile-drawer{bottom:var(--mobile-nav-height);background:var(--color-bg-white);border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);max-height:70vh;z-index:calc(var(--z-mobile-nav) + 2);padding-bottom:env(safe-area-inset-bottom,0);animation:.25s slideUp;display:none;position:fixed;left:0;right:0;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (width<=767px){.mobile-drawer-overlay,.mobile-drawer{display:block}}.mobile-drawer-header{border-bottom:1px solid var(--color-border-light);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.mobile-drawer-header h3{font-size:var(--font-md);margin:0;font-weight:600}.drawer-close{cursor:pointer;color:var(--color-text-muted);background:0 0;border:none;align-items:center;padding:4px;display:flex}.mobile-drawer-items{padding:8px 0}.mobile-drawer-item{color:var(--color-text);transition:background var(--transition-fast);align-items:center;gap:14px;padding:14px 20px;text-decoration:none;display:flex}.mobile-drawer-item:active{background:var(--color-bg)}.mobile-drawer-item.active{color:var(--color-primary);background:#667eea08}.drawer-item-icon{color:var(--color-text-muted);align-items:center;display:flex}.mobile-drawer-item.active .drawer-item-icon{color:var(--color-primary)}.drawer-item-label{font-size:var(--font-base);flex:1;font-weight:500}.drawer-item-badge{background:var(--color-error);color:#fff;font-size:var(--font-xs);border-radius:12px;padding:2px 8px;font-weight:600}.dashboard-container{background:var(--color-bg);height:100vh;display:flex;overflow:hidden}.main-content{margin-left:var(--sidebar-width);transition:margin-left var(--transition-slow);flex-direction:column;flex:1;display:flex;overflow:hidden}.content-area{flex:1;padding:24px;overflow-y:auto}.content-area::-webkit-scrollbar{width:8px}.content-area::-webkit-scrollbar-track{background:var(--color-bg)}.content-area::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.content-area::-webkit-scrollbar-thumb:hover{background:#a0aec0}@media (width>=768px) and (width<=1024px){.main-content{margin-left:var(--sidebar-collapsed-width)}.content-area{padding:20px}}@media (width<=767px){.main-content{margin-left:0}.content-area{padding:16px;padding-bottom:calc(var(--mobile-nav-height) + 16px)}}.loading-spinner-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:40px 20px;display:flex}.loading-spinner-fullscreen{z-index:9999;background:#fffffff2;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:fixed;inset:0}.spinner{border-style:solid;border-color:#667eea #e0e0e0 #e0e0e0;border-radius:50%;animation:.8s linear infinite spin}.spinner-sm{border-width:2px;width:20px;height:20px}.spinner-md{border-width:4px;width:40px;height:40px}.spinner-lg{border-width:6px;width:60px;height:60px}.loading-message{color:#666;margin:0;font-size:14px}.error-boundary{justify-content:center;align-items:center;min-height:400px;padding:40px 20px;display:flex}.error-boundary-content{text-align:center;max-width:600px}.error-boundary-content h2{color:#ef4444;margin:0 0 16px;font-size:24px;font-weight:700}.error-message{color:#666;margin:0 0 24px;font-size:16px;line-height:1.6}.error-actions{justify-content:center;gap:12px;margin-bottom:24px;display:flex}.error-details{text-align:left;background:#f9fafb;border:1px solid #e0e0e0;border-radius:8px;margin-top:24px;padding:16px}.error-details summary{cursor:pointer;color:#666;margin-bottom:12px;font-weight:600}.error-details pre{color:#ef4444;white-space:pre-wrap;word-wrap:break-word;font-size:12px;overflow-x:auto}@media (width<=768px){.error-actions{flex-direction:column}.error-actions button{width:100%}}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}.logo{will-change:filter;height:6em;padding:1.5em;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:20s linear infinite logo-spin}}.card{padding:2em}.read-the-docs{color:#888}