#pg-referrer { --rfx-navy:var(--brand-navy); --rfx-gold:var(--brand-gold); }
            #pg-referrer .rfx-wrap { display:flex; flex-direction:column; gap:10px; }
            /* ── Header: ชื่อหน้า + ตัวกรองช่วงเวลา ── */
            #pg-referrer .rfx-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
              background:linear-gradient(135deg,var(--brand-navy),#15315e); border-radius:12px; padding:13px 18px; color:#fff; }
            #pg-referrer .rfx-head h2 { margin:0; font-size:16.5px; display:flex; align-items:center; gap:8px; color:#fff; }
            #pg-referrer .rfx-sub { font-size:11.5px; color:rgba(255,255,255,.55); margin-top:3px; }
            #pg-referrer .rfx-filters { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
            #pg-referrer .rfx-chip { border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.07); color:rgba(255,255,255,.85);
              border-radius:999px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; min-height:34px; font-family:inherit;
              transition:background .15s,color .15s; }
            #pg-referrer .rfx-chip.on { background:var(--rfx-gold); border-color:var(--rfx-gold); color:var(--brand-navy); }
            #pg-referrer .rfx-filters input[type=date] { padding:6px 8px; border:1px solid rgba(255,255,255,.25); border-radius:8px;
              background:rgba(255,255,255,.1); color:#fff; font-size:12px; color-scheme:dark; min-height:34px; }
            /* ── KPI strip ── */
            #pg-referrer .rfx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
            #pg-referrer .rfx-kpi { background:var(--surface,#fff); border:1px solid var(--border); border-left:3px solid var(--rfx-gold);
              border-radius:10px; padding:9px 14px; }
            #pg-referrer .rfx-kpi small { font-size:11px; color:var(--muted); display:block; }
            #pg-referrer .rfx-kpi b { font-size:18px; font-variant-numeric:tabular-nums; }
            /* ── Master/Detail split — สูงพอดีจอ scroll ภายใน pane ── */
            #pg-referrer .rfx-split { display:grid; grid-template-columns:330px minmax(0,1fr); gap:10px; }
            #pg-referrer .rfx-pane { background:var(--surface,#fff); border:1px solid var(--border); border-radius:12px;
              display:flex; flex-direction:column; height:calc(100dvh - 330px); min-height:420px; overflow:hidden; }
            #pg-referrer .rfx-pane-hd { padding:9px 10px; border-bottom:1px solid var(--border); display:flex; gap:6px; align-items:center; }
            #pg-referrer .rfx-pane-bd { flex:1; overflow-y:auto; min-height:0; }
            #rfx-q { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; font-family:inherit; }
            #rfx-sort { padding:8px 6px; border:1px solid var(--border); border-radius:8px; font-size:12px; font-family:inherit;
              background:var(--surface,#fff); max-width:128px; }
            /* master row — ปุ่มเต็มแถว ≥48px (touch target) */
            #pg-referrer .rfx-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
              border-bottom:1px solid var(--border); padding:8px 12px; cursor:pointer; min-height:50px; font-family:inherit; }
            #pg-referrer .rfx-row:hover { background:rgba(200,169,106,.07); }
            #pg-referrer .rfx-row.on { background:rgba(200,169,106,.13); box-shadow:inset 3px 0 0 var(--rfx-gold); }
            #pg-referrer .rfx-rank { width:24px; height:24px; border-radius:7px; background:var(--bg2); color:var(--muted);
              font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
            #pg-referrer .rfx-rank-top { background:linear-gradient(135deg,#d9ba7a,var(--brand-gold)); color:var(--brand-navy); }
            #pg-referrer .rfx-row-main { flex:1; min-width:0; }
            #pg-referrer .rfx-row-name { display:block; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
            #pg-referrer .rfx-row-meta { display:block; font-size:11px; color:var(--muted); }
            #pg-referrer .rfx-row-amt { font-weight:800; font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--rfx-navy); }
            /* detail pane */
            #pg-referrer .rfx-det-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
              color:var(--muted); gap:8px; font-size:13px; }
            #pg-referrer .rfx-det-hd { padding:11px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
            #pg-referrer .rfx-avatar { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--brand-navy),#2a4a7f);
              color:#e3c785; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }
            #pg-referrer .rfx-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 16px; border-bottom:1px solid var(--border); }
            #pg-referrer .rfx-mini > div { background:var(--bg2); border-radius:8px; padding:6px 10px; }
            #pg-referrer .rfx-mini small { display:block; font-size:10.5px; color:var(--muted); }
            #pg-referrer .rfx-mini b { font-size:14.5px; font-variant-numeric:tabular-nums; }
            #pg-referrer table.rfx-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
            #pg-referrer .rfx-tbl th { position:sticky; top:0; background:var(--bg2); padding:7px 10px; text-align:left; font-size:11.5px; z-index:1; }
            #pg-referrer .rfx-tbl td { padding:7px 10px; border-top:1px solid var(--border); }
            #pg-referrer .rfx-tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
            #pg-referrer .rfx-note { font-size:11px; color:var(--muted); padding:7px 16px; border-top:1px solid var(--border); background:var(--bg2); }
            #pg-referrer .rfx-st { font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px; white-space:nowrap; }
            #pg-referrer .rfx-st-ok { background:rgba(22,163,74,.12); color:#15803d; }
            #pg-referrer .rfx-st-no { background:rgba(220,38,38,.10); color:#b91c1c; }
            #pg-referrer .rfx-st-cc { background:var(--bg2); color:var(--muted); border:1px solid var(--border); }
            /* ── mobile: ซ้อนเป็นชั้น ลิสต์สูงจำกัด เลือกแล้วเลื่อนไป detail ── */
            @media (max-width:860px) {
              #pg-referrer .rfx-kpis { grid-template-columns:repeat(2,1fr); }
              #pg-referrer .rfx-split { grid-template-columns:1fr; }
              #pg-referrer .rfx-pane { height:auto; min-height:0; }
              #rfx-master .rfx-pane-bd { max-height:38dvh; }
              #rfx-detail { min-height:320px; }
              #pg-referrer .rfx-mini { grid-template-columns:repeat(2,1fr); }
            }