.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);
  min-width: 0;
}
.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; }
.learning-panel-wrap { display: none; }

.build-mode .hero,
.build-mode .journey-panel,
.build-mode .mission-panel,
.build-mode .level-switcher,
.build-mode .diagnostics-panel,
.build-mode .learning-panel-wrap { display: none; }
.build-mode .main-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: 360px minmax(0, 1fr);
  height: calc(100svh - 8rem);
  min-height: 0;
  overflow: auto;
  align-content: start;
}
.build-mode .app-shell {
  height: 100svh;
  display: flex;
  flex-direction: column;
}
.build-mode .topbar { flex: 0 0 auto; }
.build-mode .main-grid { flex: 1 1 auto; }
.build-mode .car-replica-panel,
.build-mode .garage-panel {
  grid-row: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.build-mode .car-replica-panel { grid-column: 1; }
.build-mode .garage-panel { grid-column: 2; }
.build-mode .vehicle-panel,
.build-mode .track-panel {
  display: block;
  min-width: 0;
}
.build-mode .vehicle-panel { grid-column: 1; grid-row: 2; }
.build-mode .track-panel { grid-column: 2; grid-row: 2; }
@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; }

  .mission-panel { order: 1; }
  .car-replica-panel { order: 2; }
  .learning-panel-wrap { order: 3; }
  .level-switcher { order: 4; }
  .garage-panel { order: 5; }
  .vehicle-panel { order: 6; }
  .track-panel { order: 7; }
  .diagnostics-panel { order: 8; }

  .build-mode .main-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 150px minmax(360px, 1fr) auto auto;
    height: auto;
    max-height: calc(100svh - 8rem);
  }
  .build-mode .car-replica-panel,
  .build-mode .garage-panel { grid-column: 1; }
  .build-mode .car-replica-panel { grid-row: 1; }
  .build-mode .garage-panel { grid-row: 2; }
  .build-mode .vehicle-panel { grid-column: 1; grid-row: 3; }
  .build-mode .track-panel { grid-column: 1; grid-row: 4; }
}

@media (max-width: 600px) {
  .app-shell { padding: .75rem; overflow-x: hidden; }
  .topbar { gap: .75rem; }
  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding: .15rem 0 .35rem;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .card { padding: 1rem; min-width: 0; }
  .section-head { grid-template-columns: 1fr; gap: .65rem; }
  .section-head > :last-child { justify-self: start; }
}