@media (max-width: 1199px) {
  .app-layout {
    grid-template-columns: 206px minmax(0, 1fr) 330px;
  }
}

@media (max-width: 980px) {
  .top-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-pill {
    display: none;
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .app-layout {
    grid-template-columns: 196px minmax(0, 1fr) 300px;
  }

  .preview-shell {
    padding: var(--sz-space-3);
  }

  .calculator-card {
    padding: var(--sz-space-4);
  }
}

@media (max-width: 767px) {
  .top-bar {
    min-height: 60px;
    padding: 0 var(--sz-space-4);
  }

  .brand-subtitle,
  .top-actions .button-secondary,
  .top-actions .button-ghost {
    display: none;
  }

  .app-layout {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 60px);
  }

  .section-nav {
    position: sticky;
    top: 60px;
    z-index: 15;
    height: auto;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sz-color-border);
    padding: var(--sz-space-2) var(--sz-space-4);
  }

  .nav-kicker,
  .nav-footer {
    display: none;
  }

  .nav-group {
    display: flex;
    gap: var(--sz-space-2);
    overflow-x: auto;
  }

  .nav-item {
    grid-template-columns: 28px auto;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 var(--sz-space-2);
  }

  .nav-state {
    display: none;
  }

  .builder-workspace {
    padding: var(--sz-space-4);
  }

  .live-preview {
    position: static;
    display: block;
    height: auto;
    border-top: 1px solid var(--sz-color-border);
    border-left: 0;
  }

  .workspace-header {
    grid-template-columns: 1fr;
  }

  .workspace-hero {
    grid-template-columns: 1fr;
    padding: var(--sz-space-5);
  }

  .hero-title {
    font-size: 30px;
  }

  .hero-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .workspace-title {
    font-size: 22px;
  }

  .template-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
  }

  .template-card {
    min-height: 118px;
  }

  .surface-header,
  .setting-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .field-control-grid,
  .formula-control-grid,
  .variable-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .brand-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .builder-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .builder-row .badge {
    grid-column: 2;
    justify-self: start;
  }
}