@media (max-width: 520px) {
  .odx-shell {
    padding: 14px 14px calc(100px + env(safe-area-inset-bottom));
  }

  .odx-topbar {
    align-items: flex-start;
  }

  .odx-topbar-actions {
    align-items: center;
  }

  .odx-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .odx-summary-item {
    padding: 8px;
  }

  .odx-summary-label {
    font-size: 11px;
  }

  .odx-summary strong {
    font-size: 22px;
  }

  .odx-meta {
    grid-template-columns: 1fr;
  }

  .odx-server-head {
    align-items: flex-start;
  }

  .odx-server-title {
    font-size: 17px;
  }

  .odx-server-controls {
    gap: 6px;
  }

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

  .odx-general-grid {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
  }

  .odx-general-grid .odx-info-field:not([data-field-key="uptime"]):not([data-field-key="heartbeat"]):not([data-field-key="state_changed"]):not([data-field-key="state_since"]) {
    grid-column: span 2;
  }

  .odx-network-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .odx-network-tags {
    justify-content: flex-end;
  }

  .odx-service-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .odx-service-pill {
    grid-column: auto;
    width: fit-content;
    margin-top: 0;
  }

  .odx-config-head,
  .odx-config-form {
    grid-template-columns: 1fr;
  }

  .odx-incident {
    grid-template-columns: 1fr;
  }
}