/* ═══════════════════════════════════════════════════════════════
     KDP Mobile Shell v2 — Solid Fintech Redesign
     Clean, high-contrast, no glass-morphism
     ═══════════════════════════════════════════════════════════════ */

    /* ── Shell ──────────────────────────────────────────────────── */
    #mobile-shell {
      display: none;
    }

    body.ms-mode {
      background: #f0f2f5 !important;
      font-family: 'Sarabun', system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    body.ms-mode>#app,
    body.ms-mode>#loginScreen,
    body.ms-mode>.mobile-header {
      display: none !important;
    }

    /* desktop chrome เป็น sibling ของ #mobile-shell (ไม่อยู่ใน #app) —
     * ต้องสั่งซ่อนตรง ๆ ไม่งั้น header/tabbar/FAB ของ desktop ทับ shell
     * (บั๊ก header ซ้อน 2 ชั้น + bottom bar ซ้อน 2 อัน, แก้ 2026-06-05) */
    body.ms-mode #kd-topnav,
    body.ms-mode #ket-tabbar,
    body.ms-mode #ket-mob-menu,
    body.ms-mode #ket-mob-overlay,
    body.ms-mode #ket-install-banner {
      display: none !important;
    }

    /* ket-theme จองที่ให้ desktop header/tabbar — shell ไม่ต้องการ */
    body.ms-mode {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    body.ms-mode #mobile-shell {
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
      position: relative;
      z-index: 10;
    }

    /* ── Header — solid navy, authoritative ─────────────────────── */
    .ms-header {
      position: sticky;
      top: 0;
      z-index: 50;
      height: 56px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #1a1a2e;
      color: #ffffff;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    }

    .ms-title {
      flex: 1;
      font-weight: 700;
      font-size: 17px;
      text-align: center;
      letter-spacing: -.01em;
    }

    .ms-back,
    .ms-menu {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: none;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .15s ease, background .15s ease;
      cursor: pointer;
    }

    .ms-back:active,
    .ms-menu:active {
      transform: scale(.9);
      background: rgba(255, 255, 255, .18);
    }

    .ms-back.hidden {
      display: none;
    }

    /* ── Views — clean padding, no glass ────────────────────────── */
    .ms-view {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
      animation: ms-fade-in .25s ease;
    }

    @keyframes ms-fade-in {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── Search bar — solid white, crisp ────────────────────────── */
    .ms-search-wrap {
      position: sticky;
      top: 8px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 11px 14px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
      margin-bottom: 16px;
    }

    .ms-search-wrap>i {
      color: #94a3b8;
      font-size: 15px;
    }

    .ms-search-wrap input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none !important;
      font-size: 15px;
      color: #1a1a2a;
      box-shadow: none !important;
    }

    .ms-search-wrap input::placeholder {
      color: #94a3b8;
    }

    .ms-clear {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: none;
      background: #e5e7eb;
      color: #64748b;
      font-size: 16px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    /* ── Cards — solid white, clean shadows ─────────────────────── */
    .ms-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ms-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
      transition: transform .15s ease;
      cursor: pointer;
    }

    .ms-card:active {
      transform: scale(.985);
    }

    .ms-card-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
    }

    .ms-card-name {
      font-weight: 700;
      font-size: 15px;
      color: #1a1a2a;
      letter-spacing: -.01em;
    }

    .ms-card-sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 3px;
    }

    .ms-card-meta {
      font-size: 12px;
      color: #64748b;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .ms-card-meta .ms-pill {
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      background: #eef2ff;
      color: #4338ca;
    }

    .ms-card-meta .ms-pill.warn {
      background: #fef3c7;
      color: #92400e;
    }

    .ms-card-meta .ms-pill.ok {
      background: #d1fae5;
      color: #065f46;
    }

    .ms-card-meta .ms-pill.danger {
      background: #fee2e2;
      color: #991b1b;
    }

    /* ── Empty / Loading ────────────────────────────────────────── */
    .ms-empty,
    .ms-loading {
      text-align: center;
      padding: 64px 16px;
      color: #94a3b8;
    }

    .ms-empty i {
      font-size: 48px;
      opacity: .3;
      margin-bottom: 12px;
      display: block;
    }

    .ms-empty p {
      font-size: 14px;
      margin: 0;
    }

    .ms-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: -4px;
      margin-right: 8px;
      border: 2.5px solid #e5e7eb;
      border-top-color: #3b5ccc;
      border-radius: 50%;
      animation: ms-spin .6s linear infinite;
    }

    @keyframes ms-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* ── Bottom nav — solid, iOS-style ──────────────────────────── */
    .ms-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
      background: #ffffff;
      border-top: 1px solid #e5e7eb;
      box-shadow: 0 -1px 6px rgba(0, 0, 0, .04);
    }

    .ms-nav-btn {
      border: none;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 0;
      border-radius: 10px;
      color: #94a3b8;
      transition: all .15s ease;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
    }

    .ms-nav-btn i {
      font-size: 20px;
    }

    .ms-nav-btn.active {
      color: #1a1a2e;
      background: #f0f2f5;
    }

    .ms-nav-btn:active {
      transform: scale(.94);
    }

    /* ── Login — bold, centered, professional ───────────────────── */
    .ms-login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 24px 20px;
      background: #1a1a2e;
      min-height: 100dvh;
    }

    .ms-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 32px;
      padding: 20px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      color: #ffffff;
    }

    .ms-brand i {
      font-size: 32px;
      color: #60a5fa;
    }

    .ms-brand div {
      display: flex;
      flex-direction: column;
      font-weight: 700;
      font-size: 18px;
    }

    .ms-brand small {
      font-weight: 400;
      color: #94a3b8;
      font-size: 12px;
    }

    .ms-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 20px;
    }

    .ms-form label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .ms-form input {
      border: 1.5px solid #e5e7eb;
      border-radius: 10px;
      padding: 12px 14px;
      background: #ffffff;
      font-size: 15px;
      min-height: 48px;
      color: #1a1a2a;
      transition: border-color .15s ease;
      box-shadow: none !important;
    }

    .ms-form input:focus {
      border-color: #3b5ccc;
      outline: none;
      box-shadow: 0 0 0 3px rgba(59, 92, 204, .12) !important;
    }

    .ms-btn {
      border: none;
      border-radius: 10px;
      padding: 14px 20px;
      min-height: 48px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .ms-btn-primary {
      background: #1a1a2e;
      color: #fff;
      box-shadow: 0 4px 14px rgba(26, 26, 46, .25);
      margin-top: 8px;
    }

    .ms-btn-primary:active {
      background: #2d2d4a;
    }

    .ms-btn:active {
      transform: scale(.97);
    }

    .ms-err {
      background: #fef2f2;
      color: #991b1b;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      border: 1px solid #fecaca;
    }

    /* ── Detail view — clean sections ───────────────────────────── */
    .ms-detail-section {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    .ms-detail-section h3 {
      margin: 0 0 12px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      color: #64748b;
      text-transform: uppercase;
    }

    .ms-kv {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 8px 12px;
      font-size: 14px;
    }

    @media (max-width: 360px) {
      .ms-kv {
        grid-template-columns: 92px 1fr;
        gap: 6px 10px;
        font-size: 13px;
      }
    }

    .ms-kv dt {
      color: #94a3b8;
      font-weight: 500;
    }

    .ms-kv dd {
      margin: 0;
      color: #1a1a2a;
      font-weight: 500;
      word-break: break-word;
    }

    /* ── Customer Profile Header (avatar + name + phone) ─────────── */
    .ms-cp-header {
      background: #1a1a2e;
      color: #fff;
      border-radius: 14px;
      padding: 16px;
      display: flex;
      gap: 14px;
      align-items: center;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(26, 26, 46, .18);
    }

    .ms-cp-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b5ccc, #6b46c1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 20px;
      color: #fff;
      flex-shrink: 0;
      letter-spacing: -.02em;
    }

    .ms-cp-info {
      flex: 1;
      min-width: 0;
    }

    .ms-cp-name {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.01em;
      line-height: 1.2;
    }

    .ms-cp-nick {
      font-size: 12px;
      color: #94a3b8;
      margin-top: 2px;
    }

    .ms-cp-meta {
      font-size: 12px;
      color: #cbd5e1;
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
    }

    .ms-cp-meta a {
      color: #60a5fa;
      text-decoration: none;
      font-weight: 600;
    }

    /* ── KPI grid (responsive 2/3 columns) ──────────────────────── */
    .ms-cp-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    @media (max-width: 380px) {
      .ms-cp-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .ms-kpi {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    }

    .ms-kpi-val {
      font-size: 16px;
      font-weight: 800;
      color: #1a1a2a;
      line-height: 1.1;
      letter-spacing: -.01em;
    }

    .ms-kpi-val.green {
      color: #059669;
    }

    .ms-kpi-val.red {
      color: #dc2626;
    }

    .ms-kpi-val.warn {
      color: #d97706;
    }

    .ms-kpi-lbl {
      font-size: 10px;
      color: #94a3b8;
      margin-top: 4px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    /* ── Tabs ──────────────────────────────────────────────────── */
    .ms-cp-tabs {
      display: flex;
      gap: 4px;
      background: #f1f5f9;
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .ms-cp-tabs::-webkit-scrollbar {
      display: none;
    }

    .ms-cp-tab {
      flex: 1;
      min-width: 72px;
      border: none;
      background: transparent;
      color: #64748b;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s ease;
    }

    .ms-cp-tab.on {
      background: #ffffff;
      color: #1a1a2a;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    }

    .ms-cp-tab .ms-tab-n {
      display: inline-block;
      min-width: 18px;
      padding: 0 5px;
      margin-left: 4px;
      background: #e5e7eb;
      color: #64748b;
      border-radius: 8px;
      font-size: 10px;
    }

    .ms-cp-tab.on .ms-tab-n {
      background: #3b5ccc;
      color: #fff;
    }

    .ms-cp-panel {
      display: none;
    }

    .ms-cp-panel.on {
      display: block;
    }

    /* ── Contract card (within profile) ────────────────────────── */
    .ms-contract-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    .ms-contract-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .ms-contract-no {
      font-weight: 800;
      font-size: 14px;
      color: #1a1a2a;
      letter-spacing: -.01em;
    }

    .ms-contract-meta {
      font-size: 12px;
      color: #64748b;
      margin-top: 4px;
      display: flex;
      flex-wrap: wrap;
      gap: 3px 10px;
    }

    .ms-contract-amounts {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-top: 8px;
      font-size: 13px;
    }

    .ms-contract-loan {
      font-weight: 700;
      color: #1a1a2a;
    }

    .ms-contract-debt {
      font-weight: 800;
    }

    .ms-contract-bar {
      height: 4px;
      background: #f1f5f9;
      border-radius: 4px;
      margin-top: 8px;
      overflow: hidden;
    }

    .ms-contract-bar-fill {
      height: 100%;
      background: #3b5ccc;
      transition: width .3s ease;
    }

    .ms-status-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      background: #eef2ff;
      color: #4338ca;
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .ms-status-badge.normal {
      background: #d1fae5;
      color: #065f46;
    }

    .ms-status-badge.overdue {
      background: #fef3c7;
      color: #92400e;
    }

    .ms-status-badge.court {
      background: #fee2e2;
      color: #991b1b;
    }

    .ms-status-badge.closed {
      background: #e5e7eb;
      color: #475569;
    }

    /* ── Payment row ───────────────────────────────────────────── */
    .ms-pay-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 8px;
      font-size: 13px;
    }

    .ms-pay-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .ms-pay-date {
      color: #64748b;
      font-size: 12px;
    }

    .ms-pay-amount {
      font-weight: 800;
      color: #059669;
      font-size: 14px;
    }

    .ms-pay-split {
      font-size: 11px;
      color: #64748b;
      margin-top: 4px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .ms-pay-cno {
      font-size: 11px;
      color: #4338ca;
      font-weight: 700;
    }

    /* ── Follow-up row ─────────────────────────────────────────── */
    .ms-fu-card {
      background: #ffffff;
      border-left: 3px solid #d97706;
      border: 1px solid #e5e7eb;
      border-left-width: 3px;
      border-left-color: #d97706;
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 8px;
    }

    .ms-fu-top {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #64748b;
    }

    .ms-fu-by {
      font-weight: 700;
      color: #1a1a2a;
    }

    .ms-fu-result {
      font-size: 13px;
      color: #1a1a2a;
      margin-top: 4px;
    }

    .ms-fu-note {
      font-size: 12px;
      color: #64748b;
      margin-top: 4px;
      font-style: italic;
    }

    .ms-action-btn.primary {
      background: #1a1a2e;
      color: #fff;
    }

    .ms-action-btn.primary:active {
      background: #2d2d4a;
    }

    .ms-action-btn.danger {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .ms-action-btn.danger:active {
      background: #fee2e2;
    }

    /* ── Bottom sheet menu — solid, dark overlay ────────────────── */
    .ms-sheet {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(15, 23, 42, .5);
      display: flex;
      align-items: flex-end;
      animation: ms-fade-in .2s ease;
    }

    .ms-sheet-card {
      width: 100%;
      background: #ffffff;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
      animation: ms-sheet-up .28s cubic-bezier(.34, 1.56, .64, 1);
      box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
    }

    @keyframes ms-sheet-up {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }

    .ms-sheet-user {
      text-align: center;
      font-weight: 700;
      font-size: 15px;
      padding: 8px 0 14px;
      border-bottom: 1px solid #e5e7eb;
      margin-bottom: 8px;
      color: #1a1a2a;
    }

    .ms-sheet-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      border: none;
      background: transparent;
      font-size: 15px;
      color: #1a1a2a;
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      transition: background .15s ease;
      font-family: inherit;
    }

    .ms-sheet-item:active {
      background: #f0f2f5;
    }

    .ms-sheet-item.ms-danger {
      color: #dc2626;
    }

    .ms-sheet-item i {
      width: 22px;
      text-align: center;
      font-size: 16px;
    }

    /* ── Bottom nav — 3 tabs (Search / Work / Menu) ─────────────── */
    .ms-nav {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .ms-nav-btn {
      position: relative;
    }

    .ms-nav-badge {
      position: absolute;
      top: 4px;
      right: 50%;
      transform: translateX(14px);
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      background: #c92a2a;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
      padding: 0 4px;
    }

    /* ── Work tab — KPI grid ────────────────────────────────────── */
    .ms-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: #d8dde6;
      margin-bottom: 12px;
    }

    .ms-kpi-cell {
      background: #fff;
      padding: 10px 6px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .ms-kpi-cell::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--accent);
    }

    .ms-kpi-cell .ms-kpi-lbl {
      font-size: 9px;
      color: #5b6b85;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .ms-kpi-cell .ms-kpi-num {
      font-size: 20px;
      font-weight: 700;
      color: var(--brand-navy);
      font-variant-numeric: tabular-nums;
      margin-top: 2px;
    }

    /* ── Work tab — greeting ────────────────────────────────────── */
    .ms-work-greeting {
      background: #fff;
      border-bottom: 1px solid #e6eaf2;
      padding: 12px 14px;
      margin-bottom: 0;
    }

    .ms-work-gr-sub {
      font-size: 13px;
      color: #5b6b85;
    }

    .ms-work-gr-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--brand-navy);
      margin-top: 2px;
    }

    .ms-work-gr-date {
      font-size: 11px;
      color: #9aa6bb;
      margin-top: 2px;
    }

    /* ── Work tab — section heading + cards ─────────────────────── */
    .ms-work-section-h {
      padding: 10px 14px 4px;
      font-size: 10px;
      font-weight: 700;
      color: #5b6b85;
      letter-spacing: .1em;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between;
    }

    .ms-work-card {
      background: #fff;
      margin: 0 12px 8px;
      border: 1px solid #d8dde6;
      border-left: 3px solid var(--lc, #d8dde6);
      border-radius: 4px;
      padding: 12px 14px;
    }

    .ms-work-card-top {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .ms-work-card-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--brand-navy);
      flex: 1;
    }

    .ms-work-card-meta {
      font-size: 11px;
      color: #5b6b85;
      margin-top: 3px;
      font-family: ui-monospace, monospace;
    }

    .ms-work-card-amounts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eef0f4;
    }

    .ms-work-card-amt-lbl {
      font-size: 9px;
      color: #9aa6bb;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .ms-work-card-amt-val {
      font-size: 15px;
      font-weight: 700;
      color: var(--brand-navy);
      font-variant-numeric: tabular-nums;
      margin-top: 2px;
    }

    .ms-work-card-amt-val.danger {
      color: #c92a2a;
    }

    .ms-work-card-btns {
      display: flex;
      gap: 6px;
      margin-top: 12px;
    }

    .ms-work-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 700;
      font-family: inherit;
      border-radius: 3px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: none;
    }

    .ms-work-btn.primary {
      background: var(--brand-navy);
      color: var(--brand-gold);
    }

    .ms-work-btn.ghost {
      background: #fff;
      color: var(--brand-navy);
      border: 1px solid #d8dde6;
      text-decoration: none;
    }

    .ms-work-btn.icon-only {
      flex: 0 0 36px;
      background: #fff;
      color: #5b6b85;
      border: 1px solid #d8dde6;
    }

    /* ── Quick action grid (profile detail) ──────────────────────── */
    .ms-quick-actions {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 12px;
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
    }

    .ms-qa-btn {
      background: #fff;
      color: var(--brand-navy);
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      padding: 10px 4px;
      cursor: pointer;
      font-family: inherit;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background .15s ease;
    }

    .ms-qa-btn.primary {
      background: var(--brand-navy);
      color: var(--brand-gold);
      border-color: var(--brand-navy);
    }

    .ms-qa-btn i {
      font-size: 16px;
    }

    .ms-qa-btn span {
      font-size: 11px;
      font-weight: 700;
    }

    .ms-qa-btn:active {
      opacity: .8;
    }

    /* ── Log Contact bottom sheet ─────────────────────────────────── */
    .ms-log-card {
      width: 100%;
      background: #fff;
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      max-height: 88%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: ms-sheet-up .28s cubic-bezier(.34, 1.56, .64, 1);
      box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
    }

    .ms-log-grabber {
      padding: 8px 0 4px;
      display: flex;
      justify-content: center;
    }

    .ms-log-grabber div {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: #e5e7eb;
    }

    .ms-log-hdr {
      padding: 8px 16px 14px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ms-log-hdr-sub {
      font-size: 9px;
      color: #94a3b8;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .ms-log-hdr-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--brand-navy);
      margin-top: 2px;
    }

    .ms-log-cancel {
      background: none;
      border: none;
      color: #64748b;
      font-size: 13px;
      cursor: pointer;
      font-family: inherit;
      padding: 6px 0;
    }

    .ms-log-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 14px 16px;
    }

    .ms-log-sec-lbl {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .ms-log-channels {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .ms-log-ch {
      padding: 10px 4px;
      background: #fff;
      color: #64748b;
      border: 1px solid #e5e7eb;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      font-family: inherit;
      transition: all .15s ease;
    }

    .ms-log-ch.on {
      background: var(--brand-navy);
      color: var(--brand-gold);
      border-color: var(--brand-navy);
    }

    .ms-log-ch i {
      font-size: 15px;
    }

    .ms-log-ch span {
      font-size: 11px;
      font-weight: 700;
    }

    .ms-log-outcomes {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      overflow: hidden;
    }

    .ms-log-outcome {
      padding: 12px 14px;
      border-bottom: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      background: #fff;
      transition: background .12s ease;
    }

    .ms-log-outcome:last-child {
      border-bottom: none;
    }

    .ms-log-outcome.on {
      background: #fffbf0;
    }

    .ms-log-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ms-log-outcome-lbl {
      flex: 1;
      font-size: 13px;
      font-weight: 500;
      color: #1a1a2a;
    }

    .ms-log-outcome.on .ms-log-outcome-lbl {
      font-weight: 700;
      color: var(--brand-navy);
    }

    .ms-log-radio {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 2px solid #e5e7eb;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      color: var(--brand-navy);
    }

    .ms-log-radio.on {
      border-color: var(--brand-gold);
      background: var(--brand-gold);
    }

    .ms-log-radio.on::after {
      content: '✓';
      color: var(--brand-navy);
      font-size: 9px;
      font-weight: 900;
    }

    .ms-log-promise {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .ms-log-date-input {
      flex: 1;
      border: 1px solid #e5e7eb;
      border-radius: 3px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 700;
      color: var(--brand-navy);
      font-family: inherit;
      background: #fff;
      outline: none;
    }

    .ms-log-date-input:focus {
      border-color: var(--brand-navy);
    }

    .ms-log-notes {
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      font-size: 13px;
      color: #1a1a2a;
      line-height: 1.5;
      font-family: inherit;
      resize: vertical;
      outline: none;
      min-height: 70px;
    }

    .ms-log-notes:focus {
      border-color: var(--brand-navy);
    }

    .ms-log-footer {
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid #e5e7eb;
      background: #fff;
      display: flex;
      gap: 10px;
    }

    .ms-log-btn-draft {
      flex: 1;
      padding: 12px;
      background: #fff;
      color: var(--brand-navy);
      border: 1px solid #e5e7eb;
      border-radius: 3px;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
    }

    .ms-log-btn-confirm {
      flex: 2;
      padding: 12px;
      background: var(--brand-navy);
      color: var(--brand-gold);
      border: 1px solid var(--brand-navy);
      border-radius: 3px;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: .04em;
    }

    .ms-log-btn-draft:active,
    .ms-log-btn-confirm:active {
      opacity: .8;
    }

    /* ═══════════════════════════════════════════════════════════════
     * LUXURY NAVY·GOLD OVERRIDES (2026-06-05) — ยกระดับ shell ให้เข้าชุด
     * ธีม desktop (var(--brand-navy) + var(--brand-gold)) อยู่ท้าย sheet = ชนะ rule เดิม
     * ═══════════════════════════════════════════════════════════════ */

    /* header: navy gradient + เส้นทองใต้แถบ */
    .ms-header {
      background: linear-gradient(120deg, #081a35 0%, var(--brand-navy) 70%, #15315e 100%);
      border-bottom: none;
      box-shadow: 0 1px 0 rgba(200, 169, 106, .55), 0 2px 14px rgba(5, 15, 35, .35);
    }
    .ms-title { font-weight: 800; letter-spacing: .01em; }
    .ms-back, .ms-menu { background: rgba(255, 255, 255, .08); border: 1px solid rgba(200, 169, 106, .3); }

    /* login: navy เต็มจอ + ปุ่มทอง */
    .ms-login { background: linear-gradient(165deg, #081a35 0%, var(--brand-navy) 60%, #122c56 100%); }
    .ms-btn-primary {
      background: linear-gradient(135deg, #a07d3a, var(--brand-gold) 60%, #e3c785);
      color: #0a1e3d;
      font-weight: 800;
      letter-spacing: .02em;
      border: none;
    }
    .ms-btn-primary:active { filter: brightness(.94); }

    /* search pill: focus ขอบทอง */
    .ms-search-wrap:focus-within {
      border-color: var(--brand-gold);
      box-shadow: 0 0 0 3px rgba(200, 169, 106, .22);
    }

    /* bottom nav: เส้นทองบนแถบ + แท็บ active สีนาวี-ทอง */
    .ms-nav {
      border-top: none;
      box-shadow: 0 -1px 0 rgba(200, 169, 106, .45), 0 -3px 14px rgba(15, 42, 82, .10);
    }
    .ms-nav-btn.active { color: var(--brand-navy); background: #f4ecda; }
    .ms-nav-btn.active i { color: #a07d3a; }

    /* work KPI cells + การ์ดงาน: ตัวเลข tabular */
    .ms-kpi-cell b, .ms-kpi-num { font-variant-numeric: tabular-nums; }

    /* Additional luxury overrides to turn light components dark */
    body.ms-mode {
      background:
        radial-gradient(ellipse 80% 50% at 10% 10%, rgba(200, 169, 106, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 90% 15%, rgba(10, 29, 55, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 85%, rgba(6, 14, 30, 0.95) 0%, transparent 80%),
        linear-gradient(160deg, #020617 0%, #071426 50%, #030712 100%) !important;
      background-attachment: fixed !important;
      color: var(--lg-text) !important;
    }
    .ms-search-wrap {
      background: var(--lg-glass-strong) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow) !important;
    }
    .ms-search-wrap input {
      color: var(--lg-text) !important;
    }
    .ms-card {
      background: var(--lg-glass) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow) !important;
    }
    .ms-card-name {
      color: rgba(var(--lg-tint), 1) !important;
    }
    .ms-card-sub, .ms-card-meta {
      color: var(--lg-text-soft) !important;
    }
    .ms-card-meta .ms-pill {
      background: rgba(var(--lg-tint), 0.15) !important;
      color: rgba(var(--lg-tint), 1) !important;
      border: 1px solid var(--lg-border-soft) !important;
    }
    .ms-nav {
      background: var(--lg-glass-dark) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    }
    .ms-nav-btn {
      color: var(--lg-text-soft) !important;
    }
    .ms-nav-btn.active {
      color: rgba(var(--lg-tint), 1) !important;
      background: rgba(255, 255, 255, 0.05) !important;
    }
    .ms-form {
      background: var(--lg-glass-strong) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow-lg) !important;
      backdrop-filter: blur(24px) !important;
    }
    .ms-form label {
      color: var(--lg-text) !important;
    }
    .ms-form input {
      background: rgba(8, 22, 43, 0.60) !important;
      border: 1.5px solid rgba(200, 169, 106, .35) !important;
      color: var(--lg-text) !important;
    }
    .ms-form input:focus {
      border-color: rgba(200, 169, 106, 0.85) !important;
      box-shadow: 0 0 0 4px rgba(200, 169, 106, 0.25) !important;
    }
    .ms-detail-section {
      background: var(--lg-glass) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow) !important;
    }
    .ms-detail-section h3 {
      color: rgba(var(--lg-tint), 1) !important;
    }
    .ms-kv dt {
      color: var(--lg-text-soft) !important;
    }
    .ms-kv dd {
      color: var(--lg-text) !important;
    }
    .ms-kpi {
      background: var(--lg-glass-strong) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow) !important;
    }
    .ms-kpi-val {
      color: var(--lg-text) !important;
    }
    .ms-cp-tabs {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid var(--lg-border-soft) !important;
    }
    .ms-cp-tab {
      color: var(--lg-text-soft) !important;
    }
    .ms-cp-tab.on {
      background: rgba(var(--lg-tint), 0.2) !important;
      color: rgba(var(--lg-tint), 1) !important;
    }
    .ms-cp-tab .ms-tab-n {
      background: rgba(255, 255, 255, 0.1) !important;
      color: var(--lg-text-soft) !important;
    }
    .ms-cp-tab.on .ms-tab-n {
      background: rgba(var(--lg-tint), 1) !important;
      color: #030a16 !important;
    }
    .ms-contract-card {
      background: var(--lg-glass) !important;
      border: 1px solid var(--lg-border) !important;
      box-shadow: var(--lg-shadow) !important;
    }
    .ms-contract-no {
      color: rgba(var(--lg-tint), 1) !important;
    }
    .ms-contract-loan {
      color: var(--lg-text) !important;
    }
    .ms-contract-meta {
      color: var(--lg-text-soft) !important;
    }
    .ms-contract-bar {
      background: rgba(255, 255, 255, 0.1) !important;
    }
    .ms-contract-bar-fill {
      background: rgba(var(--lg-tint), 1) !important;
    }
    .ms-pay-card {
      background: var(--lg-glass) !important;
      border: 1px solid var(--lg-border) !important;
    }
    .ms-pay-date {
      color: var(--lg-text-soft) !important;
    }
    .ms-pay-split {
      color: var(--lg-text-soft) !important;
    }
    .ms-pay-cno {
      color: rgba(var(--lg-tint), 1) !important;
    }
    .ms-fu-card {
      background: var(--lg-glass) !important;
      border: 1px solid var(--lg-border) !important;
      border-left-width: 4px !important;
      border-left-color: rgba(var(--lg-tint), 1) !important;
    }
    .ms-fu-by, .ms-fu-result {
      color: var(--lg-text) !important;
    }
    .ms-fu-note {
      color: var(--lg-text-soft) !important;
    }
    .ms-sheet-card {
      background: var(--lg-glass-strong) !important;
      border-top: 1px solid var(--lg-border) !important;
      backdrop-filter: blur(28px) saturate(200%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    }
    .ms-sheet-item {
      color: var(--lg-text) !important;
    }
    .ms-sheet-item:active {
      background: rgba(255, 255, 255, 0.05) !important;
    }

    /* menu sheet: หัวผู้ใช้โทนทอง */
    .ms-sheet-user { color: var(--brand-navy); font-weight: 800; }

    /* ═══════════════════════════════════════════════════════════════
       🔧 LUXURY DESIGN TOKENS (--lg-*)
       เดิมถูก "ใช้" ทั่ว shell + หน้า Legal/Enforcement แต่ "ไม่เคยถูกนิยาม"
       → var(--lg-*) ไม่มีค่า ทำให้ !important คำนวณเป็น unset
       → การ์ดโปร่งใส + ตัวอักษรดำบนพื้นกรมท่า = อ่านไม่ออก
       นิยามครั้งเดียวที่นี่ ใช้ได้ทั้งเอกสาร (custom props ไม่อิงลำดับ source)
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --lg-tint: 200, 169, 106;                       /* champagne gold (R,G,B สำหรับ rgba()) */
      --lg-text: #eaf0fa;                             /* ตัวอักษรหลักบนพื้นเข้ม */
      --lg-text-soft: #9fb0cc;                        /* ตัวอักษรรอง */
      --lg-glass: rgba(17, 32, 60, 0.62);             /* การ์ดกระจกกรมท่า */
      --lg-glass-strong: rgba(15, 28, 54, 0.88);      /* แผง/ฟอร์ม */
      --lg-glass-dark: rgba(7, 16, 34, 0.84);         /* แถบนำทาง/sidebar */
      --lg-border: rgba(200, 169, 106, 0.28);         /* เส้นขอบทองบาง */
      --lg-border-soft: rgba(255, 255, 255, 0.10);
      --lg-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.65);
      --lg-shadow-lg: 0 24px 60px -22px rgba(0, 0, 0, 0.78);
    }

    /* ═══════════════════════════════════════════════════════════════
       👤 CUSTOMER LIST — luxury navy-gold, app-grade
       redesign เฉพาะรายชื่อลูกค้าในแท็บค้นหา (#msSearchResults)
       ไม่กระทบ .ms-card ที่ใช้ในรายการอื่น (บัญชีธนาคาร ฯลฯ)
       ═══════════════════════════════════════════════════════════════ */
    .ms-search-wrap:focus-within {
      border-color: rgba(200, 169, 106, 0.7) !important;
      box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18) !important;
    }
    .ms-search-wrap input::placeholder { color: #7e8aa3; }

    .ms-result-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--lg-text-soft);
      letter-spacing: .01em;
    }
    .ms-result-bar b { color: #f1d79b; font-weight: 800; font-variant-numeric: tabular-nums; }

    #msSearchResults .ms-card {
      display: flex !important;
      align-items: center;
      gap: 13px;
      padding: 12px 12px 12px 17px !important;
      border-radius: 16px !important;
      position: relative;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }
    /* accent rail ทองตามสถานะ */
    #msSearchResults .ms-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, #e7c984, #b8935a);
    }
    #msSearchResults .ms-card.is-danger::before { background: linear-gradient(180deg, #f06a6a, #c0392b); }
    #msSearchResults .ms-card.is-warn::before   { background: linear-gradient(180deg, #f0b955, #d08a1a); }
    #msSearchResults .ms-card.is-ok::before     { background: linear-gradient(180deg, #43c98a, #10894a); }
    #msSearchResults .ms-card:active { transform: scale(.985); }

    .ms-av {
      flex: 0 0 auto;
      width: 46px; height: 46px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 15px; letter-spacing: .02em;
      background: linear-gradient(145deg, #1c4378, #0c2143);
      color: #ecd29a;
      box-shadow: inset 0 0 0 1px rgba(200, 169, 106, .45), 0 3px 8px -3px rgba(0, 0, 0, .6);
    }
    .ms-ci { flex: 1; min-width: 0; }
    #msSearchResults .ms-card-name {
      color: #f3f6fc !important;
      font-weight: 700; font-size: 15px; letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #msSearchResults .ms-card-sub {
      color: #9fb0cc !important;
      font-size: 12px; margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ms-card-sub .sep { color: rgba(200, 169, 106, .6); margin: 0 6px; }
    .ms-tags { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
    .ms-tags .ms-pill {
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
      background: rgba(255, 255, 255, .08); color: #cdd8ea;
      border: 1px solid rgba(255, 255, 255, .10);
      white-space: nowrap;
    }
    .ms-tags .ms-pill.danger { background: rgba(192, 57, 43, .22); color: #ff9b8e; border-color: rgba(240, 106, 106, .42); }
    .ms-tags .ms-pill.warn   { background: rgba(208, 138, 26, .18); color: #f3c878; border-color: rgba(240, 185, 85, .38); }
    .ms-tags .ms-pill.ok     { background: rgba(16, 137, 74, .22);  color: #7ee0ac; border-color: rgba(67, 201, 138, .42); }
    .ms-tags .ms-pill.gold   { background: rgba(200, 169, 106, .16); color: #ecd29a; border-color: rgba(200, 169, 106, .42); }

    .ms-end { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .ms-amt { text-align: right; white-space: nowrap; }
    .ms-amt .v { font-weight: 800; font-size: 14px; color: #ecd29a; font-variant-numeric: tabular-nums; }
    .ms-amt .l { display: block; font-size: 9px; color: #8593ad; font-weight: 600; margin-top: 1px; letter-spacing: .02em; }
    .ms-chev { color: rgba(200, 169, 106, .7); font-size: 13px; }

    #msSearchResults .ms-empty i { color: rgba(200, 169, 106, .55); }

    /* ═══════════════════════════════════════════════════════════════
       📱 FIELD APP RETROFIT (เฟส 1, 2026-06-21) — อ่านง่ายบนมือถือจริง
       • ฟอนต์เนื้อหา ≥16px (เดิม 11–15px เล็กไปสำหรับงานภาคสนาม)
       • touch target ≥44px (nav/ปุ่ม/แท็บ) ตาม WCAG/HIG
       • bottom nav 3 คอลัมน์ + เผื่อ safe-area (iPhone notch/home bar)
       • ตารางผ่อน (schedule tab) read-only
       อยู่ท้ายไฟล์ = ชนะ rule เดิม (ใช้ specificity เท่ากันแต่มาทีหลัง)
       ═══════════════════════════════════════════════════════════════ */

    /* base body text — อ่านสบายตาภาคสนาม */
    body.ms-mode { font-size: 16px; line-height: 1.5; }

    /* bottom nav: 3 คอลัมน์เท่ากัน + touch target สูง + safe-area */
    body.ms-mode .ms-nav {
      grid-template-columns: repeat(3, 1fr) !important;
      padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    body.ms-mode .ms-nav-btn {
      min-height: 56px;
      font-size: 13px;
    }
    body.ms-mode .ms-nav-btn i { font-size: 22px; }

    /* header back/menu: touch target ≥44px */
    body.ms-mode .ms-back,
    body.ms-mode .ms-menu { width: 44px; height: 44px; font-size: 17px; }
    body.ms-mode .ms-title { font-size: 18px; }

    /* search input: 16px กัน iOS zoom-on-focus + ปุ่มล้าง ≥36px */
    body.ms-mode .ms-search-wrap input { font-size: 16px; }
    body.ms-mode .ms-clear { width: 32px; height: 32px; font-size: 18px; }

    /* search result card: ชื่อ/ยอด ใหญ่ขึ้น */
    body.ms-mode #msSearchResults .ms-card-name { font-size: 16.5px !important; }
    body.ms-mode #msSearchResults .ms-card-sub { font-size: 13px !important; }
    body.ms-mode .ms-tags .ms-pill { font-size: 12px; padding: 4px 11px; }
    body.ms-mode .ms-av { width: 50px; height: 50px; font-size: 16px; }

    /* customer profile: tabs/kv/kpi ใหญ่ขึ้น + แท็บแตะง่าย */
    body.ms-mode .ms-cp-tab { font-size: 14px; min-height: 44px; padding: 10px 12px; }
    body.ms-mode .ms-cp-tab .ms-tab-n { font-size: 12px; }
    body.ms-mode .ms-kv { font-size: 15px; }
    body.ms-mode .ms-kpi-val { font-size: 18px; }
    body.ms-mode .ms-kpi-lbl { font-size: 11px; }
    body.ms-mode .ms-cp-name { font-size: 19px; }
    body.ms-mode .ms-cp-meta { font-size: 13px; }
    body.ms-mode .ms-detail-section h3 { font-size: 13px; }

    /* contract / payment / follow-up cards in profile */
    body.ms-mode .ms-contract-no { font-size: 16px; }
    body.ms-mode .ms-contract-meta { font-size: 13px; }
    body.ms-mode .ms-contract-amounts { font-size: 14.5px; }
    body.ms-mode .ms-pay-card { font-size: 14px; }
    body.ms-mode .ms-pay-amount { font-size: 16px; }
    body.ms-mode .ms-pay-split { font-size: 12.5px; }
    body.ms-mode .ms-fu-result { font-size: 14px; }
    body.ms-mode .ms-fu-note,
    body.ms-mode .ms-fu-top { font-size: 13px; }

    /* quick action + work buttons: touch target ≥44px */
    body.ms-mode .ms-qa-btn { min-height: 56px; }
    body.ms-mode .ms-qa-btn span { font-size: 12px; }
    body.ms-mode .ms-work-btn { min-height: 44px; font-size: 13px; }
    body.ms-mode .ms-work-card { cursor: pointer; }
    body.ms-mode .ms-work-card-name { font-size: 16px; }
    body.ms-mode .ms-work-card-meta { font-size: 12.5px; }
    body.ms-mode .ms-work-card-amt-val { font-size: 16px; }
    body.ms-mode .ms-work-card-amt-lbl { font-size: 10.5px; }
    body.ms-mode .ms-kpi-cell .ms-kpi-num { font-size: 22px; }
    body.ms-mode .ms-kpi-cell .ms-kpi-lbl { font-size: 10px; }

    /* menu sheet items: touch target ≥48px + อ่านง่าย */
    body.ms-mode .ms-sheet-item { min-height: 52px; font-size: 16px; }
    body.ms-mode .ms-launch { min-height: 64px; }

    /* login form: input 16px (กัน iOS zoom) + ปุ่ม สูง */
    body.ms-mode .ms-form input { font-size: 16px; min-height: 50px; }
    body.ms-mode .ms-btn { min-height: 52px; font-size: 16px; }
    body.ms-mode .ms-form label { font-size: 14px; }

    /* empty/loading states */
    body.ms-mode .ms-empty p,
    body.ms-mode .ms-loading { font-size: 15px; }

    /* ── Schedule (ตารางผ่อน) panel — read-only ─────────────────── */
    .ms-sched-block {
      background: var(--lg-glass, #fff);
      border: 1px solid var(--lg-border, #e5e7eb);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: var(--lg-shadow, 0 1px 3px rgba(0, 0, 0, .04));
    }
    .ms-sched-hd {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }
    .ms-sched-cno { font-weight: 800; font-size: 16px; color: rgba(var(--lg-tint, 200, 169, 106), 1); }
    .ms-sched-prog { font-size: 13px; font-weight: 700; color: var(--lg-text-soft, #64748b); font-variant-numeric: tabular-nums; }
    .ms-sched-sub { font-size: 13px; color: var(--lg-text-soft, #64748b); margin-top: 8px; }
    .ms-sched-rows { margin-top: 10px; }
    .ms-sched-row {
      display: grid;
      grid-template-columns: 56px 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--lg-border-soft, #f1f5f9);
      font-size: 14px;
    }
    .ms-sched-row:last-child { border-bottom: none; }
    .ms-sched-n { font-weight: 700; color: var(--lg-text, #1a1a2a); }
    .ms-sched-d { color: var(--lg-text-soft, #64748b); font-size: 13px; }
    .ms-sched-a { font-weight: 700; color: var(--lg-text, #1a1a2a); font-variant-numeric: tabular-nums; text-align: right; }
    .ms-sched-st { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--lg-text-soft, #94a3b8); }
    .ms-sched-row.paid .ms-sched-st { color: #43c98a; }
    .ms-sched-row.paid .ms-sched-st i { font-size: 12px; }
    .ms-sched-row.due .ms-sched-st { color: #f0b955; }
    .ms-sched-more { text-align: center; font-size: 13px; color: var(--lg-text-soft, #94a3b8); padding: 10px 0 2px; }

    /* ═══════════════════════════════════════════════════════════════
       รับชำระ CTA (โปรไฟล์ mShell) + Quick Pay modal บนมือถือ
       — เปิด Quick Pay เดิม (#qp-modal) ไม่มี flow จ่ายใหม่ในนี้
       ═══════════════════════════════════════════════════════════════ */

    /* CTA หลัก เต็มกว้าง สไตล์ formal (navy + gold accent) */
    .ms-pay-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      min-height: 52px;
      margin: 4px 0 14px;
      padding: 14px 18px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #1a1a2e 0%, #24304f 100%);
      color: #fff;
      font-family: inherit;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .01em;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(20, 28, 56, .28);
      border-bottom: 3px solid #c8a96a;
    }
    .ms-pay-cta i { color: #e6c884; font-size: 16px; }
    .ms-pay-cta:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(20, 28, 56, .28); }

    /* ── Quick Pay modal บน mShell ──────────────────────────────────
       #qp-modal เป็น sibling ของ #app (ไม่โดน body.ms-mode>#app{display:none}
       ซ่อน) และ .modal-overlay z-index:500 > #mobile-shell z-index:10 อยู่แล้ว
       → โผล่เหนือ shell ได้โดยไม่ต้องย้าย node (กระทบ desktop = 0).
       ที่นี่แค่จัดทรงให้พอดีจอมือถือ (bottom-sheet) เฉพาะ body.ms-mode */
    body.ms-mode #qp-modal {
      z-index: 4000;
      /* เหนือ shell + sheet อื่น ๆ ของ mShell (msSheet/msLogSheet ~z 100) */
      padding: 0;
      align-items: flex-end;
      /* bottom-sheet */
    }
    body.ms-mode #qp-modal .modal-box {
      max-width: 100% !important;
      width: 100%;
      margin: 0;
      border-radius: 18px 18px 0 0;
      max-height: 92dvh;
      display: flex;
      flex-direction: column;
      padding-bottom: env(safe-area-inset-bottom);
      animation: msQpUp .22s ease;
    }
    @keyframes msQpUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    body.ms-mode #qp-modal .modal-content {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.ms-mode #qp-modal .modal-hd { position: sticky; top: 0; z-index: 1; }
    /* input ≥16px (กัน iOS zoom) + ปุ่ม/ช่องแตะ ≥44px */
    body.ms-mode #qp-modal input,
    body.ms-mode #qp-modal select,
    body.ms-mode #qp-modal textarea {
      font-size: 16px !important;
      min-height: 46px;
    }
    body.ms-mode #qp-modal button { min-height: 46px; }
    body.ms-mode #qp-modal .modal-close { min-height: 44px; min-width: 44px; }

    /* ═══════════════════════════════════════════════════════════════
       #4 สแกน QR เปิดสัญญา — ปุ่มในช่องค้นหา + overlay กล้องสด/fallback รูป
       (DOM สร้างด้วย JS; CSS scope .ms-mode/.ms-scan-*)
       ═══════════════════════════════════════════════════════════════ */
    .ms-scan-btn {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      min-width: 36px;
      border: none;
      border-radius: 10px;
      background: #1a1a2e;
      color: #e6c884;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .ms-scan-btn:active { transform: scale(.94); }
    body.ms-mode .ms-scan-btn { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

    .ms-scan-ov {
      position: fixed;
      inset: 0;
      z-index: 5000; /* เหนือ shell/sheet ทั้งหมด */
      background: #0a0a14;
      display: flex;
      flex-direction: column;
      animation: ms-fade-in .18s ease;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .ms-scan-top {
      flex: 0 0 auto;
      height: 56px;
      padding: 0 14px calc(0px) 16px;
      padding-top: env(safe-area-inset-top);
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
    }
    .ms-scan-ttl { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
    .ms-scan-ttl i { color: #e6c884; }
    .ms-scan-x {
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 12px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }
    .ms-scan-x:active { background: rgba(255, 255, 255, .22); }
    .ms-scan-stage {
      flex: 1 1 auto;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }
    .ms-scan-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .ms-scan-ov.no-cam .ms-scan-stage { background: #14141f; }
    .ms-scan-ov.no-cam .ms-scan-video,
    .ms-scan-ov.no-cam .ms-scan-frame { display: none; }
    .ms-scan-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(70vw, 260px);
      height: min(70vw, 260px);
      transform: translate(-50%, -50%);
      border: 2px solid rgba(230, 200, 132, .9);
      border-radius: 18px;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
      overflow: hidden;
    }
    .ms-scan-line {
      position: absolute;
      left: 6%;
      right: 6%;
      top: 0;
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(90deg, transparent, #e6c884, transparent);
      animation: ms-scan-sweep 2s ease-in-out infinite;
    }
    @keyframes ms-scan-sweep {
      0% { top: 4%; }
      50% { top: 92%; }
      100% { top: 4%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ms-scan-line { animation: none; top: 50%; }
      .ms-scan-ov { animation: none; }
    }
    .ms-scan-hint {
      flex: 0 0 auto;
      text-align: center;
      color: #cbd5e1;
      font-size: 14px;
      line-height: 1.5;
      padding: 14px 20px 6px;
      min-height: 24px;
    }
    .ms-scan-hint i { color: #e6c884; }
    .ms-scan-actions {
      flex: 0 0 auto;
      padding: 8px 20px 22px;
    }
    .ms-scan-file {
      width: 100%;
      min-height: 52px;
      border: 1px solid rgba(230, 200, 132, .5);
      border-radius: 12px;
      background: rgba(255, 255, 255, .06);
      color: #fff;
      font-family: inherit;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      cursor: pointer;
    }
    .ms-scan-file i { color: #e6c884; }
    .ms-scan-file:active { background: rgba(255, 255, 255, .14); }

    /* ── ปิดยอดของฉัน (collector cash close) — touch ≥44px, input ≥16px กัน iOS zoom ── */
    .ms-cc-warn {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      color: #9a3412;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.45;
      margin-bottom: 14px;
    }
    .ms-cc-warn i { color: #ea580c; margin-right: 4px; }
    .ms-cc-meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
      color: #475569;
      margin-bottom: 12px;
    }
    .ms-cc-meta i { color: #94a3b8; margin-right: 4px; }
    .ms-cc-sysbox {
      background: #0f2a52;
      border-radius: 14px;
      padding: 16px 18px;
      text-align: center;
      margin-bottom: 18px;
    }
    .ms-cc-sys-lbl { color: #c8a96a; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
    .ms-cc-sys-val { color: #fff; font-size: 28px; font-weight: 800; letter-spacing: .3px; }
    .ms-cc-field-lbl {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      margin: 0 0 6px;
    }
    .ms-cc-input {
      width: 100%;
      min-height: 48px;
      box-sizing: border-box;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 18px;
      font-weight: 700;
      font-family: inherit;
      color: #0f172a;
      margin-bottom: 10px;
    }
    .ms-cc-input:focus { outline: none; border-color: #0f2a52; }
    .ms-cc-diff {
      min-height: 24px;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .ms-cc-diff.ok { color: #059669; }
    .ms-cc-diff.over { color: #2563eb; }
    .ms-cc-diff.short { color: #dc2626; }
    .ms-cc-note {
      width: 100%;
      box-sizing: border-box;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 16px;
      font-family: inherit;
      color: #0f172a;
      resize: vertical;
      margin-bottom: 14px;
    }
    .ms-cc-note:focus { outline: none; border-color: #0f2a52; }
    .ms-cc-prev {
      font-size: 12px;
      color: #64748b;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 14px;
    }
    .ms-cc-confirm {
      width: 100%;
      min-height: 50px;
      border: none;
      border-radius: 12px;
      background: #0f2a52;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
    }
    .ms-cc-confirm:active { background: #163a6e; }
    .ms-cc-confirm:disabled { opacity: .55; }

    /* ═══════════════════════════════════════════════════════════════
       CLEAN PROFESSIONAL LIGHT (2026-06-23) — เฉพาะ "หน้าค้นหา"
       (เจ้าของรีวิว: หน้าค้นหาเดิม = "AI slop"; ขอ ขาวสะอาด + นาวี/ทองคุมโทน)
       ⚠️ work tab + โปรไฟล์ + login = คงโทนมืดเดิม (มติเจ้าของ 2026-06-23)
       กลไก: ไม่พลิก --lg-* (ปล่อยมืดเดิมทั้ง shell); สไตล์เฉพาะ element ที่
       อยู่แต่ในหน้าค้นหา (.ms-search-wrap / #msSearchResults / landing) ให้สว่าง
       + พื้นหลังสว่างเฉพาะตอนอยู่แท็บค้นหาผ่าน :has() (header/nav มืดเดิม)
       ═══════════════════════════════════════════════════════════════ */
    /* พื้นหลังสว่างเฉพาะเมื่อแท็บค้นหาเปิดอยู่ — ID ใน :has() = specificity สูง ชนะ body.ms-mode!important */
    body.ms-mode:has(#msTabSearch:not(.hidden)) {
      background: #eef1f6 !important;
      background-attachment: initial !important;
    }

    /* แถบค้นหา — ขาว ขอบบาง โฟกัสนาวี */
    body.ms-mode .ms-search-wrap {
      background: #ffffff !important;
      border: 1px solid #dfe4ee !important;
      box-shadow: 0 1px 3px rgba(16, 32, 60, .06) !important;
      border-radius: 14px !important;
    }
    body.ms-mode .ms-search-wrap > i { color: #9aa6bb !important; }
    body.ms-mode .ms-search-wrap input { color: #16233a !important; }
    body.ms-mode .ms-search-wrap input::placeholder { color: #9aa6bb; }
    body.ms-mode .ms-search-wrap:focus-within {
      border-color: #0f2a52 !important;
      box-shadow: 0 0 0 3px rgba(15, 42, 82, .12) !important;
    }
    body.ms-mode .ms-scan-btn { background: #0f2a52; color: #e6c884; }

    /* ── การ์ดผลค้นหา — ขาวสะอาด, รางสถานะคงเดิม (ทอง/แดง/เหลือง/เขียว) ── */
    body.ms-mode #msSearchResults .ms-card {
      background: #ffffff !important;
      border: 1px solid #e6eaf2 !important;
      box-shadow: 0 1px 2px rgba(16, 32, 60, .05), 0 1px 3px rgba(16, 32, 60, .04) !important;
      border-radius: 14px !important;
    }
    body.ms-mode #msSearchResults .ms-card-name { color: #16233a !important; }
    body.ms-mode #msSearchResults .ms-card-sub  { color: #6b7896 !important; }
    body.ms-mode .ms-card-sub .sep { color: #c8a96a; }
    body.ms-mode .ms-av {
      background: linear-gradient(145deg, #18386a, #0f2a52) !important;
      color: #e8d5a8 !important;
      box-shadow: inset 0 0 0 1px rgba(200, 169, 106, .35), 0 1px 3px rgba(15, 42, 82, .2) !important;
    }
    body.ms-mode .ms-tags .ms-pill { background: #eef2fa; color: #3a4d72; border-color: #dfe6f3; }
    body.ms-mode .ms-tags .ms-pill.danger { background: #fdecec; color: #b42318; border-color: #f7cfcb; }
    body.ms-mode .ms-tags .ms-pill.warn   { background: #fef3e2; color: #9a5b08; border-color: #f6dcb0; }
    body.ms-mode .ms-tags .ms-pill.ok     { background: #e7f6ee; color: #0a7a44; border-color: #c3e9d3; }
    body.ms-mode .ms-tags .ms-pill.gold   { background: #f6efde; color: #7a5a1e; border-color: #e7d6a8; }
    body.ms-mode .ms-amt .v { color: #0f2a52 !important; }
    body.ms-mode .ms-amt .l { color: #8a97ad !important; }
    body.ms-mode .ms-chev { color: #b9c2d4 !important; }
    body.ms-mode .ms-result-bar { color: #6b7896 !important; }
    body.ms-mode .ms-result-bar b { color: #0f2a52 !important; }
    body.ms-mode #msSearchResults .ms-empty i { color: #cdd6e6 !important; }

    /* ═══ Landing หน้าค้นหา (ก่อนพิมพ์) — ทางลัด + ค้นหาล่าสุด ═══ */
    .ms-land-sec {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; font-weight: 800; letter-spacing: .04em;
      color: #8a97ad; text-transform: uppercase;
      margin: 4px 2px 10px;
    }
    .ms-land-clear {
      border: none; background: none; color: #0f2a52; font-family: inherit;
      font-size: 12.5px; font-weight: 700; cursor: pointer;
      text-transform: none; letter-spacing: 0; padding: 4px 6px;
    }
    .ms-land-shortcuts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
    .ms-sc {
      display: flex; align-items: center; gap: 14px; width: 100%;
      background: #fff; border: 1px solid #e6eaf2; border-radius: 14px;
      padding: 14px 16px; cursor: pointer; font-family: inherit; text-align: left;
      box-shadow: 0 1px 2px rgba(16, 32, 60, .05);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .ms-sc:active { transform: scale(.99); box-shadow: 0 1px 2px rgba(16, 32, 60, .08); }
    .ms-sc-ic {
      flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
      display: flex; align-items: center; justify-content: center; font-size: 19px;
    }
    .ms-sc-ic.blue { background: #eaf0fb; color: #1f4fa3; }
    .ms-sc-ic.gold { background: linear-gradient(145deg, #18386a, #0f2a52); color: #e8d5a8; }
    .ms-sc-ic.navy { background: #eef2fa; color: #0f2a52; }
    .ms-sc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ms-sc-tx b { font-size: 16px; font-weight: 700; color: #16233a; letter-spacing: -.01em; }
    .ms-sc-tx small { font-size: 12.5px; color: #7a8499; }
    .ms-sc-go { flex: 0 0 auto; color: #c2cbdb; font-size: 14px; }
    .ms-land-recent { display: flex; flex-direction: column; gap: 8px; }
    .ms-recent {
      display: flex; align-items: center; gap: 12px; width: 100%;
      background: #fff; border: 1px solid #e6eaf2; border-radius: 12px;
      padding: 11px 14px; cursor: pointer; font-family: inherit; text-align: left;
      transition: background .12s ease;
    }
    .ms-recent:active { background: #f6f8fc; }
    .ms-recent-av {
      flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      background: #eef2fa; color: #0f2a52; font-weight: 800; font-size: 13px;
    }
    .ms-recent-nm {
      flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: #1f2d44;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ms-recent-ic { flex: 0 0 auto; color: #b9c2d4; font-size: 13px; }
    .ms-land-hint {
      text-align: center; color: #9aa6bb; font-size: 14px; line-height: 1.6;
      padding: 32px 26px;
    }
    .ms-land-hint i { display: block; font-size: 34px; color: #cdd6e6; margin-bottom: 12px; }