/* ============================================================
 * mcp-integrations.css — تجربة ربط MCP المبسّطة
 * ------------------------------------------------------------
 * كل الأصناف هنا مسبوقة بـ mi- لتفادي أي تصادم مع أنماط
 * admin/mcp.html الداخلية (113 كيلوبايت من CSS مضمّن). الملف
 * يستهلك متغيّرات الثيم القائمة فقط (--color-*) فلا يفرض لوحة
 * ألوان جديدة ويتبع الوضعين الفاتح والداكن تلقائيًا.
 * ============================================================ */

/* ── شبكة البطاقات ─────────────────────────────────────────── */
/* الصنف مكرّر عمدًا: الحاوية تحتفظ بصنفها الأصلي .connector-grid المعرَّف
 * في <style> داخل الصفحة — وهو يأتي بعد هذا الملف في ترتيب المصادر — فنرفع
 * الخصوصية درجة واحدة ليكون العرض محسومًا بدل أن يعتمد على ترتيب التحميل. */
.mi-grid.mi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.9rem;
}

.mi-tile {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 12px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mi-tile:hover { box-shadow: 0 6px 20px -14px rgba(0,0,0,.35); }
.mi-tile.is-connected { border-color: var(--color-border-strong, #cfcfcf); }

.mi-tile-top { display: flex; gap: 0.7rem; align-items: flex-start; }

.mi-logo {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 9px; display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 1rem; overflow: hidden;
}
.mi-logo svg { width: 20px; height: 20px; }

.mi-name {
    font-weight: 600; font-size: 1rem; line-height: 1.35;
    color: var(--color-text-primary, #111);
}
.mi-desc {
    font-size: 0.8rem; line-height: 1.55; margin-top: 0.15rem;
    color: var(--color-text-secondary, #666);
}

.mi-meta {
    display: flex; gap: 0.45rem; flex-wrap: wrap;
    align-items: center; min-height: 24px;
}

/* ── شارات الحالة ──────────────────────────────────────────── */
.mi-pill {
    font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem;
    border-radius: 20px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.mi-pill .mi-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.mi-pill .mi-spin {
    width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: mi-rotate .7s linear infinite;
}
@keyframes mi-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mi-pill .mi-spin { animation: none; } }

.mi-pill.s-connected      { background: rgba(23,120,78,.12);  color: #17784e; }
.mi-pill.s-connecting     { background: rgba(31,91,143,.12);  color: #1f5b8f; }
.mi-pill.s-auth_required  { background: rgba(140,93,12,.13);  color: #8c5d0c; }
.mi-pill.s-error          { background: rgba(168,50,37,.12);  color: #a83225; }
.mi-pill.s-disconnected   { background: rgba(120,120,120,.14); color: var(--color-text-secondary, #666); }

@media (prefers-color-scheme: dark) {
    .mi-pill.s-connected     { background: rgba(109,203,158,.14); color: #6dcb9e; }
    .mi-pill.s-connecting    { background: rgba(127,180,227,.14); color: #7fb4e3; }
    .mi-pill.s-auth_required { background: rgba(224,177,102,.14); color: #e0b166; }
    .mi-pill.s-error         { background: rgba(233,137,124,.14); color: #e9897c; }
}

.mi-tag {
    font-size: 0.72rem; color: var(--color-text-secondary, #666);
    display: inline-flex; align-items: center; gap: 0.3rem;
}

/* ── الأزرار ───────────────────────────────────────────────── */
.mi-acts { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.2rem; }

.mi-btn {
    font: inherit; font-size: 0.82rem; font-weight: 600;
    border-radius: 8px; padding: 0.5rem 0.9rem; cursor: pointer;
    border: 1px solid var(--color-border, #ddd);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #111);
    transition: background .15s ease, border-color .15s ease;
}
.mi-btn:hover:not(:disabled) { background: var(--color-surface-alt, #f5f5f5); }
.mi-btn:focus-visible { outline: 2px solid var(--color-accent, #7b3fbf); outline-offset: 2px; }
.mi-btn:disabled { opacity: .55; cursor: not-allowed; }

.mi-btn.primary {
    flex: 1;
    background: var(--color-accent, #7b3fbf);
    border-color: var(--color-accent, #7b3fbf);
    color: #fff;
}
.mi-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.mi-btn.ghost { border-color: transparent; background: transparent; color: var(--color-text-secondary, #666); }
.mi-btn.ghost:hover:not(:disabled) { background: var(--color-surface-alt, #f5f5f5); color: var(--color-text-primary, #111); }
.mi-btn.danger { color: #a83225; }

/* ── النافذة المنبثقة ──────────────────────────────────────── */
.mi-scrim {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(18,16,23,.55);
    display: grid; place-items: center; padding: 1.2rem;
}
.mi-modal {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 14px; width: min(540px, 100%);
    max-height: 88vh; overflow: auto;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.mi-mhead { padding: 1.25rem 1.35rem 0; display: flex; gap: 0.75rem; align-items: flex-start; }
.mi-mtitle { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.35; color: var(--color-text-primary, #111); }
.mi-msub { font-size: 0.82rem; color: var(--color-text-secondary, #666); margin: 0.2rem 0 0; }
.mi-mbody { padding: 1.1rem 1.35rem 1.35rem; }
.mi-mfoot { padding: 0 1.35rem 1.35rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mi-x {
    margin-inline-start: auto; border: 0; background: transparent; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: 0 0.25rem;
    color: var(--color-text-secondary, #666);
}
.mi-x:hover { color: var(--color-text-primary, #111); }

/* ── اختيار النوع (شخصي/مشترك) ─────────────────────────────── */
.mi-choice { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.4rem; }
.mi-opt {
    display: flex; gap: 0.65rem; align-items: flex-start;
    padding: 0.8rem 0.85rem; border: 1.5px solid var(--color-border, #e0e0e0);
    border-radius: 9px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.mi-opt:hover { background: var(--color-surface-alt, #f7f7f7); }
.mi-opt[data-selected="1"] { border-color: var(--color-accent, #7b3fbf); background: rgba(123,63,191,.06); }
.mi-opt[data-disabled="1"] { opacity: .6; cursor: not-allowed; }
.mi-opt[data-disabled="1"]:hover { background: transparent; }
.mi-opt input { margin: 0.2rem 0 0; flex: 0 0 auto; accent-color: var(--color-accent, #7b3fbf); }
.mi-opt-t { font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary, #111); }
.mi-opt-d { font-size: 0.78rem; line-height: 1.5; margin-top: 0.1rem; color: var(--color-text-secondary, #666); }
.mi-badge-soon {
    font-size: 0.66rem; font-weight: 600; padding: 0.1rem 0.45rem;
    border-radius: 20px; margin-inline-start: 0.35rem;
    background: var(--color-surface-alt, #eee); color: var(--color-text-secondary, #666);
}

/* ── خطوات الربط ───────────────────────────────────────────── */
.mi-steps { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; }
.mi-steps li {
    display: flex; gap: 0.7rem; align-items: center; padding: 0.55rem 0.1rem;
    font-size: 0.87rem; color: var(--color-text-secondary, #777);
}
.mi-steps .mi-ic {
    width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.68rem; font-weight: 700;
    background: var(--color-surface-alt, #eee); color: var(--color-text-secondary, #777);
}
.mi-steps li[data-state="doing"] { color: var(--color-text-primary, #111); }
.mi-steps li[data-state="doing"] .mi-ic { background: rgba(31,91,143,.14); color: #1f5b8f; }
.mi-steps li[data-state="done"] .mi-ic { background: rgba(23,120,78,.14); color: #17784e; }
.mi-steps li[data-state="fail"] .mi-ic { background: rgba(168,50,37,.14); color: #a83225; }

/* ── صفوف التفاصيل ─────────────────────────────────────────── */
.mi-rows { display: flex; flex-direction: column; margin-bottom: 1rem; }
.mi-row {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: 0.7rem 0; border-bottom: 1px solid var(--color-border, #eee); font-size: 0.87rem;
}
.mi-row:last-child { border-bottom: 0; }
.mi-row .mi-k { color: var(--color-text-secondary, #666); flex: 0 0 auto; }
.mi-row .mi-v { font-weight: 500; text-align: end; color: var(--color-text-primary, #111); }

/* ── الخطأ المفهوم ─────────────────────────────────────────── */
.mi-err { background: rgba(168,50,37,.09); border-radius: 9px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
.mi-err-t { font-weight: 700; color: #a83225; font-size: 0.93rem; margin: 0 0 0.3rem; }
.mi-err-m { font-size: 0.85rem; line-height: 1.6; margin: 0; color: var(--color-text-primary, #222); }
@media (prefers-color-scheme: dark) {
    .mi-err { background: rgba(233,137,124,.1); }
    .mi-err-t { color: #e9897c; }
}

.mi-details { margin-top: 0.7rem; }
.mi-details summary {
    cursor: pointer; font-size: 0.8rem; font-weight: 500;
    color: var(--color-text-secondary, #666); list-style: none;
}
.mi-details summary::-webkit-details-marker { display: none; }
.mi-details summary::before { content: "▸ "; display: inline-block; transition: transform .15s ease; }
.mi-details[open] summary::before { transform: rotate(90deg); }
.mi-details pre {
    background: var(--color-surface-alt, #f5f5f5);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 7px; padding: 0.7rem 0.85rem; margin: 0.55rem 0 0;
    overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.73rem; line-height: 1.6; direction: ltr; text-align: left;
    color: var(--color-text-secondary, #555); white-space: pre-wrap; word-break: break-word;
}

/* ── الأدوات ───────────────────────────────────────────────── */
.mi-tools { border: 1px solid var(--color-border, #e5e5e5); border-radius: 9px; overflow: hidden; }
.mi-tool {
    display: flex; gap: 0.65rem; align-items: center; padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--color-border, #eee);
}
.mi-tool:last-child { border-bottom: 0; }
.mi-tool-n { font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; direction: ltr; font-weight: 500; }
.mi-tool-d {
    color: var(--color-text-secondary, #777); font-size: 0.75rem;
    margin-inline-start: auto; text-align: end;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}

/* ── حقل مدخل مبسّط ────────────────────────────────────────── */
.mi-field { margin-bottom: 0.85rem; }
.mi-label { display: block; font-size: 0.83rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--color-text-primary, #111); }
.mi-input {
    width: 100%; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.87rem;
    border: 1.5px solid var(--color-border, #ddd); border-radius: 8px;
    background: var(--color-surface, #fff); color: var(--color-text-primary, #111);
}
.mi-input:focus { outline: none; border-color: var(--color-accent, #7b3fbf); }
.mi-hint { font-size: 0.76rem; color: var(--color-text-secondary, #777); margin-top: 0.3rem; line-height: 1.5; }

.mi-note {
    font-size: 0.8rem; line-height: 1.6; margin-top: 0.9rem;
    background: var(--color-surface-alt, #f5f5f5); border-radius: 8px; padding: 0.7rem 0.85rem;
    color: var(--color-text-secondary, #666);
}
.mi-note strong { color: var(--color-text-primary, #222); }

@media (max-width: 560px) {
    .mi-grid { grid-template-columns: 1fr; }
    .mi-acts .mi-btn { flex: 1 1 auto; }
}

/* ── بطاقة الإضافة اليدوية ─────────────────────────────────── */
.mi-tile.is-blank {
    border-style: dashed;
    background: transparent;
}

/* ── خطأ حقل واحد ──────────────────────────────────────────── */
.mi-input.is-bad { border-color: #a83225; }
.mi-input.is-bad:focus { border-color: #a83225; }
.mi-fielderr {
    font-size: 0.76rem; line-height: 1.55; margin: 0.3rem 0 0; color: #a83225;
}
@media (prefers-color-scheme: dark) {
    .mi-input.is-bad, .mi-input.is-bad:focus { border-color: #e9897c; }
    .mi-fielderr { color: #e9897c; }
}

/* ── نافذة اختيار الخدمة ───────────────────────────────────── */
.mi-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.8rem 0; }
.mi-chip {
    font: inherit; font-size: 0.78rem; cursor: pointer;
    padding: 0.3rem 0.7rem; border-radius: 20px;
    border: 1px solid var(--color-border, #e0e0e0);
    background: transparent; color: var(--color-text-secondary, #666);
}
.mi-chip:hover { background: var(--color-surface-alt, #f5f5f5); }
.mi-chip.active {
    background: var(--color-accent, #7b3fbf); border-color: var(--color-accent, #7b3fbf); color: #fff;
}

.mi-pickgrid { display: flex; flex-direction: column; gap: 0.4rem; }
.mi-pick {
    display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; text-align: start;
    font: inherit; cursor: pointer; padding: 0.7rem 0.8rem; border-radius: 9px;
    border: 1px solid var(--color-border, #e5e5e5); background: var(--color-surface, #fff);
}
.mi-pick:hover:not(:disabled) { border-color: var(--color-accent, #7b3fbf); background: var(--color-surface-alt, #fafafa); }
.mi-pick:focus-visible { outline: 2px solid var(--color-accent, #7b3fbf); outline-offset: 2px; }
.mi-pick:disabled { opacity: .55; cursor: default; }
.mi-pick-txt { display: flex; flex-direction: column; min-width: 0; }
.mi-pick-n { font-weight: 600; font-size: 0.88rem; color: var(--color-text-primary, #111); }
.mi-pick-d {
    font-size: 0.76rem; line-height: 1.5; margin-top: 0.1rem;
    color: var(--color-text-secondary, #666);
}

/* ── لا تكاملات بعد ────────────────────────────────────────── */
.mi-empty {
    text-align: center; padding: 3rem 1.25rem;
    border: 1px dashed var(--color-border, #ddd); border-radius: 12px;
}
.mi-empty-ic { color: var(--color-text-secondary, #999); margin-bottom: 0.6rem; }
.mi-empty h3 { margin: 0 0 0.35rem; font-size: 1.02rem; color: var(--color-text-primary, #111); }
.mi-empty p {
    margin: 0 auto 1.1rem; max-width: 34rem; font-size: 0.85rem; line-height: 1.6;
    color: var(--color-text-secondary, #666);
}
.mi-empty .mi-btn.primary { flex: 0 0 auto; }

/* نسخة مصغّرة من الحالة الفارغة، لداخل نافذة الإضافة. */
.mi-empty.sm { padding: 2rem 1rem; }
.mi-empty.sm h3 { font-size: 0.95rem; }
.mi-empty.sm p { margin-bottom: 0.9rem; font-size: 0.82rem; }

/* ── شريط الملخّص فوق الشبكة ───────────────────────────────── */
/* تحقنه الوحدة قبل #connectorGrid؛ لا وجود له في admin/mcp.html. */
.mi-summary {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin: 0 0 1rem;
}
.mi-sum {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 7.5rem; padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border, #e5e5e5); border-radius: 10px;
    background: var(--color-surface, #fff);
}
.mi-sum-n {
    font-size: 1.35rem; font-weight: 700; line-height: 1;
    color: var(--color-text-primary, #111);
    font-variant-numeric: tabular-nums;
}
.mi-sum-l { font-size: 0.75rem; color: var(--color-text-secondary, #666); }
/* اللون يحمل التشديد، والرقم والنص يحملان المعنى — فلا يعتمد الفهم على
   تمييز الألوان وحده. */
.mi-sum.ok .mi-sum-n { color: #16a34a; }
.mi-sum.warn { border-color: #f59e0b; }
.mi-sum.warn .mi-sum-n { color: #b45309; }

/* ── عناوين أقسام داخل نافذة الإضافة ───────────────────────── */
.mi-secl {
    margin: 0.9rem 0 0.4rem; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--color-text-secondary, #777);
}
.mi-secl:first-child { margin-top: 0; }

@media (max-width: 560px) {
    .mi-sum { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
}

@media (prefers-color-scheme: dark) {
    .mi-sum { border-color: #2a2a2a; background: #161616; }
    .mi-sum-n { color: #ededed; }
    .mi-sum.ok .mi-sum-n { color: #4ade80; }
    .mi-sum.warn { border-color: #a16207; }
    .mi-sum.warn .mi-sum-n { color: #fbbf24; }
}

/* ══════════════ التطبيقات المتصلة (مدعوم كخادم) ══════════════ */
/* الاتجاه معاكس لبقية القسم، فله بادئة مستقلّة ca- لا تختلط بـmi-. */

.ca-list { display: grid; gap: 0.7rem; }

.ca-card {
    border: 1px solid var(--color-border, #ddd); border-radius: 12px;
    background: var(--color-surface, #fff); padding: 0.95rem 1rem;
}
/* الاتصال الذي يحمل صلاحية مرتفعة يُميَّز بحافّة، فلا يتساوى بصريًا مع غيره. */
.ca-card.has-priv { border-inline-start: 3px solid var(--color-warning, #E0A800); }

.ca-top { display: flex; align-items: center; gap: 0.7rem; }
.ca-logo {
    width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: 0.6rem;
    background: var(--color-primary, #003366); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
}
.ca-id { min-width: 0; flex: 1; }
.ca-name { font-weight: 700; font-size: 0.95rem; color: var(--color-text, #333); }
.ca-sub {
    font-size: 0.76rem; color: var(--color-text-secondary, #777); margin-top: 0.1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-live {
    flex: 0 0 auto; font-size: 0.72rem; font-weight: 700;
    color: var(--color-success, #2E8A3A);
    background: rgba(46, 138, 58, 0.1); padding: 0.2rem 0.5rem; border-radius: 999px;
}

.ca-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.8rem; }
/* .mi-tag نصّ عارٍ في شبكة التكاملات (يجاور حبّة الحالة هناك). داخل بطاقة
   التطبيق المتصل يجاور حبّة تحذير، فبقاؤه عاريًا كان يجعل الصفّ يبدو
   غير مكتمل. التنسيق محصور في .ca-meta فلا يمسّ الشبكة الأخرى. */
.ca-meta .mi-tag {
    padding: 0.15rem 0.5rem; border-radius: 999px;
    background: var(--color-muted, #eee);
    border: 1px solid var(--color-border, #ddd);
    font-weight: 600;
}
.ca-tag-warn {
    font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px;
    color: #b45309; background: rgba(224, 168, 0, 0.14);
    border: 1px solid var(--color-warning, #E0A800);
}

.ca-acts { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

.ca-note {
    font-size: 0.79rem; line-height: 1.65; padding: 0.7rem 0.8rem; border-radius: 0.6rem;
    background: var(--color-muted, #eee); color: var(--color-text-secondary, #666);
    margin-bottom: 0.9rem;
}
.ca-warn {
    font-size: 0.85rem; line-height: 1.7; padding: 0.85rem 0.9rem; border-radius: 0.6rem;
    background: rgba(217, 83, 79, 0.08);
    border: 1px solid var(--color-danger, #D9534F);
    color: var(--color-text, #333);
}

.ca-presets { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ca-preset {
    flex: 1 1 auto; min-width: 6rem; padding: 0.6rem 0.7rem; cursor: pointer;
    border: 1px solid var(--color-border, #ddd); border-radius: 0.55rem;
    background: var(--color-surface, #fff); color: var(--color-text, #333);
    font-family: inherit; font-size: 0.83rem; font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}
.ca-preset:hover:not(:disabled) {
    border-color: var(--color-accent, #0077CC); background: var(--color-muted, #eee);
}
.ca-preset:disabled { opacity: 0.55; cursor: progress; }

.mi-btn.danger-solid { background: var(--color-danger, #D9534F); color: #fff; border-color: transparent; }
.mi-btn.danger-solid:hover:not(:disabled) { filter: brightness(0.93); }

@media (prefers-color-scheme: dark) {
    .ca-card { border-color: #2a2a2a; background: #161616; }
    .ca-name { color: #ededed; }
    .ca-note { background: #1e1e1e; }
    .ca-preset { background: #161616; border-color: #2a2a2a; color: #ededed; }
    .ca-preset:hover:not(:disabled) { background: #1e1e1e; }
}

/* لوحة صلاحيات التطبيق المتصل.
   هذه القواعد مكرَّرة بصريًا مع نظيراتها في admin/oauth-consent.html عن
   قصد: تلك الصفحة قائمة بذاتها ولا تُحمّل هذا الملف. النسخة الأولى من
   هذه الوحدة استعارت أصناف .oc-* المعرَّفة داخل تلك الصفحة وحدها،
   فظهرت اللوحة بلا تنسيق هنا — بنقاط قائمة ظاهرة وبلا تمييز للخطر. */
.ca-sec {
    margin: 0 0 .5rem; font-size: .78rem; font-weight: 700;
    color: var(--color-text-secondary, #777);
}
.ca-group { margin-bottom: .9rem; }
.ca-group-t {
    font-size: .82rem; font-weight: 700; margin-bottom: .35rem;
    color: var(--color-primary, #003366);
}
.ca-list-scopes { list-style: none; margin: 0; padding: 0; }
.ca-item {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .32rem 0; font-size: .85rem; line-height: 1.55; cursor: pointer;
}
.ca-item input {
    flex: 0 0 auto; margin: .22rem 0 0; width: 1rem; height: 1rem;
    accent-color: var(--color-accent, #0077CC); cursor: pointer;
}
.ca-item.danger { font-weight: 600; color: var(--color-danger, #D9534F); }
.ca-item.danger input { accent-color: var(--color-danger, #D9534F); }
/* المُزالة تبهت، ليُرى بالنظرة ما سيبقى وما سيُسحب. */
.ca-item:has(input:not(:checked)) { opacity: .5; }
.ca-item code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem; background: var(--color-muted, #eee);
    padding: .05rem .3rem; border-radius: .3rem; direction: ltr;
}

.ca-bulk { display: flex; gap: .5rem; align-items: center; margin: 0 0 .7rem; font-size: .78rem; }
.ca-bulk button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--color-accent, #0077CC); font-family: inherit;
    font-size: .78rem; font-weight: 600; text-decoration: underline;
}
.ca-count-sel { margin-inline-start: auto; color: var(--color-text-secondary, #777); font-weight: 600; }

@media (prefers-color-scheme: dark) {
    .ca-item code { background: #1e1e1e; }
}