/**
 * Owner quick-check layout — max-width 900px only (HYDRA_MOBILE_BP).
 * Scoped with body.use-new-ui so legacy / desktop stays untouched.
 */

body.use-new-ui .dashboard-layout .dashboard-source-mobile-cards,
body.use-new-ui .dashboard-layout .dash-top-prod-mobile,
body.use-new-ui .dashboard-layout .dash-profit-mobile,
body.use-new-ui .cod-page-mobile-list,
body.use-new-ui .reports-tools-page .reports-backup-mobile-cards {
  display: none;
}

body.use-new-ui #hydraDashKpiMobile,
body.use-new-ui .mobile-dash-today,
body.use-new-ui .mobile-dash-period-wrap {
  display: none;
}

body.use-new-ui #hydraOrdersMobileWrap {
  display: none;
}

@media (max-width: 900px) {
  body.use-new-ui {
    --mobile-bottom-nav-h: var(--hydra-bottom-nav-total-h, calc(60px + env(safe-area-inset-bottom, 0px)));
    --bottom-nav-height: var(--hydra-bottom-nav-total-h, calc(60px + env(safe-area-inset-bottom, 0px)));
    --mobile-bottom-safe: var(--hydra-bottom-nav-total-h, calc(60px + env(safe-area-inset-bottom, 0px)));
    /* TASK-615: semantic aliases — terminal values set in hydra-bottom-nav-hypercat.css */
    --mobile-scroll-bottom-clearance: var(--hydra-mo-scroll-bottom-pad, calc(60px + 12px + env(safe-area-inset-bottom, 0px)));
    --mobile-scroll-bottom-clearance-fab: var(--hydra-mo-scroll-bottom-pad-fab, calc(60px + 12px + 56px + env(safe-area-inset-bottom, 0px)));
    --mobile-scroll-bottom-pad: var(--mobile-scroll-bottom-clearance);
    --mobile-content-bottom-pad: var(--mobile-scroll-bottom-pad);
    --mobile-fab-extra-pad: 0px;
    --mobile-topbar-h: 44px;
    --mo-shell-max: 100%;
    --mo-pad-x: clamp(12px, 3.6vw, 20px);
    --mo-section-gap: clamp(8px, 2.2vw, 14px);
    --mo-card-pad: clamp(10px, 2.8vw, 16px);
    --mo-radius: clamp(12px, 3vw, 16px);
    --mo-radius-lg: clamp(14px, 3.5vw, 18px);
    --mo-space: clamp(6px, 1.8vw, 10px);
  }

  body.use-new-ui {
    background: var(--hydra-orange-gradient-soft, linear-gradient(160deg, #fff7ed 0%, #fffaf5 48%, #ffedd5 100%));
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
  }

  body.dark.use-new-ui {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 45%, #172554 100%);
  }

  body.use-new-ui .app.app-layout {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100dvh;
    background: #f8fafc;
    box-shadow: none;
  }

  body.dark.use-new-ui .app.app-layout {
    background: #0f172a;
    box-shadow: none;
  }

  body.use-new-ui .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 88vw);
    max-width: 100%;
    z-index: var(--z-mobile-nav);
    transform: translate3d(-102%, 0, 0);
    transition: transform 180ms ease;
    box-shadow: 12px 0 40px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.use-new-ui.mobile-owner-drawer-open .sidebar {
    transform: translate3d(0, 0, 0);
  }

  body.use-new-ui .main-content {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* Topbar still used desktop `left: var(--sidebar-width)` — reset so shell aligns with full-width main */
  /* orders.css caps #appContent width using sidebar var — breaks mobile full-bleed */
  body.use-new-ui.route-orders #appContent.content-container:has(.route-page.orders-page:not([hidden])),
  body.use-new-ui.route-orders #appContent:has(.route-page.orders-page:not([hidden])) {
    max-width: 100% !important;
    width: 100% !important;
  }

  body.use-new-ui.route-orders.sidebar-collapsed #appContent.content-container:has(.route-page.orders-page:not([hidden])),
  body.use-new-ui.route-orders.sidebar-collapsed #appContent:has(.route-page.orders-page:not([hidden])) {
    max-width: 100% !important;
  }

  body.use-new-ui[data-owner-fab-route] {
    --mobile-fab-extra-pad: 0px;
    --mobile-scroll-bottom-pad: var(--mobile-scroll-bottom-clearance-fab);
    --mobile-content-bottom-pad: var(--mobile-scroll-bottom-clearance-fab);
  }

  body.use-new-ui .content-scroll {
    padding: calc(var(--mobile-topbar-h) + var(--mo-space)) var(--mo-pad-x) var(--mobile-scroll-bottom-pad);
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body.use-new-ui .content-container,
  body.use-new-ui #appContent {
    max-width: 100%;
    padding-inline: 0;
    min-width: 0;
  }

  @keyframes mo-route-content-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.use-new-ui .page-content .route-page.route-root.mo-route-enter {
    animation: mo-route-content-enter 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  @media (prefers-reduced-motion: reduce) {
    body.use-new-ui .page-content .route-page.route-root.mo-route-enter {
      animation: none;
    }
  }

  /* Topbar — full viewport width (fluid, not centered 430px card) */
  body.use-new-ui .topbar {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0;
    min-height: var(--mobile-topbar-h);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    z-index: calc(var(--z-mobile-nav) + 80);
  }

  body.use-new-ui .topbar-inner--mobile-shell {
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: center;
    column-gap: 10px;
    padding: 4px var(--mo-pad-x);
    min-height: var(--mobile-topbar-h);
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
  }

  /* dashboard.css (@layer pages) bumps .topbar-inner on route-dashboard — align content padding with real header height */
  body.use-new-ui.route-dashboard .topbar {
    min-height: var(--mobile-topbar-h) !important;
    height: auto !important;
  }

  body.use-new-ui.route-dashboard .topbar-inner--mobile-shell {
    min-height: var(--mobile-topbar-h) !important;
    height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body.use-new-ui.route-dashboard .topbar-inner {
    min-height: var(--mobile-topbar-h) !important;
    height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body.use-new-ui.route-dashboard .topbar-route-subtitle {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }

  body.use-new-ui.route-dashboard .content-scroll {
    padding-top: calc(var(--mobile-topbar-stack-h, calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px))) + var(--hydra-mobile-top-gap, 6px)) !important;
  }

  body.use-new-ui.route-dashboard .page-title-text {
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  /* Hamburger removed on mobile owner shell — bottom nav + FAB đủ điều hướng */
  body.use-new-ui .mobile-topbar-hamburger {
    display: none !important;
  }

  body.use-new-ui .topbar-title-group {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    text-align: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    z-index: 1;
  }

  body.use-new-ui .topbar-breadcrumb {
    display: none !important;
  }

  body.use-new-ui .page-title-text {
    font-size: 17px !important;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.use-new-ui .top-search-wrap {
    display: none !important;
  }

  body.use-new-ui .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    flex: initial;
    min-width: 0;
    width: 42px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    z-index: 2;
    position: relative;
  }

  body.use-new-ui .topbar-extras {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
  }

  body.use-new-ui .topbar-extras > *:not(.notification-wrap) {
    display: none !important;
  }

  body.use-new-ui .topbar-extras .notification-wrap {
    pointer-events: auto;
  }

  body.use-new-ui .notification-bell {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  }

  body.use-new-ui .notification-bell:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
  }

  body.use-new-ui .notification-bell:active {
    background: rgba(241, 245, 249, 0.92);
    transform: translateY(1px) scale(0.985);
  }

  body.use-new-ui .topbar-extras .notification-badge {
    min-width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: 800;
    padding: 0 3px;
    top: 2px;
    right: 2px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
  }

  body.dark.use-new-ui .notification-bell {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(71, 85, 105, 0.55);
  }

  body.dark.use-new-ui .topbar {
    background: rgba(15, 23, 42, 0.78);
    border-bottom-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  }

  body.dark.use-new-ui .topbar-extras .notification-badge {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
  }

  body.use-new-ui .sidebar-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.use-new-ui .mobile-owner-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-mobile-nav) - 100);
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.use-new-ui.mobile-owner-drawer-open .mobile-owner-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.use-new-ui .mobile-owner-bottom-nav,
  body.use-new-ui .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    transform: none;
    bottom: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
    z-index: calc(var(--z-mobile-nav) + 100);
    padding: 6px 8px env(safe-area-inset-bottom, 0px);
    gap: 4px;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.78);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.06);
  }

  body.dark.use-new-ui .mobile-owner-bottom-nav {
    background: rgba(15, 23, 42, 0.94);
    border-top-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.25);
  }

  @keyframes mobile-owner-fab-in {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.94);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  body.use-new-ui #mobileOwnerFab {
    position: fixed;
    z-index: calc(var(--z-mobile-sheet) - 50);
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--hydra-orange-gradient, linear-gradient(155deg, #fb923c 0%, #f97316 42%, #ea580c 100%));
    color: #fff;
    box-shadow:
      0 6px 16px rgba(37, 99, 235, 0.22),
      0 2px 6px rgba(15, 23, 42, 0.06);
    right: max(var(--mo-pad-x), env(safe-area-inset-right, 0px));
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + clamp(10px, 2.5vw, 16px));
    transform: translateZ(0);
    transition: box-shadow 180ms ease, transform 180ms ease;
  }

  body.use-new-ui #mobileOwnerFab:hover {
    transform: translateZ(0) scale(1.02);
  }

  body.use-new-ui #mobileOwnerFab:active {
    transform: translateZ(0) scale(0.96);
  }

  body.dark.use-new-ui #mobileOwnerFab {
    background: linear-gradient(155deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.3),
      0 2px 7px rgba(0, 0, 0, 0.18);
  }

  body.use-new-ui[data-owner-fab-route] #mobileOwnerFab:not([hidden]) {
    display: flex;
    animation: mobile-owner-fab-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  body.use-new-ui #mobileOwnerFab .mobile-owner-fab__glyph {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    display: block;
    margin-top: -1px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  }

  body.use-new-ui .mobile-owner-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px 3px;
    border: 0 !important;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), color 180ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body.use-new-ui .mobile-owner-nav-item:active {
    transform: scale(0.985);
  }

  body.use-new-ui .mobile-owner-nav-item:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.35) !important;
    outline-offset: 1px;
  }

  body.dark.use-new-ui .mobile-owner-nav-item {
    color: #94a3b8;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }

  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico {
    font-size: 18px;
    line-height: 1;
    width: 28px;
    text-align: center;
  }

  body.use-new-ui .mobile-owner-nav-badge {
    position: absolute;
    top: -2px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f59e0b;
    color: #1c1917;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
  }

  body.dark.use-new-ui .mobile-owner-nav-badge {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
  }

  body.use-new-ui .mobile-owner-nav-item--inq .mobile-owner-nav-ico {
    font-size: 17px;
  }

  body.use-new-ui .mobile-owner-nav-item--core .mobile-owner-nav-ico {
    font-size: 19px;
  }

  body.use-new-ui .mobile-owner-nav-item--core:not(.active) {
    color: #334155;
    font-weight: 800;
  }

  body.dark.use-new-ui .mobile-owner-nav-item--core:not(.active) {
    color: #e2e8f0;
  }

  /* .mobile-owner-nav-item.active — New Gym: hydra-mobile-polish-final.css */

  @keyframes mo-nav-active-slide {
    from {
      opacity: 0.6;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mo-nav-ico-pop {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.04);
    }
  }

  body.use-new-ui .mobile-owner-nav-item.active .mobile-owner-nav-ico {
    animation: none;
    transform: none;
    transform-origin: center;
  }

  body.use-new-ui.mobile-owner-action-sheet-open {
    overflow: hidden;
    touch-action: none;
  }

  body.use-new-ui #mobileOwnerActionSheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-sheet);
    pointer-events: none;
    visibility: hidden;
  }

  body.use-new-ui.mobile-owner-action-sheet-open #mobileOwnerActionSheet {
    pointer-events: auto;
    visibility: visible;
  }

  body.use-new-ui .mobile-owner-action-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body.use-new-ui.mobile-owner-action-sheet-open .mobile-owner-action-sheet__backdrop {
    opacity: 1;
  }

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

  body.use-new-ui .mobile-owner-action-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    max-height: min(72dvh, 620px);
    padding: 0;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px 24px 0 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-bottom: 0;
    box-shadow: 0 -22px 56px rgba(15, 23, 42, 0.18);
    transform: translate3d(0, 20px, 0);
    opacity: 0.96;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__panel {
    background: rgba(15, 23, 42, 0.97);
    border-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui.mobile-owner-action-sheet-open .mobile-owner-action-sheet__panel {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

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

  body.use-new-ui .mobile-owner-action-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 6px 14px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

  body.use-new-ui .mobile-owner-action-sheet__title {
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #0f172a;
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__title {
    color: #f1f5f9;
  }

  body.use-new-ui .mobile-owner-action-sheet__close {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 130ms ease, border-color 130ms ease, transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body.use-new-ui .mobile-owner-action-sheet__close:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(148, 163, 184, 0.35);
    transform: rotate(-6deg);
  }

  body.use-new-ui .mobile-owner-action-sheet__close:active {
    transform: rotate(10deg) scale(0.99);
  }

  body.use-new-ui .mobile-owner-action-sheet__list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overscroll-behavior: contain;
  }

  body.use-new-ui .mobile-owner-action-sheet__item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    min-height: 64px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: var(--mo-radius);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(248, 250, 252, 0.65);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease, border-color 120ms ease, transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body.use-new-ui .mobile-owner-action-sheet__item:hover {
    background: rgba(248, 250, 252, 0.88);
    border-color: rgba(148, 163, 184, 0.2);
  }

  body.use-new-ui .mobile-owner-action-sheet__item:active {
    background: rgba(241, 245, 249, 0.95);
    transform: scale(0.985);
  }

  body.use-new-ui .mobile-owner-action-sheet__item:active .mobile-owner-action-sheet__ico {
    background: rgba(255, 255, 255, 0.99);
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__item {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(71, 85, 105, 0.35);
    color: #e2e8f0;
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__close {
    background: rgba(30, 41, 59, 0.78);
    border-color: rgba(71, 85, 105, 0.44);
    color: #cbd5e1;
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__close:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(100, 116, 139, 0.55);
  }

  body.use-new-ui .mobile-owner-action-sheet__item--muted {
    opacity: 0.92;
  }

  body.use-new-ui .mobile-owner-action-sheet__ico {
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.16);
    flex-shrink: 0;
  }

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

  body.use-new-ui .mobile-owner-action-sheet__txt strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
  }

  body.use-new-ui .mobile-owner-action-sheet__txt small {
    font-size: 12px;
    color: #64748b;
    line-height: 1.25;
  }

  body.dark.use-new-ui .mobile-owner-action-sheet__txt strong {
    color: #f8fafc;
  }

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

  body.use-new-ui .card,
  body.use-new-ui .panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* —— Inventory (mobile) —— */
  body.use-new-ui .inventory-page #inventoryTabs.inventory-tabs--mo {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 10px;
    margin: 0 0 var(--mo-section-gap);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  body.use-new-ui .inventory-page #inventoryTabs.inventory-tabs--mo::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .inventory-page #inventoryTabs.inventory-tabs--mo .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
  }

  body.dark.use-new-ui .inventory-page #inventoryTabs.inventory-tabs--mo .btn {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(71, 85, 105, 0.55);
    color: #cbd5e1;
  }

  body.use-new-ui .inventory-page #inventoryTabs.inventory-tabs--mo .btn.primary {
    border-color: rgba(59, 130, 246, 0.45);
    background: linear-gradient(120deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    padding: var(--mo-card-pad);
    margin: 0 0 var(--mo-section-gap);
    border-radius: var(--mo-radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
  }

  body.dark.use-new-ui .inventory-page .stock-batch-toolbar {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar #addBatch {
    grid-column: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 12px;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar #stockSearch {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar #stockSupplier {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar .stock-toggle {
    grid-column: span 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 0;
    min-width: 0;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar .stock-toggle input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar ~ .cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 var(--mo-section-gap);
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar ~ .cards > .card {
    padding: var(--mo-card-pad) 12px;
    border-radius: var(--mo-radius);
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar ~ .cards .card-title {
    font-size: 12px;
    font-weight: 650;
    color: #64748b;
    margin: 0;
  }

  body.use-new-ui .inventory-page .stock-batch-toolbar ~ .cards .card-value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
  }

  body.use-new-ui .inventory-page #inventoryTabBody > .toolbar:first-of-type + .cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 var(--mo-section-gap);
  }

  body.use-new-ui .inventory-page #inventoryTabBody > .toolbar:first-of-type + .cards > .card {
    padding: var(--mo-card-pad) 12px;
    border-radius: var(--mo-radius);
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  body.use-new-ui .inventory-page #inventoryTabBody > .toolbar:first-of-type + .cards .card-title {
    font-size: 12px;
    color: #64748b;
  }

  body.use-new-ui .inventory-page #inventoryTabBody > .toolbar:first-of-type + .cards .card-value {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  body.use-new-ui .inventory-page .product-center-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: var(--mo-section-gap);
  }

  body.use-new-ui .inventory-page .product-center-toolbar .btn {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
  }

  body.use-new-ui .inventory-page .product-center-toolbar input,
  body.use-new-ui .inventory-page .product-center-toolbar select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    font-size: 13px;
    padding: 8px 10px;
  }

  body.use-new-ui .inventory-page .stock-batch-focus {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    margin-bottom: var(--mo-section-gap);
  }

  /* —— Dashboard —— */
  body.use-new-ui .dashboard-layout .dashboard-toolbar-premium,
  body.use-new-ui .dashboard-layout #hydraDashQuickStats,
  body.use-new-ui .dashboard-layout .owner-snapshot-panel,
  body.use-new-ui .dashboard-layout .dashboard-lower-grid,
  body.use-new-ui .dashboard-layout .dashboard-source-panel,
  body.use-new-ui .dashboard-layout #hydraDashTopProducts,
  body.use-new-ui .dashboard-layout #hydraDashProfitPanels,
  body.use-new-ui .dashboard-layout #hydraDashKpi {
    display: none !important;
  }

  body.use-new-ui .dashboard-layout .dashboard-overview-compact-wrap {
    margin-bottom: var(--mo-section-gap);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mo-space);
    margin-top: 0;
  }

  body.use-new-ui.route-dashboard .mobile-dash-today {
    display: block !important;
  }

  body.use-new-ui.route-dashboard .mobile-dash-period-wrap {
    display: block !important;
  }

  body.use-new-ui .dashboard-layout .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card:not(.mobile-kpi-card--compact) {
    border-radius: var(--mo-radius-lg);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.14);
    padding: var(--mo-card-pad) 12px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-revenue {
    border-top: 2px solid rgba(59, 130, 246, 0.24);
    box-shadow: 0 2px 14px rgba(59, 130, 246, 0.08);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-profit {
    border-top: 2px solid rgba(139, 92, 246, 0.24);
    box-shadow: 0 2px 14px rgba(139, 92, 246, 0.08);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-orders {
    border-top: 2px solid rgba(79, 70, 229, 0.24);
    box-shadow: 0 2px 14px rgba(79, 70, 229, 0.08);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-cod {
    border-top: 2px solid rgba(249, 115, 22, 0.26);
    box-shadow: 0 2px 14px rgba(249, 115, 22, 0.08);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-head {
    align-items: flex-start;
    gap: 6px;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-head .card-title {
    font-size: 12px;
    font-weight: 650;
    color: #64748b;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 10px;
    background: rgba(241, 245, 249, 0.95);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-revenue .premium-kpi-icon {
    background: rgba(219, 234, 254, 0.9);
    color: #1d4ed8;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-profit .premium-kpi-icon {
    background: rgba(237, 233, 254, 0.92);
    color: #6d28d9;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-orders .premium-kpi-icon {
    background: rgba(224, 231, 255, 0.92);
    color: #3730a3;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-cod .premium-kpi-icon {
    background: rgba(255, 237, 213, 0.92);
    color: #c2410c;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .card-value:not(.mobile-kpi-value) {
    font-size: 22px !important;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .mobile-kpi-card--compact .premium-kpi-foot {
    display: none !important;
  }

  body.use-new-ui .dashboard-layout .owner-insight-card {
    padding: 10px 12px;
    border-radius: var(--mo-radius-lg);
    min-height: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  }

  body.use-new-ui .dashboard-layout .owner-insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(248, 250, 252, 0.95);
  }

  body.use-new-ui .dashboard-layout .owner-insight-main {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  body.use-new-ui .dashboard-layout .owner-insight-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #64748b;
  }

  body.use-new-ui .dashboard-layout .owner-insight-value {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }

  body.use-new-ui .dashboard-layout .owner-insight-meta,
  body.use-new-ui .dashboard-layout .owner-insight-note {
    font-size: 11px;
    color: #64748b;
    line-height: 1.22;
  }

  body.use-new-ui .dashboard-premium-wrap.dashboard-owner-v2 {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0 var(--mo-pad-x);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--mo-section-gap);
  }

  body.use-new-ui .dashboard-layout .owner-mini-spark {
    display: none !important;
  }

  body.use-new-ui .dashboard-layout .owner-insight-row {
    grid-template-columns: 1fr !important;
    gap: var(--mo-section-gap) !important;
  }

  body.use-new-ui .dashboard-layout .owner-mid-grid {
    grid-template-columns: 1fr !important;
  }

  body.use-new-ui .dashboard-layout .dashboard-lower-grid {
    grid-template-columns: 1fr !important;
  }

  body.use-new-ui .dashboard-layout .alerts-columns {
    grid-template-columns: 1fr !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashTopProducts {
    grid-template-columns: 1fr !important;
  }

  body.use-new-ui .dashboard-layout .owner-warning-layout {
    grid-template-columns: 1fr !important;
  }

  body.use-new-ui .dashboard-layout .dashboard-toolbar-premium {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.use-new-ui .dashboard-layout .dashboard-toolbar-premium .segment-control {
    flex-wrap: wrap;
  }

  body.use-new-ui .dashboard-layout .chart-toggle-group {
    flex-wrap: wrap;
    width: 100%;
  }

  body.use-new-ui .dashboard-layout .dashboard-source-desktop .table-wrap {
    display: none !important;
  }

  body.use-new-ui .dashboard-layout .dashboard-source-mobile-cards {
    display: grid !important;
    gap: 8px;
    margin-top: 10px;
  }

  body.use-new-ui .dashboard-layout .dashboard-source-mobile-cards .dash-src-mobile-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, 0.9);
  }

  body.use-new-ui .dashboard-layout .dash-src-mobile-top {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
  }

  body.use-new-ui .dashboard-layout .dash-src-mobile-top strong {
    font-size: 14px;
    color: #0f172a;
    word-break: break-word;
  }

  body.use-new-ui .dashboard-layout .dash-src-mobile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: #475569;
  }

  body.use-new-ui .dashboard-layout .dash-src-mobile-stats b {
    font-weight: 800;
    color: #0f172a;
  }

  body.use-new-ui .dashboard-layout #hydraDashTopProducts .dash-top-prod-mobile {
    display: grid !important;
    gap: 6px;
    margin-top: 8px;
  }

  body.use-new-ui .dashboard-layout #hydraDashTopProducts .table-wrap {
    display: none !important;
  }

  body.use-new-ui .dashboard-layout .dash-top-mobile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.75);
    min-width: 0;
  }

  body.use-new-ui .dashboard-layout .dash-top-mobile-sub {
    flex: 1 0 100%;
    width: 100%;
    font-size: 11px;
  }

  body.use-new-ui .dashboard-layout .dash-top-mobile-name {
    flex: 1 1 120px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
  }

  body.use-new-ui .dashboard-layout .dash-top-mobile-val {
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  body.use-new-ui .dashboard-layout .dash-top-mobile-rank {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
  }

  body.use-new-ui .dashboard-layout #hydraDashProfitPanels .table-wrap {
    display: none !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashProfitPanels .dash-profit-mobile {
    display: grid !important;
    gap: 6px;
    margin-top: 8px;
  }

  body.use-new-ui .dashboard-layout .dash-profit-mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.85);
    min-width: 0;
  }

  body.use-new-ui .dashboard-layout .dash-profit-mobile-row > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  body.use-new-ui .dashboard-layout .dash-profit-mobile-row strong {
    display: block;
    font-size: 12px;
    word-break: break-word;
  }

  body.use-new-ui .dashboard-layout .dash-profit-mobile-nums {
    text-align: right;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* —— COD —— */
  body.use-new-ui .cod-page-desktop-table {
    display: none !important;
  }

  body.use-new-ui .cod-page-mobile-list {
    display: grid !important;
    gap: 10px;
    margin-top: 10px;
  }

  body.use-new-ui .cod-mobile-card {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.92);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.use-new-ui .cod-mc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
  }

  body.use-new-ui .cod-mc-head strong {
    font-size: 15px;
    word-break: break-word;
    min-width: 0;
  }

  body.use-new-ui .cod-mc-id {
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
  }

  body.use-new-ui .cod-mc-phone {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    word-break: break-all;
  }

  body.use-new-ui .cod-mc-money {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 13px;
  }

  body.use-new-ui .cod-mc-money strong {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  body.use-new-ui .cod-mc-sla {
    margin-bottom: 10px;
    font-size: 12px;
  }

  body.use-new-ui .cod-mc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.use-new-ui .cod-mc-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  body.use-new-ui .cod-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  body.use-new-ui .cod-toolbar .cod-filter-wrap {
    width: 100%;
    min-width: 0;
  }

  body.use-new-ui .cod-toolbar input,
  body.use-new-ui .cod-toolbar select {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.use-new-ui .cod-page .cards {
    display: none !important;
  }

  body.use-new-ui .cod-page .cod-toolbar label:nth-of-type(2) {
    display: none !important;
  }

  body.use-new-ui .cod-mobile-card[data-cod-sla="overdue"] {
    border-color: rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.92));
  }

  body.use-new-ui .cod-mobile-card[data-cod-sla="warning"] {
    border-color: rgba(251, 146, 60, 0.45);
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.92));
  }

  body.use-new-ui .cod-mobile-card[data-cod-sla="normal"] {
    border-color: rgba(148, 163, 184, 0.22);
  }

  body.use-new-ui .cod-mc-head strong {
    font-size: 17px;
    font-weight: 800;
  }

  body.use-new-ui .cod-mc-money strong {
    font-size: 20px;
  }

  /* —— Orders (mobile cards) —— */
  body.use-new-ui .orders-page .orders-table-shell {
    display: none !important;
  }

  body.use-new-ui .orders-page .orders-bulk-bar-host {
    display: none !important;
  }

  body.use-new-ui .orders-page .orders-summary-cards {
    display: none !important;
  }

  body.use-new-ui .orders-toolbar-desktop-only {
    display: none !important;
  }

  body.use-new-ui .orders-toolbar-mo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.use-new-ui .orders-desk-top {
    padding: 0 var(--mo-pad-x);
    box-sizing: border-box;
  }

  body.use-new-ui .cod-empty-mo {
    padding: 10px 12px;
    text-align: center;
  }

  body.use-new-ui .cod-filter-empty-card {
    padding: 20px 16px;
    text-align: center;
    border-radius: 16px;
    border: 1px dashed var(--hydra-border-soft);
    background: #fff;
  }

  body.use-new-ui .cod-filter-empty-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hydra-text);
  }

  body.use-new-ui .cod-filter-empty-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
  }

  body.use-new-ui .orders-search-mo {
    flex: 1 1 0;
    min-width: 0;
    max-width: min(220px, 46vw);
  }

  body.use-new-ui .orders-page #hydraOrdersMobileWrap {
    display: block;
    margin: var(--mo-section-gap) 0 0;
    padding: 0 var(--mo-pad-x);
    box-sizing: border-box;
  }

  body.use-new-ui .orders-pager-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--mo-pad-x);
  }

  body.use-new-ui .orders-desk-chips-host {
    padding: 0 var(--mo-pad-x);
    box-sizing: border-box;
  }

  body.use-new-ui .orders-desk-chip[data-orders-desk-chip="today"] {
    display: none !important;
  }

  body.use-new-ui .orders-desk-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 8px;
    padding-bottom: 4px;
    /* TASK-616: shared trailing scroll clearance for Orders chip row */
    padding-inline-end: 16px;
    scroll-padding-inline: 14px;
    scroll-padding-inline-end: 16px;
    scrollbar-width: none;
  }

  body.use-new-ui .orders-desk-chips::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .orders-desk-chip {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.95);
  }

  body.use-new-ui .orders-desk-chip.is-active {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(239, 246, 255, 0.95);
    color: #1e40af;
  }

  body.use-new-ui .order-mobile-card {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.96);
    padding: 8px 10px;
    margin-bottom: 6px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    max-width: 100%;
    min-width: 0;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
  }

  body.dark.use-new-ui .order-mobile-card {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  }

  body.use-new-ui .order-mobile-card__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  body.use-new-ui .order-mobile-card__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
    min-width: 0;
  }

  body.use-new-ui .order-mobile-card__head-left {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }

  body.use-new-ui .order-mobile-card__head-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }

  body.use-new-ui .order-mobile-card__body-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  body.use-new-ui .order-mobile-card__body-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }

  body.use-new-ui .order-mobile-card__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  body.use-new-ui .order-mobile-card__id {
    font-weight: 800;
    font-size: 12px;
    line-height: 1.1;
    color: #0f172a;
    flex-shrink: 0;
  }

  body.dark.use-new-ui .order-mobile-card__id {
    color: #f1f5f9;
  }

  body.use-new-ui .order-mobile-card__customer {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0f172a;
  }

  body.dark.use-new-ui .order-mobile-card__customer {
    color: #f1f5f9;
  }

  body.use-new-ui .order-mobile-card__meta {
    font-size: 11px;
    line-height: 1.1;
    color: #64748b;
  }

  body.dark.use-new-ui .order-mobile-card__meta {
    color: #94a3b8;
  }

  body.use-new-ui .order-mobile-card__items {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.use-new-ui .order-mobile-card__pay {
    font-size: 10px;
  }

  body.use-new-ui .order-mobile-card__time {
    font-size: 10px;
    line-height: 1.1;
    color: #64748b;
    flex-shrink: 0;
  }

  body.dark.use-new-ui .order-mobile-card__time {
    color: #94a3b8;
  }

  body.use-new-ui .order-mobile-card__money-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
  }

  body.use-new-ui .order-mobile-card__money-line .order-mobile-card__meta {
    font-size: 10px;
  }

  body.use-new-ui .order-mobile-card__amount {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
  }

  body.dark.use-new-ui .order-mobile-card__amount {
    color: #f1f5f9;
  }

  body.use-new-ui .order-mobile-card__profit {
    font-size: 11px;
    font-weight: 750;
  }

  body.use-new-ui .order-mobile-card__status {
    display: flex;
    justify-content: flex-end;
    line-height: 1;
  }

  body.use-new-ui .order-mo-status {
    width: auto;
    max-width: 100%;
    min-width: 0;
    font-size: 10px;
    font-weight: 650;
    padding: 3px 7px;
    border-radius: 999px;
    min-height: unset;
    height: auto;
    line-height: 1.05;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(248, 250, 252, 0.95);
  }

  body.dark.use-new-ui .order-mo-status {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(71, 85, 105, 0.55);
    color: #e2e8f0;
  }

  body.use-new-ui .order-mo-status.status-done {
    background-color: rgba(220, 252, 231, 0.85);
    border-color: rgba(74, 222, 128, 0.45);
    color: #166534;
  }

  body.use-new-ui .order-mo-status.status-cod,
  body.use-new-ui .order-mo-status.order-status-select--cod-hot {
    background-color: rgba(254, 243, 199, 0.88);
    border-color: rgba(251, 191, 36, 0.5);
    color: #92400e;
  }

  body.use-new-ui .order-mo-status.status-pending {
    background-color: rgba(241, 245, 249, 0.95);
    border-color: #e2e8f0;
    color: #475569;
  }

  body.use-new-ui .order-mo-status.status-cancelled {
    background-color: rgba(254, 226, 226, 0.55);
    border-color: rgba(252, 165, 165, 0.45);
    color: #991b1b;
  }

  body.use-new-ui .order-mobile-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  body.use-new-ui .order-mobile-card__quick-edit {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: unset;
    padding: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: transparent;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.dark.use-new-ui .order-mobile-card__quick-edit {
    border-color: rgba(71, 85, 105, 0.55);
    color: #cbd5e1;
  }

  body.use-new-ui .order-mobile-card__quick-edit-icon {
    font-size: 14px;
    line-height: 1;
  }

  body.use-new-ui .orders-mobile-empty {
    text-align: center;
    padding: 16px 8px;
  }

  /* —— Reports —— */
  body.use-new-ui .reports-tools-page .reports-export-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: none;
  }

  body.use-new-ui .reports-tools-page .reports-export-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body.use-new-ui .reports-tools-page .reports-owner-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.use-new-ui .reports-tools-page .reports-backup-desktop {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page .reports-backup-mobile-cards {
    display: grid !important;
    gap: 10px;
    margin-top: 10px;
  }

  body.use-new-ui .reports-backup-m-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, 0.88);
    min-width: 0;
  }

  body.use-new-ui .reports-backup-m-card code {
    display: block;
    word-break: break-all;
    font-size: 11px;
    margin-bottom: 6px;
  }

  body.use-new-ui .reports-backup-m-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    margin-bottom: 8px;
    color: #475569;
  }

  body.use-new-ui .reports-backup-m-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  body.use-new-ui .reports-tools-page .reports-owner-kpis {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page #rtTabMemory {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page .reports-export-card[data-export-key="data-check"] {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page .reports-backup-mobile-cards {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page .owner-backup-summary > div:nth-child(3),
  body.use-new-ui .reports-tools-page .owner-backup-summary > div:nth-child(4) {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page .reports-tools-audit-desktop {
    display: none !important;
  }

  body.use-new-ui .reports-tools-page .reports-export-card .btn.primary {
    font-size: 12px;
    font-weight: 650;
    padding: 6px 12px;
  }

  body.use-new-ui .reports-tools-page .reports-export-icon {
    font-size: 22px;
  }
}

/* Desktop & tablet >768: hide mobile-only chrome */
@media (min-width: 769px) {
  body.use-new-ui {
    background: revert;
    min-height: revert;
  }

  body.use-new-ui .app.app-layout {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: revert;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.use-new-ui #mobileOwnerFab {
    display: none !important;
    animation: none !important;
  }

  body.use-new-ui .topbar {
    left: var(--sidebar-width) !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: var(--content-max) !important;
    margin: 0 auto !important;
    border-radius: var(--radius-sm);
  }

  body.use-new-ui .mobile-owner-nav-backdrop,
  body.use-new-ui .mobile-owner-bottom-nav,
  body.use-new-ui .mobile-topbar-hamburger,
  body.use-new-ui #mobileOwnerActionSheet {
    display: none !important;
  }

  body.use-new-ui .topbar-inner--mobile-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
    grid-template-columns: initial;
    grid-template-rows: initial;
    position: static;
  }

  body.use-new-ui .topbar-title-group {
    text-align: left;
    flex: 0 1 auto;
    grid-column: initial;
    grid-row: initial;
    max-width: none;
    pointer-events: auto;
    z-index: auto;
  }

  body.use-new-ui .top-search-wrap {
    display: revert !important;
    grid-column: initial;
    grid-row: initial;
    max-height: none;
    opacity: 1;
    pointer-events: auto;
    flex: 1 1 200px;
    min-width: 160px;
  }

  body.use-new-ui .topbar-actions {
    grid-column: initial;
    grid-row: initial;
    flex: 1 1 auto;
    justify-content: flex-end;
    z-index: auto;
    position: static;
  }

  body.use-new-ui .topbar-extras > * {
    display: revert !important;
  }

  body.use-new-ui .topbar-spotlight-btn {
    display: inline-flex !important;
  }

  body.use-new-ui .topbar-extras .sync-status,
  body.use-new-ui .topbar-extras .user-menu-wrap {
    display: inline-flex !important;
  }

  body.use-new-ui .notification-bell {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  body.use-new-ui .orders-page #hydraOrdersMobileWrap {
    display: none !important;
  }

  body.use-new-ui .orders-toolbar-desktop-only {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  body.use-new-ui .orders-toolbar-mo {
    flex-wrap: wrap;
  }
}

/* Fluid compact tweaks — handled by hydra-mobile-fluid.css clamp(); safe-area only here */
@media (max-width: 640px) {
  body.use-new-ui .content-scroll {
    padding-left: max(var(--mo-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mo-pad-x), env(safe-area-inset-right, 0px));
  }
}

/* Last-wins mobile owner shell (do not @layer — must beat component styles) */
@media (max-width: 900px) {
  body.use-new-ui .quick-add-wrap,
  body.use-new-ui .topbar-spotlight-btn,
  body.use-new-ui .topbar-extras .sync-status {
    display: none !important;
  }

  body.use-new-ui .top-search-wrap {
    display: none !important;
  }

  body.use-new-ui .topbar-extras > *:not(.notification-wrap):not(.user-menu-wrap) {
    display: none !important;
  }

  body.use-new-ui .topbar-extras .user-menu-wrap {
    display: flex !important;
    align-items: center !important;
  }

  body.use-new-ui .mobile-owner-nav-item:focus:not(:focus-visible) {
    outline: 0 !important;
  }

  body.use-new-ui .mobile-owner-nav-item,
  body.use-new-ui .mobile-owner-nav-item.active {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Mobile route skeleton — soft navigation / showMobileRouteSkeleton (≤900px · use-new-ui) */
@keyframes mo-route-sk-shimmer {
  0% {
    background-position: 140% 0;
  }

  100% {
    background-position: -140% 0;
  }
}

@media (max-width: 900px) {
  body.use-new-ui #appContent.content-container {
    position: relative;
  }

  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host {
    position: absolute;
    inset: 0;
    z-index: 25;
    overflow: hidden;
    border-radius: 0;
    box-sizing: border-box;
    display: none;
    opacity: 0;
    transition: opacity 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host:not([hidden]) {
    display: block;
  }

  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host.mobile-route-skeleton-host--visible {
    opacity: 1;
  }

  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host:not(.mobile-route-skeleton-host--shimmer-only).mobile-route-skeleton-host--visible,
  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host:not(.mobile-route-skeleton-host--shimmer-only).mobile-route-skeleton-host--leaving {
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  body.dark.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host:not(.mobile-route-skeleton-host--shimmer-only).mobile-route-skeleton-host--visible,
  body.dark.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host:not(.mobile-route-skeleton-host--shimmer-only).mobile-route-skeleton-host--leaving {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host.mobile-route-skeleton-host--shimmer-only {
    background: transparent;
    pointer-events: none;
  }

  body.use-new-ui #mobileRouteSkeletonHost.mobile-route-skeleton-host.mobile-route-skeleton-host--visible:not(.mobile-route-skeleton-host--shimmer-only) {
    pointer-events: auto;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mobile-route-skeleton-shimmer-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      rgba(248, 250, 252, 0) 0%,
      rgba(255, 255, 255, 0.26) 42%,
      rgba(248, 250, 252, 0) 88%
    );
    background-size: 220% 100%;
    animation: mo-route-sk-shimmer 1.45s ease-in-out infinite;
    mix-blend-mode: multiply;
  }

  body.dark.use-new-ui #mobileRouteSkeletonHost .mobile-route-skeleton-shimmer-veil {
    background: linear-gradient(
      105deg,
      rgba(15, 23, 42, 0) 0%,
      rgba(148, 163, 184, 0.12) 42%,
      rgba(15, 23, 42, 0) 88%
    );
    mix-blend-mode: screen;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-root {
    display: flex;
    flex-direction: column;
    gap: var(--mo-section-gap, 12px);
    padding: 2px 0 4px;
    min-height: 55vh;
    pointer-events: none;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-card {
    border-radius: var(--mo-radius-lg, 18px);
    padding: var(--mo-card-pad, 14px);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  }

  body.dark.use-new-ui #mobileRouteSkeletonHost .mo-sk-card {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(71, 85, 105, 0.45);
    box-shadow: none;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-surf {
    border-radius: 10px;
    min-height: 12px;
    width: 100%;
    background: linear-gradient(
      105deg,
      rgba(226, 232, 240, 0.28) 0%,
      rgba(241, 245, 249, 0.8) 48%,
      rgba(226, 232, 240, 0.28) 100%
    );
    background-size: 220% 100%;
    animation: mo-route-sk-shimmer 1.45s ease-in-out infinite;
  }

  body.dark.use-new-ui #mobileRouteSkeletonHost .mo-sk-surf {
    background: linear-gradient(
      105deg,
      rgba(51, 65, 85, 0.35) 0%,
      rgba(71, 85, 105, 0.68) 48%,
      rgba(51, 65, 85, 0.35) 100%
    );
    background-size: 220% 100%;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-line--sm {
    max-width: 36%;
    min-height: 11px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-line--md {
    max-width: 52%;
    min-height: 11px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-line--lg {
    max-width: 68%;
    min-height: 15px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-line--short {
    max-width: 44%;
    min-height: 10px;
    margin-top: 2px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-daily-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-daily-chart {
    min-height: 120px;
    border-radius: var(--mo-radius, 14px);
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-kpi {
    min-height: 72px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-insight-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-insight {
    min-height: 76px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-search {
    margin-bottom: 2px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-search-pill {
    min-height: 44px;
    border-radius: 14px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-order-stack,
  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-cod-stack,
  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-generic-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-order,
  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-cod {
    min-height: 72px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 2px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-chip {
    flex: 1;
    min-width: 0;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-pill,
  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-pill-short {
    min-height: 38px;
    border-radius: 12px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-pill-short {
    min-height: 32px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 2px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-tab {
    flex: 1;
    min-width: 0;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-inv-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 2px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-inv-kpi {
    min-height: 48px;
    border-radius: var(--mo-radius, 14px);
    padding: 10px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    align-items: center;
  }

  body.dark.use-new-ui #mobileRouteSkeletonHost .mo-sk-inv-kpi {
    background: rgba(30, 41, 59, 0.45);
    border-color: rgba(71, 85, 105, 0.4);
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--mo-radius, 14px);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.18);
  }

  body.dark.use-new-ui #mobileRouteSkeletonHost .mo-sk-list-row {
    background: rgba(30, 41, 59, 0.45);
    border-color: rgba(71, 85, 105, 0.4);
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-ico {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-list-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-export {
    min-height: 96px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-export-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
  }

  body.use-new-ui #mobileRouteSkeletonHost .mo-sk-generic-card {
    min-height: 68px;
  }

  /* —— Inventory route: mobile cards (owner UI) —— */
  body.use-new-ui .inventory-module--mo-owner {
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 96px));
  }

  body.use-new-ui .inventory-tabs--mo-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
    /* TASK-617: trailing clearance (Orders TASK-616 pattern) */
    padding-inline-end: 16px;
    scroll-padding-inline: 14px;
    scroll-padding-inline-end: 16px;
    margin-bottom: 4px;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
  }

  body.use-new-ui .inventory-tabs--mo-pills::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .inventory-tabs--mo-pills .btn {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  }

  body.dark.use-new-ui .inventory-tabs--mo-pills .btn {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(71, 85, 105, 0.55);
    color: #cbd5e1;
  }

  body.use-new-ui .inventory-tabs--mo-pills .btn.primary {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
  }

  body.dark.use-new-ui .inventory-tabs--mo-pills .btn.primary {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(96, 165, 250, 0.45);
    color: #bfdbfe;
  }

  body.use-new-ui .inv-mo-overview .inv-mo-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  body.use-new-ui .inv-mo-overview .inv-mo-kpi-row .card.inv-mo-kpi-card {
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.2);
  }

  body.dark.use-new-ui .inv-mo-overview .inv-mo-kpi-row .card.inv-mo-kpi-card {
    border-color: rgba(71, 85, 105, 0.45);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  }

  body.use-new-ui .inv-mo-fifo-line {
    font-size: 12px;
    margin: 0 0 12px;
    line-height: 1.45;
  }

  body.use-new-ui .inv-mo-section {
    margin-bottom: 16px;
  }

  body.use-new-ui .inv-mo-section-title {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #0f172a;
    letter-spacing: -0.02em;
  }

  body.dark.use-new-ui .inv-mo-section-title {
    color: #f1f5f9;
  }

  body.use-new-ui .inv-mo-card {
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.dark.use-new-ui .inv-mo-card {
    background: rgba(30, 41, 59, 0.88);
    border-color: rgba(71, 85, 105, 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  }

  body.use-new-ui .inv-mo-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.use-new-ui .inv-mo-card-head--split {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  body.use-new-ui .inv-mo-card-head--split > div:first-child {
    flex: 1;
    min-width: 0;
  }

  body.use-new-ui .inv-mo-stock-batch-card .inv-mo-card-head--split > .inv-mo-batch-id {
    flex: 0 0 auto;
  }

  body.use-new-ui .inv-mo-card-head--split .inv-mo-prio,
  body.use-new-ui .inv-mo-card-head--split .inv-mo-pill-warn,
  body.use-new-ui .inv-mo-card-head--split .inv-mo-pill-bad {
    flex-shrink: 0;
    align-self: flex-start;
  }

  body.use-new-ui .inv-mo-product-name {
    font-size: 15px;
    font-weight: 750;
    line-height: 1.35;
    color: #0f172a;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  body.dark.use-new-ui .inv-mo-product-name {
    color: #f8fafc;
  }

  body.use-new-ui .inv-mo-product-name--batch {
    font-size: 14px;
    font-weight: 680;
    margin-top: 2px;
  }

  body.use-new-ui .inv-mo-batch-id {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.02em;
  }

  body.dark.use-new-ui .inv-mo-batch-id {
    color: #94a3b8;
  }

  body.use-new-ui .inv-mo-prio {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  body.use-new-ui .inv-mo-prio--high {
    background: rgba(254, 226, 226, 0.95);
    color: #b91c1c;
    border: 1px solid rgba(252, 165, 165, 0.55);
  }

  body.use-new-ui .inv-mo-prio--med {
    background: rgba(254, 243, 199, 0.95);
    color: #b45309;
    border: 1px solid rgba(252, 211, 77, 0.45);
  }

  body.use-new-ui .inv-mo-prio--low {
    background: rgba(224, 231, 255, 0.95);
    color: #4338ca;
    border: 1px solid rgba(165, 180, 252, 0.55);
  }

  body.dark.use-new-ui .inv-mo-prio--high {
    background: rgba(127, 29, 29, 0.45);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.35);
  }

  body.dark.use-new-ui .inv-mo-prio--med {
    background: rgba(120, 53, 15, 0.45);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
  }

  body.dark.use-new-ui .inv-mo-prio--low {
    background: rgba(49, 46, 129, 0.45);
    color: #e0e7ff;
    border-color: rgba(129, 140, 248, 0.35);
  }

  body.use-new-ui .inv-mo-pill-warn {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(254, 243, 199, 0.95);
    color: #b45309;
    border: 1px solid rgba(252, 211, 77, 0.45);
  }

  body.use-new-ui .inv-mo-pill-bad {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(254, 226, 226, 0.95);
    color: #b91c1c;
    border: 1px solid rgba(252, 165, 165, 0.55);
  }

  body.use-new-ui .inv-mo-meta-line {
    font-size: 12px;
    margin-top: -2px;
  }

  body.use-new-ui .inv-mo-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }

  body.use-new-ui .inv-mo-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.use-new-ui .inv-mo-k {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  body.dark.use-new-ui .inv-mo-k {
    color: #94a3b8;
  }

  body.use-new-ui .inv-mo-v {
    font-size: 14px;
    font-weight: 750;
    color: #0f172a;
  }

  body.dark.use-new-ui .inv-mo-v {
    color: #f1f5f9;
  }

  body.use-new-ui .inv-mo-dl {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body.use-new-ui .inv-mo-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
  }

  body.use-new-ui .inv-mo-dl .inv-mo-k {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 650;
    flex-shrink: 0;
  }

  body.use-new-ui .inv-mo-dl .inv-mo-v {
    text-align: right;
    font-weight: 680;
    overflow-wrap: anywhere;
  }

  body.use-new-ui .inv-mo-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
  }

  body.use-new-ui .inventory-restock-mobile-list,
  body.use-new-ui .inventory-low-batch-mobile-list,
  body.use-new-ui .inventory-negative-mobile-list,
  body.use-new-ui .inventory-batch-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Restock suggestions — compact inventory row (mobile) */
  body.use-new-ui .inventory-restock-mobile-list {
    gap: 8px;
  }

  body.use-new-ui .inv-mo-card.inv-mo-restock-card.inventory-card {
    padding: 12px 14px;
    border-radius: 18px;
    gap: 6px;
    min-height: 0;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-card-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-card-sub {
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
    color: #64748b;
  }

  body.dark.use-new-ui .inv-mo-restock-card .inventory-card-sub {
    color: #94a3b8;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-card-sub strong {
    color: #0f172a;
    font-weight: 750;
  }

  body.dark.use-new-ui .inv-mo-restock-card .inventory-card-sub strong {
    color: #e2e8f0;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-metric-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
  }

  body.dark.use-new-ui .inv-mo-restock-card .inventory-metric-label {
    color: #94a3b8;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-metric-value {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.use-new-ui .inv-mo-restock-card .inventory-metric-value.inv-mo-v--eta {
    font-size: clamp(12px, 3.4vw, 15px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.dark.use-new-ui .inv-mo-restock-card .inventory-metric-value {
    color: #f1f5f9;
  }

  @media (max-width: 380px) {
    body.use-new-ui .inv-mo-restock-card .inventory-metrics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 6px;
    }
  }

  body.use-new-ui .inv-mo-empty-card {
    align-items: flex-start;
  }

  body.use-new-ui .inv-mo-empty-title {
    margin: 0;
    font-weight: 800;
    font-size: 14px;
    color: #334155;
  }

  body.dark.use-new-ui .inv-mo-empty-title {
    color: #e2e8f0;
  }

  body.use-new-ui .inv-mo-empty-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
  }

  body.use-new-ui .inv-mo-empty-card--filter .btn {
    margin-top: 10px;
  }

  body.use-new-ui .inv-mo-muted-empty {
    font-size: 13px;
    padding: 8px 2px 4px;
  }

  body.use-new-ui .inv-mo-overview-toolbar {
    margin-bottom: 10px;
  }

  body.use-new-ui .inv-mo-stock-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
  }

  body.use-new-ui .inv-mo-stock-toolbar #addBatch {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.use-new-ui .inv-mo-stock-search {
    flex: 1 1 140px;
    min-width: 0;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 14px;
  }

  body.use-new-ui .inv-mo-filter-toggle {
    flex: 0 0 auto;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 750;
    padding: 8px 12px;
  }

  body.use-new-ui .inv-mo-stock-filter-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.22);
  }

  body.use-new-ui .inv-mo-stock-filter-panel.is-open {
    display: flex;
  }

  body.dark.use-new-ui .inv-mo-stock-filter-panel {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui .inv-mo-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body.use-new-ui .inv-mo-filter-field .input {
    border-radius: 12px;
  }

  body.use-new-ui .inv-mo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
  }

  body.use-new-ui .inv-mo-batch-focus {
    margin-bottom: 10px;
    border-radius: 14px;
  }

  body.use-new-ui .inv-mo-batch-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
  }

  body.use-new-ui .inv-mo-batch-kpis .card.inv-mo-kpi-card {
    border-radius: 16px;
    padding: 12px;
    min-height: 0;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.18);
  }

  body.use-new-ui .inv-mo-stock-batch-card .inv-mo-card-head--split {
    align-items: center;
  }

  /* Customers route — compact CRM (mobile + use-new-ui only; desktop markup unchanged) */
  body.use-new-ui.route-customers #contentScroll.content-scroll,
  body.use-new-ui.route-customers .content-scroll {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.use-new-ui .customers-page .customer-table-desktop-only {
    display: none !important;
  }

  body.use-new-ui .customers-page .customers-layout--mo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-bottom: 8px;
  }

  body.use-new-ui .customers-page .customers-filter-card-mo {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-margin-top: calc(var(--mobile-topbar-h, 56px) + 10px);
  }

  body.dark.use-new-ui .customers-page .customers-filter-card-mo {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.48);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  }

  body.use-new-ui .customers-page .customers-search-mo.input,
  body.use-new-ui .customers-page .customers-select-mo.input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 14px;
    font-size: 15px;
  }

  body.use-new-ui .customers-page .customers-filter-row-mo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 0;
  }

  body.use-new-ui .customers-page .customer-tier-insight-strip--mo.cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  body.use-new-ui .customers-page .customer-tier-insight-strip--mo.cards::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .customers-page .customer-tier-mo-tile {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 118px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    box-sizing: border-box;
    min-height: 0;
  }

  body.dark.use-new-ui .customers-page .customer-tier-mo-tile {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui .customers-page .customer-tier-mo-tile-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    flex: 1;
  }

  body.use-new-ui .customers-page .customer-tier-mo-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  }

  body.use-new-ui .customers-page .customer-tier-mo-dot--vip {
    background: #fde68a;
  }

  body.use-new-ui .customers-page .customer-tier-mo-dot--loyal {
    background: #bbf7d0;
  }

  body.use-new-ui .customers-page .customer-tier-mo-dot--dormant {
    background: #e2e8f0;
  }

  body.use-new-ui .customers-page .customer-tier-mo-dot--new {
    background: #bfdbfe;
  }

  body.use-new-ui .customers-page .customer-tier-mo-dot--def {
    background: #cbd5e1;
  }

  body.dark.use-new-ui .customers-page .customer-tier-mo-dot--dormant {
    background: #64748b;
  }

  body.dark.use-new-ui .customers-page .customer-tier-mo-dot--def {
    background: #475569;
  }

  body.use-new-ui .customers-page .customer-tier-mo-label {
    flex: 1;
    min-width: 0;
    font-size: 10.5px;
    font-weight: 650;
    color: #64748b;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dark.use-new-ui .customers-page .customer-tier-mo-label {
    color: #94a3b8;
  }

  body.use-new-ui .customers-page .customer-tier-mo-value {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.15;
  }

  body.dark.use-new-ui .customers-page .customer-tier-mo-value {
    color: #f1f5f9;
  }

  body.use-new-ui .customers-page .customer-kpi-grid--mo.cards {
    display: block;
    margin: 0;
  }

  /* CRM KPI — .mobile-kpi-card (hydra-mobile-polish-final.css) */

  body.use-new-ui .customers-page .customer-analytics-grid--mo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    min-width: 0;
  }

  body.use-new-ui .customers-page .customer-source-panel--mo.panel,
  body.use-new-ui .customers-page .customer-tier-summary-card--mo.panel {
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    min-width: 0;
  }

  body.dark.use-new-ui .customers-page .customer-source-panel--mo.panel,
  body.dark.use-new-ui .customers-page .customer-tier-summary-card--mo.panel {
    border-color: rgba(71, 85, 105, 0.45);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  }

  body.use-new-ui .customers-page .customer-source-panel--mo h3,
  body.use-new-ui .customers-page .customer-tier-summary-card--mo h3 {
    font-size: 13px;
    margin: 0 0 8px;
  }

  body.use-new-ui .customers-page .customer-source-panel-note--mo {
    font-size: 11.5px;
    margin: 0 0 10px;
    line-height: 1.45;
  }

  body.use-new-ui .customers-page .customer-source-mo-host {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  body.use-new-ui .customers-page .cust-src-mo-card {
    border-radius: 16px;
    padding: 11px 12px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
  }

  body.dark.use-new-ui .customers-page .cust-src-mo-card {
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(71, 85, 105, 0.4);
  }

  body.use-new-ui .customers-page .cust-src-mo-money {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  body.use-new-ui .customers-page .cust-src-mo-dash {
    margin: 0 2px;
  }

  body.use-new-ui .customers-page .cust-src-mo-empty {
    font-size: 13px;
    padding: 8px 0;
  }

  body.use-new-ui .customers-page .customer-tier-summary-card--mo .customer-tier-layout {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  body.use-new-ui .customers-page .customer-tier-summary-card--mo .customer-tier-donut-wrap {
    margin: 0;
    transform: scale(0.94);
  }

  body.use-new-ui .customers-page .customer-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-bottom: 12px;
  }

  body.use-new-ui .customers-page .customer-mo-card {
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    min-width: 0;
    box-sizing: border-box;
  }

  body.use-new-ui .customers-page .customer-mo-card--compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
  }

  body.dark.use-new-ui .customers-page .customer-mo-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui .customers-page .customer-mo-card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
  }

  body.use-new-ui .customers-page .customer-mo-name-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }

  body.use-new-ui .customers-page .customer-mo-name {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    word-break: break-word;
  }

  body.use-new-ui .customers-page .customer-mo-card-head .customer-tier-badge {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 7px;
  }

  body.use-new-ui .customers-page .customer-mo-meta,
  body.use-new-ui .customers-page .customer-mo-stats {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.35;
    min-width: 0;
  }

  body.use-new-ui .customers-page .customer-mo-stats {
    font-size: 12px;
    font-weight: 650;
    color: #0f172a;
  }

  body.dark.use-new-ui .customers-page .customer-mo-stats {
    color: #e2e8f0;
  }

  body.use-new-ui .customers-page .customer-mo-money {
    font-variant-numeric: tabular-nums;
  }

  body.use-new-ui .customers-page .customer-mo-wrap {
    word-break: break-word;
  }

  body.use-new-ui .customers-page .customer-mo-note {
    font-size: 10.5px;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.use-new-ui .customers-page .customer-mo-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.use-new-ui .customers-page .customer-mo-actions::-webkit-scrollbar {
    display: none;
  }

  body.use-new-ui .customers-page .customer-mo-act.btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 30px;
    padding: 4px 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  body.use-new-ui .customers-page .customer-mo-act.btn.primary {
    flex: 1.1 1 0;
  }

  body.dark.use-new-ui .customers-page .customer-mo-actions {
    border-top-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui .customers-page .cust-mo-empty {
    text-align: center;
    padding: 28px 12px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.6);
  }

  body.dark.use-new-ui .customers-page .cust-mo-empty {
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(71, 85, 105, 0.45);
  }

  body.use-new-ui .customers-page .cust-mo-empty-title {
    font-weight: 750;
    margin: 8px 0 4px;
  }

  body.use-new-ui .customers-page .cust-mo-empty-desc {
    font-size: 13px;
    margin: 0;
  }

  /* Premium overrides (last-wins) to beat legacy / @layer desktop styles */
  body.use-new-ui .topbar {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  }

  body.dark.use-new-ui .topbar {
    background: rgba(15, 23, 42, 0.78) !important;
    border-bottom-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24) !important;
  }

  /* Bottom nav skin → hydra-mobile-polish-final.css (New Gym); không override ở đây */

  body.use-new-ui #mobileOwnerFab {
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 20px) !important;
    transition: box-shadow 160ms ease, transform 160ms ease !important;
  }

  body.dark.use-new-ui #mobileOwnerFab {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 2px 7px rgba(0, 0, 0, 0.18) !important;
  }

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

  body.use-new-ui .mobile-owner-action-sheet__panel {
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -22px 56px rgba(15, 23, 42, 0.18) !important;
  }

  body.use-new-ui .mobile-owner-action-sheet__close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px !important;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-revenue {
    border-top: 2px solid rgba(59, 130, 246, 0.24) !important;
    box-shadow: 0 2px 14px rgba(59, 130, 246, 0.08) !important;
  }
  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-profit {
    border-top: 2px solid rgba(139, 92, 246, 0.24) !important;
    box-shadow: 0 2px 14px rgba(139, 92, 246, 0.08) !important;
  }
  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-orders {
    border-top: 2px solid rgba(79, 70, 229, 0.24) !important;
    box-shadow: 0 2px 14px rgba(79, 70, 229, 0.08) !important;
  }
  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card.kpi-tone-cod {
    border-top: 2px solid rgba(249, 115, 22, 0.26) !important;
    box-shadow: 0 2px 14px rgba(249, 115, 22, 0.08) !important;
  }

  /* Micro interactions — press feedback (mobile native feel) */
  body.use-new-ui .notification-bell:active {
    transform: scale(0.985);
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card,
  body.use-new-ui .owner-insight-card,
  body.use-new-ui .order-mobile-card,
  body.use-new-ui .inv-mo-card.inv-mo-restock-card,
  body.use-new-ui .inv-mo-card.inv-mo-low-batch-card,
  body.use-new-ui .inv-mo-card.inv-mo-neg-batch-card,
  body.use-new-ui .customers-page .customer-mo-card {
    transition: transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  body.use-new-ui .dashboard-layout #hydraDashKpiMobile .premium-kpi-card:active,
  body.use-new-ui .owner-insight-card:active,
  body.use-new-ui .order-mobile-card:active,
  body.use-new-ui .inv-mo-card.inv-mo-restock-card:active,
  body.use-new-ui .inv-mo-card.inv-mo-low-batch-card:active,
  body.use-new-ui .inv-mo-card.inv-mo-neg-batch-card:active,
  body.use-new-ui .customers-page .customer-mo-card:active {
    transform: scale(0.992);
  }

  body.use-new-ui .order-mobile-card__quick-edit:active {
    transform: scale(0.96);
  }

  body.use-new-ui .orders-desk-chip:active {
    transform: scale(0.985);
  }

  /* Empty states — soft icons + muted hierarchy */
  body.use-new-ui .orders-mobile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body.use-new-ui .orders-mobile-empty::before {
    content: "∅";
    font-size: 20px;
    opacity: 0.55;
  }

  body.use-new-ui .cod-empty-mo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body.use-new-ui .cod-empty-mo::before {
    content: "⏳";
    font-size: 20px;
    opacity: 0.55;
  }

  body.use-new-ui .inv-mo-muted-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.use-new-ui .inv-mo-muted-empty::before {
    content: "◎";
    font-size: 18px;
    opacity: 0.55;
    transform: translateY(1px);
  }

  body.use-new-ui .page-content .route-page.route-root.mo-route-enter {
    animation: mo-route-content-enter 180ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
}