:root{--sidebar-width: 280px;--sidebar-collapsed-width: 70px;--color-white: rgba(255, 255, 255, 1);--color-black: rgba(0, 0, 0, 1);--color-cream-50: rgba(252, 252, 249, 1);--color-cream-100: rgba(255, 255, 253, 1);--color-gray-200: rgba(245, 245, 245, 1);--color-gray-300: rgba(167, 169, 169, 1);--color-gray-400: rgba(119, 124, 124, 1);--color-slate-500: rgba(98, 108, 113, 1);--color-brown-600: rgba(94, 82, 64, 1);--color-charcoal-700: rgba(31, 33, 33, 1);--color-charcoal-800: rgba(38, 40, 40, 1);--color-slate-900: rgba(19, 52, 59, 1);--color-teal-300: rgba(50, 184, 198, 1);--color-teal-400: rgba(45, 166, 178, 1);--color-teal-500: rgba(33, 128, 141, 1);--color-teal-600: rgba(29, 116, 128, 1);--color-teal-700: rgba(26, 104, 115, 1);--color-teal-50: rgba(240, 253, 255, 1);--color-red-400: rgba(255, 84, 89, 1);--color-red-500: rgba(192, 21, 47, 1);--color-brown-600-rgb: 94, 82, 64;--color-teal-500-rgb: 33, 128, 141;--color-slate-900-rgb: 19, 52, 59;--color-background: var(--color-cream-50);--color-surface: var(--color-cream-100);--color-text: var(--color-slate-900);--color-text-secondary: var(--color-slate-500);--color-primary: var(--color-teal-500);--color-primary-hover: var(--color-teal-600);--color-primary-active: var(--color-teal-700);--color-border: rgba(var(--color-brown-600-rgb), .2);--color-card-border: rgba(var(--color-brown-600-rgb), .12);--font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-weight-medium: 500;--font-weight-semibold: 550;--font-weight-bold: 600;--space-2: 2px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-10: 10px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--radius-sm: 6px;--radius-base: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .04), 0 2px 4px -1px rgba(0, 0, 0, .02);--duration-fast: .15s;--duration-normal: .25s;--duration-sidebar: .3s;--ease-standard: cubic-bezier(.16, 1, .3, 1)}@media (prefers-color-scheme: dark){:root{--color-gray-400-rgb: 119, 124, 124;--color-teal-300-rgb: 50, 184, 198;--color-gray-300-rgb: 167, 169, 169;--color-gray-200-rgb: 245, 245, 245;--color-background: var(--color-charcoal-700);--color-surface: var(--color-charcoal-800);--color-text: var(--color-gray-200);--color-text-secondary: rgba(var(--color-gray-300-rgb), .7);--color-primary: var(--color-teal-300);--color-primary-hover: var(--color-teal-400);--color-border: rgba(var(--color-gray-400-rgb), .3);--color-card-border: rgba(var(--color-gray-400-rgb), .2);--color-teal-50: rgba(8, 51, 68, .3)}}.sidebar{width:var(--sidebar-width);background-color:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;z-index:40;transition:width var(--duration-sidebar) var(--ease-standard)}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-12);border-bottom:1px solid var(--color-card-border);min-height:64px;position:relative}.header-content{display:flex;align-items:center;gap:var(--space-12);flex:1}.header-collapsed{display:flex;align-items:center;justify-content:center;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,var(--color-teal-500),var(--color-teal-600));border-radius:var(--radius-lg);flex-shrink:0;box-shadow:var(--shadow-sm)}.logo-icon{width:24px;height:24px;color:#fff}.app-title{display:flex;flex-direction:column}.app-title h1{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);line-height:1.2}.app-title p{font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.2}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-base);border:none;background:rgba(var(--color-teal-500-rgb),.08);color:var(--color-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-standard);flex-shrink:0}.sidebar-toggle:hover{background:rgba(var(--color-teal-500-rgb),.15);transform:scale(1.05)}.sidebar-toggle:active{transform:scale(.95)}.toggle-icon{width:18px;height:18px}.sidebar.collapsed .sidebar-toggle{position:absolute;right:-16px;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-16) 0}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.sidebar-content::-webkit-scrollbar-thumb:hover{background:rgba(var(--color-brown-600-rgb),.3)}.menu-section{padding:0 var(--space-12);margin-bottom:var(--space-8)}.sidebar.collapsed .menu-section{padding:0 var(--space-6)}.menu-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-8) var(--space-12);margin-bottom:var(--space-4)}.menu-item{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-10) var(--space-12);margin-bottom:var(--space-2);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);text-decoration:none;transition:all var(--duration-fast) var(--ease-standard);position:relative;cursor:pointer;border-left:3px solid transparent;white-space:nowrap}.sidebar.collapsed .menu-item{justify-content:center;padding:var(--space-10) var(--space-8)}.menu-item:hover{background-color:rgba(var(--color-teal-500-rgb),.06);color:var(--color-primary)}.menu-item.active{background-color:var(--color-teal-50);color:var(--color-primary);border-left-color:var(--color-primary);font-weight:var(--font-weight-semibold)}.menu-item-icon{width:20px;height:20px;flex-shrink:0;opacity:.7;transition:opacity var(--duration-fast) var(--ease-standard)}.menu-item:hover .menu-item-icon,.menu-item.active .menu-item-icon{opacity:1}.menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis}.submenu{display:flex;flex-direction:column;padding-left:var(--space-12);margin-top:var(--space-2);margin-bottom:var(--space-4);border-left:2px solid rgba(var(--color-teal-500-rgb),.15);margin-left:var(--space-24)}.submenu-item{display:flex;align-items:center;gap:var(--space-10);padding:var(--space-8) var(--space-12);margin-bottom:var(--space-2);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-decoration:none;transition:all var(--duration-fast) var(--ease-standard);position:relative}.submenu-item:hover{background-color:rgba(var(--color-teal-500-rgb),.06);color:var(--color-primary);padding-left:var(--space-16)}.submenu-item.active{background-color:var(--color-teal-50);color:var(--color-primary);font-weight:var(--font-weight-semibold);border-left:2px solid var(--color-primary)}.submenu-icon{width:16px;height:16px;flex-shrink:0;opacity:.6;transition:opacity var(--duration-fast) var(--ease-standard)}.submenu-item:hover .submenu-icon,.submenu-item.active .submenu-icon{opacity:1}.badge-ping{position:relative;display:flex;align-items:center;justify-content:center}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--space-6);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:#fff;background-color:var(--color-red-500);border-radius:var(--radius-full);box-shadow:0 0 0 2px var(--color-surface)}.badge-ping:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:var(--radius-full);background-color:var(--color-red-400);opacity:.75;animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(1.5);opacity:0}}.server-status{display:flex;align-items:center;gap:var(--space-6)}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--color-gray-400);transition:background-color var(--duration-fast) var(--ease-standard)}.server-status.online .status-dot{background-color:#10b981;box-shadow:0 0 0 2px #10b98133;animation:pulse-green 2s ease-in-out infinite}.server-status.offline .status-dot{background-color:var(--color-red-500)}@keyframes pulse-green{0%,to{opacity:1}50%{opacity:.5}}.menu-divider{height:1px;background-color:var(--color-card-border);margin:var(--space-16) var(--space-16)}.sidebar-footer{border-top:1px solid var(--color-card-border);padding:var(--space-12);overflow:visible;position:relative}.user-profile{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8);border-radius:var(--radius-base);background-color:rgba(var(--color-teal-500-rgb),.04);position:relative}.user-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-teal-500),var(--color-teal-600));color:#fff;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);flex-shrink:0}.user-info{flex:1;min-width:0}.user-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-container{position:relative;flex-shrink:0}.user-menu-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-standard);flex-shrink:0}.user-menu-toggle:hover{background-color:rgba(var(--color-teal-500-rgb),.1);color:var(--color-primary);border-color:var(--color-primary)}.user-menu-toggle svg{width:18px;height:18px;stroke:currentColor}.user-profile-collapsed{display:flex;justify-content:center;padding:var(--space-8) 0}.user-dropdown{position:absolute;bottom:calc(100% + var(--space-8));right:0;min-width:200px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:0 -4px 16px #0000001a,0 -2px 8px #0000000f;overflow:visible;z-index:100}.dropdown-item{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-10) var(--space-12);font-size:var(--font-size-sm);color:var(--color-text);text-decoration:none;background:none;border:none;width:100%;text-align:left;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard)}.dropdown-item:hover{background-color:rgba(var(--color-teal-500-rgb),.06)}.dropdown-item.logout-item{color:var(--color-red-500)}.dropdown-item.logout-item:hover{background-color:rgba(var(--color-red-500),.06)}.dropdown-icon{width:16px;height:16px}.dropdown-divider{height:1px;background-color:var(--color-card-border);margin:var(--space-4) 0}@media (max-width: 768px){.sidebar{position:fixed;left:-280px;transition:left var(--duration-normal) var(--ease-standard)}.sidebar.collapsed{left:-70px}.sidebar.open{left:0}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.menu-item{animation:slideIn var(--duration-normal) var(--ease-standard) backwards}.menu-item:nth-child(1){animation-delay:0ms}.menu-item:nth-child(2){animation-delay:30ms}.menu-item:nth-child(3){animation-delay:60ms}.menu-item:nth-child(4){animation-delay:90ms}.menu-item:nth-child(5){animation-delay:.12s}.menu-item:nth-child(6){animation-delay:.15s}.menu-item:nth-child(7){animation-delay:.18s}