.app-shell{
  display:grid;
  grid-template-columns:232px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--paper-sunken);
  border-right:1px solid var(--hairline);
  padding:var(--sp-5) var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  position:sticky;
  top:0;
  height:100vh;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:.2px;
  padding-left:2px;
}
.brand-mark{
  width:26px; height:26px; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  flex:none;
}
.nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.nav-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--ink-soft); text-decoration:none; font-size:.94rem;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link svg{ flex:none; opacity:.85; }
.nav-link:hover{ background:var(--paper-raised); color:var(--ink); }
.nav-link.active{ background:var(--paper-raised); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--hairline); }

.sidebar-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:var(--radius-sm);
  padding:10px 14px; font-size:.9rem; font-weight:600; cursor:pointer;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sidebar-cta:hover{ opacity:.88; }
.sidebar-cta:active{ transform:translateY(1px); }

.sidebar-search{ margin-top:-8px; }
.sidebar-search input{ font-size:.88rem; padding:8px 10px; }

.sidebar-foot{
  margin-top:auto; display:flex; flex-direction:column; gap:6px;
  border-top:1px solid var(--hairline); padding-top:var(--sp-3);
}
.sidebar-foot button{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; color:var(--ink-faint);
  font-size:.82rem; padding:6px 4px; cursor:pointer; text-align:left; border-radius:var(--radius-sm);
}
.sidebar-foot button:hover{ color:var(--ink); background:var(--paper-raised); }

.main{
  min-width:0;
  padding:var(--sp-6) var(--sp-7);
}
.view{
  animation:view-in var(--dur-base) var(--ease);
  max-width:1180px;
  margin:0 auto;
}
.view-narrow{ max-width:760px; }
@keyframes view-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

.view-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-6);
}
.view-head .eyebrow{ color:var(--ink-faint); font-size:var(--fs-small); margin-bottom:2px; }
.view-head h1{ margin:0; }
.view-head .sub{ color:var(--ink-soft); font-family:var(--font-display); font-style:italic; font-size:1.05rem; margin-top:4px; }

@media (max-width: 880px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ position:relative; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; top:auto; }
  .nav-list{ flex-direction:row; }
  .sidebar-foot{ margin-top:0; border-top:none; flex-direction:row; margin-left:auto; }
  .main{ padding:var(--sp-4); }
}