.sidebar { width: var(--sidebar-w); background: #0b1120; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; transition: transform .15s cubic-bezier(.4,0,.2,1); border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; }
.sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 300px; background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 60%); pointer-events: none; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.55); }
.sidebar > div > div:first-child { position: sticky; top: 0; z-index: 1; }
.sidebar > div > div:last-child { position: sticky; bottom: 0; z-index: 1; }

.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99; backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s ease; }
.mobile-overlay.show { display: block; opacity: 1; }

body.sidebar-open { overflow: hidden; }

.main { margin-left: var(--sidebar-w); min-height: 100vh; visibility: hidden; }
.main.js-ready { visibility: visible; }
.content { padding: var(--space-2xl); max-width: 1440px; margin: 0 auto; scrollbar-gutter: stable; scroll-behavior: smooth; }

.topbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2xl); position: sticky; top: 0; z-index: 50; }