/* =========================================================
   HT Health RS04.8 Native Mobile UI Layer
   Scope: user-facing mobile/tablet shell only.
   Goal: app-like mobile UX without touching admin/API/database.
========================================================= */

@media (max-width: 1023.98px) {
  html:has(body.app-route.has-mobile-nav) {
    height: 100%;
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
  }

  body.app-route.has-mobile-nav {
    --native-screen-max: 560px;
    --native-tablet-max: 900px;
    --native-gutter: clamp(1rem, 4.5vw, 1.25rem);
    --native-section-gap: 1rem;
    --native-card-radius: 24px;
    --native-chip-radius: 999px;
    --native-nav-height: 74px;
    --native-topbar-height: 64px;
    --native-touch: 48px;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    background:
      radial-gradient(circle at 100% -10%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0 18rem, transparent 18.2rem),
      linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%) !important;
    padding-bottom: calc(var(--native-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.app-route.has-mobile-nav * {
    min-width: 0;
  }

  body.app-route.has-mobile-nav .container,
  body.app-route.has-mobile-nav .container-fluid {
    max-width: var(--native-screen-max) !important;
    padding-left: var(--native-gutter) !important;
    padding-right: var(--native-gutter) !important;
  }

  body.app-route.has-mobile-nav .page-shell,
  body.app-route.has-mobile-nav .pb-mobile {
    padding-top: max(0.85rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(var(--native-nav-height) + 1.15rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.app-route.has-mobile-nav .app-topbar,
  body.app-route.has-mobile-nav .appointments-topbar,
  body.app-route.has-mobile-nav .bp-topbar-minimal,
  body.app-route.has-mobile-nav .games-topbar-minimal,
  body.app-route.has-mobile-nav .page-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 1018 !important;
    min-height: var(--native-topbar-height) !important;
    margin: calc(var(--native-gutter) * -1) calc(var(--native-gutter) * -1) var(--native-section-gap) !important;
    padding: calc(0.68rem + env(safe-area-inset-top, 0px)) var(--native-gutter) 0.78rem !important;
    border-width: 0 0 1px !important;
    border-radius: 0 0 24px 24px !important;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: saturate(160%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
  }

  body.app-route.has-mobile-nav.is-scrolled .app-topbar,
  body.app-route.has-mobile-nav.is-scrolled .appointments-topbar,
  body.app-route.has-mobile-nav.is-scrolled .bp-topbar-minimal,
  body.app-route.has-mobile-nav.is-scrolled .games-topbar-minimal,
  body.app-route.has-mobile-nav.is-scrolled .page-head {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
  }

  body.app-route.has-mobile-nav .app-brand {
    gap: 0.72rem !important;
  }

  body.app-route.has-mobile-nav .app-brand__badge,
  body.app-route.has-mobile-nav .kpi-icon,
  body.app-route.has-mobile-nav .rounded-4.d-inline-flex {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  body.app-route.has-mobile-nav .app-brand__title,
  body.app-route.has-mobile-nav .page-title,
  body.app-route.has-mobile-nav .section-title {
    font-size: clamp(1.1rem, 4.1vw, 1.32rem) !important;
    line-height: 1.22 !important;
    font-weight: 860 !important;
    letter-spacing: -0.025em !important;
  }

  body.app-route.has-mobile-nav .app-brand__subtitle,
  body.app-route.has-mobile-nav .page-subtitle,
  body.app-route.has-mobile-nav .section-subtitle {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
  }

  body.app-route.has-mobile-nav .btn-back-minimal,
  body.app-route.has-mobile-nav .app-topbar .btn,
  body.app-route.has-mobile-nav .appointments-topbar .btn,
  body.app-route.has-mobile-nav .page-head .btn {
    min-height: 42px !important;
    border-radius: 999px !important;
    padding-inline: 0.85rem !important;
  }

  body.app-route.has-mobile-nav .card,
  body.app-route.has-mobile-nav .card-soft,
  body.app-route.has-mobile-nav .content-card,
  body.app-route.has-mobile-nav .summary-box,
  body.app-route.has-mobile-nav .kpi-card,
  body.app-route.has-mobile-nav .list-card,
  body.app-route.has-mobile-nav .list-item,
  body.app-route.has-mobile-nav .empty-state,
  body.app-route.has-mobile-nav .notif-list > *,
  body.app-route.has-mobile-nav .ht-mobile-native-surface {
    border-radius: var(--native-card-radius) !important;
    background: color-mix(in srgb, var(--color-surface) 98%, var(--color-bg) 2%) !important;
    border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent) !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03), 0 12px 32px rgba(15, 23, 42, 0.055) !important;
  }

  body.app-route.has-mobile-nav .card-body,
  body.app-route.has-mobile-nav .content-card .card-body,
  body.app-route.has-mobile-nav .card-soft .card-body {
    padding: clamp(1rem, 4.5vw, 1.2rem) !important;
  }

  body.app-route.has-mobile-nav .row.g-3 > [class*="col-"],
  body.app-route.has-mobile-nav .row.g-4 > [class*="col-"] {
    margin-top: 0 !important;
  }

  body.app-route.has-mobile-nav .row.g-3,
  body.app-route.has-mobile-nav .row.g-4 {
    gap: 0.9rem 0 !important;
  }

  body.app-route.has-mobile-nav .btn,
  body.app-route.has-mobile-nav button:not(.btn-close),
  body.app-route.has-mobile-nav .form-control,
  body.app-route.has-mobile-nav .form-select,
  body.app-route.has-mobile-nav textarea.form-control {
    min-height: var(--native-touch) !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
  }

  body.app-route.has-mobile-nav textarea.form-control {
    min-height: 112px !important;
  }

  body.app-route.has-mobile-nav .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    font-weight: 820 !important;
    box-shadow: none !important;
  }

  body.app-route.has-mobile-nav .btn:active,
  body.app-route.has-mobile-nav .ht-native-pressable:active,
  body.app-route.has-mobile-nav .ht-mobile-home__quick-item:active,
  body.app-route.has-mobile-nav .ht-mobile-nav__item:active {
    transform: scale(0.985) !important;
  }

  body.app-route.has-mobile-nav .form-label,
  body.app-route.has-mobile-nav label {
    margin-bottom: 0.42rem !important;
    font-size: 0.92rem !important;
    font-weight: 780 !important;
    color: var(--color-text) !important;
  }

  body.app-route.has-mobile-nav .form-control,
  body.app-route.has-mobile-nav .form-select {
    border-color: color-mix(in srgb, var(--color-border) 92%, transparent) !important;
    background-color: var(--color-surface-raised) !important;
    color: var(--color-text) !important;
  }

  body.app-route.has-mobile-nav .form-control:focus,
  body.app-route.has-mobile-nav .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--color-focus) !important;
  }

  body.app-route.has-mobile-nav .metric-chip,
  body.app-route.has-mobile-nav .badge-soft,
  body.app-route.has-mobile-nav .badge,
  body.app-route.has-mobile-nav .ht-mobile-home__today-badge {
    border-radius: var(--native-chip-radius) !important;
    font-weight: 820 !important;
  }

  body.app-route.has-mobile-nav .table-responsive,
  body.app-route.has-mobile-nav .dataTables_wrapper,
  body.app-route.has-mobile-nav .content-html .table-responsive {
    margin-left: calc(var(--native-gutter) * -0.2) !important;
    margin-right: calc(var(--native-gutter) * -0.2) !important;
    border-radius: 18px !important;
    background: var(--color-surface) !important;
  }

  body.app-route.has-mobile-nav .modal {
    padding: 0 !important;
  }

  body.app-route.has-mobile-nav .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    margin: auto 0 0 !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  body.app-route.has-mobile-nav .modal-content {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 0.8rem) !important;
    border-radius: 28px 28px 0 0 !important;
    border-width: 1px 0 0 !important;
    overflow: auto !important;
    box-shadow: 0 -22px 54px rgba(0, 0, 0, 0.18) !important;
  }

  body.app-route.has-mobile-nav .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  body.app-route.has-mobile-nav .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  /* Native dashboard shell. */
  body.page-dashboard-mobile.app-route.has-mobile-nav,
  body.page-home-mobile.app-route.has-mobile-nav {
    --native-screen-max: 560px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 13%, var(--color-bg)) 0 220px, var(--color-bg) 220px, var(--color-bg-elevated) 100%) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home,
  body.page-home-mobile .ht-mobile-home {
    max-width: var(--native-screen-max) !important;
    padding-bottom: calc(var(--native-nav-height) + 1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero,
  body.page-home-mobile .ht-mobile-home__hero {
    margin: 0 !important;
    padding: calc(0.8rem + env(safe-area-inset-top, 0px)) var(--native-gutter) 1.08rem !important;
    border-radius: 0 0 28px 28px !important;
    background:
      radial-gradient(circle at 90% 4%, rgba(255,255,255,.16) 0 5rem, transparent 5.1rem),
      linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 88%, #063a5a 12%) 0%, color-mix(in srgb, var(--color-secondary) 72%, var(--color-primary) 28%) 100%) !important;
    box-shadow: 0 14px 34px rgba(6, 58, 90, 0.18) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero::after,
  body.page-home-mobile .ht-mobile-home__hero::after {
    display: none !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero-top,
  body.page-home-mobile .ht-mobile-home__hero-top {
    margin-bottom: 0.78rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__greet,
  body.page-home-mobile .ht-mobile-home__greet {
    font-size: 0.86rem !important;
    font-weight: 680 !important;
    color: rgba(255,255,255,.78) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__name,
  body.page-home-mobile .ht-mobile-home__name {
    font-size: clamp(1.32rem, 5.4vw, 1.7rem) !important;
    font-weight: 880 !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero-icon,
  body.page-home-mobile .ht-mobile-home__hero-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.22) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__bp-card,
  body.page-home-mobile .ht-mobile-home__bp-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    padding: 1rem !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.08) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__bp-label,
  body.page-home-mobile .ht-mobile-home__bp-label {
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__bp-value,
  body.page-home-mobile .ht-mobile-home__bp-value {
    font-size: clamp(2.25rem, 11.2vw, 3rem) !important;
    line-height: 0.95 !important;
    margin-top: 0.18rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__bp-unit,
  body.page-home-mobile .ht-mobile-home__bp-unit {
    font-size: 0.78rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__bp-status,
  body.page-home-mobile .ht-mobile-home__bp-status {
    min-width: 92px !important;
    border-radius: 20px !important;
    padding: 0.72rem 0.62rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero-kpis,
  body.page-home-mobile .ht-mobile-home__hero-kpis {
    gap: 0.5rem !important;
    margin-top: 0.62rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero-kpi,
  body.page-home-mobile .ht-mobile-home__hero-kpi {
    min-height: 66px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__section,
  body.page-home-mobile .ht-mobile-home__section {
    padding-left: var(--native-gutter) !important;
    padding-right: var(--native-gutter) !important;
    margin-top: 0.96rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__section-head,
  body.page-home-mobile .ht-mobile-home__section-head {
    margin-bottom: 0.58rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__section-head h2,
  body.page-home-mobile .ht-mobile-home__section-head h2 {
    font-size: 1.03rem !important;
    font-weight: 880 !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__section-head a,
  body.page-home-mobile .ht-mobile-home__section-head a {
    min-height: 34px !important;
    padding: 0 0.75rem !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) !important;
    color: var(--color-primary) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-grid,
  body.page-home-mobile .ht-mobile-home__quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-item,
  body.page-home-mobile .ht-mobile-home__quick-item {
    min-height: 76px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 0.78rem !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg) 4%) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 10px 24px rgba(15,23,42,.045) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-icon,
  body.page-home-mobile .ht-mobile-home__quick-icon,
  body.page-dashboard-mobile .ht-mobile-home__today-icon,
  body.page-home-mobile .ht-mobile-home__today-icon,
  body.page-dashboard-mobile .ht-mobile-home__support-icon,
  body.page-home-mobile .ht-mobile-home__support-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-label,
  body.page-home-mobile .ht-mobile-home__quick-label {
    font-size: 0.9rem !important;
    font-weight: 840 !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__med-card,
  body.page-home-mobile .ht-mobile-home__med-card,
  body.page-dashboard-mobile .ht-mobile-home__today-card,
  body.page-home-mobile .ht-mobile-home__today-card,
  body.page-dashboard-mobile .ht-mobile-home__today-item,
  body.page-home-mobile .ht-mobile-home__today-item,
  body.page-dashboard-mobile .ht-mobile-home__support-card,
  body.page-home-mobile .ht-mobile-home__support-card,
  body.page-dashboard-mobile .ht-mobile-home__feed-item,
  body.page-home-mobile .ht-mobile-home__feed-item,
  body.page-dashboard-mobile .ht-mobile-home__logout-card,
  body.page-home-mobile .ht-mobile-home__logout-card {
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--color-surface) 98%, var(--color-bg) 2%) !important;
    border-color: color-mix(in srgb, var(--color-border) 86%, transparent) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 10px 24px rgba(15,23,42,.045) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__med-card,
  body.page-home-mobile .ht-mobile-home__med-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 0.95rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__med-btn,
  body.page-home-mobile .ht-mobile-home__med-btn {
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__today-grid,
  body.page-home-mobile .ht-mobile-home__today-grid,
  body.page-dashboard-mobile .ht-mobile-home__support-grid,
  body.page-home-mobile .ht-mobile-home__support-grid {
    grid-template-columns: 1fr !important;
    gap: 0.72rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__today-card,
  body.page-home-mobile .ht-mobile-home__today-card,
  body.page-dashboard-mobile .ht-mobile-home__today-item,
  body.page-home-mobile .ht-mobile-home__today-item,
  body.page-dashboard-mobile .ht-mobile-home__support-card,
  body.page-home-mobile .ht-mobile-home__support-card {
    min-height: 78px !important;
    padding: 0.9rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__feed-item,
  body.page-home-mobile .ht-mobile-home__feed-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 0.95rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__feed-like,
  body.page-home-mobile .ht-mobile-home__feed-like {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: -0.25rem !important;
    padding: 0.2rem 0.58rem !important;
    border-radius: 999px !important;
    background: var(--color-surface-muted) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__logout-card,
  body.page-home-mobile .ht-mobile-home__logout-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 0.85rem !important;
    padding: 1rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__logout-form,
  body.page-home-mobile .ht-mobile-home__logout-form {
    grid-column: 1 / -1 !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__logout-btn,
  body.page-home-mobile .ht-mobile-home__logout-btn {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 16px !important;
  }

  /* Native tab bar: no protruding FAB; stable iOS/Android-style tabs. */
  body.app-route.has-mobile-nav .ht-mobile-nav {
    z-index: 1040 !important;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px)) !important;
    pointer-events: none !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__inner {
    width: 100% !important;
    max-width: var(--native-screen-max) !important;
    min-height: calc(var(--native-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 auto !important;
    padding: 0.48rem max(0.46rem, env(safe-area-inset-left, 0px)) calc(0.4rem + env(safe-area-inset-bottom, 0px)) max(0.46rem, env(safe-area-inset-right, 0px)) !important;
    border-radius: 26px 26px 0 0 !important;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent) !important;
    border-bottom: 0 !important;
    box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: saturate(170%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(170%) blur(20px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0.1rem !important;
    pointer-events: auto !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item,
  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary {
    min-height: 58px !important;
    padding: 0.25rem 0.06rem !important;
    border-radius: 18px !important;
    transform: none !important;
    gap: 0.18rem !important;
    color: var(--color-text-muted) !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item .ht-mobile-nav__icon-wrap,
  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__icon-wrap {
    width: 34px !important;
    height: 32px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: currentColor !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item i,
  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary i {
    font-size: 1.16rem !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__label,
  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__label {
    font-size: 0.65rem !important;
    line-height: 1.08 !important;
    font-weight: 820 !important;
    color: currentColor !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-active,
  body.app-route.has-mobile-nav .ht-mobile-nav__item[aria-current="page"] {
    color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-active .ht-mobile-nav__icon-wrap,
  body.app-route.has-mobile-nav .ht-mobile-nav__item[aria-current="page"] .ht-mobile-nav__icon-wrap {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  }

  body.app-route.has-mobile-nav.keyboard-open .ht-mobile-nav {
    transform: translateY(110%) !important;
    transition: transform 0.2s ease !important;
  }

  body.app-route.has-mobile-nav:not(.keyboard-open) .ht-mobile-nav {
    transform: translateY(0) !important;
    transition: transform 0.2s ease !important;
  }

  body.app-route.has-mobile-nav .ht-toast-stack,
  body.app-route.has-mobile-nav .ht-toast-wrap {
    bottom: calc(var(--native-nav-height) + 0.8rem + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
  }
}

@media (max-width: 374.98px) {
  body.app-route.has-mobile-nav {
    --native-gutter: 0.82rem;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-item,
  body.page-home-mobile .ht-mobile-home__quick-item {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 72px !important;
    padding: 0.7rem !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__label {
    font-size: 0.58rem !important;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  body.page-dashboard-mobile .ht-mobile-home__quick-grid,
  body.page-home-mobile .ht-mobile-home__quick-grid,
  body.page-dashboard-mobile .ht-mobile-home__today-grid,
  body.page-home-mobile .ht-mobile-home__today-grid,
  body.page-dashboard-mobile .ht-mobile-home__support-grid,
  body.page-home-mobile .ht-mobile-home__support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  body.app-route.has-mobile-nav {
    --native-screen-max: var(--native-tablet-max);
    --native-gutter: 1.4rem;
    --native-nav-height: 78px;
  }

  body.page-dashboard-mobile .ht-mobile-home,
  body.page-home-mobile .ht-mobile-home {
    max-width: var(--native-tablet-max) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__hero,
  body.page-home-mobile .ht-mobile-home__hero {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-grid,
  body.page-home-mobile .ht-mobile-home__quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-item,
  body.page-home-mobile .ht-mobile-home__quick-item {
    min-height: 110px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__quick-label,
  body.page-home-mobile .ht-mobile-home__quick-label {
    text-align: center !important;
  }

  body.page-dashboard-mobile .ht-mobile-home__today-grid,
  body.page-home-mobile .ht-mobile-home__today-grid,
  body.page-dashboard-mobile .ht-mobile-home__support-grid,
  body.page-home-mobile .ht-mobile-home__support-grid,
  body.page-dashboard-mobile .ht-mobile-home__feed,
  body.page-home-mobile .ht-mobile-home__feed,
  body.page-dashboard-mobile .ht-mobile-home__feed-list,
  body.page-home-mobile .ht-mobile-home__feed-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  body.app-route.has-mobile-nav {
    padding-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-route.has-mobile-nav *,
  body.app-route.has-mobile-nav *::before,
  body.app-route.has-mobile-nav *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* RS04.9: Native center action fallback.
   The primary middle tab must stay visible even if Bootstrap Icons are delayed
   or blocked by a network/content-security issue. Scope only to user mobile nav. */
body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary {
  position: relative !important;
  z-index: 2 !important;
  min-height: 64px !important;
  padding-top: 0 !important;
  transform: translateY(-7px) !important;
}

body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  color: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 46%, #ffffff 18%) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 26%, transparent) !important;
}

body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__primary-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  transform: translateY(-0.04em) !important;
}

body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__label {
  color: var(--color-primary) !important;
  font-weight: 900 !important;
  margin-top: 0.05rem !important;
}

body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary.is-active,
body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary[aria-current="page"] {
  background: transparent !important;
}

body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary.is-active .ht-mobile-nav__icon-wrap,
body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary[aria-current="page"] .ht-mobile-nav__icon-wrap {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-primary) 32%, transparent) !important;
}

@media (max-width: 374.98px) {
  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary {
    transform: translateY(-5px) !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
  }

  body.app-route.has-mobile-nav .ht-mobile-nav__item.is-primary .ht-mobile-nav__primary-mark {
    font-size: 1.82rem !important;
  }
}