:root{--sidebar-width: var(--sg-size-sidebar-width, 272px);--sidebar-collapsed-width: var(--sg-size-sidebar-collapsed, 72px);--color-teal-50: rgb(var(--sg-brand-50));--color-teal-300: rgb(var(--sg-brand-300));--color-teal-400: rgb(var(--sg-brand-400));--color-teal-500: rgb(var(--sg-brand-600));--color-teal-600: rgb(var(--sg-brand-700));--color-teal-700: rgb(var(--sg-brand-800));--color-teal-500-rgb: 22, 112, 184;--color-red-400: rgb(var(--sg-danger));--color-red-500: rgb(var(--sg-danger-fill));--color-background: rgb(var(--sg-surface-canvas));--color-surface: rgb(var(--sg-surface));--color-text: rgb(var(--sg-ink));--color-text-secondary: rgb(var(--sg-ink-muted));--color-primary: rgb(var(--sg-brand-fill));--color-primary-hover: rgb(var(--sg-brand-fill-hover));--color-primary-active: rgb(var(--sg-brand-fill-hover));--color-border: rgb(var(--sg-line));--color-card-border: rgb(var(--sg-line));--font-family-base: var(--sg-font-sans);--font-size-xs: 11px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-lg: 16px;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--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: var(--sg-radius-sm);--radius-base: var(--sg-radius-md);--radius-lg: var(--sg-radius-lg);--radius-full: var(--sg-radius-pill);--shadow-sm: var(--sg-shadow-sm);--shadow-md: var(--sg-shadow-md);--duration-fast: var(--sg-duration-fast);--duration-normal: var(--sg-duration-normal);--duration-sidebar: var(--sg-duration-slow);--ease-standard: var(--sg-ease)}.app-container{display:flex;min-height:100vh}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow-x:hidden;overflow-x:clip}.page-content{flex:1;width:100%;max-width:var(--sg-size-content-max-width, 1440px);margin:0 auto;padding:24px}.content-header{position:sticky;top:0;z-index:30;background:rgb(var(--sg-surface) / .92);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgb(var(--sg-line))}.content-header-inner{max-width:var(--sg-size-content-max-width, 1440px);margin:0 auto;padding:16px 24px}.sidebar{width:var(--sidebar-width);flex-shrink:0;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;z-index:40;background:rgb(var(--sg-surface));border-right:1px solid rgb(var(--sg-line));color:rgb(var(--sg-ink));font-family:var(--sg-font-sans);transition:width var(--sg-duration-slow) var(--sg-ease),transform var(--sg-duration-slow) var(--sg-ease)}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:12px 14px;border-bottom:1px solid rgb(var(--sg-line));position:relative;background:rgb(var(--sg-surface));color:rgb(var(--sg-ink))}.sidebar .header-content{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.sidebar .header-collapsed{display:flex;align-items:center;justify-content:center;width:100%}.sidebar .logo-container{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:var(--sg-radius-md)}.sidebar .logo-container img{width:34px;height:34px;-o-object-fit:contain;object-fit:contain}.sidebar .logo-container .logo-icon{width:36px;height:36px;padding:7px;border-radius:var(--sg-radius-md);background:var(--sg-gradient-brand);color:#fff}.sidebar .app-title{display:flex;flex-direction:column;min-width:0}.sidebar .app-title h1{font-family:var(--sg-font-display);font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:rgb(var(--sg-ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar .app-title p{font-size:11px;font-weight:500;color:rgb(var(--sg-ink-muted));line-height:1.3}.sidebar .sidebar-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:1px solid transparent;border-radius:var(--sg-radius-sm);background:transparent;color:rgb(var(--sg-ink-muted));cursor:pointer;transition:background-color var(--sg-duration-fast) var(--sg-ease),color var(--sg-duration-fast) var(--sg-ease)}.sidebar .sidebar-toggle:hover{background:rgb(var(--sg-surface-muted));color:rgb(var(--sg-ink))}.sidebar .toggle-icon{width:18px;height:18px}.sidebar.collapsed .sidebar-toggle{position:absolute;right:-14px;width:28px;height:28px;background:rgb(var(--sg-surface));border-color:rgb(var(--sg-line));box-shadow:var(--sg-shadow-md)}.sidebar .sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 0;scrollbar-width:thin;scrollbar-color:rgb(var(--sg-line-strong)) transparent}.sidebar .sidebar-content::-webkit-scrollbar{width:6px}.sidebar .sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar .sidebar-content::-webkit-scrollbar-thumb{background:rgb(var(--sg-line-strong));border-radius:999px}.sidebar .menu-section{padding:0 10px;margin-bottom:6px}.sidebar.collapsed .menu-section{padding:0 8px}.sidebar .menu-section-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--sg-ink-muted));padding:10px 10px 6px}.sidebar .menu-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;margin-bottom:2px;border:0;border-radius:var(--sg-radius-md);background:transparent;font:inherit;font-size:14px;font-weight:500;line-height:1.2;color:rgb(var(--sg-ink-2));text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--sg-duration-fast) var(--sg-ease),color var(--sg-duration-fast) var(--sg-ease)}.sidebar.collapsed .menu-item{justify-content:center;padding:8px}.sidebar .menu-item:hover{background:rgb(var(--sg-surface-muted));color:rgb(var(--sg-ink))}.sidebar .menu-item.active{background:rgb(var(--sg-brand-soft));color:rgb(var(--sg-brand-text));font-weight:600}.sidebar .menu-item.active:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:rgb(var(--sg-brand))}.sidebar.collapsed .menu-item.active:before{left:-8px}.sidebar .menu-item-icon{width:20px;height:20px;flex-shrink:0;color:rgb(var(--sg-ink-muted));transition:color var(--sg-duration-fast) var(--sg-ease)}.sidebar .menu-item:hover .menu-item-icon{color:rgb(var(--sg-ink))}.sidebar .menu-item.active .menu-item-icon{color:rgb(var(--sg-brand))}.sidebar .menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis}.sidebar .submenu{display:flex;flex-direction:column;margin:2px 0 6px 20px;padding-left:10px;border-left:1px solid rgb(var(--sg-line))}.sidebar .submenu-item{display:flex;align-items:center;gap:9px;min-height:34px;padding:7px 10px;margin-bottom:1px;border-radius:var(--sg-radius-sm);font-size:13.5px;font-weight:500;color:rgb(var(--sg-ink-muted));text-decoration:none;transition:background-color var(--sg-duration-fast) var(--sg-ease),color var(--sg-duration-fast) var(--sg-ease)}.sidebar .submenu-item:hover{background:rgb(var(--sg-surface-muted));color:rgb(var(--sg-ink))}.sidebar .submenu-item.active{background:rgb(var(--sg-brand-soft));color:rgb(var(--sg-brand-text));font-weight:600}.sidebar .submenu-icon{width:16px;height:16px;flex-shrink:0;opacity:.85}.sidebar .badge-ping{position:relative;display:flex;align-items:center;justify-content:center}.sidebar .badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgb(var(--sg-danger-fill));color:rgb(var(--sg-danger-on));font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}.sidebar .badge-ping:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:999px;background:rgb(var(--sg-danger) / .35);animation:sg-ping 1.8s cubic-bezier(0,0,.2,1) infinite}@keyframes sg-ping{75%,to{transform:scale(1.45);opacity:0}}.sidebar .server-status{display:flex;align-items:center}.sidebar .status-dot{width:8px;height:8px;border-radius:999px;background:rgb(var(--sg-ink-faint))}.sidebar .server-status.online .status-dot{background:rgb(var(--sg-success));box-shadow:0 0 0 3px rgb(var(--sg-success) / .2)}.sidebar .server-status.offline .status-dot{background:rgb(var(--sg-danger));box-shadow:0 0 0 3px rgb(var(--sg-danger) / .2)}.sidebar .menu-divider{height:1px;margin:10px 20px;background:rgb(var(--sg-line))}.sidebar .sidebar-footer{position:relative;padding:10px;border-top:1px solid rgb(var(--sg-line))}.sidebar .user-profile{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--sg-radius-md);background:rgb(var(--sg-surface-muted))}.sidebar .user-avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:999px;background:var(--sg-gradient-brand);color:#fff;font-family:var(--sg-font-display);font-size:13px;font-weight:700;letter-spacing:.02em}.sidebar .user-info{flex:1;min-width:0}.sidebar .user-name{font-size:13px;font-weight:600;color:rgb(var(--sg-ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar .user-email{font-size:11.5px;color:rgb(var(--sg-ink-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar .user-menu-container{position:relative;flex-shrink:0}.sidebar .user-menu-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgb(var(--sg-line));border-radius:var(--sg-radius-sm);background:rgb(var(--sg-surface));color:rgb(var(--sg-ink-muted));cursor:pointer;transition:background-color var(--sg-duration-fast) var(--sg-ease),color var(--sg-duration-fast) var(--sg-ease)}.sidebar .user-menu-toggle:hover{color:rgb(var(--sg-ink));border-color:rgb(var(--sg-line-strong))}.sidebar .user-menu-toggle svg{width:18px;height:18px}.sidebar .user-profile-collapsed{display:flex;justify-content:center;padding:6px 0}.sidebar .user-dropdown{position:absolute;right:0;bottom:calc(100% + 8px);min-width:220px;padding:6px;background:rgb(var(--sg-surface));border:1px solid rgb(var(--sg-line));border-radius:var(--sg-radius-md);box-shadow:var(--sg-shadow-lg);z-index:100}.sidebar .dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--sg-radius-sm);background:none;font:inherit;font-size:13.5px;color:rgb(var(--sg-ink-2));text-align:left;text-decoration:none;cursor:pointer}.sidebar .dropdown-item:hover{background:rgb(var(--sg-surface-muted));color:rgb(var(--sg-ink))}.sidebar .dropdown-item.logout-item{color:rgb(var(--sg-danger-text))}.sidebar .dropdown-item.logout-item:hover{background:rgb(var(--sg-danger-soft))}.sidebar .dropdown-icon{width:16px;height:16px;flex-shrink:0}.sidebar .dropdown-divider{height:1px;margin:4px 0;background:rgb(var(--sg-line))}.sg-topbar,.sg-nav-scrim{display:none}@media (max-width: 767px){.sg-topbar{position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:10px;height:var(--sg-size-topbar-height, 56px);padding:0 64px 0 8px;background:rgb(var(--sg-surface) / .94);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgb(var(--sg-line))}.sg-topbar-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--sg-radius-md);background:transparent;color:rgb(var(--sg-ink));cursor:pointer}.sg-topbar-burger:hover{background:rgb(var(--sg-surface-muted))}.sg-topbar-burger svg{width:22px;height:22px}.sg-topbar-brand{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--sg-font-display);font-size:16px;font-weight:700;letter-spacing:-.02em;color:rgb(var(--sg-ink));text-decoration:none}.sg-topbar-brand img{width:28px;height:28px;-o-object-fit:contain;object-fit:contain;flex-shrink:0}.sg-topbar-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#notifBell{top:7px!important}.sidebar,.sidebar.collapsed{position:fixed;top:0;left:0;bottom:0;width:min(var(--sidebar-width),86vw);height:100dvh;z-index:1650;transform:translate(-102%);box-shadow:none}.sidebar.is-open{transform:translate(0);box-shadow:var(--sg-shadow-overlay)}.sg-nav-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1640;display:block;background:rgb(var(--sg-surface-inverse) / .45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.page-content{padding:16px}.content-header-inner{padding:12px 16px}}@media (prefers-reduced-motion: reduce){.sidebar{transition:none}.sidebar .badge-ping:before{animation:none}}