.hf-mobile-nav, .hf-bottom-sheet { display: none; }

@media (max-width: 767px) {
  body.hostfa { --hf-control-height: 2.875rem; }
  .hf-sidebar { display: none; }
  .hf-content, .hf-topbar { margin-inline-start: 0; max-inline-size: none; }
  .hf-topbar { min-block-size: 3.75rem; }
  .hf-topbar__inner { min-block-size: 3.75rem; padding-inline: 1rem; }
  .hf-topbar__logout { min-block-size: 2.5rem; padding-inline: .6rem; }
  .hf-content { padding: 1rem; padding-block-end: calc(var(--hf-mobile-nav-height) + env(safe-area-inset-bottom) + 1rem); }
  .hf-shell-guest-store .hf-content { padding-block-end: 1rem; }

  /* Dashboard app-like fidelity */
  .hf-dashboard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .hf-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .hf-stat-card { min-block-size: 5.75rem; }
  .hf-credit-card { min-block-size: 9rem; }
  .hf-service-mini-grid { grid-template-columns: 1fr; }
  .hf-mobile-nav { position: fixed; inset-inline: 0; inset-block-end: 0; min-block-size: var(--hf-mobile-nav-height); padding-block-end: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--hf-color-surface); border-block-start: 1px solid var(--hf-color-border); z-index: var(--hf-z-sticky); box-shadow: 0 -8px 22px rgb(15 23 42 / .05); }
  .hf-mobile-nav__item { min-block-size: 3.875rem; display: grid; place-items: center; align-content: center; gap: .2rem; border: 0; background: transparent; color: var(--hf-color-text-muted); font-size: .75rem; cursor: pointer; }
  .hf-mobile-nav__item:hover, .hf-mobile-nav__item:focus-visible { color: var(--hf-color-primary); }
  .hf-bottom-sheet { position: fixed; inset: 0; z-index: var(--hf-z-overlay); align-items: end; background: rgb(15 23 42 / .4); }
  .hf-bottom-sheet:not([hidden]) { display: grid; }
  .hf-bottom-sheet__panel { background: var(--hf-color-surface); border-radius: var(--hf-radius-lg) var(--hf-radius-lg) 0 0; padding: var(--hf-space-5); padding-block-end: calc(var(--hf-space-5) + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform var(--hf-motion-slow) var(--hf-ease); box-shadow: 0 -18px 48px rgb(15 23 42 / .14); }
  .hf-bottom-sheet__head { justify-content: space-between; }
  .hf-bottom-sheet__head h2 { margin: 0; }
  .hf-bottom-sheet[data-state="open"] .hf-bottom-sheet__panel { transform: translateY(0); }
  .hf-drawer { position: fixed; inset: 0; z-index: var(--hf-z-overlay); background: rgb(15 23 42 / .4); }
  .hf-drawer__panel { inline-size: min(88vw, 22rem); block-size: 100%; margin-inline-start: auto; background: var(--hf-color-surface); transform: translateX(100%); transition: transform 220ms var(--hf-ease); }
  .hf-drawer[data-state="open"] .hf-drawer__panel { transform: translateX(0); }
}

@media (max-width: 767px) {
  .hf-app-menu-toggle { display: inline-grid; }
  .hf-app-drawer:not([hidden]) { display: block; }
  .hf-app-drawer__backdrop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; background: transparent; cursor: default; }
  .hf-app-drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: min(88vw, 21.5rem); block-size: 100%; margin: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--hf-color-surface); border-inline-end: 1px solid var(--hf-color-border); box-shadow: -18px 0 48px rgb(20 27 58 / .12); transform: translateX(100%); transition: transform 220ms var(--hf-ease); }
  .hf-app-drawer[data-state="open"] .hf-app-drawer__panel { transform: translateX(0); }
  .hf-app-drawer__head { min-block-size: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-3); padding-inline: 1rem; border-block-end: 1px solid var(--hf-color-border); }
  .hf-app-drawer__brand { min-inline-size: 0; display: flex; align-items: center; font-weight: 500; }
  .hf-app-drawer__brand img { max-inline-size: 8.25rem; max-block-size: 2.25rem; object-fit: contain; }
  .hf-app-drawer__nav { display: grid; gap: .2rem; padding: .75rem; }
  .hf-app-drawer__account { margin-block-start: auto; display: grid; gap: .2rem; padding: .75rem; border-block-start: 1px solid var(--hf-color-border); }
  .hf-app-drawer .hf-nav-item { min-block-size: 2.875rem; }
  .hf-app-drawer .hf-nav-subitem { min-block-size: 2.625rem; font-size: 14px; font-weight: 500; }
}