/**
 * Hydra mobile — Phase Final Polish (≤900px, CSS only).
 * Load last among admin mobile route sheets. Desktop ≥901px unchanged.
 * Target viewport: 430×932 (iPhone 14 Pro Max class).
 */

@media (max-width: 900px) {
  /* ═══════════════════════════════════════
     GLOBAL TOKENS & SHELL
     ═══════════════════════════════════════ */
  body.use-new-ui {
    --hydra-mobile-page-x: clamp(16px, 4.2vw, 20px);
    --hydra-mobile-card-gap: 10px;
    --hydra-mobile-section-gap: 10px;
    --hydra-mobile-top-gap: 16px;
    --hydra-mobile-below-header: 16px;
    --hydra-mobile-filter-gap: 12px;
    --mobile-topbar-h: 44px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-topbar-breath: var(--mobile-safe-top);
    --mobile-topbar-stack-h: calc(var(--mobile-topbar-h) + var(--mobile-topbar-breath));
    --mobile-dash-below-header: var(--hydra-mobile-top-gap);
    --mo-pad-x: var(--hydra-mobile-page-x);
    --hydra-bottom-nav-row-h: 50px;
    --hydra-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
    --hydra-bottom-nav-total-h: calc(var(--hydra-bottom-nav-row-h) + var(--hydra-nav-safe-bottom));
    --hydra-bottom-nav-h: var(--hydra-bottom-nav-total-h);
    --bottom-nav-height: var(--hydra-bottom-nav-total-h);
    --mobile-bottom-nav-h: var(--hydra-bottom-nav-total-h);
    --hydra-mo-card-gap: var(--hydra-mobile-card-gap);
    --hydra-mo-card-radius: 24px;
    --hydra-mo-scroll-bottom-pad: calc(var(--hydra-bottom-nav-total-h) + 12px);
    --hydra-mo-scroll-bottom-pad-fab: calc(var(--hydra-bottom-nav-total-h) + 64px);
  }

  body.use-new-ui.is-pwa-standalone {
    --mobile-topbar-h: 44px;
  }

  html,
  body.use-new-ui {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.use-new-ui #app,
  body.use-new-ui .app.app-layout,
  body.use-new-ui .mobile-app-shell,
  body.use-new-ui .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Topbar: safe-area on header only — inner row height is --mobile-topbar-h */
  body.use-new-ui header.topbar,
  body.use-new-ui .topbar {
    padding-top: var(--mobile-topbar-breath) !important;
    min-height: var(--mobile-topbar-stack-h) !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .topbar-inner,
  body.use-new-ui .topbar-inner--mobile-shell {
    min-height: var(--mobile-topbar-h) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui #contentScroll.content-scroll,
  body.use-new-ui .content-scroll {
    padding-top: calc(var(--mobile-topbar-stack-h) + var(--hydra-mobile-top-gap, 6px)) !important;
    padding-left: max(var(--hydra-mobile-page-x), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--hydra-mobile-page-x), env(safe-area-inset-right, 0px)) !important;
    padding-bottom: var(--hydra-mo-scroll-bottom-pad) !important;
    box-sizing: border-box;
  }

  /* —— Gutter sync: một lớp padding trên scroll (chuẩn Dashboard) —— */
  body.use-new-ui.route-dashboard #contentScroll.content-scroll,
  body.use-new-ui.route-dashboard .content-scroll,
  body.use-new-ui.route-orders #contentScroll.content-scroll,
  body.use-new-ui.route-orders .content-scroll,
  body.use-new-ui.route-inventory #contentScroll.content-scroll,
  body.use-new-ui.route-inventory .content-scroll,
  body.use-new-ui.route-cashflow #contentScroll.content-scroll,
  body.use-new-ui.route-cashflow .content-scroll,
  body.use-new-ui.route-storefront-inquiries #contentScroll.content-scroll,
  body.use-new-ui.route-storefront-inquiries .content-scroll,
  body.use-new-ui.route-customers #contentScroll.content-scroll,
  body.use-new-ui.route-customers .content-scroll {
    padding-top: calc(var(--mobile-topbar-stack-h) + var(--hydra-mobile-top-gap, 6px)) !important;
    padding-left: max(var(--hydra-mobile-page-x), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--hydra-mobile-page-x), env(safe-area-inset-right, 0px)) !important;
  }

  body.use-new-ui.route-dashboard .app-content-shell,
  body.use-new-ui.route-dashboard .page-shell.app-content-shell,
  body.use-new-ui.route-dashboard .page-content,
  body.use-new-ui.route-dashboard .route-page.dashboard-layout,
  body.use-new-ui.route-dashboard .dashboard-layout .content-container,
  body.use-new-ui.route-dashboard #appContent,
  body.use-new-ui.route-dashboard .mobile-dashboard,
  body.use-new-ui.route-dashboard .mobile-dashboard--native,
  body.use-new-ui.route-orders .route-page.orders-page,
  body.use-new-ui.route-orders .orders-desk-top,
  body.use-new-ui.route-orders .orders-desk-chips-host,
  body.use-new-ui.route-orders #hydraOrdersMobileWrap,
  body.use-new-ui.route-orders .orders-mobile-wrap,
  body.use-new-ui.route-orders .orders-pager-row,
  body.use-new-ui.route-inventory .inventory-page,
  body.use-new-ui.route-inventory .inventory-module--mo-owner,
  body.use-new-ui.route-inventory .inventory-module--mo-owner #inventoryTabBody,
  body.use-new-ui.route-inventory .inv-mo-overview,
  body.use-new-ui.route-cashflow .cashflow-mobile-page,
  body.use-new-ui.route-cashflow .cashflow-mobile-page--classic.expenses-page,
  body.use-new-ui.route-cashflow .cashflow-mobile-page .finance-shell,
  body.use-new-ui.route-cashflow .cashflow-period-bar,
  body.use-new-ui.route-cashflow #hydraCashflowPeriodFilter,
  body.use-new-ui.route-storefront-inquiries .route-storefront-inquiries,
  body.use-new-ui.route-storefront-inquiries .sf-inq-page,
  body.use-new-ui.route-storefront-inquiries .sf-inq-mo-filter-card,
  body.use-new-ui.route-storefront-inquiries .sf-inq-mo-kpi-row,
  body.use-new-ui.route-storefront-inquiries .sf-inq-mobile-list,
  body.use-new-ui.route-storefront-inquiries .sf-inq-mo-empty-card,
  body.use-new-ui.route-storefront-inquiries .sf-inq-mo-pager-card,
  body.use-new-ui.route-storefront-inquiries .sf-inq-bulk-bar-host.is-visible,
  body.use-new-ui.route-storefront-inquiries .sf-inq-filter-chips--mobile,
  body.use-new-ui.route-customers .customers-page .customers-layout--mo {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
  }

  body.use-new-ui.route-dashboard .mobile-dashboard,
  body.use-new-ui.route-dashboard .mobile-dashboard--native {
    gap: var(--hydra-mobile-section-gap) !important;
  }

  body.use-new-ui.route-orders .route-page.orders-page,
  body.use-new-ui.route-inventory .inventory-module--mo-owner,
  body.use-new-ui.route-inventory .inv-mo-overview,
  body.use-new-ui.route-cashflow .cashflow-mobile-page--classic.expenses-page,
  body.use-new-ui.route-storefront-inquiries .route-storefront-inquiries,
  body.use-new-ui.route-storefront-inquiries .sf-inq-page,
  body.use-new-ui.route-customers .customers-page .customers-layout--mo {
    gap: var(--hydra-mobile-section-gap) !important;
  }

  body.use-new-ui .page-content,
  body.use-new-ui .mobile-page-content,
  body.use-new-ui .content-container,
  body.use-new-ui #appContent {
    padding-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  body.use-new-ui[data-owner-fab-route] #contentScroll.content-scroll,
  body.use-new-ui[data-owner-fab-route] .content-scroll {
    padding-bottom: var(--mobile-scroll-bottom-clearance-fab, var(--hydra-mo-scroll-bottom-pad-fab)) !important;
  }

  /* Route-specific scroll pads win when more specific — reinforce defaults */
  body.use-new-ui.route-storefront-inquiries #contentScroll.content-scroll,
  body.use-new-ui.route-storefront-inquiries .content-scroll,
  body.use-new-ui.route-customers #contentScroll.content-scroll,
  body.use-new-ui.route-customers .content-scroll,
  body.use-new-ui.route-cashflow #contentScroll.content-scroll,
  body.use-new-ui.route-cashflow .content-scroll {
    padding-bottom: var(--mobile-scroll-bottom-clearance, var(--hydra-mo-scroll-bottom-pad)) !important;
  }

  body.use-new-ui.route-orders[data-owner-fab-route] #contentScroll.content-scroll,
  body.use-new-ui.route-orders[data-owner-fab-route] .content-scroll,
  body.use-new-ui.route-inventory[data-owner-fab-route] #contentScroll.content-scroll,
  body.use-new-ui.route-inventory[data-owner-fab-route] .content-scroll,
  body.use-new-ui.route-dashboard[data-owner-fab-route] #contentScroll.content-scroll,
  body.use-new-ui.route-dashboard[data-owner-fab-route] .content-scroll {
    padding-bottom: var(--mobile-scroll-bottom-clearance-fab, var(--hydra-mo-scroll-bottom-pad-fab)) !important;
  }

  /* ═══════════════════════════════════════
     7–8. TYPOGRAPHY + CURRENCY
     ═══════════════════════════════════════ */
  body.use-new-ui .page-title-text,
  body.use-new-ui .page-title-text--mobile-shell {
    font-size: clamp(24px, 6.8vw, 30px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.12 !important;
  }

  body.use-new-ui .mobile-dash-section-title,
  body.use-new-ui .inv-mo-section-title,
  body.use-new-ui .finance-panel-title,
  body.use-new-ui .customer-source-panel--mo h3,
  body.use-new-ui .customer-tier-summary-card--mo h3 {
    font-size: clamp(20px, 5.4vw, 24px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }

  body.use-new-ui .mobile-kpi-label,
  body.use-new-ui .finance-kpi-label,
  body.use-new-ui .inv-mo-k,
  body.use-new-ui .customer-kpi-mo-k {
    font-size: clamp(11px, 2.8vw, 13px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }

  body.use-new-ui .order-mobile-card__customer,
  body.use-new-ui .inv-mo-product-name,
  body.use-new-ui .customer-mo-name,
  body.use-new-ui .cust-src-mo-name {
    font-size: clamp(16px, 4.2vw, 18px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  /* Yêu cầu khách — compact title; full rules in inquiries-mobile.css */
  body.use-new-ui.route-storefront-inquiries .sf-inq-mobile-card__name {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  body.use-new-ui .hydra-currency-unit {
    font-size: 0.58em;
    font-weight: 700;
    margin-left: 1px;
    opacity: 0.88;
    vertical-align: baseline;
    white-space: nowrap;
  }

  /* ═══════════════════════════════════════
     6. SPACING AUDIT
     ═══════════════════════════════════════ */
  body.use-new-ui .orders-mobile-wrap,
  body.use-new-ui .cashflow-mobile-page,
  body.use-new-ui .inventory-module--mo-owner,
  body.use-new-ui.route-storefront-inquiries .route-storefront-inquiries,
  body.use-new-ui .customers-layout--mo {
    gap: var(--hydra-mobile-card-gap) !important;
  }

  body.use-new-ui .order-mobile-card,
  body.use-new-ui .inv-mo-card,
  body.use-new-ui .sf-inq-mobile-card,
  body.use-new-ui .finance-expense-mo-card,
  body.use-new-ui .customer-mo-card,
  body.use-new-ui .cust-src-mo-card {
    margin-bottom: 0 !important;
  }

  body.use-new-ui.route-storefront-inquiries .sf-inq-mobile-list {
    gap: 10px !important;
  }

  body.use-new-ui .order-mobile-list,
  body.use-new-ui .customer-mobile-list,
  body.use-new-ui .sf-inq-mobile-list,
  body.use-new-ui .cashflow-tx-list {
    gap: var(--hydra-mo-card-gap) !important;
  }

  /* ═══════════════════════════════════════
     1. DASHBOARD FINAL POLISH
     ═══════════════════════════════════════ */
  body.use-new-ui.route-dashboard .mobile-dashboard,
  body.use-new-ui.route-dashboard .mobile-dashboard--native {
    gap: var(--hydra-mo-card-gap) !important;
  }

  body.use-new-ui.route-dashboard .dashboard-filter-shell,
  body.use-new-ui.route-dashboard .mobile-dash-period-wrap {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    max-width: 100%;
    overflow: hidden;
  }

  body.use-new-ui.route-dashboard .mobile-dash-period-filter {
    gap: 4px !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-period-scroll,
  body.use-new-ui.route-dashboard .dashboard-filter-tabs,
  body.use-new-ui.route-dashboard .mobile-dash-month-row,
  body.use-new-ui.route-dashboard .dashboard-month-tabs {
    padding: 2px 0 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-inline: 0 !important;
    scroll-padding-inline: var(--hydra-mobile-page-x);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }

  body.use-new-ui.route-dashboard .mobile-dash-period-btn,
  body.use-new-ui.route-dashboard .mobile-dash-month-chip {
    flex-shrink: 0;
  }

  body.use-new-ui.route-dashboard .mobile-action-summary,
  body.use-new-ui.route-dashboard .mobile-month-summary .dashboard-overview-compact,
  body.use-new-ui.route-dashboard .mobile-holds-card,
  body.use-new-ui.route-dashboard .mobile-crm-card,
  body.use-new-ui.route-dashboard .mobile-inq-card {
    padding: 18px 16px !important;
    border-radius: 24px !important;
    background: #fff !important;
    border: 1px solid var(--hydra-border-soft) !important;
    box-shadow: var(--hydra-shadow) !important;
    margin: 0 !important;
  }

  body.use-new-ui.route-dashboard .mobile-month-summary .dashboard-overview-strip-item,
  body.use-new-ui.route-dashboard .mobile-crm-card .hydra-crm-kpi {
    border-radius: 16px !important;
    background: var(--hydra-bg-warm-soft) !important;
    border: 1px solid var(--hydra-border-soft) !important;
  }

  body.use-new-ui.route-dashboard #hydraCrmDashboardRow,
  body.use-new-ui.route-dashboard .hydra-crm-dashboard-row {
    gap: var(--hydra-mo-card-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.use-new-ui.route-dashboard #hydraDashStorefrontCrmWrap .mobile-crm-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-section-title {
    font-size: clamp(20px, 5.4vw, 24px) !important;
    margin: 0 0 6px !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-title-row .mobile-dash-section-title {
    font-size: 18px !important;
    margin: 0 !important;
  }

  /* ═══════════════════════════════════════
     2. BOTTOM NAV — New Gym native style
     ═══════════════════════════════════════ */
  body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav,
  body.use-new-ui .mobile-owner-bottom-nav,
  body.use-new-ui .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 2px max(4px, env(safe-area-inset-left, 0px)) 0 max(4px, env(safe-area-inset-right, 0px)) !important;
    gap: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav,
  body.dark.use-new-ui .mobile-owner-bottom-nav,
  body.dark.use-new-ui .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.98) !important;
    border-top-color: rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22) !important;
  }

  body.use-new-ui .mobile-owner-nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: color 160ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.use-new-ui .mobile-owner-nav-item:active {
    transform: none !important;
    opacity: 0.92 !important;
  }

  body.use-new-ui .mobile-owner-nav-item--core:not(.active),
  body.use-new-ui .mobile-owner-nav-item--inq:not(.active),
  body.use-new-ui .mobile-owner-nav-item--cashflow:not(.active),
  body.use-new-ui .mobile-owner-nav-item:not(.active) {
    color: #64748b !important;
    font-weight: 600 !important;
    background: transparent !important;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-label {
    display: block !important;
    max-width: 100%;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    color: inherit !important;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-nav-svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    color: inherit !important;
  }

  body.use-new-ui .mobile-owner-nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 30px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #f97316 !important;
    pointer-events: none !important;
  }

  body.use-new-ui .mobile-owner-nav-item.active {
    background: transparent !important;
    color: #f97316 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  body.use-new-ui .mobile-owner-nav-item.active > span:last-child {
    color: #f97316 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  body.use-new-ui .mobile-owner-nav-item.active .mobile-owner-nav-ico {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  body.dark.use-new-ui .mobile-owner-nav-item:not(.active) {
    color: #94a3b8 !important;
    background: transparent !important;
  }

  body.dark.use-new-ui .mobile-owner-nav-item.active {
    background: transparent !important;
    color: #fb923c !important;
    box-shadow: none !important;
  }

  body.dark.use-new-ui .mobile-owner-nav-item.active > span:last-child {
    color: #fb923c !important;
  }

  body.dark.use-new-ui .mobile-owner-nav-item.active::before {
    background: #fb923c !important;
  }

  body.use-new-ui .mobile-owner-nav-badge {
    top: -2px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    background: #f97316 !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.98) !important;
    box-shadow: none !important;
  }

  /* ═══════════════════════════════════════
     3. FAB AUDIT
     ═══════════════════════════════════════ */
  body.use-new-ui #mobileOwnerFab[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.use-new-ui[data-owner-fab-route] #mobileOwnerFab:not([hidden]) {
    display: flex !important;
    right: max(var(--hydra-mobile-page-x), env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--hydra-bottom-nav-total-h) + 12px) !important;
    z-index: calc(var(--z-mobile-sheet, 1200) - 80) !important;
  }

  body.use-new-ui:not([data-owner-fab-route]) #mobileOwnerFab {
    display: none !important;
  }

  /* ═══════════════════════════════════════
     4. MODAL → BOTTOM SHEET
     ═══════════════════════════════════════ */
  body.use-new-ui #modal.modal:not(.hidden) {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal),
  body.use-new-ui #modal .modal-content:not(.pos-modal) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--hydra-surface) !important;
    border: 1px solid var(--hydra-border-soft) !important;
    border-bottom: none !important;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.14) !important;
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) .modal-head {
    position: sticky;
    top: 0;
    z-index: 4;
    flex-shrink: 0;
    padding: 16px 16px 12px;
    background: var(--hydra-surface);
    border-bottom: 1px solid var(--hydra-border-soft);
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) .modal-head h3 {
    font-size: clamp(18px, 4.8vw, 20px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) .modal-close-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--hydra-border-soft);
    background: var(--hydra-bg-warm-soft);
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) #modalForm {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 16px;
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--hydra-surface);
    border-top: 1px solid var(--hydra-border-soft);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) .modal-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
    margin: 0;
  }

  body.use-new-ui #modal .modal-card:not(.pos-modal) .input,
  body.use-new-ui #modal .modal-card:not(.pos-modal) select.input,
  body.use-new-ui #modal .modal-card:not(.pos-modal) textarea.input {
    min-height: 44px;
    font-size: 16px;
  }

  /* POS / order modal — full height within safe area */
  body.use-new-ui #modal .modal-card.pos-modal,
  body.use-new-ui #modal .modal-content.pos-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px) !important;
    margin-top: auto !important;
  }

  /* POS full-screen sub-640: defer to orders-pos-modal-mobile-fullscreen.css */
  body.modal-pos-fullscreen-mo.use-new-ui #modal.modal:not(.hidden) {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  body.modal-pos-fullscreen-mo.use-new-ui #modal .modal-card.pos-modal,
  body.modal-pos-fullscreen-mo.use-new-ui #modal .modal-content.pos-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    max-height: 100dvh !important;
  }

  body.use-new-ui #modal .modal-card.pos-modal .modal-head,
  body.use-new-ui #modal .modal-card.pos-modal .pos-modal-footer,
  body.use-new-ui #modal .modal-card.pos-modal .order-pos-footer {
    flex-shrink: 0;
  }

  body.use-new-ui #modal .modal-card.pos-modal .modal-actions,
  body.use-new-ui #modal .modal-card.pos-modal .pos-modal-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ═══════════════════════════════════════
     5. QUICK ACTION SHEET
     ═══════════════════════════════════════ */
  body.use-new-ui.mobile-owner-action-sheet-open #mobileOwnerActionSheet {
    z-index: var(--z-mobile-sheet, 6200) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__backdrop,
  body.use-new-ui.mobile-owner-action-sheet-open .mobile-owner-action-sheet__backdrop {
    background: rgba(15, 23, 42, 0.28) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: min(78vh, 78dvh, 680px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #fffaf5 !important;
    border: 1px solid var(--hydra-border-soft) !important;
    border-bottom: none !important;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.14) !important;
    padding: 0 !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__handle {
    width: 40px !important;
    height: 4px !important;
    margin: 10px auto 6px !important;
    flex-shrink: 0 !important;
    display: block !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.45) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__head {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
    background: #fffaf5 !important;
    border-bottom: 1px solid var(--hydra-border-soft) !important;
    padding: 4px 16px 10px !important;
    margin: 0 !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--hydra-text) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--hydra-border-soft) !important;
    background: #fff !important;
    color: var(--hydra-text-secondary) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    gap: 12px !important;
    padding: 10px 14px calc(var(--hydra-bottom-nav-h, 72px) + 20px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__item {
    min-height: 76px !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid var(--hydra-border-soft) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__ico {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: var(--hydra-bg-warm-soft) !important;
    border: 1px solid var(--hydra-border-soft) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__txt {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__txt strong {
    font-size: 15px !important;
    font-weight: 750 !important;
    color: var(--hydra-text) !important;
    line-height: 1.25 !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__txt small {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    opacity: 1 !important;
    line-height: 1.3 !important;
  }

  /* Dashboard FAB: 6 primary actions in 2×3 grid */
  body.use-new-ui.route-dashboard .mobile-owner-action-sheet__panel {
    max-height: min(78vh, 78dvh, 680px) !important;
  }

  body.use-new-ui.route-dashboard .mobile-owner-action-sheet__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-content: start !important;
  }

  body.use-new-ui.route-dashboard .mobile-owner-action-sheet__item--dash-primary {
    min-height: 78px !important;
    max-height: 82px !important;
    padding: 12px !important;
  }

  body.use-new-ui.mobile-owner-action-sheet-open .mobile-owner-bottom-nav,
  body.use-new-ui.mobile-owner-action-sheet-open #mobileOwnerBottomNav {
    opacity: 0.14 !important;
    pointer-events: none !important;
    filter: saturate(0.5) brightness(0.95) !important;
    z-index: calc(var(--z-mobile-nav, 6000) - 2) !important;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
  }

  body.use-new-ui.mobile-owner-action-sheet-open #mobileOwnerFab {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* ═══════════════════════════════════════
     PRIMARY CTA — Đơn hàng & Tài chính (chuẩn + Tạo đơn mới)
     ═══════════════════════════════════════ */
  body.use-new-ui.route-orders .orders-desk-top,
  body.use-new-ui.route-cashflow .cashflow-mobile-page--classic .finance-toolbar.cashflow-mo-toolbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--hydra-mobile-card-gap, 14px) !important;
    margin-inline: 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid var(--hydra-border-soft) !important;
    background: #fff !important;
    box-shadow: var(--hydra-shadow) !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui.route-orders .orders-desk-top #hydraOrdersToolbar.orders-toolbar-mo,
  body.use-new-ui.route-cashflow .finance-toolbar.cashflow-mo-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.use-new-ui .mobile-primary-cta,
  body.use-new-ui.route-orders #addOrder.btn.primary.mobile-primary-cta,
  body.use-new-ui.route-orders #hydraOrdersToolbar #addOrder.btn.primary,
  body.use-new-ui.route-cashflow #addExpense.btn.primary.finance-btn-add.mobile-primary-cta,
  body.use-new-ui.route-cashflow #addExpense.btn.primary.finance-btn-add {
    width: 100% !important;
    max-width: none !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-color: #f97316 !important;
    background-image: linear-gradient(135deg, #f97316, #ea580c) !important;
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.24) !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
  }

  body.use-new-ui .mobile-primary-cta:hover:not(:disabled),
  body.use-new-ui.route-orders #addOrder.btn.primary:hover:not(:disabled),
  body.use-new-ui.route-cashflow #addExpense.btn.primary.finance-btn-add:hover:not(:disabled) {
    filter: brightness(1.03) !important;
    background-color: #ea580c !important;
    background-image: linear-gradient(135deg, #fb923c, #ea580c) !important;
    box-shadow: 0 16px 32px rgba(249, 115, 22, 0.28) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* ═══════════════════════════════════════
     MOBILE KPI CARD SYSTEM — compact (shared all routes)
     ═══════════════════════════════════════ */
  body.use-new-ui .mobile-kpi-grid,
  body.use-new-ui .customer-kpi-mo-grid,
  body.use-new-ui .inv-mo-kpi-row,
  body.use-new-ui .inv-mo-overview .inv-mo-kpi-row,
  body.use-new-ui .finance-kpi-row--4,
  body.use-new-ui .finance-kpi-row--bottom {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.use-new-ui .mobile-kpi-card,
  body.use-new-ui .mobile-kpi-card.card,
  body.use-new-ui .mobile-kpi-card--compact,
  body.use-new-ui .finance-kpi-card.mobile-kpi-card,
  body.use-new-ui .inv-mo-kpi-card.mobile-kpi-card,
  body.use-new-ui .customer-kpi-mo-chip.mobile-kpi-card {
    min-height: 112px !important;
    max-height: none !important;
    height: auto !important;
    padding: 16px !important;
    border-radius: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid var(--hydra-border-soft) !important;
    box-shadow: var(--hydra-shadow) !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  body.use-new-ui .finance-kpi-card--hero-wide.mobile-kpi-card,
  body.use-new-ui .finance-kpi-card.finance-kpi-card--hero-wide {
    grid-column: 1 / -1 !important;
  }

  /* Dashboard — slightly shorter than shared compact token */
  body.use-new-ui #hydraDashKpiMobile .mobile-kpi-card,
  body.use-new-ui .dashboard-kpi-grid--mobile .mobile-kpi-card {
    min-height: 96px !important;
    padding: 12px !important;
  }

  body.use-new-ui .mobile-kpi-header,
  body.use-new-ui .mobile-kpi-top,
  body.use-new-ui .customer-kpi-mo-chip-head,
  body.use-new-ui .finance-kpi-head-mo,
  body.use-new-ui .inv-mo-kpi-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui .mobile-kpi-header .hydra-icon-tile,
  body.use-new-ui .mobile-kpi-header .mobile-kpi-icon,
  body.use-new-ui .mobile-kpi-icon.hydra-icon-tile {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body.use-new-ui .mobile-kpi-header .hydra-icon-svg,
  body.use-new-ui .mobile-kpi-icon .hydra-icon-svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.75 !important;
  }

  body.use-new-ui .mobile-kpi-title,
  body.use-new-ui .mobile-kpi-label,
  body.use-new-ui .customer-kpi-mo-k,
  body.use-new-ui .finance-kpi-label,
  body.use-new-ui .inv-mo-kpi-card .card-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--hydra-text-muted, #64748b) !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  body.use-new-ui .mobile-kpi-value,
  body.use-new-ui .mobile-kpi-value.card-value,
  body.use-new-ui .customer-kpi-mo-v,
  body.use-new-ui .finance-kpi-value,
  body.use-new-ui .inv-mo-kpi-card .card-value {
    margin: 12px 0 0 !important;
    margin-top: 12px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    font-size: clamp(22px, 5.2vw, 26px) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--hydra-text, #0f172a) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  body.use-new-ui .mobile-kpi-value .kpi-anim-inner,
  body.use-new-ui .mobile-kpi-value .hydra-currency-unit {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }

  body.use-new-ui .mobile-kpi-value .hydra-currency-unit {
    font-size: 0.58em !important;
    vertical-align: baseline !important;
  }

  /* Tone — Dashboard */
  body.use-new-ui .kpi-tone-revenue .mobile-kpi-header .hydra-icon-tile {
    background: rgba(255, 247, 237, 0.95) !important;
    color: #ea580c !important;
  }

  body.use-new-ui .kpi-tone-revenue .mobile-kpi-value,
  body.use-new-ui .kpi-tone-revenue .mobile-kpi-value .kpi-anim-inner {
    color: #c2410c !important;
  }

  body.use-new-ui .kpi-tone-profit .mobile-kpi-header .hydra-icon-tile {
    background: rgba(236, 253, 245, 0.95) !important;
    color: #16a34a !important;
  }

  body.use-new-ui .kpi-tone-profit .mobile-kpi-value,
  body.use-new-ui .kpi-tone-profit .mobile-kpi-value .kpi-anim-inner {
    color: #15803d !important;
  }

  body.use-new-ui .kpi-tone-orders .mobile-kpi-header .hydra-icon-tile {
    background: rgba(241, 245, 249, 0.98) !important;
    color: #475569 !important;
  }

  body.use-new-ui .kpi-tone-orders .mobile-kpi-value,
  body.use-new-ui .kpi-tone-orders .mobile-kpi-value .kpi-anim-inner {
    color: var(--hydra-text, #0f172a) !important;
  }

  body.use-new-ui .kpi-tone-cod .mobile-kpi-header .hydra-icon-tile {
    background: rgba(254, 243, 235, 0.95) !important;
    color: #c2410c !important;
  }

  body.use-new-ui .kpi-tone-cod .mobile-kpi-value,
  body.use-new-ui .kpi-tone-cod .mobile-kpi-value .kpi-anim-inner {
    color: #b45309 !important;
  }

  body.use-new-ui .kpi-tone-inventory .mobile-kpi-header .hydra-icon-tile {
    background: rgba(241, 245, 249, 0.98) !important;
    color: #475569 !important;
  }

  body.use-new-ui .kpi-tone-inventory .mobile-kpi-value,
  body.use-new-ui .kpi-tone-inventory .mobile-kpi-value .kpi-anim-inner {
    color: var(--hydra-text, #0f172a) !important;
  }

  /* Tone — Tài chính value */
  body.use-new-ui .finance-kpi-value--neutral,
  body.use-new-ui .mobile-kpi-card .finance-kpi-value--neutral {
    color: var(--hydra-text, #0f172a) !important;
  }

  body.use-new-ui .finance-kpi-value--blue {
    color: #2563eb !important;
  }

  body.use-new-ui .finance-kpi-value--green {
    color: #15803d !important;
  }

  body.use-new-ui .finance-kpi-value--orange {
    color: #c2410c !important;
  }

  body.use-new-ui .finance-kpi-value--sky {
    color: #2563eb !important;
  }

  body.use-new-ui .finance-kpi-value--red {
    color: #dc2626 !important;
  }

  body.use-new-ui .finance-kpi-value--ket,
  body.use-new-ui .finance-kpi-card--hero-positive .finance-kpi-value--ket {
    color: #15803d !important;
  }

  body.use-new-ui .finance-kpi-card--hero-negative .finance-kpi-value--ket {
    color: #dc2626 !important;
  }

  /* Icon nền — CRM / Kho / Tài chính (cam nhạt thống nhất) */
  body.use-new-ui .customer-kpi-mo-chip .mobile-kpi-header .hydra-icon-tile,
  body.use-new-ui .inv-mo-kpi-card .mobile-kpi-header .hydra-icon-tile,
  body.use-new-ui .finance-kpi-card .mobile-kpi-header .hydra-icon-tile {
    background: rgba(255, 247, 237, 0.95) !important;
    color: #ea580c !important;
  }

  body.use-new-ui .mobile-kpi-card .premium-kpi-head,
  body.use-new-ui .mobile-kpi-card .premium-kpi-foot,
  body.use-new-ui .mobile-kpi-card .premium-kpi-icon {
    display: none !important;
  }

  body.use-new-ui .panel:not(.mobile-owner-nav-item):not(.mobile-kpi-card) {
    border-radius: var(--hydra-mo-card-radius) !important;
  }

  body.dark.use-new-ui .mobile-kpi-grid .mobile-kpi-card--compact,
  body.dark.use-new-ui .mobile-kpi-card,
  body.dark.use-new-ui .finance-kpi-card.mobile-kpi-card,
  body.dark.use-new-ui .inv-mo-kpi-card.mobile-kpi-card,
  body.dark.use-new-ui .customer-kpi-mo-chip.mobile-kpi-card,
  body.dark.use-new-ui .mobile-action-summary,
  body.dark.use-new-ui .mobile-holds-card,
  body.dark.use-new-ui .mobile-crm-card,
  body.dark.use-new-ui .mobile-inq-card,
  body.dark.use-new-ui .mobile-owner-action-sheet__panel,
  body.dark.use-new-ui .mobile-owner-action-sheet__item {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__head {
    background: rgba(30, 41, 59, 0.98);
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__txt small {
    color: #94a3b8 !important;
  }
}

/* iPhone 14 Pro Max — 430×932 */
@media (max-width: 430px) {
  body.use-new-ui {
    --hydra-mo-card-pad: 18px;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  body.use-new-ui .mobile-owner-nav-ico .mobile-nav-svg,
  body.use-new-ui .mobile-nav-icon .mobile-nav-svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV v2 — NewGym native (terminal; beats mobile-owner.css)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui nav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui .mobile-owner-bottom-nav.mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 max(4px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-right, 0px)) !important;
    gap: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-color: #fff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.dark.use-new-ui .mobile-owner-bottom-nav.mobile-bottom-nav {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-top-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18) !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item,
  body.use-new-ui button.mobile-owner-nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    /* TASK-792: defer to hypercat terminal — shift+collapse, do not pad safe here. */
    padding-bottom: 0 !important;
    scale: none !important;
    animation: none !important;
    transition: color 160ms ease !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item:active,
  body.use-new-ui button.mobile-owner-nav-item:active {
    transform: none !important;
    -webkit-transform: none !important;
    scale: none !important;
    opacity: 1 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--core:not(.active),
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--inq:not(.active),
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--cashflow:not(.active),
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item:not(.active) {
    color: #64748b !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-ico-wrap,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-ico-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-icon,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-ico,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    color: inherit !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-svg,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-nav-svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    color: inherit !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-label,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active::before,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active::before,
  body.use-new-ui button.mobile-owner-nav-item.active::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: 34px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #f97316 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active,
  body.use-new-ui button.mobile-owner-nav-item.active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    /* TASK-792: .active keeps hypercat shift (set in hypercat.css / inline lock). */
    scale: none !important;
    animation: none !important;
    color: #f97316 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-owner-nav-label,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active > span:last-child,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active .mobile-owner-nav-label,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active > span:last-child {
    color: #f97316 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-nav-icon,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-nav-svg,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active .mobile-nav-svg {
    color: #f97316 !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item:not(.active) .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item:not(.active) .mobile-nav-svg,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item:not(.active) .mobile-owner-nav-ico,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item:not(.active) .mobile-nav-svg {
    color: #64748b !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-badge {
    top: 0 !important;
    right: -5px !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item:not(.active),
  body.dark.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item:not(.active) {
    color: #94a3b8 !important;
    background: transparent !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active,
  body.dark.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active {
    background: transparent !important;
    color: #fb923c !important;
    box-shadow: none !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-owner-nav-label,
  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active > span:last-child {
    color: #fb923c !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active::before {
    background: #fb923c !important;
  }
}

/* TOPBAR → first control gap: see hydra-mobile-page-spacing.css (terminal) */

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV phase 3 — Lucide SVG icons (terminal; ≤900px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item,
  body.use-new-ui button.mobile-owner-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--core:not(.active),
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--inq:not(.active),
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--cashflow:not(.active),
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item:not(.active) {
    color: #64748b !important;
    font-weight: 700 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-icon,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-ico,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-nav-icon {
    font-size: 0 !important;
    line-height: 0 !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--inq .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--core .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item--cashflow .mobile-owner-nav-ico {
    font-size: 0 !important;
    width: 22px !important;
    height: 22px !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-svg,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-nav-svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item:not(.active) .mobile-nav-svg,
  body.dark.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item:not(.active) .mobile-nav-svg {
    color: #94a3b8 !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-nav-svg,
  body.dark.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active .mobile-nav-svg {
    color: #fb923c !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SHELL — flush bottom nav, no gap under bar (terminal)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav,
  body.use-new-ui nav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui .mobile-owner-bottom-nav.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 2px !important;
    /* safe pad owned by hypercat.css terminal */
  }

  body.use-new-ui.is-pwa-standalone #app,
  body.use-new-ui.is-pwa-standalone .app.app-layout {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Indicator lane: same icon position on every tab; gap ≈4px below bar */
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active::before,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active::before,
  body.use-new-ui button.mobile-owner-nav-item.active::before,
  body.use-new-ui .mobile-owner-nav-item.active::before {
    top: 0 !important;
    transform: translateX(-50%) !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-ico-wrap,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-icon,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-ico-wrap,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-ico,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-nav-icon,
  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico-wrap,
  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin-top: 0 !important;
    transform: none !important;
    scale: none !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-nav-icon,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item.active .mobile-owner-nav-ico,
  body.use-new-ui .mobile-owner-nav-item.active .mobile-owner-nav-ico {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    transform: none !important;
    scale: none !important;
  }

  body.use-new-ui .mobile-owner-nav-item--core:not(.active) {
    font-weight: 600 !important;
  }
}