/**

 * Hydra mobile — route CRM / Khách hàng (restyle only, desktop ≥901px unchanged)

 */

@media (max-width: 900px) {

  body.use-new-ui.route-customers #contentScroll.content-scroll,

  body.use-new-ui.route-customers .content-scroll {

    padding-bottom: var(--hydra-mo-scroll-bottom-pad, calc(72px + 36px + env(safe-area-inset-bottom, 0px))) !important;

  }



  body.use-new-ui.route-customers .customers-page .customers-layout--mo {

    display: flex;

    flex-direction: column;

    gap: 10px !important;

    padding: 0 0 12px;

    min-width: 0;

    box-sizing: border-box;

  }



  /* A. CRM Filter Card */

  body.use-new-ui.route-customers .customers-page .customers-filter-card-mo {

    padding: 14px 16px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid var(--hydra-border-soft);

    box-shadow: var(--hydra-shadow);

    display: flex;

    flex-direction: column;

    gap: 10px;

    scroll-margin-top: calc(var(--mobile-topbar-h, 56px) + 10px);

  }



  body.use-new-ui.route-customers .customers-page .customers-search-mo {

    width: 100%;

    min-height: 44px;

    max-height: 48px;

    padding: 0 14px;

    border-radius: 12px;

    border: 1px solid var(--hydra-border-soft);

    background: #fff;

    font-size: 16px;

    box-sizing: border-box;

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-row-mo {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    min-width: 0;

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-row-mo:last-child {

    grid-template-columns: 1fr;

  }



  body.use-new-ui.route-customers .customers-page .customers-select-mo {

    width: 100%;

    min-height: 44px;

    max-height: 48px;

    padding: 0 12px;

    border-radius: 12px;

    border: 1px solid var(--hydra-border-soft);

    background: #fff;

    font-size: 15px;

    box-sizing: border-box;

  }



  /* E. Segment chip strip */

  body.use-new-ui.route-customers .customers-page .customer-tier-insight-strip--mo.cards {

    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: center;

    gap: 6px;

    margin: 0;

    padding: 0 0 2px;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);

    mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-insight-strip--mo.cards::-webkit-scrollbar {

    display: none;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-tile {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 5px;

    flex: 0 0 auto;

    min-width: 100px;

    min-height: 34px;

    max-height: 36px;

    padding: 4px 10px;

    border-radius: 10px;

    background: #fff;

    border: 1px solid var(--hydra-border-soft);

    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);

    box-sizing: border-box;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-tile-body {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 6px;

    min-width: 0;

    flex: 1 1 auto;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-dot {

    width: 6px;

    height: 6px;

    border-radius: 999px;

    flex-shrink: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-dot--vip {

    background: #fbbf24;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-dot--loyal {

    background: #22c55e;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-dot--dormant {

    background: #f97316;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-dot--new {

    background: #3b82f6;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-label {

    flex: 1 1 auto;

    min-width: 0;

    font-size: 11.5px;

    font-weight: 650;

    color: var(--hydra-text-muted);

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-mo-value {

    flex-shrink: 0;

    font-size: 15px;

    font-weight: 800;

    color: var(--hydra-text);

    line-height: 1.1;

  }



  /* B. KPI CRM */

  body.use-new-ui.route-customers .customers-page .customer-kpi-grid--mo {

    display: block;

    margin: 0;

    padding: 0;

  }



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



  /* Analytics panels */

  body.use-new-ui.route-customers .customers-page .customer-analytics-grid--mo {

    display: flex !important;

    flex-direction: column !important;

    gap: var(--hydra-mobile-card-gap, 14px) !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    margin-inline: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    min-width: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-analytics-grid--mo > .customer-source-panel--mo,

  body.use-new-ui.route-customers .customers-page .customer-analytics-grid--mo > .customer-tier-summary-card--mo {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    margin-inline: 0 !important;

    align-self: stretch !important;

    box-sizing: border-box !important;

  }



  body.use-new-ui.route-customers .customers-page .customer-source-panel--mo,

  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo {

    border-radius: 18px;

    padding: 17px 18px;

    background: #fff;

    border: 1px solid var(--hydra-border-soft);

    box-shadow: var(--hydra-shadow);

    margin: 0;

    min-width: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-source-panel--mo h3,

  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo h3 {

    font-size: clamp(18px, 4.8vw, 22px) !important;

    font-weight: 800 !important;

    letter-spacing: -0.02em !important;

    line-height: 1.15 !important;

    color: var(--hydra-text);

    margin: 0 0 12px;

    padding: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-source-panel-note--mo {

    display: none !important;

    margin: 0 0 12px;

    font-size: 12px;

    line-height: 1.35;

    color: var(--hydra-text-muted);

  }



  body.use-new-ui.route-customers .customers-page .customer-source-mo-host {

    display: flex;

    flex-direction: column;

    gap: 8px;

    width: 100%;

    max-width: none;

    margin: 0;

    margin-inline: 0;

    min-width: 0;

    box-sizing: border-box;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-card {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto auto;

    align-items: center;

    gap: 10px 12px;

    width: 100%;

    max-width: none;

    margin: 0;

    margin-inline: 0;

    min-height: 44px;

    padding: 10px 12px;

    border-radius: 12px;

    background: var(--hydra-bg-warm-soft);

    border: 1px solid var(--hydra-border-soft);

    box-shadow: none;

    font-size: 12.5px;

    line-height: 1.2;

    box-sizing: border-box;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-name {

    font-size: 12.5px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    color: var(--hydra-text);

    text-align: left;

    min-width: 0;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-count {

    font-size: 12.5px;

    font-weight: 600;

    color: var(--hydra-text-muted);

    text-align: right;

    white-space: nowrap;

    flex-shrink: 0;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-count::before {

    content: none;

    display: none;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-money {

    font-size: 13px;

    font-weight: 700;

    color: var(--hydra-orange-700);

    font-variant-numeric: tabular-nums;

    text-align: right;

    white-space: nowrap;

    flex-shrink: 0;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-money::before {

    content: none;

    display: none;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-stats {

    display: contents;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-line,

  body.use-new-ui.route-customers .customers-page .cust-src-mo-dash {

    display: none;

  }



  /* D. Donut + legend */

  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-layout {

    flex-direction: column;

    align-items: stretch;

    gap: 8px;

    width: 100%;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-donut-wrap {

    margin: 0 auto;

    transform: none;

    padding: 0;

    width: 88px;

    min-width: 88px;

    height: 88px;

    max-width: 88px;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-donut {

    width: 88px;

    height: 88px;

    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.05);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-donut::after {

    inset: 14px;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-total {

    font-size: 14px;

    font-weight: 800;

    color: var(--hydra-text);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-summary {

    display: flex;

    flex-direction: column;

    gap: 4px;

    width: 100%;

    padding-bottom: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    min-height: 38px;

    padding: 6px 10px;

    border-radius: 10px;

    background: var(--hydra-bg-warm-soft);

    border: 1px solid var(--hydra-border-soft);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .tier-count {

    font-size: 12px;

    font-weight: 700;

    color: var(--hydra-text);

    white-space: nowrap;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo .customer-tier-badge {

    font-size: 10.5px;

    padding: 3px 7px;

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-badge.tier-vip {

    background: #fef3c7;

    color: #b45309;

    border: 1px solid rgba(251, 191, 36, 0.35);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-badge.tier-loyal {

    background: #ecfdf5;

    color: #15803d;

    border: 1px solid rgba(34, 197, 94, 0.25);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-badge.tier-dormant {

    background: #fff7ed;

    color: #c2410c;

    border: 1px solid rgba(249, 115, 22, 0.28);

  }



  body.use-new-ui.route-customers .customers-page .customer-tier-badge.tier-new {

    background: #eff6ff;

    color: #1d4ed8;

    border: 1px solid rgba(59, 130, 246, 0.25);

  }



  /* F. Danh sách khách */

  body.use-new-ui.route-customers .customers-page .customer-mobile-list {

    display: flex;

    flex-direction: column;

    gap: 10px !important;

    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-card {

    border-radius: 18px;

    padding: 14px 16px;

    background: #fff;

    border: 1px solid var(--hydra-border-soft);

    box-shadow: var(--hydra-shadow);

    display: flex;

    flex-direction: column;

    gap: 6px;

    max-height: none;

    cursor: pointer;

    box-sizing: border-box;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-card--compact {

    gap: 6px;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-row--head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    min-width: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-name {

    font-size: 17px !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    color: var(--hydra-text);

    word-break: break-word;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-row--head .customer-tier-badge {

    flex-shrink: 0;

    font-size: 10.5px;

    font-weight: 800;

    padding: 4px 8px;

    border-radius: 999px;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-row--meta,

  body.use-new-ui.route-customers .customers-page .customer-mo-row--money-last {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 0 6px;

    min-width: 0;

    font-size: 13px;

    line-height: 1.3;

    color: var(--hydra-text-muted);

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-sep {

    color: var(--hydra-text-muted);

    opacity: 0.65;

    font-weight: 500;

    user-select: none;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-code {

    font-weight: 800;

    color: var(--hydra-orange-700);

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-source,

  body.use-new-ui.route-customers .customers-page .customer-mo-orders {

    font-weight: 600;

    color: var(--hydra-text-secondary);

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-row--money-last .customer-mo-money {

    font-size: clamp(16px, 4.2vw, 18px);

    font-weight: 800;

    color: var(--hydra-orange-700);

    font-variant-numeric: tabular-nums;

    line-height: 1.2;

    flex-shrink: 0;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-last {

    font-size: 12px;

    font-weight: 500;

    color: var(--hydra-text-muted);

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    flex: 1 1 auto;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-note,

  body.use-new-ui.route-customers .customers-page .customer-mo-row--ids,

  body.use-new-ui.route-customers .customers-page .customer-mo-row--spent,

  body.use-new-ui.route-customers .customers-page .customer-mo-row--orders,

  body.use-new-ui.route-customers .customers-page .customer-mo-row--last {

    display: none !important;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 2px;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-act {

    min-height: 40px;

    padding: 0 10px;

    border-radius: 10px;

    font-size: 12.5px;

    font-weight: 700;

    flex: 1 1 auto;

    min-width: 0;

    justify-content: center;

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-act.btn.primary {

    border: none;

    background: var(--hydra-gradient, linear-gradient(155deg, #fb923c 0%, #f97316 42%, #ea580c 100%));

    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.22);

  }



  body.use-new-ui.route-customers .customers-page .customer-mo-meta,

  body.use-new-ui.route-customers .customers-page .customer-mo-stats,

  body.use-new-ui.route-customers .customers-page .customer-mo-card-head {

    display: none;

  }



  /* G. Empty state */

  body.use-new-ui.route-customers .customers-page .cust-mo-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 32px 18px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid var(--hydra-border-soft);

    box-shadow: var(--hydra-shadow);

    text-align: center;

    max-height: none;

  }



  body.use-new-ui.route-customers .customers-page .cust-mo-empty-ico {

    font-size: 28px;

    line-height: 1;

    opacity: 0.55;

  }



  body.use-new-ui.route-customers .customers-page .cust-mo-empty-title {

    font-size: 15px;

    font-weight: 600;

    color: var(--hydra-text-muted);

    margin: 0;

  }



  body.use-new-ui.route-customers .customers-page .cust-mo-empty-desc {

    display: none;

  }

  body.use-new-ui.route-customers .customers-page .cust-mo-empty--filter .cust-mo-empty-desc {
    display: block;
    margin: 8px 0 12px;
    font-size: 13px;
    line-height: 1.4;
  }

  body.use-new-ui.route-customers .customers-page .cust-mo-empty--filter .btn {
    margin-top: 4px;
  }



  body.use-new-ui.route-customers .hydra-currency-unit {

    font-size: 0.58em;

    font-weight: 700;

    margin-left: 1px;

    opacity: 0.88;

    vertical-align: baseline;

  }



  body.dark.use-new-ui.route-customers .customers-page .customers-filter-card-mo,

  body.dark.use-new-ui.route-customers .customers-page .customer-kpi-mo-chip,

  body.dark.use-new-ui.route-customers .customers-page .customer-tier-mo-tile,

  body.dark.use-new-ui.route-customers .customers-page .customer-source-panel--mo,

  body.dark.use-new-ui.route-customers .customers-page .customer-tier-summary-card--mo,

  body.dark.use-new-ui.route-customers .customers-page .customer-mo-card,

  body.dark.use-new-ui.route-customers .customers-page .cust-mo-empty {

    background: rgba(30, 41, 59, 0.9);

    border-color: rgba(148, 163, 184, 0.18);

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-trigger {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    width: 100%;

    min-height: 50px;

    max-height: 52px;

    margin: 0;

    padding: 0 16px;

    border-radius: 22px;

    border: 1px solid var(--hydra-border-soft);

    background: #fff;

    box-shadow: var(--hydra-shadow);

    box-sizing: border-box;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    color: var(--hydra-text-secondary);

    font-size: 15px;

    font-weight: 700;

    text-align: left;

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-trigger__ico {

    flex: 0 0 auto;

    font-size: 18px;

    line-height: 1;

    opacity: 0.85;

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-trigger__txt {

    flex: 1 1 auto;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-trigger__badge {

    flex: 0 0 auto;

    padding: 3px 8px;

    border-radius: 999px;

    background: var(--hydra-accent-soft);

    color: var(--hydra-orange-700);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.02em;

    line-height: 1.2;

  }



  body.use-new-ui.route-customers .customers-page .customers-filter-card-mo {

    display: none !important;

  }

}



@media (max-width: 900px) {

  body.use-new-ui .customers-filter-sheet {

    position: fixed;

    inset: 0;

    z-index: var(--z-mobile-sheet, 8000);

    pointer-events: none;

    visibility: hidden;

  }



  body.use-new-ui.customers-filter-sheet-open .customers-filter-sheet {

    pointer-events: auto;

    visibility: visible;

  }



  body.use-new-ui .customers-filter-sheet__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, 0.38);

    opacity: 0;

    transition: opacity 0.2s ease;

  }



  body.use-new-ui.customers-filter-sheet-open .customers-filter-sheet__backdrop {

    opacity: 1;

  }



  body.use-new-ui .customers-filter-sheet__panel {

    position: absolute;

    left: 0;

    right: 0;

    bottom: calc(var(--hydra-bottom-nav-h, 76px) + env(safe-area-inset-bottom, 0px));

    display: flex;

    flex-direction: column;

    max-height: min(78vh, 620px);

    border-radius: 26px 26px 0 0;

    background: var(--hydra-bg-warm-soft, #fffaf5);

    border: 1px solid var(--hydra-border-soft);

    border-bottom: 0;

    box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.14);

    transform: translateY(100%);

    transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);

    overflow: hidden;

    box-sizing: border-box;

  }



  body.use-new-ui.customers-filter-sheet-open .customers-filter-sheet__panel {

    transform: translateY(0);

  }



  body.use-new-ui .customers-filter-sheet__handle {

    width: 40px;

    height: 4px;

    margin: 8px auto 6px;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.45);

    flex-shrink: 0;

  }



  body.use-new-ui .customers-filter-sheet__head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 4px 16px 10px;

    flex-shrink: 0;

  }



  body.use-new-ui .customers-filter-sheet__title {

    margin: 0;

    font-size: 17px;

    font-weight: 800;

    color: var(--hydra-text);

    letter-spacing: -0.02em;

  }



  body.use-new-ui .customers-filter-sheet__close {

    flex: 0 0 44px;

    width: 44px;

    height: 44px;

    min-height: 44px;

    border: 0;

    border-radius: 12px;

    background: #fff;

    color: #64748b;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);

  }



  body.use-new-ui .customers-filter-sheet__body {

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    padding: 0 16px 12px;

  }



  body.use-new-ui .customers-filter-sheet-fields {

    display: flex;

    flex-direction: column;

    gap: 10px;

  }



  body.use-new-ui .customers-filter-sheet__body .customers-search-mo,

  body.use-new-ui .customers-filter-sheet__body .customers-select-mo {

    width: 100%;

    min-height: 44px;

    padding: 0 14px;

    border-radius: 12px;

    border: 1px solid var(--hydra-border-soft);

    background: #fff;

    font-size: 16px;

    box-sizing: border-box;

  }



  body.use-new-ui .customers-filter-sheet__body .customers-filter-row-mo {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    min-width: 0;

  }



  body.use-new-ui .customers-filter-sheet__body .customers-filter-row-mo:last-child {

    grid-template-columns: 1fr;

  }



  body.use-new-ui .customers-filter-sheet__foot {

    flex-shrink: 0;

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 10px;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));

    border-top: 1px solid var(--hydra-border-soft);

    background: rgba(255, 255, 255, 0.96);

  }



  body.use-new-ui .customers-filter-sheet__clear.btn {

    min-height: 48px;

    border-radius: 14px;

    font-weight: 700;

    background: #fff;

    border: 1px solid var(--hydra-border-soft);

    color: var(--hydra-text-secondary);

  }



  body.use-new-ui .customers-filter-sheet__apply.btn.primary {

    min-height: 48px;

    border-radius: 14px;

    font-weight: 700;

    border: none;

    background: var(--hydra-gradient, linear-gradient(155deg, #fb923c 0%, #f97316 42%, #ea580c 100%));

    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.28);

  }



  body.dark.use-new-ui .customers-filter-sheet__panel {

    background: rgba(15, 23, 42, 0.98);

    border-color: rgba(148, 163, 184, 0.16);

  }



  body.dark.use-new-ui .customers-filter-sheet__foot {

    background: rgba(15, 23, 42, 0.98);

  }



  body.dark.use-new-ui .customers-filter-sheet__close {

    background: rgba(30, 41, 59, 0.9);

    color: #94a3b8;

  }



  /* CRM source panel — full width gutter sync (terminal; beats 2-col analytics + polish) */

  body.use-new-ui.route-customers .customers-page .customer-analytics-grid.customer-analytics-grid--mo {

    display: flex !important;

    grid-template-columns: none !important;

  }



  body.use-new-ui.route-customers .customers-page .customer-source-panel--mo.panel {

    width: 100% !important;

    max-width: none !important;

    margin-inline: 0 !important;

    padding: 17px 18px !important;

    box-sizing: border-box !important;

  }



  body.use-new-ui.route-customers .customers-page .customer-source-mo-host,

  body.use-new-ui.route-customers .customers-page .customer-source-mo-host .cust-src-mo-card,

  body.use-new-ui.route-customers .customers-page .customer-source-mo-host .cust-src-mo-empty {

    width: 100% !important;

    max-width: none !important;

    margin-inline: 0 !important;

    box-sizing: border-box !important;

  }



  body.use-new-ui.route-customers .customers-page .cust-src-mo-card {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto auto !important;

    justify-items: stretch;

    align-self: stretch;

  }

}



@media (min-width: 901px) {

  #customersFilterSheet {

    display: none !important;

  }

}

/* —— CRM list-first layout (≤900px) —— */
@media (max-width: 900px) {
  body.use-new-ui.route-customers .customers-layout--crm {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    padding: 0 0 4px;
    min-width: 0;
  }

  body.use-new-ui.route-customers .customers-crm-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    padding: 0 0 4px;
    margin: 0;
    background: transparent !important;
  }

  body.use-new-ui.route-customers .customers-crm-toolbar-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
  }

  body.use-new-ui.route-customers .customers-crm-search,
  body.use-new-ui.route-customers .customers-crm-search--full {
    width: 100% !important;
    min-height: 44px !important;
    max-height: 46px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui.route-customers .customers-sort-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    max-height: 46px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  body.use-new-ui.route-customers .customers-crm-report-btn {
    min-height: 44px !important;
    max-height: 46px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
    border: 1px solid var(--hydra-border-soft, #e2e8f0) !important;
    background: #fff !important;
    color: #334155 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  body.use-new-ui.route-customers .customers-crm-report-btn:active {
    transform: scale(0.98);
  }

  body.use-new-ui.route-customers .customers-filter-trigger--icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 46px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--hydra-border-soft, #e2e8f0);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
  }

  body.use-new-ui.route-customers .customers-filter-trigger--icon .customers-filter-trigger__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97316;
    font-size: 0;
    overflow: hidden;
  }

  body.use-new-ui.route-customers .customer-crm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 0;
  }

  body.use-new-ui.route-customers .customer-crm-card {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  }

  body.use-new-ui.route-customers .customer-crm-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
  }

  body.use-new-ui.route-customers .customer-crm-card__name {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    color: #0f172a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.use-new-ui.route-customers .customer-crm-card__phone {
    font-size: 12px;
    line-height: 1.3;
    color: #64748b;
    margin-bottom: 4px;
  }

  body.use-new-ui.route-customers .customer-crm-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #334155;
  }

  body.use-new-ui.route-customers .customer-crm-card__spent {
    color: #ea580c;
    font-weight: 750;
  }

  body.use-new-ui.route-customers .customer-crm-card__sep {
    color: #94a3b8;
    font-weight: 400;
  }

  body.use-new-ui.route-customers .customer-crm-card__orders,
  body.use-new-ui.route-customers .customer-crm-card__last {
    color: #475569;
    font-weight: 600;
  }

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

  body.use-new-ui.route-customers .customer-crm-card__arch {
    font-size: 10px;
    padding: 1px 6px;
  }
}

@media (max-width: 640px) {
  body.use-new-ui.route-customers #contentScroll.content-scroll,
  body.use-new-ui.route-customers .content-scroll {
    padding-bottom: calc(var(--hydra-bottom-nav-h, 72px) + 20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.use-new-ui.route-customers .customers-layout--crm {
    gap: 6px !important;
  }

  body.use-new-ui.route-customers .customers-crm-toolbar {
    gap: 6px;
    padding-bottom: 2px;
  }

  body.use-new-ui.route-customers .customers-crm-toolbar-row2 {
    gap: 6px;
  }

  body.use-new-ui.route-customers .customers-crm-report-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  body.use-new-ui.route-customers .customer-crm-list {
    gap: 8px;
  }

  body.use-new-ui.route-customers .customer-crm-card {
    padding: 11px 12px;
    border-radius: 11px;
  }

  body.use-new-ui.route-customers .customer-crm-card__name {
    font-size: 13px;
  }

  body.use-new-ui.route-customers .customer-crm-card__phone {
    font-size: 11px;
    margin-bottom: 3px;
  }

  body.use-new-ui.route-customers .customer-crm-card__meta {
    font-size: 12px;
  }
}