@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  html,
  body,
  #root {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    background: #08090b !important;
  }

  .c6-shell,
  .resident-shell,
  .resident-workspace,
  .resident-main-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    zoom: 1 !important;
  }

  .resident-topbar {
    width: 100% !important;
    min-height: 78px !important;
    padding: 12px 16px !important;
  }

  .resident-topbar__title h1 {
    font-size: 0.95rem !important;
  }

  .resident-topbar__title small {
    font-size: 0.72rem !important;
  }

  .resident-topbar__title::before {
    width: 46px !important;
    height: 46px !important;
    font-size: 0.75rem !important;
  }

  .resident-topbar__actions > button {
    width: 46px !important;
    height: 46px !important;
  }

  .resident-body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px 16px calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .resident-home {
    width: 100% !important;
    gap: 24px !important;
  }

  .resident-home__hero {
    width: 100% !important;
    padding: 0 2px !important;
  }

  .resident-home__hero h2,
  .resident-home__hero h2::before {
    max-width: none !important;
    font-size: clamp(2.55rem, 11vw, 3.55rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
  }

  .resident-home__hero p {
    max-width: 36rem !important;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  .resident-home__hero > button {
    min-height: 48px !important;
    margin-top: 22px !important;
    padding: 12px 19px !important;
    font-size: 0.95rem !important;
  }

  .resident-summary-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .resident-summary-card,
  .resident-summary-card--primary {
    width: 100% !important;
  }

  .resident-summary-card {
    min-height: 118px !important;
    padding: 20px !important;
  }

  .resident-summary-card--primary {
    min-height: auto !important;
    padding: 0 0 18px !important;
  }

  .resident-summary-card strong {
    font-size: 1.28rem !important;
  }

  .resident-summary-card > span,
  .resident-summary-card small {
    font-size: 0.82rem !important;
  }

  .resident-panel__heading {
    margin-bottom: 14px !important;
    padding: 0 2px !important;
  }

  .resident-panel__heading h3 {
    font-size: 1.55rem !important;
  }

  .resident-panel__heading span {
    font-size: 0.82rem !important;
  }

  .resident-service-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .resident-service-grid button {
    width: 100% !important;
    min-height: 88px !important;
    padding: 17px 18px !important;
    border-radius: 20px !important;
  }

  .resident-service-grid button > i {
    width: 50px !important;
    height: 50px !important;
  }

  .resident-service-grid button strong {
    font-size: 1rem !important;
  }

  .resident-service-grid button small {
    font-size: 0.78rem !important;
  }

  .resident-admin-note {
    min-height: 38px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0.75rem !important;
  }

  .resident-bottom-nav,
  .c6-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .resident-bottom-nav button,
  .c6-bottom-nav button {
    min-height: 62px !important;
    font-size: 0.76rem !important;
  }

  .resident-bottom-nav svg,
  .c6-bottom-nav svg {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 390px) {
  .resident-body {
    padding-inline: 14px !important;
  }

  .resident-home__hero h2,
  .resident-home__hero h2::before {
    font-size: 2.45rem !important;
  }
}