/* ═══ Layout ═══ */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.sidebar {
  grid-area: sidebar; background: var(--bg-card);
  border-right: 1px solid var(--border); padding: 1rem 0; overflow-y: auto;
}
.sidebar .brand {
  padding: 0 1.25rem 1.5rem; font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--primary);
}
.sidebar-nav { list-style: none; }
.sidebar-nav li a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1.25rem; color: var(--text-muted); font-size: 0.92rem;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav li a:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }
.sidebar-nav li.active a {
  background: var(--bg-active); color: var(--primary);
  border-left: 3px solid var(--primary); padding-left: calc(1.25rem - 3px);
}
.sidebar-section-title {
  padding: 1rem 1.25rem 0.5rem; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
}

.topbar {
  grid-area: topbar; background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;
}
.topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.topbar .page-title { font-size: 1rem; font-weight: 500; }
.topbar .mobile-menu-btn { display: none; }

.main { grid-area: main; padding: 1.5rem; overflow-x: hidden; }

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main";
  }
  .sidebar {
    position: fixed; inset: 56px 0 0 -240px; width: 240px;
    z-index: 100; transition: transform 0.25s;
  }
  .sidebar.open { transform: translateX(240px); }
  .topbar .mobile-menu-btn { display: flex; }
  .main { padding: 1rem; }
}