/* ============================================================
   Dubuz mobile app visual system (Yui-inspired, brand red)
   Scope: max-width 767px ONLY ? desktop ?768 unchanged.
   Rubik + F7 icons + buttons/tabs/cards/badges/forms/filters/pages
   Rubik loaded via Google Fonts CDN in mobile.blade.php
   ============================================================ */

/* ---- TYPOGRAPHY RESETS (Mobile — frontend only) ---- */
/* H1-H6 heading hierarchy for mobile */
h1, .h1 {
  font-size: 1.625rem;  /* 26px — tighter on mobile */
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

h2, .h2 {
  font-size: 1.375rem;  /* 22px */
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

h3, .h3 {
  font-size: 1.125rem;  /* 18px */
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

h4, .h4 {
  font-size: 1rem;      /* 16px */
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}

h5, .h5 {
  font-size: 0.9375rem; /* 15px — mobile body scale */
  font-weight: 600;
  line-height: 1.4;
  color: #374151;
}

h6, .h6 {
  font-size: 0.8125rem; /* 13px — mobile small */
  font-weight: 600;
  line-height: 1.4;
  color: #374151;
}

/* Mobile body default */
body {
  background: var(--page-bg, #f5f5f7);
  font-size: 15px;
  color: var(--text-body, #374151);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  :root {
    --mobile-topbar-h: 50px;
    --mobile-tabbar-h: 48px;
    --mobile-page-pad-x: 15px;
    --mobile-btn-h: 44px;
    --mobile-btn-radius: 10px;
    --mobile-card-radius: 16px;
    --mobile-promo-radius: 18px;
    --mobile-list-thumb: 84px;
    --mobile-body: 15px;
    --mobile-section-title: 18px;
    --mobile-tab-label: 10px;
    --mobile-card-shadow: 0 2px 12px rgba(85, 95, 105, 0.14);
    --radius-card: 16px;
    --radius-btn: 10px;
    --font-mobile: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  /* ?? A. Fonts ?? */
  html[dir="ltr"] body,
  html[dir="ltr"] .sng-feed-container,
  html[dir="ltr"] .page-content,
  html[dir="ltr"] .dash-body,
  html[dir="ltr"] .dash-main,
  html[dir="ltr"] .sng-tab-bar,
  html[dir="ltr"] .sng-mtopbar {
    font-family: var(--font-mobile) !important;
  }
  html[dir="ltr"] body {
    font-size: var(--mobile-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .font-logo { font-family: 'Outfit', var(--font-mobile), sans-serif !important; }

  /* Feed/marketplace shells are full-bleed; account .dash-content keeps its pad */
  .page-content,
  #page-feed,
  #page-marketplace,
  #page-search,
  #page-post-ad {
    padding-left: 0;
    padding-right: 0;
  }
  .sng-section-title,
  .wow-widget-title,
  .ld-section-title,
  .ld-features-title,
  .mp-section-title,
  .pa-section-title,
  .ld-form-title,
  .dash-page-title,
  .dash-section-title,
  h1.dash-page-title,
  .dash-page-title-block h1,
  .dash-page-title-block .dash-page-title {
    font-size: var(--mobile-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    color: var(--text-main) !important;
  }
  .dash-page-title-block p,
  .dash-page-desc,
  .page-subtitle {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    line-height: 1.45 !important;
  }
  .sng-feed-posts p,
  .ld-desc,
  .ld-card p,
  .page-content p,
  .dash-content p,
  .pa-section-hint {
    font-size: var(--mobile-body) !important;
    line-height: 1.8 !important;
  }

  /* Empty states */
  .sng-empty,
  .mp-empty,
  .dash-empty,
  .empty-state {
    padding: 36px var(--mobile-page-pad-x) !important;
    text-align: center;
  }
  .sng-empty h3,
  .mp-empty h3,
  .dash-empty h3,
  .empty-state h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  .sng-empty p,
  .mp-empty p,
  .dash-empty p,
  .empty-state p {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
  }

  /* ?? B. F7 icon sizing in chrome ?? */
  .sng-tab-btn .f7-icons,
  .sng-mtopbar .f7-icons,
  .mp-icon-btn .f7-icons,
  .sng-post-action .f7-icons,
  .dash-menu-btn .f7-icons,
  .ld-topbar .f7-icons {
    font-size: 22px;
    line-height: 1;
  }
  .sng-tab-btn .f7-icons { font-size: 22px; }
  .sng-tab-btn[data-nav-tab="post-ad"] .f7-icons,
  .sng-tab-btn[data-nav-tab="post-ad"] i,
  .sng-tab-promo .f7-icons,
  .sng-tab-promo i { font-size: 26px !important; color: #fff; }
  .sng-mtopbar-search .f7-icons { font-size: 16px; flex-shrink: 0; }
  .sng-post-action .f7-icons { font-size: 18px; }

  /* ?? C. Buttons ?? */
  .page-content .btn,
  .page-content button.btn,
  .sng-feed-container .btn,
  #page-marketplace .btn,
  #page-post-ad .btn,
  .sng-btn-primary,
  .sng-btn,
  .sng-form-actions .btn,
  .sng-form-actions button,
  .sng-form-actions a,
  .dash-btn,
  .dash-btn-primary,
  .dash-form-actions .dash-btn,
  .pa-btn,
  .pa-btn-primary,
  .btn-primary,
  button.btn-primary,
  .ld-contact-bar a,
  .ld-contact-bar button,
  .ld-mobile-contact a,
  .ld-mobile-contact button {
    min-height: var(--mobile-btn-h) !important;
    height: auto !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: var(--mobile-btn-radius) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }
  .btn-primary,
  .sng-btn-primary,
  .dash-btn-primary,
  .pa-btn-primary,
  button.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--color-on-primary, #fff) !important;
  }
  .btn-outline-secondary,
  .btn-light,
  .dash-btn-ghost,
  .sng-btn-ghost {
    background: #ecf1f5 !important;
    border: 0 !important;
    color: var(--text-main) !important;
  }
  .btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
  }

  /* ?? Tabs (bottom bar polish ? icons only, 48px) ?? */
  .sng-tab-bar {
    background: var(--bg-card) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02);
    overflow: visible !important;
  }
  /* Self-contained grid ? works without Tailwind (account layout) */
  .sng-tab-bar > .grid,
  .sng-tab-bar > .sng-tab-bar-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    height: var(--mobile-tabbar-h) !important;
    max-height: var(--mobile-tabbar-h);
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    overflow: visible !important;
  }
  .sng-tab-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #8896b8 !important;
    gap: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 44px;
    cursor: pointer;
  }
  /* Hide text labels only ? never hide the raised Post FAB */
  .sng-tab-btn > span:not(.sng-tab-promo-fab):not(.sng-tab-indicator) {
    display: none !important;
  }
  .sng-tab-btn.is-active,
  .sng-tab-btn[aria-selected="true"],
  .sng-tab-btn.active {
    color: var(--primary) !important;
  }
  .sng-tab-btn.is-active .f7-icons,
  .sng-tab-btn[aria-selected="true"] .f7-icons,
  .sng-tab-btn.active .f7-icons,
  .sng-tab-btn.is-active i,
  .sng-tab-btn.active i {
    color: var(--primary) !important;
  }
  .sng-tab-btn:active i,
  .sng-tab-btn.active i {
    transform: none !important;
  }
  .sng-tab-promo {
    overflow: visible !important;
  }
  .sng-tab-btn .sng-tab-promo-fab,
  .sng-tab-promo-fab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    margin-top: -14px !important;
    border-radius: 50% !important;
    background: var(--primary, #FF4B33) !important;
    box-shadow: 0 4px 14px rgba(255, 75, 51, 0.38) !important;
    color: #fff !important;
    transform: none !important;
  }
  .sng-tab-btn .sng-tab-promo-fab i,
  .sng-tab-promo-fab i {
    font-size: 22px !important;
    color: #fff !important;
    line-height: 1 !important;
    transform: none !important;
  }
  /* Kill legacy account bar if both ever render */
  body:has(.sng-tab-bar) .dash-mobile-bar {
    display: none !important;
  }

  /* ?? Segmented controls ?? */
  .mp-view-segmented,
  .sng-segmented,
  .dash-segmented,
  .mp-sort-segmented {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: #ecf1f5;
    border-radius: 15px;
    gap: 0;
  }
  .night-mode .mp-view-segmented,
  .night-mode .sng-segmented,
  .night-mode .dash-segmented {
    background: rgba(255, 255, 255, 0.08);
  }
  .mp-view-segmented button,
  .sng-segmented button,
  .dash-segmented button,
  .mp-view-segmented a,
  .sng-segmented a {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .mp-view-segmented button.is-active,
  .mp-view-segmented button.active,
  .sng-segmented button.is-active,
  .sng-segmented button.active,
  .dash-segmented button.is-active,
  .dash-segmented .active,
  .mp-view-segmented a.is-active {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: none;
  }
  .mp-view-segmented .f7-icons { font-size: 16px; }

  /* Marketplace toolbar as app filter chrome ? full-width under topbar */
  .mp-filters-sticky {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mp-mobile-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px 10px !important;
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border);
  }
  .mp-filter-bar {
    width: 100% !important;
  }
  .mp-filter-chip.mp-filter-chip--text {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    gap: 6px !important;
  }
  .mp-filter-chip.mp-filter-chip--text span {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .mp-filter-chip.mp-filter-chip--view.is-active,
  .mp-filter-chip.mp-filter-chip--view.active {
    background: #ecf1f5 !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
  }
  .mp-mobile-toolbar-row {
    gap: 4px !important;
  }
  .mp-icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #ecf1f5 !important;
    color: var(--text-main) !important;
    font-size: 18px !important;
  }
  .night-mode .mp-icon-btn { background: rgba(255, 255, 255, 0.08) !important; }
  .mp-icon-btn.is-active {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
  }
  .mp-mobile-count {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
  }
  .mp-mobile-search-inner {
    height: var(--mobile-btn-h) !important;
    border-radius: var(--mobile-btn-radius) !important;
    background: #ecf1f5 !important;
    border: 1px solid transparent !important;
    padding: 0 12px !important;
  }
  .mp-mobile-search-inner:focus-within {
    border-color: var(--primary) !important;
    background: var(--bg-card) !important;
  }
  .mp-mobile-search-input {
    font-size: 15px !important;
    font-family: inherit !important;
  }
  .mp-mobile-search-go {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  /* Filter chips / location bar */
  .sng-cat-chip,
  .filter-chip,
  .loc-chip,
  .mp-chip,
  .sng-chip {
    min-height: 32px;
    padding: 4px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  .sng-cat-chip.is-active,
  .filter-chip.active,
  .loc-chip.active {
    background: var(--primary) !important;
    color: #fff !important;
  }

  /* ?? D. Product / feed cards ?? */
  /* Marketplace / account cards keep Yui soft inset; feed posts are full-bleed below */
  .mp-card,
  .mp-list-row,
  .dash-listing-card,
  .acct-listing-card,
  .ld-card,
  .wow-publisher-card,
  .wow-greeting-card {
    border-radius: var(--mobile-card-radius) !important;
    box-shadow: var(--mobile-card-shadow) !important;
    overflow: hidden;
  }
  /* Feed posts: Facebook full-screen width, narrow gaps, media flush */
  .sng-feed-posts {
    padding: 0 0 12px !important;
    gap: 6px !important;
  }
  .sng-post-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
    overflow: hidden;
  }
  .sng-post-card:first-child { border-top: 1px solid var(--border) !important; }
  .sng-post-header { padding: 10px 12px 8px !important; }
  .sng-post-seller-name { font-size: 15px !important; font-weight: 700 !important; }
  .sng-post-time { font-size: 14px !important; color: var(--text-muted) !important; }
  .sng-post-media-link {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sng-post-media {
    height: auto !important;
    aspect-ratio: 5 / 4;
    max-height: 269px;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .sng-post-media img,
  .sng-post-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
  }
  .sng-post-price {
    padding: 8px 12px 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
  }
  .sng-post-title {
    padding: 4px 12px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    color: var(--text-main) !important;
  }
  .sng-post-desc {
    padding: 4px 12px 8px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .sng-post-actions {
    padding: 6px 8px 8px !important;
    border-top: 1px solid var(--border);
    gap: 2px;
  }
  .sng-post-action {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    gap: 5px !important;
    min-height: 36px;
    padding: 6px 8px !important;
    border-radius: 10px;
  }
  .sng-post-action:active { background: var(--bg-page); }

  /* Marketplace grid cards ? equal size, fixed media aspect */
  .listings-grid { gap: 10px !important; align-items: stretch !important; }
  .listings-grid > .classifi-box {
    display: flex !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  .mp-card {
    border: none !important;
    background: var(--bg-card) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
  }
  .mp-card .classifi-image,
  .mp-card .mp-card-img,
  .mp-card .aspect-square,
  .mp-card [class*="aspect"] {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    flex: 0 0 auto !important;
  }
  .mp-card .mp-card-img img,
  .mp-card .classifi-image img,
  .mp-card > a > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .mp-card .p-2,
  .mp-card .mp-card-body,
  .mp-card .classifi-content {
    padding: 10px 12px 12px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 88px !important;
  }
  .mp-card .fw-bold,
  .mp-card .mp-card-title,
  .mp-card .classifi-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #4b5563 !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    min-height: 1.3em !important;
    max-height: 1.3em !important;
  }
  .mp-card .mp-card-price,
  .mp-card .text-primary,
  .mp-card .classifi-price,
  .mp-card [style*="color:var(--primary)"] {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  .mp-card .text-muted,
  .mp-card .mp-card-meta,
  .mp-card .classifi-location {
    font-size: 12px !important;
    color: #3b82f6 !important;
  }
  .mp-card .classifi-location i {
    color: #3b82f6 !important;
  }

  /* List rows ? Yui post-horizontal (84px thumb, 15px pad, 14px title clamp) */
  .mp-list-row {
    padding: 15px 15px 15px 17px !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    border: none !important;
  }
  .mp-list-row .mp-list-thumb {
    width: var(--mobile-list-thumb) !important;
    height: var(--mobile-list-thumb) !important;
    border-radius: 15px !important;
  }
  .mp-list-row .mp-list-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
  }
  .mp-list-row .mp-list-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    color: #4b5563 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ?? E. Badges ?? */
  .sng-badge-count,
  .dash-notif-badge,
  .dash-chat-badge,
  #unread-badge,
  #unread-badge-tab {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: 2px solid var(--bg-card) !important;
  }
  .dash-badge,
  .acct-badge,
  .ld-condition-badge,
  .sng-post-negotiable,
  .biz-status-badge,
  .badge,
  span.badge {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    min-height: 20px;
  }
  .dash-nav-badge,
  .dash-nav-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    min-height: 18px;
  }
  .sng-post-negotiable {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    margin-left: 6px;
    font-size: 12px !important;
  }
  .ld-condition-badge {
    padding: 2px 10px !important;
    border-radius: 6px !important;
  }

  /* ?? F. Forms ?? */
  .page-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  .page-content select,
  .page-content textarea,
  .sng-feed-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  .sng-feed-container select,
  .sng-feed-container textarea,
  #page-marketplace input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  #page-marketplace select,
  #page-post-ad input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  #page-post-ad select,
  #page-post-ad textarea,
  #page-search input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .dash-input,
  .dash-select,
  .dash-textarea,
  .form-control,
  .pa-input,
  .pa-select,
  .pa-textarea,
  .ld-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .ld-form select,
  .ld-form textarea {
    min-height: var(--mobile-btn-h) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: var(--mobile-btn-radius) !important;
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    font-family: inherit !important;
  }
  .page-content textarea,
  #page-post-ad textarea,
  .dash-textarea,
  .pa-textarea,
  .ld-form textarea,
  .form-control[rows] {
    min-height: 100px !important;
    line-height: 1.5 !important;
  }
  .page-content input:focus,
  .page-content select:focus,
  .page-content textarea:focus,
  .dash-input:focus,
  .dash-select:focus,
  .dash-textarea:focus,
  .form-control:focus,
  .pa-input:focus,
  .pa-select:focus,
  .pa-textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
    outline: none !important;
  }
  .page-content label,
  #page-post-ad label,
  .dash-label,
  .pa-label,
  .form-label,
  .ld-form label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin-bottom: 7px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .pa-section-title,
  .ld-form-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
    margin: 18px 0 10px !important;
  }
  .select2-container--bootstrap-5 .select2-selection {
    min-height: var(--mobile-btn-h) !important;
    border-radius: var(--mobile-btn-radius) !important;
    font-size: 15px !important;
  }
  .iti { width: 100%; }
  .iti__tel-input {
    min-height: var(--mobile-btn-h) !important;
    border-radius: var(--mobile-btn-radius) !important;
  }

  /* ?? Listing sticky bar keep ?? */
  .ld-mobile-contact.ld-contact-bar a,
  .ld-mobile-contact.ld-contact-bar button,
  .ld-contact-bar a,
  .ld-contact-bar button {
    min-height: var(--mobile-btn-h) !important;
    border-radius: var(--mobile-btn-radius) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  /* Account mobile list tiles ? Yui links-list density */
  .dash-nav-link,
  .dash-list-link,
  .links-list a,
  .dash-menu a,
  .settings-list a,
  .dash-settings-link {
    min-height: 50px;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .dash-stat-icon,
  .dash-settings-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }
  /* Pad account content only ? never .dash-main (negative-margin full-bleed
     lists assume padding lives on .dash-content; padding both shells overflows). */
  .dash-content {
    padding-left: var(--mobile-page-pad-x) !important;
    padding-right: var(--mobile-page-pad-x) !important;
  }
  .dash-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .dash-list-card,
  .dash-listing-card,
  .acct-listing-card {
    border-radius: var(--mobile-card-radius) !important;
    box-shadow: var(--mobile-card-shadow) !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
  .dash-list-card img,
  .dash-listing-card img,
  .acct-listing-card img {
    border-radius: 12px !important;
  }
  /* Messages inbox ? narrow list chrome (keep WhatsApp thread UX) */
  .erp-msg-list,
  .erp-msg-conv,
  .msg-list-item,
  .conversation-item {
    min-height: 64px;
    padding: 10px 15px !important;
  }
  .sng-notif-item {
    padding: 12px 15px !important;
    gap: 12px !important;
  }
  .sng-notif-item-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  .sng-notif-menu {
    border-radius: 16px !important;
    box-shadow: var(--mobile-card-shadow) !important;
  }

  /* Topbar search densify */
  .sng-mtopbar-search {
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-family: inherit !important;
  }
  .sng-mtopbar-btn .f7-icons { font-size: 22px; }

  /* Reels / stories ? Facebook-like (104?185, 9:16, 8px gap, 14px radius) */
  .sng-reels-row {
    gap: 8px !important;
    padding: 0 14px 2px !important;
  }
  .sng-reel-card {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }
  .sng-reel-card-inner,
  .sng-reel-ring {
    border-radius: 14px !important;
  }
  .sng-reel-avatar {
    top: auto !important;
    bottom: 28px !important;
    left: 6px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .sng-reel-meta {
    padding: 6px 5px 7px !important;
    text-align: left !important;
  }
  .sng-reel-name { font-size: 10px !important; font-weight: 600 !important; }
  .sng-reel-count { font-size: 9px !important; }
  .wow-stories-row { gap: 8px !important; padding: 0 14px !important; }
  .wow-story-card {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 14px !important;
  }

  /* Sheet / filter panels */
  .mp-sheet,
  .sheet-panel,
  [class*="sheet"] .rounded-t-3xl {
    border-radius: 18px 18px 0 0 !important;
  }
  .mp-sheet h3,
  .sheet-overlay h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  /* ============================================================
     YUI COMPLETION PASS ? details / settings / cats / nav / badges / buttons
     Metrics from .tmp/Yui-Mobile-Template/css/style.css
     ============================================================ */

  /* ?? Category icon rail: light/neutral chips only (no rainbow) ?? */
  .sng-cat-rail-wrap {
    padding: 8px 0 6px !important;
  }
  .sng-cat-rail {
    gap: 10px !important;
    padding: 0 var(--mobile-page-pad-x) !important;
  }
  .sng-cat-item {
    width: 56px !important;
    gap: 5px !important;
  }
  .sng-cat-ico {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    border: 0 !important;
    background: #f0f2f5 !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
  }
  .sng-cat-item:nth-child(n) .sng-cat-ico {
    background: #f0f2f5 !important;
    color: var(--text-main) !important;
  }
  .night-mode .sng-cat-ico,
  .night-mode .sng-cat-item:nth-child(n) .sng-cat-ico {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main) !important;
  }
  .sng-cat-item.is-active .sng-cat-ico {
    background: #e8eaed !important;
    color: var(--primary) !important;
    box-shadow: none !important;
    transform: none;
  }
  .sng-cat-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    width: 54px !important;
    max-width: 54px !important;
    color: var(--text-muted) !important;
  }
  .sng-cat-item.is-active .sng-cat-label {
    color: var(--primary) !important;
    font-weight: 600 !important;
  }

  /* ?? Navigation: topbar / back / tabbar app feel ?? */
  .sng-mtopbar {
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
  }
  .sng-mtopbar-inner {
    height: var(--mobile-topbar-h) !important;
    padding: 0 var(--mobile-page-pad-x) !important;
  }
  .sng-mtopbar-btn,
  .sng-badge-icon,
  .ld-back-hit,
  .ld-topbar-hit,
  .dash-menu-btn,
  .dash-topbar-action {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .sng-mtopbar-btn:active,
  .sng-badge-icon:active,
  .ld-back-hit:active,
  .ld-topbar-hit:active,
  .dash-menu-btn:active {
    background: #ecf1f5 !important;
    transform: scale(0.94);
  }
  .night-mode .sng-mtopbar-btn:active,
  .night-mode .sng-badge-icon:active,
  .night-mode .ld-back-hit:active {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  .ld-back-hit i,
  .ld-topbar-hit i {
    font-size: 18px !important;
  }
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    min-height: var(--mobile-topbar-h) !important;
    height: auto !important;
    padding: 0 6px !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06)) !important;
    background: var(--bg-card, #fff) !important;
  }
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .ld-back-hit,
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .ld-topbar-hit,
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .ld-topbar-page-title {
    color: var(--text-main) !important;
  }
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .fw-semibold {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .sng-tab-bar {
    height: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #dedede !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .sng-tab-bar > .grid,
  .sng-tab-bar > .sng-tab-bar-inner {
    height: var(--mobile-tabbar-h) !important;
    overflow: visible !important;
  }
  .sng-tab-btn {
    min-height: 44px;
    color: #8896b8 !important;
    overflow: hidden !important;
    transition: color 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .sng-tab-btn i,
  .sng-tab-btn .f7-icons {
    font-size: 22px !important;
    transition: color 0.12s ease;
    transform: none !important;
  }
  /* Hide text labels only ? never clip/hide raised Post FAB */
  .sng-tab-btn > span:not(.sng-tab-promo-fab):not(.sng-tab-indicator) {
    display: none !important;
  }
  .sng-tab-btn.active,
  .sng-tab-btn.is-active,
  .sng-tab-btn[aria-selected="true"] {
    color: var(--primary) !important;
  }
  .sng-tab-btn.active i,
  .sng-tab-btn.is-active i,
  .sng-tab-btn.active .f7-icons,
  .sng-tab-btn.is-active .f7-icons {
    color: var(--primary) !important;
    transform: none !important;
  }
  .sng-tab-btn:active:not(.active) {
    color: var(--text-main) !important;
  }
  .sng-tab-promo {
    overflow: visible !important;
  }
  .sng-tab-btn .sng-tab-promo-fab,
  .sng-tab-promo-fab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    margin-top: -14px !important;
    border-radius: 50% !important;
    background: var(--primary) !important;
    box-shadow: 0 4px 14px rgba(255, 75, 51, 0.38) !important;
    transform: none !important;
  }
  .sng-tab-btn .sng-tab-promo-fab i,
  .sng-tab-promo-fab i {
    font-size: 22px !important;
    color: #fff !important;
    transform: none !important;
  }
  .dash-mobile-bar {
    border-top: 1px solid #dedede !important;
    box-shadow: none !important;
  }
  .dash-mobile-bar a,
  .dash-mobile-bar span {
    min-height: 44px;
    color: #8896b8 !important;
    transition: color 0.18s ease;
  }
  .dash-mobile-bar a.active,
  .dash-mobile-bar span.active {
    color: var(--primary) !important;
  }
  .dash-mobile-bar i,
  .dash-mobile-bar .f7-icons {
    font-size: 22px !important;
  }
  .dash-mobile-bar a span:last-child,
  .dash-mobile-bar span span:last-child {
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  /* ?? Listing detail: Single page anatomy (full-bleed cards) ?? */
  .ld-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ld-page > .ld-layout,
  .ld-main-col {
    padding: 0 !important;
  }
  /* Gallery + section cards: edge-to-edge like feed posts */
  .ld-page .ld-card:has(.ld-gallery-main) {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
    border-radius: 0 !important;
    overflow: hidden;
  }
  .ld-gallery-main {
    border-radius: 0 !important;
    overflow: hidden;
    height: 200px !important;
  }
  /* QuickAd overlap — content card pulled up over the fixed-height carousel */
  .ld-page.detail-immersive .detail-subsite {
    margin-top: -20px !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 10px 20px !important;
    background: var(--bg-card) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .ld-gallery-thumbs {
    padding: 10px 12px 0 !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
  }
  .ld-gallery-thumb {
    width: 56px !important;
    height: 44px !important;
    border-radius: 6px !important;
  }

  .ld-page .ld-card {
    margin: 0 0 6px !important;
    padding: 14px 12px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Similar listings section header ? title + View all */
  .ld-similar-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    min-height: 32px;
  }
  .ld-similar-title-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: var(--mobile-section-title) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    color: var(--text-main) !important;
    min-width: 0;
    flex: 1 1 auto;
  }
  .ld-similar-title-text i {
    flex-shrink: 0;
    font-size: 15px !important;
    color: var(--primary) !important;
  }
  .ld-similar-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 6px 2px 6px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-height: 32px;
  }
  .ld-similar-view-all i {
    font-size: 9px !important;
    opacity: .9;
  }
  .ld-similar-view-all:active,
  .ld-similar-view-all:hover {
    color: var(--primary-hover, #e03a24) !important;
    text-decoration: none !important;
  }
  .ld-price,
  .classifi-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--primary, #FF4B33) !important;
  }
  .ld-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
  }
  .ld-details-header .ld-title,
  .ld-title,
  .ld-page.detail-immersive .detail-subsite .classifi-title,
  .ld-page.detail-immersive .classifi-content > .classifi-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    color: var(--text-main) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .ld-meta,
  .ld-page.detail-immersive .detail-subsite .li-features span,
  .ld-page.detail-immersive .detail-subsite .classifi-location {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    line-height: 1.4;
  }
  .ld-page.detail-immersive .detail-subsite .li-features span {
    font-size: 12px !important;
  }
  .ld-topbar-page-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
  }
  .ld-desc {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--text-main) !important;
  }

  /* Meta chips (negotiable etc.) ? keep Yui pill shape; no category-with-title row */
  .ld-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }
  .ld-meta-chip,
  a.ld-meta-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    border-radius: 6px !important;
    background: #ecf1f5 !important;
    color: var(--text-main) !important;
    border: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  .ld-condition-badge,
  .ld-package-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .night-mode .ld-meta-chip,
  .night-mode a.ld-meta-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main) !important;
  }
  .ld-meta-chip.is-primary,
  .ld-package-badge:not([style]) {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
  }
  .ld-meta-chip i { font-size: 11px; opacity: 0.7; }

  .ld-social-row {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 4px !important;
  }
  .ld-social-btn {
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  .ld-social-btn:active { background: #ecf1f5; }

  /* Seller panel ? Yui single-post-author (store/seller lives here, not in date/views meta) */
  .ld-seller-mobile,
  .ld-page .ld-card.ld-seller-mobile {
    background: #f0f2f5 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 14px 12px !important;
    margin: 0 0 6px !important;
  }

  /* Hide similar listings on mobile detail (desktop ?768 keeps them) */
  .ld-similar-bottom,
  .ld-similar-empty-mobile {
    display: none !important;
  }

  /* Comments card ? polished mobile detail hierarchy */
  .ld-comments-card,
  .ld-page .ld-card.ld-comments-card {
    background: var(--bg-card) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 8px !important;
    padding: 14px var(--mobile-page-pad-x) 0 !important;
    border-top: 1px solid var(--border) !important;
  }
  .ld-comments-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 12px !important;
    gap: 8px !important;
  }
  .ld-comments-title i {
    color: var(--primary) !important;
    font-size: 15px !important;
  }
  .ld-comments-count {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
  }
  .ld-comments-list {
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
  }
  .ld-comment-item {
    gap: 10px !important;
  }
  .ld-comment-body {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: #f0f2f5 !important;
  }
  .night-mode .ld-comment-body {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  .ld-comment-meta {
    margin-bottom: 3px !important;
    gap: 6px !important;
  }
  .ld-comment-meta strong {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .ld-comment-meta span {
    font-size: 11px !important;
  }
  .ld-comment-text {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .ld-comments-empty {
    padding: 16px 8px 12px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
  }

  /* Sticky comment compose / guest CTA above Call/WA action bar */
  .ld-comment-compose,
  .ld-comment-signin {
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px calc(-1 * var(--mobile-page-pad-x)) 0 !important;
    padding: 10px var(--mobile-page-pad-x) 12px !important;
    background: var(--bg-card) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -6px 16px rgba(85, 95, 105, 0.08);
  }
  .night-mode .ld-comment-compose,
  .night-mode .ld-comment-signin {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.25);
  }
  .ld-comment-compose-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 4px 4px 4px 14px;
    border-radius: 22px;
    background: #f0f2f5;
  }
  .night-mode .ld-comment-compose-field {
    background: rgba(255, 255, 255, 0.08);
  }
  .ld-comment-input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 400;
    color: var(--text-main) !important;
    padding: 8px 0 !important;
  }
  .ld-comment-post-btn {
    flex-shrink: 0;
    height: 36px !important;
    min-width: 68px;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1;
  }
  .ld-comment-post-btn:disabled {
    opacity: 0.4;
  }
  .ld-comment-post-btn:not(:disabled):active {
    background: var(--primary-hover) !important;
  }

  /* Guest comment CTA ? matches compose row */
  .ld-comment-signin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    color: var(--text-muted);
    font-size: 15px;
  }
  .night-mode .ld-comment-signin-avatar {
    background: rgba(255, 255, 255, 0.08);
  }
  .ld-comment-signin-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px 6px 14px;
    border-radius: 22px;
    background: #f0f2f5;
    text-decoration: none !important;
  }
  .night-mode .ld-comment-signin-field {
    background: rgba(255, 255, 255, 0.08);
  }
  .ld-comment-signin-placeholder {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ld-comment-signin-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: var(--primary);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
  }
  .night-mode .ld-seller-mobile,
  .night-mode .ld-card.ld-seller-mobile {
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .ld-seller-mobile .ld-seller-avatar,
  .ld-seller-mobile .ld-seller-avatar img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
  }
  .ld-seller-mobile .ld-seller-name {
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  .ld-seller-mobile .ld-seller-type {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
  }
  .ld-seller-follow,
  .ld-seller-cta {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 15px 0 11px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  .ld-comment-avatar,
  .ld-comment-avatar img,
  .ld-comment-avatar > div {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
  }

  /* Sticky Call / WA / Chat action bar */
  .ld-mobile-contact.ld-contact-bar,
  .ld-contact-bar {
    gap: 8px !important;
    padding: 10px var(--mobile-page-pad-x) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg-card) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -2px 12px rgba(85, 95, 105, 0.1) !important;
  }
  .ld-mobile-contact.ld-contact-bar a,
  .ld-mobile-contact.ld-contact-bar button,
  .ld-contact-bar a,
  .ld-contact-bar button,
  .ld-contact-buttons-row a,
  .ld-contact-buttons-row button,
  .ld-contact-stack a {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  /* App sticky action bar (partials/listing-mobile-action-bar) */
  .ld-mobile-action-bar {
    gap: 8px !important;
    padding: 10px var(--mobile-page-pad-x) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -2px 12px rgba(85, 95, 105, 0.1) !important;
  }
  .ld-mab-btn {
    min-height: 44px !important;
    height: 44px !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  .ld-mab-btn > i,
  .ld-mab-btn .f7-icons {
    font-size: 18px !important;
  }
  .ld-mab-btn--call {
    background: var(--primary) !important;
    color: #fff !important;
  }
  .ld-mab-btn--wa {
    background: var(--color-whatsapp, #25d366) !important;
    color: #fff !important;
  }

  /* ?? All badges (post / status / counts / condition / dash) ?? */
  .sng-badge-count,
  .dash-notif-badge,
  .dash-chat-badge,
  .sng-notif-total-badge,
  #unread-badge,
  #unread-badge-tab,
  .sng-tab-btn .sng-badge-count {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    border-radius: 9px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: 2px solid var(--bg-card) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .navbar .icon .badge,
  .sng-mtopbar .badge {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  .dash-badge,
  .acct-badge,
  .biz-status-badge,
  .badge:not(.ld-meta-chip),
  span.badge:not(.ld-meta-chip),
  .sng-post-negotiable,
  .mp-badge,
  .dash-nav-pill,
  .dash-stat-badge {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    min-height: 20px;
    display: inline-flex !important;
    align-items: center;
  }
  .dash-nav-badge {
    font-size: 13px !important;
    font-weight: 500 !important;
    min-width: 20px;
    height: 20px;
    line-height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center;
  }
  .dash-nav-link.active .dash-nav-badge {
    background: var(--primary) !important;
    color: #fff !important;
  }
  .dash-nav-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    text-transform: none !important;
  }
  .sng-post-negotiable {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  .sng-reel-stack-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
  }

  /* ?? All buttons (primary / secondary / outline / bars / forms) ?? */
  .btn,
  .dz-btn,
  .sng-btn,
  .sng-btn-primary,
  .dash-btn,
  .dash-btn-primary,
  .dash-btn-ghost,
  .dash-btn-danger,
  .dash-btn-success,
  .acct-btn,
  .acct-btn-primary,
  .acct-btn-ghost,
  .pa-btn,
  .pa-btn-primary,
  .btn-primary,
  .btn-secondary,
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-light,
  .btn-success,
  .btn-danger,
  .ld-btn-call,
  .ld-btn-wa,
  .ld-btn-chat,
  .ld-btn-phone,
  .ld-btn-whatsapp,
  .wow-btn-create-post,
  .sng-form-actions .btn,
  .sng-form-actions button,
  .sng-form-actions a,
  .dash-form-actions .dash-btn,
  .dash-quick,
  button[type="submit"]:not(.sng-tab-btn):not(.mp-icon-btn):not(.ld-social-btn):not(.ld-gallery-thumb) {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  }
  .btn-primary,
  .dz-btn-primary,
  .sng-btn-primary,
  .dash-btn-primary,
  .acct-btn-primary,
  .pa-btn-primary,
  button.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
  }
  .btn-primary:active,
  .dash-btn-primary:active,
  .sng-btn-primary:active {
    background: var(--primary-hover) !important;
    transform: scale(0.98);
  }
  .btn-secondary,
  .btn-light,
  .dash-btn-ghost,
  .acct-btn-ghost,
  .sng-btn-ghost,
  .ld-btn-chat {
    background: #ecf1f5 !important;
    border: 0 !important;
    color: var(--text-main) !important;
  }
  .btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--primary) !important;
    color: var(--primary) !important;
  }
  .btn-outline-secondary {
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text-main) !important;
  }
  /* Icon-only compact stays 44?44 square */
  .dash-btn-icon,
  .btn-icon,
  .dz-btn-icon {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
  }
  /* Small chips stay compact */
  .btn-sm,
  .dash-btn-sm,
  .dz-btn-sm {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .dash-quick {
    min-height: 72px !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 10px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
  }
  .dash-quick i { font-size: 20px !important; }

  /* ?? Settings / account list rows (Yui settings-list) ?? */
  .dash-nav-link {
    min-height: 50px !important;
    padding: 11px 15px !important;
    gap: 15px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .dash-nav-link .dash-colored-icon,
  .dash-nav-link > .dash-ico {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 15px !important;
    flex-shrink: 0;
  }
  /* Fallback: style bare FA icons as colored tiles when no wrapper */
  .dash-nav:not(.dash-nav-desktop-keep) .dash-nav-link > i.fas,
  .dash-nav:not(.dash-nav-desktop-keep) .dash-nav-link > i.fa-solid,
  .dash-sidebar .dash-nav-link > i.fas,
  .dash-sidebar .dash-nav-link > i.fa-solid {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 14px !important;
    background: #089bea;
  }
  .dash-nav-group:nth-child(n) .dash-nav-link > i {
    background: #f0f2f5 !important;
    color: var(--text-main) !important;
  }
  .dash-nav-group:nth-child(4) .dash-nav-link.dash-nav-danger > i { background: #ff4530 !important; }
  .dash-nav-link.active {
    background: var(--primary-light) !important;
    box-shadow: none !important;
  }
  .dash-nav-link.active > i,
  .dash-nav-link.active .dash-colored-icon {
    box-shadow: 0 0 0 2px var(--primary-light);
  }
  .dash-nav-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted) !important;
    padding: 16px 15px 6px !important;
  }
  .dash-sidebar-user {
    padding: 20px 15px 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .dash-sidebar-user .dubuz-avatar,
  .dash-sidebar-user img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
  }
  .dash-user-name {
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
  }
  .dash-user-type {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #99a0a7 !important;
  }
  .dash-stat-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  .dash-topbar {
    height: var(--mobile-topbar-h) !important;
    padding: 0 8px 0 4px !important;
  }
  .dash-topbar-date { display: none !important; }

  /* Profile / forms consistency */
  .profile-photo-zone {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
  }
  .profile-switch-link {
    min-height: 56px;
    padding: 12px 15px !important;
    border-radius: 15px !important;
    gap: 12px !important;
  }
  .profile-switch-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  .dash-info-grid {
    gap: 8px !important;
  }
  .dash-info-item {
    border-radius: 12px !important;
    padding: 12px !important;
  }

  /* Messages inbox chrome */
  .dash-messages-page .chat-item,
  .dash-chat-row,
  .erp-msg-list .msg-row,
  .conversation-item {
    min-height: 68px !important;
    padding: 12px 15px !important;
    gap: 12px !important;
  }
  .dash-messages-page .erp-msg-avatar img,
  .dash-messages-page .erp-msg-avatar > div,
  .dash-chat-avatar img,
  .dash-chat-avatar > div {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
  }
  .dash-messages-page .cell-info .name,
  .dash-chat-row .name {
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  .dash-messages-page .cell-info .preview,
  .dash-chat-row .preview {
    font-size: 13px !important;
    color: var(--text-muted) !important;
  }
  .dash-messages-page .sidebar-search .search-wrap,
  .dash-messages-page .search-wrap {
    height: 44px !important;
    border-radius: 10px !important;
    background: #ecf1f5 !important;
  }

  /* Notifications panel */
  .sng-notif-menu {
    border-radius: 16px !important;
    box-shadow: var(--mobile-card-shadow) !important;
    overflow: hidden;
  }
  .sng-notif-head {
    padding: 12px 15px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .sng-notif-item {
    padding: 12px 15px !important;
    gap: 12px !important;
    min-height: 64px;
  }
  .sng-notif-item-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  .sng-notif-item-title {
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  .sng-notif-item-desc {
    font-size: 13px !important;
  }
  .sng-notif-item-time {
    font-size: 12px !important;
  }
  .sng-notif-foot,
  .sng-notif-markall {
    min-height: 44px;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Filters / segmented / sheets consistency */
  .mp-view-segmented,
  .sng-segmented,
  .dash-segmented,
  .dash-tabs,
  .dash-tabs-inline {
    background: #ecf1f5 !important;
    border-radius: 12px !important;
    padding: 3px !important;
  }
  .dash-tabs .dash-tab,
  .dash-tabs-inline .dash-tab {
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .dash-tabs .dash-tab.active,
  .dash-tabs-inline .dash-tab.active {
    background: var(--primary) !important;
    color: #fff !important;
  }
  .mp-sheet .btn,
  .sheet-overlay .btn,
  .mp-sheet button[type="submit"] {
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* ?? Feed post media badge overlay (Featured, Premium, Condition on image) ?? */
  .sng-post-media-link { position: relative; display: block; overflow: hidden; }
  .sng-post-media-badges {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    display: flex; flex-direction: column; gap: 4px;
    pointer-events: none;
  }
  .sng-post-media-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600; line-height: 1.2;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .sng-post-badge-premium {
    background: rgba(255, 75, 51, 0.85); color: #fff;
  }
  .sng-post-badge-condition {
    background: rgba(0, 0, 0, 0.6); color: #fff;
  }
  .sng-post-badge-premium i,
  .sng-post-badge-condition i { font-size: 10px; }

  /* ?? Feed post store row below listing ?? */
  .sng-post-store-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 6px;
  }
  .sng-post-store-type {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600;
  }
  .sng-post-badge-biz {
    background: var(--primary-light); color: var(--primary);
  }
  .sng-post-badge-ind {
    background: var(--bg-page); color: var(--text-muted);
  }
  .sng-post-store-name {
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ?? Messages full-height layout (mobile) ?? */
  .dash-messages-page .messaging-wrapper {
    height: calc(100vh - 56px - var(--mobile-tabbar-h) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 56px - var(--mobile-tabbar-h) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  .dash-messages-page .chat-sidebar {
    height: 100% !important;
    max-height: 100% !important;
  }
  .dash-messages-page .chat-window {
    height: 100% !important;
    max-height: 100% !important;
  }
  .dash-messages-page .messages-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  .dash-messages-page .message-input-area {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
    background: var(--bg-card, #ffffff) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: none !important;
  }
  .dash-messages-page .messaging-wrapper {
    background: var(--bg-page) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .dash-messages-page .chat-window,
  .dash-messages-page .messages-container {
    background: var(--bg-card, #ffffff) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .dash-messages-page .chat-header {
    background: color-mix(in srgb, var(--primary) 14%, #ffffff) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  }
  .dash-messages-page .message.sent .bubble {
    background: #fde8e8 !important;
    color: var(--text-main) !important;
  }
  .dash-messages-page .message.received .bubble {
    background: #f8fafc !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
  }
}

/* Feed author name — all breakpoints (desktop ≥768 + mobile) */
.sng-post-seller-name {
  font-weight: 700 !important;
}

/* Desktop feed media — fixed box (must beat phone aspect-ratio) */
@media (min-width: 768px) {
  .sng-post-media {
    height: 269px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* ?? Shared tab bar chrome (all breakpoints helpers) ?? */
@media (min-width: 1024px) {
  .sng-hide-desktop { display: none !important; }
}
@media (max-width: 1023px) {
  .sng-tab-bar[data-sng-tab-bar] {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 40;
    background: var(--bg-card, #fff);
    overflow-x: hidden;
    overflow-y: visible;
  }
  .sng-tab-bar[data-sng-tab-bar] > .sng-tab-bar-inner,
  .sng-tab-bar[data-sng-tab-bar] > .grid {
    width: 100%;
    max-width: min(32rem, 100%);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
  body:has(.sng-tab-bar) .dash-mobile-bar {
    display: none !important;
  }

  /* Account mobile shell ? lock width so wide tables/lists cannot grow the viewport */
  html:has(body.dash-body),
  body.dash-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.dash-body .dash-main,
  body.dash-body .dash-content {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.dash-body .dash-main {
    overflow-x: hidden;
  }
  body.dash-body .dash-card,
  body.dash-body .dash-charts-grid,
  body.dash-body .dash-two-col,
  body.dash-body .dash-stats,
  body.dash-body .dash-quick-grid,
  body.dash-body .dash-table-wrap,
  body.dash-body .dash-overview-head,
  body.dash-body .dash-chart-wrap {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.dash-body .dash-chart-wrap canvas {
    max-width: 100% !important;
  }
}