.app-shell { padding: var(--space-4); max-width: 1440px; margin: 0 auto; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.brand { display: flex; align-items: center; gap: var(--space-4); }
.brand-mark { width: 7rem; color: var(--color-primary); }
.topbar-actions { display: flex; gap: var(--space-3); align-items: center; }
.main-grid {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: var(--space-4);
}
.hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items: center; }
.garage-panel { grid-column: 1; }
.vehicle-panel, .mission-panel, .diagnostics-panel { grid-column: 2; }
.track-panel, .diagnostics-panel, .car-replica-panel, .anatomy-explorer, .anatomy-detail { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .topbar, .brand, .hero, .main-grid { grid-template-columns: 1fr; display: grid; }
  .topbar { display: grid; }
  .topbar-actions { justify-content: start; }
  .garage-panel, .vehicle-panel, .mission-panel, .diagnostics-panel, .track-panel, .car-replica-panel, .anatomy-explorer, .anatomy-detail { grid-column: auto; }
}