/* Final desktop-only card/frame lock for records, tracking, and payment history. */
@media (min-width: 769px) {
  html body[data-page="records"]:not(.auth-locked) .app-shell.loan-app {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .content-shell.main-content,
  html body[data-page="records"]:not(.auth-locked) .content-shell.main-area,
  html body[data-page="records"]:not(.auth-locked) .content-shell.content-area,
  html body[data-page="records"]:not(.auth-locked) .main-content,
  html body[data-page="tracking"]:not(.auth-locked) .content-shell.main-content,
  html body[data-page="tracking"]:not(.auth-locked) .content-shell.main-area,
  html body[data-page="tracking"]:not(.auth-locked) .content-shell.content-area,
  html body[data-page="tracking"]:not(.auth-locked) .main-content,
  html body[data-page="history"]:not(.auth-locked) .content-shell.main-content,
  html body[data-page="history"]:not(.auth-locked) .content-shell.main-area,
  html body[data-page="history"]:not(.auth-locked) .content-shell.content-area,
  html body[data-page="history"]:not(.auth-locked) .main-content,
  html body[data-records-subview="history"]:not(.auth-locked) .content-shell.main-content,
  html body[data-records-subview="history"]:not(.auth-locked) .content-shell.main-area,
  html body[data-records-subview="history"]:not(.auth-locked) .content-shell.content-area,
  html body[data-records-subview="history"]:not(.auth-locked) .main-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1250px) !important;
    justify-content: center !important;
    align-content: start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px 40px 56px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel,
  html body[data-page="tracking"]:not(.auth-locked) #trackingPanel.tracking-panel,
  html body[data-page="history"]:not(.auth-locked) #historyPanel.history-panel,
  html body[data-records-subview="history"]:not(.auth-locked) #historyPanel.history-panel {
    width: 100% !important;
    max-width: 1250px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel {
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scroll-margin-top: 52px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel:target {
    padding-top: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title,
  html body[data-page="tracking"]:not(.auth-locked) .app-topbar.app-topbar.page-header.topbar,
  html body[data-page="history"]:not(.auth-locked) .app-topbar.app-topbar.page-header.topbar,
  html body[data-records-subview="history"]:not(.auth-locked) .app-topbar.app-topbar.page-header.topbar {
    width: 100% !important;
    max-width: 1250px !important;
    min-height: 150px !important;
    height: 150px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .075) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title {
    margin-bottom: 54px !important;
    padding: 24px 690px 24px 34px !important;
  }

  html body[data-page="tracking"]:not(.auth-locked) #trackingPanel.tracking-panel,
  html body[data-page="history"]:not(.auth-locked) #historyPanel.history-panel,
  html body[data-records-subview="history"]:not(.auth-locked) #historyPanel.history-panel {
    margin-top: 34px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-board,
  html body[data-page="tracking"]:not(.auth-locked) #trackingPanel.tracking-panel,
  html body[data-page="history"]:not(.auth-locked) #historyPanel.history-panel,
  html body[data-records-subview="history"]:not(.auth-locked) #historyPanel.history-panel {
    width: 100% !important;
    max-width: 1250px !important;
    min-height: 420px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-card,
  html body[data-page="tracking"]:not(.auth-locked) .tracking-desktop-summary-card,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-card,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-card,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-card {
    min-height: 76px !important;
    height: 76px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-list {
    margin-top: 38px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card,
  html body[data-page="tracking"]:not(.auth-locked) .tracking-desktop-card,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-card,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-card,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-card {
    min-height: 208px !important;
    height: 208px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel *,
  html body[data-page="tracking"]:not(.auth-locked) #trackingPanel.tracking-panel,
  html body[data-page="tracking"]:not(.auth-locked) #trackingPanel.tracking-panel *,
  html body[data-page="history"]:not(.auth-locked) #historyPanel.history-panel,
  html body[data-page="history"]:not(.auth-locked) #historyPanel.history-panel *,
  html body[data-records-subview="history"]:not(.auth-locked) #historyPanel.history-panel,
  html body[data-records-subview="history"]:not(.auth-locked) #historyPanel.history-panel * {
    font-family: "IBM Plex Sans Thai", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title > div:first-child {
    position: absolute !important;
    left: 34px !important;
    top: 46px !important;
    width: 360px !important;
    height: auto !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title > div:first-child::before {
    content: "ระบบเงินกู้" !important;
    display: block !important;
    margin: 0 0 4px !important;
    color: #2f8b5a !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title h2 {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
    font-size: 38.117px !important;
    font-weight: 800 !important;
    line-height: 41.166px !important;
  }

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

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox.record-search {
    position: absolute !important;
    inset: 48px 199px auto auto !important;
    display: flex !important;
    align-items: center !important;
    width: 601px !important;
    max-width: 601px !important;
    min-width: 601px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 19px !important;
    border: 1px solid #dfe7f0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox > .record-search-label {
    display: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox > .record-search-icon {
    position: static !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 20px 0 0 !important;
    color: #94a3b8 !important;
    transform: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox > .record-search-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox #recordSearch {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 20.8px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox #recordSearch::placeholder {
    color: #9aa8bb !important;
    opacity: 1 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-grid,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-grid,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-grid,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 40px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-card,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-card,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-card,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-copy,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-copy,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-copy,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-copy {
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    line-height: 1.12 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-copy > span,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-copy > span,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-copy > span,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-copy > span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-card.is-danger .desktop-debtor-summary-copy > span,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-card.is-danger .desktop-tracking-summary-copy > span,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-card.is-danger .desktop-history-summary-copy > span {
    color: #ef4444 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-card.is-warning .desktop-debtor-summary-copy > span,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-card.is-warning .desktop-tracking-summary-copy > span,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-card.is-today .desktop-tracking-summary-copy > span,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-card.is-interest .desktop-history-summary-copy > span {
    color: #f97316 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-card.is-good .desktop-debtor-summary-copy > span,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-card.is-good .desktop-tracking-summary-copy > span {
    color: #2f8b5a !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-copy > strong,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-copy > strong,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-copy > strong,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-copy > strong {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    min-width: 0 !important;
    color: #0f172a !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-copy small,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-copy small,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-copy small,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-copy small {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-summary-icon,
  html body[data-page="tracking"]:not(.auth-locked) .desktop-tracking-summary-icon,
  html body[data-page="history"]:not(.auth-locked) .desktop-history-summary-icon,
  html body[data-records-subview="history"]:not(.auth-locked) .desktop-history-summary-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 999px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card,
  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card *,
  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-filter,
  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-sort,
  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-sort * {
    font-family: "IBM Plex Sans Thai", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-card,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-card * {
    font-family: "IBM Plex Sans Thai", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-copy {
    color: #101828 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 17.92px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-copy > span {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 12.65px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-card.is-good .desktop-debtor-summary-copy > span {
    color: #2f8b5a !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-card.is-danger .desktop-debtor-summary-copy > span {
    color: #ef4444 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-card.is-warning .desktop-debtor-summary-copy > span {
    color: #f97316 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-copy > strong {
    color: #0f172a !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 22px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-summary-copy > strong small {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 11px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title::before {
    content: none !important;
    display: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title p,
  html body[data-page="records"]:not(.auth-locked) #recordsHint {
    display: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title > div:first-child {
    left: 32px !important;
    top: 42.6px !important;
    width: 400.8px !important;
    height: 63px !important;
    max-height: 63px !important;
    overflow: visible !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title > div:first-child::before {
    content: "ระบบเงินกู้" !important;
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 12.16px !important;
    font-weight: 700 !important;
    line-height: 17.632px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title h2 {
    width: 400.8px !important;
    height: 42px !important;
    max-height: 42px !important;
    overflow: visible !important;
    font-size: 38.117px !important;
    font-weight: 800 !important;
    line-height: 41.166px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title h2::before,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title h2::after {
    content: none !important;
    display: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel > .panel-title::after {
    top: 53px !important;
    right: 31px !important;
    left: auto !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 23.2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox.record-search {
    padding: 0 18px !important;
    overflow: hidden !important;
    color: #64748b !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox > .record-search-icon {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    flex: none !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    color: #94a3b8 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordSearchBox #recordSearch {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 48px !important;
    padding: 10px 12px 10px 46px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 20.8px !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert {
    align-self: start !important;
    display: grid !important;
    grid-template-columns: clamp(22px, 1.75vw, 28px) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-self: stretch !important;
    gap: clamp(7px, .75vw, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(44px, 3.3vw, 52px) !important;
    min-height: clamp(44px, 3.3vw, 52px) !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: clamp(6px, .65vw, 8px) clamp(9px, .95vw, 14px) !important;
    border: 1px solid rgba(251, 191, 36, .12) !important;
    border-radius: clamp(8px, .72vw, 10px) !important;
    background: linear-gradient(90deg, #fff7e8 0%, #fffaf1 62%, #fff8e9 100%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: width .18s ease, height .18s ease, padding .18s ease, gap .18s ease, grid-template-columns .18s ease !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-icon {
    display: grid !important;
    place-items: center !important;
    width: clamp(22px, 1.75vw, 28px) !important;
    height: clamp(22px, 1.75vw, 28px) !important;
    border-radius: clamp(6px, .58vw, 8px) !important;
    background: #ffedd5 !important;
    color: #f97316 !important;
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .12) !important;
    transition: width .18s ease, height .18s ease, border-radius .18s ease !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-icon svg {
    width: clamp(12px, .95vw, 15px) !important;
    height: clamp(12px, .95vw, 15px) !important;
    stroke-width: 2.4 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-copy {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-title {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #1f2937 !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
    font-size: clamp(11px, .82vw, 13px) !important;
    font-weight: 800 !important;
    line-height: clamp(14px, 1.08vw, 17px) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transition: font-size .18s ease, line-height .18s ease !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-days {
    color: #f97316 !important;
    font-weight: 850 !important;
  }

  html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-amount {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
    font-size: clamp(10px, .76vw, 12px) !important;
    font-weight: 750 !important;
    line-height: clamp(13px, .95vw, 15px) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transition: font-size .18s ease, line-height .18s ease !important;
  }

  @media (max-width: 1320px) {
    html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert {
      grid-template-columns: 22px minmax(0, 1fr) !important;
      height: 42px !important;
      min-height: 42px !important;
      padding: 6px 9px !important;
    }

    html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-icon {
      width: 22px !important;
      height: 22px !important;
    }

    html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-title {
      font-size: 11px !important;
      line-height: 14px !important;
    }

    html body[data-page="records"]:not(.auth-locked) .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert .desktop-debtor-due-amount {
      font-size: 10px !important;
      line-height: 13px !important;
    }
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card {
    min-height: 156px !important;
    height: 156px !important;
    max-height: 156px !important;
    grid-template-areas: "person due amount status actions more" !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card {
    min-height: 156px !important;
    height: 156px !important;
    max-height: 156px !important;
    grid-template-areas: "person due amount status actions more" !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    align-items: center !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-metric,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-more {
    align-self: center !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 196px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy > div,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-name,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 22px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) {
    grid-area: amount !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) {
    grid-area: amount !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) {
    grid-area: status !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) {
    grid-area: status !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) {
    grid-area: due !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) {
    grid-area: due !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-progress,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-progress.desktop-debtor-due-alert {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:not(.is-expanded):not(:hover):not(:focus-within) .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded {
    min-height: 224px !important;
    height: auto !important;
    max-height: none !important;
    grid-template-areas:
      "person due amount status actions more"
      "quick quick quick quick quick quick" !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: grid !important;
    grid-area: quick !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: 64px !important;
    margin: 8px 0 0 !important;
    padding: 8px 10px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) {
    align-self: center !important;
    display: grid !important;
    grid-template-rows: 18px 34px 18px !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 2px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 0 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) > span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) > span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > span {
    align-self: end !important;
    display: block !important;
    height: 18px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 18px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > strong {
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin: 0 !important;
    line-height: 34px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) > strong {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 34px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > small {
    align-self: start !important;
    display: block !important;
    min-height: 18px !important;
    margin: 0 !important;
    line-height: 18px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2)::after,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3)::after {
    content: "" !important;
    display: block !important;
    height: 18px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:not(.is-expanded):not(:hover):not(:focus-within),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:not(.is-expanded):not(:hover):not(:focus-within) {
    grid-template-columns: minmax(250px, 1fr) minmax(190px, .78fr) minmax(150px, .6fr) minmax(142px, .54fr) 138px 42px !important;
    grid-template-areas: "person due amount status actions more" !important;
    gap: 12px !important;
    min-height: 144px !important;
    height: 144px !important;
    max-height: 144px !important;
    padding: 14px 16px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-avatar,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    font-size: 23px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy {
    max-width: 176px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy small,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-person-copy small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) {
    padding-left: 12px !important;
    overflow: hidden !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) > span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) > span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > span,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(3) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) > strong,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > strong {
    font-size: 19px !important;
    line-height: 30px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-actions {
    width: 138px !important;
    gap: 8px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-actions button,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-actions button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-more,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-more {
    width: 42px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-more-button,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-more-button {
    width: 42px !important;
    height: 54px !important;
    border-radius: 14px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-list {
    margin-top: 26px !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:not(.is-expanded):not(:hover):not(:focus-within),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:not(.is-expanded):not(:hover):not(:focus-within) {
      grid-template-columns: minmax(220px, 1fr) minmax(172px, .82fr) minmax(140px, .66fr) minmax(126px, .54fr) 126px 38px !important;
      gap: 10px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }

    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-actions {
      width: 126px !important;
    }

    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(2) > strong,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card > .desktop-debtor-metric:nth-child(4) > strong {
      font-size: 18px !important;
    }
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) {
    grid-template-columns: minmax(250px, 1fr) minmax(190px, .78fr) minmax(150px, .6fr) minmax(142px, .54fr) 138px 42px !important;
    grid-template-areas: "person due amount status actions more" !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    min-height: 144px !important;
    height: 144px !important;
    max-height: 144px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    transform: none !important;
    border-color: rgba(20, 184, 116, .2) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: none !important;
    grid-area: auto !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) {
      grid-template-columns: minmax(220px, 1fr) minmax(172px, .82fr) minmax(140px, .66fr) minmax(126px, .54fr) 126px 38px !important;
      gap: 10px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded {
    position: relative !important;
    overflow: visible !important;
    grid-template-columns: minmax(250px, 1fr) minmax(190px, .78fr) minmax(150px, .6fr) minmax(142px, .54fr) 138px 42px !important;
    grid-template-areas: "person due amount status actions more" !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    min-height: 144px !important;
    height: 144px !important;
    max-height: 144px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    transform: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded {
    border-color: rgba(20, 184, 116, .22) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .075) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: grid !important;
    grid-area: auto !important;
    position: absolute !important;
    z-index: 30 !important;
    left: 16px !important;
    right: 16px !important;
    top: calc(100% + 8px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -10px, 0) scale(.99) !important;
    transform-origin: top center !important;
    transition: opacity .16s ease, transform .18s ease, box-shadow .18s ease !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .08) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: grid !important;
    grid-area: auto !important;
    position: absolute !important;
    z-index: 30 !important;
    left: 16px !important;
    right: 16px !important;
    top: calc(100% + 8px) !important;
    width: calc(100% - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 32px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded {
      grid-template-columns: minmax(220px, 1fr) minmax(172px, .82fr) minmax(140px, .66fr) minmax(126px, .54fr) 126px 38px !important;
      gap: 10px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) {
    position: relative !important;
    overflow: hidden !important;
    grid-template-columns: minmax(250px, 1fr) minmax(190px, .78fr) minmax(150px, .6fr) minmax(142px, .54fr) 138px 42px !important;
    grid-template-areas: "person due amount status actions more" !important;
    grid-template-rows: 116px !important;
    gap: 12px !important;
    min-height: 144px !important;
    height: 144px !important;
    max-height: 144px !important;
    padding: 14px 16px !important;
    align-items: center !important;
    border-color: rgba(219, 229, 241, .95) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
    transform: none !important;
    cursor: pointer !important;
    transition: box-shadow .16s ease, background-color .16s ease !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) {
    border-color: rgba(219, 229, 241, .95) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card::after,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card::after {
    content: "⌄" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    z-index: 4 !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 14px !important;
    border-radius: 999px !important;
    background: rgba(248, 251, 255, .92) !important;
    color: rgba(100, 116, 139, .72) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: inset 0 0 0 1px rgba(219, 229, 241, .95) !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded::after,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded::after {
    content: "⌃" !important;
    bottom: 64px !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded) .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: none !important;
    position: relative !important;
    grid-area: quick !important;
    z-index: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -6px, 0) !important;
    box-shadow: none !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded {
    overflow: visible !important;
    grid-template-columns: minmax(250px, 1fr) minmax(190px, .78fr) minmax(150px, .6fr) minmax(142px, .54fr) 138px 42px !important;
    grid-template-areas:
      "person due amount status actions more"
      "quick quick quick quick quick quick" !important;
    grid-template-rows: 116px 58px !important;
    gap: 10px 12px !important;
    min-height: 212px !important;
    height: 212px !important;
    max-height: 212px !important;
    padding: 14px 16px 12px !important;
    align-items: center !important;
    border-color: rgba(219, 229, 241, .95) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
    transform: none !important;
    cursor: default !important;
  }

  html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded .desktop-debtor-quick-actions.desktop-debtor-reference-actions,
  html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded .desktop-debtor-quick-actions.desktop-debtor-reference-actions {
    display: grid !important;
    position: relative !important;
    grid-area: quick !important;
    z-index: 1 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    box-shadow: none !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:hover:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card:focus-within:not(.is-expanded),
    html body[data-page="records"]:not(.auth-locked) #recordsPanel #recordsList .desktop-debtor-board .desktop-debtor-card.is-expanded,
    html body[data-page="records"]:not(.auth-locked) #recordsPanel.records-panel #recordsList.records-list .desktop-debtor-board .desktop-debtor-card.is-expanded {
      grid-template-columns: minmax(220px, 1fr) minmax(172px, .82fr) minmax(140px, .66fr) minmax(126px, .54fr) 126px 38px !important;
      gap: 10px !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }
}

/* Desktop-only lender signature card to match account reference - 20260603 */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "signatureHead signatureHead"
      "signaturePreview signatureUpload"
      "signatureEdit signatureDelete" !important;
    align-content: start !important;
    gap: 18px 24px !important;
    min-height: 430px !important;
    padding: 28px 30px !important;
    overflow: visible !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .06) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    grid-area: signatureHead !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 88px !important;
    margin: 0 0 8px !important;
    padding: 0 0 24px !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before {
    content: "" !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    -webkit-mask: none !important;
    mask: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::after {
    content: "" !important;
    width: 32px !important;
    height: 32px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    background: #059669 !important;
    z-index: 1 !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='m15.7 4.3 4 4c.4.4.4 1 0 1.4L9.8 19.6c-.2.2-.4.3-.7.3l-4 .8c-.7.1-1.3-.5-1.2-1.2l.8-4c.1-.3.2-.5.3-.7l9.9-9.9c.4-.4 1-.4 1.4 0Zm-1.4 2.1-8 8-.4 2.2 2.2-.4 8-8-1.8-1.8Z'/%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='m15.7 4.3 4 4c.4.4.4 1 0 1.4L9.8 19.6c-.2.2-.4.3-.7.3l-4 .8c-.7.1-1.3-.5-1.2-1.2l.8-4c.1-.3.2-.5.3-.7l9.9-9.9c.4-.4 1-.4 1.4 0Zm-1.4 2.1-8 8-.4 2.2 2.2-.4 8-8-1.8-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2::after {
    content: "ใช้สำหรับเอกสารและสัญญา" !important;
    display: block !important;
    margin-top: 6px !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    grid-area: signaturePreview !important;
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(120px, 1fr) !important;
    gap: 12px !important;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 22px 22px 18px !important;
    overflow: hidden !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card strong {
    display: block !important;
    max-width: 48% !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card small {
    position: absolute !important;
    top: 21px !important;
    right: 20px !important;
    width: 45% !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    text-align: right !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    display: grid !important;
    place-items: center !important;
    min-height: 128px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview.hidden {
    display: grid !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview.hidden::before {
    content: "ยังไม่มีลายเซ็น" !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview img {
    display: block !important;
    width: auto !important;
    max-width: 92% !important;
    max-height: 100px !important;
    object-fit: contain !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    grid-area: signatureUpload !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    min-height: 150px !important;
    padding: 24px !important;
    border: 1.5px dashed #b7e4cc !important;
    border-radius: 20px !important;
    background: #fbfffd !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone b {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
    color: transparent !important;
    background: #059669 !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='M19.4 10.1A7.5 7.5 0 0 0 5 8.5 5.5 5.5 0 0 0 5.5 19H9v-2H5.5a3.5 3.5 0 0 1-.1-7h1.1l.2-1.1A5.5 5.5 0 0 1 17.4 10l.3 1.1 1.1.1A3 3 0 0 1 18.5 17H15v2h3.5a5 5 0 0 0 .9-8.9ZM13 19v-6.2l2.1 2.1 1.4-1.4L12 9l-4.5 4.5 1.4 1.4 2.1-2.1V19h2Z'/%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='M19.4 10.1A7.5 7.5 0 0 0 5 8.5 5.5 5.5 0 0 0 5.5 19H9v-2H5.5a3.5 3.5 0 0 1-.1-7h1.1l.2-1.1A5.5 5.5 0 0 1 17.4 10l.3 1.1 1.1.1A3 3 0 0 1 18.5 17H15v2h3.5a5 5 0 0 0 .9-8.9ZM13 19v-6.2l2.1 2.1 1.4-1.4L12 9l-4.5 4.5 1.4 1.4 2.1-2.1V19h2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone strong {
    color: #059669 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field > .field-help {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-hint {
    display: block !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit {
    grid-area: signatureEdit !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete {
    grid-area: signatureDelete !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row .profile-section-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row .profile-section-icon::before {
    width: 24px !important;
    height: 24px !important;
    background: #059669 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row b {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 2px solid #94a3b8 !important;
    border-right: 2px solid #94a3b8 !important;
    transform: rotate(45deg) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-advice-card {
    display: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    gap: 14px 16px !important;
    min-height: 390px !important;
    padding: 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 72px !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before {
    width: 58px !important;
    height: 58px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::after {
    width: 27px !important;
    height: 27px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2 {
    font-size: 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    min-height: 190px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    min-height: 128px !important;
  }
}

/* Desktop-only final lender signature card lock - 20260603d */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] {
    grid-area: signature !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto 222px 74px !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    align-self: start !important;
    align-items: stretch !important;
    gap: 18px 24px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 28px 30px !important;
    overflow: visible !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .06) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header {
    grid-area: shead !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 0 0 22px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::before {
    content: "" !important;
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    box-shadow: 0 14px 34px rgba(34, 197, 94, .12) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::after {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 20px !important;
    width: 30px !important;
    height: 30px !important;
    background: #059669 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.4' 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-4 12.5-12.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.4' 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-4 12.5-12.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2 {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2::after {
    content: "ใช้สำหรับเอกสารและสัญญา" !important;
    display: block !important;
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card {
    grid-area: spreview !important;
    position: relative !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-width: 0 !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card > strong {
    display: block !important;
    max-width: calc(100% - 130px) !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card > small {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    display: block !important;
    max-width: 132px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview.hidden {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 12px !important;
    background: transparent !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview.hidden::before {
    content: "ยังไม่มีลายเซ็น" !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview img {
    display: block !important;
    max-width: 84% !important;
    max-height: 112px !important;
    object-fit: contain !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field {
    grid-area: supload !important;
    display: grid !important;
    grid-template-rows: 150px auto !important;
    align-content: start !important;
    gap: 13px !important;
    min-width: 0 !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1.5px dashed #b7e4c7 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fffb 100%) !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone b {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    background: #16a34a !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M20 16.5a4.5 4.5 0 0 0-4.5-4.5h-1A6.5 6.5 0 0 0 2 14.5 4.5 4.5 0 0 0 6.5 19H17a3 3 0 0 0 3-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M20 16.5a4.5 4.5 0 0 0-4.5-4.5h-1A6.5 6.5 0 0 0 2 14.5 4.5 4.5 0 0 0 6.5 19H17a3 3 0 0 0 3-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone strong {
    display: block !important;
    color: #16a34a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field > .field-help {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-hint {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] #profileSignatureEdit {
    grid-area: sedit !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] #profileSignatureDelete {
    grid-area: sdelete !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row .profile-section-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] #profileSignatureDelete .profile-section-icon {
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row span:not(.profile-section-icon) {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row b {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    border-top: 2px solid #94a3b8 !important;
    border-right: 2px solid #94a3b8 !important;
    transform: rotate(45deg) !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] {
    grid-template-rows: auto 196px 68px !important;
    gap: 14px 18px !important;
    padding: 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 74px !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::before {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::after {
    left: 16px !important;
    top: 16px !important;
    width: 26px !important;
    height: 26px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2 {
    font-size: 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2::after {
    font-size: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field {
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field {
    grid-template-rows: 130px auto !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    grid-template-columns: 44px minmax(0, 1fr) 12px !important;
    padding: 11px 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row .profile-section-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
}

/* Desktop-only lender signature proportions final lock - 20260603c */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto 220px 74px !important;
    align-items: stretch !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-upload-field {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-current-card {
    grid-template-rows: 26px minmax(0, 1fr) !important;
    padding: 20px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-preview {
    min-height: 126px !important;
    height: 126px !important;
    padding: 8px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-preview img {
    max-height: 88px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-dropzone {
    min-height: 142px !important;
    height: 142px !important;
    padding: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    min-height: 74px !important;
    height: 74px !important;
    overflow: hidden !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-template-rows: auto 196px 68px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-upload-field {
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
  }
}

/* Desktop-only account inline profile/security lock - 20260603d */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page {
    width: min(1720px, calc(100vw - 96px)) !important;
  }

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

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: clamp(280px, 23vw, 360px) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: clamp(14px, 1.1vw, 22px) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    border: 1px solid #dbe5f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 18px !important;
    min-height: 560px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 54px 28px 28px !important;
    background: linear-gradient(180deg, #ecfff5 0%, #fff 54%) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: clamp(118px, 9vw, 148px) !important;
    height: clamp(118px, 9vw, 148px) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #101828 !important;
    font-size: clamp(22px, 1.8vw, 28px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-hero-phone {
    color: #64748b !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    display: grid !important;
    gap: 18px !important;
    min-height: 252px !important;
    margin: 0 !important;
    padding: clamp(22px, 1.7vw, 30px) clamp(26px, 2.2vw, 38px) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head {
    padding-bottom: 18px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-icon,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    background-color: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    -webkit-mask: var(--account-inline-card-icon-20260603d) center / 28px 28px no-repeat, linear-gradient(#000, #000) !important;
    mask: var(--account-inline-card-icon-20260603d) center / 28px 28px no-repeat, linear-gradient(#000, #000) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    --account-inline-card-icon-20260603d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%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;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    --account-inline-card-icon-20260603d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: clamp(24px, 1.75vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong::after,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2::after,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2::after {
    display: block !important;
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong::after {
    content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2::after {
    content: "ใช้สำหรับเอกสารสัญญาและใบเสร็จ" !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2::after {
    content: "เปลี่ยนรหัสผ่านโดยไม่ออกจากหน้านี้" !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-caret,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    display: grid !important;
    gap: 7px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 44px 0 18px !important;
    border: 1px solid #d7e2ef !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #101828 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: stretch !important;
    min-height: 322px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header { grid-area: shead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card { grid-area: spreview !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field { grid-area: supload !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit { grid-area: sedit !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete { grid-area: sdelete !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    display: grid !important;
    min-height: 100px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    place-items: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    min-height: 42px !important;
    max-height: 64px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-advice-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    min-height: 56px !important;
    padding: 9px 12px !important;
    border-radius: 15px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-section-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field > .field-help {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr) !important;
    grid-template-areas:
      "phead phead"
      "pintro pintro"
      "pfields pstrength"
      "pfields prules" !important;
    gap: 10px 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header { grid-area: phead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro { grid-area: pintro !important; margin: -2px 0 0 !important; color: #64748b !important; font-size: 13px !important; font-weight: 800 !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid { grid-area: pfields !important; display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; align-self: start !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview { grid-area: pstrength !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid { grid-area: prules !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 15px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-color: #bbf7d0 !important;
    background: #ecfdf5 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(300px, 100%) !important;
    min-width: 0 !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 286px minmax(0, 1fr) minmax(260px, .88fr) !important;
    gap: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 520px !important;
    padding-top: 44px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    padding: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "phead"
      "pintro"
      "pfields"
      "pstrength"
      "prules" !important;
  }
}

/* Desktop-only account inline signature/password - 20260603a */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page {
    --account-inline-border-20260603: #dbe5f1;
    --account-inline-text-20260603: #0f172a;
    --account-inline-muted-20260603: #64748b;
    --account-inline-green-20260603: #0f9f63;
    width: min(1420px, calc(100vw - 112px)) !important;
    gap: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page #accountProfileMount.account-card {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: 328px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 18px 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    display: flex !important;
    min-height: 560px !important;
    height: 100% !important;
    padding: 58px 30px 30px !important;
    border: 1px solid var(--account-inline-border-20260603) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ecfff5 0%, #ffffff 58%, #ffffff 100%) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 148px !important;
    height: 148px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--account-inline-text-20260603) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    display: grid !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 28px 34px 32px !important;
    border: 1px solid var(--account-inline-border-20260603) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card::before {
    content: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 0 8px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong {
    display: block !important;
    color: var(--account-inline-text-20260603) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong::after {
    content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important;
    display: block !important;
    margin-top: 6px !important;
    color: var(--account-inline-muted-20260603) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background-color: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    display: grid !important;
    gap: 8px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d7e2ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--account-inline-text-20260603) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row-wide {
    margin-top: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: stretch !important;
    min-height: 292px !important;
    padding: 22px !important;
    overflow: hidden !important;
    border: 1px solid var(--account-inline-border-20260603) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-rows: auto minmax(74px, 1fr) auto auto !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
    -webkit-mask: var(--account-inline-section-icon-20260603) center / 26px 26px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
    mask: var(--account-inline-section-icon-20260603) center / 26px 26px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    --account-inline-section-icon-20260603: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%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;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    --account-inline-section-icon-20260603: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: var(--account-inline-text-20260603) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    display: grid !important;
    gap: 8px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card strong {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    min-height: 40px !important;
    max-height: 62px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 14px !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border-radius: 15px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    font-size: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small {
    font-size: 11px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone strong {
    color: var(--account-inline-green-20260603) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro {
    margin: -4px 0 0 !important;
    color: var(--account-inline-muted-20260603) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    height: 44px !important;
    min-height: 44px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: #ecfdf5 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileError {
    grid-area: note !important;
    align-self: start !important;
    z-index: 2 !important;
    margin-top: 50px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(260px, 100%) !important;
    min-width: 0 !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page {
    width: min(1260px, calc(100vw - 92px)) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 292px minmax(0, 1fr) minmax(275px, .82fr) !important;
    gap: 16px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 520px !important;
    padding-top: 46px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 124px !important;
    height: 124px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    padding: 22px 28px 26px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong {
    font-size: 30px !important;
  }
}

/* Desktop-only account profile inline security EOF lock - 20260603f */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: clamp(282px, 22vw, 340px) minmax(0, 1fr) minmax(320px, .92fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 18px 20px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    border: 1px solid #dbe5f1 !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.05) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    align-self: stretch !important;
    min-height: 560px !important;
    padding: 54px 26px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 74%) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 136px !important;
    height: 136px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    color: #0f172a !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    min-height: 252px !important;
    margin: 0 !important;
    padding: 24px 30px 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 60px !important;
    margin: 0 0 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-icon,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    display: block !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-caret,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    display: grid !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 42px 0 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row-wide {
    margin-top: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 322px !important;
    margin: 0 !important;
    padding: 20px !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-areas:
      "shead shead"
      "spreview spreview"
      "supload supload"
      "sedit sdelete" !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header { grid-area: shead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card { grid-area: spreview !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field { grid-area: supload !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit { grid-area: sedit !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete { grid-area: sdelete !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    min-height: 42px !important;
    max-height: 64px !important;
    border: 0 !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-advice-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field > .field-help {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-areas:
      "phead"
      "pintro"
      "pfields"
      "pstrength"
      "prules" !important;
    gap: 10px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header { grid-area: phead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro { grid-area: pintro !important; margin: -4px 0 0 !important; color: #64748b !important; font-size: 13px !important; font-weight: 800 !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid { grid-area: pfields !important; display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview { grid-area: pstrength !important; display: grid !important; gap: 6px !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid { grid-area: prules !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 10px !important; background: #ecfdf5 !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(260px, 100%) !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 292px minmax(0, 1fr) minmax(280px, .84fr) !important;
    gap: 16px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 520px !important;
    padding-top: 46px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 124px !important;
    height: 124px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    font-size: 25px !important;
  }
}

/* Desktop-only account inline profile/security final override - 20260603e */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: clamp(280px, 23vw, 360px) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: clamp(14px, 1.1vw, 22px) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    border: 1px solid #dbe5f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 18px !important;
    min-height: 560px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 54px 28px 28px !important;
    background: linear-gradient(180deg, #ecfff5 0%, #fff 54%) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: clamp(118px, 9vw, 148px) !important;
    height: clamp(118px, 9vw, 148px) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(22px, 1.8vw, 28px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    display: grid !important;
    gap: 18px !important;
    min-height: 252px !important;
    margin: 0 !important;
    padding: clamp(22px, 1.7vw, 30px) clamp(26px, 2.2vw, 38px) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head {
    padding-bottom: 18px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: clamp(24px, 1.75vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: stretch !important;
    min-height: 322px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header { grid-area: shead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card { grid-area: spreview !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field { grid-area: supload !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit { grid-area: sedit !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete { grid-area: sdelete !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    display: grid !important;
    min-height: 100px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    place-items: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-advice-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    min-height: 56px !important;
    padding: 9px 12px !important;
    border-radius: 15px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr) !important;
    grid-template-areas:
      "phead phead"
      "pintro pintro"
      "pfields pstrength"
      "pfields prules" !important;
    gap: 10px 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header { grid-area: phead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro { grid-area: pintro !important; margin: -2px 0 0 !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid { grid-area: pfields !important; display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; align-self: start !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview { grid-area: pstrength !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid { grid-area: prules !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 286px minmax(0, 1fr) minmax(260px, .88fr) !important;
    gap: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 520px !important;
    padding-top: 44px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "phead"
      "pintro"
      "pfields"
      "pstrength"
      "prules" !important;
  }
}

/* Desktop-only account inline security polish - 20260603c */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 316px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 16px 20px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: 54px 28px 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 136px !important;
    height: 136px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    min-height: 248px !important;
    padding: 24px 30px 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    align-content: start !important;
    min-height: 340px !important;
    padding: 20px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(104px, auto) auto !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    grid-area: shead !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    grid-area: spreview !important;
    min-height: 116px !important;
    padding: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit {
    grid-area: sedit !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete {
    grid-area: sdelete !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    grid-area: supload !important;
    display: grid !important;
    gap: 8px !important;
    align-self: stretch !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    display: grid !important;
    place-items: center !important;
    min-height: 116px !important;
    padding: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    min-height: 60px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-template-columns: minmax(270px, 1fr) minmax(230px, .86fr) !important;
    grid-template-rows: auto auto 1fr auto !important;
    grid-template-areas:
      "phead phead"
      "pintro pintro"
      "pfields pstrength"
      "pfields prules" !important;
    gap: 10px 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    grid-area: phead !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro {
    grid-area: pintro !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid {
    grid-area: pfields !important;
    align-self: start !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview {
    grid-area: pstrength !important;
    align-self: start !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    grid-area: prules !important;
    align-self: start !important;
  }
}

@media (min-width: 901px) and (max-width: 1340px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 286px minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user"
      "identity signature"
      "identity password"
      "identity note"
      "saved actions" !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    min-height: 0 !important;
  }
}

/* Desktop-only account/profile reference lock - 20260525g (true EOF override) */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    --account-edge: 42px;
    --account-card-border: #dbe5f1;
    --account-muted: #64748b;
    --account-green: #10a76a;
    width: min(1520px, calc(100vw - 420px)) !important;
    max-width: none !important;
    min-width: 960px !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    height: 128px !important;
    min-height: 128px !important;
    margin: 0 !important;
    padding: 24px var(--account-edge) !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--account-card-border) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    color: #168654 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin: 9px 0 0 !important;
    color: var(--account-muted) !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    height: 118px !important;
    min-height: 118px !important;
    display: grid !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 20px 82px 18px 24px !important;
    border: 1px solid var(--account-card-border) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 28px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 43px !important;
    right: 37px !important;
    width: 26px !important;
    height: 26px !important;
    background: #16a34a !important;
    -webkit-mask: var(--account-summary-icon) center / 24px 24px no-repeat !important;
    mask: var(--account-summary-icon) center / 24px 24px no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(1) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M7 15h.01'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    display: block !important;
    color: var(--account-muted) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 25px !important;
    margin: 3px 0 0 !important;
    padding: 0 11px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #168654 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-grid {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page #accountProfileMount.account-card,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    grid-template-areas:
      "side form"
      "side tools"
      "side note"
      "saved actions" !important;
    align-items: stretch !important;
    gap: 18px 22px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: side !important;
    min-height: 510px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 34px 26px !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 16px !important;
    border: 1px solid var(--account-card-border) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #e9fff3 0%, #ffffff 48%, #ffffff 100%) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap {
    position: relative !important;
    width: 126px !important;
    height: 126px !important;
    margin: 20px auto 4px !important;
    display: grid !important;
    place-items: center !important;
    border: 6px solid #ffffff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0f9f6e, #8df5c5) !important;
    box-shadow: 0 18px 42px rgba(16, 185, 129, .24) !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #0f172a !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 68% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 68% no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-camera {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-hero-phone {
    color: var(--account-muted) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #168654 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    position: relative !important;
    min-height: 340px !important;
    margin: 0 !important;
    padding: 30px 32px !important;
    display: grid !important;
    gap: 18px !important;
    border: 1px solid var(--account-card-border) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong {
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong::after {
    content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important;
    display: block !important;
    margin-top: 7px !important;
    color: var(--account-muted) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-icon {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    color: #0f9f6e !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--account-muted) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d6e1ee !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row-wide {
    margin-top: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    grid-area: tools !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 82px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid var(--account-card-border) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .04) !important;
    color: #0f172a !important;
    text-align: left !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    margin-right: calc(50% + 10px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    margin-left: calc(50% + 10px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    display: block !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    display: block !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row b::before {
    content: "›" !important;
    color: #94a3b8 !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    grid-area: note !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(134, 239, 172, .72) !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #profileError {
    grid-column: 2 / 3 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .secondary-button {
    min-width: 190px !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-card.hidden,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page [data-account-panel].hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active {
    max-width: 900px !important;
    margin: 0 auto !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1120px, calc(100vw - 390px)) !important;
      min-width: 900px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
      padding-right: 68px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
      right: 16px !important;
      width: 48px !important;
      height: 48px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
      right: 27px !important;
      top: 39px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
    }
  }
}

/* Desktop-only account/profile final visual lock - 20260525f */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    width: min(1520px, calc(100vw - 92px)) !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    height: 128px !important;
    min-height: 128px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 24px 36px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    height: 118px !important;
    min-height: 118px !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 20px 82px 18px 24px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    top: 27px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    top: 43px !important;
    right: 38px !important;
    width: 24px !important;
    height: 24px !important;
    color: transparent !important;
    background: #16a34a !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    max-width: 100% !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 24px !important;
    margin: 2px 0 0 !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-grid {
    display: block !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page #accountProfileMount.account-card,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 310px minmax(0, 1fr) !important;
    grid-template-areas:
      "side head"
      "side form"
      "side tools"
      "side status" !important;
    gap: 16px 22px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0 0 92px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    grid-area: head !important;
    height: 78px !important;
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2 {
    display: grid !important;
    gap: 2px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2::after {
    content: "ข้อมูลผู้ใช้ ลายเซ็น และความปลอดภัยของระบบ" !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-close {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: side !important;
    min-height: 560px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 36px 28px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #eafff4 0%, #fff 52%) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap {
    width: 124px !important;
    height: 124px !important;
    border-radius: 999px !important;
    border: 5px solid #fff !important;
    background: linear-gradient(135deg, #0f9f6e, #8df5c5) !important;
    box-shadow: 0 18px 40px rgba(16, 185, 129, .24) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #0f172a !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 70% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 70% no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-camera {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    color: #0f172a !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d6e1ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row-wide {
    margin-top: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    grid-area: tools !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 14px 18px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .04) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    margin-right: calc(50% + 8px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    margin-left: calc(50% + 8px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: status !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    align-self: end !important;
    justify-self: stretch !important;
    margin: 0 260px 0 190px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    align-self: end !important;
    justify-self: end !important;
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-card.hidden,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page [data-account-panel].hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* Desktop-only account/profile reference polish - 20260525f */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    width: min(1520px, calc(100vw - 92px)) !important;
    margin: 0 auto 72px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    height: 128px !important;
    min-height: 128px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 24px 36px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    max-width: 520px !important;
    color: #0f172a !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin-top: 8px !important;
    max-width: 620px !important;
    color: #66758c !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    display: block !important;
    margin-bottom: 6px !important;
    color: #198754 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    height: 118px !important;
    min-height: 118px !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 20px 82px 18px 24px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 27px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    opacity: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 43px !important;
    right: 38px !important;
    width: 24px !important;
    height: 24px !important;
    background: #16a34a !important;
    -webkit-mask: var(--account-card-icon) center / contain no-repeat !important;
    mask: var(--account-card-icon) center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(1) {
    --account-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M5 10V7l2-3h10l2 3v3'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3Cpath d='M9 19v-5h6v5'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2) {
    --account-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M7 10h7'/%3E%3Cpath d='M7 14h4'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3) {
    --account-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4) {
    --account-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='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-4'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    max-width: 100% !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    margin: 2px 0 0 !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-grid {
    display: block !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page #accountProfileMount.account-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 310px minmax(0, 1fr) !important;
    grid-template-areas:
      "side head"
      "side form"
      "side tools"
      "side status" !important;
    gap: 16px 22px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0 0 92px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    grid-area: head !important;
    height: 78px !important;
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2 {
    display: grid !important;
    gap: 2px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2::after {
    content: "ข้อมูลผู้ใช้ ลายเซ็น และความปลอดภัยของระบบ" !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-close {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: side !important;
    min-height: 560px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 36px 28px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #eafff4 0%, #ffffff 52%) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap {
    width: 124px !important;
    height: 124px !important;
    border-radius: 999px !important;
    border: 5px solid #fff !important;
    background: linear-gradient(135deg, #0f9f6e, #8df5c5) !important;
    box-shadow: 0 18px 40px rgba(16, 185, 129, .24) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #0f172a !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 70% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 70% no-repeat !important;
    opacity: .96 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-camera {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    color: #0f172a !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-hero-phone {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-icon {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d6e1ee !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .55) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row-wide {
    margin-top: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    grid-area: tools !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 14px 18px !important;
    border: 1px solid #dce6f1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .04) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    margin-right: calc(50% + 8px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    margin-left: calc(50% + 8px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    margin-top: 2px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row b::before {
    content: "›" !important;
    color: #475569 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: status !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    align-self: end !important;
    justify-self: start !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    align-self: end !important;
    justify-self: stretch !important;
    margin: 0 260px 0 190px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    align-self: end !important;
    justify-self: end !important;
    display: flex !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .secondary-button {
    min-width: 184px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-card.hidden,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page [data-account-panel].hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
    }
  }
}

/* Desktop-only account/profile final lock - 20260525d */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(1520px, calc(100vw - 92px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    display: flex !important;
    align-items: center !important;
    min-height: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    padding: 24px 38px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 22px 58px rgba(15,23,42,.075) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin: 8px 0 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    display: block !important;
    margin: 0 0 7px !important;
    color: #2f8a57 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    min-height: 118px !important;
    height: 118px !important;
    padding: 20px 86px 18px 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(15,23,42,.05) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 26px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2)::after {
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3)::after {
    background: #e0f2fe !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4)::after {
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    position: absolute !important;
    top: 26px !important;
    right: 22px !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    color: #16a34a !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(1)::before {
    content: "▤" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2)::before {
    content: "▭" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3)::before {
    content: "⌁" !important;
    color: #0ea5e9 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4)::before {
    content: "✓" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.18 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    display: block !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    margin-top: 8px !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity head head"
      "identity form form"
      "identity sign pass"
      "saved actions actions"
      "note note note" !important;
    gap: 16px 20px !important;
    align-items: stretch !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
      grid-template-areas:
        "head head"
        "identity form"
        "identity sign"
        "identity pass"
        "saved actions"
        "note note" !important;
    }
  }
}

/* Desktop-only account/profile final lock: keep this after older desktop overrides. */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    display: grid !important;
    gap: 18px !important;
    width: min(1520px, calc(100vw - 92px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    display: flex !important;
    align-items: center !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 26px 38px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .075) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin: 8px 0 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    min-height: 126px !important;
    padding: 22px 84px 18px 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 17px 42px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 26px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .075) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity head head"
      "identity form form"
      "identity sign pass"
      "saved actions actions"
      "note note note" !important;
    gap: 16px 20px !important;
    align-items: stretch !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: identity !important;
    min-height: 500px !important;
    padding: 34px 24px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #e9fff3 0%, #ffffff 46%, #ffffff 100%) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    grid-area: head !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    min-height: 212px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-area: sign !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-area: pass !important;
  }
}

@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel {
    display: grid !important;
    gap: 18px !important;
    width: min(1520px, calc(100vw - 92px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 26px 38px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .075) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title p {
    margin: 8px 0 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-kicker {
    display: block !important;
    margin: 0 0 7px !important;
    color: #3f8f63 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div {
    position: relative !important;
    display: grid !important;
    min-height: 126px !important;
    padding: 22px 84px 18px 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 17px 42px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 24px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .08) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(2)::after {
    background: #e0f2fe !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(3)::after {
    background: #eef2ff !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(4)::after {
    background: #fff7ed !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div::before {
    position: absolute !important;
    top: 24px !important;
    right: 22px !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    color: #16a34a !important;
    font-family: "Sarabun", sans-serif !important;
    font-size: 25px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(1)::before {
    content: "▣" !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(2)::before {
    content: "▰" !important;
    color: #0284c7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(3)::before {
    content: "◉" !important;
    color: #4f46e5 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(4)::before {
    content: "✓" !important;
    color: #ea580c !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary span {
    display: block !important;
    min-width: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary strong {
    display: block !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary .secondary-button {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 154px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab.active {
    border-color: rgba(43, 168, 103, .42) !important;
    background: #ecfdf3 !important;
    color: #15803d !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab-icon {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-grid {
    display: block !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 26px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .075) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !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;
    overflow: visible !important;
    transform: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view.is-active {
    display: block !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity head head"
      "identity form form"
      "identity sign pass"
      "saved actions actions"
      "note note note" !important;
    align-items: stretch !important;
    gap: 16px 20px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    grid-area: head !important;
    grid-column: 2 / 4 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 31px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2::after {
    content: "ข้อมูลผู้ใช้ ลายเซ็น และความปลอดภัยของระบบ" !important;
    display: block !important;
    margin-top: 8px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-close {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: identity !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 4 !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 15px !important;
    min-height: 500px !important;
    height: 100% !important;
    padding: 34px 24px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #e9fff3 0%, #ffffff 46%, #ffffff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    width: 118px !important;
    height: 118px !important;
    border-radius: 999px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-hero-phone {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    grid-column: 2 / 4 !important;
    grid-row: 2 / 3 !important;
    display: grid !important;
    gap: 14px !important;
    min-height: 212px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    text-align: left !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-area: sign !important;
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-area: pass !important;
    grid-column: 3 / 4 !important;
    grid-row: 3 / 4 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-icon {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #ecfdf3 !important;
    color: #059669 !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row b::before {
    content: "›" !important;
    color: #94a3b8 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    grid-area: saved !important;
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #profileError {
    grid-area: error !important;
    grid-column: 2 / 4 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: actions !important;
    grid-column: 2 / 4 !important;
    grid-row: 4 / 5 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .secondary-button {
    min-width: 190px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    grid-area: note !important;
    grid-column: 1 / 4 !important;
    grid-row: 5 / 6 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(134, 239, 172, .65) !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active {
    max-width: 880px !important;
    margin: 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active .profile-flow-header {
    margin-bottom: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active .profile-flow-back {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
      grid-template-areas:
        "head head"
        "identity form"
        "identity sign"
        "identity pass"
        "saved actions"
        "note note" !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
      grid-column: 1 / 2 !important;
      grid-row: 2 / 5 !important;
      min-height: 430px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
      grid-column: auto !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
      grid-column: 2 / 3 !important;
      grid-row: auto !important;
    }
  }
}

/* Desktop-only account/profile final lock - 20260525d (last override) */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(1520px, calc(100vw - 92px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    display: flex !important;
    align-items: center !important;
    min-height: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    padding: 24px 38px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 22px 58px rgba(15,23,42,.075) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin: 8px 0 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    display: block !important;
    margin: 0 0 7px !important;
    color: #2f8a57 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    min-height: 118px !important;
    height: 118px !important;
    padding: 20px 86px 18px 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(15,23,42,.05) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 26px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2)::after {
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3)::after {
    background: #e0f2fe !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4)::after {
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    position: absolute !important;
    top: 26px !important;
    right: 22px !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    color: #16a34a !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(1)::before {
    content: "▤" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2)::before {
    content: "▭" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3)::before {
    content: "⌁" !important;
    color: #0ea5e9 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4)::before {
    content: "✓" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.18 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    display: block !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    margin-top: 8px !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity head head"
      "identity form form"
      "identity sign pass"
      "saved actions actions"
      "note note note" !important;
    gap: 16px 20px !important;
    align-items: stretch !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
      grid-template-areas:
        "head head"
        "identity form"
        "identity sign"
        "identity pass"
        "saved actions"
        "note note" !important;
    }
  }
}

@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel {
    gap: 22px !important;
    width: min(1560px, calc(100vw - 88px)) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title {
    min-height: 96px !important;
    padding: 8px 8px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title h2 {
    font-size: 50px !important;
    line-height: .95 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title p {
    margin-top: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    grid-template-areas: "label icon" "value icon" "meta icon" !important;
    align-items: center !important;
    min-height: 138px !important;
    padding: 24px 24px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div::after {
    content: "" !important;
    grid-area: icon !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .08) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(2)::after {
    background: #e0f2fe !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(3)::after {
    background: #eef2ff !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(4)::after {
    background: #fff7ed !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div::before {
    grid-area: icon !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 60px !important;
    height: 60px !important;
    color: #16a34a !important;
    font-family: "Sarabun", sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(1)::before {
    content: "▣" !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(2)::before {
    content: "▰" !important;
    color: #0284c7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(3)::before {
    content: "◉" !important;
    color: #4f46e5 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(4)::before {
    content: "✓" !important;
    color: #ea580c !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary span {
    grid-area: label !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary strong {
    grid-area: value !important;
    margin-top: 9px !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary .secondary-button {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tabs {
    justify-content: flex-start !important;
    padding: 6px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab {
    min-width: 176px !important;
    min-height: 48px !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab.active {
    border-color: rgba(43, 168, 103, .32) !important;
    box-shadow: 0 12px 24px rgba(22, 163, 74, .08) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-card {
    padding: 28px !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .065) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity head head"
      "identity form form"
      "identity sign pass"
      "saved actions actions"
      "note note note" !important;
    gap: 18px 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header {
    align-self: stretch !important;
    min-height: 88px !important;
    padding: 2px 0 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2 {
    font-size: 38px !important;
    line-height: .95 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2::after {
    content: "จัดการข้อมูลผู้ใช้ ลายเซ็น และรหัสผ่าน" !important;
    display: block !important;
    margin-top: 8px !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    align-self: stretch !important;
    min-height: 520px !important;
    padding: 30px 24px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #e9fff3 0%, #ffffff 46%, #ffffff 100%) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    width: 118px !important;
    height: 118px !important;
    border-radius: 999px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    font-size: 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-area: sign !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-area: pass !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    display: grid !important;
    width: 100% !important;
    min-height: 76px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    align-self: center !important;
    justify-self: start !important;
    padding-left: 4px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    align-self: center !important;
    justify-self: end !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button {
    min-width: 220px !important;
    background: linear-gradient(135deg, #12c777 0%, #059669 100%) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    min-height: 46px !important;
    padding: 12px 18px !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 270px minmax(0, 1fr) !important;
      grid-template-areas:
        "identity head"
        "identity form"
        "identity sign"
        "identity pass"
        "saved actions"
        "note note" !important;
    }
  }
}

/* Hide the desktop header card on pending-contract and LINE binding pages. */
@media (min-width: 769px) {
  html body[data-page="leads"]:not(.auth-locked) .app-topbar.app-topbar.page-header.topbar,
  html body[data-page="lineoa"]:not(.auth-locked) .app-topbar.app-topbar.page-header.topbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body[data-page="leads"]:not(.auth-locked) .content-shell.main-content,
  html body[data-page="leads"]:not(.auth-locked) .content-shell.main-area,
  html body[data-page="leads"]:not(.auth-locked) .content-shell.content-area,
  html body[data-page="leads"]:not(.auth-locked) .main-content,
  html body[data-page="lineoa"]:not(.auth-locked) .content-shell.main-content,
  html body[data-page="lineoa"]:not(.auth-locked) .content-shell.main-area,
  html body[data-page="lineoa"]:not(.auth-locked) .content-shell.content-area,
  html body[data-page="lineoa"]:not(.auth-locked) .main-content {
    gap: 0 !important;
    padding-top: 24px !important;
  }

  html body[data-page="leads"]:not(.auth-locked) #lineLeadsPanel,
  html body[data-page="lineoa"]:not(.auth-locked) #lineOaPanel {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Desktop LINE OA binding page: operational dashboard pattern. */
@media (min-width: 769px) {
  html body[data-page="lineoa"]:not(.auth-locked) #lineOaPanel.lineoa-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1250px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "IBM Plex Sans Thai", Inter, system-ui, sans-serif !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #lineOaPanel > .panel-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 22px !important;
    margin: 0 0 2px !important;
    padding: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #lineOaPanel > .panel-title h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 31px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #lineOaPanel > .panel-title p {
    margin: 5px 0 0 !important;
    max-width: 720px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #lineOaPanel > .panel-title .button-row {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-refresh-note {
    position: relative !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-refresh-note::before {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin-right: 9px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    vertical-align: middle !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #refreshLineUsers {
    min-width: 150px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(203, 213, 225, .88) !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 92px !important;
    padding: 0 !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .055) !important;
    overflow: hidden !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip article {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 24px !important;
    min-width: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip article:not(:last-child) {
    border-right: 1px solid rgba(226, 232, 240, .9) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip article::after {
    content: "›" !important;
    color: #64748b !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip article:last-child::after {
    content: "" !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-icon,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-feature-icon {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-icon {
    font-size: 12px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip b {
    display: block !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip small {
    display: block !important;
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-status-strip {
    display: none !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-card,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-message-preview,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-card,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-users-card,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid {
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-card {
    display: grid !important;
    gap: 18px !important;
    min-height: 360px !important;
    margin: 0 !important;
    padding: 24px !important;
    border-color: rgba(16, 185, 129, .24) !important;
    background: linear-gradient(135deg, rgba(236, 253, 245, .9), rgba(255, 255, 255, .98)) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-card-heading {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-card strong {
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 1.16 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-card p {
    margin: 6px 0 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-actions {
    display: grid !important;
    grid-template-columns: minmax(220px, 320px) auto auto !important;
    justify-content: center !important;
    gap: 10px !important;
    align-items: center !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-actions button {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #createLineConnectToken {
    background: linear-gradient(135deg, #16c784, #059669) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 16px 26px rgba(5, 150, 105, .22) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-result {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .88) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-result strong {
    color: #059669 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-link-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) !important;
    gap: 12px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-link-tools > div {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 16px !important;
    border: 1px solid rgba(219, 229, 241, .92) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .78) !important;
    min-width: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-link-tools span,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-preview-title span {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-link-tools code {
    width: 100% !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 10px !important;
    color: #64748b !important;
    background: #fff !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-qr-box {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-qr-code {
    display: block !important;
    width: 104px !important;
    height: 104px !important;
    padding: 8px !important;
    border: 1px solid rgba(203, 213, 225, .95) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .06) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-qr-code svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-qr-code.is-empty {
    opacity: .45 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) #lineOaQrStatus {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-connect-card .field-help {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid rgba(125, 211, 160, .55) !important;
    border-radius: 12px !important;
    background: #ecfdf5 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-message-preview {
    display: grid !important;
    gap: 16px !important;
    min-height: 360px !important;
    padding: 24px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-preview-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-preview-title strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-chat-preview {
    position: relative !important;
    min-height: 232px !important;
    padding: 64px 40px 28px 78px !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 78% 26%, rgba(255,255,255,.6), transparent 24%),
      linear-gradient(135deg, #cfe0fb, #edf7ff) !important;
    overflow: hidden !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-chat-avatar {
    position: absolute !important;
    left: 26px !important;
    top: 74px !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-chat-bubble {
    display: grid !important;
    gap: 10px !important;
    width: min(100%, 360px) !important;
    min-height: 148px !important;
    padding: 24px !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-chat-bubble p {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-chat-bubble strong {
    width: fit-content !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-chat-preview time {
    position: absolute !important;
    right: 32px !important;
    bottom: 24px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-warning-note {
    display: grid !important;
    gap: 4px !important;
    min-height: 58px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(251, 191, 36, .38) !important;
    border-radius: 14px !important;
    background: #fffbeb !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-warning-note b {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-warning-note span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-card {
    display: grid !important;
    align-content: start !important;
    gap: 16px !important;
    min-height: 360px !important;
    padding: 24px !important;
    background:
      linear-gradient(135deg, rgba(240, 253, 244, .78), rgba(255, 255, 255, .96)) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-head {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-head > div:first-child {
    min-width: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-head span {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-head strong {
    display: block !important;
    margin-top: 10px !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-head p {
    margin: 6px 0 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-count {
    display: grid !important;
    place-items: center !important;
    min-width: 86px !important;
    min-height: 86px !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid rgba(187, 247, 208, .95) !important;
    box-shadow: 0 14px 28px rgba(22, 163, 74, .10) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-count strong {
    margin: 0 !important;
    color: #059669 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-count span {
    padding: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-list {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(219, 229, 241, .9) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .86) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-avatar {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #d1fae5 !important;
    color: #059669 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-copy {
    min-width: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-copy strong,
  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-copy span {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-copy strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-copy span {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-item button {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-more {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 206px !important;
    gap: 6px !important;
    padding: 26px !important;
    border: 1px dashed rgba(148, 163, 184, .42) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .68) !important;
    text-align: center !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-empty strong {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-pending-empty span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 18px 20px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    border-right: 1px solid rgba(226, 232, 240, .88) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article:last-child {
    border-right: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article::before {
    content: none !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-metric-icon {
    grid-row: 1 / span 2 !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 13px !important;
    background: #dcfce7 !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article:nth-child(2) .lineoa-metric-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article:nth-child(3) .lineoa-metric-icon {
    background: #ffedd5 !important;
    color: #f97316 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article:nth-child(4) .lineoa-metric-icon {
    background: #ede9fe !important;
    color: #7c3aed !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid article > span:not(.lineoa-metric-icon) {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid strong {
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid small {
    align-self: end !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-users-card {
    display: grid !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-section-title strong {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .lineoa-section-title a {
    color: #2563eb !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-users-panel {
    padding: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-sections {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-section {
    gap: 10px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-section-header {
    padding: 0 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-section-header h3 {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-section-header p {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-accordion {
    border-radius: 14px !important;
    border-color: rgba(219, 229, 241, .95) !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-accordion-summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 12px 14px !important;
  }

  html body[data-page="lineoa"]:not(.auth-locked) .line-user-badges {
    justify-content: flex-end !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="lineoa"]:not(.auth-locked) .lineoa-step-strip,
    html body[data-page="lineoa"]:not(.auth-locked) .lineoa-overview-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="lineoa"]:not(.auth-locked) .lineoa-main-grid,
    html body[data-page="lineoa"]:not(.auth-locked) .line-user-sections {
      grid-template-columns: 1fr !important;
    }
  }
}

@media (max-width: 768px) {
  .lineoa-step-strip,
  .lineoa-message-preview,
  .lineoa-pending-card,
  .lineoa-overview-grid,
  .lineoa-section-title,
  .lineoa-link-tools,
  .lineoa-refresh-note,
  .lineoa-live-badge {
    display: none !important;
  }
}

@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel {
    display: grid !important;
    gap: 18px !important;
    width: min(1480px, calc(100vw - 96px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title {
    display: flex !important;
    align-items: center !important;
    min-height: 136px !important;
    margin: 0 !important;
    padding: 30px 40px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title h2 {
    margin: 3px 0 2px !important;
    color: #0f172a !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: .94 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-kicker {
    display: block !important;
    color: #3f8f63 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .05) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div {
    min-width: 0 !important;
    padding: 10px 14px !important;
    border-right: 1px solid rgba(226, 232, 240, .9) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:last-of-type {
    border-right: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary span {
    display: block !important;
    color: #8190a6 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary strong {
    display: block !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary .secondary-button {
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tabs {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 150px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab.active {
    border-color: rgba(43, 168, 103, .42) !important;
    background: #ecfdf3 !important;
    color: #15803d !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab-icon {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-grid {
    display: block !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !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;
    overflow: visible !important;
    transform: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view {
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view.is-active {
    display: block !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    grid-template-areas:
      "head head"
      "identity form"
      "shortcut form"
      "saved form"
      "error error"
      "actions actions"
      "note note" !important;
    align-items: start !important;
    gap: 14px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-header {
    grid-area: head !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-close {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: identity !important;
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    min-height: 254px !important;
    padding: 22px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #f8fffb 0%, #ffffff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap {
    width: 92px !important;
    height: 92px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    width: 92px !important;
    height: 92px !important;
    border-radius: 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-hero-phone {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    display: grid !important;
    gap: 14px !important;
    min-height: 254px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row-wide {
    width: 100% !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    text-align: left !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    grid-column: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-icon {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: #ecfdf3 !important;
    color: #059669 !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row b::before {
    content: "›" !important;
    color: #94a3b8 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    grid-area: saved !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #profileError {
    grid-area: error !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding-top: 2px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .secondary-button {
    min-width: 180px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    grid-area: note !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(134, 239, 172, .65) !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active {
    max-width: 820px !important;
    margin: 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active .profile-flow-header {
    margin-bottom: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active .profile-flow-back {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .signature-current-card,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .signature-advice-card,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .signature-confirm-card,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .password-strength-preview,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .signature-upload-field {
    border: 1px solid rgba(219, 229, 241, .95) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-signature-canvas {
    width: 100% !important;
    height: 300px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .compact-password-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) .account-shop-summary .secondary-button {
      grid-column: 1 / -1 !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
    }
  }
}

@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel {
    display: grid !important;
    gap: 18px !important;
    width: min(1520px, calc(100vw - 92px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 26px 38px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .075) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel > .panel-title p {
    margin: 8px 0 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-kicker {
    display: block !important;
    margin: 0 0 7px !important;
    color: #3f8f63 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div {
    position: relative !important;
    display: grid !important;
    min-height: 126px !important;
    padding: 22px 84px 18px 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 17px 42px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 24px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .08) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(2)::after {
    background: #e0f2fe !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(3)::after {
    background: #eef2ff !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(4)::after {
    background: #fff7ed !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div::before {
    position: absolute !important;
    top: 24px !important;
    right: 22px !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    color: #16a34a !important;
    font-family: "Sarabun", sans-serif !important;
    font-size: 25px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(1)::before {
    content: "▣" !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(2)::before {
    content: "▰" !important;
    color: #0284c7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(3)::before {
    content: "◉" !important;
    color: #4f46e5 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary > div:nth-child(4)::before {
    content: "✓" !important;
    color: #ea580c !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary span {
    display: block !important;
    min-width: 0 !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary strong {
    display: block !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-shop-summary .secondary-button {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 154px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab.active {
    border-color: rgba(43, 168, 103, .42) !important;
    background: #ecfdf3 !important;
    color: #15803d !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-tab-icon {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-grid {
    display: block !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) .account-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 26px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .075) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !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;
    overflow: visible !important;
    transform: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view.is-active {
    display: block !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity head head"
      "identity form form"
      "identity sign pass"
      "saved actions actions"
      "note note note" !important;
    align-items: stretch !important;
    gap: 16px 20px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    grid-area: head !important;
    grid-column: 2 / 4 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 31px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-header h2::after {
    content: "ข้อมูลผู้ใช้ ลายเซ็น และความปลอดภัยของระบบ" !important;
    display: block !important;
    margin-top: 8px !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view .profile-flow-close {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: identity !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 / 4 !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 15px !important;
    min-height: 500px !important;
    height: 100% !important;
    padding: 34px 24px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #e9fff3 0%, #ffffff 46%, #ffffff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    width: 118px !important;
    height: 118px !important;
    border-radius: 999px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-hero-phone {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    grid-column: 2 / 4 !important;
    grid-row: 2 / 3 !important;
    display: grid !important;
    gap: 14px !important;
    min-height: 212px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(219, 229, 241, .96) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    text-align: left !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-area: sign !important;
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-area: pass !important;
    grid-column: 3 / 4 !important;
    grid-row: 3 / 4 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-icon {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #ecfdf3 !important;
    color: #059669 !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row b::before {
    content: "›" !important;
    color: #94a3b8 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    grid-area: saved !important;
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #profileError {
    grid-area: error !important;
    grid-column: 2 / 4 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: actions !important;
    grid-column: 2 / 4 !important;
    grid-row: 4 / 5 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .secondary-button {
    min-width: 190px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    grid-area: note !important;
    grid-column: 1 / 4 !important;
    grid-row: 5 / 6 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(134, 239, 172, .65) !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active {
    max-width: 880px !important;
    margin: 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active .profile-flow-header {
    margin-bottom: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active .profile-flow-back {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
      grid-template-areas:
        "head head"
        "identity form"
        "identity sign"
        "identity pass"
        "saved actions"
        "note note" !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
      grid-column: 1 / 2 !important;
      grid-row: 2 / 5 !important;
      min-height: 430px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
      grid-column: auto !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
      grid-column: 2 / 3 !important;
      grid-row: auto !important;
    }
  }
}

/* Desktop-only account/profile final lock - 20260525d (EOF override) */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(1520px, calc(100vw - 92px)) !important;
    max-width: none !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    display: flex !important;
    align-items: center !important;
    min-height: 132px !important;
    height: 132px !important;
    margin: 0 !important;
    padding: 24px 38px !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    align-content: center !important;
    min-height: 118px !important;
    height: 118px !important;
    padding: 20px 86px 18px 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    top: 26px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(1)::before {
    content: "▤" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2)::before {
    content: "▭" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3)::before {
    content: "⌁" !important;
    color: #0ea5e9 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4)::before {
    content: "✓" !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    margin-top: 8px !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: block !important;
    margin-top: 8px !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-card.hidden,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page [data-account-panel].hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1040px, calc(100vw - 52px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

/* Desktop-only account/profile effective final lock - 20260525h */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    --account-border: #dbe5f1;
    --account-muted: #64748b;
    --account-green: #10a76a;
    width: min(1520px, calc(100vw - 420px)) !important;
    max-width: none !important;
    min-width: 900px !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-family: "Sarabun", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    height: 128px !important;
    min-height: 128px !important;
    margin: 0 !important;
    padding: 24px 42px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    color: #168654 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 44px !important;
    font-weight: 900 !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin: 9px 0 0 !important;
    color: var(--account-muted) !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    height: 118px !important;
    min-height: 118px !important;
    display: grid !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 20px 82px 18px 24px !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    content: "" !important;
    position: absolute !important;
    top: 28px !important;
    right: 22px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 43px !important;
    right: 37px !important;
    width: 26px !important;
    height: 26px !important;
    background: #16a34a !important;
    -webkit-mask: var(--account-summary-icon) center / 24px 24px no-repeat !important;
    mask: var(--account-summary-icon) center / 24px 24px no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(1) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M7 15h.01'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4) {
    --account-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3C/svg%3E");
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    display: block !important;
    color: var(--account-muted) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 25px !important;
    margin: 3px 0 0 !important;
    padding: 0 11px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #168654 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-tabs {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-grid {
    display: block !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page #accountProfileMount.account-card,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-flow-view:not(.is-active) {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    grid-template-areas:
      "side form"
      "side tools"
      "side note"
      "saved actions" !important;
    align-items: stretch !important;
    gap: 18px 22px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-flow-header {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-card {
    grid-area: side !important;
    min-height: 510px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 34px 26px !important;
    display: grid !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 16px !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #e9fff3 0%, #ffffff 48%, #ffffff 100%) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-wrap {
    position: relative !important;
    width: 126px !important;
    height: 126px !important;
    margin: 20px auto 4px !important;
    display: grid !important;
    place-items: center !important;
    border: 6px solid #ffffff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0f9f6e, #8df5c5) !important;
    box-shadow: 0 18px 42px rgba(16, 185, 129, .24) !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: #0f172a !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 68% no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='31' r='18'/%3E%3Cpath d='M18 82c5-18 17-28 30-28s25 10 30 28'/%3E%3C/svg%3E") center / 68% no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-avatar-camera {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-hero-phone {
    color: var(--account-muted) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-verified {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #168654 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-user-card {
    grid-area: form !important;
    position: relative !important;
    min-height: 340px !important;
    margin: 0 !important;
    padding: 30px 32px !important;
    display: grid !important;
    gap: 18px !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .045) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong {
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-head strong::after {
    content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important;
    display: block !important;
    margin-top: 7px !important;
    color: var(--account-muted) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-section-icon {
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    color: #0f9f6e !important;
    flex: 0 0 auto !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--account-muted) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row input {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d6e1ee !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .account-info-row-wide {
    margin-top: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view > .profile-action-row {
    grid-area: tools !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 82px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .04) !important;
    color: #0f172a !important;
    text-align: left !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    margin-right: calc(50% + 10px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    margin-left: calc(50% + 10px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
    display: block !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
    display: block !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row b::before {
    content: "›" !important;
    color: #94a3b8 !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-secure-note {
    grid-area: note !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(134, 239, 172, .72) !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #profileError {
    grid-column: 2 / 3 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .primary-button,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions .secondary-button {
    min-width: 190px !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-card.hidden,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page [data-account-panel].hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount [data-profile-view]:not(.profile-main-view).is-active {
    max-width: 900px !important;
    margin: 0 auto !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1120px, calc(100vw - 390px)) !important;
      min-width: 900px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
      padding-right: 68px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
      right: 16px !important;
      width: 48px !important;
      height: 48px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
      right: 27px !important;
      top: 39px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-view.is-active {
      grid-template-columns: 280px minmax(0, 1fr) !important;
    }
  }
}

/* Desktop-only account/profile cleanup - 20260525j (EOF winner) */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    scroll-margin-top: 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    font-size: 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: calc(50% - 10px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 10px) !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    justify-self: start !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    justify-self: end !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    align-items: center !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
      font-size: 16px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
      font-size: 12px !important;
    }
  }
}

/* Desktop-only account/profile summary polish - 20260525k */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    gap: 18px !important;
    font-family: "Sarabun", "IBM Plex Sans Thai", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    height: 116px !important;
    min-height: 116px !important;
    padding: 20px 40px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    margin-bottom: 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    font-size: clamp(35px, 2.7vw, 42px) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    height: 102px !important;
    min-height: 102px !important;
    display: block !important;
    padding: 16px 58px 14px 18px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    top: 46px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    top: 56px !important;
    right: 24px !important;
    width: 20px !important;
    height: 20px !important;
    -webkit-mask-size: 19px 19px !important;
    mask-size: 19px 19px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    display: block !important;
    max-width: calc(100% - 48px) !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    display: block !important;
    max-width: calc(100% - 10px) !important;
    margin: 12px 0 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: clamp(20px, 1.55vw, 24px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    max-width: 92px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 22px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2) small,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3) small {
    max-width: 82px !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
      height: 108px !important;
      min-height: 108px !important;
      padding: 18px 36px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
      font-size: 36px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      gap: 10px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
      height: 94px !important;
      min-height: 94px !important;
      padding: 14px 50px 12px 16px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
      top: 43px !important;
      right: 12px !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 13px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
      top: 52px !important;
      right: 21px !important;
      width: 18px !important;
      height: 18px !important;
      -webkit-mask-size: 18px 18px !important;
      mask-size: 18px 18px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
      font-size: 11px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
      margin-top: 11px !important;
      font-size: 19px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
      top: 12px !important;
      right: 13px !important;
      max-width: 76px !important;
      min-height: 20px !important;
      padding: 0 8px !important;
      font-size: 10px !important;
      line-height: 20px !important;
    }
  }
}

/* Desktop-only account/profile cleanup - 20260525i */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    scroll-margin-top: 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    font-size: 23px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    max-width: calc(100% - 2px) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: calc(50% - 10px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfileSignatureFlow {
    justify-self: start !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #openProfilePasswordFlow {
    justify-self: end !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-main-actions {
    align-items: center !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row strong {
      font-size: 16px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount .profile-action-row small {
      font-size: 12px !important;
    }
  }
}

/* Desktop-only account/profile summary lock - 20260525l */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    gap: 18px !important;
    font-family: "Sarabun", "IBM Plex Sans Thai", "Inter", sans-serif !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
    height: 110px !important;
    min-height: 110px !important;
    padding: 18px 40px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-kicker {
    margin: 0 0 5px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
    margin: 0 !important;
    font-size: clamp(32px, 2.45vw, 38px) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title p {
    margin-top: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    height: 106px !important;
    min-height: 106px !important;
    padding: 16px 16px 14px 70px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
    top: 18px !important;
    right: auto !important;
    left: 16px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
    top: 29px !important;
    right: auto !important;
    left: 27px !important;
    width: 20px !important;
    height: 20px !important;
    -webkit-mask-size: 20px 20px !important;
    mask-size: 20px 20px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
    display: block !important;
    align-self: center !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: clamp(19px, 1.5vw, 23px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    max-width: 100% !important;
    min-height: 20px !important;
    margin: 2px 0 0 !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(2) small,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(3) small,
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div:nth-child(4) small {
    padding-inline: 0 !important;
    background: transparent !important;
    color: #16a34a !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary .secondary-button {
    display: none !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title {
      height: 102px !important;
      min-height: 102px !important;
      padding: 16px 34px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page > .panel-title h2 {
      font-size: 34px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary {
      gap: 10px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div {
      height: 98px !important;
      min-height: 98px !important;
      padding: 14px 14px 12px 62px !important;
      border-radius: 15px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::after {
      top: 17px !important;
      left: 14px !important;
      width: 38px !important;
      height: 38px !important;
      border-radius: 13px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary > div::before {
      top: 27px !important;
      left: 24px !important;
      width: 18px !important;
      height: 18px !important;
      -webkit-mask-size: 18px 18px !important;
      mask-size: 18px 18px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary span {
      font-size: 11px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary strong {
      font-size: 18px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page .account-shop-summary small {
      min-height: 18px !important;
      padding: 0 8px !important;
      font-size: 9.5px !important;
      line-height: 18px !important;
    }
  }
}

/* Desktop-only account/profile hash-position trim - 20260525m */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    scroll-margin-top: 64px !important;
  }
}

/* Desktop-only account/profile inline security - 20260603a */
@media (min-width: 769px) {
  html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
    --account-inline-border: #dbe5f1;
    --account-inline-muted: #64748b;
    --account-inline-green: #16a365;
    width: min(1420px, calc(100vw - 120px)) !important;
    gap: 18px !important;
    padding-bottom: 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount.account-card {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr) minmax(320px, .82fr) !important;
    grid-template-areas:
      "identity main main"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 20px 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header {
    grid-area: main !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 32px 20px !important;
    border: 1px solid var(--account-inline-border) !important;
    border-radius: 24px 24px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header::before {
    content: "" !important;
    align-self: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 32px 32px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 32px 32px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view .profile-flow-header h2 {
    align-self: center !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view .profile-flow-header h2::after {
    content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important;
    margin-top: 6px !important;
    color: var(--account-inline-muted) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view .profile-flow-close {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    min-height: 555px !important;
    height: 100% !important;
    padding: 56px 28px 28px !important;
    border: 1px solid var(--account-inline-border) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ecfff5 0%, #ffffff 58%, #ffffff 100%) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 148px !important;
    height: 148px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: main !important;
    align-self: end !important;
    margin-top: 116px !important;
    padding: 22px 32px 28px !important;
    border: 1px solid var(--account-inline-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card::before {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    margin: 0 0 22px !important;
    background: #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    display: grid !important;
    gap: 8px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d7e2ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row-wide {
    margin-top: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    align-self: stretch !important;
    min-height: 255px !important;
    padding: 24px !important;
    overflow: hidden !important;
    border: 1px solid var(--account-inline-border) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-rows: auto minmax(86px, 1fr) auto auto !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-rows: auto auto 1fr auto !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
    -webkit-mask: var(--account-inline-section-icon) center / 26px 26px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
    mask: var(--account-inline-section-icon) center / 26px 26px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    --account-inline-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%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;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    --account-inline-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    display: grid !important;
    gap: 8px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card strong {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    min-height: 44px !important;
    max-height: 76px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 16px !important;
    min-height: 58px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone strong {
    color: #0f9f63 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro {
    margin: -4px 0 0 !important;
    color: var(--account-inline-muted) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: #ecfdf5 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileError {
    grid-area: note !important;
    align-self: start !important;
    z-index: 2 !important;
    margin-top: 52px !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(260px, 100%) !important;
    min-width: 0 !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  @media (max-width: 1500px) {
    html body[data-page="account"]:not(.auth-locked) #accountPanel.account-settings-page {
      width: min(1260px, calc(100vw - 96px)) !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
      grid-template-columns: 300px minmax(0, 1fr) minmax(280px, .78fr) !important;
      gap: 16px 18px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
      min-height: 520px !important;
      padding-top: 46px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
      width: 128px !important;
      height: 128px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header {
      padding: 24px 28px 18px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view .profile-flow-header h2 {
      font-size: 31px !important;
    }

    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
      margin-top: 104px !important;
      padding: 20px 28px 24px !important;
    }
  }

  @media (max-width: 1180px) {
    html body[data-page="account"]:not(.auth-locked) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
      grid-template-columns: 280px minmax(0, 1fr) !important;
      grid-template-areas:
        "identity main"
        "identity signature"
        "identity password"
        "identity note"
        "saved actions" !important;
    }
  }
}

/* Desktop-only account inline signature/password final lock - 20260603b */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page {
    --account-inline-border-final: #dbe5f1;
    --account-inline-text-final: #0f172a;
    --account-inline-muted-final: #64748b;
    width: min(1420px, calc(100vw - 112px)) !important;
    gap: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page #accountProfileMount.account-card {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: 328px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 18px 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    display: flex !important;
    min-height: 560px !important;
    height: 100% !important;
    padding: 58px 30px 30px !important;
    border: 1px solid var(--account-inline-border-final) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ecfff5 0%, #ffffff 58%, #ffffff 100%) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 148px !important;
    height: 148px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--account-inline-text-final) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    display: grid !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 28px 34px 32px !important;
    border: 1px solid var(--account-inline-border-final) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card::before {
    content: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 0 8px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong {
    display: block !important;
    color: var(--account-inline-text-final) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong::after {
    content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important;
    display: block !important;
    margin-top: 6px !important;
    color: var(--account-inline-muted-final) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background-color: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-caret {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    display: grid !important;
    gap: 8px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 46px 0 18px !important;
    border: 1px solid #d7e2ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--account-inline-text-final) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row-wide {
    margin-top: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: stretch !important;
    min-height: 292px !important;
    padding: 22px !important;
    overflow: hidden !important;
    border: 1px solid var(--account-inline-border-final) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-rows: auto minmax(74px, 1fr) auto auto !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
    -webkit-mask: var(--account-inline-section-icon-final) center / 26px 26px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
    mask: var(--account-inline-section-icon-final) center / 26px 26px no-repeat, linear-gradient(#dcfce7, #dcfce7) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    --account-inline-section-icon-final: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%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;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    --account-inline-section-icon-final: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: var(--account-inline-text-final) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    display: grid !important;
    gap: 8px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card strong {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    min-height: 40px !important;
    max-height: 62px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 14px !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border-radius: 15px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    font-size: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small {
    font-size: 11px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone strong {
    color: #0f9f63 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro {
    margin: -4px 0 0 !important;
    color: var(--account-inline-muted-final) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    height: 44px !important;
    min-height: 44px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: #ecfdf5 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileError {
    grid-area: note !important;
    align-self: start !important;
    z-index: 2 !important;
    margin-top: 50px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(260px, 100%) !important;
    min-width: 0 !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page {
    width: min(1260px, calc(100vw - 92px)) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 292px minmax(0, 1fr) minmax(275px, .82fr) !important;
    gap: 16px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 520px !important;
    padding-top: 46px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 124px !important;
    height: 124px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    padding: 22px 28px 26px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong {
    font-size: 30px !important;
  }
}

/* Desktop-only account profile inline security true EOF lock - 20260603f */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: clamp(282px, 22vw, 340px) minmax(0, 1fr) minmax(320px, .92fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 18px 20px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-caret,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-advice-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    border: 1px solid #dbe5f1 !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.05) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    align-self: stretch !important;
    min-height: 560px !important;
    padding: 54px 26px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 74%) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 136px !important;
    height: 136px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    max-width: 100% !important;
    color: #0f172a !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    min-height: 252px !important;
    margin: 0 !important;
    padding: 24px 30px 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 60px !important;
    margin: 0 0 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background-color: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    display: grid !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 42px 0 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row-wide {
    margin-top: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 322px !important;
    margin: 0 !important;
    padding: 20px !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    grid-template-areas:
      "shead shead"
      "spreview spreview"
      "supload supload"
      "sedit sdelete" !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header { grid-area: shead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card { grid-area: spreview !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field { grid-area: supload !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit { grid-area: sedit !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete { grid-area: sdelete !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    min-height: 42px !important;
    max-height: 64px !important;
    border: 0 !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field > .field-help {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    grid-template-areas:
      "phead"
      "pintro"
      "pfields"
      "pstrength"
      "prules" !important;
    gap: 10px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header { grid-area: phead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro { grid-area: pintro !important; margin: -4px 0 0 !important; color: #64748b !important; font-size: 13px !important; font-weight: 800 !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid { grid-area: pfields !important; display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview { grid-area: pstrength !important; display: grid !important; gap: 6px !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid { grid-area: prules !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 10px !important; background: #ecfdf5 !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(260px, 100%) !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 292px minmax(0, 1fr) minmax(280px, .84fr) !important;
    gap: 16px 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 520px !important;
    padding-top: 46px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 124px !important;
    height: 124px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    font-size: 25px !important;
  }
}

/* Desktop-only account profile inline security compact fit - 20260603g */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel.account-settings-page {
    --account-panel-max: min(1480px, calc(100vw - 112px)) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount.account-card {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "identity user user"
      "identity signature password"
      "identity note note"
      "saved actions actions" !important;
    gap: 16px 18px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view.is-active {
    display: contents !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    transform: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfileSignatureFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #openProfilePasswordFlow,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profilePasswordProceed,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    border: 1px solid #dbe5f1 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    grid-area: identity !important;
    min-height: 500px !important;
    padding: 38px 22px 24px !important;
    align-content: start !important;
    justify-items: center !important;
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 56%) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 118px !important;
    height: 118px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy {
    gap: 8px !important;
    margin-top: 24px !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-copy strong {
    font-size: 27px !important;
    line-height: 1.08 !important;
    max-width: 260px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-hero-phone {
    font-size: 17px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    grid-area: user !important;
    min-height: 238px !important;
    padding: 24px 28px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    min-height: 58px !important;
    margin: 0 0 16px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-icon,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    content: "" !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before {
    -webkit-mask: linear-gradient(#000 0 0) center / 24px 24px no-repeat !important;
    mask: linear-gradient(#000 0 0) center / 24px 24px no-repeat !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong::after,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2::after,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2::after {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong::after { content: "จัดการข้อมูลผู้ใช้และการเข้าสู่ระบบ" !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2::after { content: "ใช้สำหรับเอกสารและสัญญา" !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2::after { content: "อัปเดตรหัสผ่านเพื่อความปลอดภัย" !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-profile-readonly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label {
    gap: 7px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid label span {
    font-size: 13px !important;
    line-height: 1.15 !important;
    color: #64748b !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .account-info-row input,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid input {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    padding: 0 42px 0 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    min-height: 298px !important;
    padding: 18px !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    gap: 12px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header { grid-area: shead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card { grid-area: spreview !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field { grid-area: supload !important; min-width: 0 !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit { grid-area: sedit !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete { grid-area: sdelete !important; }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    overflow: hidden !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field > .field-help {
    font-size: 12px !important;
    line-height: 1.15 !important;
    color: #94a3b8 !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    max-height: 38px !important;
    min-height: 0 !important;
    margin: 4px 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone b,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em {
    font-size: 12px !important;
    font-style: normal !important;
    color: #94a3b8 !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone strong {
    font-size: 14px !important;
    color: #0f172a !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    grid-area: password !important;
    min-height: 298px !important;
    padding: 18px !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
    grid-template-areas:
      "phead phead"
      "pintro pintro"
      "pfields pstrength"
      "pfields prules" !important;
    gap: 10px 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header { grid-area: phead !important; }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-intro {
    grid-area: pintro !important;
    margin: -6px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
  }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .compact-password-grid {
    grid-area: pfields !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview {
    grid-area: pstrength !important;
    min-height: 70px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid {
    grid-area: prules !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview span,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-strength-preview strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .password-rule-grid span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-secure-note {
    grid-area: note !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #2f855a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-last-save {
    grid-area: saved !important;
    align-self: center !important;
    justify-self: center !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 800 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    width: 100% !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-main-actions .primary-button {
    width: min(270px, 100%) !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] {
    grid-template-columns: 286px minmax(0, 1fr) minmax(0, .9fr) !important;
    gap: 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-identity-card {
    min-height: 472px !important;
    padding-top: 34px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card {
    min-height: 214px !important;
    padding: 20px 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view {
    min-height: 274px !important;
    padding: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    min-height: 50px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-icon,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    width: 48px !important;
    height: 48px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-user-card .profile-section-head strong,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view .profile-flow-header h2 {
    font-size: 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-wrap,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-avatar-icon {
    width: 104px !important;
    height: 104px !important;
  }
}

/* Desktop-only account profile inline icon/detail polish - 20260603h */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-section-icon::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: #059669 !important;
    -webkit-mask: var(--account-inline-icon) center / contain no-repeat !important;
    mask: var(--account-inline-icon) center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .icon-bank {
    --account-inline-icon: 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 0-7 2.1-7 4.7C5 20 6 21 7.3 21h9.4c1.3 0 2.3-1 2.3-2.3C19 16.1 16 14 12 14Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .icon-pen {
    --account-inline-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m15.7 4.3 4 4c.4.4.4 1 0 1.4L9.8 19.6c-.2.2-.4.3-.7.3l-4 .8c-.7.1-1.3-.5-1.2-1.2l.8-4c.1-.3.2-.5.3-.7l9.9-9.9c.4-.4 1-.4 1.4 0Zm-1.4 2.1-8 8-.4 2.2 2.2-.4 8-8-1.8-1.8Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .icon-lock {
    --account-inline-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 8.7V18h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .icon-trash {
    --account-inline-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.8 10.2A2 2 0 0 1 14.2 21H9.8a2 2 0 0 1-2-1.8L7 9Zm3 2v7h2v-7h-2Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before {
    background-color: #dcfce7 !important;
    -webkit-mask: none !important;
    mask: none !important;
    position: relative !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::before {
    background-color: #dcfce7 !important;
    position: relative !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::after,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header::after {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: #059669 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    place-self: center !important;
    z-index: 1 !important;
    -webkit-mask: var(--account-header-icon) center / contain no-repeat !important;
    mask: var(--account-header-icon) center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    --account-header-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m15.7 4.3 4 4c.4.4.4 1 0 1.4L9.8 19.6c-.2.2-.4.3-.7.3l-4 .8c-.7.1-1.3-.5-1.2-1.2l.8-4c.1-.3.2-.5.3-.7l9.9-9.9c.4-.4 1-.4 1.4 0Zm-1.4 2.1-8 8-.4 2.2 2.2-.4 8-8-1.8-1.8Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-password-view > .profile-flow-header {
    --account-header-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 8.7V18h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E") !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    background: #fbfdff !important;
  }
}

/* Desktop-only final lender signature card lock - 20260603b */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    grid-area: signature !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    align-content: start !important;
    gap: 18px 24px !important;
    min-height: 430px !important;
    padding: 28px 30px !important;
    overflow: visible !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .06) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    grid-area: shead !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 88px !important;
    margin: 0 0 8px !important;
    padding: 0 0 24px !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before {
    content: "" !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    -webkit-mask: none !important;
    mask: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::after {
    content: "" !important;
    width: 32px !important;
    height: 32px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    background: #059669 !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='m15.7 4.3 4 4c.4.4.4 1 0 1.4L9.8 19.6c-.2.2-.4.3-.7.3l-4 .8c-.7.1-1.3-.5-1.2-1.2l.8-4c.1-.3.2-.5.3-.7l9.9-9.9c.4-.4 1-.4 1.4 0Zm-1.4 2.1-8 8-.4 2.2 2.2-.4 8-8-1.8-1.8Z'/%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='m15.7 4.3 4 4c.4.4.4 1 0 1.4L9.8 19.6c-.2.2-.4.3-.7.3l-4 .8c-.7.1-1.3-.5-1.2-1.2l.8-4c.1-.3.2-.5.3-.7l9.9-9.9c.4-.4 1-.4 1.4 0Zm-1.4 2.1-8 8-.4 2.2 2.2-.4 8-8-1.8-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2::after {
    content: "ใช้สำหรับเอกสารและสัญญา" !important;
    display: block !important;
    margin-top: 6px !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card {
    grid-area: spreview !important;
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(120px, 1fr) !important;
    gap: 12px !important;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 22px 22px 18px !important;
    overflow: hidden !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card strong {
    max-width: 48% !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card small {
    position: absolute !important;
    top: 21px !important;
    right: 20px !important;
    width: 45% !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    text-align: right !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview {
    display: grid !important;
    place-items: center !important;
    min-height: 128px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview.hidden {
    display: grid !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview.hidden::before {
    content: "ยังไม่มีลายเซ็น" !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-preview img {
    width: auto !important;
    max-width: 92% !important;
    max-height: 100px !important;
    object-fit: contain !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    grid-area: supload !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    min-height: 150px !important;
    padding: 24px !important;
    border: 1.5px dashed #b7e4cc !important;
    border-radius: 20px !important;
    background: #fbfffd !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone b {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
    color: transparent !important;
    background: #059669 !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='M19.4 10.1A7.5 7.5 0 0 0 5 8.5 5.5 5.5 0 0 0 5.5 19H9v-2H5.5a3.5 3.5 0 0 1-.1-7h1.1l.2-1.1A5.5 5.5 0 0 1 17.4 10l.3 1.1 1.1.1A3 3 0 0 1 18.5 17H15v2h3.5a5 5 0 0 0 .9-8.9ZM13 19v-6.2l2.1 2.1 1.4-1.4L12 9l-4.5 4.5 1.4 1.4 2.1-2.1V19h2Z'/%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='M19.4 10.1A7.5 7.5 0 0 0 5 8.5 5.5 5.5 0 0 0 5.5 19H9v-2H5.5a3.5 3.5 0 0 1-.1-7h1.1l.2-1.1A5.5 5.5 0 0 1 17.4 10l.3 1.1 1.1.1A3 3 0 0 1 18.5 17H15v2h3.5a5 5 0 0 0 .9-8.9ZM13 19v-6.2l2.1 2.1 1.4-1.4L12 9l-4.5 4.5 1.4 1.4 2.1-2.1V19h2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field > .field-help {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone strong {
    color: #059669 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-hint {
    display: block !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureEdit {
    grid-area: sedit !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] #profileSignatureDelete {
    grid-area: sdelete !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row .profile-section-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row strong {
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row small {
    margin-top: 4px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-action-row b {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border-top: 2px solid #94a3b8 !important;
    border-right: 2px solid #94a3b8 !important;
    transform: rotate(45deg) !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view {
    gap: 14px 16px !important;
    min-height: 390px !important;
    padding: 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 72px !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::before {
    width: 58px !important;
    height: 58px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view > .profile-flow-header::after {
    width: 27px !important;
    height: 27px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .profile-signature-view .profile-flow-header h2 {
    font-size: 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-upload-field {
    min-height: 190px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountProfileMount #userProfileForm[data-profile-flow="main"] .signature-dropzone {
    min-height: 128px !important;
  }
}
/* Desktop-only true EOF lender signature card lock - 20260603e */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] {
    grid-area: signature !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto 222px 74px !important;
    grid-template-areas:
      "shead shead"
      "spreview supload"
      "sedit sdelete" !important;
    gap: 18px 24px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 28px 30px !important;
    overflow: visible !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .06) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header {
    grid-area: shead !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 0 0 22px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::before {
    content: "" !important;
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 18px !important;
    background: #dcfce7 !important;
    box-shadow: 0 14px 34px rgba(34, 197, 94, .12) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::after {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 20px !important;
    width: 30px !important;
    height: 30px !important;
    background: #059669 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.4' 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-4 12.5-12.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.4' 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-4 12.5-12.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2 {
    display: block !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2::after {
    content: "ใช้สำหรับเอกสารและสัญญา" !important;
    display: block !important;
    margin-top: 5px !important;
    color: #64748b !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-back,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-advice-card {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card {
    grid-area: spreview !important;
    position: relative !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card > strong {
    max-width: calc(100% - 130px) !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card > small {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    max-width: 132px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: right !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview.hidden {
    display: grid !important;
    place-items: center !important;
    height: 100% !important;
    min-height: 132px !important;
    padding: 12px !important;
    background: transparent !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview.hidden::before {
    content: "ยังไม่มีลายเซ็น" !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-preview img {
    max-width: 84% !important;
    max-height: 112px !important;
    object-fit: contain !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field {
    grid-area: supload !important;
    display: grid !important;
    grid-template-rows: 150px auto !important;
    align-content: start !important;
    gap: 13px !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 9px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1.5px dashed #b7e4c7 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fffb 100%) !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone b {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    color: transparent !important;
    background: #16a34a !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M20 16.5a4.5 4.5 0 0 0-4.5-4.5h-1A6.5 6.5 0 0 0 2 14.5 4.5 4.5 0 0 0 6.5 19H17a3 3 0 0 0 3-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M20 16.5a4.5 4.5 0 0 0-4.5-4.5h-1A6.5 6.5 0 0 0 2 14.5 4.5 4.5 0 0 0 6.5 19H17a3 3 0 0 0 3-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone strong {
    color: #16a34a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone em,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone small,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field > .field-help {
    display: none !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-hint {
    display: block !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] #profileSignatureEdit {
    grid-area: sedit !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] #profileSignatureDelete {
    grid-area: sdelete !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 14px !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035) !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row .profile-section-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: #dcfce7 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row small {
    display: block !important;
    margin-top: 4px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row b {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    border-top: 2px solid #94a3b8 !important;
    border-right: 2px solid #94a3b8 !important;
    transform: rotate(45deg) !important;
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] {
    grid-template-rows: auto 196px 68px !important;
    gap: 14px 18px !important;
    padding: 22px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 74px !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::before {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] > .profile-flow-header::after {
    left: 16px !important;
    top: 16px !important;
    width: 26px !important;
    height: 26px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-flow-header h2 {
    font-size: 24px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-current-card,
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field {
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-upload-field {
    grid-template-rows: 130px auto !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .signature-dropzone {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    grid-template-columns: 44px minmax(0, 1fr) 12px !important;
    padding: 11px 14px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row .profile-section-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
}
/* Desktop-only lender signature action fit polish - 20260603f */
@media (min-width: 901px) {
  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row {
    grid-template-columns: 44px minmax(0, 1fr) 10px !important;
    gap: 11px !important;
    padding: 12px 13px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row .profile-section-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row strong {
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row small {
    font-size: 11.5px !important;
    line-height: 1.18 !important;
  }

  html body[data-page="account"]:not(.auth-locked):not(.mobile-mode) #accountPanel #accountProfileMount #userProfileForm[data-profile-flow="main"] section.profile-flow-view.profile-signature-view[data-profile-view="signature"] .profile-action-row b {
    width: 9px !important;
    height: 9px !important;
  }
}