/* Braynix phone presentation, including Play Store WebViews without a ready
   native bridge. Signed-in phone screens only; tablets have their own layout layer. */
/* :where() keeps tablet exclusion specificity-neutral: phone rules retain
   their established cascade against the existing module stylesheets. */
@media (max-width: 768px), (max-width: 1280px) and (pointer: coarse) {
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active {
    --mobile-app-bg: #f4f5f9;
    --mobile-app-surface: #fff;
    --mobile-app-surface-soft: #f5f7fc;
    --mobile-app-line: #e7eaf0;
    --mobile-app-line-strong: #d7dce5;
    --mobile-app-muted: #657084;
    --mobile-app-ink: #202938;
    --mobile-app-accent: #287ad3;
    --mobile-app-blue-soft: #eef0fc;
    --mobile-app-rose-soft: #fff2f2;
    --mobile-app-shadow: none;
    color: var(--mobile-app-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode)[data-theme="dark"] body.bb-app-active {
    --mobile-app-bg: #10141b;
    --mobile-app-surface: #191f29;
    --mobile-app-surface-soft: #202835;
    --mobile-app-line: #2b3442;
    --mobile-app-line-strong: #3b4758;
    --mobile-app-muted: #a4afc0;
    --mobile-app-ink: #eef2f7;
    --mobile-app-accent: #79b6ff;
    --mobile-app-blue-soft: #1e2d43;
    --mobile-app-rose-soft: #35272f;
  }

  /* A quiet, single-row app bar. Existing menu, create and account actions. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .workspace {
    padding: 0 0 calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    background: var(--mobile-app-bg) !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section { padding: 16px 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-app-line) !important;
    border-radius: 0 !important;
    background: var(--mobile-app-surface) !important;
    box-shadow: none !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar::before { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar .eyebrow { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar h2 { color: var(--mobile-app-ink) !important; font-size: 19px !important; font-weight: 650 !important; letter-spacing: -.4px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar-actions { width: auto !important; min-width: 0 !important; gap: 4px !important; flex-wrap: nowrap !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar-control-hub,
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar-user-group { display: flex !important; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; gap: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.topbar-hub-divider, .topbar-status-group, .topbar-theme-picker) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(#sidebar-toggle, .topbar-account-btn, .topbar-quick-create-toggle) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
    padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: transparent !important; color: var(--mobile-app-ink) !important; box-shadow: none !important; backdrop-filter: none !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar-quick-create-toggle { background: var(--mobile-app-blue-soft) !important; color: var(--mobile-app-accent) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar-account-avatar { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--mobile-app-blue-soft) !important; color: var(--mobile-app-accent) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .trial-banner { margin: 10px 12px 0 !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 12px !important; box-shadow: none !important; }

  /* Full-width destinations, with no floating button covering the content. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav.mobile-bottom-nav {
    left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important;
    min-height: 68px !important; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important; border: 0 !important; border-top: 1px solid var(--mobile-app-line) !important;
    border-radius: 0 !important; background: var(--mobile-app-surface) !important; box-shadow: none !important; backdrop-filter: none !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-btn { height: 56px !important; min-height: 56px !important; padding: 6px 2px !important; gap: 4px !important; color: var(--mobile-app-muted) !important; background: transparent !important; border-radius: 12px !important; transform: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-btn.active { color: var(--mobile-app-accent) !important; background: var(--mobile-app-blue-soft) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-btn > span { font-size: 10px !important; font-weight: 600 !important; margin: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-primary-icon { position: static !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-primary-icon svg { stroke: currentColor !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-dot { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .sidebar:not(.open) { box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .sidebar { background: var(--mobile-app-surface) !important; color: var(--mobile-app-ink) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .sidebar :is(.nav-button, .nav-subgroup-toggle) { min-height: 46px !important; border-radius: 8px !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .sidebar .nav-button.active { background: var(--mobile-app-blue-soft) !important; color: var(--mobile-app-accent) !important; }

  /* Overview: compact balances, then the existing Quick Create shortcuts. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dashboard {
    --bb-dash-bg: var(--mobile-app-surface); --bb-dash-soft: var(--mobile-app-surface-soft);
    --bb-dash-line: var(--mobile-app-line); --bb-dash-ink: var(--mobile-app-ink);
    --bb-dash-muted: var(--mobile-app-muted); --bb-dash-blue: var(--mobile-app-accent);
    gap: 16px;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dashboard > * { order: 4; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-heading { order: 0; gap: 12px; padding: 0 2px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-heading h2 { font-size: 20px; font-weight: 650; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-heading p { font-size: 12px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-eyebrow { font-size: 9px; letter-spacing: 1px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-period { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balances { order: 1; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-card { border-radius: 12px; box-shadow: none; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance { background: var(--mobile-app-blue-soft); border: 0; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance--amber { background: var(--mobile-app-rose-soft); }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-card-head { padding: 14px; min-height: 54px; gap: 8px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-card-head h3 { font-size: 14px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-card-head { display: block; border: 0; padding-bottom: 0; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-card-head p { display: none; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-card-head > .bb-dash-link { min-height: 36px; font-size: 11px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-body { padding: 14px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-outstanding { align-items: flex-start; flex-direction: column; gap: 6px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-outstanding strong { font-size: clamp(16px, 4.4vw, 22px); letter-spacing: -.5px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-outstanding span { font-size: 10px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-document-count { background: transparent; border: 0; padding: 8px 0; min-height: 36px; color: var(--mobile-app-accent); }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-bar { margin: 8px 0 12px; height: 4px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-split { gap: 9px; grid-template-columns: 1fr; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-split > div + div { padding: 0; border: 0; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-split strong { font-size: 12px; margin-top: 2px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick { order: 2; display: block; padding: 16px 12px; border: 0; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick h3 { font-size: 14px; margin-bottom: 14px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick button { flex-direction: column; justify-content: flex-start; gap: 7px; border: 0; padding: 2px; font-size: 11px; min-height: 64px; background: none; text-align: center; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick button span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mobile-app-blue-soft); font-size: 24px; font-weight: 400; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-cashflow { order: 3; }

  /* Keep every selected column and existing sort/action control. Each record
     gets a phone-width card; column labels come from its own table headers. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register, .sr-register, .items-register) { border: 1px solid var(--mobile-app-line) !important; border-radius: 12px !important; background: var(--mobile-app-surface) !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; border-radius: 0 !important; background: var(--mobile-app-surface) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) table { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; background: transparent !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) colgroup { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) thead { display: block !important; position: static !important; overflow-x: auto !important; background: var(--mobile-app-surface-soft) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) thead tr { display: flex !important; width: max-content !important; padding: 0 !important; border: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) th:not(.is-hidden):not([hidden]) { display: flex !important; align-items: center !important; position: static !important; min-width: 44px !important; width: auto !important; min-height: 44px !important; padding: 8px 12px !important; border: 0 !important; font-size: 10px !important; background: transparent !important; box-shadow: none !important; white-space: nowrap !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) tbody { display: block !important; width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) tbody tr:not([hidden]):not([style*="display: none"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; position: relative !important; width: 100% !important; min-width: 0 !important; padding: 16px 48px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-app-line) !important; border-radius: 0 !important; background: var(--mobile-app-surface) !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:not(.is-hidden):not([hidden]):not([style*="display: none"]) { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 12px !important; color: var(--mobile-app-ink) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-mobile-label]::before { content: attr(data-mobile-label); display: block !important; margin-bottom: 3px; color: var(--mobile-app-muted); font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:is([data-column="customer"], [data-column="vendor"], [data-column="name"]) { grid-column: 1 / -1; order: -2; font-size: 15px !important; font-weight: 650 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:is([data-column="customer"], [data-column="vendor"], [data-column="name"])::before { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-column="selection"]:not(.is-hidden):not([hidden]) { position: absolute !important; left: 12px !important; top: 16px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-column="actions"]:not(.is-hidden):not([hidden]) { position: absolute !important; right: 5px !important; top: 6px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:is([data-column="selection"], [data-column="actions"])::before { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[colspan] { grid-column: 1 / -1; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) tbody :is(tr, td) { height: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) :is(.record-link, .qv-trigger, .bb-register-link) { max-width: 100% !important; color: var(--mobile-app-accent) !important; white-space: normal !important; overflow-wrap: anywhere !important; text-align: left !important; }

  /* Consistent, restrained forms and menus; all existing fields stay intact. */
  /* PO items are vertical cards on phones. A legacy pan-x rule on their
     wrapper swallowed vertical swipes, including swipes over quantity/rate. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .po-create-panel.open .po-table-shell {
    touch-action: manipulation !important;
    overscroll-behavior-y: auto !important;
  }
  /* Opaque pinned bars avoid repainting a blurred backdrop while editing and
     scrolling long forms. Keep their existing actions and positioning. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-title, .customer-form-title, .item-modal-header, .bill-form-header, .bill-form-title-row, .pmt-form-header, .exp-form-title, .coa-form-title, .pmade-form-title, .po-form-title, .rb-form-title, .re-form-title, .quote-form-actions, .bill-form-actions, .exp-form-actions, .customer-form-actions, .item-modal-actions, .rb-form-actions, .pmt-form-actions, .pmade-form-actions, .coa-form-actions) {
    background: var(--mobile-app-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-toolbar { flex-direction: row !important; flex-wrap: nowrap !important; min-height: 64px !important; padding: 10px 12px !important; gap: 8px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-title-wrap { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell select.bb-register-title { width: 100% !important; padding-left: 0 !important; padding-right: 22px !important; font-size: 14px !important; border: 0 !important; background-color: transparent !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-actions { width: auto !important; flex: 0 0 auto !important; gap: 6px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-actions > .primary-button { font-size: 11px !important; padding: 0 10px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-filters { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; background: var(--mobile-app-surface) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-filters > label:not(.bb-register-search) { flex: 1 1 140px !important; display: flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-search { flex: 1 1 170px !important; width: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-filters > .ghost-button { flex: 0 1 auto !important; width: auto !important; font-size: 11px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section .panel { border-radius: 12px !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section .primary-button { min-height: 44px !important; border-radius: 8px !important; background: #287ad3 !important; color: #fff !important; box-shadow: none !important; font-weight: 600 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section .ghost-button { min-height: 44px !important; border-radius: 8px !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { min-height: 46px !important; font-size: 16px !important; border-radius: 8px !important; background: var(--mobile-app-surface) !important; color: var(--mobile-app-ink) !important; border-color: var(--mobile-app-line-strong) !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell input[type="search"] { padding-left: 38px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.quote-form-title, .customer-form-title, .item-modal-header, .bill-form-title-row) { background: var(--mobile-app-surface) !important; box-shadow: none !important; backdrop-filter: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.quote-band, .quote-details-grid, .po-details-grid, .po-bottom-grid, .quote-terms-grid, .po-item-table, .bill-form-section) { border-radius: 10px !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.quote-form-actions, .bill-form-actions, .exp-form-actions, .customer-form-actions, .item-modal-actions, .rb-form-actions) { background: var(--mobile-app-surface) !important; border-color: var(--mobile-app-line) !important; box-shadow: none !important; backdrop-filter: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar-quick-create-menu { position: fixed !important; inset: calc(68px + env(safe-area-inset-top, 0px)) 10px auto !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - 160px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; border: 1px solid var(--mobile-app-line) !important; border-radius: 14px !important; background: var(--mobile-app-surface) !important; color: var(--mobile-app-ink) !important; box-shadow: 0 12px 40px #0002 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .quick-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px !important; padding: 16px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .quick-create-group button { min-height: 44px !important; color: var(--mobile-app-ink) !important; }

  /* Phone typography must not inherit the desktop's display/monospace fonts. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell,
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(button, input, select, textarea, label, th, td, h1, h2, h3, h4, p, span, strong, a, summary, small, div) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(input, select, textarea, td) { font-variant-numeric: tabular-nums; }

  /* Five familiar destinations. POS and Reports remain in the More drawer. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav :is(.mob-nav-btn--primary, [data-mob-section="reports"], [hidden], .mob-nav-hidden, .nav-item--gated-hidden) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav {
    padding-inline: 10px !important;
    gap: 2px !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-btn { border-radius: 24px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #mobile-bottom-nav .mob-nav-btn.active { background: var(--mobile-app-blue-soft) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar { min-height: calc(58px + env(safe-area-inset-top, 0px)) !important; padding-block: calc(6px + env(safe-area-inset-top, 0px)) 6px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .topbar h2 { font-weight: 650 !important; font-size: 19px !important; }

  /* Compact overview without changing a single balance or dashboard action. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dashboard { gap: 12px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-heading { gap: 10px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-heading h2 { font-size: 18px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-eyebrow { display: none; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-period { min-height: 44px; padding: 6px 10px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-card-head { padding: 12px 12px 0; min-height: 48px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-card-head h3 { font-size: 12px; font-weight: 600; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-card-head > .bb-dash-link { min-height: 32px; padding: 0; font-size: 11px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance .bb-dash-body { padding: 6px 12px 12px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-outstanding { gap: 0; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-outstanding strong { font-size: clamp(16px, 4.5vw, 22px); line-height: 1.35; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-outstanding > div > span { font-size: 10px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-document-count { min-height: 32px; padding: 3px 0; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-bar { height: 3px; margin: 5px 0 9px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-balance-split :is(span, strong) { font-size: 10px; overflow-wrap: anywhere; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick { padding: 14px 12px 10px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick > div { gap: 8px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick button { min-height: 62px; font-weight: 500; gap: 5px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick button span { width: 32px; height: 32px; border-radius: 8px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #dashboard .bb-dash-quick button svg { width: 20px; height: 20px; }

  /* Lists put the party, amount and document reference first. Keep every
     selected column, the real sort headers, selection and action menus. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register, .sr-register, .items-register) { border-radius: 10px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-toolbar { min-height: 58px !important; padding: 8px 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-search input { font-weight: 400 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) th:not(.is-hidden):not([hidden]) { font-weight: 500 !important; font-size: 11px !important; text-transform: none !important; color: var(--mobile-app-muted) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) tbody tr:not([hidden]):not([style*="display: none"]) { gap: 9px 12px !important; padding: 14px 38px 14px 40px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-mobile-label]::before { font-size: 10px !important; line-height: 1.3; margin-bottom: 2px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:is([data-column="customer"], [data-column="vendor"]) { grid-column: 1 !important; order: -5 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-column="total"] { grid-column: 2 !important; order: -5 !important; text-align: right !important; font-weight: 650 !important; font-size: 14px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-column="number"] { grid-column: 1 !important; order: -4 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-column="status"] { grid-column: 2 !important; order: -4 !important; text-align: right !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:is([data-column="number"], [data-column="total"], [data-column="status"])::before { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) :is(.record-link, .qv-trigger, .bb-register-link, .item-name-button) { font-weight: 600 !important; font-size: inherit !important; line-height: 1.4 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:is([data-column="customer"], [data-column="vendor"], [data-column="name"]) :is(button, a) { color: var(--mobile-app-ink) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bb-register-status { padding: 3px 6px !important; border-radius: 5px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .2px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td:not(.is-hidden):not([hidden]):is([data-column="customer"], [data-column="vendor"], [data-column="name"]) { font-size: 15px !important; font-weight: 600 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) td[data-column="total"]:not(.is-hidden):not([hidden]) { font-size: 14px !important; font-weight: 650 !important; text-align: right !important; }

  /* Native-feeling entry sheets: quiet section groups, clear labels, one
     scrolling surface and the existing pinned Save/Cancel controls. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] { border-radius: 0 !important; background: var(--mobile-app-bg) !important; color: var(--mobile-app-ink) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-title, .customer-form-title, .item-modal-header, .bill-form-title-row, .po-form-title, .pmt-form-header, .pmade-form-title, .exp-form-title, .re-form-title) { min-height: 58px !important; padding: 8px 14px !important; border-bottom: 1px solid var(--mobile-app-line) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(h2, h3) { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.3px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-title, .customer-form-title, .item-modal-header) :is(.inv-title-icon, .po-title-icon) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-band, .quote-details-grid, .po-detail-fields, .bill-form-section, .customer-form-section) { padding: 14px !important; margin-block: 0 14px !important; border: 1px solid var(--mobile-app-line) !important; border-radius: 10px !important; background: var(--mobile-app-surface) !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(label, .field-label, .quote-form-line > label) { color: var(--mobile-app-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { font-weight: 400 !important; border: 1px solid var(--mobile-app-line-strong) !important; border-radius: 7px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(input, select, textarea):focus { outline: 2px solid var(--mobile-app-accent) !important; outline-offset: 1px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.po-line-row, .quote-item-table tbody tr, .bill-item-table tbody tr) { background: var(--mobile-app-surface) !important; border-color: var(--mobile-app-line) !important; box-shadow: none !important; border-radius: 10px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.po-amount-cell, .bill-totals-box, .quote-totals) { background: var(--mobile-app-surface-soft) !important; border-color: var(--mobile-app-line) !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .po-item-table td::before { font-size: 10px !important; color: var(--mobile-app-muted) !important; font-family: inherit !important; font-weight: 500 !important; }

  /* Focus a document on mobile, not its neighbouring desktop record list.
     The existing All Invoices/Close controls still return to that list. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-record-shell { display: block !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-record-list { width: 100% !important; border: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-record-list-body { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-record-titlebar { padding: 12px !important; background: var(--mobile-app-blue-soft) !important; border: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-record-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; background: var(--mobile-app-blue-soft) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-record-toolbar > button { flex: 1 1 110px !important; min-height: 44px !important; border-radius: 8px !important; white-space: normal !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-next-panel { display: grid !important; gap: 0 !important; margin: 12px !important; border: 1px solid var(--mobile-app-line) !important; border-radius: 10px !important; background: var(--mobile-app-surface) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-next-main { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px !important; padding: 12px !important; text-align: left !important; font-size: 13px !important; line-height: 1.5; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-next-mark { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-next-secondary { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px !important; padding: 10px 12px !important; text-align: left !important; font-size: 12px !important; line-height: 1.5; background: var(--mobile-app-surface-soft) !important; color: var(--mobile-app-muted) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-next-secondary > svg { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .invoice-next-secondary > button { min-height: 44px !important; }
}

/* Complete phone workspace: secondary modules use the same entry and list
   language as sales. Presentation only, scoped away from desktop and PDFs. */
@media (max-width: 768px), (max-width: 1280px) and (pointer: coarse) {
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section {
    --mobile-form-footer: 112px;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.section-header, .bk-toolbar, .ia-header, .pr-header) {
    text-align: left !important; box-shadow: none !important; border-radius: 10px !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section :is(h2, h3, h4) {
    letter-spacing: -.25px !important; line-height: 1.35 !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section :is(.section-header, .bk-toolbar, .ia-header) :is(h2, h3) { font-size: 19px !important; font-weight: 650 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .page-section :is(.module-actions, .toolbar-actions) { gap: 8px !important; flex-wrap: wrap !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.empty-state, .ia-empty) { min-width: 0 !important; width: 100% !important; padding: 32px 16px !important; overflow-wrap: anywhere; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.empty-state, .ia-empty) :is(p, button) { max-width: 100% !important; white-space: normal !important; }

  /* All record editors are dedicated screens; no navigation over the form. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] {
    position: fixed !important; inset: 0 !important; z-index: 2100 !important;
    width: 100% !important; max-width: none !important; height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; padding: env(safe-area-inset-top, 0px) 16px calc(var(--mobile-form-footer) + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important; border-radius: 0 !important; background: var(--mobile-app-bg) !important;
    overflow: auto !important; overscroll-behavior: contain; touch-action: pan-y;
    scroll-padding-block: 76px calc(var(--mobile-form-footer) + 16px); box-shadow: none !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] > :is(.section-header, .ia-header, .je-form-topbar, [data-mobile-editor-header]) {
    position: sticky !important; top: 0 !important; z-index: 6 !important;
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important; min-height: 64px !important; margin: 0 -16px 16px !important; padding: 8px 16px !important;
    border: 0 !important; border-bottom: 1px solid var(--mobile-app-line) !important; border-radius: 0 !important;
    background: var(--mobile-app-surface) !important; box-shadow: none !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] > :is(.section-header, .ia-header, .je-form-topbar, [data-mobile-editor-header]) :is(.eyebrow, .ia-eyebrow) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] > :is(.section-header, .ia-header, .je-form-topbar, [data-mobile-editor-header]) :is(h2, h3) { margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] > :is(.section-header, .ia-header, .je-form-topbar, [data-mobile-editor-header]) button { width: auto !important; flex: 0 0 auto !important; min-height: 44px !important; margin: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] [data-mobile-editor-actions] {
    position: fixed !important; inset: auto 0 0 !important; z-index: 8 !important;
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    margin: 0 !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--mobile-app-surface) !important; border: 0 !important; border-top: 1px solid var(--mobile-app-line) !important;
    box-shadow: none !important; border-radius: 0 !important; max-height: 35dvh; overflow-y: auto;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor-actions] > button { flex: 1 1 110px !important; min-height: 46px !important; margin: 0 !important; white-space: normal !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active:has([data-mobile-editor="sheet"]) :is(.topbar, #mobile-bottom-nav, #chat-widget-toggle) { visibility: hidden !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(form, .fa-form-grid, .pr-form-grid, .je-form-card, .ia-form-content) { max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(.fa-form-grid, .pr-form-grid, .je-header-grid, .proj-form-grid) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(.fa-form-grid, .pr-form-grid, .je-header-grid, .proj-form-grid) > * { grid-column: 1 / -1 !important; min-width: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(.fa-form, .je-form-card, .pr-form-grid, .ia-form-content) { background: var(--mobile-app-surface) !important; padding: 16px !important; border: 1px solid var(--mobile-app-line) !important; border-radius: 10px !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(form, [data-mobile-editor]) :is(label, .je-label, .pos-field-label) { font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--mobile-app-muted) !important; line-height: 1.45 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(form, [data-mobile-editor]) :is(input, select, textarea) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(form, [data-mobile-editor]) input:is([type="checkbox"], [type="radio"]) { width: 20px !important; height: 20px !important; min-height: 20px !important; flex: 0 0 20px !important; accent-color: #287ad3; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(form, [data-mobile-editor]) label:has(input:is([type="checkbox"], [type="radio"])) { min-height: 44px !important; align-items: center !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.cn-details-grid, .rb-schedule-grid, .re-schedule-grid, .quote-notes-grid, .tr-form-grid) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.cn-details-grid, .rb-schedule-grid, .re-schedule-grid, .quote-notes-grid, .tr-form-grid) > * { min-width: 0 !important; grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.cn-details-grid, .recurring-bill-zoho-form) .quote-form-line { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.cn-details-grid, .recurring-bill-zoho-form) .quote-form-line > * { min-width: 0 !important; width: 100% !important; max-width: 100% !important; grid-column: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .cn-description-row { grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.cn-details-grid, .quote-notes-grid) { padding: 14px !important; background: var(--mobile-app-surface) !important; border-radius: 10px !important; border: 1px solid var(--mobile-app-line) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.exp-amount-row, .exp-amount-input, .bill-tax-controls, .rb-date-row) { min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; }

  /* Repeatable rows become labelled line cards, not sideways mini-spreadsheets.
     IDs, names, validation, totals and event targets are deliberately unchanged. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; border: 0 !important; table-layout: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] :is(thead, colgroup) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] :is(tbody, tfoot) { display: block !important; width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] tbody > tr:not([hidden]):not(.is-hidden):not([style*="display: none"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 14px !important; margin: 0 0 12px !important; border: 1px solid var(--mobile-app-line) !important; border-radius: 10px !important; background: var(--mobile-app-surface) !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] tbody td { height: auto !important; min-height: 0 !important; max-height: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] td:not([hidden]):not(.is-hidden):not([style*="display: none"]) { display: block !important; position: static !important; float: none !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; background: transparent !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] tbody td:first-child,
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] tbody td:has(select, textarea) { grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] td::before { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] td[data-mobile-field-label]::before { content: attr(data-mobile-field-label) !important; display: block !important; position: static !important; width: auto !important; margin: 0 0 6px !important; font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-transform: none !important; color: var(--mobile-app-muted) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] td :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100% !important; min-width: 0 !important; font-size: 16px !important; min-height: 46px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] td :is(button, .je-del-btn) { min-height: 44px !important; min-width: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-entry-table] tfoot > tr { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; padding: 12px !important; justify-content: space-between !important; }

  /* Registers without the sales register component (inventory, payroll, etc.). */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] { display: block !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] colgroup { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] thead { display: block !important; overflow-x: auto !important; position: static !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] thead tr { display: flex !important; width: max-content !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] th { width: auto !important; min-width: 44px !important; padding: 8px 12px !important; min-height: 44px !important; display: flex !important; align-items: center !important; text-transform: none !important; font-size: 11px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] th button { min-height: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] tbody { display: block !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] tbody > tr:not([hidden]):not(.is-hidden):not([style*="display: none"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 16px !important; border-bottom: 1px solid var(--mobile-app-line) !important; width: 100% !important; box-sizing: border-box !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] td:not([hidden]):not(.is-hidden) { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; padding: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; text-align: left !important; border: 0 !important; font-size: 14px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] td[data-mobile-record-label]::before { content: attr(data-mobile-record-label); display: block; color: var(--mobile-app-muted); font-size: 11px; margin-bottom: 4px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] td[data-mobile-full-row] { grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell table[data-mobile-record-table] td :is(button, a) { min-height: 44px !important; }

  /* Chart of Accounts has nine columns and its own old three-column card
     positions. Do not mix those positions with the generic record grid:
     implicit columns squeeze names, and split the digits in balances. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-table-wrap { padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tbody { display: grid !important; gap: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tbody > tr[data-coa-row]:not([style*="display: none"]):not([hidden]) {
    display: grid !important; grid-template-columns: 24px repeat(2, minmax(0, 1fr)) 44px !important;
    gap: 12px 8px !important; padding: 14px !important; margin: 0 !important;
    border: 1px solid var(--mobile-app-line) !important; border-radius: 12px !important;
    background: var(--mobile-app-surface) !important; color: var(--mobile-app-ink) !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > td {
    grid-column: 1 / -1 !important; grid-row: auto !important; align-self: start !important;
    min-width: 0 !important; max-width: 100% !important; height: auto !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
    background: transparent !important; color: var(--mobile-app-ink) !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > td::before {
    content: attr(data-label) !important; position: static !important; display: block !important;
    font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--mobile-app-muted) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 5px !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > .coa-check-cell { grid-column: 1 !important; grid-row: 1 !important; min-height: 44px !important; display: flex !important; align-items: center !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > td[data-label="Account name"] { grid-column: 2 / 4 !important; grid-row: 1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > .coa-actions-cell { grid-column: 4 !important; grid-row: 1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > :is(.coa-check-cell, .coa-actions-cell, [data-label="Account name"])::before { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > .coa-code-cell { grid-column: 1 / 3 !important; grid-row: 2 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > .coa-status-cell { grid-column: 3 / 5 !important; grid-row: 2 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table .coa-parent-name:has(.coa-amount-dash) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts :is(.coa-account-cell, .coa-account-cell-text) { display: block !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-account-name {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 44px !important;
    white-space: normal !important; overflow-wrap: anywhere !important; text-overflow: clip !important; overflow: visible !important;
    font-size: 15px !important; line-height: 1.4 !important; text-align: left !important; color: var(--mobile-app-accent) !important;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-account-sub { display: block !important; white-space: normal !important; overflow-wrap: anywhere !important; color: var(--mobile-app-muted) !important; line-height: 1.45 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-account-type { display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-account-type > * { white-space: normal !important; font-size: 13px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-register-table tr[data-coa-row] > .amount {
    display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: baseline !important; gap: 6px 12px !important;
    padding-top: 10px !important; border-top: 1px solid var(--mobile-app-line) !important;
    white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; font-variant-numeric: tabular-nums;
  }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts [data-coa-balance] { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; font-size: 15px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-rollup-note { flex-basis: 100%; margin: 0 !important; white-space: normal !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #accounts .coa-actions-cell summary { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.ia-register-scroll, .ia-table-scroll:has([data-mobile-entry-table])) { min-width: 0 !important; overflow: visible !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .ia-register-header { flex-direction: row !important; gap: 8px !important; padding: 16px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .ia-register-header h2 { font-size: 16px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .ia-register-actions { flex: 0 0 auto; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .ia-form-footer > span { flex-basis: 100%; font-size: 11px !important; }

  /* Useful balances stay above the fold; compact horizontally scrollable
     reconciliation metrics replace five oversized stacked desktop tiles. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-reconcile-strip { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 10px !important; padding: 0 0 8px !important; border: 0 !important; background: none !important; scroll-snap-type: x proximity; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-reconcile-strip > * { flex: 0 0 150px !important; width: 150px !important; margin: 0 !important; padding: 12px !important; box-shadow: none !important; border: 1px solid var(--mobile-app-line) !important; border-radius: 10px !important; background: var(--mobile-app-surface) !important; scroll-snap-align: start; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-account-summary-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-account-summary-row > div { margin: 0 !important; min-width: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bk-acct-balance, .bk-active-count) { overflow-wrap: anywhere !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-acct-balance { font-size: 18px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-toolbar-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-toolbar-actions > button { width: auto !important; min-width: 0 !important; padding: 8px !important; white-space: normal !important; }

  /* Shared secondary dialogs, including those mounted outside #app-shell. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active :is(.modal-card, .addr-modal-card, .qvm-card, .qim-card, .ia-bulk-dialog) { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 32px) !important; margin: auto !important; border-radius: 14px !important; overflow: auto !important; background: var(--mobile-app-surface) !important; color: var(--mobile-app-ink) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active :is(.modal-card, .addr-modal-card, .qvm-card, .qim-card, .ia-bulk-dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; min-height: 46px !important; min-width: 0 !important; max-width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active :is(.modal-card, .addr-modal-card, .qvm-card, .qim-card, .ia-bulk-dialog) button { min-height: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .recurring-bill-zoho-form .rb-field-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 7px !important; min-width: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .recurring-bill-zoho-form .rb-field-row > :is(label, input, select, textarea) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 1 auto !important; margin: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bill-table-controls { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bill-ctrl-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-width: 0 !important; width: 100% !important; gap: 6px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bill-ctrl-item > select { width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-account-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-account-card { min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell :is(.bk-overview, .bk-forms-section, .bill-details-grid) { min-width: 0 !important; grid-template-columns: minmax(0, 1fr) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bill-form-line { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 7px !important; min-width: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bill-form-line > :is(input, select, textarea, label) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #salesreceipts .sr-register-table :is(table, thead, tbody) { display: block !important; width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #salesreceipts .sr-register-table thead tr { display: flex !important; width: max-content !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #salesreceipts .sr-register-table th:not([hidden]):not(.is-hidden) { display: flex !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #salesreceipts .sr-register-table tbody tr { display: grid !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #salesreceipts .sr-register-table td:not([hidden]):not(.is-hidden) { display: block !important; }

  /* Settings are an editing destination, not a desktop promotional header. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings :is(.stg-sidebar-header, .stg-content-icon, .stg-content-eyebrow, .stg-content-badge) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-content-header { display: block !important; padding: 16px !important; min-height: 0 !important; background: var(--mobile-app-surface) !important; border-radius: 10px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-content-header::before,
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-content-header::after { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-content-title { margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-content-desc { margin: 6px 0 0 !important; font-size: 13px !important; line-height: 1.5 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings :is(.stg-org-brand-card, .stg-org-card-header, .stg-org-card-body, .stg-card-body) { padding: 14px !important; box-shadow: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-org-section-heading { margin-bottom: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #settings .stg-org-input-wrap:has(> svg) > input { padding-left: 40px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .addr-inline-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding-top: 10px !important; margin-top: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .addr-inline-btn { min-width: 0 !important; min-height: 44px !important; padding: 8px !important; justify-content: flex-start !important; white-space: normal !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .addr-inline-label { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--mobile-app-accent) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .addr-inline-previews:not(:has(.addr-inline-preview-text:not(:empty))) { display: none !important; }

  /* Finance workspaces retain every action and financial figure while making
     review controls and editable payroll lines comfortable on a phone. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal { padding: 0 !important; align-items: stretch !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-dialog { width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-header { flex-shrink: 0 !important; padding: max(12px, env(safe-area-inset-top)) 14px 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-icon { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-period { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal :is(.pr-run-period-label, .pr-run-period .pr-run-subtitle) { grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal :is(input, select) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 46px !important; font-size: 16px !important; box-sizing: border-box !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal button { min-height: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-close { min-width: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-body { flex: 1 1 auto !important; min-height: 0 !important; padding: 14px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-summary { display: flex !important; overflow-x: auto !important; gap: 8px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-kpi { flex: 0 0 146px !important; min-height: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal :is(.pr-run-table-scroll, .pr-run-table, .pr-run-table tbody, .pr-run-table tfoot) { display: block !important; min-width: 0 !important; width: 100% !important; overflow: visible !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-table thead { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-table tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 14px !important; border-bottom: 1px solid var(--mobile-app-line) !important; height: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-table td { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; background: transparent !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-table td:first-child { grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-mobile-label,
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal :is(.pr-run-gross, .pr-run-net, .pr-run-table tfoot td:not(:first-child):not(:empty))::before { display: block !important; margin: 0 0 7px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--mobile-app-muted) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal :is(.pr-run-gross, .pr-run-net, .pr-run-table tfoot td:not(:first-child):not(:empty))::before { content: attr(data-mobile-field-label); }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-table tfoot td:empty { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-ov-auto { width: 100% !important; font-size: 12px !important; flex-wrap: wrap !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-ov-auto span { font-size: 10px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-footer { flex-shrink: 0 !important; gap: 10px !important; padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #payroll-run-modal .pr-run-actions { gap: 8px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #report-print-preferences-overlay :is(input:not([type="checkbox"]), select, textarea) { font-size: 16px !important; min-height: 46px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #report-print-preferences-overlay button { min-height: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-action-bar { padding: 14px !important; gap: 12px !important; background: var(--mobile-app-surface) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-actions > * { min-width: 0 !important; width: 100% !important; grid-column: auto !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-actions > .report-view-toggle { grid-column: 1 / -1 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-actions button { min-width: 0 !important; min-height: 44px !important; padding: 6px !important; font-size: 12px !important; white-space: normal !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-filter-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 14px !important; gap: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-filter-bar > label { grid-column: auto !important; min-width: 0 !important; width: 100% !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-filter-bar :is(input, select, label > button) { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #reports .report-filter-bar > :is(.report-filter-intro, .primary-button) { grid-column: 1 / -1 !important; }

  /* Banking's existing side panel lives inside its section. Give it its own
     mobile screen so the app bar cannot cover its Close/Save controls. */
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active:has(#bk-add-txn-modal[style*="flex"]) :is(.topbar, #mobile-bottom-nav, #chat-widget-toggle) { visibility: hidden !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-modal { inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; z-index: 2100 !important; padding: 0 !important; margin: 0 !important; animation: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-txn-panel-scroll { width: 100% !important; min-width: 0 !important; border: 0 !important; border-radius: 0 !important; padding: env(safe-area-inset-top, 0px) 0 0 !important; background: var(--mobile-app-surface) !important; scroll-padding-block: 90px 100px; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-txn-panel-scroll .modal-header { padding: 12px 16px !important; gap: 12px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell .bk-txn-panel-scroll .modal-header button { min-width: 44px !important; min-height: 44px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form { padding: 16px 16px calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .form-row-2col { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .form-row-2col[style*="display: none"] { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form :is([style*="display: none"], [style*="display:none"]) { display: none !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .money-input { display: flex !important; flex-direction: row !important; min-width: 0 !important; gap: 8px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .money-input > select { flex: 0 0 88px !important; width: 88px !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .money-input > input { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .modal-footer { position: fixed !important; inset: auto 0 0 !important; z-index: 4 !important; display: flex !important; gap: 10px !important; margin: 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid var(--mobile-app-line) !important; background: var(--mobile-app-surface) !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .modal-footer { flex-direction: row !important; }
  html:where(:not(.tablet-app-mode)):is(.native-app-mode, .pwa-mode, .mobile-app-mode) body.bb-app-active #app-shell #bk-add-txn-form .modal-footer > button { min-height: 46px !important; flex: 1 1 0 !important; width: auto !important; }
}