/* ============================================================
   نظام تصميم موحّد للوحة التحكم — كل الألوان/المسافات/الظلال من
   متغيّرات جذرية واحدة بدل قيم Hex مكررة ومتضاربة كانت مبعثرة بكل
   قاعدة على حدة (كان فيها حتى متغيّر --card-bg يرجع للأبيض افتراضياً
   بالغلط لعدم تعريفه، مما يُظهر بطاقة بيضاء وسط واجهة داكنة).
   ============================================================ */
:root {
  --bg: #0a0e17;
  --bg-elevated: #0f1526;
  --surface: #131b2c;
  --surface-2: #1a2437;
  --surface-3: #202c42;
  --border: #263449;
  --border-strong: #33445e;
  --text: #f1f5f9;
  --text-muted: #97a7c0;
  --text-faint: #6b7d99;

  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --accent-on: #04141f;

  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --success-on: #052e16;

  --danger: #f87171;
  --danger-strong: #ef4444;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-border: #6b2530;

  --warning: #fbbf24;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.38);

  /* أسماء متغيّرات قديمة استُخدمت مباشرة ببعض القواعد بدون تعريف —
     نبقيها معرَّفة هنا للتوافق الخلفي بدل حذفها. */
  --border-color: var(--border);
  --text-color: var(--text);
  --card-bg: var(--surface);

  color: var(--text);
  background: var(--bg);
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(56, 189, 248, 0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(74, 222, 128, 0.05), transparent 55%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

/* ------------------------- تخطيط عام ------------------------- */
.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 64px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.hidden { display: none !important; }

.centered-view, .auth-card {
  max-width: 430px;
  margin: 10vh auto;
  padding: 40px 34px;
  text-align: center;
}
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 50% -20%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

.spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  font-size: 32px;
  background: var(--accent-soft);
  border-radius: 20px;
}

h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.4rem, 4vw, 1.85rem); font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.muted, .coming-item p { color: var(--text-muted); line-height: 1.7; }

/* ------------------------- نماذج ------------------------- */
form { text-align: right; margin-top: 24px; }
label { display: block; margin: 16px 0 7px; color: #d7e2f3; font-size: 0.9rem; font-weight: 600; }

input, select, textarea {
  width: 100%;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; line-height: 1.6; }

/* حقول الروابط (type="url") ترث اتجاه الصفحة RTL بلا هذا — فيُعاد ترتيب
   علامات الرابط بصرياً بخوارزمية bidi (تأكَّد فعلياً: placeholder
   "https://example.com/anime-list/" يظهر كـ"/https://example.com/anime-list"،
   الشرطة المائلة الأخيرة تقفز لبداية النص). القيمة الفعلية المخزَّنة سليمة
   دائماً (bidi تأثير بصري فقط)، لكنها تربك أي مستخدم يتأكد من رابط لصقه
   بمظهره الملتبس. نفس الأمر لحقل البريد الإلكتروني (لاتيني دائماً).
   البديل الصحيح لـ`dir="ltr"` HTML: أخف على الإدراج بمواقع كثيرة، ونفس
   الأثر البصري تماماً لعنصر إدخال واحد السطر. */
input[type="url"], input[type="email"] { direction: ltr; text-align: left; }

/* ------------------------- أزرار ------------------------- */
button {
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 700;
  color: var(--accent-on);
  background: var(--accent);
  transition: transform 0.1s ease, filter 0.15s ease, opacity 0.15s ease;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: wait; }
form button { width: 100%; margin-top: 14px; }

.secondary-button {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}
.secondary-button:hover:not(:disabled) { background: var(--surface-3); filter: none; }

.retry-button { display: block; margin: 12px auto; }

.delete-category-button {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
}
.delete-category-button:hover:not(:disabled) { background: rgba(248, 113, 113, 0.2); filter: none; }

.open-category-button {
  width: 100%;
  margin-top: 14px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border-strong);
}

.form-error { min-height: 1.2em; margin: 14px 0 0; color: var(--danger); line-height: 1.5; font-size: 0.9rem; }
.form-message { grid-column: 1 / -1; min-height: 0; margin: 0; color: var(--success); line-height: 1.5; }
.form-message.error { color: var(--danger); }

/* ------------------------- الترويسة العلوية ------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px; }
.topbar h1 { margin: 0; font-size: 1.15rem; }
.topbar .eyebrow { margin-bottom: 2px; }

/* ------------------------- التنقّل ------------------------- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

.main-nav { margin-bottom: 10px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.nav-group-button {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700;
  padding: 12px 20px;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  flex: 1;
}
.nav-group-button:hover:not(.active) { background: var(--surface-2); filter: none; color: var(--text); }
.nav-group-button.active {
  color: var(--success-on);
  background: var(--success);
  box-shadow: var(--shadow-sm);
}

.sub-nav { margin-top: 0; padding: 0; gap: 8px; }
.sub-nav .nav-button { font-size: 0.88rem; padding: 9px 16px; }
.nav-button {
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600;
}
.nav-button:hover:not(.active) { background: var(--surface-2); filter: none; color: var(--text); }
.nav-button.active {
  color: var(--accent-on);
  background: var(--accent);
  border-color: var(--accent);
}

/* تبويبات نوع المحتوى (قنوات/أفلام/مسلسلات/أنمي) */
.content-type-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.content-type-tab {
  flex: 1 1 150px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}
.content-type-tab:hover { background: var(--surface-2); border-color: var(--border-strong); filter: none; color: var(--text); }
.content-type-tab.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(74, 222, 128, 0.14));
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  color: #fff;
}
@media (max-width: 650px) {
  .content-type-tabs { gap: 6px; }
  .content-type-tab { flex-basis: calc(50% - 6px); font-size: 0.9rem; }
}

/* ------------------------- عناوين الأقسام ------------------------- */
.eyebrow, .step-label {
  display: inline-block;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 30px 0 16px; }
.section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-heading h2 { font-size: 1.4rem; margin-bottom: 4px; }
.section-heading .muted { margin-bottom: 0; }

.count-badge {
  flex: 0 0 auto;
  padding: 7px 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ------------------------- نماذج الأقسام/القنوات ------------------------- */
.category-form-card { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr); gap: 26px; padding: 24px; margin-bottom: 20px; }
.category-form-card h2 { margin-bottom: 6px; }
.category-form-card .muted { margin-bottom: 0; }
.category-form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px; margin: 0; }
.category-form label { margin-top: 0; }
.category-form button { height: 46px; white-space: nowrap; }

.marquee-form { display: block; margin: 0; }

/* استيراد تلقائي من رابط موقع — أقسام رأسية واضحة بدل شبكة العمودين
   العامة لـ .category-form (كانت تتسبب بترتيب أزواج غير مترابطة). */
.site-import-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.site-import-form fieldset > label:first-of-type,
.site-import-form details > label:first-of-type { margin-top: 0; }
.site-import-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }

.form-card-actions, .form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
.form-card-actions button, .form-actions button { width: auto; flex: 1; }

.optional-label { color: var(--text-faint); font-size: 0.8rem; font-weight: 500; }

.category-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

.order-control { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); margin: 6px 0; }
.order-input {
  width: 54px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text);
  text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.order-input::-webkit-outer-spin-button, .order-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------- قائمة "+ إضافة" ------------------------- */
.add-menu-wrap { position: relative; }
.add-menu-toggle { color: var(--accent-on); background: var(--accent); font-weight: 800; white-space: nowrap; }
.add-menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline-end: 0;
  display: grid; gap: 3px; min-width: 230px; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.add-menu button {
  width: 100%; text-align: right; color: var(--text); background: transparent;
  font-weight: 500; padding: 10px 12px; border-radius: var(--radius-sm);
}
.add-menu button:hover:not(:disabled) { background: var(--surface-3); filter: none; }
.add-menu button:disabled { color: var(--text-faint); cursor: not-allowed; }
.add-menu button.disabled-hint { opacity: 0.55; }

/* ------------------------- شريط التحديد الجماعي ------------------------- */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px;
  background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: var(--radius-md);
}
.bulk-bar.hidden { display: none; }
.bulk-bar #categories-bulk-delete:disabled, .bulk-bar #channels-bulk-delete:disabled { opacity: 0.5; cursor: not-allowed; }

.select-all-control { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--text); font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.select-all-control input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

.select-checkbox-wrap {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
  background: rgba(10, 14, 23, 0.8); border-radius: var(--radius-sm); padding: 4px; display: flex;
  backdrop-filter: blur(2px);
}
.select-checkbox { width: 20px; height: 20px; accent-color: var(--danger-strong); margin: 0; }

/* ------------------------- حالات التحميل/الرسائل ------------------------- */
.loading-card, .message-card { padding: 36px; text-align: center; }
.loading-card p { margin: 12px 0 0; color: var(--text-muted); }
.message-card p { margin-bottom: 0; color: var(--text-muted); }
.error-card { color: var(--danger); border-color: var(--danger-border); background: rgba(248, 113, 113, 0.06); }

/* ------------------------- شبكة الأقسام ------------------------- */
.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category-card { overflow: hidden; position: relative; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.category-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.category-image { display: block; width: 100%; height: 145px; object-fit: contain; padding: 10px; background: var(--surface-2); }
.category-image-placeholder { display: grid; place-items: center; width: 100%; height: 145px; color: var(--text-faint); background: var(--surface-2); font-size: 2rem; }
.category-details { padding: 16px; }
.category-details h3 { margin: 0 0 8px; font-size: 1.05rem; }
.category-meta { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.premium-tag { color: var(--warning); }
.rating-tag { color: var(--warning); white-space: nowrap; }
.category-description { margin: 8px 0 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------- قائمة القنوات ------------------------- */
.channels-subheading { margin-top: 30px; }
.channels-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.channel-item { display: flex; align-items: center; gap: 14px; padding: 14px; position: relative; }
.channel-logo { width: 54px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.channel-info { flex: 1; min-width: 0; }
.channel-info h3, .channel-info p { margin: 0; }
.channel-info p { color: var(--text-muted); font-size: 0.85rem; margin-top: 5px; }
.channel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.channel-source { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.channel-source .source-input {
  flex: 1; min-width: 220px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text);
  font-size: 0.85rem; direction: ltr; text-align: left;
}
.channel-source button { white-space: nowrap; }
.channel-source label { display: inline-flex; align-items: center; gap: 6px; }
.source-type-select { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-size: 0.85rem; }

.source-status { font-size: 0.78rem; color: var(--success); }
.source-status.error { color: var(--danger); }
.source-help { display: block; margin: 8px 0 0; color: var(--text-faint); opacity: 1; font-size: 0.8rem; line-height: 1.6; }

.protect-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text); white-space: nowrap; }

/* بطاقات المحتوى المدمجة (أفلام/مسلسلات/أنمي وقنوات بالنمط الجديد) */
.content-item-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  min-height: 285px; padding: 0; overflow: hidden; position: relative;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.content-item-card:hover { transform: translateY(-3px); border-color: rgba(56, 189, 248, 0.45); box-shadow: var(--shadow-lg); }
.content-card-media {
  width: 100%; height: 170px; background: var(--surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.content-card-media .channel-logo {
  width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;
  border-radius: 10px; object-fit: contain; display: block; margin: auto; background: transparent;
}
.content-item-card .category-image-placeholder { width: 100%; height: 100%; border-radius: 10px; display: grid; place-items: center; font-size: 3rem; }
.content-card-info { position: relative; padding: 15px 16px 8px; min-height: 76px; }
.content-card-info h3 { margin: 0 0 7px; padding-inline-end: 34px; font-size: 1.02rem; line-height: 1.45; font-weight: 700; }
.content-card-source { margin: 0 !important; color: var(--accent) !important; font-size: 0.78rem !important; }
.content-card-number {
  position: absolute; inset-inline-end: 12px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 800;
}
.content-item-card .channel-actions { margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.content-item-card .channel-actions button { flex: 1; min-height: 40px; }
.content-item-card .select-checkbox-wrap { top: 10px; inset-inline-start: 10px; }

.content-sort-control {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px;
  padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border);
}
.content-sort-control label { font-weight: 700; color: var(--text); }
.content-sort-control select { width: auto; padding: 8px 12px; border-radius: 9px; }

/* ------------------------- نموذج "إضافة محتوى" الموحّد ------------------------- */
.channel-form-card { display: block; max-width: 1100px; padding: 20px 22px; margin-bottom: 18px; }
.channel-form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.channel-form-head h2 { margin: 0; }
.channel-form-head .muted { margin: 0; font-size: 0.86rem; }
.channel-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin: 0;
}
.channel-form label { margin: 0 0 6px; }
.channel-form input { padding: 10px 12px; }
.content-basic-field { min-width: 0; }
.channel-form .form-message { grid-column: 1 / -1; }
.channel-form .form-card-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 0; }
.channel-form .form-card-actions button { width: auto; min-width: 150px; margin-top: 0; }

.source-settings-card {
  grid-column: 1 / -1; min-width: 0; margin: 0; padding: 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elevated);
}
.source-settings-card legend { padding: 0 9px; color: var(--accent); font-weight: 800; }
.source-settings-grid { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr) auto; gap: 12px; align-items: end; }
.source-settings-grid select, .source-settings-grid input, .source-advanced input { width: 100%; min-height: 42px; }
.source-protection { align-self: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.source-advanced { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.source-advanced summary { cursor: pointer; color: var(--text); font-weight: 700; }
.source-advanced .source-header-grid { margin-top: 12px; }

.source-headers { margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; }
.source-headers summary { cursor: pointer; font-weight: 700; color: var(--text); }
.source-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.source-header-grid label { display: block; margin-bottom: 4px; }
.source-header-grid input { width: 100%; }
.source-header-grid + .source-header-grid { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ------------------------- الإعلانات ------------------------- */
.ads-master-toggle { grid-column: 1 / -1; padding: 13px 14px; margin-bottom: 4px; background: var(--accent-soft); border-radius: var(--radius-sm); }
.ads-master-toggle .protect-toggle { font-size: 0.95rem; }
.ads-master-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.ads-group-heading { grid-column: 1 / -1; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.ads-group-heading:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.ads-group-heading h3 { margin: 0; color: var(--accent); font-size: 1rem; font-weight: 800; }

/* ------------------------- المباريات ------------------------- */
.matches-status-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; margin-bottom: 20px; }
.matches-status-card button { width: auto; white-space: nowrap; }
.matches-sync-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.matches-sync-actions button { width: auto; white-space: nowrap; }
.matches-sync-hint { margin: -8px 0 20px; font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); }
.matches-debug-text { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.78rem; color: var(--text-faint); white-space: pre-wrap; direction: ltr; text-align: left; }

/* ------------------------- الرسائل الواردة ------------------------- */
.message-item { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.message-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.message-type-tag { padding: 4px 10px; border-radius: 99px; font-size: 0.78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.message-type-tag.broken-link { color: var(--danger); background: var(--danger-soft); }
.message-date { color: var(--text-faint); font-size: 0.78rem; }
.message-body { margin: 0; color: var(--text); line-height: 1.7; white-space: pre-wrap; }
.message-channel-info { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.message-status-tag { padding: 3px 9px; border-radius: 99px; font-size: 0.74rem; font-weight: 700; }
.message-status-tag.new { color: var(--accent-on); background: var(--accent); }
.message-status-tag.read { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-strong); }
.message-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.message-actions button { width: auto; padding: 8px 14px; font-size: 0.85rem; }
.message-actions button { flex: 0 1 auto; }

/* ------------------------- الشروط/الخصوصية ------------------------- */
.legal-form-card { display: block; padding: 24px; margin-bottom: 20px; }
.legal-form { display: grid; gap: 16px; margin-top: 20px; }
.legal-form label { margin: 0 0 8px; }

/* ------------------------- المرقّاع (Marquee) ------------------------- */
.marquee-preview {
  display: block; padding: 12px 18px; margin-bottom: 16px; color: var(--accent);
  font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------- الخطوة التالية ------------------------- */
.next-step { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 22px; }

/* ------------------------- الإحصائيات ------------------------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.stats-list-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.stats-list-rank {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: 0.78rem; font-weight: 800;
}
.stats-list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-list-count { flex-shrink: 0; color: var(--accent); font-weight: 800; font-size: 0.9rem; }
.stats-list-item-clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.stats-list-item-clickable:hover { border-color: var(--accent); background: var(--surface-2); }
.stats-custom-range {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 10px;
}
.stats-custom-range label {
  display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--text-muted);
}
.stats-custom-range input[type="date"] {
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text);
}
.stats-range-note { margin-top: 8px; font-size: 0.82rem; }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: 1fr; }
}
.next-step span { color: var(--accent); font-size: 0.86rem; font-weight: 700; }
.next-step p { margin: 0; color: var(--text); }

/* ============================================================
   الاستجابة (Responsive)
   ============================================================ */
@media (max-width: 850px) {
  .category-form-card, .category-form, .channel-form, .source-settings-grid { grid-template-columns: 1fr; }
  .category-form button, .channel-form button { width: 100%; }
  .form-card-actions, .form-actions { flex-direction: column; }
  .form-card-actions button, .form-actions button { width: 100%; }
  .add-menu { inset-inline-end: auto; inset-inline-start: 0; }
  .source-settings-card { grid-column: 1; }
  .channel-form-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .channel-form .form-message, .channel-form .form-card-actions { grid-column: 1; }
  .matches-status-card, .matches-sync-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .matches-sync-actions button { width: 100%; }
}

@media (max-width: 680px) {
  .page-shell { padding-top: 22px; }
  .topbar, .section-heading, .next-step { align-items: flex-start; flex-direction: column; }
  .section-actions { align-items: flex-start; flex-direction: column; }
  .categories-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .channels-list { grid-template-columns: 1fr; }
  .content-card-media { height: 190px; }
}

@media (max-width: 700px) { .source-header-grid { grid-template-columns: 1fr; } }

/* هواتف (آيفون وغيره) — الاستعلامات فوق تغطي الأعمدة والاتجاه العام،
   هذا القسم يعالج عناصر ضاقت أو تجاوزت عرض الشاشة على هاتف فعلي رغم
   ذلك: القائمة الجانبية، قائمة "+ إضافة"، أزرار القناة، وتباعد البطاقات. */
@media (max-width: 480px) {
  .page-shell { width: calc(100% - 20px); padding: 16px 0; }
  .card { border-radius: var(--radius-md); }
  .centered-view, .auth-card { margin: 8vh auto; padding: 26px 18px; }
  .topbar { padding: 16px 18px; }
  .topbar #logout-button { width: 100%; }
  .admin-nav { gap: 6px; }
  .nav-button { flex: 1 1 calc(50% - 6px); padding: 10px 8px; font-size: 0.86rem; }
  .category-form-card, .legal-form-card { padding: 16px; }
  .section-heading h2 { font-size: 1.25rem; }
  .section-actions { width: 100%; }
  .section-actions #back-to-root { width: 100%; }
  .add-menu-wrap { width: 100%; }
  .add-menu-toggle { width: 100%; }
  .add-menu { inset-inline-start: 0; inset-inline-end: 0; min-width: 0; width: 100%; }
  #categories-count { align-self: flex-start; }
  .channel-item { flex-wrap: wrap; }
  .channel-actions { width: 100%; }
  .channel-actions button { flex: 1; }
  .channel-source { width: 100%; }
  .channel-source .source-input { min-width: 0; width: 100%; }
  .channel-source button { width: 100%; }
  .category-tools { grid-template-columns: 1fr; }
  .matches-status-card { padding: 18px; }
  .matches-status-card button { width: 100%; }
  .message-actions button { flex: 1; }
}

/* ── البحث الشامل باللوحة (dashboard-search.js) ───────────────────────── */
.dash-search { position: relative; margin: 10px 0 14px; }
.dash-search-bar { display: flex; align-items: center; gap: 8px; }
.dash-search-bar input {
  flex: 1; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: inherit;
  font: inherit; outline: none;
}
.dash-search-bar input:focus { border-color: rgba(120,170,255,.55); background: rgba(255,255,255,.08); }
.dash-search-clear {
  border: 0; background: rgba(255,255,255,.08); color: inherit;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; line-height: 1;
}
.dash-search-clear:hover { background: rgba(255,255,255,.16); }

.dash-search-results {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 40;
  max-height: 60vh; overflow-y: auto;
  background: #161a22; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45); padding: 6px;
}
.dash-search-head {
  margin: 8px 8px 4px; font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.55); letter-spacing: .02em;
}
.dash-search-row {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  width: 100%; text-align: start; padding: 9px 10px; border: 0;
  background: transparent; color: inherit; border-radius: 9px;
  cursor: pointer; font: inherit;
}
.dash-search-row:hover, .dash-search-row:focus-visible { background: rgba(255,255,255,.07); }
.dash-search-kind {
  grid-row: span 2; align-self: center; font-size: .7rem; padding: 3px 8px;
  border-radius: 999px; background: rgba(120,170,255,.18); color: #9dc0ff; white-space: nowrap;
}
.dash-search-kind-ep { background: rgba(255,190,120,.16); color: #ffcf93; }
.dash-search-title { font-weight: 600; }
.dash-search-path { font-size: .76rem; color: rgba(255,255,255,.5); }
.dash-search-empty, .dash-search-more {
  margin: 10px; font-size: .82rem; color: rgba(255,255,255,.55);
}
.hidden { display: none !important; }

/* ── فحص المحتوى (dashboard-health.js) ────────────────────────────────── */
.health-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 16px; }
.health-results { display: flex; flex-direction: column; gap: 8px; }
.health-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-inline-start-width: 4px;
}
.health-high { border-inline-start-color: #ff6b6b; }
.health-medium { border-inline-start-color: #ffb454; }
.health-low { border-inline-start-color: #5aa9ff; }
.health-badge {
  font-size: .72rem; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.09);
}
.health-high .health-badge { background: rgba(255,107,107,.18); color: #ff9d9d; }
.health-medium .health-badge { background: rgba(255,180,84,.18); color: #ffd09a; }
.health-low .health-badge { background: rgba(90,169,255,.18); color: #a9d1ff; }
.health-info h4 { margin: 0 0 3px; font-size: .95rem; }
.health-info p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.6); }
.health-url {
  display: block; margin-top: 5px; font-size: .72rem; direction: ltr; text-align: start;
  color: rgba(255,255,255,.42); word-break: break-all;
}
.health-action {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: inherit; padding: 8px 13px; border-radius: 9px; cursor: pointer;
  font: inherit; white-space: nowrap;
}
.health-action:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.health-action:disabled { opacity: .5; cursor: default; }
.health-clean { padding: 18px; color: rgba(255,255,255,.6); }

/* ── بيانات وصفية بنموذج القسم ─────────────────────────────────────────
   مطوية افتراضياً: المستورد يملؤها تلقائياً، وفتحها الدائم كان سيضاعف
   طول أكثر نموذج يُستخدم باللوحة بلا فائدة يومية. */
.category-meta-fields {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}
.category-meta-fields > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
}
.category-meta-fields > summary::-webkit-details-marker { display: none; }
.category-meta-fields > summary::before {
  content: '▾';
  display: inline-block;
  margin-inline-end: 6px;
  transition: transform 0.15s ease;
}
.category-meta-fields:not([open]) > summary::before { transform: rotate(90deg); }
.category-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.category-meta-wide { grid-column: 1 / -1; }
.category-meta-grid textarea { resize: vertical; }
@media (max-width: 640px) {
  .category-meta-grid { grid-template-columns: 1fr; }
}

/* ── معاينة الاستيراد (تشغيل جاف) ───────────────────────────────────── */
.import-preview {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
}
.import-preview-head { margin: 0; font-size: 0.95rem; }
.import-preview-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}
/* العمل الذي عليه ملاحظات يُميَّز بحافة برتقالية — الهدف أن تُقرأ الملاحظة
   لا أن تُمرَّر مع بقية الأعمال السليمة. */
.import-preview-item.has-warnings {
  border-color: rgba(255, 176, 32, 0.55);
  background: rgba(255, 176, 32, 0.06);
}
.import-preview-item h4 { margin: 0 0 4px; font-size: 0.95rem; }
.import-preview-warn,
.import-preview-note,
.import-preview-eps { margin: 8px 0 0; padding-inline-start: 18px; font-size: 0.85rem; }
.import-preview-warn { color: #ffcf7a; }
/* ملاحظة تفسيرية لا إنذار — لون محايد عمداً حتى لا تُقرأ كخلل. */
.import-preview-note { color: var(--muted, #9aa4b2); }
.import-preview-eps { color: var(--muted, #9aa4b2); }
.import-preview-eps code { font-size: 0.78rem; opacity: 0.75; }
.import-preview-num {
  display: inline-block;
  min-width: 26px;
  font-weight: 700;
  color: #fff;
}

/* ============================================================
   زر «رجوع» الموحّد بالترويسة
   ============================================================ */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.nav-back-button { display: inline-flex; align-items: center; gap: 6px; }
.nav-back-button:disabled { opacity: 0.4; cursor: default; }

/* بطاقة نموذج بلا عمود عنوان (نموذج فقط) — كانت تنحشر بالعمود الضيق. */
.category-form-card:has(> form:only-child) { grid-template-columns: 1fr; }

/* ============================================================
   نماذج الإعدادات (إعدادات المشغل)
   ============================================================ */
.settings-card { padding: 26px; margin-bottom: 20px; }
.settings-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.settings-group { display: flex; flex-direction: column; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.settings-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.settings-group-title { margin: 0; color: var(--accent); font-size: 1rem; font-weight: 800; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.settings-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-field label { margin: 0; }
.settings-field input, .settings-field select { width: 100%; box-sizing: border-box; }
.settings-hint { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; }
.settings-toggle {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; cursor: pointer;
  background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius-sm);
}
.settings-toggle:hover { border-color: var(--border-strong); }
.settings-toggle input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.settings-toggle-text { display: flex; flex-direction: column; gap: 4px; }
.settings-toggle-text strong { color: var(--text); font-size: 0.95rem; }
.settings-toggle-text small { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; line-height: 1.6; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.settings-footer button { width: auto; min-width: 220px; margin: 0; }
.settings-footer .form-message { flex: 1; }

/* ============================================================
   المواقع المحفوظة (مستورد المواقع)
   ============================================================ */
.import-profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.import-profile {
  display: flex; align-items: stretch; gap: 6px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.import-profile.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.import-profile-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  margin: 0; padding: 8px 10px; width: auto; text-align: right; color: var(--text); background: transparent;
}
.import-profile-open:hover:not(:disabled) { background: var(--surface-3); filter: none; }
.import-profile-open strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.import-profile-host { direction: ltr; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
.import-profile-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-faint); font-size: 0.78rem; font-weight: 500; }
.import-profile-actions { display: flex; flex-direction: column; gap: 4px; }
.import-profile-actions button { width: auto; margin: 0; padding: 6px 9px; font-size: 0.85rem; }
.import-profiles-save { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.import-profiles-save input[type="text"] { flex: 1; min-width: 200px; }
.import-profiles-save button { width: auto; margin: 0; }

@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-footer { flex-direction: column; align-items: stretch; }
  .settings-footer button { width: 100%; min-width: 0; }
  .settings-card { padding: 18px; }
  .topbar-actions { width: 100%; }
  .topbar-actions button { flex: 1; }
}

/* إيقاف مهام الخادم */
.danger-button { color: #fff; background: var(--danger-strong); }
.server-jobs { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.server-job-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); }
.server-job-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.server-job-url { direction: ltr; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-job-row button { width: auto; margin: 0; padding: 8px 12px; }

/* نافذة النقل الجماعي */
.move-dialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 7, 15, 0.72); }
.move-dialog.hidden { display: none; }
.move-dialog-box { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.move-dialog-box h3 { margin: 0; font-size: 1.1rem; }
.move-dialog-box .muted { margin: 0; font-size: 0.85rem; }
.move-dialog-row { display: flex; align-items: center; gap: 10px; }
.move-dialog-row label { margin: 0; white-space: nowrap; }
.move-dialog-row select { flex: 1; }
.move-breadcrumb { color: var(--text-muted); font-size: 0.85rem; min-height: 1.4em; }
.link-button { width: auto; margin: 0; padding: 0 4px; color: var(--accent); background: none; font-weight: 700; }
.move-list { flex: 1; min-height: 160px; max-height: 45vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.move-row { display: flex; gap: 4px; border-radius: var(--radius-sm); }
.move-row.selected { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.move-pick { flex: 1; width: auto; margin: 0; padding: 9px 12px; text-align: right; color: var(--text); background: transparent; font-weight: 600; }
.move-pick:hover:not(:disabled) { background: var(--surface-3); filter: none; }
.move-enter { width: auto; margin: 0; padding: 6px 14px; }
.move-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.move-target { flex: 1; min-width: 0; color: var(--accent); font-size: 0.88rem; font-weight: 700; }
.move-dialog-actions { display: flex; gap: 8px; }
.move-dialog-actions button { width: auto; margin: 0; }