@media (max-width: 860px) {
  .detail-page-head h2 {
    font-size: 20px;
  }

  .table-wrap,
  .grid.route-list-mode .table-wrap {
    max-height: none;
    overflow: auto;
  }

  .route-pager {
    display: grid;
    align-items: stretch;
  }

  .pager-meta {
    margin-right: 0;
  }

  .pager-controls,
  .pager-jump {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-left: 0;
  }

  .pager-jump input,
  .pager-jump select,
  .pager-jump button {
    width: 100%;
  }

  .modal-backdrop {
    align-items: flex-start;
    padding: 12px;
  }

  .modal,
  .modal.large,
  .error-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .modal-head,
  .modal-body,
  .modal-actions {
    padding: 14px;
  }

  .drawer,
  .drawer.packet-open {
    width: 100vw;
  }

  .drawer-head,
  .drawer-body {
    padding: 12px;
  }

  .job-log-list {
    overflow: auto;
  }

  .job-log-line {
    min-width: 720px;
  }

  .toast {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: fit-content;
    max-width: min(420px, calc(100vw - 24px));
    transform: translate(-50%, calc(-50% + 16px));
  }

  .toast.show {
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 520px) {
  .login-card {
    padding: 18px;
  }

  .top-actions {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .top-actions > button {
    width: 100%;
    flex: 1 1 100%;
  }

  .top-actions > button:not([hidden]) {
    display: block;
  }

  .user-menu {
    margin-left: 0;
    order: -1;
  }

  .avatar-button {
    width: 40px;
    height: 40px;
  }

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

  .wechat-account-fields,
  .account-module .job-card,
  .job-card {
    grid-template-columns: 1fr;
  }

  .pager-controls,
  .pager-jump {
    grid-template-columns: 1fr;
  }
}