@media (max-width: 767.98px) {
  html {
    font-size: 15px;
  }

  body {
    line-height: 1.45;
  }

  :where(.content-area, main.container) {
    font-size: 0.94rem;
  }

  :where(.content-area, main.container) h1 {
    font-size: 1.38rem;
    line-height: 1.2;
  }

  :where(.content-area, main.container) h2 {
    font-size: 1.28rem;
    line-height: 1.22;
  }

  :where(.content-area, main.container) h3 {
    font-size: 1.18rem;
    line-height: 1.24;
  }

  :where(.content-area, main.container) h4 {
    font-size: 1.08rem;
    line-height: 1.28;
  }

  :where(.content-area, main.container) h5 {
    font-size: 1rem;
    line-height: 1.3;
  }

  :where(.content-area, main.container) h6 {
    font-size: 0.91rem;
    line-height: 1.32;
  }

  :where(.content-area, main.container) :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
    font-size: 1.55rem;
    line-height: 1.15;
  }

  :where(.content-area, main.container) :is(p, li, .form-label) {
    line-height: 1.45;
  }

  :where(.content-area, main.container) :is(.small, small) {
    font-size: 0.76rem;
  }

  :where(.content-area, main.container) .card {
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.055);
  }

  :where(.content-area, main.container) .card-body {
    padding: 0.85rem;
  }

  :where(.content-area, main.container) .card-header {
    padding: 0.72rem 0.85rem;
  }

  :where(.content-area, main.container) .btn {
    min-height: 38px;
    padding: 0.42rem 0.68rem;
    font-size: 0.82rem;
  }

  :where(.content-area, main.container) .btn-sm {
    min-height: 34px;
    padding: 0.34rem 0.56rem;
    font-size: 0.76rem;
  }

  :where(.content-area, main.container) :is(.form-control, .form-select) {
    min-height: 40px;
    font-size: 16px;
  }

  :where(.content-area, main.container) .badge {
    font-size: 0.7rem;
    font-weight: 650;
  }

  :where(.content-area, main.container) .pg-page-header {
    padding: 0.88rem;
  }

  :where(.content-area, main.container) .pg-page-header h4 {
    font-size: 1.05rem;
  }

  :where(.content-area, main.container) .pg-page-header p {
    font-size: 0.78rem;
  }

  .view-list {
    display: none !important;
  }

  .view-cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.72rem !important;
    padding: 0 !important;
  }

  [data-view-toggle],
  .btn-group:has(> [data-view-toggle]) {
    display: none !important;
  }

  :where(.content-area, main.container) .mobile-card-table-wrap {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  :where(.content-area, main.container) table.mobile-card-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    background: transparent;
  }

  :where(.content-area, main.container) table.mobile-card-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :where(.content-area, main.container) table.mobile-card-table > tbody {
    display: grid;
    gap: 0.72rem;
    width: 100%;
  }

  :where(.content-area, main.container) table.mobile-card-table > tbody > tr {
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: 14px;
    background: var(--app-surface, #fff);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.055);
  }

  :where(.content-area, main.container) table.mobile-card-table > tbody > tr > td:not(.d-none),
  :where(.content-area, main.container) table.mobile-card-table > tbody > tr > th:not(.d-none) {
    display: grid;
    grid-template-columns: minmax(5.8rem, 36%) minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.58rem 0.75rem !important;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--app-border, #e2e8f0) 72%, transparent);
    background: transparent;
    text-align: left !important;
    font-size: 0.82rem !important;
    overflow-wrap: anywhere;
  }

  :where(.content-area, main.container) table.mobile-card-table > tbody > tr > :last-child {
    border-bottom: 0;
  }

  :where(.content-area, main.container) table.mobile-card-table td[data-mobile-label]::before {
    content: attr(data-mobile-label);
    color: var(--app-muted, #64748b);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  :where(.content-area, main.container) table.mobile-card-table td[data-mobile-label=""],
  :where(.content-area, main.container) table.mobile-card-table td[colspan] {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.content-area, main.container) table.mobile-card-table td[data-mobile-label=""]::before,
  :where(.content-area, main.container) table.mobile-card-table td[colspan]::before {
    display: none;
  }

  :where(.content-area, main.container) table.mobile-card-table :is(.btn-group, .d-flex) {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  :where(.content-area, main.container) table.mobile-card-table :is(.btn-group, .d-flex) > .btn {
    flex: 1 1 auto;
  }

  :where(.content-area, main.container) .mobile-card-list {
    display: grid;
    gap: 0.68rem;
    border: 0;
    background: transparent;
  }

  :where(.content-area, main.container) .mobile-card-list > .list-group-item {
    overflow: hidden;
    border: 1px solid var(--app-border, #e2e8f0) !important;
    border-radius: 14px !important;
    background: var(--app-surface, #fff);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.055);
    font-size: 0.84rem;
  }
}