/* Mobile composition — True App Store Production Quality.
   Desktop is intentionally outside this media query (max-width: 767px). */

@media (max-width: 767px) {
  :root {
    --mobile-gutter: 12px;
    --mobile-section: 14px;
  }

  /* 1. View & Global Mobile Canvas */
  #screen-app .view,
  body.divido-premium #screen-app .view,
  body.divido-premium #screen-app :is(#view-wallet, #view-investments, #view-rewards, #view-profile, #view-detail, #view-subpage) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px var(--mobile-gutter) calc(76px + env(safe-area-inset-bottom)) !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    background: transparent !important;
  }

  /* 2. Compact Header */
  #screen-app .app-header {
    min-height: 52px !important;
    height: 52px !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  #screen-app #hdr-logo {
    width: 80px !important;
    max-width: 24vw !important;
    height: auto !important;
  }

  #screen-app .hdr-icons {
    display: flex !important;
    gap: 3px !important;
  }

  #screen-app .hdr-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 100px !important;
  }

  #screen-app :is(#hdr-saved, #hdr-bell, #dark-toggle) .icon-img {
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    mask: var(--header-icon) center / contain no-repeat;
    -webkit-mask: var(--header-icon) center / contain no-repeat;
  }

  #screen-app :is(#hdr-saved, #hdr-bell, #dark-toggle) .icon-img::before {
    content: none !important;
  }

  #hdr-saved {
    --header-icon: url('/icons/bookmark.svg');
  }

  #hdr-bell {
    --header-icon: url('/icons/notification.svg');
  }

  #dark-toggle {
    --header-icon: url('/icons/moon.svg');
  }

  #dark-toggle:has(.ph-sun) {
    --header-icon: url('/icons/sun.svg');
  }

  /* 3. Sleek Floating Rounded-Full Bottom Tabbar */
  #screen-app .tabbar,
  body.divido-premium #screen-app .tabbar,
  .tabbar {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding: 6px 8px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  body.dark #screen-app .tabbar,
  body.divido-premium.dark #screen-app .tabbar {
    background: rgba(26, 24, 22, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  }

  #screen-app .tabbar-btn,
  body.divido-premium #screen-app .tabbar-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: 42px !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9999px !important;
  }

  #screen-app .tabbar-btn .tab-ic,
  body.divido-premium #screen-app .tabbar-btn .tab-ic {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 21px !important;
    color: #71717A !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
  }

  #screen-app .tabbar-btn .tab-ic::before,
  body.divido-premium #screen-app .tabbar-btn .tab-ic::before {
    display: inline-block !important;
  }

  #screen-app .tabbar-btn.on .tab-ic,
  body.divido-premium #screen-app .tabbar-btn.on .tab-ic {
    color: #FF6A00 !important;
  }

  #screen-app .tabbar-btn span,
  body.divido-premium #screen-app .tabbar-btn span {
    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    letter-spacing: 0.01em !important;
    color: #71717A !important;
  }

  #screen-app .tabbar-btn.on span,
  body.divido-premium #screen-app .tabbar-btn.on span {
    font-weight: 600 !important;
    color: #FF6A00 !important;
  }

  .hdr-lang-btn .lang-code,
  #lang-toggle .lang-code,
  #lang-toggle-auth .lang-code,
  .lang-code,
  #screen-app .lang-code {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #1C1A17 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
  }

  /* 4. Standardized Mobile Section Headings (Refined, Proportional, UPPERCASE) */
  #screen-app .view :is(.sec-title, .sec-h, .sub-title),
  body.divido-premium #screen-app :is(.sec-title, .sec-h, .sub-title),
  #view-home :is(#props-area, #funds-area)>.sec-title,
  #view-wallet .w-tx-head .sec-title,
  #view-profile .sec-title,
  .sec-title,
  h2.sec-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin: 0 8px !important;
  }

  /* CRITICAL EXCEPTION: Property & Fund Card Titles & Detail Title must NOT be uppercase */
  #screen-app :is(.prop-card, .fund-card, .inv-card) :is(.prop-title, .inv-title, h1, h2, h3, h4, h5, h6, b) {
    text-transform: none !important;
  }

  #screen-app #d-title {
    text-transform: none !important;
  }

  /* 5. Home Page: Greeting & Compact Trust Layer */
  /* 5. Home Page: Greeting & Compact Header (Stats & Chips hidden on mobile) */
  #view-home .home-greet {
    display: block !important;
    margin: 4px 0 16px !important;
    padding: 0 !important;
  }

  #view-home .hg-single-line,
  #view-home .hg-hi,
  #view-home .hg-name,
  body.divido-premium #view-home .hg-single-line,
  body.divido-premium #view-home .hg-hi,
  body.divido-premium #view-home .hg-name {
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
  }

  #view-home .hg-wave,
  body.divido-premium #view-home .hg-wave {
    font-size: 21px !important;
  }

  /* Hide sales chips strip, trust row, and stats cards ONLY on mobile */
  #view-home .dv-sales-strip,
  #view-home .dv-trust-row,
  #view-home .home-stats,
  #view-home #home-stats,
  body.divido-premium #view-home .dv-sales-strip,
  body.divido-premium #view-home .dv-trust-row,
  body.divido-premium #view-home .home-stats,
  body.divido-premium #view-home #home-stats {
    display: none !important;
  }

  /* 6. Proportional Hero Cards & Compact Balances */
  #screen-app :is(.wallet-hero, #inv-hero-card, #rewards-hero-card, .nw-card) {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }

  #screen-app :is(.w-balance, .nw-val, #nw-val, #wallet-balance, #inv-value, #rewards-balance, .wallet-hero .w-balance, .inv-hero .w-balance, .rewards-hero .w-balance, .hero-white .w-balance, #inv-hero-card .w-balance, #rewards-hero-card .w-balance, #wallet-card .w-balance),
  body.divido-premium #screen-app :is(.w-balance, .nw-val, #nw-val, #wallet-balance, #inv-value, #rewards-balance, .wallet-hero .w-balance, .inv-hero .w-balance, .rewards-hero .w-balance, .hero-white .w-balance, #inv-hero-card .w-balance, #rewards-hero-card .w-balance, #wallet-card .w-balance),
  .w-balance,
  .nw-val,
  #nw-val,
  #wallet-balance,
  #inv-value,
  #rewards-balance {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 2px 0 6px !important;
  }

  /* Eye Button Visible & Clean */
  #screen-app :is(.nw-eye, #nw-eye, #w-eye),
  body.divido-premium #screen-app :is(.nw-eye, #nw-eye, #w-eye),
  .nw-eye,
  #nw-eye,
  #w-eye {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  #screen-app :is(.nw-eye, #nw-eye, #w-eye) i,
  body.divido-premium #screen-app :is(.nw-eye, #nw-eye, #w-eye) i {
    font-size: 18px !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide breakdown & rewards line inside Wallet Hero Card on mobile */
  #view-wallet #wallet-card .w-sub-row,
  #view-wallet .w-sub-row,
  #w-rewards-line,
  #w-breakdown {
    display: none !important;
  }

  #screen-app :is(.w-label, .nw-label) {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }

  #screen-app .w-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  #screen-app .w-act,
  body.divido-premium #screen-app #view-wallet .w-act {
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  #screen-app .w-act i,
  body.divido-premium #screen-app #view-wallet .w-act i {
    font-size: 16px !important;
    color: #FF6A00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  #screen-app .w-act span,
  body.divido-premium #screen-app #view-wallet .w-act span {
    font-size: 8px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #screen-app .w-sales-tip {
    padding: 8px 10px !important;
    margin: 8px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 10px !important;
  }

  #screen-app .w-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #screen-app .w-stat {
    position: relative;
    padding: 10px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
  }

  #screen-app .w-stat :is(.ws-ic, .stat-ic, .m-icon) {
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  #screen-app .w-stat .m-icon img {
    width: 14px !important;
    height: 14px !important;
  }

  #screen-app .ws-txt b {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  #screen-app .ws-txt span {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* 7. Property & Fund Cards (Compact, Mobile-Native Spacing & Sizing) */
  #screen-app :is(.prop-card, .inv-card, .fund-card),
  body.divido-premium #screen-app :is(.prop-card, .inv-card, .fund-card) {
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .pimg,
  body.divido-premium #screen-app :is(.prop-card, .fund-card, .inv-card) .pimg {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    position: relative !important;
  }

  #screen-app .save-btn,
  body.divido-premium #screen-app .save-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    padding: 0 !important;
    border: none !important;
  }

  html[dir="rtl"] #screen-app .save-btn,
  html[dir="rtl"] body.divido-premium #screen-app .save-btn {
    right: auto !important;
    left: 10px !important;
  }

  #screen-app .save-btn .save-ic,
  #screen-app .save-btn i,
  body.divido-premium #screen-app .save-btn .save-ic,
  body.divido-premium #screen-app .save-btn i {
    font-size: 16px !important;
    color: #1C1A17 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }

  #screen-app .save-btn[data-on="1"] .save-ic,
  #screen-app .save-btn[data-on="1"] i,
  body.divido-premium #screen-app .save-btn[data-on="1"] .save-ic,
  body.divido-premium #screen-app .save-btn[data-on="1"] i {
    color: #FF6A00 !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .pimg img,
  body.divido-premium #screen-app :is(.prop-card, .fund-card, .inv-card) .pimg img {
    height: 150px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .prop-body,
  body.divido-premium #screen-app :is(.prop-card, .fund-card, .inv-card) .prop-body {
    padding: 10px 12px 10px !important;
  }

  #screen-app :is(.prop-title, .inv-title),
  body.divido-premium #screen-app :is(.prop-title, .inv-title) {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 3px !important;
  }

  #screen-app .prop-loc-line,
  body.divido-premium #screen-app .prop-loc-line {
    font-size: 11px !important;
    gap: 4px !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  #screen-app .prop-loc-item,
  body.divido-premium #screen-app .prop-loc-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  #screen-app .prop-loc-item i,
  body.divido-premium #screen-app .prop-loc-item i {
    font-size: 12px !important;
    color: #FF6A00 !important;
  }

  #screen-app :is(.unit-metrics, .card-metrics),
  body.divido-premium #screen-app :is(.unit-metrics, .card-metrics) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin: 5px 0 !important;
    width: 100% !important;
  }

  #screen-app :is(.unit-metrics, .card-metrics) .metric,
  body.divido-premium #screen-app :is(.unit-metrics, .card-metrics) .metric {
    padding: 4px 6px !important;
    border-radius: 9px !important;
    gap: 6px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  #screen-app :is(.unit-metrics, .card-metrics) .m-icon,
  body.divido-premium #screen-app :is(.unit-metrics, .card-metrics) .m-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    border-radius: 6px !important;
  }

  #screen-app :is(.unit-metrics, .card-metrics) .m-icon img,
  body.divido-premium #screen-app :is(.unit-metrics, .card-metrics) .m-icon img {
    width: 13px !important;
    height: 13px !important;
  }

  #screen-app :is(.m-label, .dc-label),
  body.divido-premium #screen-app :is(.m-label, .dc-label) {
    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
  }

  #screen-app :is(.m-val, .dc-val),
  body.divido-premium #screen-app :is(.m-val, .dc-val) {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  #screen-app .decision-row,
  body.divido-premium #screen-app .decision-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 3px 0 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #screen-app .decision-cell,
  body.divido-premium #screen-app .decision-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 2px !important;
    border-radius: 7px !important;
    background: #F8F9FA !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.dark #screen-app .decision-cell {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  #screen-app .dc-label,
  body.divido-premium #screen-app .dc-label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    color: #71717A !important;
    line-height: 1.15 !important;
    margin: 0 0 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  #screen-app .dc-val,
  body.divido-premium #screen-app .dc-val {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #FF6A00 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  #screen-app .yield-one,
  body.divido-premium #screen-app .yield-one {
    font-size: 10px !important;
    margin: 3px 0 !important;
    line-height: 1.2 !important;
  }

  #screen-app .bar-row,
  body.divido-premium #screen-app .bar-row {
    gap: 6px !important;
    margin: 4px 0 !important;
  }

  #screen-app .bar-pct,
  body.divido-premium #screen-app .bar-pct {
    font-size: 10px !important;
  }

  #screen-app .fund-meta-line,
  body.divido-premium #screen-app .fund-meta-line {
    font-size: 9.5px !important;
    gap: 3px 8px !important;
    margin: 3px 0 !important;
  }

  #screen-app .avail-line,
  body.divido-premium #screen-app .avail-line {
    font-size: 10px !important;
    margin: 3px 0 !important;
  }

  #screen-app .card-cta-row,
  body.divido-premium #screen-app .card-cta-row {
    margin-top: 5px !important;
    padding-top: 5px !important;
    gap: 8px !important;
  }

  #screen-app .card-price,
  body.divido-premium #screen-app .card-price {
    font-size: 11px !important;
  }

  #screen-app .card-price b,
  body.divido-premium #screen-app .card-price b {
    font-size: 15.5px !important;
    font-weight: 800 !important;
  }

  #screen-app .card-price small,
  body.divido-premium #screen-app .card-price small {
    font-size: 9.5px !important;
  }

  #screen-app :is(.inv-now, .fund-invest),
  body.divido-premium #screen-app :is(.inv-now, .fund-invest) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
  }

  /* 8. Controls, Segments, Filters & Search */
  #view-home :is(#props-filters, #home-sticky) {
    padding: 0 !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
  }

  #view-home :is(#home-seg, .filter-controls-row) {
    margin: 0 !important;
  }

  #view-home .filter-controls-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Segmented Toggle Tabs (Properties / Funds / All) 40px Height on Mobile */
  #screen-app :is(.seg, #home-seg, #inv-seg),
  body.divido-premium #screen-app :is(.seg, #home-seg, #inv-seg),
  .seg {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 3px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  body.dark #screen-app :is(.seg, #home-seg, #inv-seg),
  body.divido-premium.dark #screen-app :is(.seg, #home-seg, #inv-seg) {
    background: #1e1b18 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn,
  body.divido-premium #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn,
  .seg-btn {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn span,
  body.divido-premium #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn span,
  .seg-btn span {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn i,
  body.divido-premium #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn i,
  .seg-btn i {
    font-size: 14px !important;
  }

  #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn.on,
  body.divido-premium #screen-app :is(.seg, #home-seg, #inv-seg) .seg-btn.on,
  .seg-btn.on {
    font-weight: 700 !important;
    font-size: 12.5px !important;
    background: #FF6A00 !important;
    color: #FFFFFF !important;
  }

  /* Compact Fund Cards on Mobile */
  #screen-app .fund-card,
  body.divido-premium #screen-app .fund-card {
    padding: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    gap: 0 !important;
  }

  #screen-app .fund-card .prop-body {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #screen-app .fund-card .prop-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
  }

  #screen-app .fund-card .prop-loc-line {
    margin: 0 0 6px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }

  #screen-app .fund-card .metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin: 4px 0 6px !important;
  }

  #screen-app .fund-card .metric {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    min-height: auto !important;
    gap: 6px !important;
    background: #FAFAFA !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  body.dark #screen-app .fund-card .metric {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  #screen-app .fund-card .metric .m-icon {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }

  #screen-app .fund-card .metric .m-label {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  #screen-app .fund-card .metric .m-val {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  #screen-app .fund-card .bar-row {
    margin: 4px 0 2px !important;
    gap: 8px !important;
  }

  #screen-app .fund-card .bar {
    height: 5px !important;
  }

  #screen-app .fund-card .bar-pct {
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  #screen-app .fund-card .fund-meta-line {
    margin: 4px 0 6px !important;
    font-size: 11px !important;
    gap: 8px !important;
    color: #71717A !important;
  }

  #screen-app .fund-card .card-cta-row {
    margin-top: 4px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  #screen-app .fund-card .card-price {
    font-size: 13px !important;
  }

  #screen-app .fund-card .card-price b {
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  #screen-app .fund-card .btn.inv-now {
    min-height: 38px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
  }

  #screen-app :is(.chip, .pchip, .m-chip, .d-amt-chip) {
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
    border-radius: 8px !important;
  }

  /* 8. Home Filter Controls Row (Status Tabs & Filters Button) */
  #view-home :is(.sort-select-wrap, select.sort-select-btn, .custom-dropdown-container, .custom-dropdown-trigger) {
    display: none !important;
  }

  #screen-app .filter-controls-row,
  body.divido-premium #screen-app .filter-controls-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 10px !important;
    flex-wrap: nowrap !important;
  }

  #screen-app .status-tabs-container,
  body.divido-premium #screen-app .status-tabs-container {
    display: flex !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #screen-app .status-tabs-container::-webkit-scrollbar {
    display: none !important;
  }

  #screen-app #status-tabs,
  body.divido-premium #screen-app #status-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #screen-app #status-tabs .chip,
  body.divido-premium #screen-app #status-tabs .chip,
  #status-tabs .chip {
    flex: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #FFFFFF !important;
    color: #71717A !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
  }

  #screen-app #status-tabs .chip.on,
  body.divido-premium #screen-app #status-tabs .chip.on,
  #status-tabs .chip.on {
    background: #18181B !important;
    color: #FFFFFF !important;
    border-color: #18181B !important;
    font-weight: 600 !important;
  }

  body.dark #screen-app #status-tabs .chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #A1A1AA !important;
  }

  body.dark #screen-app #status-tabs .chip.on {
    background: #FFFFFF !important;
    color: #18181B !important;
    border-color: #FFFFFF !important;
  }

  #screen-app .filter-controls-left,
  body.divido-premium #screen-app .filter-controls-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #screen-app .filters-open-btn,
  #screen-app #filters-open,
  body.divido-premium #screen-app .filters-open-btn,
  .filters-open-btn,
  #filters-open {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FF6A00 !important;
    color: #FFFFFF !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    flex: 0 0 32px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  #screen-app .filters-open-btn span,
  #screen-app #filters-open span,
  .filters-open-btn span,
  #filters-open span {
    display: none !important;
  }

  #screen-app .filters-open-btn i,
  #screen-app #filters-open i,
  body.divido-premium #screen-app .filters-open-btn i,
  .filters-open-btn i,
  #filters-open i {
    font-size: 15px !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* 9. Profile Page (Unified Clean Grouped List & Native Hierarchy) */
  #view-profile {
    padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  }

  #view-profile .prof-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    text-align: start !important;
  }

  #view-profile .prof-head .avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: rgba(255, 106, 0, 0.08) !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
  }

  #view-profile .prof-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1C1A17 !important;
    line-height: 1.25 !important;
    margin: 0 0 2px 0 !important;
  }

  #view-profile .prof-phone {
    font-size: 12px !important;
    color: #71717A !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  #view-profile .premium-menu-label {
    padding: 12px 4px 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #71717A !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
  }

  #view-profile .menu-list {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  #view-profile .menu-list button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1C1A17 !important;
    cursor: pointer !important;
    text-align: start !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease !important;
  }

  #view-profile .menu-list button:last-of-type {
    border-bottom: none !important;
  }

  #view-profile .menu-list button:active {
    background: rgba(0, 0, 0, 0.03) !important;
  }

  #view-profile .menu-list button :is(img, .menu-ic, i) {
    width: 30px !important;
    min-width: 30px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    background: rgba(255, 106, 0, 0.08) !important;
    border: 1px solid rgba(255, 106, 0, 0.14) !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FF6A00 !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
  }

  #view-profile .menu-list button span {
    flex: 1 1 auto !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1C1A17 !important;
    text-align: start !important;
  }



  html[dir="rtl"] #view-profile .menu-list button::after {
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: rotate(180deg) !important;
  }

  #view-profile #logout {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-top: 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* 10. Property Detail Page */
  #screen-app #view-detail {
    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }

  #view-detail :is(.d-hero, .detail-hero) {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }

  #view-detail :is(.d-hero-img, #detail-img) {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }

  #view-detail #d-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 4px 0 6px !important;
  }

  #view-detail .d-price-row {
    margin: 6px 0 8px !important;
    gap: 8px !important;
  }

  #view-detail #d-price {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  #view-detail .d-card {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  #view-detail .d-bottom {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
    border-radius: 12px 12px 0 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    z-index: 55 !important;
  }

  #view-detail .d-cta-stack {
    gap: 4px !important;
    width: 100% !important;
  }

  #view-detail .d-cta-chips {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #view-detail .d-amt-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  #view-detail .d-amt-chip b {
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #view-detail .d-amt-chip span {
    font-size: 8.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #view-detail #start-invest {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    box-shadow: 0 3px 12px rgba(255, 106, 0, 0.28) !important;
  }

  #view-detail .d-cta-info-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin: 2px 0 !important;
  }

  #view-detail .d-cta-earn {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
  }

  #view-detail .d-cta-sub {
    font-size: 8px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: end !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  #view-detail .d-cta-sub :is(.cta-shares, .hot, .pill-open) {
    font-size: 8px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
  }

  /* 11. Steps, Generic Cards, Buttons & Forms */
  #screen-app :is(.card-plain, .how-card, .why-card, .lease-card, .guarantee-card, .q-card) {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  #screen-app .card-plain h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
  }

  #screen-app :is(.r-steps, .how-steps) {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  #screen-app :is(.r-step, .how-step) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 8px 10px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  #screen-app :is(.r-step, .how-step) .step-n {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  #screen-app :is(.r-step, .how-step) :is(b, p) {
    grid-column: 2;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #screen-app .code-box {
    margin: 10px 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }

  #screen-app .code-box b {
    font-size: 18px !important;
    letter-spacing: 1px !important;
  }

  #screen-app :is(.btn, .help-row, .faq-q) {
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  #screen-app .btn {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  #screen-app :is(.input, select, textarea),
  #screen-auth .input {
    min-height: 42px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  #screen-app .lbl {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin: 10px 0 4px !important;
  }

  #screen-app :is(.hint, .d-desc, .step p, .lease-desc) {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  /* 11. Modals, Popups & Bottom Sheets (Compact Design System Typography) */
  #screen-app :is(.modal-card, .filters-drawer),
  body.divido-premium :is(.modal-card, .filters-drawer) {
    border-radius: 20px 20px 0 0 !important;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom)) !important;
  }

  #screen-app :is(#modal-title, .filters-head b, .head-row h3, #filters-title),
  body.divido-premium :is(#modal-title, .filters-head b, .head-row h3, #filters-title) {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .lbl,
  body.divido-premium :is(.modal-card, .filters-drawer) .lbl {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    margin: 8px 0 3px !important;
    color: #27272A !important;
    line-height: 1.25 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) :is(.input, select, input),
  body.divido-premium :is(.modal-card, .filters-drawer) :is(.input, select, input) {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) :is(.amt-quick, .pay-chips),
  body.divido-premium :is(.modal-card, .filters-drawer) :is(.amt-quick, .pay-chips) {
    gap: 5px !important;
    margin: 5px 0 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) :is(.aq, .pchip, .d-amt-chip),
  body.divido-premium :is(.modal-card, .filters-drawer) :is(.aq, .pchip, .d-amt-chip) {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .calc-grid,
  body.divido-premium :is(.modal-card, .filters-drawer) .calc-grid {
    gap: 4px !important;
    margin: 6px 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .calc-grid>div b,
  body.divido-premium :is(.modal-card, .filters-drawer) .calc-grid>div b {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .calc-grid>div span,
  body.divido-premium :is(.modal-card, .filters-drawer) .calc-grid>div span {
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: #71717A !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .order-summary,
  body.divido-premium :is(.modal-card, .filters-drawer) .order-summary {
    padding: 8px 10px !important;
    margin: 6px 0 !important;
    border-radius: 12px !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .os-head b,
  body.divido-premium :is(.modal-card, .filters-drawer) .os-head b {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .os-head span,
  body.divido-premium :is(.modal-card, .filters-drawer) .os-head span {
    font-size: 9.5px !important;
    color: #71717A !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .os-row,
  body.divido-premium :is(.modal-card, .filters-drawer) .os-row {
    padding: 3px 0 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .os-row span,
  body.divido-premium :is(.modal-card, .filters-drawer) .os-row span {
    font-size: 10.5px !important;
    color: #71717A !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .os-row b,
  body.divido-premium :is(.modal-card, .filters-drawer) .os-row b {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) :is(.hint, .kyc-invest-note, .pay-status p, .rc-ref),
  body.divido-premium :is(.modal-card, .filters-drawer) :is(.hint, .kyc-invest-note, .pay-status p, .rc-ref) {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    margin: 4px 0 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) :is(.msg, #m-msg, #dep-msg, #pay-poll-msg),
  body.divido-premium :is(.modal-card, .filters-drawer) :is(.msg, #m-msg, #dep-msg, #pay-poll-msg) {
    font-size: 11px !important;
    margin: 4px 0 !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .btn,
  body.divido-premium :is(.modal-card, .filters-drawer) .btn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    margin-top: 4px !important;
  }

  #screen-app :is(.modal-card, .filters-drawer) .pay-status .rc-check,
  body.divido-premium :is(.modal-card, .filters-drawer) .pay-status .rc-check {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 50% !important;
  }

  #toast,
  .toast {
    font-size: 12px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
  }

  /* 12. Mobile Auth / Login Page Refined Typography & Compact Sizing */
  #screen-auth {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #screen-auth .auth-split-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 16px var(--mobile-gutter) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #screen-auth .auth-split-visual {
    display: none !important;
  }

  #screen-auth .auth-split-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #screen-auth .auth-form-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #screen-auth .auth-header-row {
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #screen-auth .auth-icon-logo {
    height: 30px !important;
    width: auto !important;
  }

  #screen-auth #lang-toggle-auth,
  #screen-auth .lang-toggle {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    min-height: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
  }

  #screen-auth .auth-welcome-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    text-transform: uppercase !important;
  }

  #screen-auth .auth-welcome-sub {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: #71717A !important;
    margin: 0 0 14px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #screen-auth .auth-seg-pill {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
    margin-bottom: 14px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
  }

  #screen-auth .auth-seg-tab {
    flex: 1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: none !important;
    background: transparent !important;
    color: #706860 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  #screen-auth .auth-seg-tab.active {
    background: rgba(255, 106, 0, 0.08) !important;
    color: #FF6A00 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border: none !important;
  }

  #screen-auth .auth-inputs-wrap .lbl,
  #screen-auth .lbl {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin: 8px 0 4px !important;
    color: #27272A !important;
    display: block !important;
  }

  #screen-auth .input-icon-group {
    margin-bottom: 10px !important;
    position: relative !important;
  }

  #screen-auth :is(.input, .input-with-icons, #auth-phone, #auth-password, #auth-name, #auth-signup-email, #auth-signup-phone, #auth-signup-password, #auth-ref) {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding-left: 38px !important;
    padding-right: 38px !important;
    border-radius: 999px !important;
  }

  html[dir="rtl"] #screen-auth :is(.input, .input-with-icons, #auth-phone, #auth-password, #auth-name, #auth-signup-email, #auth-signup-phone, #auth-signup-password, #auth-ref) {
    padding-left: 38px !important;
    padding-right: 38px !important;
  }

  #screen-auth :is(.input, .input-with-icons)::placeholder {
    font-size: 12px !important;
  }

  #screen-auth .input-ic-left {
    left: 13px !important;
  }

  #screen-auth .input-ic-left svg {
    width: 15px !important;
    height: 15px !important;
  }

  html[dir="rtl"] #screen-auth .input-ic-left {
    left: auto !important;
    right: 13px !important;
  }

  #screen-auth .input-ic-right {
    right: 13px !important;
  }

  #screen-auth .input-ic-right svg {
    width: 15px !important;
    height: 15px !important;
  }

  html[dir="rtl"] #screen-auth .input-ic-right {
    right: auto !important;
    left: 13px !important;
  }

  #screen-auth .pwd-reqs {
    margin: 4px 0 10px !important;
    gap: 3px !important;
  }

  #screen-auth .pwd-req-item {
    font-size: 10px !important;
    gap: 5px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
  }

  #screen-auth .req-check {
    width: 13px !important;
    height: 13px !important;
    font-size: 8px !important;
  }

  #screen-auth :is(.auth-main-btn, #auth-submit) {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
  }

  #screen-auth #auth-demo {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    margin-top: 4px !important;
  }

  #screen-auth #auth-msg {
    font-size: 11.5px !important;
    margin-top: 6px !important;
  }

  /* Chat: Floating launcher widget hidden on mobile (accessible via Profile menu) */
  iframe[src*="chat.divido"]:not(.chat-subpage-frame),
  div[class*="chat-launcher"],
  div[class*="chat-button"],
  .chat-widget-fab,
  #divido-chat-root,
  [class*="chat-widget"],
  [id*="chat-widget"],
  [class*="chat-launcher-btn"],
  div:has(> iframe[src*="chat.divido"]:not(.chat-subpage-frame)) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 13. Mobile Transaction Row (Icon - Middle Content - Right Amount & Status) */
  #screen-app :is(.tx, .notif),
  body.divido-premium #screen-app :is(#view-wallet, #view-rewards, #view-subpage) :is(.tx, .notif),
  .tx {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 14px !important;
    margin: 6px 0 !important;
    box-sizing: border-box !important;
  }

  #screen-app :is(.tx, .notif) .tx-ic,
  .tx .tx-ic {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    margin: 0 !important;
  }

  #screen-app :is(.tx, .notif) .tx-mid,
  .tx .tx-mid {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: start !important;
  }

  #screen-app :is(.tx, .notif) .tx-mid b,
  .tx .tx-mid b {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1C1A17 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #screen-app :is(.tx, .notif) .tx-mid span,
  .tx .tx-mid span {
    font-size: 11px !important;
    color: #71717A !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #screen-app :is(.tx, .notif) .tx-right,
  body.divido-premium #screen-app :is(#view-wallet, #view-rewards, #view-subpage) .tx-right,
  .tx .tx-right {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    grid-column: auto !important;
  }

  html[dir="rtl"] #screen-app :is(.tx, .notif) .tx-right,
  html[dir="rtl"] body.divido-premium #screen-app :is(#view-wallet, #view-rewards, #view-subpage) .tx-right,
  html[dir="rtl"] .tx .tx-right {
    align-items: flex-start !important;
    text-align: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #screen-app :is(.tx, .notif) .tx-right b,
  .tx .tx-right b {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  #screen-app :is(.tx, .notif) .tx-right .pos,
  .tx .tx-right .pos {
    color: #16A34A !important;
  }

  #screen-app :is(.tx, .notif) .tx-right .neg,
  .tx .tx-right .neg {
    color: #EF4444 !important;
  }

  #screen-app :is(.tx, .notif) .tx-right .st,
  .tx .tx-right .st {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    padding: 1.5px 6px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    text-transform: capitalize !important;
  }

  #screen-app :is(.tx, .notif) .tx-right .st.ok,
  .tx .tx-right .st.ok {
    background: rgba(22, 163, 74, 0.1) !important;
    color: #16A34A !important;
  }

  #screen-app :is(.tx, .notif) .tx-right .st.pend,
  .tx .tx-right .st.pend {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #D97706 !important;
  }

  /* =========================================================================
     MASTER MOBILE REFINEMENTS & CRITICAL UX OVERRIDES
     ========================================================================= */

  /* 1. Fixed App Header on Main Views (Always Visible on 5 Main Tabs) */
  #screen-app .app-header,
  body.divido-premium #screen-app .app-header,
  .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  body.dark #screen-app .app-header,
  body.dark .app-header {
    background: rgba(24, 24, 28, 0.94) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* 2. Fixed & Vertically Centered Glassy Bottom Tabbar */
  #screen-app .tabbar,
  body.divido-premium #screen-app .tabbar,
  .tabbar {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: 500px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding: 0 6px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  }

  body.dark #screen-app .tabbar,
  body.divido-premium.dark #screen-app .tabbar {
    background: rgba(24, 24, 28, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5) !important;
  }

  #screen-app .tabbar-btn,
  body.divido-premium #screen-app .tabbar-btn,
  .tabbar-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
  }

  #screen-app .tabbar-btn .tab-ic,
  body.divido-premium #screen-app .tabbar-btn .tab-ic,
  .tabbar-btn .tab-ic {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #71717A !important;
    background: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
  }

  #screen-app .tabbar-btn span,
  body.divido-premium #screen-app .tabbar-btn span,
  .tabbar-btn span {
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #71717A !important;
  }

  #screen-app .tabbar-btn.on .tab-ic,
  #screen-app .tabbar-btn.on span,
  .tabbar-btn.on .tab-ic,
  .tabbar-btn.on span {
    color: #FF6A00 !important;
  }

  /* Only hide Navbar & Tabbar on Detail view and Subpages */
  body.on-detail #screen-app .app-header,
  body.on-detail .tabbar,
  body[data-active-view="detail"] #screen-app .app-header,
  body[data-active-view="detail"] .tabbar {
    display: none !important;
  }

  /* 3. Property & Fund Card Metric Badges (Exact Desktop Match - Compact on Mobile) */
  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics,
  body.divido-premium :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics,
  .card-metrics.unit-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin: 8px 0 !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric,
  body.divido-premium :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric,
  .card-metrics .metric {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    text-align: start !important;
    min-width: 0 !important;
  }

  body.dark #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric,
  body.dark .card-metrics .metric {
    background: #222228 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-icon,
  body.divido-premium :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-icon,
  .card-metrics .metric .m-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    background: rgba(255, 106, 0, 0.08) !important;
    flex-shrink: 0 !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-icon img,
  .card-metrics .metric .m-icon img {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-text,
  .card-metrics .metric .m-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    text-align: start !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-label,
  .card-metrics .metric .m-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #71717A !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.dark #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-label,
  body.dark .card-metrics .metric .m-label {
    color: #A1A1AA !important;
  }

  #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-val,
  .card-metrics .metric .m-val {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #1C1A17 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.dark #screen-app :is(.prop-card, .fund-card, .inv-card) .metrics.card-metrics .metric .m-val,
  body.dark .card-metrics .metric .m-val {
    color: #FFFFFF !important;
  }

  /* Bottom 4 Decision Metrics (Growth, Monthly, Available, Days) */
  #screen-app .decision-row,
  body.divido-premium .decision-row,
  .decision-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin: 10px 0 !important;
  }

  #screen-app .decision-cell,
  body.divido-premium .decision-cell,
  .decision-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body.dark #screen-app .decision-cell,
  body.dark .decision-cell {
    background: #222228 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  #screen-app .decision-cell .dc-label,
  .decision-cell .dc-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #58505C !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  body.dark #screen-app .decision-cell .dc-label,
  body.dark .decision-cell .dc-label {
    color: #A1A1AA !important;
  }

  #screen-app .decision-cell .dc-val,
  .decision-cell .dc-val {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #FF6A00 !important;
    line-height: 1.2 !important;
  }

  /* 4. Unified Wallet & Net Worth Large Balance Typography */
  #screen-app :is(.w-balance, .nw-val, #nw-val, #wallet-balance, #inv-value, #rewards-balance, .wallet-hero .w-balance, .inv-hero .w-balance, .rewards-hero .w-balance, .hero-white .w-balance, #inv-hero-card .w-balance, #rewards-hero-card .w-balance, #wallet-card .w-balance),
  body.divido-premium #screen-app :is(.w-balance, .nw-val, #nw-val, #wallet-balance, #inv-value, #rewards-balance, .wallet-hero .w-balance, .inv-hero .w-balance, .rewards-hero .w-balance, .hero-white .w-balance, #inv-hero-card .w-balance, #rewards-hero-card .w-balance, #wallet-card .w-balance),
  .w-balance,
  .nw-val,
  #nw-val,
  #wallet-balance {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: #FF6A00 !important;
    margin: 4px 0 8px !important;
  }

  /* 5. Tabs Compact Typography & Exact Square/Circle Filter Button */
  .status-tabs .chip,
  .status-tabs button,
  .status-tabs-container .chip,
  #status-tabs .chip,
  .status-chips-row .chip,
  .st-chip,
  .status-chip,
  .seg .seg-btn,
  #home-seg .seg-btn,
  #inv-seg .seg-btn {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 6px 12px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .status-tabs .chip.on,
  #status-tabs .chip.on,
  .seg .seg-btn.on,
  #home-seg .seg-btn.on,
  #inv-seg .seg-btn.on {
    font-weight: 600 !important;
  }

  /* Filter Button Exact Square/Circle matching buttons next to it (32px) */
  #filters-open,
  .filters-open-btn,
  #btn-filter,
  #screen-app #btn-filter,
  .btn-filter,
  #screen-app .filters-open-btn,
  body.divido-premium #screen-app .filters-open-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FF6A00 !important;
    color: #FFFFFF !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
  }

  #filters-open span,
  .filters-open-btn span,
  #btn-filter span,
  .btn-filter span {
    display: none !important;
  }

  #filters-open i,
  .filters-open-btn i,
  #btn-filter i,
  .btn-filter i {
    font-size: 15px !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* 6. Investments Segmented Tabs (All | Properties | Funds) */
  #inv-seg,
  .inv-seg-wrap,
  #home-seg,
  .seg {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px !important;
    border-radius: 9999px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    gap: 4px !important;
  }

  body.dark #inv-seg,
  body.dark #home-seg,
  body.dark .seg {
    background: #222228 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  #inv-seg .seg-btn,
  #home-seg .seg-btn,
  .seg .seg-btn,
  #home-seg .seg-btn *,
  #inv-seg .seg-btn *,
  .seg .seg-btn * {
    border: none !important;
    border-radius: 9999px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: #1C1A17 !important;
    background: transparent !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  body.dark #inv-seg .seg-btn,
  body.dark #home-seg .seg-btn,
  body.dark .seg .seg-btn,
  body.dark #home-seg .seg-btn *,
  body.dark #inv-seg .seg-btn * {
    color: #F4F4F5 !important;
  }

  #inv-seg .seg-btn.on,
  #home-seg .seg-btn.on,
  .seg .seg-btn.on {
    background: #FF6A00 !important;
    color: #FFFFFF !important;
  }

  #inv-seg .seg-btn.on *,
  #home-seg .seg-btn.on *,
  .seg .seg-btn.on * {
    color: #FFFFFF !important;
    font-weight: 600 !important;
  }

  /* 7. Your Units Cards in Investments View */
  #screen-app .inv-card,
  body.divido-premium #screen-app .inv-card,
  .inv-card {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 14px !important;
  }

  body.dark #screen-app .inv-card,
  body.dark .inv-card {
    background: #222228 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  #screen-app .inv-card .inv-metrics,
  .inv-card .inv-metrics,
  .inv-card .unit-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 10px 0 !important;
  }

  #screen-app .inv-card .inv-metric-cell,
  .inv-card .inv-metric-cell,
  .inv-card .metric-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
  }

  body.dark #screen-app .inv-card .inv-metric-cell,
  body.dark .inv-card .inv-metric-cell {
    background: #27272A !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* 8. Profile Menu Icons (Compact 32px Squircles) & Clean User Header */
  #profile-menu button,
  .menu-list button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  #profile-menu .p-ic,
  #profile-menu img,
  #profile-menu .menu-ic,
  .menu-list .p-ic,
  .menu-list img,
  .menu-list .menu-ic {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 10px !important;
    background: rgba(255, 106, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #FF6A00 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #view-profile .prof-head,
  .prof-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    margin-bottom: 16px !important;
  }

  body.dark #view-profile .prof-head,
  body.dark .prof-head {
    background: #222228 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  .prof-head .avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }

  .prof-head .prof-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1C1A17 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }

  body.dark .prof-head .prof-name {
    color: #FFFFFF !important;
  }

  .prof-head .prof-phone {
    font-size: 12px !important;
    color: #71717A !important;
    margin: 2px 0 0 !important;
  }

  .prof-head .kyc-status-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
    border: none !important;
    padding: 0 !important;
  }

  html[dir="rtl"] .prof-head .kyc-status-row {
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .prof-head .kyc-pill {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .prof-head .kyc-pill.ok {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #16A34A !important;
  }

  .prof-head .kyc-hint {
    font-size: 10.5px !important;
    color: #71717A !important;
    line-height: 1.2 !important;
  }

  /* 9. Section Titles & Spacing */
  .sec-title,
  h2.sec-title,
  .section-head h2 {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 14px 0 6px !important;
  }

  #props-area .sec-title,
  #funds-area .sec-title,
  #view-home :is(#props-area, #funds-area)>.sec-title {
    margin: 12px 0 6px !important;
  }

  #prop-list,
  #fund-list,
  .prop-bento {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 12px !important;
  }

  /* 10. Property Detail Page Full Edge-to-Edge Hero & Reduced Fonts */
  #view-detail,
  body.divido-premium #view-detail {
    padding: 0 0 100px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #view-detail .detail-hero,
  #view-detail .d-hero {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
  }

  #view-detail :is(.hero-img, #detail-img) {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 0 24px 24px !important;
  }

  #view-detail :is(#detail-back, #d-save, #d-share) {
    position: absolute !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    z-index: 10 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1C1A17 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  html:not([dir="rtl"]) #view-detail #detail-back {
    left: 16px !important;
  }

  html:not([dir="rtl"]) #view-detail #d-share {
    right: 58px !important;
  }

  html:not([dir="rtl"]) #view-detail #d-save {
    right: 16px !important;
  }

  html[dir="rtl"] #view-detail #detail-back {
    right: 16px !important;
    left: auto !important;
  }

  html[dir="rtl"] #view-detail #d-share {
    left: 58px !important;
    right: auto !important;
  }

  html[dir="rtl"] #view-detail #d-save {
    left: 16px !important;
    right: auto !important;
  }

  #view-detail .detail-content,
  #view-detail .d-body {
    padding: 16px 14px !important;
  }

  #view-detail #d-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 4px 0 8px !important;
  }

  #view-detail #d-meta .meta-chip {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
  }

  /* 11. Auth Screen Enhancements (Logo 38px, Rounded-Full Inputs, Spacing) */
  #screen-auth {
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  #screen-auth .logo-img,
  #screen-auth .auth-logo,
  #screen-auth #auth-logo-main {
    height: 38px !important;
    width: auto !important;
    max-width: 140px !important;
  }

  #screen-auth .auth-header {
    margin-bottom: 28px !important;
  }

  #screen-auth input:not([type="checkbox"]):not([type="radio"]),
  #screen-auth .input-pill,
  #screen-auth .auth-input {
    border-radius: 9999px !important;
    height: 46px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
  }

  #screen-auth .btn-auth,
  #screen-auth button[type="submit"] {
    border-radius: 9999px !important;
    height: 46px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* 12. Complete Elimination of Floating Chat on Mobile */
  #live-chat-btn,
  .floating-chat,
  #chat-trigger,
  .chat-fab,
  #btn-floating-chat,
  .live-chat-fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* 13. Modal, Bottom Sheet & Drawer Full High-Priority Layer (Above Tabbar) */
  #modal,
  .modal,
  .modal-overlay,
  #filters-backdrop,
  .filters-backdrop,
  .backdrop {
    z-index: 99999 !important;
  }

  #modal .modal-card,
  .modal .modal-card,
  .modal-card,
  #filters-drawer,
  .filters-drawer,
  .bottom-sheet,
  [role="dialog"] {
    z-index: 100000 !important;
  }

  body.divido-premium.keyboard-open #screen-app .tabbar {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================================
   GLOBAL DARK MODE MATTE CHARCOAL PALETTE & LOGO CONTRAST
   ========================================================================= */
body.dark {
  background: #18181c !important;
  color: #F4F4F5 !important;
}

body.dark #screen-auth {
  background: #18181c !important;
}

body.dark #screen-auth input:not([type="checkbox"]):not([type="radio"]) {
  background: #202026 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

body.dark #hdr-logo,
body.dark .auth-logo,
body.dark #screen-auth .logo-img,
body.dark #auth-logo-main {
  filter: brightness(0) invert(1) !important;
}

/* A leftover identity transform on the detail view becomes the containing
   block for the fixed invest bar. This unlayered rule wins over the
   entrance animation, which a cascade layer cannot override. */
body.divido-premium #view-detail.view,
body.divido-premium.thrill #view-detail.view.view-enter,
body.divido-premium.orange-only #view-detail.view.view-enter,
body.divido-premium.px-futuristic #view-detail.view.view-enter,
body.divido-premium.modern-orange #view-detail.view.view-enter {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

.req-check .ph,
.round-btn .ph,
.viewer-close .ph,
.viewer-prev .ph,
.viewer-next .ph,
.hg-wave .ph,
.auth-wave .ph,
.tx-ic .ph,
.strat-ic .ph,
.kyc-pill .ph,
.pnl-badge .ph,
.help-row .ph,
.rc-check .ph,
.slide-thumb .ph,
.meta-chip .ph,
.w-sub .ph,
.faq-arrow .ph {
  line-height: 1;
  font-style: normal;
  text-transform: none;
}

.rc-check {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.rc-check .ph { font-size: 32px; }
.meta-chip .ph-circle { font-size: 8px; }
.stars .ph { font-size: 32px; color: #d6d3d1; }
.stars .ph-fill.ph-star { color: #FF6A00; }
.pnl-badge { display: inline-flex; align-items: center; gap: 4px; }
html[dir="rtl"] #sub-back .ph-caret-left,
html[dir="rtl"] #detail-back .ph-caret-left { transform: scaleX(-1); }

/* Same layer as the shared sheet rules, so this inset wins on phones.
   Drill-in hides the tab bar, and those sheets stay full height. */
@layer product-components {
  @media (max-width: 767px) {
    :root {
      --sheet-above-tab: calc(58px + max(14px, env(safe-area-inset-bottom)));
    }
    body:not(.on-detail):not(.on-subpage):not(.keyboard-open) #screen-app:not(:has(#view-detail:not(.hidden))):not(:has(#view-subpage:not(.hidden))) :is(#modal, .modal, #filters-backdrop, .filters-backdrop) {
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: var(--sheet-above-tab) !important;
    }
    body:not(.on-detail):not(.on-subpage):not(.keyboard-open) #screen-app:not(:has(#view-detail:not(.hidden))):not(:has(#view-subpage:not(.hidden))) :is(#filters-drawer, .filters-drawer) {
      bottom: var(--sheet-above-tab) !important;
      max-height: calc(100dvh - var(--sheet-above-tab) - 12px) !important;
    }
    body:not(.on-detail):not(.on-subpage):not(.keyboard-open) #screen-app:not(:has(#view-detail:not(.hidden))):not(:has(#view-subpage:not(.hidden))) :is(#modal, .modal) :is(.modal-card) {
      max-height: 100% !important;
    }
  }
}