:root{--header-height:64px;--mobile-header-height:56px}.layout{min-height:100vh;display:flex;flex-direction:column}.header{height:var(--header-height);background-color:#242424;display:flex;align-items:center;padding:0 24px;color:#fff}.content-wrapper{display:flex;flex:1;height:calc(100vh - var(--header-height))}.sidebar{width:84px;background-color:#2a2a2a;transition:width .3s ease;overflow:hidden;color:#fff}.sidebar.collapsed{width:0}.main-content{flex:1;background-color:#1a1a1a;color:#fff;padding:24px;min-height:0;overflow-y:auto}@media (max-width:768px){.content-wrapper,.sidebar{height:calc(100vh - var(--mobile-header-height))}.sidebar{position:fixed;top:var(--mobile-header-height);left:0;bottom:0;transform:translateX(0);transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease;box-shadow:12px 0 32px rgba(0,0,0,.5);border-right:1px solid hsla(0,0%,100%,.06);border-radius:0 16px 16px 0;z-index:9999;overflow-y:auto;overflow-x:hidden;padding-top:6px}.sidebar,.sidebar.collapsed{width:clamp(170px,56vw,200px)}.sidebar.collapsed{transform:translateX(-100%);box-shadow:none}.main-content{padding:16px}}