/* ════════════════════════════════════════════════════════════════
             * การเงิน & บัญชี — Treasury Suite · Navy var(--brand-navy) · Gold var(--brand-gold) (fnx-)
             * Scoped to #pg-finance. <style> ใน body โหลดหลัง ket-theme.css —
             * !important ใช้เฉพาะจุดที่ต้องชนะ !important ของ ket-theme (th/td)
             * ════════════════════════════════════════════════════════════════ */
            #pg-finance { --fnx-px: clamp(16px, 3.6vw, 44px); padding: 0 !important; background: transparent !important; }

            /* ── HERO ── */
            .fnx-hero { position: relative; overflow: hidden; padding: 28px var(--fnx-px) 0;
              background: linear-gradient(158deg, #08192e 0%, var(--brand-navy) 56%, #15315e 100%); }
            .fnx-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
              background: radial-gradient(ellipse 58% 92% at 88% 24%, rgba(200,169,106,.14) 0%, transparent 60%); }
            .fnx-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
              background: linear-gradient(90deg, transparent, var(--brand-gold) 26%, #efd9a3 50%, var(--brand-gold) 74%, transparent);
              background-size: 200% 100%; animation: fnxGold 9s linear infinite; }
            @keyframes fnxGold { to { background-position: 200% 0; } }
            .fnx-hero-inner { position: relative; z-index: 1; }
            .fnx-eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-gold); font-weight: 700;
              display: inline-flex; align-items: center; gap: 9px; margin-bottom: 7px; }
            .fnx-eyebrow::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--brand-gold), transparent); }
            .fnx-h1 { margin: 0; font-family: 'Cinzel','Sarabun',serif; font-size: clamp(21px, 2.6vw, 27px); font-weight: 700;
              color: #fff; letter-spacing: .02em; line-height: 1.15; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
            .fnx-sub { margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.62); }

            /* ── TAB RAIL on navy (override base .fin-nav/.fin-tab-btn) ── */
            #pg-finance .fin-nav { margin: 20px 0 0; padding: 0; background: transparent; border: none;
              border-radius: 0; display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
            #pg-finance .fin-tab-btn { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px;
              padding: 12px 18px 13px; min-width: unset; border-radius: 10px 10px 0 0; background: transparent;
              color: rgba(255,255,255,.6); font-size: 13px; font-weight: 600; position: relative; white-space: nowrap; }
            #pg-finance .fin-tab-btn i { font-size: 14px; color: rgba(200,169,106,.75); }
            #pg-finance .fin-tab-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
            #pg-finance .fin-tab-btn.on { background: linear-gradient(180deg, rgba(200,169,106,.18), rgba(200,169,106,.07));
              color: #fff; font-weight: 700; }
            #pg-finance .fin-tab-btn.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
              background: linear-gradient(90deg, var(--brand-gold), #efd9a3 50%, var(--brand-gold)); z-index: 2; }
            #pg-finance .fin-tab-btn.on i { color: #e3c785; }
            #pg-finance .fin-tab-btn:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }

            /* ── BODY ── */
            .fnx-body { width: 100%;
              padding: 22px var(--fnx-px) 60px; box-sizing: border-box; }

            /* ── Daily-ledger header → glass deck ── */
            #pg-finance .ldg-header { background: rgba(255,255,255,.66);
              -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
              border: 1px solid rgba(255,255,255,.8); border-radius: 14px; padding: 14px 18px;
              box-shadow: 0 2px 10px rgba(15,42,82,.07), 0 8px 30px rgba(15,42,82,.05); margin-bottom: 16px; }
            #pg-finance .ldg-title { font-size: 16px; font-weight: 800; color: var(--tb-navy, var(--brand-navy)); }
            #pg-finance .ldg-title i { color: var(--tb-gold-deep, #a07d3a); }
            #pg-finance .ldg-nav-btn { border: 1.5px solid var(--tb-line, #d8dde6) !important; background: #fff !important;
              color: var(--tb-navy, var(--brand-navy)) !important; border-radius: 8px !important; }
            #pg-finance .ldg-date-pick { border: 1.5px solid var(--tb-line, #d8dde6); border-radius: 8px; font-weight: 600; }

            /* ── Action buttons (income / expense / close-day) ── */
            .fnx-act { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: none;
              border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: #fff;
              transition: filter .15s, transform .12s, box-shadow .15s; }
            .fnx-act:hover { filter: brightness(1.07); }
            .fnx-act:active { transform: scale(.97); }
            .fnx-act:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
            .fnx-act-income { background: linear-gradient(180deg, #0e8a44, #0a7a3b); box-shadow: 0 4px 12px rgba(10,122,59,.25); }
            .fnx-act-expense { background: linear-gradient(180deg, #d33b3b, #c92a2a); box-shadow: 0 4px 12px rgba(201,42,42,.22); }
            .fnx-act-closeday { background: linear-gradient(135deg, #a07d3a, var(--brand-gold) 60%, #e3c785); color: #0a1e3d;
              box-shadow: 0 4px 14px rgba(200,169,106,.32); }

            /* ── Filter deck (bank / receipts / tax) ── */
            #pg-finance .fnx-deck { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px;
              background: rgba(255,255,255,.66);
              -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
              border: 1px solid rgba(255,255,255,.8); border-radius: 14px; padding: 12px 14px;
              box-shadow: 0 2px 10px rgba(15,42,82,.07), 0 8px 30px rgba(15,42,82,.05); }

            /* ── Luxury tables (must defeat ket-theme th !important) ── */
            #pg-finance .ldg-tbl thead th,
            #pg-finance .fin-tbl thead th,
            #pg-finance .fin-tax-month-tbl th {
              background: linear-gradient(180deg, #f3f5f9, #eef1f6) !important;
              color: var(--tb-navy, var(--brand-navy)) !important;
              font-weight: 700 !important; font-size: 11px !important;
              letter-spacing: .04em !important; text-transform: uppercase !important;
              border-bottom: 1.5px solid var(--tb-line, #d8dde6) !important;
            }
            #pg-finance .ldg-tbl tfoot td {
              background: linear-gradient(135deg, #faf7f0, #f4ecda) !important;
              border-top: 2px solid #e7d6b5 !important;
              color: var(--tb-navy, var(--brand-navy));
            }

            /* ── KPI tiles (ldgRender injects .tx-kpi with fnx-k-* modifiers) ── */
            #pg-finance .tx-kpi { background: rgba(255,255,255,.66);
              -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
              border: 1px solid rgba(255,255,255,.8); border-radius: 14px; padding: 15px 18px 14px;
              box-shadow: 0 2px 10px rgba(15,42,82,.07), 0 8px 30px rgba(15,42,82,.05);
              position: relative; overflow: hidden; }
            #pg-finance .tx-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
              background: linear-gradient(90deg, var(--brand-gold), #efd9a3 50%, #a07d3a); opacity: .9; }
            #pg-finance .tx-kpi-val { font-family: 'Cinzel','Sarabun',serif; font-weight: 700; font-size: 21px; letter-spacing: .01em; }
            #pg-finance .tx-kpi-label { color: var(--tb-muted, #5b6b85); }
            #pg-finance .fnx-k-person  .tx-kpi-val { color: var(--tb-navy, var(--brand-navy)); }
            #pg-finance .fnx-k-company .tx-kpi-val { color: var(--tb-green, #0a7a3b); }
            #pg-finance .fnx-k-bank    .tx-kpi-val { color: #1d4ed8; }
            #pg-finance .fnx-k-person::before  { background: linear-gradient(90deg, var(--brand-navy), #1d3b6b); }
            #pg-finance .fnx-k-company::before { background: linear-gradient(90deg, #0a7a3b, #2ea36a); }
            #pg-finance .fnx-k-bank::before    { background: linear-gradient(90deg, #1e40af, #3b82f6); }
            #pg-finance .tx-kpi.red::before    { background: linear-gradient(90deg, #c92a2a, #e06666); }

            /* ── Pager ── */
            #pg-finance .fin-pager button { border: 1.5px solid var(--tb-line, #d8dde6); border-radius: 8px;
              background: #fff; font-weight: 600; color: var(--tb-text-2, #3c4a64); padding: 7px 14px; font-family: inherit; }
            #pg-finance .fin-pager button.on { background: var(--tb-navy, var(--brand-navy)); color: #e3c785; border-color: var(--tb-navy, var(--brand-navy)); }
            #pg-finance .fin-pager button:hover:not(:disabled):not(.on) { border-color: var(--brand-gold); color: var(--tb-navy, var(--brand-navy)); }

            /* ── Responsive ── */
            @media (max-width: 640px) {
              .fnx-hero { padding: 20px var(--fnx-px) 0; }
              #pg-finance .fin-tab-btn { padding: 10px 13px 12px; font-size: 12px; min-height: 44px; }
              .fnx-body { padding: 14px var(--fnx-px) 90px; }
              #pg-finance .ldg-header { padding: 12px 14px; }
              .fnx-act { min-height: 44px; }
            }

            /* ── Reduced motion (a11y house rule) ── */
            @media (prefers-reduced-motion: reduce) {
              .fnx-hero::after { animation: none; }
              .fnx-act, .fnx-act:active { transition: none; transform: none; }
            }