@media (max-width: 760px) {
  html,
  body {
    min-block-size: 100%;
    overflow-x: hidden;
  }

  body {
    padding-block-end: calc(86px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 100% 0, rgba(35, 103, 242, .08), transparent 30%),
      var(--color-canvas);
  }

  .admin-shell,
  .admin-workspace {
    min-block-size: 100svh;
  }

  .topbar {
    min-block-size: 64px;
    padding: 9px max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
    border-block-end: 1px solid rgba(221, 226, 238, .78);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .055);
  }

  .topbar__brand {
    gap: 10px;
    min-inline-size: 0;
  }

  .topbar__brand-mark {
    inline-size: 38px;
    block-size: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    box-shadow: 0 9px 22px rgba(69, 72, 201, .2);
  }

  .topbar__brand strong {
    max-inline-size: 145px;
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__brand small {
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .topbar__actions {
    gap: 6px;
  }

  .topbar-action {
    inline-size: 42px;
    min-inline-size: 42px;
    block-size: 42px;
    min-block-size: 42px;
    padding: 0;
    border-radius: 13px;
  }

  .topbar-action svg {
    inline-size: 17px;
    block-size: 17px;
  }

  .main-content {
    inline-size: 100%;
    padding: 17px max(12px, env(safe-area-inset-right)) 26px max(12px, env(safe-area-inset-left));
  }

  .page-heading {
    gap: 10px;
    margin-block-end: 16px;
  }

  .page-heading h1 {
    font-size: clamp(26px, 8vw, 31px);
    line-height: 1.08;
  }

  .page-heading p {
    max-inline-size: 100%;
    margin-block-start: 5px;
    font-size: 12px;
    line-height: 1.5;
  }

  .eyebrow {
    margin-block-end: 3px;
    font-size: 9px;
  }

  .metrics-grid,
  .overview-metrics,
  .sites-metrics,
  .sources-metrics,
  .directory-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-block-end: 14px;
  }

  .metric-card {
    min-block-size: 108px;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
  }

  .metric-card__label,
  .metric-card > span {
    font-size: 10px;
    line-height: 1.3;
  }

  .metric-card__value,
  .metric-card > strong {
    font-size: clamp(21px, 7vw, 26px);
    overflow-wrap: anywhere;
  }

  .metric-card__hint,
  .metric-card > small {
    font-size: 9.5px;
    line-height: 1.35;
  }

  .panel {
    margin-block-end: 14px;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .065);
  }

  .panel__header {
    gap: 8px;
    padding: 15px 14px;
  }

  .panel__header h2 {
    font-size: 15px;
  }

  .panel__header p {
    margin-block-start: 3px;
    font-size: 10.5px;
    line-height: 1.4;
  }

  .overview-layout,
  .overview-main,
  .overview-side {
    gap: 14px;
  }

  .overview-connections,
  .telemetry-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px;
  }

  .overview-connection,
  .telemetry-coverage .overview-connection {
    min-block-size: 104px;
    padding: 13px;
    border-radius: 14px;
  }

  .overview-connection strong {
    font-size: 22px;
  }

  .overview-quick-actions a {
    min-block-size: 60px;
    padding: 13px 42px 13px 15px;
  }

  .directory-filters,
  .source-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .directory-filters > label:first-child,
  .source-filters > label:first-child,
  .directory-filters > .button,
  .source-filters > .button {
    grid-column: 1 / -1;
  }

  .directory-filters input,
  .directory-filters select,
  .source-filters input,
  .source-filters select {
    min-block-size: 46px;
    padding-inline: 11px;
    border-radius: 12px;
    font-size: 16px;
  }

  .directory-filters .button,
  .source-filters .button {
    inline-size: 100%;
    min-block-size: 45px;
  }

  .responsive-table tbody {
    gap: 10px;
    padding: 10px;
  }

  .responsive-table tr {
    gap: 0;
    padding: 13px 14px;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .06);
  }

  .responsive-table td {
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr);
    gap: 10px;
    padding-block: 7px;
    border-block-end: 1px solid rgba(227, 232, 241, .72);
    line-height: 1.4;
  }

  .responsive-table td:last-child {
    border-block-end: 0;
  }

  .responsive-table td::before {
    padding-block-start: 1px;
    font-size: 8.5px;
    line-height: 1.35;
  }

  .responsive-table code,
  .responsive-table a,
  .responsive-table .cell-wrap {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .responsive-table .row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .empty-state,
  .error-state,
  .loading-state,
  .directory-empty,
  .source-empty,
  .overview-empty,
  .telemetry-unavailable {
    min-block-size: 190px;
    padding: 26px 16px;
  }

  .mobile-admin-nav {
    inset-inline: max(9px, env(safe-area-inset-left)) max(9px, env(safe-area-inset-right));
    inset-block-end: max(8px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 7px;
    border: 1px solid rgba(219, 225, 237, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 44px rgba(15, 23, 42, .17);
    backdrop-filter: blur(22px);
  }

  .mobile-nav-link {
    gap: 3px;
    min-block-size: 54px;
    padding: 5px 2px;
    border-radius: 15px;
    font-size: 9px;
  }

  .mobile-nav-link__icon {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
  }

  .mobile-nav-link__icon svg {
    inline-size: 14px;
    block-size: 14px;
  }

  .mobile-nav-link--active {
    background: linear-gradient(180deg, var(--color-brand-50), rgba(238, 241, 255, .72));
  }

  .mobile-nav-more__menu {
    position: fixed;
    inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    inset-block-end: calc(82px + env(safe-area-inset-bottom));
    inline-size: auto;
    max-block-size: min(62svh, 520px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 13px;
    overflow-y: auto;
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
    overscroll-behavior: contain;
  }

  .mobile-nav-more__menu .mobile-nav-link {
    min-block-size: 64px;
    padding: 8px 6px;
    border-radius: 14px;
  }

  .auth-gate {
    align-items: start;
    padding:
      max(18px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .auth-gate__card {
    inline-size: 100%;
    max-inline-size: 430px;
    margin-block: auto;
    padding: 27px 20px;
    border-radius: 20px;
  }
}

@media (max-width: 380px) {
  .topbar__brand strong {
    max-inline-size: 112px;
  }

  .metrics-grid,
  .overview-metrics,
  .sites-metrics,
  .sources-metrics,
  .directory-metrics,
  .overview-connections,
  .telemetry-coverage {
    grid-template-columns: 1fr;
  }

  .directory-filters,
  .source-filters {
    grid-template-columns: 1fr;
  }

  .directory-filters > label,
  .source-filters > label,
  .directory-filters > .button,
  .source-filters > .button {
    grid-column: 1;
  }

  .mobile-nav-link {
    font-size: 8.5px;
  }
}

@media (display-mode: standalone) {
  body {
    min-block-size: 100svh;
    overscroll-behavior-y: none;
  }

  @media (max-width: 760px) {
    .topbar {
      min-block-size: calc(64px + env(safe-area-inset-top));
      padding-block-start: calc(9px + env(safe-area-inset-top));
    }

    .mobile-admin-nav {
      inset-block-end: max(6px, env(safe-area-inset-bottom));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-admin-nav,
  .mobile-nav-more__menu {
    backdrop-filter: none;
  }
}