/* CustomerClub (cx-) — customer club: members & profile, RFM map, loyalty tiers, retention/churn, feedback & rating */
.cx .toast { pointer-events: auto; }
.cx .w-actions { padding: 10px 12px 0 12px; }
.cx-tabs button { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; }
.cx-dot { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10.5px; display: inline-grid; place-items: center; }
.cx-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cx-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.cx-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 8px; flex: none; }
.cx-ch small { font-size: 11px; color: var(--muted-foreground); }
.cx-empty { padding: 18px; text-align: center; font-size: 13px; }
.cx-bar { flex: 1; height: 7px; border-radius: 6px; background: var(--muted); overflow: hidden; display: block; min-width: 40px; }
.cx-bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.cx-st { color: #e0a100; letter-spacing: 1px; font-size: 12px; white-space: nowrap; }
.cx-st i { font-style: normal; color: var(--border); }
.cx-tier { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px 0 7px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: color-mix(in srgb, var(--c) 16%, var(--card)); color: color-mix(in srgb, var(--c) 78%, var(--foreground)); white-space: nowrap; }
.cx-tier .i { width: 11px; height: 11px; }
.cx-seg { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; background: color-mix(in srgb, var(--c) 13%, var(--card)); color: color-mix(in srgb, var(--c) 80%, var(--foreground)); white-space: nowrap; border-inline-start: 3px solid var(--c); }
.cx-risk { font-size: 11.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cx-risk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gray); flex: none; }
.cx-risk.low::before { background: var(--success-ink); }
.cx-risk.mid::before { background: var(--amber); }
.cx-risk.high { color: var(--red); } .cx-risk.high::before { background: var(--red); }
.cx-risk.churn { color: var(--muted-foreground); } .cx-risk.churn::before { background: var(--muted-foreground); }
.cx-risk.none::before { display: none; }
/* RFM score chips 1–5 */
.cx-code i[data-v="1"], .cx-sb b[data-v="1"] { background: color-mix(in srgb, var(--red) 15%, var(--card)); color: var(--red); }
.cx-code i[data-v="2"], .cx-sb b[data-v="2"] { background: color-mix(in srgb, var(--amber) 18%, var(--card)); color: color-mix(in srgb, var(--amber) 75%, var(--foreground)); }
.cx-code i[data-v="3"], .cx-sb b[data-v="3"] { background: var(--muted); color: var(--foreground); }
.cx-code i[data-v="4"], .cx-sb b[data-v="4"] { background: color-mix(in srgb, var(--green) 16%, var(--card)); color: var(--success-ink); }
.cx-code i[data-v="5"], .cx-sb b[data-v="5"] { background: color-mix(in srgb, var(--green) 30%, var(--card)); color: var(--success-ink); }

/* overview */
.cx-ov { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1.15fr) minmax(0, .85fr); gap: 10px; }
.cx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cx-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; display: grid; gap: 1px; min-width: 0; }
.cx-kpi small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted-foreground); }
.cx-kpi small .i { width: 13px; height: 13px; }
.cx-kpi b { font-family: Morabba; font-size: 22px; font-weight: 500; line-height: 1.25; }
.cx-kpi b span { font-size: 11.5px; color: var(--muted-foreground); margin-inline-start: 3px; font-family: "Vazirmatn Variable", sans-serif; }
.cx-kpi > span { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-kpi em { font-style: normal; } .cx-kpi em.up { color: var(--success-ink); }
.cx-r2 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; min-height: 0; }
.cx-r3 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; min-height: 0; }
.cx-tr2 { display: grid; grid-template-columns: 78px 1fr 30px 84px; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; }
.cx-tr2 b { text-align: end; font-variant-numeric: tabular-nums; }
.cx-tr2 small { color: var(--muted-foreground); font-size: 11px; }
.cx-pts { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); background: var(--muted); border-radius: 8px; padding: 7px 9px; }
.cx-pts .i { width: 14px; height: 14px; flex: none; } .cx-pts b { color: var(--foreground); }
.cx-chart { width: 100%; flex: 1; min-height: 0; }
.cx-rl { display: grid; gap: 2px; overflow: auto; min-height: 0; align-content: start; }
.cx-rr { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.cx-rr:hover { background: var(--muted); }
.cx-rr > div { flex: 1; min-width: 0; display: grid; }
.cx-rr b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-rr small { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-rv { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); white-space: nowrap; }
.cx-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin-bottom: 10px; flex: none; }
.cx-stack i { display: block; min-width: 4px; }
.cx-lgs { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; overflow: auto; }
.cx-lg { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--card); border-radius: 99px; height: 26px; padding: 0 9px; font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
.cx-lg:hover { background: var(--muted); }
.cx-lg i { width: 8px; height: 8px; border-radius: 50%; }
.cx-lg b { color: var(--muted-foreground); font-weight: 500; }
.cx-fmini { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); min-width: 0; }
.cx-fmini > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); min-width: 0; flex: 1; }
.cx-fmini b { white-space: nowrap; font-weight: 600; }

/* members list */
.cx-lt { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-q { width: 220px; min-height: 34px; height: 34px; flex: none; }
.cx-q input { all: unset; flex: 1; min-width: 0; font: inherit; font-size: 13px; }
.cx-sel { width: 140px; min-height: 34px; height: 34px; font-size: 13px; flex: none; }
.cx-cnt { font-size: 12.5px; }
.cx-tbl { flex: 1; min-height: 0; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.cx-rows { flex: 1; overflow: auto; }
.cx-row { display: grid; grid-template-columns: minmax(170px, 1.6fr) 84px 58px 50px 92px 76px 72px 122px 74px 80px; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12.5px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); cursor: pointer; }
.cx-row:hover { background: var(--muted); }
.cx-row.on { background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.cx-thd { cursor: default; background: var(--muted); font-size: 11.5px; color: var(--muted-foreground); font-weight: 600; }
.cx-row .num { font-variant-numeric: tabular-nums; }
.cx-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-who > span { display: grid; min-width: 0; }
.cx-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-who small { font-size: 11px; color: var(--muted-foreground); text-align: right; }
.cx-code { display: inline-flex; gap: 2px; }
.cx-code i { font-style: normal; width: 18px; height: 20px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }

/* profile drawer (slides in from the inline end = left in RTL) */
.cx-dr { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 360px; background: var(--popover); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-pop); z-index: 20; transform: translateX(-104%); visibility: hidden; transition: transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s .3s; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cx-dr.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.cx-dh { display: flex; align-items: center; gap: 10px; }
.cx-dh .avatar { width: 40px; height: 40px; font-size: 14px; }
.cx-dh > div { flex: 1; display: grid; min-width: 0; }
.cx-dh b { font-family: Morabba; font-size: 18px; font-weight: 500; }
.cx-dh small { font-size: 11.5px; color: var(--muted-foreground); }
.cx-dtags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cx-dsec { display: grid; gap: 6px; font-size: 12.5px; }
.cx-dt { font-size: 11.5px; font-weight: 700; color: var(--muted-foreground); }
.cx-sbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cx-sb { border: 1px solid var(--border); border-radius: 10px; padding: 7px; display: grid; justify-items: center; gap: 1px; text-align: center; }
.cx-sb b { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; font-family: Morabba; font-weight: 500; }
.cx-sb span { font-size: 11.5px; font-weight: 600; }
.cx-sb small { font-size: 10.5px; color: var(--muted-foreground); }
.cx-dkp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cx-dkp > div { background: var(--muted); border-radius: 8px; padding: 6px 8px; display: grid; }
.cx-dkp small { font-size: 10.5px; color: var(--muted-foreground); }
.cx-dkp b { font-size: 15px; }
.cx-dkp b span { font-size: 10.5px; color: var(--muted-foreground); margin-inline-start: 2px; font-weight: 400; }
.cx-prog { display: flex; align-items: center; gap: 8px; }
.cx-prog small { font-size: 11.5px; white-space: nowrap; color: var(--muted-foreground); }
.cx-padd { display: flex; gap: 6px; }
.cx-padd .input { min-height: 32px; height: 32px; font-size: 13px; }
.cx-pin { width: 78px; flex: none; }
.cx-pr { flex: 1; min-width: 0; }
.cx-ord { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.cx-ord b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-ord .muted { font-size: 11.5px; }
.cx-dfoot { margin-top: auto; display: flex; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.cx-up .cx-tier { animation: cx-pop .9s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
@keyframes cx-pop { 0% { transform: scale(.6); } 50% { transform: scale(1.25); } 100% { transform: none; } }

/* RFM map */
.cx-rfm { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; }
.cx-mw { flex: 1; min-height: 0; display: grid; grid-template-columns: 18px 16px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 4px; }
.cx-yl { writing-mode: vertical-rl; font-size: 11.5px; color: var(--muted-foreground); text-align: center; }
.cx-yn { display: grid; grid-template-rows: repeat(5, 1fr); align-items: center; font-size: 11px; color: var(--muted-foreground); text-align: center; }
.cx-yn i, .cx-xn i { font-style: normal; }
.cx-xn { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: 11px; color: var(--muted-foreground); }
.cx-xl { font-size: 11.5px; color: var(--muted-foreground); text-align: center; }
.cx-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 4px; min-height: 0; }
.cx-blk { border: 0; border-radius: 9px; background: color-mix(in srgb, var(--c) 20%, var(--card)); color: color-mix(in srgb, var(--c) 72%, var(--foreground)); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; gap: 1px; text-align: start; position: relative; transition: background .2s, box-shadow .2s, color .2s; overflow: hidden; min-width: 0; }
.cx-blk:hover { background: color-mix(in srgb, var(--c) 30%, var(--card)); }
.cx-blk.on { background: var(--c); color: #fff; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
.cx-blk b { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cx-blk span { font-family: Morabba; font-size: 22px; line-height: 1.2; }
.cx-blk small { font-size: 10.5px; opacity: .85; }
.cx-blk em { position: absolute; bottom: 6px; inset-inline-end: 6px; font-style: normal; font-size: 10px; display: inline-flex; align-items: center; gap: 3px; background: var(--card); color: var(--success-ink); border-radius: 99px; padding: 1px 7px; }
.cx-blk em .i { width: 10px; height: 10px; }
.cx-mf { font-size: 11.5px; display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.cx-mf .i { width: 13px; height: 13px; flex: none; }
.cx-met button { height: 24px; font-size: 12px; padding: 0 9px; }
.cx-sp { gap: 10px; overflow: auto; }
.cx-sph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-sph > i { width: 12px; height: 12px; border-radius: 4px; }
.cx-sph b { font-family: Morabba; font-size: 18px; font-weight: 500; }
.cx-spk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx-spk div { background: var(--muted); border-radius: 8px; padding: 6px 9px; display: grid; }
.cx-spk small { font-size: 11px; color: var(--muted-foreground); }
.cx-spk b { font-size: 15px; }
.cx-act { display: flex; gap: 6px; font-size: 12.5px; line-height: 1.8; background: color-mix(in srgb, var(--primary) 7%, var(--card)); border-radius: 8px; padding: 8px 10px; }
.cx-act .i { color: var(--primary); flex: none; margin-top: 4px; width: 14px; height: 14px; }
.cx-spl { display: grid; gap: 1px; }
.cx-spl > small { padding: 2px 4px; font-size: 11.5px; }
.cx-spf { display: flex; gap: 6px; margin-top: auto; }

/* retention & churn */
.cx-ret { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.cx-ct { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.cx-ct th { font-weight: 600; font-size: 11.5px; color: var(--muted-foreground); text-align: center; padding: 4px; white-space: nowrap; }
.cx-ct tbody th, .cx-ct tfoot th { text-align: start; color: var(--foreground); }
.cx-ct td { text-align: center; padding: 9px 4px; border-radius: 6px; font-variant-numeric: tabular-nums; transition: background .3s; }
.cx-ct td.cx-na { background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--border) 55%, transparent) 4px 5px); }
.cx-ct td.cx-n { color: var(--muted-foreground); }
.cx-ct tfoot td { font-weight: 700; }
.cx-note { margin-top: auto; display: flex; gap: 6px; font-size: 12px; line-height: 1.8; color: var(--muted-foreground); background: var(--muted); border-radius: 8px; padding: 8px 10px; }
.cx-note .i { flex: none; margin-top: 4px; width: 14px; height: 14px; }
.cx-chn { gap: 2px; }
.cx-wl { display: inline-flex; align-items: center; gap: 6px; }
.cx-win button { height: 24px; padding: 0 8px; font-size: 12px; }
.cx-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.cx-big > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; min-width: 0; }
.cx-big small { font-size: 11px; color: var(--muted-foreground); }
.cx-big b { font-family: Morabba; font-size: 24px; font-weight: 500; line-height: 1.3; }
.cx-big b.bad { color: var(--red); }
.cx-big b span { font-size: 12px; color: var(--muted-foreground); margin-inline-start: 2px; }
.cx-big > div > span { font-size: 10.5px; color: var(--muted-foreground); }

/* feedback & rating */
.cx-fbv { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 10px; }
.cx-fs { gap: 8px; }
.cx-avg { display: grid; justify-items: center; gap: 2px; padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.cx-avg b { font-family: Morabba; font-size: 44px; font-weight: 500; line-height: 1.1; }
.cx-avg .cx-st { font-size: 18px; }
.cx-avg small { font-size: 11.5px; color: var(--muted-foreground); }
.cx-dist { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 8px; font-size: 12px; }
.cx-dist b { text-align: end; font-weight: 500; }
.cx-fk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx-fk div { background: var(--muted); border-radius: 8px; padding: 6px 9px; display: grid; }
.cx-fk small { font-size: 10.5px; color: var(--muted-foreground); }
.cx-fk b { font-size: 16px; }
.cx-auto { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.cx-auto > span { flex: 1; display: flex; gap: 5px; align-items: center; }
.cx-auto .i { width: 14px; height: 14px; color: var(--muted-foreground); flex: none; }
.cx-auto .au-sw { margin-top: 0; }
.cx-ff button { height: 26px; font-size: 12.5px; padding: 0 10px; }
.cx-fbl { flex: 1; overflow: auto; display: grid; gap: 8px; align-content: start; min-height: 0; }
.cx-fc { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; display: grid; gap: 6px; font-size: 12.5px; }
.cx-fc.low { border-inline-start: 3px solid var(--red); }
.cx-fch { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cx-fch b { font-weight: 600; }
.cx-fch .muted { font-size: 11px; margin-inline-start: auto; }
.cx-fc p { margin: 0; line-height: 1.8; }
.cx-fca { display: flex; gap: 4px; }
.cx-rep { display: flex; gap: 6px; background: color-mix(in srgb, var(--success-ink) 8%, var(--card)); border-radius: 8px; padding: 7px 9px; line-height: 1.8; animation: reveal .3s both; }
.cx-rep .i { flex: none; width: 14px; height: 14px; color: var(--success-ink); margin-top: 4px; }
.cx-rb { display: grid; gap: 6px; animation: reveal .25s both; }
.cx-tpl { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-tpl button { border: 1px dashed var(--border); background: var(--card); color: inherit; font: inherit; font-size: 12px; border-radius: 99px; height: 26px; padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cx-tpl button:hover { background: var(--muted); }
.cx-tpl .i { width: 12px; height: 12px; }
.cx-rt, .cx-msg { min-height: 64px; height: auto; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.8; resize: none; display: block; }
.cx-rbf { display: flex; align-items: center; gap: 6px; }
.cx-rbf small { font-size: 11px; margin-inline-start: auto; }

/* dialogs */
.cx-dlg { width: 440px; }
.cx-f { display: grid; gap: 4px; margin-bottom: 10px; }
.cx-f small { font-size: 11.5px; color: var(--muted-foreground); }
.cx-f .input { font: inherit; font-size: 13.5px; }
.cx-f .seg { justify-self: start; }
.cx-f .seg button { height: 28px; font-size: 12.5px; }
.cx-prev { background: var(--muted); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.cx-prev small { font-size: 11px; color: var(--muted-foreground); }
.cx-bub { background: var(--card); border: 1px solid var(--border); border-radius: 12px 12px 4px 12px; padding: 8px 11px; font-size: 13px; line-height: 1.9; max-width: 92%; }
.cx-err { color: var(--red); font-size: 12px; min-height: 16px; }