.app{
  min-height:100vh;
  display:grid;
  grid-template-columns: 280px 1fr;
}
.sidebar{
  position:sticky; top:0;
  height:100vh;
  padding:14px;
  overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-right:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.main{min-width:0}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background: rgba(11,16,32,.70);
  backdrop-filter: blur(12px);
}
.content{padding:18px;max-width:1400px}
@media (max-width: 980px){
  .app{grid-template-columns: 1fr}
  .sidebar{
    position:fixed; left:0; top:0; z-index:60;
    width:min(92vw, 320px);
    transform: translateX(-110%);
    transition: transform .2s ease;
  }
  .sidebar.open{transform: translateX(0)}
}