@media (max-width: 374px) {
  :root {
    --space-page: 0.75rem;
    --header-action-size: 38px;
    --mobile-card-pad: 0.8125rem;
  }

  .app-shell {
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .top-app-bar {
    margin-left: calc(var(--space-page) * -1);
    margin-right: calc(var(--space-page) * -1);
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .top-app-actions {
    gap: 0.3rem;
    max-width: 44%;
  }

  .top-app-subtitle {
    display: none;
  }

  .top-app-bar .brand-mark,
  .top-app-bar .app-icon,
  .top-app-bar .brand-mark img,
  .top-app-bar .app-icon img {
    width: 38px;
    height: 38px;
  }

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

  .quick-grid,
  .kpi-grid,
  .app-card-grid {
    gap: var(--space-2);
  }

  .bottom-nav-link {
    font-size: 0.68rem;
  }
}

@media (min-width: 680px) {
  :root {
    --app-max-width: 640px;
    --space-page: var(--space-6);
    --header-action-size: 42px;
  }

  .app-shell {
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .top-app-bar {
    margin-left: calc(var(--space-page) * -1);
    margin-right: calc(var(--space-page) * -1);
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .app-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-grid,
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body {
    background:
      radial-gradient(circle at 12% 8%, rgba(32, 169, 139, 0.12), transparent 24rem),
      radial-gradient(circle at 88% 20%, rgba(47, 128, 237, 0.12), transparent 28rem),
      var(--cdx-page);
  }

  .app-root {
    min-height: calc(100vh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cdx-border);
    border-radius: 2rem;
    overflow: clip;
    background: var(--cdx-page);
    box-shadow: var(--shadow-float);
  }
}