/* community.css — تنسيق صفحات المجتمع (الحساب، المجتمع، الملف العام، الدردشة)
 * يعتمد على متغيرات الموقع في assets/css/styles.css فيعمل تلقائياً مع الوضعين الفاتح والداكن.
 */

.cm-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-2xl);
}

.cm-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.cm-page-head h1 {
  margin: 0;
  font-size: 1.75rem;
  color: var(--text-primary);
}

.cm-muted {
  color: var(--text-secondary);
  font-size: .92rem;
}

.cm-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.cm-card h2 {
  margin: 0 0 var(--spacing-md);
  font-size: 1.15rem;
  color: var(--text-primary);
}

/* ---------- التبويبات ---------- */
.cm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.cm-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.cm-tab:hover {
  background: var(--bg-secondary);
  color: var(--primary-color);
}

.cm-tab.active {
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-sm);
}

.cm-tab .cm-count {
  background: rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .78rem;
}

.cm-tab:not(.active) .cm-count {
  background: var(--bg-secondary);
  color: var(--primary-color);
}

/* ---------- الأزرار ---------- */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.cm-btn:hover {
  transform: translateY(-1px);
}

.cm-btn-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
}

.cm-btn-ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}

.cm-btn-danger {
  background: #fee2e2;
  color: #991b1b;
}

.cm-btn-sm {
  padding: 6px 12px;
  font-size: .85rem;
  border-radius: 10px;
}

.cm-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ---------- المدخلات ---------- */
.cm-input,
.cm-textarea,
.cm-select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  margin-bottom: 12px;
}

.cm-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.7;
}

.cm-label {
  display: block;
  margin-bottom: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---------- التنبيهات ---------- */
.cm-alert {
  padding: 12px 16px;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  font-size: .94rem;
  border: 1px solid transparent;
}

.cm-alert-info {
  background: var(--primary-soft, #e8f0fe);
  color: var(--primary-dark, #2c4763);
}

.cm-alert-success {
  background: #dcfce7;
  color: #166534;
}

.cm-alert-error {
  background: #fee2e2;
  color: #991b1b;
}

.cm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.cm-pill-warn {
  background: #fef3c7;
  color: #92400e;
}

.cm-pill-ok {
  background: #dcfce7;
  color: #166534;
}

.cm-pill-info {
  background: var(--primary-soft, #e8f0fe);
  color: var(--primary-dark, #2c4763);
}

/* ---------- المنشورات ---------- */
.cm-post {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.cm-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cm-post-head a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.cm-post-head .cm-muted {
  font-size: .82rem;
}

.cm-post-body {
  color: var(--text-primary);
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
}

.cm-post-media img,
.cm-post-media video {
  width: 100%;
  border-radius: var(--border-radius-md);
  margin-top: 12px;
}

.cm-post-foot {
  display: flex;
  gap: var(--spacing-md);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: .85rem;
}

/* ---------- الأعضاء ---------- */
.cm-grid {
  display: grid;
  /* 280px حتى تتّسع أزرار العضو الثلاثة (متابعة · دردشة · حظر) في صف واحد */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.cm-member {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.cm-member .cm-avatar {
  margin-bottom: 10px;
}

.cm-member h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--text-primary);
}

.cm-member .cm-member-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* أزرار العضو مضغوطة لتبقى في صف واحد عند اتساع البطاقة (متابعة · دردشة · حظر) */
.cm-member .cm-member-actions .cm-btn {
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: 10px;
  font-size: .82rem;
  white-space: nowrap;
}

/* ---------- الدردشة ---------- */
.cm-chat {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--spacing-md);
  align-items: start;
}

.cm-chat-list {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  max-height: 620px;
  overflow-y: auto;
}

.cm-conv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.cm-conv:hover,
.cm-conv.active {
  background: var(--bg-secondary);
}

.cm-conv-body {
  flex: 1;
  min-width: 0;
}

.cm-conv-body strong {
  display: block;
  color: var(--text-primary);
  font-size: .95rem;
}

.cm-conv-body span {
  display: block;
  color: var(--text-secondary);
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-conv .cm-unread {
  background: var(--primary-color);
  color: #fff;
  border-radius: 999px;
  font-size: .72rem;
  padding: 2px 8px;
  font-weight: 700;
}

.cm-thread {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: 520px;
  max-height: 620px;
}

.cm-thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
}

.cm-thread-head strong {
  color: var(--text-primary);
}

.cm-thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-body);
}

.cm-bubble {
  max-width: 76%;
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.7;
  font-size: .95rem;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  align-self: flex-start;
  word-break: break-word;
}

.cm-bubble.mine {
  align-self: flex-end;
  background: var(--gradient-primary);
  color: var(--text-white);
  border-color: transparent;
}

.cm-bubble time {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  opacity: .75;
}

.cm-thread-compose {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--border-color);
  align-items: flex-end;
}

.cm-thread-compose textarea {
  flex: 1;
  margin: 0;
  min-height: 46px;
  max-height: 120px;
}

.cm-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--spacing-2xl) var(--spacing-md);
  font-size: .95rem;
}

/* ---------- صفحة الحساب ---------- */
.cm-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.cm-auth-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-xl);
}

.cm-auth-switch {
  display: flex;
  gap: 8px;
  margin-bottom: var(--spacing-lg);
  background: var(--bg-secondary);
  padding: 6px;
  border-radius: 999px;
}

.cm-auth-switch a {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
}

.cm-auth-switch a.active {
  background: var(--bg-card);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.cm-oauth {
  display: grid;
  gap: 10px;
  margin: 6px 0 18px;
}

.cm-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}

.cm-oauth-btn.apple {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.cm-oauth-btn.disabled {
  opacity: .5;
  pointer-events: none;
}

.cm-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: .85rem;
  margin: 14px 0;
}

.cm-divider::before,
.cm-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.cm-profile-hero {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex-wrap: wrap;
}

.cm-stats {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.cm-stat {
  text-align: center;
  min-width: 90px;
}

.cm-stat strong {
  display: block;
  font-size: 1.35rem;
  color: var(--text-primary);
}

.cm-stat span {
  color: var(--text-secondary);
  font-size: .85rem;
}

.cm-search {
  display: flex;
  gap: 10px;
  margin-bottom: var(--spacing-lg);
}

.cm-search input {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cm-auth {
    grid-template-columns: 1fr;
  }

  .cm-chat {
    grid-template-columns: 1fr;
  }

  .cm-chat-list {
    max-height: 300px;
  }
}

@media (max-width: 560px) {
  .cm-wrap {
    padding: var(--spacing-md) 12px var(--spacing-xl);
  }

  .cm-bubble {
    max-width: 88%;
  }

  .cm-post {
    padding: var(--spacing-md);
  }
}

/* =====================================================================
 * تفاعلات المنشورات: الإعجاب + التعليقات (أُضيفت مع إحصاءات المجتمع)
 * ===================================================================== */

.cm-post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-sm) 0 0;
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-sm);
}

.cm-like,
.cm-comments-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.cm-like:hover:not(:disabled),
.cm-comments-toggle:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.cm-like:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.cm-like.is-liked {
  background: rgba(220, 38, 38, .1);
  border-color: #dc2626;
  color: #dc2626;
}

.cm-like.is-liked i {
  animation: cm-heart-pop .25s ease;
}

@keyframes cm-heart-pop {
  0% { transform: scale(.7); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.cm-comments {
  margin-top: var(--spacing-sm);
}

.cm-comments-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spacing-sm) 0 0;
}

.cm-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cm-comment-body {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 8px 12px;
  flex: 1;
}

.cm-comment-body strong {
  color: var(--text-primary);
  font-size: .92rem;
  margin-inline-end: 6px;
}

.cm-comment-body p {
  margin: 4px 0 0;
  color: var(--text-primary);
  line-height: 1.8;
  white-space: pre-wrap;
}

.cm-comment-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.cm-comment-form textarea {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.cm-comment-msg {
  margin: 4px 0 0;
}

.cm-comment-msg.cm-error {
  color: #dc2626;
}

.cm-avatar-sm {
  width: 32px !important;
  height: 32px !important;
  font-size: .8rem;
}

/* =====================================================================
 * صفحة «حسابي»: شبكة بطاقات موحّدة + بلاطات الإحصاءات
 * ===================================================================== */

.cm-hero-card {
  padding: var(--spacing-lg);
}

.cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cm-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
  margin-bottom: var(--spacing-lg);
}

.cm-cards-grid > .cm-card {
  margin-bottom: 0;
  height: 100%;
}

/* الصف الثاني: إحصاءاتي (٣٥٪) على اليمين + منشوراتي (٦٥٪) بجانبها */
.cm-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: var(--spacing-lg);
  align-items: start;
  margin-bottom: var(--spacing-lg);
}

.cm-feature-grid > .cm-card {
  margin-bottom: 0;
}

/* بلاطات الإحصاءات: ٢×٢ داخل العمود الضيق، و٤ في صف عند اتساع البطاقة */
.cm-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: var(--spacing-md) 0;
}

.cm-tile {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 12px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-tile i {
  color: var(--primary-color);
  font-size: 1rem;
}

.cm-tile strong {
  font-size: 1.3rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.cm-tile span {
  font-size: .78rem;
  color: var(--text-secondary);
}

.cm-stat-lines {
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0;
}

.cm-stat-lines li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px dashed var(--border-color);
  color: var(--text-secondary);
  font-size: .92rem;
}

.cm-stat-lines li:last-child {
  border-bottom: 0;
}

.cm-stat-lines li strong {
  color: var(--text-primary);
}

@media (min-width: 561px) and (max-width: 992px) {
  .cm-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .cm-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cm-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
 * الحظر: زر الحظر + حالة الحظر في الدردشة + قائمة المحظورين
 * ===================================================================== */

.cm-btn-block {
  border: 1px solid var(--border-color);
  background: #fff1f2;
  color: #be123c;
}

.cm-btn-block:hover {
  border-color: #be123c;
}

.cm-thread-block {
  margin-inline-start: auto;
}

.cm-thread-blocked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  background: #fff1f2;
  color: #881337;
  font-size: .92rem;
  line-height: 1.8;
}

.cm-thread-blocked i {
  font-size: 1.1rem;
}

.cm-conv .cm-pill-warn {
  margin-inline-start: 4px;
}

.cm-block-list {
  list-style: none;
  margin: var(--spacing-md) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.cm-block-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-secondary);
}

.cm-block-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cm-block-info a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.cm-block-info span {
  font-size: .8rem;
}

.cm-block-list .cm-btn {
  flex: 0 0 auto;
}

/* =====================================================================
 * تخطيط صفحة المنشورات: «شارك منشوراً» يمين الصفحة (الأول في RTL) بنسبة 40%
 * والمنشورات في اليسار وتأخذ الباقي. على الشاشات المتوسطة والجوال: عمود واحد.
 * ===================================================================== */
.cm-feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: var(--spacing-lg);
  align-items: start;
}

.cm-feed-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------
 * الحالة غير المسجّلة (زائر): بطاقة الدخول والمنشورات بعرض ٦٥٪ من العرض
 * المتاح وفي الوسط — على الديسكتوب فقط، وتبقى بعرض كامل على الجوال والتابلت.
 * --------------------------------------------------------------------- */
@media (min-width: 993px) {
  .cm-guest-card,
  .cm-feed-layout--single>.cm-feed-posts {
    width: 65%;
    margin-inline: auto;
  }
}

.cm-feed-compose {
  position: sticky;
  top: 86px;
}

.cm-feed-posts {
  min-width: 0;
}

@media (max-width: 992px) {
  .cm-feed-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
  }

  .cm-feed-compose {
    position: static;
  }
}

/* علامة «متصل الآن» في بطاقة العضو */
.cm-online-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 700;
  color: #16a34a;
}

.cm-online-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

/* =====================================================================
 * الملف العام: كرتا «نشاط الحساب» و«نشاط المستخدم» تحت بعضهما يمين الصفحة (45%)
 * والمنشورات في اليسار (الباقي). على الشاشات المتوسطة: عمود واحد.
 * ===================================================================== */
.cm-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--spacing-lg);
  align-items: start;
}

.cm-profile-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: sticky;
  top: 86px;
}

.cm-profile-side .cm-card {
  margin: 0;
}

.cm-profile-side h2 {
  margin-top: 0;
}

.cm-profile-posts {
  min-width: 0;
}

.cm-profile-posts > h2 {
  margin-top: 0;
}

/* البلاطات في العمود الضيّق: 2×2 دائماً */
.cm-profile-side .cm-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 992px) {
  .cm-profile-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
  }

  .cm-profile-side {
    position: static;
  }
}

@media (min-width: 561px) and (max-width: 992px) {
  .cm-profile-side .cm-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =====================================================================
 * 🌱 انتفع به · حفظ المنشور · مشاركة خارجية (المرحلة: تفاعلات المنشورات)
 * ===================================================================== */

/* زر انتفع به: أخضر هادئ بدل الأحمر (المعنى انتفاع لا إعجاب) */
.cm-like.is-liked,
.cm-like.is-active {
  background: rgba(22, 163, 74, .1);
  border-color: #16a34a;
  color: #15803d;
}

.cm-like.is-liked i { animation: none; }

.cm-benefit-ico {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  line-height: 1;
}

.cm-benefit-sprout {
  display: inline-block;
  transform-origin: 50% 90%;
  transition: transform .2s ease, color .2s ease;
}

/* خط الأرض الذي تُغرس فيه النبتة */
.cm-benefit-soil {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 1.05em;
  height: .28em;
  margin-inline-start: -.525em;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(120, 72, 20, .45), rgba(120, 72, 20, .12) 70%, transparent 72%);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .2s ease, transform .2s ease;
}

.cm-like.is-liked .cm-benefit-soil { opacity: 1; transform: scaleX(1); }

/* الأنيميشن: تخرج النبتة من التراب ثم تُغرس فيه وتثبت */
.cm-like.is-planting .cm-benefit-sprout {
  animation: cm-seedling-plant 1.15s cubic-bezier(.34, 1.4, .5, 1) both;
}

.cm-like.is-planting .cm-benefit-soil {
  animation: cm-soil-blossom 1.15s ease both;
}

@keyframes cm-seedling-plant {
  0%   { transform: translateY(4px) scale(.55) rotate(-12deg); opacity: .25; }
  22%  { transform: translateY(-9px) scale(1.05) rotate(2deg); opacity: 1; }
  44%  { transform: translateY(-11px) scale(1.12) rotate(-3deg); }
  62%  { transform: translateY(-3px) scale(1) rotate(1deg); }
  78%  { transform: translateY(3px) scale(.94) rotate(2deg); }
  90%  { transform: translateY(-2px) scale(1.08) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes cm-soil-blossom {
  0%, 55% { transform: scaleX(.4); opacity: 0; }
  70%     { transform: scaleX(1.15); opacity: 1; }
  85%     { transform: scaleX(.9); opacity: 1; }
  100%    { transform: scaleX(1); opacity: 1; }
}

/* ومضات خفيفة تتصاعد عند الانتفاع */
.cm-benefit-sparks {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 0;
  height: 0;
}

.cm-benefit-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, .8);
  animation: cm-spark-rise .95s ease-out forwards;
}

@keyframes cm-spark-rise {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(var(--cm-spark-x, 0), var(--cm-spark-y, -30px)) scale(1.1); opacity: 0; }
}

/* زر الحفظ */
.cm-save,
.cm-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.cm-save:hover:not(:disabled),
.cm-share:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.cm-save:disabled { opacity: .55; cursor: not-allowed; }

.cm-save.is-saved {
  background: rgba(47, 128, 237, .1);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.cm-save-pop { animation: cm-save-pop .35s ease; }

@keyframes cm-save-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.cm-share.is-active {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(47, 128, 237, .08);
}

/* قائمة المشاركة الخارجية */
.cm-post { position: relative; }

.cm-share-sheet {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 14px);
  background: var(--bg-primary, #fff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}

.cm-share-sheet[hidden] { display: none !important; }

.cm-share-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cm-share-sheet-head strong { font-size: .95rem; }

.cm-share-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
}

.cm-share-close:hover { background: var(--bg-secondary); color: var(--primary-color); }

.cm-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.cm-share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-decoration: none;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: var(--transition-fast);
  border-width: 1px;
}

.cm-share-item i { font-size: 1.15rem; }

.cm-share-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.cm-share-item.is-whatsapp:hover { color: #25d366; border-color: #25d366; }
.cm-share-item.is-telegram:hover { color: #229ed9; border-color: #229ed9; }
.cm-share-item.is-x:hover { color: #0f1419; border-color: #0f1419; }
.cm-share-item.is-facebook:hover { color: #1877f2; border-color: #1877f2; }
.cm-share-item.is-linkedin:hover { color: #0a66c2; border-color: #0a66c2; }
.cm-share-item.is-email:hover { color: #b45309; border-color: #b45309; }
.cm-share-item.is-native:hover { color: var(--primary-color); border-color: var(--primary-color); }

.cm-share-copy {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.cm-share-url {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: .82rem;
  direction: ltr;
  text-align: left;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.cm-share-copybtn { white-space: nowrap; }

/* منشور مفتوح برابط مباشر (?post=ID) */
.cm-post--focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .18);
  animation: cm-focus-post 1.6s ease;
}

@keyframes cm-focus-post {
  0% { background: rgba(47, 128, 237, .12); }
  100% { background: var(--bg-primary, #fff); }
}

@media (max-width: 560px) {
  .cm-post-actions { flex-wrap: wrap; }
  .cm-save-label, .cm-share-label { display: none; }
  .cm-share-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* =====================================================================
 * تبويبا «منشوراتي / محفوظاتي» في صفحة حسابي (Segmented tabs)
 * ===================================================================== */

.cm-myposts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.cm-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  flex-wrap: wrap;
}

.cm-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.cm-seg-btn:hover { color: var(--primary-color); }

.cm-seg-btn.active {
  background: var(--bg-primary, #fff);
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.cm-seg-btn .cm-pill { font-size: .75rem; }

.cm-myposts-panel[hidden] { display: none !important; }

.cm-myposts-panel > .cm-post + .cm-post { margin-top: var(--spacing-md); }

.cm-empty i { margin-inline-end: 6px; }

/* ==================================================================
   الحسنات والإنجازات وعدّاد المشاركة والتنبيهات الخفيفة (community)
   ================================================================== */

.cm-share-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: rgba(47, 128, 237, .12);
    color: var(--cm-primary, #3478e5);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

/* رصيد الحسنات */
.cm-hasanat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(47, 128, 237, .12), rgba(47, 128, 237, .05));
    border: 1px solid rgba(47, 128, 237, .22);
    color: var(--text-primary, #10203a);
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}
.cm-hasanat .cm-hasanat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: .68rem;
}
.cm-hasanat strong { font-size: 1rem; font-weight: 800; }
.cm-hasanat .cm-hasanat-label { font-size: .76rem; color: var(--text-secondary, #64748b); }
.cm-hasanat .cm-hasanat-meta {
    font-size: .72rem;
    font-style: normal;
    color: var(--text-secondary, #64748b);
    border-inline-start: 1px solid rgba(47, 128, 237, .22);
    padding-inline-start: 8px;
}
.cm-hasanat.is-low {
    background: linear-gradient(135deg, rgba(220, 38, 38, .12), rgba(220, 38, 38, .04));
    border-color: rgba(220, 38, 38, .3);
    color: #b91c1c;
}
.cm-hasanat.is-low .cm-hasanat-ico { background: linear-gradient(135deg, #f87171, #dc2626); }

.cm-hasanat-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 0;
    font-size: .82rem;
}
.cm-hasanat-earn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cm-primary, #3478e5);
    font-weight: 700;
    text-decoration: none;
}
.cm-hasanat-earn:hover { text-decoration: underline; }

/* الإنجازات */
.cm-ach-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-ach-sub {
    margin: 18px 0 10px;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #64748b);
}
.cm-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}
.cm-ach {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 10px;
    border-radius: 14px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid rgba(15, 23, 42, .07);
    text-align: center;
}
.cm-ach strong { font-size: .84rem; font-weight: 800; line-height: 1.35; }
.cm-ach em {
    font-style: normal;
    font-size: .7rem;
    color: var(--text-secondary, #64748b);
}
.cm-ach .cm-ach-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(148, 163, 184, .18);
    color: #64748b;
    font-size: .95rem;
    opacity: .55;
}
.cm-ach.is-earned {
    background: linear-gradient(160deg, rgba(47, 128, 237, .1), rgba(47, 128, 237, .03));
    border-color: rgba(47, 128, 237, .25);
}
.cm-ach.is-earned .cm-ach-ico {
    background: linear-gradient(135deg, #2f80ed, #56ccf2);
    color: #fff;
    opacity: 1;
    box-shadow: 0 6px 14px rgba(47, 128, 237, .28);
}
.cm-ach-bar {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    overflow: hidden;
    margin-top: 4px;
}
.cm-ach-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f80ed, #56ccf2);
}

/* التنبيهات الخفيفة */
#cm-toasts {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-end: 22px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: min(92vw, 340px);
}
.cm-toast {
    padding: 12px 16px;
    border-radius: 14px;
    background: #10203a;
    color: #fff;
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    font-size: .86rem;
    font-weight: 700;
    box-shadow: 0 14px 34px rgba(9, 20, 40, .3);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .28s ease, transform .28s ease;
}
.cm-toast.is-in { opacity: 1; transform: translateY(0) scale(1); }
.cm-toast.is-hasanat { background: linear-gradient(135deg, #1d4ed8, #2f80ed); }
.cm-toast.is-achievement { background: linear-gradient(135deg, #b45309, #f59e0b); color: #1f2937; }
.cm-toast.is-warn { background: linear-gradient(135deg, #b91c1c, #ef4444); }

/* حقول الحسنات في حسابي */
.cm-hasanat-tiles .cm-tile strong { font-size: 1.35rem; }
.cm-hasanat-tiles .cm-tile i { color: #d97706; }

@media (max-width: 600px) {
    #cm-toasts { inset-inline: 12px; inset-block-end: 14px; max-width: none; }
    .cm-ach-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .cm-hasanat .cm-hasanat-meta { display: none; }
}

/* لوحة الإنجازات الكاملة (الملف العام): الممنوحة والمقفلة معاً */
.cm-ach-grid--all {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 9px;
}
.cm-ach.is-locked {
    background: var(--bg-secondary, #f8fafc);
    border-style: dashed;
    border-color: rgba(15, 23, 42, .12);
}
.cm-ach.is-locked strong { color: var(--text-secondary, #64748b); }
.cm-ach.is-locked .cm-ach-ico { opacity: .4; }
.cm-ach .cm-ach-lock {
    position: absolute;
    top: 7px;
    inset-inline-start: 8px;
    font-size: .58rem;
    color: #94a3b8;
}
.cm-ach-done {
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
    color: #15803d;
}
.cm-ach-reward {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(217, 119, 6, .13);
    color: #b45309;
    font-size: .62rem;
    font-weight: 800;
}
@media (max-width: 992px) {
    .cm-ach-grid--all { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* شارة إنجازات العضو في بطاقة قائمة الأعضاء — يراها كل زائر قبل فتح الملف */
.cm-member .cm-ach-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid rgba(15, 23, 42, .08);
    color: var(--text-secondary, #64748b);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cm-member .cm-ach-chip.has-earned {
    background: rgba(217, 119, 6, .12);
    border-color: rgba(217, 119, 6, .3);
    color: #b45309;
}
.cm-member .cm-ach-chip:hover {
    background: rgba(47, 128, 237, .1);
    border-color: rgba(47, 128, 237, .32);
    color: #2f80ed;
}
.cm-member .cm-ach-chip.has-earned:hover {
    background: rgba(217, 119, 6, .2);
    color: #92400e;
}

/* ===== محفوظات المحتوى (مقالات/أذكار) داخل تبويب «محفوظاتي» ===== */
.cm-saved-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(47, 128, 237, .08);
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 600;
}

.cm-saved-group {
    margin-bottom: 18px;
}

.cm-saved-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
}

.cm-saved-title i {
    color: var(--primary-color, #2f80ed);
}

.cm-saved-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cm-saved-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--bg-card, #fff);
}

.cm-saved-link {
    flex: 1 1 60%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.cm-saved-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-saved-link:hover {
    color: var(--primary-color, #2f80ed);
}

.cm-saved-link--off {
    color: var(--text-light, #94a3b8);
    font-weight: 500;
    cursor: default;
}

.cm-saved-when {
    font-size: .8rem;
    white-space: nowrap;
}

.cm-pill-soft {
    background: rgba(47, 128, 237, .1);
    color: #1d4ed8;
}

/* رسالة تنبيه بديلة عندما لا تكون main.js محمّلة */
.cs-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 24px;
    margin: 0 auto;
    width: fit-content;
    max-width: 90vw;
    padding: 12px 20px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    z-index: 100000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transition: opacity .3s ease, transform .3s ease;
}

.cs-toast.is-out {
    opacity: 0;
    transform: translateY(10px);
}

.cs-toast.is-error {
    background: #b91c1c;
}

.cs-toast.is-info {
    background: #1d4ed8;
}

@media (max-width: 600px) {
    .cm-saved-link {
        flex: 1 1 100%;
    }

    .cm-saved-when {
        font-size: .75rem;
    }
}

/* =====================================================================
 * لوحة المتصدرين (تبويب «المتصدرون»)
 * ===================================================================== */

.cm-lb {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cm-lb-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}

.cm-lb-head p {
    margin: 0;
    font-size: .92rem;
}

.cm-lb-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cm-lb-scope {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.cm-lb-scope:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.cm-lb-scope.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* ميدالية المركز */
.cm-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: .95rem;
    flex: 0 0 auto;
}

.cm-rank-1, .cm-rank-2, .cm-rank-3 {
    background: transparent;
    font-size: 1.5rem;
    height: auto;
    min-width: 0;
}

/* منصة التتويج */
.cm-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.cm-podium-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text-primary);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cm-podium-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.cm-podium-card.rank-1 {
    border-color: #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, .10), var(--bg-card));
}

.cm-podium-card.rank-2 {
    border-color: #94a3b8;
}

.cm-podium-card.rank-3 {
    border-color: #b45309;
}

.cm-podium-card.is-me {
    outline: 2px dashed var(--primary-color);
    outline-offset: 2px;
}

.cm-podium-name {
    font-size: 1rem;
    line-height: 1.3;
    word-break: break-word;
}

.cm-podium-score {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: #b45309;
}

.cm-podium-sub {
    font-size: .8rem;
    color: var(--text-secondary);
}

.cm-podium-me {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

/* جدول بقية الترتيب */
.cm-lb-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-card);
    overflow: hidden;
}

.cm-lb-row {
    display: grid;
    grid-template-columns: 44px minmax(120px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.cm-lb-row:last-child {
    border-bottom: 0;
}

.cm-lb-row:hover {
    background: var(--bg-secondary);
}

.cm-lb-row.is-me {
    background: rgba(47, 128, 237, .07);
}

.cm-lb-row--head {
    display: grid;
    padding: 8px 14px;
    background: var(--bg-secondary);
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.cm-lb-member {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cm-lb-member-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-lb-you {
    font-style: normal;
    font-size: .74rem;
    color: var(--primary-color);
}

.cm-lb-cell-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.cm-lb-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .78rem;
    white-space: nowrap;
}

.cm-lb-chip.is-primary {
    background: rgba(217, 119, 6, .12);
    color: #b45309;
    font-weight: 700;
}

.cm-lb-foot {
    font-size: .85rem;
    margin: 0;
}

/* بطاقة صاحب الحساب */
.cm-lb-me {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--border-radius-lg);
    border: 1px dashed var(--primary-color);
    background: rgba(47, 128, 237, .06);
    flex-wrap: wrap;
}

.cm-lb-me-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 200px;
    min-width: 0;
}

.cm-lb-me-body em {
    font-style: normal;
    font-size: .85rem;
    color: var(--text-secondary);
}

/* =====================================================================
 * المسابقات (تبويب «المسابقات»)
 * ===================================================================== */

.cm-comps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cm-comps-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}

.cm-comps-head p {
    margin: 0;
    font-size: .92rem;
}

.cm-comps-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 1.02rem;
    color: var(--text-primary);
}

.cm-comp {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-comp.is-running {
    border-inline-start: 4px solid var(--primary-color);
}

.cm-comp.is-settled {
    opacity: .97;
}

.cm-comp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cm-comp-head h3 {
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
}

.cm-comp-head p {
    margin: 0;
    font-size: .88rem;
}

.cm-comp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cm-comp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .82rem;
}

.cm-comp-meta-item.is-reward {
    background: rgba(217, 119, 6, .12);
    color: #b45309;
    font-weight: 700;
}

.cm-comp-time {
    margin: 0;
    font-size: .88rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-comp-progress {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border-radius: var(--border-radius-md);
    background: var(--bg-secondary);
}

.cm-comp-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .9rem;
}

.cm-comp-bar {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.cm-comp-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-primary);
}

.cm-comp-join {
    margin: 0;
}

.cm-comp-board {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.cm-comp-board h4 {
    margin: 0;
    padding: 9px 14px;
    background: var(--bg-secondary);
    font-size: .86rem;
    color: var(--text-secondary);
}

.cm-comp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-top: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}

.cm-comp-row:hover {
    background: var(--bg-secondary);
}

.cm-comp-row-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.cm-comp-row-value {
    font-weight: 700;
    color: var(--primary-color);
    font-size: .9rem;
    white-space: nowrap;
}

.cm-comp-empty {
    margin: 0;
    font-size: .88rem;
}

@media (max-width: 768px) {
    /* التبويبات صفّ واحد قابل للسحب بدل الالتفاف إلى صفّين */
    .cm-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cm-tabs::-webkit-scrollbar {
        display: none;
    }

    .cm-tab {
        flex: 0 0 auto;
    }

    .cm-podium {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .cm-podium-card {
        padding: 12px 8px;
    }

    .cm-podium-name {
        font-size: .88rem;
    }

    .cm-lb-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px 10px;
    }

    .cm-lb-cell-metrics {
        justify-content: flex-start;
    }

    .cm-lb-row--head {
        display: none;
    }

    .cm-lb-row .cm-lb-cell-metrics {
        grid-column: 1 / -1;
    }
}