:root{--font-family: "Inter", sans-serif;--bg-color: #3a3a3e;--bg-topbar: #2e2e32;--bg-sidemenu: #444448;--text-primary: #e0e0e0;--text-muted: #a0a0a0;--accent: #4e94ce;--border-color: #5a5a5e}body.dark{--bg-color: #2a2a2e;--bg-topbar: #1f1f23;--bg-sidemenu: #232327;--text-primary: #dcdcdc;--text-muted: #9a9a9a;--accent: #4e94ce;--border-color: #3a3a3e}:root{--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--padding-xs: 4px;--padding-sm: 8px;--padding-md: 16px;--font-size-s: 8px;--font-size-m: 16px;--font-size-l: 24px;--font-size-base: 16px;--transition-fast: .2s ease-in-out}body,html,#root{margin:0;padding:0;height:100%}.app-grid{display:grid;grid-template-rows:60px 1fr;grid-template-columns:400px 1fr;grid-template-areas:"topbar topbar" "sidebar main";height:100vh}.topbar{grid-area:topbar;background-color:var(--bg-topbar);color:#fff;display:flex;align-items:center;padding:0 var(--padding-md);position:sticky;top:0;z-index:1000}.main-content{padding:var(--padding-md);background-color:var(--bg-color);overflow-y:auto}.panelGroup{width:100vw}.resizableHandle{width:4px;background-color:var(--border-color)}.sidebar::-webkit-scrollbar,.main-content::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb,.main-content::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--border-radius-md)}p{margin:0;padding:0;width:100%}.sidebar{background-color:var(--bg-sidemenu);width:100%;height:100vh}.sidebar__content{display:flex;flex-direction:row}.sidebar__left{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--padding-md);width:37px;height:100%;background-color:var(--bg-topbar)}.sidebar__right{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%;height:100%;padding:var(--padding-sm)}.sidebar__button{width:36px;height:36px;margin:0;padding:0;border:none;background-color:transparent}.sidebar__button-img{width:100%;opacity:.5}.sidebar__button:hover .sidebar__button-img{opacity:1}.sidebar__header{padding:0;margin:0;font-size:var(--font-size-l);width:100%;text-align:center;color:var(--text-primary)}