/* =========================================================================
   ولايات الجزائر — تنسيقات المجتمع والتعليقات
   متناسق مع ألوان الموقع الرئيسي
   ========================================================================= */

:root {
  --cm-ink:      #d9e2ea;
  --cm-ink-soft: #8293a2;
  --cm-line:     #263441;
  --cm-surface:  #111922;
  --cm-bg:       #0a0f14;
  --cm-green:    #356f9e;      /* الأزرق الأساسي بدل الأخضر */
  --cm-green-d:  #172533;      /* الأزرق الداكن */
  --cm-sand:     #18232d;      /* خلفية فاتحة مزرقة */
  --cm-amber:    #d6a85c;      /* برتقالي للنقاط */
  --cm-red:      #a94e5c;      /* الأحمر المستخدم في الموقع */
  --cm-radius:   10px;
}

.cm {
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  color: var(--cm-ink);
  direction: rtl;
  max-width: 900px;
  margin: 32px auto 56px;
  padding: 0 16px;
  line-height: 1.75;
}

.cm *,
.cm *::before,
.cm *::after { box-sizing: border-box; }

.cm h2, .cm h3 { margin: 0; font-weight: 700; }

.cm-title {
  font-size: 1.5rem;
  letter-spacing: -.02em;
  padding-inline-start: 14px;
  border-inline-start: 5px solid var(--cm-green);
}
.cm-title small {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--cm-ink-soft);
}

/* ------------------------------------------------------------- شريط الحساب */
.cm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius);
  padding: 12px 16px;
  margin-top: 18px;
}
.cm-bar-who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 600;
}
.cm-bar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cm-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cm-green);
  color: #edf2f6;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
}

.cm-points {
  font-size: .78rem;
  font-weight: 700;
  color: var(--cm-amber);
  background: #2a2820;
  border: 1px solid #514735;
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}
.cm-badge-admin {
  font-size: .72rem;
  font-weight: 700;
  color: #edf2f6;
  background: var(--cm-green-d);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------------------------------------------------------------- الأزرار */
.cm-btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--cm-green);
  background: var(--cm-green);
  color: #edf2f6;
  border-radius: 8px;
  padding: 8px 16px;
  transition: background .15s ease;
}
.cm-btn:hover { background: var(--cm-green-d); }
.cm-btn.ghost {
  background: transparent;
  color: var(--cm-green);
}
.cm-btn.ghost:hover { background: #1b2935; }
.cm-btn.quiet {
  background: transparent;
  color: var(--cm-ink-soft);
  border-color: var(--cm-line);
}
.cm-btn.quiet:hover {
  background: var(--cm-sand);
  color: var(--cm-ink);
}
.cm-btn.danger {
  background: var(--cm-red);
  border-color: var(--cm-red);
  color: #edf2f6;
}
.cm-btn.danger:hover { background: #873d4a; }
.cm-btn.small {
  padding: 5px 11px;
  font-size: .82rem;
}
.cm-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.cm :focus-visible {
  outline: 3px solid #4b8fbd;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------- التصنيفات */
.cm-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}
.cm-cat {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  color: var(--cm-ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
}
.cm-cat:hover {
  border-color: #3a4b58;
  color: var(--cm-ink);
}
.cm-cat[aria-pressed="true"] {
  background: var(--cm-green);
  border-color: var(--cm-green);
  color: #edf2f6;
}
.cm-cat b {
  font-weight: 700;
  margin-inline-start: 5px;
  opacity: .8;
}

.cm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: .88rem;
  color: var(--cm-ink-soft);
}
.cm-select {
  font: inherit;
  font-size: .88rem;
  padding: 6px 10px;
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  background: var(--cm-surface);
  color: var(--cm-ink);
}

/* ------------------------------------------------------- نموذج التعليق */
.cm-form {
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius);
  padding: 16px;
  margin-bottom: 22px;
}
.cm-form textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font: inherit;
  line-height: 1.7;
  color: var(--cm-ink);
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 12px;
  background: var(--cm-sand);
}
.cm-form textarea:focus { background: #edf2f6; }
.cm-form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  justify-content: space-between;
}
.cm-counter {
  font-size: .8rem;
  color: var(--cm-ink-soft);
}

.cm-guest {
  background: var(--cm-surface);
  border: 1px dashed #3a4b58;
  border-radius: var(--cm-radius);
  padding: 18px;
  margin-bottom: 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cm-guest p {
  margin: 0;
  color: var(--cm-ink-soft);
}

/* ------------------------------------------------------------- التعليقات */
.cm-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-item {
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-inline-start: 4px solid var(--cm-green);
  border-radius: var(--cm-radius);
  padding: 16px 18px;
}
.cm-item.deleted {
  border-inline-start-color: #3a4854;
  background: var(--cm-sand);
}

.cm-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cm-name {
  font: inherit;
  font-weight: 700;
  color: var(--cm-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.cm-name:hover {
  color: var(--cm-green);
  text-decoration: underline;
}
.cm-meta {
  font-size: .78rem;
  color: var(--cm-ink-soft);
}
.cm-tag {
  font-size: .75rem;
  font-weight: 600;
  color: var(--cm-green-d);
  background: #1b2935;
  border-radius: 6px;
  padding: 1px 8px;
}

.cm-body {
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cm-body.gone {
  color: #7f8e9b;
  font-style: italic;
}

.cm-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #283742;
}
.cm-act {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 10px;
  color: var(--cm-ink-soft);
}
.cm-act:hover {
  background: var(--cm-sand);
  color: var(--cm-ink);
}
.cm-act.on {
  color: var(--cm-green);
  background: #1b2935;
}
.cm-act.on.down {
  color: var(--cm-red);
  background: #3a2228;
}
.cm-act.spacer {
  margin-inline-start: auto;
}

/* ------------------------------------------------------------------ الردود */
.cm-replies {
  margin: 14px 0 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid #2d3b47;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cm-reply {
  background: var(--cm-sand);
  border-radius: 8px;
  padding: 12px 14px;
}
.cm-reply .cm-actions {
  border-top-color: #2a3945;
}

.cm-replyform {
  margin-top: 12px;
}
.cm-replyform textarea {
  width: 100%;
  min-height: 72px;
  font: inherit;
  line-height: 1.7;
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 10px;
  background: #edf2f6;
  color: var(--cm-ink);
}

/* ------------------------------------------------------------- حالات فارغة */
.cm-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--cm-ink-soft);
  background: var(--cm-surface);
  border: 1px dashed #3a4854;
  border-radius: var(--cm-radius);
}
.cm-loading {
  text-align: center;
  padding: 28px;
  color: var(--cm-ink-soft);
}

.cm-more {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ------------------------------------------------------------------ النوافذ */
.cm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 60, 105, .55);
  display: grid;
  place-items: center;
  padding: 16px;
}
.cm-modal-card {
  background: #edf2f6;
  border-radius: 14px;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  direction: rtl;
  font-family: 'Cairo', sans-serif;
  color: var(--cm-ink);
}
.cm-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cm-modal-head h3 {
  font-size: 1.15rem;
  color: var(--cm-ink);
}
.cm-x {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--cm-ink-soft);
  padding: 4px 8px;
}
.cm-x:hover {
  color: var(--cm-ink);
}
.cm-field {
  margin-bottom: 14px;
}
.cm-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cm-ink);
}
.cm-field input,
.cm-field textarea,
.cm-field select {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  background: var(--cm-sand);
  color: var(--cm-ink);
}
.cm-hint {
  font-size: .78rem;
  color: var(--cm-ink-soft);
  margin-top: 5px;
}
.cm-error {
  background: #3a2228;
  border: 1px solid #f5c6cb;
  color: #873d4a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .86rem;
  margin-bottom: 12px;
}
.cm-ok {
  background: #1b2935;
  border: 1px solid #c5d9ea;
  color: var(--cm-green-d);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .86rem;
  margin-bottom: 12px;
}
.cm-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 6px;
}

.cm-idcard {
  background: var(--cm-green);
  color: #edf2f6;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
}
.cm-idcard span {
  display: block;
  font-size: .8rem;
  opacity: .85;
}
.cm-idcard strong {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------- ملف المستخدم */
.cm-profile-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cm-line);
}
.cm-profile-head .cm-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}
.cm-profile-item {
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: .9rem;
  color: var(--cm-ink);
}
.cm-profile-item .cm-meta {
  display: block;
  margin-bottom: 4px;
}

.cm-toast {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 10000;
  background: var(--cm-ink);
  color: #edf2f6;
  border-radius: 10px;
  padding: 12px 18px;
  font-family: 'Cairo', sans-serif;
  font-size: .9rem;
  max-width: 340px;
}
.cm-toast.bad {
  background: var(--cm-red);
}

@media (max-width: 560px) {
  .cm { margin-top: 22px; }
  .cm-item { padding: 14px; }
  .cm-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .cm-bar-actions {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm * {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------ ترويسة صفحة الولاية */
.wilaya-hero {
  max-width: 900px;
  margin: 26px auto 0;
  padding: 0 16px;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
}
.wilaya-num {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: #356f9e;
  background: #1b2935;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.wilaya-hero h2 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #172533;
}
.wilaya-hero p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.85;
  color: #4b5563;
}

/* ------------------------------------------------ زر إظهار كلمة المرور */
.cm-pw-wrap {
  position: relative;
  display: block;
}
.cm-pw-wrap input {
  width: 100%;
  padding-inline-end: 44px;
}
.cm-pw-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 4px 6px;
  color: var(--cm-ink-soft);
  border-radius: 6px;
}
.cm-pw-toggle:hover {
  color: var(--cm-ink);
  background: rgba(0,0,0,.05);
}




/* عرض التعليقات متوافق مع الموقع + الهاتف */
.cm {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.wilaya-hero {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* على الهاتف: مسافة جانبية أصغر */
@media (max-width: 600px) {
  .cm {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 22px !important;
    margin-bottom: 40px !important;
  }

  .wilaya-hero {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}





/* شريط الحساب: لا يأخذ عرض الشاشة كاملة على الحاسوب */
.cm-bar.cm-bar-compact {
  max-width: 520px !important;
  width: fit-content !important;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* العنوان في سطر واحد منسّق */
.cm-title.cm-title-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 14px !important;
  border-inline-start: 5px solid var(--cm-green) !important;
  padding-inline-start: 14px !important;
  margin: 18px 0 14px !important;
}
.cm-title.cm-title-inline .cm-title-main {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--cm-ink) !important;
}
.cm-title.cm-title-inline .cm-title-sub {
  font-size: .9rem !important;
  font-weight: 500 !important;
  color: var(--cm-ink-soft) !important;
}
.cm-title.cm-title-inline small {
  display: none !important;
}

/* زر نشر تعليق */
.cm-compose-toggle {
  margin: 0 0 14px !important;
}

/* شروط المشاركة داخل النافذة */
.cm-terms ul {
  margin: 10px 0 0 !important;
  padding-inline-start: 22px !important;
  line-height: 1.9 !important;
}
.cm-terms p {
  margin: 0 0 8px !important;
}

/* على الهاتف */
@media (max-width: 600px) {
  .cm-bar.cm-bar-compact {
    max-width: 100% !important;
    width: 100% !important;
  }
  .cm-title.cm-title-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}

/* عنوان صفحة التعليقات — مستطيل واضح */
.cm-title.cm-title-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 16px !important;
  background: linear-gradient(135deg, #172533, #356f9e) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin: 18px 0 16px !important;
  box-shadow: 0 4px 14px rgba(18, 60, 105, 0.22) !important;
  color: #111922 !important;
}

.cm-title.cm-title-inline .cm-title-main {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #111922 !important;
  letter-spacing: -.02em !important;
}

.cm-title.cm-title-inline .cm-title-sub {
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.cm-title.cm-title-inline small {
  display: none !important;
}

@media (max-width: 600px) {
  .cm-title.cm-title-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 16px 16px !important;
  }

  .cm-title.cm-title-inline .cm-title-main {
    font-size: 1.25rem !important;
  }

  .cm-title.cm-title-inline .cm-title-sub {
    font-size: .85rem !important;
  }
}


/* =========================================
   تناسق: مستطيل الحساب + مستطيل العنوان
   ========================================= */

.cm-bar.cm-bar-compact,
.cm-title.cm-title-inline {
  background: #111922 !important;
  border: 1px solid #263441 !important;
  border-inline-start: 5px solid #356f9e !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(18, 60, 105, 0.07) !important;
  box-sizing: border-box !important;
}

/* —— مستطيل الحساب —— */
.cm-bar.cm-bar-compact {
  max-width: 480px !important;
  width: auto !important;
  margin: 0 0 12px 0 !important;
  margin-inline-end: auto !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.cm-bar.cm-bar-compact .cm-bar-who {
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: #172533 !important;
  gap: 8px !important;
}

.cm-bar.cm-bar-compact .cm-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: .9rem !important;
  background: #356f9e !important;
  color: #edf2f6 !important;
}

.cm-bar.cm-bar-compact .cm-points {
  font-size: .72rem !important;
  padding: 1px 8px !important;
  color: #d6a85c !important;
  background: #2a2820 !important;
  border: 1px solid #514735 !important;
}

.cm-bar.cm-bar-compact .cm-btn {
  padding: 6px 12px !important;
  font-size: .82rem !important;
  border-radius: 8px !important;
}

.cm-bar.cm-bar-compact .cm-btn.small {
  padding: 5px 10px !important;
  font-size: .78rem !important;
}

/* —— مستطيل العنوان —— */
.cm-title.cm-title-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 14px !important;
  padding: 16px 20px !important;
  margin: 0 0 16px 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.cm-title.cm-title-inline .cm-title-main {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #172533 !important;
  letter-spacing: -.02em !important;
}

.cm-title.cm-title-inline .cm-title-sub {
  font-size: .9rem !important;
  font-weight: 500 !important;
  color: #8293a2 !important;
}

.cm-title.cm-title-inline small {
  display: none !important;
}

/* —— الهاتف —— */
@media (max-width: 600px) {
  .cm-bar.cm-bar-compact {
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px 12px !important;
  }

  .cm-title.cm-title-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 14px 16px !important;
  }

  .cm-title.cm-title-inline .cm-title-main {
    font-size: 1.2rem !important;
  }
}





/* تصنيفات داخل مستطيلات */
.cm-cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 16px 0 !important;
}

.cm-cat {
  font: inherit !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: #111922 !important;
  border: 1px solid #263441 !important;
  border-radius: 10px !important;
  color: #3f566b !important;
  padding: 8px 14px !important;
  box-shadow: 0 1px 4px rgba(18, 60, 105, 0.06) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

.cm-cat:hover {
  background: #18232d !important;
  border-color: #356f9e !important;
  color: #172533 !important;
}

.cm-cat[aria-pressed="true"] {
  background: #356f9e !important;
  border-color: #356f9e !important;
  color: #111922 !important;
  box-shadow: 0 2px 8px rgba(23, 105, 170, 0.25) !important;
}

.cm-cat b {
  font-weight: 700 !important;
  margin-inline-start: 6px !important;
  opacity: .85 !important;
}

@media (max-width: 600px) {
  .cm-cat {
    padding: 7px 12px !important;
    font-size: .82rem !important;
    border-radius: 8px !important;
  }
}







/* =========================================
   مستطيلات التعليقات — تصميم أنظف
   ========================================= */

.cm-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.cm-item {
  background: #111922 !important;
  border: 1px solid #263441 !important;
  border-inline-start: 4px solid #356f9e !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 8px rgba(18, 60, 105, 0.06) !important;
  transition: box-shadow .15s ease !important;
}

.cm-item:hover {
  box-shadow: 0 4px 14px rgba(18, 60, 105, 0.1) !important;
}

.cm-item.deleted {
  border-inline-start-color: #3a4854 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  opacity: .85 !important;
}

.cm-head {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 2px !important;
}

.cm-name {
  font-weight: 700 !important;
  color: #172533 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.cm-name:hover {
  color: #356f9e !important;
  text-decoration: underline !important;
}

.cm-meta {
  font-size: .78rem !important;
  color: #7f8e9b !important;
}

.cm-tag {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: #356f9e !important;
  background: #1b2935 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin-inline-start: auto !important;
}

.cm-body {
  margin: 10px 0 0 !important;
  color: #d9e2ea !important;
  line-height: 1.75 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

.cm-body.gone {
  color: #7f8e9b !important;
  font-style: italic !important;
}

.cm-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid #283742 !important;
}

.cm-act {
  font: inherit !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: #18232d !important;
  border: 1px solid #2d3b47 !important;
  border-radius: 8px !important;
  padding: 5px 11px !important;
  color: #3f566b !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

.cm-act:hover {
  background: #1b2935 !important;
  border-color: #3a4b58 !important;
  color: #172533 !important;
}

.cm-act.on {
  color: #356f9e !important;
  background: #1b2935 !important;
  border-color: #356f9e !important;
}

.cm-act.on.down {
  color: #a94e5c !important;
  background: #3a2228 !important;
  border-color: #f5c6cb !important;
}

.cm-act.spacer {
  margin-inline-start: auto !important;
  background: transparent !important;
  border-color: transparent !important;
}

.cm-act.spacer:hover {
  background: #18232d !important;
  border-color: #2d3b47 !important;
}

/* الردود */
.cm-replies {
  margin: 14px 0 0 !important;
  padding-inline-start: 14px !important;
  border-inline-start: 2px solid #263441 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.cm-reply {
  background: #f8fafc !important;
  border: 1px solid #2a3945 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}

.cm-reply .cm-actions {
  border-top-color: #2a3945 !important;
}

/* فارغ / تحميل */
.cm-empty {
  text-align: center !important;
  padding: 36px 20px !important;
  color: #8293a2 !important;
  background: #111922 !important;
  border: 1px dashed #3a4854 !important;
  border-radius: 12px !important;
}

.cm-loading {
  text-align: center !important;
  padding: 28px !important;
  color: #8293a2 !important;
}

@media (max-width: 600px) {
  .cm-item {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .cm-act {
    padding: 5px 9px !important;
    font-size: .76rem !important;
  }
}








/* =========================================
   مستطيل الحساب داخل الهيدر — مدمج ومتناسق
   ========================================= */

#cm-account-slot {
  display: flex !important;
  align-items: center !important;
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
}

#cm-account-slot .cm-bar.cm-bar-compact {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 5px 8px 5px 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-inline-start: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#cm-account-slot .cm-bar-who {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #111922 !important;
  white-space: nowrap !important;
}

#cm-account-slot .cm-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  background: #356f9e !important;
  color: #edf2f6 !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
}

#cm-account-slot .cm-name {
  color: #111922 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  cursor: pointer !important;
  max-width: 110px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#cm-account-slot .cm-name:hover {
  color: #cfe4f7 !important;
  text-decoration: none !important;
}

#cm-account-slot .cm-points {
  font-size: .68rem !important;
  font-weight: 700 !important;
  color: #ffd27a !important;
  background: rgba(255, 210, 122, 0.15) !important;
  border: 1px solid rgba(255, 210, 122, 0.35) !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  white-space: nowrap !important;
}

#cm-account-slot .cm-badge-admin {
  font-size: .65rem !important;
  background: #0e2f54 !important;
  color: #edf2f6 !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
}

#cm-account-slot .cm-bar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
}

#cm-account-slot .cm-btn {
  font-size: .75rem !important;
  font-weight: 700 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  background: #111922 !important;
  color: #172533 !important;
  border: 1px solid #111922 !important;
  box-shadow: none !important;
}

#cm-account-slot .cm-btn:hover {
  background: #e8f2fb !important;
  color: #0e2f54 !important;
}

#cm-account-slot .cm-btn.ghost,
#cm-account-slot .cm-btn.quiet,
#cm-account-slot .cm-btn.small {
  background: transparent !important;
  color: #111922 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding: 4px 10px !important;
  font-size: .72rem !important;
}

#cm-account-slot .cm-btn.ghost:hover,
#cm-account-slot .cm-btn.quiet:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #111922 !important;
}

/* نص "شارك رأيك..." عند عدم تسجيل الدخول — اختصاره */
#cm-account-slot .cm-bar-who:not(:has(.cm-avatar)) {
  display: none !important;
}

/* ========== الهاتف ========== */
@media (max-width: 768px) {
  #cm-account-slot {
    margin-inline-start: 0 !important;
    width: 100% !important;
    justify-content: flex-end !important;
    order: 3 !important;
  }

  #cm-account-slot .cm-bar.cm-bar-compact {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  #cm-account-slot .cm-name {
    max-width: 90px !important;
    font-size: .78rem !important;
  }

  #cm-account-slot .cm-points {
    font-size: .65rem !important;
    padding: 1px 6px !important;
  }

  #cm-account-slot .cm-btn {
    padding: 5px 9px !important;
    font-size: .72rem !important;
  }

  #cm-account-slot .cm-btn.ghost,
  #cm-account-slot .cm-btn.quiet,
  #cm-account-slot .cm-btn.small {
    padding: 4px 8px !important;
    font-size: .7rem !important;
  }
}

@media (max-width: 420px) {
  /* على الشاشات الضيقة جداً: أخفِ النقاط والنص الطويل */
  #cm-account-slot .cm-points {
    display: none !important;
  }

  #cm-account-slot .cm-badge-admin {
    display: none !important;
  }

  #cm-account-slot .cm-name {
    max-width: 70px !important;
  }
}








/* عنوان التعليقات — شريط أزرق واضح */
.cm-title.cm-title-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 14px !important;
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  padding: 18px 22px !important;
  background: linear-gradient(135deg, #172533 0%, #356f9e 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(18, 60, 105, 0.28) !important;
  box-sizing: border-box !important;
  color: #111922 !important;
}

.cm-title.cm-title-inline .cm-title-main {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #111922 !important;
  letter-spacing: -.02em !important;
  line-height: 1.3 !important;
}

.cm-title.cm-title-inline .cm-title-sub {
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.5 !important;
}

.cm-title.cm-title-inline small {
  display: none !important;
}

@media (max-width: 600px) {
  .cm-title.cm-title-inline {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 15px 16px !important;
    border-radius: 10px !important;
  }

  .cm-title.cm-title-inline .cm-title-main {
    font-size: 1.25rem !important;
  }

  .cm-title.cm-title-inline .cm-title-sub {
    font-size: .85rem !important;
  }
}


















/* زر نشر تعليق — أكبر وأوضح أنه يفتح */
.cm-compose-toggle {
  margin: 0 0 16px 0 !important;
}

.cm-compose-toggle .cm-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 22px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  background: #356f9e !important;
  border: 2px solid #172533 !important;
  color: #111922 !important;
  box-shadow: 0 3px 12px rgba(23, 105, 170, 0.3) !important;
  cursor: pointer !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.cm-compose-toggle .cm-btn:hover {
  background: #172533 !important;
  box-shadow: 0 5px 16px rgba(18, 60, 105, 0.35) !important;
  transform: translateY(-1px) !important;
}

.cm-compose-toggle .cm-btn:active {
  transform: translateY(0) !important;
}

/* سهم يوضح أنه يفتح/يغلق */
.cm-compose-toggle .cm-btn::after {
  content: "▾" !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  opacity: .9 !important;
}

@media (max-width: 600px) {
  .cm-compose-toggle .cm-btn {
    padding: 13px 16px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }
}






/* عنوان فوق أزرار التصنيفات */
.cm-cats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 16px 0 !important;
  padding-top: 8px !important;
  position: relative !important;
}

.cm-cats::before {
  content: "قسم التعليقات" !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #172533 !important;
  letter-spacing: -.01em !important;
}





/* عناصر ملف المستخدم قابلة للضغط */
.cm-profile-item.cm-profile-link {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  font: inherit !important;
  cursor: pointer !important;
  background: #edf2f6 !important;
  border: 1px solid #263441 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.cm-profile-item.cm-profile-link:hover {
  border-color: #356f9e !important;
  box-shadow: 0 2px 10px rgba(23, 105, 170, 0.12) !important;
}

/* تمييز التعليق بعد الانتقال إليه */
.cm-highlight {
  outline: 3px solid #356f9e !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(23, 105, 170, 0.2) !important;
  transition: outline .2s ease, box-shadow .2s ease !important;
}












/* تنسيق رأس التعليق */
.cm-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* تنسيق الدائرة (الحروف فقط) */
.cm-item .cm-avatar,
.cm-reply .cm-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* تنسيق الحروف */
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important; /* الحروف الكبيرة */
  letter-spacing: 0.5px !important; /* مسافة بسيطة بين الحروف */
  line-height: 1 !important;
  color: #edf2f6 !important;
  text-align: center !important;
  
  /* الخلفية والحدود */
  background: #356f9e !important;
  border: 2px solid transparent !important;
  padding: 0 !important;
  
  /* إعدادات التفاعل */
  cursor: pointer !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  
  /* تأثير حركي سلس */
  transition: all 0.25s ease-in-out !important;
}

/* حالة التمرير والتركيز */
.cm-item .cm-avatar:hover,
.cm-reply .cm-avatar:hover,
.cm-item .cm-avatar:focus-visible,
.cm-reply .cm-avatar:focus-visible {
  background: #172533 !important;
  border-color: rgba(23, 105, 170, 0.3) !important;
  transform: scale(1.05) !important;
  outline: none !important;
}

/* دائرة الحساب في الهيدر */
#cm-account-slot .cm-avatar {
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

#cm-account-slot .cm-avatar:hover {
  transform: scale(1.05) !important;
}

















.cm-body {
    font-size: 20px !important;
    line-height: 1.9 !important;
}

.cm-reply .cm-body {
    font-size: 19px !important;
    line-height: 1.9 !important;
}


.cm-loading {
    text-align: center;
    padding: 35px 15px;
    font-size: 18px;
    line-height: 1.8;
    opacity: 0.75;
}







.cm-loading-screen {
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cm-loading-text {
    font-size: 21px;
    line-height: 1.8;
    opacity: 0.7;
}













/* حجز مساحة المنتدى قبل تشغيل JavaScript */
#comments-root {
    min-height: 650px;
}

/* شاشة تحميل المنتدى */
.cm-loading-screen {
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cm-loading-text {
    font-size: 21px;
    line-height: 1.8;
    opacity: 0.7;
}











.cm-notify-btn {
    position: relative;
    white-space: nowrap;
}

.cm-notify-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-right: 4px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    background: #bd5968;
    color: #edf2f6;
    vertical-align: middle;
}

.cm-notify-count[hidden] {
    display: none;
}

.cm-notification-item {
    display: block;
    width: 100%;
    text-align: right;
    border: 0;
    border-bottom: 1px solid #263441;
    background: transparent;
    padding: 14px 10px;
    cursor: pointer;
    font: inherit;
}

.cm-notification-item:hover {
    background: #1b2731;
}

.cm-notification-item.unread {
    background: #1b2935;
}

.cm-notification-text {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 4px;
}

.cm-notification-toast {
    z-index: 10000;
}

/* ===== زر الدردشة وشارتها ===== */
.cm-chat-btn {
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.cm-chat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-right: 4px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    background: #bd5968;
    color: #edf2f6;
    vertical-align: middle;
}
.cm-chat-count[hidden] {
    display: none;
}








/* =========================================================================
   ألوان داكنة أنيقة (Navy/Slate) — إضافة نهائية (ضعها في نهاية ملف CSS)
   لا تغيّر أي شيء آخر، فقط الألوان
   ========================================================================= */

:root {
  --cm-ink:      #d6e2ee !important;   /* نص فاتح مائل للأزرق */
  --cm-ink-soft: #7d8fa3 !important;   /* نص ثانوي رمادي مزرق */
  --cm-line:     #22303d !important;   /* حدود داكنة مزرقة */
  --cm-surface:  #111922 !important;   /* سطح البطاقات */
  --cm-bg:       #0d151d !important;   /* خلفية الصفحة */
  --cm-green:    #356f9e !important;   /* الأزرق الأساسي */
  --cm-green-d:  #2a5878 !important;   /* أزرق داكن */
  --cm-sand:     #17222d !important;   /* خلفية فاتحة قليلاً */
  --cm-amber:    #d9a441 !important;   /* ذهبي للنقاط */
  --cm-red:      #c0392b !important;   /* أحمر للتنبيهات */
  --cm-radius:   10px !important;
}

/* ===== الخلفية العامة والنصوص ===== */
body {
  background: #0d151d !important;
  color: #d6e2ee !important;
}

/* ===== الهيدر ===== */
.site-header {
  background: linear-gradient(135deg, #0d151d, #17222d) !important;
  color: #d6e2ee !important;
  border-bottom-color: #22303d !important;
}

/* ===== البطاقات والحاويات ===== */
.states-list details,
.parts-box,
.about-box,
.overview-table-wrapper,
.overview-table {
  background: #111922 !important;
  border-color: #22303d !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.state-overview h2 {
  background: #0d151d !important;
  color: #d6e2ee !important;
  border: 1px solid #22303d !important;
}

/* ===== عناوين الأقسام ===== */
.states-list h2,
.states-title,
.special-section h2,
.about-usa-section h2,
.about-box h2,
.site-header h1 {
  color: #d6e2ee !important;
}

/* ===== عناوين البطاقات ===== */
.states-list summary,
.parts-box summary {
  color: #a8c0d6 !important;
}

.parts-box summary {
  background: #17222d !important;
}

.states-list summary::before,
.parts-box summary::before {
  background: #356f9e !important;
}

.states-list summary::after {
  background: #17222d !important;
  color: #356f9e !important;
}

.states-list summary:hover,
.parts-box summary:hover {
  background: #17222d !important;
}

.states-list details[open] summary {
  background: #17222d !important;
}

.states-list details[open] summary::before {
  background: #c0392b !important;
}

.states-list details[open] summary::after {
  background: #2a1c1c !important;
  color: #e07a6a !important;
}

/* ===== النصوص الوصفية ===== */
.states-list details p,
.parts-box p,
.about-box p,
.about-usa-section p,
.overview-table td {
  color: #8fa4b8 !important;
}

/* ===== الروابط والأزرار ===== */
.states-list details a {
  background: #356f9e !important;
  color: #ffffff !important;
}

.states-list details a:hover {
  background: #2a5878 !important;
}

/* ===== التنبيهات ===== */
.notice {
  background: #17222d !important;
  border-right-color: #d9a441 !important;
  color: #c8b88c !important;
}

.notice a {
  color: #e07a6a !important;
}

/* ===== الأقسام الخاصة ===== */
.special-list details summary {
  color: #d9a441 !important;
}
.special-list details summary::before {
  background: #d9a441 !important;
}
.special-list details summary::after {
  background: #2a2218 !important;
  color: #d9a441 !important;
}
.special-list details a {
  background: #b8862f !important;
  color: #ffffff !important;
}
.special-list details a:hover {
  background: #966d24 !important;
}

/* ===== أقسام المناطق ===== */
.region-list details summary {
  color: #6fb8a8 !important;
}
.region-list details summary::before {
  background: #4a9488 !important;
}
.region-list details summary::after {
  background: #1a2a28 !important;
  color: #6fb8a8 !important;
}
.region-list details a {
  background: #4a9488 !important;
  color: #ffffff !important;
}
.region-list details a:hover {
  background: #3a7568 !important;
}

/* ===== الجداول ===== */
.overview-table th {
  background: #17222d !important;
  color: #a8c0d6 !important;
  border-bottom-color: #22303d !important;
}
.overview-table td {
  border-bottom-color: #22303d !important;
}
.overview-table tr:hover th,
.overview-table tr:hover td {
  background: #17222d !important;
}

/* ===== التنقل السفلي ===== */
.bottom-navigation .page-nav-previous,
.bottom-navigation .page-nav-home,
.bottom-navigation .page-nav-next {
  background: #17222d !important;
  border-color: #22303d !important;
  color: #a8c0d6 !important;
}
.bottom-navigation .page-nav-previous:hover,
.bottom-navigation .page-nav-home:hover,
.bottom-navigation .page-nav-next:hover {
  background: #1f2d3a !important;
  border-color: #356f9e !important;
  color: #d6e2ee !important;
}

/* ===== الفوتر ===== */
.site-footer {
  background: #0a1119 !important;
  border-top: 1px solid #22303d !important;
}
.footer-links a,
.copyright,
.page-label,
.page-navigation .page-label {
  color: #a8c0d6 !important;
}
.footer-divider {
  background: rgba(53, 111, 158, 0.3) !important;
}

/* ===== الحقول والقوائم المنسدلة ===== */
.cm-select,
.cm-field input,
.cm-field textarea,
.cm-field select,
.cm-form textarea,
.cm-replyform textarea {
  background: #17222d !important;
  border-color: #22303d !important;
  color: #d6e2ee !important;
}
.cm-form textarea:focus {
  background: #1f2d3a !important;
  border-color: #356f9e !important;
}

/* ===== عنوان التعليقات ===== */
.cm-title {
  border-inline-start-color: #356f9e !important;
}
.cm-title.cm-title-inline {
  background: linear-gradient(135deg, #0d151d 0%, #17222d 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #22303d !important;
}
.cm-title.cm-title-inline .cm-title-main {
  color: #d6e2ee !important;
}
.cm-title.cm-title-inline .cm-title-sub {
  color: #7d8fa3 !important;
}

.cm-bar.cm-bar-compact {
  background: #111922 !important;
  border-color: #22303d !important;
  border-inline-start-color: #356f9e !important;
}

/* ===== شريط الحساب في الهيدر ===== */
#cm-account-slot .cm-bar.cm-bar-compact {
  background: rgba(53, 111, 158, 0.12) !important;
  border-color: rgba(53, 111, 158, 0.35) !important;
}
#cm-account-slot .cm-bar-who,
#cm-account-slot .cm-name {
  color: #d6e2ee !important;
}
#cm-account-slot .cm-avatar {
  background: #356f9e !important;
  border-color: rgba(214, 226, 238, 0.25) !important;
}
#cm-account-slot .cm-btn {
  background: #356f9e !important;
  color: #ffffff !important;
  border-color: #356f9e !important;
}
#cm-account-slot .cm-btn:hover {
  background: #2a5878 !important;
  border-color: #2a5878 !important;
}
#cm-account-slot .cm-btn.ghost,
#cm-account-slot .cm-btn.quiet,
#cm-account-slot .cm-btn.small {
  background: transparent !important;
  color: #a8c0d6 !important;
  border-color: rgba(168, 192, 214, 0.35) !important;
}
#cm-account-slot .cm-btn.ghost:hover,
#cm-account-slot .cm-btn.quiet:hover {
  background: rgba(53, 111, 158, 0.25) !important;
  color: #ffffff !important;
}

/* ===== بطاقات التعليقات ===== */
.cm-item {
  background: #111922 !important;
  border-color: #22303d !important;
  border-inline-start-color: #356f9e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.cm-item:hover {
  box-shadow: 0 4px 14px rgba(53, 111, 158, 0.25) !important;
  border-color: #2a5878 !important;
}
.cm-item.deleted {
  background: #17222d !important;
  border-inline-start-color: #3a4a58 !important;
}
.cm-name {
  color: #a8c0d6 !important;
}
.cm-name:hover {
  color: #4a8ab8 !important;
}
.cm-meta {
  color: #6b7c8f !important;
}
.cm-body {
  color: #d6e2ee !important;
}
.cm-body.gone {
  color: #6b7c8f !important;
}
.cm-tag {
  color: #4a8ab8 !important;
  background: #17222d !important;
}
.cm-act {
  background: #17222d !important;
  border-color: #22303d !important;
  color: #8fa4b8 !important;
}
.cm-act:hover {
  background: #1f2d3a !important;
  border-color: #356f9e !important;
  color: #d6e2ee !important;
}
.cm-act.on {
  color: #4a8ab8 !important;
  background: #1a2733 !important;
  border-color: #356f9e !important;
}
.cm-act.on.down {
  color: #e07a6a !important;
  background: #2a1c1c !important;
  border-color: #5a3530 !important;
}
.cm-actions {
  border-top-color: #1f2d3a !important;
}

/* ===== التصنيفات ===== */
.cm-cat {
  background: #111922 !important;
  border-color: #22303d !important;
  color: #8fa4b8 !important;
  box-shadow: none !important;
}
.cm-cat:hover {
  background: #17222d !important;
  border-color: #356f9e !important;
  color: #d6e2ee !important;
}
.cm-cat[aria-pressed="true"] {
  background: #356f9e !important;
  border-color: #356f9e !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(53, 111, 158, 0.4) !important;
}
.cm-cats::before {
  color: #d6e2ee !important;
}

/* ===== زر النشر ===== */
.cm-compose-toggle .cm-btn {
  background: #356f9e !important;
  border-color: #2a5878 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(53, 111, 158, 0.4) !important;
}
.cm-compose-toggle .cm-btn:hover {
  background: #2a5878 !important;
  box-shadow: 0 5px 16px rgba(53, 111, 158, 0.5) !important;
}

/* ===== الردود ===== */
.cm-replies {
  border-inline-start-color: #22303d !important;
}
.cm-reply {
  background: #17222d !important;
  border-color: #22303d !important;
}
.cm-reply .cm-actions {
  border-top-color: #1f2d3a !important;
}

/* ===== الأفاتار ===== */
.cm-item .cm-avatar,
.cm-reply .cm-avatar,
.cm-avatar,
.cm-bar.cm-bar-compact .cm-avatar {
  background: #356f9e !important;
  color: #ffffff !important;
}
.cm-item .cm-avatar:hover,
.cm-reply .cm-avatar:hover {
  background: #2a5878 !important;
}

/* ===== النوافذ ===== */
.cm-modal {
  background: rgba(5, 10, 16, 0.85) !important;
}
.cm-modal-card {
  background: #111922 !important;
  color: #d6e2ee !important;
  border: 1px solid #22303d !important;
}
.cm-modal-head h3 {
  color: #d6e2ee !important;
}
.cm-field label {
  color: #a8c0d6 !important;
}
.cm-hint {
  color: #6b7c8f !important;
}
.cm-ok {
  background: #12261e !important;
  border-color: #1e4a38 !important;
  color: #6fd4a8 !important;
}
.cm-error {
  background: #2a1618 !important;
  border-color: #5a2a2c !important;
  color: #e07a6a !important;
}
.cm-idcard {
  background: #356f9e !important;
  color: #ffffff !important;
}
.cm-toast {
  background: #1f2d3a !important;
  color: #d6e2ee !important;
  border: 1px solid #356f9e !important;
}
.cm-toast.bad {
  background: #c0392b !important;
  color: #ffffff !important;
}
.cm-x {
  color: #7d8fa3 !important;
}
.cm-x:hover {
  color: #d6e2ee !important;
}

/* ===== النقاط والشارات ===== */
.cm-points {
  color: #d9a441 !important;
  background: #2a2218 !important;
  border-color: #5a4a2a !important;
}
.cm-badge-admin {
  background: #2a5878 !important;
  color: #d6e2ee !important;
}

/* ===== wilaya-hero ===== */
.wilaya-num {
  color: #4a8ab8 !important;
  background: #17222d !important;
}
.wilaya-hero h2 {
  color: #d6e2ee !important;
}
.wilaya-hero p {
  color: #8fa4b8 !important;
}

/* ===== التناسق العام ===== */
.cm-bar.cm-bar-compact,
.cm-title.cm-title-inline {
  background: #111922 !important;
  border-color: #22303d !important;
  border-inline-start-color: #356f9e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.cm-bar.cm-bar-compact .cm-bar-who {
  color: #a8c0d6 !important;
}
.cm-bar.cm-bar-compact .cm-points {
  color: #d9a441 !important;
  background: #2a2218 !important;
  border-color: #5a4a2a !important;
}

/* ===== تمييز التعليق ===== */
.cm-highlight {
  outline-color: #356f9e !important;
  box-shadow: 0 0 0 6px rgba(53, 111, 158, 0.3) !important;
}

/* ===== عدّادات ===== */
.cm-notify-count,
.cm-chat-count {
  background: #c0392b !important;
  color: #ffffff !important;
}

/* ===== الملف الشخصي ===== */
.cm-profile-item,
.cm-profile-item.cm-profile-link {
  background: #111922 !important;
  border-color: #22303d !important;
  color: #d6e2ee !important;
}
.cm-profile-item.cm-profile-link:hover {
  border-color: #356f9e !important;
  box-shadow: 0 2px 10px rgba(53, 111, 158, 0.25) !important;
}
.cm-profile-head {
  border-bottom-color: #22303d !important;
}

/* ===== شاشة التحميل ===== */
.cm-loading,
.cm-loading-text {
  color: #6b7c8f !important;
}
.cm-empty {
  background: #111922 !important;
  border-color: #22303d !important;
  color: #6b7c8f !important;
}

/* ===== الأزرار العامة ===== */
.cm-btn {
  background: #356f9e !important;
  border-color: #356f9e !important;
  color: #ffffff !important;
}
.cm-btn:hover {
  background: #2a5878 !important;
}
.cm-btn.ghost {
  background: transparent !important;
  color: #4a8ab8 !important;
  border-color: #356f9e !important;
}
.cm-btn.ghost:hover {
  background: #17222d !important;
}
.cm-btn.quiet {
  background: transparent !important;
  color: #8fa4b8 !important;
  border-color: #22303d !important;
}
.cm-btn.quiet:hover {
  background: #17222d !important;
  color: #d6e2ee !important;
}
.cm-btn.danger {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #ffffff !important;
}
.cm-btn.danger:hover {
  background: #a02c20 !important;
}

/* ===== الإشعارات ===== */
.cm-notification-item {
  border-bottom-color: #22303d !important;
  color: #d6e2ee !important;
}
.cm-notification-item:hover {
  background: #17222d !important;
}
.cm-notification-item.unread {
  background: #17222d !important;
}
.cm-notification-text {
  color: #a8c0d6 !important;
}

/* ===== التركيز ===== */
.cm :focus-visible {
  outline-color: #356f9e !important;
}

/* ===== زر إظهار كلمة المرور ===== */
.cm-pw-toggle {
  color: #7d8fa3 !important;
}
.cm-pw-toggle:hover {
  color: #d6e2ee !important;
  background: rgba(53, 111, 158, 0.15) !important;
}

/* ===== أزرار النسخ ===== */
.parts-copy-btn {
  background: #17222d !important;
  color: #4a8ab8 !important;
}
.parts-copy-btn:hover {
  background: #356f9e !important;
  color: #ffffff !important;
}
.parts-copy-btn.copied {
  background: #12261e !important;
  color: #6fd4a8 !important;
}