.layout{
  display:grid;
  grid-template-columns: 290px 1fr;
  min-height:100vh;
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.content{
  padding: 18px 18px 28px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

.page{
  min-height: calc(100vh - 120px);
  display: grid;
  gap: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{
    position: relative;
    height:auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}