/* clients-nx.css — Nexora "My Clients" v3. Scoped to #v-personal-clients; palette via var(--primary)/var(--secondary). */
#v-personal-clients{
  --brand:var(--primary,#009391); --accent:var(--secondary,#00D1C9);
  --nx-bg:#FAFBFC; --nx-surface:#fff; --nx-raised:#F4F6F8; --nx-text:#0E1316; --nx-muted:#5A6B74; --nx-border:#E5E7EB;
  --ok:#1f9d63; --warn:#b26a0a; --bad:#c63e47; --info:#2563eb;
  --nx-radius:16px; --nx-shadow:0 1px 2px #0e131607,0 8px 24px #0e13160a; --ease:cubic-bezier(.22,1,.36,1);
  font-family:"Heebo",Arial,sans-serif; color:var(--nx-text);
}
[data-theme="dark"] #v-personal-clients{ --nx-bg:#0E1316; --nx-surface:#161D22; --nx-raised:#202A30; --nx-text:#EAF2F3; --nx-muted:#ADBDC4; --nx-border:#35424A; --ok:#61d99a; --warn:#f0bc62; --bad:#ff8f96; }
#v-personal-clients *{ box-sizing:border-box; }
#v-personal-clients button{ cursor:pointer; font:inherit; color:inherit; background:none; border:0; }
#v-personal-clients .num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
#v-personal-clients .ltr{ direction:ltr; unicode-bidi:isolate; }
#v-personal-clients .muted{ color:var(--nx-muted); }
#v-personal-clients .pcx-surface{ background:var(--nx-surface); border:1px solid var(--nx-border); border-radius:var(--nx-radius); box-shadow:var(--nx-shadow); }

/* avatar / health / pills */
#v-personal-clients .pcx-av{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; font-weight:700; font-size:.82rem; flex:none; }
#v-personal-clients .pcx-av.mini{ width:26px; height:26px; border-radius:8px; font-size:.64rem; }
#v-personal-clients .pcx-av.big{ width:60px; height:60px; border-radius:17px; font-size:1.35rem; }
#v-personal-clients .pcx-hp{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:30px; white-space:nowrap; }
#v-personal-clients .pcx-hp i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
#v-personal-clients .hc-active{ color:var(--ok); background:color-mix(in srgb,var(--ok) 13%,transparent); }
#v-personal-clients .hc-watch{ color:var(--warn); background:color-mix(in srgb,var(--warn) 15%,transparent); }
#v-personal-clients .hc-lapsed{ color:var(--bad); background:color-mix(in srgb,var(--bad) 13%,transparent); }
#v-personal-clients .hc-none{ color:var(--nx-muted); background:color-mix(in srgb,var(--nx-muted) 13%,transparent); }

/* buttons */
#v-personal-clients .pcx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border-radius:11px; font-weight:700; font-size:.85rem; background:var(--nx-surface); border:1px solid var(--nx-border); box-shadow:var(--nx-shadow); transition:transform .16s var(--ease),border-color .16s; }
#v-personal-clients .pcx-btn:hover{ transform:translateY(-1px); }
#v-personal-clients .pcx-btn svg{ width:16px; height:16px; }
#v-personal-clients .pcx-btn.pri{ background:linear-gradient(135deg,var(--accent),var(--brand)); color:#fff; border-color:transparent; }
#v-personal-clients .pcx-btn.sm{ padding:7px 11px; font-size:.8rem; }
#v-personal-clients .pcx-btn.ghost{ background:transparent; box-shadow:none; color:var(--nx-muted); }
#v-personal-clients .pcx-btn.ghost:hover{ color:var(--brand); border-color:color-mix(in srgb,var(--brand) 40%,var(--nx-border)); }
#v-personal-clients .pcx-btn.danger{ color:var(--bad); }
#v-personal-clients .pcx-iconbtn{ width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; color:var(--nx-muted); border:1px solid var(--nx-border); background:var(--nx-surface); transition:.15s; }
#v-personal-clients .pcx-iconbtn svg{ width:16px; height:16px; }
#v-personal-clients .pcx-iconbtn:hover{ color:var(--brand); border-color:color-mix(in srgb,var(--brand) 42%,var(--nx-border)); }
#v-personal-clients .pcx-iconbtn.call:hover{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--nx-border)); }
#v-personal-clients .pcx-iconbtn.danger:hover{ color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,var(--nx-border)); }

/* workspace wrapper */
#v-personal-clients .pcx-wrap{ max-width:1680px; margin-inline:auto; padding:2px clamp(4px,1vw,10px) 30px; }

/* page heading */
#v-personal-clients .pcx-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
#v-personal-clients .pcx-head .ht{ display:flex; align-items:center; gap:13px; }
#v-personal-clients .pcx-head .hi{ width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg,var(--accent),var(--brand)); color:#fff; display:grid; place-items:center; flex:none; }
#v-personal-clients .pcx-head .hi svg{ width:23px; height:23px; }
#v-personal-clients .pcx-head h1{ margin:0; font-size:1.55rem; font-weight:800; letter-spacing:-.4px; }
#v-personal-clients .pcx-head .sub{ font-size:.82rem; color:var(--nx-muted); margin-top:2px; }
#v-personal-clients .pcx-head .acts{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
#v-personal-clients .pcx-scope{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color:var(--brand); background:color-mix(in srgb,var(--brand) 9%,transparent); padding:5px 11px; border-radius:30px; }

/* metrics strip */
#v-personal-clients .pcx-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:16px; }
#v-personal-clients .pcx-kpi{ position:relative; text-align:start; padding:14px 16px; border:1px solid var(--nx-border); background:var(--nx-surface); border-radius:14px; box-shadow:var(--nx-shadow); transition:transform .16s,border-color .16s; overflow:hidden; }
#v-personal-clients .pcx-kpi:hover{ transform:translateY(-2px); border-color:var(--brand); }
#v-personal-clients .pcx-kpi[aria-pressed="true"]{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
#v-personal-clients .pcx-kpi .kl{ display:flex; align-items:center; justify-content:space-between; color:var(--nx-muted); font-size:.76rem; font-weight:600; }
#v-personal-clients .pcx-kpi .ki{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb,var(--c,var(--brand)) 11%,transparent); color:var(--c,var(--brand)); }
#v-personal-clients .pcx-kpi .ki svg{ width:16px; height:16px; }
#v-personal-clients .pcx-kpi .kv{ font-size:1.7rem; font-weight:800; line-height:1.1; margin-top:7px; }
#v-personal-clients .pcx-kpi .kf{ font-size:.72rem; color:var(--nx-muted); margin-top:4px; }

/* admin bar */
#v-personal-clients .pcx-admin{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:16px; padding:11px 14px; background:color-mix(in srgb,var(--brand) 4%,var(--nx-surface)); border:1px solid var(--nx-border); border-radius:14px; }
#v-personal-clients .pcx-admin .lbl{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.82rem; color:var(--brand); margin-inline-end:auto; }
#v-personal-clients .pcx-admin .lbl svg{ width:16px; height:16px; }

/* focus workspace */
#v-personal-clients .pcx-focus{ display:grid; grid-template-columns:minmax(260px,300px) minmax(0,1fr); gap:16px; align-items:stretch; margin-bottom:16px; }
#v-personal-clients .pcx-focus>*{ min-width:0; }
#v-personal-clients .pcx-queue{ padding:15px; display:flex; flex-direction:column; }
#v-personal-clients .pcx-queue .qh{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
#v-personal-clients .pcx-queue .qh h2{ margin:0; font-size:1rem; font-weight:800; display:flex; align-items:center; gap:8px; }
#v-personal-clients .pcx-queue .qh .d{ width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); display:grid; place-items:center; }
#v-personal-clients .pcx-queue .qh .d svg{ width:16px; height:16px; }
#v-personal-clients .pcx-qcount{ font-size:.78rem; color:var(--nx-muted); font-weight:700; }
#v-personal-clients .pcx-qcount b{ color:var(--brand); }
#v-personal-clients .pcx-qlist{ display:flex; flex-direction:column; gap:4px; overflow:auto; max-height:360px; }
#v-personal-clients .pcx-qitem{ width:100%; text-align:start; display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid transparent; border-radius:12px; transition:background .15s,border-color .15s; }
#v-personal-clients .pcx-qitem:hover{ background:var(--nx-raised); }
#v-personal-clients .pcx-qitem[aria-current="true"]{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,var(--nx-surface)); }
#v-personal-clients .pcx-qitem .qn{ font-weight:700; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#v-personal-clients .pcx-qitem .qs{ font-size:.72rem; color:var(--nx-muted); }
#v-personal-clients .pcx-qitem .qdot{ width:8px; height:8px; border-radius:50%; flex:none; }

/* work card (customer stage) */
#v-personal-clients .pcx-stage{ position:relative; overflow:hidden; padding:0; }
#v-personal-clients .pcx-stagebody{ padding:24px; }
#v-personal-clients .pcx-stage .edge{ position:absolute; inset-block:0; inset-inline-start:0; width:5px; background:var(--hc,var(--brand)); }
#v-personal-clients .pcx-stop{ display:flex; align-items:center; gap:16px; }
#v-personal-clients .pcx-stop h2{ margin:0; font-size:clamp(22px,2vw,28px); font-weight:800; letter-spacing:-.4px; }
#v-personal-clients .pcx-stop .meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:6px; font-size:.84rem; color:var(--nx-muted); }
#v-personal-clients .pcx-stop .ph{ direction:ltr; font-weight:600; }
#v-personal-clients .pcx-reason{ display:flex; align-items:center; gap:10px; margin:18px 0; padding:12px 15px; border-radius:13px; background:color-mix(in srgb,var(--hc,var(--brand)) 7%,transparent); border:1px solid color-mix(in srgb,var(--hc,var(--brand)) 18%,transparent); font-size:.9rem; font-weight:600; }
#v-personal-clients .pcx-reason .ri{ width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--hc,var(--brand)) 15%,transparent); color:var(--hc,var(--brand)); display:grid; place-items:center; flex:none; }
#v-personal-clients .pcx-reason .ri svg{ width:16px; height:16px; }
#v-personal-clients .pcx-sstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin:18px 0; }
#v-personal-clients .pcx-sstat{ background:var(--nx-raised); border:1px solid var(--nx-border); border-radius:13px; padding:13px 10px; text-align:center; }
#v-personal-clients .pcx-sstat b{ display:block; font-size:1.3rem; font-weight:800; }
#v-personal-clients .pcx-sstat span{ display:block; font-size:.7rem; color:var(--nx-muted); font-weight:600; margin-top:3px; }
#v-personal-clients .pcx-sstat.hl b{ color:var(--hc,var(--text)); }
#v-personal-clients .pcx-sacts{ display:grid; grid-template-columns:1fr 1fr auto auto; gap:10px; }
#v-personal-clients .pcx-sacts .pcx-btn{ justify-content:center; padding:12px; }
#v-personal-clients .pcx-sacts .icn{ width:46px; padding:0; }
#v-personal-clients .pcx-stage.anim{ animation:pcxIn .26s var(--ease); }
@keyframes pcxIn{ from{ opacity:.6; transform:translateX(var(--dir,8px)); } to{ opacity:1; transform:none; } }
#v-personal-clients .pcx-stage-empty{ padding:50px 24px; text-align:center; color:var(--nx-muted); }

/* queue footer: progress + upcoming */
#v-personal-clients .pcx-qfoot{ margin-bottom:16px; padding:15px 18px; }
#v-personal-clients .pcx-prog{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#v-personal-clients .pcx-prog .lbl{ font-size:.78rem; font-weight:700; color:var(--nx-muted); }
#v-personal-clients .pcx-prog .bar{ flex:1; min-width:140px; height:7px; border-radius:30px; background:var(--nx-raised); overflow:hidden; }
#v-personal-clients .pcx-prog .bar i{ display:block; height:100%; border-radius:30px; background:linear-gradient(90deg,var(--accent),var(--brand)); transition:width .35s var(--ease); }
#v-personal-clients .pcx-prog .pt{ font-size:.78rem; font-weight:700; }
#v-personal-clients .pcx-nav{ display:flex; align-items:center; gap:10px; }
#v-personal-clients .pcx-upnext{ margin-top:14px; }
#v-personal-clients .pcx-upnext .ut{ font-size:.76rem; color:var(--nx-muted); font-weight:700; margin-bottom:9px; display:flex; align-items:center; gap:7px; }
#v-personal-clients .pcx-upcards{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
#v-personal-clients .pcx-uc{ flex:0 0 auto; display:flex; align-items:center; gap:10px; background:var(--nx-surface); border:1px solid var(--nx-border); border-radius:12px; padding:9px 12px; min-width:190px; transition:.15s; }
#v-personal-clients .pcx-uc:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 25%,var(--nx-border)); }
#v-personal-clients .pcx-uc .un{ font-weight:700; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#v-personal-clients .pcx-uc .us{ font-size:.7rem; color:var(--nx-muted); }

/* customer book */
#v-personal-clients .pcx-book{ overflow:hidden; }
#v-personal-clients .pcx-book .bh{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--nx-border); }
#v-personal-clients .pcx-book .bh h2{ margin:0; font-size:1.05rem; font-weight:800; }
#v-personal-clients .pcx-book .bh small{ font-size:.78rem; color:var(--nx-muted); }
#v-personal-clients .pcx-toolbar{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:14px 18px; background:var(--nx-bg); border-bottom:1px solid var(--nx-border); }
#v-personal-clients .pcx-search{ display:flex; align-items:center; gap:8px; background:var(--nx-surface); border:1px solid var(--nx-border); border-radius:10px; padding:8px 12px; flex:1; min-width:180px; max-width:340px; }
#v-personal-clients .pcx-search svg{ width:15px; height:15px; color:var(--nx-muted); flex:none; }
#v-personal-clients .pcx-search input{ border:0; background:none; outline:none; width:100%; font-size:.86rem; color:var(--nx-text); }
#v-personal-clients .pcx-sel{ background:var(--nx-surface); border:1px solid var(--nx-border); border-radius:10px; padding:8px 11px; font-size:.82rem; color:var(--nx-text); max-width:190px; }
#v-personal-clients .pcx-seg{ display:inline-flex; gap:3px; padding:3px; background:var(--nx-raised); border:1px solid var(--nx-border); border-radius:10px; margin-inline-start:auto; }
#v-personal-clients .pcx-seg button{ width:36px; height:32px; border-radius:7px; display:grid; place-items:center; color:var(--nx-muted); }
#v-personal-clients .pcx-seg button svg{ width:16px; height:16px; }
#v-personal-clients .pcx-seg button[aria-pressed="true"]{ background:var(--nx-surface); color:var(--brand); box-shadow:var(--nx-shadow); }
#v-personal-clients .pcx-chips{ display:flex; gap:7px; flex-wrap:wrap; padding:0 18px; }
#v-personal-clients .pcx-chips:not(:empty){ padding-block:11px; border-bottom:1px solid var(--nx-border); }
#v-personal-clients .pcx-chip{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:8px; color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent); border:1px solid color-mix(in srgb,var(--brand) 18%,transparent); }
#v-personal-clients .pcx-results{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:11px 18px; font-size:.78rem; color:var(--nx-muted); }
#v-personal-clients .pcx-results b{ color:var(--nx-text); }

/* bulk bar */
#v-personal-clients .pcx-bulk{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:10px 18px; background:color-mix(in srgb,var(--brand) 7%,var(--nx-surface)); border-block:1px solid color-mix(in srgb,var(--brand) 18%,var(--nx-border)); }
#v-personal-clients .pcx-bulk strong{ font-size:.85rem; color:var(--brand); margin-inline-end:auto; }

/* table */
#v-personal-clients .pcx-tablewrap{ overflow:auto; max-height:560px; }
#v-personal-clients .pcx-table{ width:100%; border-collapse:collapse; min-width:720px; }
#v-personal-clients .pcx-table th{ position:sticky; top:0; z-index:2; background:var(--nx-raised); font-size:.72rem; font-weight:700; color:var(--nx-muted); text-align:start; padding:11px 14px; border-bottom:1px solid var(--nx-border); white-space:nowrap; }
#v-personal-clients .pcx-table td{ padding:11px 14px; border-bottom:1px solid var(--nx-border); font-size:.84rem; white-space:nowrap; }
#v-personal-clients .pcx-table tbody tr{ transition:background .14s; cursor:pointer; }
#v-personal-clients .pcx-table tbody tr:hover{ background:color-mix(in srgb,var(--brand) 3.5%,transparent); }
#v-personal-clients .pcx-table tbody tr[data-selected="true"]{ background:color-mix(in srgb,var(--brand) 7%,transparent); }
#v-personal-clients .pcx-sortbtn{ display:inline-flex; align-items:center; gap:4px; font:inherit; font-weight:700; color:var(--nx-muted); }
#v-personal-clients .pcx-sortbtn svg{ width:11px; height:11px; }
#v-personal-clients .pcx-cli{ display:flex; align-items:center; gap:10px; min-width:0; }
#v-personal-clients .pcx-cli .ln{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#v-personal-clients .pcx-cli .lp{ font-size:.72rem; color:var(--nx-muted); direction:ltr; text-align:start; }
#v-personal-clients .pcx-spark{ display:inline-flex; align-items:flex-end; gap:2px; height:24px; }
#v-personal-clients .pcx-spark i{ width:4px; border-radius:2px; background:color-mix(in srgb,var(--brand) 55%,transparent); }
#v-personal-clients .pcx-agent{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--nx-muted); }
#v-personal-clients .pcx-rowacts{ display:flex; gap:5px; justify-content:flex-end; }
#v-personal-clients .pcx-rowacts .pcx-iconbtn{ width:30px; height:30px; }

/* cards view */
#v-personal-clients .pcx-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; padding:16px 18px; }
#v-personal-clients .pcx-card{ position:relative; overflow:hidden; padding:16px; border:1px solid var(--nx-border); border-radius:14px; background:var(--nx-surface); box-shadow:var(--nx-shadow); transition:transform .18s; }
#v-personal-clients .pcx-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand) 30%,var(--nx-border)); }
#v-personal-clients .pcx-card .cedge{ position:absolute; inset-inline-start:0; top:18px; width:3px; height:38px; border-radius:3px; }
#v-personal-clients .pcx-card dl{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:14px 0; font-size:.76rem; }
#v-personal-clients .pcx-card dt{ color:var(--nx-muted); } #v-personal-clients .pcx-card dd{ margin:0; text-align:end; font-weight:600; }
#v-personal-clients .pcx-card footer{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--nx-border); padding-top:11px; }

/* pagination */
#v-personal-clients .pcx-pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:13px 18px; border-top:1px solid var(--nx-border); font-size:.78rem; color:var(--nx-muted); }
#v-personal-clients .pcx-pagebtns{ display:flex; align-items:center; gap:4px; }
#v-personal-clients .pcx-pagebtn{ min-width:30px; height:30px; padding:0 8px; border-radius:8px; font-size:.82rem; font-weight:700; color:var(--nx-text); border:1px solid transparent; }
#v-personal-clients .pcx-pagebtn:hover:not(:disabled){ border-color:var(--nx-border); }
#v-personal-clients .pcx-pagebtn.on{ background:var(--brand); color:#fff; }
#v-personal-clients .pcx-pagebtn:disabled{ opacity:.4; }
#v-personal-clients .pcx-empty{ padding:55px 20px; text-align:center; color:var(--nx-muted); }
#v-personal-clients .pcx-empty svg{ width:34px; height:34px; margin:0 auto 12px; color:var(--brand); display:block; }

/* agents overview */
#v-personal-clients .pcx-agents{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:15px; }
#v-personal-clients .pcx-agc{ padding:15px; }
#v-personal-clients .pcx-agc .ah{ display:flex; align-items:center; gap:11px; }
#v-personal-clients .pcx-agc .rank{ margin-inline-start:auto; font-size:.72rem; font-weight:800; color:var(--nx-muted); background:var(--nx-raised); border-radius:30px; padding:3px 9px; }
#v-personal-clients .pcx-agc .ags{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; text-align:center; }
#v-personal-clients .pcx-agc .ags b{ display:block; font-size:1.05rem; font-weight:800; }
#v-personal-clients .pcx-agc .ags span{ display:block; font-size:.66rem; color:var(--nx-muted); }
#v-personal-clients .pcx-agc .prog{ height:6px; border-radius:30px; background:var(--nx-raised); margin-top:13px; overflow:hidden; }
#v-personal-clients .pcx-agc .prog i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--brand)); }

/* hide helper */
#v-personal-clients .pcx-hide{ display:none !important; }
#v-personal-clients .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media(max-width:1000px){ #v-personal-clients .pcx-focus{ grid-template-columns:minmax(220px,250px) minmax(0,1fr); } #v-personal-clients .pcx-metrics{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px){ #v-personal-clients .pcx-focus{ grid-template-columns:1fr; } #v-personal-clients .pcx-qlist{ flex-direction:row; max-height:none; overflow-x:auto; } #v-personal-clients .pcx-qitem{ flex:0 0 210px; } #v-personal-clients .pcx-sacts{ grid-template-columns:1fr 1fr; } #v-personal-clients .pcx-cards{ grid-template-columns:1fr; } }

/* ===== Customer drawer (.pcx-drawer) — outside the section, self-scoped ===== */
.pcx-drawer{
  --brand:var(--primary,#009391); --accent:var(--secondary,#00D1C9);
  --surface:#fff; --raised:#F4F6F8; --text:#0E1316; --muted:#5A6B74; --border:#E5E7EB; --ok:#1f9d63; --warn:#b26a0a; --bad:#c63e47;
  position:fixed; inset-block:0; inset-inline-end:0; margin:0; max-width:none; width:min(660px,96vw); height:100vh; max-height:100vh; border-radius:0;
  background:var(--surface); color:var(--text); flex-direction:column; overflow:hidden; box-shadow:0 0 60px rgba(14,19,22,.3);
  animation:pcxDrawerIn .26s cubic-bezier(.22,1,.36,1); font-family:"Heebo",Arial,sans-serif;
}
.pcx-drawer:not([open]){ display:none; }
.pcx-drawer[open]{ display:flex; }
[data-theme="dark"] .pcx-drawer{ --surface:#161D22; --raised:#1F2933; --text:#EAF2F3; --muted:#ADBDC4; --border:#35424A; }
@keyframes pcxDrawerIn{ from{ transform:translateX(40px); opacity:.4; } to{ transform:none; opacity:1; } }
.pcx-drawer h2,.pcx-drawer h3,.pcx-drawer h4{ margin:0; }

/* ======== Premium glass client card — full redesign ======== */
.pcx-drawer{ background:color-mix(in srgb,var(--surface) 92%,transparent); -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4); z-index:9999; }
[data-theme="dark"] .pcx-drawer{ background:color-mix(in srgb,var(--surface) 90%,transparent); }
.pcx-drawer::backdrop{ background:rgba(14,19,22,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }

/* header */
.pcxd-head{ position:relative; padding:22px 26px 20px; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 86%,#000) 0%,var(--brand) 52%,color-mix(in srgb,var(--accent) 72%,var(--brand)) 100%); }
.pcxd-head::before{ content:""; position:absolute; top:-55%; inset-inline-end:-8%; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%); pointer-events:none; }
.pcxd-head>*{ position:relative; z-index:1; }
.pcxd-head .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pcxd-head .top h3{ font-size:.82rem; font-weight:700; letter-spacing:.02em; opacity:.92; }
.pcxd-close{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); color:#fff; display:grid; place-items:center; flex:none; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s; }
.pcxd-close:hover{ background:rgba(255,255,255,.3); transform:rotate(90deg); }
.pcxd-close svg{ width:17px; height:17px; }
.pcxd-id{ display:flex; align-items:center; gap:15px; margin-top:16px; }
.pcxd-av{ width:62px; height:62px; border-radius:20px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; font-weight:800; font-size:1.5rem; flex:none; box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.3); }
.pcxd-id h2{ font-size:1.4rem; font-weight:800; letter-spacing:-.01em; }
.pcxd-id .meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; font-size:.78rem; }
.pcxd-hp{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); padding:4px 12px; border-radius:30px; font-weight:700; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pcxd-hp i{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.pcxd-id .ltr{ opacity:.9; font-variant-numeric:tabular-nums; }

/* action buttons */
.pcxd-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.pcxd-actions>button{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:30px; font-size:.82rem; font-weight:700; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,background .18s; }
.pcxd-actions>button:hover{ background:rgba(255,255,255,.26); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.pcxd-actions>button svg{ width:16px; height:16px; }
.pcxd-actions>button.primary{ background:#fff; color:var(--brand); border-color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.pcxd-actions>button.primary:hover{ box-shadow:0 10px 26px rgba(0,0,0,.26); }
.pcxd-actions>button.primary:hover svg{ animation:pcxSpin .6s ease; }
@keyframes pcxSpin{ to{ transform:rotate(360deg); } }

/* tabs — animated underline */
.pcxd-tabs{ display:flex; gap:4px; padding:4px 20px 0; overflow-x:auto; border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); position:sticky; top:0; z-index:3;
  background:color-mix(in srgb,var(--surface) 80%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.pcxd-tabs button{ position:relative; padding:13px 14px; font-size:.86rem; font-weight:600; color:var(--muted); white-space:nowrap; cursor:pointer; background:none; border:0; transition:color .18s; }
.pcxd-tabs button::after{ content:""; position:absolute; inset-inline:12px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--brand),var(--accent)); transform:scaleX(0); transition:transform .25s cubic-bezier(.22,1,.36,1); }
.pcxd-tabs button:hover{ color:var(--text); }
.pcxd-tabs button.on{ color:var(--brand); font-weight:800; }
.pcxd-tabs button.on::after{ transform:scaleX(1); }

/* body + sections */
.pcxd-body{ flex:1; overflow:auto; padding:20px 24px 32px; background:transparent; }
.pcxd-body [data-pane]{ animation:pcxFade .3s cubic-bezier(.22,1,.36,1); }
@keyframes pcxFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.pcxd-sec{ background:color-mix(in srgb,var(--surface) 82%,transparent); border:1px solid color-mix(in srgb,var(--border) 55%,transparent); border-radius:18px; padding:18px; margin-bottom:15px;
  box-shadow:0 2px 12px rgba(14,19,22,.05),inset 0 1px 0 rgba(255,255,255,.4); animation:pcxUp .42s cubic-bezier(.22,1,.36,1) both; }
.pcxd-body [data-pane]>.pcxd-sec:nth-child(1){ animation-delay:.02s; }
.pcxd-body [data-pane]>.pcxd-sec:nth-child(2){ animation-delay:.09s; }
.pcxd-body [data-pane]>.pcxd-sec:nth-child(3){ animation-delay:.16s; }
.pcxd-body [data-pane]>.pcxd-sec:nth-child(4){ animation-delay:.23s; }
@keyframes pcxUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.pcxd-sec h4{ font-size:.85rem; font-weight:800; letter-spacing:-.01em; color:var(--text); display:flex; align-items:center; gap:9px; margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); }
.pcxd-sec h4 svg{ width:17px; height:17px; padding:5px; box-sizing:content-box; border-radius:9px; background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); }

/* contact grid */
.pcxd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.pcxd-grid .k{ font-size:.72rem; color:var(--muted); font-weight:600; }
.pcxd-grid .v{ font-size:.94rem; font-weight:700; margin-top:2px; }

/* stat chips */
.pcxd-stat{ background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--brand) 8%,transparent)); border:1px solid color-mix(in srgb,var(--brand) 14%,var(--border)); border-radius:16px; padding:15px 10px; text-align:center; transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s; }
.pcxd-stat:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(14,19,22,.08); }
.pcxd-stat b{ display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; background:linear-gradient(135deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pcxd-stat span{ display:block; font-size:.7rem; color:var(--muted); margin-top:4px; font-weight:600; }

/* donations summary + table */
.pcxd-donsum{ display:flex; gap:11px; flex-wrap:wrap; margin-bottom:15px; }
.pcxd-donsum>div{ flex:1; min-width:92px; background:color-mix(in srgb,var(--surface) 82%,transparent); border:1px solid color-mix(in srgb,var(--border) 55%,transparent); border-radius:14px; padding:13px; text-align:center; }
.pcxd-donsum b{ display:block; font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--brand); }
.pcxd-donsum span{ display:block; font-size:.68rem; color:var(--muted); font-weight:600; margin-top:3px; }
.pcxd-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.83rem; border:1px solid color-mix(in srgb,var(--border) 55%,transparent); border-radius:14px; overflow:hidden; }
.pcxd-table th{ text-align:start; font-size:.7rem; color:var(--muted); font-weight:700; padding:11px 12px; background:color-mix(in srgb,var(--brand) 6%,transparent); position:sticky; top:0; z-index:1; }
.pcxd-table td{ padding:12px; border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent); }
.pcxd-table tbody tr{ transition:background .15s; }
.pcxd-table tbody tr:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }
.pcxd-table td.num{ font-variant-numeric:tabular-nums; }
.pcxd-table td.pcxd-amt{ font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; }
.pcxd-paypill{ display:inline-block; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:30px; background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand); }

/* notes / reminders / add / empty */
.pcxd-note{ background:color-mix(in srgb,var(--surface) 78%,transparent); border:1px solid color-mix(in srgb,var(--border) 50%,transparent); border-radius:14px; padding:13px 15px; margin-bottom:11px; box-shadow:0 1px 5px rgba(14,19,22,.04); transition:transform .18s; }
.pcxd-note:hover{ transform:translateX(-3px); }
.pcxd-note .nh{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.72rem; color:var(--muted); margin-bottom:6px; }
.pcxd-add{ display:flex; gap:9px; margin-bottom:15px; }
.pcxd-add input,.pcxd-add textarea{ flex:1; padding:12px 14px; border:1px solid color-mix(in srgb,var(--border) 65%,transparent); border-radius:13px; background:color-mix(in srgb,var(--surface) 86%,transparent); color:var(--text); font:inherit; font-size:.88rem; transition:border-color .18s,box-shadow .18s; }
.pcxd-add input:focus,.pcxd-add textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent); }
.pcxd-add input[type=date]{ font-variant-numeric:tabular-nums; }
.pcxd-add input[type=date]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55; filter:saturate(0); }
.pcxd-addbtn{ flex:none; width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; display:grid; place-items:center; cursor:pointer; border:0;
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 32%,transparent); transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s; }
.pcxd-addbtn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 42%,transparent); }
.pcxd-addbtn:active{ transform:translateY(0); }
.pcxd-addbtn svg{ width:18px; height:18px; }
/* notes/reminders inside a section -> clean rows, not nested cards */
.pcxd-sec>.pcxd-note{ background:transparent; border:0; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); border-radius:0; box-shadow:none; padding:13px 2px; margin:0; }
.pcxd-sec>.pcxd-note:last-child{ border-bottom:0; padding-bottom:2px; }
.pcxd-sec>.pcxd-note:hover{ transform:none; }
.pcxd-sec>.pcxd-rem{ padding-inline:2px; }
.pcxd-sec>.pcxd-empty{ padding:30px 15px 20px; }
.pcxd-rem{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent); align-items:flex-start; }
.pcxd-rem:last-child{ border-bottom:none; }
.pcxd-rem .dot{ width:10px; height:10px; border-radius:50%; margin-top:5px; flex:none; background:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent); }
.pcxd-empty{ text-align:center; color:var(--muted); padding:40px 15px; }
.pcxd-empty svg{ width:34px; height:34px; margin:0 auto 12px; color:var(--brand); display:block; opacity:.7; }

@media(max-width:700px){ .pcx-drawer{ width:100vw; } .pcxd-grid{ grid-template-columns:1fr; } }

/* ========= Approved "calm" client card (cdlg) — matches Nexora sketch ========= */
.cdlg{ --brand:var(--primary,#009391); --accent:var(--secondary,#00D1C9); --on-brand:#fff;
  --surface:#fff; --raised:#F4F6F8; --text:#0E1316; --muted:#5A6B74; --border:#E5E7EB; --ok:#1f9d63; --warn:#d9931f; --bad:#dd4b52;
  --radius:14px; --shadow:0 1px 2px rgba(14,19,22,.05),0 10px 26px rgba(14,19,22,.07); --ease:cubic-bezier(.22,1,.36,1);
  position:fixed; inset:0; margin:auto; width:min(940px,calc(100vw - 24px)); max-block-size:calc(100dvh - 24px); padding:0; border:1px solid var(--border); border-radius:20px;
  background:var(--surface); color:var(--text); box-shadow:0 30px 90px rgba(14,19,22,.3); overflow:hidden; font-family:"Heebo",Arial,sans-serif; font-size:13px; animation:cdModalIn .22s var(--ease); }
[data-theme="dark"] .cdlg{ --surface:#161D22; --raised:#1F2933; --text:#EAF2F3; --muted:#ADBDC4; --border:#35424A; --on-brand:#0E1316; }
.cdlg::backdrop{ background:rgba(14,19,22,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
@keyframes cdModalIn{ from{ opacity:.5; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:none; } }
.cdlg h2,.cdlg h4{ margin:0; }
.cdlg .cdh{ display:flex; align-items:center; gap:15px; padding:18px 22px; color:#fff; position:relative; overflow:hidden; background:linear-gradient(120deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#000)); }
.cdlg .cdh::after{ content:""; position:absolute; inset-inline-start:-40px; top:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.cdlg .cdav{ width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-weight:800; font-size:1.3rem; flex:none; position:relative; z-index:1; }
.cdlg .cdt{ position:relative; z-index:1; min-width:0; }
.cdlg .cdh h2{ font-size:1.3rem; font-weight:800; }
.cdlg .cdmeta{ display:inline-flex; align-items:center; gap:7px; font-size:.78rem; opacity:.95; margin-top:5px; background:rgba(255,255,255,.14); padding:3px 11px; border-radius:30px; }
.cdlg .cdmeta i{ width:7px; height:7px; border-radius:50%; }
.cdlg .cx{ margin-inline-start:auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.18); color:#fff; position:relative; z-index:1; flex:none; cursor:pointer; border:0; transition:background .18s,transform .18s var(--ease); }
.cdlg .cx:hover{ background:rgba(255,255,255,.3); transform:rotate(90deg); }
.cdlg .cx svg{ width:17px; height:17px; }
.cdlg .cdscroll{ overflow:auto; max-block-size:calc(100dvh - 150px); }
.cdlg .cdcontact{ display:grid; grid-template-columns:repeat(3,1fr); }
.cdlg .cdcontact>div{ display:flex; align-items:center; gap:11px; padding:13px 18px; border-bottom:1px solid var(--border); }
.cdlg .cdcontact>div+div{ border-inline-start:1px solid var(--border); }
.cdlg .cdcontact .ci{ width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand); display:grid; place-items:center; flex:none; }
.cdlg .cdcontact .ci svg{ width:17px; height:17px; }
.cdlg .cdcontact .ck{ font-size:.68rem; color:var(--muted); font-weight:600; }
.cdlg .cdcontact .cvv{ font-size:.86rem; font-weight:700; margin-top:1px; }
.cdlg .cvv.ltr,.cdlg .money,.cdlg .sct b{ font-variant-numeric:tabular-nums; }
.cdlg .cdstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; padding:14px 18px; }
.cdlg .sct{ background:var(--raised); border:1px solid var(--border); border-radius:13px; padding:13px 10px; text-align:center; }
.cdlg .sct b{ display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.cdlg .sct span{ display:block; font-size:.68rem; color:var(--muted); font-weight:600; margin-top:3px; }
.cdlg .cdact{ display:flex; gap:9px; padding:0 18px 14px; flex-wrap:wrap; }
.cdlg .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 15px; border-radius:11px; font-weight:700; font-size:.82rem; background:var(--surface); border:1px solid var(--border); color:var(--text); box-shadow:var(--shadow); cursor:pointer; transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; }
.cdlg .btn:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--brand) 40%,var(--border)); }
.cdlg .btn svg{ width:15px; height:15px; }
.cdlg .btn.pri{ background:linear-gradient(135deg,var(--accent),var(--brand)); color:var(--on-brand); border-color:transparent; box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 30%,transparent); }
.cdlg .btn.pri:hover{ box-shadow:0 12px 28px color-mix(in srgb,var(--brand) 40%,transparent); }
.cdlg .client-tabs{ display:flex; gap:7px; border-block:1px solid var(--border); padding:10px 18px; background:var(--raised); overflow:auto; }
.cdlg .client-tabs button{ white-space:nowrap; padding:8px 14px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--muted); background:none; border:0; cursor:pointer; transition:.15s; }
.cdlg .client-tabs button:hover{ color:var(--text); }
.cdlg .client-tabs button.on{ background:var(--surface); color:var(--brand); box-shadow:var(--shadow); font-weight:700; }
.cdlg .client-pane{ padding:20px; min-height:250px; animation:cdFade .25s var(--ease); }
@keyframes cdFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cdlg .health-panel{ display:grid; grid-template-columns:100px 1fr; gap:20px; align-items:center; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--raised); }
.cdlg .health-ring{ width:90px; height:90px; border-radius:50%; border:7px solid color-mix(in srgb,var(--hc,var(--brand)) 25%,var(--surface)); border-top-color:var(--hc,var(--brand)); display:grid; place-items:center; color:var(--hc,var(--brand)); font-weight:800; font-size:.82rem; text-align:center; }
.cdlg .health-panel b{ font-size:.96rem; }
.cdlg .health-panel p{ font-size:.82rem; color:var(--muted); margin:7px 0 0; }
.cdlg .summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:15px; }
.cdlg .summary-box{ border:1px solid var(--border); padding:15px; border-radius:14px; }
.cdlg .summary-box h4{ font-size:.84rem; color:var(--brand); margin-bottom:7px; }
.cdlg .summary-box p{ color:var(--muted); font-size:.82rem; margin:0; }
.cdlg .dtable{ width:100%; border-collapse:collapse; font-size:.84rem; }
.cdlg .dtable th{ text-align:start; font-size:.7rem; color:var(--muted); font-weight:700; padding:9px 10px; border-bottom:1px solid var(--border); }
.cdlg .dtable td{ padding:11px 10px; border-bottom:1px solid var(--border); }
.cdlg .dtable tr:last-child td{ border-bottom:none; }
.cdlg .dtable tbody tr{ transition:background .14s; }
.cdlg .dtable tbody tr:hover{ background:color-mix(in srgb,var(--brand) 5%,transparent); }
.cdlg .note-item{ background:var(--raised); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.cdlg .note-item .nh{ display:flex; align-items:center; gap:8px; font-size:.74rem; color:var(--muted); margin-bottom:6px; }
.cdlg .note-item .nh .av{ width:22px; height:22px; border-radius:6px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:.62rem; font-weight:700; }
.cdlg .note-item .nh b{ color:var(--text); font-weight:700; }
.cdlg .note-item .nh .t{ margin-inline-start:auto; font-weight:600; }
.cdlg .note-item .nh button{ color:var(--bad); background:none; border:0; cursor:pointer; }
.cdlg .note-item .nh button svg{ width:14px; height:14px; }
.cdlg .note-item p{ margin:0; font-size:.86rem; }
.cdlg .rem{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--border); }
.cdlg .rem:last-child{ border-bottom:none; }
.cdlg .rem>div{ flex:1; min-width:0; }
.cdlg .rem .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.cdlg .rem b{ font-size:.86rem; }
.cdlg .rem .s{ font-size:.76rem; color:var(--muted); margin-top:2px; }
.cdlg .rem.done{ opacity:.6; } .cdlg .rem.done b{ text-decoration:line-through; }
.cdlg .rem button{ padding:6px; background:none; border:0; cursor:pointer; flex:none; }
.cdlg .rem button svg{ width:16px; height:16px; }
.cdlg .timeline-item{ border-inline-start:2px solid var(--border); padding:0 16px 18px; margin-inline-start:6px; position:relative; }
.cdlg .timeline-item:before{ content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--brand); inset-inline-start:-5px; top:5px; }
.cdlg .timeline-item b{ font-size:.84rem; }
.cdlg .timeline-item small{ display:block; font-size:.72rem; color:var(--muted); margin-top:2px; }
.cdlg .empty{ padding:40px 20px; text-align:center; color:var(--muted); }
@media(max-width:720px){
  .cdlg .cdcontact{ grid-template-columns:1fr; } .cdlg .cdcontact>div+div{ border-inline-start:0; }
  .cdlg .cdstats{ grid-template-columns:repeat(2,1fr); }
  .cdlg .health-panel{ grid-template-columns:70px 1fr; gap:12px; padding:13px; } .cdlg .health-ring{ width:66px; height:66px; font-size:.72rem; }
  .cdlg .summary-grid{ grid-template-columns:1fr; } .cdlg .client-pane{ padding:14px; }
}