/* Phone ergonomics, using the shared light/dark tokens and original form nodes. */
#app#app#app#app#app#app .rental-room-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
#app#app#app#app#app#app .rental-room-search { flex: 1; min-width: 0; margin: 0; }
#app#app#app#app#app#app .rental-room-search input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ex-line); border-radius: 8px; background: var(--ex-surface); color: var(--ex-text); font-size: 16px; }
#app#app#app#app#app#app .rental-room-layout { display: none; }
#app#app#app#app#app#app .rental-search-hidden,
#app#app#app#app#app#app .rental-room-no-results[hidden] { display: none !important; }
#app#app#app#app#app#app #rooms :is([data-room-edit-card], [data-admin-room-property-section]).rental-search-hidden.rental-search-hidden { display: none !important; }
#app#app#app#app#app#app .rental-room-no-results { padding: 16px 0; margin: 0; color: var(--ex-muted); }
#app#app#app#app#app#app .rental-list .rental-room-tools { display: none; }
#app#app#app#app#app#app #payment-dialog .payment-notes { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
#app#app#app#app#app#app #payment-dialog .payment-notes summary { min-height: 48px; padding: 12px 0 !important; color: var(--ex-accent) !important; font: 600 14px/1.5 "Segoe UI", sans-serif; cursor: pointer; background: none !important; }
#app#app#app#app#app#app .experience-editor-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

@media (max-width: 900px) {
  html:root body main#app#app#app#app#app#app.app-shell:not(.hidden) {
    --comfort-gutter: 12px;
    padding: calc(60px + env(safe-area-inset-top, 0px)) max(var(--comfort-gutter), env(safe-area-inset-right, 0px)) calc(92px + env(safe-area-inset-bottom, 0px)) max(var(--comfort-gutter), env(safe-area-inset-left, 0px)) !important;
  }
  html:root body #app#app#app#app#app#app > .app-header {
    position: absolute !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    max-height: none !important;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 12px 4px !important;
    box-shadow: none !important;
  }
  #app#app#app#app#app#app > .page { scroll-margin-top: 12px !important; animation: none !important; }
  #app#app#app#app#app#app > .app-header :is(.app-kicker, small, .header-actions) { display: none !important; }
  #app#app#app#app#app#app > .app-header .brand-lockup { display: flex !important; min-height: 44px !important; gap: 9px !important; border: 0 !important; border-radius: 0 !important; }
  #app#app#app#app#app#app > .app-header .brand-lockup::after { display: none !important; }
  /* One quiet surface, with a small selection halo instead of five boxed buttons. */
  html:root body #app#app#app#app#app#app #admin-bottom-nav {
    inset: auto 0 0 !important; width: 100% !important; max-width: none !important;
    transform: none !important; box-shadow: none !important;
    grid-template-columns: repeat(5, minmax(0, 112px)) !important; justify-content: center !important; gap: 0 !important;
    height: auto !important; min-height: 0 !important; border: 0 !important; border-top: 1px solid var(--ex-line) !important;
    border-radius: 0 !important; background: var(--ex-surface) !important; backdrop-filter: none !important;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    overflow: visible !important;
  }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button {
    position: relative !important; isolation: isolate; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 32px 16px !important;
    place-items: center !important; align-content: center !important; gap: 4px !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important; justify-self: stretch;
    height: 64px !important; min-height: 64px !important; padding: 6px 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
    color: var(--ex-muted) !important; transform: none !important; overflow: visible !important; touch-action: manipulation;
    transition: none !important; -webkit-tap-highlight-color: transparent;
  }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button.active { color: var(--ex-accent) !important; background: transparent !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button::before { display: none !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button::after {
    content: "" !important; display: block !important; position: absolute !important;
    width: 52px !important; height: 32px !important; inset: 6px auto auto calc(50% - 26px) !important;
    border-radius: 16px !important; background: var(--ex-tint) !important; border: 0 !important; box-shadow: none !important;
    opacity: 0 !important; transform: scale(.86) !important; translate: none !important; z-index: -1; pointer-events: none;
    animation: none !important; transition: none !important;
  }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button.active::after { opacity: 1 !important; transform: scale(1) !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button:active::after { opacity: 1 !important; transform: scale(.92) !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button:focus-visible { outline: 2px solid var(--ex-accent) !important; outline-offset: -2px !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav .portal-nav-icon {
    width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; color: inherit !important;
    transform: none !important; translate: none !important; animation: none !important;
  }
  html:root body #app#app#app#app#app#app #admin-bottom-nav .nav-dashboard { --portal-icon: url('/icons/services/house.svg') !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav .nav-properties { --portal-icon: url('/icons/services/building-2.svg') !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav .nav-calendar { --portal-icon: url('/icons/services/calendar-days.svg') !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav .nav-settings { --portal-icon: url('/icons/services/settings.svg') !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button > span:last-child {
    width: auto !important; max-width: 100% !important; font: 500 12px/16px "Segoe UI", Arial, sans-serif !important;
    color: inherit !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important;
    text-shadow: none !important; -webkit-text-stroke: 0 !important; margin: 0 !important; padding: 0 !important;
  }

  #app#app#app#app#app#app #rentals-header { margin-bottom: 12px !important; }
  #app#app#app#app#app#app .rental-heading { display: grid !important; grid-template-columns: 1fr; gap: 8px; padding-bottom: 4px; }
  #app#app#app#app#app#app .rental-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  #app#app#app#app#app#app .rental-heading h2 { font-size: 20px !important; margin: 0 !important; }
  #app#app#app#app#app#app .rental-heading p { font-size: 12px !important; }
  #app#app#app#app#app#app .rental-property-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #app#app#app#app#app#app .rental-property-picker select { min-height: 48px; }
  #app#app#app#app#app#app .rental-tabs button { min-height: 48px !important; font-size: 13px !important; }
  #app#app#app#app#app#app .rental-unassigned { min-height: 44px !important; }
  #app#app#app#app#app#app #rentals .room-management-toolbar { gap: 8px !important; margin-bottom: 10px !important; }
  #app#app#app#app#app#app #rooms > .room-management-toolbar > h2 { display: none !important; }
  #app#app#app#app#app#app .room-management-actions { display: flex !important; gap: 8px !important; width: 100%; }
  #app#app#app#app#app#app .room-management-actions > button { min-height: 48px !important; padding: 10px 12px !important; font-size: 14px !important; border-radius: 8px !important; }
  #app#app#app#app#app#app .room-management-actions > button:last-child { flex: 1; }
  #app#app#app#app#app#app .room-management-actions .room-refresh-button { flex: 0 0 48px; width: 48px !important; }
  #app#app#app#app#app#app .rental-room-layout { display: flex; padding: 0; gap: 2px; flex: none; }
  #app#app#app#app#app#app .rental-room-layout button {
    display: grid !important; place-items: center; width: 48px !important; min-width: 48px !important; height: 48px !important;
    padding: 12px !important; border: 1px solid var(--ex-line) !important; border-radius: 8px !important;
    color: var(--ex-muted) !important; background: var(--ex-surface) !important; box-shadow: none !important;
  }
  #app#app#app#app#app#app .rental-room-layout button[aria-pressed="true"] { color: var(--ex-accent) !important; border-color: var(--ex-accent) !important; background: var(--ex-tint) !important; }
  #app#app#app#app#app#app .rental-room-search input { font-size: 16px !important; }

  /* A single set of records changes layout; all existing actions keep their handlers. */
  #app#app#app#app#app#app #rooms :is(.admin-room-catalog-shell, .admin-room-catalog-section) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="carousel"] .admin-room-catalog-carousel { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; gap: 12px !important; touch-action: auto !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="carousel"] .admin-room-catalog-card { flex: 0 0 min(290px, calc(100% - 24px)) !important; width: min(290px, calc(100% - 24px)) !important; min-width: 0 !important; max-width: none !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-section-head { align-items: center !important; gap: 8px !important; padding: 12px 0 !important; margin: 0 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-section-head h2 { font-size: 17px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-section-head p { font-size: 12px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] :is(.admin-room-carousel-range-wrap, .public-stay-row-controls, .admin-room-carousel-count) { display: none !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-carousel-head-tools { flex: none; width: auto !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .room-create-shortcut { min-width: 48px !important; min-height: 48px !important; padding: 10px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .room-create-shortcut > span:last-child { display: none; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-catalog-carousel {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important;
    overflow: visible !important; gap: 10px !important; padding: 0 0 12px !important; scroll-snap-type: none !important; touch-action: auto !important;
  }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-catalog-card {
    display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; gap: 8px 12px !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important;
    padding: 12px !important; margin: 0 !important; border-radius: 8px !important; box-shadow: none !important;
  }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-media { grid-column: 1; grid-row: 1 / 3; width: 76px !important; height: 88px !important; min-height: 0 !important; margin: 0 !important; border-radius: 6px !important; overflow: hidden; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] :is(.admin-room-card-cover, .admin-room-card-empty) { height: 88px !important; min-height: 0 !important; width: 76px !important; aspect-ratio: auto !important; border-radius: 6px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-empty { padding: 8px 2px !important; font-size: 11px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] :is(.admin-room-card-empty small, .admin-room-card-cover > span, .admin-room-feature-row, .admin-room-card-title > div > small) { display: none !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-status { inset: auto 0 0 !important; border-radius: 0 !important; padding: 3px 1px !important; font-size: 10px !important; line-height: 1.5 !important; text-align: center; width: 100%; box-shadow: none !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-body { display: contents !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-title { grid-column: 2; display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 10px !important; padding: 0 !important; margin: 0 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-title h3 { font-size: 15px !important; line-height: 1.35 !important; margin: 0 !important; overflow-wrap: anywhere !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-title > strong { font-size: 15px !important; line-height: 1.4 !important; white-space: normal !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-tenant-strip { grid-column: 2; padding: 0 !important; margin: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-tenant-strip > span,
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-tenant-strip.available > strong { display: none !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .room-tenant-person { gap: 6px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .room-tenant-avatar { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .rental-tenant-link { min-height: 44px; font-size: 13px !important; font-weight: 600 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-tenant-strip small { display: block; font-size: 12px !important; line-height: 1.4 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-actions { grid-column: 1 / -1; display: grid !important; grid-template-columns: .8fr 1.35fr .8fr !important; gap: 6px !important; margin: 2px 0 0 !important; }
  #app#app#app#app#app#app #rooms[data-mobile-layout="list"] .admin-room-card-actions > button { width: 100% !important; min-height: 48px !important; min-width: 0 !important; margin: 0 !important; padding: 8px 4px !important; font-size: 12px !important; line-height: 1.3 !important; border-radius: 6px !important; }

  #app#app#app#app#app#app #tenants .tenants-v2-intro-actions { width: 100% !important; display: flex !important; gap: 8px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-intro-actions button { width: auto !important; min-height: 48px !important; padding: 10px 14px !important; font-size: 14px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-intro-actions button:last-child { flex: 1; }
  #app#app#app#app#app#app #tenants .tenants-v2-list-head { padding: 8px 0 !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-list-panel { padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: none !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-list-head h3 { font-size: 18px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-toolbar { gap: 8px !important; padding: 8px 0 12px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-toolbar :is(input, select) { min-height: 48px !important; font-size: 16px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-list { gap: 0 !important; padding: 0 !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr) !important; gap: 8px 10px !important; padding: 14px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--ex-line) !important; border-radius: 0 !important; box-shadow: none !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-person { grid-column: 1 / -1; gap: 10px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-person strong { font-size: 16px !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere; }
  #app#app#app#app#app#app #tenants :is(.tenants-v2-person small, .tenants-v2-assignment-state small, .tenants-v2-rent span) { font-size: 12px !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-assignment-state { grid-column: 1; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-rent { grid-column: 2; grid-row: 2; text-align: right; }
  #app#app#app#app#app#app #tenants :is(.tenants-v2-rent, .tenants-v2-assignment-state) :is(strong, span, small) { white-space: normal !important; overflow-wrap: anywhere !important; }
  #app#app#app#app#app#app #tenants :is(.tenants-v2-assignment-state > span, .tenants-v2-rent > small) { display: none !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-documents { grid-column: 1 / -1; gap: 6px !important; padding: 0 !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-row-actions { grid-column: 1 / -1; display: flex !important; gap: 6px !important; margin: 0 !important; }
  #app#app#app#app#app#app #tenants .tenants-v2-row-actions > * { flex: 1; min-height: 48px !important; padding: 10px 6px !important; font-size: 13px !important; border-radius: 6px !important; }

  #app#app#app#app#app#app #dashboard .home-header { padding: 0 0 10px !important; gap: 10px !important; }
  #app#app#app#app#app#app #dashboard .home-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  #app#app#app#app#app#app #dashboard .home-title h2 { font-size: 20px !important; margin: 0 !important; }
  #app#app#app#app#app#app #dashboard .home-title > .home-eyebrow { display: none !important; }
  #app#app#app#app#app#app #dashboard .home-title p { font-size: 12px !important; margin: 0 !important; }
  #app#app#app#app#app#app #dashboard .home-tools { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
  #app#app#app#app#app#app #dashboard .home-period { flex: 1 1 100%; width: 100%; min-width: 0; }
  #app#app#app#app#app#app #dashboard .home-tools > .home-primary { flex: 1; }
  #app#app#app#app#app#app #dashboard .home-tools button { min-height: 48px !important; }
  #app#app#app#app#app#app #dashboard .home-metrics { gap: 12px 0 !important; padding: 12px 0 !important; }
  #app#app#app#app#app#app #dashboard .home-view-bar { padding: 8px 0 12px !important; }
  #app#app#app#app#app#app #dashboard .home-tabs button { min-height: 48px !important; }

  /* Editing gets the screen and a reachable action bar, not another global header. */
  html:root body.experience-editing main#app#app#app#app#app#app.app-shell:not(.hidden) { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  body.experience-editing #app#app#app#app#app#app > .app-header { display: none !important; }
  body.experience-editing #app#app#app#app#app#app :is(.rental-heading, .rental-unassigned) { display: none !important; }
  #app#app#app#app#app#app .experience-editor :is(.admin-room-edit-topbar, .admin-tenant-edit-topbar) { position: static !important; inset: auto !important; height: auto !important; max-height: none !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; padding: 0 0 10px !important; gap: 8px !important; }
  #app#app#app#app#app#app .experience-editor-back { width: 48px !important; height: 48px !important; padding: 12px !important; }
  #app#app#app#app#app#app .experience-editor-back > span { display: none; }
  #app#app#app#app#app#app .experience-editor :is(.admin-room-edit-topbar, .admin-tenant-edit-topbar) > button:last-child { grid-column: 2; justify-self: start; margin: 0 !important; min-height: 44px !important; }
  #app#app#app#app#app#app .experience-editor-tabs { margin-bottom: 14px !important; }
  #app#app#app#app#app#app .experience-editor-tabs button { min-height: 48px !important; }
  #app#app#app#app#app#app .experience-editor-save {
    position: fixed !important; left: 0; right: 0; bottom: var(--comfort-keyboard-bottom, 0px) !important;
    z-index: 4700; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
    background: var(--ex-surface) !important; align-items: center; flex-wrap: wrap !important;
  }
  #app#app#app#app#app#app .experience-editor-save button { min-height: 48px !important; }
  #app#app#app#app#app#app .experience-editor-save .experience-draft-status:empty { display: none; }
  #app#app#app#app#app#app .experience-editor-save .experience-draft-status:not(:empty) { flex: 0 0 100%; font-size: 12px; padding: 0; }
  body.experience-dialog-open #app#app#app#app#app#app .experience-editor-save { visibility: hidden; }
  #app#app#app#app#app#app .experience-editor :is(input, select, textarea) { scroll-margin: 72px 0 120px; }

  #app#app#app#app#app#app .experience-dialog {
    position: fixed !important; top: auto !important; bottom: var(--comfort-keyboard-bottom, 0px) !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important; max-height: calc(var(--comfort-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - 8px) !important;
    margin: 0 !important; padding: 16px 16px 0 !important; border-radius: 8px 8px 0 0 !important; overflow: auto !important;
    overscroll-behavior: contain; scroll-padding-bottom: 80px;
  }
  #app#app#app#app#app#app .experience-dialog form { gap: 12px !important; }
  #app#app#app#app#app#app .experience-dialog > header { margin-bottom: 14px !important; }
  #app#app#app#app#app#app .experience-dialog > header h2 { font-size: 20px !important; }
  #app#app#app#app#app#app .experience-dialog .experience-form-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app#app#app#app#app#app .experience-dialog .experience-form-pair:has([type=month]) { grid-template-columns: minmax(0, 1fr); }
  #app#app#app#app#app#app .experience-dialog footer { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ex-surface); border-top: 1px solid var(--ex-line); z-index: 1; }
  #app#app#app#app#app#app .experience-dialog footer button { min-height: 48px !important; padding: 10px 8px !important; }
  #app#app#app#app#app#app .experience-dialog :is(input, select, textarea) { min-width: 0; max-width: 100%; min-height: 48px !important; }
}
@media (max-width: 370px) {
  #app#app#app#app#app#app .experience-dialog .experience-form-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  #app#app#app#app#app#app #rentals > .page:not(.hidden) { animation: comfort-page-in 180ms ease-out; }
  #app#app#app#app#app#app .experience-dialog[open] { animation: comfort-sheet-in 200ms ease-out; }
  #app#app#app#app#app#app .rental-room-layout button { transition: background-color 160ms ease, color 160ms ease; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button { transition: color 180ms ease !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button::after { transition: opacity 180ms ease, transform 180ms ease !important; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  html:root body #app#app#app#app#app#app #admin-bottom-nav { padding-top: 4px !important; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button { display: flex !important; flex-direction: row !important; justify-content: center !important; gap: 6px !important; height: 48px !important; min-height: 48px !important; }
  html:root body #app#app#app#app#app#app #admin-bottom-nav button::after { width: 100% !important; height: 40px !important; inset: 4px auto auto 0 !important; border-radius: 8px !important; }
}
@keyframes comfort-page-in { from { opacity: .6; } to { opacity: 1; } }
@keyframes comfort-sheet-in { from { opacity: .4; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }