#detailModal {
            --lux-gold: var(--brand-gold);
            --lux-gold-soft: #e6cf9c;
            --lux-gold-deep: #9a7b3c;
            --lux-navy: var(--brand-navy);
          }
          /* กล่อง: ขอบทอง + มุมมน + เงาลึก + ปิด backdrop-filter glass (ต้นเหตุแลคหลัก) */
          #detailModal .modal-box {
            border: 1px solid rgba(200, 169, 106, .42);
            border-radius: 16px;
            box-shadow: 0 30px 80px rgba(8, 18, 40, .45);
            background: #ffffff !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            will-change: auto !important;
            /* แทน ket-glassIn ที่ animate filter:blur (แพง) ด้วย transform/opacity ล้วน */
            animation: dmBoxIn .26s cubic-bezier(.2, .7, .3, 1) both !important;
          }
          /* PERF: ปิด glass/will-change ทุกชั้นในโมดอล — ket-theme ใส่ backdrop-filter blur(32px)+will-change
             ทำให้ทุกเฟรมต้องเบลอ backdrop ใหม่ = แลคหนัก (พิสูจน์ด้วย profiler: scroll 112ms -> 59ms/frame) */
          #detailModal .card,
          #detailModal .panel,
          #detailModal .surface,
          #detailModal .dashboard-card,
          #detailModal input,
          #detailModal select,
          #detailModal textarea,
          #detailModal tbody tr td,
          #detailModal tbody tr:hover td {
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            will-change: auto !important;
          }
          /* หัว modal: น้ำเงินหรู + เส้นทองคาดล่าง + ชื่ออ่านง่ายขึ้น */
          #detailModal .modal-hd {
            background:
              radial-gradient(680px 200px at 92% -70%, rgba(200, 169, 106, .24), transparent 60%),
              linear-gradient(135deg, #16243f, var(--brand-navy) 55%, #091a35);
            border-bottom: 2px solid var(--lux-gold);
            padding: 18px 26px;
          }
          #detailModal .modal-hd h2 { font-size: 19px; letter-spacing: .2px; }
          #detailModal .modal-hd .sub { font-size: 12.5px; opacity: .85; }
          #detailModal .modal-close { font-size: 24px; }
          /* แท็บ: ใหญ่/ห่างขึ้น อ่านง่าย + active ทอง */
          #detailModal .modal-tabs {
            background: linear-gradient(180deg, #fbfaf6, #f3f2ec);
            padding: 0 8px; flex-wrap: wrap; gap: 2px;
          }
          #detailModal .modal-tab {
            font-size: 13.5px; padding: 13px 18px;
            border-bottom-width: 3px; border-radius: 8px 8px 0 0;
            transition: background .15s, color .15s;
          }
          #detailModal .modal-tab:hover { background: rgba(200, 169, 106, .09); color: var(--lux-navy); }
          #detailModal .modal-tab.on {
            color: var(--lux-navy); border-bottom-color: var(--lux-gold);
            background: linear-gradient(180deg, rgba(200, 169, 106, .17), transparent);
          }
          /* เนื้อหา: พื้นนวลอุ่น หายใจมากขึ้น */
          #detailModal .modal-content {
            background: linear-gradient(180deg, #f6f4ee, #f2f3f6);
            padding: 22px 24px;
          }
          /* การ์ดในแท็บสรุป: ขอบทองบาง + มุมมน + contain:content (ลดแลคตอน scroll) */
          #detailModal .dashboard-card {
            border: 1px solid #e8e2d3 !important;
            border-radius: 14px !important;
            padding: 16px !important;
            box-shadow: 0 2px 12px rgba(15, 42, 82, .06) !important;
            contain: content;
          }
          #detailModal .dashboard-card > div:first-child { font-size: 13.5px !important; }
          /* คอลัมน์ซ้ายกว้างขึ้น ให้การ์ด "ข้อมูลสัญญา" (กริด 2 ช่อง) พอดีไม่ล้น */
          #detailModal .dashboard-col-left { max-width: 400px !important; min-width: 320px !important; }
          /* แท็บสรุปช่องแน่น — กระชับฟอนต์/ระยะลงนิดให้พอดี (ยังใหญ่กว่าเดิม 12px) */
          #detailModal #dt-sum .ff input,
          #detailModal #dt-sum .ff select,
          #detailModal #dt-sum .ff textarea {
            font-size: 13px !important;
            padding: 7px 9px !important;
          }
          /* ── อ่านง่าย: ฟิลด์ใหญ่ขึ้น (override inline font-size:12px / padding:5px 8px) ── */
          #detailModal .ff input,
          #detailModal .ff select,
          #detailModal .ff textarea {
            font-size: 13.5px !important;
            padding: 8px 11px !important;
            border-radius: 8px !important;
            border: 1px solid #dfe3ea !important;
          }
          #detailModal .ff label {
            font-size: 11.5px !important; color: #5b6b85 !important; letter-spacing: .02em;
          }
          #detailModal .ff input:focus,
          #detailModal .ff select:focus,
          #detailModal .ff textarea:focus {
            border-color: var(--lux-gold-deep) !important;
            box-shadow: 0 0 0 3px rgba(154, 123, 60, .32) !important;
          }
          /* section-title อ่านชัด */
          #detailModal .section-title { font-size: 14px; color: var(--lux-navy); }
          /* ปุ่มในการ์ด hover นุ่ม */
          #detailModal .dashboard-card .btn { transition: transform .12s; }
          #detailModal .dashboard-card .btn:hover { transform: translateY(-1px); }
          /* ── อนิเมชันลื่น ให้รู้สึกไม่แลค (transform/opacity = GPU composite ไม่เพิ่มภาระจริง) ── */
          #detailModal.open .modal-box { animation: dmBoxIn .26s cubic-bezier(.2, .7, .3, 1) both; }
          @keyframes dmBoxIn {
            from { opacity: 0; transform: translateY(14px) scale(.985); }
            to { opacity: 1; transform: none; }
          }
          /* สลับแท็บ = เฟดเข้าเนียน ๆ (opacity ล้วน ไม่มี reflow) */
          #detailModal .tab-content.on { animation: dmTabIn .2s ease both; }
          @keyframes dmTabIn { from { opacity: 0; } to { opacity: 1; } }
          @media (prefers-reduced-motion: reduce) {
            #detailModal .modal-tab, #detailModal .dashboard-card .btn { transition: none !important; }
            #detailModal.open .modal-box, #detailModal .tab-content.on { animation: none !important; }
          }