/* ============================================================
   هوية «الرعاية» — البلاغات، الاعتراضات، الأغراض المفقودة، الدعم الفني، العملاء
   (2026-11-04). طقم cr-* منقول من معاينة البلاغات المعتمدة (pages/complaints).

   مبدأ الألوان: لا لون ثابت فاتح ولا رمز هوية خام (--glass/--ink…) مباشرة؛
   كل شيء من رموز app.css (--text/--surface/--border…) التي يعيد identity.css
   قيمها في وضع الهوية، فيبقى الكلاسيكي بمظهريه صحيحاً أيضاً. ما يلزم من
   زجاج وخطوط يُشتقّ هنا (--cr-*) من تلك الرموز.
   لون القسم: --cr-acc = --c-care للبلاغات والدعم، --c-customers للعملاء.
   ============================================================ */
:root{
  --cr-g:color-mix(in srgb,var(--text) 4.5%,transparent);
  --cr-g2:color-mix(in srgb,var(--text) 8%,transparent);
  --cr-l:var(--border);
  --cr-l2:color-mix(in srgb,var(--text) 13%,transparent);
  --cr-s3:color-mix(in srgb,var(--surface-2),var(--text) 6%);
  --cr-ink2:color-mix(in srgb,var(--text) 78%,transparent);
  --cr-info:var(--c-customers,#60a5fa);
  --cr-info-bg:color-mix(in srgb,var(--c-customers,#60a5fa) 13%,transparent);
  --cr-ai:var(--c-growth,#e879f9);
  --cr-ease:cubic-bezier(.22,1,.36,1);
  --cr-spring:cubic-bezier(.34,1.56,.64,1);
  --cr-ring:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent);
}
.care{--cr-acc:var(--c-care,#fb923c);position:relative}
.care.cu{--cr-acc:var(--c-customers,#60a5fa)}
.care .cr-n,.cr-n{font-variant-numeric:tabular-nums}
.care .ltr{direction:ltr;unicode-bidi:plaintext}
.care svg{flex:none}

/* ---------- الصفحة والرأس ---------- */
.cr-page{padding-bottom:40px;min-width:0}
.cr-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cr-head h1{margin:0;font-family:var(--fdisplay);font-size:26px;font-weight:800;line-height:1.2;color:var(--text)}
.cr-head p{margin:6px 0 0;color:var(--muted);max-width:820px;font-size:13.5px;line-height:1.75}
.cr-head>div:not(.acts){flex:1 1 420px;min-width:0}
.cr-head .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none;align-self:flex-start;
  background:color-mix(in srgb,var(--cr-acc) 16%,transparent);color:var(--cr-acc);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cr-acc) 30%,transparent) inset,0 10px 26px -12px var(--cr-acc)}
.cr-ic svg{width:24px;height:24px}
.cr-crumb{margin-bottom:12px}

/* ---------- الأزرار والحقول ---------- */
.cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:11px;border:1px solid var(--cr-l2);
  background:var(--cr-g);color:var(--text);font:700 13px var(--fbody);cursor:pointer;white-space:nowrap;
  transition:transform .16s var(--cr-ease),background .24s var(--cr-ease),border-color .24s,filter .2s}
.cr-btn svg{width:16px;height:16px}
.cr-btn:hover{background:var(--cr-g2);border-color:color-mix(in srgb,var(--text) 20%,transparent)}
.cr-btn:active{transform:scale(.97)}
.cr-btn:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-btn.pri{border:0;background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 80%,transparent)}
.cr-btn.pri:hover{filter:brightness(1.08)}
.cr-btn.good{border-color:transparent;background:var(--good-bg);color:var(--good)}
.cr-btn.good:hover{background:color-mix(in srgb,var(--good) 22%,transparent)}
.cr-btn.bad{border-color:transparent;background:var(--crit-bg);color:var(--crit)}
.cr-btn.bad:hover{background:color-mix(in srgb,var(--crit) 22%,transparent)}
.cr-btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.cr-btn.wide{width:100%}
.cr-btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.cr-act{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 10px;border-radius:9px;border:1px solid var(--cr-l2);background:var(--cr-g);
  color:var(--cr-ink2);font:700 12px var(--fbody);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .15s var(--cr-ease)}
.cr-act svg{width:14px;height:14px}
.cr-act:hover{background:var(--cr-g2);color:var(--text)}
.cr-act:active{transform:scale(.95)}
.cr-act:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-act[disabled]{opacity:.45;cursor:not-allowed}
.cr-act.ico{width:30px;padding:0}
.cr-act.pri{border-color:color-mix(in srgb,var(--primary) 45%,transparent);background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--text)}
.cr-act.good{border-color:transparent;background:var(--good-bg);color:var(--good)}
.cr-act.bad{border-color:transparent;background:var(--crit-bg);color:var(--crit)}
.cr-act.warn{border-color:transparent;background:var(--warn-bg);color:var(--warn)}
.cr-input,.cr-sel,.cr-ta{border:1px solid var(--cr-l2);background:var(--cr-s3);color:var(--text);border-radius:11px;font:500 13px var(--fbody);min-width:0}
.cr-input{height:38px;padding:0 12px}
.cr-sel{height:38px;padding:0 12px;min-width:140px;cursor:pointer}
.cr-ta{width:100%;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.7}
.cr-input::placeholder,.cr-ta::placeholder{color:var(--faint)}
.cr-input:focus-visible,.cr-sel:focus-visible,.cr-ta:focus-visible{outline:none;box-shadow:var(--cr-ring);border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
.cr-input:disabled,.cr-ta:disabled,.cr-sel:disabled{opacity:.6;cursor:not-allowed}
.cr-link{border:0;background:none;color:var(--primary);font:700 12.5px var(--fbody);cursor:pointer;padding:0}
.cr-link:hover{text-decoration:underline}
.cr-fld{display:block;font-size:12.5px;font-weight:700;color:var(--cr-ink2);margin:12px 0 6px}
.cr-fld .req{color:var(--crit)}

/* مفتاح تشغيل — صندوق اختيار حقيقي بشكل مفتاح (القيمة .checked كما هي) */
input.cr-switch{appearance:none;-webkit-appearance:none;position:relative;width:40px;height:23px;flex:none;border-radius:12px;margin:0;
  background:var(--cr-g2);border:1px solid var(--cr-l);cursor:pointer;transition:background .3s var(--cr-ease)}
input.cr-switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:17px;height:17px;border-radius:50%;background:var(--muted);
  transition:transform .35s var(--cr-spring),background .3s}
input.cr-switch:checked{background:color-mix(in srgb,var(--good) 55%,transparent);border-color:transparent}
input.cr-switch:checked::after{transform:translateX(-17px);background:#fff}
[dir="ltr"] input.cr-switch:checked::after{transform:translateX(17px)}
input.cr-switch:focus-visible{outline:none;box-shadow:var(--cr-ring)}
input.cr-switch:disabled{opacity:.5;cursor:not-allowed}

/* ---------- الشرائح والحالات ---------- */
.care .tag svg{width:11px;height:11px;vertical-align:-1px}
.cr-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;
  background:var(--cr-g2);color:var(--cr-ink2);border:1px solid var(--cr-l);vertical-align:middle}
.cr-tag svg{width:12px;height:12px}
.cr-tag.good{background:var(--good-bg);color:var(--good);border-color:transparent}
.cr-tag.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.cr-tag.crit{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.cr-tag.info{background:var(--cr-info-bg);color:var(--cr-info);border-color:transparent}
.cr-tag.mute{background:transparent;color:var(--muted)}
.cr-tag.ai{background:color-mix(in srgb,var(--cr-ai) 13%,transparent);color:var(--cr-ai);border-color:transparent}
.cr-risk{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border-radius:7px;font-size:11.5px;font-weight:700;background:var(--cr-g);color:var(--muted);line-height:1.5}
.cr-risk svg{width:12px;height:12px}
.cr-risk.crit{background:var(--crit-bg);color:var(--crit)}
.cr-risk.warn{background:var(--warn-bg);color:var(--warn)}
.cr-risk.prov{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary)}
.cr-risk.good{background:var(--good-bg);color:var(--good)}
.cr-party{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font-size:11.5px;font-weight:700;white-space:nowrap}
.cr-party svg{width:13px;height:13px}
.cr-party.customer{background:color-mix(in srgb,var(--c-customers) 14%,transparent);color:var(--c-customers)}
.cr-party.captain{background:color-mix(in srgb,var(--c-captains) 14%,transparent);color:var(--c-captains)}
.cr-trust{display:inline-flex;align-items:center;gap:7px;font-size:12px}
.cr-trust .bar{width:64px;height:6px;border-radius:4px;background:var(--cr-g2);overflow:hidden}
.cr-trust .bar i{display:block;height:100%;width:var(--w,0);border-radius:4px;background:var(--tc);transition:width 1s var(--cr-ease)}
.cr-trust.hi{--tc:var(--good)}.cr-trust.mid{--tc:var(--warn)}.cr-trust.lo{--tc:var(--crit)}
.cr-trust b{color:var(--tc);font-weight:800;font-variant-numeric:tabular-nums}
/* المهلة بحلقة صغيرة — المتأخّرة تنبض */
.cr-sla{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-sla svg{width:16px;height:16px;transform:rotate(-90deg)}
.cr-sla .t{fill:none;stroke:var(--cr-g2);stroke-width:3}
.cr-sla .p{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.cr-sla.ok{color:var(--good)}.cr-sla.soon{color:var(--warn)}.cr-sla.late{color:var(--crit)}
.cr-sla.late svg{animation:crSlaPulse 1.6s ease-in-out infinite}
.cr-sla.late svg .p{filter:drop-shadow(0 0 3px var(--crit))}
.cr-sla.closed{color:var(--faint);font-weight:700}
.cr-sla.closed svg{transform:none;width:13px;height:13px}
@keyframes crSlaPulse{50%{opacity:.35}}

/* ---------- المؤشّرات ---------- */
.cr-kpis{display:grid;grid-template-columns:repeat(var(--kc,6),minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:1320px){.cr-kpis{grid-template-columns:repeat(min(var(--kc,6),3),minmax(0,1fr))}}
@media (max-width:620px){.cr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cr-kpi{--k:var(--primary);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;text-align:start;padding:14px 16px;border-radius:16px;
  border:1px solid var(--cr-l);background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:var(--shadow);color:var(--text);cursor:pointer;font:inherit;min-width:0;
  transition:transform .32s var(--cr-ease),border-color .25s,box-shadow .3s}
.cr-kpi:hover{transform:translateY(-2px);border-color:var(--cr-l2)}
.cr-kpi:focus-visible{outline:none;box-shadow:var(--cr-ring)}
div.cr-kpi,.cr-kpi.static{cursor:default}
div.cr-kpi:hover,.cr-kpi.static:hover{transform:none}
.cr-kpi[aria-pressed="true"]{border-color:color-mix(in srgb,var(--k) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 15%,transparent),var(--shadow)}
.cr-kpi.crit{--k:var(--crit)}.cr-kpi.good{--k:var(--good)}.cr-kpi.warn{--k:var(--warn)}.cr-kpi.acc{--k:var(--cr-acc)}
.cr-kpi .kt{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);min-width:0}
.cr-kpi .kt>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-kpi .ki{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent);flex:none}
.cr-kpi .ki svg{width:15px;height:15px}
.cr-kpi .kv{font-family:var(--fdisplay);font-size:29px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.cr-kpi .kv small{font-size:13px;color:var(--muted);font-weight:700;margin-inline-start:4px}
.cr-kpi.crit .kv{color:var(--crit)}
.cr-kpi .ks{font-size:11.5px;color:var(--muted);min-height:18px;line-height:1.5}
.cr-kpi .meter{display:block;height:4px;border-radius:3px;background:var(--cr-g2);overflow:hidden;margin-top:2px}
.cr-kpi .meter i{display:block;height:100%;width:var(--w,0);background:linear-gradient(to left,var(--k),color-mix(in srgb,var(--k) 40%,transparent));border-radius:3px;transition:width 1s var(--cr-ease)}
.cr-kpi::after{content:"";position:absolute;inset-inline:16px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(to left,var(--k),transparent);opacity:.7;transform-origin:right;
  animation:crLine .9s var(--cr-ease) both;animation-delay:calc(var(--i,0) * 60ms + 200ms)}
@keyframes crLine{from{transform:scaleX(0)}}
.cr-kpi.sk .kv,.cr-kpi.sk .ks{color:transparent}
.content.no-anim .cr-kpi::after{animation:none}

/* ---------- الفلاتر ---------- */
.cr-fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cr-search{position:relative;flex:0 1 320px;min-width:200px;display:block}
.cr-search .cr-input{width:100%;padding-inline-start:36px}
.cr-search svg{position:absolute;inset-inline-start:12px;top:11px;width:16px;height:16px;color:var(--faint);pointer-events:none}
.cr-pills{display:flex;gap:6px;flex-wrap:wrap}
.cr-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--cr-l);background:transparent;color:var(--muted);
  font:700 12.5px var(--fbody);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .15s var(--cr-ease)}
.cr-pill:hover{color:var(--text);border-color:var(--cr-l2)}
.cr-pill:active{transform:scale(.96)}
.cr-pill:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-pill svg{width:14px;height:14px}
.cr-pill[aria-pressed="true"],.cr-pill.on{background:color-mix(in srgb,var(--primary) 18%,transparent);border-color:color-mix(in srgb,var(--primary) 50%,transparent);color:var(--text)}
.cr-pill .n{font-size:11px;background:var(--cr-g2);border-radius:8px;padding:0 6px;min-width:18px;text-align:center;line-height:18px;font-variant-numeric:tabular-nums}
.cr-pill .n:empty,.cr-pill .n[hidden]{display:none}
.cr-pill.crit[aria-pressed="true"]{background:var(--crit-bg);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.cr-rail{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--cr-g);border:1px solid var(--cr-l);flex-wrap:wrap}
.cr-rail .cr-pill{border:0;height:28px}
.cr-spacer{flex:1}
.cr-count{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cr-count b{color:var(--text)}
.cr-fchip{display:inline-flex;align-items:center;gap:4px;height:24px;padding-inline:10px 4px;border-radius:999px;background:color-mix(in srgb,var(--primary) 15%,transparent);
  color:var(--text);font-weight:700;font-size:12px;animation:crPop .4s var(--cr-spring)}
.cr-fchip button{width:18px;height:18px;border-radius:50%;border:0;background:var(--cr-g2);color:inherit;cursor:pointer;display:grid;place-items:center;padding:0;font-size:10px}
@keyframes crPop{0%{transform:scale(.6);opacity:.2}100%{transform:none;opacity:1}}
.cr-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--cr-g);border:1px dashed var(--cr-l2);color:var(--muted);font-size:12.5px;margin-bottom:12px;line-height:1.7}
.cr-hint svg{width:16px;height:16px;color:var(--primary)}
.cr-hint b{color:var(--text)}

/* ---------- تبويبات بحبر منزلق ---------- */
.cr-tabs{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--cr-l);margin:22px 0 16px;overflow-x:auto;scrollbar-width:none}
.cr-tabs::-webkit-scrollbar{display:none}
.cr-tab{position:relative;display:inline-flex;align-items:center;gap:7px;padding:10px 14px 13px;border:0;background:none;color:var(--muted);font:700 14px var(--fbody);cursor:pointer;white-space:nowrap;transition:color .24s}
.cr-tab svg{width:16px;height:16px}
.cr-tab:hover{color:var(--cr-ink2)}
.cr-tab.on{color:var(--text)}
.cr-tab:focus-visible{outline:none;box-shadow:inset var(--cr-ring);border-radius:10px}
.cr-tab .tb{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--cr-g2);font-size:11.5px;display:inline-grid;place-items:center;color:var(--cr-ink2);font-variant-numeric:tabular-nums}
.cr-tab .tb[hidden]{display:none}
.cr-tab .tb.crit{background:var(--crit-bg);color:var(--crit)}
.cr-tab .tb.warn{background:var(--warn-bg);color:var(--warn)}
.cr-ink{position:absolute;bottom:0;left:0;height:3px;width:0;border-radius:3px 3px 0 0;background:var(--grad);box-shadow:0 0 14px color-mix(in srgb,var(--primary) 65%,transparent);
  transition:transform .5s var(--cr-spring),width .5s var(--cr-spring)}
.cr-swap{animation:crSwap .42s var(--cr-ease) both}
@keyframes crSwap{from{opacity:0;transform:translateY(8px)}}

/* ---------- البطاقات ---------- */
.cr-card{position:relative;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--cr-l);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;min-width:0}
.cr-card+.cr-card{margin-top:0}
.cr-grid{display:grid;gap:16px}
.cr-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cr-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.cr-g3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.cr-g2,.cr-g3{grid-template-columns:1fr}}
.cr-sect-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cr-sect-h h3{margin:0;font-size:15px;font-weight:700}
.cr-sect-h .h{font-size:12px;color:var(--muted)}
.cr-ch{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
.cr-ch .hi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--cr-g2);color:var(--cr-ink2);flex:none}
.cr-ch .hi svg{width:16px;height:16px}
.cr-ch.acc .hi{background:color-mix(in srgb,var(--cr-acc) 15%,transparent);color:var(--cr-acc)}
.cr-ch h3{margin:0;font-size:14.5px;font-weight:700;color:var(--text)}
.cr-ch small{display:block;color:var(--muted);font-size:11.5px;line-height:1.5}
.cr-ch .end{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.cr-kv{display:grid}
.cr-kv .r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--cr-l);font-size:13px;min-width:0}
.cr-kv .r:last-child{border-bottom:0}
.cr-kv .r .k{color:var(--muted);flex:none;max-width:48%}
.cr-kv .r .v{color:var(--text);font-weight:700;text-align:end;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.cr-kv .r .v.crit{color:var(--crit)}.cr-kv .r .v.good{color:var(--good)}.cr-kv .r .v.warn{color:var(--warn)}.cr-kv .r .v.dim{color:var(--muted);font-weight:500}
.cr-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--cr-l);font-size:12.5px;color:var(--muted);line-height:1.7;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-foot.dim{color:var(--faint)}
.cr-bars{display:grid;gap:10px}
.cr-brow{display:grid;grid-template-columns:minmax(90px,140px) 1fr 40px;gap:10px;align-items:center;font-size:12.5px}
.cr-brow .lb{color:var(--cr-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-brow .tr{height:10px;border-radius:6px;background:var(--cr-g);overflow:hidden;display:flex}
.cr-brow .tr i{display:block;height:100%;width:var(--w,0);border-radius:6px;background:var(--bc,var(--grad));transition:width 1s var(--cr-ease);transition-delay:var(--d,0ms)}
.cr-brow .n{font-weight:800;text-align:end;font-variant-numeric:tabular-nums}
.cr-quote{padding:10px 12px;border-radius:11px;font-size:12.5px;line-height:1.75;background:var(--cr-g);border-inline-start:3px solid var(--cr-l2);color:var(--cr-ink2);overflow-wrap:anywhere}
.cr-quote svg{width:14px;height:14px;vertical-align:-2px}
.cr-quote.crit{background:var(--crit-bg);border-color:var(--crit);color:var(--text)}
.cr-quote.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--text)}
.cr-quote.good{background:var(--good-bg);border-color:var(--good);color:var(--text)}
.cr-quote.mute{color:var(--muted)}
.cr-quote.big{font-size:14px;line-height:1.85;color:var(--text);border-color:var(--cr-acc);padding:14px 16px}

/* شرائح المدن */
.cr-cities{display:flex;flex-wrap:wrap;gap:8px}
.cr-city{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:12px 5px;border-radius:999px;border:1px solid var(--cr-l);background:var(--cr-g);cursor:pointer;
  color:var(--cr-ink2);font:700 13px var(--fbody);transition:background .2s,border-color .2s,color .2s,transform .15s var(--cr-ease);animation:id-rise .45s var(--cr-ease) both;animation-delay:var(--d,0ms)}
.content.no-anim .cr-city{animation:none}
.cr-city:hover{border-color:var(--cr-l2);color:var(--text)}
.cr-city:active{transform:scale(.96)}
.cr-city:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-city .cv{min-width:24px;height:24px;border-radius:12px;background:var(--cr-g2);display:grid;place-items:center;font-size:12px;padding:0 7px;font-variant-numeric:tabular-nums}
.cr-city .cq{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-inline-end:4px}
.cr-city .cl{min-width:22px;height:22px;border-radius:11px;background:var(--crit-bg);color:var(--crit);display:grid;place-items:center;font-size:11.5px;padding:0 6px;margin-inline-start:-4px}
.cr-city.on{background:color-mix(in srgb,var(--cr-acc) 16%,transparent);border-color:color-mix(in srgb,var(--cr-acc) 50%,transparent);color:var(--text)}
.cr-city.on .cv{background:color-mix(in srgb,var(--cr-acc) 40%,transparent);color:var(--text)}

/* ---------- القوائم الشبكية ---------- */
.cr-listwrap{border:1px solid var(--cr-l);border-radius:16px;background:var(--surface);overflow-x:auto;overflow-y:hidden;position:relative}
.cr-list{min-width:var(--minw,980px)}
.cr-lh,.cr-row{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:0 16px}
.cr-lh{height:40px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--cr-l);position:sticky;top:0;z-index:2}
.cr-lh>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-row{position:relative;min-height:64px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--cr-l);cursor:pointer;transition:background .18s;animation:crRowIn .5s var(--cr-ease) both;animation-delay:var(--d,0ms)}
.content.no-anim .cr-row{animation:none}
.cr-row>*{min-width:0}
.cr-row:last-child{border-bottom:0}
.cr-row:hover{background:var(--cr-g)}
.cr-row:focus-visible{outline:none;background:var(--cr-g2);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 45%,transparent)}
.cr-row::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:3px 0 0 3px;background:var(--sc,transparent)}
.cr-row.crit{--sc:var(--crit)}.cr-row.warn{--sc:var(--warn)}
.cr-row.hot{background:color-mix(in srgb,var(--crit) 7%,transparent)}
@keyframes crRowIn{from{opacity:0;transform:translateY(8px)}}
.cr-row .ref{font-weight:800;color:var(--text);font-size:12.5px;font-variant-numeric:tabular-nums}
.cr-row .sm{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-row .nm{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-row .clip{font-size:12px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-skrow{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--cr-l)}
.cr-sk{background:linear-gradient(90deg,var(--cr-g) 0%,var(--cr-g2) 40%,var(--cr-g) 80%);background-size:200% 100%;animation:crShimmer 1.4s linear infinite;border-radius:8px;display:block;height:12px}
@keyframes crShimmer{to{background-position:-200% 0}}
.cr-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;border-top:1px solid var(--cr-l);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cr-who{display:flex;align-items:center;gap:10px;min-width:0}
.cr-who .wt{min-width:0}
.cr-who .sub{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-av{flex:none;display:inline-grid;place-items:center;border-radius:50%;font-weight:800;color:#160b26;background:var(--av,var(--primary));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--av,var(--primary)) 25%,transparent);font-family:var(--fdisplay);line-height:1}
.cr-av svg{width:52%;height:52%}

/* ---------- الحالة الفارغة ---------- */
.cr-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 20px 48px;color:var(--muted)}
.cr-empty .art{width:96px;height:96px;margin-bottom:6px}
.cr-empty .art .r1{fill:none;stroke:var(--cr-l2);stroke-width:1.5;stroke-dasharray:4 5;transform-origin:48px 48px;animation:crSpin 18s linear infinite}
.cr-empty .art .r2{fill:color-mix(in srgb,var(--cr-acc) 12%,transparent);stroke:color-mix(in srgb,var(--cr-acc) 40%,transparent)}
.cr-empty .art .ck{fill:none;stroke:var(--cr-acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:crDraw .8s var(--cr-ease) .2s forwards}
.cr-empty b{color:var(--text);font-size:15px}
.cr-empty p{margin:0;max-width:440px;font-size:13px;line-height:1.7}
.cr-empty .cr-btn{margin-top:10px}
@keyframes crSpin{to{transform:rotate(360deg)}}
@keyframes crDraw{to{stroke-dashoffset:0}}
.cr-err{padding:14px 16px;border-radius:12px;background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-line);font-size:13px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cr-load{display:flex;align-items:center;gap:10px;justify-content:center;padding:40px;color:var(--muted);font-size:13px}
.cr-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:crSpin .7s linear infinite;flex:none}

/* ---------- البلاغات: شريط الوكيل + «لماذا» ---------- */
.cr-agent{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-radius:16px;border:1px solid var(--cr-l);margin-bottom:16px;font-size:13px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--good) 8%,transparent),transparent 60%),var(--cr-g)}
.cr-agent.off{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 10%,transparent),transparent 60%),var(--cr-g)}
.cr-agent.dry{background:linear-gradient(90deg,color-mix(in srgb,var(--cr-info) 10%,transparent),transparent 60%),var(--cr-g)}
.cr-agent .st{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.cr-agent .st svg{width:16px;height:16px;color:var(--warn)}
.cr-agent .msg{font-size:12.5px;color:var(--muted);flex:1 1 300px;line-height:1.7}
.cr-agent .msg b{color:var(--warn)}
.cr-agent .cap{margin-inline-start:auto;display:flex;flex-direction:column;gap:5px;min-width:250px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cr-agent .cap b{color:var(--text)}
.cr-agent .meter{display:flex;gap:6px}
.cr-agent .meter span{flex:1;height:5px;border-radius:3px;background:var(--cr-g2);overflow:hidden}
.cr-agent .meter i{display:block;height:100%;width:var(--w,0);border-radius:3px;background:var(--grad);transition:width 1.1s var(--cr-ease)}
.cr-agent .meter span+span i{background:linear-gradient(to left,var(--c-reports,#22d3ee),var(--cr-info))}
.cr-live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;display:inline-block}
.cr-live::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--good);animation:crPing 1.8s var(--cr-ease) infinite}
.cr-live.warn{background:var(--warn)}.cr-live.warn::after{border-color:var(--warn)}
.cr-live.info{background:var(--cr-info)}.cr-live.info::after{border-color:var(--cr-info)}
.cr-live.crit{background:var(--crit)}.cr-live.crit::after{border-color:var(--crit)}
.cr-live.off{background:var(--faint)}.cr-live.off::after{display:none}
@keyframes crPing{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.4);opacity:0}}
.cr-why{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border-radius:16px;border:1px solid var(--cr-l);background:var(--surface);font-size:12.5px;color:var(--muted);line-height:1.8}
.cr-why>svg{width:16px;height:16px;color:var(--cr-ai)}
.cr-why>span:first-of-type{flex:1 1 420px}
.cr-why b{color:var(--text)}
.cr-why .n{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.cr-stack{display:flex;height:8px;border-radius:5px;overflow:hidden;flex:1 1 220px;min-width:160px;background:var(--cr-g)}
.cr-stack i{display:block;height:100%;width:var(--w,0);transition:width 1s var(--cr-ease);transition-delay:var(--d,0ms)}

/* بطاقات قرار الوكيل */
.cr-cards{display:grid;gap:12px}
.cr-dcard{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 200px;gap:14px;padding:16px;border-radius:16px;border:1px solid var(--cr-l);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:var(--shadow);cursor:pointer;transition:border-color .25s,transform .3s var(--cr-ease),box-shadow .3s;
  animation:crRowIn .5s var(--cr-ease) both;animation-delay:var(--d,0ms)}
.content.no-anim .cr-dcard{animation:none}
.cr-dcard:hover{border-color:var(--cr-l2);transform:translateY(-1px)}
.cr-dcard.sel{border-color:color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent),var(--shadow)}
.cr-dcard.no-chk{grid-template-columns:minmax(0,1fr) 200px}
.cr-chkb{width:18px;height:18px;margin-top:3px;accent-color:var(--primary);cursor:pointer}
.cr-dcard .hd2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cr-dcard .ref{font-weight:800;color:var(--text);font-size:13px;font-variant-numeric:tabular-nums}
.cr-dcard .meta{font-size:11.5px;color:var(--faint)}
.cr-dcard .txt{font-size:14.5px;font-weight:700;color:var(--text);display:flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.cr-dcard .txt svg{width:15px;height:15px;color:var(--c-captains)}
.cr-dcard .bd{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.7;overflow-wrap:anywhere}
.cr-agentc{margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--cr-ai) 6%,var(--cr-g));border:1px solid color-mix(in srgb,var(--cr-ai) 18%,transparent);
  font-size:12.5px;color:var(--cr-ink2);line-height:1.75;overflow-wrap:anywhere}
.cr-agentc .ah{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:800;color:var(--cr-ai);font-size:12px;margin-bottom:4px}
.cr-agentc .ah svg{width:14px;height:14px}
.cr-agentc .vd,.cr-agentc .ev{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cr-dcard .side{display:flex;flex-direction:column;gap:8px;align-items:stretch;border-inline-start:1px dashed var(--cr-l);padding-inline-start:14px}
.cr-dcard .side .row{display:grid;grid-template-columns:1fr auto;gap:6px}
.cr-dcard .side .k{font-size:11px;color:var(--faint);font-weight:700}
.cr-bulk{display:flex;align-items:center;gap:8px;padding:6px;padding-inline:12px 6px;border-radius:12px;background:color-mix(in srgb,var(--primary) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);font-size:12.5px;font-weight:700;opacity:0;transform:translateY(6px) scale(.97);pointer-events:none;
  transition:opacity .3s var(--cr-ease),transform .35s var(--cr-spring)}
.cr-bulk.on{opacity:1;transform:none;pointer-events:auto}
.cr-chk-all{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cr-ink2);cursor:pointer}
@media (max-width:820px){
  .cr-dcard,.cr-dcard.no-chk{grid-template-columns:22px minmax(0,1fr)}
  .cr-dcard.no-chk{grid-template-columns:minmax(0,1fr)}
  .cr-dcard .side{grid-column:1/-1;border:0;padding:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  .cr-bulk{flex-wrap:wrap}
}

/* قائمة البلاغات */
.cr-cl{--cols:112px 120px minmax(150px,1.3fr) 66px minmax(140px,1fr) 100px 140px 100px 34px;--minw:1040px}
.cr-cl .cat{color:var(--text);font-weight:700;font-size:13px}
.cr-cl .aiv{display:flex;flex-direction:column;gap:3px}
.cr-cl .aiv small{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .cr-cl{--minw:0}
  .cr-cl .cr-lh{display:none}
  .cr-cl .cr-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ref st" "cat cat" "party sev" "cap sla" "ai ai";gap:8px 10px;padding:14px 16px}
  .cr-cl .cr-row>:nth-child(1){grid-area:ref}.cr-cl .cr-row>:nth-child(2){grid-area:party}.cr-cl .cr-row>:nth-child(3){grid-area:cat}
  .cr-cl .cr-row>:nth-child(4){grid-area:sev;justify-self:end}.cr-cl .cr-row>:nth-child(5){grid-area:cap}.cr-cl .cr-row>:nth-child(6){grid-area:sla;justify-self:end}
  .cr-cl .cr-row>:nth-child(7){grid-area:ai}.cr-cl .cr-row>:nth-child(8){grid-area:st;justify-self:end;text-align:end}.cr-cl .cr-row>:nth-child(9){display:none}
}

/* ---------- حلقة الإحصاء ---------- */
.cr-donut{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.cr-donut svg{width:110px;height:110px;flex:none;transform:rotate(-90deg)}
.cr-donut circle{fill:none;stroke-width:14}
.cr-donut .seg{transition:stroke-dasharray 1.2s var(--cr-ease)}
.cr-donut .c{font-family:var(--fdisplay);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.cr-donut .l{font-size:12px;color:var(--muted)}
.cr-setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--cr-l);font-size:13px}
.cr-setrow:last-of-type{border-bottom:0}
.cr-setrow .k{color:var(--cr-ink2)}
.cr-setrow .v{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.cr-setrow .cr-input{width:104px;text-align:center;height:34px}

/* ============================================================
   صفحة تفاصيل (بلاغ، اعتراض، غرض مفقود) — بطل + عمود جانبي ثابت
   ============================================================ */
.cr-hero{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--cr-l);padding:20px 24px;margin-bottom:18px;box-shadow:var(--shadow-lg);
  background:radial-gradient(640px 240px at 95% -40%,color-mix(in srgb,var(--cr-acc) 24%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.cr-hero::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:linear-gradient(180deg,transparent,var(--cr-acc) 30%,var(--cr-acc) 70%,transparent);opacity:.7}
.cr-hero .bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cr-hero .bar .ttl{font-size:12.5px;color:var(--muted);font-weight:700}
.cr-hero .bar .ttl a{cursor:pointer;color:var(--muted)}
.cr-hero .bar .ttl a:hover{color:var(--text)}
.cr-hero .bar .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-hid{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cr-hname{min-width:0;flex:1 1 320px}
.cr-hname h1{margin:0;font-family:var(--fdisplay);font-size:23px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text);line-height:1.3}
.cr-meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font-size:12.5px;margin-top:5px}
.cr-meta i{font-style:normal;color:var(--faint)}
.cr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cr-hstats{display:flex;gap:8px;flex-wrap:wrap}
.cr-hstat{padding:9px 14px;border-radius:14px;background:var(--cr-g);border:1px solid var(--cr-l);min-width:96px}
.cr-hstat .k{font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.cr-hstat .v{font-family:var(--fdisplay);font-size:22px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.cr-hstat .v small{font-size:12px;color:var(--muted);margin-inline-start:3px;font-weight:700}
.cr-hstat.crit .v{color:var(--crit)}.cr-hstat.good .v{color:var(--good)}.cr-hstat.warn .v{color:var(--warn)}
.cr-face{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;flex:none;background:var(--cr-g2);color:var(--muted);position:relative}
.cr-face svg{width:30px;height:30px}
.cr-face.bad{background:var(--crit-bg);color:var(--crit);box-shadow:0 0 0 1px color-mix(in srgb,var(--crit) 30%,transparent) inset,0 12px 30px -12px var(--crit)}
.cr-face.warn{background:var(--warn-bg);color:var(--warn)}
.cr-face.good{background:var(--good-bg);color:var(--good)}
.cr-face.acc{background:color-mix(in srgb,var(--cr-acc) 15%,transparent);color:var(--cr-acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--cr-acc) 30%,transparent) inset,0 12px 30px -12px var(--cr-acc)}
.cr-face.bad::after{content:"";position:absolute;inset:-5px;border-radius:26px;border:2px solid var(--crit);opacity:0;animation:crFacePing 2.2s var(--cr-ease) infinite}
@keyframes crFacePing{0%{opacity:.6;transform:scale(.92)}100%{opacity:0;transform:scale(1.12)}}
.cr-dbody{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cr-col{display:grid;gap:16px;min-width:0}
.cr-side{position:sticky;top:calc(var(--cx-topbar,63px) + 12px);display:grid;gap:14px;min-width:0}
@media (max-width:1100px){.cr-dbody{grid-template-columns:minmax(0,1fr)}.cr-side{position:static}}
.cr-rise{animation:id-rise .45s var(--cr-ease) both;animation-delay:calc(var(--i,0) * 50ms)}
.content.no-anim .cr-rise{animation:none}

/* الشكوى */
.cr-rec{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:var(--cr-g);border:1px solid var(--cr-l)}
.cr-rec .wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;cursor:pointer;min-width:0}
.cr-rec .wave i{flex:1;height:var(--h);border-radius:2px;background:var(--faint);transition:background .2s;min-width:1px}
.cr-rec .wave i.on{background:var(--c-captains)}
.cr-rec small{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-rec .cr-act.ico{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--c-captains) 16%,transparent);color:var(--c-captains);border-color:transparent}
.cr-rec.playing .cr-act.ico{box-shadow:0 0 0 4px color-mix(in srgb,var(--c-captains) 18%,transparent)}
.cr-est{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 6px}
.cr-est>div{padding:10px;border-radius:12px;background:var(--cr-g);min-width:0}
.cr-est .k{font-size:11.5px;color:var(--muted)}
.cr-est .v{font-family:var(--fdisplay);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.cr-est .d{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.cr-est .d.bad{color:var(--crit);font-weight:800}
.cr-h90{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cr-h90>div{padding:10px;border-radius:12px;background:var(--cr-g);text-align:center}
.cr-h90 b{display:block;font-family:var(--fdisplay);font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.cr-h90 b.bad{color:var(--crit)}
.cr-h90 span{font-size:11.5px;color:var(--muted)}
@media (max-width:640px){.cr-est,.cr-h90{grid-template-columns:1fr 1fr}}
.cr-thread{display:grid;gap:10px}
.cr-msg{padding:10px 12px;border-radius:12px;background:var(--cr-g);border:1px solid var(--cr-l);animation:id-rise .45s var(--cr-ease) both;animation-delay:calc(var(--i,0) * 50ms + 150ms)}
.content.no-anim .cr-msg{animation:none}
.cr-msg.system{background:transparent;border-style:dashed}
.cr-msg.action{border-color:color-mix(in srgb,var(--warn) 30%,transparent);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.cr-msg.ai{border-color:color-mix(in srgb,var(--cr-ai) 30%,transparent);background:color-mix(in srgb,var(--cr-ai) 6%,transparent)}
.cr-msg .mh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.cr-msg .mh b{color:var(--text)}
.cr-msg .mh .t{margin-inline-start:auto;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.cr-msg p{margin:5px 0 0;font-size:13px;color:var(--cr-ink2);line-height:1.75;overflow-wrap:anywhere;white-space:pre-wrap}
.cr-compose{margin-top:12px;display:grid;gap:8px}
.cr-compose .row{display:flex;gap:8px;flex-wrap:wrap}
.cr-compose .row .cr-sel{flex:1 1 200px}
.cr-note{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--cr-l)}
.cr-note:last-child{border-bottom:0}
.cr-note .body{min-width:0;font-size:12.5px;color:var(--cr-ink2);line-height:1.7}
.cr-note .by{font-size:11px;color:var(--faint);display:flex;gap:8px}
.cr-note .by b{color:var(--text)}
.cr-sublbl{font-size:11.5px;color:var(--faint);font-weight:700;margin:8px 0 2px}

/* لوحة القرار */
.cr-cdec{border-radius:22px;border:1px solid var(--cr-l2);background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:var(--shadow-lg);overflow:hidden}
.cr-cdec .dh{padding:14px 16px;border-bottom:1px solid var(--cr-l)}
.cr-cdec .dh h3{margin:0;font-size:15px;font-weight:800}
.cr-cdec .dh small{color:var(--muted);font-size:11.5px}
.cr-cdec .bd{padding:14px 16px 16px;display:grid;gap:10px}
.cr-reco{padding:12px;border-radius:14px;background:color-mix(in srgb,var(--cr-ai) 7%,var(--cr-g));border:1px solid color-mix(in srgb,var(--cr-ai) 22%,transparent)}
.cr-reco .rh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:800;color:var(--cr-ai)}
.cr-reco .rh svg{width:14px;height:14px}
.cr-reco .rbx{font-size:15px;font-weight:800;color:var(--text);margin:8px 0 4px}
.cr-reco .rr{font-size:12px;color:var(--muted);line-height:1.75;overflow-wrap:anywhere}
.cr-reco .ra{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:10px}
.cr-declbl{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--muted);margin-top:4px}
.cr-declbl svg{width:13px;height:13px}
.cr-decgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cr-decgrid .cr-act{height:34px}
.cr-done{display:grid;gap:6px;margin-top:4px}
.cr-done .d{padding:8px 10px;border-radius:10px;background:var(--cr-g);border-inline-start:3px solid var(--warn);font-size:12px}
.cr-done .d.ai{border-color:var(--cr-ai)}
.cr-done .d b{display:block;color:var(--text)}
.cr-done .d small{color:var(--faint)}
.cr-fine{font-size:11px;color:var(--faint);line-height:1.7}

/* ============================================================
   الاعتراضات
   ============================================================ */
.cr-src{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;
  background:var(--cr-g2);color:var(--muted)}
.cr-src svg{width:12px;height:12px}
.cr-src b{font-variant-numeric:tabular-nums;margin-inline-start:2px}
.cr-src[data-s="rule_action"]{background:var(--warn-bg);color:var(--warn)}
.cr-src[data-s="violation"]{background:var(--crit-bg);color:var(--crit)}
.cr-src[data-s="engine"]{background:var(--cl-ops-bg,color-mix(in srgb,var(--primary) 14%,transparent));color:var(--cl-ops,var(--primary))}
.cr-pen{display:flex;flex-direction:column;gap:3px;min-width:0}
.cr-pen b{font-size:13px;font-weight:800;color:var(--text);overflow-wrap:anywhere}
.cr-pen .pa{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cr-pen .cr-src{align-self:flex-start}
.cr-bysrc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center}
.cr-bysrc .cr-src{height:28px;padding:0 12px;font-size:12px}
.cr-ap{--cols:minmax(170px,1.1fr) minmax(190px,1.2fr) minmax(220px,1.6fr) 80px 120px 116px 34px;--minw:1040px}
.cr-ev{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:12px;color:var(--primary);font-variant-numeric:tabular-nums}
.cr-ev svg{width:14px;height:14px}
.cr-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cr-shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--cr-l);background:var(--cr-g);transition:transform .3s var(--cr-ease),border-color .2s}
.cr-shot:hover{transform:translateY(-2px);border-color:var(--cr-l2)}
.cr-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.cr-shot .lb{position:absolute;inset-block-end:8px;inset-inline-start:8px;display:inline-flex;gap:4px;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(10,5,20,.72);color:#fff}
.cr-shot .lb svg{width:12px;height:12px}
.cr-hist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cr-hist button{width:100%;display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px solid transparent;background:none;color:inherit;cursor:pointer;text-align:start;font:inherit}
.cr-hist button:hover{background:var(--cr-g);border-color:var(--cr-l)}
.cr-hist .l{flex:1;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-hist small{font-size:11px;color:var(--faint)}
.cr-histsum{display:flex;gap:8px;margin-bottom:10px}
.cr-histsum>div{flex:1;padding:10px;border-radius:12px;background:var(--cr-g);text-align:center}
.cr-histsum b{display:block;font-family:var(--fdisplay);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.cr-histsum span{font-size:11.5px;color:var(--muted)}
.cr-mmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cr-mmeta>span{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:11px;background:var(--cr-g);font-size:12.5px;font-weight:700;min-width:0}
.cr-mmeta small{font-size:11px;color:var(--muted);font-weight:600}
.cr-decide{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}

/* ============================================================
   الأغراض المفقودة
   ============================================================ */
.cr-li{--cols:120px minmax(130px,1fr) minmax(130px,1fr) minmax(180px,1.4fr) 140px 96px 34px;--minw:960px}
.cr-cat{display:inline-flex;align-items:center;gap:5px;font-weight:800;white-space:nowrap;color:var(--text)}
.cr-item{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cr-item>div{flex:1 1 220px;min-width:0}
.cr-photo{width:150px;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--cr-l);cursor:zoom-in;box-shadow:var(--shadow)}
.cr-steps{list-style:none;margin:0;padding:0;position:relative}
.cr-steps li{position:relative;display:flex;justify-content:space-between;gap:10px;padding:0 0 14px;padding-inline-start:22px;font-size:12.5px;color:var(--text)}
.cr-steps li:last-child{padding-bottom:0}
.cr-steps li::before{content:"";position:absolute;inset-inline-start:3px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--sd,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--sd,var(--primary)) 20%,transparent)}
.cr-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:7px;top:16px;bottom:2px;width:1px;background:var(--cr-l2)}
.cr-steps li.off{--sd:var(--faint);color:var(--muted)}
.cr-steps li.crit{--sd:var(--crit)}.cr-steps li.good{--sd:var(--good)}.cr-steps li.warn{--sd:var(--warn)}
.cr-steps small{color:var(--muted);font-size:11.5px}
.cr-steps .t{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--muted);text-align:end}
.cr-outcome{display:grid;gap:6px;margin-bottom:6px}
.cr-outcome label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--cr-l);background:var(--cr-g);cursor:pointer;font-weight:700;font-size:13px;transition:border-color .2s,background .2s}
.cr-outcome label:has(input:checked){border-color:color-mix(in srgb,var(--primary) 55%,transparent);background:color-mix(in srgb,var(--primary) 12%,transparent)}
.cr-outcome input{accent-color:var(--primary);width:16px;height:16px}

/* ============================================================
   المحادثات — فقاعات واحدة للأغراض المفقودة ومحادثات التطبيق وواتساب
   ============================================================ */
.cr-chat{display:flex;flex-direction:column;gap:8px;padding:16px 14px;overflow-y:auto;scroll-behavior:smooth;
  background:radial-gradient(500px 260px at 100% 0%,color-mix(in srgb,var(--cr-acc) 6%,transparent),transparent 70%),
             radial-gradient(420px 240px at 0% 100%,color-mix(in srgb,var(--primary) 7%,transparent),transparent 70%),var(--bg)}
.cr-chat.box{max-height:560px;border-radius:14px;border:1px solid var(--cr-l)}
.cr-day{align-self:center;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--cr-l);padding:3px 12px;border-radius:999px;margin:8px 0 4px;position:sticky;top:0;z-index:1}
.cr-bub{position:relative;max-width:min(560px,78%);padding:9px 13px 7px;border-radius:16px;font-size:13.5px;line-height:1.75;word-break:break-word;
  background:var(--surface-2);border:1px solid var(--cr-l);color:var(--text);animation:crBub .42s var(--cr-spring) both;animation-delay:var(--d,0ms);box-shadow:0 6px 18px -12px rgba(0,0,0,.5)}
.content.no-anim .cr-bub{animation:none}
@keyframes crBub{from{opacity:0;transform:translateY(8px) scale(.97)}}
.cr-bub .tx{white-space:pre-wrap}
.cr-bub .who{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:2px;white-space:normal}
.cr-bub .tm{display:block;font-size:10.5px;color:var(--faint);margin-top:3px;text-align:end;font-variant-numeric:tabular-nums;white-space:normal}
.cr-bub.l{align-self:flex-start;border-start-start-radius:5px}
.cr-bub.r{align-self:flex-end;border-start-end-radius:5px}
.cr-bub.me{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 26px -14px color-mix(in srgb,var(--primary) 85%,transparent)}
.cr-bub.me .who,.cr-bub.me .tm{color:rgba(255,255,255,.78)}
.cr-bub.me a{color:#fff}
.cr-bub.cap{background:color-mix(in srgb,var(--c-captains) 12%,var(--surface-2));border-color:color-mix(in srgb,var(--c-captains) 28%,transparent)}
.cr-bub.cap .who{color:var(--c-captains)}
.cr-bub.cus .who{color:var(--c-customers)}
.cr-bub.ai{background:color-mix(in srgb,var(--cr-ai) 10%,var(--surface-2));border-color:color-mix(in srgb,var(--cr-ai) 28%,transparent)}
.cr-bub.ai .who{color:var(--cr-ai)}
.cr-bub.staff{align-self:center;max-width:min(620px,86%);background:color-mix(in srgb,var(--primary) 14%,var(--surface-2));border-color:color-mix(in srgb,var(--primary) 32%,transparent)}
.cr-bub.staff .who{color:var(--primary)}
.cr-sys{align-self:center;text-align:center;font-size:12px;color:var(--muted);max-width:86%;animation:crBub .42s var(--cr-ease) both}
.cr-sys span{display:inline-block;background:var(--surface);border:1px dashed var(--cr-l2);border-radius:999px;padding:3px 12px;line-height:1.6}
.cr-sys small{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.cr-composer{display:flex;gap:9px;align-items:flex-end;padding:11px 13px;border-top:1px solid var(--cr-l);background:var(--surface)}
.cr-composer textarea{flex:1;background:var(--cr-s3);border:1px solid var(--cr-l2);border-radius:14px;padding:10px 14px;font:500 13px/1.7 var(--fbody);resize:none;max-height:140px;color:var(--text);min-width:0}
.cr-composer textarea:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-send{width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:#fff;cursor:pointer;flex:none;display:grid;place-items:center;
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--primary) 85%,transparent);transition:transform .2s var(--cr-spring),filter .2s}
.cr-send svg{width:18px;height:18px;transform:scaleX(-1)}
.cr-send:hover{filter:brightness(1.1);transform:scale(1.06)}
.cr-send:disabled{opacity:.45;cursor:default;transform:none}
.cr-reply{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.cr-reply textarea{flex:1}

/* ============================================================
   الدعم الفني
   ============================================================ */
/* بطاقات الأفرع الثلاثة */
.cr-chan{display:flex;flex-direction:column;gap:10px;text-align:start;cursor:pointer;padding:18px 20px;border-radius:18px;border:1px solid var(--cr-l);font:inherit;color:var(--text);
  background:radial-gradient(360px 160px at 100% 0%,color-mix(in srgb,var(--ch) 18%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow);transition:transform .32s var(--cr-ease),border-color .25s,box-shadow .3s;min-width:0}
.cr-chan:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ch) 45%,transparent);box-shadow:0 18px 40px -22px var(--ch),var(--shadow)}
.cr-chan:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-chan .top{display:flex;align-items:center;gap:10px}
.cr-chan .top .ci{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ch) 16%,transparent);color:var(--ch)}
.cr-chan .top .ci svg{width:19px;height:19px}
.cr-chan .top b{font-size:15px}
.cr-chan .top .cr-tag{margin-inline-start:auto}
.cr-chan .big{font-family:var(--fdisplay);font-size:36px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cr-chan .sub{color:var(--muted);font-size:12.5px}
.cr-chan .go{display:inline-flex;align-items:center;gap:6px;color:var(--ch);font-weight:700;font-size:12.5px;margin-top:auto}
.cr-chan .go svg{width:14px;height:14px;transition:transform .3s var(--cr-ease)}
.cr-chan:hover .go svg{transform:translateX(-4px)}
/* رسم 24 ساعة */
.cr-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;align-items:end;height:150px;padding-top:8px}
.cr-hours .h{position:relative;height:100%;display:flex;align-items:flex-end}
.cr-hours .h i{display:block;width:100%;height:var(--w,0);min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--cr-acc) 55%,transparent),color-mix(in srgb,var(--cr-acc) 18%,transparent));
  transition:height .9s var(--cr-ease);transition-delay:var(--d,0ms)}
.cr-hours .h.peak i{background:linear-gradient(180deg,var(--cr-acc),color-mix(in srgb,var(--cr-acc) 50%,transparent));box-shadow:0 0 18px -4px var(--cr-acc)}
.cr-hours .h:hover i{background:var(--cr-acc)}
.cr-hours .h b{position:absolute;bottom:calc(var(--w,0) + 4px);left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--text);opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-hours .h:hover b,.cr-hours .h.peak b{opacity:1}
.cr-hours-ax{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;margin-top:6px;font-size:10px;color:var(--faint);text-align:center;font-variant-numeric:tabular-nums}
.cr-gauge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0}
.cr-gauge svg{width:190px;max-width:100%;height:auto}
.cr-gauge .t{fill:none;stroke:var(--cr-g2);stroke-width:14;stroke-linecap:round}
.cr-gauge .p{fill:none;stroke-width:14;stroke-linecap:round}
.cr-gauge .val{font-family:var(--fdisplay);font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:-64px}
.cr-gauge .lb{font-size:12px;color:var(--muted);margin-top:20px;text-align:center;line-height:1.7}
.cr-line{position:relative}
.cr-line svg{display:block;width:100%;height:190px;overflow:visible}
.cr-line .grid line{stroke:var(--cr-l);stroke-dasharray:3 5}
.cr-line .area{fill:url(#crLineFill)}
.cr-line .ln{fill:none;stroke:var(--cr-acc);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cr-line .dot{fill:var(--surface);stroke:var(--cr-acc);stroke-width:2}
.cr-line .ax{fill:var(--faint);font-size:10.5px;font-family:var(--fbody)}
.cr-line .tip{fill:var(--text);font-size:11px;font-weight:800;opacity:0;transition:opacity .2s}
.cr-line g.pt:hover .tip{opacity:1}
.cr-line g.pt:hover .dot{fill:var(--cr-acc)}
.cr-areain{animation:crFade 1s var(--cr-ease) .5s both}
@keyframes crFade{from{opacity:0}}
.content.no-anim .cr-areain{animation:none}
/* الجداول المضمَّنة للفريق وغيرها */
.cr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cr-tbl th{text-align:start;font-size:12px;color:var(--muted);font-weight:700;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--cr-l);white-space:nowrap}
.cr-tbl td{padding:11px 14px;border-bottom:1px solid var(--cr-l);color:var(--text);vertical-align:middle}
.cr-tbl tr:last-child td{border-bottom:0}
.cr-tbl tbody tr{transition:background .18s}
.cr-tbl tbody tr:hover{background:var(--cr-g)}
.cr-tbl .cr-input{width:72px;height:32px;text-align:center}
.cr-dotc{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dc,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--dc,var(--primary)) 22%,transparent)}
.cr-toggle{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--cr-l);background:transparent;color:var(--muted);font:700 12px var(--fbody);cursor:pointer}
.cr-toggle.on{background:var(--good-bg);color:var(--good);border-color:transparent}
.cr-toggle.on::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.cr-form{display:grid;gap:14px;max-width:620px}
.cr-form label{display:grid;gap:6px;font-size:12.5px;font-weight:700;color:var(--cr-ink2)}
.cr-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.cr-form .row2{grid-template-columns:1fr}}
.cr-form .chk{display:flex;align-items:center;gap:10px;grid-template-columns:none}
.cr-kb{display:grid;gap:10px}
.cr-kbi{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 14px;border-radius:14px;background:var(--cr-g);border:1px solid var(--cr-l)}
.cr-kbi b{color:var(--text);font-size:13.5px}
.cr-kbi p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.75;white-space:pre-wrap}

/* قائمة المحادثات (واتساب) والتذاكر */
.cr-cv{--cols:minmax(180px,1.1fr) minmax(220px,1.8fr) 140px 120px minmax(130px,.9fr) 60px;--minw:960px}
.cr-tk{--cols:128px 96px minmax(200px,1.6fr) minmax(150px,1fr) 130px 110px 90px;--minw:980px}
.cr-unread{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--crit);color:#fff;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--crit) 20%,transparent)}
.cr-tsla{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.cr-tsla .sla{all:unset}
.care .sla.over{color:var(--crit)}.care .sla.soon{color:var(--warn)}.care .sla.ok{color:var(--good)}
@media (max-width:760px){
  .cr-cv,.cr-tk,.cr-ap,.cr-li{--minw:0}
  .cr-cv .cr-lh,.cr-tk .cr-lh,.cr-ap .cr-lh,.cr-li .cr-lh{display:none}
  .cr-cv .cr-row,.cr-tk .cr-row,.cr-ap .cr-row,.cr-li .cr-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:14px 16px}
  .cr-cv .cr-row>:nth-child(2),.cr-tk .cr-row>:nth-child(3),.cr-ap .cr-row>:nth-child(2),.cr-ap .cr-row>:nth-child(3),.cr-li .cr-row>:nth-child(4){grid-column:1/-1}
  .cr-cv .cr-row>:last-child:empty{display:none}
  .cr-tk .cr-row>:last-child,.cr-ap .cr-row>:last-child,.cr-li .cr-row>:last-child{display:none}
}

/* صندوق محادثات التطبيق — لوحان */
.cr-inbox{display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px;height:calc(100vh - 230px);min-height:540px}
.cr-inbox .col{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;border:1px solid var(--cr-l);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.cr-inbox .ihead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--cr-l);background:linear-gradient(180deg,var(--surface-2),var(--surface));flex:none;min-height:64px}
.cr-inbox .ihead h3{margin:0;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.cr-inbox .ihead h3 svg{width:17px;height:17px;color:var(--cr-acc)}
.cr-inbox .ihead .cr-sel{min-width:0;height:34px;max-width:140px}
.cr-inbox .scroll{flex:1;overflow-y:auto;padding:8px}
.cr-inbox .cr-chat{flex:1}
.cr-th{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:start;background:transparent;border:1px solid transparent;border-radius:14px;padding:11px 12px;cursor:pointer;
  transition:background .18s,border-color .18s;margin-bottom:3px;font:inherit;color:inherit;animation:crRowIn .45s var(--cr-ease) both;animation-delay:var(--d,0ms)}
.content.no-anim .cr-th{animation:none}
.cr-th:hover{background:var(--cr-g)}
.cr-th.on{background:color-mix(in srgb,var(--primary) 12%,transparent);border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.cr-th .main{min-width:0;flex:1}
.cr-th .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cr-th .nm{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-th .tm{font-size:10.5px;color:var(--faint);flex:none}
.cr-th .pv{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-th.unread .nm,.cr-th.unread .pv{color:var(--text)}
.cr-th .mt{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.cr-th .ibx-chip,.cr-inbox .ibx-chip{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--cr-g2);border:1px solid var(--cr-l);color:var(--muted)}
.cr-th .ibx-chip.cap,.cr-inbox .ibx-chip.cap{background:color-mix(in srgb,var(--c-captains) 13%,transparent);color:var(--c-captains);border-color:transparent}
.cr-th .ibx-chip.cus,.cr-inbox .ibx-chip.cus{background:color-mix(in srgb,var(--c-customers) 13%,transparent);color:var(--c-customers);border-color:transparent}
.cr-th .ibx-chip.new{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.cr-th .av-w{position:relative;flex:none}
.cr-th .av-w .dotn{position:absolute;top:-1px;inset-inline-end:-1px;width:11px;height:11px;border-radius:50%;background:var(--crit);border:2px solid var(--surface);animation:crPulseDot 1.8s var(--cr-ease) infinite}
@keyframes crPulseDot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--crit) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cr-pane-empty{flex:1;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:30px}
.cr-pane-empty .art{width:120px;height:90px;margin:0 auto 10px;display:block}
.cr-pane-empty .art .b1{fill:color-mix(in srgb,var(--primary) 18%,transparent);stroke:color-mix(in srgb,var(--primary) 45%,transparent)}
.cr-pane-empty .art .b2{fill:color-mix(in srgb,var(--cr-acc) 16%,transparent);stroke:color-mix(in srgb,var(--cr-acc) 45%,transparent)}
.cr-pane-empty .art .dt{fill:var(--muted);animation:crTyping 1.2s ease-in-out infinite}
.cr-pane-empty .art .dt:nth-child(4){animation-delay:.15s}.cr-pane-empty .art .dt:nth-child(5){animation-delay:.3s}
@keyframes crTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cr-who2{display:flex;align-items:center;gap:10px;min-width:0}
.cr-who2 .nm{display:block;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-who2 small{display:block;font-size:11.5px;color:var(--faint)}
@media (max-width:1000px){.cr-inbox{grid-template-columns:1fr;height:auto}.cr-inbox .col.list{max-height:420px}.cr-inbox .col.pane{height:70vh;min-height:460px}}

/* الأدراج (المحادثة والتذكرة) — درج app.css نفسه بزجاج الهوية */
.drawer.cr-drawer{width:min(640px,100%);background:var(--bg);border-inline-start:1px solid var(--cr-l2);display:flex;flex-direction:column}
.drawer.cr-drawer::before{content:"";position:absolute;inset-block:0;inset-inline-end:-1px;width:2px;background:linear-gradient(180deg,transparent,var(--c-care) 30%,var(--c-care) 70%,transparent);opacity:.6;pointer-events:none}
.cr-drawer .drawer-head{position:relative;padding:18px 22px;border-bottom:1px solid var(--cr-l);display:flex;gap:12px;align-items:flex-start;
  background:radial-gradient(520px 200px at 95% -40%,color-mix(in srgb,var(--c-care) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.cr-drawer .drawer-head h2{margin:0 0 4px;font-family:var(--fdisplay);font-size:18px;font-weight:800;color:var(--text)}
.cr-drawer .drawer-head .sub{font-size:12px;color:var(--muted)}
.cr-drawer .drawer-head>div{flex:1;min-width:0}
.cr-drawer .drawer-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--cr-l2);background:var(--cr-g);color:var(--cr-ink2);display:grid;place-items:center;cursor:pointer;
  transition:transform .3s var(--cr-spring),background .2s;flex:none}
.cr-drawer .drawer-close:hover{background:var(--cr-g2);transform:rotate(90deg)}
.cr-drawer .drawer-body{flex:1;overflow-y:auto;padding:16px 22px 28px;display:grid;gap:14px;align-content:start}
.cr-drawer .drawer-sec{margin:0;padding:14px 16px;border-radius:16px;border:1px solid var(--cr-l);background:linear-gradient(180deg,var(--surface-2),var(--surface));animation:id-rise .45s var(--cr-ease) both;animation-delay:calc(var(--i,0) * 50ms + 80ms)}
.cr-drawer .drawer-sec h4{margin:0 0 10px;font-size:13.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.cr-drawer .drawer-sec h4 svg{width:15px;height:15px;color:var(--c-care)}
.cr-drawer .cr-chat{max-height:48vh;border-radius:14px;border:1px solid var(--cr-l);margin:0 -2px}
.cr-drawer .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cr-drawer .row .cr-sel{flex:1 1 220px}
.cr-tl{display:grid;gap:0;position:relative}
.cr-tl .it{position:relative;padding:0 0 14px;padding-inline-start:22px}
.cr-tl .it::before{content:"";position:absolute;inset-inline-start:3px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.cr-tl .it:not(:last-child)::after{content:"";position:absolute;inset-inline-start:7px;top:17px;bottom:2px;width:1px;background:var(--cr-l2)}
.cr-tl .it.system::before{background:var(--faint);box-shadow:none}
.cr-tl .it.pub::before{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent)}
.cr-tl .top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.cr-tl .top b{color:var(--text)}
.cr-tl .top .t{margin-inline-start:auto;color:var(--faint);font-size:11px}
.cr-tl .body{margin-top:4px;font-size:13px;color:var(--cr-ink2);line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}

/* ============================================================
   العملاء — القائمة (cux) فوق طقم cr-
   ============================================================ */
.cr-cu{--cols:minmax(190px,1.3fr) 110px 100px 80px 120px 110px 110px 74px 110px 34px;--minw:1120px}
.cr-comp{display:grid;grid-template-columns:58px auto;align-items:center;gap:7px}
.cr-comp .tr{height:6px;border-radius:4px;background:var(--cr-g2);overflow:hidden}
.cr-comp .tr i{display:block;height:100%;width:var(--w,0);border-radius:4px;background:var(--good);transition:width .9s var(--cr-ease)}
.cr-comp.warn .tr i{background:var(--warn)}.cr-comp.crit .tr i{background:var(--crit)}
.cr-comp b{font-size:12px;font-variant-numeric:tabular-nums}
.cr-stored{display:inline-flex;margin-inline-start:6px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--crit-bg);color:var(--crit);white-space:nowrap}
.cr-ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.cr-ccard{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;border:1px solid var(--cr-l);cursor:pointer;min-width:0;
  background:radial-gradient(300px 140px at 100% 0%,color-mix(in srgb,var(--av,var(--cr-acc)) 12%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow);transition:transform .3s var(--cr-ease),border-color .25s;animation:crRowIn .5s var(--cr-ease) both;animation-delay:var(--d,0ms)}
.content.no-anim .cr-ccard{animation:none}
.cr-ccard:hover{transform:translateY(-3px);border-color:var(--cr-l2)}
.cr-ccard:focus-visible{outline:none;box-shadow:var(--cr-ring)}
.cr-ccard .top{display:flex;align-items:center;gap:10px;min-width:0}
.cr-ccard .top>div{min-width:0;flex:1}
.cr-ccard .nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-ccard .sub{font-size:11.5px;color:var(--faint)}
.cr-ccard .mx{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cr-ccard .mx>div{padding:8px;border-radius:11px;background:var(--cr-g);text-align:center}
.cr-ccard .mx b{display:block;font-family:var(--fdisplay);font-size:16px;font-variant-numeric:tabular-nums}
.cr-ccard .mx span{font-size:10.5px;color:var(--muted)}
.cr-ccard .tg{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cr-more{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;color:var(--muted);background:none;border:1px solid transparent;cursor:pointer;transition:.15s}
.cr-more:hover{background:var(--cr-g2);color:var(--text);border-color:var(--cr-l)}
.cr-more svg{width:16px;height:16px}
.cr-seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--cr-g);border:1px solid var(--cr-l)}
.cr-seg button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:9px;border:0;background:none;color:var(--muted);font:700 12.5px var(--fbody);cursor:pointer}
.cr-seg button svg{width:14px;height:14px}
.cr-seg button.on{background:var(--cr-s3);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.care .cx-alerts .al{width:22px;height:22px;border-radius:7px}
.care .cx-alerts .al svg{width:13px;height:13px}
.cr-smart{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 12px;border-radius:14px;border:1px dashed var(--cr-l2);background:var(--cr-g);margin-bottom:10px}
.cr-smart .lb{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--cr-ai);margin-inline-end:4px}
.cr-smart .lb svg{width:14px;height:14px}
.cr-smart .cr-pill{height:30px;font-size:12px;background:var(--surface)}
.cr-busy{opacity:.55;pointer-events:none;transition:opacity .2s}

/* ============================================================
   ملف العميلة — البطل والتبويبات (customer-profile.js) فوق مكوّنات cx-*
   الإعادة هنا مقيَّدة بـ .care.cu فلا تمسّ صفحات الكباتن.
   ============================================================ */
.care.cu .cx-hero{background:radial-gradient(700px 260px at 92% -40%,color-mix(in srgb,var(--cr-acc) 26%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface));
  color:var(--text);border:1px solid var(--cr-l);border-radius:22px;box-shadow:var(--shadow-lg);padding:22px 24px}
.care.cu .cx-hero::before{inset:auto;inset-block:0;inset-inline-start:0;width:3px;height:auto;border-radius:0;background:linear-gradient(180deg,transparent,var(--cr-acc) 30%,var(--cr-acc) 70%,transparent);animation:none;opacity:.7}
.care.cu .cx-hero::after{display:none}
.care.cu .cx-hero-id h1{color:var(--text);font-family:var(--fdisplay)}
.care.cu .cx-hero-id .meta{color:var(--muted)}
.care.cu .cx-hero-av .img{background:conic-gradient(from 200deg,var(--cr-acc),var(--primary),var(--cr-acc));color:#fff;border:0;font-size:26px}
.care.cu .cx-hero-av .ring{border-color:color-mix(in srgb,var(--cr-acc) 45%,transparent);animation:cuRing 2.6s var(--cr-ease) infinite}
.care.cu .cx-hero-av .ring.suspended{border-style:dashed;border-color:var(--warn);animation:none}
@keyframes cuRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cr-acc) 45%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.care.cu .cx-htag{background:var(--cr-g2);border:1px solid var(--cr-l);color:var(--cr-ink2)}
.care.cu .cx-htag.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.care.cu .cx-hero-stats .hstat{background:var(--cr-g);border:1px solid var(--cr-l);border-radius:14px;color:var(--text)}
.care.cu .cx-hero-stats .hstat .k{color:var(--muted)}
.care.cu .cx-hero-stats .hstat .v{color:var(--text);font-variant-numeric:tabular-nums}
.care.cu .cx-btn-hero.primary{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 80%,transparent)}
.care.cu .cx-btn-hero.ghost{background:var(--cr-g);color:var(--text);border:1px solid var(--cr-l2)}
.care.cu .cx-compact{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--cr-l);color:var(--text)}
.care.cu .cx-tabs{border-bottom:1px solid var(--cr-l);background:none;box-shadow:none}
.care.cu .cx-tab{color:var(--muted)}
.care.cu .cx-tab.active{color:var(--text)}
.care.cu .cx-tab-ink{background:var(--grad);box-shadow:0 0 14px color-mix(in srgb,var(--primary) 65%,transparent);height:3px}
.care.cu .cx-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--cr-l);border-radius:16px;box-shadow:var(--shadow)}
.care.cu .cx-card:hover{transform:none;box-shadow:var(--shadow)}
.care.cu .cu-ai{background:linear-gradient(135deg,var(--primary),var(--cr-acc) 55%,var(--good))}
.care.cu .cu-ai-in{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.care.cu .cu-sig,.care.cu .cu-pstats div,.care.cu .cu-facts3 div,.care.cu .cu-step,.care.cu .cu-draft,.care.cu .cu-formula{background:var(--cr-g);border-color:var(--cr-l)}
.care.cu .cu-lg{background:var(--cr-g);border-color:var(--cr-l)}
.care.cu .cu-lg-hd:hover{background:var(--cr-g2)}
.care.cu .cu-code-card{background:linear-gradient(135deg,color-mix(in srgb,var(--cr-acc) 8%,transparent),var(--cr-g))}
.care.cu .cu-nba-opt{background:var(--cr-g);border-color:var(--cr-l)}
.care.cu .cu-alertbar{border-radius:16px}
.care.cu .cu-note{background:var(--cr-g);border-color:var(--cr-l);border-radius:16px}
.care.cu .data-tbl{background:var(--surface);border-color:var(--cr-l);border-radius:16px}
.care.cu .data-tbl th{background:var(--surface-2)}
.care.cu .entity-crumb{margin-bottom:12px}

/* ============================================================
   تقارير الشكاوى (crx) — طقم مركز التقارير؛ هنا لون القسم وما يخصّها
   ============================================================ */
.care.crx .crx-pc{background:var(--cr-g);border-color:var(--cr-l);border-radius:16px}
.care.crx .crx-click.on{background:color-mix(in srgb,var(--cr-acc) 10%,transparent);box-shadow:inset -3px 0 0 var(--cr-acc)}
.care.crx .crx-click:hover{background:var(--cr-g)}
.care.crx .crx-dot.crit{background:var(--crit)}

/* ---------- الحركة المخفَّضة ---------- */
@media (prefers-reduced-motion:reduce){
  .cr-kpi::after,.cr-city,.cr-row,.cr-dcard,.cr-msg,.cr-bub,.cr-sys,.cr-th,.cr-ccard,.cr-rise,.cr-swap,.cr-sla.late svg,.cr-live::after,.cr-face.bad::after,
  .cr-empty .art .r1,.cr-empty .art .ck,.cr-th .av-w .dotn,.cr-areain,.cr-pane-empty .art .dt,.cr-drawer .drawer-sec,.care.cu .cx-hero-av .ring{animation:none!important}
  .cr-empty .art .ck{stroke-dashoffset:0}
  .cr-brow .tr i,.cr-stack i,.cr-trust .bar i,.cr-hours .h i,.cr-comp .tr i,.cr-agent .meter i,.cr-kpi .meter i,.cr-donut .seg{transition:none!important}
}
.cr-gaugein{animation:crGaugeIn 1.3s var(--cr-ease) .2s both}
@keyframes crGaugeIn{from{stroke-dasharray:0 100}}
.content.no-anim .cr-gaugein{animation:none}
@media (prefers-reduced-motion:reduce){.cr-gaugein{animation:none}}
/* صندوق محادثات التطبيق يُعاد رسمه بعد كل ردّ: الفقاعة الأخيرة وحدها تظهر بحركة */
#acThread .cr-bub:not(.new){animation:none}
#acThread{animation:crFade .35s var(--cr-ease) both}
@media (max-width:900px){#ovRow{grid-template-columns:1fr!important}}
@media (max-width:760px){
  .cr-cu{--minw:0}
  .cr-cu .cr-lh{display:none}
  .cr-cu .cr-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px 10px;padding:14px 16px}
  .cr-cu .cr-row>:nth-child(1){grid-column:1/3}
  .cr-cu .cr-row>:nth-child(10){grid-column:3;grid-row:1}
  .cr-cu .cr-row>:nth-child(8){display:none}
}