/* LAYOUT — page structure: top bar, shell, sidebar, grids. */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--space-lg); padding: 0 var(--space-xl);
  background: var(--color-nav); backdrop-filter: saturate(var(--saturate)) blur(var(--blur-md)); -webkit-backdrop-filter: saturate(var(--saturate)) blur(var(--blur-md));
  border-bottom: var(--border-default);
}
.brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: var(--tracking-brand); }
.brand-sub { font-weight: var(--weight-regular); color: var(--color-text-faint); }
.brand-link { display: inline-flex; line-height: 0; }
.brand-link:hover { text-decoration: none; }
.brand-mark { display: block; width: var(--logo-nav); height: var(--logo-nav); object-fit: contain; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: var(--space-3xl); max-width: var(--content-max); margin: 0 auto; padding: var(--space-3xl) var(--space-2xl) var(--space-6xl); }
.side { position: sticky; top: var(--sticky-offset); align-self: start; display: flex; flex-direction: column; gap: var(--space-3xs); }
.side a {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  color: var(--color-text); font-weight: var(--weight-medium); transition: background var(--dur-base) var(--ease), color var(--dur-base);
}
.side a:hover { background: var(--color-wash); text-decoration: none; }
.side a.active { background: var(--color-primary-soft); color: var(--color-primary); }
.side .icon { width: var(--icon-size); height: var(--icon-size); flex: none; opacity: var(--opacity-icon); }
.main { min-width: 0; }
.page-head { margin-bottom: var(--space-2xl); }
.page-head p { margin-top: var(--space-xs); color: var(--color-text-muted); }

.grid { display: grid; gap: var(--space-lg); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid > .card, .grid > .card + .card { margin-top: var(--space-0); }

@media (max-width: 980px) { .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; padding: var(--space-lg) var(--space-md) var(--space-6xl); gap: var(--space-md); }
  .side {
    position: fixed; z-index: var(--z-side); bottom: 0; left: 0; right: 0; top: auto; flex-direction: row; overflow-x: auto;
    padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom));
    background: var(--color-nav-mobile); backdrop-filter: saturate(var(--saturate)) blur(var(--blur-md)); -webkit-backdrop-filter: saturate(var(--saturate)) blur(var(--blur-md));
    border-top: var(--border-default);
  }
  .side a { flex-direction: column; gap: var(--space-3xs); font-size: var(--text-micro); padding: var(--space-xs) var(--space-md); white-space: nowrap; }
  h1 { font-size: var(--text-h1-sm); }
}
@media (max-width: 640px) { .g2, .g3 { grid-template-columns: 1fr; } .g4 .stat-value { font-size: var(--text-stat-sm); } }