/* Layout: top bar, sidebar, content; responsive down to tablet width (§14.1). */
body.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "top top" "side main";
  min-height: 100vh;
}
.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 0 var(--sp-lg);
  background: var(--c-nav);
  color: var(--c-on-nav);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { color: var(--c-on-nav); font-weight: 700; font-size: var(--fs-lg); text-decoration: none; }
.topbar-spacer { flex: 1; }
.topbar-user { color: var(--c-on-nav); text-decoration: none; display: flex; gap: var(--sp-sm); align-items: center; }
.nav-toggle { display: none; color: var(--c-on-nav); font-size: var(--fs-xl); }
.btn-on-nav { color: var(--c-on-nav); border-color: rgba(255, 255, 255, 0.4); }

.sidebar {
  grid-area: side;
  background: var(--c-nav);
  color: var(--c-on-nav);
  padding: var(--sp-sm) 0 var(--sp-xl);
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.nav-group { margin-top: var(--sp-md); }
.nav-group-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  padding: 0 var(--sp-lg) var(--sp-xs);
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: block;
  padding: var(--sp-sm) var(--sp-lg);
  color: var(--c-on-nav);
  text-decoration: none;
  border-left: 3px solid transparent;
  opacity: 0.85;
}
.nav-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.nav-link.active { opacity: 1; border-left-color: var(--c-buy); background: rgba(255, 255, 255, 0.1); font-weight: 600; }

.content { grid-area: main; padding: var(--sp-xl); min-width: 0; outline: none; }
.page { max-width: 1400px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.page-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

.grid { display: grid; gap: var(--sp-lg); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.row { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-md); }
.split { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-lg); align-items: start; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--c-nav); }
.login-card { width: min(400px, 92vw); padding: var(--sp-xl); }
.login-title { margin-bottom: var(--sp-xs); }

@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body.shell { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.2s;
    z-index: 30;
  }
  body.nav-open .sidebar { transform: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .content { padding: var(--sp-lg); }
}