/* v1.1.0-mobile-dashboard-premium15: mobile dashboard compact pass only. */
@media (max-width: 767px) {
  html body[data-page="dashboard"] .content-shell,
  html body[data-page="dashboard"] .content-shell.main-content,
  html body[data-page="dashboard"] .main-content,
  html body[data-page="dashboard"] .content-area {
    padding: 4px 12px calc(64px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel.dashboard-page {
    gap: 6px !important;
  }

  html body[data-page="dashboard"] .app-topbar.app-topbar {
    height: 36px !important;
    min-height: 36px !important;
    margin-bottom: 7px !important;
    padding: 0 !important;
  }

  html body[data-page="dashboard"] .global-search.global-search {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 13px !important;
  }

  html body[data-page="dashboard"] .global-search input {
    font-size: 10px !important;
  }

  html body[data-page="dashboard"] .notification-button.notification-button,
  html body[data-page="dashboard"] .topbar-user.topbar-user {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row {
    margin-top: -4px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2 {
    width: auto !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    color: #0f172a !important;
    font-size: 28px !important;
    line-height: 28px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-date.dashboard-mobile-date {
    font-size: 9.8px !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-quick-actions {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    gap: 7px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-quick-actions #dashboardNewLoan,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-quick-actions #dashboardCreateLineConnect,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-quick-actions button.secondary-button {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 7px !important;
    border-radius: 12px !important;
    grid-template-columns: 25px minmax(0, 1fr) 7px !important;
    gap: 6px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-button-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-action-copy strong {
    font-size: 9.5px !important;
    line-height: 1.04 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-action-copy small {
    margin-top: 1px !important;
    font-size: 8.2px !important;
    line-height: 1.03 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    padding: 8px 13px !important;
    grid-template-rows: auto 1fr 31px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel > div:first-child {
    padding-right: 58px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-kicker {
    margin-bottom: 3px !important;
    padding: 3px 8px !important;
    font-size: 8.8px !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel strong {
    max-width: 214px !important;
    font-size: clamp(15.5px, 4.25vw, 17px) !important;
    line-height: 1.03 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel small {
    margin-top: 2px !important;
    max-width: 212px !important;
    font-size: 8.5px !important;
    line-height: 1.04 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: 43px !important;
    right: 15px !important;
    width: 34px !important;
    height: 38px !important;
    z-index: 1 !important;
    opacity: .86 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-calendar {
    width: 26px !important;
    height: 32px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-bell {
    width: 19px !important;
    height: 19px !important;
    right: -3px !important;
    top: 7px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel::after {
    right: 47px !important;
    bottom: 49px !important;
    transform: scale(.24) !important;
    z-index: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    font-size: 11.4px !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 8 !important;
    border-radius: 9px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid {
    gap: 7px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile {
    height: 72px !important;
    min-height: 72px !important;
    padding: 7px !important;
    border-radius: 12px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile > span:not(.summary-tile-icon) {
    font-size: 9px !important;
    line-height: 1.04 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile strong {
    font-size: clamp(16.5px, 4.4vw, 19px) !important;
    line-height: .98 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile small {
    font-size: 8.5px !important;
    line-height: 1.03 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup {
    margin-top: 1px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head h3 {
    font-size: 13.2px !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-card {
    padding: 1px 9px !important;
    border-radius: 12px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-row {
    min-height: 34px !important;
    padding: 3px 0 !important;
    grid-template-columns: 25px minmax(0, 1fr) auto 8px !important;
    gap: 6px !important;
  }

  html body[data-page="dashboard"] .followup-icon {
    width: 25px !important;
    height: 25px !important;
  }

  html body[data-page="dashboard"] .followup-copy strong {
    font-size: 10px !important;
    line-height: 1.02 !important;
  }

  html body[data-page="dashboard"] .followup-copy small,
  html body[data-page="dashboard"] .followup-amount {
    font-size: 8.7px !important;
    line-height: 1.02 !important;
  }
}

.mobile-debtor-title-actions {
  display: none;
}

/* mobile-debtors-20260512: customer button becomes the debtor hub on mobile only. */
@media (max-width: 768px) {
  body[data-page="records"] .content-shell,
  body[data-page="records"] .main-content,
  body[data-page="records"] .content-area {
    padding: 0 0 calc(84px + env(safe-area-inset-bottom)) !important;
    background: #ffffff !important;
  }

  body[data-page="records"] .hero,
  body[data-page="records"] .app-topbar,
  body[data-page="records"] #recordsPanel .records-subnav,
  body[data-page="records"] #recordsPanel > .panel-title .button-row,
  body[data-page="records"] #recordsPanel .records-table-wrap {
    display: none !important;
  }

  body[data-page="records"] #recordsPanel {
    display: block !important;
    min-height: calc(100dvh - 84px - env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 20px 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  body[data-page="records"] #recordsPanel > .panel-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  body[data-page="records"] #recordsPanel > .panel-title h2 {
    margin: 0 !important;
    color: #0f1b31 !important;
    font: 800 38px/0.96 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    letter-spacing: 0 !important;
  }

  body[data-page="records"] #recordsHint {
    display: block !important;
    margin-top: 8px !important;
    color: #647084 !important;
    font: 800 19px/1.1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-title-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }

  body[data-page="records"] .mobile-debtor-title-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #eafff5 !important;
    color: #008f61 !important;
    box-shadow: none !important;
  }

  body[data-page="records"] .mobile-debtor-title-button svg {
    width: 24px !important;
    height: 24px !important;
  }

  body[data-page="records"] #recordSearchBox {
    display: flex !important;
    align-items: center !important;
    min-height: 58px !important;
    margin: 0 0 18px !important;
    padding: 0 18px !important;
    border: 1px solid #d6e0ec !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body[data-page="records"] #recordSearchBox::before {
    content: "" !important;
    flex: 0 0 23px !important;
    width: 23px !important;
    height: 23px !important;
    margin-right: 12px !important;
    background: currentColor !important;
    color: #536176 !important;
    -webkit-mask: radial-gradient(circle at 43% 43%, transparent 0 39%, #000 40% 56%, transparent 57%) 0 0/100% 100%, linear-gradient(45deg, transparent 0 58%, #000 59% 72%, transparent 73%) 0 0/100% 100%;
    mask: radial-gradient(circle at 43% 43%, transparent 0 39%, #000 40% 56%, transparent 57%) 0 0/100% 100%, linear-gradient(45deg, transparent 0 58%, #000 59% 72%, transparent 73%) 0 0/100% 100%;
  }

  body[data-page="records"] #recordSearchBox > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  body[data-page="records"] #recordSearch {
    min-width: 0 !important;
    height: 56px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #152238 !important;
    font: 700 16px/1.2 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] #recordSearch::placeholder {
    color: #667389 !important;
    opacity: 1 !important;
  }

  body[data-page="records"] #recordsList {
    margin: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-screen,
  body[data-page="records"] .mobile-debtor-list {
    display: grid !important;
    gap: 12px !important;
  }

  body[data-page="records"] .mobile-debtor-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 6px !important;
    margin: 0 0 6px !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 2px 8px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #667389 !important;
    font: 800 14px/1.05 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: none !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button strong {
    color: inherit !important;
    font-size: 15px !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button.is-danger strong {
    color: #f0202f !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button.is-warning strong {
    color: #f47a00 !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button.is-active {
    border-bottom-color: #009b62 !important;
    color: #009b62 !important;
  }

  body[data-page="records"] .mobile-debtor-collapse {
    display: block !important;
    border: 1px solid #e1e9f2 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 30px rgba(16, 31, 52, 0.06) !important;
    overflow: visible !important;
  }

  body[data-page="records"] .mobile-debtor-collapse > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "person money" "due due" !important;
    gap: 14px 10px !important;
    min-height: 112px !important;
    padding: 18px 16px !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  body[data-page="records"] .mobile-debtor-collapse > summary::-webkit-details-marker {
    display: none !important;
  }

  body[data-page="records"] .mobile-debtor-person {
    grid-area: person !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-avatar {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 30% 20%, #f0fff8, #dff9ee) !important;
    color: #009b62 !important;
    font: 800 24px/1 "Krungthai Fast","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body[data-page="records"] .mobile-debtor-name {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-name strong {
    overflow: hidden !important;
    color: #111c31 !important;
    font: 800 19px/1.16 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="records"] .mobile-debtor-name small {
    overflow: hidden !important;
    color: #526176 !important;
    font: 700 14px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="records"] .mobile-debtor-money {
    grid-area: money !important;
    display: grid !important;
    justify-items: end !important;
    gap: 5px !important;
    min-width: 104px !important;
    max-width: 128px !important;
    color: #009b62 !important;
    text-align: right !important;
    overflow: visible !important;
  }

  body[data-page="records"] .mobile-debtor-money small {
    color: currentColor !important;
    font: 800 14px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-money strong {
    color: currentColor !important;
    font: 800 18px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    white-space: nowrap !important;
  }

  body[data-page="records"] .mobile-debtor-money i {
    color: #0f1b31 !important;
    font-style: normal !important;
    font-size: 23px !important;
    line-height: 1 !important;
    transition: transform .18s ease !important;
  }

  body[data-page="records"] .mobile-debtor-collapse[open] .mobile-debtor-money i {
    transform: rotate(180deg) !important;
  }

  body[data-page="records"] .mobile-debtor-money.is-danger {
    color: #f0202f !important;
  }

  body[data-page="records"] .mobile-debtor-money.is-warning {
    color: #f47a00 !important;
  }

  body[data-page="records"] .mobile-debtor-due {
    grid-area: due !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    color: #009b62 !important;
    font: 700 16px/1.2 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-due.is-danger,
  body[data-page="records"] .mobile-debtor-due.is-warning {
    color: #f47a00 !important;
  }

  body[data-page="records"] .mobile-debtor-due svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
  }

  body[data-page="records"] .mobile-debtor-body {
    display: grid !important;
    gap: 14px !important;
    padding: 0 14px 16px !important;
  }

  body[data-page="records"] .mobile-debtor-facts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 13px 0 !important;
    border: 1px solid #e1e9f2 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
  }

  body[data-page="records"] .mobile-debtor-facts > div {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border-right: 1px solid #e1e9f2 !important;
  }

  body[data-page="records"] .mobile-debtor-facts > div:last-child {
    border-right: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-facts span {
    color: #647084 !important;
    font: 700 12px/1.15 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-facts strong {
    min-width: 0 !important;
    color: #111c31 !important;
    font: 800 14px/1.18 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page="records"] .mobile-debtor-pill {
    display: inline-flex !important;
    justify-self: start !important;
    padding: 5px 8px !important;
    border-radius: 8px !important;
    background: #e9fff5 !important;
    color: #009b62 !important;
    font-size: 13px !important;
  }

  body[data-page="records"] .mobile-debtor-pill.is-danger {
    background: #ffe8e8 !important;
    color: #f0202f !important;
  }

  body[data-page="records"] .mobile-debtor-pill.is-warning {
    background: #fff2df !important;
    color: #f47a00 !important;
  }

  body[data-page="records"] .mobile-debtor-primary-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .92fr) 64px !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body[data-page="records"] .mobile-debtor-pay,
  body[data-page="records"] .mobile-debtor-contract,
  body[data-page="records"] .mobile-debtor-more-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 0 10px !important;
    border: 1px solid #e1e9f2 !important;
    border-radius: 12px !important;
    color: #111c31 !important;
    background: #ffffff !important;
    font: 800 14px/1.1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  body[data-page="records"] .mobile-debtor-pay {
    border: 0 !important;
    background: linear-gradient(135deg, #18c982, #00935f) !important;
    color: #ffffff !important;
  }

  body[data-page="records"] .mobile-debtor-pay svg,
  body[data-page="records"] .mobile-debtor-contract svg {
    flex: 0 0 21px !important;
    width: 21px !important;
    height: 21px !important;
  }

  body[data-page="records"] .mobile-debtor-menu {
    position: relative !important;
  }

  body[data-page="records"] .mobile-debtor-more-button {
    height: 54px !important;
    flex-direction: column !important;
    gap: 2px !important;
    border: 0 !important;
    background: #eafff5 !important;
    color: #009b62 !important;
    list-style: none !important;
  }

  body[data-page="records"] .mobile-debtor-more-button::-webkit-details-marker {
    display: none !important;
  }

  body[data-page="records"] .mobile-debtor-more-button span {
    font-size: 19px !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
  }

  body[data-page="records"] .mobile-debtor-more-button strong {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  body[data-page="records"] .mobile-debtor-menu[open]::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    background: rgba(15, 27, 49, .34) !important;
    backdrop-filter: blur(2px) !important;
  }

  body[data-page="records"] .mobile-debtor-popover,
  body[data-page="records"] .mobile-debtor-management-sheet {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    z-index: 100 !important;
    width: min(310px, calc(100vw - 52px)) !important;
    transform: translateX(-50%) !important;
    border: 1px solid #e1e9f2 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(10, 24, 44, .22) !important;
    overflow: hidden !important;
  }

  body[data-page="records"] .mobile-debtor-popover::before {
    content: "" !important;
    position: absolute !important;
    right: 34px !important;
    bottom: -10px !important;
    width: 22px !important;
    height: 22px !important;
    border-right: 1px solid #e1e9f2 !important;
    border-bottom: 1px solid #e1e9f2 !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
  }

  body[data-page="records"] .mobile-debtor-popover button,
  body[data-page="records"] .mobile-debtor-management > summary,
  body[data-page="records"] .mobile-debtor-management-sheet button {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #111c31 !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  body[data-page="records"] .mobile-debtor-popover button span:not(.menu-icon),
  body[data-page="records"] .mobile-debtor-management-sheet button span:not(.menu-icon) {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-popover strong,
  body[data-page="records"] .mobile-debtor-management-sheet strong {
    color: #111c31 !important;
    font: 800 14px/1.1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-popover small,
  body[data-page="records"] .mobile-debtor-management-sheet small {
    color: #647084 !important;
    font: 700 11.5px/1.15 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .menu-icon {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #eefcf6 !important;
    color: #009b62 !important;
    font: 800 12px/1 "Inter","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .menu-icon.is-history {
    background: #eeebff !important;
    color: #5c50df !important;
  }

  body[data-page="records"] .menu-icon.is-edit {
    background: #eaf4ff !important;
    color: #1677d2 !important;
  }

  body[data-page="records"] .menu-icon.is-renew {
    background: #fff2df !important;
    color: #f47a00 !important;
  }

  body[data-page="records"] .menu-icon.is-lock,
  body[data-page="records"] .menu-icon.is-delete {
    background: #ffe8e8 !important;
    color: #f0202f !important;
  }

  body[data-page="records"] .mobile-debtor-management {
    position: relative !important;
  }

  body[data-page="records"] .mobile-debtor-management > summary {
    display: flex !important;
    justify-content: space-between !important;
    min-height: 58px !important;
    color: #111c31 !important;
    font: 800 14px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    list-style: none !important;
  }

  body[data-page="records"] .mobile-debtor-management > summary::-webkit-details-marker {
    display: none !important;
  }

  body[data-page="records"] .mobile-debtor-management:not([open]) .mobile-debtor-management-sheet {
    display: none !important;
  }

  body[data-page="records"] .mobile-debtor-management-sheet {
    z-index: 110 !important;
    padding-top: 12px !important;
  }

  body[data-page="records"] .mobile-debtor-management-title {
    padding: 0 18px 10px !important;
    color: #111c31 !important;
    text-align: center !important;
  }

  body[data-page="records"] .mobile-debtor-management-sheet button.is-danger strong {
    color: #f0202f !important;
  }

  body[data-page="records"] .mobile-debtor-management-sheet .mobile-debtor-cancel {
    display: flex !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 10px 14px 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f3f6fa !important;
    color: #111c31 !important;
    text-align: center !important;
    font: 800 14px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }

  body[data-page="records"] .mobile-debtor-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 140px !important;
    border: 1px dashed #cbd8e6 !important;
    border-radius: 18px !important;
    color: #647084 !important;
    font: 800 16px/1.2 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  }
}

@media (max-width: 430px) {
  body[data-page="records"] #recordsPanel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-page="records"] #recordsPanel > .panel-title h2 {
    font-size: 34px !important;
  }

  body[data-page="records"] #recordsHint {
    font-size: 17px !important;
  }

  body[data-page="records"] .mobile-debtor-title-button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button {
    font-size: 12.5px !important;
  }

  body[data-page="records"] .mobile-debtor-tabs button strong {
    font-size: 13.5px !important;
  }

  body[data-page="records"] .mobile-debtor-collapse > summary {
    padding: 16px 14px !important;
  }

  body[data-page="records"] .mobile-debtor-person {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-page="records"] .mobile-debtor-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  body[data-page="records"] .mobile-debtor-name strong {
    font-size: 17px !important;
  }

  body[data-page="records"] .mobile-debtor-name small {
    font-size: 13px !important;
  }

  body[data-page="records"] .mobile-debtor-money {
    min-width: 92px !important;
    max-width: 112px !important;
  }

  body[data-page="records"] .mobile-debtor-money strong {
    font-size: 15.5px !important;
  }

  body[data-page="records"] .mobile-debtor-due {
    font-size: 14px !important;
  }

  body[data-page="records"] .mobile-debtor-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-facts > div {
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-right: 1px solid #e1e9f2 !important;
    border-bottom: 1px solid #e1e9f2 !important;
  }

  body[data-page="records"] .mobile-debtor-facts > div:nth-child(2n) {
    border-right: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-facts > div:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-primary-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) 58px !important;
    gap: 7px !important;
  }

  body[data-page="records"] .mobile-debtor-pay,
  body[data-page="records"] .mobile-debtor-contract {
    min-height: 50px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
  }

  body[data-page="records"] .mobile-debtor-more-button {
    min-height: 50px !important;
  }
}

/* premium143-final: keep latest mobile loan flow overrides last in cascade. */
@media (max-width: 768px) {
  .loan-mobile-header {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: start !important;
    min-height: 74px !important;
    padding: 18px 22px 8px !important;
  }
  .loan-mobile-header h1 {
    font-size: clamp(29px, 8.6vw, 42px) !important;
    line-height: .96 !important;
    font-weight: 800 !important;
    text-align: left !important;
  }
  .loan-mobile-header p {
    font-size: clamp(16px, 4.4vw, 22px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
  .loan-mobile-back {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: #009b62 !important;
    box-shadow: none !important;
  }
  .loan-mobile-header-draft {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #009b62 !important;
    font: 800 17px/1 "Krungthai Fast", "Sarabun", "TH Sarabun PSK", sans-serif !important;
    white-space: nowrap !important;
  }
  .loan-mobile-stepper {
    grid-template-columns: 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px !important;
    gap: 5px !important;
    padding: 12px 26px 18px !important;
    overflow: visible !important;
  }
  .loan-mobile-step span {
    width: 38px !important;
    height: 38px !important;
    font-size: 21px !important;
  }
  .loan-mobile-step small {
    width: 64px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }
  .loan-mobile-stepper i {
    margin-top: 18px !important;
    height: 2px !important;
  }
  .loan-mobile-meta-bar {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 12px 24px !important;
    padding: 10px 13px !important;
    border: 1px solid #bfe9d8 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #eefcf6, #f7fffb) !important;
  }
  .loan-mobile-meta-bar span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .loan-mobile-meta-bar svg,
  .loan-mobile-tip svg {
    width: 20px !important;
    height: 20px !important;
    color: #009b62 !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  .loan-mobile-body {
    padding: 0 24px 96px !important;
    background: #f6f9fc !important;
  }
  .loan-mobile-card {
    padding: 30px 28px 24px !important;
    border-radius: 20px !important;
  }
  .loan-mobile-card-head {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .loan-mobile-head-icon {
    width: 76px !important;
    height: 76px !important;
  }
  .loan-mobile-head-icon svg {
    width: 44px !important;
    height: 44px !important;
  }
  .loan-mobile-card-head h2 {
    font-size: clamp(31px, 8.4vw, 42px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }
  .loan-mobile-card-head p {
    font-size: clamp(17px, 4.6vw, 23px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }
  .loan-mobile-field > span {
    font-size: 19px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
  }
  .loan-mobile-control {
    min-height: 58px !important;
    padding: 0 15px !important;
    gap: 12px !important;
    border-radius: 13px !important;
  }
  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    font: 700 20px/1.2 "Krungthai Fast", "Sarabun", "TH Sarabun PSK", sans-serif !important;
  }
  .loan-mobile-control i svg {
    width: 27px !important;
    height: 27px !important;
  }
  .loan-mobile-counter,
  .loan-mobile-control em {
    color: #69768a !important;
    font: 700 15px/1 "Krungthai Fast", "Sarabun", sans-serif !important;
    white-space: nowrap !important;
  }
  .loan-mobile-tip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 12px 0 16px !important;
    min-height: 42px !important;
    padding: 10px 13px !important;
    border: 1px solid #bfe9d8 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #eefcf6, #f7fffb) !important;
    color: #657184 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  .loan-mobile-header {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    padding: 14px 16px 7px !important;
  }
  .loan-mobile-header h1 { font-size: 31px !important; }
  .loan-mobile-header p { font-size: 17px !important; }
  .loan-mobile-header-draft { font-size: 13px !important; }
  .loan-mobile-stepper {
    grid-template-columns: 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px !important;
    padding: 10px 12px 16px !important;
  }
  .loan-mobile-step span {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }
  .loan-mobile-step small {
    width: 49px !important;
    font-size: 10.5px !important;
  }
  .loan-mobile-meta-bar {
    margin: 10px 12px !important;
    padding: 8px 9px !important;
  }
  .loan-mobile-meta-bar span {
    gap: 4px !important;
    font-size: 11.5px !important;
  }
  .loan-mobile-body {
    padding: 0 12px 88px !important;
  }
  .loan-mobile-card {
    padding: 22px 15px 18px !important;
    border-radius: 16px !important;
  }
  .loan-mobile-card-head {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .loan-mobile-head-icon {
    width: 56px !important;
    height: 56px !important;
  }
  .loan-mobile-head-icon svg {
    width: 34px !important;
    height: 34px !important;
  }
  .loan-mobile-card-head h2 { font-size: 30px !important; }
  .loan-mobile-card-head p { font-size: 17px !important; }
  .loan-mobile-field > span { font-size: 16px !important; }
  .loan-mobile-control {
    min-height: 50px !important;
    padding: 0 11px !important;
    gap: 8px !important;
    border-radius: 11px !important;
  }
  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    font-size: 15.5px !important;
  }
  .loan-mobile-control i svg {
    width: 22px !important;
    height: 22px !important;
  }
  .loan-mobile-counter,
  .loan-mobile-control em {
    font-size: 12.5px !important;
  }
}

/* premium143: live database mobile loan flow refinements. */
@media (max-width: 768px) {
  body.loan-mobile-flow-open {
    overflow: hidden !important;
  }

  .loan-mobile-flow {
    background: #f6f9fc !important;
    color: #111c32 !important;
    font-family: "Krungthai Fast", "Sarabun", "TH Sarabun PSK", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-flow * {
    box-sizing: border-box !important;
  }

  .loan-mobile-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    min-height: 74px !important;
    padding: 18px 22px 8px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 0 !important;
  }

  .loan-mobile-header h1 {
    margin: 0 !important;
    font-size: clamp(29px, 8.6vw, 42px) !important;
    line-height: .96 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .loan-mobile-header p {
    margin: 3px 0 0 !important;
    color: #68758a !important;
    font-size: clamp(16px, 4.4vw, 22px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  .loan-mobile-back {
    width: 34px !important;
    height: 34px !important;
    margin-top: 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: #009b62 !important;
    box-shadow: none !important;
  }

  .loan-mobile-back svg {
    width: 31px !important;
    height: 31px !important;
    stroke-width: 3 !important;
  }

  .loan-mobile-header-draft {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #009b62 !important;
    font: 800 17px/1 "Krungthai Fast", "Sarabun", sans-serif !important;
    white-space: nowrap !important;
  }

  .loan-mobile-header-draft svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2.4 !important;
  }

  .loan-mobile-stepper {
    display: grid !important;
    grid-template-columns: 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px minmax(18px, 1fr) 38px !important;
    align-items: start !important;
    gap: 5px !important;
    padding: 12px 26px 18px !important;
    background: #fff !important;
    border-bottom: 1px solid #e4ebf3 !important;
    overflow: visible !important;
  }

  .loan-mobile-step {
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #667386 !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .loan-mobile-step span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #e8ebf0 !important;
    color: #657184 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .loan-mobile-step.is-active span,
  .loan-mobile-step.is-done span {
    background: linear-gradient(145deg, #13c981, #008f57) !important;
    color: #fff !important;
  }

  .loan-mobile-step small {
    width: 64px !important;
    color: inherit !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .loan-mobile-step.is-active small,
  .loan-mobile-step.is-done small {
    color: #009b62 !important;
  }

  .loan-mobile-stepper i {
    height: 2px !important;
    margin-top: 18px !important;
    border-radius: 99px !important;
    background: #dce1e8 !important;
  }

  .loan-mobile-stepper i.is-done {
    background: #05a86a !important;
  }

  .loan-mobile-meta-bar,
  .loan-mobile-tip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 12px 24px 12px !important;
    padding: 10px 13px !important;
    border: 1px solid #bfe9d8 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #eefcf6, #f7fffb) !important;
    color: #163047 !important;
  }

  .loan-mobile-meta-bar span,
  .loan-mobile-tip {
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  .loan-mobile-meta-bar span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .loan-mobile-meta-bar svg,
  .loan-mobile-tip svg {
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    color: #009b62 !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    fill: none !important;
  }

  .loan-mobile-body {
    padding: 0 24px 96px !important;
    background: #f6f9fc !important;
  }

  .loan-mobile-card {
    margin: 0 0 14px !important;
    padding: 30px 28px 24px !important;
    border: 1px solid #d9e2ee !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
  }

  .loan-mobile-card-head {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    margin-bottom: 24px !important;
  }

  .loan-mobile-head-icon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: #daf8e9 !important;
    color: #009b62 !important;
    display: grid !important;
    place-items: center !important;
  }

  .loan-mobile-head-icon svg {
    width: 44px !important;
    height: 44px !important;
    stroke: currentColor !important;
    stroke-width: 2.1 !important;
    fill: none !important;
  }

  .loan-mobile-card-head h2 {
    margin: 0 !important;
    color: #111c32 !important;
    font-size: clamp(31px, 8.4vw, 42px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .loan-mobile-card-head p {
    margin: 5px 0 0 !important;
    color: #69768a !important;
    font-size: clamp(17px, 4.6vw, 23px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  .loan-mobile-divider {
    margin: 0 0 22px !important;
    height: 1px !important;
    background: #dfe6ef !important;
  }

  .loan-mobile-grid.two {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .loan-mobile-field {
    display: grid !important;
    gap: 9px !important;
    margin: 0 0 19px !important;
    color: #111c32 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  .loan-mobile-field > span {
    display: inline-block !important;
    color: #111c32 !important;
    font-size: 19px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
  }

  .loan-mobile-field b {
    color: #009b62 !important;
  }

  .loan-mobile-control {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding: 0 15px !important;
    border: 1.6px solid #d5deeb !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .loan-mobile-control:focus-within {
    border-color: #009b62 !important;
    box-shadow: 0 0 0 3px rgba(0, 155, 98, .12) !important;
  }

  .loan-mobile-control i {
    flex: 0 0 auto !important;
    color: #009b62 !important;
    display: grid !important;
    place-items: center !important;
  }

  .loan-mobile-control i svg {
    width: 27px !important;
    height: 27px !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    fill: none !important;
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #111c32 !important;
    font: 700 20px/1.2 "Krungthai Fast", "Sarabun", "TH Sarabun PSK", sans-serif !important;
    letter-spacing: 0 !important;
  }

  .loan-mobile-control input::placeholder,
  .loan-mobile-control textarea::placeholder {
    color: #9aa6b8 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }

  .loan-mobile-counter,
  .loan-mobile-control em {
    flex: 0 0 auto !important;
    color: #69768a !important;
    font: 700 15px/1 "Krungthai Fast", "Sarabun", sans-serif !important;
    white-space: nowrap !important;
  }

  .loan-mobile-right-icon {
    color: #4b5565 !important;
  }

  .loan-mobile-tip {
    justify-content: center !important;
    margin: 12px 0 16px !important;
    min-height: 42px !important;
    text-align: center !important;
    color: #657184 !important;
  }
}

@media (max-width: 430px) {
  .loan-mobile-header {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    padding: 14px 16px 7px !important;
  }

  .loan-mobile-header h1 {
    font-size: 31px !important;
  }

  .loan-mobile-header p {
    font-size: 17px !important;
  }

  .loan-mobile-header-draft {
    font-size: 13px !important;
    gap: 5px !important;
  }

  .loan-mobile-header-draft svg {
    width: 17px !important;
    height: 17px !important;
  }

  .loan-mobile-stepper {
    grid-template-columns: 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px minmax(10px, 1fr) 32px !important;
    gap: 4px !important;
    padding: 10px 12px 16px !important;
  }

  .loan-mobile-step span {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }

  .loan-mobile-step small {
    width: 49px !important;
    font-size: 10.5px !important;
  }

  .loan-mobile-stepper i {
    margin-top: 15px !important;
  }

  .loan-mobile-meta-bar {
    margin: 10px 12px !important;
    padding: 8px 9px !important;
  }

  .loan-mobile-meta-bar span {
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  .loan-mobile-meta-bar svg {
    width: 16px !important;
    height: 16px !important;
  }

  .loan-mobile-body {
    padding: 0 12px 88px !important;
  }

  .loan-mobile-card {
    padding: 22px 15px 18px !important;
    border-radius: 16px !important;
  }

  .loan-mobile-card-head {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .loan-mobile-head-icon {
    width: 56px !important;
    height: 56px !important;
  }

  .loan-mobile-head-icon svg {
    width: 34px !important;
    height: 34px !important;
  }

  .loan-mobile-card-head h2 {
    font-size: 30px !important;
  }

  .loan-mobile-card-head p {
    font-size: 17px !important;
  }

  .loan-mobile-grid.two {
    gap: 10px !important;
  }

  .loan-mobile-field {
    gap: 7px !important;
    margin-bottom: 15px !important;
  }

  .loan-mobile-field > span {
    font-size: 16px !important;
  }

  .loan-mobile-control {
    min-height: 50px !important;
    padding: 0 11px !important;
    gap: 8px !important;
    border-radius: 11px !important;
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    font-size: 15.5px !important;
  }

  .loan-mobile-control i svg {
    width: 22px !important;
    height: 22px !important;
  }

  .loan-mobile-counter,
  .loan-mobile-control em {
    font-size: 12.5px !important;
  }
}

/* v1.1.0-mobile-dashboard-premium143: richer dashboard tasks and all-tasks mobile flow. */
@media (max-width: 767px) {
  body.dashboard-all-tasks-open {
    overflow: hidden !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-card {
    padding: 0 14px !important;
    min-height: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-row {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    grid-template-columns: 46px minmax(0, 1fr) auto 14px !important;
    gap: 10px !important;
    padding: 7px 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-icon {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-icon::before {
    content: "" !important;
    position: absolute !important;
    inset: 9px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-overdue .followup-icon,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-overdue .followup-amount {
    color: #ef3340 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-call .followup-icon,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-call .followup-meta {
    color: #f59e0b !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-slip .followup-icon {
    color: #2563eb !important;
    background: #dbeafe !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-missed .followup-icon {
    color: #64748b !important;
    background: #e5e7eb !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-soon .followup-icon {
    color: #f59e0b !important;
    background: #fef3c7 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-overdue .followup-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-call .followup-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-slip .followup-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h14v16H5V4Zm4 4h6v2H9V8Zm0 4h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h14v16H5V4Zm4 4h6v2H9V8Zm0 4h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-missed .followup-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 11.5-7.2L13 16.3l2.1 2.1 2.5-2.5A8 8 0 0 1 20 21H4Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 11.5-7.2L13 16.3l2.1 2.1 2.5-2.5A8 8 0 0 1 20 21H4Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-soon .followup-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm1-16h-2v7l5 3 1-1.7-4-2.3V6Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm1-16h-2v7l5 3 1-1.7-4-2.3V6Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy strong {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy small,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-meta {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 15px !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(76px, 1fr)) !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
    scrollbar-width: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-list::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-card,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main {
    min-height: 116px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main {
    padding: 11px 6px 34px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-avatar {
    width: 39px !important;
    height: 39px !important;
    margin-bottom: 5px !important;
    font-size: 15px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main strong {
    font-size: 11px !important;
    line-height: 14px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main small {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 13px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-amount {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 15px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-call {
    bottom: 8px !important;
    width: 25px !important;
    height: 25px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-call::before {
    width: 13px !important;
    height: 13px !important;
  }

  .dashboard-all-tasks-flow {
    position: fixed;
    inset: 0;
    z-index: 11100;
    background: #f6f9fc;
    color: #111c31;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 260ms ease, transform 260ms ease;
  }

  .dashboard-all-tasks-flow.is-open {
    opacity: 1;
    transform: translateX(0);
  }

  .dashboard-all-tasks-flow.hidden {
    display: none !important;
  }

  .dashboard-all-tasks-content {
    height: 100dvh;
    overflow-y: auto;
    padding: max(10px, env(safe-area-inset-top)) 12px calc(26px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-all-tasks-header {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    min-height: 44px;
    margin-bottom: 10px;
  }

  .dashboard-all-tasks-header h1 {
    margin: 0;
    color: #101b30;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
  }

  .dashboard-all-back,
  .dashboard-all-filter {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #52627a;
    font: inherit;
    font-size: 34px;
    font-weight: 900;
    display: grid;
    place-items: center;
  }

  .dashboard-all-filter svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dashboard-all-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 12px;
    scrollbar-width: none;
  }

  .dashboard-all-chips::-webkit-scrollbar {
    display: none;
  }

  .dashboard-all-chips button {
    min-width: max-content;
    height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: #eef3f8;
    color: #64748b;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
  }

  .dashboard-all-chips button.is-active {
    background: #08a763;
    color: #fff;
    box-shadow: 0 8px 18px rgba(8, 167, 99, .22);
  }

  .dashboard-all-timeline {
    display: grid;
    gap: 14px;
  }

  .dashboard-all-timeline h2 {
    margin: 0 0 7px;
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
  }

  .dashboard-all-task-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e3ebf5;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
  }

  .dashboard-all-task-row {
    position: relative;
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 54px 38px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #e5edf6;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }

  .dashboard-all-task-row:last-child {
    border-bottom: 0;
  }

  .dashboard-all-task-time {
    color: #111c31;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
  }

  .dashboard-all-task-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcfce7;
    color: #08a763;
  }

  .dashboard-all-task-icon::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .dashboard-all-task-row.is-danger .dashboard-all-task-icon {
    background: #fee2e2;
    color: #ef3340;
  }

  .dashboard-all-task-row.is-warning .dashboard-all-task-icon,
  .dashboard-all-task-row.is-soon .dashboard-all-task-icon {
    background: #fef3c7;
    color: #f59e0b;
  }

  .dashboard-all-task-row.is-slip .dashboard-all-task-icon {
    background: #dbeafe;
    color: #2563eb;
  }

  .dashboard-all-task-row.is-muted .dashboard-all-task-icon {
    background: #e5e7eb;
    color: #64748b;
  }

  .dashboard-all-task-icon.icon-calendar::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h2a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V2Zm12 8H5v10h14V10Z'/%3E%3C/svg%3E");
  }

  .dashboard-all-task-icon.icon-phone::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E");
  }

  .dashboard-all-task-icon.icon-slip::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h14v16H5V4Zm4 4h6v2H9V8Zm0 4h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h14v16H5V4Zm4 4h6v2H9V8Zm0 4h6v2H9v-2Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
  }

  .dashboard-all-task-icon.icon-missed::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 11.5-7.2L13 16.3l2.1 2.1 2.5-2.5A8 8 0 0 1 20 21H4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 11.5-7.2L13 16.3l2.1 2.1 2.5-2.5A8 8 0 0 1 20 21H4Z'/%3E%3C/svg%3E");
  }

  .dashboard-all-task-icon.icon-clock::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm1-16h-2v7l5 3 1-1.7-4-2.3V6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm1-16h-2v7l5 3 1-1.7-4-2.3V6Z'/%3E%3C/svg%3E");
  }

  .dashboard-all-task-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .dashboard-all-task-copy strong,
  .dashboard-all-task-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-all-task-copy strong {
    color: #111c31;
    font-size: 14px;
    font-weight: 950;
    line-height: 18px;
  }

  .dashboard-all-task-copy small {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    line-height: 15px;
  }

  .dashboard-all-task-call,
  .dashboard-all-task-chevron {
    justify-self: end;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e8fff2;
    color: #08a763;
    text-decoration: none;
  }

  .dashboard-all-task-call::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .dashboard-all-task-chevron {
    background: transparent;
    color: #64748b;
    font-size: 24px;
    font-weight: 900;
  }

  .dashboard-all-empty {
    padding: 18px;
    color: #64748b;
    font-size: 14px;
    font-weight: 850;
    text-align: center;
  }
}

@media (max-width: 768px) {
  body.today-collection-open {
    overflow: hidden !important;
  }

  .today-collection-flow {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: #f6f9fc;
    color: #111c31;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 260ms ease, transform 260ms ease;
  }

  .today-collection-flow.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  .today-collection-flow.hidden {
    display: none !important;
  }

  .today-collection-shell,
  .today-collection-content {
    min-height: 100%;
  }

  .today-collection-content {
    height: 100dvh;
    overflow-y: auto;
    padding: max(10px, env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .today-collection-header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-bottom: 8px;
  }

  .today-collection-header h1 {
    margin: 0;
    text-align: center;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0;
    color: #101b30;
  }

  .today-icon-button,
  .today-history-button,
  .today-filter-button {
    border: 0;
    background: transparent;
    color: #0ba262;
    font: inherit;
    font-weight: 900;
  }

  .today-icon-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 32px;
    line-height: 1;
    color: #64748b;
  }

  .today-history-button {
    min-width: 68px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
  }

  .today-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 11px;
    padding: 12px 14px 14px;
    color: #fff;
    background: linear-gradient(135deg, #13bf74 0%, #009a55 100%);
    box-shadow: 0 11px 22px rgba(0, 153, 88, 0.22);
  }

  .today-hero-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -34px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .today-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr 0.9fr;
    gap: 8px;
  }

  .today-hero-grid > div {
    min-width: 0;
    padding-right: 7px;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
  }

  .today-hero-grid > div:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .today-hero-grid small,
  .today-progress-row {
    display: block;
    font-size: 10px;
    font-weight: 800;
    opacity: 0.9;
  }

  .today-hero-grid strong {
    display: block;
    margin-top: 4px;
    font-size: clamp(24px, 7vw, 33px);
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
  }

  .today-hero-grid strong span {
    font-size: 11px;
    font-weight: 850;
  }

  .today-progress-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11.5px;
  }

  .today-progress-bar {
    position: relative;
    z-index: 1;
    height: 7px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
  }

  .today-progress-bar span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: #d7ffea;
    transition: width 280ms ease;
  }

  .today-queue-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin: 14px 0 9px;
  }

  .today-queue-toolbar h2 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 17px;
    font-weight: 950;
    color: #111c31;
  }

  .today-queue-toolbar > button {
    border: 1px solid #e1eaf4;
    border-radius: 999px;
    background: #fff;
    color: #52627a;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
  }

  .today-filter-button {
    grid-column: 2;
    height: 34px;
    min-width: 86px;
    padding: 0 11px;
    font-size: 11.5px !important;
    color: #52627a !important;
  }

  .today-sort-pill {
    grid-column: 1;
    justify-self: start;
    height: 34px;
    padding: 0 11px;
  }

  .today-sort-pill svg,
  .today-filter-button svg,
  .today-action-button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .today-queue-list {
    display: grid;
    gap: 8px;
  }

  .today-queue-card,
  .today-empty-card,
  .today-summary-strip,
  .today-detail-card,
  .today-detail-profile,
  .today-history-card {
    background: #fff;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  }

  .today-queue-card {
    position: relative;
    overflow: hidden;
    padding: 9px 10px 10px 14px;
  }

  .today-queue-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #94a3b8;
  }

  .today-queue-card.is-danger::before {
    background: #ef3340;
  }

  .today-queue-card.is-warning::before {
    background: #f5a400;
  }

  .today-queue-main {
    display: grid;
    grid-template-columns: 30px 48px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 8px;
  }

  .today-queue-number {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #15c878, #049b59);
    font-weight: 950;
    font-size: 13px;
  }

  .today-queue-card.is-danger .today-queue-number {
    background: linear-gradient(135deg, #ff4a55, #ef2335);
  }

  .today-queue-card.is-warning .today-queue-number {
    background: linear-gradient(135deg, #ffbd2e, #f5a400);
  }

  .today-queue-card.is-neutral .today-queue-number {
    background: linear-gradient(135deg, #9aa4b2, #6b7280);
  }

  .today-queue-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #dff8eb;
  }

  .today-queue-avatar.is-generated {
    display: grid;
    place-items: center;
    color: #07995b;
    font-size: 22px;
    font-weight: 950;
  }

  .today-queue-copy,
  .today-queue-amount {
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0;
    color: inherit;
    font: inherit;
  }

  .today-queue-name {
    display: inline-block;
    max-width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 14.5px;
    font-weight: 950;
  }

  .today-queue-badge {
    display: inline-flex;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #dff8eb;
    color: #08a461;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 900;
    vertical-align: middle;
  }

  .today-queue-badge.overdue {
    background: #ffe9e9;
    color: #ef3340;
  }

  .today-queue-copy small,
  .today-queue-copy em {
    display: block;
    margin-top: 1px;
    color: #66758b;
    font-size: 11.2px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
  }

  .today-queue-status {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #edf2f7;
    color: #64748b;
    font-size: 9.5px;
    font-weight: 950;
    line-height: 1.35;
  }

  .today-queue-status.is-danger {
    background: #ffe8ea;
    color: #ef2335;
  }

  .today-queue-status.is-warning,
  .today-queue-status.is-sent {
    background: #fff4d8;
    color: #e09a00;
  }

  .today-queue-amount {
    display: grid;
    grid-template-columns: auto 10px;
    align-items: center;
    justify-items: end;
    gap: 0 8px;
    min-width: 70px;
    text-align: right;
  }

  .today-queue-amount strong {
    color: #ef3340;
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
  }

  .today-queue-amount small {
    grid-column: 1;
    color: #52627a;
    font-size: 11px;
    font-weight: 850;
  }

  .today-queue-amount span {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: #64748b;
    font-size: 25px;
  }

  .today-queue-actions {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr;
    gap: 7px;
    margin-top: 9px;
  }

  .today-action-button {
    height: 34px;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    color: #0aa262;
    background: #e9fbf2;
  }

  .today-action-button.is-money {
    color: #fff;
    background: linear-gradient(135deg, #18c77a, #009b5d);
    box-shadow: 0 10px 18px rgba(0, 160, 94, 0.22);
  }

  .today-action-button.is-chat {
    color: #2676f6;
    background: #edf4ff;
  }

  .today-action-button.is-disabled,
  .today-action-button.is-muted {
    opacity: 0.55;
  }

  .today-summary-strip {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  }

  .today-tip-line {
    margin: 10px 4px 0;
    color: #8a97aa;
    font-size: 11px;
    font-weight: 750;
  }

  .today-summary-strip > div {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 8px;
  }

  .today-summary-icon {
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0aa262;
  }

  .today-summary-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    transform: rotate(-10deg);
  }

  .today-summary-strip strong {
    font-size: 13.5px;
    font-weight: 950;
  }

  .today-summary-strip small {
    color: #64748b;
    font-size: 10.5px;
    font-weight: 750;
  }

  .today-summary-strip button,
  .today-save-receive,
  .today-send-line,
  .today-call-now,
  .today-summary-sheet > button {
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #17c577, #00975a);
    color: #fff;
    font-weight: 950;
    text-decoration: none;
  }

  .today-summary-strip button {
    height: 38px;
    padding: 0 13px;
    background: #fff;
    color: #0aa262;
    border: 1px solid #14b86b;
  }

  .today-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(8px);
  }

  .today-bottom-sheet,
  .today-receive-sheet,
  .today-call-sheet,
  .today-chat-sheet,
  .today-summary-sheet {
    position: fixed;
    z-index: 2;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26);
    animation: todaySheetUp 260ms ease both;
  }

  @keyframes todaySheetUp {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .today-bottom-sheet {
    padding: 18px;
  }

  .today-bottom-sheet h3,
  .today-receive-sheet h3,
  .today-summary-sheet h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 950;
  }

  .today-bottom-sheet button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #182338;
    font-size: 16px;
    font-weight: 850;
  }

  .today-bottom-sheet button.is-active i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b76d;
    box-shadow: inset 0 0 0 6px #e8fff2;
  }

  .today-receive-sheet,
  .today-chat-sheet,
  .today-summary-sheet {
    padding: 18px;
  }

  .today-receive-sheet {
    max-height: calc(100dvh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .today-sheet-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid #d9e2ef;
    border-radius: 50%;
    background: #fff;
    color: #52627a;
    font-size: 26px;
    line-height: 1;
  }

  .today-receive-head {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    padding-right: 40px;
  }

  .today-receive-avatar,
  .today-chat-avatar,
  .today-detail-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    background: #dff8eb;
    display: grid;
    place-items: center;
    color: #089c5d;
    font-weight: 950;
    font-size: 23px;
  }

  .today-receive-head small,
  .today-receive-head p {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
  }

  .today-receive-head h3 {
    margin: 2px 0;
    font-size: 20px;
  }

  .today-receive-row {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
  }

  .today-receive-row span,
  .today-field > span,
  .today-file-field > span {
    color: #111c31;
    font-weight: 900;
  }

  .today-receive-row strong {
    color: #ef3340;
    font-size: 22px;
  }

  .today-receive-breakdown {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e5edf6;
    border-radius: 12px;
    background: #fbfdff;
  }

  .today-receive-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
  }

  .today-receive-breakdown > div strong {
    color: #111c31;
    font-size: 14px;
    font-weight: 950;
  }

  .today-receive-breakdown > div.is-total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #dce6f2;
    color: #111c31;
    font-size: 15px;
  }

  .today-receive-breakdown > div.is-total strong {
    color: #0aa262;
    font-size: 19px;
  }

  .today-receive-breakdown ul {
    display: grid;
    gap: 7px;
    margin: 2px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #edf2f7;
    list-style: none;
  }

  .today-receive-breakdown li {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
  }

  .today-receive-breakdown li > span {
    color: #64748b;
    font-size: 14px;
  }

  .today-receive-breakdown li strong {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
  }

  .today-field,
  .today-file-field {
    display: grid;
    gap: 7px;
    margin-top: 12px;
  }

  .today-field div,
  .today-field input,
  .today-file-field,
  .today-radio-grid label {
    border: 1px solid #dce6f2;
    border-radius: 10px;
    background: #fff;
  }

  .today-field div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-right: 12px;
  }

  .today-field input {
    border: 0;
    min-height: 46px;
    padding: 0 12px;
    font: inherit;
    font-size: 18px;
    font-weight: 850;
    min-width: 0;
  }

  .today-radio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .today-radio-grid label {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-weight: 850;
  }

  .today-radio-grid input {
    accent-color: #0ba262;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
  }

  .today-file-field {
    padding: 12px;
    background: #f8fbff;
  }

  .today-file-field input {
    font-size: 12px;
  }

  .today-file-field em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
  }

  .today-save-receive,
  .today-send-line,
  .today-call-now {
    width: 100%;
    min-height: 50px;
    margin-top: 15px;
    font-size: 18px;
  }

  .today-call-sheet {
    padding: 28px 20px 20px;
    text-align: center;
  }

  .today-call-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0ba262;
    font-size: 30px;
  }

  .today-call-sheet h3 {
    margin: 0;
    font-size: 18px;
  }

  .today-call-sheet strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
  }

  .today-call-sheet p {
    color: #64748b;
    font-weight: 800;
  }

  .today-call-sheet button {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 1px solid #dce6f2;
    border-radius: 10px;
    background: #fff;
    color: #111c31;
    font-weight: 900;
  }

  .today-chat-sheet {
    top: max(18px, env(safe-area-inset-top));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .today-chat-sheet header {
    display: grid;
    grid-template-columns: 34px 42px 1fr;
    align-items: center;
    gap: 9px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
  }

  .today-chat-sheet header button {
    border: 0;
    background: transparent;
    font-size: 34px;
    color: #52627a;
  }

  .today-chat-avatar {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .today-chat-body {
    display: grid;
    align-content: end;
    gap: 10px;
    padding: 16px 0;
    overflow-y: auto;
  }

  .today-bubble {
    max-width: 78%;
    margin: 0;
    padding: 12px;
    border-radius: 14px;
    white-space: pre-line;
    font-size: 13px;
    font-weight: 750;
  }

  .today-bubble.is-out {
    justify-self: end;
    color: #0a7c4c;
    background: #dff8eb;
  }

  .today-bubble.is-in {
    justify-self: start;
    color: #4b5e78;
    background: #f1f5f9;
  }

  .today-detail-main,
  .today-history-list {
    display: grid;
    gap: 12px;
  }

  .today-detail-profile {
    padding: 18px;
    text-align: center;
  }

  .today-detail-avatar {
    width: 82px;
    height: 82px;
    margin: 0 auto 10px;
    font-size: 34px;
  }

  .today-detail-profile h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 950;
  }

  .today-detail-profile p,
  .today-detail-profile small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-weight: 800;
  }

  .today-detail-card {
    padding: 15px;
  }

  .today-detail-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 950;
  }

  .today-detail-card div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid #edf2f7;
  }

  .today-detail-card span,
  .today-detail-card p {
    color: #64748b;
    font-weight: 800;
  }

  .today-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }

  .today-detail-actions a,
  .today-detail-actions button {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #0ba262;
    background: #e8fbf2;
    font-weight: 950;
  }

  .today-history-card {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .today-history-card img,
  .today-history-card > span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #dff8eb;
    display: grid;
    place-items: center;
    color: #0aa262;
    font-weight: 950;
  }

  .today-history-card strong,
  .today-history-card b {
    font-weight: 950;
  }

  .today-history-card small {
    color: #64748b;
    font-weight: 750;
  }

  .today-summary-sheet > p {
    margin: -6px 0 12px;
    color: #64748b;
    font-weight: 800;
  }

  .today-summary-green {
    position: relative;
    padding: 16px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #18c77a, #00955a);
  }

  .today-summary-green small,
  .today-summary-green span {
    display: block;
    font-weight: 800;
    opacity: 0.9;
  }

  .today-summary-green strong {
    display: block;
    margin: 5px 0;
    font-size: 28px;
    font-weight: 950;
  }

  .today-summary-green i {
    position: absolute;
    right: 16px;
    top: 18px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 7px solid rgba(255, 255, 255, 0.28);
    font-style: normal;
    font-weight: 950;
  }

  .today-summary-lines {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    color: #64748b;
    font-weight: 800;
  }

  .today-summary-lines span {
    display: flex;
    justify-content: space-between;
  }

  .today-summary-sheet > button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  .today-empty-card {
    padding: 22px;
    text-align: center;
  }

  .today-empty-card strong {
    display: block;
    font-size: 18px;
    font-weight: 950;
  }

  .today-empty-card small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-weight: 750;
  }
}

.mobile-users-flow {
  display: none;
}

@media (max-width: 768px) {
  /* v1.1.0-mobile-dashboard-reference131: full-screen mobile flow for system users. */
  body.dashboard-more-destination-open:has(#dashboardMoreDestinationSheet[data-destination-target="users"]) {
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: #f6f9fc !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .dashboard-more-destination-backdrop,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .dashboard-more-destination-title,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .dashboard-more-destination-close {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .dashboard-more-destination-panel,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .dashboard-more-destination-content,
  #dashboardMoreDestinationSheet[data-destination-target="users"] #accountUsersMount,
  #dashboardMoreDestinationSheet[data-destination-target="users"] #userManageList {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f6f9fc !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .users-dashboard {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-flow {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    color: #0f172a !important;
    background: linear-gradient(180deg, #fbfeff 0%, #f5f9fc 100%) !important;
    font-family: inherit !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-view {
    height: 100dvh !important;
    padding: 16px 16px 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    animation: mobileUserSlideIn .26s ease both !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-view[hidden] {
    display: none !important;
  }

  @keyframes mobileUserSlideIn {
    from {
      opacity: 0;
      transform: translateX(18px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: 46px 1fr auto !important;
    align-items: center !important;
    min-height: 58px !important;
    gap: 8px !important;
    margin: 0 -2px 18px !important;
    background: linear-gradient(180deg, rgba(251, 254, 255, .98), rgba(251, 254, 255, .90)) !important;
    backdrop-filter: blur(12px) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(20px, 5.3vw, 24px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-back,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-menu-icon,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-more {
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #0f172a !important;
    font: inherit !important;
    display: grid !important;
    place-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-back::before {
    content: "‹" !important;
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-menu-icon::before {
    content: "☰" !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-more {
    font-size: 28px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-add {
    min-height: 42px !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: #009a61 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-count {
    margin: 8px 0 14px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-list-stack {
    display: grid !important;
    gap: 12px !important;
    padding-bottom: 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-list-card,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-card {
    border: 1px solid #e1e8f2 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-list-card {
    width: 100% !important;
    min-height: 82px !important;
    padding: 13px 12px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto 18px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    text-align: left !important;
    color: #0f172a !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-avatar {
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: center / cover no-repeat #dff9ec !important;
    color: #009a61 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-avatar.is-large {
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 12px !important;
    font-size: 36px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-avatar.is-medium {
    width: 82px !important;
    height: 82px !important;
    font-size: 30px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-list-main {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-list-main strong {
    color: #17213a !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-list-main small,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-profile-hero small {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #0a9f67 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-status i,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-profile-hero small i {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: currentColor !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-status.is-disabled,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-profile-hero small.is-disabled {
    color: #94a3b8 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-chevron {
    color: #334155 !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-owner-badge {
    width: fit-content !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #fff4cc !important;
    color: #8a5d00 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    font-style: normal !important;
    white-space: nowrap !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-profile-hero,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-profile-compact {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    margin: 4px 0 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-profile-hero strong {
    color: #0f172a !important;
    font-size: 21px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-card {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-info-card,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-permission-card {
    display: grid !important;
    gap: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-info-card div,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-permission-card div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-info-card div:last-child,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-permission-card div:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-card span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-card strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    text-align: right !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-card h3 {
    margin: 0 0 4px !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding-bottom: 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-detail-actions button,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-bottom-actions button {
    min-height: 52px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-detail-actions .primary-button,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-bottom-actions .primary-button {
    border: 0 !important;
    background: linear-gradient(135deg, #10bf7a, #008d57) !important;
    color: #fff !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-detail-actions .secondary-button,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-bottom-actions .secondary-button {
    border: 1px solid #ccd7e6 !important;
    background: #fff !important;
    color: #0f172a !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-detail-actions .danger-button,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-bottom-actions .danger-button {
    border-color: #fecaca !important;
    background: #ef1f2d !important;
    color: #fff !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-form-card {
    display: grid !important;
    gap: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-form-card label {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-form-card input,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-form-card select {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    outline: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-radio-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-list {
    display: grid !important;
    gap: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-row {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 38px !important;
    justify-content: start !important;
    text-align: left !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-row input {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-row span {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    background: #e2e8f0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-row input:checked + span {
    background: #0dbd77 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-row input:checked + span::before {
    content: "✓" !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-check-row strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    justify-self: start !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-bottom-actions {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px 0 0 !important;
    background: linear-gradient(180deg, rgba(246, 249, 252, .65), #f6f9fc 42%) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-reset-hero,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-delete-card {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-reset-hero span,
  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-delete-card > span {
    width: 82px !important;
    height: 82px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #e4fbef !important;
    color: #009a61 !important;
    font-size: 42px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-delete-card > span {
    background: #fff1f2 !important;
    color: #ef1f2d !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-activity-card {
    display: grid !important;
    gap: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-activity-card div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 4px 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="users"] .mobile-users-activity-card small {
    grid-column: 1 / -1 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90-final-tail: compact submenu wins over earlier menu rules. */
@media (max-width: 767px) {
  .dashboard-more-menu-trigger {
    width: 76px !important;
    height: 76px !important;
    font-size: 40px !important;
    right: 10px !important;
    top: 0 !important;
  }

  .dashboard-more-root-options {
    right: 12px !important;
    top: 132px !important;
    grid-template-columns: 86px 86px !important;
    gap: 14px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    width: 86px !important;
    height: 112px !important;
    min-width: 86px !important;
    gap: 8px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    margin: -2px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    top: 23px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options {
    display: grid !important;
    right: 10px !important;
    top: 86px !important;
    grid-template-columns: 86px !important;
    gap: 8px !important;
    z-index: 7 !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-trigger,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-trigger {
    display: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account {
    order: 1 !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings {
    order: 2 !important;
    opacity: .82 !important;
    transform: scale(.92) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings::before,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account::before {
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .26), 0 16px 30px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-submenu {
    right: 10px !important;
    top: 244px !important;
    width: min(390px, calc(100vw - 20px)) !important;
    gap: 12px !important;
    padding-bottom: 78px !important;
    transform: translateY(-8px) !important;
  }

  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 12px !important;
    min-height: 58px !important;
  }

  .dashboard-more-subitem-label {
    min-width: min(218px, calc(100vw - 126px)) !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .dashboard-more-subitem-icon {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-subitem-icon::before {
    width: 33px !important;
    height: 33px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    right: 10px !important;
    bottom: -58px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before,
  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    width: 34px !important;
    height: 4px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90-final: keep category buttons visible beside compact submenu lists. */
@media (max-width: 767px) {
  .dashboard-more-menu-trigger {
    width: 76px !important;
    height: 76px !important;
    font-size: 40px !important;
    right: 10px !important;
    top: 0 !important;
  }

  .dashboard-more-root-options {
    right: 12px !important;
    top: 132px !important;
    grid-template-columns: 86px 86px !important;
    gap: 14px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    width: 86px !important;
    height: 112px !important;
    min-width: 86px !important;
    gap: 8px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    margin: -2px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    top: 23px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options {
    display: grid !important;
    right: 10px !important;
    top: 86px !important;
    grid-template-columns: 86px !important;
    gap: 8px !important;
    z-index: 7 !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-trigger,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-trigger {
    display: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account {
    order: 1 !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings {
    order: 2 !important;
    opacity: .82 !important;
    transform: scale(.92) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings::before,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account::before {
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .26), 0 16px 30px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-submenu {
    right: 10px !important;
    top: 244px !important;
    width: min(390px, calc(100vw - 20px)) !important;
    gap: 12px !important;
    padding-bottom: 78px !important;
    transform: translateY(-8px) !important;
  }

  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 12px !important;
    min-height: 58px !important;
  }

  .dashboard-more-subitem-label {
    min-width: min(218px, calc(100vw - 126px)) !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .dashboard-more-subitem-icon {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-subitem-icon::before {
    width: 33px !important;
    height: 33px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    right: 10px !important;
    bottom: -58px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before,
  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    width: 34px !important;
    height: 4px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90: compact right-rail more menu with persistent category buttons. */
@media (max-width: 767px) {
  .dashboard-more-menu-trigger {
    width: 76px !important;
    height: 76px !important;
    font-size: 40px !important;
    right: 10px !important;
    top: 0 !important;
  }

  .dashboard-more-root-options {
    right: 12px !important;
    top: 132px !important;
    grid-template-columns: 86px 86px !important;
    gap: 14px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    width: 86px !important;
    height: 112px !important;
    min-width: 86px !important;
    gap: 8px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    margin: -2px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    top: 23px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options {
    display: grid !important;
    right: 10px !important;
    top: 86px !important;
    grid-template-columns: 86px !important;
    gap: 8px !important;
    z-index: 7 !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account {
    order: 1 !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings {
    order: 2 !important;
    opacity: .82 !important;
    transform: scale(.92) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings::before,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account::before {
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .26), 0 16px 30px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-submenu {
    right: 10px !important;
    top: 244px !important;
    width: min(390px, calc(100vw - 20px)) !important;
    gap: 12px !important;
    padding-bottom: 78px !important;
    transform: translateY(-8px) !important;
  }

  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 12px !important;
    min-height: 58px !important;
  }

  .dashboard-more-subitem-label {
    min-width: min(218px, calc(100vw - 126px)) !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .dashboard-more-subitem-icon {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-subitem-icon::before {
    width: 33px !important;
    height: 33px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    right: 10px !important;
    bottom: -58px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before,
  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    width: 34px !important;
    height: 4px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90: floating top-right more menu with slide-out submenus. */
@media (max-width: 767px) {
  .dashboard-more-menu-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 32000 !important;
    display: none !important;
    pointer-events: none !important;
  }

  .dashboard-more-menu-sheet.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .dashboard-more-menu-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .38) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    backdrop-filter: blur(9px) !important;
  }

  .dashboard-more-menu-panel.dashboard-more-menu-float {
    position: absolute !important;
    left: auto !important;
    right: 18px !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    display: block !important;
    width: min(430px, calc(100vw - 28px)) !important;
    height: min(620px, calc(100dvh - 36px)) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translate(12px, -8px) scale(.96) !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }

  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-panel.dashboard-more-menu-float {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
  }

  .dashboard-more-menu-float .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .dashboard-more-menu-trigger {
    position: absolute !important;
    right: 10px !important;
    top: 0 !important;
    z-index: 4 !important;
    display: grid !important;
    place-items: center !important;
    width: 88px !important;
    height: 88px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #475569 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    line-height: .76 !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .06) !important;
  }

  .dashboard-more-root-options {
    position: absolute !important;
    right: 20px !important;
    top: 150px !important;
    display: grid !important;
    grid-template-columns: 124px 124px !important;
    gap: 18px !important;
    align-items: start !important;
    justify-content: end !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    align-content: start !important;
    gap: 12px !important;
    width: 124px !important;
    height: 164px !important;
    min-width: 124px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #102033 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    box-shadow: none !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb.hidden {
    display: none !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    content: "" !important;
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .06) !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    display: block !important;
    margin: -4px 0 0 !important;
    color: #102033 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    position: absolute !important;
    left: 50% !important;
    top: 34px !important;
    z-index: 1 !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    background: currentColor !important;
    transform: translateX(-50%) !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon.is-account {
    color: #34495e !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon.is-settings {
    color: #12b76a !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.14.24.43.34.68.22l2.49-1c.51.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.25.12.54.02.68-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.14.24.43.34.68.22l2.49-1c.51.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.25.12.54.02.68-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-submenu {
    position: absolute !important;
    right: 18px !important;
    top: 18px !important;
    z-index: 5 !important;
    display: none !important;
    width: min(420px, calc(100vw - 34px)) !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 96px !important;
    opacity: 0 !important;
    transform: translateY(-14px) !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list {
    display: grid !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-trigger,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-trigger {
    display: none !important;
  }

  .dashboard-more-subitem {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 82px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #102033 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
  }

  .dashboard-more-subitem.hidden,
  .dashboard-more-submenu.hidden {
    display: none !important;
  }

  .dashboard-more-subitem-label {
    justify-self: end !important;
    display: grid !important;
    place-items: center !important;
    min-width: min(235px, calc(100vw - 168px)) !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-subitem-icon {
    justify-self: end !important;
    display: grid !important;
    place-items: center !important;
    width: 92px !important;
    height: 92px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-subitem-icon::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
  }

  .dashboard-more-subitem-icon.is-info {
    color: #12a05c !important;
  }

  .dashboard-more-subitem-icon.is-info::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-subitem-icon.is-document,
  .dashboard-more-subitem-icon.is-profile {
    color: #2684ff !important;
  }

  .dashboard-more-subitem-icon.is-document::before,
  .dashboard-more-subitem-icon.is-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h8l5 5v15H6V2Zm7 1.5V8h4.5L13 3.5ZM8 13h8v-2H8v2Zm0 4h8v-2H8v2Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h8l5 5v15H6V2Zm7 1.5V8h4.5L13 3.5ZM8 13h8v-2H8v2Zm0 4h8v-2H8v2Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-subitem-icon.is-bell {
    color: #eab308 !important;
  }

  .dashboard-more-subitem-icon.is-bell::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 0 0-5-6.71V3a2 2 0 1 0-4 0v1.29A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Zm-2 1H7v-6a5 5 0 0 1 10 0v6Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 0 0-5-6.71V3a2 2 0 1 0-4 0v1.29A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Zm-2 1H7v-6a5 5 0 0 1 10 0v6Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-subitem-icon.is-bank {
    color: #7c3aed !important;
  }

  .dashboard-more-subitem-icon.is-bank::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3 3 8v2h18V8l-9-5ZM5 11v7H3v2h18v-2h-2v-7h-3v7h-3v-7h-2v7H8v-7H5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3 3 8v2h18V8l-9-5ZM5 11v7H3v2h18v-2h-2v-7h-3v7h-3v-7h-2v7H8v-7H5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-subitem-icon.is-cloud {
    color: #14b8a6 !important;
  }

  .dashboard-more-subitem-icon.is-cloud::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 5.18 8.1 6 6 0 0 0 6 20h13a5 5 0 0 0 .35-9.96ZM13 13v4h-2v-4H8l4-4 4 4h-3Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 5.18 8.1 6 6 0 0 0 6 20h13a5 5 0 0 0 .35-9.96ZM13 13v4h-2v-4H8l4-4 4 4h-3Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-subitem-icon.is-add-user,
  .dashboard-more-subitem-icon.is-users {
    color: #12b76a !important;
  }

  .dashboard-more-subitem-icon.is-add-user::before,
  .dashboard-more-subitem-icon.is-users::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3.31 0-6 1.79-6 4v2h12v-2c0-2.21-2.69-4-6-4Zm9-1v-3h-3V7h3V4h2v3h3v2h-3v3h-2Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3.31 0-6 1.79-6 4v2h12v-2c0-2.21-2.69-4-6-4Zm9-1v-3h-3V7h3V4h2v3h3v2h-3v3h-2Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-subitem-icon.is-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    position: absolute !important;
    right: 18px !important;
    top: auto !important;
    bottom: -78px !important;
    left: auto !important;
    z-index: 8 !important;
    display: none !important;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #09a85d !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: 0 16px 30px rgba(5, 150, 105, .35), 0 2px 8px rgba(15, 23, 42, .12) !important;
    transform: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-close,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-close {
    display: grid !important;
    place-items: center !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before,
  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 40px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #fff !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90: dashboard more button opens a centered radial menu. */
@media (max-width: 767px) {
  .dashboard-more-menu-backdrop {
    background: rgba(15, 23, 42, .44) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  .dashboard-more-menu-panel.dashboard-more-menu-radial {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    display: block !important;
    width: min(78vw, 330px) !important;
    height: min(78vw, 330px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) scale(.92) !important;
    transition: transform .2s ease, opacity .2s ease !important;
    opacity: 0 !important;
  }

  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-panel.dashboard-more-menu-radial {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
  }

  .dashboard-more-menu-radial .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .dashboard-more-menu-ring {
    position: absolute !important;
    inset: 7px !important;
    display: block !important;
    border: 2px solid rgba(226, 232, 240, .68) !important;
    border-radius: 50% !important;
    box-shadow: 0 14px 44px rgba(15, 23, 42, .16) inset !important;
    pointer-events: none !important;
  }

  .dashboard-more-menu-orb {
    position: absolute !important;
    left: 50% !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    margin-left: -56px !important;
    padding: 12px 10px 10px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #102033 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .24), 0 2px 10px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-menu-orb.hidden {
    display: none !important;
  }

  .dashboard-more-menu-account {
    top: -24px !important;
  }

  .dashboard-more-menu-settings {
    bottom: -24px !important;
  }

  .dashboard-more-menu-orb strong {
    display: block !important;
    margin: 0 !important;
    color: #102033 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .dashboard-more-menu-orb-icon {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
  }

  .dashboard-more-menu-orb-icon.is-account {
    color: #12b76a !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-menu-orb-icon.is-settings {
    color: #2684ff !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.14.24.43.34.68.22l2.49-1c.51.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.25.12.54.02.68-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.14.24.43.34.68.22l2.49-1c.51.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.25.12.54.02.68-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-menu-radial .dashboard-more-menu-close {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #26384a !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .26) !important;
    color: transparent !important;
    font-size: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  .dashboard-more-menu-radial .dashboard-more-menu-close::before,
  .dashboard-more-menu-radial .dashboard-more-menu-close::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 36px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #fff !important;
  }

  .dashboard-more-menu-radial .dashboard-more-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .dashboard-more-menu-radial .dashboard-more-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* v1.1.0-mobile-dashboard-navlabel23: pin bottom labels under icons. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    position: relative !important;
    overflow: visible !important;
    padding: 4px 0 18px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    position: relative !important;
    top: 0 !important;
    margin: 0 auto !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label {
    position: absolute !important;
    left: 50% !important;
    bottom: 1px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 64px !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    z-index: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    display: block !important;
    color: #059669 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-indent: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-bottomnav22: keep only the intended 5 bottom items. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#customerProfilesPanel"],
  html body:not(.auth-locked) .quick-nav > a[href="#lineLeadsPanel"],
  html body:not(.auth-locked) .quick-nav > a[href="#lineOaPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-account-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#customerProfilesPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#lineLeadsPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#lineOaPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-account-link {
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    display: grid !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] {
    order: 1 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link {
    order: 2 !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    order: 3 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link {
    order: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    order: 5 !important;
  }
}

/* v1.1.0-mobile-dashboard-navlabel23-final: pin bottom labels under icons. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    position: relative !important;
    overflow: visible !important;
    padding: 4px 0 18px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    position: relative !important;
    top: 0 !important;
    margin: 0 auto !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label {
    position: absolute !important;
    left: 50% !important;
    bottom: 1px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 64px !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    z-index: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    display: block !important;
    color: #059669 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-indent: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-navlabel21: restore bottom menu labels without moving the bar. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-only-nav-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-only-nav-link {
    display: grid !important;
    grid-template-rows: 27px 17px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 2px !important;
    overflow: visible !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-icon {
    grid-row: 1 !important;
    align-self: end !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    margin: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-label {
    grid-row: 2 !important;
    position: static !important;
    align-self: start !important;
    display: block !important;
    width: 100% !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    position: static !important;
    display: block !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label {
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 17px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after {
    content: none !important;
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-bottomnav22-final: final order/visibility after label overrides. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#customerProfilesPanel"],
  html body:not(.auth-locked) .quick-nav > a[href="#lineLeadsPanel"],
  html body:not(.auth-locked) .quick-nav > a[href="#lineOaPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-account-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#customerProfilesPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#lineLeadsPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#lineOaPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-account-link {
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    display: grid !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] {
    order: 1 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link {
    order: 2 !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    order: 3 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link {
    order: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    order: 5 !important;
  }
}

/* v1.1.0-mobile-dashboard-navlabel23-final: pin bottom labels under icons. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    position: relative !important;
    overflow: visible !important;
    padding: 4px 0 18px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    position: relative !important;
    top: 0 !important;
    margin: 0 auto !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label {
    position: absolute !important;
    left: 50% !important;
    bottom: 1px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 64px !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    z-index: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    display: block !important;
    color: #059669 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-indent: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-fit16-final: stronger than older desktop-fix mobile patches. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero h2,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2 {
    position: relative !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2::after,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero h2::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2::after {
    content: "สวัสดีครับ 👋" !important;
    display: block !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 24px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel {
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    grid-template-rows: 1fr 40px !important;
    padding: 18px 16px 14px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding: 11px 10px !important;
  }
}

/* v1.1.0-mobile-dashboard-fit16: match compact phone dashboard reference only. */
@media (max-width: 767px) {
  html body[data-page="dashboard"] .content-shell,
  html body[data-page="dashboard"] .content-shell.main-content,
  html body[data-page="dashboard"] .main-content,
  html body[data-page="dashboard"] .content-area {
    padding: 8px 12px calc(64px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel.dashboard-page {
    gap: 8px !important;
  }

  html body[data-page="dashboard"] .app-topbar.app-topbar {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin-bottom: 10px !important;
  }

  html body[data-page="dashboard"] .global-search.global-search {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
  }

  html body[data-page="dashboard"] .global-search input {
    padding-left: 42px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body[data-page="dashboard"] .notification-button.notification-button,
  html body[data-page="dashboard"] .topbar-user.topbar-user {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row {
    margin-top: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero {
    padding: 0 8px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero > div {
    display: block !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2 {
    position: relative !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2::after {
    content: "สวัสดีครับ 👋" !important;
    display: block !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 24px !important;
  }

  html body[data-page="dashboard"] #dashboardFilterHint {
    display: none !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-date.dashboard-mobile-date {
    display: block !important;
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-date.dashboard-mobile-date::before {
    content: none !important;
    display: none !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-quick-actions {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel {
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important;
    grid-template-rows: 1fr 40px !important;
    gap: 8px !important;
    padding: 18px 16px 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #13b777 0%, #18c889 48%, #0bb16f 100%) !important;
    box-shadow: 0 14px 30px rgba(16, 185, 129, .22) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    padding-right: 0 !important;
    z-index: 3 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-kicker {
    margin: 0 0 3px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel strong {
    max-width: 150px !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel small {
    margin-top: 3px !important;
    max-width: 180px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 15px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 104px !important;
    height: 92px !important;
    align-self: center !important;
    justify-self: end !important;
    opacity: .96 !important;
    z-index: 2 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-calendar {
    width: 58px !important;
    height: 66px !important;
    right: 24px !important;
    top: 4px !important;
    border-radius: 8px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-bell {
    width: 30px !important;
    height: 30px !important;
    right: 4px !important;
    top: 28px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel::after {
    right: 24px !important;
    bottom: 55px !important;
    transform: scale(.45) !important;
    z-index: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #059669 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile {
    height: 84px !important;
    min-height: 84px !important;
    padding: 11px 10px !important;
    border-radius: 12px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile > span:not(.summary-tile-icon) {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile strong {
    font-size: clamp(23px, 6vw, 27px) !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile small {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head h3 {
    font-size: 15px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-card {
    padding: 2px 10px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-row {
    min-height: 39px !important;
    padding: 4px 0 !important;
    grid-template-columns: 28px minmax(0, 1fr) auto 9px !important;
  }

  html body[data-page="dashboard"] .followup-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference17: fit panels to reference, bottom menu untouched. */
@media (max-width: 767px) {
  html body[data-page="dashboard"] .content-shell,
  html body[data-page="dashboard"] .content-shell.main-content,
  html body[data-page="dashboard"] .main-content,
  html body[data-page="dashboard"] .content-area {
    padding: 8px 12px calc(64px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel.dashboard-page {
    gap: 12px !important;
  }

  html body[data-page="dashboard"] .app-topbar.app-topbar {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    grid-template-columns: minmax(0, 1fr) 46px 46px !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
  }

  html body[data-page="dashboard"] .global-search.global-search {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
  }

  html body[data-page="dashboard"] .global-search.global-search::before {
    left: 17px !important;
    width: 24px !important;
    height: 24px !important;
  }

  html body[data-page="dashboard"] .global-search input {
    padding-left: 54px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] .notification-button.notification-button,
  html body[data-page="dashboard"] .topbar-user.topbar-user {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10) !important;
  }

  html body[data-page="dashboard"] .notification-button.notification-button::before {
    width: 28px !important;
    height: 28px !important;
  }

  html body[data-page="dashboard"] .topbar-user.topbar-user::before {
    width: 27px !important;
    height: 27px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero {
    padding: 0 14px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero h2 {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel .dashboard-hero h2::after,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-top-row .dashboard-hero h2::after,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero h2::after {
    content: "สวัสดีครับ 👋" !important;
    display: block !important;
    color: #0f172a !important;
    font-size: 29px !important;
    font-weight: 900 !important;
    line-height: 34px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-date.dashboard-mobile-date {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel {
    position: relative !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 58px !important;
    gap: 18px !important;
    padding: 26px 22px 22px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #17bf78 0%, #16bd73 42%, #079b54 100%) !important;
    box-shadow: 0 17px 34px rgba(16, 185, 129, .20) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-copy {
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    align-content: center !important;
    gap: 18px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-kicker {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 22px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-metrics {
    display: grid !important;
    grid-template-columns: minmax(118px, .85fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon {
    display: grid !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .24) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon::before {
    content: "" !important;
    width: 32px !important;
    height: 32px !important;
    place-self: center !important;
    background: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.4a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Zm8 0a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8ZM2.2 20c.5-3.7 2.9-6.1 5.8-6.1s5.3 2.4 5.8 6.1H2.2Zm8.8 0c.4-2.6 1.8-4.6 3.9-5.5.4-.2.8-.3 1.2-.4 2.9 0 5.3 2.3 5.8 5.9H11Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.4a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Zm8 0a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8ZM2.2 20c.5-3.7 2.9-6.1 5.8-6.1s5.3 2.4 5.8 6.1H2.2Zm8.8 0c.4-2.6 1.8-4.6 3.9-5.5.4-.2.8-.3 1.2-.4 2.9 0 5.3 2.3 5.8 5.9H11Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-metrics strong {
    max-width: none !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people strong {
    font-size: 40px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-divider {
    display: block !important;
    width: 1px !important;
    height: 54px !important;
    background: rgba(255, 255, 255, .30) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money {
    min-width: 0 !important;
    padding-right: 54px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong {
    font-size: 39px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong span {
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    position: absolute !important;
    right: 14px !important;
    top: 85px !important;
    width: 72px !important;
    height: 72px !important;
    opacity: .92 !important;
    z-index: 2 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-calendar {
    right: 16px !important;
    top: 8px !important;
    width: 46px !important;
    height: 52px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .36) !important;
    transform: rotate(10deg) !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-bell {
    right: 2px !important;
    top: 24px !important;
    width: 34px !important;
    height: 34px !important;
    background: #fbbf24 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel::after {
    right: 18px !important;
    bottom: 95px !important;
    transform: scale(.55) !important;
    opacity: .95 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button {
    grid-row: 2 !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    color: #059669 !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid {
    gap: 10px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 20px 16px !important;
    border-radius: 14px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile > span:not(.summary-tile-icon) {
    position: relative !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .dashboard-tile-principal > span:not(.summary-tile-icon)::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .dashboard-tile-received > span:not(.summary-tile-icon)::after {
    display: block !important;
    color: #64748b !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .dashboard-tile-principal > span:not(.summary-tile-icon)::after {
    content: "เงินกู้ทั้งหมด" !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .dashboard-tile-received > span:not(.summary-tile-icon)::after {
    content: "รับแล้ววันนี้" !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile strong {
    font-size: clamp(30px, 8vw, 34px) !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile small {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile small::after {
    content: "บาท" !important;
    display: block !important;
    color: #64748b !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 21px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head {
    margin: 8px 10px 8px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head h3 {
    position: relative !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head h3::after {
    content: "งานวันนี้" !important;
    display: block !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 29px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head button {
    color: #059669 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-card {
    padding: 0 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07) !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-row {
    min-height: 66px !important;
    padding: 9px 0 !important;
    grid-template-columns: 46px minmax(0, 1fr) auto 13px !important;
    gap: 12px !important;
  }

  html body[data-page="dashboard"] .followup-icon {
    width: 46px !important;
    height: 46px !important;
  }

  html body[data-page="dashboard"] .followup-copy strong {
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 21px !important;
  }

  html body[data-page="dashboard"] .followup-copy small,
  html body[data-page="dashboard"] .followup-amount {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference17-polish: remove overlaps and old labels. */
@media (max-width: 767px) {
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-metrics,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-metrics {
    grid-template-columns: 138px 1px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon {
    width: 50px !important;
    height: 50px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon::before,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon::before {
    width: 29px !important;
    height: 29px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people strong,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people strong {
    font-size: 36px !important;
    line-height: 40px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money {
    padding-right: 0 !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong {
    font-size: 35px !important;
    line-height: 38px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong span,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong span {
    font-size: 15px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money small,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money small {
    margin-top: 2px !important;
    font-size: 13px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: 105px !important;
    right: 9px !important;
    width: 62px !important;
    height: 62px !important;
    opacity: .78 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head h3,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-head h3 {
    width: auto !important;
    height: 29px !important;
    max-height: 29px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-head h3::after,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-head h3::after {
    content: "งานวันนี้" !important;
    display: block !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 29px !important;
    text-indent: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference17-fill: use the available phone height without moving bottom nav. */
@media (max-width: 767px) {
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel.dashboard-page {
    gap: 13px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel > .summary-grid .summary-tile,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup {
    margin-top: 0 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-card,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-card {
    min-height: 230px !important;
    padding: 0 16px !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-row,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-row {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 10px 0 !important;
  }

  html body[data-page="dashboard"] .followup-icon,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-icon {
    width: 50px !important;
    height: 50px !important;
  }
}

/* v1.1.0-mobile-dashboard-overlap20: fix row text, bottom labels, and hero art position. */
@media (max-width: 767px) {
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: 18px !important;
    right: 18px !important;
    width: 70px !important;
    height: 70px !important;
    opacity: .82 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-calendar,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-calendar {
    right: 10px !important;
    top: 5px !important;
    width: 48px !important;
    height: 56px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-bell,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-bell {
    right: 0 !important;
    top: 22px !important;
    width: 30px !important;
    height: 30px !important;
  }

  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button {
    position: relative !important;
    z-index: 6 !important;
  }

  html body[data-page="dashboard"] .dashboard-mobile-followup-row,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-row {
    grid-template-columns: 64px minmax(0, 1fr) auto 14px !important;
    gap: 12px !important;
    align-items: center !important;
  }

  html body[data-page="dashboard"] .followup-icon,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    justify-self: start !important;
  }

  html body[data-page="dashboard"] .followup-copy,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    align-content: center !important;
  }

  html body[data-page="dashboard"] .followup-copy strong,
  html body[data-page="dashboard"] .followup-copy small,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy strong,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav .nav-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 16px !important;
    max-height: 16px !important;
    min-height: 16px !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label {
    position: relative !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after {
    position: static !important;
    display: block !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-indent: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after {
    content: "รายงาน" !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body:not(.auth-locked) .quick-nav > a.active .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a.active .nav-label {
    color: #059669 !important;
  }
}

/* v1.1.0-mobile-dashboard-navlabel21-final: final label position after older overrides. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-only-nav-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-only-nav-link {
    display: grid !important;
    grid-template-rows: 27px 17px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 2px !important;
    overflow: visible !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-icon {
    grid-row: 1 !important;
    align-self: end !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    margin: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-only-nav-link .nav-label {
    grid-row: 2 !important;
    position: static !important;
    align-self: start !important;
    display: block !important;
    width: 100% !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    position: static !important;
    display: block !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 17px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label {
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 17px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#settingsPanel"].mobile-settings-link .nav-label::after {
    content: none !important;
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-bottomnav22-final: final order/visibility after label overrides. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#customerProfilesPanel"],
  html body:not(.auth-locked) .quick-nav > a[href="#lineLeadsPanel"],
  html body:not(.auth-locked) .quick-nav > a[href="#lineOaPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-account-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#customerProfilesPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#lineLeadsPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#lineOaPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-account-link {
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    display: grid !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] {
    order: 1 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link {
    order: 2 !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    order: 3 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link {
    order: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    order: 5 !important;
  }
}

/* v1.1.0-mobile-dashboard-navlabel24-final: last-rule label pinning. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link {
    position: relative !important;
    overflow: visible !important;
    padding: 4px 0 18px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label {
    position: absolute !important;
    left: 50% !important;
    bottom: 1px !important;
    width: max-content !important;
    max-width: 64px !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    z-index: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    display: block !important;
    color: #059669 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-indent: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-home-label25: force active home label into view. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] {
    position: relative !important;
    overflow: visible !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label {
    position: absolute !important;
    left: 50% !important;
    top: 35px !important;
    bottom: auto !important;
    width: 64px !important;
    height: 16px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    z-index: 20 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
    display: block !important;
    color: #059669 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-home-label26: draw home label on the link itself. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after {
    content: "หน้าหลัก" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 2px !important;
    display: block !important;
    width: max-content !important;
    transform: translateX(-50%) !important;
    color: #059669 !important;
    background: transparent !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    z-index: 30 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* v1.1.0-mobile-dashboard-home-label27: single centered active home label. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon {
    top: -4px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after {
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #059669 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    z-index: 40 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference28: full mobile dashboard redesign, live controls preserved. */
@media (max-width: 767px) {
  html,
  body:not(.auth-locked),
  html body[data-page="dashboard"]:not(.auth-locked) {
    background: #f5f7fb !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .content-shell,
  html body[data-page="dashboard"]:not(.auth-locked) .content-shell.main-content,
  html body[data-page="dashboard"]:not(.auth-locked) .main-content,
  html body[data-page="dashboard"]:not(.auth-locked) .content-area {
    position: relative !important;
    padding: 24px 13px calc(92px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .98), transparent 34%),
      linear-gradient(180deg, #f9fbff 0%, #f3f6fb 100%) !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar {
    position: absolute !important;
    top: 18px !important;
    right: 16px !important;
    z-index: 25 !important;
    display: block !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar-title,
  html body[data-page="dashboard"]:not(.auth-locked) .global-search,
  html body[data-page="dashboard"]:not(.auth-locked) .topbar-user {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .topbar-actions.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .notification-button.notification-button,
  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings.mobile-top-settings {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, .88) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #475569 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .11) !important;
    text-decoration: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .notification-button span {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .notification-button::before {
    content: "" !important;
    width: 25px !important;
    height: 25px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.8 2.8 0 0 0 2.7-2h-5.4A2.8 2.8 0 0 0 12 22Zm7-5H5l1.6-2.2V10a5.4 5.4 0 0 1 4.1-5.2V3a1.3 1.3 0 0 1 2.6 0v1.8A5.4 5.4 0 0 1 17.4 10v4.8L19 17Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.8 2.8 0 0 0 2.7-2h-5.4A2.8 2.8 0 0 0 12 22Zm7-5H5l1.6-2.2V10a5.4 5.4 0 0 1 4.1-5.2V3a1.3 1.3 0 0 1 2.6 0v1.8A5.4 5.4 0 0 1 17.4 10v4.8L19 17Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .notification-button.has-notification::after {
    content: attr(data-count) !important;
    position: absolute !important;
    top: -3px !important;
    right: -2px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings svg {
    width: 25px !important;
    height: 25px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel.dashboard-page {
    display: grid !important;
    gap: 14px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-top-row {
    display: block !important;
    margin: 0 0 4px !important;
    padding-right: 118px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-filter-panel {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero .eyebrow,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-quick-actions,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardFilterHint {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero h2 {
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 0 2px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-hero h2::after {
    content: "สวัสดีครับ 👋" !important;
    display: block !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 36px !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-date.dashboard-mobile-date {
    display: block !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel.dashboard-work-panel {
    position: relative !important;
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 46px !important;
    gap: 15px !important;
    padding: 22px 18px 17px !important;
    border: 0 !important;
    border-radius: 17px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #09b968 0%, #03a85c 100%) !important;
    box-shadow: 0 16px 30px rgba(15, 166, 100, .22) !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-copy {
    display: grid !important;
    gap: 10px !important;
    align-content: center !important;
    min-width: 0 !important;
    padding-right: 88px !important;
    z-index: 3 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-kicker {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-mobile-metrics {
    display: grid !important;
    grid-template-columns: minmax(78px, .58fr) 1px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people-icon {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-divider {
    display: block !important;
    width: 1px !important;
    height: 65px !important;
    background: rgba(255, 255, 255, .28) !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-people strong,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #fff !important;
    font-size: 37px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money strong span {
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-money small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 17px !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    position: absolute !important;
    top: 18px !important;
    right: 19px !important;
    width: 74px !important;
    height: 76px !important;
    opacity: .98 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-calendar {
    right: 18px !important;
    top: 5px !important;
    width: 52px !important;
    height: 58px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .32) !important;
    transform: rotate(8deg) !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .work-art-bell {
    right: 0 !important;
    top: 28px !important;
    width: 32px !important;
    height: 32px !important;
    background: #f6d04d !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel::after {
    right: 27px !important;
    bottom: 78px !important;
    transform: scale(.58) !important;
    opacity: .98 !important;
    z-index: 1 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel a.primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button {
    position: relative !important;
    z-index: 5 !important;
    grid-row: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #059669 !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12) !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile:nth-child(n + 3) {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile {
    height: 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    align-content: center !important;
    padding: 14px 13px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .07) !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile-icon {
    grid-row: 1 / 4 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile > span:not(.summary-tile-icon)::after {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile strong {
    color: #0f172a !important;
    font-size: 29px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid .summary-tile small::after {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-head,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 2px 2px 8px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-head h3::after,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers-head h3 {
    color: #0f172a !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 28px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-head button,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers-head a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: #059669 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    text-decoration: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-card {
    min-height: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .07) !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-row {
    height: 61px !important;
    min-height: 61px !important;
    max-height: 61px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto 14px !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-icon {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy {
    min-width: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy strong {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 19px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy small {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-amount {
    color: #ef4444 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers {
    display: block !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-card {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 151px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main {
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    min-height: 151px !important;
    padding: 16px 8px 52px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    text-align: center !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-avatar {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 8px !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    object-fit: cover !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main strong,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main small,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-amount {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main strong {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 17px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main small {
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 15px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-amount {
    margin-top: 11px !important;
    color: #059669 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 19px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-card.is-danger .dashboard-mobile-customer-amount {
    color: #ef4444 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-call {
    position: absolute !important;
    left: 50% !important;
    bottom: 15px !important;
    display: grid !important;
    place-items: center !important;
    width: 33px !important;
    height: 33px !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    text-decoration: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-call::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 2.8 10 6.2 7.9 9c1.4 2.8 3.5 4.9 6.2 6.2l2.8-2.1 3.4 3.4c.5.5.5 1.3 0 1.8l-1.8 1.8c-.9.9-2.2 1.2-3.4.7C8.8 18.8 3.2 13.2 1.2 6.9.8 5.7 1.1 4.4 2 3.5l1.8-1.8c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body:not(.auth-locked) .quick-nav,
  html body[data-page]:not(.auth-locked) .quick-nav {
    height: 76px !important;
    min-height: 76px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: 19px 19px 0 0 !important;
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .10) !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after {
    content: "งานวันนี้" !important;
    display: block !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
  }

  html body[data-page="tracking"]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link.active .nav-label::after {
    color: #059669 !important;
  }
}

@media (min-width: 768px) {
  .mobile-top-settings,
  .dashboard-mobile-customers {
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference29: lock dashboard section order after legacy mobile rules. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel.dashboard-page {
    display: flex !important;
    flex-direction: column !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-top-row {
    order: 1 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel {
    order: 2 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel > .summary-grid {
    order: 3 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-mobile-followup {
    order: 4 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-mobile-customers {
    order: 5 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-analytics-grid,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel .dashboard-menu-section {
    order: 99 !important;
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference30: keep both top action buttons inside the mobile viewport. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar {
    right: 12px !important;
    width: 104px !important;
    max-width: 104px !important;
    overflow: visible !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .topbar-actions.header-actions {
    width: 104px !important;
    max-width: 104px !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .notification-button.notification-button,
  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings.mobile-top-settings {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference31: remove the mobile dashboard search bubble. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar .global-search,
  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar .search-box {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference32: make the green-panel CTA tappable above all decorative layers. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardWorkPanel,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardWorkPanel [data-dashboard-tracking-filter] {
    pointer-events: auto !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardWorkPanel [data-dashboard-tracking-filter] {
    position: relative !important;
    z-index: 20 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference33: keep customer section links tappable. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers-head,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers-head a,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-card,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-call {
    pointer-events: auto !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customers-head a {
    position: relative !important;
    z-index: 12 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference36: equal bottom nav typography and tighter top actions. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar {
    right: 12px !important;
    width: 98px !important;
    max-width: 98px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .topbar-actions.header-actions {
    width: 98px !important;
    max-width: 98px !important;
    gap: 6px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .notification-button.notification-button,
  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings.mobile-top-settings {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  html body:not(.auth-locked) .quick-nav,
  html body[data-page]:not(.auth-locked) .quick-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 30px 18px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border-radius: 18px !important;
    align-self: center !important;
    justify-self: center !important;
    grid-template-rows: 28px 18px !important;
    row-gap: 1px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav .nav-icon {
    grid-row: 1 !important;
    position: static !important;
    align-self: end !important;
    justify-self: center !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    color: #475569 !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    color: #ffffff !important;
  }

  html body:not(.auth-locked) .quick-nav .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav .nav-icon svg {
    width: 100% !important;
    height: 100% !important;
  }

  html body:not(.auth-locked) .quick-nav .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav .nav-label {
    grid-row: 2 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    overflow: visible !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav .nav-label::after {
    display: block !important;
    width: 100% !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    content: "หน้าหลัก" !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label::after {
    content: "ลูกค้า" !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label::after {
    content: "เพิ่ม" !important;
    color: #ffffff !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after {
    content: "งานวันนี้" !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label::after {
    content: "รายงาน" !important;
  }

  html body:not(.auth-locked) .quick-nav > a.active .nav-icon,
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page="dashboard"]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > a.active .nav-label::after,
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page="dashboard"]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after {
    color: #059669 !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label {
    color: transparent !important;
  }
}

/* v1.1.0-mobile-dashboard-reference37: draw one fixed-position label per bottom nav item. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    position: relative !important;
    display: block !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav {
    display: block !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label {
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    transform: translateX(-50%) !important;
    color: #475569 !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon {
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    transform: translateX(-50%) !important;
    color: #ffffff !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 5px !important;
    display: block !important;
    width: 100% !important;
    transform: none !important;
    color: #475569 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 50 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after {
    content: "หน้าหลัก" !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link::after {
    content: "ลูกค้า" !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after {
    content: "เพิ่ม" !important;
    bottom: 6px !important;
    color: #ffffff !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link::after {
    content: "งานวันนี้" !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link::after {
    content: "รายงาน" !important;
  }

  html body:not(.auth-locked) .quick-nav > a.active::after,
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page="dashboard"]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body:not(.auth-locked) .quick-nav > a.active .nav-icon,
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page="dashboard"]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon {
    color: #059669 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference38: lift nav icons so labels never collide. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    top: 1px !important;
    width: 27px !important;
    height: 27px !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon {
    top: 5px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link::after {
    bottom: 6px !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after {
    bottom: 7px !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference39: final bottom nav icon lift. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    top: -5px !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon {
    top: 3px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference40: remove duplicate nav labels and redraw one clean label. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::before,
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label::before,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::before,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label::before,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label::after,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label::before,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::before,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label::before,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-label::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    top: 4px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav::after {
    bottom: 8px !important;
    font-size: 13px !important;
    line-height: 16px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference41: final spacing between nav icons and labels. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    top: -2px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link::after {
    bottom: 7px !important;
  }

  html body:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > button.mobile-create-nav#mobileCreateNav .nav-icon {
    top: 4px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference42: clamp bottom nav SVGs so icons cannot cover labels. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    top: 5px !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    overflow: hidden !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon svg,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon svg,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon svg,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    transform: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-records-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link::after {
    bottom: 11px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference43: keep active home icon and label in separate lanes. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"],
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 24px 18px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 5px !important;
    padding: 7px 0 9px !important;
    overflow: hidden !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::before,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::before {
    content: none !important;
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon {
    grid-row: 1 !important;
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    display: flex !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin: 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: #059669 !important;
    transform: none !important;
    z-index: 4 !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon svg {
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon::before,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"] .nav-icon::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    background: currentColor !important;
    transform: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-9.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-9.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after,
  html body[data-page]:not(.auth-locked) .quick-nav > a[href="#dashboardPanel"]::after {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    color: #059669 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
    z-index: 5 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference44: tighten the notification/settings pair like the reference. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar {
    right: 13px !important;
    width: 102px !important;
    max-width: 102px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar .topbar-actions.header-actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    width: 102px !important;
    max-width: 102px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar .notification-button.notification-button,
  html body[data-page="dashboard"]:not(.auth-locked) .app-topbar.app-topbar .mobile-top-settings.mobile-top-settings {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    flex: 0 0 47px !important;
    width: 47px !important;
    height: 47px !important;
    min-width: 47px !important;
    min-height: 47px !important;
    max-width: 47px !important;
    max-height: 47px !important;
    margin: 0 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference45: redraw work/report nav icons without clipped circles. */
@media (max-width: 767px) {
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon {
    top: 4px !important;
    display: flex !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: #475569 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon svg,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon svg,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon svg {
    display: none !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon::before,
  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    background: currentColor !important;
    transform: none !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3.5h8l1.5 2H20v15H4v-15h2.5L8 3.5Zm1 3h6l-.75-1h-4.5L9 6.5ZM6.4 8v10.1h11.2V8H6.4Zm2.1 2.7H15v1.8H8.5v-1.8Zm0 3.3h4.8v1.8H8.5V14Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3.5h8l1.5 2H20v15H4v-15h2.5L8 3.5Zm1 3h6l-.75-1h-4.5L9 6.5ZM6.4 8v10.1h11.2V8H6.4Zm2.1 2.7H15v1.8H8.5v-1.8Zm0 3.3h4.8v1.8H8.5V14Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon::before,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 21H3V11h3v10Zm7.5 0h-3V4h3v17Zm7.5 0h-3V8h3v13Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 21H3V11h3v10Zm7.5 0h-3V4h3v17Zm7.5 0h-3V8h3v13Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-icon::after {
    content: "8" !important;
    position: absolute !important;
    top: -8px !important;
    right: -9px !important;
    display: grid !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    place-items: center !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    z-index: 6 !important;
  }

  html body:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-settings-link .nav-icon::after {
    content: none !important;
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference46: replace green card art with hand receiving money. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    position: absolute !important;
    top: 13px !important;
    right: 18px !important;
    width: 112px !important;
    height: 112px !important;
    opacity: 1 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: url("assets/takeover_8552889.png?v=1.1.0-mobile-dashboard-premium143") center / contain no-repeat !important;
    transform: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art .work-art-calendar,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art .work-art-bell,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art .work-art-calendar,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art .work-art-bell {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel::after {
    content: none !important;
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel a.primary-button,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel > .primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel a.primary-button,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel button.primary-button {
    z-index: 5 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference47: lift the new hand art above the CTA. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: -2px !important;
    right: 12px !important;
    width: 120px !important;
    height: 120px !important;
    background-position: center top !important;
    background-size: 120px 120px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference48: compact the tall asset so the hand is visible above the button. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: 13px !important;
    right: 10px !important;
    width: 120px !important;
    height: 96px !important;
    background-size: 120px 96px !important;
    background-position: center top !important;
  }
}

/* v1.1.0-mobile-dashboard-reference49: split the hand art into bill/hand layers. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: 15px !important;
    right: 12px !important;
    width: 112px !important;
    height: 96px !important;
    overflow: visible !important;
    background: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::before,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 82px !important;
    height: 66px !important;
    background: url("assets/takeover_8552889.png?v=1.1.0-mobile-dashboard-premium143") right top / 92px 92px no-repeat !important;
    z-index: 2 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after {
    content: "" !important;
    position: absolute !important;
    top: 52px !important;
    right: -4px !important;
    display: block !important;
    width: 100px !important;
    height: 50px !important;
    background: url("assets/takeover_8552889.png?v=1.1.0-mobile-dashboard-premium143") right bottom / 120px 120px no-repeat !important;
    z-index: 1 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference50: raise only the hand layer on the green card. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after {
    top: 34px !important;
    right: -7px !important;
    width: 112px !important;
    height: 68px !important;
    background-size: 132px 132px !important;
    background-position: right bottom !important;
  }
}

/* v1.1.0-mobile-dashboard-reference51: pull the hand clearly above the white CTA. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after {
    top: 8px !important;
    right: -8px !important;
    width: 118px !important;
    height: 86px !important;
    background-size: 136px 136px !important;
    background-position: right bottom !important;
  }
}

/* v1.1.0-mobile-dashboard-reference52: final lift for the palm. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after {
    top: -6px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference53: clean single-piece hand art after split layer rollback. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: 8px !important;
    right: 18px !important;
    width: 92px !important;
    height: 92px !important;
    overflow: visible !important;
    background: url("assets/takeover_8552889.png?v=1.1.0-mobile-dashboard-premium143") center / contain no-repeat !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::before,
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::before,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art::after {
    content: none !important;
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference54: keep the hand art fully above the white CTA. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art,
  html body[data-page="dashboard"] #dashboardPanel#dashboardPanel #dashboardWorkPanel .dashboard-work-art {
    top: -8px !important;
    right: 22px !important;
    width: 86px !important;
    height: 86px !important;
    background: url("assets/takeover_8552889.png?v=1.1.0-mobile-dashboard-premium143") center / contain no-repeat !important;
  }
}

/* v1.1.0-mobile-dashboard-reference55: notification inbox opened from the bell. */
.dashboard-notification-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

.dashboard-notification-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dashboard-notification-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.dashboard-notification-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78vh, 620px);
  overflow: auto;
  border-radius: 28px 28px 0 0;
  background: #fff;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 48px rgba(15, 23, 42, .18);
  transform: translateY(102%);
  transition: transform .22s ease;
  color: #0f1b34;
}

.dashboard-notification-sheet.is-open .dashboard-notification-panel {
  transform: translateY(0);
}

.dashboard-notification-grip {
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #d8dee8;
}

.dashboard-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-notification-head span {
  display: block;
  color: #00a45a;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.dashboard-notification-head h2 {
  margin: 2px 0 0;
  color: #0f1b34;
  font-size: 26px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.dashboard-notification-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #f3f6fb;
  color: #536176;
  font-size: 30px;
  line-height: 1;
}

.dashboard-notification-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-notification-stat {
  min-width: 0;
  border: 0;
  border-radius: 18px;
  background: #f5f8fc;
  padding: 14px 16px;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(88, 105, 130, .08);
}

.dashboard-notification-stat strong,
.dashboard-notification-stat span,
.dashboard-notification-stat small {
  display: block;
}

.dashboard-notification-stat strong {
  color: #0f1b34;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.dashboard-notification-stat span {
  margin-top: 5px;
  color: #536176;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.dashboard-notification-stat small {
  margin-top: 3px;
  color: #728094;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.dashboard-notification-stat.is-danger strong {
  color: #ef2f37;
}

.dashboard-notification-stat.is-today strong,
.dashboard-notification-stat.is-soon strong {
  color: #00a45a;
}

.dashboard-notification-empty-state,
.dashboard-notification-empty-list {
  grid-column: 1 / -1;
  border-radius: 18px;
  background: #f5f8fc;
  padding: 16px;
  color: #536176;
}

.dashboard-notification-empty-state strong,
.dashboard-notification-empty-state span,
.dashboard-notification-empty-list strong,
.dashboard-notification-empty-list span {
  display: block;
}

.dashboard-notification-empty-state strong,
.dashboard-notification-empty-list strong {
  color: #0f1b34;
  font-size: 17px;
}

.dashboard-notification-list {
  display: grid;
  gap: 8px;
}

.dashboard-notification-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: #fff;
  padding: 12px 14px;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(88, 105, 130, .12), 0 10px 26px rgba(15, 23, 42, .06);
}

.dashboard-notification-row-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e8fff2;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.dashboard-notification-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  color: #00a45a;
  background: #dcfaea;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.dashboard-notification-avatar.is-empty {
  box-shadow: inset 0 0 0 1px rgba(0, 164, 90, .08);
}

.dashboard-notification-row.is-overdue .dashboard-notification-row-icon {
  background: #ffe2e4;
}

.dashboard-notification-row.is-overdue .dashboard-notification-avatar.is-empty {
  color: #ef2f37;
  background: #ffe2e4;
}

.dashboard-notification-row.is-soon .dashboard-notification-row-icon {
  background: #eaf3ff;
}

.dashboard-notification-row.is-soon .dashboard-notification-avatar.is-empty {
  color: #2f73ff;
  background: #eaf3ff;
}

.dashboard-notification-row-copy {
  min-width: 0;
}

.dashboard-notification-row-copy strong,
.dashboard-notification-row-copy small,
.dashboard-notification-row-copy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-notification-row-copy strong {
  color: #0f1b34;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.dashboard-notification-row-copy small {
  margin-top: 3px;
  color: #5f6e84;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.dashboard-notification-row-copy em {
  margin-top: 2px;
  color: #7c8798;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

.dashboard-notification-row-amount {
  color: #00a45a;
  font-size: 15px !important;
  font-weight: 950 !important;
  white-space: nowrap;
}

.dashboard-notification-row.is-overdue .dashboard-notification-row-amount {
  color: #ef2f37;
}

.dashboard-notification-all {
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  border: 0;
  border-radius: 18px;
  background: #00a45a;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

body.notification-sheet-open {
  overflow: hidden;
}

@media (max-width: 380px) {
  .dashboard-notification-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dashboard-notification-summary {
    gap: 8px;
  }

  .dashboard-notification-stat {
    padding: 12px 8px;
  }

  .dashboard-notification-stat strong {
    font-size: 22px;
  }

  .dashboard-notification-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .dashboard-notification-row-amount {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .dashboard-notification-panel {
    left: auto;
    right: 28px;
    bottom: auto;
    top: 84px;
    width: min(420px, calc(100vw - 56px));
    max-height: calc(100vh - 112px);
    border-radius: 24px;
    padding-bottom: 18px;
    transform: translateY(-10px) scale(.98);
  }

  .dashboard-notification-sheet.is-open .dashboard-notification-panel {
    transform: translateY(0) scale(1);
  }

  .dashboard-notification-grip {
    display: none;
  }
}

/* v1.1.0-mobile-dashboard-reference59: make payment close actions distinct and reliable on mobile. */
@media (max-width: 767px) {
  html body .payment-page-modal #closePaymentPage,
  html body .payment-page-modal #paymentPageContent [data-action="closePaymentPage"] {
    min-height: 52px !important;
    border: 1.5px solid #fecdd3 !important;
    border-radius: 18px !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    box-shadow: 0 10px 24px rgba(225, 29, 72, .08) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
  }

  html body .payment-page-modal #closePaymentPage::before,
  html body .payment-page-modal #paymentPageContent [data-action="closePaymentPage"]::before {
    content: "×";
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e11d48;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    vertical-align: -2px;
  }

  html body .payment-page-modal #closePaymentPage:active,
  html body .payment-page-modal #paymentPageContent [data-action="closePaymentPage"]:active {
    transform: translateY(1px) !important;
    background: #ffe4e6 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference60: keep payment modal above every mobile action layer. */
@media (max-width: 767px) {
  html body #paymentPageModal.payment-page-modal:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body #paymentPageModal.payment-page-modal:not(.hidden) .payment-page-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: auto !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  html body.payment-modal-open .quick-nav,
  html body.payment-modal-open .mobile-fab-new-loan,
  html body.payment-modal-open .mobile-action-menu,
  html body.payment-modal-open .mobile-action-backdrop,
  html body:has(#paymentPageModal:not(.hidden)) .quick-nav,
  html body:has(#paymentPageModal:not(.hidden)) .mobile-fab-new-loan,
  html body:has(#paymentPageModal:not(.hidden)) .mobile-action-menu,
  html body:has(#paymentPageModal:not(.hidden)) .mobile-action-backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(130%) !important;
  }

  html body #paymentPageModal:not(.hidden) .payment-page-bottom-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 6 !important;
    margin-top: 16px !important;
    padding: 14px 0 calc(16px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), #fff 22%) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference61: make payment close a clean header icon, not a floating bar. */
@media (max-width: 767px) {
  html body #paymentPageModal.payment-page-modal:not(.hidden) .payment-page-panel {
    padding: 20px 18px calc(34px + env(safe-area-inset-bottom)) !important;
  }

  html body #paymentPageModal .panel-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: start !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
  }

  html body #paymentPageModal .panel-title > div {
    min-width: 0 !important;
  }

  html body #paymentPageModal #closePaymentPage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 50% !important;
    background: #fff7f8 !important;
    color: #e11d48 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal #closePaymentPage::before {
    content: "×" !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #e11d48 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    vertical-align: 0 !important;
  }

  html body #paymentPageModal #closePaymentPage:active {
    transform: scale(.96) !important;
    background: #ffe4e6 !important;
  }

  html body #paymentPageModal #paymentPageContent [data-action="closePaymentPage"],
  html body #paymentPageModal:not(.hidden) .payment-page-bottom-actions {
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference62: redesign mobile payment page to match compact receive-payment mockup. */
.payment-page-back,
.payment-mobile-customer-card,
.payment-mobile-summary-card,
.payment-mobile-section-head {
  display: none;
}

@media (max-width: 767px) {
  html body #paymentPageModal.payment-page-modal:not(.hidden) {
    background: #f8fafc !important;
  }

  html body #paymentPageModal.payment-page-modal:not(.hidden) .payment-page-panel {
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom)) !important;
    background: #f8fafc !important;
  }

  html body #paymentPageModal .panel-title {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 -2px 12px !important;
    padding: 4px 2px 8px !important;
    background: rgba(248, 250, 252, .96) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }

  html body #paymentPageModal .panel-title h2 {
    margin: 0 !important;
    color: #102033 !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  html body #paymentPageModal .panel-title p {
    display: none !important;
  }

  html body #paymentPageModal .payment-page-back {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #e7f9ef !important;
    color: #069256 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  html body #paymentPageModal #closePaymentPage {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: 38px !important;
    min-width: 74px !important;
    min-height: 38px !important;
    max-width: none !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    border: 1.5px solid #cfd7e4 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #536176 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
  }

  html body #paymentPageModal #closePaymentPage::before {
    content: "×" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #536176 !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal #closePaymentPage {
    font-size: 0 !important;
  }

  html body #paymentPageModal #closePaymentPage::after {
    content: "ปิด" !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body #paymentPageModal #paymentPageContent {
    display: grid !important;
    gap: 14px !important;
  }

  html body #paymentPageModal .payment-mobile-customer-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .78) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
  }

  html body #paymentPageModal .payment-mobile-customer-avatar {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: linear-gradient(160deg, #2bd46f, #079d52) !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 950 !important;
  }

  html body #paymentPageModal .payment-mobile-customer-card strong {
    display: block !important;
    color: #102033 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  html body #paymentPageModal .payment-mobile-customer-card span,
  html body #paymentPageModal .payment-mobile-customer-card small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 18px 8px !important;
    border: 1px solid rgba(226, 232, 240, .78) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card div {
    min-width: 0 !important;
    text-align: center !important;
    padding: 0 6px !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card div + div {
    border-left: 1px solid #e5eaf2 !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card span,
  html body #paymentPageModal .payment-mobile-summary-card small {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card strong {
    display: block !important;
    margin: 7px 0 2px !important;
    color: #102033 !important;
    font-size: 23px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card div:last-child strong {
    color: #05a75c !important;
  }

  html body #paymentPageModal .payment-mobile-section-head {
    display: block !important;
    margin-top: 18px !important;
  }

  html body #paymentPageModal .payment-mobile-section-head strong {
    display: block !important;
    color: #102033 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  html body #paymentPageModal .payment-mobile-section-head span {
    display: block !important;
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 780 !important;
  }

  html body #paymentPageModal .payment-title,
  html body #paymentPageModal .payment-table-wrap,
  html body #paymentPageModal .payment-contract-summary {
    display: none !important;
  }

  html body #paymentPageModal .payment-installment-accordion-list {
    display: grid !important;
    gap: 12px !important;
  }

  html body #paymentPageModal .payment-installment-accordion {
    border: 1.5px solid #dfe7f2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04) !important;
    overflow: hidden !important;
  }

  html body #paymentPageModal .payment-installment-accordion:has([data-payment-select]:checked) {
    border-color: #13b86b !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 118px !important;
    padding: 18px !important;
    list-style: none !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary::-webkit-details-marker {
    display: none !important;
  }

  html body #paymentPageModal .payment-summary-select {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #ecfdf5 !important;
  }

  html body #paymentPageModal .payment-summary-select input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border: 2px solid #d8e0ea !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  html body #paymentPageModal .payment-summary-select input:checked {
    border-color: #10b981 !important;
    background: #10b981 !important;
  }

  html body #paymentPageModal .payment-summary-select input:checked::before {
    content: "✓" !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal .payment-accordion-period {
    grid-column: 2 !important;
    grid-row: 1 !important;
    color: #102033 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > .status-badge {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin-top: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > strong {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    color: #102033 !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-align: right !important;
    white-space: normal !important;
    max-width: 116px !important;
  }

  html body #paymentPageModal .payment-installment-accordion-body {
    display: none !important;
  }

  html body #paymentPageModal .bulk-payment-bar {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 16px !important;
    border: 1px solid rgba(226, 232, 240, .78) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
  }

  html body #paymentPageModal .bulk-payment-bar::before {
    content: "✓" !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 950 !important;
  }

  html body #paymentPageModal .bulk-payment-bar > div {
    min-width: 0 !important;
  }

  html body #paymentPageModal .bulk-payment-bar strong {
    display: block !important;
    color: #102033 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  html body #paymentPageModal .bulk-payment-bar span {
    display: block !important;
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body #paymentPageModal .bulk-payment-bar .primary-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 60px !important;
    margin-top: 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #06b76b !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(6, 183, 107, .22) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference63: tighten receive-payment layout and fix fallback avatar. */
@media (max-width: 767px) {
  html body #paymentPageModal.payment-page-modal:not(.hidden) .payment-page-panel {
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom)) !important;
  }

  html body #paymentPageModal .panel-title {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    margin: 0 -2px 10px !important;
    padding: 2px 2px 8px !important;
  }

  html body #paymentPageModal .payment-page-back {
    width: 38px !important;
    height: 38px !important;
    font-size: 24px !important;
  }

  html body #paymentPageModal .panel-title h2 {
    font-size: 20px !important;
  }

  html body #paymentPageModal #closePaymentPage {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 70px !important;
    padding: 0 11px !important;
  }

  html body #paymentPageModal #paymentPageContent {
    gap: 11px !important;
  }

  html body #paymentPageModal .payment-mobile-customer-card {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 84px !important;
    padding: 14px 16px !important;
    border-radius: 17px !important;
  }

  html body #paymentPageModal .payment-mobile-customer-avatar {
    width: 46px !important;
    height: 46px !important;
    font-size: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  html body #paymentPageModal .payment-mobile-customer-avatar.is-empty::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    top: 10px !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 13px 2px 0 -2px #fff !important;
  }

  html body #paymentPageModal .payment-mobile-customer-avatar.is-empty::after {
    content: "" !important;
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    bottom: 10px !important;
    height: 13px !important;
    border-radius: 14px 14px 7px 7px !important;
    background: #fff !important;
  }

  html body #paymentPageModal .payment-mobile-customer-card strong {
    font-size: 16px !important;
  }

  html body #paymentPageModal .payment-mobile-customer-card span,
  html body #paymentPageModal .payment-mobile-customer-card small {
    font-size: 12.5px !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card {
    padding: 14px 6px !important;
    border-radius: 17px !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card span,
  html body #paymentPageModal .payment-mobile-summary-card small {
    font-size: 11.5px !important;
  }

  html body #paymentPageModal .payment-mobile-summary-card strong {
    margin: 6px 0 1px !important;
    font-size: 21px !important;
  }

  html body #paymentPageModal .payment-mobile-section-head {
    margin-top: 14px !important;
  }

  html body #paymentPageModal .payment-mobile-section-head strong {
    font-size: 17px !important;
  }

  html body #paymentPageModal .payment-mobile-section-head span {
    margin-top: 3px !important;
    font-size: 13px !important;
  }

  html body #paymentPageModal .payment-installment-accordion-list {
    gap: 10px !important;
  }

  html body #paymentPageModal .payment-installment-accordion {
    border-radius: 17px !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    column-gap: 11px !important;
    min-height: 104px !important;
    padding: 14px !important;
  }

  html body #paymentPageModal .payment-summary-select {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }

  html body #paymentPageModal .payment-summary-select input {
    width: 31px !important;
    height: 31px !important;
  }

  html body #paymentPageModal .payment-accordion-period {
    font-size: 16px !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > small {
    font-size: 13px !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > .status-badge {
    margin-top: 5px !important;
    padding: 5px 9px !important;
    font-size: 11.5px !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > strong {
    max-width: 92px !important;
    color: #102033 !important;
    font-size: 26px !important;
    line-height: .98 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > strong span {
    display: block !important;
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal .bulk-payment-bar {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 17px !important;
  }

  html body #paymentPageModal .bulk-payment-bar::before {
    width: 32px !important;
    height: 32px !important;
    font-size: 22px !important;
  }

  html body #paymentPageModal .bulk-payment-bar strong {
    font-size: 15px !important;
  }

  html body #paymentPageModal .bulk-payment-bar span {
    font-size: 12.5px !important;
  }

  html body #paymentPageModal .bulk-payment-bar .primary-button {
    min-height: 56px !important;
    margin-top: 6px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference64: mobile receive confirmation and success states. */
.payment-receive-confirm,
.payment-receive-success {
  display: grid;
  gap: 12px;
}

.payment-receive-card {
  border: 1px solid #dfe7f2;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.payment-receive-customer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.payment-receive-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(160deg, #2bd46f, #079d52);
  position: relative;
}

.payment-receive-avatar::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.payment-receive-avatar::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 14px;
  border-radius: 16px 16px 8px 8px;
  background: #fff;
}

.payment-receive-card strong {
  color: #102033;
  font-weight: 950;
}

.payment-receive-customer strong,
.payment-receive-success > strong {
  display: block;
  font-size: 18px;
}

.payment-receive-customer span,
.payment-receive-success small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.payment-receive-lines {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.payment-receive-lines div,
.payment-receive-total div,
.payment-success-details .confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payment-receive-lines span,
.payment-receive-total span,
.payment-success-details span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.payment-receive-total {
  display: grid;
  gap: 10px;
}

.payment-receive-total div:last-child strong,
.payment-success-amount strong {
  color: #08a85f;
}

.payment-receive-confirm .primary-button,
.payment-receive-success .primary-button {
  min-height: 54px;
  border-radius: 14px;
  background: #08a85f;
  font-weight: 950;
}

.payment-receive-confirm .secondary-button,
.payment-receive-success .secondary-button {
  min-height: 52px;
  border-radius: 14px;
  font-weight: 900;
}

.payment-receive-confirm .payment-line-send-button {
  border: 1px solid #16a34a;
  background: #ecfdf3;
  color: #057a42;
}

.payment-receive-confirm .payment-line-send-button::before {
  content: "LINE";
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 22px;
  margin-right: 8px;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.payment-receive-line-status-wrap:empty {
  display: none;
}

.payment-receive-line-status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: #f0fdf4;
  color: #057a42;
}

.payment-receive-line-status strong {
  color: #057a42;
  font-size: 14px;
  font-weight: 950;
}

.payment-receive-line-status span {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 800;
}

.payment-receive-success {
  text-align: center;
}

.payment-success-check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 6px auto 6px;
  border-radius: 50%;
  background: #0ab56b;
  color: #fff;
  font-size: 48px;
  font-weight: 950;
}

.payment-success-amount {
  border: 1px solid #dfe7f2;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
}

.payment-success-amount span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.payment-success-amount strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 950;
}

.payment-success-details {
  border: 1px solid #dfe7f2;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.payment-success-details .confirm-row + .confirm-row {
  margin-top: 10px;
}

body.payment-modal-open #paymentInfoModal:not(.hidden),
body.payment-modal-open #paymentSlipModal:not(.hidden) {
  z-index: 31000 !important;
  background: rgba(15, 23, 42, .34) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.payment-modal-open #paymentInfoModal:has(.payment-receive-confirm) .save-confirm-panel,
body.payment-modal-open #paymentInfoModal:has(.payment-receive-success) .save-confirm-panel {
  width: min(100% - 28px, 430px) !important;
  max-height: calc(100dvh - 28px) !important;
  height: auto !important;
  margin: auto !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 22px !important;
  padding: 18px !important;
  background: #f8fafc !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
}

body.payment-modal-open #paymentInfoModal:has(.payment-receive-confirm) .confirm-actions,
body.payment-modal-open #paymentInfoModal:has(.payment-receive-success) .confirm-actions {
  display: none !important;
}

/* v1.1.0-mobile-dashboard-reference67: close buttons match the rounded reference controls. */
@media (max-width: 767px) {
  html body #paymentPageModal #closePaymentPage {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    border: 2px solid #d3dbe8 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #526176 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05) !important;
    font-size: 0 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal #closePaymentPage::before {
    content: "×" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #526176 !important;
    font-size: 46px !important;
    font-weight: 850 !important;
    line-height: .72 !important;
  }

  html body #paymentPageModal #closePaymentPage::after {
    content: none !important;
    display: none !important;
  }

  html body #paymentPageModal #closePaymentPage:active {
    transform: scale(.98) !important;
    background: #f8fafc !important;
  }

  html body .dashboard-notification-close {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    border: 2px solid #d3dbe8 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #526176 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
    font-size: 44px !important;
    font-weight: 850 !important;
    line-height: .72 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference69: smaller close control, restored back position, tighter checkbox. */
@media (max-width: 767px) {
  html body #paymentPageModal #closePaymentPage {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-width: 1.4px !important;
    border-color: #d8e1ee !important;
    color: #64748b !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .035) !important;
  }

  html body #paymentPageModal #closePaymentPage::before {
    color: #64748b !important;
    font-size: 27px !important;
    font-weight: 650 !important;
    line-height: .76 !important;
  }

  html body .dashboard-notification-close {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-width: 1.4px !important;
    border-color: #d8e1ee !important;
    color: #64748b !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .035) !important;
    font-size: 27px !important;
    font-weight: 650 !important;
    line-height: .76 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  html body #paymentPageModal .payment-summary-select {
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }

  html body #paymentPageModal .payment-summary-select input {
    position: relative !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html body #paymentPageModal .payment-summary-select input:checked::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 8px !important;
    height: 15px !important;
    border: solid #fff !important;
    border-width: 0 3.5px 3.5px 0 !important;
    background: transparent !important;
    transform: translate(-50%, -58%) rotate(45deg) !important;
    transform-origin: center !important;
  }
}

/* v1.1.0-mobile-dashboard-reference72: normalize close glyph centering and notification typography. */
@media (max-width: 767px) {
  html body .dashboard-notification-head {
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  html body .dashboard-notification-head > div {
    min-width: 0 !important;
    padding-top: 2px !important;
  }

  html body .dashboard-notification-head span {
    margin: 0 0 4px !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
  }

  html body .dashboard-notification-head h2 {
    margin: 0 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 29px !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body #paymentPageModal #closePaymentPage,
  html body .dashboard-notification-close {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    border: 1.4px solid #d8e1ee !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .035) !important;
  }

  html body #paymentPageModal #closePaymentPage::before,
  html body .dashboard-notification-close::before {
    content: "×" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    color: #64748b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  html body #paymentPageModal #closePaymentPage::after {
    content: none !important;
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference75: compact installment accordion toggle and readable expanded rows. */
@media (max-width: 767px) {
  html body #paymentPageModal .payment-installment-accordion {
    border-width: 1.3px !important;
    border-radius: 17px !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary {
    position: relative !important;
    grid-template-columns: 46px minmax(0, 1fr) minmax(72px, auto) 38px !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 10px !important;
    min-height: 96px !important;
    padding: 14px 12px !important;
    overflow: hidden !important;
  }

  html body #paymentPageModal .payment-accordion-period {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 4px !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > .status-badge {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: 8px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > strong {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    justify-self: end !important;
    align-self: center !important;
    max-width: 82px !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary > strong span {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary::after {
    content: "" !important;
    grid-column: 4 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #eafaf1 !important;
    transform: none !important;
  }

  html body #paymentPageModal .payment-installment-accordion summary::before {
    content: "" !important;
    grid-column: 4 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    justify-self: end !important;
    width: 8px !important;
    height: 8px !important;
    margin-right: 13px !important;
    border: solid #058954 !important;
    border-width: 0 2px 2px 0 !important;
    transform: translateY(-2px) rotate(45deg) !important;
    transform-origin: center !important;
    z-index: 1 !important;
  }

  html body #paymentPageModal .payment-installment-accordion[open] summary::before {
    transform: translateY(2px) rotate(225deg) !important;
  }

  html body #paymentPageModal .payment-installment-accordion[open] .payment-installment-accordion-body {
    display: grid !important;
    gap: 10px !important;
    margin: 0 12px 12px !important;
    padding: 14px !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
  }

  html body #paymentPageModal .payment-mobile-select {
    display: none !important;
  }

  html body #paymentPageModal .payment-mobile-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  html body #paymentPageModal .payment-mobile-grid div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 6px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body #paymentPageModal .payment-mobile-grid span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body #paymentPageModal .payment-mobile-grid strong {
    margin: 0 !important;
    color: #102033 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    text-align: right !important;
  }

  html body #paymentPageModal .payment-mobile-grid div:nth-child(3) span,
  html body #paymentPageModal .payment-mobile-grid div:nth-child(3) strong {
    color: #dc2626 !important;
  }

  html body #paymentPageModal .payment-actions-cell {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference76: installment detail card mirrors the requested payment breakdown. */
@media (max-width: 767px) {
  html body #paymentPageModal .payment-installment-accordion[open] .payment-installment-accordion-body {
    gap: 0 !important;
    margin: 0 12px 12px !important;
    padding: 14px 14px 12px !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
  }

  html body #paymentPageModal .payment-mobile-breakdown {
    display: grid !important;
    gap: 0 !important;
  }

  html body #paymentPageModal .payment-breakdown-row,
  html body #paymentPageModal .payment-breakdown-total,
  html body #paymentPageModal .payment-breakdown-meta div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body #paymentPageModal .payment-breakdown-row {
    min-height: 30px !important;
  }

  html body #paymentPageModal .payment-breakdown-row span,
  html body #paymentPageModal .payment-breakdown-meta span:not(.payment-meta-icon) {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body #paymentPageModal .payment-breakdown-row strong {
    color: #102033 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    text-align: right !important;
  }

  html body #paymentPageModal .payment-breakdown-row.is-danger span,
  html body #paymentPageModal .payment-breakdown-row.is-danger strong {
    color: #dc2626 !important;
  }

  html body #paymentPageModal .payment-breakdown-total {
    margin-top: 10px !important;
    padding: 12px 0 !important;
    border-top: 1px solid #dfe7f2 !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  html body #paymentPageModal .payment-breakdown-total span {
    color: #102033 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  html body #paymentPageModal .payment-breakdown-total strong {
    color: #0aa65f !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    text-align: right !important;
  }

  html body #paymentPageModal .payment-breakdown-total small {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body #paymentPageModal .payment-breakdown-meta {
    display: grid !important;
    gap: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  html body #paymentPageModal .payment-breakdown-meta div {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    min-height: 28px !important;
  }

  html body #paymentPageModal .payment-breakdown-meta strong {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-align: right !important;
  }

  html body #paymentPageModal .payment-meta-icon {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body #paymentPageModal .payment-meta-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body #paymentPageModal .payment-actions-cell {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  html body #paymentPageModal .payment-actions-cell button {
    min-height: 42px !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #475569 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .035) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body #paymentPageModal .payment-history-button::before {
    content: "◷" !important;
    margin-right: 6px !important;
    color: #3b82f6 !important;
  }

  html body #paymentPageModal .payment-slip-button::before {
    content: "▤" !important;
    margin-right: 6px !important;
    color: #3b82f6 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference78: payment history/slip buttons open real cards instead of navigating away. */
@media (max-width: 767px) {
  html body #paymentInfoModal:not(.hidden) {
    z-index: 33000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 16px !important;
    background: rgba(15, 23, 42, .38) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  html body #paymentInfoModal .save-confirm-panel {
    width: min(100% - 12px, 430px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    padding: 18px !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 22px !important;
    background: #f8fafc !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24) !important;
  }

  html body #paymentInfoModal .panel-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  html body #paymentInfoModal .panel-title h2 {
    margin: 0 !important;
    color: #102033 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  html body #paymentInfoModal .panel-title p {
    margin-top: 4px !important;
    color: #64748b !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html body #paymentInfoModal .payment-action-card-list {
    display: grid !important;
    gap: 12px !important;
  }

  html body #paymentInfoModal .payment-action-card {
    display: grid !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
  }

  html body #paymentInfoModal .payment-action-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  html body #paymentInfoModal .payment-action-summary span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body #paymentInfoModal .payment-action-summary strong {
    color: #0aa65f !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  html body #paymentInfoModal .payment-history-card-list {
    display: grid !important;
    gap: 10px !important;
  }

  html body #paymentInfoModal .payment-history-card-item {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 15px !important;
    background: #fbfdff !important;
  }

  html body #paymentInfoModal .payment-history-card-item.is-void {
    background: #fff7f7 !important;
    border-color: #fecaca !important;
  }

  html body #paymentInfoModal .payment-history-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  html body #paymentInfoModal .payment-history-card-top strong {
    color: #102033 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  html body #paymentInfoModal .payment-history-card-top span {
    color: #ef2d3f !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  html body #paymentInfoModal .payment-history-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 12px !important;
  }

  html body #paymentInfoModal .payment-history-card-grid span {
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }

  html body #paymentInfoModal .payment-history-card-grid strong {
    max-width: 180px !important;
    overflow-wrap: anywhere !important;
    color: #102033 !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    text-align: right !important;
  }

  html body #paymentInfoModal .payment-info-slip {
    display: grid !important;
    gap: 10px !important;
    padding-top: 2px !important;
  }

  html body #paymentInfoModal .slip-preview {
    margin: 0 !important;
    display: grid !important;
    gap: 8px !important;
  }

  html body #paymentInfoModal .slip-preview img {
    width: 100% !important;
    max-height: 56dvh !important;
    object-fit: contain !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  html body #paymentInfoModal .slip-preview figcaption,
  html body #paymentInfoModal .slip-file strong {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  html body #paymentInfoModal .payment-action-empty {
    place-items: center !important;
    min-height: 170px !important;
    text-align: center !important;
  }

  html body #paymentInfoModal .payment-action-empty-icon {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #eef6ff !important;
    color: #3b82f6 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
  }

  html body #paymentInfoModal .payment-action-empty h3 {
    margin: 0 !important;
    color: #102033 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  html body #paymentInfoModal .payment-action-empty p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  html body #paymentInfoModal .confirm-actions {
    display: flex !important;
    justify-content: stretch !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #edf2f7 !important;
  }

  html body #paymentInfoModal #closePaymentInfo {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    background: #0aae63 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90: top more button opens account/settings menu. */
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings.mobile-top-settings {
    font-size: 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings.mobile-top-settings svg {
    display: none !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .mobile-top-settings.mobile-top-settings::before {
    content: "⋮" !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #475569 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .dashboard-more-menu-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 32000 !important;
    display: none !important;
    pointer-events: none !important;
  }

  .dashboard-more-menu-sheet.is-open {
    display: block !important;
    pointer-events: auto !important;
  }

  .dashboard-more-menu-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .36) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  .dashboard-more-menu-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    gap: 14px !important;
    max-height: min(86dvh, 720px) !important;
    overflow: auto !important;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -26px 70px rgba(15, 23, 42, .22) !important;
    transform: translateY(105%) !important;
    transition: transform .22s ease !important;
  }

  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-panel {
    transform: translateY(0) !important;
  }

  .dashboard-more-menu-grip {
    justify-self: center !important;
    width: 56px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #d7dee9 !important;
  }

  .dashboard-more-menu-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
  }

  .dashboard-more-menu-head span {
    display: block !important;
    color: #0aa65f !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .dashboard-more-menu-head h2 {
    margin: 3px 0 0 !important;
    color: #102033 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 28px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
  }

  .dashboard-more-menu-close {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1.4px solid #d8e1ee !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #64748b !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  .dashboard-more-menu-list {
    display: grid !important;
    gap: 16px !important;
  }

  .dashboard-more-menu-group {
    display: grid !important;
    gap: 0 !important;
    padding-left: 12px !important;
    border-left: 1px solid #dfe7f2 !important;
  }

  .dashboard-more-menu-group.hidden,
  .dashboard-more-menu-group button.hidden {
    display: none !important;
  }

  .dashboard-more-menu-group button {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 7px 10px 7px 18px !important;
    border: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  .dashboard-more-menu-group button:not(.dashboard-more-menu-group-head)::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
  }

  .dashboard-more-menu-group-head {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    min-height: 74px !important;
    margin: 0 0 8px -12px !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    background: #eafaf1 !important;
    color: #475569 !important;
  }

  .dashboard-more-menu-group-head strong {
    color: #475569 !important;
    font-size: 22px !important;
    font-weight: 850 !important;
  }

  .dashboard-more-menu-group-head small {
    color: #475569 !important;
    font-size: 22px !important;
    transform: rotate(90deg) !important;
  }

  .dashboard-more-menu-icon {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    color: #475569 !important;
  }

  .dashboard-more-menu-icon::before {
    content: "" !important;
    width: 26px !important;
    height: 26px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
  }

  .dashboard-more-menu-icon.is-account::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
  }

  .dashboard-more-menu-icon.is-settings::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.14.24.43.34.68.22l2.49-1c.51.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.25.12.54.02.68-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.14.24.43.34.68.22l2.49-1c.51.4 1.08.73 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.25.12.54.02.68-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90-final-tail: compact submenu wins over earlier menu rules. */
@media (max-width: 767px) {
  .dashboard-more-menu-trigger {
    width: 76px !important;
    height: 76px !important;
    font-size: 40px !important;
    right: 10px !important;
    top: 0 !important;
  }

  .dashboard-more-root-options {
    right: 12px !important;
    top: 132px !important;
    grid-template-columns: 86px 86px !important;
    gap: 14px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    width: 86px !important;
    height: 112px !important;
    min-width: 86px !important;
    gap: 8px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    margin: -2px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    top: 23px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options {
    display: grid !important;
    right: 10px !important;
    top: 86px !important;
    grid-template-columns: 86px !important;
    gap: 8px !important;
    z-index: 7 !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-trigger,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-trigger {
    display: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account {
    order: 1 !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings {
    order: 2 !important;
    opacity: .82 !important;
    transform: scale(.92) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings::before,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account::before {
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .26), 0 16px 30px rgba(15, 23, 42, .20), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-submenu {
    right: 10px !important;
    top: 244px !important;
    width: min(390px, calc(100vw - 20px)) !important;
    gap: 12px !important;
    padding-bottom: 78px !important;
    transform: translateY(-8px) !important;
  }

  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 12px !important;
    min-height: 58px !important;
  }

  .dashboard-more-subitem-label {
    min-width: min(218px, calc(100vw - 126px)) !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .dashboard-more-subitem-icon {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-more-subitem-icon::before {
    width: 33px !important;
    height: 33px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    right: 10px !important;
    bottom: -58px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before,
  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    width: 34px !important;
    height: 4px !important;
  }
}


/* v1.1.0-mobile-dashboard-reference90: keep only active category on the right rail. */
@media (max-width: 767px) {
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings {
    display: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options {
    top: 86px !important;
    grid-template-columns: 86px !important;
  }

  .dashboard-more-submenu {
    top: 216px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    bottom: -150px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference90: smaller smooth pop-out menu. */
@media (max-width: 767px) {
  .dashboard-more-menu-panel.dashboard-more-menu-float {
    right: 16px !important;
    top: calc(16px + env(safe-area-inset-top)) !important;
  }

  .dashboard-more-menu-trigger {
    width: 62px !important;
    height: 62px !important;
    right: 2px !important;
    top: 0 !important;
    font-size: 34px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .06) !important;
    transform-origin: center !important;
    animation: dashboardMoreTriggerIn .22s cubic-bezier(.2, .8, .2, 1) both !important;
  }

  .dashboard-more-root-options {
    right: 0 !important;
    top: 108px !important;
    grid-template-columns: 68px 68px !important;
    gap: 16px !important;
    animation: dashboardMoreRootSlideIn .24s cubic-bezier(.2, .8, .2, 1) .04s both !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    width: 68px !important;
    height: 94px !important;
    min-width: 68px !important;
    gap: 6px !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    width: 62px !important;
    height: 62px !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .06) !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    margin: -1px 0 0 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    top: 19px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options {
    right: 0 !important;
    top: 72px !important;
    grid-template-columns: 68px !important;
    gap: 6px !important;
    animation: dashboardMoreRailSlideIn .2s cubic-bezier(.2, .8, .2, 1) both !important;
  }

  .dashboard-more-submenu {
    right: 0 !important;
    top: 176px !important;
    width: min(346px, calc(100vw - 20px)) !important;
    gap: 10px !important;
    animation: dashboardMoreListSlideIn .24s cubic-bezier(.2, .8, .2, 1) both !important;
  }

  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    gap: 10px !important;
    min-height: 50px !important;
  }

  .dashboard-more-subitem-label {
    min-width: min(198px, calc(100vw - 104px)) !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18), 0 2px 7px rgba(15, 23, 42, .06) !important;
  }

  .dashboard-more-subitem-icon {
    width: 62px !important;
    height: 62px !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .06) !important;
  }

  .dashboard-more-subitem-icon::before {
    width: 27px !important;
    height: 27px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close {
    right: 0 !important;
    bottom: -126px !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    box-shadow: 0 12px 24px rgba(5, 150, 105, .28), 0 2px 8px rgba(15, 23, 42, .10) !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close::before,
  .dashboard-more-menu-float .dashboard-more-menu-close::after {
    width: 28px !important;
    height: 3.5px !important;
  }
}

@keyframes dashboardMoreTriggerIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardMoreRootSlideIn {
  from {
    opacity: 0;
    transform: translate(18px, -12px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes dashboardMoreRailSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes dashboardMoreListSlideIn {
  from {
    opacity: 0;
    transform: translate(18px, -10px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* v1.1.0-mobile-dashboard-reference91: fixed root orbs with soft toggle lists. */
@media (max-width: 767px) {
  .dashboard-more-menu-panel.dashboard-more-menu-float {
    right: 14px !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    width: min(420px, calc(100vw - 20px)) !important;
    height: min(660px, calc(100dvh - 28px)) !important;
  }

  .dashboard-more-menu-trigger,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-trigger,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-trigger {
    display: grid !important;
    right: 0 !important;
    top: 0 !important;
    width: 62px !important;
    height: 62px !important;
    font-size: 34px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease !important;
  }

  .dashboard-more-menu-trigger:active {
    transform: scale(.94) !important;
  }

  .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options {
    display: grid !important;
    right: 0 !important;
    top: 104px !important;
    grid-template-columns: 68px 68px !important;
    gap: 16px !important;
    opacity: 1 !important;
    transform: none !important;
    animation: dashboardMoreMainOrbsIn .28s cubic-bezier(.2, .8, .2, 1) .02s both !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account {
    display: grid !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb {
    width: 68px !important;
    height: 92px !important;
    min-width: 68px !important;
    gap: 5px !important;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb:active {
    transform: scale(.96) !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb::before {
    width: 62px !important;
    height: 62px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb-icon {
    top: 18px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    margin: -2px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account::before,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings::before {
    box-shadow: 0 14px 28px rgba(16, 185, 129, .28), 0 2px 8px rgba(15, 23, 42, .08) !important;
  }

  .dashboard-more-submenu,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list {
    right: 0 !important;
    top: 204px !important;
    width: min(390px, calc(100vw - 22px)) !important;
    gap: 10px !important;
    padding-bottom: 0 !important;
    transform-origin: top right !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list {
    display: grid !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: dashboardMoreListDropFade .3s cubic-bezier(.2, .8, .2, 1) both !important;
  }

  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    gap: 10px !important;
    min-height: 52px !important;
    animation: dashboardMoreSubItemIn .28s cubic-bezier(.2, .8, .2, 1) both !important;
  }

  .dashboard-more-subitem:nth-child(1) {
    animation-delay: .03s !important;
  }

  .dashboard-more-subitem:nth-child(2) {
    animation-delay: .07s !important;
  }

  .dashboard-more-subitem:nth-child(3) {
    animation-delay: .11s !important;
  }

  .dashboard-more-subitem:nth-child(4) {
    animation-delay: .15s !important;
  }

  .dashboard-more-subitem:nth-child(5) {
    animation-delay: .19s !important;
  }

  .dashboard-more-subitem-label {
    min-width: min(218px, calc(100vw - 116px)) !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 15.5px !important;
    font-weight: 850 !important;
  }

  .dashboard-more-subitem-icon {
    width: 62px !important;
    height: 62px !important;
  }

  .dashboard-more-subitem-icon::before {
    width: 27px !important;
    height: 27px !important;
  }

  .dashboard-more-menu-float .dashboard-more-menu-close,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-close,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-close {
    display: none !important;
  }
}

@keyframes dashboardMoreMainOrbsIn {
  from {
    opacity: 0;
    transform: translate(12px, -10px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes dashboardMoreListDropFade {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardMoreSubItemIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* v1.1.0-mobile-dashboard-reference92: keep main buttons fixed and show submenu items. */
@media (max-width: 767px) {
  .dashboard-more-menu-account {
    order: 1 !important;
  }

  .dashboard-more-menu-settings {
    order: 2 !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings {
    order: initial !important;
    display: grid !important;
  }

}

/* v1.1.0-mobile-dashboard-reference93: slower open motion and smooth account/settings switch. */
@media (max-width: 767px) {
  .dashboard-more-menu-panel.dashboard-more-menu-float {
    transition: opacity .32s ease, transform .38s cubic-bezier(.18, .78, .22, 1) !important;
  }

  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-trigger {
    animation: dashboardMoreDotsDropIn .42s cubic-bezier(.18, .78, .22, 1) both !important;
  }

  .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-root-options,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-root-options {
    top: 104px !important;
    grid-template-columns: 68px 68px !important;
    gap: 16px !important;
    animation: none !important;
  }

  .dashboard-more-menu-account,
  .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings {
    order: initial !important;
    transition: transform .34s cubic-bezier(.18, .78, .22, 1), opacity .24s ease, filter .24s ease !important;
  }

  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-account {
    animation: dashboardMoreOrbDropIn .46s cubic-bezier(.18, .78, .22, 1) .08s both !important;
  }

  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-settings {
    animation: dashboardMoreOrbDropIn .46s cubic-bezier(.18, .78, .22, 1) .16s both !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account {
    transform: translateX(84px) !important;
    animation: none !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings {
    transform: translateX(-84px) !important;
    animation: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings {
    transform: translateX(0) !important;
    animation: none !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list {
    animation: dashboardMoreListSlowDropFade .38s cubic-bezier(.18, .78, .22, 1) both !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list .dashboard-more-subitem,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem {
    animation: dashboardMoreSubItemSlowDrop .34s cubic-bezier(.18, .78, .22, 1) both !important;
  }
}

@keyframes dashboardMoreDotsDropIn {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(.86);
  }
  70% {
    opacity: 1;
    transform: translateY(3px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardMoreOrbDropIn {
  from {
    opacity: 0;
    transform: translateY(-34px) scale(.88);
  }
  72% {
    opacity: 1;
    transform: translateY(4px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardMoreListSlowDropFade {
  from {
    opacity: 0;
    transform: translateY(-22px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardMoreSubItemSlowDrop {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* v1.1.0-mobile-dashboard-reference94: softer label and submenu entrance. */
@media (max-width: 767px) {
  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    transform-origin: top center !important;
  }

  .dashboard-more-menu-sheet.is-open:not(.is-account-open):not(.is-settings-open) .dashboard-more-menu-account strong {
    animation: dashboardMoreLabelSoftDrop .46s cubic-bezier(.18, .78, .22, 1) .18s both !important;
  }

  .dashboard-more-menu-sheet.is-open:not(.is-account-open):not(.is-settings-open) .dashboard-more-menu-settings strong {
    animation: dashboardMoreLabelSoftDrop .46s cubic-bezier(.18, .78, .22, 1) .26s both !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings strong {
    animation: dashboardMoreLabelSoftSwitch .28s cubic-bezier(.18, .78, .22, 1) both !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list {
    animation: dashboardMoreSubmenuSoftDrop .52s cubic-bezier(.16, .84, .24, 1) both !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list .dashboard-more-subitem,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem {
    animation: dashboardMoreSubItemSoftDrop .5s cubic-bezier(.16, .84, .24, 1) both !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list .dashboard-more-subitem:nth-child(1),
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem:nth-child(1) {
    animation-delay: .08s !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list .dashboard-more-subitem:nth-child(2),
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem:nth-child(2) {
    animation-delay: .15s !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list .dashboard-more-subitem:nth-child(3),
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem:nth-child(3) {
    animation-delay: .22s !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem:nth-child(4) {
    animation-delay: .29s !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list .dashboard-more-subitem:nth-child(5) {
    animation-delay: .36s !important;
  }
}

@keyframes dashboardMoreLabelSoftDrop {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboardMoreLabelSoftSwitch {
  from {
    opacity: .45;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashboardMoreSubmenuSoftDrop {
  from {
    opacity: 0;
    transform: translateY(-28px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboardMoreSubItemSoftDrop {
  from {
    opacity: 0;
    transform: translateY(-22px) scale(.97);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* v1.1.0-mobile-dashboard-reference96: no main-button swap and animated fold-back. */
@media (max-width: 767px) {
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings {
    transform: translateX(0) !important;
    animation: none !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list {
    right: 84px !important;
    width: min(390px, calc(100vw - 106px)) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list {
    right: 0 !important;
    width: min(390px, calc(100vw - 22px)) !important;
  }

  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list {
    display: grid !important;
    pointer-events: none !important;
    animation: dashboardMoreSubmenuSoftFold .52s cubic-bezier(.45, 0, .25, 1) both !important;
  }

  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list .dashboard-more-subitem,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list .dashboard-more-subitem {
    animation: dashboardMoreSubItemSoftFold .46s cubic-bezier(.45, 0, .25, 1) both !important;
  }

  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list .dashboard-more-subitem:nth-child(1),
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list .dashboard-more-subitem:nth-child(1) {
    animation-delay: .18s !important;
  }

  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list .dashboard-more-subitem:nth-child(2),
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list .dashboard-more-subitem:nth-child(2) {
    animation-delay: .13s !important;
  }

  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list .dashboard-more-subitem:nth-child(3),
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list .dashboard-more-subitem:nth-child(3) {
    animation-delay: .08s !important;
  }

  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list .dashboard-more-subitem:nth-child(4) {
    animation-delay: .03s !important;
  }

  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list .dashboard-more-subitem:nth-child(5) {
    animation-delay: 0s !important;
  }
}

@keyframes dashboardMoreSubmenuSoftFold {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-22px) scale(.985);
  }
}

@keyframes dashboardMoreSubItemSoftFold {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-16px) scale(.97);
  }
}

/* v1.1.0-mobile-dashboard-reference98: clearer labels and real navigation feedback. */
@media (max-width: 767px) {
  .dashboard-more-menu-float .dashboard-more-menu-orb strong {
    color: #fff !important;
    text-shadow:
      0 2px 4px rgba(15, 23, 42, .55),
      0 8px 18px rgba(15, 23, 42, .45) !important;
  }

  .dashboard-more-menu-sheet.is-submenu-collapsed .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-submenu-collapsed .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-submenu-collapsed .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-submenu-collapsed .dashboard-more-menu-settings strong {
    animation: none !important;
  }

  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-settings strong {
    animation: none !important;
  }

  .dashboard-more-subitem.is-launching .dashboard-more-subitem-label,
  .dashboard-more-subitem.is-launching .dashboard-more-subitem-icon {
    transform: translateY(-1px) scale(.97) !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, .26), 0 2px 8px rgba(15, 23, 42, .10) !important;
  }

  .dashboard-more-subitem.is-launching .dashboard-more-subitem-label {
    background: #ecfdf5 !important;
    color: #047857 !important;
  }

  .dashboard-more-navigation-feedback {
    position: fixed !important;
    left: 50% !important;
    top: calc(18px + env(safe-area-inset-top)) !important;
    z-index: 36000 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: min(360px, calc(100vw - 34px)) !important;
    min-height: 58px !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(16, 185, 129, .18) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #102033 !important;
    font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .20), 0 4px 12px rgba(15, 23, 42, .08) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -14px) scale(.96) !important;
    transition: opacity .22s ease, transform .28s cubic-bezier(.18, .78, .22, 1) !important;
  }

  .dashboard-more-navigation-feedback.is-visible {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  .dashboard-more-navigation-feedback-icon {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #fff !important;
  }

  .dashboard-more-navigation-feedback-icon::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m9 16.2-3.5-3.5L4 14.2 9 19 20 8 18.5 6.5 9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m9 16.2-3.5-3.5L4 14.2 9 19 20 8 18.5 6.5 9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .dashboard-more-navigation-feedback strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #102033 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* v1.1.0-mobile-dashboard-reference99: fixed main labels and transparent submenu text. */
@media (max-width: 767px) {
  .dashboard-more-menu-float .dashboard-more-menu-orb strong,
  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-open .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-settings strong,
  .dashboard-more-menu-sheet.is-submenu-collapsed .dashboard-more-menu-account strong,
  .dashboard-more-menu-sheet.is-submenu-collapsed .dashboard-more-menu-settings strong {
    color: #fff !important;
    text-shadow:
      0 2px 4px rgba(2, 6, 23, .78),
      0 8px 18px rgba(2, 6, 23, .55) !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .dashboard-more-subitem-label {
    min-height: 34px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-shadow:
      0 2px 5px rgba(2, 6, 23, .78),
      0 10px 22px rgba(2, 6, 23, .58) !important;
  }

  .dashboard-more-subitem.is-launching .dashboard-more-subitem-label {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .dashboard-more-subitem.is-launching .dashboard-more-subitem-icon {
    transform: translateY(-1px) scale(.97) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference100: align submenu text endings near icon rail. */
@media (max-width: 767px) {
  .dashboard-more-subitem {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    gap: 10px !important;
  }

  .dashboard-more-subitem-label {
    justify-self: end !important;
    display: inline-grid !important;
    place-items: center end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(260px, calc(100vw - 136px)) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-account-list,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-account-list {
    right: 74px !important;
    width: min(310px, calc(100vw - 126px)) !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-settings-list,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-settings-list {
    right: 0 !important;
    width: min(350px, calc(100vw - 28px)) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: show only the active category in submenu mode. */
@media (max-width: 767px) {
  .dashboard-more-menu-account {
    grid-column: 1 !important;
  }

  .dashboard-more-menu-settings {
    grid-column: 2 !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-settings {
    display: none !important;
  }

  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-account {
    display: none !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-settings {
    display: grid !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: restore floating menu and focus clicked destinations only. */
@media (max-width: 767px) {
  .dashboard-more-menu-account {
    grid-column: 1 !important;
  }

  .dashboard-more-menu-settings {
    grid-column: 2 !important;
  }

  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-account-closing .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-open .dashboard-more-menu-settings,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-account,
  .dashboard-more-menu-sheet.is-settings-closing .dashboard-more-menu-settings {
    display: grid !important;
  }

  body.dashboard-more-destination-focus[data-dashboard-more-focus="settings"] #settingsPanel .settings-box[aria-hidden="true"] {
    display: none !important;
  }

  body.dashboard-more-destination-focus[data-dashboard-more-focus="settings"] #settingsPanel .settings-box.is-active-setting {
    display: block !important;
  }

  body.dashboard-more-destination-focus[data-dashboard-more-focus="settings"] #settingsPanel .settings-sections {
    display: block !important;
  }

  body.dashboard-more-destination-focus[data-dashboard-more-focus="account"] #accountPanel .account-shop-summary,
  body.dashboard-more-destination-focus[data-dashboard-more-focus="account"] #accountPanel .account-tabs {
    display: none !important;
  }

  body.dashboard-more-destination-focus[data-dashboard-more-focus="account"] #accountPanel [data-account-panel][aria-hidden="true"] {
    display: none !important;
  }

  body.dashboard-more-destination-focus[data-dashboard-more-focus="account"] #accountPanel [data-account-panel][aria-hidden="false"] {
    display: block !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: open dashboard more destinations as focused cards. */
@media (max-width: 767px) {
  body.dashboard-more-destination-open {
    overflow: hidden !important;
  }

  .dashboard-more-destination-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    display: block !important;
    pointer-events: none !important;
  }

  .dashboard-more-destination-sheet[aria-hidden="true"] {
    visibility: hidden !important;
  }

  .dashboard-more-destination-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .34) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    opacity: 0 !important;
    transition: opacity .28s cubic-bezier(.2, .8, .2, 1) !important;
  }

  .dashboard-more-destination-panel {
    position: absolute !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    opacity: 0 !important;
    transform: translateY(24px) scale(.985) !important;
    transition:
      opacity .32s cubic-bezier(.18, .78, .22, 1),
      transform .32s cubic-bezier(.18, .78, .22, 1) !important;
  }

  .dashboard-more-destination-sheet.is-open {
    pointer-events: auto !important;
  }

  .dashboard-more-destination-sheet.is-open .dashboard-more-destination-backdrop {
    opacity: 1 !important;
  }

  .dashboard-more-destination-sheet.is-open .dashboard-more-destination-panel {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }

  .dashboard-more-destination-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .dashboard-more-destination-close {
    position: absolute !important;
    top: 6px !important;
    right: 14px !important;
    z-index: 3 !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid #d9e2ef !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #536173 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  .dashboard-more-destination-content {
    min-height: 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 56px 8px 20px !important;
  }

  .dashboard-more-destination-content > .account-card,
  .dashboard-more-destination-content > .settings-box {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto 14px !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
  }

  .dashboard-more-destination-content > .settings-box {
    padding: 18px !important;
  }

  .dashboard-more-destination-content > .settings-box summary {
    cursor: default !important;
  }

  .dashboard-more-destination-content > .settings-box summary::after {
    display: none !important;
  }

  .dashboard-more-destination-content > .settings-footer {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 12px !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: premium program settings card layout. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] .dashboard-more-destination-panel {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] .dashboard-more-destination-content {
    padding: 18px 16px 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] .dashboard-more-destination-close {
    top: 32px !important;
    right: 28px !important;
    width: 42px !important;
    height: 42px !important;
    border: 1.5px solid #d8e1ee !important;
    background: rgba(255, 255, 255, .98) !important;
    color: #4b596b !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .1) !important;
    font-size: 32px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox {
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d9e2ee !important;
    border-radius: 24px 24px 0 0 !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(209, 250, 229, .34), transparent 28%),
      rgba(255, 255, 255, .98) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .16) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox > summary {
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 28px 58px 24px 24px !important;
    border-bottom: 1px solid #e4ebf4 !important;
    background: transparent !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox > summary .settings-summary-icon {
    width: 56px !important;
    height: 56px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox > summary .settings-summary-icon svg {
    width: 34px !important;
    height: 34px !important;
    stroke: currentColor !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox > summary .settings-summary-copy {
    display: block !important;
    min-width: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox > summary .settings-summary-copy strong {
    display: block !important;
    color: #0f1b31 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox > summary .settings-summary-copy small {
    display: block !important;
    margin-top: 7px !important;
    color: #68778b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 26px 26px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label {
    position: relative !important;
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #0f1b31 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label > span {
    color: #0f1b31 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox #settingAppName,
  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox #settingBrandName {
    height: 54px !important;
    padding: 0 18px 0 58px !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04) inset !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label:nth-child(1)::before,
  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label:nth-child(2)::before {
    position: absolute !important;
    left: 20px !important;
    bottom: 17px !important;
    z-index: 1 !important;
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    color: #059669 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label:nth-child(1)::before {
    content: "" !important;
    bottom: 20px !important;
    width: 19px !important;
    height: 14px !important;
    border: 2px solid #059669 !important;
    border-radius: 2px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label:nth-child(2)::before {
    content: "☰" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-settings-grid > label:nth-child(1)::after {
    content: "" !important;
    position: absolute !important;
    left: 27px !important;
    bottom: 14px !important;
    z-index: 1 !important;
    width: 8px !important;
    height: 2px !important;
    background: #059669 !important;
    box-shadow: 0 -4px 0 -1px #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-logo-row {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    grid-template-rows: 50px 50px !important;
    gap: 10px 18px !important;
    align-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-logo-preview {
    grid-row: 1 / 3 !important;
    width: 120px !important;
    height: 120px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background-color: #f7fffb !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .02) !important;
    color: #059669 !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .program-logo-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .logo-mini-button {
    width: 100% !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .file-button.logo-mini-button {
    border: 1.5px solid #b7e4cf !important;
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox #clearProgramLogo {
    border: 1.5px solid #fecaca !important;
    color: #dc2626 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .file-button.logo-mini-button::before {
    content: "↥" !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox #clearProgramLogo::before {
    content: "⌫" !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox .field-help {
    display: block !important;
    margin: 0 !important;
    color: #68778b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox #programLogoName {
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #programSettingsBox #settingAppDescription {
    min-height: 108px !important;
    padding: 16px !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    resize: vertical !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] .dashboard-more-destination-content > .settings-footer {
    max-width: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) !important;
    gap: 14px !important;
    margin: 0 auto !important;
    padding: 20px 18px !important;
    border: 1px solid #d9e2ee !important;
    border-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .16) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] .dashboard-more-destination-content > .settings-footer .save-status {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] .dashboard-more-destination-content > .settings-footer button {
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #cancelSettings {
    border: 1.5px solid #d9e2ee !important;
    background: #fff !important;
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #cancelSettings::before {
    content: "↶" !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #saveSettings {
    border: 0 !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(5, 150, 105, .26) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="programSettingsBox"] #saveSettings::before {
    content: "▣" !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: premium settings sub-cards for contract, reminder, bank and backup. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .dashboard-more-destination-panel,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .dashboard-more-destination-panel,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-panel,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .dashboard-more-destination-panel {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .dashboard-more-destination-content,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .dashboard-more-destination-content,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-content,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .dashboard-more-destination-content {
    padding: 18px 16px 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .dashboard-more-destination-close,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .dashboard-more-destination-close,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-close,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .dashboard-more-destination-close {
    top: 32px !important;
    right: 28px !important;
    width: 42px !important;
    height: 42px !important;
    border: 1.5px solid #d8e1ee !important;
    background: rgba(255, 255, 255, .98) !important;
    color: #4b596b !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .1) !important;
    font-size: 32px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-box,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-box,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-box,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-box {
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d9e2ee !important;
    border-radius: 24px 24px 0 0 !important;
    background:
      radial-gradient(circle at 82% 0%, rgba(209, 250, 229, .30), transparent 28%),
      rgba(255, 255, 255, .98) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .16) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-box > summary,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-box > summary,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-box > summary,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-box > summary {
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 28px 58px 24px 24px !important;
    border-bottom: 1px solid #e4ebf4 !important;
    background: transparent !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-summary-icon,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-icon,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-icon,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-summary-icon {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-summary-icon svg,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-icon svg,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-icon svg,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-summary-icon svg {
    width: 34px !important;
    height: 34px !important;
    stroke: currentColor !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-summary-copy strong,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-copy strong,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-copy strong,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-summary-copy strong {
    color: #0f1b31 !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-summary-copy small,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-copy small,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-copy small,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-summary-copy small {
    display: block !important;
    margin-top: 6px !important;
    color: #68778b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .dashboard-more-destination-content > .settings-footer,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .dashboard-more-destination-content > .settings-footer,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-content > .settings-footer,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .dashboard-more-destination-content > .settings-footer {
    max-width: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) !important;
    gap: 14px !important;
    margin: 0 auto !important;
    padding: 20px 18px !important;
    border: 1px solid #d9e2ee !important;
    border-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .16) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-footer .save-status,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-footer .save-status,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-footer .save-status,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-footer .save-status {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .settings-footer button,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-footer button,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-footer button,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .settings-footer button {
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] #cancelSettings,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #cancelSettings,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] #cancelSettings,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] #cancelSettings {
    border: 1.5px solid #d9e2ee !important;
    background: #fff !important;
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] #cancelSettings::before {
    content: "↶" !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #saveSettings,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] #saveSettings,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] #saveSettings,
  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] #saveSettings {
    border: 0 !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(5, 150, 105, .26) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] #saveSettings::before,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #saveSettings::before,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] #saveSettings::before,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] #saveSettings::before {
    content: "▣" !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-settings-layout,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-settings-layout,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-settings-layout,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-settings-layout {
    padding: 24px 26px 26px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-settings-layout {
    display: grid !important;
    gap: 24px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-text-section {
    display: grid !important;
    gap: 10px !important;
    color: #0f1b31 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-section-title {
    color: #0f1b31 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-text-section > small,
  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-char-counter {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] textarea {
    width: 100% !important;
    min-height: 168px !important;
    padding: 18px !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.58 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] #settingContractFooter {
    min-height: 132px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-token-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-token-row > span {
    width: 100% !important;
    color: #0f1b31 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-token-row button:not(.contract-copy-button) {
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #a7dbc4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #14532d !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-copy-button {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 10px !important;
    border: 1.5px solid #b7e4cf !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fbfffd, #f3fff9) !important;
    color: #059669 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="contractMessageSettingsBox"] .contract-copy-button::before {
    content: "✣" !important;
    margin-right: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-settings-layout {
    display: grid !important;
    gap: 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input {
    justify-self: end !important;
    order: 2 !important;
    width: 64px !important;
    height: 34px !important;
    appearance: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #10b981 !important;
    box-shadow: inset 0 0 0 2px rgba(5, 150, 105, .12) !important;
    position: relative !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input::after {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row span {
    color: #0f1b31 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row small {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px !important;
    border: 1px solid #d9efe5 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(240, 253, 244, .92), rgba(255, 255, 255, .96)) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card .line-app-badge {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 132px !important;
    height: 132px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card > div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card strong {
    color: #0f1b31 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card strong::after {
    content: "แนะนำ" !important;
    display: inline-flex !important;
    margin-left: 8px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #bbf7d0 !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card small {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card small::after {
    content: "ใช้งานง่าย ลูกค้าได้รับเร็ว" !important;
    display: block !important;
    margin-top: 12px !important;
    color: #64748b !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field-grid {
    display: grid !important;
    gap: 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 4px 12px !important;
    align-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field::before {
    grid-row: 1 / 3 !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    font-size: 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field:nth-child(1)::before {
    content: "◷" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field:nth-child(2)::before {
    content: "▣" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field span,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field span,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-upload-title {
    grid-column: 2 !important;
    color: #0f1b31 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field small {
    grid-column: 2 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field input,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field select,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field input,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field select {
    grid-column: 1 / -1 !important;
    height: 54px !important;
    padding: 0 16px !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-warning-note,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-restore-info,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-note {
    border: 1px solid #d9efe5 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(240, 253, 244, .88), rgba(255, 255, 255, .96)) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-warning-note {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px !important;
    color: #0f1b31 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-settings-layout {
    display: grid !important;
    gap: 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-grid {
    display: grid !important;
    gap: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field {
    display: grid !important;
    gap: 10px !important;
    position: relative !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field:not(.bank-field-promptpay) > span::before,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 28px !important;
    margin-right: 8px !important;
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-account > span::before { content: "♙" !important; }
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-bank > span::before { content: "▥" !important; }
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-number > span::before { content: "▭" !important; }
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title::before { content: "▦" !important; }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay {
    padding: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay > span::before {
    content: "♢" !important;
    margin-right: 8px !important;
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .field-help {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-section {
    display: grid !important;
    gap: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-drop {
    min-height: 118px !important;
    display: grid !important;
    place-items: center !important;
    gap: 8px !important;
    padding: 20px !important;
    border: 1.5px dashed #9bd9bd !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fbfffd, #f6fffb) !important;
    text-align: center !important;
    color: #059669 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-icon {
    font-size: 34px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-file-button {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-settings-layout {
    display: grid !important;
    gap: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-action-button {
    min-height: 124px !important;
    display: grid !important;
    place-items: center !important;
    gap: 6px !important;
    padding: 14px 8px !important;
    border: 1px solid #d9e2ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0f1b31 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-action-button > span {
    display: block !important;
    color: #059669 !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] #exportBackupJson > span {
    color: #2563eb !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] label.backup-action-button > span {
    color: #7c3aed !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] #importBackup {
    grid-column: 1 / -1 !important;
    min-height: 58px !important;
    display: inline-flex !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 19px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-file-input {
    display: block !important;
    width: 100% !important;
    padding: 18px !important;
    border: 1px solid #d9e2ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #0f1b31 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-restore-info,
  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-note {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 18px !important;
    color: #0f1b31 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-upload-drop {
    min-height: 132px !important;
    display: grid !important;
    place-items: center !important;
    gap: 6px !important;
    padding: 22px !important;
    border: 1.5px dashed #9bd9bd !important;
    border-radius: 16px !important;
    background: #fbfffd !important;
    color: #059669 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-upload-icon {
    font-size: 36px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="backupSettingsBox"] .backup-file-button {
    display: none !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: fit bank settings card as a single clean mobile form. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-content {
    padding: 18px 16px 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-box {
    width: min(430px, calc(100vw - 32px)) !important;
    max-width: 430px !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-box > summary {
    min-height: 104px !important;
    padding: 28px 62px 24px 24px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-copy strong {
    font-size: 25px !important;
    line-height: 1.12 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-copy small {
    max-width: 260px !important;
    font-size: 15px !important;
    line-height: 1.32 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-settings-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    padding: 24px 26px 26px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-account,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-bank,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-number,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field > span,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title {
    grid-column: 1 / -1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    color: #0f1b31 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field:not(.bank-field-promptpay) > span::before,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title::before,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay > span::before {
    flex: 0 0 24px !important;
    width: 24px !important;
    margin: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #059669 !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field input,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field select {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field > small,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field .field-help,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .field-help {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay {
    padding: 16px !important;
    border: 1px solid #d9efe5 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(240, 253, 244, .88), rgba(255, 255, 255, .96)) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-drop {
    width: 100% !important;
    min-height: 118px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 20px !important;
    border: 1.5px dashed #9bd9bd !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fbfffd, #f6fffb) !important;
    color: #059669 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-icon {
    font-size: 32px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-copy strong {
    display: block !important;
    color: #059669 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-copy small,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] #settingBankQrName {
    display: block !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-file-button,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-drop input[type="file"],
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] #settingBankQr {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-content > .settings-footer {
    width: min(430px, calc(100vw - 32px)) !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: compact reminder settings and restore real switch states. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .dashboard-more-destination-content {
    padding: 14px 14px 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-box {
    width: min(430px, calc(100vw - 28px)) !important;
    max-width: 430px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-box > summary {
    min-height: 92px !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 22px 58px 20px 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-copy strong {
    font-size: 23px !important;
    line-height: 1.12 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .settings-summary-copy small {
    margin-top: 4px !important;
    max-width: 260px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .dashboard-more-destination-close {
    top: 26px !important;
    right: 24px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 29px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-settings-layout {
    gap: 17px !important;
    padding: 20px 22px 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row {
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 12px !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row span {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row small {
    margin-top: 3px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input {
    width: 54px !important;
    height: 30px !important;
    min-width: 54px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .22) !important;
    cursor: pointer !important;
    transition: background .2s ease, box-shadow .2s ease !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input::after {
    top: 3px !important;
    left: 3px !important;
    right: auto !important;
    width: 24px !important;
    height: 24px !important;
    transform: translateX(0) !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input:checked {
    background: #10b981 !important;
    box-shadow: inset 0 0 0 1px rgba(5, 150, 105, .24), 0 3px 10px rgba(5, 150, 105, .18) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input:checked::after {
    transform: translateX(24px) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card .line-app-badge {
    width: 104px !important;
    height: 104px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card > div {
    gap: 9px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card strong {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card strong::after {
    margin-left: 0 !important;
    margin-top: 5px !important;
    width: max-content !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card small {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-line-card small::after {
    margin-top: 9px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field-grid {
    gap: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 4px 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field::before {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field span {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field input,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field select {
    height: 50px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: 17px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-field small {
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-warning-note {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-warning-note strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: de-bloat reminder switch and keep only one thumb. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #settingAutoDueReminder,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input[type="checkbox"] {
    display: block !important;
    justify-self: end !important;
    order: 2 !important;
    box-sizing: border-box !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    background: #cbd5e1 !important;
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .18) !important;
    transform: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #settingAutoDueReminder::after,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #settingAutoDueReminder::before,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input[type="checkbox"]::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    right: auto !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .16) !important;
    transform: translateX(0) !important;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #settingAutoDueReminder:checked,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input[type="checkbox"]:checked {
    background: #10b981 !important;
    box-shadow: inset 0 0 0 1px rgba(5, 150, 105, .18) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] #settingAutoDueReminder:checked::before,
  #dashboardMoreDestinationSheet[data-destination-target="paymentReminderSettingsBox"] .reminder-enable-row input[type="checkbox"]:checked::before {
    left: 3px !important;
    transform: translateX(22px) !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: compact bank card and replace raw glyphs with clean line icons. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-content {
    padding: 14px 14px 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-box {
    width: min(390px, calc(100vw - 40px)) !important;
    max-width: 390px !important;
    border-radius: 22px 22px 0 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-box > summary {
    min-height: 88px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 20px 58px 18px 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-copy strong {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .settings-summary-copy small {
    max-width: 245px !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-close {
    top: 25px !important;
    right: 23px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 29px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-settings-layout {
    gap: 17px !important;
    padding: 20px 22px 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-grid {
    gap: 17px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-account,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-bank,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-number,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay {
    gap: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field > span,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title {
    gap: 9px !important;
    font-size: 17px !important;
    line-height: 1.22 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field:not(.bank-field-promptpay) > span::before,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title::before,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay > span::before {
    content: "" !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    background: currentColor !important;
    color: #059669 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 20px 20px !important;
    mask-size: 20px 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-account > span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-bank > span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-4 7 4v12'/%3E%3Cpath d='M9 21v-8'/%3E%3Cpath d='M15 21v-8'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-4 7 4v12'/%3E%3Cpath d='M9 21v-8'/%3E%3Cpath d='M15 21v-8'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-number > span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h5'/%3E%3C/svg%3E") !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay > span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E") !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-title::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h2v2h-2z'/%3E%3Cpath d='M19 14h2v2h-2z'/%3E%3Cpath d='M14 19h2v2h-2z'/%3E%3Cpath d='M19 19h2v2h-2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h2v2h-2z'/%3E%3Cpath d='M19 14h2v2h-2z'/%3E%3Cpath d='M14 19h2v2h-2z'/%3E%3Cpath d='M19 19h2v2h-2z'/%3E%3C/svg%3E") !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field input,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field select {
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field > small,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field .field-help,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .field-help {
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-field-promptpay > span {
    font-size: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-section {
    gap: 9px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-drop {
    min-height: 104px !important;
    gap: 6px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-block !important;
    background: #64748b !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M20 16.5a4.5 4.5 0 0 1-4.5 4.5h-7A4.5 4.5 0 0 1 4 16.5'/%3E%3C/svg%3E") center / 28px 28px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M20 16.5a4.5 4.5 0 0 1-4.5 4.5h-7A4.5 4.5 0 0 1 4 16.5'/%3E%3C/svg%3E") center / 28px 28px no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-copy strong {
    font-size: 16px !important;
    line-height: 1.22 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .bank-upload-copy small,
  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] #settingBankQrName {
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="bankSettingsBox"] .dashboard-more-destination-content > .settings-footer {
    width: min(390px, calc(100vw - 40px)) !important;
    max-width: 390px !important;
    padding: 16px 14px !important;
    gap: 12px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: profile destination card. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-content {
    padding: 12px 14px 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-title {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #accountProfileMount {
    width: min(430px, calc(100vw - 28px)) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 24px 18px 18px !important;
    border: 1px solid #d9e2ee !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 86% 0%, rgba(209, 250, 229, .28), transparent 32%),
      rgba(255, 255, 255, .98) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .16) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-close {
    top: 28px !important;
    right: 28px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1.5px solid #d8e1ee !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #4b596b !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10) !important;
    font-size: 29px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title {
    display: block !important;
    padding: 0 54px 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title h2 {
    margin: 0 !important;
    color: #0f1b31 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title p {
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid #dfe7f1 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-hero {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-picture {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #fff !important;
    box-shadow: 0 8px 16px rgba(16, 185, 129, .22) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span::before {
    content: "" !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-4 7 4v12'/%3E%3Cpath d='M9 21v-8'/%3E%3Cpath d='M15 21v-8'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-4 7 4v12'/%3E%3Cpath d='M9 21v-8'/%3E%3Cpath d='M15 21v-8'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box .account-section-title > span::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title h3 {
    margin: 0 !important;
    color: #0f1b31 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title p {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-readonly-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #0f1b31 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row span,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label span {
    color: #0f1b31 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row input,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row-wide {
    margin-top: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-upload-field {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden {
    order: -1 !important;
    width: 132px !important;
    height: 132px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    border: 1.5px solid #d9e2ee !important;
    border-radius: 50% !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden::before {
    content: "Signature" !important;
    color: #0f1b31 !important;
    font-family: cursive !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    opacity: .7 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview img {
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview-label {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone {
    width: max-content !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border: 1.5px solid #10b981 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #059669 !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone b {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    background: currentColor !important;
    color: transparent !important;
    font-size: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone em,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone small {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong {
    color: #059669 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong::before {
    content: "เปลี่ยนลายเซ็น" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong {
    font-size: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong::before {
    font-size: 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileSignature {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileSignatureName,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-note {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    padding: 0 !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading {
    width: 100% !important;
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 18px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 16px 18px !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f1b31 !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::before {
    content: "" !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: 0 8px 16px rgba(16, 185, 129, .22) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::after {
    content: "›" !important;
    justify-self: end !important;
    color: #0f1b31 !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transform: rotate(0deg) !important;
    transition: transform .2s ease !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .account-password-heading::after {
    transform: rotate(90deg) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading strong {
    color: #0f1b31 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading span {
    grid-column: 2 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card:not(.is-open) .compact-password-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card:not(.is-open) .password-strength-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card:not(.is-open) .password-rule-grid {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .compact-password-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-strength-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-rule-grid {
    margin: 0 18px 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-strength-preview {
    padding: 12px !important;
    border: 1px solid #e5edf5 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-rule-grid {
    display: grid !important;
    gap: 6px !important;
    padding: 12px !important;
    border: 1px solid #e5edf5 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-rule-grid span {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-rule-grid span::before {
    content: "✓" !important;
    margin-right: 7px !important;
    color: #10b981 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileError {
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 4px -18px -18px !important;
    padding: 16px 18px 18px !important;
    border-top: 1px solid #e4ebf4 !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .secondary-button {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button {
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 28px rgba(5, 150, 105, .26) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button::before {
    content: "▣" !important;
    margin-right: 9px !important;
    font-size: 21px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: tighten profile card to match the mobile reference. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm {
    gap: 10px !important;
    padding: 20px 16px 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title {
    padding: 0 50px 6px 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title h2 {
    font-size: 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title p {
    font-size: 13px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    gap: 11px !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 4px !important;
    order: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span {
    width: 34px !important;
    height: 34px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span::before {
    width: 18px !important;
    height: 18px !important;
    -webkit-mask-size: 18px 18px !important;
    mask-size: 18px 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title h3,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading strong {
    font-size: 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-readonly-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid {
    gap: 9px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label {
    gap: 6px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row span,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label span {
    font-size: 13px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row input,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid input {
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row-wide {
    margin-top: 9px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box .account-section-title {
    margin-bottom: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-upload-field {
    order: 2 !important;
    gap: 7px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden {
    order: 1 !important;
    width: 104px !important;
    height: 104px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden::before {
    font-size: 22px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone {
    padding: 9px 16px !important;
    border-radius: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong::before {
    font-size: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileSignatureName,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-note {
    font-size: 11px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    padding: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading {
    min-height: 64px !important;
    grid-template-columns: 38px minmax(0, 1fr) 16px !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::before {
    width: 34px !important;
    height: 34px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading span {
    font-size: 11px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .compact-password-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-strength-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-rule-grid {
    margin: 0 14px 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions {
    margin: 2px -16px -16px !important;
    padding: 14px 16px 16px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button {
    min-height: 52px !important;
    font-size: 17px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: make profile fit one mobile viewport more closely. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm {
    gap: 9px !important;
    padding: 18px 16px 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title h2 {
    font-size: 21px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title p {
    font-size: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    gap: 9px !important;
    padding: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title {
    margin-bottom: 2px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span {
    width: 32px !important;
    height: 32px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title h3,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading strong {
    font-size: 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-readonly-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid {
    gap: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row span,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label span {
    font-size: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row input,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid input {
    height: 39px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row-wide {
    margin-top: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden {
    width: 92px !important;
    height: 92px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden::before {
    font-size: 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone {
    padding: 8px 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileSignatureName {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-note {
    font-size: 11px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading {
    min-height: 58px !important;
    padding: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::before {
    width: 32px !important;
    height: 32px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions {
    margin: 0 -16px -15px !important;
    padding: 13px 16px 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button {
    min-height: 50px !important;
    font-size: 16px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131b: profile modal final tightening for mobile reference. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="profile"] #accountProfileMount {
    align-items: flex-start !important;
    padding-top: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm {
    width: min(408px, calc(100vw - 28px)) !important;
    gap: 8px !important;
    padding: 17px 14px 13px !important;
    border-radius: 20px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title {
    min-height: 44px !important;
    padding: 0 42px 4px 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title h2 {
    font-size: 21px !important;
    line-height: 1.18 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm .mobile-modal-close {
    width: 34px !important;
    height: 34px !important;
    top: 16px !important;
    right: 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    gap: 8px !important;
    padding: 11px !important;
    border-radius: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-hero {
    display: block !important;
    min-height: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-picture {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title {
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 1px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span {
    width: 29px !important;
    height: 29px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span::before {
    width: 15px !important;
    height: 15px !important;
    -webkit-mask-size: 15px 15px !important;
    mask-size: 15px 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title h3,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading strong {
    font-size: 14.5px !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title p {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-readonly-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid {
    gap: 6px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label {
    gap: 3px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row span,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label span {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row input,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid input {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row-wide {
    margin-top: 6px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box {
    align-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box .account-section-title {
    align-self: stretch !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box .account-section-title p,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview-label,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-note,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileSignatureName,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone em,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone small {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden {
    width: 84px !important;
    height: 84px !important;
    margin-top: 2px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden::before {
    font-size: 17px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-upload-field {
    gap: 5px !important;
    align-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone {
    min-height: 0 !important;
    padding: 7px 14px !important;
    border-radius: 9px !important;
    border-color: rgba(16, 185, 129, 0.82) !important;
    background: #ffffff !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone b {
    width: 15px !important;
    height: 15px !important;
    -webkit-mask-size: 15px 15px !important;
    mask-size: 15px 15px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong::before {
    content: "เปลี่ยนลายเซ็น" !important;
    font-size: 13px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    padding: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading {
    min-height: 52px !important;
    grid-template-columns: 31px minmax(0, 1fr) 14px !important;
    gap: 8px !important;
    padding: 11px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::before {
    width: 29px !important;
    height: 29px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading span {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .compact-password-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-strength-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-rule-grid {
    margin: 0 11px 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions {
    margin: 0 -14px -13px !important;
    padding: 11px 14px 13px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 15.5px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: polish profile signature button and password icon. */
@media (max-width: 767px) {
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone {
    display: inline-flex !important;
    width: auto !important;
    min-width: 152px !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(16, 185, 129, 0.9) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #059669 !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong::before {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::before {
    background-color: #10b981 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .account-password-heading {
    min-height: 46px !important;
    padding-bottom: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .account-password-heading span {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .compact-password-grid {
    padding-top: 2px !important;
    gap: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .compact-password-grid label {
    gap: 5px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    display: inline-block !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: lock profile modal horizontally and rebalance mobile density. */
@media (max-width: 767px) {
  body:has(#dashboardMoreDestinationSheet[data-destination-target="profile"]:not(.hidden)),
  body:has(#dashboardMoreDestinationSheet[data-destination-target="profile"]:not(.hidden)) .dashboard-more-destination-sheet,
  body:has(#dashboardMoreDestinationSheet[data-destination-target="profile"]:not(.hidden)) .dashboard-more-destination-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"],
  #dashboardMoreDestinationSheet[data-destination-target="profile"] *,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] *::before,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] *::after {
    box-sizing: border-box !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-content {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #accountProfileMount {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 10px 0 0 !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm {
    width: min(386px, calc(100vw - 38px)) !important;
    max-width: calc(100vw - 38px) !important;
    max-height: calc(100dvh - 18px) !important;
    margin: 0 auto !important;
    gap: 7px !important;
    padding: 15px 12px 0 !important;
    border-radius: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title {
    min-height: 38px !important;
    padding: 0 38px 3px 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title h2 {
    font-size: 20px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm > .panel-title p {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm .mobile-modal-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    top: 14px !important;
    right: 12px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 32px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 10px !important;
    border-radius: 13px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 1px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title > span {
    width: 28px !important;
    height: 28px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title h3,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-section-title p {
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-readonly-grid {
    gap: 5px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row {
    gap: 3px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row span {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row input,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid input {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-info-row-wide {
    margin-top: 4px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-box {
    min-height: 0 !important;
    padding-bottom: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-upload-field {
    gap: 4px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden {
    width: 72px !important;
    height: 72px !important;
    margin-top: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden::before {
    font-size: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone {
    min-width: 134px !important;
    padding: 7px 13px !important;
    border-radius: 9px !important;
    gap: 6px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone b {
    width: 14px !important;
    height: 14px !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-dropzone strong::before {
    font-size: 12.5px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading {
    min-height: 48px !important;
    grid-template-columns: 30px minmax(0, 1fr) 14px !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading::before {
    width: 28px !important;
    height: 28px !important;
    background-size: 14px 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-heading span {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .account-password-heading {
    min-height: 42px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid {
    gap: 6px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .compact-password-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-strength-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-password-card.is-open .password-rule-grid {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions {
    position: sticky !important;
    bottom: 0 !important;
    width: calc(100% + 24px) !important;
    max-width: calc(100% + 24px) !important;
    margin: 0 -12px !important;
    padding: 9px 12px 12px !important;
    border-top: 1px solid rgba(226, 232, 240, .95) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .confirm-actions .primary-button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: prevent mobile sideways drift on real devices. */
@media (max-width: 767px) {
  html,
  body,
  .app-shell,
  .app-main,
  #dashboardPanel {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] {
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }
}

/* v1.1.0-mobile-dashboard-reference131: full-screen profile workflow. */
@media (max-width: 767px) {
  body.dashboard-more-destination-open:has(#dashboardMoreDestinationSheet[data-destination-target="profile"]) {
    overflow: hidden !important;
    background: #f8fafc !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-backdrop,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-title,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-close {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 24% 0%, rgba(16, 185, 129, .08), transparent 34%),
      #f8fafc !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .dashboard-more-destination-content,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] #accountProfileMount {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #userProfileForm.profile-flow-shell {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-view {
    display: none !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: max(18px, env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-view.is-active {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    animation: profileFlowIn .22s ease both !important;
  }

  @keyframes profileFlowIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-header {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    min-height: 52px !important;
    gap: 8px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-back,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-close {
    border: 1px solid #dce4ef !important;
    background: rgba(255, 255, 255, .74) !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-back::before {
    content: "" !important;
    width: 20px !important;
    height: 20px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-flow-save-link {
    border: 0 !important;
    background: transparent !important;
    color: #059669 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: right !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-identity-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-action-row,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-current-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-advice-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-card {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-identity-card {
    min-height: 132px !important;
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 20px 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-avatar-wrap {
    position: relative !important;
    width: 94px !important;
    height: 94px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-avatar-icon {
    width: 94px !important;
    height: 94px !important;
    display: block !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #dffbed, #d2f7e4) !important;
    position: relative !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-avatar-icon::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    background: linear-gradient(180deg, #08b76f, #059669) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-avatar-camera {
    position: absolute !important;
    right: 2px !important;
    bottom: 4px !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 8px 18px rgba(16, 185, 129, .28) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-avatar-camera::before {
    content: "" !important;
    width: 15px !important;
    height: 15px !important;
    background: #fff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3Z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-identity-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-identity-copy strong {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-hero-phone,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 750 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-verified {
    color: #059669 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-hero-phone::before,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-verified::before {
    content: "" !important;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    background: currentColor !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-hero-phone::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15.7 15.7 0 0 0 6.6 6.6l2.2-2.2a1.3 1.3 0 0 1 1.3-.3c1.4.5 2.8.7 4.3.7.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.7 21.7 2.3 13.3 2.3 3c0-.7.6-1.3 1.3-1.3H7c.7 0 1.3.6 1.3 1.3 0 1.5.2 2.9.7 4.3.1.4 0 .9-.3 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15.7 15.7 0 0 0 6.6 6.6l2.2-2.2a1.3 1.3 0 0 1 1.3-.3c1.4.5 2.8.7 4.3.7.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.7 21.7 2.3 13.3 2.3 3c0-.7.6-1.3 1.3-1.3H7c.7 0 1.3.6 1.3 1.3 0 1.5.2 2.9.7 4.3.1.4 0 .9-.3 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-verified::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-card {
    padding: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-head strong,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-action-row strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow: 0 10px 18px rgba(16, 185, 129, .2) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-icon::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .icon-bank::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10h14v11'/%3E%3Cpath d='M4 10 12 3l8 7'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10h14v11'/%3E%3Cpath d='M4 10 12 3l8 7'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .icon-pen::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .icon-lock::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .icon-trash {
    background: linear-gradient(145deg, #fb7185, #ef4444) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .icon-trash::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 15H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 15H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-caret,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-action-row > b {
    width: 16px !important;
    height: 16px !important;
    justify-self: end !important;
    background: #0f172a !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-section-caret {
    background: #059669 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-action-row > b {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .account-profile-readonly-grid,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid {
    display: grid !important;
    gap: 14px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label {
    display: grid !important;
    gap: 7px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row span,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid label span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row input,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .compact-password-grid input {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    padding: 0 14px 0 46px !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row {
    position: relative !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 15px !important;
    width: 18px !important;
    height: 18px !important;
    background: #7b8798 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row.icon-user::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-input-row.icon-phone::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15.7 15.7 0 0 0 6.6 6.6l2.2-2.2a1.3 1.3 0 0 1 1.3-.3c1.4.5 2.8.7 4.3.7.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.7 21.7 2.3 13.3 2.3 3c0-.7.6-1.3 1.3-1.3H7c.7 0 1.3.6 1.3 1.3 0 1.5.2 2.9.7 4.3.1.4 0 .9-.3 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15.7 15.7 0 0 0 6.6 6.6l2.2-2.2a1.3 1.3 0 0 1 1.3-.3c1.4.5 2.8.7 4.3.7.7 0 1.3.6 1.3 1.3v3.5c0 .7-.6 1.3-1.3 1.3C10.7 21.7 2.3 13.3 2.3 3c0-.7.6-1.3 1.3-1.3H7c.7 0 1.3.6 1.3 1.3 0 1.5.2 2.9.7 4.3.1.4 0 .9-.3 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-action-row {
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 17px !important;
    color: #0f172a !important;
    text-align: left !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-last-save,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-secure-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-main-actions {
    position: static !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .primary-button,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-wide-button {
    width: 100% !important;
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 26px rgba(5, 150, 105, .22) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .secondary-button {
    min-height: 50px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #059669 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-current-card,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-card {
    display: grid !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-current-card > strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-preview {
    width: 100% !important;
    height: 136px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #dfe6f0 !important;
    border-radius: 13px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden::before {
    content: "ยังไม่มีลายเซ็น" !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview img,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-preview img {
    width: 86% !important;
    height: 86% !important;
    object-fit: contain !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-current-card small {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-advice-card {
    padding: 18px !important;
    background: linear-gradient(135deg, #f8fbff, #eef7f4) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-advice-card strong {
    display: block !important;
    margin-bottom: 8px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-advice-card p {
    margin: 4px 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-upload-field {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-draw-help,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-password-intro {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-canvas {
    width: 100% !important;
    height: min(54vh, 420px) !important;
    min-height: 360px !important;
    display: block !important;
    box-sizing: border-box !important;
    border: 1px dashed #d8e0ec !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04) !important;
    touch-action: none !important;
    user-select: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-draw-tools,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-split-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-draw-tools button {
    min-height: 48px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-card {
    min-height: 360px !important;
    align-content: start !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-card strong,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-success-view h2 {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-card p,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-success-view p {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-success-view {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-success-mark {
    width: 98px !important;
    height: 98px !important;
    border-radius: 50% !important;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 48px 48px no-repeat,
      linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow: 0 18px 34px rgba(5, 150, 105, .28) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-password-view .compact-password-grid {
    margin-top: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-password-view .compact-password-grid input {
    padding-left: 16px !important;
    padding-right: 48px !important;
    letter-spacing: 2px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-rule-grid {
    display: grid !important;
    gap: 9px !important;
    margin: 4px 0 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-rule-grid span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-rule-grid span::before {
    content: "✓" !important;
    color: #10b981 !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .password-strength-preview {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] #profileError {
    border-radius: 12px !important;
    padding: 12px !important;
    background: #fff1f2 !important;
    color: #be123c !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .hidden {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-current-card .signature-preview.hidden {
    display: grid !important;
  }
}

@media (max-width: 768px) {
  /* v1.1.0-mobile-dashboard-reference131: keep new signatures uncropped and show saved signatures at useful size. */
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview.hidden,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-preview {
    min-height: 146px !important;
    height: clamp(146px, 26vh, 188px) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-preview img,
  #dashboardMoreDestinationSheet[data-destination-target="profile"] .signature-confirm-preview img {
    width: 94% !important;
    height: 90% !important;
    object-fit: contain !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="profile"] .profile-signature-canvas {
    max-height: 430px !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 768px) {
  /* v1.1.0-mobile-dashboard-reference131: full-screen mobile flow for creating users. */
  body.dashboard-more-destination-open:has(#dashboardMoreDestinationSheet[data-destination-target="create"]) {
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: #f6f9fc !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .dashboard-more-destination-backdrop,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .dashboard-more-destination-title,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .dashboard-more-destination-close {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .dashboard-more-destination-panel,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .dashboard-more-destination-content,
  #dashboardMoreDestinationSheet[data-destination-target="create"] #accountManageMount {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f6f9fc !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] #userManageForm.user-create-flow-shell {
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #fbfeff 0%, #f5f9fc 100%) !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    font-family: inherit !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] #userManageForm > .panel-title,
  #dashboardMoreDestinationSheet[data-destination-target="create"] #userManageForm > .user-manage-tabs {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-flow {
    min-height: 100% !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-view {
    display: none !important;
    min-height: calc(100dvh - 22px) !important;
    padding: 16px 0 0 !important;
    animation: userCreateSlideIn .28s ease both !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-view.is-active {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  @keyframes userCreateSlideIn {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 48px 1fr 72px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 56px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(251, 254, 255, .98), rgba(251, 254, 255, .88)) !important;
    backdrop-filter: blur(12px) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(20px, 5.3vw, 24px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-back,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-cancel {
    border: 0 !important;
    background: transparent !important;
    color: #009a61 !important;
    font: inherit !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-back {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    color: #0f172a !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-back::before {
    content: "‹" !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-cancel {
    min-height: 44px !important;
    padding: 0 2px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-align: right !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-hero-icon {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    margin: 4px auto 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e4fbef, #d8f5e8) !important;
    color: #00a86b !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-hero-icon::before,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .preset-icon::before,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-icon::before,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-sent-card > span::before {
    font-family: "Apple Color Emoji", "Segoe UI Symbol", sans-serif !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-hero-icon.icon-user::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 19px !important;
    width: 43px !important;
    height: 24px !important;
    transform: translateX(-50%) !important;
    display: block !important;
    border-radius: 20px 20px 12px 12px !important;
    background: currentColor !important;
    font-size: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-hero-icon.icon-user::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 18px !important;
    width: 19px !important;
    height: 19px !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    background: currentColor !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-icon.icon-customer::before {
    content: "" !important;
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    background:
      radial-gradient(circle at 50% 30%, #0a9f67 0 7px, transparent 8px),
      radial-gradient(ellipse at 50% 83%, #0a9f67 0 15px, transparent 16px) !important;
    font-size: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap.icon-user::before,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap.icon-phone::before,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap.icon-password::before {
    content: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-phone::before {
    content: "☎" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-password::before,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-shield::before {
    content: "🛡" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-hero-icon.icon-shield::before {
    content: "" !important;
    width: 34px !important;
    height: 38px !important;
    display: block !important;
    background: currentColor !important;
    clip-path: polygon(50% 0, 86% 14%, 78% 60%, 50% 100%, 22% 60%, 14% 14%) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-hero-icon.icon-shield::after {
    content: "✓" !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    transform: translateY(-1px) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-cashier::before {
    content: "$" !important;
    color: #0a9f67 !important;
    font-family: inherit !important;
    font-size: 31px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-staff::before {
    content: "▤" !important;
    color: #0a9f67 !important;
    font-family: inherit !important;
    font-size: 31px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-manager::before {
    content: "♛" !important;
    color: #0a9f67 !important;
    font-family: inherit !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-money::before {
    content: "$" !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-doc::before {
    content: "▤" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-gear::before {
    content: "⚙" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .icon-review::before {
    content: "🔍" !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-step-title {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-card,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card {
    border: 1px solid #dde6f0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-card {
    padding: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-field {
    display: grid !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-field > span,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-section-label {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-section-label {
    margin: 0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-section-label small {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap::before {
    content: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap input::placeholder {
    color: #667085 !important;
    opacity: .9 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap > i {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: #0ea56b !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap > i::before {
    content: "✓" !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-input-wrap input:placeholder-shown ~ i {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-eye {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 28px !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    background: transparent !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-eye::before {
    content: "⊙" !important;
    color: #475569 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-rules {
    margin: -4px 0 18px !important;
    display: grid !important;
    gap: 7px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] #newUserPasswordStrength,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .password-strength-preview {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .password-rule-grid span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .password-rule-grid span::before {
    content: "✓" !important;
    width: 15px !important;
    height: 15px !important;
    margin-right: 8px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .password-rule-grid span.is-pass::before {
    background: #0ea56b !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-next,
  #dashboardMoreDestinationSheet[data-destination-target="create"] #saveManagedUserButton {
    width: 100% !important;
    min-height: 58px !important;
    margin-top: auto !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #10bf7a, #008d57) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 30px rgba(0, 154, 97, .24) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-role-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card {
    position: relative !important;
    min-height: 104px !important;
    padding: 14px 48px 14px 86px !important;
    display: grid !important;
    align-content: center !important;
    text-align: left !important;
    color: #0f172a !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card.active {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, #f7fffb, #effbf5) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card .preset-icon {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 52px !important;
    height: 52px !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    color: #0a9f67 !important;
    background: #e4fbef !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card strong {
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card small {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card i {
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    width: 24px !important;
    height: 24px !important;
    display: none !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #0ea56b !important;
    color: #fff !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-preset-card.active i {
    display: grid !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-all-permission {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card {
    min-height: 124px !important;
    padding: 12px 6px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card.user-create-all-permission {
    display: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-icon {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    color: #0a9f67 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .permission-icon::before {
    font-size: 28px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card strong {
    min-height: 28px !important;
    color: #0f172a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-switch {
    position: relative !important;
    width: 36px !important;
    height: 20px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-switch::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .18) !important;
    transition: transform .2s ease !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card input:checked ~ .user-create-switch {
    background: #0dbd77 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-permission-card input:checked ~ .user-create-switch::before {
    transform: translateX(16px) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-summary-card {
    display: grid !important;
    gap: 12px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card div,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-summary-card div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card strong,
  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-summary-card strong {
    color: #0f172a !important;
    text-align: right !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card hr {
    width: 100% !important;
    margin: 2px 0 !important;
    border: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card p {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card ul {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card li::before {
    content: "●" !important;
    margin-right: 8px !important;
    color: #0ea56b !important;
    font-size: 18px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card li.is-off {
    opacity: .55 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card li strong {
    margin-left: auto !important;
    color: #0ea56b !important;
    font-size: 13px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-review-card li.is-off strong {
    color: #94a3b8 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-edit {
    width: 100% !important;
    min-height: 52px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-success-view {
    justify-content: center !important;
    text-align: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-success-mark {
    width: 120px !important;
    height: 120px !important;
    margin: 18px auto 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #12c77d, #008d57) !important;
    box-shadow: 0 18px 40px rgba(0, 154, 97, .25) !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-success-mark::before {
    content: "✓" !important;
    color: #fff !important;
    font-size: 72px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-success-title {
    margin: 4px 0 0 !important;
    color: #0f172a !important;
    font-size: 26px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-success-copy {
    margin: -8px 0 6px !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-sent-card {
    display: grid !important;
    grid-template-columns: 58px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 18px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f0fff8, #eaf7f2) !important;
    color: #009a61 !important;
    text-align: left !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-sent-card > span {
    grid-row: span 2 !important;
    width: 50px !important;
    height: 50px !important;
    display: grid !important;
    place-items: center !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-sent-card > span::before {
    content: "✈" !important;
    font-size: 44px !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-sent-card strong {
    font-size: 16px !important;
    font-weight: 950 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] .user-create-sent-card small {
    color: #009a61 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  #dashboardMoreDestinationSheet[data-destination-target="create"] #userManageError {
    position: sticky !important;
    bottom: 76px !important;
    z-index: 4 !important;
    margin: 10px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 12px !important;
    background: #fff1f2 !important;
    color: #be123c !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    text-align: center !important;
  }
}

/* v1.1.0-mobile-dashboard-premium143-final: keep newest dashboard task/customer sizing last in the cascade. */

@media (max-width: 768px) {
  body.loan-mobile-flow-open {
    overflow: hidden !important;
  }

  #loanFormModal.loan-mobile-source-hidden {
    position: fixed !important;
    inset: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .loan-mobile-flow {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background:
      radial-gradient(circle at 12% 0%, rgba(16, 185, 129, .08), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #f7fafc 54%, #eef4f7 100%);
    color: #101b31;
    font-family: "IBM Plex Sans Thai", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-overflow-scrolling: touch;
  }

  .loan-mobile-flow.hidden {
    display: none !important;
  }

  .loan-mobile-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    align-items: center;
    min-height: 112px;
    padding: max(18px, env(safe-area-inset-top)) 24px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
    backdrop-filter: blur(18px);
  }

  .loan-mobile-header h1,
  .loan-mobile-header p {
    margin: 0;
    text-align: center;
    letter-spacing: 0;
  }

  .loan-mobile-header h1 {
    font-size: clamp(28px, 8.2vw, 42px);
    line-height: 1.08;
    font-weight: 800;
    color: #111b31;
  }

  .loan-mobile-header p {
    margin-top: 4px;
    font-size: clamp(16px, 4.3vw, 23px);
    line-height: 1.28;
    font-weight: 600;
    color: #66748a;
  }

  .loan-mobile-back {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #059669;
  }

  .loan-mobile-back svg,
  .loan-mobile-footer svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .loan-mobile-stepper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr 44px;
    align-items: start;
    gap: 7px;
    padding: 12px 30px 24px;
    background: rgba(255,255,255,.84);
  }

  .loan-mobile-stepper i {
    width: 100%;
    height: 4px;
    margin-top: 20px;
    border-radius: 999px;
    background: #e5e7eb;
  }

  .loan-mobile-stepper i.is-done {
    background: #059669;
  }

  .loan-mobile-step {
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #69758a;
    font: inherit;
  }

  .loan-mobile-step span {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    background: #e5e7eb;
    color: #606b7c;
    font-size: 22px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }

  .loan-mobile-step small {
    display: block;
    width: 72px;
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    white-space: normal;
    color: #64748b;
  }

  .loan-mobile-step.is-active span,
  .loan-mobile-step.is-done span {
    background: linear-gradient(135deg, #16c77d, #018653);
    color: #fff;
    box-shadow: 0 10px 24px rgba(5, 150, 105, .22);
  }

  .loan-mobile-step.is-active small,
  .loan-mobile-step.is-done small {
    color: #059669;
  }

  .loan-mobile-body {
    flex: 1;
    padding: 0 22px 122px;
  }

  .loan-mobile-card,
  .loan-mobile-review,
  .loan-mobile-ok-banner,
  .loan-mobile-ready,
  .loan-mobile-total-card {
    border: 1px solid #dfe7f0;
    border-radius: 22px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
  }

  .loan-mobile-card {
    padding: 30px 28px 28px;
  }

  .loan-mobile-card-head {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 22px;
  }

  .loan-mobile-head-icon {
    width: 92px;
    height: 92px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #ddf8ea;
    color: #059669;
  }

  .loan-mobile-head-icon svg,
  .loan-mobile-review-title span svg,
  .loan-mobile-ready svg,
  .loan-mobile-ok-banner svg,
  .loan-mobile-total-card svg,
  .loan-mobile-upload-preview svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .loan-mobile-card-head h2,
  .loan-mobile-card-head p {
    margin: 0;
    letter-spacing: 0;
  }

  .loan-mobile-card-head h2 {
    font-size: clamp(30px, 7.6vw, 42px);
    line-height: 1.12;
    font-weight: 800;
  }

  .loan-mobile-card-head p {
    margin-top: 8px;
    font-size: clamp(18px, 4.5vw, 25px);
    line-height: 1.32;
    font-weight: 600;
    color: #66748a;
  }

  .loan-mobile-divider {
    height: 1px;
    margin: 28px 0;
    background: #dbe3ed;
  }

  .loan-mobile-grid {
    display: grid;
    gap: 18px;
  }

  .loan-mobile-grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .loan-mobile-field {
    display: block;
    margin: 0 0 24px;
  }

  .loan-mobile-field > span {
    display: block;
    margin-bottom: 10px;
    color: #111b31;
    font-size: clamp(18px, 4.7vw, 24px);
    line-height: 1.28;
    font-weight: 700;
  }

  .loan-mobile-field b {
    color: #059669;
  }

  .loan-mobile-control {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    border: 2px solid #d6deea;
    border-radius: 16px;
    background: #fff;
  }

  .loan-mobile-control:focus-within {
    border-color: #059669;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, .09);
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101b31;
    font: 600 clamp(20px, 5.4vw, 28px)/1.2 "IBM Plex Sans Thai", sans-serif;
  }

  .loan-mobile-control textarea {
    min-height: 120px;
    padding: 18px 0;
    resize: vertical;
  }

  .loan-mobile-control i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #059669;
  }

  .loan-mobile-control i svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2.3;
    fill: none;
  }

  .loan-mobile-control em {
    flex: 0 0 auto;
    color: #66748a;
    font-style: normal;
    font-size: 20px;
    font-weight: 700;
  }

  .loan-mobile-upload {
    display: grid;
    place-items: center;
    min-height: 224px;
    margin-bottom: 24px;
    padding: 24px;
    border: 2px dashed #9edbc3;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(236, 253, 245, .55), rgba(255,255,255,.96));
    text-align: center;
    color: #66748a;
  }

  .loan-mobile-upload-preview {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 12px;
    background: #ddf8ea;
    color: #059669;
  }

  .loan-mobile-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .loan-mobile-upload strong {
    color: #111b31;
    font-size: 22px;
    font-weight: 800;
  }

  .loan-mobile-upload p,
  .loan-mobile-upload span,
  .loan-mobile-help {
    margin: 6px 0 0;
    color: #66748a;
    font-size: 17px;
    font-weight: 600;
  }

  .loan-mobile-upload span {
    padding: 7px 14px;
    border-radius: 999px;
    background: #e8f8ef;
    color: #059669;
  }

  .loan-mobile-error {
    margin: 0 22px 18px;
    padding: 16px 18px;
    border: 1px solid #fecaca;
    border-radius: 16px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
  }

  .loan-mobile-ok-banner,
  .loan-mobile-ready {
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    padding: 20px 24px;
    border-color: #a7e7cb;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    color: #059669;
  }

  .loan-mobile-ok-banner strong,
  .loan-mobile-ready strong {
    display: block;
    color: #059669;
    font-size: 26px;
    font-weight: 800;
  }

  .loan-mobile-ok-banner small,
  .loan-mobile-ready small {
    color: #66748a;
    font-size: 18px;
    font-weight: 600;
  }

  .loan-mobile-review {
    margin-bottom: 22px;
    padding: 24px;
  }

  .loan-mobile-review-title {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
  }

  .loan-mobile-review-title span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ddf8ea;
    color: #059669;
  }

  .loan-mobile-review-title h3 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
  }

  .loan-mobile-review-title button {
    min-height: 42px;
    border: 1px solid #059669;
    border-radius: 13px;
    padding: 0 16px;
    background: #fff;
    color: #059669;
    font: 800 18px "IBM Plex Sans Thai", sans-serif;
  }

  .loan-mobile-review-row {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid #e4eaf2;
  }

  .loan-mobile-review-row span {
    color: #66748a;
    font-size: 18px;
    font-weight: 700;
  }

  .loan-mobile-review-row strong {
    text-align: right;
    color: #111b31;
    font-size: 18px;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .loan-mobile-info,
  .loan-mobile-note {
    padding: 17px 20px;
    border: 1px solid #b8e8d3;
    border-radius: 16px;
    background: #f0fdf4;
    color: #64748b;
    font-size: 18px;
    font-weight: 600;
  }

  .loan-mobile-instant {
    margin-top: 12px;
    padding: 20px;
    border: 1px solid #a7e7cb;
    border-radius: 16px;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
  }

  .loan-mobile-instant span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #059669;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
  }

  .loan-mobile-instant strong {
    display: block;
    color: #059669;
    font-size: clamp(22px, 5.8vw, 32px);
    line-height: 1.25;
    font-weight: 800;
  }

  .loan-mobile-instant p,
  .loan-mobile-note span {
    display: block;
    margin: 8px 0 0;
    color: #66748a;
    font-size: 18px;
    font-weight: 600;
  }

  .loan-mobile-note {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    margin-top: 18px;
    border-color: #fed7aa;
    background: #fffbeb;
  }

  .loan-mobile-note strong {
    color: #ea580c;
    font-size: 20px;
    font-weight: 800;
  }

  .loan-mobile-total-card {
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-color: #a7e7cb;
    background: #f0fdf4;
    color: #059669;
  }

  .loan-mobile-total-card span {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
  }

  .loan-mobile-total-card strong {
    color: #111b31;
    font-size: 25px;
    font-weight: 800;
  }

  .loan-mobile-total-card p {
    margin: 4px 0 0;
    color: #059669;
    font-size: 22px;
    font-weight: 800;
  }

  .loan-mobile-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 20px;
    padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid #dde5ef;
    background: rgba(255,255,255,.96);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
  }

  .loan-mobile-primary,
  .loan-mobile-secondary {
    min-width: 0;
    min-height: 78px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font: 800 clamp(22px, 5.6vw, 30px)/1.1 "IBM Plex Sans Thai", sans-serif;
  }

  .loan-mobile-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #16c77d, #018653);
    box-shadow: 0 14px 26px rgba(5, 150, 105, .18);
  }

  .loan-mobile-secondary {
    border: 2px solid #059669;
    color: #059669;
    background: #fff;
  }
}

@media (max-width: 430px) {
  .loan-mobile-header {
    grid-template-columns: 44px 1fr 44px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .loan-mobile-stepper {
    grid-template-columns: 38px 1fr 38px 1fr 38px 1fr 38px 1fr 38px 1fr 38px;
    gap: 4px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .loan-mobile-step span {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .loan-mobile-step small {
    width: 58px;
    font-size: 12px;
  }

  .loan-mobile-stepper i {
    margin-top: 17px;
  }

  .loan-mobile-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .loan-mobile-card {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .loan-mobile-card-head {
    grid-template-columns: 76px 1fr;
    gap: 16px;
  }

  .loan-mobile-head-icon {
    width: 76px;
    height: 76px;
  }

  .loan-mobile-head-icon svg {
    width: 40px;
    height: 40px;
  }

  .loan-mobile-grid.two {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .loan-mobile-control {
    min-height: 68px;
    border-radius: 14px;
    padding-inline: 16px;
  }

  .loan-mobile-footer {
    gap: 12px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .loan-mobile-primary,
  .loan-mobile-secondary {
    min-height: 68px;
  }
}
@media (max-width: 767px) {
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-card {
    min-height: 0 !important;
    padding: 0 14px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-followup-row {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    grid-template-columns: 46px minmax(0, 1fr) auto 14px !important;
    gap: 10px !important;
    padding: 7px 0 !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy strong {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .followup-copy small,
  html body[data-page="dashboard"]:not(.auth-locked) .followup-meta {
    font-size: 12px !important;
    line-height: 15px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-list {
    grid-template-columns: repeat(4, minmax(76px, 1fr)) !important;
    gap: 7px !important;
    overflow-x: auto !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-card,
  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main {
    min-height: 116px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-main {
    padding: 11px 6px 34px !important;
  }

  html body[data-page="dashboard"]:not(.auth-locked) .dashboard-mobile-customer-avatar {
    width: 39px !important;
    height: 39px !important;
    margin-bottom: 5px !important;
  }
}

/* premium143: compact real-server 6-step loan customer flow. */
@media (max-width: 768px) {
  .loan-mobile-flow {
    font-family: "Krungthai Fast", "Sarabun", "TH Sarabun PSK", "IBM Plex Sans Thai", system-ui, -apple-system, sans-serif !important;
    background:
      radial-gradient(circle at 11% -2%, rgba(16, 185, 129, .055), transparent 25%),
      linear-gradient(180deg, #fff 0%, #f8fbfd 58%, #f1f6f8 100%) !important;
  }

  .loan-mobile-header {
    grid-template-columns: 30px 1fr 30px !important;
    min-height: 64px !important;
    padding: max(8px, env(safe-area-inset-top)) 16px 2px !important;
    box-shadow: none !important;
  }

  .loan-mobile-header h1 {
    font-size: clamp(22px, 5.8vw, 29px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .loan-mobile-header p {
    margin-top: 1px !important;
    font-size: clamp(13px, 3.25vw, 16px) !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    color: #667085 !important;
  }

  .loan-mobile-back {
    width: 28px !important;
    height: 28px !important;
  }

  .loan-mobile-back svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.7 !important;
  }

  .loan-mobile-stepper {
    grid-template-columns: 28px minmax(8px, 1fr) 28px minmax(8px, 1fr) 28px minmax(8px, 1fr) 28px minmax(8px, 1fr) 28px minmax(8px, 1fr) 28px !important;
    gap: 4px !important;
    padding: 5px 16px 12px !important;
    background: rgba(255,255,255,.9) !important;
  }

  .loan-mobile-stepper i {
    height: 2px !important;
    margin-top: 13px !important;
    background: #e6e8ec !important;
  }

  .loan-mobile-step span {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 5px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .loan-mobile-step small {
    width: 50px !important;
    font-size: 9.5px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .loan-mobile-body {
    padding: 0 16px 88px !important;
  }

  .loan-mobile-card,
  .loan-mobile-review,
  .loan-mobile-ok-banner,
  .loan-mobile-ready,
    .loan-mobile-total-card {
    border-radius: 15px !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, .06) !important;
  }

  .loan-mobile-card {
    padding: 15px 15px 14px !important;
  }

  .loan-mobile-card-head {
    grid-template-columns: 54px 1fr !important;
    gap: 12px !important;
  }

  .loan-mobile-head-icon {
    width: 54px !important;
    height: 54px !important;
    background: #e1f7ec !important;
  }

  .loan-mobile-head-icon svg,
  .loan-mobile-upload-preview svg {
    width: 31px !important;
    height: 31px !important;
    stroke-width: 2.1 !important;
  }

  .loan-mobile-card-head h2 {
    font-size: clamp(22px, 5.45vw, 28px) !important;
    line-height: 1.02 !important;
    font-weight: 700 !important;
  }

  .loan-mobile-card-head p {
    margin-top: 2px !important;
    font-size: clamp(13px, 3.5vw, 17px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
  }

  .loan-mobile-divider {
    margin: 13px 0 !important;
  }

  .loan-mobile-grid {
    gap: 12px !important;
  }

  .loan-mobile-grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .loan-mobile-field {
    margin-bottom: 12px !important;
  }

  .loan-mobile-field > span {
    margin-bottom: 6px !important;
    font-size: clamp(14px, 3.55vw, 17px) !important;
    line-height: 1.12 !important;
    font-weight: 600 !important;
  }

  .loan-mobile-control {
    min-height: 46px !important;
    gap: 8px !important;
    padding: 0 11px !important;
    border-width: 1px !important;
    border-radius: 11px !important;
  }

  .loan-mobile-control:focus-within {
    border-color: #079b69 !important;
    box-shadow: 0 0 0 1px rgba(5, 150, 105, .18) !important;
    outline: none !important;
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    min-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font: 500 clamp(14px, 3.6vw, 17px)/1.15 "Krungthai Fast", "Sarabun", "TH Sarabun PSK", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-control input[type="date"] {
    font-size: clamp(12px, 3.1vw, 15px) !important;
    letter-spacing: 0 !important;
  }

  .loan-mobile-control input[type="date"]::-webkit-calendar-picker-indicator {
    width: 15px !important;
    height: 15px !important;
    margin-left: 2px !important;
    opacity: .75 !important;
  }

  .loan-mobile-control i {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  .loan-mobile-control i svg {
    width: 19px !important;
    height: 19px !important;
  }

  .loan-mobile-control em {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .loan-mobile-control textarea {
    min-height: 72px !important;
    padding: 10px 0 !important;
  }

  .loan-mobile-upload {
    min-height: 132px !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    border-width: 1px !important;
    border-radius: 13px !important;
  }

  .loan-mobile-upload-preview {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 6px !important;
  }

  .loan-mobile-upload strong {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .loan-mobile-upload p,
  .loan-mobile-upload span,
  .loan-mobile-help {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  .loan-mobile-upload span {
    padding: 5px 11px !important;
  }

  .loan-mobile-error {
    margin: 0 16px 10px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  .loan-mobile-ok-banner,
  .loan-mobile-ready {
    grid-template-columns: 50px 1fr !important;
    gap: 13px !important;
    margin-bottom: 16px !important;
    padding: 15px 17px !important;
  }

  .loan-mobile-ok-banner svg,
  .loan-mobile-ready svg,
  .loan-mobile-total-card svg,
  .loan-mobile-review-title span svg {
    width: 32px !important;
    height: 32px !important;
  }

  .loan-mobile-ok-banner strong,
  .loan-mobile-ready strong {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .loan-mobile-ok-banner small,
  .loan-mobile-ready small {
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
  }

  .loan-mobile-review {
    margin-bottom: 16px !important;
    padding: 18px !important;
  }

  .loan-mobile-review-title {
    grid-template-columns: 42px 1fr auto !important;
    gap: 11px !important;
    margin-bottom: 10px !important;
  }

  .loan-mobile-review-title span {
    width: 42px !important;
    height: 42px !important;
  }

  .loan-mobile-review-title h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .loan-mobile-review-title button {
    min-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    font: 700 15px "Krungthai Fast", "Sarabun", "TH Sarabun PSK", sans-serif !important;
  }

  .loan-mobile-review-row {
    grid-template-columns: 43% 1fr !important;
    padding: 9px 0 !important;
  }

  .loan-mobile-review-row span,
  .loan-mobile-review-row strong,
  .loan-mobile-info,
  .loan-mobile-note,
  .loan-mobile-instant p,
  .loan-mobile-note span {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .loan-mobile-instant,
  .loan-mobile-info,
  .loan-mobile-note {
    padding: 14px 16px !important;
    border-radius: 13px !important;
  }

  .loan-mobile-instant strong {
    font-size: clamp(19px, 5vw, 25px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .loan-mobile-instant span {
    font-size: 13px !important;
    padding: 3px 10px !important;
  }

  .loan-mobile-note {
    grid-template-columns: 70px 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .loan-mobile-note strong {
    font-size: 17px !important;
  }

  .loan-mobile-total-card {
    grid-template-columns: 62px 1fr !important;
    gap: 14px !important;
    padding: 17px !important;
  }

  .loan-mobile-total-card span {
    width: 54px !important;
    height: 54px !important;
  }

  .loan-mobile-total-card strong {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }

  .loan-mobile-total-card p {
    font-size: 18px !important;
  }

  .loan-mobile-footer {
    gap: 10px !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -7px 18px rgba(15, 23, 42, .06) !important;
  }

  .loan-mobile-primary,
  .loan-mobile-secondary {
    min-height: 48px !important;
    border-radius: 11px !important;
    gap: 7px !important;
    white-space: nowrap !important;
    font: 700 clamp(15px, 4vw, 19px)/1.05 "Krungthai Fast", "Sarabun", "TH Sarabun PSK", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-secondary {
    border-width: 1.5px !important;
  }

  .loan-mobile-footer svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.35 !important;
  }
}

@media (max-width: 430px) {
  .loan-mobile-header {
    grid-template-columns: 28px 1fr 28px !important;
    min-height: 60px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .loan-mobile-header h1 {
    font-size: 24px !important;
  }

  .loan-mobile-header p {
    font-size: 13px !important;
  }

  .loan-mobile-back {
    width: 27px !important;
    height: 27px !important;
  }

  .loan-mobile-stepper {
    grid-template-columns: 26px minmax(7px, 1fr) 26px minmax(7px, 1fr) 26px minmax(7px, 1fr) 26px minmax(7px, 1fr) 26px minmax(7px, 1fr) 26px !important;
    gap: 3px !important;
    padding: 4px 10px 11px !important;
  }

  .loan-mobile-stepper i {
    margin-top: 12px !important;
  }

  .loan-mobile-step span {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
  }

  .loan-mobile-step small {
    width: 45px !important;
    font-size: 9px !important;
  }

  .loan-mobile-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 82px !important;
  }

  .loan-mobile-card {
    padding: 14px 14px !important;
  }

  .loan-mobile-card-head {
    grid-template-columns: 50px 1fr !important;
    gap: 10px !important;
  }

  .loan-mobile-head-icon {
    width: 50px !important;
    height: 50px !important;
  }

  .loan-mobile-head-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  .loan-mobile-card-head h2 {
    font-size: 23px !important;
  }

  .loan-mobile-card-head p {
    font-size: 13.5px !important;
  }

  .loan-mobile-grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .loan-mobile-control {
    min-height: 45px !important;
    padding-inline: 10px !important;
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    font-size: 14px !important;
  }

  .loan-mobile-control input[type="date"] {
    font-size: 11.5px !important;
  }

  .loan-mobile-footer {
    gap: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .loan-mobile-primary,
  .loan-mobile-secondary {
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* premium143-last: final cascade for 6-step mobile loan flow. */
@media (max-width: 768px) {
  .loan-mobile-header { grid-template-columns: 44px minmax(0,1fr) auto !important; align-items: start !important; min-height: 74px !important; padding: 18px 22px 8px !important; }
  .loan-mobile-header h1 { font-size: clamp(29px,8.6vw,42px) !important; line-height: .96 !important; font-weight: 800 !important; text-align: left !important; }
  .loan-mobile-header p { font-size: clamp(16px,4.4vw,22px) !important; line-height: 1.05 !important; font-weight: 700 !important; text-align: left !important; }
  .loan-mobile-back { width: 34px !important; height: 34px !important; border: 0 !important; background: transparent !important; color: #009b62 !important; box-shadow: none !important; }
  .loan-mobile-header-draft { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-top: 5px !important; border: 0 !important; background: transparent !important; color: #009b62 !important; font: 800 17px/1 "Krungthai Fast","Sarabun","TH Sarabun PSK",sans-serif !important; white-space: nowrap !important; }
  .loan-mobile-stepper { grid-template-columns: 38px minmax(18px,1fr) 38px minmax(18px,1fr) 38px minmax(18px,1fr) 38px minmax(18px,1fr) 38px minmax(18px,1fr) 38px !important; gap: 5px !important; padding: 12px 26px 18px !important; overflow: visible !important; }
  .loan-mobile-step span { width: 38px !important; height: 38px !important; font-size: 21px !important; }
  .loan-mobile-step small { width: 64px !important; font-size: 13px !important; line-height: 1.1 !important; font-weight: 800 !important; }
  .loan-mobile-stepper i { margin-top: 18px !important; height: 2px !important; }
  .loan-mobile-meta-bar { display: flex !important; justify-content: space-between !important; gap: 10px !important; margin: 12px 24px !important; padding: 10px 13px !important; border: 1px solid #bfe9d8 !important; border-radius: 8px !important; background: linear-gradient(135deg,#eefcf6,#f7fffb) !important; }
  .loan-mobile-meta-bar span { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 700 !important; }
  .loan-mobile-meta-bar svg, .loan-mobile-tip svg { width: 20px !important; height: 20px !important; color: #009b62 !important; stroke: currentColor !important; fill: none !important; }
  .loan-mobile-body { padding: 0 24px 96px !important; background: #f6f9fc !important; }
  .loan-mobile-card { padding: 30px 28px 24px !important; border-radius: 20px !important; }
  .loan-mobile-card-head { grid-template-columns: 76px minmax(0,1fr) !important; gap: 18px !important; }
  .loan-mobile-head-icon { width: 76px !important; height: 76px !important; }
  .loan-mobile-head-icon svg { width: 44px !important; height: 44px !important; }
  .loan-mobile-card-head h2 { font-size: clamp(31px,8.4vw,42px) !important; line-height: 1 !important; font-weight: 800 !important; }
  .loan-mobile-card-head p { font-size: clamp(17px,4.6vw,23px) !important; line-height: 1.15 !important; font-weight: 700 !important; }
  .loan-mobile-field > span { font-size: 19px !important; line-height: 1.12 !important; font-weight: 800 !important; }
  .loan-mobile-control { min-height: 58px !important; padding: 0 15px !important; gap: 12px !important; border-radius: 13px !important; }
  .loan-mobile-control input, .loan-mobile-control select, .loan-mobile-control textarea { font: 700 20px/1.2 "Krungthai Fast","Sarabun","TH Sarabun PSK",sans-serif !important; }
  .loan-mobile-control i svg { width: 27px !important; height: 27px !important; }
  .loan-mobile-counter, .loan-mobile-control em { color: #69768a !important; font: 700 15px/1 "Krungthai Fast","Sarabun",sans-serif !important; white-space: nowrap !important; }
  .loan-mobile-tip { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 12px 0 16px !important; min-height: 42px !important; padding: 10px 13px !important; border: 1px solid #bfe9d8 !important; border-radius: 8px !important; background: linear-gradient(135deg,#eefcf6,#f7fffb) !important; color: #657184 !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; }
}

@media (max-width: 430px) {
  .loan-mobile-header { grid-template-columns: 32px minmax(0,1fr) auto !important; padding: 14px 16px 7px !important; }
  .loan-mobile-header h1 { font-size: 31px !important; }
  .loan-mobile-header p { font-size: 17px !important; }
  .loan-mobile-header-draft { font-size: 13px !important; }
  .loan-mobile-stepper { grid-template-columns: 32px minmax(10px,1fr) 32px minmax(10px,1fr) 32px minmax(10px,1fr) 32px minmax(10px,1fr) 32px minmax(10px,1fr) 32px !important; padding: 10px 12px 16px !important; }
  .loan-mobile-step span { width: 32px !important; height: 32px !important; font-size: 17px !important; }
  .loan-mobile-step small { width: 49px !important; font-size: 10.5px !important; }
  .loan-mobile-meta-bar { margin: 10px 12px !important; padding: 8px 9px !important; }
  .loan-mobile-meta-bar span { gap: 4px !important; font-size: 11.5px !important; }
  .loan-mobile-body { padding: 0 12px 88px !important; }
  .loan-mobile-card { padding: 22px 15px 18px !important; border-radius: 16px !important; }
  .loan-mobile-card-head { grid-template-columns: 56px minmax(0,1fr) !important; gap: 12px !important; }
  .loan-mobile-head-icon { width: 56px !important; height: 56px !important; }
  .loan-mobile-head-icon svg { width: 34px !important; height: 34px !important; }
  .loan-mobile-card-head h2 { font-size: 30px !important; }
  .loan-mobile-card-head p { font-size: 17px !important; }
  .loan-mobile-field > span { font-size: 16px !important; }
  .loan-mobile-control { min-height: 50px !important; padding: 0 11px !important; gap: 8px !important; border-radius: 11px !important; }
  .loan-mobile-control input, .loan-mobile-control select, .loan-mobile-control textarea { font-size: 15.5px !important; }
  .loan-mobile-control i svg { width: 22px !important; height: 22px !important; }
  .loan-mobile-counter, .loan-mobile-control em { font-size: 12.5px !important; }
}

/* mobile-loan-polish-20260512: compact 6-step loan flow only, desktop untouched. */
@media (max-width: 768px) {
  .loan-mobile-flow {
    background: #f5f8fb !important;
    font-family: "Sarabun", "IBM Plex Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    overflow-x: hidden !important;
  }

  .loan-mobile-header {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 62px !important;
    padding: max(8px, env(safe-area-inset-top)) 14px 6px !important;
    background: rgba(255, 255, 255, .98) !important;
    border-bottom: 0 !important;
  }

  .loan-mobile-header h1 {
    color: #101b31 !important;
    font-size: clamp(22px, 6vw, 26px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    text-align: left !important;
    word-break: keep-all !important;
  }

  .loan-mobile-header p {
    margin-top: 2px !important;
    color: #667085 !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  .loan-mobile-back {
    width: 30px !important;
    height: 30px !important;
  }

  .loan-mobile-back svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.6 !important;
  }

  .loan-mobile-header-draft {
    align-self: start !important;
    gap: 6px !important;
    margin-top: 4px !important;
    color: #009b62 !important;
    font: 800 13px/1.1 "Sarabun", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-header-draft svg {
    width: 16px !important;
    height: 16px !important;
  }

  .loan-mobile-stepper {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 7px 18px 12px !important;
    background: rgba(255, 255, 255, .98) !important;
    border-bottom: 1px solid #e5edf5 !important;
    isolation: isolate !important;
  }

  .loan-mobile-step span {
    position: relative !important;
    z-index: 2 !important;
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 5px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .loan-mobile-step {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    justify-items: center !important;
  }

  .loan-mobile-step:not(:last-of-type)::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 13px !important;
    left: calc(50% + 18px) !important;
    right: calc(-50% + 18px) !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #e6e8ec !important;
  }

  .loan-mobile-step.is-done:not(:last-of-type)::after {
    background: #009b62 !important;
  }

  .loan-mobile-step small {
    width: 48px !important;
    color: #667085 !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
  }

  .loan-mobile-step:first-of-type small {
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  .loan-mobile-step:last-of-type small {
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    position: static !important;
    left: auto !important;
  }

  .loan-mobile-stepper i {
    display: none !important;
  }

  .loan-mobile-meta-bar {
    margin: 9px 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  .loan-mobile-meta-bar span {
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  .loan-mobile-meta-bar svg,
  .loan-mobile-tip svg {
    width: 17px !important;
    height: 17px !important;
  }

  .loan-mobile-body {
    padding: 0 12px 78px !important;
    background: #f5f8fb !important;
  }

  .loan-mobile-card,
  .loan-mobile-review,
  .loan-mobile-ok-banner,
  .loan-mobile-ready,
  .loan-mobile-total-card {
    border-color: #dce6f1 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .055) !important;
  }

  .loan-mobile-card {
    padding: 15px 14px 14px !important;
  }

  .loan-mobile-card-head {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  .loan-mobile-head-icon {
    width: 50px !important;
    height: 50px !important;
  }

  .loan-mobile-head-icon svg,
  .loan-mobile-upload-preview svg {
    width: 28px !important;
    height: 28px !important;
  }

  .loan-mobile-card-head h2 {
    color: #101b31 !important;
    font-size: clamp(23px, 6.2vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
  }

  .loan-mobile-card-head p {
    margin-top: 2px !important;
    color: #667085 !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    font-weight: 650 !important;
    line-height: 1.22 !important;
  }

  .loan-mobile-divider {
    margin: 13px 0 !important;
  }

  .loan-mobile-grid {
    gap: 10px !important;
  }

  .loan-mobile-grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .loan-mobile-grid.two > *,
  .loan-mobile-field,
  .loan-mobile-control {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .loan-mobile-field {
    margin-bottom: 12px !important;
  }

  .loan-mobile-field > span {
    margin-bottom: 6px !important;
    color: #101b31 !important;
    font-size: 14.5px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .loan-mobile-control {
    min-height: 44px !important;
    gap: 8px !important;
    padding: 0 10px !important;
    border-width: 1px !important;
    border-radius: 10px !important;
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    font: 650 14.5px/1.2 "Sarabun", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-control input::placeholder,
  .loan-mobile-control textarea::placeholder {
    color: #9aa6b6 !important;
  }

  .loan-mobile-control input[type="date"] {
    font-size: 13px !important;
  }

  .loan-mobile-control input[type="number"]::-webkit-inner-spin-button,
  .loan-mobile-control input[type="number"]::-webkit-outer-spin-button {
    opacity: .45 !important;
  }

  .loan-mobile-control i {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }

  .loan-mobile-control i svg {
    width: 18px !important;
    height: 18px !important;
  }

  .loan-mobile-counter,
  .loan-mobile-control em {
    font: 750 12px/1 "Sarabun", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-control.textarea,
  .loan-mobile-control textarea {
    min-height: 84px !important;
  }

  .loan-mobile-upload {
    min-height: 122px !important;
    margin-bottom: 11px !important;
    padding: 12px !important;
    border-width: 1px !important;
    border-radius: 12px !important;
  }

  .loan-mobile-upload-preview {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 6px !important;
  }

  .loan-mobile-upload strong {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .loan-mobile-upload p,
  .loan-mobile-upload span,
  .loan-mobile-help {
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }

  .loan-mobile-upload span {
    max-width: 100% !important;
    padding: 4px 10px !important;
    overflow-wrap: anywhere !important;
  }

  .loan-mobile-upload-progress {
    width: min(180px, 72%) !important;
    height: 5px !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #dfe7ef !important;
  }

  .loan-mobile-upload-progress i {
    display: block !important;
    width: var(--upload-progress, 0%) !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #16c77d, #018653) !important;
    transition: width .22s ease !important;
  }

  .loan-mobile-upload.is-uploaded .loan-mobile-upload-progress i {
    width: var(--upload-progress, 100%) !important;
  }

  .loan-mobile-upload.is-uploading .loan-mobile-upload-status {
    color: #00875a !important;
  }

  .loan-mobile-upload-status {
    display: block !important;
    margin-top: 5px !important;
    color: #667085 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
  }

  .loan-mobile-upload.is-uploaded .loan-mobile-upload-status {
    color: #009b62 !important;
  }

  .loan-mobile-error {
    margin: 0 12px 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .loan-mobile-ok-banner,
  .loan-mobile-ready {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
  }

  .loan-mobile-ok-banner svg,
  .loan-mobile-ready svg,
  .loan-mobile-total-card svg,
  .loan-mobile-review-title span svg {
    width: 25px !important;
    height: 25px !important;
  }

  .loan-mobile-ok-banner strong,
  .loan-mobile-ready strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
  }

  .loan-mobile-ok-banner small,
  .loan-mobile-ready small {
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
  }

  .loan-mobile-review {
    margin-bottom: 14px !important;
    padding: 15px !important;
  }

  .loan-mobile-review-title {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    margin-bottom: 9px !important;
  }

  .loan-mobile-review-title span {
    width: 40px !important;
    height: 40px !important;
  }

  .loan-mobile-review-title h3 {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  .loan-mobile-review-title button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font: 800 14px/1 "Sarabun", "IBM Plex Sans Thai", sans-serif !important;
  }

  .loan-mobile-review-row {
    grid-template-columns: 40% minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px 0 !important;
  }

  .loan-mobile-review-row span,
  .loan-mobile-review-row strong {
    font-size: 13.5px !important;
    line-height: 1.28 !important;
  }

  .loan-mobile-review-row strong {
    font-weight: 800 !important;
  }

  .loan-mobile-info,
  .loan-mobile-note,
  .loan-mobile-instant p,
  .loan-mobile-note span {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .loan-mobile-instant,
  .loan-mobile-info,
  .loan-mobile-note {
    padding: 12px 13px !important;
    border-radius: 12px !important;
  }

  .loan-mobile-instant span {
    margin-bottom: 6px !important;
    padding: 3px 9px !important;
    font-size: 12px !important;
  }

  .loan-mobile-instant strong {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .loan-mobile-note {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 12px !important;
  }

  .loan-mobile-note strong {
    font-size: 14.5px !important;
  }

  .loan-mobile-total-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .loan-mobile-total-card span {
    width: 44px !important;
    height: 44px !important;
  }

  .loan-mobile-total-card strong {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .loan-mobile-total-card p {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .loan-mobile-tip {
    min-height: 36px !important;
    margin: 10px 0 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }

  .loan-mobile-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
    gap: 10px !important;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  .loan-mobile-primary,
  .loan-mobile-secondary {
    min-height: 48px !important;
    border-radius: 11px !important;
    gap: 7px !important;
    font: 800 16px/1.05 "Sarabun", "IBM Plex Sans Thai", sans-serif !important;
    white-space: nowrap !important;
  }

  .loan-mobile-secondary {
    border-width: 1.5px !important;
  }

  .loan-mobile-footer svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 430px) {
  .loan-mobile-header {
    min-height: 58px !important;
    padding: max(7px, env(safe-area-inset-top)) 12px 5px !important;
  }

  .loan-mobile-header h1 {
    font-size: 24px !important;
  }

  .loan-mobile-header p {
    font-size: 12.5px !important;
  }

  .loan-mobile-stepper {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 6px 16px 10px !important;
  }

  .loan-mobile-step span {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
  }

  .loan-mobile-step small {
    width: 43px !important;
    font-size: 8.8px !important;
  }

  .loan-mobile-step:first-of-type small {
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  .loan-mobile-step:last-of-type small {
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    position: static !important;
    left: auto !important;
  }

  .loan-mobile-stepper i {
    display: none !important;
  }

  .loan-mobile-step:not(:last-of-type)::after {
    top: 12px !important;
    left: calc(50% + 16px) !important;
    right: calc(-50% + 16px) !important;
  }

  .loan-mobile-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 74px !important;
  }

  .loan-mobile-card {
    padding: 14px 12px !important;
  }

  .loan-mobile-card-head {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .loan-mobile-head-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .loan-mobile-head-icon svg,
  .loan-mobile-upload-preview svg {
    width: 26px !important;
    height: 26px !important;
  }

  .loan-mobile-card-head h2 {
    font-size: 22px !important;
  }

  .loan-mobile-card-head p {
    font-size: 12.5px !important;
  }

  .loan-mobile-field > span {
    font-size: 14px !important;
  }

  .loan-mobile-control {
    min-height: 43px !important;
    padding: 0 9px !important;
  }

  .loan-mobile-control input,
  .loan-mobile-control select,
  .loan-mobile-control textarea {
    font-size: 14px !important;
  }

  .loan-mobile-primary,
  .loan-mobile-secondary {
    min-height: 46px !important;
    font-size: 15.5px !important;
  }
}

/* mobile-debtors-final-20260512: keep debtor card money/title overrides last. */
@media (max-width: 768px) {
  body[data-page="records"] #recordsPanel > .panel-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    position: relative !important;
  }

  body[data-page="records"] .mobile-debtor-title-actions {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body[data-page="records"] .mobile-debtor-title-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: #eafff5 !important;
    color: #008f61 !important;
  }

  body[data-page="records"] #recordSearchBox::before {
    display: none !important;
    content: none !important;
  }

  body[data-page="records"] #recordSearchBox {
    padding-left: 18px !important;
  }

  body[data-page="records"] .mobile-debtor-money {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body[data-page="records"] .mobile-debtor-money strong {
    font-family: "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
    letter-spacing: 0 !important;
  }

  body[data-page="records"] .mobile-debtor-collapse > summary {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "person" "money" "due" !important;
    overflow: visible !important;
  }
}

@media (max-width: 430px) {
  body[data-page="records"] .mobile-debtor-money {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-page="records"] .mobile-debtor-collapse > summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* mobile-debtors-reference-20260512: final visual match for the debtor hub. */
body[data-page="records"] #recordsPanel {
  width: 100% !important;
  min-height: calc(100dvh - 76px - env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 26px 28px calc(122px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-page="records"] #recordsPanel > .panel-title {
  display: grid !important;
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 124px !important;
  margin: 0 0 6px !important;
  padding: 0 108px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="records"] #recordsPanel > .panel-title h2 {
  margin: 0 !important;
  color: #101b31 !important;
  font: 900 48px/.94 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  letter-spacing: 0 !important;
}

body[data-page="records"] #recordsHint {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 10px 0 0 !important;
  color: #687386 !important;
  font: 900 26px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
}

body[data-page="records"] #recordsPanel > .panel-title::before,
body[data-page="records"] #recordsPanel > .panel-title::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  z-index: 18 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 18px !important;
  background-color: #eafff5 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 25px 25px !important;
}

body[data-page="records"] #recordsPanel > .panel-title::before {
  right: 58px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m20 20-4.25-4.25M10.75 18a7.25 7.25 0 1 1 0-14.5 7.25 7.25 0 0 1 0 14.5Z' stroke='%230f1b31' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body[data-page="records"] #recordsPanel > .panel-title::after {
  right: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5h16l-6.25 7.25v4.75l-3.5 1.75v-6.5L4 5.5Z' stroke='%230f1b31' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body[data-page="records"] .mobile-debtor-title-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 4px !important;
  right: 0 !important;
  z-index: 25 !important;
  width: 96px !important;
  height: 46px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  pointer-events: auto !important;
}

body[data-page="records"] .mobile-debtor-title-button {
  display: inline-grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #eafff5 !important;
  color: #0a9366 !important;
  box-shadow: none !important;
}

body[data-page="records"] .mobile-debtor-title-button svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  stroke: currentColor !important;
}

body[data-page="records"] #recordSearchBox {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 0 23px !important;
  padding: 0 22px 0 76px !important;
  border: 1px solid #d8e2ee !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-page="records"] #recordSearchBox::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  transform: translateY(-50%) !important;
  color: #516176 !important;
  background: currentColor !important;
  -webkit-mask: radial-gradient(circle at 42% 42%, transparent 0 38%, #000 40% 55%, transparent 57%) 0 0/100% 100%, linear-gradient(45deg, transparent 0 58%, #000 59% 72%, transparent 73%) 0 0/100% 100% !important;
  mask: radial-gradient(circle at 42% 42%, transparent 0 38%, #000 40% 55%, transparent 57%) 0 0/100% 100%, linear-gradient(45deg, transparent 0 58%, #000 59% 72%, transparent 73%) 0 0/100% 100% !important;
}

body[data-page="records"] #recordSearch {
  height: 62px !important;
  color: #111c31 !important;
  font: 800 18px/1.2 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
}

body[data-page="records"] #recordSearch::placeholder {
  color: #667286 !important;
  opacity: 1 !important;
}

body[data-page="records"] .mobile-debtor-screen {
  display: grid !important;
  gap: 18px !important;
  min-height: 0 !important;
}

body[data-page="records"] .mobile-debtor-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
}

body[data-page="records"] .mobile-debtor-tabs button {
  min-height: 48px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #657184 !important;
  font: 900 17px/1.1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  text-align: center !important;
  box-shadow: none !important;
}

body[data-page="records"] .mobile-debtor-tabs button strong {
  font-size: 17px !important;
  color: inherit !important;
}

body[data-page="records"] .mobile-debtor-tabs button.is-danger strong {
  color: #f0202f !important;
}

body[data-page="records"] .mobile-debtor-tabs button.is-warning strong {
  color: #f47a00 !important;
}

body[data-page="records"] .mobile-debtor-tabs button.is-active {
  border-bottom-color: #009b62 !important;
  color: #009b62 !important;
}

body[data-page="records"] .mobile-debtor-list {
  display: grid !important;
  gap: 14px !important;
  padding: 0 0 16px !important;
}

body[data-page="records"] .mobile-debtor-collapse {
  border: 1px solid #e2eaf3 !important;
  border-radius: 19px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(15, 27, 49, .04) !important;
  overflow: visible !important;
}

body[data-page="records"] .mobile-debtor-collapse > summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px 22px !important;
  grid-template-areas: "person money arrow" "due due due" !important;
  gap: 15px 10px !important;
  min-height: 122px !important;
  padding: 21px 18px 18px !important;
  list-style: none !important;
  cursor: pointer !important;
}

body[data-page="records"] .mobile-debtor-person {
  grid-area: person !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  min-width: 0 !important;
}

body[data-page="records"] .mobile-debtor-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 30% 20%, #f2fff9, #ddf8eb) !important;
  color: #009b62 !important;
  font: 900 23px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
}

body[data-page="records"] .mobile-debtor-name strong {
  color: #111c31 !important;
  font: 900 20px/1.15 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
}

body[data-page="records"] .mobile-debtor-name small {
  margin-top: 6px !important;
  color: #526176 !important;
  font: 800 15px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
}

body[data-page="records"] .mobile-debtor-money {
  grid-area: money !important;
  display: grid !important;
  justify-items: end !important;
  align-content: center !important;
  gap: 8px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  padding: 0 24px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: right !important;
}

body[data-page="records"] .mobile-debtor-money small {
  color: currentColor !important;
  font: 900 15px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  white-space: nowrap !important;
}

body[data-page="records"] .mobile-debtor-money strong {
  color: currentColor !important;
  font: 900 20px/1 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
  white-space: nowrap !important;
}

body[data-page="records"] .mobile-debtor-money i {
  position: absolute !important;
  right: 21px !important;
  top: 58px !important;
  color: #0f1b31 !important;
  font: 900 22px/1 "Inter","Sarabun",sans-serif !important;
}

body[data-page="records"] .mobile-debtor-due {
  grid-area: due !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #f47a00 !important;
  font: 800 18px/1.2 "Krungthai Fast","IBM Plex Sans Thai","Sarabun",sans-serif !important;
}

body[data-page="records"] .mobile-debtor-due.is-normal {
  color: #009b62 !important;
}

body[data-page="records"] .mobile-debtor-due svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

body[data-page="records"] .mobile-debtor-body {
  padding: 0 16px 18px !important;
}

@media (max-width: 430px) {
  body[data-page="records"] #recordsPanel {
    padding: 24px 20px calc(112px + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="records"] #recordsPanel > .panel-title h2 {
    font-size: 42px !important;
  }

  body[data-page="records"] #recordsHint {
    font-size: 22px !important;
  }

  body[data-page="records"] .mobile-debtor-collapse > summary {
    grid-template-columns: minmax(0, 1fr) 132px 20px !important;
    padding: 19px 16px 16px !important;
  }

  body[data-page="records"] .mobile-debtor-person {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="records"] .mobile-debtor-avatar {
    width: 52px !important;
    height: 52px !important;
  }

  body[data-page="records"] .mobile-debtor-name strong {
    font-size: 18px !important;
  }

  body[data-page="records"] .mobile-debtor-name small {
    font-size: 13.5px !important;
  }

  body[data-page="records"] .mobile-debtor-money {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-right: 22px !important;
  }

  body[data-page="records"] .mobile-debtor-money small {
    font-size: 13px !important;
  }

  body[data-page="records"] .mobile-debtor-money strong {
    font-size: 17px !important;
  }

  body[data-page="records"] .mobile-debtor-due {
    font-size: 15.5px !important;
  }
}

body.staff-chat-open {
  overflow: hidden !important;
}

body.staff-chat-open .quick-nav,
body.staff-chat-open .mobile-action-backdrop,
body.staff-chat-open .mobile-action-menu {
  display: none !important;
  pointer-events: none !important;
}

.staff-chat-directory-flow {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: stretch;
  background: #f7faff;
  color: #101b31;
  font-family: "IBM Plex Sans Thai", "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}

.staff-chat-directory-flow.hidden {
  display: none !important;
}

.staff-chat-directory-flow.is-open {
  opacity: 1;
  transform: translateY(0);
}

.staff-chat-directory-flow svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-chat-directory-content {
  width: 100%;
  max-width: 520px;
  height: 100dvh;
  margin: 0 auto;
  overflow: auto;
  padding: calc(18px + env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fd 100%);
}

.staff-chat-directory-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.staff-chat-directory-head h2 {
  margin: 0;
  color: #101b31;
  font: 900 30px/1.05 "IBM Plex Sans Thai","Sarabun",sans-serif;
  letter-spacing: 0;
}

.staff-chat-directory-head p {
  margin: 5px 0 0;
  color: #657286;
  font: 800 15px/1.2 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-chat-directory-head p strong {
  color: #079a63;
}

.staff-chat-directory-filters {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
  overflow-x: auto;
  margin: 0 -14px 14px;
  padding: 0 14px 2px;
  scrollbar-width: none;
}

.staff-chat-directory-filters::-webkit-scrollbar {
  display: none;
}

.staff-chat-directory-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #dfe7f1;
  border-radius: 12px;
  background: #fff;
  color: #101b31;
  font: 900 14px/1 "IBM Plex Sans Thai","Sarabun",sans-serif;
  box-shadow: 0 8px 20px rgba(15, 27, 49, .04);
}

.staff-chat-directory-filter svg {
  color: #079a63;
  font-size: 19px;
}

.staff-chat-directory-filter i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #15c77b;
}

.staff-chat-directory-filter.is-warning i {
  background: #f59e0b;
}

.staff-chat-directory-filter.is-danger i {
  background: #ef233c;
}

.staff-chat-directory-filter b {
  color: #079a63;
  font-weight: 900;
}

.staff-chat-directory-filter.is-warning b {
  color: #f07800;
}

.staff-chat-directory-filter.is-danger b {
  color: #ef233c;
}

.staff-chat-directory-filter.is-active {
  border-color: #079a63;
  color: #079a63;
  background: #f1fff8;
  box-shadow: inset 0 0 0 1px #079a63;
}

.staff-chat-directory-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  gap: 8px;
  margin-bottom: 12px;
}

.staff-chat-directory-tools label,
.staff-chat-directory-tools button {
  min-height: 48px;
  border: 1px solid #dfe7f1;
  border-radius: 12px;
  background: #fff;
  color: #101b31;
  box-shadow: 0 8px 20px rgba(15, 27, 49, .04);
}

.staff-chat-directory-tools label {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
}

.staff-chat-directory-tools label span {
  color: #8190a5;
  font-size: 26px;
  line-height: 1;
}

.staff-chat-directory-tools input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #101b31;
  font: 800 14px/1.2 "IBM Plex Sans Thai","Sarabun",sans-serif;
  outline: 0;
}

.staff-chat-directory-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  font: 900 13px/1 "IBM Plex Sans Thai","Sarabun",sans-serif;
  white-space: nowrap;
}

.staff-chat-directory-tools button:last-child {
  padding: 0;
  font-size: 20px;
}

.staff-chat-directory-list {
  display: grid;
  gap: 10px;
}

.staff-chat-directory-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.08fr) 92px 68px 46px;
  align-items: center;
  gap: 10px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(15, 27, 49, .055);
}

.staff-chat-directory-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #ddfaed, #eef8ff);
  color: #079a63;
  font-size: 22px;
  font-weight: 900;
}

.staff-chat-directory-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-chat-directory-info {
  min-width: 0;
}

.staff-chat-directory-info > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.staff-chat-directory-info strong {
  min-width: 0;
  overflow: hidden;
  color: #101b31;
  font: 900 15px/1.15 "IBM Plex Sans Thai","Sarabun",sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-chat-directory-info small,
.staff-chat-directory-period small,
.staff-chat-directory-period span,
.staff-chat-directory-money small,
.staff-chat-directory-money span {
  display: block;
  color: #66748a;
  font: 800 11px/1.2 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-chat-directory-info small {
  margin-top: 5px;
}

.staff-chat-directory-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 8px;
  background: #ddfaed;
  color: #079a63;
  font: 900 11px/1 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-chat-directory-status.is-warning {
  background: #fff3d8;
  color: #e07800;
}

.staff-chat-directory-status.is-danger {
  background: #ffe3e7;
  color: #ef233c;
}

.staff-chat-directory-period {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0 8px;
  border-left: 1px solid #e5edf6;
  border-right: 1px solid #e5edf6;
  text-align: center;
}

.staff-chat-directory-period strong {
  color: #101b31;
  font: 900 18px/1 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-chat-directory-period em {
  color: #079a63;
  font: 900 11px/1.15 "IBM Plex Sans Thai","Sarabun",sans-serif;
  font-style: normal;
}

.staff-chat-directory-money {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.staff-chat-directory-money strong {
  color: #079a63;
  font: 900 18px/1 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-chat-directory-money.is-warning strong {
  color: #f07800;
}

.staff-chat-directory-money.is-danger strong {
  color: #ef233c;
}

.staff-chat-directory-open {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: #ddfaed;
  color: #079a63;
  font-size: 24px;
}

.staff-chat-directory-empty {
  padding: 28px 18px;
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.staff-chat-directory-empty strong,
.staff-chat-directory-empty span {
  display: block;
}

.staff-chat-directory-empty strong {
  color: #101b31;
  font: 900 18px/1.2 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-chat-directory-empty span {
  margin-top: 6px;
  color: #66748a;
  font: 800 14px/1.35 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

@media (max-width: 430px) {
  .staff-chat-directory-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .staff-chat-directory-head h2 {
    font-size: 27px;
  }

  .staff-chat-directory-card {
    grid-template-columns: 48px minmax(96px, 1fr) 68px 56px 40px;
    gap: 6px;
    min-height: 88px;
    padding: 10px 8px;
  }

  .staff-chat-directory-avatar {
    width: 46px;
    height: 46px;
  }

  .staff-chat-directory-info strong {
    max-width: 74px;
    font-size: 13.5px;
  }

  .staff-chat-directory-status {
    padding: 3px 6px;
    font-size: 10px;
  }

  .staff-chat-directory-period {
    padding: 0 4px;
  }

  .staff-chat-directory-period strong,
  .staff-chat-directory-money strong {
    font-size: 15px;
  }

  .staff-chat-directory-info small,
  .staff-chat-directory-period small,
  .staff-chat-directory-period span,
  .staff-chat-directory-period em,
  .staff-chat-directory-money small,
  .staff-chat-directory-money span {
    font-size: 10px;
  }

  .staff-chat-directory-open {
    width: 38px;
    height: 42px;
    font-size: 20px;
  }

  .staff-chat-directory-tools {
    grid-template-columns: minmax(0, 1fr) 106px 48px;
  }

  .staff-chat-directory-tools input {
    font-size: 13px;
  }
}

@media (max-width: 370px) {
  .staff-chat-directory-card {
    grid-template-columns: 44px minmax(90px, 1fr) 62px 52px 36px;
    gap: 5px;
    padding: 9px 7px;
  }

  .staff-chat-directory-avatar {
    width: 42px;
    height: 42px;
  }

  .staff-chat-directory-info strong {
    max-width: 66px;
    font-size: 12.5px;
  }

  .staff-chat-directory-status {
    display: none;
  }

  .staff-chat-directory-open {
    width: 34px;
    height: 40px;
  }
}

.staff-chat-flow {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: stretch;
  background: #f7faff;
  color: #101b31;
  font-family: "IBM Plex Sans Thai", "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
}

.staff-chat-flow.hidden {
  display: none !important;
}

.staff-chat-flow.is-open {
  opacity: 1;
  transform: translateY(0);
}

.staff-chat-flow svg,
.staff-chat-directory-flow svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  min-width: 1em;
  color: currentColor;
  line-height: 1;
}

.staff-icon-wrap svg {
  display: block;
  width: 1em;
  height: 1em;
}

.staff-icon-fallback {
  display: none;
  font: 900 .72em/1 "IBM Plex Sans Thai","Sarabun",system-ui,sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}

.staff-chat-screen {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(139, 99, 255, .13), transparent 28%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8fd 100%);
}

.staff-chat-topbar,
.staff-detail-topbar {
  display: grid;
  grid-template-columns: 42px 52px minmax(0, 1fr) 42px 42px;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
}

.staff-detail-topbar {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.staff-chat-topbar button,
.staff-chat-topbar a,
.staff-detail-topbar button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  color: #101b31;
  box-shadow: 0 10px 24px rgba(15, 27, 49, .08);
  text-decoration: none;
}

.staff-chat-topbar a.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.staff-chat-head-avatar,
.staff-detail-avatar,
.staff-chat-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #dffbed, #edf6ff);
  color: #079a63;
  font-weight: 900;
}

.staff-chat-head-avatar {
  width: 52px;
  height: 52px;
  font-size: 25px;
}

.staff-chat-head-avatar img,
.staff-detail-avatar img,
.staff-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-chat-topbar strong,
.staff-detail-topbar strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #101b31;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-chat-topbar small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #069b62;
  font-size: 13px;
  font-weight: 800;
}

.staff-chat-topbar small i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #15c77b;
}

.staff-chat-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 14px 10px;
  padding: 12px 8px;
  border: 1px solid #e2eaf4;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(15, 27, 49, .07);
}

.staff-chat-stats div {
  display: grid;
  gap: 2px;
  padding: 0 8px;
  border-right: 1px solid #e2eaf4;
  text-align: center;
}

.staff-chat-stats div:last-child {
  border-right: 0;
}

.staff-chat-stats small,
.staff-chat-stats span {
  color: #68758a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.staff-chat-stats strong {
  color: #101b31;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.staff-chat-main {
  height: calc(100dvh - 244px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 300px;
  overflow: auto;
  padding: 0 14px calc(172px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  scroll-padding-bottom: calc(172px + env(safe-area-inset-bottom));
}

.staff-chat-day {
  width: fit-content;
  margin: 8px auto 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaf0f7;
  color: #66748a;
  font-size: 12px;
  font-weight: 800;
}

.staff-chat-system {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 10px 56px;
  padding: 12px;
  border: 1px solid #ccefdc;
  border-radius: 16px;
  background: #ecfff4;
  color: #0b7f52;
  font-size: 12px;
}

.staff-chat-system strong,
.staff-chat-system span {
  display: block;
  line-height: 1.25;
}

.staff-chat-system time {
  align-self: end;
  color: #68758a;
}

.staff-chat-messages {
  display: grid;
  gap: 10px;
  overflow: visible;
  padding-bottom: 24px;
}

.staff-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.staff-chat-row.is-out {
  justify-content: flex-end;
}

.staff-chat-row.is-system {
  justify-content: center;
}

.staff-chat-mini-agent {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: #efe8ff;
  color: #7c4dff;
}

.staff-chat-bubble {
  max-width: min(76%, 340px);
  padding: 11px 12px 8px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 49, .08);
}

.staff-chat-row.is-out .staff-chat-bubble {
  border-radius: 18px 18px 6px 18px;
  background: #efe5ff;
}

.staff-chat-bubble p {
  margin: 0;
  color: #101b31;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.38;
}

.staff-chat-bubble time {
  display: block;
  margin-top: 5px;
  color: #7a879a;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.staff-chat-bubble img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  margin-bottom: 8px;
  border-radius: 12px;
  object-fit: cover;
}

.staff-chat-bubble.has-payment-card {
  padding: 8px;
  background: #fff;
}

.staff-chat-payment-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: min(360px, 84vw);
  padding: 10px 11px;
  border: 1px solid rgba(16, 185, 129, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, #f0fff8 0%, #fff 100%);
  color: #101b31;
  font: inherit;
  text-align: left;
  text-decoration: none;
  touch-action: manipulation;
  pointer-events: auto;
  cursor: pointer;
}

.staff-chat-payment-card:disabled {
  cursor: default;
  opacity: .64;
}

.staff-chat-payment-thumb {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #dcfce7;
  color: #059669;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .12);
}

.staff-chat-payment-thumb.has-image {
  background: #fff;
}

.staff-chat-payment-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.staff-chat-payment-card svg {
  width: 21px;
  height: 21px;
}

.staff-chat-payment-card strong,
.staff-chat-payment-card small {
  display: block;
}

.staff-chat-payment-main {
  min-width: 0;
}

.staff-chat-payment-card strong {
  overflow: hidden;
  color: #101b31;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-chat-payment-card small {
  margin-top: 2px;
  overflow: hidden;
  color: #66748a;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-chat-payment-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 62px;
}

.staff-chat-payment-side b {
  color: #059669;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.staff-chat-payment-side small {
  width: fit-content;
  max-width: 84px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #059669;
  font-size: 10.5px;
}

.staff-chat-payment-card.orange {
  border-color: rgba(245, 158, 11, .28);
  background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
}

.staff-chat-payment-card.orange .staff-chat-payment-thumb {
  background: #ffedd5;
  color: #f97316;
}

.staff-chat-payment-card.orange .staff-chat-payment-side b,
.staff-chat-payment-card.orange .staff-chat-payment-side small {
  color: #f97316;
}

.staff-chat-payment-card.orange .staff-chat-payment-side small {
  background: rgba(245, 158, 11, .13);
}

.staff-payment-detail-open {
  overflow: hidden;
}

.staff-payment-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  pointer-events: auto;
}

.staff-payment-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(14px);
}

.staff-payment-detail-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(430px, calc(100vw - 24px));
  height: min(760px, 86dvh);
  overflow: hidden;
  border: 1px solid rgba(219, 228, 240, .95);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 78px rgba(15, 23, 42, .26);
  pointer-events: auto;
}

.staff-payment-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 13px 18px;
  border-bottom: 1px solid #e8eef6;
}

.staff-payment-detail-header strong,
.staff-payment-detail-header span {
  display: block;
}

.staff-payment-detail-header strong {
  color: #101827;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.08;
}

.staff-payment-detail-header span {
  margin-top: 3px;
  color: #66748a;
  font-size: 13px;
  font-weight: 700;
}

.staff-payment-detail-header button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #101827;
  font: inherit;
  font-size: 28px;
  font-weight: 800;
}

.staff-payment-detail-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7fbff;
}

.staff-chat-helper-card,
.staff-chat-loading,
.staff-chat-error {
  margin: 16px 8px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  color: #5d697d;
  box-shadow: 0 10px 24px rgba(15, 27, 49, .06);
}

.staff-chat-helper-card strong,
.staff-chat-helper-card span,
.staff-chat-helper-card small {
  display: block;
}

.staff-chat-helper-card strong {
  color: #101b31;
  font-size: 16px;
  font-weight: 900;
}

.staff-chat-composer {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 48px;
  gap: 8px;
  width: min(100% - 24px, 496px);
  padding: 8px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(15, 27, 49, .12);
  transform: translateX(-50%);
}

.staff-chat-composer label,
.staff-chat-composer button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 16px;
}

.staff-chat-composer label {
  color: #6b7586;
}

.staff-chat-composer label input {
  display: none;
}

.staff-chat-composer input[type="text"] {
  min-width: 0;
  border: 0;
  border-radius: 16px;
  background: #eef2f7;
  padding: 0 14px;
  color: #101b31;
  font: 800 15px/1.2 "IBM Plex Sans Thai","Sarabun",sans-serif;
  outline: 0;
}

.staff-chat-composer button {
  background: linear-gradient(145deg, #8b5cf6, #6d5dfc);
  color: #fff;
  font-size: 22px;
}

.staff-chat-quick-actions {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70px;
  gap: 8px;
  width: min(100% - 24px, 496px);
  overflow-x: auto;
  padding: 0 0 4px;
  transform: translateX(-50%);
  scrollbar-width: none;
}

.staff-chat-quick-actions::-webkit-scrollbar {
  display: none;
}

.staff-chat-quick-actions button,
.staff-chat-quick-actions a {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 66px;
  border: 1px solid #e2eaf4;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  color: #101b31;
  font: 800 12px/1.05 "IBM Plex Sans Thai","Sarabun",sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(15, 27, 49, .06);
}

.staff-chat-quick-actions svg {
  color: #069b62;
  font-size: 22px;
}

.staff-detail-main {
  height: calc(100dvh - 70px - env(safe-area-inset-top));
  overflow: auto;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom));
}

.staff-detail-profile {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 0;
}

.staff-detail-avatar {
  width: 70px;
  height: 70px;
  font-size: 30px;
}

.staff-detail-profile h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #101b31;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.staff-detail-profile h2 button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #101b31;
}

.staff-detail-profile p,
.staff-detail-profile small {
  display: block;
  margin: 4px 0 0;
  color: #66748a;
  font-size: 14px;
  font-weight: 800;
}

.staff-risk-card,
.staff-detail-metrics,
.staff-timeline,
.staff-detail-tabs {
  margin-bottom: 12px;
  border: 1px solid #e2eaf4;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 28px rgba(15, 27, 49, .06);
}

.staff-risk-card {
  padding: 14px;
}

.staff-risk-card strong {
  color: #e91b35;
  font-size: 15px;
  font-weight: 900;
}

.staff-risk-card span {
  float: right;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffe6e9;
  color: #e91b35;
  font-size: 13px;
  font-weight: 900;
}

.staff-risk-card ul {
  clear: both;
  margin: 10px 0 0;
  padding-left: 18px;
  color: #101b31;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.staff-risk-card.is-success strong,
.staff-risk-card.is-success span {
  color: #079a63;
}

.staff-risk-card.is-success span {
  background: #ddfaed;
}

.staff-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.staff-detail-metrics div {
  display: grid;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 14px;
  background: #f6f9fd;
  text-align: center;
}

.staff-detail-metrics small,
.staff-detail-metrics span {
  color: #66748a;
  font-size: 12px;
  font-weight: 800;
}

.staff-detail-metrics strong {
  color: #101b31;
  font-size: 18px;
  font-weight: 900;
}

.staff-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.staff-detail-tabs button {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 4px;
  color: #66748a;
  font: 800 12px/1.1 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

.staff-detail-tabs button.is-active {
  color: #0b73ff;
  box-shadow: inset 0 -3px #0b73ff;
}

.staff-timeline {
  display: grid;
  overflow: hidden;
}

.staff-timeline article {
  display: grid;
  grid-template-columns: 76px 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e2eaf4;
}

.staff-timeline article:last-child {
  border-bottom: 0;
}

.staff-timeline time {
  color: #66748a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.staff-timeline article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #e8f5ff;
  color: #0b73ff;
}

.staff-timeline p {
  margin: 0;
  color: #101b31;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.staff-timeline p strong,
.staff-timeline p small {
  display: block;
}

.staff-timeline p small {
  margin-top: 2px;
  color: #66748a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.28;
}

.staff-add-note {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #11c985, #03975f);
  color: #fff;
  font: 900 16px/1 "IBM Plex Sans Thai","Sarabun",sans-serif;
}

@media (max-width: 768px) {
  .staff-chat-flow .staff-icon-wrap svg,
  .staff-chat-directory-flow .staff-icon-wrap svg {
    display: none !important;
  }

  .staff-chat-flow .staff-icon-fallback,
  .staff-chat-directory-flow .staff-icon-fallback {
    display: block !important;
  }

  .staff-chat-topbar button,
  .staff-chat-topbar a,
  .staff-detail-topbar button,
  .staff-chat-directory-open,
  .staff-chat-composer label,
  .staff-chat-composer button {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  .staff-chat-composer button,
  .staff-chat-directory-open {
    font-size: 20px;
  }

  .staff-chat-quick-actions .staff-icon-fallback {
    font-size: 10px;
    text-transform: uppercase;
  }
}

@media (max-width: 380px) {
  .staff-chat-topbar {
    grid-template-columns: 38px 46px minmax(0, 1fr) 38px 38px;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .staff-chat-topbar button,
  .staff-chat-topbar a,
  .staff-detail-topbar button {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .staff-chat-head-avatar {
    width: 46px;
    height: 46px;
  }

  .staff-chat-stats strong {
    font-size: 16px;
  }

  .staff-chat-stats small,
  .staff-chat-stats span {
    font-size: 11px;
  }

  .staff-chat-main {
    height: calc(100dvh - 236px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* 2026-05-15: real-phone polish for staff customer list, chat, and work center */
@media (max-width: 768px) {
  html body:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after,
  html body[data-page]:not(.auth-locked) .quick-nav > .mobile-tracking-link .nav-label::after {
    content: "งาน" !important;
  }

  .staff-icon-fallback {
    font-size: .86em;
    line-height: 1;
    text-transform: none !important;
  }

  .staff-chat-directory-content {
    max-width: 430px;
    padding: calc(18px + env(safe-area-inset-top)) 12px calc(104px + env(safe-area-inset-bottom));
  }

  .staff-chat-directory-head {
    margin-bottom: 12px;
  }

  .staff-chat-directory-head h2 {
    font-size: 29px;
    line-height: 1;
  }

  .staff-chat-directory-filters {
    gap: 7px;
    margin: 0 -12px 12px;
    padding: 0 12px 2px;
  }

  .staff-chat-directory-filter {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 13.5px;
    white-space: nowrap;
  }

  .staff-chat-directory-filter i.is-all {
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    background: transparent;
  }

  .staff-chat-directory-tools {
    grid-template-columns: minmax(0, 1fr) 100px 46px;
    gap: 7px;
    margin-bottom: 12px;
  }

  .staff-chat-directory-tools label,
  .staff-chat-directory-tools button {
    min-height: 46px;
    border-radius: 13px;
  }

  .staff-chat-directory-tools input {
    font-size: 13px;
    font-weight: 800;
  }

  .staff-chat-directory-tools label span {
    font-size: 22px;
  }

  .staff-chat-directory-list {
    gap: 10px;
  }

  .staff-chat-directory-card,
  .staff-chat-directory-card:is(article) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .staff-chat-directory-main {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 46px;
    gap: 10px;
    align-items: center;
  }

  .staff-chat-directory-avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px;
  }

  .staff-chat-directory-info > div {
    gap: 6px;
  }

  .staff-chat-directory-info strong {
    max-width: none !important;
    font-size: 17px !important;
    line-height: 1.1;
  }

  .staff-chat-directory-info small {
    margin-top: 4px;
    font-size: 12px !important;
    line-height: 1.15;
  }

  .staff-chat-directory-status {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10.5px !important;
  }

  .staff-chat-directory-open {
    width: 44px !important;
    height: 48px !important;
    border-radius: 15px;
    font-size: 20px !important;
  }

  .staff-chat-directory-metrics {
    display: grid;
    grid-template-columns: .9fr 1.25fr .9fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e8eff7;
    border-radius: 14px;
    background: #f8fbff;
  }

  .staff-chat-directory-period,
  .staff-chat-directory-money {
    min-width: 0;
    padding: 9px 7px !important;
    border: 0 !important;
    border-right: 1px solid #e2eaf4 !important;
  }

  .staff-chat-directory-money {
    border-right: 0 !important;
  }

  .staff-chat-directory-period strong,
  .staff-chat-directory-money strong {
    font-size: 17px !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .staff-chat-directory-period small,
  .staff-chat-directory-period span,
  .staff-chat-directory-period em,
  .staff-chat-directory-money small,
  .staff-chat-directory-money span {
    font-size: 10.5px !important;
    line-height: 1.15;
  }

  .staff-chat-screen {
    max-width: 430px;
  }

  .staff-chat-topbar {
    grid-template-columns: 40px 50px minmax(0, 1fr) 40px 40px;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 12px 8px;
  }

  .staff-chat-topbar button,
  .staff-chat-topbar a,
  .staff-detail-topbar button {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    font-size: 20px;
  }

  .staff-chat-head-avatar {
    width: 50px;
    height: 50px;
  }

  .staff-chat-topbar strong {
    font-size: 18px;
  }

  .staff-chat-stats {
    margin: 0 12px 9px;
    padding: 10px 6px;
    border-radius: 17px;
  }

  .staff-chat-stats div {
    padding: 0 6px;
  }

  .staff-chat-stats small,
  .staff-chat-stats span {
    font-size: 10.5px;
  }

  .staff-chat-stats strong {
    font-size: 16px;
  }

  .staff-chat-main {
    height: calc(100dvh - 220px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 260px;
    padding: 0 12px calc(142px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(142px + env(safe-area-inset-bottom));
  }

  .staff-chat-system {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    margin-left: 42px;
    padding: 10px;
    border-radius: 15px;
    font-size: 11.5px;
  }

  .staff-chat-bubble {
    max-width: min(82%, 330px);
    padding: 10px 11px 7px;
    border-radius: 17px 17px 17px 6px;
  }

  .staff-chat-bubble p {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
  }

  .staff-chat-composer {
    bottom: calc(70px + env(safe-area-inset-bottom));
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    width: min(100% - 20px, 410px);
    gap: 7px;
    padding: 7px;
    border-radius: 20px;
  }

  .staff-chat-composer label,
  .staff-chat-composer button {
    border-radius: 15px;
  }

  .staff-chat-composer input[type="text"] {
    min-height: 42px;
    padding: 0 13px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
  }

  .staff-chat-composer button {
    font-size: 24px !important;
  }

  .staff-chat-quick-actions {
    bottom: calc(6px + env(safe-area-inset-bottom));
    grid-auto-columns: 62px;
    gap: 7px;
    width: min(100% - 20px, 410px);
  }

  .staff-chat-quick-actions button,
  .staff-chat-quick-actions a {
    min-height: 58px;
    border-radius: 15px;
    font-size: 11px;
    line-height: 1.05;
  }

  .staff-chat-quick-actions .staff-icon-fallback {
    color: #069b62;
    font-size: 15px !important;
  }

  .staff-detail-main {
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-page="tracking"] #trackingPanel,
  #trackingPanel:not(.hidden) {
    padding: 18px 10px calc(108px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8fd 100%);
  }

  body[data-page="tracking"] #trackingPanel > .panel-title,
  body[data-page="tracking"] #trackingPanel > .summary-grid,
  body[data-page="tracking"] #trackingPanel > .simple-table-wrap,
  body[data-page="tracking"] #trackingPanel > .tracking-footer,
  #trackingPanel:not(.hidden) > .panel-title,
  #trackingPanel:not(.hidden) > .summary-grid,
  #trackingPanel:not(.hidden) > .simple-table-wrap,
  #trackingPanel:not(.hidden) > .tracking-footer {
    display: none !important;
  }

  body[data-page="tracking"] #trackingMobileList,
  #trackingPanel:not(.hidden) + #trackingMobileList,
  #trackingMobileList {
    display: block !important;
  }

  .tracking-work-center {
    display: grid;
    gap: 12px;
    color: #101b31;
    font-family: "IBM Plex Sans Thai", "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  .tracking-work-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 2px 2px;
  }

  .tracking-work-head h2 {
    margin: 0;
    font: 900 31px/1 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-head p {
    margin: 5px 0 0;
    color: #657286;
    font: 800 15px/1.2 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-head button {
    border: 0;
    background: transparent;
    color: #079a63;
    font: 900 15px/1 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 7px;
    overflow-x: auto;
    margin: 0 -10px;
    padding: 0 10px 2px;
    scrollbar-width: none;
  }

  .tracking-work-tabs::-webkit-scrollbar {
    display: none;
  }

  .tracking-work-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #dfe7f1;
    border-radius: 13px;
    background: #fff;
    color: #101b31;
    font: 900 13.5px/1 "IBM Plex Sans Thai", "Sarabun", sans-serif;
    box-shadow: 0 8px 18px rgba(15, 27, 49, .04);
  }

  .tracking-work-tabs button > span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #15c77b;
  }

  .tracking-work-tabs .is-danger > span {
    background: #ef233c;
  }

  .tracking-work-tabs .is-warning > span,
  .tracking-work-tabs .is-today > span {
    background: #f59e0b;
  }

  .tracking-work-tabs .is-success > span {
    background: #15c77b;
  }

  .tracking-work-tabs button.is-active {
    border-color: #079a63;
    background: #f1fff8;
    color: #079a63;
    box-shadow: inset 0 0 0 1px #079a63;
  }

  .tracking-work-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 8px;
  }

  .tracking-work-tools label,
  .tracking-work-tools button {
    min-height: 46px;
    border: 1px solid #dfe7f1;
    border-radius: 13px;
    background: #fff;
    color: #101b31;
    box-shadow: 0 8px 18px rgba(15, 27, 49, .04);
  }

  .tracking-work-tools label {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    padding: 0 10px;
  }

  .tracking-work-tools label span {
    color: #8190a5;
    font-size: 22px;
  }

  .tracking-work-tools input {
    min-width: 0;
    border: 0;
    background: transparent;
    outline: 0;
    color: #101b31;
    font: 800 13px/1.2 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-tools button {
    font: 900 12.5px/1 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-list {
    display: grid;
    gap: 10px;
  }

  .tracking-work-card,
  .tracking-work-empty {
    border: 1px solid #e1e9f3;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(15, 27, 49, .055);
  }

  .tracking-work-card {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .tracking-work-main {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .tracking-work-avatar,
  .tracking-work-avatar .tracking-customer-photo,
  .tracking-work-avatar .tracking-customer-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #ddfaed, #eef8ff);
    color: #079a63;
    font-weight: 900;
    font-size: 22px;
    width: 52px !important;
    height: 52px !important;
  }

  .tracking-work-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tracking-work-avatar .tracking-customer-button,
  .tracking-work-avatar .tracking-customer-copy {
    display: contents;
  }

  .tracking-work-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .tracking-work-copy strong {
    overflow: hidden;
    color: #101b31;
    font: 900 18px/1.1 "IBM Plex Sans Thai", "Sarabun", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tracking-work-copy small,
  .tracking-work-copy em {
    overflow: hidden;
    color: #66748a;
    font: 800 12.5px/1.15 "IBM Plex Sans Thai", "Sarabun", sans-serif;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tracking-work-meta {
    display: grid;
    grid-template-columns: .9fr 1.2fr .9fr;
    overflow: hidden;
    border: 1px solid #e8eff7;
    border-radius: 14px;
    background: #f8fbff;
  }

  .tracking-work-meta > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 7px;
    border-right: 1px solid #e2eaf4;
    text-align: center;
  }

  .tracking-work-meta > span:last-child {
    border-right: 0;
  }

  .tracking-work-meta small,
  .tracking-work-meta em {
    overflow: hidden;
    color: #66748a;
    font: 800 10.5px/1.15 "IBM Plex Sans Thai", "Sarabun", sans-serif;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tracking-work-meta strong {
    overflow: hidden;
    color: #101b31;
    font: 900 15px/1.08 "IBM Plex Sans Thai", "Sarabun", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tracking-work-card.is-danger .tracking-work-amount strong {
    color: #ef233c;
  }

  .tracking-work-card.is-warning .tracking-work-amount strong,
  .tracking-work-card.is-info .tracking-work-amount strong {
    color: #f07800;
  }

  .tracking-work-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .tracking-work-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 42px;
    border: 1px solid #dfe7f1;
    border-radius: 13px;
    background: #fff;
    color: #101b31;
    font: 900 12px/1 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-actions button:first-child {
    border-color: #09a96c;
    background: linear-gradient(135deg, #17c985, #049a62);
    color: #fff;
  }

  .tracking-work-empty {
    padding: 28px 18px;
    text-align: center;
  }

  .tracking-work-empty strong,
  .tracking-work-empty span {
    display: block;
  }

  .tracking-work-empty strong {
    color: #101b31;
    font: 900 18px/1.2 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }

  .tracking-work-empty span {
    margin-top: 6px;
    color: #66748a;
    font: 800 14px/1.35 "IBM Plex Sans Thai", "Sarabun", sans-serif;
  }
}

@media (max-width: 370px) {
  .staff-chat-directory-main,
  .tracking-work-main {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .staff-chat-directory-main {
    grid-template-columns: 48px minmax(0, 1fr) 42px;
  }

  .staff-chat-directory-avatar,
  .tracking-work-avatar,
  .tracking-work-avatar .tracking-customer-photo,
  .tracking-work-avatar .tracking-customer-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .staff-chat-directory-info strong,
  .tracking-work-copy strong {
    font-size: 16px !important;
  }

  .staff-chat-directory-metrics,
  .tracking-work-meta {
    grid-template-columns: 1fr 1fr;
  }

  .staff-chat-directory-money,
  .tracking-work-amount {
    grid-column: 1 / -1;
    border-top: 1px solid #e2eaf4;
  }

  .tracking-work-actions {
    grid-template-columns: 1fr;
  }
}

/* Staff chat: keep the composer and quick action dock inside the real mobile viewport. */
.staff-chat-flow .staff-chat-main {
  padding-bottom: calc(176px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(176px + env(safe-area-inset-bottom)) !important;
}

.staff-chat-flow .staff-chat-bubble.has-payment-card {
  width: min(360px, calc(100vw - 76px));
  max-width: min(360px, calc(100vw - 76px));
}

.staff-chat-flow .staff-chat-payment-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.staff-chat-flow .staff-chat-payment-card > div {
  min-width: 0;
}

.staff-chat-flow .staff-chat-payment-card strong,
.staff-chat-flow .staff-chat-payment-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-chat-flow .staff-chat-composer {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: none !important;
  grid-template-columns: 44px minmax(0, 1fr) 54px !important;
  align-items: center;
  transform: none !important;
  box-sizing: border-box;
}

.staff-chat-flow .staff-chat-composer label,
.staff-chat-flow .staff-chat-composer button {
  width: 100%;
  height: 54px;
  min-width: 0;
  box-sizing: border-box;
}

.staff-chat-flow .staff-chat-composer input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 54px;
  box-sizing: border-box;
}

.staff-chat-flow .staff-chat-composer button svg,
.staff-chat-flow .staff-chat-composer label svg {
  display: block;
  width: 24px;
  height: 24px;
}

.staff-chat-flow .staff-chat-quick-actions {
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .staff-chat-flow .staff-chat-main {
    padding-bottom: calc(166px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(166px + env(safe-area-inset-bottom)) !important;
  }

  .staff-chat-flow .staff-chat-composer {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: 42px minmax(0, 1fr) 50px !important;
    gap: 7px;
    padding: 7px;
  }

  .staff-chat-flow .staff-chat-composer label,
  .staff-chat-flow .staff-chat-composer button,
  .staff-chat-flow .staff-chat-composer input[type="text"] {
    height: 50px;
  }

  .staff-chat-flow .staff-chat-quick-actions {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }
}

/* Final realtime/payment chat fixes: keep mobile exits visible and composer inside viewport. */
.staff-chat-payment-card.is-disabled {
  pointer-events: none;
  opacity: .78;
}

@media (max-width: 900px) {
  body.staff-chat-directory-open:not(.staff-chat-open) .quick-nav {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 2147482500 !important;
  }

  body.staff-chat-directory-open:not(.staff-chat-open) .staff-chat-directory-flow {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.staff-chat-open .staff-chat-flow .staff-chat-main {
    padding-bottom: calc(232px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(232px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.staff-chat-open .staff-chat-flow .staff-chat-bubble.has-payment-card {
    width: min(360px, calc(100vw - 76px)) !important;
    max-width: min(360px, calc(100vw - 76px)) !important;
  }

  body.staff-chat-open .staff-chat-flow .staff-chat-composer {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 54px !important;
    gap: 8px !important;
    padding: 8px !important;
    transform: none !important;
    z-index: 2147483000 !important;
  }

  body.staff-chat-open .staff-chat-flow .staff-chat-composer input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 52px !important;
    box-sizing: border-box !important;
  }

  body.staff-chat-open .staff-chat-flow .staff-chat-composer label,
  body.staff-chat-open .staff-chat-flow .staff-chat-composer button {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  body.staff-chat-open .staff-chat-flow .staff-chat-quick-actions {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    z-index: 2147482900 !important;
  }
}

@supports (width: 100dvw) {
  @media (max-width: 900px) {
    body.staff-chat-open .staff-chat-flow .staff-chat-composer,
    body.staff-chat-open .staff-chat-flow .staff-chat-quick-actions {
      width: calc(100dvw - 24px) !important;
      max-width: calc(100dvw - 24px) !important;
    }

    body.staff-chat-open .staff-chat-flow .staff-chat-bubble.has-payment-card {
      width: min(360px, calc(100dvw - 76px)) !important;
      max-width: min(360px, calc(100dvw - 76px)) !important;
    }
  }
}

/* Staff chat dock polish: keep reading area clear of the composer and quick buttons. */
html body.staff-chat-open:not(.auth-locked) .staff-chat-flow {
  isolation: isolate;
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483440;
  height: calc(226px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247, 250, 255, 0) 0%,
    rgba(247, 250, 255, .82) 38%,
    rgba(247, 250, 255, .98) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-main {
  padding-bottom: calc(292px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(292px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-messages::after {
  content: "";
  display: block;
  height: 54px;
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-composer {
  bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147483470 !important;
  border: 1px solid rgba(218, 228, 240, .92) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .14) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-composer input[type="text"] {
  background: #eef3f8 !important;
  color: #101828 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Sarabun", "IBM Plex Sans Thai", system-ui, sans-serif !important;
  font-weight: 650 !important;
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-quick-actions {
  z-index: 2147483460 !important;
  padding: 0 1px 7px !important;
  transition: opacity .18s ease, transform .2s ease;
}

html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-quick-actions button,
html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-quick-actions a {
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .10) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html body.staff-chat-open.staff-chat-keyboard-open:not(.auth-locked) .staff-chat-flow::after {
  height: calc(108px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    180deg,
    rgba(247, 250, 255, 0) 0%,
    rgba(247, 250, 255, .92) 72%,
    rgba(247, 250, 255, .98) 100%
  );
}

html body.staff-chat-open.staff-chat-keyboard-open:not(.auth-locked) .staff-chat-flow .staff-chat-main {
  padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.staff-chat-open.staff-chat-keyboard-open:not(.auth-locked) .staff-chat-flow .staff-chat-composer {
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}

html body.staff-chat-open.staff-chat-keyboard-open:not(.auth-locked) .staff-chat-flow .staff-chat-quick-actions {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(calc(100% + 14px)) !important;
}

@media (max-width: 520px) {
  html body.staff-chat-open:not(.auth-locked) .staff-chat-flow::after {
    height: calc(214px + env(safe-area-inset-bottom, 0px));
  }

  html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-main {
    padding-bottom: calc(276px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(276px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.staff-chat-open:not(.auth-locked) .staff-chat-flow .staff-chat-composer {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

html body.staff-chat-open.staff-chat-keyboard-open:not(.auth-locked) .staff-chat-flow .staff-chat-main {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Merchant directory exit polish: directory is a page, so keep navigation and a clear back path. */
html body.staff-chat-directory-open:not(.auth-locked) {
  overflow: auto !important;
}

html body.staff-chat-directory-open:not(.auth-locked) .staff-chat-directory-flow {
  z-index: 120 !important;
  padding-bottom: 0 !important;
}

html body.staff-chat-directory-open:not(.auth-locked) .staff-chat-directory-content {
  padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.staff-chat-directory-open:not(.staff-chat-open):not(.auth-locked) .quick-nav {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  z-index: 2147483640 !important;
}

html body.staff-chat-directory-open:not(.staff-chat-open):not(.auth-locked) .quick-nav[data-staff-chat-chrome-hidden] {
  display: grid !important;
  pointer-events: auto !important;
}

html body:has(#staffChatDirectoryFlow.is-open:not(.hidden)):not(.staff-chat-open):not(.auth-locked) .quick-nav {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  z-index: 2147483640 !important;
}

.staff-chat-directory-head {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.staff-chat-directory-close {
  appearance: none;
  border: 0;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: inline-flex;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #079a63;
  background: rgba(220, 252, 235, .95);
  box-shadow: 0 14px 34px rgba(16, 24, 40, .08);
  font: 900 15px/1 -apple-system, BlinkMacSystemFont, "Sarabun", "IBM Plex Sans Thai", system-ui, sans-serif;
  cursor: pointer;
}

.staff-chat-directory-close svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  stroke: currentColor !important;
}

.staff-chat-directory-close .staff-icon-fallback {
  font-size: 30px;
  line-height: 1;
}

.staff-chat-directory-close-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 520px) {
  .staff-chat-directory-head {
    margin-bottom: 14px !important;
  }

  .staff-chat-directory-head h2 {
    font-size: 28px !important;
  }

  .staff-chat-directory-close {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 18px;
  }
}

/* Closed-contract archive polish: keep active debtors and closed contracts clearly separated on mobile. */
html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-screen {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans Thai", "Sarabun", system-ui, sans-serif !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 12px 0 18px !important;
  padding: 0 4px 8px !important;
  scrollbar-width: none !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs::-webkit-scrollbar {
  display: none !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 112px !important;
  min-height: 48px !important;
  border: 1.5px solid rgba(213, 224, 239, .96) !important;
  border-radius: 18px !important;
  padding: 10px 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #667085 !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .06) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button strong {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: inherit !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-active {
  border-color: rgba(0, 154, 96, .98) !important;
  background: linear-gradient(180deg, rgba(235, 255, 246, .98), rgba(221, 252, 236, .98)) !important;
  color: #079a63 !important;
  box-shadow: 0 14px 34px rgba(7, 154, 99, .12) !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-danger:not(.is-active) strong,
html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-danger:not(.is-active) {
  color: #e92f45 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-warning:not(.is-active) strong,
html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-warning:not(.is-active) {
  color: #e87800 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-archive {
  min-width: 142px !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-archive.is-active {
  border-color: rgba(71, 84, 103, .28) !important;
  background: linear-gradient(180deg, #ffffff, #f2f6fb) !important;
  color: #344054 !important;
  box-shadow: 0 16px 36px rgba(16, 24, 40, .10) !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-card-closed {
  display: block !important;
  border: 1px solid rgba(213, 224, 239, .96) !important;
  border-radius: 26px !important;
  padding: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 18px 46px rgba(16, 24, 40, .08) !important;
  overflow: hidden !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-head {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 3px !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #101828 !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title small {
  color: #667085 !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-badge {
  justify-self: end !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
  background: rgba(219, 250, 235, .98) !important;
  color: #079a63 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin-top: 16px !important;
  border: 1px solid rgba(218, 228, 240, .94) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(218, 228, 240, .85) !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary > div {
  min-width: 0 !important;
  padding: 12px 10px !important;
  background: rgba(248, 251, 255, .98) !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary span,
html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-note span {
  display: block !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary strong,
html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-note strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #101828 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-note {
  margin-top: 12px !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  background: rgba(242, 246, 251, .96) !important;
  border: 1px solid rgba(218, 228, 240, .92) !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-actions button {
  appearance: none !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(213, 224, 239, .98) !important;
  background: rgba(255, 255, 255, .98) !important;
  color: #101828 !important;
  box-shadow: 0 10px 22px rgba(16, 24, 40, .05) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-actions button:last-child:nth-child(3) {
  grid-column: 1 / -1 !important;
  border-color: rgba(0, 154, 96, .22) !important;
  background: linear-gradient(180deg, #17c789, #079a63) !important;
  color: #ffffff !important;
}

html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-empty {
  border: 1px dashed rgba(152, 162, 179, .50) !important;
  border-radius: 24px !important;
  padding: 24px 18px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #667085 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

@media (max-width: 430px) {
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-head {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-badge {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 2px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title strong {
    font-size: 21px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary {
    grid-template-columns: 1fr !important;
  }
}

/* Borrower-first records page: compact Apple-style mobile shell. */
@media (max-width: 820px) {
  html body[data-page="records"]:not(.auth-locked) #recordsPanel {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "IBM Plex Sans Thai", "Sarabun", system-ui, sans-serif !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    padding: max(18px, env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f6fb 100%) !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .panel-header,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .records-search-card {
    border: 0 !important;
    border-radius: 0 !important;
    padding-inline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel h1,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .panel-header h2 {
    color: #0f172a !important;
    font-size: clamp(40px, 12vw, 56px) !important;
    font-weight: 850 !important;
    line-height: .9 !important;
    letter-spacing: -0.02em !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .panel-subtitle,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsHint {
    color: #64748b !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordSearchInput,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .records-search-input,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .records-sort-button,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .records-view-toggle {
    min-height: 52px !important;
    border: 1px solid rgba(210, 224, 240, .95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 760 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-screen {
    font-family: inherit !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs {
    gap: 8px !important;
    margin: 10px -2px 14px !important;
    padding: 0 2px 8px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button {
    min-width: 96px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    border-width: 1px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button strong {
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-borrower.is-active,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-active {
    color: #059669 !important;
    border-color: rgba(5, 150, 105, .82) !important;
    background: linear-gradient(180deg, rgba(240, 253, 244, .98), rgba(220, 252, 231, .96)) !important;
    box-shadow: 0 12px 28px rgba(5, 150, 105, .14) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-tabs button.is-archive {
    min-width: 124px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-list {
    gap: 12px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-collapse,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-card-closed {
    border: 1px solid rgba(210, 224, 240, .92) !important;
    border-radius: 22px !important;
    padding: 14px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-collapse > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 12px !important;
    align-items: center !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-person {
    min-width: 0 !important;
    gap: 10px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 19px !important;
    font-size: 24px !important;
    font-weight: 850 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-name strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title strong {
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-name small,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title small {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-money {
    min-width: 82px !important;
    text-align: right !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-money small {
    display: block !important;
    overflow: hidden !important;
    max-width: 92px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-money strong {
    display: block !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-money i {
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-due {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    color: #f97316 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-due svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-body {
    margin-top: 12px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-facts,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary {
    border-radius: 18px !important;
    margin-top: 10px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-facts > div,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary > div {
    padding: 10px 8px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-facts span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-note span {
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-facts strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-summary strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-note strong {
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-primary-actions {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-primary-actions button,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-actions button {
    min-height: 44px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
    font-weight: 820 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-more-button {
    min-width: 64px !important;
    padding-inline: 8px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-head {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-badge {
    padding: 6px 9px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-note {
    margin-top: 10px !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-empty {
    border-radius: 22px !important;
    padding: 22px 16px !important;
    font-size: 15px !important;
    font-weight: 760 !important;
  }
}

@media (max-width: 390px) {
  html body[data-page="records"]:not(.auth-locked) #recordsPanel {
    padding-inline: 10px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-collapse,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-card-closed {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-avatar {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-name strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-closed-title strong {
    font-size: 18px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel .mobile-debtor-money strong {
    font-size: 18px !important;
  }
}