@media (max-width: 1100px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (max-width: 760px) {
  :root {
    --topbar: 72px;
  }

  .sidebar {
    display: none;
  }

  .topbar {
    left: 16px;
    right: 16px;
    height: var(--topbar);
  }

  .topbar h2 {
    font-size: 20px;
  }

  .status-pill {
    display: none;
  }

  .page-root {
    padding:
      calc(var(--topbar) + 7px)
      12px
      calc(var(--mobile-nav) + 26px);
  }

  .mobile-nav {
    position: fixed;
    z-index: 30;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    height: var(--mobile-nav);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 7px 9px;
    border-radius: 24px;
  }

  .mobile-nav-item,
  .mobile-create {
    min-width: 0;
    min-height: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--muted);
    font-size: 6.5px;
    font-weight: 850;
  }

  .mobile-nav-item.active {
    color: white;
    background: rgba(255,255,255,.052);
  }

  .mobile-create {
    width: 54px;
    height: 54px;
    min-height: 54px;
    justify-self: center;
    align-self: center;
    border-radius: 18px;
    color: white;
    background: linear-gradient(145deg, #168cff, #0877e8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(0,112,255,.24);
  }

  .mobile-create svg {
    width: 20px;
    height: 20px;
  }

  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 19px;
  }

  .hero-top {
    display: block;
  }

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

  .toolbar {
    align-items: stretch;
  }

  .toolbar .grow,
  .toolbar .button {
    flex: 1 1 100%;
  }

  .section-head {
    align-items: flex-start;
  }

  .sheet {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - 22px);
    padding: 18px;
    border-radius: 26px;
  }

  .sheet-dialog.compact .sheet {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
  }

  .sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    margin: -4px auto 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
  }

  .sheet-actions {
    position: sticky;
    bottom: -18px;
    padding: 14px 0 1px;
    background: linear-gradient(180deg, transparent, #0b0d12 35%);
  }

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

  .span-2 {
    grid-column: auto;
  }

  .login-view {
    padding: 15px;
  }

  .login-shell {
    padding: 25px 20px;
    border-radius: 27px;
  }

  .audit-card {
    grid-template-columns: auto 1fr;
  }

  .audit-time {
    grid-column: 2;
  }

  .glass-panel,
  .login-shell,
  .toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 420px) {
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .metric strong {
    font-size: 16px;
  }

  .user-stats,
  .profile-specs {
    grid-template-columns: 1fr 1fr;
  }
}